@cqmcui/cqmcui/dist/packages/_es/Checkbox.js

轻量级移动端 Vue2、Vue3 组件库（支持小程序开发）

import { c as createComponent } from "./component-81a4c1d0.js";
import { inject, reactive, computed, watch, onMounted, getCurrentInstance, onBeforeUnmount, h } from "vue";
import { p as pxCheck } from "./pxCheck-c6b9f6b7.js";
import { CheckNormal, Checked, CheckDisabled } from "@cqmcui/icons-vue";
import "../locale/lang";
const component = (componentName2, components) => {
  return {
    components,
    props: {
      modelValue: {
        type: Boolean,
        default: false
      },
      disabled: {
        type: Boolean,
        default: false
      },
      textPosition: {
        type: String,
        default: "right"
      },
      iconSize: {
        type: [String, Number],
        default: ""
      },
      label: {
        type: String,
        default: ""
      },
      indeterminate: {
        type: Boolean,
        default: false
      },
      shape: {
        type: String,
        default: "round"
        // button
      }
    },
    emits: ["change", "update:modelValue"],
    setup(props, { emit, slots }) {
      const parent = inject("parent", null);
      const state = reactive({
        partialSelect: props.indeterminate
      });
      const hasParent = computed(() => !!parent);
      const pValue = computed(() => {
        if (hasParent.value) {
          return parent.value.value.includes(props.label);
        } else {
          return props.modelValue;
        }
      });
      const pDisabled = computed(() => {
        return hasParent.value ? parent.disabled.value ? parent.disabled.value : props.disabled : props.disabled;
      });
      const checked = computed(() => !!props.modelValue);
      const color = computed(() => {
        return !pDisabled.value ? !pValue.value ? "cqmc-checkbox__icon--unchecked" : state.partialSelect ? "cqmc-checkbox__icon--indeterminate" : "cqmc-checkbox__icon" : "cqmc-checkbox__icon--disable";
      });
      let updateType = "";
      const emitChange = (value, label) => {
        updateType = "click";
        emit("update:modelValue", value);
        emit("change", value, label);
      };
      watch(
        () => props.modelValue,
        (v) => {
          if (updateType == "click") {
            updateType = "";
          } else {
            emit("change", v);
          }
        }
      );
      const renderIcon = () => {
        const { iconSize } = props;
        const iconNodeMap = {
          CheckNormal: slots.icon ? slots.icon : components.CheckNormal,
          Checked: slots.checkedIcon ? slots.checkedIcon : components.Checked,
          CheckDisabled: slots.indeterminate ? slots.indeterminate : components.CheckDisabled
        };
        const iconNode = !pValue.value ? iconNodeMap.CheckNormal : state.partialSelect ? iconNodeMap.CheckDisabled : iconNodeMap.Checked;
        const size = pxCheck(iconSize);
        return h(iconNode, {
          width: size,
          height: size,
          size,
          class: color.value
        });
      };
      const renderLabel = () => {
        var _a;
        return h(
          "view",
          {
            class: `${componentName2}__label ${pDisabled.value ? `${componentName2}__label--disabled` : ""}`
          },
          (_a = slots.default) == null ? void 0 : _a.call(slots)
        );
      };
      const renderButton = () => {
        var _a;
        return h(
          "view",
          {
            class: `${componentName2}__button ${pValue.value && `${componentName2}__button--active`} ${pDisabled.value ? `${componentName2}__button--disabled` : ""}`
          },
          (_a = slots.default) == null ? void 0 : _a.call(slots)
        );
      };
      const handleClick = (e) => {
        var _a, _b;
        if (pDisabled.value)
          return;
        if (checked.value && state.partialSelect) {
          state.partialSelect = false;
          emitChange(checked.value, (_a = slots.default) == null ? void 0 : _a.call(slots)[0].children);
          return;
        }
        emitChange(!checked.value, (_b = slots.default) == null ? void 0 : _b.call(slots)[0].children);
        if (hasParent.value) {
          const value = parent.value.value;
          const max = parent.max.value;
          const { label } = props;
          const index = value.indexOf(label);
          if (index > -1) {
            value.splice(index, 1);
          } else if (index <= -1 && (value.length < max || !max)) {
            value.push(label);
          }
          parent.updateValue(value);
        }
      };
      onMounted(() => {
        hasParent.value && parent["relation"](getCurrentInstance());
      });
      onBeforeUnmount(() => {
        hasParent.value && parent["relation"](getCurrentInstance(), true);
      });
      watch(
        () => props.indeterminate,
        (newVal) => {
          state.partialSelect = newVal;
        }
      );
      return () => {
        return h(
          "view",
          {
            class: `${componentName2} ${componentName2}--${props.shape} ${props.textPosition === "left" ? `${componentName2}--reverse` : ""}`,
            onClick: handleClick
          },
          [props.shape == "button" ? renderButton() : [renderIcon(), renderLabel()]]
        );
      };
    }
  };
};
const { create, componentName } = createComponent("checkbox");
const _sfc_main = create(component(componentName, { CheckNormal, Checked, CheckDisabled }));
export {
  _sfc_main as default
};