@opensig/opendesign/es/checkbox/OCheckbox.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, ref, onMounted, inject, computed, watch, provide, createElementBlock, openBlock, normalizeClass, createElementVNode, renderSlot, createVNode, Transition, withCtx, createBlock, createCommentVNode, unref, nextTick } from "vue";
import { checkboxInjectKey } from "./provide.mjs";
import { checkboxGroupInjectKey } from "../checkbox-group/provide.mjs";
import { checkboxProps } from "./types.mjs";
import { IconChecked } from "../_utils/icons.mjs";
import { isUndefined, isArray } from "../_utils/is.mjs";
import { uniqueId } from "../_utils/helper.mjs";
const _hoisted_1 = ["for"];
const _hoisted_2 = { class: "o-checkbox-wrap" };
const _hoisted_3 = ["id", "value", "disabled", "checked"];
const _hoisted_4 = { class: "o-checkbox-input-wrap" };
const _hoisted_5 = { class: "o-checkbox-input" };
const _hoisted_6 = {
  key: 0,
  class: "o-checkbox-input-icon-indeterminate"
};
const _hoisted_7 = { class: "o-checkbox-label" };
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "OCheckbox",
  props: checkboxProps,
  emits: ["update:modelValue", "change"],
  setup(__props, { expose: __expose, emit: __emit }) {
    const props = __props;
    const emits = __emit;
    const inputId = ref(props.inputId);
    onMounted(() => {
      if (!inputId.value) {
        inputId.value = uniqueId();
      }
    });
    const checkboxGroupInjection = inject(checkboxGroupInjectKey, null);
    const _checked = ref(props.defaultChecked);
    const isChecked = computed(() => {
      if (isUndefined(props.value)) {
        return false;
      }
      if (checkboxGroupInjection) {
        return checkboxGroupInjection.realValue.value.includes(props.value);
      }
      if (isArray(props.modelValue)) {
        return props.modelValue.includes(props.value);
      }
      return _checked.value;
    });
    watch(
      isChecked,
      (val) => {
        _checked.value = val;
      },
      { immediate: true }
    );
    const isDisabled = computed(() => {
      return (checkboxGroupInjection == null ? void 0 : checkboxGroupInjection.disabled.value) || props.disabled || isChecked.value && ((checkboxGroupInjection == null ? void 0 : checkboxGroupInjection.isMinimum.value) ?? false) || !isChecked.value && ((checkboxGroupInjection == null ? void 0 : checkboxGroupInjection.isMaximum.value) ?? false);
    });
    const onClick = (ev) => {
      ev.stopPropagation();
    };
    const onChange = (ev) => {
      if (isUndefined(props.value)) {
        return;
      }
      const { checked } = ev.target;
      const set = checkboxGroupInjection ? /* @__PURE__ */ new Set([...checkboxGroupInjection.realValue.value]) : isArray(props.modelValue) ? /* @__PURE__ */ new Set([...props.modelValue]) : /* @__PURE__ */ new Set([]);
      if (checked) {
        set.add(props.value);
      } else {
        set.delete(props.value);
      }
      _checked.value = checked;
      const val = Array.from(set);
      emits("update:modelValue", val);
      checkboxGroupInjection == null ? void 0 : checkboxGroupInjection.updateModelValue(val);
      nextTick(() => {
        emits("change", val, ev);
        checkboxGroupInjection == null ? void 0 : checkboxGroupInjection.onChange(val, ev);
      });
    };
    __expose({
      /** is checked */
      checked: isChecked
    });
    provide(checkboxInjectKey, {
      checked: isChecked,
      disabled: isDisabled
    });
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("label", {
        class: normalizeClass(["o-checkbox", {
          "o-checkbox-checked": isChecked.value,
          "o-checkbox-disabled": isDisabled.value,
          "o-checkbox-indeterminate": props.indeterminate
        }]),
        for: inputId.value
      }, [
        createElementVNode("div", _hoisted_2, [
          createElementVNode("input", {
            id: inputId.value,
            type: "checkbox",
            value: props.value,
            disabled: isDisabled.value,
            checked: isChecked.value,
            onClick,
            onChange
          }, null, 40, _hoisted_3),
          renderSlot(_ctx.$slots, "checkbox", {
            checked: isChecked.value,
            disabled: isDisabled.value
          }, () => [
            createElementVNode("div", _hoisted_4, [
              createElementVNode("span", _hoisted_5, [
                createVNode(Transition, { name: "o-fade-in" }, {
                  default: withCtx(() => [
                    props.indeterminate ? (openBlock(), createElementBlock("span", _hoisted_6)) : isChecked.value ? (openBlock(), createBlock(unref(IconChecked), { key: 1 })) : createCommentVNode("v-if", true)
                  ]),
                  _: 1
                  /* STABLE */
                })
              ])
            ]),
            createElementVNode("span", _hoisted_7, [
              renderSlot(_ctx.$slots, "default")
            ])
          ])
        ])
      ], 10, _hoisted_1);
    };
  }
});
export {
  _sfc_main as default
};