@element-plus/nightly 0.0.20220209 → 0.0.20220210

package/es/components/transfer/src/transfer-panel.mjs

@@ -1,4 +1,4 @@
-import { defineComponent, reactive, computed, toRefs, resolveComponent, openBlock, createElementBlock, createElementVNode, createVNode, withCtx, createTextVNode, toDisplayString, normalizeClass, createBlock, createCommentVNode, withDirectives, Fragment, renderList, vShow, renderSlot } from 'vue';
+import { defineComponent, reactive, computed, toRefs, resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, createVNode, withCtx, createTextVNode, toDisplayString, createBlock, createCommentVNode, withDirectives, Fragment, renderList, vShow, renderSlot } from 'vue';
 import '../../../hooks/index.mjs';
 import { ElCheckboxGroup, ElCheckbox } from '../../checkbox/index.mjs';
 import { ElInput } from '../../input/index.mjs';
@@ -6,6 +6,7 @@ import { Search } from '@element-plus/icons-vue';
 import { useCheckProps, CHECKED_CHANGE_EVENT, useCheck } from './useCheck.mjs';
 import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
 import { useLocale } from '../../../hooks/use-locale/index.mjs';
+import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
 
 const _sfc_main = defineComponent({
   name: "ElTransferPanel",
@@ -19,6 +20,7 @@ const _sfc_main = defineComponent({
   emits: [CHECKED_CHANGE_EVENT],
   setup(props, { slots }) {
     const { t } = useLocale();
+    const ns = useNamespace("transfer");
     const panelState = reactive({
       checked: [],
       allChecked: false,
@@ -41,6 +43,7 @@ const _sfc_main = defineComponent({
     const hasFooter = computed(() => !!slots.default()[0].children.length);
     const { checked, allChecked, query, inputHover, checkChangeByUser } = toRefs(panelState);
     return {
+      ns,
       labelProp,
       keyProp,
       disabledProp,
@@ -60,19 +63,17 @@ const _sfc_main = defineComponent({
     };
   }
 });
-const _hoisted_1 = { class: "el-transfer-panel" };
-const _hoisted_2 = { class: "el-transfer-panel__header" };
-const _hoisted_3 = {
-  key: 0,
-  class: "el-transfer-panel__footer"
-};
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_el_checkbox = resolveComponent("el-checkbox");
   const _component_el_input = resolveComponent("el-input");
   const _component_option_content = resolveComponent("option-content");
   const _component_el_checkbox_group = resolveComponent("el-checkbox-group");
-  return openBlock(), createElementBlock("div", _hoisted_1, [
-    createElementVNode("p", _hoisted_2, [
+  return openBlock(), createElementBlock("div", {
+    class: normalizeClass(_ctx.ns.b("panel"))
+  }, [
+    createElementVNode("p", {
+      class: normalizeClass(_ctx.ns.be("panel", "header"))
+    }, [
       createVNode(_component_el_checkbox, {
         modelValue: _ctx.allChecked,
         "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.allChecked = $event),
@@ -85,32 +86,32 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         ]),
         _: 1
       }, 8, ["modelValue", "indeterminate", "onChange"])
-    ]),
+    ], 2),
     createElementVNode("div", {
-      class: normalizeClass(["el-transfer-panel__body", _ctx.hasFooter ? "is-with-footer" : ""])
+      class: normalizeClass([_ctx.ns.be("panel", "body"), _ctx.ns.is("with-footer", _ctx.hasFooter)])
     }, [
       _ctx.filterable ? (openBlock(), createBlock(_component_el_input, {
         key: 0,
         modelValue: _ctx.query,
         "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => _ctx.query = $event),
-        class: "el-transfer-panel__filter",
+        class: normalizeClass(_ctx.ns.be("panel", "filter")),
         size: "default",
         placeholder: _ctx.placeholder,
         "prefix-icon": _ctx.SearchIcon,
         clearable: "",
         onMouseenter: _cache[2] || (_cache[2] = ($event) => _ctx.inputHover = true),
         onMouseleave: _cache[3] || (_cache[3] = ($event) => _ctx.inputHover = false)
-      }, null, 8, ["modelValue", "placeholder", "prefix-icon"])) : createCommentVNode("v-if", true),
+      }, null, 8, ["modelValue", "class", "placeholder", "prefix-icon"])) : createCommentVNode("v-if", true),
       withDirectives(createVNode(_component_el_checkbox_group, {
         modelValue: _ctx.checked,
         "onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => _ctx.checked = $event),
-        class: normalizeClass([{ "is-filterable": _ctx.filterable }, "el-transfer-panel__list"])
+        class: normalizeClass([_ctx.ns.is("filterable", _ctx.filterable), _ctx.ns.be("panel", "list")])
       }, {
         default: withCtx(() => [
           (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.filteredData, (item) => {
             return openBlock(), createBlock(_component_el_checkbox, {
               key: item[_ctx.keyProp],
-              class: "el-transfer-panel__item",
+              class: normalizeClass(_ctx.ns.be("panel", "item")),
               label: item[_ctx.keyProp],
               disabled: item[_ctx.disabledProp]
             }, {
@@ -120,21 +121,26 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
                 }, null, 8, ["option"])
               ]),
               _: 2
-            }, 1032, ["label", "disabled"]);
+            }, 1032, ["class", "label", "disabled"]);
           }), 128))
         ]),
         _: 1
       }, 8, ["modelValue", "class"]), [
         [vShow, !_ctx.hasNoMatch && _ctx.data.length > 0]
       ]),
-      withDirectives(createElementVNode("p", { class: "el-transfer-panel__empty" }, toDisplayString(_ctx.hasNoMatch ? _ctx.t("el.transfer.noMatch") : _ctx.t("el.transfer.noData")), 513), [
+      withDirectives(createElementVNode("p", {
+        class: normalizeClass(_ctx.ns.be("panel", "empty"))
+      }, toDisplayString(_ctx.hasNoMatch ? _ctx.t("el.transfer.noMatch") : _ctx.t("el.transfer.noData")), 3), [
         [vShow, _ctx.hasNoMatch || _ctx.data.length === 0]
       ])
     ], 2),
-    _ctx.hasFooter ? (openBlock(), createElementBlock("p", _hoisted_3, [
+    _ctx.hasFooter ? (openBlock(), createElementBlock("p", {
+      key: 0,
+      class: normalizeClass(_ctx.ns.be("panel", "footer"))
+    }, [
       renderSlot(_ctx.$slots, "default")
-    ])) : createCommentVNode("v-if", true)
-  ]);
+    ], 2)) : createCommentVNode("v-if", true)
+  ], 2);
 }
 var TransferPanel = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 

package/es/components/transfer/src/transfer-panel.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"transfer-panel.mjs","sources":["../../../../../../packages/components/transfer/src/transfer-panel.vue"],"sourcesContent":["<template>\n  <div class=\"el-transfer-panel\">\n    <p class=\"el-transfer-panel__header\">\n      <el-checkbox\n        v-model=\"allChecked\"\n        :indeterminate=\"isIndeterminate\"\n        @change=\"handleAllCheckedChange\"\n      >\n        {{ title }}\n        <span>{{ checkedSummary }}</span>\n      </el-checkbox>\n    </p>\n\n    <div\n      :class=\"['el-transfer-panel__body', hasFooter ? 'is-with-footer' : '']\"\n    >\n      <el-input\n        v-if=\"filterable\"\n        v-model=\"query\"\n        class=\"el-transfer-panel__filter\"\n        size=\"default\"\n        :placeholder=\"placeholder\"\n        :prefix-icon=\"SearchIcon\"\n        clearable\n        @mouseenter=\"inputHover = true\"\n        @mouseleave=\"inputHover = false\"\n      >\n      </el-input>\n      <el-checkbox-group\n        v-show=\"!hasNoMatch && data.length > 0\"\n        v-model=\"checked\"\n        :class=\"{ 'is-filterable': filterable }\"\n        class=\"el-transfer-panel__list\"\n      >\n        <el-checkbox\n          v-for=\"item in filteredData\"\n          :key=\"item[keyProp]\"\n          class=\"el-transfer-panel__item\"\n          :label=\"item[keyProp]\"\n          :disabled=\"item[disabledProp]\"\n        >\n          <option-content :option=\"optionRender(item)\" />\n        </el-checkbox>\n      </el-checkbox-group>\n      <p\n        v-show=\"hasNoMatch || data.length === 0\"\n        class=\"el-transfer-panel__empty\"\n      >\n        {{ hasNoMatch ? t('el.transfer.noMatch') : t('el.transfer.noData') }}\n      </p>\n    </div>\n    <p v-if=\"hasFooter\" class=\"el-transfer-panel__footer\">\n      <slot></slot>\n    </p>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent, reactive, toRefs } from 'vue'\nimport { useLocale } from '@element-plus/hooks'\nimport { ElCheckbox, ElCheckboxGroup } from '@element-plus/components/checkbox'\nimport ElInput from '@element-plus/components/input'\nimport { Search } from '@element-plus/icons-vue'\nimport { useCheck, useCheckProps, CHECKED_CHANGE_EVENT } from './useCheck'\n\nexport default defineComponent({\n  name: 'ElTransferPanel',\n\n  components: {\n    ElCheckboxGroup,\n    ElCheckbox,\n    ElInput,\n    OptionContent: ({ option }) => option,\n  },\n\n  props: useCheckProps,\n\n  emits: [CHECKED_CHANGE_EVENT],\n\n  setup(props, { slots }) {\n    const { t } = useLocale()\n\n    const panelState = reactive({\n      checked: [],\n      allChecked: false,\n      query: '',\n      inputHover: false,\n      checkChangeByUser: true,\n    })\n\n    const {\n      labelProp,\n      keyProp,\n      disabledProp,\n      filteredData,\n      checkedSummary,\n      isIndeterminate,\n      handleAllCheckedChange,\n    } = useCheck(props, panelState)\n\n    const hasNoMatch = computed(() => {\n      return panelState.query.length > 0 && filteredData.value.length === 0\n    })\n\n    const hasFooter = computed(() => !!slots.default()[0].children.length)\n\n    const { checked, allChecked, query, inputHover, checkChangeByUser } =\n      toRefs(panelState)\n\n    return {\n      labelProp,\n      keyProp,\n      disabledProp,\n      filteredData,\n      checkedSummary,\n      isIndeterminate,\n      handleAllCheckedChange,\n\n      checked,\n      allChecked,\n      query,\n      inputHover,\n      checkChangeByUser,\n\n      hasNoMatch,\n      SearchIcon: Search,\n      hasFooter,\n\n      t,\n    }\n  },\n})\n</script>\n"],"names":["_openBlock","_createElementBlock","_createTextVNode","_createVNode","_Fragment","_createBlock","_withCtx","_createElementVNode"],"mappings":";;;;;;;;;AAiEA,MAAK,YAAa,gBAAa;AAAA,EAC7B,MAAM;AAAA,EAEN,YAAY;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe,CAAC,EAAE,aAAa;AAAA;AAAA,EAGjC,OAAO;AAAA,EAEP,OAAO,CAAC;AAAA,EAER,MAAM,OAAO,EAAE,SAAS;AACtB,UAAM,EAAE,MAAM;AAEd,UAAM,aAAa,SAAS;AAAA,MAC1B,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,OAAO;AAAA,MACP,YAAY;AAAA,MACZ,mBAAmB;AAAA;AAGrB,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,QACE,SAAS,OAAO;AAEpB,UAAM,aAAa,SAAS,MAAM;AAChC,aAAO,WAAW,MAAM,SAAS,KAAK,aAAa,MAAM,WAAW;AAAA;AAGtE,UAAM,YAAY,SAAS,MAAM,CAAC,CAAC,MAAM,UAAU,GAAG,SAAS;AAE/D,UAAM,EAAE,SAAS,YAAY,OAAO,YAAY,sBAC9C,OAAO;AAET,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEA;AAAA,MACA,YAAY;AAAA,MACZ;AAAA,MAEA;AAAA;AAAA;AAAA;qBA9HC,OAAM;;;EAiDW,KAAK;AAAA;;;;;;;SAjDzBA,aASIC;AAAA,uBADY;AAAA,0CANO;AAAA;QAClB,uBAAe;AAAe,QAC9B,eAAQ;AAAA;;;UAGTC,gCAAiC,mBAAxB;AAAA;;;;;uBAKL;AAAA;OAGE;AAAA;;;QAEN,uBAAM;AAA2B,QACjC,OAAK;AAAA,QACJ;AAAA,QACA,aAAW,KAAE;AAAA,QACd,eAAS;AAAA,QACR;AAAA,QACA,cAAU,sCAAE,kBAAU;AAAA;sFAGzB,QAeoB;AAAA,qBAbTC,YAAO;AAAA;QACf,uBAAK,qBAAqB,iBAAU,KAC/B;AAAA;;+BAEN;AAAA,+CAQcC;mBANNJ,aAAKK,YAAO;AAAA,cAClB,KAAK,KAAC;AAAA,cACL,OAAO;AAAA,cACP,YAAU,KAAK;AAAA;;uBAEhBC,QAA+C;AAAA,4BAAtB,2BAAiB;AAAA;;;;;;;;YAZnC,eAAc,WAAK;AAAA;;qBAgBpBC,mBAAc,KAAK,SAAM;AAAA;;OAM5B;AAAA,mCACMN;AAAA;;;;;;;;"}
+{"version":3,"file":"transfer-panel.mjs","sources":["../../../../../../packages/components/transfer/src/transfer-panel.vue"],"sourcesContent":["<template>\n  <div :class=\"ns.b('panel')\">\n    <p :class=\"ns.be('panel', 'header')\">\n      <el-checkbox\n        v-model=\"allChecked\"\n        :indeterminate=\"isIndeterminate\"\n        @change=\"handleAllCheckedChange\"\n      >\n        {{ title }}\n        <span>{{ checkedSummary }}</span>\n      </el-checkbox>\n    </p>\n\n    <div :class=\"[ns.be('panel', 'body'), ns.is('with-footer', hasFooter)]\">\n      <el-input\n        v-if=\"filterable\"\n        v-model=\"query\"\n        :class=\"ns.be('panel', 'filter')\"\n        size=\"default\"\n        :placeholder=\"placeholder\"\n        :prefix-icon=\"SearchIcon\"\n        clearable\n        @mouseenter=\"inputHover = true\"\n        @mouseleave=\"inputHover = false\"\n      >\n      </el-input>\n      <el-checkbox-group\n        v-show=\"!hasNoMatch && data.length > 0\"\n        v-model=\"checked\"\n        :class=\"[ns.is('filterable', filterable), ns.be('panel', 'list')]\"\n      >\n        <el-checkbox\n          v-for=\"item in filteredData\"\n          :key=\"item[keyProp]\"\n          :class=\"ns.be('panel', 'item')\"\n          :label=\"item[keyProp]\"\n          :disabled=\"item[disabledProp]\"\n        >\n          <option-content :option=\"optionRender(item)\" />\n        </el-checkbox>\n      </el-checkbox-group>\n      <p\n        v-show=\"hasNoMatch || data.length === 0\"\n        :class=\"ns.be('panel', 'empty')\"\n      >\n        {{ hasNoMatch ? t('el.transfer.noMatch') : t('el.transfer.noData') }}\n      </p>\n    </div>\n    <p v-if=\"hasFooter\" :class=\"ns.be('panel', 'footer')\">\n      <slot></slot>\n    </p>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent, reactive, toRefs } from 'vue'\nimport { useLocale, useNamespace } from '@element-plus/hooks'\nimport { ElCheckbox, ElCheckboxGroup } from '@element-plus/components/checkbox'\nimport ElInput from '@element-plus/components/input'\nimport { Search } from '@element-plus/icons-vue'\nimport { useCheck, useCheckProps, CHECKED_CHANGE_EVENT } from './useCheck'\n\nexport default defineComponent({\n  name: 'ElTransferPanel',\n\n  components: {\n    ElCheckboxGroup,\n    ElCheckbox,\n    ElInput,\n    OptionContent: ({ option }) => option,\n  },\n\n  props: useCheckProps,\n\n  emits: [CHECKED_CHANGE_EVENT],\n\n  setup(props, { slots }) {\n    const { t } = useLocale()\n    const ns = useNamespace('transfer')\n\n    const panelState = reactive({\n      checked: [],\n      allChecked: false,\n      query: '',\n      inputHover: false,\n      checkChangeByUser: true,\n    })\n\n    const {\n      labelProp,\n      keyProp,\n      disabledProp,\n      filteredData,\n      checkedSummary,\n      isIndeterminate,\n      handleAllCheckedChange,\n    } = useCheck(props, panelState)\n\n    const hasNoMatch = computed(() => {\n      return panelState.query.length > 0 && filteredData.value.length === 0\n    })\n\n    const hasFooter = computed(() => !!slots.default()[0].children.length)\n\n    const { checked, allChecked, query, inputHover, checkChangeByUser } =\n      toRefs(panelState)\n\n    return {\n      ns,\n      labelProp,\n      keyProp,\n      disabledProp,\n      filteredData,\n      checkedSummary,\n      isIndeterminate,\n      handleAllCheckedChange,\n\n      checked,\n      allChecked,\n      query,\n      inputHover,\n      checkChangeByUser,\n\n      hasNoMatch,\n      SearchIcon: Search,\n      hasFooter,\n\n      t,\n    }\n  },\n})\n</script>\n"],"names":["_openBlock","_createTextVNode","_normalizeClass","_createVNode","_Fragment","_createBlock","_withCtx","_createElementVNode"],"mappings":";;;;;;;;;;AA8DA,MAAK,YAAa,gBAAa;AAAA,EAC7B,MAAM;AAAA,EAEN,YAAY;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe,CAAC,EAAE,aAAa;AAAA;AAAA,EAGjC,OAAO;AAAA,EAEP,OAAO,CAAC;AAAA,EAER,MAAM,OAAO,EAAE,SAAS;AACtB,UAAM,EAAE,MAAM;AACd,UAAM,KAAK,aAAa;AAExB,UAAM,aAAa,SAAS;AAAA,MAC1B,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,OAAO;AAAA,MACP,YAAY;AAAA,MACZ,mBAAmB;AAAA;AAGrB,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,QACE,SAAS,OAAO;AAEpB,UAAM,aAAa,SAAS,MAAM;AAChC,aAAO,WAAW,MAAM,SAAS,KAAK,aAAa,MAAM,WAAW;AAAA;AAGtE,UAAM,YAAY,SAAS,MAAM,CAAC,CAAC,MAAM,UAAU,GAAG,SAAS;AAE/D,UAAM,EAAE,SAAS,YAAY,OAAO,YAAY,sBAC9C,OAAO;AAET,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEA;AAAA,MACA,YAAY;AAAA,MACZ;AAAA,MAEA;AAAA;AAAA;AAAA;;;;;;SA9HOA,gCAAM;AAAA;KACf;AAAA,uBAAS,KAAE;AAAA;OACT;AAAA,0CACqB;AAAA;QAClB,uBAAe;AAAe,QAC9B,eAAQ;AAAA;;;UAGTC,gCAAiC,mBAAxB;AAAA;;;;OAIb;AAAA,uBAAW,OAAG;AAAA;OAEJ;AAAA;;;QAEL,uBAAO,OAAE;AAAG,QACb,OAAKC,eAAS;AAAA,QACb;AAAA,QACA,aAAW,KAAE;AAAA,QACd,eAAS;AAAA,QACR;AAAA,QACA,cAAU,sCAAE,kBAAU;AAAA;+FAGzB,QAcoB;AAAA,qBAZTC,YAAO;AAAA;QACf,uBAAK,OAAG,mBAAoB,iBAAU,UAAQ;AAAA;;+BAE/C;AAAA,+CAQcC;mBANNJ,aAAKK,YAAO;AAAA,cACjB,KAAK;AAAA,cACL,OAAOH,eAAK,KAAO;AAAA,cACnB,YAAU,KAAK;AAAA;;uBAEhBI,QAA+C;AAAA,4BAAtB,2BAAiB;AAAA;;;;;;;;YAXnC,eAAc,WAAK;AAAA;;qBAgBtBC,mBAAO;AAAA,8BAEV,WAAU,SAAI;AAAA,yBAHT,kBAAc,KAAK,2BAAM;AAAA;;OAM5B;AAAA;MAAY,KAAK;AAAA;OACxB;AAAA;;;;;;;;"}

package/es/components/transfer/src/transfer-panel.vue.d.ts

@@ -12,6 +12,17 @@ declare const _default: import("vue").DefineComponent<{
     defaultChecked: ArrayConstructor;
     props: ObjectConstructor;
 }, {
+    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;
+    };
     labelProp: import("vue").ComputedRef<any>;
     keyProp: import("vue").ComputedRef<any>;
     disabledProp: import("vue").ComputedRef<any>;

package/es/components/tree-v2/index.d.ts

@@ -23,6 +23,17 @@ export declare const ElTreeV2: import("element-plus/es/utils-v2").SFCWithInstall
     readonly perfMode: import("element-plus/es/utils-v2").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
 }, {
     t: import("../..").Translator;
+    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;
+    };
     flattenTree: import("vue").ComputedRef<import("./src/types").TreeNode[]>;
     itemSize: number;
     isNotEmpty: import("vue").ComputedRef<boolean>;

package/es/components/tree-v2/src/tree-node-content.mjs

@@ -1,15 +1,18 @@
 import { defineComponent, inject, h } from 'vue';
+import '../../../hooks/index.mjs';
 import { treeNodeContentProps, ROOT_TREE_INJECTION_KEY } from './virtual-tree.mjs';
+import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
 
 var ElNodeContent = defineComponent({
   name: "ElTreeNodeContent",
   props: treeNodeContentProps,
   setup(props) {
     const tree = inject(ROOT_TREE_INJECTION_KEY);
+    const ns = useNamespace("tree");
     return () => {
       const node = props.node;
       const { data } = node;
-      return (tree == null ? void 0 : tree.ctx.slots.default) ? tree.ctx.slots.default({ node, data }) : h("span", { class: "el-tree-node__label" }, [node == null ? void 0 : node.label]);
+      return (tree == null ? void 0 : tree.ctx.slots.default) ? tree.ctx.slots.default({ node, data }) : h("span", { class: ns.be("node", "label") }, [node == null ? void 0 : node.label]);
     };
   }
 });

package/es/components/tree-v2/src/tree-node-content.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"tree-node-content.mjs","sources":["../../../../../../packages/components/tree-v2/src/tree-node-content.ts"],"sourcesContent":["import { h, defineComponent, inject } from 'vue'\nimport { ROOT_TREE_INJECTION_KEY, treeNodeContentProps } from './virtual-tree'\n\nexport default defineComponent({\n  name: 'ElTreeNodeContent',\n  props: treeNodeContentProps,\n  setup(props) {\n    const tree = inject(ROOT_TREE_INJECTION_KEY)\n    return () => {\n      const node = props.node\n      const { data } = node!\n      return tree?.ctx.slots.default\n        ? tree.ctx.slots.default({ node, data })\n        : h('span', { class: 'el-tree-node__label' }, [node?.label])\n    }\n  },\n})\n"],"names":[],"mappings":";;;AAEA,oBAAe,eAAe,CAAC;AAC/B,EAAE,IAAI,EAAE,mBAAmB;AAC3B,EAAE,KAAK,EAAE,oBAAoB;AAC7B,EAAE,KAAK,CAAC,KAAK,EAAE;AACf,IAAI,MAAM,IAAI,GAAG,MAAM,CAAC,uBAAuB,CAAC,CAAC;AACjD,IAAI,OAAO,MAAM;AACjB,MAAM,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC;AAC9B,MAAM,MAAM,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC;AAC5B,MAAM,OAAO,CAAC,IAAI,IAAI,IAAI,GAAG,KAAK,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,OAAO,IAAI,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,qBAAqB,EAAE,EAAE,CAAC,IAAI,IAAI,IAAI,GAAG,KAAK,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;AAC3L,KAAK,CAAC;AACN,GAAG;AACH,CAAC,CAAC;;;;"}
+{"version":3,"file":"tree-node-content.mjs","sources":["../../../../../../packages/components/tree-v2/src/tree-node-content.ts"],"sourcesContent":["import { h, defineComponent, inject } from 'vue'\nimport { useNamespace } from '@element-plus/hooks'\nimport { ROOT_TREE_INJECTION_KEY, treeNodeContentProps } from './virtual-tree'\n\nexport default defineComponent({\n  name: 'ElTreeNodeContent',\n  props: treeNodeContentProps,\n  setup(props) {\n    const tree = inject(ROOT_TREE_INJECTION_KEY)\n    const ns = useNamespace('tree')\n    return () => {\n      const node = props.node\n      const { data } = node!\n      return tree?.ctx.slots.default\n        ? tree.ctx.slots.default({ node, data })\n        : h('span', { class: ns.be('node', 'label') }, [node?.label])\n    }\n  },\n})\n"],"names":[],"mappings":";;;;;AAGA,oBAAe,eAAe,CAAC;AAC/B,EAAE,IAAI,EAAE,mBAAmB;AAC3B,EAAE,KAAK,EAAE,oBAAoB;AAC7B,EAAE,KAAK,CAAC,KAAK,EAAE;AACf,IAAI,MAAM,IAAI,GAAG,MAAM,CAAC,uBAAuB,CAAC,CAAC;AACjD,IAAI,MAAM,EAAE,GAAG,YAAY,CAAC,MAAM,CAAC,CAAC;AACpC,IAAI,OAAO,MAAM;AACjB,MAAM,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC;AAC9B,MAAM,MAAM,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC;AAC5B,MAAM,OAAO,CAAC,IAAI,IAAI,IAAI,GAAG,KAAK,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,OAAO,IAAI,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,EAAE,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,EAAE,CAAC,IAAI,IAAI,IAAI,GAAG,KAAK,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;AAC5L,KAAK,CAAC;AACN,GAAG;AACH,CAAC,CAAC;;;;"}

package/es/components/tree-v2/src/tree-node.mjs

@@ -2,9 +2,11 @@ import { defineComponent, inject, computed, resolveComponent, openBlock, createE
 import { CaretRight } from '@element-plus/icons-vue';
 import { ElIcon } from '../../icon/index.mjs';
 import { ElCheckbox } from '../../checkbox/index.mjs';
+import '../../../hooks/index.mjs';
 import ElNodeContent from './tree-node-content.mjs';
 import { treeNodeProps, treeNodeEmits, ROOT_TREE_INJECTION_KEY, NODE_CONTEXTMENU } from './virtual-tree.mjs';
 import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
+import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
 
 const DEFAULT_ICON = "caret-right";
 const _sfc_main = defineComponent({
@@ -19,6 +21,7 @@ const _sfc_main = defineComponent({
   emits: treeNodeEmits,
   setup(props, { emit }) {
     const tree = inject(ROOT_TREE_INJECTION_KEY);
+    const ns = useNamespace("tree");
     const indent = computed(() => {
       var _a;
       return (_a = tree == null ? void 0 : tree.props.indent) != null ? _a : 16;
@@ -45,6 +48,7 @@ const _sfc_main = defineComponent({
       tree == null ? void 0 : tree.ctx.emit(NODE_CONTEXTMENU, event, (_d = props.node) == null ? void 0 : _d.data, props.node);
     };
     return {
+      ns,
       indent,
       icon,
       handleClick,
@@ -62,12 +66,13 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_el_node_content = resolveComponent("el-node-content");
   return openBlock(), createElementBlock("div", {
     ref: "node$",
-    class: normalizeClass(["el-tree-node", {
-      "is-expanded": _ctx.expanded,
-      "is-current": _ctx.current,
-      "is-focusable": !_ctx.disabled,
-      "is-checked": !_ctx.disabled && _ctx.checked
-    }]),
+    class: normalizeClass([
+      _ctx.ns.b("node"),
+      _ctx.ns.is("expanded", _ctx.expanded),
+      _ctx.ns.is("current", _ctx.current),
+      _ctx.ns.is("focusable", !_ctx.disabled),
+      _ctx.ns.is("checked", !_ctx.disabled && _ctx.checked)
+    ]),
     role: "treeitem",
     tabindex: "-1",
     "aria-expanded": _ctx.expanded,
@@ -78,18 +83,18 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     onContextmenu: _cache[2] || (_cache[2] = (...args) => _ctx.handleContextMenu && _ctx.handleContextMenu(...args))
   }, [
     createElementVNode("div", {
-      class: "el-tree-node__content",
+      class: normalizeClass(_ctx.ns.be("node", "content")),
       style: normalizeStyle({ paddingLeft: `${(_ctx.node.level - 1) * _ctx.indent}px` })
     }, [
       _ctx.icon ? (openBlock(), createBlock(_component_el_icon, {
         key: 0,
         class: normalizeClass([
+          _ctx.ns.is("leaf", !!((_b = _ctx.node) == null ? void 0 : _b.isLeaf)),
+          _ctx.ns.is("hidden", _ctx.hiddenExpandIcon),
           {
-            "is-leaf": (_b = _ctx.node) == null ? void 0 : _b.isLeaf,
-            "is-hidden": _ctx.hiddenExpandIcon,
             expanded: !((_c = _ctx.node) == null ? void 0 : _c.isLeaf) && _ctx.expanded
           },
-          "el-tree-node__expand-icon"
+          _ctx.ns.be("node", "expand-icon")
         ]),
         onClick: withModifiers(_ctx.handleExpandIconClick, ["stop"])
       }, {
@@ -108,7 +113,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         }, ["stop"]))
       }, null, 8, ["model-value", "indeterminate", "disabled", "onChange"])) : createCommentVNode("v-if", true),
       createVNode(_component_el_node_content, { node: _ctx.node }, null, 8, ["node"])
-    ], 4)
+    ], 6)
   ], 42, _hoisted_1);
 }
 var ElTreeNode = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);

package/es/components/tree-v2/src/tree-node.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"tree-node.mjs","sources":["../../../../../../packages/components/tree-v2/src/tree-node.vue"],"sourcesContent":["<template>\n  <div\n    ref=\"node$\"\n    class=\"el-tree-node\"\n    :class=\"{\n      'is-expanded': expanded,\n      'is-current': current,\n      'is-focusable': !disabled,\n      'is-checked': !disabled && checked,\n    }\"\n    role=\"treeitem\"\n    tabindex=\"-1\"\n    :aria-expanded=\"expanded\"\n    :aria-disabled=\"disabled\"\n    :aria-checked=\"checked\"\n    :data-key=\"node?.key\"\n    @click.stop=\"handleClick\"\n    @contextmenu=\"handleContextMenu\"\n  >\n    <div\n      class=\"el-tree-node__content\"\n      :style=\"{ paddingLeft: `${(node.level - 1) * indent}px` }\"\n    >\n      <el-icon\n        v-if=\"icon\"\n        :class=\"[\n          {\n            'is-leaf': node?.isLeaf,\n            'is-hidden': hiddenExpandIcon,\n            expanded: !node?.isLeaf && expanded,\n          },\n          'el-tree-node__expand-icon',\n        ]\"\n        @click.stop=\"handleExpandIconClick\"\n      >\n        <component :is=\"icon\" />\n      </el-icon>\n      <el-checkbox\n        v-if=\"showCheckbox\"\n        :model-value=\"checked\"\n        :indeterminate=\"indeterminate\"\n        :disabled=\"disabled\"\n        @change=\"handleCheckChange\"\n        @click.stop\n      />\n      <el-node-content :node=\"node\" />\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent, inject } from 'vue'\nimport { CaretRight } from '@element-plus/icons-vue'\nimport ElIcon from '@element-plus/components/icon'\nimport ElCheckbox from '@element-plus/components/checkbox'\nimport ElNodeContent from './tree-node-content'\nimport {\n  ROOT_TREE_INJECTION_KEY,\n  NODE_CONTEXTMENU,\n  treeNodeEmits,\n  treeNodeProps,\n} from './virtual-tree'\n\nconst DEFAULT_ICON = 'caret-right'\n\nexport default defineComponent({\n  name: 'ElTreeNode',\n  components: {\n    ElIcon,\n    CaretRight,\n    ElCheckbox,\n    ElNodeContent,\n  },\n  props: treeNodeProps,\n  emits: treeNodeEmits,\n  setup(props, { emit }) {\n    const tree = inject(ROOT_TREE_INJECTION_KEY)\n\n    const indent = computed(() => {\n      return tree?.props.indent ?? 16\n    })\n\n    const icon = computed(() => {\n      return tree?.props.icon ?? DEFAULT_ICON\n    })\n\n    const handleClick = (e: MouseEvent) => {\n      emit('click', props.node, e)\n    }\n    const handleExpandIconClick = () => {\n      emit('toggle', props.node)\n    }\n    const handleCheckChange = (value: boolean) => {\n      emit('check', props.node, value)\n    }\n    const handleContextMenu = (event: Event) => {\n      if (tree?.instance?.vnode?.props?.['onNodeContextmenu']) {\n        event.stopPropagation()\n        event.preventDefault()\n      }\n      tree?.ctx.emit(NODE_CONTEXTMENU, event, props.node?.data, props.node)\n    }\n\n    return {\n      indent,\n      icon,\n      handleClick,\n      handleExpandIconClick,\n      handleCheckChange,\n      handleContextMenu,\n    }\n  },\n})\n</script>\n"],"names":[],"mappings":";;;;;;;;AA+DA,MAAM,eAAe;AAErB,MAAK,YAAa,gBAAa;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA,EAEF,OAAO;AAAA,EACP,OAAO;AAAA,EACP,MAAM,OAAO,EAAE,QAAQ;AACrB,UAAM,OAAO,OAAO;AAEpB,UAAM,SAAS,SAAS,MAAM;AAC5B,aAAO;AAAsB;AAG/B;AACE,yBAAmB;AAAQ;AAG7B,+BAAuC;AACrC;AAA0B;AAE5B,UAAM,wBAAwB;AAC5B;AAAqB;AAEvB,UAAM,qBAAqB;AACzB;AAA0B;AAE5B,UAAM,oBAAoB;AACxB;AACE;AACA,cAAM;AAAA;AAER;AAAgE;AAGlE;AAAO,MACL;AAAA,MACA;AAAA;AACA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA;AAAA;;;;;;;AA3GS;AACN;AACkC;AAAsB;AAAgC;AAA+B;;;AAO5H;AACC,qBACe;AAAA;AACD,IACd,gBAAU;AAAI,IACd;AAAK,IACL;AAA8B;;AAE/B;AACQ,aACA;AAAA;;AAGE;aACA;AAAA;;;AAA8E;AAAyC;;;;;;;AAU7H;;;;AAGkB;;AACjB,QACA;AAAe;AACL;AACF,QACR;AAAK;;;AAEwB;;;;;;;;;;;;"}
+{"version":3,"file":"tree-node.mjs","sources":["../../../../../../packages/components/tree-v2/src/tree-node.vue"],"sourcesContent":["<template>\n  <div\n    ref=\"node$\"\n    :class=\"[\n      ns.b('node'),\n      ns.is('expanded', expanded),\n      ns.is('current', current),\n      ns.is('focusable', !disabled),\n      ns.is('checked', !disabled && checked),\n    ]\"\n    role=\"treeitem\"\n    tabindex=\"-1\"\n    :aria-expanded=\"expanded\"\n    :aria-disabled=\"disabled\"\n    :aria-checked=\"checked\"\n    :data-key=\"node?.key\"\n    @click.stop=\"handleClick\"\n    @contextmenu=\"handleContextMenu\"\n  >\n    <div\n      :class=\"ns.be('node', 'content')\"\n      :style=\"{ paddingLeft: `${(node.level - 1) * indent}px` }\"\n    >\n      <el-icon\n        v-if=\"icon\"\n        :class=\"[\n          ns.is('leaf', !!node?.isLeaf),\n          ns.is('hidden', hiddenExpandIcon),\n          {\n            expanded: !node?.isLeaf && expanded,\n          },\n          ns.be('node', 'expand-icon'),\n        ]\"\n        @click.stop=\"handleExpandIconClick\"\n      >\n        <component :is=\"icon\" />\n      </el-icon>\n      <el-checkbox\n        v-if=\"showCheckbox\"\n        :model-value=\"checked\"\n        :indeterminate=\"indeterminate\"\n        :disabled=\"disabled\"\n        @change=\"handleCheckChange\"\n        @click.stop\n      />\n      <el-node-content :node=\"node\" />\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent, inject } from 'vue'\nimport { CaretRight } from '@element-plus/icons-vue'\nimport ElIcon from '@element-plus/components/icon'\nimport ElCheckbox from '@element-plus/components/checkbox'\nimport { useNamespace } from '@element-plus/hooks'\nimport ElNodeContent from './tree-node-content'\nimport {\n  ROOT_TREE_INJECTION_KEY,\n  NODE_CONTEXTMENU,\n  treeNodeEmits,\n  treeNodeProps,\n} from './virtual-tree'\n\nconst DEFAULT_ICON = 'caret-right'\n\nexport default defineComponent({\n  name: 'ElTreeNode',\n  components: {\n    ElIcon,\n    CaretRight,\n    ElCheckbox,\n    ElNodeContent,\n  },\n  props: treeNodeProps,\n  emits: treeNodeEmits,\n  setup(props, { emit }) {\n    const tree = inject(ROOT_TREE_INJECTION_KEY)\n    const ns = useNamespace('tree')\n\n    const indent = computed(() => {\n      return tree?.props.indent ?? 16\n    })\n\n    const icon = computed(() => {\n      return tree?.props.icon ?? DEFAULT_ICON\n    })\n\n    const handleClick = (e: MouseEvent) => {\n      emit('click', props.node, e)\n    }\n    const handleExpandIconClick = () => {\n      emit('toggle', props.node)\n    }\n    const handleCheckChange = (value: boolean) => {\n      emit('check', props.node, value)\n    }\n    const handleContextMenu = (event: Event) => {\n      if (tree?.instance?.vnode?.props?.['onNodeContextmenu']) {\n        event.stopPropagation()\n        event.preventDefault()\n      }\n      tree?.ctx.emit(NODE_CONTEXTMENU, event, props.node?.data, props.node)\n    }\n\n    return {\n      ns,\n      indent,\n      icon,\n      handleClick,\n      handleExpandIconClick,\n      handleCheckChange,\n      handleContextMenu,\n    }\n  },\n})\n</script>\n"],"names":["_normalizeClass"],"mappings":";;;;;;;;;;AAgEA,MAAM,eAAe;AAErB,MAAK,YAAa,gBAAa;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA,EAEF,OAAO;AAAA,EACP,OAAO;AAAA,EACP,MAAM,OAAO,EAAE,QAAQ;AACrB,UAAM,OAAO,OAAO;AACpB,UAAM,KAAK,aAAa;AAExB,UAAM,SAAS,SAAS,MAAM;AAC5B,aAAO;AAAsB;AAG/B;AACE,yBAAmB;AAAQ;AAG7B,+BAAuC;AACrC;AAA0B;AAE5B,UAAM,wBAAwB;AAC5B;AAAqB;AAEvB,UAAM,qBAAqB;AACzB;AAA0B;AAE5B,UAAM,oBAAoB;AACxB;AACE;AACA,cAAM;AAAA;AAER;AAAgE;AAGlE;AAAO,MACL;AAAA,MACA;AAAA;AACA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA;AAAA;;;;;;;AA9GS;AACL;AAAc;AAAqB;AAA+C;AAAoC;AAAmC;;;AAQ/J;AACC;AACe;AACD,IACd,gBAAU;AAAI,IACd;AAAK,IACL;AAA8B;;AAE/B,+BACU;AAAA,aACF;AAAqB;;AAGnB;aACAA;AAAA,8BAA8B;AAAA;AAAyC;;;;;;;;;AAU7E;;;;AAGkB;;AACjB,QACA;AAAe;AACL;AACF,QACR;AAAK;;;AAEwB;;;;;;;;;;;;"}

package/es/components/tree-v2/src/tree-node.vue.d.ts

@@ -12,6 +12,17 @@ declare const _default: import("vue").DefineComponent<{
     readonly current: import("../../../utils-v2").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
     readonly hiddenExpandIcon: import("../../../utils-v2").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
 }, {
+    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;
+    };
     indent: import("vue").ComputedRef<number>;
     icon: import("vue").ComputedRef<string>;
     handleClick: (e: MouseEvent) => void;

package/es/components/tree-v2/src/tree.mjs

@@ -7,6 +7,7 @@ import { treeProps, treeEmits, ROOT_TREE_INJECTION_KEY } from './virtual-tree.mj
 import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
 import FixedSizeList from '../../virtual-list/src/components/fixed-size-list.mjs';
 import { useLocale } from '../../../hooks/use-locale/index.mjs';
+import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
 
 const _sfc_main = defineComponent({
   name: "ElTreeV2",
@@ -23,6 +24,7 @@ const _sfc_main = defineComponent({
       instance: getCurrentInstance()
     });
     const { t } = useLocale();
+    const ns = useNamespace("tree");
     const {
       flattenTree,
       isNotEmpty,
@@ -63,6 +65,7 @@ const _sfc_main = defineComponent({
     });
     return {
       t,
+      ns,
       flattenTree,
       itemSize: 26,
       isNotEmpty,
@@ -79,24 +82,17 @@ const _sfc_main = defineComponent({
     };
   }
 });
-const _hoisted_1 = {
-  key: 1,
-  class: "el-tree__empty-block"
-};
-const _hoisted_2 = { class: "el-tree__empty-text" };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   var _a;
   const _component_el_tree_node = resolveComponent("el-tree-node");
   const _component_fixed_size_list = resolveComponent("fixed-size-list");
   return openBlock(), createElementBlock("div", {
-    class: normalizeClass(["el-tree", {
-      "el-tree--highlight-current": _ctx.highlightCurrent
-    }]),
+    class: normalizeClass([_ctx.ns.b(), { [_ctx.ns.m("highlight-current")]: _ctx.highlightCurrent }]),
     role: "tree"
   }, [
     _ctx.isNotEmpty ? (openBlock(), createBlock(_component_fixed_size_list, {
       key: 0,
-      "class-name": "el-tree-virtual-list",
+      "class-name": _ctx.ns.b("virtual-list"),
       data: _ctx.flattenTree,
       total: _ctx.flattenTree.length,
       height: _ctx.height,
@@ -121,9 +117,14 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         }, null, 8, ["style", "node", "expanded", "show-checkbox", "checked", "indeterminate", "disabled", "current", "hidden-expand-icon", "onClick", "onToggle", "onCheck"]))
       ]),
       _: 1
-    }, 8, ["data", "total", "height", "item-size", "perf-mode"])) : (openBlock(), createElementBlock("div", _hoisted_1, [
-      createElementVNode("span", _hoisted_2, toDisplayString((_a = _ctx.emptyText) != null ? _a : _ctx.t("el.tree.emptyText")), 1)
-    ]))
+    }, 8, ["class-name", "data", "total", "height", "item-size", "perf-mode"])) : (openBlock(), createElementBlock("div", {
+      key: 1,
+      class: normalizeClass(_ctx.ns.e("empty-block"))
+    }, [
+      createElementVNode("span", {
+        class: normalizeClass(_ctx.ns.e("empty-text"))
+      }, toDisplayString((_a = _ctx.emptyText) != null ? _a : _ctx.t("el.tree.emptyText")), 3)
+    ], 2))
   ], 2);
 }
 var TreeV2 = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);

package/es/components/tree-v2/src/tree.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"tree.mjs","sources":["../../../../../../packages/components/tree-v2/src/tree.vue"],"sourcesContent":["<template>\n  <div\n    class=\"el-tree\"\n    :class=\"{\n      'el-tree--highlight-current': highlightCurrent,\n    }\"\n    role=\"tree\"\n  >\n    <fixed-size-list\n      v-if=\"isNotEmpty\"\n      class-name=\"el-tree-virtual-list\"\n      :data=\"flattenTree\"\n      :total=\"flattenTree.length\"\n      :height=\"height\"\n      :item-size=\"itemSize\"\n      :perf-mode=\"perfMode\"\n    >\n      <template #default=\"{ data, index, style }\">\n        <el-tree-node\n          :key=\"data[index].key\"\n          :style=\"style\"\n          :node=\"data[index]\"\n          :expanded=\"isExpanded(data[index])\"\n          :show-checkbox=\"showCheckbox\"\n          :checked=\"isChecked(data[index])\"\n          :indeterminate=\"isIndeterminate(data[index])\"\n          :disabled=\"isDisabled(data[index])\"\n          :current=\"isCurrent(data[index])\"\n          :hidden-expand-icon=\"isForceHiddenExpandIcon(data[index])\"\n          @click=\"handleNodeClick\"\n          @toggle=\"toggleExpand\"\n          @check=\"handleNodeCheck\"\n        ></el-tree-node>\n      </template>\n    </fixed-size-list>\n    <div v-else class=\"el-tree__empty-block\">\n      <span class=\"el-tree__empty-text\">{{\n        emptyText ?? t('el.tree.emptyText')\n      }}</span>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, getCurrentInstance, provide } from 'vue'\nimport { useLocale } from '@element-plus/hooks'\nimport { FixedSizeList } from '@element-plus/components/virtual-list'\nimport { useTree } from './composables/useTree'\nimport ElTreeNode from './tree-node.vue'\nimport { ROOT_TREE_INJECTION_KEY, treeEmits, treeProps } from './virtual-tree'\nimport type { TreeProps } from './types'\n\nexport default defineComponent({\n  name: 'ElTreeV2',\n  components: {\n    ElTreeNode,\n    FixedSizeList,\n  },\n  props: treeProps,\n  emits: treeEmits,\n  setup(props: TreeProps, ctx) {\n    provide(ROOT_TREE_INJECTION_KEY, {\n      ctx,\n      props,\n      instance: getCurrentInstance(),\n    })\n    const { t } = useLocale()\n    const {\n      flattenTree,\n      isNotEmpty,\n      toggleExpand,\n      isExpanded,\n      isIndeterminate,\n      isChecked,\n      isDisabled,\n      isCurrent,\n      isForceHiddenExpandIcon,\n      toggleCheckbox,\n      handleNodeClick,\n      handleNodeCheck,\n      // expose\n      getCurrentNode,\n      getCurrentKey,\n      setCurrentKey,\n      getCheckedKeys,\n      getCheckedNodes,\n      getHalfCheckedKeys,\n      getHalfCheckedNodes,\n      setChecked,\n      setCheckedKeys,\n      filter,\n      setData,\n    } = useTree(props, ctx.emit)\n\n    ctx.expose({\n      getCurrentNode,\n      getCurrentKey,\n      setCurrentKey,\n      getCheckedKeys,\n      getCheckedNodes,\n      getHalfCheckedKeys,\n      getHalfCheckedNodes,\n      setChecked,\n      setCheckedKeys,\n      filter,\n      setData,\n    })\n\n    return {\n      t,\n      flattenTree,\n      itemSize: 26,\n      isNotEmpty,\n      toggleExpand,\n      toggleCheckbox,\n      isExpanded,\n      isIndeterminate,\n      isChecked,\n      isDisabled,\n      isCurrent,\n      isForceHiddenExpandIcon,\n      handleNodeClick,\n      handleNodeCheck,\n    }\n  },\n})\n</script>\n"],"names":[],"mappings":";;;;;;;;;;AAoDA,MAAK,YAAa,gBAAa;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY;AAAA,IACV;AAAA,IACA;AAAA;AAAA,EAEF,OAAO;AAAA,EACP,OAAO;AAAA,EACP,MAAM,OAAkB,KAAK;AAC3B,YAAQ,yBAAyB;AAAA,MAC/B;AAAA,MACA;AAAA,MACA,UAAU;AAAA;AAEZ,UAAM,EAAE,MAAM;AACd,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,QACE,QAAQ,OAAO,IAAI;AAEvB,QAAI,OAAO;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAGF,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA;AAAA;;EAvFU,KAAK;AAAA;;;;;;;AAjCF;AAC+B;;;;AAMtC;;AACN,MACC;AAAM,MACN;AAAO,MACP;AAAc,MACd;AAAW,MACX,aAAW;AAAA;;AAED;AAeO,sBAbH;AAAU;AACf,UACL;AAAgB,UAChB;AAAU,UACV;AAAe,UACf;AAAS,UACT;AAAe,UACf,oCAA+B;AAAA,UAC/B;AAAwB,UACxB;AAAoB,UACpB;AAAsB,UACtB;AAAQ,UACR;AAAO;;;;UAId;AAGW;;;;;;;;;"}
+{"version":3,"file":"tree.mjs","sources":["../../../../../../packages/components/tree-v2/src/tree.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[ns.b(), { [ns.m('highlight-current')]: highlightCurrent }]\"\n    role=\"tree\"\n  >\n    <fixed-size-list\n      v-if=\"isNotEmpty\"\n      :class-name=\"ns.b('virtual-list')\"\n      :data=\"flattenTree\"\n      :total=\"flattenTree.length\"\n      :height=\"height\"\n      :item-size=\"itemSize\"\n      :perf-mode=\"perfMode\"\n    >\n      <template #default=\"{ data, index, style }\">\n        <el-tree-node\n          :key=\"data[index].key\"\n          :style=\"style\"\n          :node=\"data[index]\"\n          :expanded=\"isExpanded(data[index])\"\n          :show-checkbox=\"showCheckbox\"\n          :checked=\"isChecked(data[index])\"\n          :indeterminate=\"isIndeterminate(data[index])\"\n          :disabled=\"isDisabled(data[index])\"\n          :current=\"isCurrent(data[index])\"\n          :hidden-expand-icon=\"isForceHiddenExpandIcon(data[index])\"\n          @click=\"handleNodeClick\"\n          @toggle=\"toggleExpand\"\n          @check=\"handleNodeCheck\"\n        ></el-tree-node>\n      </template>\n    </fixed-size-list>\n    <div v-else :class=\"ns.e('empty-block')\">\n      <span :class=\"ns.e('empty-text')\">{{\n        emptyText ?? t('el.tree.emptyText')\n      }}</span>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, getCurrentInstance, provide } from 'vue'\nimport { useLocale, useNamespace } from '@element-plus/hooks'\nimport { FixedSizeList } from '@element-plus/components/virtual-list'\nimport { useTree } from './composables/useTree'\nimport ElTreeNode from './tree-node.vue'\nimport { ROOT_TREE_INJECTION_KEY, treeEmits, treeProps } from './virtual-tree'\nimport type { TreeProps } from './types'\n\nexport default defineComponent({\n  name: 'ElTreeV2',\n  components: {\n    ElTreeNode,\n    FixedSizeList,\n  },\n  props: treeProps,\n  emits: treeEmits,\n  setup(props: TreeProps, ctx) {\n    provide(ROOT_TREE_INJECTION_KEY, {\n      ctx,\n      props,\n      instance: getCurrentInstance(),\n    })\n    const { t } = useLocale()\n    const ns = useNamespace('tree')\n    const {\n      flattenTree,\n      isNotEmpty,\n      toggleExpand,\n      isExpanded,\n      isIndeterminate,\n      isChecked,\n      isDisabled,\n      isCurrent,\n      isForceHiddenExpandIcon,\n      toggleCheckbox,\n      handleNodeClick,\n      handleNodeCheck,\n      // expose\n      getCurrentNode,\n      getCurrentKey,\n      setCurrentKey,\n      getCheckedKeys,\n      getCheckedNodes,\n      getHalfCheckedKeys,\n      getHalfCheckedNodes,\n      setChecked,\n      setCheckedKeys,\n      filter,\n      setData,\n    } = useTree(props, ctx.emit)\n\n    ctx.expose({\n      getCurrentNode,\n      getCurrentKey,\n      setCurrentKey,\n      getCheckedKeys,\n      getCheckedNodes,\n      getHalfCheckedKeys,\n      getHalfCheckedNodes,\n      setChecked,\n      setCheckedKeys,\n      filter,\n      setData,\n    })\n\n    return {\n      t,\n      ns,\n      flattenTree,\n      itemSize: 26,\n      isNotEmpty,\n      toggleExpand,\n      toggleCheckbox,\n      isExpanded,\n      isIndeterminate,\n      isChecked,\n      isDisabled,\n      isCurrent,\n      isForceHiddenExpandIcon,\n      handleNodeClick,\n      handleNodeCheck,\n    }\n  },\n})\n</script>\n"],"names":[],"mappings":";;;;;;;;;;;AAiDA,MAAK,YAAa,gBAAa;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY;AAAA,IACV;AAAA,IACA;AAAA;AAAA,EAEF,OAAO;AAAA,EACP,OAAO;AAAA,EACP,MAAM,OAAkB,KAAK;AAC3B,YAAQ,yBAAyB;AAAA,MAC/B;AAAA,MACA;AAAA,MACA,UAAU;AAAA;AAEZ,UAAM,EAAE,MAAM;AACd,UAAM,KAAK,aAAa;AACxB,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,QACE,QAAQ,OAAO,IAAI;AAEvB,QAAI,OAAO;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAGF,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA;AAAA;;;;;AAvHoB;AACX;;AAGH;;AACL,MACA;AAAiB,MACjB;AAAO,MACP;AAAc,MACd;AAAW,MACX,aAAW;AAAA;;AAED;AAeO,sBAbH;AAAU;AACf,UACL;AAAgB,UAChB;AAAU,UACV;AAAe,UACf;AAAS,UACT;AAAe,UACf,oCAA+B;AAAA,UAC/B;AAAwB,UACxB;AAAoB,UACpB;AAAsB,UACtB;AAAQ,UACR;AAAO;;;;UAId;WAAkB;AAAA;;AAChB;AAAc;AACH;;;;;;;;;"}

package/es/components/tree-v2/src/tree.vue.d.ts

@@ -23,6 +23,17 @@ declare const _default: import("vue").DefineComponent<{
     readonly perfMode: import("../../../utils-v2").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
 }, {
     t: import("element-plus/es/hooks").Translator;
+    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;
+    };
     flattenTree: import("vue").ComputedRef<import("./types").TreeNode[]>;
     itemSize: number;
     isNotEmpty: import("vue").ComputedRef<boolean>;

package/es/components/upload/src/upload-dragger.mjs

@@ -1,5 +1,7 @@
 import { defineComponent, inject, ref, openBlock, createElementBlock, normalizeClass, withModifiers, renderSlot } from 'vue';
+import '../../../hooks/index.mjs';
 import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
+import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
 
 const _sfc_main = defineComponent({
   name: "ElUploadDrag",
@@ -12,6 +14,7 @@ const _sfc_main = defineComponent({
   emits: ["file"],
   setup(props, { emit }) {
     const uploader = inject("uploader", {});
+    const ns = useNamespace("upload");
     const dragover = ref(false);
     function onDrop(e) {
       var _a;
@@ -46,6 +49,7 @@ const _sfc_main = defineComponent({
         dragover.value = true;
     }
     return {
+      ns,
       dragover,
       onDrop,
       onDragover
@@ -54,10 +58,7 @@ const _sfc_main = defineComponent({
 });
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", {
-    class: normalizeClass({
-      "el-upload-dragger": true,
-      "is-dragover": _ctx.dragover
-    }),
+    class: normalizeClass([_ctx.ns.b("dragger"), _ctx.ns.is("dragover", _ctx.dragover)]),
     onDrop: _cache[0] || (_cache[0] = withModifiers((...args) => _ctx.onDrop && _ctx.onDrop(...args), ["prevent"])),
     onDragover: _cache[1] || (_cache[1] = withModifiers((...args) => _ctx.onDragover && _ctx.onDragover(...args), ["prevent"])),
     onDragleave: _cache[2] || (_cache[2] = withModifiers(($event) => _ctx.dragover = false, ["prevent"]))

package/es/components/upload/src/upload-dragger.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"upload-dragger.mjs","sources":["../../../../../../packages/components/upload/src/upload-dragger.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"{\n      'el-upload-dragger': true,\n      'is-dragover': dragover,\n    }\"\n    @drop.prevent=\"onDrop\"\n    @dragover.prevent=\"onDragover\"\n    @dragleave.prevent=\"dragover = false\"\n  >\n    <slot></slot>\n  </div>\n</template>\n<script lang=\"ts\">\nimport { defineComponent, ref, inject } from 'vue'\n\nimport type { ElUpload } from './upload.type'\n\nexport default defineComponent({\n  name: 'ElUploadDrag',\n  props: {\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n  },\n  emits: ['file'],\n  setup(props, { emit }) {\n    const uploader = inject('uploader', {} as ElUpload)\n    const dragover = ref(false)\n\n    function onDrop(e: DragEvent) {\n      if (props.disabled || !uploader) return\n      const accept = uploader.props?.accept || uploader.accept\n      dragover.value = false\n      if (!accept) {\n        emit('file', e.dataTransfer.files)\n        return\n      }\n      emit(\n        'file',\n        Array.from(e.dataTransfer.files).filter((file) => {\n          const { type, name } = file\n          const extension =\n            name.indexOf('.') > -1 ? `.${name.split('.').pop()}` : ''\n          const baseType = type.replace(/\\/.*$/, '')\n          return accept\n            .split(',')\n            .map((type) => type.trim())\n            .filter((type) => type)\n            .some((acceptedType) => {\n              if (acceptedType.startsWith('.')) {\n                return extension === acceptedType\n              }\n              if (/\\/\\*$/.test(acceptedType)) {\n                return baseType === acceptedType.replace(/\\/\\*$/, '')\n              }\n              if (/^[^/]+\\/[^/]+$/.test(acceptedType)) {\n                return type === acceptedType\n              }\n              return false\n            })\n        })\n      )\n    }\n\n    function onDragover() {\n      if (!props.disabled) dragover.value = true\n    }\n\n    return {\n      dragover,\n      onDrop,\n      onDragover,\n    }\n  },\n})\n</script>\n"],"names":[],"mappings":";;;AAkBA,MAAK,YAAa,gBAAa;AAAA,EAC7B,MAAM;AAAA,EACN,OAAO;AAAA,IACL,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA;AAAA;AAAA,EAGb,OAAO,CAAC;AAAA,EACR,MAAM,OAAO,EAAE,QAAQ;AACrB,UAAM,WAAW,OAAO,YAAY;AACpC,UAAM,WAAW,IAAI;AAErB,oBAAgB,GAAc;AAC5B,UAAI;AAA6B;AACjC;AACA,uBAAiB;AACjB;AACE;AACA;AAAA;AAEF;AAGI,+BAAuB;AACvB,cAAM,YACJ,KAAK;AACP,cAAM,gBAAgB,QAAQ,SAAS;AACvC,sBACG,eACI,CAAC;AAGJ,2BAAiB,WAAW;AAC1B;AAAqB;AAEvB;AACE;AAAkD;AAEpD;AACE;AAAgB;AAElB;AAAO;AAAA;AAAA;AAMjB;AACE;AAAqB,iBAAS,QAAQ;AAAA;AAGxC;AAAO;AACL,MACA;AAAA,MACA;AAAA;AAAA;AAAA;;SAvEI;AAAA;0BAA0D;AAAA;;;AAK7C,IAClB,iEAAmB;AAAQ;;AAE5B;;;;;;;;"}
+{"version":3,"file":"upload-dragger.mjs","sources":["../../../../../../packages/components/upload/src/upload-dragger.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[ns.b('dragger'), ns.is('dragover', dragover)]\"\n    @drop.prevent=\"onDrop\"\n    @dragover.prevent=\"onDragover\"\n    @dragleave.prevent=\"dragover = false\"\n  >\n    <slot></slot>\n  </div>\n</template>\n<script lang=\"ts\">\nimport { defineComponent, ref, inject } from 'vue'\nimport { useNamespace } from '@element-plus/hooks'\n\nimport type { ElUpload } from './upload.type'\n\nexport default defineComponent({\n  name: 'ElUploadDrag',\n  props: {\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n  },\n  emits: ['file'],\n  setup(props, { emit }) {\n    const uploader = inject('uploader', {} as ElUpload)\n    const ns = useNamespace('upload')\n    const dragover = ref(false)\n\n    function onDrop(e: DragEvent) {\n      if (props.disabled || !uploader) return\n      const accept = uploader.props?.accept || uploader.accept\n      dragover.value = false\n      if (!accept) {\n        emit('file', e.dataTransfer.files)\n        return\n      }\n      emit(\n        'file',\n        Array.from(e.dataTransfer.files).filter((file) => {\n          const { type, name } = file\n          const extension =\n            name.indexOf('.') > -1 ? `.${name.split('.').pop()}` : ''\n          const baseType = type.replace(/\\/.*$/, '')\n          return accept\n            .split(',')\n            .map((type) => type.trim())\n            .filter((type) => type)\n            .some((acceptedType) => {\n              if (acceptedType.startsWith('.')) {\n                return extension === acceptedType\n              }\n              if (/\\/\\*$/.test(acceptedType)) {\n                return baseType === acceptedType.replace(/\\/\\*$/, '')\n              }\n              if (/^[^/]+\\/[^/]+$/.test(acceptedType)) {\n                return type === acceptedType\n              }\n              return false\n            })\n        })\n      )\n    }\n\n    function onDragover() {\n      if (!props.disabled) dragover.value = true\n    }\n\n    return {\n      ns,\n      dragover,\n      onDrop,\n      onDragover,\n    }\n  },\n})\n</script>\n"],"names":[],"mappings":";;;;;AAgBA,MAAK,YAAa,gBAAa;AAAA,EAC7B,MAAM;AAAA,EACN,OAAO;AAAA,IACL,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA;AAAA;AAAA,EAGb,OAAO,CAAC;AAAA,EACR,MAAM,OAAO,EAAE,QAAQ;AACrB,UAAM,WAAW,OAAO,YAAY;AACpC,UAAM,KAAK,aAAa;AACxB,UAAM,WAAW,IAAI;AAErB,oBAAgB,GAAc;AAC5B,UAAI;AAA6B;AACjC;AACA,uBAAiB;AACjB;AACE;AACA;AAAA;AAEF;AAGI,+BAAuB;AACvB,cAAM,YACJ,KAAK;AACP,cAAM,gBAAgB,QAAQ,SAAS;AACvC,sBACG,eACI,CAAC;AAGJ,2BAAiB,WAAW;AAC1B;AAAqB;AAEvB;AACE;AAAkD;AAEpD;AACE;AAAgB;AAElB;AAAO;AAAA;AAAA;AAMjB;AACE;AAAqB,iBAAS,QAAQ;AAAA;AAGxC;AAAO;AACL,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA;AAAA;;SAvEI,kCAAO;AAAa;AACX,IACd,kEAAkB;AAAA,IAClB,iEAAmB;AAAQ;;AAE5B;;;;;;;;"}

package/es/components/upload/src/upload-dragger.vue.d.ts

@@ -4,6 +4,17 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
     };
 }, {
+    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;
+    };
     dragover: import("vue").Ref<boolean>;
     onDrop: (e: DragEvent) => void;
     onDragover: () => void;