@opentiny/vue-renderless 3.9.3 → 3.10.0

package/notify/vue.js

@@ -1,5 +1,16 @@
 import "../chunk-PKUHTIDK.js";
-import { clearTimer, startTimer, close, bindEvent, unBindEvent, click, watchClosed, getOffsetStyle, getPositionSide, getZindex } from "./index";
+import {
+  clearTimer,
+  startTimer,
+  close,
+  bindEvent,
+  unBindEvent,
+  click,
+  watchClosed,
+  getOffsetStyle,
+  getPositionSide,
+  getZindex
+} from "./index";
 const api = [
   "state",
   "clearTimer",

package/numeric/vue.js

@@ -52,8 +52,12 @@ const initState = ({ reactive, computed, props, api: api2, $service, parent }) =
     inputDisabled: computed(() => props.disabled || state.formDisabled),
     displayValue: computed(() => api2.displayValue()),
     numPrecision: computed(() => api2.getNumPecision()),
-    minDisabled: computed(() => !props.circulate && state.currentValue <= props.min || state.formDisabled),
-    maxDisabled: computed(() => !props.circulate && state.currentValue >= props.max || state.formDisabled),
+    minDisabled: computed(
+      () => !props.circulate && state.currentValue <= props.min || state.formDisabled
+    ),
+    maxDisabled: computed(
+      () => !props.circulate && state.currentValue >= props.max || state.formDisabled
+    ),
     controlsAtRight: computed(() => props.controls && props.controlsPosition === "right"),
     format: computed(() => getUnitPrecision({ service: $service, props })),
     isDisplayOnly: computed(() => props.displayOnly || (parent.tinyForm || {}).displayOnly)

package/option/index.js

@@ -27,6 +27,8 @@ const hoverItem = ({ select, props, state, vm }) => () => {
 };
 const selectOptionClick = ({ props, state, select, constants, vm }) => () => {
   if (props.disabled !== true && state.groupDisabled !== true) {
+    if (select.multiple && props.required === true)
+      return;
     select.state.selectEmitter.emit(constants.EVENT_NAME.handleOptionClick, vm, true);
   }
 };
@@ -34,16 +36,22 @@ const queryChange = ({ select, props, state }) => (query) => {
   state.visible = new RegExp(escapeRegexpString(query), "i").test(state.currentLabel) || props.created;
   select.state.filteredOptionsCount += state.visible ? 1 : -1;
 };
-const toggleEvent = ({ props, refs, type }) => {
-  const optionEl = refs.option;
+const toggleEvent = ({ props, vm, type }) => {
+  const optionEl = vm.$refs.option;
   Object.keys(props.events).forEach((ev) => {
     optionEl[type + "EventListener"](ev, props.events[ev]);
   });
 };
+const initValue = ({ select, props, constants, vm }) => () => {
+  if (select.multiple && props.required) {
+    select.state.selectEmitter.emit(constants.EVENT_NAME.initValue, vm);
+  }
+};
 export {
   contains,
   handleGroupDisabled,
   hoverItem,
+  initValue,
   isEqual,
   queryChange,
   selectOptionClick,

package/option/vue.js

@@ -1,5 +1,14 @@
 import "../chunk-PKUHTIDK.js";
-import { isEqual, contains, handleGroupDisabled, hoverItem, selectOptionClick, queryChange, toggleEvent } from "./index";
+import {
+  isEqual,
+  contains,
+  handleGroupDisabled,
+  hoverItem,
+  selectOptionClick,
+  queryChange,
+  toggleEvent,
+  initValue
+} from "./index";
 const api = ["state", "visible", "hoverItem", "selectOptionClick"];
 const initState = ({ reactive, computed, props, api: api2, markRaw, select, parent }) => {
   const state = reactive({
@@ -42,7 +51,8 @@ const initApi = ({ api: api2, props, state, select, constants, vm }) => {
     hoverItem: hoverItem({ select, vm, props, state }),
     queryChange: queryChange({ select, props, state }),
     selectOptionClick: selectOptionClick({ constants, vm, props, state, select }),
-    handleGroupDisabled: handleGroupDisabled(state)
+    handleGroupDisabled: handleGroupDisabled(state),
+    initValue: initValue({ select, props, constants, vm })
   });
 };
 const initWatch = ({ watch, props, state, select, constants }) => {
@@ -67,32 +77,33 @@ const initWatch = ({ watch, props, state, select, constants }) => {
     }
   );
 };
-const initOnMounted = ({ onMounted, props, api: api2, vm, state, refs, constants, select }) => {
+const initOnMounted = ({ onMounted, props, api: api2, vm, state, constants, select }) => {
   onMounted(() => {
     state.el = vm.$el;
-    toggleEvent({ props, refs, type: "add" });
+    toggleEvent({ props, vm, type: "add" });
     select.state.selectEmitter.on(constants.EVENT_NAME.queryChange, api2.queryChange);
+    api2.initValue();
   });
 };
-const initOnBeforeUnmount = ({ onBeforeUnmount, props, select, refs, vm }) => {
+const initOnBeforeUnmount = ({ onBeforeUnmount, props, select, vm }) => {
   onBeforeUnmount(() => {
     const index = select.state.cachedOptions.indexOf(vm);
-    toggleEvent({ props, refs, type: "remove" });
+    toggleEvent({ props, vm, type: "remove" });
     if (index === -1) {
       select.state.cachedOptions.splice(index, 1);
     }
     select.onOptionDestroy(select.state.options.indexOf(vm));
   });
 };
-const renderless = (props, { computed, onMounted, onBeforeUnmount, reactive, watch, inject, markRaw }, { vm, refs, parent }) => {
+const renderless = (props, { computed, onMounted, onBeforeUnmount, reactive, watch, inject, markRaw }, { vm, parent }) => {
   const api2 = {};
   const select = inject("select");
   const constants = select._constants;
   const state = initState({ reactive, computed, props, api: api2, markRaw, select, parent });
   initApi({ api: api2, props, state, select, constants, vm });
   initWatch({ watch, props, state, select, constants });
-  initOnMounted({ onMounted, props, api: api2, vm, state, refs, constants, select });
-  initOnBeforeUnmount({ onBeforeUnmount, props, select, refs, vm });
+  initOnMounted({ onMounted, props, api: api2, vm, state, constants, select });
+  initOnBeforeUnmount({ onBeforeUnmount, props, select, vm });
   select.state.options.push(markRaw(vm));
   select.state.cachedOptions.push(markRaw(vm));
   select.state.optionsCount++;

package/option-group/index.js

@@ -2,7 +2,9 @@ import "../chunk-PKUHTIDK.js";
 const queryChange = ({ select, state, vm }) => () => {
   state.visible = true;
   if (Array.isArray(select.state.options)) {
-    const groupOptions = select.state.options.filter((option) => option.state.parent && vm && option.state.parent.label === vm.label);
+    const groupOptions = select.state.options.filter(
+      (option) => option.state.parent && vm && option.state.parent.label === vm.label
+    );
     if (Array.isArray(groupOptions)) {
       state.visible = groupOptions.some((option) => option.visible === true);
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-renderless",
-  "version": "3.9.3",
+  "version": "3.10.0",
   "description": "An enterprise-class UI component library, support both Vue.js 2 and Vue.js 3, as well as PC and mobile.",
   "homepage": "https://opentiny.design/tiny-vue",
   "keywords": [
@@ -24,6 +24,7 @@
     "url": "https://github.com/opentiny/tiny-vue/issues"
   },
   "sideEffects": false,
+  "type": "module",
   "scripts": {
     "build": "tsup",
     "build:fast": "npm run build && npm run release",

package/picker/index.js

@@ -10,11 +10,21 @@ import { formatDate, parseDate, isDateObject, getWeekNumber } from "../common/de
 import { extend } from "../common/object";
 import globalTimezone from "../picker/timezone";
 const iso8601Reg = /^\d{4}-\d{2}-\d{2}(.)\d{2}:\d{2}:\d{2}(.+)$/;
-const getPanel = ({ DatePanel, DateRangePanel, MonthRangePanel, TimePanel, TimeRangePanel, TimeSelect }) => (type) => {
+const getPanel = ({
+  DatePanel,
+  DateRangePanel,
+  MonthRangePanel,
+  YearRangePanel,
+  TimePanel,
+  TimeRangePanel,
+  TimeSelect
+}) => (type) => {
   if (type === DATEPICKER.DateRange || type === DATEPICKER.DateTimeRange) {
     return DateRangePanel;
   } else if (type === DATEPICKER.MonthRange) {
     return MonthRangePanel;
+  } else if (type === DATEPICKER.YearRange) {
+    return YearRangePanel;
   } else if (type === DATEPICKER.TimeRange) {
     return TimeRangePanel;
   } else if (type === DATEPICKER.Time) {
@@ -62,8 +72,8 @@ const getMode = ({ state }) => () => {
     return DATEPICKER.Week;
   } else if (state.type === DATEPICKER.Month) {
     return DATEPICKER.Month;
-  } else if (state.type === DATEPICKER.Year) {
-    return DATEPICKER.Year;
+  } else if ([DATEPICKER.Year, DATEPICKER.Years, DATEPICKER.YearRange].includes(state.type)) {
+    return state.type;
   } else if (state.type === DATEPICKER.Dates) {
     return DATEPICKER.Dates;
   }
@@ -80,11 +90,14 @@ const formatAsFormatAndType = ({ api }) => (value, customFormat, type) => {
 const displayValue = ({ api, props, state }) => () => {
   const formattedValue = api.formatAsFormatAndType(state.parsedValue, state.format, state.type, props.rangeSeparator);
   if (Array.isArray(state.userInput)) {
-    return [state.userInput[0] || formattedValue && formattedValue[0] || "", state.userInput[1] || formattedValue && formattedValue[1] || ""];
+    return [
+      state.userInput[0] || formattedValue && formattedValue[0] || "",
+      state.userInput[1] || formattedValue && formattedValue[1] || ""
+    ];
   } else if (state.userInput !== null) {
     return state.userInput;
   } else if (formattedValue) {
-    return state.type === DATEPICKER.Dates ? formattedValue.join(", ") : formattedValue;
+    return [DATEPICKER.Dates, DATEPICKER.Years].includes(state.type) ? formattedValue.join(", ") : formattedValue;
   }
   return "";
 };
@@ -253,7 +266,9 @@ const getDatesOfTypeValueResolveMap = (api) => ({
     return value.map((date) => api.dateFormatter(date, format));
   },
   parser(value, format) {
-    return (typeof value === "string" ? value.split(", ") : value).map((date) => date instanceof Date ? date : api.dateParser(date, format));
+    return (typeof value === "string" ? value.split(", ") : value).map(
+      (date) => date instanceof Date ? date : api.dateParser(date, format)
+    );
   }
 });
 const typeValueResolveMap = ({ api, t }) => () => ({
@@ -268,6 +283,8 @@ const typeValueResolveMap = ({ api, t }) => () => ({
   time: { formatter: api.dateFormatter, parser: api.dateParser },
   month: { formatter: api.dateFormatter, parser: api.dateParser },
   year: { formatter: api.dateFormatter, parser: api.dateParser },
+  years: getDatesOfTypeValueResolveMap(api),
+  yearrange: getDatesOfTypeValueResolveMap(api),
   number: getNumberOfTypeValueResolveMap(),
   dates: getDatesOfTypeValueResolveMap(api)
 });
@@ -295,7 +312,7 @@ const secondInputId = ({ props, state }) => () => {
   }
   return obj;
 };
-const focus = ({ api, props, refs }) => () => !props.ranged ? refs.reference.focus() : api.handleFocus();
+const focus = ({ api, props, vm }) => () => !props.ranged ? vm.$refs.reference.focus() : api.handleFocus();
 const blur = (state) => () => state.refInput.forEach((input) => input.blur());
 const parseValue = ({ api, props, state }) => (value) => {
   const isParsed = isDateObject(value) || Array.isArray(value) && value.every(isDateObject);
@@ -365,20 +382,31 @@ const handleStartChange = ({ api, state }) => () => {
     if (state.displayValue[1]) {
       state.userInput = [api.formatToString(value), state.displayValue[1]];
       newValue = [value, state.picker.state.value && state.picker.state.value[1]];
+      state.startStatus = true;
     } else {
-      let now = /* @__PURE__ */ new Date();
+      let now = new Date();
       if (now.getTime() < value.getTime()) {
         state.userInput = [api.formatToString(value), api.formatToString(value)];
         newValue = [value, value];
       } else {
-        state.userInput = [api.formatToString(value), api.formatToString(now)];
-        newValue = [value, now];
+        state.userInput = [api.formatToString(value), ""];
+        newValue = [value, ""];
       }
     }
-    state.picker.state.value = newValue;
     if (api.isValidValue(newValue)) {
+      state.picker.state.value = newValue;
+      state.historyUserInput = [value, state.picker.state.value && state.picker.state.value[1]];
+      state.historyUserValue = newValue;
       api.emitInput(newValue);
       state.userInput = null;
+    } else {
+      if (state.startStatus) {
+        state.picker.state.value = state.historyUserValue ? state.historyUserValue : state.historyValue;
+        api.emitInput(state.historyUserValue ? state.historyUserValue : state.historyValue);
+        state.userInput = state.historyUserInput ? state.historyUserInput : state.historyInput;
+      } else {
+        state.picker.state.value = newValue;
+      }
     }
   }
 };
@@ -389,8 +417,9 @@ const handleEndChange = ({ api, state }) => () => {
     if (state.displayValue[0]) {
       state.userInput = [state.displayValue[0], api.formatToString(value)];
       newValue = [state.picker.state.value && state.picker.state.value[0], value];
+      state.endStatus = true;
     } else {
-      let now = /* @__PURE__ */ new Date();
+      let now = new Date();
       if (now.getTime() < value.getTime()) {
         state.userInput = [api.formatToString(now), api.formatToString(value)];
         newValue = [now, value];
@@ -399,10 +428,21 @@ const handleEndChange = ({ api, state }) => () => {
         newValue = [value, value];
       }
     }
-    state.picker.state.value = newValue;
     if (api.isValidValue(newValue)) {
+      state.historyValue = newValue;
+      state.historyInput = [state.displayValue[0], api.formatToString(value)];
+      state.picker.state.value = newValue;
       api.emitInput(newValue);
       state.userInput = null;
+    } else {
+      if (state.endStatus) {
+        state.picker.state.value = state.historyValue;
+        api.emitInput(state.historyValue);
+        state.userInput = state.historyInput;
+      } else {
+        state.picker.state.value = state.historyValue;
+        state.userInput = state.historyInput;
+      }
     }
   }
 };
@@ -433,12 +473,12 @@ const handleClose = ({ api, props, state }) => () => {
     api.emitInput(oldValue);
   }
 };
-const handleFocus = ({ emit, refs, state }) => () => {
+const handleFocus = ({ emit, vm, state }) => () => {
   const type = state.type;
   if (DATEPICKER.TriggerTypes.includes(type) && !state.pickerVisible) {
     state.pickerVisible = true;
   }
-  emit("focus", refs.reference);
+  emit("focus", vm.$refs.reference);
 };
 const handleKeydown = ({ api, state }) => (event) => {
   const keyCode = event.keyCode;
@@ -662,6 +702,13 @@ const getType = ({ props }) => () => {
   return DATEPICKER.TimeSelect;
 };
 const watchModelValue = ({ api, props, state, dispatch }) => (value, oldValue) => {
+  state.historyInput = state.displayValue;
+  if (state.picker) {
+    state.historyValue = [
+      state.picker.state.value && state.picker.state.value[0],
+      api.parseString(state.historyInput && state.historyInput[1])
+    ];
+  }
   api.emitChange(props.modelValue);
   if (!valueEquals(value, oldValue) && !state.pickerVisible && props.validateEvent) {
     dispatch("FormItem", "form.change", value);
@@ -682,7 +729,7 @@ const computedFormat = ({ props, utils }) => () => {
 };
 const computedTriggerClass = ({ props, state }) => () => props.suffixIcon || props.prefixIcon || (state.type.includes(DATEPICKER.Time) ? DATEPICKER.IconTime : DATEPICKER.IconDate);
 const computedHaveTrigger = ({ props }) => () => typeof props.showTrigger !== "undefined" ? props.showTrigger : DATEPICKER.TriggerTypes.includes(props.type);
-const intiPopper = ({ props, hooks, vnode }) => {
+const initPopper = ({ props, hooks, vnode }) => {
   const { reactive, watch, toRefs, onBeforeUnmount, onDeactivated } = hooks;
   const { emit, refs, slots, nextTick } = vnode;
   const placementMap = DATEPICKER.PlacementMap;
@@ -734,6 +781,27 @@ const initGlobalTimezone = ({ api, state, props }) => () => {
   }
   api.emitDbTime(props.value);
 };
+const handleEnterDisplayOnlyContent = ({ state, t }) => ($event) => {
+  const target = $event.target;
+  if (target && target.scrollWidth > target.offsetWidth) {
+    state.displayOnlyTooltip = state.displayValue.join(` ${t("ui.datepicker.to")} `);
+  }
+};
+const handleEnterPickerlabel = ({ state, props }) => ($event) => {
+  const target = $event.target;
+  if (target && target.scrollWidth > target.offsetWidth) {
+    state.labelTooltip = props.label;
+  }
+};
+const setInputPaddingLeft = ({ props, state, vm, nextTick }) => () => {
+  const ml = 12;
+  const mr = 8;
+  if (props.label && !state.ranged && vm.$refs.label && vm.$refs.reference) {
+    nextTick(() => {
+      vm.$refs.reference.querySelector("input").style.paddingLeft = vm.$refs.label.offsetWidth + ml + mr + "px";
+    });
+  }
+};
 export {
   blur,
   computedFormat,
@@ -762,6 +830,8 @@ export {
   handleClose,
   handleEndChange,
   handleEndInput,
+  handleEnterDisplayOnlyContent,
+  handleEnterPickerlabel,
   handleFocus,
   handleKeydown,
   handleMouseEnter,
@@ -771,7 +841,7 @@ export {
   handleStartInput,
   hidePicker,
   initGlobalTimezone,
-  intiPopper,
+  initPopper,
   isValidValue,
   mountPicker,
   parseAsFormatAndType,
@@ -781,6 +851,7 @@ export {
   rangeFormatter,
   rangeParser,
   secondInputId,
+  setInputPaddingLeft,
   showPicker,
   typeValueResolveMap,
   updateOptions,

package/picker/vue.js

@@ -48,9 +48,12 @@ import {
   computedFormat,
   computedTriggerClass,
   computedHaveTrigger,
-  intiPopper,
+  initPopper,
   initGlobalTimezone,
-  emitDbTime
+  emitDbTime,
+  handleEnterDisplayOnlyContent,
+  handleEnterPickerlabel,
+  setInputPaddingLeft
 } from "./index";
 import { DATEPICKER } from "../common";
 const api = [
@@ -71,10 +74,18 @@ const api = [
   "handlePick",
   "handleSelectRange",
   "handleSelectChange",
-  "popperElm"
+  "popperElm",
+  "handleEnterDisplayOnlyContent",
+  "handleEnterPickerlabel"
 ];
-const initState = ({ api: api2, reactive, refs, computed, props, utils }) => {
+const initState = ({ api: api2, reactive, vm, computed, props, utils, parent }) => {
   const state = reactive({
+    historyValue: [],
+    historyInput: [],
+    historyUserInput: [],
+    historyUserValue: [],
+    startStatus: false,
+    endStatus: false,
     date: null,
     pickerVisible: false,
     showClose: false,
@@ -83,7 +94,7 @@ const initState = ({ api: api2, reactive, refs, computed, props, utils }) => {
     popperElm: null,
     unwatchPickerOptions: null,
     ranged: computed(() => state.type.includes(DATEPICKER.Range)),
-    reference: computed(() => refs.reference.$el || refs.reference),
+    reference: computed(() => vm.$refs.reference.$el || vm.$refs.reference),
     formDisabled: computed(() => (parent.tinyForm || {}).disabled),
     refInput: computed(() => state.reference ? [].slice.call(state.reference.querySelectorAll("input")) : []),
     valueIsEmpty: computed(() => api2.getValueEmpty()),
@@ -93,13 +104,16 @@ const initState = ({ api: api2, reactive, refs, computed, props, utils }) => {
     displayValue: computed(() => api2.displayValue()),
     parsedValue: computed(() => api2.parsedValue()),
     pickerSize: computed(() => props.size),
-    pickerDisabled: computed(() => props.disabled || state.formDisabled),
+    pickerDisabled: computed(() => props.disabled || state.formDisabled || state.isDisplayOnly),
     firstInputId: computed(() => api2.firstInputId()),
     secondInputId: computed(() => api2.secondInputId()),
     type: computed(() => api2.getType()),
     timezone: computed(() => api2.getTimezone()),
     valueFormat: computed(() => getValueFormat({ props, utils })),
-    format: computed(() => api2.computedFormat())
+    format: computed(() => api2.computedFormat()),
+    labelTooltip: "",
+    displayOnlyTooltip: "",
+    isDisplayOnly: computed(() => props.displayOnly || (parent.auiForm || {}).displayOnly)
   });
   return state;
 };
@@ -122,13 +136,15 @@ const initApi2 = ({ api: api2, props, state, t }) => {
     handleMouseEnter: handleMouseEnter({ props, state }),
     initGlobalTimezone: initGlobalTimezone({ api: api2, state, props }),
     parseValue: parseValue({ api: api2, props, state }),
-    handleSelectRange: handleSelectRange(state)
+    handleSelectRange: handleSelectRange(state),
+    handleEnterPickerlabel: handleEnterPickerlabel({ state, props }),
+    handleEnterDisplayOnlyContent: handleEnterDisplayOnlyContent({ state, props, t })
   });
 };
 const initApi = ({ api: api2, props, hooks, state, vnode, others, utils }) => {
-  const { t, emit, refs, dispatch, nextTick, vm } = vnode;
+  const { t, emit, dispatch, nextTick, vm } = vnode;
   const { TimePanel, TimeRangePanel } = others;
-  const { destroyPopper, popperElm, updatePopper } = intiPopper({ props, hooks, vnode });
+  const { destroyPopper, popperElm, updatePopper } = initPopper({ props, hooks, vnode });
   state.popperElm = popperElm;
   state.picker = null;
   Object.assign(api2, {
@@ -137,14 +153,14 @@ const initApi = ({ api: api2, props, hooks, state, vnode, others, utils }) => {
     hidePicker: hidePicker({ destroyPopper, state }),
     handleSelectChange: ({ tz, date }) => emit("select-change", { tz, date }),
     getPanel: getPanel(others),
-    handleFocus: handleFocus({ emit, refs, state }),
+    handleFocus: handleFocus({ emit, vm, state }),
     getTimezone: getTimezone({ props, utils }),
     emitChange: emitChange({ api: api2, dispatch, emit, props, state }),
     parsedValue: parsedValue({ api: api2, props, state, t }),
     parseAsFormatAndType: parseAsFormatAndType({ api: api2 }),
     typeValueResolveMap: typeValueResolveMap({ api: api2, t }),
     updateOptions: updateOptions({ api: api2, props, state }),
-    focus: focus({ api: api2, props, refs }),
+    focus: focus({ api: api2, props, vm }),
     handleChange: handleChange({ api: api2, state }),
     isValidValue: isValidValue({ api: api2, state }),
     emitInput: emitInput({ api: api2, emit, props, state }),
@@ -166,7 +182,8 @@ const initApi = ({ api: api2, props, hooks, state, vnode, others, utils }) => {
     watchModelValue: watchModelValue({ api: api2, props, state, dispatch }),
     computedFormat: computedFormat({ props, utils }),
     computedTriggerClass: computedTriggerClass({ props, state }),
-    computedHaveTrigger: computedHaveTrigger({ props })
+    computedHaveTrigger: computedHaveTrigger({ props }),
+    setInputPaddingLeft: setInputPaddingLeft({ props, state, vm, nextTick })
   });
   initApi2({ api: api2, props, state, t });
 };
@@ -189,17 +206,25 @@ const initWatch = ({ api: api2, state, props, watch, markRaw }) => {
   watch(() => props.isRange, api2.watchIsRange);
   watch(() => props.modelValue, api2.watchModelValue);
   watch(() => props.pickerOptions, api2.updateOptions, { deep: true });
+  watch(() => props.label, api2.setInputPaddingLeft);
 };
 const renderless = (props, hooks, vnode, others) => {
   const api2 = {};
-  const { reactive, computed, watch, onBeforeUnmount, inject, markRaw } = hooks;
-  const { refs, service, parent: parent2 } = vnode;
+  const { reactive, computed, watch, onBeforeUnmount, inject, markRaw, onMounted } = hooks;
+  const { vm, service, parent } = vnode;
   const { utils = {} } = service || {};
-  const state = initState({ api: api2, reactive, refs, computed, props, utils });
-  parent2.tinyForm = parent2.tinyForm || inject("form", null);
+  const state = initState({ api: api2, reactive, vm, computed, props, utils, parent });
+  parent.tinyForm = parent.tinyForm || inject("form", null);
   initApi({ api: api2, props, hooks, state, vnode, others, utils });
   initWatch({ api: api2, state, props, watch, markRaw });
   api2.initGlobalTimezone();
+  onMounted(() => {
+    api2.setInputPaddingLeft();
+  });
+  vm.$on("handle-clear", (event) => {
+    state.showClose = true;
+    api2.handleClickIcon(event);
+  });
   onBeforeUnmount(() => {
     api2.destroyPopper("remove");
     state.popperElm = null;

package/picker-column/index.js

@@ -49,7 +49,7 @@ const adjustIndex = (state) => (index) => {
     }
   }
 };
-const onTouchstart = ({ refs, state }) => (event) => {
+const onTouchstart = ({ vm, state }) => (event) => {
   state.direction = "";
   state.deltaX = 0;
   state.deltaY = 0;
@@ -58,7 +58,7 @@ const onTouchstart = ({ refs, state }) => (event) => {
   state.startX = event.touches[0].clientX;
   state.startY = event.touches[0].clientY;
   if (state.moving) {
-    const style = window.getComputedStyle(refs.track);
+    const style = window.getComputedStyle(vm.$refs.track);
     const transform = style.transform || style.webkitTransform;
     const translateY = Number(transform.slice(7, transform.length - 1).split(", ")[5]);
     state.offset = Math.min(0, translateY - state.baseOffset);
@@ -113,8 +113,8 @@ const onTouchend = ({ api, state }) => () => {
     state.moving = false;
   }, 0);
 };
-const mountedHandler = ({ api, refs, state }) => () => {
-  const track = refs.track;
+const mountedHandler = ({ api, vm, state }) => () => {
+  const track = vm.$refs.track;
   on(track, "touchstart", api.onTouchstart);
   on(track, "touchmove", api.onTouchmove);
   on(track, "touchend", api.onTouchend);
@@ -123,8 +123,8 @@ const mountedHandler = ({ api, refs, state }) => () => {
     backgroundSize: `100% ${(state.clumnsWrapHeight - state.itemHeight) / 2}px`
   };
 };
-const beforeUnmountHandler = ({ api, refs }) => () => {
-  const track = refs.track;
+const beforeUnmountHandler = ({ api, vm }) => () => {
+  const track = vm.$refs.track;
   off(track, "touchstart", api.onTouchstart);
   off(track, "touchmove", api.onTouchmove);
   off(track, "touchend", api.onTouchend);

package/picker-column/vue.js

@@ -49,7 +49,7 @@ const initState = ({ reactive, computed, props, api: api2 }) => {
   });
   return state;
 };
-const initApi = ({ api: api2, props, state, refs, emit }) => {
+const initApi = ({ api: api2, props, state, vm, emit }) => {
   Object.assign(api2, {
     state,
     getValue: getValue(state),
@@ -66,8 +66,8 @@ const initApi = ({ api: api2, props, state, refs, emit }) => {
     momentum: momentum({ api: api2, state, props }),
     setIndex: setIndex({ api: api2, state, emit }),
     onClickItem: onClickItem({ api: api2, state }),
-    mountedHandler: mountedHandler({ api: api2, state, refs }),
-    beforeUnmountHandler: beforeUnmountHandler({ api: api2, refs })
+    mountedHandler: mountedHandler({ api: api2, state, vm }),
+    beforeUnmountHandler: beforeUnmountHandler({ api: api2, vm })
   });
 };
 const initWatch = ({ watch, props, state, api: api2 }) => {
@@ -87,10 +87,10 @@ const initWatch = ({ watch, props, state, api: api2 }) => {
     { immediate: true }
   );
 };
-const renderless = (props, { computed, onMounted, reactive, watch, onBeforeUnmount }, { emit, refs }) => {
+const renderless = (props, { computed, onMounted, reactive, watch, onBeforeUnmount }, { emit, vm }) => {
   const api2 = {};
   const state = initState({ reactive, computed, props, api: api2 });
-  initApi({ api: api2, props, state, refs, emit });
+  initApi({ api: api2, props, state, vm, emit });
   api2.setIndex(state.currentIndex);
   state.columnsItem = deepClone(props.columnsItem);
   initWatch({ watch, props, state, api: api2 });

package/popconfirm/vue.js

@@ -8,7 +8,9 @@ const renderless = (props, { computed, reactive }, { emit, constants, designConf
   const state = reactive({
     isLock: false,
     showPopover: false,
-    getIcon: computed(() => typeof props.type === "object" ? props.type : designIcon || constants.ICON_MAP[props.type])
+    getIcon: computed(
+      () => typeof props.type === "object" ? props.type : designIcon || constants.ICON_MAP[props.type]
+    )
   });
   Object.assign(api2, {
     state,