@varlet/ui 3.1.4 → 3.2.0-alpha.1711119852830

package/README.md

@@ -95,6 +95,9 @@ The following projects are maintained by the official team for a long time.
 | [@varlet/touch-emulator](https://github.com/varletjs/varlet/tree/dev/packages/varlet-touch-emulator) | `Desktop adapter, so that the mobile component library can run on the desktop` |
 | [@varlet/ui-playground](https://github.com/varletjs/varlet/tree/dev/packages/varlet-ui-playground) | `Varlet component library online editing tool` |
 | [@varlet/import-resolver](https://github.com/varletjs/varlet/tree/dev/packages/varlet-import-resolver)  | `A resolver for` [unplugin-vue-components](https://github.com/unplugin/unplugin-vue-components) ` used to implement Varlet and import it on demand`   |
+| [@varlet/preset-unocss](https://github.com/varletjs/varlet/tree/dev/packages/varlet-preset-unocss)  | [UnoCss](https://unocss.dev/) `presets for varlet` |
+| [@varlet/preset-tailwindcss](https://github.com/varletjs/varlet/tree/dev/packages/varlet-preset-tailwindcss)  | [tailwindcss](https://tailwindcss.com/) `presets for varlet` |
+| [varlet-theme-builder](https://github.com/varletjs/varlet-theme-builder) | `Theme generator for generating theme variables for varlet Material Design 3` | 
 | [varlet-vscode-extension](https://github.com/varletjs/varlet/tree/dev/packages/varlet-vscode-extension) | `Varlet Component Library VSCode Plugin` |
 | [vscode-theme-varlet](https://github.com/varletjs/vscode-theme-varlet)  | `Varlet VSCode Theme`   |
 | [varlet-app-example](https://github.com/varletjs/varlet-app-template)  | `Varlet component library app template`   |

package/README.zh-CN.md

@@ -95,6 +95,9 @@ createApp(App).use(Varlet).mount('#app')
 | [@varlet/touch-emulator](https://github.com/varletjs/varlet/tree/dev/packages/varlet-touch-emulator) | `桌面端适配器，让移动端组件库可以在桌面端运行` |
 | [@varlet/ui-playground](https://github.com/varletjs/varlet/tree/dev/packages/varlet-ui-playground)  | `Varlet 组件库在线编辑工具`       |
 | [@varlet/import-resolver](https://github.com/varletjs/varlet/tree/dev/packages/varlet-import-resolver)  | [unplugin-vue-components](https://github.com/unplugin/unplugin-vue-components) `的一个解析器，用于实现 Varlet 按需引入`   |
+| [@varlet/preset-unocss](https://github.com/varletjs/varlet/tree/dev/packages/varlet-preset-unocss)  | `varlet 的` [UnoCss](https://unocss.dev/) `预设` |
+| [@varlet/preset-tailwindcss](https://github.com/varletjs/varlet/tree/dev/packages/varlet-preset-tailwindcss)  | `varlet 的` [tailwindcss](https://tailwindcss.com/) `预设` |
+| [varlet-theme-builder](https://github.com/varletjs/varlet-theme-builder) | `主题生成器，用于为 varlet material design 3 生成主题变量` | 
 | [varlet-vscode-extension](https://github.com/varletjs/varlet/tree/dev/packages/varlet-vscode-extension)  | `Varlet 组件库 VSCode 插件`   |
 | [vscode-theme-varlet](https://github.com/varletjs/vscode-theme-varlet)  | `Varlet VSCode 主题`   |
 | [varlet-app-example](https://github.com/varletjs/varlet-app-template)  | `Varlet 组件库移动端模板`   |
@@ -151,4 +154,4 @@ createApp(App).use(Varlet).mount('#app')
 #### 微信 / 支付宝
 
 <img style="width: 25%" src="https://cdn.jsdelivr.net/gh/varletjs/varlet-static/wechat.jpg" />
-<img style="width: 25%" src="https://cdn.jsdelivr.net/gh/varletjs/varlet-static/alipay.jpg" />
+<img style="width: 25%" src="https://cdn.jsdelivr.net/gh/varletjs/varlet-static/alipay.jpg" />

package/es/action-sheet/style/index.mjs

@@ -3,5 +3,5 @@ import '../../icon/icon.css'
 import '../../ripple/ripple.css'
 import '../../popup/popup.css'
 import '../actionSheet.css'
-import '../ActionItemSfc.css'
 import '../ActionSheetSfc.css'
+import '../ActionItemSfc.css'

package/es/bottom-navigation/BottomNavigation.mjs

@@ -35,7 +35,16 @@ function __render__(_ctx, _cache) {
   return _openBlock(), _createElementBlock(
     "div",
     {
-      class: _normalizeClass(_ctx.classes(_ctx.n(), _ctx.n("$--box"), [_ctx.fixed, _ctx.n("--fixed")], [_ctx.border, _ctx.n("--border")], [_ctx.safeArea, _ctx.n("--safe-area")])),
+      class: _normalizeClass(
+        _ctx.classes(
+          _ctx.n(),
+          _ctx.n("$--box"),
+          [_ctx.fixed, _ctx.n("--fixed")],
+          [_ctx.border, _ctx.n("--border")],
+          [_ctx.safeArea, _ctx.n("--safe-area")],
+          [_ctx.variant, _ctx.n("--variant")]
+        )
+      ),
       ref: "bottomNavigationDom",
       style: _normalizeStyle(`z-index:${_ctx.zIndex}`)
     },
@@ -67,12 +76,14 @@ const __sfc__ = defineComponent({
     const active = computed(() => props2.active);
     const activeColor = computed(() => props2.activeColor);
     const inactiveColor = computed(() => props2.inactiveColor);
+    const variant = computed(() => props2.variant);
     const fabProps = ref({});
     const { length, bottomNavigationItems, bindBottomNavigationItem } = useBottomNavigationItems();
     const bottomNavigationProvider = {
       active,
       activeColor,
       inactiveColor,
+      variant,
       onToggle
     };
     bindBottomNavigationItem(bottomNavigationProvider);

package/es/bottom-navigation/bottomNavigation.css

@@ -1 +1 @@
-:root { --bottom-navigation-height: 50px; --bottom-navigation-z-index: 1; --bottom-navigation-background-color: var(--color-surface-container-high); --bottom-navigation-border-color: var(--color-outline); --bottom-navigation-fab-offset: 4px; --bottom-navigation-fab-border-radius: 50%;}.var-bottom-navigation { width: 100%; height: var(--bottom-navigation-height); display: flex; position: relative; background-color: var(--bottom-navigation-background-color); transition: background-color 250ms, border-color 250ms; -webkit-tap-highlight-color: transparent;}.var-bottom-navigation--safe-area { padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); box-sizing: content-box !important;}.var-bottom-navigation--fixed { position: fixed; left: 0; bottom: 0;}.var-bottom-navigation--border { border-top: 1px solid var(--bottom-navigation-border-color);}.var-bottom-navigation__fab[var-bottom-navigation__fab] { width: var(--bottom-navigation-height); height: var(--bottom-navigation-height); border-radius: var(--bottom-navigation-fab-border-radius); position: absolute; z-index: 2; transform: translateY(-50%); overflow: hidden; transition: right 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;}.var-bottom-navigation--fab-center { right: calc(50% - var(--bottom-navigation-height) / 2);}.var-bottom-navigation--fab-right { right: var(--bottom-navigation-fab-offset);}
+:root { --bottom-navigation-height: 50px; --bottom-navigation-variant-height: 66px; --bottom-navigation-z-index: 1; --bottom-navigation-background-color: var(--color-surface-container-high); --bottom-navigation-border-color: var(--color-outline); --bottom-navigation-fab-offset: 4px; --bottom-navigation-fab-border-radius: 50%;}.var-bottom-navigation { width: 100%; height: var(--bottom-navigation-height); display: flex; position: relative; background-color: var(--bottom-navigation-background-color); transition: background-color 250ms, border-color 250ms; -webkit-tap-highlight-color: transparent;}.var-bottom-navigation--safe-area { padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); box-sizing: content-box !important;}.var-bottom-navigation--fixed { position: fixed; left: 0; bottom: 0;}.var-bottom-navigation--border { border-top: 1px solid var(--bottom-navigation-border-color);}.var-bottom-navigation--variant { height: var(--bottom-navigation-variant-height);}.var-bottom-navigation__fab[var-bottom-navigation__fab] { width: var(--bottom-navigation-height); height: var(--bottom-navigation-height); border-radius: var(--bottom-navigation-fab-border-radius); position: absolute; z-index: 2; transform: translateY(-50%); overflow: hidden; transition: right 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;}.var-bottom-navigation--fab-center { right: calc(50% - var(--bottom-navigation-height) / 2);}.var-bottom-navigation--fab-right { right: var(--bottom-navigation-fab-offset);}

package/es/bottom-navigation/props.mjs

@@ -10,6 +10,7 @@ const props = {
   },
   fixed: Boolean,
   border: Boolean,
+  variant: Boolean,
   safeArea: Boolean,
   activeColor: String,
   inactiveColor: String,

package/es/bottom-navigation-item/BottomNavigationItem.mjs

@@ -11,7 +11,7 @@ const defaultBadgeProps = {
   type: "danger",
   dot: true
 };
-import { renderSlot as _renderSlot, resolveComponent as _resolveComponent, normalizeClass as _normalizeClass, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, mergeProps as _mergeProps, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, createElementVNode as _createElementVNode, normalizeStyle as _normalizeStyle, resolveDirective as _resolveDirective, createElementBlock as _createElementBlock, withDirectives as _withDirectives } from "vue";
+import { renderSlot as _renderSlot, resolveComponent as _resolveComponent, normalizeClass as _normalizeClass, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, mergeProps as _mergeProps, withCtx as _withCtx, createElementVNode as _createElementVNode, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, normalizeStyle as _normalizeStyle, resolveDirective as _resolveDirective, createElementBlock as _createElementBlock, withDirectives as _withDirectives } from "vue";
 function __render__(_ctx, _cache) {
   const _component_var_icon = _resolveComponent("var-icon");
   const _component_var_badge = _resolveComponent("var-badge");
@@ -19,26 +19,58 @@ function __render__(_ctx, _cache) {
   return _withDirectives((_openBlock(), _createElementBlock(
     "button",
     {
-      class: _normalizeClass(_ctx.classes(_ctx.n(), _ctx.n("$--box"), [_ctx.isActive, _ctx.n("--active")])),
+      class: _normalizeClass(_ctx.classes(_ctx.n(), _ctx.n("$--box"), [_ctx.variant, _ctx.n("--variant-padding")], [_ctx.isActive && !_ctx.variant, _ctx.n("--active")])),
       style: _normalizeStyle({
         color: _ctx.isActive ? _ctx.activeColor : _ctx.inactiveColor
       }),
       onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleClick && _ctx.handleClick(...args))
     },
     [
-      _renderSlot(_ctx.$slots, "icon", { active: _ctx.isActive }, () => [
-        _ctx.icon ? (_openBlock(), _createBlock(_component_var_icon, {
-          key: 0,
-          name: _ctx.icon,
-          namespace: _ctx.namespace,
-          class: _normalizeClass(_ctx.n("icon")),
-          "var-bottom-navigation-item-cover": ""
-        }, null, 8, ["name", "namespace", "class"])) : _createCommentVNode("v-if", true)
-      ]),
-      _ctx.badge ? (_openBlock(), _createBlock(_component_var_badge, _mergeProps({ key: 0 }, _ctx.badgeProps, {
-        class: _ctx.n("badge"),
-        "var-bottom-navigation-item-cover": ""
-      }), null, 16, ["class"])) : _createCommentVNode("v-if", true),
+      _createElementVNode(
+        "div",
+        {
+          class: _normalizeClass(
+            _ctx.classes(
+              _ctx.n("icon-container"),
+              [_ctx.variant, _ctx.n("--variant-icon-container")],
+              [_ctx.isActive && _ctx.variant, _ctx.n("--variant-active")]
+            )
+          )
+        },
+        [
+          _ctx.badge ? (_openBlock(), _createBlock(_component_var_badge, _mergeProps({ key: 0 }, _ctx.badgeProps, {
+            class: _ctx.n("badge"),
+            "var-bottom-navigation-item-cover": ""
+          }), {
+            default: _withCtx(() => [
+              _renderSlot(_ctx.$slots, "icon", { active: _ctx.isActive }, () => [
+                _ctx.icon ? (_openBlock(), _createBlock(_component_var_icon, {
+                  key: 0,
+                  name: _ctx.icon,
+                  namespace: _ctx.namespace,
+                  class: _normalizeClass(_ctx.n("icon")),
+                  "var-bottom-navigation-item-cover": ""
+                }, null, 8, ["name", "namespace", "class"])) : _createCommentVNode("v-if", true)
+              ])
+            ]),
+            _: 3
+            /* FORWARDED */
+          }, 16, ["class"])) : _renderSlot(_ctx.$slots, "icon", {
+            key: 1,
+            active: _ctx.isActive
+          }, () => [
+            _ctx.icon ? (_openBlock(), _createBlock(_component_var_icon, {
+              key: 0,
+              name: _ctx.icon,
+              namespace: _ctx.namespace,
+              class: _normalizeClass(_ctx.n("icon")),
+              "var-bottom-navigation-item-cover": ""
+            }, null, 8, ["name", "namespace", "class"])) : _createCommentVNode("v-if", true)
+          ])
+        ],
+        2
+        /* CLASS */
+      ),
       _createElementVNode(
         "span",
         {
@@ -76,7 +108,7 @@ const __sfc__ = defineComponent({
     const isActive = computed(() => [name2.value, index.value].includes(active.value));
     const badgeProps = computed(() => props2.badge === true ? defaultBadgeProps : props2.badge);
     const { index, bottomNavigation, bindBottomNavigation } = useBottomNavigation();
-    const { active, activeColor, inactiveColor } = bottomNavigation;
+    const { active, activeColor, inactiveColor, variant } = bottomNavigation;
     const bottomNavigationItemProvider = {
       name: name2,
       index
@@ -93,6 +125,7 @@ const __sfc__ = defineComponent({
       inactiveColor,
       badgeProps,
       isActive,
+      variant,
       n,
       classes,
       handleClick

package/es/bottom-navigation-item/bottomNavigationItem.css

@@ -1 +1 @@
-:root { --bottom-navigation-item-font-size: var(--font-size-sm); --bottom-navigation-item-inactive-color: #646566; --bottom-navigation-item-active-color: var(--color-primary); --bottom-navigation-item-active-background-color: var(--color-surface-container-high); --bottom-navigation-item-line-height: 1; --bottom-navigation-item-icon-size: 22px; --bottom-navigation-item-icon-margin-bottom: 5px;}.var-bottom-navigation-item { height: 100%; padding: 6px 12px 8px; position: relative; display: inline-flex; flex: 1 1 0%; flex-direction: column; align-items: center; justify-content: center; line-height: var(--bottom-navigation-item-line-height); color: var(--bottom-navigation-item-inactive-color); cursor: pointer; user-select: none; vertical-align: middle; appearance: none; text-decoration: none; background-color: transparent; outline: 0; border: 0; transition: color 250ms, margin 250ms;}.var-bottom-navigation-item--active { color: var(--bottom-navigation-item-active-color); background-color: var(--bottom-navigation-item-active-background-color); transition: background-color 250ms;}.var-bottom-navigation-item--active .var-bottom-navigation-item__label { font-size: calc(var(--bottom-navigation-item-font-size) * 1.16);}.var-bottom-navigation-item--right-half-space { margin-right: calc(var(--bottom-navigation-height) / 2);}.var-bottom-navigation-item--left-half-space { margin-left: calc(var(--bottom-navigation-height) / 2);}.var-bottom-navigation-item--right-space { margin-right: calc(var(--bottom-navigation-height) + var(--bottom-navigation-fab-offset));}.var-bottom-navigation-item__icon[var-bottom-navigation-item-cover] { font-size: var(--bottom-navigation-item-icon-size);}.var-bottom-navigation-item__badge[var-bottom-navigation-item-cover] { position: absolute; left: 4px; transform: translateY(-22px);}.var-bottom-navigation-item__label { margin-top: var(--bottom-navigation-item-icon-margin-bottom); font-size: var(--bottom-navigation-item-font-size); transition: font-size 0.2s ease 0.1s; white-space: nowrap;}
+:root { --bottom-navigation-item-font-size: var(--font-size-sm); --bottom-navigation-item-inactive-color: #646566; --bottom-navigation-item-active-color: var(--color-primary); --bottom-navigation-item-active-background-color: var(--color-surface-container-high); --bottom-navigation-item-variant-active-background-color: var(--color-primary-container); --bottom-navigation-item-variant-active-color: var(--color-on-primary-container); --bottom-navigation-item-line-height: 1; --bottom-navigation-item-icon-size: 22px; --bottom-navigation-item-icon-margin-bottom: 5px; --bottom-navigation-item-variant-icon-container-height: 30px; --bottom-navigation-item-variant-icon-container-border-radius: 100px; --bottom-navigation-item-variant-icon-container-max-width: 58px;}.var-bottom-navigation-item { height: 100%; padding-bottom: 2px; position: relative; display: inline-flex; flex: 1 1 0%; flex-direction: column; align-items: center; justify-content: center; line-height: var(--bottom-navigation-item-line-height); color: var(--bottom-navigation-item-inactive-color); cursor: pointer; user-select: none; vertical-align: middle; appearance: none; text-decoration: none; background-color: transparent; outline: 0; border: 0; transition: color 250ms, margin 250ms;}.var-bottom-navigation-item--variant-padding { padding-bottom: 6px;}.var-bottom-navigation-item--active { color: var(--bottom-navigation-item-active-color); background-color: var(--bottom-navigation-item-active-background-color); transition: background-color 250ms;}.var-bottom-navigation-item--active .var-bottom-navigation-item__label { font-size: calc(var(--bottom-navigation-item-font-size) * 1.16);}.var-bottom-navigation-item--variant-icon-container { display: flex; justify-content: center; align-items: center; width: 0; height: var(--bottom-navigation-item-variant-icon-container-height); border-radius: var(--bottom-navigation-item-variant-icon-container-border-radius); max-width: var(--bottom-navigation-item-variant-icon-container-max-width);}.var-bottom-navigation-item--variant-active { color: var(--bottom-navigation-item-variant-active-color); background-color: var(--bottom-navigation-item-variant-active-background-color); width: 100%; transition: background-color 0.2s, width 0.15s;}.var-bottom-navigation-item--right-half-space { margin-right: calc(var(--bottom-navigation-height) / 2);}.var-bottom-navigation-item--left-half-space { margin-left: calc(var(--bottom-navigation-height) / 2);}.var-bottom-navigation-item--right-space { margin-right: calc(var(--bottom-navigation-height) + var(--bottom-navigation-fab-offset));}.var-bottom-navigation-item__icon[var-bottom-navigation-item-cover] { font-size: var(--bottom-navigation-item-icon-size);}.var-bottom-navigation-item__badge[var-bottom-navigation-item-cover] { margin-top: 6px; margin-right: -4px;}.var-bottom-navigation-item__label { margin-top: var(--bottom-navigation-item-icon-margin-bottom); font-size: var(--bottom-navigation-item-font-size); transition: font-size 0.2s ease 0.1s; white-space: nowrap;}

package/es/floating-panel/FloatingPanel.mjs

@@ -76,7 +76,7 @@ const __sfc__ = defineComponent({
     const contentRef = ref(null);
     const { height: windowHeight } = useWindowSize();
     const defaultEndAnchor = computed(() => windowHeight.value * 0.6);
-    const anchor = useVModel(props2, "anchor");
+    const anchor = useVModel(props2, "anchor", { defaultValue: DEFAULT_START_ANCHOR });
     const anchors = computed(() => {
       const defaultAnchors = [DEFAULT_START_ANCHOR, defaultEndAnchor.value];
       const { anchors: anchors2 } = props2;

package/es/index.bundle.mjs

@@ -262,7 +262,7 @@ import './tooltip/style/index.mjs'
 import './uploader/style/index.mjs'
 import './watermark/style/index.mjs'
 
-const version = '3.1.4'
+const version = '3.2.0-alpha.1711119852830'
 
 function install(app) {
   ActionSheet.install && app.use(ActionSheet)

package/es/index.mjs

@@ -174,7 +174,7 @@ export * from './tooltip/index.mjs'
 export * from './uploader/index.mjs'
 export * from './watermark/index.mjs'
 
-const version = '3.1.4'
+const version = '3.2.0-alpha.1711119852830'
 
 function install(app) {
   ActionSheet.install && app.use(ActionSheet)