song-ui-u/lib/components/select/src/option.cjs

vue3 + js的PC前端组件库

'use strict';

var vue = require('vue');
var index$1 = require('../../../hook/use-namespace/index.cjs');
var icons = require('song-ui-pro-icon');
require('../../../hook/use-zindex/index.cjs');
var constant = require('./constant.cjs');
require('../../button/index.cjs');
require('../../buttonGroup/index.cjs');
var index = require('../../icon/index.cjs');
require('../../input/index.cjs');
require('../../textarea/index.cjs');
require('../../row/index.cjs');
require('../../col/index.cjs');
require('../../container/index.cjs');
require('../../checkbox/index.cjs');
require('../../switch/index.cjs');
require('../../form/index.cjs');
require('../../message/index.cjs');
require('../../mask/src/mask.cjs');
require('../../modal/index.cjs');
require('../../messageBox/index.cjs');
require('../../drawer/index.cjs');
require('../../badge/index.cjs');
require('../../space/index.cjs');
require('../../image/index.cjs');
require('../../radio/index.cjs');
require('../../divider/index.cjs');
require('../../chat/index.cjs');
require('../../progress/index.cjs');
require('../../upload/index.cjs');
require('../../vTree/index.cjs');
require('../../table/index.cjs');
require('../../tabs/index.cjs');
require('../../menu/index.cjs');
require('../../steps/index.cjs');
require('../../header/index.cjs');
require('../../breadcrumble/index.cjs');
require('../../datePicker/index.cjs');
require('../../tooltip/index.cjs');
require('../../popover/index.cjs');
require('../../timePicker/index.cjs');
require('../index.cjs');
require('../../collapse/index.cjs');
require('../../card/index.cjs');
require('../../timeline/index.cjs');
require('../../tag/index.cjs');
require('../../result/index.cjs');
require('../../sender/index.cjs');

var Option = /* @__PURE__ */ vue.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 = index$1.useNamespace("option");
    const selectCtx = vue.inject(constant.SELECT_KEY);
    const id = Symbol("option");
    const isSelected = vue.computed(() => {
      return selectCtx.isOptionSelected(props.value);
    });
    const isVisible = vue.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?.());
    };
    vue.onMounted(() => {
      selectCtx.registerOption({
        id,
        value: props.value,
        label: props.label || slots.default?.()
      });
    });
    vue.onBeforeUnmount(() => {
      selectCtx.unregisterOption(id);
    });
    return () => isVisible.value ? vue.createVNode("li", {
      "class": [ns.b(), ns.is("selected", isSelected.value), ns.is("disabled", props.disabled)],
      "onClick": handleClick
    }, [vue.createVNode("span", {
      "class": [ns.e("label")]
    }, [props.label || slots.default?.()]), isSelected.value && vue.createVNode(index.XIcon, {
      "class": [ns.e("check")]
    }, {
      default: () => [vue.createVNode(icons.Check, null, null)]
    })]) : null;
  }
});

module.exports = Option;
//# sourceMappingURL=option.cjs.map