@varlet/ui 2.9.6 → 2.10.0-alpha.1682067841655

package/es/input/Input.mjs

@@ -1,5 +1,5 @@
 import VarFormDetails from '../form-details/index.mjs';
-import VarIcon from '../icon/index.mjs';
+import VarFieldDecorator from '../field-decorator/FieldDecorator.mjs';
 import { defineComponent, getCurrentInstance, ref, computed, nextTick } from 'vue';
 import { props } from './props.mjs';
 import { isEmpty, toNumber } from '@varlet/shared';
@@ -10,170 +10,160 @@ var {
   n,
   classes
 } = createNamespace('input');
-import { renderSlot as _renderSlot, normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, normalizeStyle as _normalizeStyle, toDisplayString as _toDisplayString, resolveComponent as _resolveComponent, createBlock as _createBlock, createVNode as _createVNode, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
+import { renderSlot as _renderSlot, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, resolveComponent as _resolveComponent, normalizeProps as _normalizeProps, guardReactiveProps as _guardReactiveProps, withCtx as _withCtx, createVNode as _createVNode, withModifiers as _withModifiers, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
 
 var _withScopeId = n => (_pushScopeId(""), n = n(), _popScopeId(), n);
 
-var _hoisted_1 = ["id", "disabled", "type", "value", "maxlength", "rows"];
-var _hoisted_2 = ["id", "disabled", "type", "value", "maxlength"];
-var _hoisted_3 = ["for"];
+var _hoisted_1 = ["placeholder"];
+var _hoisted_2 = ["id", "disabled", "type", "value", "placeholder", "maxlength", "rows"];
+var _hoisted_3 = ["id", "disabled", "type", "value", "placeholder", "maxlength"];
 
 function __render__(_ctx, _cache) {
-  var _component_var_icon = _resolveComponent("var-icon");
+  var _component_var_field_decorator = _resolveComponent("var-field-decorator");
 
   var _component_var_form_details = _resolveComponent("var-form-details");
 
   return _openBlock(), _createElementBlock("div", {
-    class: _normalizeClass(_ctx.classes(_ctx.n(), _ctx.n('$--box'), [_ctx.disabled, _ctx.n('--disabled')])),
-    onClick: _cache[14] || (_cache[14] = function () {
-      return _ctx.handleClick && _ctx.handleClick(...arguments);
+    class: _normalizeClass(_ctx.classes(_ctx.n(), _ctx.n('$--box'))),
+    onMousedown: _cache[15] || (_cache[15] = function () {
+      return _ctx.handleMousedown && _ctx.handleMousedown(...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')]))
-  }, [_ctx.type === 'password' ? (_openBlock(), _createElementBlock("input", {
-    key: 0,
-    class: _normalizeClass(_ctx.n('autocomplete'))
-  }, null, 2
-  /* CLASS */
-  )) : _createCommentVNode("v-if", true), _ctx.textarea ? (_openBlock(), _createElementBlock("textarea", {
-    key: 1,
-    class: _normalizeClass(_ctx.classes(_ctx.n('input'), _ctx.n('--textarea'), [_ctx.formDisabled || _ctx.disabled, _ctx.n('--disabled')], [_ctx.errorMessage, _ctx.n('--caret-error')])),
-    ref: "el",
-    autocomplete: "new-password",
-    id: _ctx.id,
-    disabled: _ctx.formDisabled || _ctx.disabled || _ctx.formReadonly || _ctx.readonly,
-    type: _ctx.type,
+  }, [_createVNode(_component_var_field_decorator, _normalizeProps(_guardReactiveProps({
     value: _ctx.modelValue,
-    maxlength: _ctx.maxlength,
-    rows: _ctx.rows,
-    style: _normalizeStyle({
-      color: _ctx.textColor,
-      caretColor: !_ctx.errorMessage ? _ctx.focusColor : undefined,
-      resize: _ctx.resize ? 'vertical' : 'none'
-    }),
-    onFocus: _cache[0] || (_cache[0] = function () {
-      return _ctx.handleFocus && _ctx.handleFocus(...arguments);
-    }),
-    onBlur: _cache[1] || (_cache[1] = function () {
-      return _ctx.handleBlur && _ctx.handleBlur(...arguments);
-    }),
-    onInput: _cache[2] || (_cache[2] = function () {
-      return _ctx.handleInput && _ctx.handleInput(...arguments);
-    }),
-    onChange: _cache[3] || (_cache[3] = function () {
-      return _ctx.handleChange && _ctx.handleChange(...arguments);
-    }),
-    onTouchstart: _cache[4] || (_cache[4] = function () {
-      return _ctx.handleTouchstart && _ctx.handleTouchstart(...arguments);
-    }),
-    onCompositionstart: _cache[5] || (_cache[5] = function () {
-      return _ctx.handleCompositionStart && _ctx.handleCompositionStart(...arguments);
-    }),
-    onCompositionend: _cache[6] || (_cache[6] = function () {
-      return _ctx.handleCompositionEnd && _ctx.handleCompositionEnd(...arguments);
-    })
-  }, "\n        ", 46
-  /* CLASS, STYLE, PROPS, HYDRATE_EVENTS */
-  , _hoisted_1)) : (_openBlock(), _createElementBlock("input", {
-    key: 2,
-    class: _normalizeClass(_ctx.classes(_ctx.n('input'), [_ctx.formDisabled || _ctx.disabled, _ctx.n('--disabled')], [_ctx.errorMessage, _ctx.n('--caret-error')])),
-    ref: "el",
-    autocomplete: "new-password",
     id: _ctx.id,
-    disabled: _ctx.formDisabled || _ctx.disabled || _ctx.formReadonly || _ctx.readonly,
-    type: _ctx.type,
-    value: _ctx.modelValue,
-    maxlength: _ctx.maxlength,
-    style: _normalizeStyle({
-      color: _ctx.textColor,
-      caretColor: !_ctx.errorMessage ? _ctx.focusColor : undefined
-    }),
-    onFocus: _cache[7] || (_cache[7] = function () {
-      return _ctx.handleFocus && _ctx.handleFocus(...arguments);
-    }),
-    onBlur: _cache[8] || (_cache[8] = function () {
-      return _ctx.handleBlur && _ctx.handleBlur(...arguments);
-    }),
-    onInput: _cache[9] || (_cache[9] = function () {
-      return _ctx.handleInput && _ctx.handleInput(...arguments);
-    }),
-    onChange: _cache[10] || (_cache[10] = function () {
-      return _ctx.handleChange && _ctx.handleChange(...arguments);
-    }),
-    onTouchstart: _cache[11] || (_cache[11] = function () {
-      return _ctx.handleTouchstart && _ctx.handleTouchstart(...arguments);
-    }),
-    onCompositionstart: _cache[12] || (_cache[12] = function () {
-      return _ctx.handleCompositionStart && _ctx.handleCompositionStart(...arguments);
-    }),
-    onCompositionend: _cache[13] || (_cache[13] = function () {
-      return _ctx.handleCompositionEnd && _ctx.handleCompositionEnd(...arguments);
-    })
-  }, null, 46
-  /* CLASS, STYLE, PROPS, HYDRATE_EVENTS */
-  , _hoisted_2)), _createElementVNode("label", {
-    class: _normalizeClass(_ctx.classes(_ctx.n('$--ellipsis'), [_ctx.isFocus, _ctx.n('--focus')], [_ctx.formDisabled || _ctx.disabled, _ctx.n('--disabled')], [_ctx.errorMessage, _ctx.n('--error')], [_ctx.textarea, _ctx.n('textarea-placeholder'), _ctx.n('placeholder')], _ctx.computePlaceholderState(), [!_ctx.hint, _ctx.n('--placeholder-non-hint')])),
-    style: _normalizeStyle({
-      color: !_ctx.errorMessage ? _ctx.isFocus ? _ctx.focusColor : _ctx.blurColor : undefined
-    }),
-    for: _ctx.id
-  }, _toDisplayString(_ctx.placeholder), 15
-  /* TEXT, CLASS, STYLE, PROPS */
-  , _hoisted_3)], 2
-  /* CLASS */
-  ), _createElementVNode("div", {
-    class: _normalizeClass(_ctx.classes(_ctx.n('icon'), [!_ctx.hint, _ctx.n('--non-hint')]))
-  }, [_renderSlot(_ctx.$slots, "append-icon", {}, () => [_ctx.clearable && !_ctx.isEmpty(_ctx.modelValue) ? (_openBlock(), _createBlock(_component_var_icon, {
-    key: 0,
-    class: _normalizeClass(_ctx.n('clear-icon')),
-    "var-input-cover": "",
-    name: "close-circle",
-    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, {
+    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,
+    textarea: _ctx.textarea,
+    cursor: _ctx.cursor,
+    composing: _ctx.isComposing,
+    alwaysCustomPlaceholder: false,
+    onClick: _ctx.handleClick,
+    onClear: _ctx.handleClear
+  })), {
+    "prepend-icon": _withCtx(() => [_renderSlot(_ctx.$slots, "prepend-icon")]),
+    "append-icon": _withCtx(() => [_renderSlot(_ctx.$slots, "append-icon")]),
+    default: _withCtx(() => [_ctx.type === 'password' ? (_openBlock(), _createElementBlock("input", {
+      key: 0,
+      class: _normalizeClass(_ctx.n('autocomplete')),
+      placeholder: !_ctx.hint ? _ctx.placeholder : undefined,
+      style: _normalizeStyle({
+        '--input-placeholder-color': _ctx.placeholderColor
+      })
+    }, null, 14
+    /* CLASS, STYLE, PROPS */
+    , _hoisted_1)) : _createCommentVNode("v-if", true), _ctx.textarea ? (_openBlock(), _createElementBlock("textarea", {
+      key: 1,
+      class: _normalizeClass(_ctx.classes(_ctx.n('input'), _ctx.n('--textarea'), [_ctx.formDisabled || _ctx.disabled, _ctx.n('--disabled')], [_ctx.errorMessage, _ctx.n('--error')], [_ctx.errorMessage, _ctx.n('--caret-error')])),
+      ref: "el",
+      autocomplete: "new-password",
+      id: _ctx.id,
+      disabled: _ctx.formDisabled || _ctx.disabled || _ctx.formReadonly || _ctx.readonly,
+      type: _ctx.type,
+      value: _ctx.modelValue,
+      placeholder: !_ctx.hint ? _ctx.placeholder : undefined,
+      maxlength: _ctx.maxlength,
+      rows: _ctx.rows,
+      style: _normalizeStyle({
+        color: !_ctx.errorMessage ? _ctx.textColor : undefined,
+        caretColor: !_ctx.errorMessage ? _ctx.focusColor : undefined,
+        resize: _ctx.resize ? 'vertical' : 'none',
+        '--input-placeholder-color': _ctx.placeholderColor
+      }),
+      onFocus: _cache[0] || (_cache[0] = function () {
+        return _ctx.handleFocus && _ctx.handleFocus(...arguments);
+      }),
+      onBlur: _cache[1] || (_cache[1] = function () {
+        return _ctx.handleBlur && _ctx.handleBlur(...arguments);
+      }),
+      onInput: _cache[2] || (_cache[2] = function () {
+        return _ctx.handleInput && _ctx.handleInput(...arguments);
+      }),
+      onChange: _cache[3] || (_cache[3] = function () {
+        return _ctx.handleChange && _ctx.handleChange(...arguments);
+      }),
+      onTouchstart: _cache[4] || (_cache[4] = function () {
+        return _ctx.handleTouchstart && _ctx.handleTouchstart(...arguments);
+      }),
+      onCompositionstart: _cache[5] || (_cache[5] = function () {
+        return _ctx.handleCompositionStart && _ctx.handleCompositionStart(...arguments);
+      }),
+      onCompositionend: _cache[6] || (_cache[6] = function () {
+        return _ctx.handleCompositionEnd && _ctx.handleCompositionEnd(...arguments);
+      })
+    }, "\n      ", 46
+    /* CLASS, STYLE, PROPS, HYDRATE_EVENTS */
+    , _hoisted_2)) : (_openBlock(), _createElementBlock("input", {
+      key: 2,
+      class: _normalizeClass(_ctx.classes(_ctx.n('input'), [_ctx.formDisabled || _ctx.disabled, _ctx.n('--disabled')], [_ctx.errorMessage, _ctx.n('--error')], [_ctx.errorMessage, _ctx.n('--caret-error')])),
+      ref: "el",
+      autocomplete: "new-password",
+      id: _ctx.id,
+      disabled: _ctx.formDisabled || _ctx.disabled || _ctx.formReadonly || _ctx.readonly,
+      type: _ctx.type,
+      value: _ctx.modelValue,
+      placeholder: !_ctx.hint ? _ctx.placeholder : undefined,
+      maxlength: _ctx.maxlength,
+      style: _normalizeStyle({
+        color: !_ctx.errorMessage ? _ctx.textColor : undefined,
+        caretColor: !_ctx.errorMessage ? _ctx.focusColor : undefined,
+        '--input-placeholder-color': _ctx.placeholderColor
+      }),
+      onFocus: _cache[7] || (_cache[7] = function () {
+        return _ctx.handleFocus && _ctx.handleFocus(...arguments);
+      }),
+      onBlur: _cache[8] || (_cache[8] = function () {
+        return _ctx.handleBlur && _ctx.handleBlur(...arguments);
+      }),
+      onInput: _cache[9] || (_cache[9] = function () {
+        return _ctx.handleInput && _ctx.handleInput(...arguments);
+      }),
+      onChange: _cache[10] || (_cache[10] = function () {
+        return _ctx.handleChange && _ctx.handleChange(...arguments);
+      }),
+      onTouchstart: _cache[11] || (_cache[11] = function () {
+        return _ctx.handleTouchstart && _ctx.handleTouchstart(...arguments);
+      }),
+      onCompositionstart: _cache[12] || (_cache[12] = function () {
+        return _ctx.handleCompositionStart && _ctx.handleCompositionStart(...arguments);
+      }),
+      onCompositionend: _cache[13] || (_cache[13] = function () {
+        return _ctx.handleCompositionEnd && _ctx.handleCompositionEnd(...arguments);
+      })
+    }, null, 46
+    /* CLASS, STYLE, PROPS, HYDRATE_EVENTS */
+    , _hoisted_3))]),
+    _: 3
+    /* FORWARDED */
+
+  }, 16
+  /* FULL_PROPS */
+  ), _createVNode(_component_var_form_details, {
     "error-message": _ctx.errorMessage,
-    "extra-message": _ctx.maxlengthText
+    "extra-message": _ctx.maxlengthText,
+    onMousedown: _cache[14] || (_cache[14] = _withModifiers(() => {}, ["stop"]))
   }, null, 8
   /* PROPS */
-  , ["error-message", "extra-message"])], 2
-  /* CLASS */
+  , ["error-message", "extra-message"])], 34
+  /* CLASS, HYDRATE_EVENTS */
   );
 }
 
 var __sfc__ = defineComponent({
   name: 'VarInput',
   components: {
-    VarIcon,
-    VarFormDetails
+    VarFormDetails,
+    VarFieldDecorator
   },
   props,
 
@@ -205,6 +195,28 @@ var __sfc__ = defineComponent({
 
       return String(modelValue).length + "/" + maxlength;
     });
+    var cursor = computed(() => props.disabled || props.readonly ? '' : 'text');
+    var placeholderColor = computed(() => {
+      var {
+        hint,
+        blurColor,
+        focusColor
+      } = props;
+
+      if (hint) {
+        return undefined;
+      }
+
+      if (errorMessage.value) {
+        return 'var(--field-decorator-error-color)';
+      }
+
+      if (isFocus.value) {
+        return focusColor || 'var(--field-decorator-focus-color)';
+      }
+
+      return blurColor || 'var(--field-decorator-blur-color)';
+    });
     var {
       bindForm,
       form
@@ -228,21 +240,6 @@ var __sfc__ = defineComponent({
       });
     };
 
-    var computePlaceholderState = () => {
-      var {
-        hint,
-        modelValue
-      } = props;
-
-      if (!hint && (!isEmpty(modelValue) || isComposing.value)) {
-        return n('--placeholder-hidden');
-      }
-
-      if (hint && (!isEmpty(modelValue) || isFocus.value)) {
-        return n('--placeholder-hint');
-      }
-    };
-
     var handleFocus = e => {
       isFocus.value = true;
       call(props.onFocus, e);
@@ -359,7 +356,20 @@ var __sfc__ = defineComponent({
       }
 
       e.stopPropagation();
-    }; // expose
+    };
+
+    function handleMousedown(e) {
+      var {
+        disabled
+      } = props;
+
+      if (form != null && form.disabled.value || disabled || e.target === el.value) {
+        return;
+      }
+
+      focus();
+      e.preventDefault();
+    } // expose
 
 
     var reset = () => {
@@ -401,14 +411,15 @@ var __sfc__ = defineComponent({
       isFocus,
       isComposing,
       errorMessage,
+      placeholderColor,
       type,
+      cursor,
       maxlengthText,
       formDisabled: form == null ? void 0 : form.disabled,
       formReadonly: form == null ? void 0 : form.readonly,
       n,
       classes,
       isEmpty,
-      computePlaceholderState,
       handleFocus,
       handleBlur,
       handleInput,
@@ -418,6 +429,7 @@ var __sfc__ = defineComponent({
       handleTouchstart,
       handleCompositionStart,
       handleCompositionEnd,
+      handleMousedown,
       validate,
       resetValidation,
       reset,

package/es/input/input.css

@@ -1 +1 @@
-:root { --input-input-text-color: #555; --input-error-color: var(--color-danger); --input-blur-color: #888; --input-focus-color: var(--color-primary); --input-placeholder-size: 16px; --input-textarea-height: auto; --input-textarea-padding-top: 8px; --input-icon-padding: 16px 0 0; --input-icon-size: 20px; --input-line-size: 1px; --input-line-spread-size: 2px; --input-disabled-color: var(--color-text-disabled);}.var-input-footer-margin-enter-from,.var-input-footer-margin-leave-to { opacity: 0; margin-top: 2px !important;}.var-input-footer-margin-enter-active,.var-input-footer-margin-leave-active { transition: 0.2s all var(--cubic-bezier);}.var-input { width: 100%; color: var(--input-input-text-color); overflow: hidden;}.var-input__controller { width: 100%; display: flex; position: relative;}.var-input__wrap { position: relative; flex-grow: 1; display: flex; flex-direction: column; padding-top: var(--input-placeholder-size);}.var-input__icon { display: flex; align-items: center; padding: var(--input-icon-padding); font-size: 20px;}.var-input__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(--input-placeholder-size) / 2)) scale(1); font-size: var(--input-placeholder-size); color: var(--input-blur-color); cursor: inherit;}.var-input__textarea-placeholder { position: absolute; top: 0; left: 0; width: 100%; transform-origin: left; transition: transform 0.3s, width 0.3s, color 0.25s; transform: translate(0, calc(var(--input-textarea-padding-top) + var(--input-placeholder-size))) scale(1); font-size: var(--input-placeholder-size); color: var(--input-blur-color); cursor: inherit;}.var-input__autocomplete { width: 0; height: 0; padding: 0; border: none; outline: none; font-size: 0;}.var-input__input { width: 100%; height: 32px; padding: 0; outline: none; border: none; background: transparent; color: var(--input-input-text-color); caret-color: var(--input-focus-color); transition: color 0.25s; font: inherit;}.var-input__line { width: 100%; height: var(--input-line-size); background: var(--input-blur-color); transition: background-color 0.25s;}.var-input__dot { width: 100%; height: var(--input-line-spread-size); background: var(--input-focus-color); transform: scaleX(0); transform-origin: center; transition: transform 0.3s var(--cubic-bezier), background-color 0.25s;}.var-input__clear-icon[var-input-cover] { display: flex; font-size: 15px; margin-left: 4px;}.var-input--textarea { padding-top: var(--input-textarea-padding-top); height: var(--input-textarea-height);}.var-input--placeholder-hint { top: 0; width: 133.33%; transform: translate(0, 0) scale(0.75);}.var-input--placeholder-non-hint { top: 50%; transform: translate(0, -50%) scale(1);}.var-input--non-hint { padding-top: 0;}.var-input--placeholder-hidden { visibility: hidden;}.var-input--focus { color: var(--input-focus-color);}.var-input--spread { transform: scaleX(1);}.var-input--disabled { color: var(--input-disabled-color); cursor: not-allowed;}.var-input--error { color: var(--input-error-color);}.var-input--line-disabled { background: var(--input-disabled-color);}.var-input--line-error { background: var(--input-error-color);}.var-input--caret-error { caret-color: var(--input-error-color);}
+:root { --input-input-height: 24px; --input-textarea-height: auto;}.var-input__autocomplete { width: 0; height: 0; padding: 0; border: none; outline: none; font-size: 0;}.var-input__input { width: 100%; height: var(--input-input-height); padding: 0; outline: none; border: none; background: transparent; color: var(--field-decorator-text-color); caret-color: var(--field-decorator-focus-color); transition: color 0.25s; font: inherit;}.var-input__input::placeholder { color: var(--input-placeholder-color);}.var-input--textarea { height: var(--input-textarea-height); min-height: var(--input-input-height);}.var-input--disabled { color: var(--field-decorator-disabled-color); cursor: not-allowed;}.var-input--error { color: var(--field-decorator-error-color);}.var-input--caret-error { caret-color: var(--field-decorator-error-color);}

package/es/input/props.mjs

@@ -1,8 +1,11 @@
-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 typeValidator(type) {
   return ['text', 'password', 'number'].includes(type);
 }
-export var props = {
+export var props = _extends({
   modelValue: {
     type: String
   },
@@ -23,41 +26,13 @@ export var props = {
     type: [String, Number],
     default: 8
   },
-  placeholder: {
-    type: String
-  },
-  line: {
-    type: Boolean,
-    default: true
-  },
-  hint: {
-    type: Boolean,
-    default: true
-  },
-  textColor: {
-    type: String
-  },
-  focusColor: {
-    type: String
-  },
-  blurColor: {
-    type: String
-  },
   maxlength: {
     type: [String, Number]
   },
-  disabled: {
-    type: Boolean,
-    default: false
-  },
   readonly: {
     type: Boolean,
     default: false
   },
-  clearable: {
-    type: Boolean,
-    default: false
-  },
   resize: {
     type: Boolean,
     default: false
@@ -75,9 +50,8 @@ export var props = {
   },
   onFocus: defineListenerProp(),
   onBlur: defineListenerProp(),
-  onClick: defineListenerProp(),
-  onClear: defineListenerProp(),
   onInput: defineListenerProp(),
   onChange: defineListenerProp(),
+  onClear: defineListenerProp(),
   'onUpdate:modelValue': defineListenerProp()
-};
+}, pickProps(fieldDecoratorProps, ['size', 'variant', 'placeholder', 'line', 'hint', 'textColor', 'focusColor', 'blurColor', 'disabled', 'clearable', 'onClick']));

package/es/input/style/index.mjs

@@ -1,5 +1,6 @@
 import '../../styles/common.css'
-import '../../icon/icon.css'
 import '../../form-details/formDetails.css'
+import '../../icon/icon.css'
+import '../../field-decorator/fieldDecorator.css'
 import '../input.css'
 import '../InputSfc.css'

package/es/menu/usePopover.mjs

@@ -6,9 +6,9 @@ function _asyncToGenerator(fn) { return function () { var self = this, args = ar
 
 import flip from '@popperjs/core/lib/modifiers/flip';
 import offset from '@popperjs/core/lib/modifiers/offset';
-import { useClickOutside, useVModel } from '@varlet/use';
+import { useClickOutside } from '@varlet/use';
 import { doubleRaf, toPxNum } from '../utils/elements.mjs';
-import { call } from '../utils/components.mjs';
+import { call, useVModel } from '../utils/components.mjs';
 import { onMounted, onUnmounted, ref, watch } from 'vue';
 import { createPopper } from '@popperjs/core/lib/popper-lite';
 import { useZIndex } from '../context/zIndex.mjs';

package/es/option/Option.mjs

@@ -18,7 +18,6 @@ function __render__(_ctx, _cache) {
   return _withDirectives((_openBlock(), _createElementBlock("div", {
     class: _normalizeClass(_ctx.classes(_ctx.n(), _ctx.n('$--box'), [_ctx.optionSelected, _ctx.n('--selected-color')])),
     style: _normalizeStyle({
-      width: _ctx.wrapWidth,
       color: _ctx.optionSelected ? _ctx.focusColor : undefined
     }),
     onClick: _cache[2] || (_cache[2] = function () {
@@ -72,7 +71,6 @@ var __sfc__ = defineComponent({
       bindSelect
     } = useSelect();
     var {
-      wrapWidth,
       multiple,
       focusColor,
       onSelect,
@@ -102,7 +100,6 @@ var __sfc__ = defineComponent({
       n,
       classes,
       optionSelected,
-      wrapWidth,
       multiple,
       focusColor,
       handleClick,

package/es/option/option.css

@@ -1 +1 @@
-:root { --option-height: 38px; --option-padding: 0 12px; --option-selected-background: var(--select-focus-color);}.var-option { position: relative; display: flex; align-items: center; height: var(--option-height); padding: var(--option-padding); cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.var-option__cover { position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0.2; background: transparent;}.var-option__text { display: flex; align-items: center;}.var-option--selected-background { background: var(--option-selected-background);}.var-option--selected-color { color: var(--option-selected-background);}
+:root { --option-height: 38px; --option-padding: 0 12px; --option-selected-background: var(--field-decorator-focus-color);}.var-option { position: relative; display: flex; align-items: center; height: var(--option-height); padding: var(--option-padding); cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.var-option__cover { position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0.2; background: transparent;}.var-option__text { display: flex; align-items: center;}.var-option--selected-background { background: var(--option-selected-background);}.var-option--selected-color { color: var(--option-selected-background);}