@opensig/opendesign/es/option/OOption.vue.mjs

<p align="center"><img src="../docs/public/opendesign-logo-light.png"/></p> <h1 align="center">opendesign</h1> <p align="center">一个 Vue 3 组件库</p> <p align="center"><b>皮肤可定制，使用 TypeScript</b></p>

import { defineComponent, toRefs, inject, computed, ref, watch, createElementBlock, openBlock, createElementVNode, normalizeClass, unref, createBlock, renderSlot, withCtx, createTextVNode, toDisplayString } from "vue";
import { selectOptionInjectKey } from "../select/provide.mjs";
import { optionProps } from "./types.mjs";
import { OCheckbox } from "../checkbox/index.mjs";
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "OOption",
  props: optionProps,
  setup(__props) {
    const props = __props;
    const { label, value } = toRefs(props);
    const selectInject = inject(selectOptionInjectKey, null);
    const isMultiple = selectInject == null ? void 0 : selectInject.multiple;
    const currentVal = computed(() => {
      return selectInject == null ? void 0 : selectInject.selectValue.value;
    });
    const isActive = ref(false);
    watch(
      [currentVal, value],
      () => {
        var _a;
        isActive.value = Boolean((_a = currentVal.value) == null ? void 0 : _a.includes(value.value));
      },
      // currentVal 会被 OSelect 通过数组下标及push方法修改，所以需要deep
      { immediate: true, deep: true }
    );
    watch(
      [value, label],
      ([newValue, newLabel]) => {
        selectInject == null ? void 0 : selectInject.select(
          {
            label: newLabel || `${newValue}`,
            value: newValue
          },
          false
        );
      },
      { immediate: true }
    );
    const clickOption = () => {
      if (!props.disabled) {
        selectInject == null ? void 0 : selectInject.select(
          {
            label: label.value || `${value.value}`,
            value: value.value
          },
          true
        );
      }
    };
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", {
        class: "o-option",
        onClick: clickOption
      }, [
        createElementVNode(
          "div",
          {
            class: normalizeClass(["o-option-item", [
              {
                active: isActive.value,
                "o-option-disabled": props.disabled,
                "o-option-multiple": unref(isMultiple)
              }
            ]])
          },
          [
            unref(isMultiple) ? (openBlock(), createBlock(unref(OCheckbox), {
              key: 0,
              "model-value": currentVal.value,
              value: props.value,
              class: "o-option-checkbox",
              disabled: props.disabled
            }, {
              default: withCtx(() => [
                renderSlot(_ctx.$slots, "default", {}, () => [
                  createTextVNode(
                    toDisplayString(props.label || `${props.value}`),
                    1
                    /* TEXT */
                  )
                ])
              ]),
              _: 3
              /* FORWARDED */
            }, 8, ["model-value", "value", "disabled"])) : renderSlot(_ctx.$slots, "default", { key: 1 }, () => [
              createTextVNode(
                toDisplayString(props.label || `${props.value}`),
                1
                /* TEXT */
              )
            ])
          ],
          2
          /* CLASS */
        )
      ]);
    };
  }
});
export {
  _sfc_main as default
};