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

"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 = vue.computed(() => vue.toValue(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.registerOption({
          label: newLabel || `${newValue}`,
          value: newValue
        });
      },
      { immediate: true }
    );
    const clickOption = () => {
      if (!props.disabled) {
        selectInject == null ? void 0 : selectInject.select({
          label: label.value || `${value.value}`,
          value: value.value
        });
      }
    };
    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": isMultiple.value
              }
            ]])
          },
          [
            isMultiple.value ? (vue.openBlock(), vue.createBlock(vue.unref(index.OCheckbox), {
              key: 0,
              "model-value": currentVal.value,
              value: props.value,
              class: "o-option-checkbox",
              disabled: props.disabled,
              indeterminate: props.indeterminate
            }, {
              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", "indeterminate"])) : vue.renderSlot(_ctx.$slots, "default", { key: 1 }, () => [
              vue.createTextVNode(
                vue.toDisplayString(props.label || `${props.value}`),
                1
                /* TEXT */
              )
            ])
          ],
          2
          /* CLASS */
        )
      ]);
    };
  }
});
module.exports = _sfc_main;