various-ui/lib/components/input/scope/src/composable.js

This is a test version of the Vue 3 component library

'use strict';

var vue = require('vue');
require('../../../../utils/index.js');
var index = require('../../../../constants/index.js');
var lodashEs = require('lodash-es');

const useComposable = (define, emits) => {
  const emitter = vue.inject(index.UiFormEmitterKey, void 0);
  const refs = {
    active: vue.ref(false)
  };
  const status = vue.computed(() => {
    if (define.loading) {
      return { is: true, name: "loading" };
    } else if (define.disabled) {
      return { is: false, name: "disabled" };
    } else if (define.readonly) {
      return { is: false, name: "readonly" };
    } else {
      return { is: false, name: "default" };
    }
  });
  const methods = {
    //* 清空事件
    clear: () => {
      emits("update:modelValue", { start: "", end: "" });
      emits("clear", "clear");
      emitter == null ? void 0 : emitter.emit(define.name || "", "change");
    }
  };
  const handlers = {
    mainHandler: {
      change: (ev) => {
        emits("change", ev);
        emitter == null ? void 0 : emitter.emit(define.name || "", "change");
      },
      input: (ev) => emits("input", ev),
      focus: (ev) => {
        refs.active.value = true;
        emits("focus", ev);
      },
      blur: (ev) => {
        refs.active.value = false;
        emits("blur", ev);
        emitter == null ? void 0 : emitter.emit(define.name || "", "blur");
      }
    }
  };
  const computeds = {
    //* 标签属性
    attrs: vue.computed(() => {
      var _a, _b;
      const isDisabled = ["disabled", "loading"].includes(status.value.name);
      const isReadonly = status.value.name == "readonly";
      return {
        start: { disabled: isDisabled, readonly: isReadonly, placeholder: (_a = define.placeholder) == null ? void 0 : _a.start },
        end: { disabled: isDisabled, readonly: isReadonly, placeholder: (_b = define.placeholder) == null ? void 0 : _b.end }
      };
    }),
    //* 样式属性
    style: vue.computed(() => {
      if (lodashEs.isNumber(define.width)) return { width: define.width + "px" };
      else {
        return { width: define.width };
      }
    }),
    //* 标签类名
    className: vue.computed(() => {
      const result = [];
      if (status.value.name == "disabled") result.push("ui-disabled-status");
      else if (status.value.name == "readonly") result.push("ui-readonly-status");
      else if (status.value.name == "loading") result.push("ui-loading-status");
      if (define.size != "default") result.push(`ui-${define.size}`);
      if (refs.active.value) result.push("ui-active");
      return result.join(" ");
    })
  };
  return { refs, status, methods, handlers, computeds };
};

exports.useComposable = useComposable;
//# sourceMappingURL=composable.js.map