birdpaper-ui/lib/select/src/select.vue2.js

一个通用的 vue3 UI组件库。A common vue3 UI component library.

"use strict";
const vue = require("vue");
const type = require("./type.js");
const clickOutside = require("../../directives/clickOutside.js");
const input = require("../../input/src/input.vue.js");
const birdpaperIcon = require("birdpaper-icon");
const dom = require("../../utils/dom.js");
const select = require("./select.js");
const _sfc_main = vue.defineComponent({
  name: "Select",
  components: { BpInput: input, IconCloseLine: birdpaperIcon.IconCloseLine },
  directives: { clickOutside: clickOutside.vClickOutside },
  props: {
    /** 绑定值 Binding value */
    modelValue: { type: [String, Number], default: "" },
    /** 是否禁用 Disabled or not */
    disabled: { type: Boolean, default: false },
    /** 占位提示文字 The placeholder text */
    placeholder: { type: String, default: "" },
    /** 是否允许清空 Clearable or not */
    clearable: { type: Boolean, default: false }
  },
  emits: ["update:modelValue", "change"],
  setup(props, { emit, slots }) {
    const name = "bp-select";
    const inpRef = vue.ref();
    const showClear = vue.ref(false);
    const hasOptions = vue.computed(() => {
      var _a;
      const children = dom.getAllElements((_a = slots.default) == null ? void 0 : _a.call(slots), true).filter((item) => item.type["name"] === "BpOption");
      return children.length !== 0;
    });
    const { currentSelect, valueMap, isFocus } = select.useSelect(slots);
    vue.provide(type.selectInjectionKey, {
      modelValue: props.modelValue,
      currentSelect,
      onSelect: (v, payload) => {
        currentSelect.value = v;
        currentSelect.label = payload.label;
        emit("update:modelValue", currentSelect.value);
        emit("change", currentSelect.value);
        isFocus.value = false;
      }
    });
    const clsName = vue.computed(() => {
      let cls = [name];
      if (isFocus.value)
        cls.push(`${name}-focus`);
      if (props.disabled)
        cls.push(`${name}-disabled`);
      return cls;
    });
    const setValue = () => {
      currentSelect.value = props.modelValue;
      currentSelect.label = valueMap.value[currentSelect.value];
    };
    const handleMouseEnter = () => {
      if (!props.clearable)
        return;
      showClear.value = true;
    };
    const handleMouseLeave = () => {
      if (!props.clearable)
        return;
      showClear.value = false;
    };
    const handleClear = () => {
      currentSelect.value = "";
      currentSelect.label = "";
    };
    vue.watch(
      () => valueMap.value,
      () => setValue(),
      {
        immediate: true,
        deep: true
      }
    );
    vue.watch(
      () => props.modelValue,
      () => setValue()
    );
    return {
      name,
      inpRef,
      hasOptions,
      currentSelect,
      isFocus,
      clsName,
      handleMouseEnter,
      handleMouseLeave,
      showClear,
      handleClear,
      IconArrowDownSLine: birdpaperIcon.IconArrowDownSLine,
      IconArrowUpSLine: birdpaperIcon.IconArrowUpSLine
    };
  }
});
module.exports = _sfc_main;