various-ui/es/components/input/steps/src/composable.mjs

This is a test version of the Vue 3 component library

import { inject, ref, computed, reactive } from 'vue';
import { UiFormEmitterKey } from '../../../../constants/index.mjs';
import '../../../../utils/index.mjs';
import { cloneDeep } from 'lodash-es';

const useComposable = (define, emit) => {
  const emitter = inject(UiFormEmitterKey, void 0);
  const refs = {
    currentPage: ref("")
  };
  const methods = {
    //* Input失去焦点事件
    blur: (ev) => {
      emit("blur", ev);
      emitter == null ? void 0 : emitter.emit(define.name || "", "blur");
      refs.currentPage.value = "";
    },
    //* Input获取焦点事件
    focus: (ev) => {
      emit("focus", ev);
    },
    //* Input触发input事件
    input: (ev) => {
      emit("input", ev);
    },
    //* Input触发change事件
    change: (ev) => {
      var _a, _b, _c, _d;
      if (!((_b = (_a = define.modelValue) == null ? void 0 : _a.start) == null ? void 0 : _b.toString()) || !((_d = (_c = define.modelValue) == null ? void 0 : _c.end) == null ? void 0 : _d.toString())) return;
      else {
        emit("change", ev);
        emitter == null ? void 0 : emitter.emit(define.name || "", "change");
      }
    }
  };
  const computeds = {
    //* 样式列表
    style: computed(() => {
      return {
        width: (define.width - (define.spacing * 2 + 12)) / 2 + "px"
      };
    }),
    //* 标签类名
    className: computed(() => {
      const result = [];
      if (define.disabled) result.push("ui-disabled-status");
      else if (define.readonly) result.push("ui-readonly-status");
      if (define.size != "default") result.push(`ui-${define.size}`);
      return result.join(" ");
    })
  };
  const binds = reactive({
    //* 容器属性
    container: computed(() => {
      return {
        class: computeds.className.value,
        style: {
          width: `${define.width || 0}px`
        }
      };
    }),
    //* 增量输入框属性
    number: computed(() => {
      return {
        type: "number",
        disabled: define.disabled,
        readonly: define.readonly,
        placeholder: "0",
        style: {
          width: `${define.widthNumber || 0}px`
        }
      };
    }),
    //* 主输入框属性
    input: computed(() => {
      var _a, _b;
      const data = { type: "number", disabled: define.disabled, readonly: define.readonly };
      return {
        end: Object.assign(cloneDeep(data), { placeholder: ((_a = define.placeholder) == null ? void 0 : _a.end) || "" }),
        start: Object.assign(cloneDeep(data), { placeholder: ((_b = define.placeholder) == null ? void 0 : _b.start) || "" })
      };
    }),
    //* 分割线属性
    rect: computed(() => {
      return {
        style: {
          width: `${define.spacing * 2 + 12}px`
        }
      };
    })
  });
  const ons = {
    start: {
      blur: methods.blur,
      input: methods.input,
      change: methods.change,
      focus: (ev) => {
        refs.currentPage.value = "start";
        methods.focus(ev);
      }
    },
    end: {
      blur: methods.blur,
      input: methods.input,
      change: methods.change,
      focus: (ev) => {
        refs.currentPage.value = "end";
        methods.focus(ev);
      }
    }
  };
  return { ons, refs, binds, methods, computeds };
};

export { useComposable };
//# sourceMappingURL=composable.mjs.map