@opentiny/vue-renderless 3.6.0 → 3.6.1-alpha.2

package/input/vue.js

@@ -1,319 +1,216 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-import { blur, showBox, watchFormSelect, clear, focus, select, getInput, textLength, handleBlur, handleFocus, handleInput, handleChange, calcIconOffset, resizeTextarea, getSuffixVisible, updateIconOffset, calcTextareaHeight, setNativeInputValue, calculateNodeStyling, handleCompositionEnd, handlePasswordVisible, handleCompositionStart, handleCompositionUpdate, hasSelection } from './index';
-import useStorageBox from '@opentiny/vue-renderless/tall-storage/vue-storage-box';
-export var api = ['blur', 'showBox', 'clear', 'focus', 'state', 'select', 'getInput', 'handleBlur', 'handleInput', 'handleFocus', 'handleChange', 'calcIconOffset', 'resizeTextarea', 'getSuffixVisible', 'updateIconOffset', 'calcTextareaHeight', 'setNativeInputValue', 'calculateNodeStyling', 'handleCompositionEnd', 'handlePasswordVisible', 'handleCompositionStart', 'handleCompositionUpdate', 'addMemory', 'searchMemory', 'selectedMemory', 'storageData', 'isMemoryStorage', 'hasSelection'];
-var initState = function initState(_ref) {
-  var reactive = _ref.reactive,
-    computed = _ref.computed,
-    mode = _ref.mode,
-    props = _ref.props,
-    parent = _ref.parent,
-    constants = _ref.constants;
-  var state = reactive({
-    mode: mode,
+import {
+  __spreadProps,
+  __spreadValues
+} from "../chunk-PKUHTIDK.js";
+import {
+  blur,
+  showBox,
+  watchFormSelect,
+  clear,
+  focus,
+  select,
+  getInput,
+  textLength,
+  handleBlur,
+  handleFocus,
+  handleInput,
+  handleChange,
+  calcIconOffset,
+  resizeTextarea,
+  getSuffixVisible,
+  updateIconOffset,
+  calcTextareaHeight,
+  setNativeInputValue,
+  calculateNodeStyling,
+  handleCompositionEnd,
+  handlePasswordVisible,
+  handleCompositionStart,
+  handleCompositionUpdate,
+  hasSelection
+} from "./index";
+import useStorageBox from "@opentiny/vue-renderless/tall-storage/vue-storage-box";
+const api = [
+  "blur",
+  "showBox",
+  "clear",
+  "focus",
+  "state",
+  "select",
+  "getInput",
+  "handleBlur",
+  "handleInput",
+  "handleFocus",
+  "handleChange",
+  "calcIconOffset",
+  "resizeTextarea",
+  "getSuffixVisible",
+  "updateIconOffset",
+  "calcTextareaHeight",
+  "setNativeInputValue",
+  "calculateNodeStyling",
+  "handleCompositionEnd",
+  "handlePasswordVisible",
+  "handleCompositionStart",
+  "handleCompositionUpdate",
+  "addMemory",
+  "searchMemory",
+  "selectedMemory",
+  "storageData",
+  "isMemoryStorage",
+  "hasSelection"
+];
+const initState = ({ reactive, computed, mode, props, parent, constants }) => {
+  const state = reactive({
+    mode,
     focused: false,
     hovering: false,
     isComposing: false,
     passwordVisible: false,
     boxVisibility: false,
     textareaCalcStyle: {},
-    checkedLable: '',
+    checkedLable: "",
     sheetvalue: props.modelValue,
-    inputSize: computed(function () {
-      return props.size || state.formItemSize;
-    }),
-    showClear: computed(function () {
-      return props.clearable && !state.inputDisabled && !props.readonly && state.nativeInputValue && (state.focused || state.hovering);
-    }),
-    upperLimit: computed(function () {
-      return parent.$attrs.maxlength;
-    }),
-    textLength: computed(function () {
-      return textLength(props.modelValue);
-    }),
-    inputExceed: computed(function () {
-      return state.isWordLimitVisible && state.textLength > state.upperLimit;
-    }),
-    formItemSize: computed(function () {
-      return (parent.formItem || {}).formItemSize;
-    }),
-    validateIcon: computed(function () {
-      return constants.VALIDATE_ICON[state.validateState];
-    }),
-    showWordLimit: computed(function () {
-      return props.showWordLimit && parent.$attrs.maxlength;
-    }),
-    inputDisabled: computed(function () {
-      return props.disabled || (parent.tinyForm || {}).disabled;
-    }),
-    validateState: computed(function () {
-      return parent.formItem ? parent.formItem.validateState : '';
-    }),
-    textareaStyle: computed(function () {
-      return _objectSpread(_objectSpread({}, state.textareaCalcStyle), {}, {
-        resize: props.resize
-      });
-    }),
-    needStatusIcon: computed(function () {
-      return parent.tinyForm ? parent.tinyForm.statusIcon : false;
-    }),
-    showPwdVisible: computed(function () {
-      return props.showPassword && !state.inputDisabled && !props.readonly && (!!state.nativeInputValue || state.focused);
-    }),
-    nativeInputValue: computed(function () {
-      return props.modelValue === null || props.modelValue === undefined ? '' : String(props.modelValue);
-    }),
-    isWordLimitVisible: computed(function () {
-      return (props.showWordLimit && parent.$attrs.maxlength || props.counter) && (parent.type === 'text' || parent.type === 'textarea') && !state.inputDisabled && !props.readonly && !props.showPassword;
-    })
+    inputSize: computed(() => props.size || state.formItemSize),
+    showClear: computed(() => props.clearable && !state.inputDisabled && !props.readonly && state.nativeInputValue && (state.focused || state.hovering)),
+    upperLimit: computed(() => parent.$attrs.maxlength),
+    textLength: computed(() => textLength(props.modelValue)),
+    inputExceed: computed(() => state.isWordLimitVisible && state.textLength > state.upperLimit),
+    formItemSize: computed(() => (parent.formItem || {}).formItemSize),
+    validateIcon: computed(() => constants.VALIDATE_ICON[state.validateState]),
+    showWordLimit: computed(() => props.showWordLimit && parent.$attrs.maxlength),
+    inputDisabled: computed(() => props.disabled || (parent.tinyForm || {}).disabled),
+    validateState: computed(() => parent.formItem ? parent.formItem.validateState : ""),
+    textareaStyle: computed(() => __spreadProps(__spreadValues({}, state.textareaCalcStyle), {
+      resize: props.resize
+    })),
+    needStatusIcon: computed(() => parent.tinyForm ? parent.tinyForm.statusIcon : false),
+    showPwdVisible: computed(() => props.showPassword && !state.inputDisabled && !props.readonly && (!!state.nativeInputValue || state.focused)),
+    nativeInputValue: computed(() => props.modelValue === null || props.modelValue === void 0 ? "" : String(props.modelValue)),
+    isWordLimitVisible: computed(
+      () => (props.showWordLimit && parent.$attrs.maxlength || props.counter) && (parent.type === "text" || parent.type === "textarea") && !state.inputDisabled && !props.readonly && !props.showPassword
+    )
   });
   return state;
 };
-var initApi = function initApi(_ref2) {
-  var api = _ref2.api,
-    state = _ref2.state,
-    dispatch = _ref2.dispatch,
-    broadcast = _ref2.broadcast,
-    emit = _ref2.emit,
-    refs = _ref2.refs,
-    props = _ref2.props,
-    CLASS_PREFIX = _ref2.CLASS_PREFIX,
-    parent = _ref2.parent;
-  Object.assign(api, {
-    state: state,
-    dispatch: dispatch,
-    broadcast: broadcast,
+const initApi = ({ api: api2, state, dispatch, broadcast, emit, refs, props, CLASS_PREFIX, parent }) => {
+  Object.assign(api2, {
+    state,
+    dispatch,
+    broadcast,
     showBox: showBox(state),
     clear: clear(emit),
     getInput: getInput(refs),
     handleChange: handleChange(emit),
-    watchFormSelect: watchFormSelect({
-      emit: emit,
-      props: props,
-      state: state
-    }),
-    calcIconOffset: calcIconOffset({
-      CLASS_PREFIX: CLASS_PREFIX,
-      parent: parent
-    }),
-    getSuffixVisible: getSuffixVisible({
-      parent: parent,
-      props: props,
-      state: state
-    }),
+    watchFormSelect: watchFormSelect({ emit, props, state }),
+    calcIconOffset: calcIconOffset({ CLASS_PREFIX, parent }),
+    getSuffixVisible: getSuffixVisible({ parent, props, state }),
     calculateNodeStyling: calculateNodeStyling(),
     handleCompositionStart: handleCompositionStart(state),
     handleCompositionUpdate: handleCompositionUpdate(state)
   });
 };
-var mergeApi = function mergeApi(_ref3) {
-  var storages = _ref3.storages,
-    api = _ref3.api,
-    componentName = _ref3.componentName,
-    props = _ref3.props,
-    emit = _ref3.emit,
-    eventName = _ref3.eventName,
-    nextTick = _ref3.nextTick,
-    parent = _ref3.parent,
-    state = _ref3.state,
-    refs = _ref3.refs;
-  var storageData = storages.storageData,
-    isMemoryStorage = storages.isMemoryStorage,
-    addMemory = storages.addMemory,
-    searchMemory = storages.searchMemory,
-    selectedMemory = storages.selectedMemory;
-  return Object.assign(api, {
-    addMemory: addMemory,
-    storageData: storageData,
-    searchMemory: searchMemory,
-    selectedMemory: selectedMemory,
-    isMemoryStorage: isMemoryStorage,
-    blur: blur(api),
-    focus: focus(api),
-    select: select(api),
+const mergeApi = ({ storages, api: api2, componentName, props, emit, eventName, nextTick, parent, state, refs }) => {
+  const { storageData, isMemoryStorage, addMemory, searchMemory, selectedMemory } = storages;
+  return Object.assign(api2, {
+    addMemory,
+    storageData,
+    searchMemory,
+    selectedMemory,
+    isMemoryStorage,
+    blur: blur(api2),
+    focus: focus(api2),
+    select: select(api2),
     handleBlur: handleBlur({
-      api: api,
-      componentName: componentName,
-      emit: emit,
+      api: api2,
+      componentName,
+      emit,
       eventName: eventName.blur,
-      props: props,
-      state: state
-    }),
-    handleFocus: handleFocus({
-      api: api,
-      emit: emit,
-      state: state
-    }),
-    handleInput: handleInput({
-      api: api,
-      emit: emit,
-      nextTick: nextTick,
-      state: state
+      props,
+      state
     }),
-    resizeTextarea: resizeTextarea({
-      api: api,
-      parent: parent,
-      refs: refs,
-      state: state
-    }),
-    updateIconOffset: updateIconOffset(api),
+    handleFocus: handleFocus({ api: api2, emit, state }),
+    handleInput: handleInput({ api: api2, emit, nextTick, state }),
+    resizeTextarea: resizeTextarea({ api: api2, parent, refs, state }),
+    updateIconOffset: updateIconOffset(api2),
     calcTextareaHeight: calcTextareaHeight({
-      api: api,
+      api: api2,
       hiddenTextarea: null,
-      props: props
-    }),
-    setNativeInputValue: setNativeInputValue({
-      api: api,
-      state: state
-    }),
-    handleCompositionEnd: handleCompositionEnd({
-      api: api,
-      state: state
+      props
     }),
-    handlePasswordVisible: handlePasswordVisible({
-      api: api,
-      nextTick: nextTick,
-      state: state
-    }),
-    hasSelection: hasSelection(api)
+    setNativeInputValue: setNativeInputValue({ api: api2, state }),
+    handleCompositionEnd: handleCompositionEnd({ api: api2, state }),
+    handlePasswordVisible: handlePasswordVisible({ api: api2, nextTick, state }),
+    hasSelection: hasSelection(api2)
   });
 };
-var initWatch = function initWatch(_ref4) {
-  var watch = _ref4.watch,
-    state = _ref4.state,
-    api = _ref4.api,
-    props = _ref4.props,
-    nextTick = _ref4.nextTick,
-    emit = _ref4.emit,
-    componentName = _ref4.componentName,
-    eventName = _ref4.eventName;
-  watch(function () {
-    return props.modelValue;
-  }, function (value) {
-    if (state.mode === 'mobile') {
-      state.sheetvalue = value;
-      emit('update:modelValue', value);
+const initWatch = ({ watch, state, api: api2, props, nextTick, emit, componentName, eventName }) => {
+  watch(
+    () => props.modelValue,
+    (value) => {
+      if (state.mode === "mobile") {
+        state.sheetvalue = value;
+        emit("update:modelValue", value);
+      }
+      nextTick(api2.resizeTextarea);
+      if (props.validateEvent) {
+        api2.dispatch(componentName, eventName.change, [value]);
+      }
     }
-    nextTick(api.resizeTextarea);
-    if (props.validateEvent) {
-      api.dispatch(componentName, eventName.change, [value]);
+  );
+  watch(
+    () => props.size,
+    () => nextTick(api2.resizeTextarea),
+    { immediate: true }
+  );
+  watch(
+    () => state.nativeInputValue,
+    () => {
+      api2.setNativeInputValue();
     }
-  });
-  watch(function () {
-    return props.size;
-  }, function () {
-    return nextTick(api.resizeTextarea);
-  }, {
-    immediate: true
-  });
-  watch(function () {
-    return state.nativeInputValue;
-  }, function () {
-    api.setNativeInputValue();
-  });
-  watch(function () {
-    return props.type;
-  }, function () {
-    nextTick(function () {
-      api.setNativeInputValue();
-      api.resizeTextarea();
-      api.updateIconOffset();
-    });
-  });
-  watch(function () {
-    return state.sheetvalue;
-  }, function (value) {
-    return api.watchFormSelect(value);
-  }, {
-    immediate: true
-  });
+  );
+  watch(
+    () => props.type,
+    () => {
+      nextTick(() => {
+        api2.setNativeInputValue();
+        api2.resizeTextarea();
+        api2.updateIconOffset();
+      });
+    }
+  );
+  watch(
+    () => state.sheetvalue,
+    (value) => api2.watchFormSelect(value),
+    { immediate: true }
+  );
 };
-export var renderless = function renderless(props, _ref5, _ref6) {
-  var computed = _ref5.computed,
-    onMounted = _ref5.onMounted,
-    onUpdated = _ref5.onUpdated,
-    reactive = _ref5.reactive,
-    toRefs = _ref5.toRefs,
-    watch = _ref5.watch,
-    inject = _ref5.inject;
-  var vm = _ref6.vm,
-    refs = _ref6.refs,
-    parent = _ref6.parent,
-    emit = _ref6.emit,
-    constants = _ref6.constants,
-    nextTick = _ref6.nextTick,
-    broadcast = _ref6.broadcast,
-    dispatch = _ref6.dispatch,
-    mode = _ref6.mode;
-  var api = {};
-  var componentName = constants.COMPONENT_NAME.FormItem;
-  var eventName = {
-    change: 'form.change',
-    blur: 'form.blur'
-  };
-  var CLASS_PREFIX = {
+const renderless = (props, { computed, onMounted, onUpdated, reactive, toRefs, watch, inject }, { vm, refs, parent, emit, constants, nextTick, broadcast, dispatch, mode }) => {
+  const api2 = {};
+  const componentName = constants.COMPONENT_NAME.FormItem;
+  const eventName = { change: "form.change", blur: "form.blur" };
+  const CLASS_PREFIX = {
     Input: constants.inputMode(mode),
     InputGroup: constants.inputGroupMode(mode)
   };
-  var state = initState({
-    reactive: reactive,
-    computed: computed,
-    mode: mode,
-    props: props,
-    parent: parent,
-    constants: constants
-  });
-  initApi({
-    api: api,
-    state: state,
-    dispatch: dispatch,
-    broadcast: broadcast,
-    emit: emit,
-    refs: refs,
-    props: props,
-    CLASS_PREFIX: CLASS_PREFIX,
-    parent: parent
-  });
-  var storages = useStorageBox({
-    api: api,
-    props: props,
-    reactive: reactive,
-    toRefs: toRefs
-  });
-  parent.tinyForm = parent.tinyForm || inject('form', null);
-  mergeApi({
-    api: api,
-    storages: storages,
-    componentName: componentName,
-    emit: emit,
-    eventName: eventName,
-    props: props,
-    state: state,
-    nextTick: nextTick,
-    parent: parent,
-    refs: refs
+  const state = initState({ reactive, computed, mode, props, parent, constants });
+  initApi({ api: api2, state, dispatch, broadcast, emit, refs, props, CLASS_PREFIX, parent });
+  const storages = useStorageBox({ api: api2, props, reactive, toRefs });
+  parent.tinyForm = parent.tinyForm || inject("form", null);
+  mergeApi({ api: api2, storages, componentName, emit, eventName, props, state, nextTick, parent, refs });
+  initWatch({ watch, state, api: api2, props, nextTick, emit, componentName, eventName });
+  onMounted(() => {
+    api2.setNativeInputValue();
+    api2.resizeTextarea();
+    api2.updateIconOffset();
+    dispatch("Select", "input-mounted", vm.$el);
+    dispatch("Tooltip", "tooltip-update", vm.$el);
   });
-  initWatch({
-    watch: watch,
-    state: state,
-    api: api,
-    props: props,
-    nextTick: nextTick,
-    emit: emit,
-    componentName: componentName,
-    eventName: eventName
+  onUpdated(() => {
+    nextTick(api2.updateIconOffset);
   });
-  onMounted(function () {
-    api.setNativeInputValue();
-    api.resizeTextarea();
-    api.updateIconOffset();
-    dispatch('Select', 'input-mounted', vm.$el);
-    dispatch('Tooltip', 'tooltip-update', vm.$el);
-  });
-  onUpdated(function () {
-    nextTick(api.updateIconOffset);
-  });
-  return api;
-};
+  return api2;
+};
+export {
+  api,
+  renderless
+};