various-ui/es/components/textarea/default/src/composable.mjs

This is a test version of the Vue 3 component library

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

const useComposable = (define, emits) => {
  const emitter = inject(UiFormEmitterKey, void 0);
  const refs = {
    inputNode: ref()
    //* 输入框节点
  };
  const methods = {
    //* 回车函数
    enter: (ev) => emits("enter", ev),
    //* 清空函数
    clear: () => {
      emits("update:modelValue", "");
      emits("clear");
      emitter == null ? void 0 : emitter.emit(define.name || "", "change");
    },
    //* 焦点获取函数
    focus: (ev) => {
      var _a;
      emits("focus", ev);
      emitter == null ? void 0 : emitter.emit(define.name || "", "focus");
      if (!ev) {
        (_a = refs.inputNode.value) == null ? void 0 : _a.focus();
      }
    },
    //* 焦点失去函数
    blur: (ev) => {
      var _a;
      emits("blur", ev);
      emitter == null ? void 0 : emitter.emit(define.name || "", "blur");
      if (!ev) {
        (_a = refs.inputNode.value) == null ? void 0 : _a.blur();
      }
    }
  };
  const handlers = {
    inputHandler: {
      blur: methods.blur,
      focus: methods.focus,
      click: (ev) => emits("click", ev),
      change: (ev) => {
        emits("change", ev);
        emitter == null ? void 0 : emitter.emit(define.name || "", "change");
      },
      input: (ev) => {
        emits("update:modelValue", ev.target.value);
        emits("input", ev);
      }
    }
  };
  const computeds = {
    //* 文本框属性
    attrs: computed(() => {
      const result = {
        rows: define.rows,
        value: define.modelValue,
        disabled: define.disabled,
        readonly: define.readonly,
        placeholder: define.placeholder
      };
      if (define.maxlength) result.maxlength = define.maxlength;
      return result;
    }),
    //* 文本框样式
    style: computed(() => {
      const result = {};
      if (define.width) {
        if (isNumber(define.width)) result.width = define.width + "px";
        else {
          result.width = define.width;
        }
      }
      if (define.height) {
        if (isNumber(define.height)) result.height = define.height + "px";
        else {
          result.height = define.height;
        }
      }
      return result;
    }),
    //* 文本框状态
    status: computed(() => {
      if (define.loading) {
        return { is: true, name: "loading" };
      } else {
        return { is: false, name: define.disabled ? "disabled" : define.readonly ? "readonly" : "default" };
      }
    }),
    //* 文本框类名
    className: computed(() => {
      const result = [];
      if (computeds.status.value.name == "disabled") result.push("ui-disabled-status");
      else if (computeds.status.value.name == "readonly") result.push("ui-readonly-status");
      else if (computeds.status.value.name == "loading") result.push("ui-loading-status");
      return result.join(" ");
    })
  };
  return { refs, methods, handlers, computeds };
};

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