various-ui/es/components/select/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 { includes, 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 = {
    body: ref(),
    container: ref()
  };
  const methods = {
    //* 候选框隐藏事件
    hidden: (ev) => {
      var _a;
      if (!nodes.container.value) return;
      if ((ev == null ? void 0 : ev.target) && includes(ev.target, nodes.container.value)) return;
      else {
        refs.visible.value = false;
        (_a = vars.observer) == null ? void 0 : _a.disconnect();
      }
    },
    //* 选择器清空事件
    clear: () => {
      emits("update:modelValue", "");
      emits("clear", "clear");
      if (emitter == null ? void 0 : emitter.emit) {
        emitter.emit(define.name || "", "change");
      }
    },
    //* 候选框显示事件
    show: () => {
      if (define.readonly || define.disabled || define.loading) return;
      if (refs.visible.value) {
        methods.hidden();
      } else {
        refs.visible.value = true;
        nextTick(() => {
          var _a;
          if (!nodes.container.value || !nodes.body.value) return;
          else {
            addEventListener("click", methods.hidden, { capture: true, once: true });
            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",
                  height: define.height,
                  offset: 8,
                  width: { min: width, max: define.widthExtra },
                  align: "start"
                });
              }
            });
            vars.observer.observe(document.documentElement);
          }
        });
      }
    }
  };
  const computeds = {
    //* 组件值
    value: computed(() => {
      var _a;
      if (define.resolve) return define.resolve();
      else {
        return ((_a = define.candidates.find((candidate) => candidate.value == define.modelValue)) == null ? void 0 : _a.label) || "";
      }
    }),
    //* 禁用状态
    disabled: computed(() => define.loading || define.disabled),
    //* 组件类
    className: computed(() => {
      var _a;
      const className = [];
      if (refs.visible.value && ((_a = define.candidates) == null ? void 0 : _a.length)) className.push("ui-form-selector");
      if (define.clearable) className.push("ui-clearable");
      if (define.size != "default") className.push(`ui-${define.size}`);
      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 {
        value: computeds.value.value,
        disabled: computeds.disabled.value,
        placeholder: define.placeholder,
        autocomplete: "off"
      };
    }),
    //* 候选项容器
    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 = {
    //* 候选项容器事件
    animation: selector(define.animation, {
      beforeEnter: () => emits("before-enter"),
      beforeLeave: () => emits("before-leave"),
      afterEnter: () => emits("after-enter"),
      afterLeave: () => emits("after-leave")
    }),
    //* 候选项事件
    candidate: (option) => {
      return {
        //* 候选项选择事件
        mousedown: (ev) => {
          emits("update:modelValue", option.value);
          emits("change", ev);
          emitter == null ? void 0 : emitter.emit(define.name || "", "change");
          if (refs.visible.value) {
            methods.hidden();
          }
        }
      };
    }
  };
  return { ons, vars, refs, nodes, binds, methods, computeds, animations: index };
};

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