element-plus 1.3.0-beta.7 → 1.3.0-beta.8

package/es/components/cascader-panel/src/node2.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"node2.mjs","sources":["../../../../../../packages/components/cascader-panel/src/node.vue"],"sourcesContent":["<template>\n  <li\n    :id=\"`${menuId}-${node.uid}`\"\n    role=\"menuitem\"\n    :aria-haspopup=\"!isLeaf\"\n    :aria-owns=\"isLeaf ? null : menuId\"\n    :aria-expanded=\"inExpandingPath\"\n    :tabindex=\"expandable ? -1 : undefined\"\n    :class=\"[\n      'el-cascader-node',\n      checkStrictly && 'is-selectable',\n      inExpandingPath && 'in-active-path',\n      inCheckedPath && 'in-checked-path',\n      node.checked && 'is-active',\n      !expandable && 'is-disabled',\n    ]\"\n    @mouseenter=\"handleHoverExpand\"\n    @focus=\"handleHoverExpand\"\n    @click=\"handleClick\"\n  >\n    <!-- prefix -->\n    <el-checkbox\n      v-if=\"multiple\"\n      :model-value=\"node.checked\"\n      :indeterminate=\"node.indeterminate\"\n      :disabled=\"isDisabled\"\n      @click.stop\n      @update:model-value=\"handleSelectCheck\"\n    />\n    <el-radio\n      v-else-if=\"checkStrictly\"\n      :model-value=\"checkedNodeId\"\n      :label=\"node.uid\"\n      :disabled=\"isDisabled\"\n      @update:model-value=\"handleSelectCheck\"\n      @click.stop\n    >\n      <!--\n        Add an empty element to avoid render label,\n        do not use empty fragment here for https://github.com/vuejs/vue-next/pull/2485\n      -->\n      <span></span>\n    </el-radio>\n    <el-icon\n      v-else-if=\"isLeaf && node.checked\"\n      class=\"el-cascader-node__prefix\"\n    >\n      <check />\n    </el-icon>\n\n    <!-- content -->\n    <node-content />\n\n    <!-- postfix -->\n    <template v-if=\"!isLeaf\">\n      <el-icon v-if=\"node.loading\" class=\"is-loading el-cascader-node__postfix\">\n        <loading />\n      </el-icon>\n      <el-icon v-else class=\"arrow-right el-cascader-node__postfix\">\n        <arrow-right />\n      </el-icon>\n    </template>\n  </li>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent, inject } from 'vue'\nimport ElCheckbox from '@element-plus/components/checkbox'\nimport ElRadio from '@element-plus/components/radio'\nimport ElIcon from '@element-plus/components/icon'\nimport { Check, Loading, ArrowRight } from '@element-plus/icons-vue'\nimport NodeContent from './node-content'\nimport { CASCADER_PANEL_INJECTION_KEY } from './types'\nimport type { default as CascaderNode } from './node'\n\nimport type { PropType } from 'vue'\n\nexport default defineComponent({\n  name: 'ElCascaderNode',\n\n  components: {\n    ElCheckbox,\n    ElRadio,\n    NodeContent,\n    ElIcon,\n    Check,\n    Loading,\n    ArrowRight,\n  },\n\n  props: {\n    node: {\n      type: Object as PropType<CascaderNode>,\n      required: true,\n    },\n    menuId: String,\n  },\n\n  emits: ['expand'],\n\n  setup(props, { emit }) {\n    const panel = inject(CASCADER_PANEL_INJECTION_KEY)!\n\n    const isHoverMenu = computed(() => panel.isHoverMenu)\n    const multiple = computed(() => panel.config.multiple)\n    const checkStrictly = computed(() => panel.config.checkStrictly)\n    const checkedNodeId = computed(() => panel.checkedNodes[0]?.uid)\n    const isDisabled = computed(() => props.node.isDisabled)\n    const isLeaf = computed(() => props.node.isLeaf)\n    const expandable = computed(\n      () => (checkStrictly.value && !isLeaf.value) || !isDisabled.value\n    )\n    const inExpandingPath = computed(() => isInPath(panel.expandingNode!))\n    // only useful in check-strictly mode\n    const inCheckedPath = computed(\n      () => checkStrictly.value && panel.checkedNodes.some(isInPath)\n    )\n\n    const isInPath = (node: CascaderNode) => {\n      const { level, uid } = props.node\n      return node?.pathNodes[level - 1]?.uid === uid\n    }\n\n    const doExpand = () => {\n      if (inExpandingPath.value) return\n      panel.expandNode(props.node)\n    }\n\n    const doCheck = (checked: boolean) => {\n      const { node } = props\n      if (checked === node.checked) return\n      panel.handleCheckChange(node, checked)\n    }\n\n    const doLoad = () => {\n      panel.lazyLoad(props.node, () => {\n        if (!isLeaf.value) doExpand()\n      })\n    }\n\n    const handleHoverExpand = (e: Event) => {\n      if (!isHoverMenu.value) return\n      handleExpand()\n      !isLeaf.value && emit('expand', e)\n    }\n\n    const handleExpand = () => {\n      const { node } = props\n      // do not exclude leaf node because the menus expanded might have to reset\n      if (!expandable.value || node.loading) return\n      node.loaded ? doExpand() : doLoad()\n    }\n\n    const handleClick = () => {\n      if (isHoverMenu.value && !isLeaf.value) return\n\n      if (\n        isLeaf.value &&\n        !isDisabled.value &&\n        !checkStrictly.value &&\n        !multiple.value\n      ) {\n        handleCheck(true)\n      } else {\n        handleExpand()\n      }\n    }\n\n    const handleSelectCheck = (checked: boolean) => {\n      if (checkStrictly.value) {\n        doCheck(checked)\n        if (props.node.loaded) {\n          doExpand()\n        }\n      } else {\n        handleCheck(checked)\n      }\n    }\n\n    const handleCheck = (checked: boolean) => {\n      if (!props.node.loaded) {\n        doLoad()\n      } else {\n        doCheck(checked)\n        !checkStrictly.value && doExpand()\n      }\n    }\n\n    return {\n      panel,\n      isHoverMenu,\n      multiple,\n      checkStrictly,\n      checkedNodeId,\n      isDisabled,\n      isLeaf,\n      expandable,\n      inExpandingPath,\n      inCheckedPath,\n      handleHoverExpand,\n      handleExpand,\n      handleClick,\n      handleCheck,\n      handleSelectCheck,\n    }\n  },\n})\n</script>\n"],"names":["_openBlock","_createElementBlock","_withCtx","_createCommentVNode","_createVNode","_Fragment"],"mappings":";;;;;;;;;AA6EA,MAAK,YAAa,gBAAa;AAAA,EAC7B,MAAM;AAAA,EAEN,YAAY;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA,EAGF,OAAO;AAAA,IACL,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,UAAU;AAAA;AAAA,IAEZ,QAAQ;AAAA;AAAA,EAGV,OAAO,CAAC;AAAA,EAER,MAAM,OAAO,EAAE,QAAQ;AACrB,UAAM,QAAQ,OAAO;AAErB,UAAM,cAAc,SAAS,MAAM,MAAM;AACzC,UAAM,WAAW,SAAS,MAAM,MAAM,OAAO;AAC7C,UAAM,gBAAgB,SAAS,MAAM,MAAM,OAAO;AAClD,UAAM,gBAAgB,SAAS,MAAM,MAAM,aAAa,IAAI;AAC5D,UAAM,aAAa,SAAS,MAAM,MAAM,KAAK;AAC7C,UAAM,SAAS,SAAS,MAAM,MAAM,KAAK;AACzC,UAAM,aAAa,SACjB,MAAO,cAAc,SAAS,CAAC,OAAO,SAAU,CAAC,WAAW;AAE9D,UAAM,kBAAkB,SAAS,MAAM,SAAS,MAAM;AAEtD,UAAM,gBAAgB,SACpB,MAAM,cAAc,SAAS,MAAM,aAAa,KAAK;AAGvD,UAAM,WAAW,CAAC,SAAuB;AACvC,YAAM,EAAE,OAAO,QAAQ,MAAM;AAC7B,aAAO,MAAM,UAAU,QAAQ,IAAI,QAAQ;AAAA;AAG7C,UAAM,WAAW,MAAM;AACrB,UAAI,gBAAgB;AAAO;AAC3B,YAAM,WAAW,MAAM;AAAA;AAGzB,UAAM,UAAU,CAAC,YAAqB;AACpC,YAAM,EAAE,SAAS;AACjB,UAAI,YAAY,KAAK;AAAS;AAC9B,YAAM,kBAAkB,MAAM;AAAA;AAGhC,UAAM,SAAS,MAAM;AACnB,YAAM,SAAS,MAAM,MAAM,MAAM;AAC/B,YAAI,CAAC,OAAO;AAAO;AAAA;AAAA;AAIvB,UAAM,oBAAoB,CAAC,MAAa;AACtC,UAAI,CAAC,YAAY;AAAO;AACxB;AACA,OAAC,OAAO,SAAS,KAAK,UAAU;AAAA;AAGlC,UAAM,eAAe,MAAM;AACzB,YAAM,EAAE,SAAS;AAEjB,UAAI,CAAC,WAAW,SAAS,KAAK;AAAS;AACvC,WAAK,SAAS,aAAa;AAAA;AAG7B,UAAM,cAAc,MAAM;AACxB,UAAI,YAAY,SAAS,CAAC,OAAO;AAAO;AAExC,UACE,OAAO,SACP,CAAC,WAAW,SACZ,CAAC,cAAc,SACf,CAAC,SAAS,OACV;AACA,oBAAY;AAAA,aACP;AACL;AAAA;AAAA;AAIJ,UAAM,oBAAoB,CAAC,YAAqB;AAC9C,UAAI,cAAc,OAAO;AACvB,gBAAQ;AACR,YAAI,MAAM,KAAK,QAAQ;AACrB;AAAA;AAAA,aAEG;AACL,oBAAY;AAAA;AAAA;AAIhB,UAAM,cAAc,CAAC,YAAqB;AACxC,UAAI,CAAC,MAAM,KAAK,QAAQ;AACtB;AAAA,aACK;AACL,gBAAQ;AACR,SAAC,cAAc,SAAS;AAAA;AAAA;AAI5B,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA;AAAA;2CAlKA,aAAa;;;;;;;;;;SAvCZA,aAAWC,mBAAY;AAAA,IAC1B,IAAI,GAAC,eAAU;AAAA,IACd;AAAA,IACA,iBAAW;AAAA,IACX,kBAAe,qBAAe;AAAA,IAC9B,iBAAU;AAAA,IACV,UAAK;AAAA;MAAoC;AAAA,MAAwC,sBAAe;AAAA,MAA4B,wBAAa;AAAA,MAA6B,sBAAY;AAAA,WAAwB,gBAAU;AAAA;;IASpN,cAAK,uCAAE,oDAAiB;AAAA,IACxB,SAAK,uCAAE,iDAAW;AAAA;KAEnB;AAAA,uBAEgB;AAAA;MACb;AAAA,MACA,eAAe,UAAK;AAAA,MACpB,eAAU,UAAU;AAAA,MACpB,UAAK;AAAA,MACL,iDAAqC;AAAA;AAAA;OAG3B,SAAa;MACvB;AAAA,MACA,eAAO,KAAQ;AAAA,MACf,YAAU;AAAA,MACV;AAAA,MACA,uBAAK;AAAA;;;eAENC;AAAA,QAIAC,mBAAa;AAAA;;;OAGF,GAAU,gBAAY,oEADnC;MAEE,KAAK;AAAA;;eAELD,QAAS;AAAA;;;UAGXC,2BAAgB;AAAA,IAChBA,mBAAgB;AAAA,IAEhBC;AAAA,uBACuB;AAAA,iCACDH,mBAAOI;AAAA;QAAE,KAAK;AAAA;;iBAChCH,QAAW;AAAA;;;;QAEG,KAAK;AAAA;;iBACnBA,QAAe;AAAA;;;;;;;;;;;"}
+{"version":3,"file":"node2.mjs","sources":["../../../../../../packages/components/cascader-panel/src/node.vue"],"sourcesContent":["<template>\n  <li\n    :id=\"`${menuId}-${node.uid}`\"\n    role=\"menuitem\"\n    :aria-haspopup=\"!isLeaf\"\n    :aria-owns=\"isLeaf ? null : menuId\"\n    :aria-expanded=\"inExpandingPath\"\n    :tabindex=\"expandable ? -1 : undefined\"\n    :class=\"[\n      'el-cascader-node',\n      checkStrictly && 'is-selectable',\n      inExpandingPath && 'in-active-path',\n      inCheckedPath && 'in-checked-path',\n      node.checked && 'is-active',\n      !expandable && 'is-disabled',\n    ]\"\n    @mouseenter=\"handleHoverExpand\"\n    @focus=\"handleHoverExpand\"\n    @click=\"handleClick\"\n  >\n    <!-- prefix -->\n    <el-checkbox\n      v-if=\"multiple\"\n      :model-value=\"node.checked\"\n      :indeterminate=\"node.indeterminate\"\n      :disabled=\"isDisabled\"\n      @click.stop\n      @update:model-value=\"handleSelectCheck\"\n    />\n    <el-radio\n      v-else-if=\"checkStrictly\"\n      :model-value=\"checkedNodeId\"\n      :label=\"node.uid\"\n      :disabled=\"isDisabled\"\n      @update:model-value=\"handleSelectCheck\"\n      @click.stop\n    >\n      <!--\n        Add an empty element to avoid render label,\n        do not use empty fragment here for https://github.com/vuejs/vue-next/pull/2485\n      -->\n      <span></span>\n    </el-radio>\n    <el-icon\n      v-else-if=\"isLeaf && node.checked\"\n      class=\"el-cascader-node__prefix\"\n    >\n      <check />\n    </el-icon>\n\n    <!-- content -->\n    <node-content />\n\n    <!-- postfix -->\n    <template v-if=\"!isLeaf\">\n      <el-icon v-if=\"node.loading\" class=\"is-loading el-cascader-node__postfix\">\n        <loading />\n      </el-icon>\n      <el-icon v-else class=\"arrow-right el-cascader-node__postfix\">\n        <arrow-right />\n      </el-icon>\n    </template>\n  </li>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent, inject } from 'vue'\nimport ElCheckbox from '@element-plus/components/checkbox'\nimport ElRadio from '@element-plus/components/radio'\nimport ElIcon from '@element-plus/components/icon'\nimport { Check, Loading, ArrowRight } from '@element-plus/icons-vue'\nimport NodeContent from './node-content'\nimport { CASCADER_PANEL_INJECTION_KEY } from './types'\nimport type { default as CascaderNode } from './node'\n\nimport type { PropType } from 'vue'\n\nexport default defineComponent({\n  name: 'ElCascaderNode',\n\n  components: {\n    ElCheckbox,\n    ElRadio,\n    NodeContent,\n    ElIcon,\n    Check,\n    Loading,\n    ArrowRight,\n  },\n\n  props: {\n    node: {\n      type: Object as PropType<CascaderNode>,\n      required: true,\n    },\n    menuId: String,\n  },\n\n  emits: ['expand'],\n\n  setup(props, { emit }) {\n    const panel = inject(CASCADER_PANEL_INJECTION_KEY)!\n\n    const isHoverMenu = computed(() => panel.isHoverMenu)\n    const multiple = computed(() => panel.config.multiple)\n    const checkStrictly = computed(() => panel.config.checkStrictly)\n    const checkedNodeId = computed(() => panel.checkedNodes[0]?.uid)\n    const isDisabled = computed(() => props.node.isDisabled)\n    const isLeaf = computed(() => props.node.isLeaf)\n    const expandable = computed(\n      () => (checkStrictly.value && !isLeaf.value) || !isDisabled.value\n    )\n    const inExpandingPath = computed(() => isInPath(panel.expandingNode!))\n    // only useful in check-strictly mode\n    const inCheckedPath = computed(\n      () => checkStrictly.value && panel.checkedNodes.some(isInPath)\n    )\n\n    const isInPath = (node: CascaderNode) => {\n      const { level, uid } = props.node\n      return node?.pathNodes[level - 1]?.uid === uid\n    }\n\n    const doExpand = () => {\n      if (inExpandingPath.value) return\n      panel.expandNode(props.node)\n    }\n\n    const doCheck = (checked: boolean) => {\n      const { node } = props\n      if (checked === node.checked) return\n      panel.handleCheckChange(node, checked)\n    }\n\n    const doLoad = () => {\n      panel.lazyLoad(props.node, () => {\n        if (!isLeaf.value) doExpand()\n      })\n    }\n\n    const handleHoverExpand = (e: Event) => {\n      if (!isHoverMenu.value) return\n      handleExpand()\n      !isLeaf.value && emit('expand', e)\n    }\n\n    const handleExpand = () => {\n      const { node } = props\n      // do not exclude leaf node because the menus expanded might have to reset\n      if (!expandable.value || node.loading) return\n      node.loaded ? doExpand() : doLoad()\n    }\n\n    const handleClick = () => {\n      if (isHoverMenu.value && !isLeaf.value) return\n\n      if (\n        isLeaf.value &&\n        !isDisabled.value &&\n        !checkStrictly.value &&\n        !multiple.value\n      ) {\n        handleCheck(true)\n      } else {\n        handleExpand()\n      }\n    }\n\n    const handleSelectCheck = (checked: boolean) => {\n      if (checkStrictly.value) {\n        doCheck(checked)\n        if (props.node.loaded) {\n          doExpand()\n        }\n      } else {\n        handleCheck(checked)\n      }\n    }\n\n    const handleCheck = (checked: boolean) => {\n      if (!props.node.loaded) {\n        doLoad()\n      } else {\n        doCheck(checked)\n        !checkStrictly.value && doExpand()\n      }\n    }\n\n    return {\n      panel,\n      isHoverMenu,\n      multiple,\n      checkStrictly,\n      checkedNodeId,\n      isDisabled,\n      isLeaf,\n      expandable,\n      inExpandingPath,\n      inCheckedPath,\n      handleHoverExpand,\n      handleExpand,\n      handleClick,\n      handleCheck,\n      handleSelectCheck,\n    }\n  },\n})\n</script>\n"],"names":[],"mappings":";;;;;;;;;AA6EA,MAAK,YAAa,gBAAa;AAAA,EAC7B,MAAM;AAAA,EAEN,YAAY;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA,EAGF,OAAO;AAAA,IACL,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,UAAU;AAAA;AAAA,IAEZ,QAAQ;AAAA;AAAA,EAGV,OAAO,CAAC;AAAA,EAER,MAAM,OAAO,EAAE,QAAQ;AACrB,UAAM,QAAQ,OAAO;AAErB,UAAM,cAAc,SAAS,MAAM,MAAM;AACzC,UAAM,WAAW,SAAS,MAAM,MAAM,OAAO;AAC7C,UAAM,gBAAgB,SAAS,MAAM,MAAM,OAAO;AAClD,UAAM,gBAAgB,SAAS,MAAM;AACrC,UAAM;AACN,mBAAe,qBAAqB,KAAK;AACzC;AAGA,UAAM,iCAAiC;AAEvC,UAAM;AAIN,UAAM,qBAAmC;AACvC;AACA,yCAAmC;AAAQ;AAG7C,UAAM;AACJ,0BAAoB;AAAO;AAC3B;AAAuB;AAGzB,UAAM;AACJ;AACA,sBAAgB;AAAc;AAC9B;AAA8B;AAGhC,UAAM;AACJ;AACE,YAAI;AAAe;AAAA;AAAA;AAIvB;AACE,UAAI;AAAoB;AACxB;AACA;AAAgC;AAGlC;AACE;AAEA,oCAA8B;AAAS;AACvC;AAA2B;AAG7B,UAAM;AACJ;AAAwC;AAExC;AAME;AAAY;AAEZ;AAAA;AAAA;AAIJ;AACE;AACE;AACA;AACE;AAAA;AAAA;AAGF;AAAY;AAAA;AAIhB;AACE;AACE;AAAA;AAEA;AACA;AAAwB;AAAA;AAI5B;AAAO;AACL;AACA,MACA;AAAA;AACA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA;AAAA;;;;;;;;;;;;AAzMwB,QACtB;AAAW;AACd;AACW,yCACmB;AAAA,IAC9B;AAAU,IACV;AAAK;;AAAoC;AAAuD;AAAyC;AAAyC;AAAkC;;;AAS5L;AACN;KAEnB;AAAA,wBAEgB;AAAA;;AACb;AACoB;AACA;AACf,MACL;AAAqC;AAAA;gBAGd;MACvB;AAAA;AACe,MACf;AAAU;AACV,MACA;AAAK;;;;AAEN;AAIa;;;;;AAIR;;wBAEI;AAAA;;;;AAGK;AACA;AAEhB;AACuB;AACM;;AAAO;;;AACrB;;;;;AAEQ;;;AACJ;;;;;;;;;;;;;;;"}

package/es/components/checkbox/index.d.ts

@@ -43,6 +43,17 @@ export declare const ElCheckbox: import("../../utils/types").SFCWithInstall<impo
     handleChange: (e: InputEvent) => void;
     focus: import("vue").Ref<boolean>;
     size: import("vue").ComputedRef<import("../../utils/types").ComponentSize>;
+    ns: {
+        namespace: import("vue").ComputedRef<string>;
+        b: (blockSuffix?: string) => string;
+        e: (element?: string | undefined) => string;
+        m: (modifier?: string | undefined) => string;
+        be: (blockSuffix?: string | undefined, element?: string | undefined) => string;
+        em: (element?: string | undefined, modifier?: string | undefined) => string;
+        bm: (blockSuffix?: string | undefined, modifier?: string | undefined) => string;
+        bem: (blockSuffix?: string | undefined, element?: string | undefined, modifier?: string | undefined) => string;
+        is: (name: string, state?: boolean) => string;
+    };
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "change")[], "update:modelValue" | "change", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         type: (BooleanConstructor | StringConstructor | NumberConstructor)[];
@@ -133,6 +144,17 @@ export declare const ElCheckbox: import("../../utils/types").SFCWithInstall<impo
             boxShadow: string | null;
         }>;
         size: import("vue").ComputedRef<import("../../utils/types").ComponentSize>;
+        ns: {
+            namespace: import("vue").ComputedRef<string>;
+            b: (blockSuffix?: string) => string;
+            e: (element?: string | undefined) => string;
+            m: (modifier?: string | undefined) => string;
+            be: (blockSuffix?: string | undefined, element?: string | undefined) => string;
+            em: (element?: string | undefined, modifier?: string | undefined) => string;
+            bm: (blockSuffix?: string | undefined, modifier?: string | undefined) => string;
+            bem: (blockSuffix?: string | undefined, element?: string | undefined, modifier?: string | undefined) => string;
+            is: (name: string, state?: boolean) => string;
+        };
     }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "change")[], "update:modelValue" | "change", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
         modelValue: {
             type: (BooleanConstructor | StringConstructor | NumberConstructor)[];
@@ -284,6 +306,17 @@ export declare const ElCheckboxButton: import("../../utils/types").SFCWithInstal
         boxShadow: string | null;
     }>;
     size: import("vue").ComputedRef<import("../../utils/types").ComponentSize>;
+    ns: {
+        namespace: import("vue").ComputedRef<string>;
+        b: (blockSuffix?: string) => string;
+        e: (element?: string | undefined) => string;
+        m: (modifier?: string | undefined) => string;
+        be: (blockSuffix?: string | undefined, element?: string | undefined) => string;
+        em: (element?: string | undefined, modifier?: string | undefined) => string;
+        bm: (blockSuffix?: string | undefined, modifier?: string | undefined) => string;
+        bem: (blockSuffix?: string | undefined, element?: string | undefined, modifier?: string | undefined) => string;
+        is: (name: string, state?: boolean) => string;
+    };
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "change")[], "update:modelValue" | "change", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         type: (BooleanConstructor | StringConstructor | NumberConstructor)[];

package/es/components/checkbox/src/checkbox-button.mjs

@@ -1,7 +1,9 @@
 import { defineComponent, computed, openBlock, createElementBlock, normalizeClass, withDirectives, vModelCheckbox, normalizeStyle, renderSlot, createTextVNode, toDisplayString, createCommentVNode } from 'vue';
 import { UPDATE_MODEL_EVENT } from '../../../utils/constants.mjs';
+import '../../../hooks/index.mjs';
 import { useCheckboxProps, useCheckbox, useCheckboxGroup } from './useCheckbox.mjs';
 import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
+import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
 
 const _sfc_main = defineComponent({
   name: "ElCheckboxButton",
@@ -10,12 +12,14 @@ const _sfc_main = defineComponent({
   setup(props) {
     const { focus, isChecked, isDisabled, size, model, handleChange } = useCheckbox(props);
     const { checkboxGroup } = useCheckboxGroup();
+    const ns = useNamespace("checkbox");
     const activeStyle = computed(() => {
-      const fillValue = checkboxGroup?.fill?.value ?? "";
+      var _a, _b, _c, _d;
+      const fillValue = (_b = (_a = checkboxGroup == null ? void 0 : checkboxGroup.fill) == null ? void 0 : _a.value) != null ? _b : "";
       return {
         backgroundColor: fillValue,
         borderColor: fillValue,
-        color: checkboxGroup?.textColor?.value ?? "",
+        color: (_d = (_c = checkboxGroup == null ? void 0 : checkboxGroup.textColor) == null ? void 0 : _c.value) != null ? _d : "",
         boxShadow: fillValue ? `-1px 0 0 0 ${fillValue}` : null
       };
     });
@@ -26,7 +30,8 @@ const _sfc_main = defineComponent({
       model,
       handleChange,
       activeStyle,
-      size
+      size,
+      ns
     };
   }
 });
@@ -35,12 +40,13 @@ const _hoisted_2 = ["name", "tabindex", "disabled", "true-value", "false-value"]
 const _hoisted_3 = ["name", "tabindex", "disabled", "value"];
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("label", {
-    class: normalizeClass(["el-checkbox-button", [
-      _ctx.size ? "el-checkbox-button--" + _ctx.size : "",
-      { "is-disabled": _ctx.isDisabled },
-      { "is-checked": _ctx.isChecked },
-      { "is-focus": _ctx.focus }
-    ]]),
+    class: normalizeClass([
+      _ctx.ns.b("button"),
+      _ctx.ns.bm("button", _ctx.size),
+      _ctx.ns.is("disabled", _ctx.isDisabled),
+      _ctx.ns.is("checked", _ctx.isChecked),
+      _ctx.ns.is("focus", _ctx.focus)
+    ]),
     role: "checkbox",
     "aria-checked": _ctx.isChecked,
     "aria-disabled": _ctx.isDisabled
@@ -48,7 +54,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     _ctx.trueLabel || _ctx.falseLabel ? withDirectives((openBlock(), createElementBlock("input", {
       key: 0,
       "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.model = $event),
-      class: "el-checkbox-button__original",
+      class: normalizeClass(_ctx.ns.be("button", "original")),
       type: "checkbox",
       name: _ctx.name,
       tabindex: _ctx.tabindex,
@@ -58,12 +64,12 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       onChange: _cache[1] || (_cache[1] = (...args) => _ctx.handleChange && _ctx.handleChange(...args)),
       onFocus: _cache[2] || (_cache[2] = ($event) => _ctx.focus = true),
       onBlur: _cache[3] || (_cache[3] = ($event) => _ctx.focus = false)
-    }, null, 40, _hoisted_2)), [
+    }, null, 42, _hoisted_2)), [
       [vModelCheckbox, _ctx.model]
     ]) : withDirectives((openBlock(), createElementBlock("input", {
       key: 1,
       "onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => _ctx.model = $event),
-      class: "el-checkbox-button__original",
+      class: normalizeClass(_ctx.ns.be("button", "original")),
       type: "checkbox",
       name: _ctx.name,
       tabindex: _ctx.tabindex,
@@ -72,18 +78,18 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       onChange: _cache[5] || (_cache[5] = (...args) => _ctx.handleChange && _ctx.handleChange(...args)),
       onFocus: _cache[6] || (_cache[6] = ($event) => _ctx.focus = true),
       onBlur: _cache[7] || (_cache[7] = ($event) => _ctx.focus = false)
-    }, null, 40, _hoisted_3)), [
+    }, null, 42, _hoisted_3)), [
       [vModelCheckbox, _ctx.model]
     ]),
     _ctx.$slots.default || _ctx.label ? (openBlock(), createElementBlock("span", {
       key: 2,
-      class: "el-checkbox-button__inner",
+      class: normalizeClass(_ctx.ns.be("button", "inner")),
       style: normalizeStyle(_ctx.isChecked ? _ctx.activeStyle : null)
     }, [
       renderSlot(_ctx.$slots, "default", {}, () => [
         createTextVNode(toDisplayString(_ctx.label), 1)
       ])
-    ], 4)) : createCommentVNode("v-if", true)
+    ], 6)) : createCommentVNode("v-if", true)
   ], 10, _hoisted_1);
 }
 var CheckboxButton = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);

package/es/components/checkbox/src/checkbox-button.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox-button.mjs","sources":["../../../../../../packages/components/checkbox/src/checkbox-button.vue"],"sourcesContent":["<template>\n  <label\n    class=\"el-checkbox-button\"\n    :class=\"[\n      size ? 'el-checkbox-button--' + size : '',\n      { 'is-disabled': isDisabled },\n      { 'is-checked': isChecked },\n      { 'is-focus': focus },\n    ]\"\n    role=\"checkbox\"\n    :aria-checked=\"isChecked\"\n    :aria-disabled=\"isDisabled\"\n  >\n    <input\n      v-if=\"trueLabel || falseLabel\"\n      v-model=\"model\"\n      class=\"el-checkbox-button__original\"\n      type=\"checkbox\"\n      :name=\"name\"\n      :tabindex=\"tabindex\"\n      :disabled=\"isDisabled\"\n      :true-value=\"trueLabel\"\n      :false-value=\"falseLabel\"\n      @change=\"handleChange\"\n      @focus=\"focus = true\"\n      @blur=\"focus = false\"\n    />\n    <input\n      v-else\n      v-model=\"model\"\n      class=\"el-checkbox-button__original\"\n      type=\"checkbox\"\n      :name=\"name\"\n      :tabindex=\"tabindex\"\n      :disabled=\"isDisabled\"\n      :value=\"label\"\n      @change=\"handleChange\"\n      @focus=\"focus = true\"\n      @blur=\"focus = false\"\n    />\n\n    <span\n      v-if=\"$slots.default || label\"\n      class=\"el-checkbox-button__inner\"\n      :style=\"isChecked ? activeStyle : null\"\n    >\n      <slot>{{ label }}</slot>\n    </span>\n  </label>\n</template>\n<script lang=\"ts\">\nimport { defineComponent, computed } from 'vue'\nimport { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'\nimport { useCheckbox, useCheckboxGroup, useCheckboxProps } from './useCheckbox'\n\nexport default defineComponent({\n  name: 'ElCheckboxButton',\n  props: useCheckboxProps,\n  emits: [UPDATE_MODEL_EVENT, 'change'],\n  setup(props) {\n    const { focus, isChecked, isDisabled, size, model, handleChange } =\n      useCheckbox(props)\n    const { checkboxGroup } = useCheckboxGroup()\n\n    const activeStyle = computed(() => {\n      const fillValue = checkboxGroup?.fill?.value ?? ''\n      return {\n        backgroundColor: fillValue,\n        borderColor: fillValue,\n        color: checkboxGroup?.textColor?.value ?? '',\n        boxShadow: fillValue ? `-1px 0 0 0 ${fillValue}` : null,\n      }\n    })\n\n    return {\n      focus,\n      isChecked,\n      isDisabled,\n      model,\n      handleChange,\n      activeStyle,\n      size,\n    }\n  },\n})\n</script>\n"],"names":["_openBlock","_normalizeClass"],"mappings":";;;;;AAuDA,MAAK,YAAa,gBAAa;AAAA,EAC7B,MAAM;AAAA,EACN,OAAO;AAAA,EACP,OAAO,CAAC,oBAAoB;AAAA,EAC5B,MAAM,OAAO;AACX,UAAM,EAAE,OAAO,WAAW,YAAY,MAAM,OAAO,iBACjD,YAAY;AACd,UAAM,EAAE,kBAAkB;AAE1B,UAAM,cAAc,SAAS,MAAM;AACjC,YAAM,YAAY,eAAe,MAAM,SAAS;AAChD,aAAO;AAAA,QACL,iBAAiB;AAAA,QACjB,aAAa;AAAA,QACb,OAAO,eAAe,WAAW,SAAS;AAAA,QAC1C,WAAW,YAAY,cAAc,cAAc;AAAA;AAAA;AAIvD,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA;AAAA;;;;2BAhFJ,wBA+CQ;SA9CDA,gCAAC,SAAoB;AAAA,WACVC,eAAI,uBAA4B;AAAA,2CAA4C;AAAA,uBAA0B;AAAA,sBAAiC;AAAA;;IAOtJ;AAAA,IACA,gBAAa,KAAE;AAAA;KAGR;AAAA;;MAEN,uBAAM;AAA8B,MACpC,OAAK;AAAA,MACJ,MAAM;AAAA,MACN,WAAU;AAAA,MACV,UAAU;AAAA,MACV,eAAY;AAAA,MACZ,cAAW,KAAE;AAAA,MACb,eAAM;AAAA,MACN,UAAK,uCAAE,qBAAK;AAAA,MACZ,SAAI,sCAAE,aAAK;AAAA;iBAVE;AAAA;;;MAed,uBAAM;AAA8B,MACpC,OAAK;AAAA,MACJ,MAAM;AAAA,MACN,WAAU;AAAA,MACV,UAAU;AAAA,MACV,UAAO;AAAA,MACP,YAAM;AAAA,MACN,UAAK,uCAAE,qBAAK;AAAA,MACZ,SAAI,sCAAE,aAAK;AAAA;iBATE;AAAA;;2BAYhB;MAEE,KAAK;AAAA,MACJ,OAAK;AAAA;OAEN;AAAA,yCAAS,UAAK;AAAA;;;;;;;;;"}
+{"version":3,"file":"checkbox-button.mjs","sources":["../../../../../../packages/components/checkbox/src/checkbox-button.vue"],"sourcesContent":["<template>\n  <label\n    :class=\"[\n      ns.b('button'),\n      ns.bm('button', size),\n      ns.is('disabled', isDisabled),\n      ns.is('checked', isChecked),\n      ns.is('focus', focus),\n    ]\"\n    role=\"checkbox\"\n    :aria-checked=\"isChecked\"\n    :aria-disabled=\"isDisabled\"\n  >\n    <input\n      v-if=\"trueLabel || falseLabel\"\n      v-model=\"model\"\n      :class=\"ns.be('button', 'original')\"\n      type=\"checkbox\"\n      :name=\"name\"\n      :tabindex=\"tabindex\"\n      :disabled=\"isDisabled\"\n      :true-value=\"trueLabel\"\n      :false-value=\"falseLabel\"\n      @change=\"handleChange\"\n      @focus=\"focus = true\"\n      @blur=\"focus = false\"\n    />\n    <input\n      v-else\n      v-model=\"model\"\n      :class=\"ns.be('button', 'original')\"\n      type=\"checkbox\"\n      :name=\"name\"\n      :tabindex=\"tabindex\"\n      :disabled=\"isDisabled\"\n      :value=\"label\"\n      @change=\"handleChange\"\n      @focus=\"focus = true\"\n      @blur=\"focus = false\"\n    />\n\n    <span\n      v-if=\"$slots.default || label\"\n      :class=\"ns.be('button', 'inner')\"\n      :style=\"isChecked ? activeStyle : null\"\n    >\n      <slot>{{ label }}</slot>\n    </span>\n  </label>\n</template>\n<script lang=\"ts\">\nimport { defineComponent, computed } from 'vue'\nimport { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'\nimport { useNamespace } from '@element-plus/hooks'\nimport { useCheckbox, useCheckboxGroup, useCheckboxProps } from './useCheckbox'\n\nexport default defineComponent({\n  name: 'ElCheckboxButton',\n  props: useCheckboxProps,\n  emits: [UPDATE_MODEL_EVENT, 'change'],\n  setup(props) {\n    const { focus, isChecked, isDisabled, size, model, handleChange } =\n      useCheckbox(props)\n    const { checkboxGroup } = useCheckboxGroup()\n    const ns = useNamespace('checkbox')\n\n    const activeStyle = computed(() => {\n      const fillValue = checkboxGroup?.fill?.value ?? ''\n      return {\n        backgroundColor: fillValue,\n        borderColor: fillValue,\n        color: checkboxGroup?.textColor?.value ?? '',\n        boxShadow: fillValue ? `-1px 0 0 0 ${fillValue}` : null,\n      }\n    })\n\n    return {\n      focus,\n      isChecked,\n      isDisabled,\n      model,\n      handleChange,\n      activeStyle,\n      size,\n      ns,\n    }\n  },\n})\n</script>\n"],"names":[],"mappings":";;;;;;;AAwDA,MAAK,YAAa,gBAAa;AAAA,EAC7B,MAAM;AAAA,EACN,OAAO;AAAA,EACP,OAAO,CAAC,oBAAoB;AAAA,EAC5B,MAAM,OAAO;AACX,UAAM,EAAE,OAAO,WAAW,YAAY,MAAM,OAAO,iBACjD,YAAY;AACd,UAAM,EAAE,kBAAkB;AAC1B,UAAM,KAAK,aAAa;AAExB,UAAM,cAAc,SAAS,MAAM;AACjC,YAAM,YAAY;AAClB;AAAO;AACY,QACjB;AAAa,QACb,sBAAsB;AAAoB,QAC1C;AAAmD;AAAA;AAIvD;AAAO;AACL,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA;AAAA;;;;;SAlFI;AAAA;AAAc;AAAuB,MAAwB,QAAG;AAAe,MAAmB,QAAG,GAAE;AAAY,MAAkB,QAAG,GAAE;AAAU;;;AAQzJ,IACA,gBAAa;AAAE;;AAGR;;MAEL;AAAY,MACb,uBAAe;AAAA,MACd;AAAM,MACN;AAAU,MACV,UAAU;AAAA,MACV,eAAY;AAAA,MACZ,cAAW;AAAE,MACb;AAAM,MACN;AAAY,MACZ;AAAW;;AAVE;;;MAeb;AAAY,MACb,uBAAe;AAAA,MACd;AAAM,MACN;AAAU,MACV,UAAU;AAAA,MACV,UAAO;AAAA,MACP;AAAM,MACN;AAAY,MACZ;AAAW;;AATE;;;;AAcR,MACL;AAAmB;;AAEpB;AAAc;;;;;;;;;;"}

package/es/components/checkbox/src/checkbox-button.vue.d.ts

@@ -36,6 +36,17 @@ declare const _default: import("vue").DefineComponent<{
         boxShadow: string | null;
     }>;
     size: import("vue").ComputedRef<import("../../../utils/types").ComponentSize>;
+    ns: {
+        namespace: import("vue").ComputedRef<string>;
+        b: (blockSuffix?: string) => string;
+        e: (element?: string | undefined) => string;
+        m: (modifier?: string | undefined) => string;
+        be: (blockSuffix?: string | undefined, element?: string | undefined) => string;
+        em: (element?: string | undefined, modifier?: string | undefined) => string;
+        bm: (blockSuffix?: string | undefined, modifier?: string | undefined) => string;
+        bem: (blockSuffix?: string | undefined, element?: string | undefined, modifier?: string | undefined) => string;
+        is: (name: string, state?: boolean) => string;
+    };
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "change")[], "update:modelValue" | "change", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         type: (BooleanConstructor | StringConstructor | NumberConstructor)[];

package/es/components/checkbox/src/checkbox-group.mjs

@@ -4,6 +4,7 @@ import { isValidComponentSize } from '../../../utils/validators.mjs';
 import '../../../hooks/index.mjs';
 import { useCheckboxGroup } from './useCheckbox.mjs';
 import { useSize } from '../../../hooks/use-common-props/index.mjs';
+import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
 
 const _sfc_main = defineComponent({
   name: "ElCheckboxGroup",
@@ -42,6 +43,7 @@ const _sfc_main = defineComponent({
   setup(props, { emit, slots }) {
     const { elFormItem } = useCheckboxGroup();
     const checkboxGroupSize = useSize();
+    const ns = useNamespace("checkbox");
     const changeEvent = (value) => {
       emit(UPDATE_MODEL_EVENT, value);
       nextTick(() => {
@@ -64,11 +66,12 @@ const _sfc_main = defineComponent({
       changeEvent
     });
     watch(() => props.modelValue, () => {
-      elFormItem.validate?.("change");
+      var _a;
+      (_a = elFormItem.validate) == null ? void 0 : _a.call(elFormItem, "change");
     });
     return () => {
       return h(props.tag, {
-        class: "el-checkbox-group",
+        class: ns.b("group"),
         role: "group",
         "aria-label": "checkbox-group"
       }, [renderSlot(slots, "default")]);

package/es/components/checkbox/src/checkbox-group.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox-group.mjs","sources":["../../../../../../packages/components/checkbox/src/checkbox-group.vue"],"sourcesContent":["<script lang=\"ts\">\nimport {\n  defineComponent,\n  computed,\n  watch,\n  provide,\n  nextTick,\n  toRefs,\n  h,\n  renderSlot,\n} from 'vue'\nimport { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'\nimport { isValidComponentSize } from '@element-plus/utils/validators'\nimport { useSize } from '@element-plus/hooks'\nimport { useCheckboxGroup } from './useCheckbox'\n\nimport type { PropType } from 'vue'\nimport type { ComponentSize } from '@element-plus/utils/types'\n\nexport default defineComponent({\n  name: 'ElCheckboxGroup',\n\n  props: {\n    modelValue: {\n      type: Array,\n      default: () => [],\n    },\n    disabled: Boolean,\n    min: {\n      type: Number,\n      default: undefined,\n    },\n    max: {\n      type: Number,\n      default: undefined,\n    },\n    size: {\n      type: String as PropType<ComponentSize>,\n      validator: isValidComponentSize,\n    },\n    fill: {\n      type: String,\n      default: undefined,\n    },\n    textColor: {\n      type: String,\n      default: undefined,\n    },\n    tag: {\n      type: String,\n      default: 'div',\n    },\n  },\n\n  emits: [UPDATE_MODEL_EVENT, 'change'],\n\n  setup(props, { emit, slots }) {\n    const { elFormItem } = useCheckboxGroup()\n    const checkboxGroupSize = useSize()\n\n    const changeEvent = (value) => {\n      emit(UPDATE_MODEL_EVENT, value)\n      nextTick(() => {\n        emit('change', value)\n      })\n    }\n\n    const modelValue = computed({\n      get() {\n        return props.modelValue\n      },\n      set(val) {\n        changeEvent(val)\n      },\n    })\n\n    provide('CheckboxGroup', {\n      name: 'ElCheckboxGroup',\n      modelValue,\n      ...toRefs(props),\n      checkboxGroupSize,\n      changeEvent,\n    })\n\n    watch(\n      () => props.modelValue,\n      () => {\n        elFormItem.validate?.('change')\n      }\n    )\n    return () => {\n      return h(\n        props.tag,\n        {\n          class: 'el-checkbox-group',\n          role: 'group',\n          'aria-label': 'checkbox-group',\n        },\n        [renderSlot(slots, 'default')]\n      )\n    }\n  },\n})\n</script>\n"],"names":[],"mappings":";;;;;;;MAmBK,YAAa,gBAAa;AAAA,EAC7B,MAAM;AAAA,EAEN,OAAO;AAAA,IACL,YAAY;AAAA,MACV,MAAM;AAAA,MACN,SAAS,MAAM;AAAA;AAAA,IAEjB,UAAU;AAAA,IACV,KAAK;AAAA,MACH,MAAM;AAAA,MACN,SAAS;AAAA;AAAA,IAEX,KAAK;AAAA,MACH,MAAM;AAAA,MACN,SAAS;AAAA;AAAA,IAEX,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,WAAW;AAAA;AAAA,IAEb,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA;AAAA,IAEX,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA;AAAA,IAEX,KAAK;AAAA,MACH,MAAM;AAAA,MACN,SAAS;AAAA;AAAA;AAAA,EAIb,OAAO,CAAC,oBAAoB;AAAA,EAE5B,MAAM,OAAO,EAAE,MAAM,SAAS;AAC5B,UAAM,EAAE,eAAe;AACvB,UAAM,oBAAoB;AAE1B,UAAM,cAAc,CAAC,UAAU;AAC7B,WAAK,oBAAoB;AACzB,eAAS,MAAM;AACb,aAAK,UAAU;AAAA;AAAA;AAInB,UAAM,aAAa,SAAS;AAAA,MAC1B,MAAM;AACJ,eAAO,MAAM;AAAA;AAAA,MAEf,IAAI,KAAK;AACP,oBAAY;AAAA;AAAA;AAIhB,YAAQ,iBAAiB;AAAA,MACvB,MAAM;AAAA,MACN;AAAA,SACG,OAAO;AAAA,MACV;AAAA,MACA;AAAA;AAGF,UACE,MAAM,MAAM,YACZ,MAAM;AACJ,iBAAW,WAAW;AAAA;AAG1B,WAAO,MAAM;AACX,aAAO,EACL,MAAM,KACN;AAAA,QACE,OAAO;AAAA,QACP,MAAM;AAAA,QACN,cAAc;AAAA,SAEhB,CAAC,WAAW,OAAO;AAAA;AAAA;AAAA;;;;"}
+{"version":3,"file":"checkbox-group.mjs","sources":["../../../../../../packages/components/checkbox/src/checkbox-group.vue"],"sourcesContent":["<script lang=\"ts\">\nimport {\n  defineComponent,\n  computed,\n  watch,\n  provide,\n  nextTick,\n  toRefs,\n  h,\n  renderSlot,\n} from 'vue'\nimport { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'\nimport { isValidComponentSize } from '@element-plus/utils/validators'\nimport { useSize, useNamespace } from '@element-plus/hooks'\nimport { useCheckboxGroup } from './useCheckbox'\n\nimport type { PropType } from 'vue'\nimport type { ComponentSize } from '@element-plus/utils/types'\n\nexport default defineComponent({\n  name: 'ElCheckboxGroup',\n\n  props: {\n    modelValue: {\n      type: Array,\n      default: () => [],\n    },\n    disabled: Boolean,\n    min: {\n      type: Number,\n      default: undefined,\n    },\n    max: {\n      type: Number,\n      default: undefined,\n    },\n    size: {\n      type: String as PropType<ComponentSize>,\n      validator: isValidComponentSize,\n    },\n    fill: {\n      type: String,\n      default: undefined,\n    },\n    textColor: {\n      type: String,\n      default: undefined,\n    },\n    tag: {\n      type: String,\n      default: 'div',\n    },\n  },\n\n  emits: [UPDATE_MODEL_EVENT, 'change'],\n\n  setup(props, { emit, slots }) {\n    const { elFormItem } = useCheckboxGroup()\n    const checkboxGroupSize = useSize()\n    const ns = useNamespace('checkbox')\n\n    const changeEvent = (value) => {\n      emit(UPDATE_MODEL_EVENT, value)\n      nextTick(() => {\n        emit('change', value)\n      })\n    }\n\n    const modelValue = computed({\n      get() {\n        return props.modelValue\n      },\n      set(val) {\n        changeEvent(val)\n      },\n    })\n\n    provide('CheckboxGroup', {\n      name: 'ElCheckboxGroup',\n      modelValue,\n      ...toRefs(props),\n      checkboxGroupSize,\n      changeEvent,\n    })\n\n    watch(\n      () => props.modelValue,\n      () => {\n        elFormItem.validate?.('change')\n      }\n    )\n    return () => {\n      return h(\n        props.tag,\n        {\n          class: ns.b('group'),\n          role: 'group',\n          'aria-label': 'checkbox-group',\n        },\n        [renderSlot(slots, 'default')]\n      )\n    }\n  },\n})\n</script>\n"],"names":[],"mappings":";;;;;;;;MAmBK,YAAa,gBAAa;AAAA,EAC7B,MAAM;AAAA,EAEN,OAAO;AAAA,IACL,YAAY;AAAA,MACV,MAAM;AAAA,MACN,SAAS,MAAM;AAAA;AAAA,IAEjB,UAAU;AAAA,IACV,KAAK;AAAA,MACH,MAAM;AAAA,MACN,SAAS;AAAA;AAAA,IAEX,KAAK;AAAA,MACH,MAAM;AAAA,MACN,SAAS;AAAA;AAAA,IAEX,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,WAAW;AAAA;AAAA,IAEb,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA;AAAA,IAEX,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA;AAAA,IAEX,KAAK;AAAA,MACH,MAAM;AAAA,MACN,SAAS;AAAA;AAAA;AAAA,EAIb,OAAO,CAAC,oBAAoB;AAAA,EAE5B,MAAM,OAAO,EAAE,MAAM,SAAS;AAC5B,UAAM,EAAE,eAAe;AACvB,UAAM,oBAAoB;AAC1B,UAAM,KAAK,aAAa;AAExB,UAAM,cAAc,CAAC,UAAU;AAC7B,WAAK,oBAAoB;AACzB,eAAS,MAAM;AACb,aAAK,UAAU;AAAA;AAAA;AAInB,UAAM,aAAa,SAAS;AAAA,MAC1B,MAAM;AACJ,eAAO,MAAM;AAAA;AAAA,MAEf,IAAI,KAAK;AACP,oBAAY;AAAA;AAAA;AAIhB,YAAQ,iBAAiB;AAAA,MACvB,MAAM;AAAA,MACN;AAAA,SACG,OAAO;AAAA,MACV;AAAA,MACA;AAAA;AAGF,UACE,MAAM,MAAM,YACZ,MAAM;AACJ;AAAsB;AAG1B;AACE;AAEE,eACS,KAAK;AAAA,QACZ;AAAM,QACN;AAAc;AAEG;AAAA;AAAA;;;;;"}

package/es/components/checkbox/src/checkbox.mjs

@@ -1,8 +1,10 @@
-import { defineComponent, createElementVNode, openBlock, createElementBlock, normalizeClass, withDirectives, vModelCheckbox, renderSlot, Fragment, createTextVNode, toDisplayString, createCommentVNode } from 'vue';
+import { defineComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, withDirectives, vModelCheckbox, renderSlot, Fragment, createTextVNode, toDisplayString, createCommentVNode } from 'vue';
 import { UPDATE_MODEL_EVENT } from '../../../utils/constants.mjs';
 import { isValidComponentSize } from '../../../utils/validators.mjs';
+import '../../../hooks/index.mjs';
 import { useCheckbox } from './useCheckbox.mjs';
 import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
+import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
 
 const _sfc_main = defineComponent({
   name: "ElCheckbox",
@@ -46,45 +48,48 @@ const _sfc_main = defineComponent({
   },
   emits: [UPDATE_MODEL_EVENT, "change"],
   setup(props) {
-    return useCheckbox(props);
+    const ns = useNamespace("checkbox");
+    return {
+      ns,
+      ...useCheckbox(props)
+    };
   }
 });
 const _hoisted_1 = ["id", "aria-controls"];
 const _hoisted_2 = ["tabindex", "role", "aria-checked"];
-const _hoisted_3 = /* @__PURE__ */ createElementVNode("span", { class: "el-checkbox__inner" }, null, -1);
-const _hoisted_4 = ["aria-hidden", "name", "tabindex", "disabled", "true-value", "false-value"];
-const _hoisted_5 = ["aria-hidden", "disabled", "value", "name", "tabindex"];
-const _hoisted_6 = {
-  key: 0,
-  class: "el-checkbox__label"
-};
+const _hoisted_3 = ["aria-hidden", "name", "tabindex", "disabled", "true-value", "false-value"];
+const _hoisted_4 = ["aria-hidden", "disabled", "value", "name", "tabindex"];
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("label", {
     id: _ctx.id,
-    class: normalizeClass(["el-checkbox", [
-      _ctx.checkboxSize ? "el-checkbox--" + _ctx.checkboxSize : "",
-      { "is-disabled": _ctx.isDisabled },
-      { "is-bordered": _ctx.border },
-      { "is-checked": _ctx.isChecked }
-    ]]),
+    class: normalizeClass([
+      _ctx.ns.b(),
+      _ctx.ns.m(_ctx.checkboxSize),
+      _ctx.ns.is("disabled", _ctx.isDisabled),
+      _ctx.ns.is("bordered", _ctx.border),
+      _ctx.ns.is("checked", _ctx.isChecked)
+    ]),
     "aria-controls": _ctx.indeterminate ? _ctx.controls : null
   }, [
     createElementVNode("span", {
-      class: normalizeClass(["el-checkbox__input", {
-        "is-disabled": _ctx.isDisabled,
-        "is-checked": _ctx.isChecked,
-        "is-indeterminate": _ctx.indeterminate,
-        "is-focus": _ctx.focus
-      }]),
+      class: normalizeClass([
+        _ctx.ns.e("input"),
+        _ctx.ns.is("disabled", _ctx.isDisabled),
+        _ctx.ns.is("checked", _ctx.isChecked),
+        _ctx.ns.is("indeterminate", _ctx.indeterminate),
+        _ctx.ns.is("focus", _ctx.focus)
+      ]),
       tabindex: _ctx.indeterminate ? 0 : void 0,
       role: _ctx.indeterminate ? "checkbox" : void 0,
       "aria-checked": _ctx.indeterminate ? "mixed" : false
     }, [
-      _hoisted_3,
+      createElementVNode("span", {
+        class: normalizeClass(_ctx.ns.e("inner"))
+      }, null, 2),
       _ctx.trueLabel || _ctx.falseLabel ? withDirectives((openBlock(), createElementBlock("input", {
         key: 0,
         "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.model = $event),
-        class: "el-checkbox__original",
+        class: normalizeClass(_ctx.ns.e("original")),
         type: "checkbox",
         "aria-hidden": _ctx.indeterminate ? "true" : "false",
         name: _ctx.name,
@@ -95,12 +100,12 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         onChange: _cache[1] || (_cache[1] = (...args) => _ctx.handleChange && _ctx.handleChange(...args)),
         onFocus: _cache[2] || (_cache[2] = ($event) => _ctx.focus = true),
         onBlur: _cache[3] || (_cache[3] = ($event) => _ctx.focus = false)
-      }, null, 40, _hoisted_4)), [
+      }, null, 42, _hoisted_3)), [
         [vModelCheckbox, _ctx.model]
       ]) : withDirectives((openBlock(), createElementBlock("input", {
         key: 1,
         "onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => _ctx.model = $event),
-        class: "el-checkbox__original",
+        class: normalizeClass(_ctx.ns.e("original")),
         type: "checkbox",
         "aria-hidden": _ctx.indeterminate ? "true" : "false",
         disabled: _ctx.isDisabled,
@@ -110,16 +115,19 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         onChange: _cache[5] || (_cache[5] = (...args) => _ctx.handleChange && _ctx.handleChange(...args)),
         onFocus: _cache[6] || (_cache[6] = ($event) => _ctx.focus = true),
         onBlur: _cache[7] || (_cache[7] = ($event) => _ctx.focus = false)
-      }, null, 40, _hoisted_5)), [
+      }, null, 42, _hoisted_4)), [
         [vModelCheckbox, _ctx.model]
       ])
     ], 10, _hoisted_2),
-    _ctx.$slots.default || _ctx.label ? (openBlock(), createElementBlock("span", _hoisted_6, [
+    _ctx.$slots.default || _ctx.label ? (openBlock(), createElementBlock("span", {
+      key: 0,
+      class: normalizeClass(_ctx.ns.e("label"))
+    }, [
       renderSlot(_ctx.$slots, "default"),
       !_ctx.$slots.default ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
         createTextVNode(toDisplayString(_ctx.label), 1)
       ], 2112)) : createCommentVNode("v-if", true)
-    ])) : createCommentVNode("v-if", true)
+    ], 2)) : createCommentVNode("v-if", true)
   ], 10, _hoisted_1);
 }
 var Checkbox = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);

package/es/components/checkbox/src/checkbox.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.mjs","sources":["../../../../../../packages/components/checkbox/src/checkbox.vue"],"sourcesContent":["<template>\n  <label\n    :id=\"id\"\n    class=\"el-checkbox\"\n    :class=\"[\n      checkboxSize ? 'el-checkbox--' + checkboxSize : '',\n      { 'is-disabled': isDisabled },\n      { 'is-bordered': border },\n      { 'is-checked': isChecked },\n    ]\"\n    :aria-controls=\"indeterminate ? controls : null\"\n  >\n    <span\n      class=\"el-checkbox__input\"\n      :class=\"{\n        'is-disabled': isDisabled,\n        'is-checked': isChecked,\n        'is-indeterminate': indeterminate,\n        'is-focus': focus,\n      }\"\n      :tabindex=\"indeterminate ? 0 : undefined\"\n      :role=\"indeterminate ? 'checkbox' : undefined\"\n      :aria-checked=\"indeterminate ? 'mixed' : false\"\n    >\n      <span class=\"el-checkbox__inner\"></span>\n      <input\n        v-if=\"trueLabel || falseLabel\"\n        v-model=\"model\"\n        class=\"el-checkbox__original\"\n        type=\"checkbox\"\n        :aria-hidden=\"indeterminate ? 'true' : 'false'\"\n        :name=\"name\"\n        :tabindex=\"tabindex\"\n        :disabled=\"isDisabled\"\n        :true-value=\"trueLabel\"\n        :false-value=\"falseLabel\"\n        @change=\"handleChange\"\n        @focus=\"focus = true\"\n        @blur=\"focus = false\"\n      />\n      <input\n        v-else\n        v-model=\"model\"\n        class=\"el-checkbox__original\"\n        type=\"checkbox\"\n        :aria-hidden=\"indeterminate ? 'true' : 'false'\"\n        :disabled=\"isDisabled\"\n        :value=\"label\"\n        :name=\"name\"\n        :tabindex=\"tabindex\"\n        @change=\"handleChange\"\n        @focus=\"focus = true\"\n        @blur=\"focus = false\"\n      />\n    </span>\n    <span v-if=\"$slots.default || label\" class=\"el-checkbox__label\">\n      <slot></slot>\n      <template v-if=\"!$slots.default\">{{ label }}</template>\n    </span>\n  </label>\n</template>\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\nimport { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'\nimport { isValidComponentSize } from '@element-plus/utils/validators'\nimport { useCheckbox } from './useCheckbox'\n\nimport type { PropType } from 'vue'\nimport type { ComponentSize } from '@element-plus/utils/types'\n\nexport default defineComponent({\n  name: 'ElCheckbox',\n  props: {\n    modelValue: {\n      type: [Boolean, Number, String],\n      default: () => undefined,\n    },\n    label: {\n      type: [String, Boolean, Number, Object],\n    },\n    indeterminate: Boolean,\n    disabled: Boolean,\n    checked: Boolean,\n    name: {\n      type: String,\n      default: undefined,\n    },\n    trueLabel: {\n      type: [String, Number],\n      default: undefined,\n    },\n    falseLabel: {\n      type: [String, Number],\n      default: undefined,\n    },\n    id: {\n      type: String,\n      default: undefined,\n    },\n    controls: {\n      type: String,\n      default: undefined,\n    },\n    border: Boolean,\n    size: {\n      type: String as PropType<ComponentSize>,\n      validator: isValidComponentSize,\n    },\n    tabindex: [String, Number],\n  },\n  emits: [UPDATE_MODEL_EVENT, 'change'],\n  setup(props) {\n    return useCheckbox(props)\n  },\n})\n</script>\n"],"names":["_openBlock","_createElementBlock","_normalizeClass"],"mappings":";;;;;;AAsEA,MAAK,YAAa,gBAAa;AAAA,EAC7B,MAAM;AAAA,EACN,OAAO;AAAA,IACL,YAAY;AAAA,MACV,MAAM,CAAC,SAAS,QAAQ;AAAA,MACxB,SAAS,MAAM;AAAA;AAAA,IAEjB,OAAO;AAAA,MACL,MAAM,CAAC,QAAQ,SAAS,QAAQ;AAAA;AAAA,IAElC,eAAe;AAAA,IACf,UAAU;AAAA,IACV,SAAS;AAAA,IACT,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA;AAAA,IAEX,WAAW;AAAA,MACT,MAAM,CAAC,QAAQ;AAAA,MACf,SAAS;AAAA;AAAA,IAEX,YAAY;AAAA,MACV,MAAM,CAAC,QAAQ;AAAA,MACf,SAAS;AAAA;AAAA,IAEX,IAAI;AAAA,MACF,MAAM;AAAA,MACN,SAAS;AAAA;AAAA,IAEX,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA;AAAA,IAEX,QAAQ;AAAA,IACR,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,WAAW;AAAA;AAAA,IAEb,UAAU,CAAC,QAAQ;AAAA;AAAA,EAErB,OAAO,CAAC,oBAAoB;AAAA,EAC5B,MAAM,OAAO;AACX,WAAO,YAAY;AAAA;AAAA;;gCAxFjB;;;;;EA+BmC,KAAK;AAAA;;2BAtD5C,wBA0DQ;SAzDDA,aAAEC;AAAA,IACP,SAAK;AAAA,WACWC,eAAY;AAAA,0BAA+D,kBAAU;AAAA,uBAA2B;AAAA,uBAAgC;AAAA;;;KAQhK;AAAA,uBACO,QAAC;AAAA,4BAC2B,uBAAU;AAAA,uBAAwB;AAAA;4BAA0E,KAAK;AAAA;;MAOjJ,UAAM,qBAAa;AAAA,MACnB,2BAAc,aAAa;AAAA;OAE5B;AAAA;;;QAIE,uBAAM,OAAuB;AAAA,QAC7B,OAAK;AAAA,QACJ;AAAA,QACA,eAAU;AAAA,QACV,WAAU;AAAA,QACV,UAAU;AAAA,QACV,eAAY;AAAA,QACZ,cAAW,KAAE;AAAA,QACb,eAAM;AAAA,QACN,UAAK,uCAAE,qBAAK;AAAA,QACZ,SAAI,sCAAE,aAAK;AAAA;mBAXE;AAAA;;;QAgBd,uBAAM,OAAuB;AAAA,QAC7B,OAAK;AAAA,QACJ;AAAA,QACA,eAAU,qBAAU;AAAA,QACpB,UAAO;AAAA,QACP,OAAM;AAAA,QACN,WAAU;AAAA,QACV,UAAM;AAAA,QACN,UAAK,uCAAE,qBAAK;AAAA,QACZ,SAAI,sCAAE,aAAK;AAAA;mBAVE;AAAA;;OAaN,IAAkB;AAAA,2BAA9B,2BACeD;AAAA,iBACI,KAAO,QAAO;AAAA,wEAAU;AAAA;;;;;;;;;"}
+{"version":3,"file":"checkbox.mjs","sources":["../../../../../../packages/components/checkbox/src/checkbox.vue"],"sourcesContent":["<template>\n  <label\n    :id=\"id\"\n    :class=\"[\n      ns.b(),\n      ns.m(checkboxSize),\n      ns.is('disabled', isDisabled),\n      ns.is('bordered', border),\n      ns.is('checked', isChecked),\n    ]\"\n    :aria-controls=\"indeterminate ? controls : null\"\n  >\n    <span\n      :class=\"[\n        ns.e('input'),\n        ns.is('disabled', isDisabled),\n        ns.is('checked', isChecked),\n        ns.is('indeterminate', indeterminate),\n        ns.is('focus', focus),\n      ]\"\n      :tabindex=\"indeterminate ? 0 : undefined\"\n      :role=\"indeterminate ? 'checkbox' : undefined\"\n      :aria-checked=\"indeterminate ? 'mixed' : false\"\n    >\n      <span :class=\"ns.e('inner')\"></span>\n      <input\n        v-if=\"trueLabel || falseLabel\"\n        v-model=\"model\"\n        :class=\"ns.e('original')\"\n        type=\"checkbox\"\n        :aria-hidden=\"indeterminate ? 'true' : 'false'\"\n        :name=\"name\"\n        :tabindex=\"tabindex\"\n        :disabled=\"isDisabled\"\n        :true-value=\"trueLabel\"\n        :false-value=\"falseLabel\"\n        @change=\"handleChange\"\n        @focus=\"focus = true\"\n        @blur=\"focus = false\"\n      />\n      <input\n        v-else\n        v-model=\"model\"\n        :class=\"ns.e('original')\"\n        type=\"checkbox\"\n        :aria-hidden=\"indeterminate ? 'true' : 'false'\"\n        :disabled=\"isDisabled\"\n        :value=\"label\"\n        :name=\"name\"\n        :tabindex=\"tabindex\"\n        @change=\"handleChange\"\n        @focus=\"focus = true\"\n        @blur=\"focus = false\"\n      />\n    </span>\n    <span v-if=\"$slots.default || label\" :class=\"ns.e('label')\">\n      <slot></slot>\n      <template v-if=\"!$slots.default\">{{ label }}</template>\n    </span>\n  </label>\n</template>\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\nimport { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'\nimport { isValidComponentSize } from '@element-plus/utils/validators'\nimport { useNamespace } from '@element-plus/hooks'\nimport { useCheckbox } from './useCheckbox'\n\nimport type { PropType } from 'vue'\nimport type { ComponentSize } from '@element-plus/utils/types'\n\nexport default defineComponent({\n  name: 'ElCheckbox',\n  props: {\n    modelValue: {\n      type: [Boolean, Number, String],\n      default: () => undefined,\n    },\n    label: {\n      type: [String, Boolean, Number, Object],\n    },\n    indeterminate: Boolean,\n    disabled: Boolean,\n    checked: Boolean,\n    name: {\n      type: String,\n      default: undefined,\n    },\n    trueLabel: {\n      type: [String, Number],\n      default: undefined,\n    },\n    falseLabel: {\n      type: [String, Number],\n      default: undefined,\n    },\n    id: {\n      type: String,\n      default: undefined,\n    },\n    controls: {\n      type: String,\n      default: undefined,\n    },\n    border: Boolean,\n    size: {\n      type: String as PropType<ComponentSize>,\n      validator: isValidComponentSize,\n    },\n    tabindex: [String, Number],\n  },\n  emits: [UPDATE_MODEL_EVENT, 'change'],\n  setup(props) {\n    const ns = useNamespace('checkbox')\n    return {\n      ns,\n      ...useCheckbox(props),\n    }\n  },\n})\n</script>\n"],"names":["_openBlock","_createElementBlock","_normalizeClass"],"mappings":";;;;;;;;AAuEA,MAAK,YAAa,gBAAa;AAAA,EAC7B,MAAM;AAAA,EACN,OAAO;AAAA,IACL,YAAY;AAAA,MACV,MAAM,CAAC,SAAS,QAAQ;AAAA,MACxB,SAAS,MAAM;AAAA;AAAA,IAEjB,OAAO;AAAA,MACL,MAAM,CAAC,QAAQ,SAAS,QAAQ;AAAA;AAAA,IAElC,eAAe;AAAA,IACf,UAAU;AAAA,IACV,SAAS;AAAA,IACT,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA;AAAA,IAEX,WAAW;AAAA,MACT,MAAM,CAAC,QAAQ;AAAA,MACf,SAAS;AAAA;AAAA,IAEX,YAAY;AAAA,MACV,MAAM,CAAC,QAAQ;AAAA,MACf,SAAS;AAAA;AAAA,IAEX,IAAI;AAAA,MACF,MAAM;AAAA,MACN,SAAS;AAAA;AAAA,IAEX,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA;AAAA,IAEX,QAAQ;AAAA,IACR,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,WAAW;AAAA;AAAA,IAEb,UAAU,CAAC,QAAQ;AAAA;AAAA,EAErB,OAAO,CAAC,oBAAoB;AAAA,EAC5B,MAAM,OAAO;AACX,UAAM,KAAK,aAAa;AACxB,WAAO;AAAA,MACL;AAAA,SACG,YAAY;AAAA;AAAA;AAAA;;;;;2BAnHnB,wBA0DQ;SAzDDA,aAAEC;AAAA,IACN,SAAK;AAAA,WAAUC,eAAI;AAAA,MAAU,QAAG;AAAA,MAAuB,QAAG,EAAE;AAAA,MAAgC,QAAG,GAAE,YAAa;AAAA,MAAe,QAAG,GAAE,YAAY;AAAA;;;KAS/I;AAAA,uBACQ;AAAA,aAAYA,eAAI;AAAA,QAAmB,QAAG,EAAE;AAAA,QAAkC,QAAG,GAAE,YAAY;AAAA,QAAoB,QAAG,GAAE;AAAA,QAA0C,QAAG,GAAE,iBAAU,KAAK;AAAA;;MAQvL,UAAM,qBAAa;AAAA,MACnB,2BAAc,aAAa;AAAA;OAE5B;AAAA,yBAAY,QAAE;AAAA;SAEN;AAAA;;QAEL,uBAAO,OAAE;AAAE,QACZ,OAAKA,eAAU;AAAA,QACd;AAAA,QACA,eAAU;AAAA,QACV,WAAU;AAAA,QACV,UAAU;AAAA,QACV,eAAY;AAAA,QACZ,cAAW,KAAE;AAAA,QACb,eAAM;AAAA,QACN,UAAK,uCAAE,qBAAK;AAAA,QACZ,SAAI,sCAAE,aAAK;AAAA;mBAXE;AAAA;;;QAgBb,uBAAO,OAAE;AAAE,QACZ,OAAKA,eAAU;AAAA,QACd;AAAA,QACA,eAAU,qBAAU;AAAA,QACpB,UAAO;AAAA,QACP,OAAM;AAAA,QACN,WAAU;AAAA,QACV,UAAM;AAAA,QACN,UAAK,uCAAE,qBAAK;AAAA,QACZ,SAAI,sCAAE,aAAK;AAAA;mBAVE;AAAA;;OAaN,IAAkB;AAAA,2BAA9B;MAAsC,KAAK;AAAA;OACzC;AAAA,iBACiB,KAAO,QAAO;AAAA,wEAAU;AAAA;;;;;;;;;"}

package/es/components/checkbox/src/checkbox.vue.d.ts

@@ -45,6 +45,17 @@ declare const _default: import("vue").DefineComponent<{
     handleChange: (e: InputEvent) => void;
     focus: import("vue").Ref<boolean>;
     size: import("vue").ComputedRef<ComponentSize>;
+    ns: {
+        namespace: import("vue").ComputedRef<string>;
+        b: (blockSuffix?: string) => string;
+        e: (element?: string | undefined) => string;
+        m: (modifier?: string | undefined) => string;
+        be: (blockSuffix?: string | undefined, element?: string | undefined) => string;
+        em: (element?: string | undefined, modifier?: string | undefined) => string;
+        bm: (blockSuffix?: string | undefined, modifier?: string | undefined) => string;
+        bem: (blockSuffix?: string | undefined, element?: string | undefined, modifier?: string | undefined) => string;
+        is: (name: string, state?: boolean) => string;
+    };
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "change")[], "update:modelValue" | "change", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         type: (BooleanConstructor | StringConstructor | NumberConstructor)[];

package/es/components/collapse/src/collapse-item.mjs

@@ -32,7 +32,7 @@ const _sfc_main = defineComponent({
     const isClick = ref(false);
     const id = ref(generateId());
     const isActive = computed(() => {
-      return collapse?.activeNames.value.indexOf(props.name) > -1;
+      return (collapse == null ? void 0 : collapse.activeNames.value.indexOf(props.name)) > -1;
     });
     const handleFocus = () => {
       setTimeout(() => {
@@ -46,12 +46,12 @@ const _sfc_main = defineComponent({
     const handleHeaderClick = () => {
       if (props.disabled)
         return;
-      collapse?.handleItemClick(props.name);
+      collapse == null ? void 0 : collapse.handleItemClick(props.name);
       focusing.value = false;
       isClick.value = true;
     };
     const handleEnterClick = () => {
-      collapse?.handleItemClick(props.name);
+      collapse == null ? void 0 : collapse.handleItemClick(props.name);
     };
     return {
       isActive,

package/es/components/collapse/src/collapse-item.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"collapse-item.mjs","sources":["../../../../../../packages/components/collapse/src/collapse-item.vue"],"sourcesContent":["<template>\n  <div\n    class=\"el-collapse-item\"\n    :class=\"{ 'is-active': isActive, 'is-disabled': disabled }\"\n  >\n    <div\n      role=\"tab\"\n      :aria-expanded=\"isActive\"\n      :aria-controls=\"`el-collapse-content-${id}`\"\n      :aria-describedby=\"`el-collapse-content-${id}`\"\n    >\n      <div\n        :id=\"`el-collapse-head-${id}`\"\n        class=\"el-collapse-item__header\"\n        role=\"button\"\n        :tabindex=\"disabled ? -1 : 0\"\n        :class=\"{\n          focusing: focusing,\n          'is-active': isActive,\n        }\"\n        @click=\"handleHeaderClick\"\n        @keyup.space.enter.stop=\"handleEnterClick\"\n        @focus=\"handleFocus\"\n        @blur=\"focusing = false\"\n      >\n        <slot name=\"title\">{{ title }}</slot>\n        <el-icon\n          class=\"el-collapse-item__arrow\"\n          :class=\"{ 'is-active': isActive }\"\n        >\n          <arrow-right />\n        </el-icon>\n      </div>\n    </div>\n    <el-collapse-transition>\n      <div\n        v-show=\"isActive\"\n        :id=\"`el-collapse-content-${id}`\"\n        class=\"el-collapse-item__wrap\"\n        role=\"tabpanel\"\n        :aria-hidden=\"!isActive\"\n        :aria-labelledby=\"`el-collapse-head-${id}`\"\n      >\n        <div class=\"el-collapse-item__content\">\n          <slot></slot>\n        </div>\n      </div>\n    </el-collapse-transition>\n  </div>\n</template>\n<script lang=\"ts\">\nimport { defineComponent, inject, computed, ref } from 'vue'\nimport { generateId } from '@element-plus/utils/util'\nimport ElCollapseTransition from '@element-plus/components/collapse-transition'\nimport ElIcon from '@element-plus/components/icon'\nimport { ArrowRight } from '@element-plus/icons-vue'\n\nimport type { PropType } from 'vue'\nimport type { CollapseProvider } from './collapse.type'\n\nexport default defineComponent({\n  name: 'ElCollapseItem',\n  components: { ElCollapseTransition, ElIcon, ArrowRight },\n  props: {\n    title: {\n      type: String,\n      default: '',\n    },\n    name: {\n      type: [String, Number] as PropType<string | number>,\n      default: () => {\n        return generateId()\n      },\n    },\n    disabled: Boolean,\n  },\n  setup(props) {\n    const collapse = inject<CollapseProvider>('collapse')\n\n    const contentWrapStyle = ref({\n      height: 'auto',\n      display: 'block',\n    })\n    const contentHeight = ref(0)\n    const focusing = ref(false)\n    const isClick = ref(false)\n    const id = ref(generateId())\n\n    const isActive = computed(() => {\n      return collapse?.activeNames.value.indexOf(props.name) > -1\n    })\n\n    const handleFocus = () => {\n      setTimeout(() => {\n        if (!isClick.value) {\n          focusing.value = true\n        } else {\n          isClick.value = false\n        }\n      }, 50)\n    }\n\n    const handleHeaderClick = () => {\n      if (props.disabled) return\n      collapse?.handleItemClick(props.name)\n      focusing.value = false\n      isClick.value = true\n    }\n\n    const handleEnterClick = () => {\n      collapse?.handleItemClick(props.name)\n    }\n\n    return {\n      isActive,\n      contentWrapStyle,\n      contentHeight,\n      focusing,\n      isClick,\n      id,\n      handleFocus,\n      handleHeaderClick,\n      handleEnterClick,\n      collapse,\n    }\n  },\n})\n</script>\n"],"names":["ElCollapseTransition","_openBlock","_withCtx","_createElementVNode"],"mappings":";;;;;;;AA4DA,MAAK,YAAa,gBAAa;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY,wBAAEA,qBAAsB,QAAQ;AAAA,EAC5C,OAAO;AAAA,IACL,OAAO;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA;AAAA,IAEX,MAAM;AAAA,MACJ,MAAM,CAAC,QAAQ;AAAA,MACf,SAAS,MAAM;AACb,eAAO;AAAA;AAAA;AAAA,IAGX,UAAU;AAAA;AAAA,EAEZ,MAAM,OAAO;AACX,UAAM,WAAW,OAAyB;AAE1C,UAAM,mBAAmB,IAAI;AAAA,MAC3B,QAAQ;AAAA,MACR,SAAS;AAAA;AAEX,UAAM,gBAAgB,IAAI;AAC1B,UAAM,WAAW,IAAI;AACrB,UAAM,UAAU,IAAI;AACpB,UAAM,KAAK,IAAI;AAEf,UAAM,WAAW,SAAS,MAAM;AAC9B,aAAO,UAAU,YAAY,MAAM,QAAQ,MAAM,QAAQ;AAAA;AAG3D,UAAM,cAAc,MAAM;AACxB,iBAAW,MAAM;AACf,YAAI,CAAC,QAAQ,OAAO;AAClB,mBAAS,QAAQ;AAAA,eACZ;AACL,kBAAQ,QAAQ;AAAA;AAAA,SAEjB;AAAA;AAGL,UAAM,oBAAoB,MAAM;AAC9B,UAAI,MAAM;AAAU;AACpB,gBAAU,gBAAgB,MAAM;AAChC,eAAS,QAAQ;AACjB,cAAQ,QAAQ;AAAA;AAGlB,UAAM,mBAAmB,MAAM;AAC7B,gBAAU,gBAAgB,MAAM;AAAA;AAGlC,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA;AAAA;;;0BAhFY,eAAC;;;;;;SAzCVC,gCAAC,OAAkB;AAAA;KAGxB;AAAA,uBACY;AAAA,MACT;AAAA,MACA,iBAAa;AAAA,MACb,wCAAgB,KAAyB;AAAA;OAE1C;AAAA,yBACK,OAAsB;AAAA,QACzB,wBAAM;AAAA,8BAGwB,6BAAQ;AAAA,yBAAyB;AAAA;;QAD9D;AAAA,QAKA,UAAK;AAAA,QACL,SAAK,iEAAmB;AAAA,QACxB,SAAK,iDAAE,sCAAW;AAAA,QAClB,SAAI,uCAAE,oBAAQ;AAAA;SAEf;AAAA,6CAAsB;AAAA;;oBAEf,oBAAC;AAAA;;mBAGNC,QAAe;AAAA;;;;;OAIrB,GAayB;AAAA,mDADjB;AAAA,uBAXN;AAAA,uBAEKC,mBAA2B;AAAA,UAC9B,2BAAM,KAAwB;AAAA,UAC9B,OAAK;AAAA,UACJ;AAAA,UACA,qBAAe;AAAA;WAEhB;AAAA,6BACe;AAAA;;cARP,aAAQ;AAAA;;;;;;;;;;;"}
+{"version":3,"file":"collapse-item.mjs","sources":["../../../../../../packages/components/collapse/src/collapse-item.vue"],"sourcesContent":["<template>\n  <div\n    class=\"el-collapse-item\"\n    :class=\"{ 'is-active': isActive, 'is-disabled': disabled }\"\n  >\n    <div\n      role=\"tab\"\n      :aria-expanded=\"isActive\"\n      :aria-controls=\"`el-collapse-content-${id}`\"\n      :aria-describedby=\"`el-collapse-content-${id}`\"\n    >\n      <div\n        :id=\"`el-collapse-head-${id}`\"\n        class=\"el-collapse-item__header\"\n        role=\"button\"\n        :tabindex=\"disabled ? -1 : 0\"\n        :class=\"{\n          focusing: focusing,\n          'is-active': isActive,\n        }\"\n        @click=\"handleHeaderClick\"\n        @keyup.space.enter.stop=\"handleEnterClick\"\n        @focus=\"handleFocus\"\n        @blur=\"focusing = false\"\n      >\n        <slot name=\"title\">{{ title }}</slot>\n        <el-icon\n          class=\"el-collapse-item__arrow\"\n          :class=\"{ 'is-active': isActive }\"\n        >\n          <arrow-right />\n        </el-icon>\n      </div>\n    </div>\n    <el-collapse-transition>\n      <div\n        v-show=\"isActive\"\n        :id=\"`el-collapse-content-${id}`\"\n        class=\"el-collapse-item__wrap\"\n        role=\"tabpanel\"\n        :aria-hidden=\"!isActive\"\n        :aria-labelledby=\"`el-collapse-head-${id}`\"\n      >\n        <div class=\"el-collapse-item__content\">\n          <slot></slot>\n        </div>\n      </div>\n    </el-collapse-transition>\n  </div>\n</template>\n<script lang=\"ts\">\nimport { defineComponent, inject, computed, ref } from 'vue'\nimport { generateId } from '@element-plus/utils/util'\nimport ElCollapseTransition from '@element-plus/components/collapse-transition'\nimport ElIcon from '@element-plus/components/icon'\nimport { ArrowRight } from '@element-plus/icons-vue'\n\nimport type { PropType } from 'vue'\nimport type { CollapseProvider } from './collapse.type'\n\nexport default defineComponent({\n  name: 'ElCollapseItem',\n  components: { ElCollapseTransition, ElIcon, ArrowRight },\n  props: {\n    title: {\n      type: String,\n      default: '',\n    },\n    name: {\n      type: [String, Number] as PropType<string | number>,\n      default: () => {\n        return generateId()\n      },\n    },\n    disabled: Boolean,\n  },\n  setup(props) {\n    const collapse = inject<CollapseProvider>('collapse')\n\n    const contentWrapStyle = ref({\n      height: 'auto',\n      display: 'block',\n    })\n    const contentHeight = ref(0)\n    const focusing = ref(false)\n    const isClick = ref(false)\n    const id = ref(generateId())\n\n    const isActive = computed(() => {\n      return collapse?.activeNames.value.indexOf(props.name) > -1\n    })\n\n    const handleFocus = () => {\n      setTimeout(() => {\n        if (!isClick.value) {\n          focusing.value = true\n        } else {\n          isClick.value = false\n        }\n      }, 50)\n    }\n\n    const handleHeaderClick = () => {\n      if (props.disabled) return\n      collapse?.handleItemClick(props.name)\n      focusing.value = false\n      isClick.value = true\n    }\n\n    const handleEnterClick = () => {\n      collapse?.handleItemClick(props.name)\n    }\n\n    return {\n      isActive,\n      contentWrapStyle,\n      contentHeight,\n      focusing,\n      isClick,\n      id,\n      handleFocus,\n      handleHeaderClick,\n      handleEnterClick,\n      collapse,\n    }\n  },\n})\n</script>\n"],"names":["ElCollapseTransition","_openBlock","_withCtx","_createElementVNode"],"mappings":";;;;;;;AA4DA,MAAK,YAAa,gBAAa;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY,wBAAEA,qBAAsB,QAAQ;AAAA,EAC5C,OAAO;AAAA,IACL,OAAO;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA;AAAA,IAEX,MAAM;AAAA,MACJ,MAAM,CAAC,QAAQ;AAAA,MACf,SAAS,MAAM;AACb,eAAO;AAAA;AAAA;AAAA,IAGX,UAAU;AAAA;AAAA,EAEZ,MAAM,OAAO;AACX,UAAM,WAAW,OAAyB;AAE1C,UAAM,mBAAmB,IAAI;AAAA,MAC3B,QAAQ;AAAA,MACR,SAAS;AAAA;AAEX,UAAM,gBAAgB,IAAI;AAC1B,UAAM,WAAW,IAAI;AACrB,UAAM,UAAU,IAAI;AACpB,UAAM,KAAK,IAAI;AAEf,UAAM,WAAW,SAAS,MAAM;AAC9B,aAAO,kDAAkD;AAAA;AAG3D,UAAM,cAAc,MAAM;AACxB,iBAAW,MAAM;AACf,YAAI,CAAC,QAAQ,OAAO;AAClB,mBAAS,QAAQ;AAAA,eACZ;AACL,kBAAQ,QAAQ;AAAA;AAAA,SAEjB;AAAA;AAGL,UAAM,oBAAoB,MAAM;AAC9B,UAAI,MAAM;AAAU;AACpB;AACA,eAAS,QAAQ;AACjB,cAAQ,QAAQ;AAAA;AAGlB,UAAM,mBAAmB,MAAM;AAC7B;AAAgC;AAGlC,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA;AAAA;;;0BAhFY,eAAC;;;;;;SAzCVC,gCAAC,OAAkB;AAAA;KAGxB;AAAA,uBACY;AAAA,MACT;AAAA,MACA,iBAAa;AAAA,MACb,wCAAgB,KAAyB;AAAA;OAE1C;AAAA,yBACK,OAAsB;AAAA,QACzB,wBAAM;AAAA,8BAGwB,6BAAQ;AAAA,yBAAyB;AAAA;;QAD9D;AAAA,QAKA,UAAK;AAAA,QACL,SAAK,iEAAmB;AAAA,QACxB,SAAK,iDAAE,sCAAW;AAAA,QAClB,SAAI,uCAAE,oBAAQ;AAAA;SAEf;AAAA,6CAAsB;AAAA;;oBAEf,oBAAC;AAAA;;mBAGNC,QAAe;AAAA;;;;;OAIrB,GAayB;AAAA,mDADjB;AAAA,uBAXN;AAAA,uBAEKC,mBAA2B;AAAA,UAC9B,2BAAM,KAAwB;AAAA,UAC9B,OAAK;AAAA,UACJ;AAAA,UACA,qBAAe;AAAA;WAEhB;AAAA,6BACe;AAAA;;cARP,aAAQ;AAAA;;;;;;;;;;;"}

package/es/components/color-picker/src/index.mjs

@@ -130,10 +130,11 @@ const _sfc_main = defineComponent({
       color.fromString(customInput.value);
     }
     function confirmValue() {
+      var _a;
       const value = color.value;
       emit(UPDATE_MODEL_EVENT, value);
       emit("change", value);
-      elFormItem.validate?.("change");
+      (_a = elFormItem.validate) == null ? void 0 : _a.call(elFormItem, "change");
       debounceSetShowPicker(false);
       nextTick(() => {
         const newColor = new Color({
@@ -147,11 +148,12 @@ const _sfc_main = defineComponent({
       });
     }
     function clear() {
+      var _a;
       debounceSetShowPicker(false);
       emit(UPDATE_MODEL_EVENT, null);
       emit("change", null);
       if (props.modelValue !== null) {
-        elFormItem.validate?.("change");
+        (_a = elFormItem.validate) == null ? void 0 : _a.call(elFormItem, "change");
       }
       resetColor();
     }
@@ -162,9 +164,10 @@ const _sfc_main = defineComponent({
     });
     watch(() => showPicker.value, () => {
       nextTick(() => {
-        hue.value?.update();
-        svPanel.value?.update();
-        alpha.value?.update();
+        var _a, _b, _c;
+        (_a = hue.value) == null ? void 0 : _a.update();
+        (_b = svPanel.value) == null ? void 0 : _b.update();
+        (_c = alpha.value) == null ? void 0 : _c.update();
       });
     });
     provide(OPTIONS_KEY, {