@varlet/ui 2.9.6 → 2.10.0-alpha.1682067841655

package/es/select/Select.mjs

@@ -1,6 +1,7 @@
 import VarIcon from '../icon/index.mjs';
 import VarMenu from '../menu/index.mjs';
 import VarChip from '../chip/index.mjs';
+import VarFieldDecorator from '../field-decorator/FieldDecorator.mjs';
 import VarFormDetails from '../form-details/index.mjs';
 import { computed, defineComponent, ref, watch, nextTick } from 'vue';
 import { isArray, isEmpty } from '@varlet/shared';
@@ -14,7 +15,7 @@ var {
   n,
   classes
 } = createNamespace('select');
-import { renderSlot as _renderSlot, normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, resolveComponent as _resolveComponent, withModifiers as _withModifiers, withCtx as _withCtx, createBlock as _createBlock, createCommentVNode as _createCommentVNode, createVNode as _createVNode, normalizeStyle as _normalizeStyle, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
+import { renderSlot as _renderSlot, renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, resolveComponent as _resolveComponent, withModifiers as _withModifiers, normalizeClass as _normalizeClass, withCtx as _withCtx, createBlock as _createBlock, createCommentVNode as _createCommentVNode, createElementVNode as _createElementVNode, createVNode as _createVNode, normalizeStyle as _normalizeStyle, normalizeProps as _normalizeProps, guardReactiveProps as _guardReactiveProps, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
 
 var _withScopeId = n => (_pushScopeId(""), n = n(), _popScopeId(), n);
 
@@ -27,35 +28,24 @@ function __render__(_ctx, _cache) {
 
   var _component_var_icon = _resolveComponent("var-icon");
 
+  var _component_var_field_decorator = _resolveComponent("var-field-decorator");
+
   var _component_var_menu = _resolveComponent("var-menu");
 
   var _component_var_form_details = _resolveComponent("var-form-details");
 
   return _openBlock(), _createElementBlock("div", {
-    class: _normalizeClass(_ctx.classes(_ctx.n(), _ctx.n('$--box'), [_ctx.formDisabled || _ctx.disabled, _ctx.n('--disabled')])),
+    class: _normalizeClass(_ctx.n()),
     onClick: _cache[3] || (_cache[3] = function () {
-      return _ctx.handleClick && _ctx.handleClick(...arguments);
-    })
-  }, [_createElementVNode("div", {
-    class: _normalizeClass(_ctx.classes(_ctx.n('controller'), [_ctx.isFocus, _ctx.n('--focus')], [_ctx.errorMessage, _ctx.n('--error')], [_ctx.formDisabled || _ctx.disabled, _ctx.n('--disabled')])),
-    style: _normalizeStyle({
-      color: !_ctx.errorMessage ? _ctx.isFocus ? _ctx.focusColor : _ctx.blurColor : undefined
-    })
-  }, [_createElementVNode("div", {
-    class: _normalizeClass(_ctx.classes(_ctx.n('icon'), [!_ctx.hint, _ctx.n('--non-hint')]))
-  }, [_renderSlot(_ctx.$slots, "prepend-icon")], 2
-  /* CLASS */
-  ), _createElementVNode("div", {
-    class: _normalizeClass(_ctx.classes(_ctx.n('wrap'), [!_ctx.hint, _ctx.n('--non-hint')])),
-    ref: "wrapEl",
-    onClick: _cache[2] || (_cache[2] = function () {
       return _ctx.handleFocus && _ctx.handleFocus(...arguments);
     })
   }, [_createVNode(_component_var_menu, {
+    class: _normalizeClass(_ctx.n('menu')),
     "var-select-cover": "",
-    class: _normalizeClass(_ctx.classes(_ctx.n('menu'))),
+    "same-width": "",
     "offset-y": _ctx.offsetY,
     disabled: _ctx.formReadonly || _ctx.readonly || _ctx.formDisabled || _ctx.disabled,
+    placement: _ctx.placement,
     "default-style": false,
     show: _ctx.isFocus,
     "onUpdate:show": _cache[1] || (_cache[1] = $event => _ctx.isFocus = $event),
@@ -63,117 +53,107 @@ function __render__(_ctx, _cache) {
   }, {
     menu: _withCtx(() => [_createElementVNode("div", {
       ref: "menuEl",
-      class: _normalizeClass(_ctx.classes(_ctx.n('scroller'), _ctx.n('$-elevation--3')))
+      class: _normalizeClass(_ctx.classes(_ctx.n('scroller'), _ctx.n("scroller-" + _ctx.variant), [!_ctx.hint, _ctx.n('scroller-non-hint')], _ctx.n('$-elevation--3')))
     }, [_renderSlot(_ctx.$slots, "default")], 2
     /* CLASS */
     )]),
-    default: _withCtx(() => [_createElementVNode("div", {
-      class: _normalizeClass(_ctx.classes(_ctx.n('select'), [_ctx.errorMessage, _ctx.n('--error')], [_ctx.formDisabled || _ctx.disabled, _ctx.n('--disabled')])),
-      style: _normalizeStyle({
-        textAlign: _ctx.textAlign,
-        color: _ctx.textColor
-      })
-    }, [_createElementVNode("div", {
-      class: _normalizeClass(_ctx.n('label'))
-    }, [!_ctx.isEmptyModelValue ? _renderSlot(_ctx.$slots, "selected", {
-      key: 0
-    }, () => [_ctx.multiple ? (_openBlock(), _createElementBlock(_Fragment, {
-      key: 0
-    }, [_ctx.chip ? (_openBlock(), _createElementBlock("div", {
-      key: 0,
-      class: _normalizeClass(_ctx.n('chips'))
-    }, [(_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.labels, l => {
-      return _openBlock(), _createBlock(_component_var_chip, {
-        class: _normalizeClass(_ctx.n('chip')),
+    default: _withCtx(() => [_createVNode(_component_var_field_decorator, _normalizeProps(_guardReactiveProps({
+      value: _ctx.modelValue,
+      size: _ctx.size,
+      variant: _ctx.variant,
+      placeholder: _ctx.placeholder,
+      line: _ctx.line,
+      hint: _ctx.hint,
+      textColor: _ctx.textColor,
+      focusColor: _ctx.focusColor,
+      blurColor: _ctx.blurColor,
+      isFocus: _ctx.isFocus,
+      errorMessage: _ctx.errorMessage,
+      formDisabled: _ctx.formDisabled,
+      disabled: _ctx.disabled,
+      clearable: _ctx.clearable,
+      cursor: _ctx.cursor,
+      onClick: _ctx.handleClick,
+      onClear: _ctx.handleClear
+    })), {
+      "prepend-icon": _withCtx(() => [_renderSlot(_ctx.$slots, "prepend-icon")]),
+      "append-icon": _withCtx(() => [_renderSlot(_ctx.$slots, "append-icon")]),
+      default: _withCtx(() => [_createElementVNode("div", {
+        class: _normalizeClass(_ctx.classes(_ctx.n('select'), [_ctx.errorMessage, _ctx.n('--error')], [_ctx.formDisabled || _ctx.disabled, _ctx.n('--disabled')])),
+        style: _normalizeStyle({
+          textAlign: _ctx.textAlign,
+          color: _ctx.textColor
+        })
+      }, [_createElementVNode("div", {
+        class: _normalizeClass(_ctx.n('label'))
+      }, [!_ctx.isEmptyModelValue ? _renderSlot(_ctx.$slots, "selected", {
+        key: 0
+      }, () => [_ctx.multiple ? (_openBlock(), _createElementBlock(_Fragment, {
+        key: 0
+      }, [_ctx.chip ? (_openBlock(), _createElementBlock("div", {
+        key: 0,
+        class: _normalizeClass(_ctx.n('chips'))
+      }, [(_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.labels, l => {
+        return _openBlock(), _createBlock(_component_var_chip, {
+          class: _normalizeClass(_ctx.n('chip')),
+          "var-select-cover": "",
+          closable: "",
+          size: "small",
+          type: _ctx.errorMessage ? 'danger' : undefined,
+          key: l,
+          onClick: _cache[0] || (_cache[0] = _withModifiers(() => {}, ["stop"])),
+          onClose: () => _ctx.handleClose(l)
+        }, {
+          default: _withCtx(() => [_createTextVNode(_toDisplayString(l), 1
+          /* TEXT */
+          )]),
+          _: 2
+          /* DYNAMIC */
+
+        }, 1032
+        /* PROPS, DYNAMIC_SLOTS */
+        , ["class", "type", "onClose"]);
+      }), 128
+      /* KEYED_FRAGMENT */
+      ))], 2
+      /* CLASS */
+      )) : (_openBlock(), _createElementBlock("div", {
+        key: 1,
+        class: _normalizeClass(_ctx.n('values'))
+      }, _toDisplayString(_ctx.labels.join(_ctx.separator)), 3
+      /* TEXT, CLASS */
+      ))], 2112
+      /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
+      )) : (_openBlock(), _createElementBlock("span", _hoisted_1, _toDisplayString(_ctx.label), 1
+      /* TEXT */
+      ))]) : _createCommentVNode("v-if", true)], 2
+      /* CLASS */
+      ), _renderSlot(_ctx.$slots, "arrow-icon", {
+        focus: _ctx.isFocus
+      }, () => [_createVNode(_component_var_icon, {
+        class: _normalizeClass(_ctx.classes(_ctx.n('arrow'), [_ctx.isFocus, _ctx.n('--arrow-rotate')])),
         "var-select-cover": "",
-        closable: "",
-        size: "small",
-        type: _ctx.errorMessage ? 'danger' : undefined,
-        key: l,
-        onClick: _cache[0] || (_cache[0] = _withModifiers(() => {}, ["stop"])),
-        onClose: () => _ctx.handleClose(l)
-      }, {
-        default: _withCtx(() => [_createTextVNode(_toDisplayString(l), 1
-        /* TEXT */
-        )]),
-        _: 2
-        /* DYNAMIC */
-
-      }, 1032
-      /* PROPS, DYNAMIC_SLOTS */
-      , ["class", "type", "onClose"]);
-    }), 128
-    /* KEYED_FRAGMENT */
-    ))], 2
-    /* CLASS */
-    )) : (_openBlock(), _createElementBlock("div", {
-      key: 1,
-      class: _normalizeClass(_ctx.n('values'))
-    }, _toDisplayString(_ctx.labels.join(_ctx.separator)), 3
-    /* TEXT, CLASS */
-    ))], 2112
-    /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
-    )) : (_openBlock(), _createElementBlock("span", _hoisted_1, _toDisplayString(_ctx.label), 1
-    /* TEXT */
-    ))]) : _createCommentVNode("v-if", true)], 2
-    /* CLASS */
-    ), _renderSlot(_ctx.$slots, "arrow-icon", {
-      focus: _ctx.isFocus
-    }, () => [_createVNode(_component_var_icon, {
-      class: _normalizeClass(_ctx.classes(_ctx.n('arrow'), [_ctx.isFocus, _ctx.n('--arrow-rotate')])),
-      "var-select-cover": "",
-      name: "menu-down",
-      transition: 300
-    }, null, 8
-    /* PROPS */
-    , ["class"])])], 6
-    /* CLASS, STYLE */
-    ), _createElementVNode("label", {
-      class: _normalizeClass(_ctx.classes(_ctx.n('placeholder'), _ctx.n('$--ellipsis'), [_ctx.isFocus, _ctx.n('--focus')], [_ctx.errorMessage, _ctx.n('--error')], [_ctx.formDisabled || _ctx.disabled, _ctx.n('--disabled')], _ctx.computePlaceholderState(), [!_ctx.hint, _ctx.n('--placeholder-non-hint')])),
-      style: _normalizeStyle({
-        color: !_ctx.errorMessage ? _ctx.isFocus ? _ctx.focusColor : _ctx.blurColor : undefined
-      })
-    }, _toDisplayString(_ctx.placeholder), 7
-    /* TEXT, CLASS, STYLE */
+        name: "menu-down",
+        transition: 300
+      }, null, 8
+      /* PROPS */
+      , ["class"])])], 6
+      /* CLASS, STYLE */
+      )]),
+      _: 3
+      /* FORWARDED */
+
+    }, 16
+    /* FULL_PROPS */
     )]),
     _: 3
     /* FORWARDED */
 
   }, 8
   /* PROPS */
-  , ["class", "offset-y", "disabled", "show", "onClose"])], 2
-  /* CLASS */
-  ), _createElementVNode("div", {
-    class: _normalizeClass(_ctx.classes(_ctx.n('icon'), [!_ctx.hint, _ctx.n('--non-hint')]))
-  }, [_renderSlot(_ctx.$slots, "append-icon", {}, () => [_ctx.clearable ? (_openBlock(), _createBlock(_component_var_icon, {
-    key: 0,
-    class: _normalizeClass(_ctx.n('clear-icon')),
-    name: "close-circle",
-    size: "14px",
-    onClick: _ctx.handleClear
-  }, null, 8
-  /* PROPS */
-  , ["class", "onClick"])) : _createCommentVNode("v-if", true)])], 2
-  /* CLASS */
-  )], 6
-  /* CLASS, STYLE */
-  ), _ctx.line ? (_openBlock(), _createElementBlock("div", {
-    key: 0,
-    class: _normalizeClass(_ctx.classes(_ctx.n('line'), [_ctx.formDisabled || _ctx.disabled, _ctx.n('--line-disabled')], [_ctx.errorMessage, _ctx.n('--line-error')])),
-    style: _normalizeStyle({
-      background: !_ctx.errorMessage ? _ctx.blurColor : undefined
-    })
-  }, [_createElementVNode("div", {
-    class: _normalizeClass(_ctx.classes(_ctx.n('dot'), [_ctx.isFocus, _ctx.n('--spread')], [_ctx.formDisabled || _ctx.disabled, _ctx.n('--line-disabled')], [_ctx.errorMessage, _ctx.n('--line-error')])),
-    style: _normalizeStyle({
-      background: !_ctx.errorMessage ? _ctx.focusColor : undefined
-    })
-  }, null, 6
-  /* CLASS, STYLE */
-  )], 6
-  /* CLASS, STYLE */
-  )) : _createCommentVNode("v-if", true), _createVNode(_component_var_form_details, {
-    "error-message": _ctx.errorMessage
+  , ["class", "offset-y", "disabled", "placement", "show", "onClose"]), _createVNode(_component_var_form_details, {
+    "error-message": _ctx.errorMessage,
+    onClick: _cache[2] || (_cache[2] = _withModifiers(() => {}, ["stop"]))
   }, null, 8
   /* PROPS */
   , ["error-message"])], 2
@@ -187,19 +167,19 @@ var __sfc__ = defineComponent({
     VarIcon,
     VarMenu,
     VarChip,
+    VarFieldDecorator,
     VarFormDetails
   },
   props,
 
   setup(props) {
-    var wrapEl = ref(null);
     var isFocus = ref(false);
     var multiple = computed(() => props.multiple);
     var focusColor = computed(() => props.focusColor);
     var label = ref('');
     var labels = ref([]);
     var isEmptyModelValue = computed(() => isEmpty(props.modelValue));
-    var wrapWidth = ref('0px');
+    var cursor = computed(() => props.disabled || props.readonly ? '' : 'pointer');
     var offsetY = ref(0);
     var {
       bindForm,
@@ -218,6 +198,7 @@ var __sfc__ = defineComponent({
       resetValidation
     } = useValidation();
     var menuEl = ref(null);
+    var placement = computed(() => props.variant === 'outlined' ? 'bottom-start' : 'cover-top-start');
 
     var computeLabel = () => {
       var {
@@ -285,25 +266,6 @@ var __sfc__ = defineComponent({
       return (_option$label$value = (_option = option) == null ? void 0 : _option.label.value) != null ? _option$label$value : '';
     };
 
-    var computePlaceholderState = () => {
-      var {
-        hint,
-        modelValue
-      } = props;
-
-      if (!hint && !isEmpty(modelValue)) {
-        return n('--placeholder-hidden');
-      }
-
-      if (hint && (!isEmpty(modelValue) || isFocus.value)) {
-        return n('--placeholder-hint');
-      }
-    };
-
-    var getWrapWidth = () => {
-      return wrapEl.value && window.getComputedStyle(wrapEl.value).width || '0px';
-    };
-
     var handleFocus = () => {
       var {
         disabled,
@@ -315,7 +277,6 @@ var __sfc__ = defineComponent({
         return;
       }
 
-      wrapWidth.value = getWrapWidth();
       offsetY.value = toPxNum(props.offsetY);
       isFocus.value = true;
       call(onFocus);
@@ -441,7 +402,6 @@ var __sfc__ = defineComponent({
 
 
     var focus = () => {
-      wrapWidth.value = getWrapWidth();
       offsetY.value = toPxNum(props.offsetY);
       isFocus.value = true;
     }; // expose
@@ -475,7 +435,6 @@ var __sfc__ = defineComponent({
     });
     watch(() => length.value, syncOptions);
     var selectProvider = {
-      wrapWidth: computed(() => wrapWidth.value),
       multiple,
       focusColor,
       computeLabel,
@@ -487,7 +446,6 @@ var __sfc__ = defineComponent({
     bindOptions(selectProvider);
     call(bindForm, selectProvider);
     return {
-      wrapEl,
       offsetY,
       isFocus,
       errorMessage,
@@ -497,9 +455,10 @@ var __sfc__ = defineComponent({
       labels,
       isEmptyModelValue,
       menuEl,
+      placement,
+      cursor,
       n,
       classes,
-      computePlaceholderState,
       handleFocus,
       handleBlur,
       handleClear,

package/es/select/props.mjs

@@ -1,14 +1,14 @@
-import { defineListenerProp } from '../utils/components.mjs';
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import { defineListenerProp, pickProps } from '../utils/components.mjs';
+import { props as fieldDecoratorProps } from '../field-decorator/props.mjs';
 export function textAlignValidator(textAlign) {
   return ['left', 'right', 'center'].includes(textAlign);
 }
-export var props = {
+export var props = _extends({
   modelValue: {
     default: undefined
   },
-  placeholder: {
-    type: String
-  },
   multiple: {
     type: Boolean,
     default: false
@@ -21,35 +21,10 @@ export var props = {
     type: Boolean,
     default: false
   },
-  line: {
-    type: Boolean,
-    default: true
-  },
-  hint: {
-    type: Boolean,
-    default: true
-  },
-  textColor: {
-    type: String
-  },
-  focusColor: {
-    type: String
-  },
-  blurColor: {
-    type: String
-  },
-  disabled: {
-    type: Boolean,
-    default: false
-  },
   readonly: {
     type: Boolean,
     default: false
   },
-  clearable: {
-    type: Boolean,
-    default: false
-  },
   separator: {
     type: String,
     default: ','
@@ -68,9 +43,8 @@ export var props = {
   },
   onFocus: defineListenerProp(),
   onBlur: defineListenerProp(),
-  onClick: defineListenerProp(),
-  onClear: defineListenerProp(),
   onClose: defineListenerProp(),
   onChange: defineListenerProp(),
+  onClear: defineListenerProp(),
   'onUpdate:modelValue': defineListenerProp()
-};
+}, pickProps(fieldDecoratorProps, ['size', 'variant', 'placeholder', 'line', 'hint', 'textColor', 'focusColor', 'blurColor', 'disabled', 'clearable', 'onClick']));

package/es/select/select.css

@@ -1 +1 @@
-:root { --select-select-text-color: #555; --select-select-padding: 5px 0; --select-error-color: var(--color-danger); --select-blur-color: #888; --select-focus-color: var(--color-primary); --select-scroller-background: #fff; --select-scroller-padding: 6px 0; --select-scroller-margin: 8px 0 0 0; --select-scroller-max-height: 278px; --select-placeholder-size: 16px; --select-icon-padding: 16px 0 0; --select-icon-size: 20px; --select-chip-margin: 5px 5px 0; --select-line-size: 1px; --select-line-spread-size: 2px; --select-arrow-size: 20px; --select-disabled-color: var(--color-text-disabled);}.var-select-footer-margin-enter-from,.var-select-footer-margin-leave-to { opacity: 0; margin-top: 2px !important;}.var-select-footer-margin-enter-active,.var-select-footer-margin-leave-active { transition: 0.2s all var(--cubic-bezier);}.var-select { width: 100%; color: var(--select-select-text-color); overflow: hidden;}.var-select__controller { width: 100%; display: flex; position: relative;}.var-select__menu[var-select-cover] { flex-grow: 1; background: transparent;}.var-select__chip[var-select-cover] { margin: var(--select-chip-margin);}.var-select__scroller { max-height: var(--select-scroller-max-height); background: var(--select-scroller-background); padding: var(--select-scroller-padding); overflow-y: auto; margin: var(--select-scroller-margin); transition: background-color 0.25s;}.var-select__wrap { position: relative; display: flex; flex-direction: column; width: 100%; padding-top: var(--select-placeholder-size);}.var-select__icon { display: flex; align-items: center; padding: var(--select-icon-padding); font-size: 20px;}.var-select__placeholder { position: absolute; top: 50%; left: 0; width: 100%; transform-origin: left; transition: top 0.3s, transform 0.3s, width 0.3s, color 0.25s; transform: translate(0, calc(-50% + var(--select-placeholder-size) / 2)) scale(1); font-size: var(--select-placeholder-size); color: var(--select-blur-color);}.var-select__select { display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 32px; padding: var(--select-select-padding); outline: none; border: none; font-size: inherit; color: var(--select-select-text-color); word-break: break-all; overflow-x: hidden; transition: color 0.25s;}.var-select__label { display: flex; align-items: center;}.var-select__arrow[var-select-cover] { flex-shrink: 0; font-size: var(--select-arrow-size);}.var-select__line { width: 100%; height: var(--select-line-size); background: var(--select-blur-color); transition: background-color 0.25s;}.var-select__dot { width: 100%; height: var(--select-line-spread-size); background: var(--select-focus-color); transform: scaleX(0); transform-origin: center; transition: transform 0.3s var(--cubic-bezier), background-color 0.25s;}.var-select--placeholder-hint { top: 0; width: 133.33%; transform: translate(0, 0) scale(0.75);}.var-select--placeholder-non-hint { top: 50%; transform: translate(0, -50%) scale(1);}.var-select--non-hint { padding-top: 0;}.var-select--placeholder-hidden { visibility: hidden;}.var-select--focus { color: var(--select-focus-color);}.var-select--spread { transform: scaleX(1);}.var-select--disabled { color: var(--select-disabled-color); cursor: not-allowed;}.var-select--error { color: var(--select-error-color);}.var-select--line-disabled { background: var(--select-disabled-color);}.var-select--line-error { background: var(--select-error-color);}.var-select--arrow-rotate { transform: rotate(180deg);}
+:root { --select-scroller-background: #fff; --select-scroller-padding: 6px 0; --select-scroller-max-height: 278px; --select-chip-margin: 5px 5px 0; --select-arrow-size: 20px; --select-standard-scroller-margin: calc(var(--field-decorator-placeholder-size) * 0.75 + 8px) 0 0 0; --select-outlined-scroller-margin: 0;}.var-select__menu[var-select-cover] { width: 100%; background: transparent;}.var-select__chip[var-select-cover] { margin: var(--select-chip-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;}.var-select__scroller.var-select__scroller-standard { margin: var(--select-standard-scroller-margin);}.var-select__scroller.var-select__scroller-outline { margin: var(--select-outline-scroller-margin);}.var-select__scroller-non-hint { --select-standard-scroller-margin: 8px 0 0 0;}.var-select__wrap { position: relative; display: flex; flex-direction: column; width: 100%;}.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-x: hidden; transition: color 0.25s;}.var-select__label { display: flex; align-items: center;}.var-select__arrow[var-select-cover] { flex-shrink: 0; font-size: var(--select-arrow-size);}.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);}

package/es/select/style/index.mjs

@@ -4,5 +4,6 @@ import '../../icon/icon.css'
 import '../../menu/menu.css'
 import '../../form-details/formDetails.css'
 import '../../chip/chip.css'
+import '../../field-decorator/fieldDecorator.css'
 import '../select.css'
 import '../SelectSfc.css'

package/es/snackbar/Snackbar.mjs

@@ -21,6 +21,7 @@ function __render__(_ctx, _cache) {
     default: _withCtx(() => [_createVNode(_component_var_snackbar_core, _mergeProps(_ctx.$props, {
       class: _ctx.n('transition')
     }), {
+      icon: _withCtx(() => [_renderSlot(_ctx.$slots, "icon")]),
       action: _withCtx(() => [_renderSlot(_ctx.$slots, "action")]),
       default: _withCtx(() => [_renderSlot(_ctx.$slots, "default", {}, () => [_createTextVNode(_toDisplayString(_ctx.content), 1
       /* TEXT */

package/es/snackbar/core.mjs

@@ -42,6 +42,10 @@ function __render__(_ctx, _cache) {
   /* TEXT */
   )])], 2
   /* CLASS */
+  ), _createElementVNode("div", {
+    class: _normalizeClass([_ctx.n('icon')])
+  }, [_renderSlot(_ctx.$slots, "icon")], 2
+  /* CLASS */
   ), _createElementVNode("div", {
     class: _normalizeClass(_ctx.n('action'))
   }, [_ctx.iconName ? (_openBlock(), _createBlock(_component_var_icon, {

package/es/snackbar/index.mjs

@@ -1,4 +1,4 @@
-import { isVNode as _isVNode, createVNode as _createVNode, mergeProps as _mergeProps } from "vue";
+import { isVNode as _isVNode, createVNode as _createVNode, mergeProps as _mergeProps, resolveDirective as _resolveDirective } from "vue";
 
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
@@ -7,7 +7,7 @@ import VarSnackbar from './Snackbar.mjs';
 import context from '../context/index.mjs';
 import { reactive, TransitionGroup } from 'vue';
 import { call, mountInstance } from '../utils/components.mjs';
-import { isPlainObject, isString, toNumber } from '@varlet/shared';
+import { isFunction, isPlainObject, isString, toNumber } from '@varlet/shared';
 
 function _isSlot(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !_isVNode(s);
@@ -21,6 +21,8 @@ var isAllowMultiple = false;
 var defaultOptionsValue = {
   type: undefined,
   content: '',
+  icon: '',
+  action: '',
   position: 'top',
   duration: 3000,
   vertical: false,
@@ -42,6 +44,9 @@ var transitionGroupProps = {
   tag: 'div',
   class: 'var-transition-group'
 };
+
+var getSlotValue = value => () => isFunction(value) ? value() : value;
+
 var TransitionGroupHost = {
   setup() {
     return () => {
@@ -68,6 +73,16 @@ var TransitionGroupHost = {
           position
         }, getTop(reactiveSnackOptions.position));
 
+        var {
+          content,
+          icon,
+          action
+        } = reactiveSnackOptions;
+        var slots = {
+          default: getSlotValue(content),
+          icon: getSlotValue(icon),
+          action: getSlotValue(action)
+        };
         return _createVNode(VarSnackbarCore, _mergeProps(reactiveSnackOptions, {
           "key": id,
           "style": style,
@@ -75,7 +90,7 @@ var TransitionGroupHost = {
           "_update": _update,
           'show': reactiveSnackOptions.show,
           "onUpdate:show": $event => reactiveSnackOptions.show = $event
-        }), null);
+        }), slots);
       });
       return _createVNode(TransitionGroup, _mergeProps(transitionGroupProps, {
         "style": {

package/es/snackbar/props.mjs

@@ -23,7 +23,7 @@ export var props = {
   },
   // content内容
   content: {
-    type: String
+    type: [String, Function, Object]
   },
   // 为snackbar content添加自定义类名
   contentClass: {

package/es/snackbar/style/index.mjs

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

package/es/sticky/Sticky.mjs

@@ -159,8 +159,8 @@ var __sfc__ = defineComponent({
     useMounted(addScrollListener);
     onUnmounted(removeScrollListener);
     onDeactivated(removeScrollListener);
-    useEventListener(window, 'scroll', handleScroll);
-    useEventListener(window, 'resize', resize);
+    useEventListener(() => window, 'scroll', handleScroll);
+    useEventListener(() => window, 'resize', resize);
     return {
       n,
       classes,