@varlet/ui 3.17.1 → 3.18.0-alpha.1781192892883

package/es/otp-input/OtpInput.mjs

@@ -1,4 +1,24 @@
-import { call, clamp, toNumber } from "@varlet/shared";
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+import { call, clamp, raf, toNumber } from "@varlet/shared";
 import { onSmartMounted } from "@varlet/use";
 import { computed, defineComponent, nextTick, ref, useSlots } from "vue";
 import VarFormDetails from "../form-details/index.mjs";
@@ -51,7 +71,6 @@ function __render__(_ctx, _cache) {
                       ref: (el) => _ctx.setInputRef(el, index),
                       "model-value": _ctx.getDisplayChar(index),
                       type: _ctx.nativeInputType,
-                      maxlength: 1,
                       autocomplete: "one-time-code",
                       placeholder: "",
                       hint: false,
@@ -206,9 +225,15 @@ const __sfc__ = defineComponent({
       maybeEmitComplete(value);
     }
     function focusCell(index) {
-      var _a, _b;
-      const targetIndex = clamp(index, 0, normalizedLength.value - 1);
-      (_b = (_a = inputRefs.value[targetIndex]) == null ? void 0 : _a.focus) == null ? void 0 : _b.call(_a);
+      return __async(this, null, function* () {
+        var _a, _b, _c, _d, _e;
+        const targetIndex = clamp(index, 0, normalizedLength.value - 1);
+        (_b = (_a = inputRefs.value[targetIndex]) == null ? void 0 : _a.focus) == null ? void 0 : _b.call(_a);
+        yield raf();
+        if (document.activeElement === ((_c = inputRefs.value[targetIndex]) == null ? void 0 : _c.el)) {
+          (_e = (_d = inputRefs.value[targetIndex]) == null ? void 0 : _d.select) == null ? void 0 : _e.call(_d);
+        }
+      });
     }
     function focus(index) {
       const targetIndex = index == null ? Math.min(getValueChars().length, normalizedLength.value - 1) : index;
@@ -295,18 +320,19 @@ const __sfc__ = defineComponent({
       if (props2.disabled || formDisabled.value) {
         return;
       }
+      const target = event.target;
+      const cell = target == null ? void 0 : target.closest(`.${n("cell")}`);
+      const indexAttr = cell == null ? void 0 : cell.dataset.index;
       call(props2.onClick, event);
       validateWithTrigger("onClick");
+      if (indexAttr == null) {
+        return;
+      }
+      focusCell(Number(indexAttr));
     }
     function handleFocus(index) {
-      const valueChars = getValueChars();
       activeIndex.value = index;
-      if (valueChars[index]) {
-        nextTick(() => {
-          var _a, _b;
-          (_b = (_a = inputRefs.value[index]) == null ? void 0 : _a.select) == null ? void 0 : _b.call(_a);
-        });
-      }
+      focusCell(index);
     }
     function handleBlur(event) {
       var _a;
@@ -330,6 +356,7 @@ const __sfc__ = defineComponent({
           removeAt(index);
         } else {
           syncCellDisplayValue(index);
+          scheduleFocusEffect(index);
         }
         return;
       }

package/es/pagination/pagination.css

@@ -1 +1 @@
-:root { --pagination-text-color: #555; --pagination-font-size: var(--font-size-md); --pagination-active-color: var(--color-on-primary); --pagination-active-bg-color: var(--color-primary); --pagination-hover-bg-color: rgba(85, 85, 85, 0.15); --pagination-total-margin: 0 10px; --pagination-total-line-height: 24px; --pagination-item-width: 32px; --pagination-item-height: 32px; --pagination-item-margin: 0 6px; --pagination-item-background: #fff; --pagination-item-border-radius: 4px; --pagination-item-simple-border-radius: 50%; --pagination-input-width: 32px; --pagination-disabled-color: var(--color-text-disabled); --pagination-bg-disabled-color: var(--color-disabled); --pagination-size-line-height: 24px; --pagination-size-padding: 0 4px; --pagination-quick-jumper-margin: 0 10px;}.var-pagination-flex-nowrap { display: flex; white-space: nowrap; align-items: center;}.var-pagination { display: flex; align-items: center; list-style: none; margin: 0; font-size: var(--pagination-font-size); padding: 0; color: var(--pagination-text-color);}.var-pagination__item { display: inline-flex; min-width: var(--pagination-item-width); align-items: center; justify-content: center; margin: var(--pagination-item-margin); height: var(--pagination-item-height); cursor: pointer; border-radius: var(--pagination-item-border-radius); outline: none; transition: all 0.25s; user-select: none; background-color: var(--pagination-item-background);}.var-pagination__item:hover { background-color: var(--pagination-hover-bg-color);}.var-pagination__item--active { color: var(--pagination-active-color); background-color: var(--pagination-active-bg-color) !important;}.var-pagination__item--hide { display: none;}.var-pagination__item--simple { background: transparent; border-radius: var(--pagination-item-simple-border-radius);}.var-pagination__item--disabled { cursor: not-allowed !important; color: var(--pagination-disabled-color); background-color: unset; box-shadow: none !important;}.var-pagination__item--disabled:hover { background-color: unset;}.var-pagination__item--disabled--active { background-color: var(--pagination-bg-disabled-color);}.var-pagination__item--disabled--active:hover { background-color: var(--pagination-bg-disabled-color);}.var-pagination__prev { margin-left: 0;}.var-pagination__total { display: flex; white-space: nowrap; align-items: center; line-height: var(--pagination-total-line-height); margin: var(--pagination-total-margin);}.var-pagination__size { display: flex; white-space: nowrap; align-items: center; height: var(--pagination-item-height); line-height: var(--pagination-size-line-height); margin: var(--pagination-item-margin); padding: var(--pagination-size-padding); cursor: pointer;}.var-pagination__size--open { display: flex; align-items: center; cursor: pointer;}.var-pagination__size--open--disabled { cursor: inherit;}.var-pagination__quickly,.var-pagination__simple { display: flex; white-space: nowrap; align-items: center;}.var-pagination__quickly [var-pagination-cover],.var-pagination__simple [var-pagination-cover] { width: var(--pagination-input-width);}.var-pagination__quickly [var-pagination-cover] .var-field-decorator__middle,.var-pagination__simple [var-pagination-cover] .var-field-decorator__middle { padding: 0;}.var-pagination__quickly [var-pagination-cover] .var-input__input,.var-pagination__simple [var-pagination-cover] .var-input__input { height: auto; text-align: center; font-weight: normal; font-size: var(--pagination-font-size); padding-top: 1px;}.var-pagination__quickly-line,.var-pagination__simple-line { height: 1px; background: transparent;}.var-pagination__quickly { margin: var(--pagination-quick-jumper-margin);}.var-pagination__quickly [var-pagination-cover] { margin-left: 6px;}.var-pagination__size--open-icon[var-pagination-cover] { font-size: inherit;}
+:root { --pagination-text-color: #555; --pagination-font-size: var(--font-size-md); --pagination-active-color: var(--color-on-primary); --pagination-active-bg-color: var(--color-primary); --pagination-hover-bg-color: rgba(85, 85, 85, 0.15); --pagination-total-margin: 0 10px; --pagination-total-line-height: 24px; --pagination-item-width: 32px; --pagination-item-height: 32px; --pagination-item-margin: 0 6px; --pagination-item-background: #fff; --pagination-item-border-radius: 4px; --pagination-item-simple-border-radius: 50%; --pagination-input-width: 32px; --pagination-disabled-color: var(--color-text-disabled); --pagination-bg-disabled-color: var(--color-disabled); --pagination-size-line-height: 24px; --pagination-size-padding: 0 4px; --pagination-quick-jumper-margin: 0 10px;}.var-pagination-flex-nowrap { display: flex; white-space: nowrap; align-items: center;}.var-pagination { display: flex; align-items: center; list-style: none; margin: 0; font-size: var(--pagination-font-size); padding: 0; color: var(--pagination-text-color);}.var-pagination__item { display: inline-flex; min-width: var(--pagination-item-width); align-items: center; justify-content: center; margin: var(--pagination-item-margin); height: var(--pagination-item-height); cursor: pointer; border-radius: var(--pagination-item-border-radius); outline: none; transition: all 0.25s; user-select: none; background-color: var(--pagination-item-background);}.var-pagination__item:hover { background-color: var(--pagination-hover-bg-color);}.var-pagination__item--active { color: var(--pagination-active-color); background-color: var(--pagination-active-bg-color) !important;}.var-pagination__item--hide { display: none;}.var-pagination__item--simple { background: transparent; border-radius: var(--pagination-item-simple-border-radius);}.var-pagination__item--disabled { cursor: not-allowed !important; color: var(--pagination-disabled-color); background-color: unset; box-shadow: none !important;}.var-pagination__item--disabled:hover { background-color: unset;}.var-pagination__item--disabled--active { background-color: var(--pagination-bg-disabled-color);}.var-pagination__item--disabled--active:hover { background-color: var(--pagination-bg-disabled-color);}.var-pagination__prev { margin-left: 0;}.var-pagination__next:last-child { margin-right: 0;}.var-pagination__total { display: flex; white-space: nowrap; align-items: center; line-height: var(--pagination-total-line-height); margin: var(--pagination-total-margin);}.var-pagination__size { display: flex; white-space: nowrap; align-items: center; height: var(--pagination-item-height); line-height: var(--pagination-size-line-height); margin: var(--pagination-item-margin); padding: var(--pagination-size-padding); cursor: pointer;}.var-pagination__size--open { display: flex; align-items: center; cursor: pointer;}.var-pagination__size--open--disabled { cursor: inherit;}.var-pagination__quickly,.var-pagination__simple { display: flex; white-space: nowrap; align-items: center;}.var-pagination__quickly [var-pagination-cover],.var-pagination__simple [var-pagination-cover] { width: var(--pagination-input-width);}.var-pagination__quickly [var-pagination-cover] .var-field-decorator__middle,.var-pagination__simple [var-pagination-cover] .var-field-decorator__middle { padding: 0;}.var-pagination__quickly [var-pagination-cover] .var-input__input,.var-pagination__simple [var-pagination-cover] .var-input__input { height: auto; text-align: center; font-weight: normal; font-size: var(--pagination-font-size); padding-top: 1px;}.var-pagination__quickly-line,.var-pagination__simple-line { height: 1px; background: transparent;}.var-pagination__quickly { margin: var(--pagination-quick-jumper-margin);}.var-pagination__quickly [var-pagination-cover] { margin-left: 6px;}.var-pagination__size--open-icon[var-pagination-cover] { font-size: inherit;}

package/es/rail-navigation/RailNavigation.mjs

@@ -0,0 +1,87 @@
+import { call } from "@varlet/shared";
+import { computed, defineComponent } from "vue";
+import { createNamespace } from "../utils/components.mjs";
+import { props } from "./props.mjs";
+import { useRailNavigationItems } from "./provide.mjs";
+const { name, n, classes } = createNamespace("rail-navigation");
+import { renderSlot as _renderSlot, normalizeClass as _normalizeClass, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, createElementVNode as _createElementVNode, mergeProps as _mergeProps } from "vue";
+function __render__(_ctx, _cache) {
+  return _openBlock(), _createElementBlock(
+    "aside",
+    _mergeProps({
+      class: _ctx.classes(_ctx.n(), _ctx.n("$--box"), [_ctx.border, _ctx.n("--border")])
+    }, _ctx.$attrs),
+    [
+      _ctx.$slots.start ? (_openBlock(), _createElementBlock(
+        "div",
+        {
+          key: 0,
+          class: _normalizeClass(_ctx.n("start"))
+        },
+        [
+          _renderSlot(_ctx.$slots, "start")
+        ],
+        2
+        /* CLASS */
+      )) : _createCommentVNode("v-if", true),
+      _createElementVNode(
+        "nav",
+        {
+          class: _normalizeClass(_ctx.n("content"))
+        },
+        [
+          _renderSlot(_ctx.$slots, "default")
+        ],
+        2
+        /* CLASS */
+      ),
+      _ctx.$slots.end ? (_openBlock(), _createElementBlock(
+        "div",
+        {
+          key: 1,
+          class: _normalizeClass(_ctx.n("end"))
+        },
+        [
+          _renderSlot(_ctx.$slots, "end")
+        ],
+        2
+        /* CLASS */
+      )) : _createCommentVNode("v-if", true)
+    ],
+    16
+    /* FULL_PROPS */
+  );
+}
+const __sfc__ = defineComponent({
+  name,
+  props,
+  setup(props2) {
+    const active = computed(() => props2.active);
+    const ripple = computed(() => props2.ripple);
+    const showLabel = computed(() => props2.showLabel);
+    const { bindRailNavigationItem } = useRailNavigationItems();
+    const railNavigationProvider = {
+      active,
+      ripple,
+      showLabel,
+      onToggle
+    };
+    bindRailNavigationItem(railNavigationProvider);
+    function onToggle(value) {
+      if (active.value === value) {
+        return;
+      }
+      call(props2["onUpdate:active"], value);
+      call(props2.onChange, value);
+    }
+    return {
+      n,
+      classes
+    };
+  }
+});
+__sfc__.render = __render__;
+var stdin_default = __sfc__;
+export {
+  stdin_default as default
+};

package/es/rail-navigation/index.mjs

@@ -0,0 +1,12 @@
+import { withInstall, withPropsDefaultsSetter } from "../utils/components.mjs";
+import { props as railNavigationProps } from "./props.mjs";
+import RailNavigation from "./RailNavigation.mjs";
+withInstall(RailNavigation);
+withPropsDefaultsSetter(RailNavigation, railNavigationProps);
+const _RailNavigationComponent = RailNavigation;
+var stdin_default = RailNavigation;
+export {
+  _RailNavigationComponent,
+  stdin_default as default,
+  railNavigationProps
+};

package/es/rail-navigation/props.mjs

@@ -0,0 +1,21 @@
+import { defineListenerProp } from "../utils/components.mjs";
+const props = {
+  active: {
+    type: [Number, String],
+    default: 0
+  },
+  ripple: {
+    type: Boolean,
+    default: false
+  },
+  showLabel: {
+    type: Boolean,
+    default: true
+  },
+  border: Boolean,
+  onChange: defineListenerProp(),
+  "onUpdate:active": defineListenerProp()
+};
+export {
+  props
+};

package/es/rail-navigation/provide.mjs

@@ -0,0 +1,12 @@
+import { useChildren } from "@varlet/use";
+const RAIL_NAVIGATION_BIND_RAIL_NAVIGATION_ITEM_KEY = /* @__PURE__ */ Symbol("RAIL_NAVIGATION_BIND_RAIL_NAVIGATION_ITEM_KEY");
+function useRailNavigationItems() {
+  const { bindChildren } = useChildren(RAIL_NAVIGATION_BIND_RAIL_NAVIGATION_ITEM_KEY);
+  return {
+    bindRailNavigationItem: bindChildren
+  };
+}
+export {
+  RAIL_NAVIGATION_BIND_RAIL_NAVIGATION_ITEM_KEY,
+  useRailNavigationItems
+};

package/es/rail-navigation/railNavigation.css

@@ -0,0 +1 @@
+:root { --rail-navigation-width: 80px; --rail-navigation-background: var(--color-surface-container-high); --rail-navigation-border-color: var(--color-outline); --rail-navigation-padding: 12px 0; --rail-navigation-start-padding: 4px 0; --rail-navigation-end-padding: 4px 0; --rail-navigation-item-gap: 4px;}.var-rail-navigation { width: var(--rail-navigation-width); min-height: 100%; padding: var(--rail-navigation-padding); display: inline-flex; flex-direction: column; align-items: stretch; background-color: var(--rail-navigation-background); transition: background-color 250ms; -webkit-tap-highlight-color: transparent;}.var-rail-navigation--border { border-right: 1px solid var(--rail-navigation-border-color);}.var-rail-navigation__start,.var-rail-navigation__end { display: flex; flex-direction: column; align-items: center;}.var-rail-navigation__start { padding: var(--rail-navigation-start-padding);}.var-rail-navigation__end { padding: var(--rail-navigation-end-padding);}.var-rail-navigation__content { min-height: 0; flex: 1; display: flex; flex-direction: column; align-items: stretch; overflow-x: hidden; overflow-y: auto; scrollbar-width: none;}.var-rail-navigation__content::-webkit-scrollbar { display: none;}.var-rail-navigation__content > * + * { margin-top: var(--rail-navigation-item-gap);}

package/es/rail-navigation/style/index.mjs

@@ -0,0 +1,3 @@
+import '../../styles/common.css'
+import '../railNavigation.css'
+import '../RailNavigationSfc.css'

package/es/rail-navigation-item/RailNavigationItem.mjs

@@ -0,0 +1,177 @@
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+import { call, doubleRaf } from "@varlet/shared";
+import { computed, defineComponent, onMounted, ref } from "vue";
+import VarBadge from "../badge/index.mjs";
+import VarIcon from "../icon/index.mjs";
+import Ripple from "../ripple/index.mjs";
+import { createNamespace } from "../utils/components.mjs";
+import { props } from "./props.mjs";
+import { useRailNavigation } from "./provide.mjs";
+const { name, n, classes } = createNamespace("rail-navigation-item");
+const defaultBadgeProps = {
+  type: "primary",
+  dot: true
+};
+import { renderSlot as _renderSlot, resolveComponent as _resolveComponent, normalizeClass as _normalizeClass, createVNode as _createVNode, mergeProps as _mergeProps, withCtx as _withCtx, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, createElementBlock as _createElementBlock, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, normalizeStyle as _normalizeStyle, resolveDirective as _resolveDirective, withDirectives as _withDirectives } from "vue";
+const _hoisted_1 = ["aria-disabled"];
+function __render__(_ctx, _cache) {
+  const _component_var_icon = _resolveComponent("var-icon");
+  const _component_var_badge = _resolveComponent("var-badge");
+  const _directive_ripple = _resolveDirective("ripple");
+  return _withDirectives((_openBlock(), _createElementBlock("div", {
+    class: _normalizeClass(
+      _ctx.classes(
+        _ctx.n(),
+        [_ctx.isActive, _ctx.n("--active")],
+        [_ctx.disabled, _ctx.n("--disabled")],
+        [_ctx.ripple && !_ctx.disabled, _ctx.n("--ripple-enabled")],
+        [!_ctx.showLabel, _ctx.n("--icon-only")]
+      )
+    ),
+    style: _normalizeStyle({ "--rail-navigation-item-transition-duration-override": _ctx.allowTransition && !_ctx.ripple ? void 0 : "0ms" }),
+    "aria-disabled": _ctx.disabled,
+    role: "button",
+    onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleClick && _ctx.handleClick(...args)),
+    onMouseenter: _cache[1] || (_cache[1] = (...args) => _ctx.handleMouseenter && _ctx.handleMouseenter(...args)),
+    onMouseleave: _cache[2] || (_cache[2] = (...args) => _ctx.handleMouseleave && _ctx.handleMouseleave(...args))
+  }, [
+    _ctx.$slots.icon || _ctx.icon ? (_openBlock(), _createElementBlock(
+      "span",
+      {
+        key: 0,
+        class: _normalizeClass(_ctx.n("indicator"))
+      },
+      [
+        _ctx.badge ? (_openBlock(), _createBlock(_component_var_badge, _mergeProps({ key: 0 }, _ctx.badgeProps, {
+          class: _ctx.n("badge"),
+          "var-rail-navigation-item-cover": ""
+        }), {
+          default: _withCtx(() => [
+            _renderSlot(_ctx.$slots, "icon", { active: _ctx.isActive }, () => [
+              _createVNode(_component_var_icon, {
+                class: _normalizeClass(_ctx.n("icon")),
+                name: _ctx.icon,
+                namespace: _ctx.namespace,
+                "var-rail-navigation-item-cover": ""
+              }, null, 8, ["class", "name", "namespace"])
+            ])
+          ]),
+          _: 3
+          /* FORWARDED */
+        }, 16, ["class"])) : _renderSlot(_ctx.$slots, "icon", {
+          key: 1,
+          active: _ctx.isActive
+        }, () => [
+          _createVNode(_component_var_icon, {
+            class: _normalizeClass(_ctx.n("icon")),
+            name: _ctx.icon,
+            namespace: _ctx.namespace,
+            "var-rail-navigation-item-cover": ""
+          }, null, 8, ["class", "name", "namespace"])
+        ])
+      ],
+      2
+      /* CLASS */
+    )) : _createCommentVNode("v-if", true),
+    _ctx.showLabel && (_ctx.$slots.default || _ctx.label) ? (_openBlock(), _createElementBlock(
+      "span",
+      {
+        key: 1,
+        class: _normalizeClass(_ctx.n("label"))
+      },
+      [
+        _renderSlot(_ctx.$slots, "default", { active: _ctx.isActive }, () => [
+          _createTextVNode(
+            _toDisplayString(_ctx.label),
+            1
+            /* TEXT */
+          )
+        ])
+      ],
+      2
+      /* CLASS */
+    )) : _createCommentVNode("v-if", true)
+  ], 46, _hoisted_1)), [
+    [_directive_ripple, { disabled: !_ctx.ripple || _ctx.disabled }]
+  ]);
+}
+const __sfc__ = defineComponent({
+  name,
+  components: {
+    VarBadge,
+    VarIcon
+  },
+  directives: { Ripple },
+  props,
+  setup(props2) {
+    const { index, railNavigation, bindRailNavigation } = useRailNavigation();
+    const { active, ripple, showLabel, onToggle } = railNavigation;
+    const activeValue = computed(() => {
+      var _a;
+      return (_a = props2.name) != null ? _a : index.value;
+    });
+    const isActive = computed(() => active.value === activeValue.value);
+    const badgeProps = computed(() => props2.badge === true ? defaultBadgeProps : props2.badge);
+    const allowTransition = ref(false);
+    bindRailNavigation(null);
+    onMounted(() => __async(null, null, function* () {
+      yield doubleRaf();
+      allowTransition.value = true;
+    }));
+    function handleClick() {
+      if (props2.disabled) {
+        return;
+      }
+      call(props2.onClick, activeValue.value);
+      call(onToggle, activeValue.value);
+    }
+    function handleMouseenter() {
+      if (props2.disabled) {
+        return;
+      }
+      call(props2.onMouseenter, activeValue.value);
+    }
+    function handleMouseleave() {
+      if (props2.disabled) {
+        return;
+      }
+      call(props2.onMouseleave, activeValue.value);
+    }
+    return {
+      isActive,
+      badgeProps,
+      ripple,
+      showLabel,
+      allowTransition,
+      n,
+      classes,
+      handleClick,
+      handleMouseenter,
+      handleMouseleave
+    };
+  }
+});
+__sfc__.render = __render__;
+var stdin_default = __sfc__;
+export {
+  stdin_default as default
+};

package/es/rail-navigation-item/index.mjs

@@ -0,0 +1,12 @@
+import { withInstall, withPropsDefaultsSetter } from "../utils/components.mjs";
+import { props as railNavigationItemProps } from "./props.mjs";
+import RailNavigationItem from "./RailNavigationItem.mjs";
+withInstall(RailNavigationItem);
+withPropsDefaultsSetter(RailNavigationItem, railNavigationItemProps);
+const _RailNavigationItemComponent = RailNavigationItem;
+var stdin_default = RailNavigationItem;
+export {
+  _RailNavigationItemComponent,
+  stdin_default as default,
+  railNavigationItemProps
+};

package/es/rail-navigation-item/props.mjs

@@ -0,0 +1,19 @@
+import { iconProps } from "../icon/index.mjs";
+import { defineListenerProp, pickProps } from "../utils/components.mjs";
+const props = {
+  name: [Number, String],
+  label: String,
+  icon: pickProps(iconProps, "name"),
+  namespace: pickProps(iconProps, "namespace"),
+  badge: {
+    type: [Boolean, Object],
+    default: false
+  },
+  disabled: Boolean,
+  onClick: defineListenerProp(),
+  onMouseenter: defineListenerProp(),
+  onMouseleave: defineListenerProp()
+};
+export {
+  props
+};

package/es/rail-navigation-item/provide.mjs

@@ -0,0 +1,17 @@
+import { assert } from "@varlet/shared";
+import { useParent } from "@varlet/use";
+import { RAIL_NAVIGATION_BIND_RAIL_NAVIGATION_ITEM_KEY } from "../rail-navigation/provide.mjs";
+function useRailNavigation() {
+  const { parentProvider, index, bindParent } = useParent(
+    RAIL_NAVIGATION_BIND_RAIL_NAVIGATION_ITEM_KEY
+  );
+  assert(!!bindParent, "RailNavigationItem", "<var-rail-navigation-item/> must in <var-rail-navigation/>");
+  return {
+    index,
+    railNavigation: parentProvider,
+    bindRailNavigation: bindParent
+  };
+}
+export {
+  useRailNavigation
+};

package/es/rail-navigation-item/railNavigationItem.css

@@ -0,0 +1 @@
+:root { --rail-navigation-item-height: 64px; --rail-navigation-item-padding: 6px 4px; --rail-navigation-item-indicator-width: 56px; --rail-navigation-item-indicator-height: 32px; --rail-navigation-item-indicator-hover-background: transparent; --rail-navigation-item-indicator-pressed-background: transparent; --rail-navigation-item-indicator-active-background: transparent; --rail-navigation-item-inactive-text-color: var(--color-on-surface-variant); --rail-navigation-item-active-text-color: var(--color-primary); --rail-navigation-item-disabled-opacity: var(--opacity-disabled); --rail-navigation-item-icon-size: 24px; --rail-navigation-item-label-font-size: var(--font-size-sm); --rail-navigation-item-label-line-height: 1.5;}.var-rail-navigation-item { width: 100%; min-height: var(--rail-navigation-item-height); padding: var(--rail-navigation-item-padding); position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; color: var(--rail-navigation-item-inactive-text-color); cursor: pointer; user-select: none; transition: color 250ms, opacity 250ms;}.var-rail-navigation-item__indicator { width: var(--rail-navigation-item-indicator-width); height: var(--rail-navigation-item-indicator-height); display: inline-flex; align-items: center; justify-content: center; position: relative;}.var-rail-navigation-item__indicator::before,.var-rail-navigation-item__indicator::after { content: ''; z-index: 0; height: var(--rail-navigation-item-indicator-height); position: absolute; left: 50%; top: 50%; border-radius: calc(var(--rail-navigation-item-indicator-height) / 2); transform: translate(-50%, -50%);}.var-rail-navigation-item__indicator::before { width: var(--rail-navigation-item-indicator-width); background-color: var(--rail-navigation-item-indicator-hover-background); opacity: 0; transition: opacity 150ms;}.var-rail-navigation-item__indicator::after { width: var(--rail-navigation-item-indicator-width); transform: translate(-50%, -50%) scaleX(0); transform-origin: center;}.var-rail-navigation-item__icon[var-rail-navigation-item-cover] { font-size: var(--rail-navigation-item-icon-size);}.var-rail-navigation-item__icon { z-index: 1; position: relative; line-height: 1; color: currentColor;}.var-rail-navigation-item__badge[var-rail-navigation-item-cover] { z-index: 1;}.var-rail-navigation-item__label { margin-top: 4px; max-width: 100%; display: inline-flex; align-items: center; justify-content: center; color: currentColor; font-size: var(--rail-navigation-item-label-font-size); line-height: var(--rail-navigation-item-label-line-height); text-align: center; white-space: normal; word-break: break-word;}.var-rail-navigation-item:hover .var-rail-navigation-item__indicator::before { opacity: 1;}.var-rail-navigation-item:active:not(.var-rail-navigation-item--ripple-enabled):not(.var-rail-navigation-item--disabled) .var-rail-navigation-item__indicator::before { background-color: var(--rail-navigation-item-indicator-pressed-background); opacity: 1;}.var-rail-navigation-item--active { color: var(--rail-navigation-item-active-text-color);}.var-rail-navigation-item--active .var-rail-navigation-item__indicator::after { background-color: var(--rail-navigation-item-indicator-active-background); transform: translate(-50%, -50%) scaleX(1); transition: transform var(--rail-navigation-item-transition-duration-override, 250ms), background-color var(--rail-navigation-item-transition-duration-override, 250ms);}.var-rail-navigation-item--active:hover .var-rail-navigation-item__indicator::before { opacity: 0;}.var-rail-navigation-item--disabled { cursor: not-allowed; opacity: var(--rail-navigation-item-disabled-opacity);}.var-rail-navigation-item--disabled:hover .var-rail-navigation-item__indicator::before { opacity: 0;}.var-rail-navigation-item--disabled * { pointer-events: none;}.var-rail-navigation-item--icon-only { min-height: var(--rail-navigation-item-indicator-height);}

package/es/rail-navigation-item/style/index.mjs

@@ -0,0 +1,6 @@
+import '../../styles/common.css'
+import '../../badge/badge.css'
+import '../../icon/icon.css'
+import '../../ripple/ripple.css'
+import '../railNavigationItem.css'
+import '../RailNavigationItemSfc.css'

package/es/select/Select.mjs

@@ -97,7 +97,7 @@ function __render__(_ctx, _cache) {
           "div",
           {
             ref: "menuEl",
-            class: _normalizeClass(_ctx.classes(_ctx.n("scroller"), _ctx.n("$-elevation--3")))
+            class: _normalizeClass(_ctx.classes(_ctx.n("scroller"), _ctx.n("$--scrollbar"), _ctx.n("$-elevation--3")))
           },
           [
             _ctx.showEmpty ? _renderSlot(_ctx.$slots, "empty", { key: 0 }, () => [

package/es/select/select.css

@@ -1 +1 @@
-:root { --select-scroller-background: var(--color-surface-container-high); --select-scroller-padding: 6px 0; --select-scroller-max-height: 278px; --select-scroller-border-radius: 2px; --select-chips-margin: -5px 0 0 0; --select-chips-padding: 2px 0; --select-chip-margin: 5px 5px 0 0; --select-chip-background-color: #e0e0e0; --select-arrow-size: 20px; --select-standard-menu-margin: calc(var(--field-decorator-placeholder-size) * 0.75 + 12px) 0 0 0; --select-label-font-size: 16px; --select-empty-text-color: rgba(0, 0, 0, 0.6); --select-empty-height: 38px; --select-empty-font-size: 14px;}.var-select { text-align: left; outline: none;}.var-select__menu[var-select-cover] { width: 100%; background: transparent; display: block;}.var-select__chip[var-select-cover] { margin: var(--select-chip-margin); background-color: var(--select-chip-background-color);}.var-select__chips { padding: var(--select-chips-padding); margin: var(--select-chips-margin);}.var-select__scroller { max-height: var(--select-scroller-max-height); background: var(--select-scroller-background); padding: var(--select-scroller-padding); overflow-y: auto; transition: background-color 0.25s; border-radius: var(--select-scroller-border-radius);}.var-select__select { display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 24px; outline: none; border: none; font-size: inherit; color: var(--field-decorator-text-color); word-break: break-all; overflow: hidden; transition: color 0.25s;}.var-select__values { display: flex; flex-wrap: wrap; align-items: center;}.var-select__chips { display: flex; flex-wrap: wrap; align-items: center;}.var-select__filter { flex: 1; position: absolute; left: 0; top: 0; height: 100%; border: none; outline: none; padding: 0; background-color: transparent; font-size: var(--field-decorator-placeholder-size); line-height: inherit; color: var(--field-decorator-text-color);}.var-select__filter--multiple { position: unset;}.var-select__chips .var-select__filter { padding-left: 0; margin-top: 4px;}.var-select__filter-calculator { position: absolute; left: 0; top: 0; max-width: 100%; visibility: hidden; white-space: pre; overflow: hidden; pointer-events: none;}.var-select__label { display: flex; align-items: center; font-size: var(--select-label-font-size);}.var-select__placeholder { max-width: 100%; position: absolute; top: 50%; left: 0; transform: translateY(-50%); font-size: var(--field-decorator-placeholder-size); line-height: 1.5em; color: var(--field-decorator-blur-color); pointer-events: none; cursor: inherit;}.var-select__empty { color: var(--select-empty-text-color); text-align: center; height: var(--select-empty-height); font-size: var(--select-empty-font-size); display: flex; align-items: center; justify-content: center;}.var-select__arrow[var-select-cover] { flex-shrink: 0; font-size: var(--select-arrow-size); margin-left: 6px;}.var-select--standard-menu-margin { margin: var(--select-standard-menu-margin) !important;}.var-select--disabled { color: var(--field-decorator-disabled-color); cursor: not-allowed;}.var-select--error { color: var(--field-decorator-error-color);}.var-select--arrow-rotate { transform: rotate(180deg);}.var-select--label-focusing { color: var(--field-decorator-blur-color);}
+:root { --select-scroller-background: var(--color-surface-container-high); --select-scroller-padding: 6px 0; --select-scroller-max-height: 278px; --select-scroller-border-radius: 2px; --select-chips-margin: -5px 0 0 0; --select-chips-padding: 2px 0; --select-chip-margin: 5px 5px 0 0; --select-chip-background-color: #e0e0e0; --select-arrow-size: 20px; --select-standard-menu-margin: calc(var(--field-decorator-placeholder-size) * 0.75 + 12px) 0 0 0; --select-label-font-size: 16px; --select-empty-text-color: rgba(0, 0, 0, 0.6); --select-empty-height: 38px; --select-empty-font-size: 14px;}.var-select { text-align: left; outline: none;}.var-select__menu[var-select-cover] { width: 100%; background: transparent; display: block;}.var-select__chip[var-select-cover] { margin: var(--select-chip-margin); background-color: var(--select-chip-background-color);}.var-select__chips { padding: var(--select-chips-padding); margin: var(--select-chips-margin);}.var-select__scroller { --scrollbar-track-background: var(--select-scroller-background); max-height: var(--select-scroller-max-height); background: var(--select-scroller-background); padding: var(--select-scroller-padding); overflow-y: auto; transition: background-color 0.25s; border-radius: var(--select-scroller-border-radius);}.var-select__select { display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 24px; outline: none; border: none; font-size: inherit; color: var(--field-decorator-text-color); word-break: break-all; overflow: hidden; transition: color 0.25s;}.var-select__values { display: flex; flex-wrap: wrap; align-items: center;}.var-select__chips { display: flex; flex-wrap: wrap; align-items: center;}.var-select__filter { flex: 1; position: absolute; left: 0; top: 0; height: 100%; border: none; outline: none; padding: 0; background-color: transparent; font-size: var(--field-decorator-placeholder-size); line-height: inherit; color: var(--field-decorator-text-color);}.var-select__filter--multiple { position: unset;}.var-select__chips .var-select__filter { padding-left: 0; margin-top: 4px;}.var-select__filter-calculator { position: absolute; left: 0; top: 0; max-width: 100%; visibility: hidden; white-space: pre; overflow: hidden; pointer-events: none;}.var-select__label { display: flex; align-items: center; font-size: var(--select-label-font-size);}.var-select__placeholder { max-width: 100%; position: absolute; top: 50%; left: 0; transform: translateY(-50%); font-size: var(--field-decorator-placeholder-size); line-height: 1.5em; color: var(--field-decorator-blur-color); pointer-events: none; cursor: inherit;}.var-select__empty { color: var(--select-empty-text-color); text-align: center; height: var(--select-empty-height); font-size: var(--select-empty-font-size); display: flex; align-items: center; justify-content: center;}.var-select__arrow[var-select-cover] { flex-shrink: 0; font-size: var(--select-arrow-size); margin-left: 6px;}.var-select--standard-menu-margin { margin: var(--select-standard-menu-margin) !important;}.var-select--disabled { color: var(--field-decorator-disabled-color); cursor: not-allowed;}.var-select--error { color: var(--field-decorator-error-color);}.var-select--arrow-rotate { transform: rotate(180deg);}.var-select--label-focusing { color: var(--field-decorator-blur-color);}

package/es/snackbar/style/index.mjs

@@ -1,7 +1,7 @@
 import '../../styles/common.css'
+import '../SnackbarSfc.css'
 import '../../styles/elevation.css'
 import '../../loading/loading.css'
 import '../../icon/icon.css'
 import '../snackbar.css'
 import '../coreSfc.css'
-import '../SnackbarSfc.css'

package/es/style.mjs

@@ -26,6 +26,7 @@ import './context/style/index.mjs'
 import './count-to/style/index.mjs'
 import './countdown/style/index.mjs'
 import './counter/style/index.mjs'
+import './data-table/style/index.mjs'
 import './date-picker/style/index.mjs'
 import './dialog/style/index.mjs'
 import './divider/style/index.mjs'
@@ -66,6 +67,8 @@ import './progress/style/index.mjs'
 import './pull-refresh/style/index.mjs'
 import './radio/style/index.mjs'
 import './radio-group/style/index.mjs'
+import './rail-navigation/style/index.mjs'
+import './rail-navigation-item/style/index.mjs'
 import './rate/style/index.mjs'
 import './result/style/index.mjs'
 import './ripple/style/index.mjs'
@@ -93,5 +96,6 @@ import './tabs-items/style/index.mjs'
 import './themes/style/index.mjs'
 import './time-picker/style/index.mjs'
 import './tooltip/style/index.mjs'
+import './tree-menu/style/index.mjs'
 import './uploader/style/index.mjs'
 import './watermark/style/index.mjs'

package/es/styles/common.css

@@ -1 +1 @@
-.var--box { box-sizing: border-box;}.var--box * { box-sizing: border-box;}.var--lock { overflow: hidden !important;}.var--ellipsis { overflow-x: hidden; text-overflow: ellipsis; white-space: nowrap;}.var--inline-block { display: inline-block;}.var--flex { display: flex;}.var--inline-flex { display: inline-flex;}:root { --font-size-xs: 10px; --font-size-sm: 12px; --font-size-md: 14px; --font-size-lg: 16px; --icon-size-xs: 16px; --icon-size-sm: 18px; --icon-size-md: 20px; --icon-size-lg: 22px; --hsl-body: 0, 0%, 100%; --color-body: hsla(var(--hsl-body), 1); --hsl-text: 0, 0%, 20%; --color-text: hsla(var(--hsl-text), 1); --hsl-primary: 220, 99%, 61%; --color-primary: hsla(var(--hsl-primary), 1); --hsl-info: 196, 100%, 47%; --color-info: hsla(var(--hsl-info), 1); --hsl-success: 164, 100%, 38%; --color-success: hsla(var(--hsl-success), 1); --hsl-warning: 37, 100%, 50%; --color-warning: hsla(var(--hsl-warning), 1); --hsl-danger: 4, 90%, 58%; --color-danger: hsla(var(--hsl-danger), 1); --hsl-disabled: 0, 0%, 88%; --color-disabled: hsla(var(--hsl-disabled), 1); --hsl-text-disabled: 0, 0%, 67%; --color-text-disabled: hsla(var(--hsl-text-disabled), 1); --hsl-on-primary: 0, 0%, 100%; --color-on-primary: hsla(var(--hsl-on-primary), 1); --hsl-on-info: 0, 0%, 100%; --color-on-info: hsla(var(--hsl-on-info), 1); --hsl-on-success: 0, 0%, 100%; --color-on-success: hsla(var(--hsl-on-success), 1); --hsl-on-warning: 0, 0%, 100%; --color-on-warning: hsla(var(--hsl-on-warning), 1); --hsl-on-danger: 0, 0%, 100%; --color-on-danger: hsla(var(--hsl-on-danger), 1); --hsl-primary-container: 220, 99%, 61%; --color-primary-container: hsla(var(--hsl-primary-container), 1); --hsl-info-container: 196, 100%, 47%; --color-info-container: hsla(var(--hsl-info-container), 1); --hsl-success-container: 164, 100%, 38%; --color-success-container: hsla(var(--hsl-success-container), 1); --hsl-warning-container: 37, 100%, 50%; --color-warning-container: hsla(var(--hsl-warning-container), 1); --hsl-danger-container: 4, 90%, 58%; --color-danger-container: hsla(var(--hsl-danger-container), 1); --hsl-on-primary-container: 0, 0%, 100%; --color-on-primary-container: hsla(var(--hsl-on-primary-container), 1); --hsl-on-info-container: 0, 0%, 100%; --color-on-info-container: hsla(var(--hsl-on-info-container), 1); --hsl-on-success-container: 0, 0%, 100%; --color-on-success-container: hsla(var(--hsl-on-success-container), 1); --hsl-on-warning-container: 0, 0%, 100%; --color-on-warning-container: hsla(var(--hsl-on-warning-container), 1); --hsl-on-danger-container: 0, 0%, 100%; --color-on-danger-container: hsla(var(--hsl-on-danger-container), 1); --hsl-surface-container: 0, 0%, 100%; --color-surface-container: hsla(var(--hsl-surface-container), 1); --hsl-surface-container-low: 0, 0%, 100%; --color-surface-container-low: hsla(var(--hsl-surface-container-low), 1); --hsl-surface-container-high: 0, 0%, 100%; --color-surface-container-high: hsla(var(--hsl-surface-container-high), 1); --hsl-surface-container-highest: 0, 0%, 100%; --color-surface-container-highest: hsla(var(--hsl-surface-container-highest), 1); --hsl-inverse-surface: 0, 0%, 20%; --color-inverse-surface: hsla(var(--hsl-inverse-surface), 1); --hsl-outline: 0, 0%, 0%; --color-outline: hsla(var(--hsl-outline), 0.12); --hsl-on-surface-variant: 0, 0%, 53%; --color-on-surface-variant: hsla(var(--hsl-on-surface-variant), 1); --opacity-disabled: 0.6; --opacity-hover: 0.15; --opacity-focus: 0.2; --cubic-bezier: cubic-bezier(0.25, 0.8, 0.5, 1); --shadow-key-umbra-opacity: rgba(0, 0, 0, 0.2); --shadow-key-penumbra-opacity: rgba(0, 0, 0, 0.14); --shadow-key-ambient-opacity: rgba(0, 0, 0, 0.12);}
+.var--box { box-sizing: border-box;}.var--box * { box-sizing: border-box;}.var--lock { overflow: hidden !important;}.var--ellipsis { overflow-x: hidden; text-overflow: ellipsis; white-space: nowrap;}.var--inline-block { display: inline-block;}.var--flex { display: flex;}.var--inline-flex { display: inline-flex;}.var--scrollbar { scrollbar-width: thin; scrollbar-color: hsla(var(--hsl-text), 0.28) var(--scrollbar-track-background, transparent);}.var--scrollbar::-webkit-scrollbar { width: 4px; height: 4px; background: var(--scrollbar-track-background, transparent);}.var--scrollbar::-webkit-scrollbar-track { background: var(--scrollbar-track-background, transparent);}.var--scrollbar::-webkit-scrollbar-thumb { border-radius: 999px; background: hsla(var(--hsl-text), 0.28); border: 1px solid var(--scrollbar-track-background, transparent); background-clip: padding-box; cursor: pointer;}.var--scrollbar::-webkit-scrollbar-corner { background: var(--scrollbar-track-background, transparent);}:root { --font-size-xs: 10px; --font-size-sm: 12px; --font-size-md: 14px; --font-size-lg: 16px; --icon-size-xs: 16px; --icon-size-sm: 18px; --icon-size-md: 20px; --icon-size-lg: 22px; --hsl-body: 0, 0%, 100%; --color-body: hsla(var(--hsl-body), 1); --hsl-text: 0, 0%, 20%; --color-text: hsla(var(--hsl-text), 1); --hsl-primary: 220, 99%, 61%; --color-primary: hsla(var(--hsl-primary), 1); --hsl-info: 196, 100%, 47%; --color-info: hsla(var(--hsl-info), 1); --hsl-success: 164, 100%, 38%; --color-success: hsla(var(--hsl-success), 1); --hsl-warning: 37, 100%, 50%; --color-warning: hsla(var(--hsl-warning), 1); --hsl-danger: 4, 90%, 58%; --color-danger: hsla(var(--hsl-danger), 1); --hsl-disabled: 0, 0%, 88%; --color-disabled: hsla(var(--hsl-disabled), 1); --hsl-text-disabled: 0, 0%, 67%; --color-text-disabled: hsla(var(--hsl-text-disabled), 1); --hsl-on-primary: 0, 0%, 100%; --color-on-primary: hsla(var(--hsl-on-primary), 1); --hsl-on-info: 0, 0%, 100%; --color-on-info: hsla(var(--hsl-on-info), 1); --hsl-on-success: 0, 0%, 100%; --color-on-success: hsla(var(--hsl-on-success), 1); --hsl-on-warning: 0, 0%, 100%; --color-on-warning: hsla(var(--hsl-on-warning), 1); --hsl-on-danger: 0, 0%, 100%; --color-on-danger: hsla(var(--hsl-on-danger), 1); --hsl-primary-container: 220, 99%, 61%; --color-primary-container: hsla(var(--hsl-primary-container), 1); --hsl-info-container: 196, 100%, 47%; --color-info-container: hsla(var(--hsl-info-container), 1); --hsl-success-container: 164, 100%, 38%; --color-success-container: hsla(var(--hsl-success-container), 1); --hsl-warning-container: 37, 100%, 50%; --color-warning-container: hsla(var(--hsl-warning-container), 1); --hsl-danger-container: 4, 90%, 58%; --color-danger-container: hsla(var(--hsl-danger-container), 1); --hsl-on-primary-container: 0, 0%, 100%; --color-on-primary-container: hsla(var(--hsl-on-primary-container), 1); --hsl-on-info-container: 0, 0%, 100%; --color-on-info-container: hsla(var(--hsl-on-info-container), 1); --hsl-on-success-container: 0, 0%, 100%; --color-on-success-container: hsla(var(--hsl-on-success-container), 1); --hsl-on-warning-container: 0, 0%, 100%; --color-on-warning-container: hsla(var(--hsl-on-warning-container), 1); --hsl-on-danger-container: 0, 0%, 100%; --color-on-danger-container: hsla(var(--hsl-on-danger-container), 1); --hsl-surface-container: 0, 0%, 100%; --color-surface-container: hsla(var(--hsl-surface-container), 1); --hsl-surface-container-low: 0, 0%, 100%; --color-surface-container-low: hsla(var(--hsl-surface-container-low), 1); --hsl-surface-container-high: 0, 0%, 100%; --color-surface-container-high: hsla(var(--hsl-surface-container-high), 1); --hsl-surface-container-highest: 0, 0%, 100%; --color-surface-container-highest: hsla(var(--hsl-surface-container-highest), 1); --hsl-inverse-surface: 0, 0%, 20%; --color-inverse-surface: hsla(var(--hsl-inverse-surface), 1); --hsl-outline: 0, 0%, 0%; --color-outline: hsla(var(--hsl-outline), 0.12); --hsl-on-surface-variant: 0, 0%, 53%; --color-on-surface-variant: hsla(var(--hsl-on-surface-variant), 1); --opacity-disabled: 0.6; --opacity-hover: 0.15; --opacity-focus: 0.2; --cubic-bezier: cubic-bezier(0.25, 0.8, 0.5, 1); --shadow-key-umbra-opacity: rgba(0, 0, 0, 0.2); --shadow-key-penumbra-opacity: rgba(0, 0, 0, 0.14); --shadow-key-ambient-opacity: rgba(0, 0, 0, 0.12);}

package/es/table/Table.mjs

@@ -1,4 +1,4 @@
-import { defineComponent } from "vue";
+import { computed, defineComponent } from "vue";
 import { createNamespace, formatElevation } from "../utils/components.mjs";
 import { toSizeUnit } from "../utils/elements.mjs";
 import { props } from "./props.mjs";
@@ -8,13 +8,21 @@ function __render__(_ctx, _cache) {
   return _openBlock(), _createElementBlock(
     "div",
     {
-      class: _normalizeClass(_ctx.classes(_ctx.n(), _ctx.formatElevation(_ctx.elevation, 1), _ctx.n("$--box")))
+      class: _normalizeClass(
+        _ctx.classes(
+          _ctx.n(),
+          [!_ctx.plain, _ctx.formatElevation(_ctx.elevation, 1)],
+          _ctx.n("$--box"),
+          [_ctx.surfaceLow, _ctx.n("--surface-low")],
+          [_ctx.plain, _ctx.n("--plain")]
+        )
+      )
     },
     [
       _createElementVNode(
         "div",
         {
-          class: _normalizeClass(_ctx.n("main")),
+          class: _normalizeClass(_ctx.classes(_ctx.n("main"), _ctx.n("$--scrollbar"))),
           style: _normalizeStyle({ "max-height": _ctx.toSizeUnit(_ctx.scrollerHeight) })
         },
         [
@@ -54,12 +62,17 @@ function __render__(_ctx, _cache) {
 const __sfc__ = defineComponent({
   name,
   props,
-  setup: () => ({
-    toSizeUnit,
-    n,
-    classes,
-    formatElevation
-  })
+  setup(props2) {
+    const surfaceLow = computed(() => props2.surface === "low");
+    return {
+      toSizeUnit,
+      n,
+      classes,
+      formatElevation,
+      surfaceLow,
+      plain: computed(() => props2.plain)
+    };
+  }
 });
 __sfc__.render = __render__;
 var stdin_default = __sfc__;

package/es/table/props.mjs

@@ -9,7 +9,9 @@ const props = {
   elevation: {
     type: [Boolean, Number, String],
     default: true
-  }
+  },
+  surface: String,
+  plain: Boolean
 };
 export {
   props