@varlet/ui 3.1.3 → 3.2.0-alpha.1710928822670

package/lib/varlet.cjs.js

@@ -3818,6 +3818,7 @@ const props$15 = {
   },
   fixed: Boolean,
   border: Boolean,
+  variant: Boolean,
   safeArea: Boolean,
   activeColor: String,
   inactiveColor: String,
@@ -3869,7 +3870,16 @@ function __render__$1c(_ctx, _cache) {
   return vue.openBlock(), vue.createElementBlock(
     "div",
     {
-      class: vue.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: vue.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: vue.normalizeStyle(`z-index:${_ctx.zIndex}`)
     },
@@ -3901,12 +3911,14 @@ const __sfc__$1d = vue.defineComponent({
     const active = vue.computed(() => props2.active);
     const activeColor = vue.computed(() => props2.activeColor);
     const inactiveColor = vue.computed(() => props2.inactiveColor);
+    const variant = vue.computed(() => props2.variant);
     const fabProps = vue.ref({});
     const { length, bottomNavigationItems, bindBottomNavigationItem } = useBottomNavigationItems();
     const bottomNavigationProvider = {
       active,
       activeColor,
       inactiveColor,
+      variant,
       onToggle
     };
     bindBottomNavigationItem(bottomNavigationProvider);
@@ -4057,26 +4069,58 @@ function __render__$1b(_ctx, _cache) {
   return vue.withDirectives((vue.openBlock(), vue.createElementBlock(
     "button",
     {
-      class: vue.normalizeClass(_ctx.classes(_ctx.n(), _ctx.n("$--box"), [_ctx.isActive, _ctx.n("--active")])),
+      class: vue.normalizeClass(_ctx.classes(_ctx.n(), _ctx.n("$--box"), [_ctx.variant, _ctx.n("--variant-padding")], [_ctx.isActive && !_ctx.variant, _ctx.n("--active")])),
       style: vue.normalizeStyle({
         color: _ctx.isActive ? _ctx.activeColor : _ctx.inactiveColor
       }),
       onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleClick && _ctx.handleClick(...args))
     },
     [
-      vue.renderSlot(_ctx.$slots, "icon", { active: _ctx.isActive }, () => [
-        _ctx.icon ? (vue.openBlock(), vue.createBlock(_component_var_icon, {
-          key: 0,
-          name: _ctx.icon,
-          namespace: _ctx.namespace,
-          class: vue.normalizeClass(_ctx.n("icon")),
-          "var-bottom-navigation-item-cover": ""
-        }, null, 8, ["name", "namespace", "class"])) : vue.createCommentVNode("v-if", true)
-      ]),
-      _ctx.badge ? (vue.openBlock(), vue.createBlock(_component_var_badge, vue.mergeProps({ key: 0 }, _ctx.badgeProps, {
-        class: _ctx.n("badge"),
-        "var-bottom-navigation-item-cover": ""
-      }), null, 16, ["class"])) : vue.createCommentVNode("v-if", true),
+      vue.createElementVNode(
+        "div",
+        {
+          class: vue.normalizeClass(
+            _ctx.classes(
+              _ctx.n("icon-container"),
+              [_ctx.variant, _ctx.n("--variant-icon-container")],
+              [_ctx.isActive && _ctx.variant, _ctx.n("--variant-active")]
+            )
+          )
+        },
+        [
+          _ctx.badge ? (vue.openBlock(), vue.createBlock(_component_var_badge, vue.mergeProps({ key: 0 }, _ctx.badgeProps, {
+            class: _ctx.n("badge"),
+            "var-bottom-navigation-item-cover": ""
+          }), {
+            default: vue.withCtx(() => [
+              vue.renderSlot(_ctx.$slots, "icon", { active: _ctx.isActive }, () => [
+                _ctx.icon ? (vue.openBlock(), vue.createBlock(_component_var_icon, {
+                  key: 0,
+                  name: _ctx.icon,
+                  namespace: _ctx.namespace,
+                  class: vue.normalizeClass(_ctx.n("icon")),
+                  "var-bottom-navigation-item-cover": ""
+                }, null, 8, ["name", "namespace", "class"])) : vue.createCommentVNode("v-if", true)
+              ])
+            ]),
+            _: 3
+            /* FORWARDED */
+          }, 16, ["class"])) : vue.renderSlot(_ctx.$slots, "icon", {
+            key: 1,
+            active: _ctx.isActive
+          }, () => [
+            _ctx.icon ? (vue.openBlock(), vue.createBlock(_component_var_icon, {
+              key: 0,
+              name: _ctx.icon,
+              namespace: _ctx.namespace,
+              class: vue.normalizeClass(_ctx.n("icon")),
+              "var-bottom-navigation-item-cover": ""
+            }, null, 8, ["name", "namespace", "class"])) : vue.createCommentVNode("v-if", true)
+          ])
+        ],
+        2
+        /* CLASS */
+      ),
       vue.createElementVNode(
         "span",
         {
@@ -4114,7 +4158,7 @@ const __sfc__$1c = vue.defineComponent({
     const isActive = vue.computed(() => [name2.value, index.value].includes(active.value));
     const badgeProps = vue.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
@@ -4131,6 +4175,7 @@ const __sfc__$1c = vue.defineComponent({
       inactiveColor,
       badgeProps,
       isActive,
+      variant,
       n: n$1b,
       classes: classes$Z,
       handleClick
@@ -14600,7 +14645,7 @@ const __sfc__$M = vue.defineComponent({
     const contentRef = vue.ref(null);
     const { height: windowHeight } = useWindowSize();
     const defaultEndAnchor = vue.computed(() => windowHeight.value * 0.6);
-    const anchor = useVModel(props2, "anchor");
+    const anchor = useVModel(props2, "anchor", { defaultValue: DEFAULT_START_ANCHOR });
     const anchors = vue.computed(() => {
       const defaultAnchors = [DEFAULT_START_ANCHOR, defaultEndAnchor.value];
       const { anchors: anchors2 } = props2;
@@ -22710,7 +22755,7 @@ var stdin_default$3r = vue.defineComponent({
           lastIndex
         });
         return vue.createVNode("div", {
-          "class": classes$a([direction === "column", n$d("--full")]),
+          "class": classes$a([direction === "column", n$d("--auto")]),
           "style": {
             margin
           }
@@ -23432,6 +23477,9 @@ const props$5 = {
     type: [Number, String],
     default: "100%"
   },
+  scrollerHeight: {
+    type: [Number, String]
+  },
   elevation: {
     type: [Boolean, Number, String],
     default: true
@@ -23448,7 +23496,8 @@ function __render__$6(_ctx, _cache) {
       vue.createElementVNode(
         "div",
         {
-          class: vue.normalizeClass(_ctx.n("main"))
+          class: vue.normalizeClass(_ctx.n("main")),
+          style: vue.normalizeStyle({ height: _ctx.toSizeUnit(_ctx.scrollerHeight) })
         },
         [
           vue.createElementVNode(
@@ -23464,8 +23513,8 @@ function __render__$6(_ctx, _cache) {
             /* CLASS, STYLE */
           )
         ],
-        2
-        /* CLASS */
+        6
+        /* CLASS, STYLE */
       ),
       _ctx.$slots.footer ? (vue.openBlock(), vue.createElementBlock(
         "div",
@@ -24315,6 +24364,7 @@ var stdin_default$2O = {
 var stdin_default$2N = {
   "--table-background": "#303030",
   "--table-thead-th-text-color": "rgba(255, 255, 255, 0.6)",
+  "--table-thead-th-text-align": "left",
   "--table-tbody-td-text-color": "#fff",
   "--table-tbody-tr-hover-background": "#4c4b4b",
   "--table-border-radius": "2px",
@@ -24323,6 +24373,7 @@ var stdin_default$2N = {
   "--table-thead-tr-border-bottom": "thin solid var(--color-outline)",
   "--table-tbody-tr-border-bottom": "thin solid var(--color-outline)",
   "--table-tbody-td-font-size": "16px",
+  "--table-tbody-td-text-align": "left",
   "--table-row-height": "46px",
   "--table-row-padding": "0 16px",
   "--table-footer-border-top": "thin solid var(--color-outline)"
@@ -24441,9 +24492,15 @@ var stdin_default$2I = {
   "--bottom-navigation-item-font-size": "var(--font-size-sm)",
   "--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-fab-border-radius": "50%",
   "--bottom-navigation-item-line-height": "1",
   "--bottom-navigation-item-icon-size": "22px",
-  "--bottom-navigation-item-icon-margin-bottom": "5px"
+  "--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 stdin_default$2H = {
   "--menu-background-color": "#272727",
@@ -24532,6 +24589,7 @@ var stdin_default$2x = {
 };
 var stdin_default$2w = {
   "--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)",
@@ -25114,11 +25172,13 @@ var stdin_default$1Q = {
   "--table-border-radius": "2px",
   "--table-thead-border-bottom": "thin solid var(--color-outline)",
   "--table-thead-th-text-color": "rgba(0, 0, 0, 0.6)",
+  "--table-thead-th-text-align": "left",
   "--table-thead-th-font-size": "14px",
   "--table-thead-tr-border-bottom": "thin solid var(--color-outline)",
   "--table-tbody-tr-border-bottom": "thin solid var(--color-outline)",
   "--table-tbody-td-text-color": "#555",
   "--table-tbody-td-font-size": "16px",
+  "--table-tbody-td-text-align": "left",
   "--table-row-height": "46px",
   "--table-row-padding": "0 16px",
   "--table-footer-border-top": "thin solid var(--color-outline)"
@@ -25164,6 +25224,7 @@ var stdin_default$1N = {
   "--bottom-navigation-background-color": "var(--color-surface-container)",
   "--bottom-navigation-fab-border-radius": "12px",
   "--bottom-navigation-height": "50px",
+  "--bottom-navigation-variant-height": "66px",
   "--bottom-navigation-z-index": "1",
   "--bottom-navigation-border-color": "var(--color-outline)",
   "--bottom-navigation-fab-offset": "4px"
@@ -25171,11 +25232,17 @@ var stdin_default$1N = {
 var stdin_default$1M = {
   "--bottom-navigation-item-active-background-color": "var(--color-info-container)",
   "--bottom-navigation-item-inactive-color": "var(--color-on-surface-variant)",
+  "--bottom-navigation-item-variant-active-background-color": "var(--color-info-container)",
+  "--bottom-navigation-item-variant-active-color": "var(--color-on-info-container)",
+  "--bottom-navigation-fab-border-radius": "12px",
   "--bottom-navigation-item-font-size": "var(--font-size-sm)",
   "--bottom-navigation-item-active-color": "var(--color-primary)",
   "--bottom-navigation-item-line-height": "1",
   "--bottom-navigation-item-icon-size": "22px",
-  "--bottom-navigation-item-icon-margin-bottom": "5px"
+  "--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 stdin_default$1L = {
   "--snackbar-color": "#F5EFF7",
@@ -26086,6 +26153,7 @@ var stdin_default$N = {
 var stdin_default$M = {
   "--table-background": "var(--color-surface-container-highest)",
   "--table-thead-th-text-color": "rgba(255, 255, 255, 0.6)",
+  "--table-thead-th-text-align": "left",
   "--table-tbody-td-text-color": "#fff",
   "--table-tbody-tr-hover-background": "var(--color-surface-container-highest)",
   "--table-border-radius": "2px",
@@ -26094,6 +26162,7 @@ var stdin_default$M = {
   "--table-thead-tr-border-bottom": "thin solid var(--color-outline)",
   "--table-tbody-tr-border-bottom": "thin solid var(--color-outline)",
   "--table-tbody-td-font-size": "16px",
+  "--table-tbody-td-text-align": "left",
   "--table-row-height": "46px",
   "--table-row-padding": "0 16px",
   "--table-footer-border-top": "thin solid var(--color-outline)"
@@ -26172,6 +26241,7 @@ var stdin_default$H = {
 var stdin_default$G = {
   "--bottom-navigation-background-color": "var(--color-surface-container)",
   "--bottom-navigation-height": "50px",
+  "--bottom-navigation-variant-height": "66px",
   "--bottom-navigation-z-index": "1",
   "--bottom-navigation-border-color": "var(--color-outline)",
   "--bottom-navigation-fab-offset": "4px",
@@ -26180,12 +26250,17 @@ var stdin_default$G = {
 var stdin_default$F = {
   "--bottom-navigation-item-active-background-color": "#4A4458",
   "--bottom-navigation-item-inactive-color": "var(--color-on-surface-variant)",
+  "--bottom-navigation-item-variant-active-background-color": "var(--color-info-container)",
+  "--bottom-navigation-item-variant-active-color": "var(--color-on-info-container)",
   "--bottom-navigation-fab-border-radius": "12px",
   "--bottom-navigation-item-font-size": "var(--font-size-sm)",
   "--bottom-navigation-item-active-color": "var(--color-primary)",
   "--bottom-navigation-item-line-height": "1",
   "--bottom-navigation-item-icon-size": "22px",
-  "--bottom-navigation-item-icon-margin-bottom": "5px"
+  "--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 stdin_default$E = {
   "--snackbar-color": "#322F35",
@@ -28376,7 +28451,7 @@ withInstall(stdin_default$1);
 withPropsDefaultsSetter(stdin_default$1, props);
 const _WatermarkComponent = stdin_default$1;
 var stdin_default = stdin_default$1;
-const version = "3.1.3";
+const version = "3.2.0-alpha.1710928822670";
 function install(app) {
   stdin_default$5E.install && app.use(stdin_default$5E);
   stdin_default$5C.install && app.use(stdin_default$5C);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@varlet/ui",
-  "version": "3.1.3",
+  "version": "3.2.0-alpha.1710928822670",
   "description": "A material like components library",
   "main": "lib/varlet.cjs.js",
   "module": "es/index.mjs",
@@ -48,9 +48,9 @@
     "@popperjs/core": "^2.11.6",
     "dayjs": "^1.10.4",
     "decimal.js": "^10.2.1",
-    "@varlet/use": "3.1.3",
-    "@varlet/shared": "3.1.3",
-    "@varlet/icons": "3.1.3"
+    "@varlet/shared": "3.2.0-alpha.1710928822670",
+    "@varlet/use": "3.2.0-alpha.1710928822670",
+    "@varlet/icons": "3.2.0-alpha.1710928822670"
   },
   "devDependencies": {
     "@vue/runtime-core": "3.4.21",
@@ -66,9 +66,9 @@
     "typescript": "^5.1.5",
     "vue": "3.4.21",
     "vue-router": "4.2.0",
-    "@varlet/ui": "3.1.3",
-    "@varlet/touch-emulator": "3.1.3",
-    "@varlet/cli": "3.1.3"
+    "@varlet/cli": "3.2.0-alpha.1710928822670",
+    "@varlet/touch-emulator": "3.2.0-alpha.1710928822670",
+    "@varlet/ui": "3.2.0-alpha.1710928822670"
   },
   "scripts": {
     "dev": "varlet-cli dev",

package/types/bottomNavigation.d.ts

@@ -13,6 +13,7 @@ export interface BottomNavigationProps extends BasicAttributes {
   activeColor?: string
   inactiveColor?: string
   fabProps?: Partial<ButtonProps>
+  variant?: boolean
   onChange?: ListenerProp<(active: string | number) => void>
   onBeforeChange?: ListenerProp<(active: string | number) => any | Promise<any>>
   onFabClick?: ListenerProp<() => void>

package/types/styleVars.d.ts

@@ -109,6 +109,8 @@ export interface StyleVars {
   badgeDotHeight?: string
   '--bottom-navigation-height'?: string
   bottomNavigationHeight?: string
+  '--bottom-navigation-variant-height'?: string
+  bottomNavigationVariantHeight?: string
   '--bottom-navigation-z-index'?: string
   bottomNavigationZIndex?: string
   '--bottom-navigation-background-color'?: string
@@ -133,6 +135,16 @@ export interface StyleVars {
   bottomNavigationItemIconMarginBottom?: string
   '--bottom-navigation-fab-border-radius'?: string
   bottomNavigationFabBorderRadius?: string
+  '--bottom-navigation-item-variant-icon-container-height'?: string
+  bottomNavigationItemVariantIconContainerHeight?: string
+  '--bottom-navigation-item-variant-icon-container-border-radius'?: string
+  bottomNavigationItemVariantIconContainerBorderRadius?: string
+  '--bottom-navigation-item-variant-icon-container-max-width'?: string
+  bottomNavigationItemVariantIconContainerMaxWidth?: string
+  '--bottom-navigation-item-variant-active-background-color'?: string
+  bottomNavigationItemVariantActiveBackgroundColor?: string
+  '--bottom-navigation-item-variant-active-color'?: string
+  bottomNavigationItemVariantActiveColor?: string
   '--breadcrumb-active-color'?: string
   breadcrumbActiveColor?: string
   '--breadcrumb-inactive-color'?: string
@@ -1207,6 +1219,8 @@ export interface StyleVars {
   tableTheadBorderBottom?: string
   '--table-thead-th-text-color'?: string
   tableTheadThTextColor?: string
+  '--table-thead-th-text-align'?: string
+  tableTheadThTextAlign?: string
   '--table-thead-th-font-size'?: string
   tableTheadThFontSize?: string
   '--table-thead-tr-border-bottom'?: string
@@ -1219,6 +1233,8 @@ export interface StyleVars {
   tableTbodyTdTextColor?: string
   '--table-tbody-td-font-size'?: string
   tableTbodyTdFontSize?: string
+  '--table-tbody-td-text-align'?: string
+  tableTbodyTdTextAlign?: string
   '--table-row-height'?: string
   tableRowHeight?: string
   '--table-row-padding'?: string

package/types/table.d.ts

@@ -5,6 +5,7 @@ export declare const tableProps: Record<keyof TableProps, any>
 
 export interface TableProps extends BasicAttributes {
   fullWidth?: string | number
+  scrollerHeight?: string | number
   elevation?: boolean | string | number
 }