varlet
varlet copied to clipboard
A mobile component library based on Vue3, Material Design 2, Material Design 3, and supports desktop development.
[Playground](https://varletjs.org/playground/?initialTheme=md3DarkTheme#eyJBcHAudnVlIjoiPHRlbXBsYXRlPlxuICA8ZGl2IHN0eWxlPVwiZGlzcGxheTpmbGV4O3dpZHRoOjMwMHB4XCI+XG4gICAgPGRpdiBzdHlsZT1cIndpZHRoOjEwMHB4XCI+PC9kaXY+XG4gICAgPHZhci1lbGxpcHNpcyBzdHlsZT1cImZsZXg6MVwiPlxuICAgICAg5YW25a6e5rKh5pyJ5LuA5LmI5LqL5oOF5piv5LiN5Y+v6IO955qE77yM5oiR6YO95ou/5Yiw5LiW55WM5Yag5Yab5LqG77yM55yf55qE5rKh5pyJ5LuA5LmI5LqL5oOF5piv5LiN5Y+v6IO955qE44CCXG4gICAgPC92YXItZWxsaXBzaXM+XG4gIDwvZGl2PlxuPC90ZW1wbGF0ZT5cbiIsIkFwcFdyYXBwZXIudnVlIjoiPHNjcmlwdCBzZXR1cD5cbmltcG9ydCBBcHAgZnJvbSAnLi9BcHAudnVlJ1xuaW1wb3J0IHsgaW5zdGFsbFZhcmxldFVJIH0gZnJvbSAnLi92YXJsZXQtcmVwbC1wbHVnaW4uanMnXG5cbmluc3RhbGxWYXJsZXRVSSgpXG48L3NjcmlwdD5cblxuPHRlbXBsYXRlPlxuICA8QXBwIC8+XG48L3RlbXBsYXRlPlxuIiwidmFybGV0LXJlcGwtcGx1Z2luLmpzIjoiaW1wb3J0IFZhcmxldFVJIGZyb20gJ0B2YXJsZXQvdWknXG5pbXBvcnQgeyBnZXRDdXJyZW50SW5zdGFuY2UgfSBmcm9tICd2dWUnXG5cbmNvbnN0IHZhcmxldENzcyA9ICdodHRwczovL2Nkbi5qc2RlbGl2ci5uZXQvbnBtL0B2YXJsZXQvdWkvZXMvdmFybGV0LmNzcydcbmNvbnN0IHZhcmxldFRvdWNoRW11bGF0b3IgPSAnaHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L25wbS9AdmFybGV0L3RvdWNoLWVtdWxhdG9yL2lpZmUuanMnXG5cbmF3YWl0IGFwcGVuZFN0eWxlKClcblxuZXhwb3J0IGZ1bmN0aW9uIGluc3RhbGxWYXJsZXRVSSgpIHtcbiAgY29uc3QgeyBwYXJlbnQgfSA9IHdpbmRvd1xuXG4gIGNvbnN0IHN0eWxlID0gZG9jdW1lbnQuY3JlYXRlRWxlbWVudCgnc3R5bGUnKVxuICBzdHlsZS5pbm5lckhUTUwgPSBgXG4gICAgYm9keSB7XG4gICAgICBtaW4taGVpZ2h0OiAxMDB2aDtcbiAgICAgIHBhZGRpbmc6IDE2cHg7XG4gICAgICBtYXJnaW46IDA7XG4gICAgICBjb2xvcjogdmFyKC0tY29sb3ItdGV4dCk7XG4gICAgICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1jb2xvci1ib2R5KTtcbiAgICB9XG5cbiAgICAqOjotd2Via2l0LXNjcm9sbGJhciB7XG4gICAgICBkaXNwbGF5OiBub25lO1xuICAgIH1cbiAgYFxuICBkb2N1bWVudC5oZWFkLmFwcGVuZENoaWxkKHN0eWxlKVxuXG4gIGNvbnN0IHNjcmlwdCA9IGRvY3VtZW50LmNyZWF0ZUVsZW1lbnQoJ3NjcmlwdCcpXG4gIHNjcmlwdC5zcmMgPSB2YXJsZXRUb3VjaEVtdWxhdG9yXG4gIGRvY3VtZW50LmJvZHkuYXBwZW5kQ2hpbGQoc2NyaXB0KVxuXG4gIGNvbnN0IHRoZW1lTWFwID0ge1xuICAgIGxpZ2h0VGhlbWU6IG51bGwsXG4gICAgZGFya1RoZW1lOiBWYXJsZXRVSS5UaGVtZXMuZGFyayxcbiAgICBtZDNMaWdodFRoZW1lOiBWYXJsZXRVSS5UaGVtZXMubWQzTGlnaHQsXG4gICAgbWQzRGFya1RoZW1lOiBWYXJsZXRVSS5UaGVtZXMubWQzRGFyayxcbiAgfVxuXG4gIGNvbnN0IHRoZW1lID0gcGFyZW50LmRvY3VtZW50LmRvY3VtZW50RWxlbWVudC5nZXRBdHRyaWJ1dGUoJ3RoZW1lJylcblxuICBpZiAodGhlbWUpIHtcbiAgICBWYXJsZXRVSS5TdHlsZVByb3ZpZGVyKHRoZW1lTWFwW3RoZW1lXSlcbiAgfVxuXG4gIHdpbmRvdy5hZGRFdmVudExpc3RlbmVyKCdtZXNzYWdlJywgKHsgZGF0YSB9KSA9PiB7XG4gICAgaWYgKGRhdGEuYWN0aW9uID09PSAndGhlbWUtY2hhbmdlJykge1xuICAgICAgVmFybGV0VUkuU3R5bGVQcm92aWRlcih0aGVtZU1hcFtkYXRhLnZhbHVlXSlcbiAgICB9XG4gIH0pXG5cbiAgZG9jdW1lbnQuYWRkRXZlbnRMaXN0ZW5lcignY2xpY2snLCAoKSA9PiB7XG4gICAgd2luZG93LnBhcmVudC5kb2N1bWVudC5kaXNwYXRjaEV2ZW50KG5ldyBFdmVudCgnY2xpY2snKSlcbiAgfSlcblxuICBjb25zdCBpbnN0YW5jZSA9IGdldEN1cnJlbnRJbnN0YW5jZSgpXG4gIGluc3RhbmNlLmFwcENvbnRleHQuYXBwLnVzZShWYXJsZXRVSSlcbn1cblxuZXhwb3J0IGZ1bmN0aW9uIGFwcGVuZFN0eWxlKCkge1xuICByZXR1cm4gbmV3IFByb21pc2UoKHJlc29sdmUsIHJlamVjdCkgPT4ge1xuICAgIGNvbnN0IGxpbmsgPSBkb2N1bWVudC5jcmVhdGVFbGVtZW50KCdsaW5rJylcbiAgICBsaW5rLnJlbCA9ICdzdHlsZXNoZWV0J1xuICAgIGxpbmsuaHJlZiA9IHZhcmxldENzc1xuICAgIGxpbmsub25sb2FkID0gcmVzb2x2ZVxuICAgIGxpbmsub25lcnJvciA9IHJlamVjdFxuICAgIGRvY3VtZW50LmhlYWQuYXBwZW5kQ2hpbGQobGluaylcbiAgfSlcbn0iLCJpbXBvcnQtbWFwLmpzb24iOiJ7XG4gIFwiaW1wb3J0c1wiOiB7XG4gICAgXCJAdmFybGV0L3VpXCI6IFwiaHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L25wbS9AdmFybGV0L3VpL2VzL3ZhcmxldC5lc20uanNcIixcbiAgICBcIkB2YXJsZXQvdWkvanNvbi9hcmVhLmpzb25cIjogXCIuL3ZhcmxldC1hcmVhLmpzXCIsXG4gICAgXCJ6b2RcIjogXCJodHRwczovL2Nkbi5qc2RlbGl2ci5uZXQvbnBtL3pvZC9saWIvaW5kZXgubWpzXCIsXG4gICAgXCJzaGlraVwiOiBcImh0dHBzOi8vZXNtLnNoL3NoaWtpQDEuMC4wXCJcbiAgfVxufSIsInRzY29uZmlnLmpzb24iOiJ7XG4gIFwiY29tcGlsZXJPcHRpb25zXCI6IHtcbiAgICBcImFsbG93SnNcIjogdHJ1ZSxcbiAgICBcImNoZWNrSnNcIjogdHJ1ZSxcbiAgICBcImpzeFwiOiBcIlByZXNlcnZlXCIsXG4gICAgXCJ0YXJnZXRcIjogXCJFU05leHRcIixcbiAgICBcIm1vZHVsZVwiOiBcIkVTTmV4dFwiLFxuICAgIFwibW9kdWxlUmVzb2x1dGlvblwiOiBcIkJ1bmRsZXJcIixcbiAgICBcImFsbG93SW1wb3J0aW5nVHNFeHRlbnNpb25zXCI6IHRydWVcbiAgfSxcbiAgXCJ2dWVDb21waWxlck9wdGlvbnNcIjoge1xuICAgIFwidGFyZ2V0XCI6IDMuM1xuICB9XG59In0=)
# Feature request 🚀 ### Expected: Allow - Expose `inputmode` attribute for Input component - Better mobile keyboard control - No breaking changes ### Examples: ```js // Decimal keyboard for...
如下使用 [unplugin-icons](https://github.com/unplugin/unplugin-icons) 图标 虽然这种场景可以使用插槽实现,但是相较来说 icon 相关参数支持 Component 类型会更加灵活 ```html import IconVue from 'virtual:icons/logos/vue' import IconAccount from '~icons/line-md/account' 这是单元格 ```
> Varlet 是一款我非常喜欢的组件库,我也做了几次虽然不大的 issue 和 pr > 第一次看到这个组件库的时候,抉择之下还是放弃了使用。因为并不是我更喜欢的 Material Design 3 (Material You)。 > 但是感到,虽然 Vue Material 的组件库似乎不少,但是基本上都是 M2,对 M3 还原的好的基本上组件数量堪忧。(Vuetify 目前对 M3 的支持还是稀烂) > 后面看到 Varlet 支持了 M3,就用回了 Varlet,虽然不如我期待得那么...
## Checklist List of tasks you have already done and plan to do. - [ ] Fix linting errors - [ ] Tests have been added / updated (or snapshots)...
# Feature request 🚀 ### Expected: 目前Varlet UI 是运行期间动态切换主题的,即使不需要默认主题mdLight2,也会将该主题的css打包到最终产物中。而且运行时的主题切换会产生一定的延迟,需要手动处理样式闪烁的问题。希望能提供让 Varlet UI 库支持构建期切换主题的功能,即让主题色等样式在打包编译时就确定下来,而不是依赖运行时动态切换。 ### Others: 相关的issue: https://github.com/varletjs/varlet-nuxt/issues/23
## Checklist List of tasks you have already done and plan to do. - [x] Fix linting errors - [x] Tests have been added / updated (or snapshots) ## Change...
## Checklist List of tasks you have already done and plan to do. - [ ] Fix linting errors - [x] Tests have been added / updated (or snapshots) ##...
# Bug report 🐞 ## Version & Environment ## Expectation ## Actual results (or Errors) ## Reproduction link