@varlet/ui 3.20.7 → 3.20.9

package/es/auto-complete/AutoComplete.mjs

@@ -51,6 +51,7 @@ function __render__(_ctx, _cache) {
       scrollable: "",
       trigger: "manual",
       placement: "bottom",
+      radius: _ctx.menuRadius,
       disabled: _ctx.disabled || _ctx.formDisabled || _ctx.readonly || _ctx.formReadonly,
       class: _normalizeClass(_ctx.n("menu-select")),
       "popover-class": _ctx.variant === "standard" ? _ctx.n("--standard-menu-margin") : _ctx.variant === "filled" ? _ctx.n("--filled-menu-margin") : "",
@@ -147,7 +148,7 @@ function __render__(_ctx, _cache) {
       ]),
       _: 3
       /* FORWARDED */
-    }, 8, ["show", "disabled", "class", "popover-class", "onUpdate:modelValue", "onKeyEscape"]),
+    }, 8, ["show", "radius", "disabled", "class", "popover-class", "onUpdate:modelValue", "onKeyEscape"]),
     _createVNode(_component_var_form_details, {
       "error-message": _ctx.errorMessage,
       "extra-message": _ctx.maxlengthText

package/es/auto-complete/props.mjs

@@ -30,6 +30,10 @@ const props = __spreadValues({
     type: String,
     default: "value"
   },
+  menuRadius: {
+    type: String,
+    default: "normal"
+  },
   maxlength: [String, Number],
   readonly: Boolean,
   disabled: Boolean,

package/es/index.bundle.mjs

@@ -310,7 +310,7 @@ import './tree-menu/style/index.mjs'
 import './uploader/style/index.mjs'
 import './watermark/style/index.mjs'
 
-const version = '3.20.7'
+const version = '3.20.9'
 
 function install(app) {
   ActionSheet.install && app.use(ActionSheet)

package/es/index.mjs

@@ -206,7 +206,7 @@ export * from './tree-menu/index.mjs'
 export * from './uploader/index.mjs'
 export * from './watermark/index.mjs'
 
-const version = '3.20.7'
+const version = '3.20.9'
 
 function install(app) {
   ActionSheet.install && app.use(ActionSheet)

package/es/menu/Menu.mjs

@@ -38,6 +38,7 @@ function __render__(_ctx, _cache) {
                     _ctx.n("menu"),
                     _ctx.n("$--box"),
                     _ctx.n("$--scrollbar"),
+                    [_ctx.radius !== "normal", _ctx.n(`--radius-${_ctx.radius}`)],
                     _ctx.popoverClass,
                     [_ctx.defaultStyle, _ctx.n("--menu-background-color")],
                     [_ctx.defaultStyle, _ctx.formatElevation(_ctx.elevation, 3)]

package/es/menu/menu.css

@@ -1 +1 @@
-:root { --menu-background-color: var(--color-surface-container-high); --menu-border-radius: 2px;}.var-menu { display: inline-flex; outline: none;}.var-menu__menu { --scrollbar-track-background: var(--menu-background-color); border-radius: var(--menu-border-radius);}.var-menu-enter-from,.var-menu-leave-to { opacity: 0; transform: scale(0.8);}.var-menu-enter-active,.var-menu-leave-active { transition-property: opacity, transform; transition-duration: 0.2s;}.var-menu--menu-background-color { background: var(--menu-background-color);}
+:root { --menu-background-color: var(--color-surface-container-high); --menu-border-radius: 2px; --menu-large-border-radius: 8px;}.var-menu { display: inline-flex; outline: none;}.var-menu__menu { --scrollbar-track-background: var(--menu-background-color); border-radius: var(--menu-border-radius);}.var-menu--radius-large { border-radius: var(--menu-large-border-radius);}.var-menu-enter-from,.var-menu-leave-to { opacity: 0; transform: scale(0.8);}.var-menu-enter-active,.var-menu-leave-active { transition-property: opacity, transform; transition-duration: 0.2s;}.var-menu--menu-background-color { background: var(--menu-background-color);}

package/es/menu/props.mjs

@@ -1,5 +1,9 @@
 import { defineListenerProp } from "../utils/components.mjs";
 const props = {
+  radius: {
+    type: String,
+    default: "normal"
+  },
   show: Boolean,
   disabled: Boolean,
   trigger: {

package/es/menu-select/MenuChildren.mjs

@@ -42,8 +42,7 @@ import { createNamespace, defineListenerProp, pickProps } from "../utils/compone
 import { focusChildElementByKey } from "../utils/elements.mjs";
 import { props as menuSelectProps } from "./props.mjs";
 const { name, n } = createNamespace("menu-children");
-import { resolveComponent as _resolveComponent, createVNode as _createVNode, renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, createBlock as _createBlock, createElementVNode as _createElementVNode, normalizeClass as _normalizeClass, withCtx as _withCtx, createSlots as _createSlots } from "vue";
-const _hoisted_1 = { ref: "menuOptions" };
+import { resolveComponent as _resolveComponent, createVNode as _createVNode, renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, createBlock as _createBlock, mergeProps as _mergeProps, createElementVNode as _createElementVNode, normalizeClass as _normalizeClass, withCtx as _withCtx, createSlots as _createSlots } from "vue";
 function __render__(_ctx, _cache) {
   const _component_var_menu_option = _resolveComponent("var-menu-option");
   const _component_var_menu_children = _resolveComponent("var-menu-children");
@@ -56,8 +55,9 @@ function __render__(_ctx, _cache) {
     placement: "right-start",
     "cascade-optimization": "",
     "var-menu-children-cover": "",
-    class: _normalizeClass(_ctx.n()),
+    class: _normalizeClass([_ctx.n(), _ctx.radius !== "normal" ? _ctx.n(`--menu-radius-${_ctx.radius}`) : void 0]),
     disabled: _ctx.disabled,
+    radius: _ctx.radius,
     teleport: false,
     "close-on-click-reference": false
   }, _createSlots({
@@ -83,7 +83,7 @@ function __render__(_ctx, _cache) {
       fn: _withCtx(() => [
         _createElementVNode(
           "div",
-          _hoisted_1,
+          _mergeProps({ ref: "menuOptions" }, _ctx.radius !== "normal" ? { class: _ctx.n(`--radius-${_ctx.radius}`) } : {}),
           [
             (_openBlock(true), _createElementBlock(
               _Fragment,
@@ -104,10 +104,11 @@ function __render__(_ctx, _cache) {
                       options: menuOption[_ctx.childrenKey],
                       "highlight-options": _ctx.highlightOptions,
                       disabled: menuOption.disabled,
+                      radius: _ctx.radius,
                       onKeyArrowX: _ctx.handleArrowLeft,
                       onKeyArrowRightOpen: ($event) => _ctx.allowChildrenClose(menuOption),
                       onMouseenter: ($event) => _ctx.allowChildrenClose(menuOption)
-                    }, null, 8, ["parent-show", "option", "options", "highlight-options", "disabled", "onKeyArrowX", "onKeyArrowRightOpen", "onMouseenter"])) : (_openBlock(), _createBlock(_component_var_menu_option, {
+                    }, null, 8, ["parent-show", "option", "options", "highlight-options", "disabled", "radius", "onKeyArrowX", "onKeyArrowRightOpen", "onMouseenter"])) : (_openBlock(), _createBlock(_component_var_menu_option, {
                       key: 1,
                       label: menuOption[_ctx.labelKey],
                       value: menuOption[_ctx.valueKey],
@@ -126,13 +127,13 @@ function __render__(_ctx, _cache) {
               /* KEYED_FRAGMENT */
             ))
           ],
-          512
-          /* NEED_PATCH */
+          16
+          /* FULL_PROPS */
         )
       ]),
       key: "0"
     } : void 0
-  ]), 1032, ["show", "class", "disabled"]);
+  ]), 1032, ["show", "class", "disabled", "radius"]);
 }
 const __sfc__ = defineComponent({
   name,
@@ -151,7 +152,7 @@ const __sfc__ = defineComponent({
     onKeyArrowX: defineListenerProp(),
     onKeyArrowRightOpen: defineListenerProp(),
     onMouseenter: defineListenerProp()
-  }, pickProps(menuSelectProps, ["options", "valueKey", "labelKey", "childrenKey"])),
+  }, pickProps(menuSelectProps, ["options", "valueKey", "labelKey", "childrenKey", "radius"])),
   setup(props) {
     const show = ref(false);
     const menu = ref();

package/es/menu-select/MenuSelect.mjs

@@ -49,6 +49,7 @@ function __render__(_ctx, _cache) {
     "offset-y": _ctx.offsetY,
     teleport: _ctx.teleport,
     "same-width": _ctx.sameWidth,
+    radius: _ctx.radius,
     elevation: _ctx.elevation,
     "default-style": false,
     "popover-class": _ctx.popoverClass,
@@ -65,7 +66,15 @@ function __render__(_ctx, _cache) {
         "div",
         {
           ref: "menuOptionsRef",
-          class: _normalizeClass(_ctx.classes(_ctx.n("menu"), _ctx.n("$--scrollbar"), _ctx.formatElevation(_ctx.elevation, 3), [_ctx.scrollable, _ctx.n("--scrollable")]))
+          class: _normalizeClass(
+            _ctx.classes(
+              _ctx.n("menu"),
+              _ctx.n("$--scrollbar"),
+              _ctx.formatElevation(_ctx.elevation, 3),
+              [_ctx.scrollable, _ctx.n("--scrollable")],
+              [_ctx.radius !== "normal", _ctx.n(`--radius-${_ctx.radius}`)]
+            )
+          )
         },
         [
           (_openBlock(true), _createElementBlock(
@@ -87,9 +96,10 @@ function __render__(_ctx, _cache) {
                     options: option[_ctx.childrenKey],
                     "highlight-options": _ctx.highlightOptions,
                     disabled: option.disabled,
+                    radius: _ctx.radius,
                     onKeyArrowRightOpen: ($event) => _ctx.allowChildrenClose(option),
                     onMouseenter: ($event) => _ctx.allowChildrenClose(option)
-                  }, null, 8, ["parent-show", "option", "options", "highlight-options", "disabled", "onKeyArrowRightOpen", "onMouseenter"])) : (_openBlock(), _createBlock(_component_var_menu_option, {
+                  }, null, 8, ["parent-show", "option", "options", "highlight-options", "disabled", "radius", "onKeyArrowRightOpen", "onMouseenter"])) : (_openBlock(), _createBlock(_component_var_menu_option, {
                     key: 1,
                     label: option[_ctx.labelKey],
                     value: option[_ctx.valueKey],
@@ -117,7 +127,7 @@ function __render__(_ctx, _cache) {
     ]),
     _: 3
     /* FORWARDED */
-  }, 8, ["show", "class", "disabled", "trigger", "reference", "placement", "strategy", "offset-x", "offset-y", "teleport", "same-width", "elevation", "popover-class", "close-on-click-reference", "onOpen", "onOpened", "onClose", "onClosed", "onClickOutside"]);
+  }, 8, ["show", "class", "disabled", "trigger", "reference", "placement", "strategy", "offset-x", "offset-y", "teleport", "same-width", "radius", "elevation", "popover-class", "close-on-click-reference", "onOpen", "onOpened", "onClose", "onClosed", "onClickOutside"]);
 }
 const __sfc__ = defineComponent({
   name,

package/es/menu-select/menuSelect.css

@@ -1 +1 @@
-:root { --menu-select-menu-max-height: 278px; --menu-select-menu-padding: 0; --menu-select-menu-border-radius: 2px; --menu-select-menu-background-color: var(--color-surface-container-high);}.var-menu-select__menu { --scrollbar-track-background: var(--menu-select-menu-background-color); position: relative; padding: var(--menu-select-menu-padding); border-radius: var(--menu-select-menu-border-radius); background-color: var(--menu-select-menu-background-color);}.var-menu-select--scrollable { overflow-y: auto; max-height: var(--menu-select-menu-max-height);}.var-menu-children[var-menu-children-cover] { width: 100%; display: block;}
+:root { --menu-select-menu-max-height: 278px; --menu-select-menu-padding: 0; --menu-select-menu-border-radius: 2px; --menu-select-menu-large-border-radius: 8px; --menu-select-menu-background-color: var(--color-surface-container-high);}.var-menu-select__menu { --scrollbar-track-background: var(--menu-select-menu-background-color); position: relative; padding: var(--menu-select-menu-padding); border-radius: var(--menu-select-menu-border-radius); background-color: var(--menu-select-menu-background-color);}.var-menu-select--radius-large { border-radius: var(--menu-select-menu-large-border-radius); --menu-select-option-border-radius: var(--menu-select-menu-large-border-radius);}.var-menu-select--scrollable { overflow-y: auto; max-height: var(--menu-select-menu-max-height);}.var-menu-children[var-menu-children-cover] { width: 100%; display: block;}.var-menu-children--menu-radius-large { --menu-large-border-radius: var(--menu-select-menu-large-border-radius);}.var-menu-children--radius-large { border-radius: inherit; --menu-select-option-border-radius: var(--menu-large-border-radius);}.var-menu-select--radius-large > .var-menu-option:first-child,.var-menu-children--radius-large > .var-menu-option:first-child,.var-menu-select--radius-large > .var-menu-children:first-child > .var-menu-option,.var-menu-children--radius-large > .var-menu-children:first-child > .var-menu-option,.var-menu-select--radius-large > :only-child:not(.var-menu-option):not(.var-menu-children) > .var-menu-option:first-child,.var-menu-children--radius-large > :only-child:not(.var-menu-option):not(.var-menu-children) > .var-menu-option:first-child,.var-menu-select--radius-large > :only-child:not(.var-menu-option):not(.var-menu-children) > .var-menu-children:first-child > .var-menu-option,.var-menu-children--radius-large > :only-child:not(.var-menu-option):not(.var-menu-children) > .var-menu-children:first-child > .var-menu-option { border-top-left-radius: var(--menu-select-option-border-radius); border-top-right-radius: var(--menu-select-option-border-radius);}.var-menu-select--radius-large > .var-menu-option:last-child,.var-menu-children--radius-large > .var-menu-option:last-child,.var-menu-select--radius-large > .var-menu-children:last-child > .var-menu-option,.var-menu-children--radius-large > .var-menu-children:last-child > .var-menu-option,.var-menu-select--radius-large > :only-child:not(.var-menu-option):not(.var-menu-children) > .var-menu-option:last-child,.var-menu-children--radius-large > :only-child:not(.var-menu-option):not(.var-menu-children) > .var-menu-option:last-child,.var-menu-select--radius-large > :only-child:not(.var-menu-option):not(.var-menu-children) > .var-menu-children:last-child > .var-menu-option,.var-menu-children--radius-large > :only-child:not(.var-menu-option):not(.var-menu-children) > .var-menu-children:last-child > .var-menu-option { border-bottom-left-radius: var(--menu-select-option-border-radius); border-bottom-right-radius: var(--menu-select-option-border-radius);}.var-menu-select--radius-large > .var-menu-option > .var-menu-option__cover,.var-menu-children--radius-large > .var-menu-option > .var-menu-option__cover,.var-menu-select--radius-large > .var-menu-children > .var-menu-option > .var-menu-option__cover,.var-menu-children--radius-large > .var-menu-children > .var-menu-option > .var-menu-option__cover,.var-menu-select--radius-large > :only-child:not(.var-menu-option):not(.var-menu-children) > .var-menu-option > .var-menu-option__cover,.var-menu-children--radius-large > :only-child:not(.var-menu-option):not(.var-menu-children) > .var-menu-option > .var-menu-option__cover,.var-menu-select--radius-large > :only-child:not(.var-menu-option):not(.var-menu-children) > .var-menu-children > .var-menu-option > .var-menu-option__cover,.var-menu-children--radius-large > :only-child:not(.var-menu-option):not(.var-menu-children) > .var-menu-children > .var-menu-option > .var-menu-option__cover,.var-menu-select--radius-large > :only-child:not(.var-menu-option):not(.var-menu-children),.var-menu-children--radius-large > :only-child:not(.var-menu-option):not(.var-menu-children) { border-radius: inherit;}

package/es/menu-select/props.mjs

@@ -63,6 +63,7 @@ const props = __spreadProps(__spreadValues({
   "offsetY",
   "teleport",
   "sameWidth",
+  "radius",
   "elevation",
   "popoverClass",
   "closeOnClickReference",

package/es/select/Select.mjs

@@ -87,6 +87,7 @@ function __render__(_ctx, _cache) {
       class: _normalizeClass(_ctx.n("menu")),
       "popover-class": _ctx.variant === "standard" && _ctx.hint && !_ctx.filterable ? _ctx.n("--standard-menu-margin") : void 0,
       "offset-y": _ctx.offsetY,
+      radius: _ctx.menuRadius,
       disabled: _ctx.formReadonly || _ctx.readonly || _ctx.formDisabled || _ctx.disabled,
       placement: _ctx.placement,
       "default-style": false,
@@ -97,7 +98,12 @@ function __render__(_ctx, _cache) {
           "div",
           {
             ref: "menuEl",
-            class: _normalizeClass(_ctx.classes(_ctx.n("scroller"), _ctx.n("$--scrollbar"), _ctx.n("$-elevation--3")))
+            class: _normalizeClass(
+              _ctx.classes(_ctx.n("scroller"), _ctx.n("$--scrollbar"), _ctx.n("$-elevation--3"), [
+                _ctx.menuRadius !== "normal",
+                _ctx.n(`--menu-radius-${_ctx.menuRadius}`)
+              ])
+            )
           },
           [
             _ctx.showEmpty ? _renderSlot(_ctx.$slots, "empty", { key: 0 }, () => [
@@ -364,7 +370,7 @@ function __render__(_ctx, _cache) {
       ]),
       _: 3
       /* FORWARDED */
-    }, 8, ["show", "class", "popover-class", "offset-y", "disabled", "placement", "onClickOutside"]),
+    }, 8, ["show", "class", "popover-class", "offset-y", "radius", "disabled", "placement", "onClickOutside"]),
     _createVNode(_component_var_form_details, {
       "error-message": _ctx.errorMessage,
       onClick: _cache[5] || (_cache[5] = _withModifiers(() => {

package/es/select/props.mjs

@@ -33,6 +33,10 @@ const props = __spreadValues({
     type: String,
     default: "value"
   },
+  menuRadius: {
+    type: String,
+    default: "normal"
+  },
   multiple: Boolean,
   offsetY: {
     type: [String, Number],

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 { --scrollbar-track-background: var(--select-scroller-background); position: relative; 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-scroller-large-border-radius: 8px; --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); position: relative; 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--menu-radius-large { border-radius: var(--select-scroller-large-border-radius);}.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/core.mjs

@@ -1,6 +1,6 @@
 import { call } from "@varlet/shared";
 import { onSmartMounted } from "@varlet/use";
-import { computed, defineComponent, ref, watch } from "vue";
+import { computed, defineComponent, onUnmounted, shallowRef, watch } from "vue";
 import { useLock } from "../context/lock.mjs";
 import { useZIndex } from "../context/zIndex.mjs";
 import VarIcon from "../icon/index.mjs";
@@ -18,6 +18,7 @@ const ICON_TYPE_DICT = {
 };
 import { renderSlot as _renderSlot, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, resolveComponent as _resolveComponent, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, createElementBlock as _createElementBlock, normalizeStyle as _normalizeStyle, vShow as _vShow, withDirectives as _withDirectives } from "vue";
 function __render__(_ctx, _cache) {
+  var _a;
   const _component_var_icon = _resolveComponent("var-icon");
   const _component_var_loading = _resolveComponent("var-loading");
   return _withDirectives((_openBlock(), _createElementBlock(
@@ -36,6 +37,7 @@ function __render__(_ctx, _cache) {
               _ctx.n(`wrapper-${_ctx.position}`),
               _ctx.formatElevation(_ctx.elevation, 4),
               [_ctx.vertical, _ctx.n("vertical")],
+              [_ctx.showProgress, _ctx.n("wrapper--progress")],
               [_ctx.type && _ctx.SNACKBAR_TYPE.includes(_ctx.type), _ctx.n(`wrapper-${_ctx.type}`)]
             )
           ),
@@ -93,6 +95,28 @@ function __render__(_ctx, _cache) {
             ],
             2
             /* CLASS */
+          )) : _createCommentVNode("v-if", true),
+          _ctx.showProgress ? (_openBlock(), _createElementBlock(
+            "div",
+            {
+              key: (_a = _ctx.countdown) == null ? void 0 : _a.id,
+              class: _normalizeClass(_ctx.n("progress")),
+              "aria-hidden": "true"
+            },
+            [
+              _createElementVNode(
+                "div",
+                {
+                  class: _normalizeClass(_ctx.n("progress-bar")),
+                  style: _normalizeStyle(_ctx.progressStyle)
+                },
+                null,
+                6
+                /* CLASS, STYLE */
+              )
+            ],
+            2
+            /* CLASS */
           )) : _createCommentVNode("v-if", true)
         ],
         6
@@ -113,7 +137,9 @@ const __sfc__ = defineComponent({
   },
   props,
   setup(props2) {
-    const timer = ref(null);
+    let timer;
+    let countdownId = 0;
+    const countdown = shallowRef();
     const { zIndex } = useZIndex(() => props2.show, 1);
     useLock(
       () => props2.show,
@@ -124,11 +150,33 @@ const __sfc__ = defineComponent({
       return type === "loading" || forbidClick;
     });
     const iconName = computed(() => !props2.type ? "" : ICON_TYPE_DICT[props2.type]);
+    const showProgress = computed(
+      () => props2.progress && countdown.value !== void 0 && countdown.value.duration > 0 && Number.isFinite(countdown.value.duration)
+    );
+    const progressStyle = computed(() => {
+      if (!props2.progress || !countdown.value) {
+        return;
+      }
+      const { duration, startedAt } = countdown.value;
+      return {
+        animationDuration: `${duration}ms`,
+        animationDelay: `${-Math.max(0, Date.now() - startedAt)}ms`
+      };
+    });
+    function clearCountdown() {
+      clearTimeout(timer);
+      timer = void 0;
+      countdown.value = void 0;
+    }
     function updateAfterDuration() {
-      timer.value = setTimeout(() => {
-        if (props2.type !== "loading") {
-          call(props2["onUpdate:show"], false);
-        }
+      clearCountdown();
+      if (!props2.show || props2.type === "loading") {
+        return;
+      }
+      countdown.value = { id: countdownId++, duration: props2.duration, startedAt: Date.now() };
+      timer = setTimeout(() => {
+        clearCountdown();
+        call(props2["onUpdate:show"], false);
       }, props2.duration);
     }
     watch(
@@ -136,31 +184,27 @@ const __sfc__ = defineComponent({
       (show) => {
         if (show) {
           call(props2.onOpen);
-          updateAfterDuration();
         } else {
-          clearTimeout(timer.value);
           call(props2.onClose);
         }
       }
     );
-    watch(
-      () => props2._update,
-      () => {
-        clearTimeout(timer.value);
-        updateAfterDuration();
-      }
-    );
+    watch([() => props2.show, () => props2.type === "loading", () => props2._update], updateAfterDuration);
     onSmartMounted(() => {
       if (props2.show) {
         call(props2.onOpen);
         updateAfterDuration();
       }
     });
+    onUnmounted(clearCountdown);
     return {
       SNACKBAR_TYPE,
       zIndex,
       iconName,
       isForbidClick,
+      countdown,
+      showProgress,
+      progressStyle,
       n,
       classes,
       formatElevation

package/es/snackbar/index.mjs

@@ -34,6 +34,7 @@ const defaultOptionsValue = {
   action: "",
   position: "top",
   duration: 3e3,
+  progress: false,
   elevation: true,
   vertical: false,
   contentClass: void 0,

package/es/snackbar/props.mjs

@@ -31,6 +31,7 @@ const props = {
     type: Number,
     default: 3e3
   },
+  progress: Boolean,
   elevation: {
     type: [Boolean, String, Number],
     default: true

package/es/snackbar/snackbar.css

@@ -1 +1 @@
-:root { --snackbar-width: 256px; --snackbar-color: rgba(255, 255, 255, 0.87); --snackbar-border-radius: 4px; --snackbar-background: #333; --snackbar-font-size: var(--font-size-md); --snackbar-margin: 6px 24px; --snackbar-border-color: currentColor; --snackbar-success-background: var(--color-success); --snackbar-info-background: var(--color-info); --snackbar-error-background: var(--color-danger); --snackbar-warning-background: var(--color-warning); --snackbar-content-padding: 14px 16px; --snackbar-action-margin: 0 8px; --snackbar-vertical-action-margin: 0 8px 8px 0; --snackbar-icon-margin: 0 8px;}.var-transition-group { position: fixed; left: 0; right: 0; top: 0; bottom: 0; pointer-events: none;}.var-pointer-auto { pointer-events: auto;}.var-snackbar { display: flex; justify-content: center; align-items: baseline; left: 0; right: 0; bottom: 0; transition: all 0.15s var(--cubic-bezier);}.var-snackbar__transition { top: 0; position: fixed;}.var-snackbar__transition .var-snackbar__wrapper { position: absolute;}.var-snackbar__transition .var-snackbar__wrapper-top { top: 5%;}.var-snackbar__transition .var-snackbar__wrapper-center { top: 45%;}.var-snackbar__transition .var-snackbar__wrapper-bottom { bottom: 5%;}.var-snackbar__wrapper { width: var(--snackbar-width); display: flex; border-radius: var(--snackbar-border-radius); color: var(--snackbar-color); background: var(--snackbar-background); font-size: var(--snackbar-font-size); margin: var(--snackbar-margin); align-items: center; border-color: var(--snackbar-border-color); pointer-events: auto; transition: 0.3s var(--cubic-bezier);}.var-snackbar__wrapper-success { background: var(--snackbar-success-background);}.var-snackbar__wrapper-info { background: var(--snackbar-info-background);}.var-snackbar__wrapper-warning { background: var(--snackbar-warning-background);}.var-snackbar__wrapper-error { background: var(--snackbar-error-background);}.var-snackbar__icon { margin: var(--snackbar-icon-margin);}.var-snackbar__content { flex-grow: 1; word-break: break-all; padding: var(--snackbar-content-padding);}.var-snackbar__action { margin: var(--snackbar-action-margin); display: flex;}.var-snackbar__vertical { flex-direction: column; align-items: flex-start;}.var-snackbar__vertical .var-snackbar__action { align-self: flex-end; margin: var(--snackbar-vertical-action-margin);}.var-snackbar-fade-enter-from,.var-snackbar-fade-leave-to { opacity: 0; transform: translateY(-30px);}
+:root { --snackbar-width: 256px; --snackbar-color: rgba(255, 255, 255, 0.87); --snackbar-border-radius: 4px; --snackbar-background: #333; --snackbar-font-size: var(--font-size-md); --snackbar-margin: 6px 24px; --snackbar-border-color: currentColor; --snackbar-success-background: var(--color-success); --snackbar-info-background: var(--color-info); --snackbar-error-background: var(--color-danger); --snackbar-warning-background: var(--color-warning); --snackbar-content-padding: 14px 16px; --snackbar-action-margin: 0 8px; --snackbar-vertical-action-margin: 0 8px 8px 0; --snackbar-icon-margin: 0 8px; --snackbar-progress-height: 4px; --snackbar-progress-color: currentColor;}.var-transition-group { position: fixed; left: 0; right: 0; top: 0; bottom: 0; pointer-events: none;}.var-pointer-auto { pointer-events: auto;}.var-snackbar { display: flex; justify-content: center; align-items: baseline; left: 0; right: 0; bottom: 0; transition: all 0.15s var(--cubic-bezier);}.var-snackbar__transition { top: 0; position: fixed;}.var-snackbar__transition .var-snackbar__wrapper { position: absolute;}.var-snackbar__transition .var-snackbar__wrapper-top { top: 5%;}.var-snackbar__transition .var-snackbar__wrapper-center { top: 45%;}.var-snackbar__transition .var-snackbar__wrapper-bottom { bottom: 5%;}.var-snackbar__wrapper { width: var(--snackbar-width); display: flex; border-radius: var(--snackbar-border-radius); color: var(--snackbar-color); background: var(--snackbar-background); font-size: var(--snackbar-font-size); margin: var(--snackbar-margin); align-items: center; border-color: var(--snackbar-border-color); pointer-events: auto; transition: 0.3s var(--cubic-bezier);}.var-snackbar__wrapper--progress { position: relative;}.var-snackbar__wrapper-success { background: var(--snackbar-success-background);}.var-snackbar__wrapper-info { background: var(--snackbar-info-background);}.var-snackbar__wrapper-warning { background: var(--snackbar-warning-background);}.var-snackbar__wrapper-error { background: var(--snackbar-error-background);}.var-snackbar__icon { margin: var(--snackbar-icon-margin);}.var-snackbar__progress { position: absolute; right: 0; bottom: 0; left: 0; height: var(--snackbar-progress-height); overflow: hidden; border-radius: 0 0 var(--snackbar-border-radius) var(--snackbar-border-radius); pointer-events: none;}.var-snackbar__progress-bar { height: 100%; background: var(--snackbar-progress-color); opacity: 0.4; transform-origin: left; animation: var-snackbar-progress linear forwards;}.var-snackbar__content { flex-grow: 1; word-break: break-all; padding: var(--snackbar-content-padding);}.var-snackbar__action { margin: var(--snackbar-action-margin); display: flex;}.var-snackbar__vertical { flex-direction: column; align-items: flex-start;}.var-snackbar__vertical .var-snackbar__action { align-self: flex-end; margin: var(--snackbar-vertical-action-margin);}.var-snackbar-fade-enter-from,.var-snackbar-fade-leave-to { opacity: 0; transform: translateY(-30px);}@keyframes var-snackbar-progress { from { transform: scaleX(1); } to { transform: scaleX(0); }}

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/themes/dark/menu.mjs

@@ -1,6 +1,7 @@
 var stdin_default = {
   "--menu-background-color": "#272727",
-  "--menu-border-radius": "2px"
+  "--menu-border-radius": "2px",
+  "--menu-large-border-radius": "8px"
 };
 export {
   stdin_default as default

package/es/themes/dark/menuSelect.mjs

@@ -2,7 +2,8 @@ var stdin_default = {
   "--menu-select-menu-background-color": "#272727",
   "--menu-select-menu-max-height": "278px",
   "--menu-select-menu-padding": "0",
-  "--menu-select-menu-border-radius": "2px"
+  "--menu-select-menu-border-radius": "2px",
+  "--menu-select-menu-large-border-radius": "8px"
 };
 export {
   stdin_default as default

package/es/themes/dark/select.mjs

@@ -3,6 +3,7 @@ var stdin_default = {
   "--select-scroller-padding": "6px 0",
   "--select-scroller-max-height": "278px",
   "--select-scroller-border-radius": "2px",
+  "--select-scroller-large-border-radius": "8px",
   "--select-chips-margin": "-5px 0 0 0",
   "--select-chips-padding": "2px 0",
   "--select-chip-margin": "5px 5px 0 0",

package/es/themes/md3-dark/menu.mjs

@@ -1,6 +1,7 @@
 var stdin_default = {
   "--menu-background-color": "var(--color-surface-container)",
-  "--menu-border-radius": "4px"
+  "--menu-border-radius": "4px",
+  "--menu-large-border-radius": "16px"
 };
 export {
   stdin_default as default

package/es/themes/md3-dark/menuSelect.mjs

@@ -1,6 +1,7 @@
 var stdin_default = {
   "--menu-select-menu-background-color": "var(--color-surface-container)",
   "--menu-select-menu-border-radius": "4px",
+  "--menu-select-menu-large-border-radius": "16px",
   "--menu-select-menu-max-height": "278px",
   "--menu-select-menu-padding": "0"
 };

package/es/themes/md3-dark/select.mjs

@@ -1,6 +1,7 @@
 var stdin_default = {
   "--select-scroller-background": "var(--color-surface-container)",
   "--select-scroller-border-radius": "4px",
+  "--select-scroller-large-border-radius": "16px",
   "--select-scroller-padding": "6px 0",
   "--select-scroller-max-height": "278px",
   "--select-chips-margin": "-5px 0 0 0",

package/es/themes/md3-light/menu.mjs

@@ -1,6 +1,7 @@
 var stdin_default = {
   "--menu-background-color": "var(--color-surface-container)",
-  "--menu-border-radius": "4px"
+  "--menu-border-radius": "4px",
+  "--menu-large-border-radius": "16px"
 };
 export {
   stdin_default as default

package/es/themes/md3-light/menuSelect.mjs

@@ -1,6 +1,7 @@
 var stdin_default = {
   "--menu-select-menu-background-color": "var(--color-surface-container)",
   "--menu-select-menu-border-radius": "4px",
+  "--menu-select-menu-large-border-radius": "16px",
   "--menu-select-menu-max-height": "278px",
   "--menu-select-menu-padding": "0"
 };

package/es/themes/md3-light/select.mjs

@@ -1,6 +1,7 @@
 var stdin_default = {
   "--select-scroller-background": "var(--color-surface-container)",
   "--select-scroller-border-radius": "4px",
+  "--select-scroller-large-border-radius": "16px",
   "--select-scroller-padding": "6px 0",
   "--select-scroller-max-height": "278px",
   "--select-chips-margin": "-5px 0 0 0",