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

This is a test version of the Vue 3 component library

import { inject, ref, nextTick, computed, reactive } from 'vue';
import { UiFormEmitterKey } from '../../../../constants/index.mjs';
import '../../../../utils/index.mjs';
import { append } from '../../../../utils/src/node/index.mjs';
import { relativeContainerBody } from '../../../../utils/src/dispose/boundary/src/relativeContainerBody.mjs';
import { isNumber } from 'lodash-es';
import * as index from '../../../../utils/src/animation/index.mjs';
import { selector } from '../../../../utils/src/animation/index.mjs';

const useComposable = (define, emits) => {
  const emitter = inject(UiFormEmitterKey, void 0);
  const vars = {
    observer: void 0
  };
  const refs = {
    visible: ref(false)
  };
  const nodes = {
    main: ref(),
    body: ref(),
    container: ref()
  };
  const utils = {
    //* 候选框显示事件
    show: () => {
      if (refs.visible.value) return;
      else {
        refs.visible.value = true;
        nextTick(() => {
          var _a;
          if (!nodes.container.value || !nodes.body.value) return;
          else {
            append(document.body, nodes.body.value);
            (_a = vars.observer) == null ? void 0 : _a.disconnect();
            vars.observer = new ResizeObserver(() => {
              var _a2;
              if (!nodes.container.value || !nodes.body.value) return;
              else {
                const data = { container: nodes.container.value, view: nodes.body.value };
                const width = ((_a2 = nodes.container.value) == null ? void 0 : _a2.offsetWidth) || 0;
                relativeContainerBody(data, {
                  direction: "bottom",
                  offset: 8,
                  height: define.height,
                  width: { min: width, max: define.widthExtra },
                  align: "start"
                });
              }
            });
            vars.observer.observe(document.documentElement);
          }
        });
      }
    }
  };
  const methods = {
    //* Input失去焦点事件
    blur: (ev) => {
      var _a, _b;
      if (!ev) return (_a = nodes.main.value) == null ? void 0 : _a.blur();
      else {
        refs.visible.value = false;
        emits("blur", ev);
        emitter == null ? void 0 : emitter.emit(define.name || "", "blur");
        (_b = vars.observer) == null ? void 0 : _b.disconnect();
      }
    },
    //* Input获取焦点事件
    focus: (ev) => {
      var _a;
      if (!ev) return (_a = nodes.main.value) == null ? void 0 : _a.focus();
      else {
        utils.show();
        emits("focus", ev);
      }
    },
    //* 清空事件
    clear: () => {
      emits("update:modelValue", "");
      emits("clear");
      if (emitter == null ? void 0 : emitter.emit) {
        emitter.emit(define.name || "", "change");
      }
    },
    //* Input触发input事件
    input: (ev) => {
      const target = ev.target;
      utils.show();
      emits("update:modelValue", target.value);
      emits("input", ev);
    },
    //* Input触发回车事件
    enter: (ev) => {
      emits("enter", ev);
    },
    //* Input触发change事件
    change: (ev) => {
      emits("change", ev);
      emitter == null ? void 0 : emitter.emit(define.name || "", "change");
    }
  };
  const computeds = {
    //* 禁用状态
    disabled: computed(() => define.loading || define.disabled),
    //* 组件类
    className: computed(() => {
      var _a;
      const className = [];
      if (define.size != "default") className.push(`ui-${define.size}`);
      if (define.clearable) className.push("ui-clearable");
      if (refs.visible.value && ((_a = define.candidates) == null ? void 0 : _a.length)) className.push("ui-form-selector");
      if (define.loading) className.push("ui-loading-status");
      else if (define.disabled) className.push("ui-disabled-status");
      else if (define.readonly) {
        className.push("ui-readonly-status");
      }
      return className.join(" ");
    })
  };
  const binds = reactive({
    //* 主体
    main: computed(() => {
      return {
        type: define.type,
        disabled: computeds.disabled.value,
        readonly: define.readonly,
        maxlength: define.maxlength,
        placeholder: define.placeholder,
        autocomplete: define.autocomplete
      };
    }),
    //* 候选项容器
    body: computed(() => {
      return {
        class: define.classExtraName || "",
        style: {
          zIndex: define.zIndex
        }
      };
    }),
    //* 容器
    container: computed(() => {
      return {
        class: computeds.className.value,
        style: {
          width: isNumber(define.width) ? define.width + "px" : define.width
        }
      };
    }),
    //* 候选项列表
    candidates: computed(() => {
      return {
        style: {
          maxHeight: define.height + "px"
        }
      };
    })
  });
  const ons = {
    //* 主体
    main: {
      change: methods.change,
      focus: methods.focus,
      input: methods.input,
      blur: methods.blur
    },
    //* 候选项
    candidate: (option) => {
      return {
        mousedown: (ev) => {
          emits("update:modelValue", option.value);
          emits("select", ev, option);
          emits("change", ev);
          if (emitter == null ? void 0 : emitter.emit) {
            emitter.emit(define.name || "", "change");
          }
        }
      };
    },
    //* 动画函数
    animation: selector(define.animation, {
      beforeEnter: () => emits("before-enter"),
      beforeLeave: () => emits("before-leave"),
      afterEnter: () => emits("after-enter"),
      afterLeave: () => emits("after-leave")
    })
  };
  return { ons, vars, refs, binds, nodes, methods, computeds, animations: index };
};

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