@opensig/opendesign/lib/option/OOption.vue.js

<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>

"use strict";
const vue = require("vue");
const provide = require("../select/provide.js");
const types = require("./types.js");
const index = require("../checkbox/index.js");
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
  __name: "OOption",
  props: types.optionProps,
  setup(__props) {
    const props = __props;
    const { label, value } = vue.toRefs(props);
    const selectInject = vue.inject(provide.selectOptionInjectKey, null);
    const isMultiple = selectInject == null ? void 0 : selectInject.multiple;
    const currentVal = vue.computed(() => {
      return selectInject == null ? void 0 : selectInject.selectValue.value;
    });
    const isActive = vue.ref(false);
    vue.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 }
    );
    vue.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 vue.openBlock(), vue.createElementBlock("div", {
        class: "o-option",
        onClick: clickOption
      }, [
        vue.createElementVNode(
          "div",
          {
            class: vue.normalizeClass(["o-option-item", [
              {
                active: isActive.value,
                "o-option-disabled": props.disabled,
                "o-option-multiple": vue.unref(isMultiple)
              }
            ]])
          },
          [
            vue.unref(isMultiple) ? (vue.openBlock(), vue.createBlock(vue.unref(index.OCheckbox), {
              key: 0,
              "model-value": currentVal.value,
              value: props.value,
              class: "o-option-checkbox",
              disabled: props.disabled
            }, {
              default: vue.withCtx(() => [
                vue.renderSlot(_ctx.$slots, "default", {}, () => [
                  vue.createTextVNode(
                    vue.toDisplayString(props.label || `${props.value}`),
                    1
                    /* TEXT */
                  )
                ])
              ]),
              _: 3
              /* FORWARDED */
            }, 8, ["model-value", "value", "disabled"])) : vue.renderSlot(_ctx.$slots, "default", { key: 1 }, () => [
              vue.createTextVNode(
                vue.toDisplayString(props.label || `${props.value}`),
                1
                /* TEXT */
              )
            ])
          ],
          2
          /* CLASS */
        )
      ]);
    };
  }
});
module.exports = _sfc_main;