@varlet/ui 1.23.4-alpha.0 → 1.23.4-alpha.1

package/lib/index-anchor/props.js

@@ -0,0 +1,10 @@
+"use strict";
+
+exports.__esModule = true;
+exports.props = void 0;
+var props = {
+  index: {
+    type: [Number, String]
+  }
+};
+exports.props = props;

package/lib/index-anchor/provide.js

@@ -0,0 +1,28 @@
+"use strict";
+
+exports.__esModule = true;
+exports.useIndexBar = useIndexBar;
+
+var _components = require("../utils/components");
+
+var _provide = require("../index-bar/provide");
+
+function useIndexBar() {
+  var {
+    parentProvider,
+    bindParent
+  } = (0, _components.useParent)(_provide.INDEX_BAR_BIND_INDEX_ANCHOR_KEY);
+  var {
+    index
+  } = (0, _components.useAtParentIndex)(_provide.INDEX_BAR_COUNT_INDEX_ANCHOR_KEY);
+
+  if (!parentProvider || !bindParent) {
+    throw Error('[Varlet] IndexAnchor: You should use this component in "IndexBar"');
+  }
+
+  return {
+    index,
+    indexBar: parentProvider,
+    bindIndexBar: bindParent
+  };
+}

package/lib/index-anchor/style/index.js

@@ -0,0 +1,3 @@
+require('../../styles/common.css')
+require('../../sticky/sticky.css')
+require('../IndexAnchorSfc.css')

package/lib/index-anchor/style/less.js

@@ -0,0 +1,3 @@
+require('../../styles/common.less')
+require('../../sticky/sticky.less')
+require('../IndexAnchorSfc.less')

package/lib/index-bar/IndexBar.js

@@ -0,0 +1,186 @@
+"use strict";
+
+exports.__esModule = true;
+exports.render = render;
+exports.default = void 0;
+
+var _vue = require("vue");
+
+var _shared = require("../utils/shared");
+
+var _elements = require("../utils/elements");
+
+var _provide = require("./provide");
+
+var _props = require("./props");
+
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
+
+var _withScopeId = n => ((0, _vue.pushScopeId)(""), n = n(), (0, _vue.popScopeId)(), n);
+
+var _hoisted_1 = {
+  class: "var-index-bar",
+  ref: "barEl"
+};
+var _hoisted_2 = ["onClick"];
+
+function render(_ctx, _cache) {
+  return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", _hoisted_1, [(0, _vue.renderSlot)(_ctx.$slots, "default"), (0, _vue.createElementVNode)("ul", {
+    class: "var-index-bar__anchor-list",
+    style: (0, _vue.normalizeStyle)({
+      zIndex: _ctx.toNumber(_ctx.zIndex) + 2,
+      display: _ctx.hideList ? 'none' : 'block'
+    })
+  }, [((0, _vue.openBlock)(true), (0, _vue.createElementBlock)(_vue.Fragment, null, (0, _vue.renderList)(_ctx.anchorNameList, anchorName => {
+    return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("li", {
+      key: anchorName,
+      class: (0, _vue.normalizeClass)(["var-index-bar__anchor-item", {
+        'var-index-bar__anchor-item--active': _ctx.active === anchorName
+      }]),
+      style: (0, _vue.normalizeStyle)({
+        color: _ctx.active === anchorName && _ctx.highlightColor ? _ctx.highlightColor : ''
+      }),
+      onClick: $event => _ctx.anchorClick(anchorName)
+    }, (0, _vue.toDisplayString)(anchorName), 15
+    /* TEXT, CLASS, STYLE, PROPS */
+    , _hoisted_2);
+  }), 128
+  /* KEYED_FRAGMENT */
+  ))], 4
+  /* STYLE */
+  )], 512
+  /* NEED_PATCH */
+  );
+}
+
+var _default = (0, _vue.defineComponent)({
+  render,
+  name: 'VarIndexBar',
+  props: _props.props,
+
+  setup(props) {
+    var {
+      length,
+      indexAnchors,
+      bindIndexAnchors
+    } = (0, _provide.useIndexAnchors)();
+    var scrollEl = (0, _vue.ref)(null);
+    var clickedName = (0, _vue.ref)('');
+    var scroller = (0, _vue.ref)(null);
+    var barEl = (0, _vue.ref)(null);
+    var anchorNameList = (0, _vue.ref)([]);
+    var active = (0, _vue.ref)();
+    var sticky = (0, _vue.computed)(() => props.sticky);
+    var cssMode = (0, _vue.computed)(() => props.cssMode);
+    var stickyOffsetTop = (0, _vue.computed)(() => props.stickyOffsetTop);
+    var zIndex = (0, _vue.computed)(() => props.zIndex);
+    var indexBarProvider = {
+      active,
+      sticky,
+      cssMode,
+      stickyOffsetTop,
+      zIndex
+    };
+    bindIndexAnchors(indexBarProvider);
+
+    var emitEvent = anchor => {
+      var anchorName = (0, _shared.isPlainObject)(anchor) ? anchor.name.value : anchor;
+      if (anchorName === active.value) return;
+      active.value = anchorName;
+      props.onChange == null ? void 0 : props.onChange(anchorName);
+    };
+
+    var handleScroll = () => {
+      var {
+        scrollTop,
+        scrollHeight
+      } = scrollEl.value;
+      var {
+        offsetTop
+      } = barEl.value;
+      indexAnchors.forEach((anchor, index) => {
+        var anchorTop = anchor.ownTop.value;
+        var top = scrollTop - anchorTop + stickyOffsetTop.value - offsetTop;
+        var distance = index === indexAnchors.length - 1 ? scrollHeight : indexAnchors[index + 1].ownTop.value - anchor.ownTop.value;
+
+        if (top >= 0 && top < distance && !clickedName.value) {
+          if (index && !props.cssMode) {
+            indexAnchors[index - 1].setDisabled(true);
+          }
+
+          anchor.setDisabled(false);
+          emitEvent(anchor);
+        }
+      });
+    };
+
+    var anchorClick = /*#__PURE__*/function () {
+      var _ref = _asyncToGenerator(function* (anchorName, manualCall) {
+        if (manualCall) props.onClick == null ? void 0 : props.onClick(anchorName);
+        if (anchorName === active.value) return;
+        var indexAnchor = indexAnchors.find(({
+          name
+        }) => anchorName === name.value);
+        if (!indexAnchor) return;
+        var top = indexAnchor.ownTop.value;
+        var left = (0, _elements.getScrollLeft)(scrollEl.value);
+        clickedName.value = anchorName;
+        emitEvent(anchorName);
+        yield (0, _elements.scrollTo)(scrollEl.value, {
+          left,
+          top,
+          animation: _shared.easeInOutCubic,
+          duration: (0, _shared.toNumber)(props.duration)
+        });
+        (0, _elements.nextTickFrame)(() => {
+          clickedName.value = '';
+        });
+      });
+
+      return function anchorClick(_x, _x2) {
+        return _ref.apply(this, arguments);
+      };
+    }(); // expose
+
+
+    var scrollTo = index => {
+      (0, _elements.requestAnimationFrame)(() => anchorClick(index, true));
+    };
+
+    (0, _vue.watch)(() => length.value, () => (0, _vue.nextTick)(() => {
+      indexAnchors.forEach(({
+        name,
+        setOwnTop
+      }) => {
+        if (name.value) anchorNameList.value.push(name.value);
+        setOwnTop();
+      });
+    }));
+    (0, _vue.onMounted)(() => {
+      var _scroller$value;
+
+      scroller.value = (0, _elements.getParentScroller)(barEl.value);
+      scrollEl.value = scroller.value === window ? scroller.value.document.documentElement : scroller.value;
+      (_scroller$value = scroller.value) == null ? void 0 : _scroller$value.addEventListener('scroll', handleScroll);
+    });
+    (0, _vue.onBeforeUnmount)(() => {
+      var _scroller$value2;
+
+      (_scroller$value2 = scroller.value) == null ? void 0 : _scroller$value2.removeEventListener('scroll', handleScroll);
+    });
+    return {
+      barEl,
+      active,
+      zIndex,
+      anchorNameList,
+      toNumber: _shared.toNumber,
+      scrollTo,
+      anchorClick
+    };
+  }
+
+});
+
+exports.default = _default;

package/lib/index-bar/index.js

@@ -0,0 +1,17 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = exports._IndexBarComponent = void 0;
+
+var _IndexBar = _interopRequireDefault(require("./IndexBar.vue"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+_IndexBar.default.install = function (app) {
+  app.component(_IndexBar.default.name, _IndexBar.default);
+};
+
+var _IndexBarComponent = _IndexBar.default;
+exports._IndexBarComponent = _IndexBarComponent;
+var _default = _IndexBar.default;
+exports.default = _default;

package/lib/index-bar/indexBar.css

@@ -0,0 +1 @@
+:root { --index-bar-list-item-font-size: var(--font-size-xs); --index-bar-list-item-color: var(--color-primary); --index-bar-list-item-active-color: var(--color-danger); --index-bar-list-item-height: 14px; --index-bar-list-item-padding: 0 10px;}.var-index-bar { position: relative;}.var-index-bar__anchor-list { position: fixed; right: 0; top: 50%; transform: translate(0, -50%); list-style: none; padding: 0; margin: 0;}.var-index-bar__anchor-item { font-size: var(--index-bar-list-item-font-size); display: flex; align-items: center; height: var(--index-bar-list-item-height); justify-content: center; padding: var(--index-bar-list-item-padding); color: var(--index-bar-list-item-color); cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.var-index-bar__anchor-item--active { color: var(--index-bar-list-item-active-color);}

package/lib/index-bar/indexBar.less

@@ -0,0 +1,43 @@
+@index-bar-list-item-font-size: var(--font-size-xs);
+@index-bar-list-item-color: var(--color-primary);
+@index-bar-list-item-active-color: var(--color-danger);
+@index-bar-list-item-height: 14px;
+@index-bar-list-item-padding: 0 10px;
+
+:root {
+  --index-bar-list-item-font-size: @index-bar-list-item-font-size;
+  --index-bar-list-item-color: @index-bar-list-item-color;
+  --index-bar-list-item-active-color: @index-bar-list-item-active-color;
+  --index-bar-list-item-height: @index-bar-list-item-height;
+  --index-bar-list-item-padding: @index-bar-list-item-padding;
+}
+
+.var-index-bar {
+  position: relative;
+
+  &__anchor-list {
+    position: fixed;
+    right: 0;
+    top: 50%;
+    transform: translate(0, -50%);
+    list-style: none;
+    padding: 0;
+    margin: 0;
+  }
+
+  &__anchor-item {
+    font-size: var(--index-bar-list-item-font-size);
+    display: flex;
+    align-items: center;
+    height: var(--index-bar-list-item-height);
+    justify-content: center;
+    padding: var(--index-bar-list-item-padding);
+    color: var(--index-bar-list-item-color);
+    cursor: pointer;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+
+    &--active {
+      color: var(--index-bar-list-item-active-color);
+    }
+  }
+}

package/lib/index-bar/props.js

@@ -0,0 +1,40 @@
+"use strict";
+
+exports.__esModule = true;
+exports.props = void 0;
+var props = {
+  sticky: {
+    type: Boolean,
+    default: true
+  },
+  stickyOffsetTop: {
+    type: Number,
+    default: 0
+  },
+  cssMode: {
+    type: Boolean,
+    default: false
+  },
+  hideList: {
+    type: Boolean,
+    default: false
+  },
+  zIndex: {
+    type: [Number, String],
+    default: 1
+  },
+  highlightColor: {
+    type: String
+  },
+  duration: {
+    type: [Number, String],
+    default: 0
+  },
+  onClick: {
+    type: Function
+  },
+  onChange: {
+    type: Function
+  }
+};
+exports.props = props;

package/lib/index-bar/provide.js

@@ -0,0 +1,27 @@
+"use strict";
+
+exports.__esModule = true;
+exports.useIndexAnchors = useIndexAnchors;
+exports.INDEX_BAR_COUNT_INDEX_ANCHOR_KEY = exports.INDEX_BAR_BIND_INDEX_ANCHOR_KEY = void 0;
+
+var _components = require("../utils/components");
+
+var INDEX_BAR_BIND_INDEX_ANCHOR_KEY = Symbol('INDEX_BAR_BIND_INDEX_ANCHOR_KEY');
+exports.INDEX_BAR_BIND_INDEX_ANCHOR_KEY = INDEX_BAR_BIND_INDEX_ANCHOR_KEY;
+var INDEX_BAR_COUNT_INDEX_ANCHOR_KEY = Symbol('INDEX_BAR_COUNT_INDEX_ANCHOR_KEY');
+exports.INDEX_BAR_COUNT_INDEX_ANCHOR_KEY = INDEX_BAR_COUNT_INDEX_ANCHOR_KEY;
+
+function useIndexAnchors() {
+  var {
+    bindChildren,
+    childProviders
+  } = (0, _components.useChildren)(INDEX_BAR_BIND_INDEX_ANCHOR_KEY);
+  var {
+    length
+  } = (0, _components.useAtChildrenCounter)(INDEX_BAR_COUNT_INDEX_ANCHOR_KEY);
+  return {
+    length,
+    indexAnchors: childProviders,
+    bindIndexAnchors: bindChildren
+  };
+}

package/lib/index-bar/style/index.js

@@ -0,0 +1,3 @@
+require('../../styles/common.css')
+require('../indexBar.css')
+require('../IndexBarSfc.css')

package/lib/index-bar/style/less.js

@@ -0,0 +1,3 @@
+require('../../styles/common.less')
+require('../indexBar.less')
+require('../IndexBarSfc.less')

package/lib/input/Input.js

@@ -0,0 +1,304 @@
+"use strict";
+
+exports.__esModule = true;
+exports.render = render;
+exports.default = void 0;
+
+var _formDetails = _interopRequireDefault(require("../form-details"));
+
+var _icon = _interopRequireDefault(require("../icon"));
+
+var _vue = require("vue");
+
+var _props = require("./props");
+
+var _shared = require("../utils/shared");
+
+var _components = require("../utils/components");
+
+var _provide = require("../form/provide");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _withScopeId = n => ((0, _vue.pushScopeId)(""), n = n(), (0, _vue.popScopeId)(), n);
+
+var _hoisted_1 = {
+  key: 0,
+  class: "var-input__autocomplete"
+};
+var _hoisted_2 = ["for"];
+
+function render(_ctx, _cache) {
+  var _component_var_icon = (0, _vue.resolveComponent)("var-icon");
+
+  var _component_var_form_details = (0, _vue.resolveComponent)("var-form-details");
+
+  return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
+    class: (0, _vue.normalizeClass)(["var-input var--box", [_ctx.disabled ? 'var-input--disabled' : null]]),
+    onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleClick && _ctx.handleClick(...args))
+  }, [(0, _vue.createElementVNode)("div", {
+    class: (0, _vue.normalizeClass)(["var-input__controller", [_ctx.isFocus ? 'var-input--focus' : null, _ctx.errorMessage ? 'var-input--error' : null, _ctx.formDisabled || _ctx.disabled ? 'var-input--disabled' : null]]),
+    style: (0, _vue.normalizeStyle)({
+      color: !_ctx.errorMessage ? _ctx.isFocus ? _ctx.focusColor : _ctx.blurColor : undefined
+    })
+  }, [(0, _vue.createElementVNode)("div", {
+    class: (0, _vue.normalizeClass)(["var-input__icon", [!_ctx.hint ? 'var-input--non-hint' : null]])
+  }, [(0, _vue.renderSlot)(_ctx.$slots, "prepend-icon")], 2
+  /* CLASS */
+  ), (0, _vue.createElementVNode)("div", {
+    class: (0, _vue.normalizeClass)(["var-input__wrap", [!_ctx.hint ? 'var-input--non-hint' : null]])
+  }, [_ctx.type === 'password' ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("input", _hoisted_1)) : (0, _vue.createCommentVNode)("v-if", true), ((0, _vue.openBlock)(), (0, _vue.createBlock)((0, _vue.resolveDynamicComponent)(_ctx.textarea ? 'textarea' : 'input'), {
+    class: (0, _vue.normalizeClass)(["var-input__input", [_ctx.formDisabled || _ctx.disabled ? 'var-input--disabled' : null, _ctx.textarea ? 'var-input--textarea' : null, _ctx.errorMessage ? 'var-input--caret-error' : null]]),
+    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,
+    rows: _ctx.rows,
+    style: (0, _vue.normalizeStyle)({
+      color: _ctx.textColor,
+      caretColor: !_ctx.errorMessage ? _ctx.focusColor : null,
+      resize: _ctx.resize ? 'vertical' : 'none'
+    }),
+    onFocus: _ctx.handleFocus,
+    onBlur: _ctx.handleBlur,
+    onInput: _ctx.handleInput,
+    onChange: _ctx.handleChange
+  }, null, 8
+  /* PROPS */
+  , ["id", "disabled", "type", "value", "maxlength", "rows", "class", "style", "onFocus", "onBlur", "onInput", "onChange"])), (0, _vue.createElementVNode)("label", {
+    class: (0, _vue.normalizeClass)([_ctx.textarea ? 'var-input__textarea-placeholder' : 'var-input__placeholder', _ctx.computePlaceholderState(), !_ctx.hint ? 'var-input--placeholder-non-hint' : null]),
+    for: _ctx.id
+  }, (0, _vue.toDisplayString)(_ctx.placeholder), 11
+  /* TEXT, CLASS, PROPS */
+  , _hoisted_2)], 2
+  /* CLASS */
+  ), (0, _vue.createElementVNode)("div", {
+    class: (0, _vue.normalizeClass)(["var-input__icon", [!_ctx.hint ? 'var-input--non-hint' : null]])
+  }, [(0, _vue.renderSlot)(_ctx.$slots, "append-icon", {}, () => [_ctx.clearable && !_ctx.isEmpty(_ctx.modelValue) ? ((0, _vue.openBlock)(), (0, _vue.createBlock)(_component_var_icon, {
+    key: 0,
+    class: "var-input__clear-icon",
+    "var-input-cover": "",
+    name: "close-circle",
+    size: "14px",
+    onClick: _ctx.handleClear
+  }, null, 8
+  /* PROPS */
+  , ["onClick"])) : (0, _vue.createCommentVNode)("v-if", true)])], 2
+  /* CLASS */
+  )], 6
+  /* CLASS, STYLE */
+  ), _ctx.line ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
+    key: 0,
+    class: (0, _vue.normalizeClass)(["var-input__line", [_ctx.formDisabled || _ctx.disabled ? 'var-input--line-disabled' : null, _ctx.errorMessage ? 'var-input--line-error' : null]]),
+    style: (0, _vue.normalizeStyle)({
+      background: !_ctx.errorMessage ? _ctx.blurColor : undefined
+    })
+  }, [(0, _vue.createElementVNode)("div", {
+    class: (0, _vue.normalizeClass)(["var-input__dot", [_ctx.isFocus ? 'var-input--spread' : null, _ctx.formDisabled || _ctx.disabled ? 'var-input--line-disabled' : null, _ctx.errorMessage ? 'var-input--line-error' : null]]),
+    style: (0, _vue.normalizeStyle)({
+      background: !_ctx.errorMessage ? _ctx.focusColor : undefined
+    })
+  }, null, 6
+  /* CLASS, STYLE */
+  )], 6
+  /* CLASS, STYLE */
+  )) : (0, _vue.createCommentVNode)("v-if", true), (0, _vue.createVNode)(_component_var_form_details, {
+    "error-message": _ctx.errorMessage,
+    "maxlength-text": _ctx.maxlengthText
+  }, null, 8
+  /* PROPS */
+  , ["error-message", "maxlength-text"])], 2
+  /* CLASS */
+  );
+}
+
+var _default = (0, _vue.defineComponent)({
+  render,
+  name: 'VarInput',
+  components: {
+    VarIcon: _icon.default,
+    VarFormDetails: _formDetails.default
+  },
+  props: _props.props,
+
+  setup(props) {
+    var id = (0, _vue.ref)("var-input-" + (0, _vue.getCurrentInstance)().uid);
+    var el = (0, _vue.ref)(null);
+    var isFocus = (0, _vue.ref)(false);
+    var maxlengthText = (0, _vue.computed)(() => {
+      var {
+        maxlength,
+        modelValue
+      } = props;
+
+      if (!maxlength) {
+        return '';
+      }
+
+      if ((0, _shared.isEmpty)(modelValue)) {
+        return "0 / " + maxlength;
+      }
+
+      return String(modelValue).length + "/" + maxlength;
+    });
+    var {
+      bindForm,
+      form
+    } = (0, _provide.useForm)();
+    var {
+      errorMessage,
+      validateWithTrigger: vt,
+      validate: v,
+      // expose
+      resetValidation
+    } = (0, _components.useValidation)();
+
+    var validateWithTrigger = trigger => {
+      (0, _vue.nextTick)(() => {
+        var {
+          validateTrigger,
+          rules,
+          modelValue
+        } = props;
+        vt(validateTrigger, trigger, rules, modelValue);
+      });
+    };
+
+    var computePlaceholderState = () => {
+      var {
+        hint,
+        modelValue
+      } = props;
+
+      if (!hint && !(0, _shared.isEmpty)(modelValue)) {
+        return 'var-input--placeholder-hidden';
+      }
+
+      if (hint && (!(0, _shared.isEmpty)(modelValue) || isFocus.value)) {
+        return 'var-input--placeholder-hint';
+      }
+    };
+
+    var handleFocus = e => {
+      isFocus.value = true;
+      props.onFocus == null ? void 0 : props.onFocus(e);
+      validateWithTrigger('onFocus');
+    };
+
+    var handleBlur = e => {
+      isFocus.value = false;
+      props.onBlur == null ? void 0 : props.onBlur(e);
+      validateWithTrigger('onBlur');
+    };
+
+    var handleInput = e => {
+      var _props$onUpdateModel;
+
+      var {
+        value
+      } = e.target;
+      (_props$onUpdateModel = props['onUpdate:modelValue']) == null ? void 0 : _props$onUpdateModel.call(props, value);
+      props.onInput == null ? void 0 : props.onInput(value, e);
+      validateWithTrigger('onInput');
+    };
+
+    var handleChange = e => {
+      var {
+        value
+      } = e.target;
+      props.onChange == null ? void 0 : props.onChange(value, e);
+      validateWithTrigger('onChange');
+    };
+
+    var handleClear = () => {
+      var _props$onUpdateModel2;
+
+      var {
+        disabled,
+        readonly,
+        clearable,
+        onClear
+      } = props;
+
+      if (form != null && form.disabled.value || form != null && form.readonly.value || disabled || readonly || !clearable) {
+        return;
+      }
+
+      (_props$onUpdateModel2 = props['onUpdate:modelValue']) == null ? void 0 : _props$onUpdateModel2.call(props, '');
+      onClear == null ? void 0 : onClear('');
+      validateWithTrigger('onClear');
+    };
+
+    var handleClick = e => {
+      var {
+        disabled,
+        onClick
+      } = props;
+
+      if (form != null && form.disabled.value || disabled) {
+        return;
+      }
+
+      onClick == null ? void 0 : onClick(e);
+      validateWithTrigger('onClick');
+    }; // expose
+
+
+    var reset = () => {
+      var _props$onUpdateModel3;
+
+      (_props$onUpdateModel3 = props['onUpdate:modelValue']) == null ? void 0 : _props$onUpdateModel3.call(props, '');
+      resetValidation();
+    }; // expose
+
+
+    var validate = () => v(props.rules, props.modelValue); // expose
+
+
+    var focus = () => {
+      ;
+      el.value.focus();
+    }; // expose
+
+
+    var blur = () => {
+      ;
+      el.value.blur();
+    };
+
+    var inputProvider = {
+      reset,
+      validate,
+      resetValidation
+    };
+    bindForm == null ? void 0 : bindForm(inputProvider);
+    return {
+      el,
+      id,
+      isFocus,
+      errorMessage,
+      maxlengthText,
+      formDisabled: form == null ? void 0 : form.disabled,
+      formReadonly: form == null ? void 0 : form.readonly,
+      isEmpty: _shared.isEmpty,
+      computePlaceholderState,
+      handleFocus,
+      handleBlur,
+      handleInput,
+      handleChange,
+      handleClear,
+      handleClick,
+      validate,
+      resetValidation,
+      reset,
+      focus,
+      blur
+    };
+  }
+
+});
+
+exports.default = _default;