song-ui-u/es/components/select/src/option.mjs

vue3 + js的PC前端组件库

import { defineComponent, inject, computed, onMounted, onBeforeUnmount, createVNode } from 'vue';
import { useNamespace } from '../../../hook/use-namespace/index.mjs';
import { Check } from 'song-ui-pro-icon';
import '../../../hook/use-zindex/index.mjs';
import { SELECT_KEY } from './constant.mjs';
import '../../button/index.mjs';
import '../../buttonGroup/index.mjs';
import { XIcon } from '../../icon/index.mjs';
import '../../input/index.mjs';
import '../../textarea/index.mjs';
import '../../row/index.mjs';
import '../../col/index.mjs';
import '../../container/index.mjs';
import '../../checkbox/index.mjs';
import '../../switch/index.mjs';
import '../../form/index.mjs';
import '../../message/index.mjs';
import '../../mask/src/mask.mjs';
import '../../modal/index.mjs';
import '../../messageBox/index.mjs';
import '../../drawer/index.mjs';
import '../../badge/index.mjs';
import '../../space/index.mjs';
import '../../image/index.mjs';
import '../../radio/index.mjs';
import '../../divider/index.mjs';
import '../../chat/index.mjs';
import '../../progress/index.mjs';
import '../../upload/index.mjs';
import '../../vTree/index.mjs';
import '../../table/index.mjs';
import '../../tabs/index.mjs';
import '../../menu/index.mjs';
import '../../steps/index.mjs';
import '../../header/index.mjs';
import '../../breadcrumble/index.mjs';
import '../../datePicker/index.mjs';
import '../../tooltip/index.mjs';
import '../../popover/index.mjs';
import '../../timePicker/index.mjs';
import '../index.mjs';
import '../../collapse/index.mjs';
import '../../card/index.mjs';
import '../../timeline/index.mjs';
import '../../tag/index.mjs';
import '../../result/index.mjs';
import '../../sender/index.mjs';

var Option = /* @__PURE__ */ defineComponent({
  name: "x-option",
  props: {
    value: {
      type: [String, Number],
      required: true
    },
    label: {
      type: String,
      default: ""
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  setup(props, {
    slots
  }) {
    const ns = useNamespace("option");
    const selectCtx = inject(SELECT_KEY);
    const id = Symbol("option");
    const isSelected = computed(() => {
      return selectCtx.isOptionSelected(props.value);
    });
    const isVisible = computed(() => {
      if (!selectCtx.props.filterable || !selectCtx.inputValue.value) {
        return true;
      }
      const label = props.label || slots.default?.();
      return label.toLowerCase().includes(selectCtx?.inputValue?.value.toLowerCase());
    });
    const handleClick = () => {
      if (props.disabled) return;
      selectCtx.selectOption(props.value, props.label || slots.default?.());
    };
    onMounted(() => {
      selectCtx.registerOption({
        id,
        value: props.value,
        label: props.label || slots.default?.()
      });
    });
    onBeforeUnmount(() => {
      selectCtx.unregisterOption(id);
    });
    return () => isVisible.value ? createVNode("li", {
      "class": [ns.b(), ns.is("selected", isSelected.value), ns.is("disabled", props.disabled)],
      "onClick": handleClick
    }, [createVNode("span", {
      "class": [ns.e("label")]
    }, [props.label || slots.default?.()]), isSelected.value && createVNode(XIcon, {
      "class": [ns.e("check")]
    }, {
      default: () => [createVNode(Check, null, null)]
    })]) : null;
  }
});

export { Option as default };
//# sourceMappingURL=option.mjs.map