element-plus 1.2.0-beta.5 → 1.2.0-beta.6

package/lib/components/transfer/index.d.ts

@@ -87,11 +87,11 @@ declare const _Transfer: SFCWithInstall<import("vue").DefineComponent<{
     props?: unknown;
     targetOrder?: unknown;
 } & {
-    titles: [string, string];
-    filterPlaceholder: string;
     modelValue: import("./src/transfer").Key[];
     props: import("./src/transfer").Props;
     data: import("./src/transfer").DataItem[];
+    titles: [string, string];
+    filterPlaceholder: string;
     filterable: boolean;
     format: import("./src/transfer").Format;
     buttonTexts: [string, string];
@@ -109,11 +109,11 @@ declare const _Transfer: SFCWithInstall<import("vue").DefineComponent<{
     "onLeft-check-change"?: ((...args: any[]) => any) | undefined;
     "onRight-check-change"?: ((...args: any[]) => any) | undefined;
 }, {
-    titles: [string, string];
-    filterPlaceholder: string;
     modelValue: import("./src/transfer").Key[];
     props: import("./src/transfer").Props;
     data: import("./src/transfer").DataItem[];
+    titles: [string, string];
+    filterPlaceholder: string;
     filterable: boolean;
     format: import("./src/transfer").Format;
     buttonTexts: [string, string];
@@ -210,11 +210,11 @@ export declare const ElTransfer: SFCWithInstall<import("vue").DefineComponent<{
     props?: unknown;
     targetOrder?: unknown;
 } & {
-    titles: [string, string];
-    filterPlaceholder: string;
     modelValue: import("./src/transfer").Key[];
     props: import("./src/transfer").Props;
     data: import("./src/transfer").DataItem[];
+    titles: [string, string];
+    filterPlaceholder: string;
     filterable: boolean;
     format: import("./src/transfer").Format;
     buttonTexts: [string, string];
@@ -232,11 +232,11 @@ export declare const ElTransfer: SFCWithInstall<import("vue").DefineComponent<{
     "onLeft-check-change"?: ((...args: any[]) => any) | undefined;
     "onRight-check-change"?: ((...args: any[]) => any) | undefined;
 }, {
-    titles: [string, string];
-    filterPlaceholder: string;
     modelValue: import("./src/transfer").Key[];
     props: import("./src/transfer").Props;
     data: import("./src/transfer").DataItem[];
+    titles: [string, string];
+    filterPlaceholder: string;
     filterable: boolean;
     format: import("./src/transfer").Format;
     buttonTexts: [string, string];

package/lib/components/transfer/src/index.vue.d.ts

@@ -86,11 +86,11 @@ declare const _default: import("vue").DefineComponent<{
     props?: unknown;
     targetOrder?: unknown;
 } & {
-    titles: [string, string];
-    filterPlaceholder: string;
     modelValue: Key[];
     props: Props;
     data: DataItem[];
+    titles: [string, string];
+    filterPlaceholder: string;
     filterable: boolean;
     format: Format;
     buttonTexts: [string, string];
@@ -106,11 +106,11 @@ declare const _default: import("vue").DefineComponent<{
     "onLeft-check-change"?: ((...args: any[]) => any) | undefined;
     "onRight-check-change"?: ((...args: any[]) => any) | undefined;
 }, {
-    titles: [string, string];
-    filterPlaceholder: string;
     modelValue: Key[];
     props: Props;
     data: DataItem[];
+    titles: [string, string];
+    filterPlaceholder: string;
     filterable: boolean;
     format: Format;
     buttonTexts: [string, string];

package/lib/components/transfer/src/index.vue_vue_type_script_lang.js

@@ -8,7 +8,7 @@ var index$1 = require('../../icon/index.js');
 require('../../../tokens/index.js');
 require('../../../hooks/index.js');
 var constants = require('../../../utils/constants.js');
-var icons = require('@element-plus/icons');
+var iconsVue = require('@element-plus/icons-vue');
 require('./transfer-panel.js');
 var useComputedData = require('./useComputedData.js');
 var useCheckedChange = require('./useCheckedChange.js');
@@ -24,8 +24,8 @@ var script = vue.defineComponent({
     TransferPanel: transferPanel_vue_vue_type_script_lang["default"],
     ElButton: index.ElButton,
     ElIcon: index$1.ElIcon,
-    ArrowLeft: icons.ArrowLeft,
-    ArrowRight: icons.ArrowRight
+    ArrowLeft: iconsVue.ArrowLeft,
+    ArrowRight: iconsVue.ArrowRight
   },
   props: {
     data: {

package/lib/components/transfer/src/index.vue_vue_type_script_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.vue_vue_type_script_lang.js","sources":["../../../../../../packages/components/transfer/src/index.vue"],"sourcesContent":["<template>\n  <div class=\"el-transfer\">\n    <transfer-panel\n      ref=\"leftPanel\"\n      :data=\"sourceData\"\n      :option-render=\"optionRender\"\n      :placeholder=\"panelFilterPlaceholder\"\n      :title=\"leftPanelTitle\"\n      :filterable=\"filterable\"\n      :format=\"format\"\n      :filter-method=\"filterMethod\"\n      :default-checked=\"leftDefaultChecked\"\n      :props=\"props\"\n      @checked-change=\"onSourceCheckedChange\"\n    >\n      <slot name=\"left-footer\"></slot>\n    </transfer-panel>\n    <div class=\"el-transfer__buttons\">\n      <el-button\n        type=\"primary\"\n        :class=\"['el-transfer__button', hasButtonTexts ? 'is-with-texts' : '']\"\n        :disabled=\"rightChecked.length === 0\"\n        @click=\"addToLeft\"\n      >\n        <el-icon><arrow-left /></el-icon>\n        <span v-if=\"buttonTexts[0] !== undefined\">{{ buttonTexts[0] }}</span>\n      </el-button>\n      <el-button\n        type=\"primary\"\n        :class=\"['el-transfer__button', hasButtonTexts ? 'is-with-texts' : '']\"\n        :disabled=\"leftChecked.length === 0\"\n        @click=\"addToRight\"\n      >\n        <span v-if=\"buttonTexts[1] !== undefined\">{{ buttonTexts[1] }}</span>\n        <el-icon><arrow-right /></el-icon>\n      </el-button>\n    </div>\n    <transfer-panel\n      ref=\"rightPanel\"\n      :data=\"targetData\"\n      :option-render=\"optionRender\"\n      :placeholder=\"panelFilterPlaceholder\"\n      :filterable=\"filterable\"\n      :format=\"format\"\n      :filter-method=\"filterMethod\"\n      :title=\"rightPanelTitle\"\n      :default-checked=\"rightDefaultChecked\"\n      :props=\"props\"\n      @checked-change=\"onTargetCheckedChange\"\n    >\n      <slot name=\"right-footer\"></slot>\n    </transfer-panel>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  inject,\n  h,\n  reactive,\n  ref,\n  toRefs,\n  watch,\n} from 'vue'\nimport ElButton from '@element-plus/components/button'\nimport ElIcon from '@element-plus/components/icon'\nimport { elFormItemKey } from '@element-plus/tokens'\nimport { useLocale } from '@element-plus/hooks'\nimport { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'\nimport { ArrowLeft, ArrowRight } from '@element-plus/icons'\nimport TransferPanel from './transfer-panel.vue'\nimport { useComputedData } from './useComputedData'\nimport {\n  useCheckedChange,\n  LEFT_CHECK_CHANGE_EVENT,\n  RIGHT_CHECK_CHANGE_EVENT,\n} from './useCheckedChange'\nimport { useMove } from './useMove'\nimport { CHANGE_EVENT } from './transfer'\n\nimport type { PropType, VNode } from 'vue'\nimport type { ElFormItemContext } from '@element-plus/tokens'\nimport type { DataItem, Format, Key, Props, TargetOrder } from './transfer'\n\nexport default defineComponent({\n  name: 'ElTransfer',\n\n  components: {\n    TransferPanel,\n    ElButton,\n    ElIcon,\n    ArrowLeft,\n    ArrowRight,\n  },\n\n  props: {\n    data: {\n      type: Array as PropType<DataItem[]>,\n      default: () => [],\n    },\n    titles: {\n      type: Array as PropType<any> as PropType<[string, string]>,\n      default: () => [],\n    },\n    buttonTexts: {\n      type: Array as PropType<any> as PropType<[string, string]>,\n      default: () => [],\n    },\n    filterPlaceholder: {\n      type: String,\n      default: '',\n    },\n    filterMethod: Function as PropType<\n      (query: string, item: DataItem) => boolean\n    >,\n    leftDefaultChecked: {\n      type: Array as PropType<Key[]>,\n      default: () => [],\n    },\n    rightDefaultChecked: {\n      type: Array as PropType<Key[]>,\n      default: () => [],\n    },\n    renderContent: Function as PropType<(h, option) => VNode>,\n    modelValue: {\n      type: Array as PropType<Key[]>,\n      default: () => [],\n    },\n    format: {\n      type: Object as PropType<Format>,\n      default: () => ({}),\n    },\n    filterable: {\n      type: Boolean,\n      default: false,\n    },\n    props: {\n      type: Object as PropType<Props>,\n      default: () => ({\n        label: 'label',\n        key: 'key',\n        disabled: 'disabled',\n      }),\n    },\n    targetOrder: {\n      type: String as PropType<TargetOrder>,\n      default: 'original',\n      validator: (val: string) => {\n        return ['original', 'push', 'unshift'].includes(val)\n      },\n    },\n  },\n\n  emits: [\n    UPDATE_MODEL_EVENT,\n    CHANGE_EVENT,\n    LEFT_CHECK_CHANGE_EVENT,\n    RIGHT_CHECK_CHANGE_EVENT,\n  ],\n\n  setup(props, { emit, slots }) {\n    const { t } = useLocale()\n    const elFormItem = inject(elFormItemKey, {} as ElFormItemContext)\n\n    const checkedState = reactive({\n      leftChecked: [],\n      rightChecked: [],\n    })\n\n    const { propsKey, sourceData, targetData } = useComputedData(props)\n\n    const { onSourceCheckedChange, onTargetCheckedChange } = useCheckedChange(\n      checkedState,\n      emit\n    )\n\n    const { addToLeft, addToRight } = useMove(\n      props,\n      checkedState,\n      propsKey,\n      emit\n    )\n\n    const leftPanel = ref(null)\n    const rightPanel = ref(null)\n\n    const clearQuery = (which: 'left' | 'right') => {\n      if (which === 'left') {\n        leftPanel.value.query = ''\n      } else if (which === 'right') {\n        rightPanel.value.query = ''\n      }\n    }\n\n    const hasButtonTexts = computed(() => props.buttonTexts.length === 2)\n\n    const leftPanelTitle = computed(\n      () => props.titles[0] || t('el.transfer.titles.0')\n    )\n\n    const rightPanelTitle = computed(\n      () => props.titles[1] || t('el.transfer.titles.1')\n    )\n\n    const panelFilterPlaceholder = computed(\n      () => props.filterPlaceholder || t('el.transfer.filterPlaceholder')\n    )\n\n    watch(\n      () => props.modelValue,\n      () => {\n        elFormItem.validate?.('change')\n      }\n    )\n\n    const optionRender = computed(() => (option) => {\n      if (props.renderContent) return props.renderContent(h, option)\n\n      if (slots.default) return slots.default({ option })\n\n      return h('span', option[props.props.label] || option[props.props.key])\n    })\n\n    return {\n      sourceData,\n      targetData,\n      onSourceCheckedChange,\n      onTargetCheckedChange,\n      addToLeft,\n      addToRight,\n\n      ...toRefs(checkedState),\n\n      hasButtonTexts,\n      leftPanelTitle,\n      rightPanelTitle,\n      panelFilterPlaceholder,\n      clearQuery,\n\n      optionRender,\n    }\n  },\n})\n</script>\n"],"names":["defineComponent","TransferPanel","ElButton","ElIcon","ArrowLeft","ArrowRight","UPDATE_MODEL_EVENT","CHANGE_EVENT","LEFT_CHECK_CHANGE_EVENT","RIGHT_CHECK_CHANGE_EVENT","useLocale","inject","elFormItemKey","reactive","useComputedData","useCheckedChange","useMove","ref","computed","h","toRefs"],"mappings":";;;;;;;;;;;;;;;;;;;;AAsFA,aAAeA,oBAAgB;AAAA,EAC7B,MAAM;AAAA,EAEN,YAAY;AAAA,mBACVC;AAAA,cACAC;AAAA,YACAC;AAAA,eACAC;AAAA,gBACAC;AAAA;AAAA,EAGF,OAAO;AAAA,IACL,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS,MAAM;AAAA;AAAA,IAEjB,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,SAAS,MAAM;AAAA;AAAA,IAEjB,aAAa;AAAA,MACX,MAAM;AAAA,MACN,SAAS,MAAM;AAAA;AAAA,IAEjB,mBAAmB;AAAA,MACjB,MAAM;AAAA,MACN,SAAS;AAAA;AAAA,IAEX,cAAc;AAAA,IAGd,oBAAoB;AAAA,MAClB,MAAM;AAAA,MACN,SAAS,MAAM;AAAA;AAAA,IAEjB,qBAAqB;AAAA,MACnB,MAAM;AAAA,MACN,SAAS,MAAM;AAAA;AAAA,IAEjB,eAAe;AAAA,IACf,YAAY;AAAA,MACV,MAAM;AAAA,MACN,SAAS,MAAM;AAAA;AAAA,IAEjB,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,SAAS;AAAO;AAAA,IAElB,YAAY;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA;AAAA,IAEX,OAAO;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAO,QACd,OAAO;AAAA,QACP,KAAK;AAAA,QACL,UAAU;AAAA;AAAA;AAAA,IAGd,aAAa;AAAA,MACX,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW,CAAC,QAAgB;AAC1B,eAAO,CAAC,YAAY,QAAQ,WAAW,SAAS;AAAA;AAAA;AAAA;AAAA,EAKtD,OAAO;AAAA,IACLC;AAAA,IACAC;AAAA,IACAC;AAAA,IACAC;AAAA;AAAA,EAGF,MAAM,OAAO,EAAE,MAAM,SAAS;AAC5B,UAAM,EAAE,MAAMC;AACd,UAAM,aAAaC,WAAOC,oBAAe;AAEzC,UAAM,eAAeC,aAAS;AAAA,MAC5B,aAAa;AAAA,MACb,cAAc;AAAA;AAGhB,UAAM,EAAE,UAAU,YAAY,eAAeC,gCAAgB;AAE7D,UAAM,EAAE,uBAAuB,0BAA0BC,kCACvD,cACA;AAGF,UAAM,EAAE,WAAW,eAAeC,gBAChC,OACA,cACA,UACA;AAGF,UAAM,YAAYC,QAAI;AACtB,UAAM,aAAaA,QAAI;AAEvB,UAAM,aAAa,CAAC,UAA4B;AAC9C,UAAI,UAAU,QAAQ;AACpB,kBAAU,MAAM,QAAQ;AAAA,iBACf,UAAU,SAAS;AAC5B,mBAAW,MAAM,QAAQ;AAAA;AAAA;AAI7B,UAAM,iBAAiBC,aAAS,MAAM,MAAM,YAAY,WAAW;AAEnE,UAAM,iBAAiBA,aACrB,MAAM,MAAM,OAAO,MAAM,EAAE;AAG7B,UAAM,kBAAkBA,aACtB,MAAM,MAAM,OAAO,MAAM,EAAE;AAG7B,UAAM,yBAAyBA,aAC7B,MAAM,MAAM,qBAAqB,EAAE;AAGrC,cACE,MAAM,MAAM,YACZ,MAAM;;AACJ,uBAAW,aAAX,oCAAsB;AAAA;AAI1B,UAAM,eAAeA,aAAS,MAAM,CAAC,WAAW;AAC9C,UAAI,MAAM;AAAe,eAAO,MAAM,cAAcC,OAAG;AAEvD,UAAI,MAAM;AAAS,eAAO,MAAM,QAAQ,EAAE;AAE1C,aAAOA,MAAE,QAAQ,OAAO,MAAM,MAAM,UAAU,OAAO,MAAM,MAAM;AAAA;AAGnE,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,SAEGC,WAAO;AAAA,MAEV;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEA;AAAA;AAAA;AAAA;;;;"}
+{"version":3,"file":"index.vue_vue_type_script_lang.js","sources":["../../../../../../packages/components/transfer/src/index.vue"],"sourcesContent":["<template>\n  <div class=\"el-transfer\">\n    <transfer-panel\n      ref=\"leftPanel\"\n      :data=\"sourceData\"\n      :option-render=\"optionRender\"\n      :placeholder=\"panelFilterPlaceholder\"\n      :title=\"leftPanelTitle\"\n      :filterable=\"filterable\"\n      :format=\"format\"\n      :filter-method=\"filterMethod\"\n      :default-checked=\"leftDefaultChecked\"\n      :props=\"props\"\n      @checked-change=\"onSourceCheckedChange\"\n    >\n      <slot name=\"left-footer\"></slot>\n    </transfer-panel>\n    <div class=\"el-transfer__buttons\">\n      <el-button\n        type=\"primary\"\n        :class=\"['el-transfer__button', hasButtonTexts ? 'is-with-texts' : '']\"\n        :disabled=\"rightChecked.length === 0\"\n        @click=\"addToLeft\"\n      >\n        <el-icon><arrow-left /></el-icon>\n        <span v-if=\"buttonTexts[0] !== undefined\">{{ buttonTexts[0] }}</span>\n      </el-button>\n      <el-button\n        type=\"primary\"\n        :class=\"['el-transfer__button', hasButtonTexts ? 'is-with-texts' : '']\"\n        :disabled=\"leftChecked.length === 0\"\n        @click=\"addToRight\"\n      >\n        <span v-if=\"buttonTexts[1] !== undefined\">{{ buttonTexts[1] }}</span>\n        <el-icon><arrow-right /></el-icon>\n      </el-button>\n    </div>\n    <transfer-panel\n      ref=\"rightPanel\"\n      :data=\"targetData\"\n      :option-render=\"optionRender\"\n      :placeholder=\"panelFilterPlaceholder\"\n      :filterable=\"filterable\"\n      :format=\"format\"\n      :filter-method=\"filterMethod\"\n      :title=\"rightPanelTitle\"\n      :default-checked=\"rightDefaultChecked\"\n      :props=\"props\"\n      @checked-change=\"onTargetCheckedChange\"\n    >\n      <slot name=\"right-footer\"></slot>\n    </transfer-panel>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  inject,\n  h,\n  reactive,\n  ref,\n  toRefs,\n  watch,\n} from 'vue'\nimport ElButton from '@element-plus/components/button'\nimport ElIcon from '@element-plus/components/icon'\nimport { elFormItemKey } from '@element-plus/tokens'\nimport { useLocale } from '@element-plus/hooks'\nimport { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'\nimport { ArrowLeft, ArrowRight } from '@element-plus/icons-vue'\nimport TransferPanel from './transfer-panel.vue'\nimport { useComputedData } from './useComputedData'\nimport {\n  useCheckedChange,\n  LEFT_CHECK_CHANGE_EVENT,\n  RIGHT_CHECK_CHANGE_EVENT,\n} from './useCheckedChange'\nimport { useMove } from './useMove'\nimport { CHANGE_EVENT } from './transfer'\n\nimport type { PropType, VNode } from 'vue'\nimport type { ElFormItemContext } from '@element-plus/tokens'\nimport type { DataItem, Format, Key, Props, TargetOrder } from './transfer'\n\nexport default defineComponent({\n  name: 'ElTransfer',\n\n  components: {\n    TransferPanel,\n    ElButton,\n    ElIcon,\n    ArrowLeft,\n    ArrowRight,\n  },\n\n  props: {\n    data: {\n      type: Array as PropType<DataItem[]>,\n      default: () => [],\n    },\n    titles: {\n      type: Array as PropType<any> as PropType<[string, string]>,\n      default: () => [],\n    },\n    buttonTexts: {\n      type: Array as PropType<any> as PropType<[string, string]>,\n      default: () => [],\n    },\n    filterPlaceholder: {\n      type: String,\n      default: '',\n    },\n    filterMethod: Function as PropType<\n      (query: string, item: DataItem) => boolean\n    >,\n    leftDefaultChecked: {\n      type: Array as PropType<Key[]>,\n      default: () => [],\n    },\n    rightDefaultChecked: {\n      type: Array as PropType<Key[]>,\n      default: () => [],\n    },\n    renderContent: Function as PropType<(h, option) => VNode>,\n    modelValue: {\n      type: Array as PropType<Key[]>,\n      default: () => [],\n    },\n    format: {\n      type: Object as PropType<Format>,\n      default: () => ({}),\n    },\n    filterable: {\n      type: Boolean,\n      default: false,\n    },\n    props: {\n      type: Object as PropType<Props>,\n      default: () => ({\n        label: 'label',\n        key: 'key',\n        disabled: 'disabled',\n      }),\n    },\n    targetOrder: {\n      type: String as PropType<TargetOrder>,\n      default: 'original',\n      validator: (val: string) => {\n        return ['original', 'push', 'unshift'].includes(val)\n      },\n    },\n  },\n\n  emits: [\n    UPDATE_MODEL_EVENT,\n    CHANGE_EVENT,\n    LEFT_CHECK_CHANGE_EVENT,\n    RIGHT_CHECK_CHANGE_EVENT,\n  ],\n\n  setup(props, { emit, slots }) {\n    const { t } = useLocale()\n    const elFormItem = inject(elFormItemKey, {} as ElFormItemContext)\n\n    const checkedState = reactive({\n      leftChecked: [],\n      rightChecked: [],\n    })\n\n    const { propsKey, sourceData, targetData } = useComputedData(props)\n\n    const { onSourceCheckedChange, onTargetCheckedChange } = useCheckedChange(\n      checkedState,\n      emit\n    )\n\n    const { addToLeft, addToRight } = useMove(\n      props,\n      checkedState,\n      propsKey,\n      emit\n    )\n\n    const leftPanel = ref(null)\n    const rightPanel = ref(null)\n\n    const clearQuery = (which: 'left' | 'right') => {\n      if (which === 'left') {\n        leftPanel.value.query = ''\n      } else if (which === 'right') {\n        rightPanel.value.query = ''\n      }\n    }\n\n    const hasButtonTexts = computed(() => props.buttonTexts.length === 2)\n\n    const leftPanelTitle = computed(\n      () => props.titles[0] || t('el.transfer.titles.0')\n    )\n\n    const rightPanelTitle = computed(\n      () => props.titles[1] || t('el.transfer.titles.1')\n    )\n\n    const panelFilterPlaceholder = computed(\n      () => props.filterPlaceholder || t('el.transfer.filterPlaceholder')\n    )\n\n    watch(\n      () => props.modelValue,\n      () => {\n        elFormItem.validate?.('change')\n      }\n    )\n\n    const optionRender = computed(() => (option) => {\n      if (props.renderContent) return props.renderContent(h, option)\n\n      if (slots.default) return slots.default({ option })\n\n      return h('span', option[props.props.label] || option[props.props.key])\n    })\n\n    return {\n      sourceData,\n      targetData,\n      onSourceCheckedChange,\n      onTargetCheckedChange,\n      addToLeft,\n      addToRight,\n\n      ...toRefs(checkedState),\n\n      hasButtonTexts,\n      leftPanelTitle,\n      rightPanelTitle,\n      panelFilterPlaceholder,\n      clearQuery,\n\n      optionRender,\n    }\n  },\n})\n</script>\n"],"names":["defineComponent","TransferPanel","ElButton","ElIcon","ArrowLeft","ArrowRight","UPDATE_MODEL_EVENT","CHANGE_EVENT","LEFT_CHECK_CHANGE_EVENT","RIGHT_CHECK_CHANGE_EVENT","useLocale","inject","elFormItemKey","reactive","useComputedData","useCheckedChange","useMove","ref","computed","h","toRefs"],"mappings":";;;;;;;;;;;;;;;;;;;;AAsFA,aAAeA,oBAAgB;AAAA,EAC7B,MAAM;AAAA,EAEN,YAAY;AAAA,mBACVC;AAAA,cACAC;AAAA,YACAC;AAAA,eACAC;AAAA,gBACAC;AAAA;AAAA,EAGF,OAAO;AAAA,IACL,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS,MAAM;AAAA;AAAA,IAEjB,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,SAAS,MAAM;AAAA;AAAA,IAEjB,aAAa;AAAA,MACX,MAAM;AAAA,MACN,SAAS,MAAM;AAAA;AAAA,IAEjB,mBAAmB;AAAA,MACjB,MAAM;AAAA,MACN,SAAS;AAAA;AAAA,IAEX,cAAc;AAAA,IAGd,oBAAoB;AAAA,MAClB,MAAM;AAAA,MACN,SAAS,MAAM;AAAA;AAAA,IAEjB,qBAAqB;AAAA,MACnB,MAAM;AAAA,MACN,SAAS,MAAM;AAAA;AAAA,IAEjB,eAAe;AAAA,IACf,YAAY;AAAA,MACV,MAAM;AAAA,MACN,SAAS,MAAM;AAAA;AAAA,IAEjB,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,SAAS;AAAO;AAAA,IAElB,YAAY;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA;AAAA,IAEX,OAAO;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAO,QACd,OAAO;AAAA,QACP,KAAK;AAAA,QACL,UAAU;AAAA;AAAA;AAAA,IAGd,aAAa;AAAA,MACX,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW,CAAC,QAAgB;AAC1B,eAAO,CAAC,YAAY,QAAQ,WAAW,SAAS;AAAA;AAAA;AAAA;AAAA,EAKtD,OAAO;AAAA,IACLC;AAAA,IACAC;AAAA,IACAC;AAAA,IACAC;AAAA;AAAA,EAGF,MAAM,OAAO,EAAE,MAAM,SAAS;AAC5B,UAAM,EAAE,MAAMC;AACd,UAAM,aAAaC,WAAOC,oBAAe;AAEzC,UAAM,eAAeC,aAAS;AAAA,MAC5B,aAAa;AAAA,MACb,cAAc;AAAA;AAGhB,UAAM,EAAE,UAAU,YAAY,eAAeC,gCAAgB;AAE7D,UAAM,EAAE,uBAAuB,0BAA0BC,kCACvD,cACA;AAGF,UAAM,EAAE,WAAW,eAAeC,gBAChC,OACA,cACA,UACA;AAGF,UAAM,YAAYC,QAAI;AACtB,UAAM,aAAaA,QAAI;AAEvB,UAAM,aAAa,CAAC,UAA4B;AAC9C,UAAI,UAAU,QAAQ;AACpB,kBAAU,MAAM,QAAQ;AAAA,iBACf,UAAU,SAAS;AAC5B,mBAAW,MAAM,QAAQ;AAAA;AAAA;AAI7B,UAAM,iBAAiBC,aAAS,MAAM,MAAM,YAAY,WAAW;AAEnE,UAAM,iBAAiBA,aACrB,MAAM,MAAM,OAAO,MAAM,EAAE;AAG7B,UAAM,kBAAkBA,aACtB,MAAM,MAAM,OAAO,MAAM,EAAE;AAG7B,UAAM,yBAAyBA,aAC7B,MAAM,MAAM,qBAAqB,EAAE;AAGrC,cACE,MAAM,MAAM,YACZ,MAAM;;AACJ,uBAAW,aAAX,oCAAsB;AAAA;AAI1B,UAAM,eAAeA,aAAS,MAAM,CAAC,WAAW;AAC9C,UAAI,MAAM;AAAe,eAAO,MAAM,cAAcC,OAAG;AAEvD,UAAI,MAAM;AAAS,eAAO,MAAM,QAAQ,EAAE;AAE1C,aAAOA,MAAE,QAAQ,OAAO,MAAM,MAAM,UAAU,OAAO,MAAM,MAAM;AAAA;AAGnE,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,SAEGC,WAAO;AAAA,MAEV;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEA;AAAA;AAAA;AAAA;;;;"}

package/lib/components/transfer/src/index.vue_vue_type_template_id_6c8b9070_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.vue_vue_type_template_id_6c8b9070_lang.js","sources":["../../../../../../packages/components/transfer/src/index.vue?vue&type=template&id=6c8b9070&lang.js"],"sourcesContent":["<template>\n  <div class=\"el-transfer\">\n    <transfer-panel\n      ref=\"leftPanel\"\n      :data=\"sourceData\"\n      :option-render=\"optionRender\"\n      :placeholder=\"panelFilterPlaceholder\"\n      :title=\"leftPanelTitle\"\n      :filterable=\"filterable\"\n      :format=\"format\"\n      :filter-method=\"filterMethod\"\n      :default-checked=\"leftDefaultChecked\"\n      :props=\"props\"\n      @checked-change=\"onSourceCheckedChange\"\n    >\n      <slot name=\"left-footer\"></slot>\n    </transfer-panel>\n    <div class=\"el-transfer__buttons\">\n      <el-button\n        type=\"primary\"\n        :class=\"['el-transfer__button', hasButtonTexts ? 'is-with-texts' : '']\"\n        :disabled=\"rightChecked.length === 0\"\n        @click=\"addToLeft\"\n      >\n        <el-icon><arrow-left /></el-icon>\n        <span v-if=\"buttonTexts[0] !== undefined\">{{ buttonTexts[0] }}</span>\n      </el-button>\n      <el-button\n        type=\"primary\"\n        :class=\"['el-transfer__button', hasButtonTexts ? 'is-with-texts' : '']\"\n        :disabled=\"leftChecked.length === 0\"\n        @click=\"addToRight\"\n      >\n        <span v-if=\"buttonTexts[1] !== undefined\">{{ buttonTexts[1] }}</span>\n        <el-icon><arrow-right /></el-icon>\n      </el-button>\n    </div>\n    <transfer-panel\n      ref=\"rightPanel\"\n      :data=\"targetData\"\n      :option-render=\"optionRender\"\n      :placeholder=\"panelFilterPlaceholder\"\n      :filterable=\"filterable\"\n      :format=\"format\"\n      :filter-method=\"filterMethod\"\n      :title=\"rightPanelTitle\"\n      :default-checked=\"rightDefaultChecked\"\n      :props=\"props\"\n      @checked-change=\"onTargetCheckedChange\"\n    >\n      <slot name=\"right-footer\"></slot>\n    </transfer-panel>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  inject,\n  h,\n  reactive,\n  ref,\n  toRefs,\n  watch,\n} from 'vue'\nimport ElButton from '@element-plus/components/button'\nimport ElIcon from '@element-plus/components/icon'\nimport { elFormItemKey } from '@element-plus/tokens'\nimport { useLocale } from '@element-plus/hooks'\nimport { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'\nimport { ArrowLeft, ArrowRight } from '@element-plus/icons'\nimport TransferPanel from './transfer-panel.vue'\nimport { useComputedData } from './useComputedData'\nimport {\n  useCheckedChange,\n  LEFT_CHECK_CHANGE_EVENT,\n  RIGHT_CHECK_CHANGE_EVENT,\n} from './useCheckedChange'\nimport { useMove } from './useMove'\nimport { CHANGE_EVENT } from './transfer'\n\nimport type { PropType, VNode } from 'vue'\nimport type { ElFormItemContext } from '@element-plus/tokens'\nimport type { DataItem, Format, Key, Props, TargetOrder } from './transfer'\n\nexport default defineComponent({\n  name: 'ElTransfer',\n\n  components: {\n    TransferPanel,\n    ElButton,\n    ElIcon,\n    ArrowLeft,\n    ArrowRight,\n  },\n\n  props: {\n    data: {\n      type: Array as PropType<DataItem[]>,\n      default: () => [],\n    },\n    titles: {\n      type: Array as PropType<any> as PropType<[string, string]>,\n      default: () => [],\n    },\n    buttonTexts: {\n      type: Array as PropType<any> as PropType<[string, string]>,\n      default: () => [],\n    },\n    filterPlaceholder: {\n      type: String,\n      default: '',\n    },\n    filterMethod: Function as PropType<\n      (query: string, item: DataItem) => boolean\n    >,\n    leftDefaultChecked: {\n      type: Array as PropType<Key[]>,\n      default: () => [],\n    },\n    rightDefaultChecked: {\n      type: Array as PropType<Key[]>,\n      default: () => [],\n    },\n    renderContent: Function as PropType<(h, option) => VNode>,\n    modelValue: {\n      type: Array as PropType<Key[]>,\n      default: () => [],\n    },\n    format: {\n      type: Object as PropType<Format>,\n      default: () => ({}),\n    },\n    filterable: {\n      type: Boolean,\n      default: false,\n    },\n    props: {\n      type: Object as PropType<Props>,\n      default: () => ({\n        label: 'label',\n        key: 'key',\n        disabled: 'disabled',\n      }),\n    },\n    targetOrder: {\n      type: String as PropType<TargetOrder>,\n      default: 'original',\n      validator: (val: string) => {\n        return ['original', 'push', 'unshift'].includes(val)\n      },\n    },\n  },\n\n  emits: [\n    UPDATE_MODEL_EVENT,\n    CHANGE_EVENT,\n    LEFT_CHECK_CHANGE_EVENT,\n    RIGHT_CHECK_CHANGE_EVENT,\n  ],\n\n  setup(props, { emit, slots }) {\n    const { t } = useLocale()\n    const elFormItem = inject(elFormItemKey, {} as ElFormItemContext)\n\n    const checkedState = reactive({\n      leftChecked: [],\n      rightChecked: [],\n    })\n\n    const { propsKey, sourceData, targetData } = useComputedData(props)\n\n    const { onSourceCheckedChange, onTargetCheckedChange } = useCheckedChange(\n      checkedState,\n      emit\n    )\n\n    const { addToLeft, addToRight } = useMove(\n      props,\n      checkedState,\n      propsKey,\n      emit\n    )\n\n    const leftPanel = ref(null)\n    const rightPanel = ref(null)\n\n    const clearQuery = (which: 'left' | 'right') => {\n      if (which === 'left') {\n        leftPanel.value.query = ''\n      } else if (which === 'right') {\n        rightPanel.value.query = ''\n      }\n    }\n\n    const hasButtonTexts = computed(() => props.buttonTexts.length === 2)\n\n    const leftPanelTitle = computed(\n      () => props.titles[0] || t('el.transfer.titles.0')\n    )\n\n    const rightPanelTitle = computed(\n      () => props.titles[1] || t('el.transfer.titles.1')\n    )\n\n    const panelFilterPlaceholder = computed(\n      () => props.filterPlaceholder || t('el.transfer.filterPlaceholder')\n    )\n\n    watch(\n      () => props.modelValue,\n      () => {\n        elFormItem.validate?.('change')\n      }\n    )\n\n    const optionRender = computed(() => (option) => {\n      if (props.renderContent) return props.renderContent(h, option)\n\n      if (slots.default) return slots.default({ option })\n\n      return h('span', option[props.props.label] || option[props.props.key])\n    })\n\n    return {\n      sourceData,\n      targetData,\n      onSourceCheckedChange,\n      onTargetCheckedChange,\n      addToLeft,\n      addToRight,\n\n      ...toRefs(checkedState),\n\n      hasButtonTexts,\n      leftPanelTitle,\n      rightPanelTitle,\n      panelFilterPlaceholder,\n      clearQuery,\n\n      optionRender,\n    }\n  },\n})\n</script>\n"],"names":["_createElementBlock","_createVNode","_renderSlot","_createElementVNode"],"mappings":";;;;;;qBACO,OAAM;qBAgBJ,OAAM;;;;;;;;;0BAhBbA,8BAAA;IACEC;MACE,KAAI;AAAA,MACH,MAAM;MACN,iBAAe;MACf,aAAa;MACb,OAAO;MACP,YAAY;MACZ,QAAQ;MACR,iBAAe;MACf,mBAAiB;MACjB,OAAO;MACP,iBAAgB;;2BAEjB;QAAAC;;;;IAEFC,8BAAA;MACEF;QACE,MAAK;AAAA,QACJ,kDAA+B;QAC/B,UAAU,kBAAa;QACvB,SAAO;;6BAER;UAAAA;iCAAS;cAAAA,gBAAc;AAAA;AAAA;;UACX,wBAAmB,2BAA/BD,+DAA6C;;;;MAE/CC;QACE,MAAK;AAAA,QACJ,kDAA+B;QAC/B,UAAU,iBAAY;QACtB,SAAO;;6BAER;UAAY,wBAAmB,2BAA/BD,+DAA6C;UAC7CC;iCAAS;cAAAA,gBAAe;AAAA;AAAA;;;;;;IAG5BA;MACE,KAAI;AAAA,MACH,MAAM;MACN,iBAAe;MACf,aAAa;MACb,YAAY;MACZ,QAAQ;MACR,iBAAe;MACf,OAAO;MACP,mBAAiB;MACjB,OAAO;MACP,iBAAgB;;2BAEjB;QAAAC;;;;;;;;;"}
+{"version":3,"file":"index.vue_vue_type_template_id_6c8b9070_lang.js","sources":["../../../../../../packages/components/transfer/src/index.vue?vue&type=template&id=6c8b9070&lang.js"],"sourcesContent":["<template>\n  <div class=\"el-transfer\">\n    <transfer-panel\n      ref=\"leftPanel\"\n      :data=\"sourceData\"\n      :option-render=\"optionRender\"\n      :placeholder=\"panelFilterPlaceholder\"\n      :title=\"leftPanelTitle\"\n      :filterable=\"filterable\"\n      :format=\"format\"\n      :filter-method=\"filterMethod\"\n      :default-checked=\"leftDefaultChecked\"\n      :props=\"props\"\n      @checked-change=\"onSourceCheckedChange\"\n    >\n      <slot name=\"left-footer\"></slot>\n    </transfer-panel>\n    <div class=\"el-transfer__buttons\">\n      <el-button\n        type=\"primary\"\n        :class=\"['el-transfer__button', hasButtonTexts ? 'is-with-texts' : '']\"\n        :disabled=\"rightChecked.length === 0\"\n        @click=\"addToLeft\"\n      >\n        <el-icon><arrow-left /></el-icon>\n        <span v-if=\"buttonTexts[0] !== undefined\">{{ buttonTexts[0] }}</span>\n      </el-button>\n      <el-button\n        type=\"primary\"\n        :class=\"['el-transfer__button', hasButtonTexts ? 'is-with-texts' : '']\"\n        :disabled=\"leftChecked.length === 0\"\n        @click=\"addToRight\"\n      >\n        <span v-if=\"buttonTexts[1] !== undefined\">{{ buttonTexts[1] }}</span>\n        <el-icon><arrow-right /></el-icon>\n      </el-button>\n    </div>\n    <transfer-panel\n      ref=\"rightPanel\"\n      :data=\"targetData\"\n      :option-render=\"optionRender\"\n      :placeholder=\"panelFilterPlaceholder\"\n      :filterable=\"filterable\"\n      :format=\"format\"\n      :filter-method=\"filterMethod\"\n      :title=\"rightPanelTitle\"\n      :default-checked=\"rightDefaultChecked\"\n      :props=\"props\"\n      @checked-change=\"onTargetCheckedChange\"\n    >\n      <slot name=\"right-footer\"></slot>\n    </transfer-panel>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  inject,\n  h,\n  reactive,\n  ref,\n  toRefs,\n  watch,\n} from 'vue'\nimport ElButton from '@element-plus/components/button'\nimport ElIcon from '@element-plus/components/icon'\nimport { elFormItemKey } from '@element-plus/tokens'\nimport { useLocale } from '@element-plus/hooks'\nimport { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'\nimport { ArrowLeft, ArrowRight } from '@element-plus/icons-vue'\nimport TransferPanel from './transfer-panel.vue'\nimport { useComputedData } from './useComputedData'\nimport {\n  useCheckedChange,\n  LEFT_CHECK_CHANGE_EVENT,\n  RIGHT_CHECK_CHANGE_EVENT,\n} from './useCheckedChange'\nimport { useMove } from './useMove'\nimport { CHANGE_EVENT } from './transfer'\n\nimport type { PropType, VNode } from 'vue'\nimport type { ElFormItemContext } from '@element-plus/tokens'\nimport type { DataItem, Format, Key, Props, TargetOrder } from './transfer'\n\nexport default defineComponent({\n  name: 'ElTransfer',\n\n  components: {\n    TransferPanel,\n    ElButton,\n    ElIcon,\n    ArrowLeft,\n    ArrowRight,\n  },\n\n  props: {\n    data: {\n      type: Array as PropType<DataItem[]>,\n      default: () => [],\n    },\n    titles: {\n      type: Array as PropType<any> as PropType<[string, string]>,\n      default: () => [],\n    },\n    buttonTexts: {\n      type: Array as PropType<any> as PropType<[string, string]>,\n      default: () => [],\n    },\n    filterPlaceholder: {\n      type: String,\n      default: '',\n    },\n    filterMethod: Function as PropType<\n      (query: string, item: DataItem) => boolean\n    >,\n    leftDefaultChecked: {\n      type: Array as PropType<Key[]>,\n      default: () => [],\n    },\n    rightDefaultChecked: {\n      type: Array as PropType<Key[]>,\n      default: () => [],\n    },\n    renderContent: Function as PropType<(h, option) => VNode>,\n    modelValue: {\n      type: Array as PropType<Key[]>,\n      default: () => [],\n    },\n    format: {\n      type: Object as PropType<Format>,\n      default: () => ({}),\n    },\n    filterable: {\n      type: Boolean,\n      default: false,\n    },\n    props: {\n      type: Object as PropType<Props>,\n      default: () => ({\n        label: 'label',\n        key: 'key',\n        disabled: 'disabled',\n      }),\n    },\n    targetOrder: {\n      type: String as PropType<TargetOrder>,\n      default: 'original',\n      validator: (val: string) => {\n        return ['original', 'push', 'unshift'].includes(val)\n      },\n    },\n  },\n\n  emits: [\n    UPDATE_MODEL_EVENT,\n    CHANGE_EVENT,\n    LEFT_CHECK_CHANGE_EVENT,\n    RIGHT_CHECK_CHANGE_EVENT,\n  ],\n\n  setup(props, { emit, slots }) {\n    const { t } = useLocale()\n    const elFormItem = inject(elFormItemKey, {} as ElFormItemContext)\n\n    const checkedState = reactive({\n      leftChecked: [],\n      rightChecked: [],\n    })\n\n    const { propsKey, sourceData, targetData } = useComputedData(props)\n\n    const { onSourceCheckedChange, onTargetCheckedChange } = useCheckedChange(\n      checkedState,\n      emit\n    )\n\n    const { addToLeft, addToRight } = useMove(\n      props,\n      checkedState,\n      propsKey,\n      emit\n    )\n\n    const leftPanel = ref(null)\n    const rightPanel = ref(null)\n\n    const clearQuery = (which: 'left' | 'right') => {\n      if (which === 'left') {\n        leftPanel.value.query = ''\n      } else if (which === 'right') {\n        rightPanel.value.query = ''\n      }\n    }\n\n    const hasButtonTexts = computed(() => props.buttonTexts.length === 2)\n\n    const leftPanelTitle = computed(\n      () => props.titles[0] || t('el.transfer.titles.0')\n    )\n\n    const rightPanelTitle = computed(\n      () => props.titles[1] || t('el.transfer.titles.1')\n    )\n\n    const panelFilterPlaceholder = computed(\n      () => props.filterPlaceholder || t('el.transfer.filterPlaceholder')\n    )\n\n    watch(\n      () => props.modelValue,\n      () => {\n        elFormItem.validate?.('change')\n      }\n    )\n\n    const optionRender = computed(() => (option) => {\n      if (props.renderContent) return props.renderContent(h, option)\n\n      if (slots.default) return slots.default({ option })\n\n      return h('span', option[props.props.label] || option[props.props.key])\n    })\n\n    return {\n      sourceData,\n      targetData,\n      onSourceCheckedChange,\n      onTargetCheckedChange,\n      addToLeft,\n      addToRight,\n\n      ...toRefs(checkedState),\n\n      hasButtonTexts,\n      leftPanelTitle,\n      rightPanelTitle,\n      panelFilterPlaceholder,\n      clearQuery,\n\n      optionRender,\n    }\n  },\n})\n</script>\n"],"names":["_createElementBlock","_createVNode","_renderSlot","_createElementVNode"],"mappings":";;;;;;qBACO,OAAM;qBAgBJ,OAAM;;;;;;;;;0BAhBbA,8BAAA;IACEC;MACE,KAAI;AAAA,MACH,MAAM;MACN,iBAAe;MACf,aAAa;MACb,OAAO;MACP,YAAY;MACZ,QAAQ;MACR,iBAAe;MACf,mBAAiB;MACjB,OAAO;MACP,iBAAgB;;2BAEjB;QAAAC;;;;IAEFC,8BAAA;MACEF;QACE,MAAK;AAAA,QACJ,kDAA+B;QAC/B,UAAU,kBAAa;QACvB,SAAO;;6BAER;UAAAA;iCAAS;cAAAA,gBAAc;AAAA;AAAA;;UACX,wBAAmB,2BAA/BD,+DAA6C;;;;MAE/CC;QACE,MAAK;AAAA,QACJ,kDAA+B;QAC/B,UAAU,iBAAY;QACtB,SAAO;;6BAER;UAAY,wBAAmB,2BAA/BD,+DAA6C;UAC7CC;iCAAS;cAAAA,gBAAe;AAAA;AAAA;;;;;;IAG5BA;MACE,KAAI;AAAA,MACH,MAAM;MACN,iBAAe;MACf,aAAa;MACb,YAAY;MACZ,QAAQ;MACR,iBAAe;MACf,OAAO;MACP,mBAAiB;MACjB,OAAO;MACP,iBAAgB;;2BAEjB;QAAAC;;;;;;;;;"}

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

@@ -43,9 +43,9 @@ declare const _default: import("vue").DefineComponent<{
     data: unknown[];
     filterable: boolean;
 } & {
-    placeholder?: string | undefined;
-    title?: string | undefined;
     props?: Record<string, any> | undefined;
+    title?: string | undefined;
+    placeholder?: string | undefined;
     filterMethod?: Function | undefined;
     format?: Record<string, any> | undefined;
     optionRender?: Function | undefined;

package/lib/components/transfer/src/transfer-panel.vue_vue_type_script_lang.js

@@ -7,7 +7,7 @@ require('../../../hooks/index.js');
 var index = require('../../checkbox/index.js');
 var index$2 = require('../../icon/index.js');
 var index$1 = require('../../input/index.js');
-var icons = require('@element-plus/icons');
+var iconsVue = require('@element-plus/icons-vue');
 var useCheck = require('./useCheck.js');
 var index$3 = require('../../../hooks/use-locale/index.js');
 
@@ -44,11 +44,11 @@ var script = vue.defineComponent({
       return panelState.query.length > 0 && filteredData.value.length === 0;
     });
     const inputIcon = vue.computed(() => {
-      return panelState.query.length > 0 && panelState.inputHover ? icons.CircleClose : icons.Search;
+      return panelState.query.length > 0 && panelState.inputHover ? iconsVue.CircleClose : iconsVue.Search;
     });
     const hasFooter = vue.computed(() => !!slots.default()[0].children.length);
     const clearQuery = () => {
-      if (inputIcon.value === icons.CircleClose) {
+      if (inputIcon.value === iconsVue.CircleClose) {
         panelState.query = "";
       }
     };

package/lib/components/transfer/src/transfer-panel.vue_vue_type_script_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"transfer-panel.vue_vue_type_script_lang.js","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=\"small\"\n        :placeholder=\"placeholder\"\n        @mouseenter=\"inputHover = true\"\n        @mouseleave=\"inputHover = false\"\n      >\n        <template #prefix>\n          <el-icon v-if=\"inputIcon\" class=\"el-input__icon\" @click=\"clearQuery\">\n            <component :is=\"inputIcon\" />\n          </el-icon>\n        </template>\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 ElIcon from '@element-plus/components/icon'\nimport ElInput from '@element-plus/components/input'\nimport { CircleClose, Search } from '@element-plus/icons'\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    ElIcon,\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 inputIcon = computed(() => {\n      return panelState.query.length > 0 && panelState.inputHover\n        ? CircleClose\n        : Search\n    })\n\n    const hasFooter = computed(() => !!slots.default()[0].children.length)\n\n    const clearQuery = () => {\n      if (inputIcon.value === CircleClose) {\n        panelState.query = ''\n      }\n    }\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      inputIcon,\n      hasFooter,\n      clearQuery,\n\n      t,\n    }\n  },\n})\n</script>\n"],"names":["defineComponent","ElCheckboxGroup","ElCheckbox","ElInput","ElIcon","useCheckProps","CHECKED_CHANGE_EVENT","useLocale","reactive","useCheck","computed","CircleClose","Search","toRefs"],"mappings":";;;;;;;;;;;;;AAqEA,aAAeA,oBAAgB;AAAA,EAC7B,MAAM;AAAA,EAEN,YAAY;AAAA,qBACVC;AAAA,gBACAC;AAAA,aACAC;AAAA,YACAC;AAAA,IACA,eAAe,CAAC,EAAE,aAAa;AAAA;AAAA,EAGjC,OAAOC;AAAA,EAEP,OAAO,CAACC;AAAA,EAER,MAAM,OAAO,EAAE,SAAS;AACtB,UAAM,EAAE,MAAMC;AAEd,UAAM,aAAaC,aAAS;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,QACEC,kBAAS,OAAO;AAEpB,UAAM,aAAaC,aAAS,MAAM;AAChC,aAAO,WAAW,MAAM,SAAS,KAAK,aAAa,MAAM,WAAW;AAAA;AAGtE,UAAM,YAAYA,aAAS,MAAM;AAC/B,aAAO,WAAW,MAAM,SAAS,KAAK,WAAW,aAC7CC,oBACAC;AAAA;AAGN,UAAM,YAAYF,aAAS,MAAM,CAAC,CAAC,MAAM,UAAU,GAAG,SAAS;AAE/D,UAAM,aAAa,MAAM;AACvB,UAAI,UAAU,UAAUC,mBAAa;AACnC,mBAAW,QAAQ;AAAA;AAAA;AAIvB,UAAM,EAAE,SAAS,YAAY,OAAO,YAAY,sBAC9CE,WAAO;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;AAAA,MACA;AAAA,MACA;AAAA,MAEA;AAAA;AAAA;AAAA;;;;"}
+{"version":3,"file":"transfer-panel.vue_vue_type_script_lang.js","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=\"small\"\n        :placeholder=\"placeholder\"\n        @mouseenter=\"inputHover = true\"\n        @mouseleave=\"inputHover = false\"\n      >\n        <template #prefix>\n          <el-icon v-if=\"inputIcon\" class=\"el-input__icon\" @click=\"clearQuery\">\n            <component :is=\"inputIcon\" />\n          </el-icon>\n        </template>\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 ElIcon from '@element-plus/components/icon'\nimport ElInput from '@element-plus/components/input'\nimport { CircleClose, 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    ElIcon,\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 inputIcon = computed(() => {\n      return panelState.query.length > 0 && panelState.inputHover\n        ? CircleClose\n        : Search\n    })\n\n    const hasFooter = computed(() => !!slots.default()[0].children.length)\n\n    const clearQuery = () => {\n      if (inputIcon.value === CircleClose) {\n        panelState.query = ''\n      }\n    }\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      inputIcon,\n      hasFooter,\n      clearQuery,\n\n      t,\n    }\n  },\n})\n</script>\n"],"names":["defineComponent","ElCheckboxGroup","ElCheckbox","ElInput","ElIcon","useCheckProps","CHECKED_CHANGE_EVENT","useLocale","reactive","useCheck","computed","CircleClose","Search","toRefs"],"mappings":";;;;;;;;;;;;;AAqEA,aAAeA,oBAAgB;AAAA,EAC7B,MAAM;AAAA,EAEN,YAAY;AAAA,qBACVC;AAAA,gBACAC;AAAA,aACAC;AAAA,YACAC;AAAA,IACA,eAAe,CAAC,EAAE,aAAa;AAAA;AAAA,EAGjC,OAAOC;AAAA,EAEP,OAAO,CAACC;AAAA,EAER,MAAM,OAAO,EAAE,SAAS;AACtB,UAAM,EAAE,MAAMC;AAEd,UAAM,aAAaC,aAAS;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,QACEC,kBAAS,OAAO;AAEpB,UAAM,aAAaC,aAAS,MAAM;AAChC,aAAO,WAAW,MAAM,SAAS,KAAK,aAAa,MAAM,WAAW;AAAA;AAGtE,UAAM,YAAYA,aAAS,MAAM;AAC/B,aAAO,WAAW,MAAM,SAAS,KAAK,WAAW,aAC7CC,uBACAC;AAAA;AAGN,UAAM,YAAYF,aAAS,MAAM,CAAC,CAAC,MAAM,UAAU,GAAG,SAAS;AAE/D,UAAM,aAAa,MAAM;AACvB,UAAI,UAAU,UAAUC,sBAAa;AACnC,mBAAW,QAAQ;AAAA;AAAA;AAIvB,UAAM,EAAE,SAAS,YAAY,OAAO,YAAY,sBAC9CE,WAAO;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;AAAA,MACA;AAAA,MACA;AAAA,MAEA;AAAA;AAAA;AAAA;;;;"}

package/lib/components/transfer/src/transfer-panel.vue_vue_type_template_id_1a7d1f9c_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"transfer-panel.vue_vue_type_template_id_1a7d1f9c_lang.js","sources":["../../../../../../packages/components/transfer/src/transfer-panel.vue?vue&type=template&id=1a7d1f9c&lang.js"],"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=\"small\"\n        :placeholder=\"placeholder\"\n        @mouseenter=\"inputHover = true\"\n        @mouseleave=\"inputHover = false\"\n      >\n        <template #prefix>\n          <el-icon v-if=\"inputIcon\" class=\"el-input__icon\" @click=\"clearQuery\">\n            <component :is=\"inputIcon\" />\n          </el-icon>\n        </template>\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 ElIcon from '@element-plus/components/icon'\nimport ElInput from '@element-plus/components/input'\nimport { CircleClose, Search } from '@element-plus/icons'\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    ElIcon,\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 inputIcon = computed(() => {\n      return panelState.query.length > 0 && panelState.inputHover\n        ? CircleClose\n        : Search\n    })\n\n    const hasFooter = computed(() => !!slots.default()[0].children.length)\n\n    const clearQuery = () => {\n      if (inputIcon.value === CircleClose) {\n        panelState.query = ''\n      }\n    }\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      inputIcon,\n      hasFooter,\n      clearQuery,\n\n      t,\n    }\n  },\n})\n</script>\n"],"names":["_createElementBlock","_createElementVNode","_createVNode","_createBlock","_renderSlot"],"mappings":";;;;;;qBACO,OAAM;qBACN,OAAM;;;EAoDW,OAAM;AAAA;;;;;;;0BArD5BA,8BAAA;IACEC,4BAAA;MACEC;oBACW;qEAAA;QACR,eAAe;QACf,UAAQ;;6BAET;kDAAG;UACHD,yDAAS;;;;;IAIbA;MACG,sDAAmC;;MAG5B,oCADRE;;oBAEW;qEAAA;QACT,OAAM;AAAA,QACN,MAAK;AAAA,QACJ,aAAa;QACb,oDAAY;QACZ,oDAAY;;QAEF,oBACT;UAAe,mCAAfA;;YAA0B,OAAM;AAAA,YAAkB,SAAO;;iCACvD;gCAAAA,4CAAgB;;;;;;;yBAItBD;oBAEW;qEAAA;QACR,8CAA0B,mBACrB;AAAA;6BAGJ;gCADFF,0DACiB,oBAAR;oCADTG;cAEG,KAAK,KAAK;cACX,OAAM;AAAA,cACL,OAAO,KAAK;cACZ,UAAU,KAAK;;mCAEhB;gBAAAD;kBAAiB,QAAQ,kBAAa;AAAA;;;;;;;;qBAZ/B,mBAAc,UAAK;;yBAe9BD,8BAEE,OAAM,kDAEH,kBAAa,gCAA2B;oBAHnC,mBAAc,UAAK;;;IAMtB,mCAATD,4BAAA;MACEI;;;;;;;"}
+{"version":3,"file":"transfer-panel.vue_vue_type_template_id_1a7d1f9c_lang.js","sources":["../../../../../../packages/components/transfer/src/transfer-panel.vue?vue&type=template&id=1a7d1f9c&lang.js"],"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=\"small\"\n        :placeholder=\"placeholder\"\n        @mouseenter=\"inputHover = true\"\n        @mouseleave=\"inputHover = false\"\n      >\n        <template #prefix>\n          <el-icon v-if=\"inputIcon\" class=\"el-input__icon\" @click=\"clearQuery\">\n            <component :is=\"inputIcon\" />\n          </el-icon>\n        </template>\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 ElIcon from '@element-plus/components/icon'\nimport ElInput from '@element-plus/components/input'\nimport { CircleClose, 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    ElIcon,\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 inputIcon = computed(() => {\n      return panelState.query.length > 0 && panelState.inputHover\n        ? CircleClose\n        : Search\n    })\n\n    const hasFooter = computed(() => !!slots.default()[0].children.length)\n\n    const clearQuery = () => {\n      if (inputIcon.value === CircleClose) {\n        panelState.query = ''\n      }\n    }\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      inputIcon,\n      hasFooter,\n      clearQuery,\n\n      t,\n    }\n  },\n})\n</script>\n"],"names":["_createElementBlock","_createElementVNode","_createVNode","_createBlock","_renderSlot"],"mappings":";;;;;;qBACO,OAAM;qBACN,OAAM;;;EAoDW,OAAM;AAAA;;;;;;;0BArD5BA,8BAAA;IACEC,4BAAA;MACEC;oBACW;qEAAA;QACR,eAAe;QACf,UAAQ;;6BAET;kDAAG;UACHD,yDAAS;;;;;IAIbA;MACG,sDAAmC;;MAG5B,oCADRE;;oBAEW;qEAAA;QACT,OAAM;AAAA,QACN,MAAK;AAAA,QACJ,aAAa;QACb,oDAAY;QACZ,oDAAY;;QAEF,oBACT;UAAe,mCAAfA;;YAA0B,OAAM;AAAA,YAAkB,SAAO;;iCACvD;gCAAAA,4CAAgB;;;;;;;yBAItBD;oBAEW;qEAAA;QACR,8CAA0B,mBACrB;AAAA;6BAGJ;gCADFF,0DACiB,oBAAR;oCADTG;cAEG,KAAK,KAAK;cACX,OAAM;AAAA,cACL,OAAO,KAAK;cACZ,UAAU,KAAK;;mCAEhB;gBAAAD;kBAAiB,QAAQ,kBAAa;AAAA;;;;;;;;qBAZ/B,mBAAc,UAAK;;yBAe9BD,8BAEE,OAAM,kDAEH,kBAAa,gCAA2B;oBAHnC,mBAAc,UAAK;;;IAMtB,mCAATD,4BAAA;MACEI;;;;;;;"}

package/lib/components/tree/index.d.ts

@@ -416,9 +416,9 @@ declare const _Tree: SFCWithInstall<import("vue").DefineComponent<{
     draggable: boolean;
     highlightCurrent: boolean;
 } & {
-    emptyText?: string | undefined;
     icon?: string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions> | undefined;
     load?: import("./src/tree.type").LoadFunction | undefined;
+    emptyText?: string | undefined;
     renderContent?: Function | undefined;
     defaultCheckedKeys?: import("./src/tree.type").TreeKey[] | undefined;
     defaultExpandedKeys?: import("./src/tree.type").TreeKey[] | undefined;
@@ -876,9 +876,9 @@ export declare const ElTree: SFCWithInstall<import("vue").DefineComponent<{
     draggable: boolean;
     highlightCurrent: boolean;
 } & {
-    emptyText?: string | undefined;
     icon?: string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions> | undefined;
     load?: import("./src/tree.type").LoadFunction | undefined;
+    emptyText?: string | undefined;
     renderContent?: Function | undefined;
     defaultCheckedKeys?: import("./src/tree.type").TreeKey[] | undefined;
     defaultExpandedKeys?: import("./src/tree.type").TreeKey[] | undefined;

package/lib/components/tree/src/tree-node.vue_vue_type_script_lang.js

@@ -7,7 +7,7 @@ var shared = require('@vue/shared');
 var index = require('../../collapse-transition/index.js');
 var index$1 = require('../../checkbox/index.js');
 var index$2 = require('../../icon/index.js');
-var icons = require('@element-plus/icons');
+var iconsVue = require('@element-plus/icons-vue');
 var error = require('../../../utils/error.js');
 require('./tree-node-content.js');
 var util = require('./model/util.js');
@@ -23,7 +23,7 @@ var script = vue.defineComponent({
     ElCheckbox: index$1.ElCheckbox,
     NodeContent: treeNodeContent_vue_vue_type_script_lang["default"],
     ElIcon: index$2.ElIcon,
-    Loading: icons.Loading
+    Loading: iconsVue.Loading
   },
   props: {
     node: {
@@ -198,7 +198,7 @@ var script = vue.defineComponent({
       handleDragOver,
       handleDrop,
       handleDragEnd,
-      CaretRight: icons.CaretRight
+      CaretRight: iconsVue.CaretRight
     };
   }
 });

package/lib/components/tree/src/tree-node.vue_vue_type_script_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"tree-node.vue_vue_type_script_lang.js","sources":["../../../../../../packages/components/tree/src/tree-node.vue"],"sourcesContent":["<template>\n  <div\n    v-show=\"node.visible\"\n    ref=\"node$\"\n    class=\"el-tree-node\"\n    :class=\"{\n      'is-expanded': expanded,\n      'is-current': node.isCurrent,\n      'is-hidden': !node.visible,\n      'is-focusable': !node.disabled,\n      'is-checked': !node.disabled && node.checked,\n      ...getNodeClass(node),\n    }\"\n    role=\"treeitem\"\n    tabindex=\"-1\"\n    :aria-expanded=\"expanded\"\n    :aria-disabled=\"node.disabled\"\n    :aria-checked=\"node.checked\"\n    :draggable=\"tree.props.draggable\"\n    :data-key=\"getNodeKey(node)\"\n    @click.stop=\"handleClick\"\n    @contextmenu=\"handleContextMenu\"\n    @dragstart.stop=\"handleDragStart\"\n    @dragover.stop=\"handleDragOver\"\n    @dragend.stop=\"handleDragEnd\"\n    @drop.stop=\"handleDrop\"\n  >\n    <div\n      class=\"el-tree-node__content\"\n      :style=\"{ paddingLeft: (node.level - 1) * tree.props.indent + 'px' }\"\n    >\n      <el-icon\n        v-if=\"tree.props.icon || CaretRight\"\n        :class=\"[\n          {\n            'is-leaf': node.isLeaf,\n            expanded: !node.isLeaf && expanded,\n          },\n          'el-tree-node__expand-icon',\n        ]\"\n        @click.stop=\"handleExpandIconClick\"\n      >\n        <component :is=\"tree.props.icon || CaretRight\"></component>\n      </el-icon>\n      <el-checkbox\n        v-if=\"showCheckbox\"\n        :model-value=\"node.checked\"\n        :indeterminate=\"node.indeterminate\"\n        :disabled=\"!!node.disabled\"\n        @click.stop\n        @change=\"handleCheckChange\"\n      />\n      <el-icon\n        v-if=\"node.loading\"\n        class=\"el-tree-node__loading-icon is-loading\"\n      >\n        <loading />\n      </el-icon>\n      <node-content :node=\"node\" :render-content=\"renderContent\" />\n    </div>\n    <el-collapse-transition>\n      <div\n        v-if=\"!renderAfterExpand || childNodeRendered\"\n        v-show=\"expanded\"\n        class=\"el-tree-node__children\"\n        role=\"group\"\n        :aria-expanded=\"expanded\"\n      >\n        <el-tree-node\n          v-for=\"child in node.childNodes\"\n          :key=\"getNodeKey(child)\"\n          :render-content=\"renderContent\"\n          :render-after-expand=\"renderAfterExpand\"\n          :show-checkbox=\"showCheckbox\"\n          :node=\"child\"\n          :props=\"props\"\n          @node-expand=\"handleChildNodeExpand\"\n        />\n      </div>\n    </el-collapse-transition>\n  </div>\n</template>\n<script lang=\"ts\">\nimport {\n  defineComponent,\n  getCurrentInstance,\n  ref,\n  watch,\n  nextTick,\n  inject,\n  provide,\n} from 'vue'\nimport { isString, isFunction } from '@vue/shared'\nimport ElCollapseTransition from '@element-plus/components/collapse-transition'\nimport ElCheckbox from '@element-plus/components/checkbox'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { CaretRight, Loading } from '@element-plus/icons'\nimport { debugWarn } from '@element-plus/utils/error'\nimport NodeContent from './tree-node-content.vue'\nimport { getNodeKey as getNodeKeyUtil } from './model/util'\nimport { useNodeExpandEventBroadcast } from './model/useNodeExpandEventBroadcast'\nimport { dragEventsKey } from './model/useDragNode'\nimport Node from './model/node'\n\nimport type { ComponentInternalInstance, PropType } from 'vue'\nimport type { Nullable } from '@element-plus/utils/types'\nimport type { TreeOptionProps, TreeNodeData, RootTreeType } from './tree.type'\n\nexport default defineComponent({\n  name: 'ElTreeNode',\n  components: {\n    ElCollapseTransition,\n    ElCheckbox,\n    NodeContent,\n    ElIcon,\n    Loading,\n  },\n  props: {\n    node: {\n      type: Node,\n      default: () => ({}),\n    },\n    props: {\n      type: Object as PropType<TreeOptionProps>,\n      default: () => ({}),\n    },\n    accordion: Boolean,\n    renderContent: Function,\n    renderAfterExpand: Boolean,\n    showCheckbox: {\n      type: Boolean,\n      default: false,\n    },\n  },\n  emits: ['node-expand'],\n  setup(props, ctx) {\n    const { broadcastExpanded } = useNodeExpandEventBroadcast(props)\n    const tree = inject<RootTreeType>('RootTree')\n    const expanded = ref(false)\n    const childNodeRendered = ref(false)\n    const oldChecked = ref<boolean>(null)\n    const oldIndeterminate = ref<boolean>(null)\n    const node$ = ref<Nullable<HTMLElement>>(null)\n    const dragEvents = inject(dragEventsKey)\n    const instance = getCurrentInstance()\n\n    provide('NodeInstance', instance)\n    if (!tree) {\n      debugWarn('Tree', \"Can not find node's tree.\")\n    }\n\n    if (props.node.expanded) {\n      expanded.value = true\n      childNodeRendered.value = true\n    }\n\n    const childrenKey = tree.props['children'] || 'children'\n    watch(\n      () => {\n        const children = props.node.data[childrenKey]\n        return children && [...children]\n      },\n      () => {\n        props.node.updateChildren()\n      }\n    )\n\n    watch(\n      () => props.node.indeterminate,\n      (val) => {\n        handleSelectChange(props.node.checked, val)\n      }\n    )\n\n    watch(\n      () => props.node.checked,\n      (val) => {\n        handleSelectChange(val, props.node.indeterminate)\n      }\n    )\n\n    watch(\n      () => props.node.expanded,\n      (val) => {\n        nextTick(() => (expanded.value = val))\n        if (val) {\n          childNodeRendered.value = true\n        }\n      }\n    )\n\n    const getNodeKey = (node: Node): any => {\n      return getNodeKeyUtil(tree.props.nodeKey, node.data)\n    }\n\n    const getNodeClass = (node: Node) => {\n      const nodeClassFunc = props.props.class\n      if (!nodeClassFunc) {\n        return {}\n      }\n      let className\n      if (isFunction(nodeClassFunc)) {\n        const { data } = node\n        className = nodeClassFunc(data, node)\n      } else {\n        className = nodeClassFunc\n      }\n\n      if (isString(className)) {\n        return { [className]: true }\n      } else {\n        return className\n      }\n    }\n\n    const handleSelectChange = (checked: boolean, indeterminate: boolean) => {\n      if (\n        oldChecked.value !== checked ||\n        oldIndeterminate.value !== indeterminate\n      ) {\n        tree.ctx.emit('check-change', props.node.data, checked, indeterminate)\n      }\n      oldChecked.value = checked\n      oldIndeterminate.value = indeterminate\n    }\n\n    const handleClick = () => {\n      const store = tree.store.value\n      store.setCurrentNode(props.node)\n      tree.ctx.emit(\n        'current-change',\n        store.currentNode ? store.currentNode.data : null,\n        store.currentNode\n      )\n      tree.currentNode.value = props.node\n\n      if (tree.props.expandOnClickNode) {\n        handleExpandIconClick()\n      }\n\n      if (tree.props.checkOnClickNode && !props.node.disabled) {\n        handleCheckChange(null, {\n          target: { checked: !props.node.checked },\n        })\n      }\n      tree.ctx.emit('node-click', props.node.data, props.node, instance)\n    }\n\n    const handleContextMenu = (event: Event) => {\n      if (tree.instance.vnode.props['onNodeContextmenu']) {\n        event.stopPropagation()\n        event.preventDefault()\n      }\n      tree.ctx.emit(\n        'node-contextmenu',\n        event,\n        props.node.data,\n        props.node,\n        instance\n      )\n    }\n\n    const handleExpandIconClick = () => {\n      if (props.node.isLeaf) return\n      if (expanded.value) {\n        tree.ctx.emit('node-collapse', props.node.data, props.node, instance)\n        props.node.collapse()\n      } else {\n        props.node.expand()\n        ctx.emit('node-expand', props.node.data, props.node, instance)\n      }\n    }\n\n    const handleCheckChange = (value, ev) => {\n      props.node.setChecked(ev.target.checked, !tree.props.checkStrictly)\n      nextTick(() => {\n        const store = tree.store.value\n        tree.ctx.emit('check', props.node.data, {\n          checkedNodes: store.getCheckedNodes(),\n          checkedKeys: store.getCheckedKeys(),\n          halfCheckedNodes: store.getHalfCheckedNodes(),\n          halfCheckedKeys: store.getHalfCheckedKeys(),\n        })\n      })\n    }\n\n    const handleChildNodeExpand = (\n      nodeData: TreeNodeData,\n      node: Node,\n      instance: ComponentInternalInstance\n    ) => {\n      broadcastExpanded(node)\n      tree.ctx.emit('node-expand', nodeData, node, instance)\n    }\n\n    const handleDragStart = (event: DragEvent) => {\n      if (!tree.props.draggable) return\n      dragEvents.treeNodeDragStart({ event, treeNode: props })\n    }\n\n    const handleDragOver = (event: DragEvent) => {\n      if (!tree.props.draggable) return\n      dragEvents.treeNodeDragOver({\n        event,\n        treeNode: { $el: node$.value, node: props.node },\n      })\n      event.preventDefault()\n    }\n\n    const handleDrop = (event: DragEvent) => {\n      event.preventDefault()\n    }\n\n    const handleDragEnd = (event: DragEvent) => {\n      if (!tree.props.draggable) return\n      dragEvents.treeNodeDragEnd(event)\n    }\n\n    return {\n      node$,\n      tree,\n      expanded,\n      childNodeRendered,\n      oldChecked,\n      oldIndeterminate,\n      getNodeKey,\n      getNodeClass,\n      handleSelectChange,\n      handleClick,\n      handleContextMenu,\n      handleExpandIconClick,\n      handleCheckChange,\n      handleChildNodeExpand,\n      handleDragStart,\n      handleDragOver,\n      handleDrop,\n      handleDragEnd,\n      CaretRight,\n    }\n  },\n})\n</script>\n"],"names":["defineComponent","ElCollapseTransition","ElCheckbox","NodeContent","ElIcon","Loading","Node","useNodeExpandEventBroadcast","inject","ref","dragEventsKey","getCurrentInstance","getNodeKeyUtil","isFunction","isString","CaretRight"],"mappings":"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"}
+{"version":3,"file":"tree-node.vue_vue_type_script_lang.js","sources":["../../../../../../packages/components/tree/src/tree-node.vue"],"sourcesContent":["<template>\n  <div\n    v-show=\"node.visible\"\n    ref=\"node$\"\n    class=\"el-tree-node\"\n    :class=\"{\n      'is-expanded': expanded,\n      'is-current': node.isCurrent,\n      'is-hidden': !node.visible,\n      'is-focusable': !node.disabled,\n      'is-checked': !node.disabled && node.checked,\n      ...getNodeClass(node),\n    }\"\n    role=\"treeitem\"\n    tabindex=\"-1\"\n    :aria-expanded=\"expanded\"\n    :aria-disabled=\"node.disabled\"\n    :aria-checked=\"node.checked\"\n    :draggable=\"tree.props.draggable\"\n    :data-key=\"getNodeKey(node)\"\n    @click.stop=\"handleClick\"\n    @contextmenu=\"handleContextMenu\"\n    @dragstart.stop=\"handleDragStart\"\n    @dragover.stop=\"handleDragOver\"\n    @dragend.stop=\"handleDragEnd\"\n    @drop.stop=\"handleDrop\"\n  >\n    <div\n      class=\"el-tree-node__content\"\n      :style=\"{ paddingLeft: (node.level - 1) * tree.props.indent + 'px' }\"\n    >\n      <el-icon\n        v-if=\"tree.props.icon || CaretRight\"\n        :class=\"[\n          {\n            'is-leaf': node.isLeaf,\n            expanded: !node.isLeaf && expanded,\n          },\n          'el-tree-node__expand-icon',\n        ]\"\n        @click.stop=\"handleExpandIconClick\"\n      >\n        <component :is=\"tree.props.icon || CaretRight\"></component>\n      </el-icon>\n      <el-checkbox\n        v-if=\"showCheckbox\"\n        :model-value=\"node.checked\"\n        :indeterminate=\"node.indeterminate\"\n        :disabled=\"!!node.disabled\"\n        @click.stop\n        @change=\"handleCheckChange\"\n      />\n      <el-icon\n        v-if=\"node.loading\"\n        class=\"el-tree-node__loading-icon is-loading\"\n      >\n        <loading />\n      </el-icon>\n      <node-content :node=\"node\" :render-content=\"renderContent\" />\n    </div>\n    <el-collapse-transition>\n      <div\n        v-if=\"!renderAfterExpand || childNodeRendered\"\n        v-show=\"expanded\"\n        class=\"el-tree-node__children\"\n        role=\"group\"\n        :aria-expanded=\"expanded\"\n      >\n        <el-tree-node\n          v-for=\"child in node.childNodes\"\n          :key=\"getNodeKey(child)\"\n          :render-content=\"renderContent\"\n          :render-after-expand=\"renderAfterExpand\"\n          :show-checkbox=\"showCheckbox\"\n          :node=\"child\"\n          :props=\"props\"\n          @node-expand=\"handleChildNodeExpand\"\n        />\n      </div>\n    </el-collapse-transition>\n  </div>\n</template>\n<script lang=\"ts\">\nimport {\n  defineComponent,\n  getCurrentInstance,\n  ref,\n  watch,\n  nextTick,\n  inject,\n  provide,\n} from 'vue'\nimport { isString, isFunction } from '@vue/shared'\nimport ElCollapseTransition from '@element-plus/components/collapse-transition'\nimport ElCheckbox from '@element-plus/components/checkbox'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { CaretRight, Loading } from '@element-plus/icons-vue'\nimport { debugWarn } from '@element-plus/utils/error'\nimport NodeContent from './tree-node-content.vue'\nimport { getNodeKey as getNodeKeyUtil } from './model/util'\nimport { useNodeExpandEventBroadcast } from './model/useNodeExpandEventBroadcast'\nimport { dragEventsKey } from './model/useDragNode'\nimport Node from './model/node'\n\nimport type { ComponentInternalInstance, PropType } from 'vue'\nimport type { Nullable } from '@element-plus/utils/types'\nimport type { TreeOptionProps, TreeNodeData, RootTreeType } from './tree.type'\n\nexport default defineComponent({\n  name: 'ElTreeNode',\n  components: {\n    ElCollapseTransition,\n    ElCheckbox,\n    NodeContent,\n    ElIcon,\n    Loading,\n  },\n  props: {\n    node: {\n      type: Node,\n      default: () => ({}),\n    },\n    props: {\n      type: Object as PropType<TreeOptionProps>,\n      default: () => ({}),\n    },\n    accordion: Boolean,\n    renderContent: Function,\n    renderAfterExpand: Boolean,\n    showCheckbox: {\n      type: Boolean,\n      default: false,\n    },\n  },\n  emits: ['node-expand'],\n  setup(props, ctx) {\n    const { broadcastExpanded } = useNodeExpandEventBroadcast(props)\n    const tree = inject<RootTreeType>('RootTree')\n    const expanded = ref(false)\n    const childNodeRendered = ref(false)\n    const oldChecked = ref<boolean>(null)\n    const oldIndeterminate = ref<boolean>(null)\n    const node$ = ref<Nullable<HTMLElement>>(null)\n    const dragEvents = inject(dragEventsKey)\n    const instance = getCurrentInstance()\n\n    provide('NodeInstance', instance)\n    if (!tree) {\n      debugWarn('Tree', \"Can not find node's tree.\")\n    }\n\n    if (props.node.expanded) {\n      expanded.value = true\n      childNodeRendered.value = true\n    }\n\n    const childrenKey = tree.props['children'] || 'children'\n    watch(\n      () => {\n        const children = props.node.data[childrenKey]\n        return children && [...children]\n      },\n      () => {\n        props.node.updateChildren()\n      }\n    )\n\n    watch(\n      () => props.node.indeterminate,\n      (val) => {\n        handleSelectChange(props.node.checked, val)\n      }\n    )\n\n    watch(\n      () => props.node.checked,\n      (val) => {\n        handleSelectChange(val, props.node.indeterminate)\n      }\n    )\n\n    watch(\n      () => props.node.expanded,\n      (val) => {\n        nextTick(() => (expanded.value = val))\n        if (val) {\n          childNodeRendered.value = true\n        }\n      }\n    )\n\n    const getNodeKey = (node: Node): any => {\n      return getNodeKeyUtil(tree.props.nodeKey, node.data)\n    }\n\n    const getNodeClass = (node: Node) => {\n      const nodeClassFunc = props.props.class\n      if (!nodeClassFunc) {\n        return {}\n      }\n      let className\n      if (isFunction(nodeClassFunc)) {\n        const { data } = node\n        className = nodeClassFunc(data, node)\n      } else {\n        className = nodeClassFunc\n      }\n\n      if (isString(className)) {\n        return { [className]: true }\n      } else {\n        return className\n      }\n    }\n\n    const handleSelectChange = (checked: boolean, indeterminate: boolean) => {\n      if (\n        oldChecked.value !== checked ||\n        oldIndeterminate.value !== indeterminate\n      ) {\n        tree.ctx.emit('check-change', props.node.data, checked, indeterminate)\n      }\n      oldChecked.value = checked\n      oldIndeterminate.value = indeterminate\n    }\n\n    const handleClick = () => {\n      const store = tree.store.value\n      store.setCurrentNode(props.node)\n      tree.ctx.emit(\n        'current-change',\n        store.currentNode ? store.currentNode.data : null,\n        store.currentNode\n      )\n      tree.currentNode.value = props.node\n\n      if (tree.props.expandOnClickNode) {\n        handleExpandIconClick()\n      }\n\n      if (tree.props.checkOnClickNode && !props.node.disabled) {\n        handleCheckChange(null, {\n          target: { checked: !props.node.checked },\n        })\n      }\n      tree.ctx.emit('node-click', props.node.data, props.node, instance)\n    }\n\n    const handleContextMenu = (event: Event) => {\n      if (tree.instance.vnode.props['onNodeContextmenu']) {\n        event.stopPropagation()\n        event.preventDefault()\n      }\n      tree.ctx.emit(\n        'node-contextmenu',\n        event,\n        props.node.data,\n        props.node,\n        instance\n      )\n    }\n\n    const handleExpandIconClick = () => {\n      if (props.node.isLeaf) return\n      if (expanded.value) {\n        tree.ctx.emit('node-collapse', props.node.data, props.node, instance)\n        props.node.collapse()\n      } else {\n        props.node.expand()\n        ctx.emit('node-expand', props.node.data, props.node, instance)\n      }\n    }\n\n    const handleCheckChange = (value, ev) => {\n      props.node.setChecked(ev.target.checked, !tree.props.checkStrictly)\n      nextTick(() => {\n        const store = tree.store.value\n        tree.ctx.emit('check', props.node.data, {\n          checkedNodes: store.getCheckedNodes(),\n          checkedKeys: store.getCheckedKeys(),\n          halfCheckedNodes: store.getHalfCheckedNodes(),\n          halfCheckedKeys: store.getHalfCheckedKeys(),\n        })\n      })\n    }\n\n    const handleChildNodeExpand = (\n      nodeData: TreeNodeData,\n      node: Node,\n      instance: ComponentInternalInstance\n    ) => {\n      broadcastExpanded(node)\n      tree.ctx.emit('node-expand', nodeData, node, instance)\n    }\n\n    const handleDragStart = (event: DragEvent) => {\n      if (!tree.props.draggable) return\n      dragEvents.treeNodeDragStart({ event, treeNode: props })\n    }\n\n    const handleDragOver = (event: DragEvent) => {\n      if (!tree.props.draggable) return\n      dragEvents.treeNodeDragOver({\n        event,\n        treeNode: { $el: node$.value, node: props.node },\n      })\n      event.preventDefault()\n    }\n\n    const handleDrop = (event: DragEvent) => {\n      event.preventDefault()\n    }\n\n    const handleDragEnd = (event: DragEvent) => {\n      if (!tree.props.draggable) return\n      dragEvents.treeNodeDragEnd(event)\n    }\n\n    return {\n      node$,\n      tree,\n      expanded,\n      childNodeRendered,\n      oldChecked,\n      oldIndeterminate,\n      getNodeKey,\n      getNodeClass,\n      handleSelectChange,\n      handleClick,\n      handleContextMenu,\n      handleExpandIconClick,\n      handleCheckChange,\n      handleChildNodeExpand,\n      handleDragStart,\n      handleDragOver,\n      handleDrop,\n      handleDragEnd,\n      CaretRight,\n    }\n  },\n})\n</script>\n"],"names":["defineComponent","ElCollapseTransition","ElCheckbox","NodeContent","ElIcon","Loading","Node","useNodeExpandEventBroadcast","inject","ref","dragEventsKey","getCurrentInstance","getNodeKeyUtil","isFunction","isString","CaretRight"],"mappings":"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"}

package/lib/components/tree/src/tree-node.vue_vue_type_template_id_62959aba_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"tree-node.vue_vue_type_template_id_62959aba_lang.js","sources":["../../../../../../packages/components/tree/src/tree-node.vue?vue&type=template&id=62959aba&lang.js"],"sourcesContent":["<template>\n  <div\n    v-show=\"node.visible\"\n    ref=\"node$\"\n    class=\"el-tree-node\"\n    :class=\"{\n      'is-expanded': expanded,\n      'is-current': node.isCurrent,\n      'is-hidden': !node.visible,\n      'is-focusable': !node.disabled,\n      'is-checked': !node.disabled && node.checked,\n      ...getNodeClass(node),\n    }\"\n    role=\"treeitem\"\n    tabindex=\"-1\"\n    :aria-expanded=\"expanded\"\n    :aria-disabled=\"node.disabled\"\n    :aria-checked=\"node.checked\"\n    :draggable=\"tree.props.draggable\"\n    :data-key=\"getNodeKey(node)\"\n    @click.stop=\"handleClick\"\n    @contextmenu=\"handleContextMenu\"\n    @dragstart.stop=\"handleDragStart\"\n    @dragover.stop=\"handleDragOver\"\n    @dragend.stop=\"handleDragEnd\"\n    @drop.stop=\"handleDrop\"\n  >\n    <div\n      class=\"el-tree-node__content\"\n      :style=\"{ paddingLeft: (node.level - 1) * tree.props.indent + 'px' }\"\n    >\n      <el-icon\n        v-if=\"tree.props.icon || CaretRight\"\n        :class=\"[\n          {\n            'is-leaf': node.isLeaf,\n            expanded: !node.isLeaf && expanded,\n          },\n          'el-tree-node__expand-icon',\n        ]\"\n        @click.stop=\"handleExpandIconClick\"\n      >\n        <component :is=\"tree.props.icon || CaretRight\"></component>\n      </el-icon>\n      <el-checkbox\n        v-if=\"showCheckbox\"\n        :model-value=\"node.checked\"\n        :indeterminate=\"node.indeterminate\"\n        :disabled=\"!!node.disabled\"\n        @click.stop\n        @change=\"handleCheckChange\"\n      />\n      <el-icon\n        v-if=\"node.loading\"\n        class=\"el-tree-node__loading-icon is-loading\"\n      >\n        <loading />\n      </el-icon>\n      <node-content :node=\"node\" :render-content=\"renderContent\" />\n    </div>\n    <el-collapse-transition>\n      <div\n        v-if=\"!renderAfterExpand || childNodeRendered\"\n        v-show=\"expanded\"\n        class=\"el-tree-node__children\"\n        role=\"group\"\n        :aria-expanded=\"expanded\"\n      >\n        <el-tree-node\n          v-for=\"child in node.childNodes\"\n          :key=\"getNodeKey(child)\"\n          :render-content=\"renderContent\"\n          :render-after-expand=\"renderAfterExpand\"\n          :show-checkbox=\"showCheckbox\"\n          :node=\"child\"\n          :props=\"props\"\n          @node-expand=\"handleChildNodeExpand\"\n        />\n      </div>\n    </el-collapse-transition>\n  </div>\n</template>\n<script lang=\"ts\">\nimport {\n  defineComponent,\n  getCurrentInstance,\n  ref,\n  watch,\n  nextTick,\n  inject,\n  provide,\n} from 'vue'\nimport { isString, isFunction } from '@vue/shared'\nimport ElCollapseTransition from '@element-plus/components/collapse-transition'\nimport ElCheckbox from '@element-plus/components/checkbox'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { CaretRight, Loading } from '@element-plus/icons'\nimport { debugWarn } from '@element-plus/utils/error'\nimport NodeContent from './tree-node-content.vue'\nimport { getNodeKey as getNodeKeyUtil } from './model/util'\nimport { useNodeExpandEventBroadcast } from './model/useNodeExpandEventBroadcast'\nimport { dragEventsKey } from './model/useDragNode'\nimport Node from './model/node'\n\nimport type { ComponentInternalInstance, PropType } from 'vue'\nimport type { Nullable } from '@element-plus/utils/types'\nimport type { TreeOptionProps, TreeNodeData, RootTreeType } from './tree.type'\n\nexport default defineComponent({\n  name: 'ElTreeNode',\n  components: {\n    ElCollapseTransition,\n    ElCheckbox,\n    NodeContent,\n    ElIcon,\n    Loading,\n  },\n  props: {\n    node: {\n      type: Node,\n      default: () => ({}),\n    },\n    props: {\n      type: Object as PropType<TreeOptionProps>,\n      default: () => ({}),\n    },\n    accordion: Boolean,\n    renderContent: Function,\n    renderAfterExpand: Boolean,\n    showCheckbox: {\n      type: Boolean,\n      default: false,\n    },\n  },\n  emits: ['node-expand'],\n  setup(props, ctx) {\n    const { broadcastExpanded } = useNodeExpandEventBroadcast(props)\n    const tree = inject<RootTreeType>('RootTree')\n    const expanded = ref(false)\n    const childNodeRendered = ref(false)\n    const oldChecked = ref<boolean>(null)\n    const oldIndeterminate = ref<boolean>(null)\n    const node$ = ref<Nullable<HTMLElement>>(null)\n    const dragEvents = inject(dragEventsKey)\n    const instance = getCurrentInstance()\n\n    provide('NodeInstance', instance)\n    if (!tree) {\n      debugWarn('Tree', \"Can not find node's tree.\")\n    }\n\n    if (props.node.expanded) {\n      expanded.value = true\n      childNodeRendered.value = true\n    }\n\n    const childrenKey = tree.props['children'] || 'children'\n    watch(\n      () => {\n        const children = props.node.data[childrenKey]\n        return children && [...children]\n      },\n      () => {\n        props.node.updateChildren()\n      }\n    )\n\n    watch(\n      () => props.node.indeterminate,\n      (val) => {\n        handleSelectChange(props.node.checked, val)\n      }\n    )\n\n    watch(\n      () => props.node.checked,\n      (val) => {\n        handleSelectChange(val, props.node.indeterminate)\n      }\n    )\n\n    watch(\n      () => props.node.expanded,\n      (val) => {\n        nextTick(() => (expanded.value = val))\n        if (val) {\n          childNodeRendered.value = true\n        }\n      }\n    )\n\n    const getNodeKey = (node: Node): any => {\n      return getNodeKeyUtil(tree.props.nodeKey, node.data)\n    }\n\n    const getNodeClass = (node: Node) => {\n      const nodeClassFunc = props.props.class\n      if (!nodeClassFunc) {\n        return {}\n      }\n      let className\n      if (isFunction(nodeClassFunc)) {\n        const { data } = node\n        className = nodeClassFunc(data, node)\n      } else {\n        className = nodeClassFunc\n      }\n\n      if (isString(className)) {\n        return { [className]: true }\n      } else {\n        return className\n      }\n    }\n\n    const handleSelectChange = (checked: boolean, indeterminate: boolean) => {\n      if (\n        oldChecked.value !== checked ||\n        oldIndeterminate.value !== indeterminate\n      ) {\n        tree.ctx.emit('check-change', props.node.data, checked, indeterminate)\n      }\n      oldChecked.value = checked\n      oldIndeterminate.value = indeterminate\n    }\n\n    const handleClick = () => {\n      const store = tree.store.value\n      store.setCurrentNode(props.node)\n      tree.ctx.emit(\n        'current-change',\n        store.currentNode ? store.currentNode.data : null,\n        store.currentNode\n      )\n      tree.currentNode.value = props.node\n\n      if (tree.props.expandOnClickNode) {\n        handleExpandIconClick()\n      }\n\n      if (tree.props.checkOnClickNode && !props.node.disabled) {\n        handleCheckChange(null, {\n          target: { checked: !props.node.checked },\n        })\n      }\n      tree.ctx.emit('node-click', props.node.data, props.node, instance)\n    }\n\n    const handleContextMenu = (event: Event) => {\n      if (tree.instance.vnode.props['onNodeContextmenu']) {\n        event.stopPropagation()\n        event.preventDefault()\n      }\n      tree.ctx.emit(\n        'node-contextmenu',\n        event,\n        props.node.data,\n        props.node,\n        instance\n      )\n    }\n\n    const handleExpandIconClick = () => {\n      if (props.node.isLeaf) return\n      if (expanded.value) {\n        tree.ctx.emit('node-collapse', props.node.data, props.node, instance)\n        props.node.collapse()\n      } else {\n        props.node.expand()\n        ctx.emit('node-expand', props.node.data, props.node, instance)\n      }\n    }\n\n    const handleCheckChange = (value, ev) => {\n      props.node.setChecked(ev.target.checked, !tree.props.checkStrictly)\n      nextTick(() => {\n        const store = tree.store.value\n        tree.ctx.emit('check', props.node.data, {\n          checkedNodes: store.getCheckedNodes(),\n          checkedKeys: store.getCheckedKeys(),\n          halfCheckedNodes: store.getHalfCheckedNodes(),\n          halfCheckedKeys: store.getHalfCheckedKeys(),\n        })\n      })\n    }\n\n    const handleChildNodeExpand = (\n      nodeData: TreeNodeData,\n      node: Node,\n      instance: ComponentInternalInstance\n    ) => {\n      broadcastExpanded(node)\n      tree.ctx.emit('node-expand', nodeData, node, instance)\n    }\n\n    const handleDragStart = (event: DragEvent) => {\n      if (!tree.props.draggable) return\n      dragEvents.treeNodeDragStart({ event, treeNode: props })\n    }\n\n    const handleDragOver = (event: DragEvent) => {\n      if (!tree.props.draggable) return\n      dragEvents.treeNodeDragOver({\n        event,\n        treeNode: { $el: node$.value, node: props.node },\n      })\n      event.preventDefault()\n    }\n\n    const handleDrop = (event: DragEvent) => {\n      event.preventDefault()\n    }\n\n    const handleDragEnd = (event: DragEvent) => {\n      if (!tree.props.draggable) return\n      dragEvents.treeNodeDragEnd(event)\n    }\n\n    return {\n      node$,\n      tree,\n      expanded,\n      childNodeRendered,\n      oldChecked,\n      oldIndeterminate,\n      getNodeKey,\n      getNodeClass,\n      handleSelectChange,\n      handleClick,\n      handleContextMenu,\n      handleExpandIconClick,\n      handleCheckChange,\n      handleChildNodeExpand,\n      handleDragStart,\n      handleDragOver,\n      handleDrop,\n      handleDragEnd,\n      CaretRight,\n    }\n  },\n})\n</script>\n"],"names":["_createElementBlock","_createElementVNode","_createBlock","_createVNode"],"mappings":";;;;;;;;;;;;;;;8CACEA;IAEE,KAAI;AAAA,IACJ,2BAAM;;;;;;;;IASN,MAAK;AAAA,IACL,UAAS;AAAA,IACR,iBAAe;IACf,iBAAe,UAAK;AAAA,IACpB,gBAAc,UAAK;AAAA,IACnB,WAAW,UAAK,MAAM;AAAA,IACtB,YAAU,gBAAW;IACrB,kEAAY;IACZ,sDAAa;IACb,sEAAgB;IAChB,qEAAe;IACf,oEAAc;IACd,iEAAW;;IAEZC;MACE,OAAM;AAAA,MACL,yCAAuB,WAAK,aAAa,UAAK,MAAM;;MAG7C,UAAK,MAAM,QAAQ,oCAD3BC;;QAEG;;;;;;;QAOA,2BAAY;;6BAEb;4BAAAA,4CAAgB,UAAK,MAAM,QAAQ;;;;MAG7B,sCADRA;;QAEG,eAAa,UAAK;AAAA,QAClB,eAAe,UAAK;AAAA,QACpB,YAAY,UAAK;AAAA,QACjB,qDAAD;;QACC,UAAQ;;MAGH,UAAK,4BADbA;;QAEE,OAAM;AAAA;6BAEN;UAAAC;;;;MAEFA;QAAe,MAAM;QAAO,kBAAgB;;;IAE9CA;2BACE;SACS,0BAAqB,8DAD9BH;;UAGE,OAAM;AAAA,UACN,MAAK;AAAA,UACJ,iBAAe;;gCAEhBA,0DACkB,UAAK,aAAd;oCADTE;cAEG,KAAK,gBAAW;AAAA,cAChB,kBAAgB;cAChB,uBAAqB;cACrB,iBAAe;cACf,MAAM;AAAA,cACN,OAAO;cACP,cAAa;;;;sBAbR;;;;;;gBA7DJ,UAAK;AAAA;AAAA;;;;"}
+{"version":3,"file":"tree-node.vue_vue_type_template_id_62959aba_lang.js","sources":["../../../../../../packages/components/tree/src/tree-node.vue?vue&type=template&id=62959aba&lang.js"],"sourcesContent":["<template>\n  <div\n    v-show=\"node.visible\"\n    ref=\"node$\"\n    class=\"el-tree-node\"\n    :class=\"{\n      'is-expanded': expanded,\n      'is-current': node.isCurrent,\n      'is-hidden': !node.visible,\n      'is-focusable': !node.disabled,\n      'is-checked': !node.disabled && node.checked,\n      ...getNodeClass(node),\n    }\"\n    role=\"treeitem\"\n    tabindex=\"-1\"\n    :aria-expanded=\"expanded\"\n    :aria-disabled=\"node.disabled\"\n    :aria-checked=\"node.checked\"\n    :draggable=\"tree.props.draggable\"\n    :data-key=\"getNodeKey(node)\"\n    @click.stop=\"handleClick\"\n    @contextmenu=\"handleContextMenu\"\n    @dragstart.stop=\"handleDragStart\"\n    @dragover.stop=\"handleDragOver\"\n    @dragend.stop=\"handleDragEnd\"\n    @drop.stop=\"handleDrop\"\n  >\n    <div\n      class=\"el-tree-node__content\"\n      :style=\"{ paddingLeft: (node.level - 1) * tree.props.indent + 'px' }\"\n    >\n      <el-icon\n        v-if=\"tree.props.icon || CaretRight\"\n        :class=\"[\n          {\n            'is-leaf': node.isLeaf,\n            expanded: !node.isLeaf && expanded,\n          },\n          'el-tree-node__expand-icon',\n        ]\"\n        @click.stop=\"handleExpandIconClick\"\n      >\n        <component :is=\"tree.props.icon || CaretRight\"></component>\n      </el-icon>\n      <el-checkbox\n        v-if=\"showCheckbox\"\n        :model-value=\"node.checked\"\n        :indeterminate=\"node.indeterminate\"\n        :disabled=\"!!node.disabled\"\n        @click.stop\n        @change=\"handleCheckChange\"\n      />\n      <el-icon\n        v-if=\"node.loading\"\n        class=\"el-tree-node__loading-icon is-loading\"\n      >\n        <loading />\n      </el-icon>\n      <node-content :node=\"node\" :render-content=\"renderContent\" />\n    </div>\n    <el-collapse-transition>\n      <div\n        v-if=\"!renderAfterExpand || childNodeRendered\"\n        v-show=\"expanded\"\n        class=\"el-tree-node__children\"\n        role=\"group\"\n        :aria-expanded=\"expanded\"\n      >\n        <el-tree-node\n          v-for=\"child in node.childNodes\"\n          :key=\"getNodeKey(child)\"\n          :render-content=\"renderContent\"\n          :render-after-expand=\"renderAfterExpand\"\n          :show-checkbox=\"showCheckbox\"\n          :node=\"child\"\n          :props=\"props\"\n          @node-expand=\"handleChildNodeExpand\"\n        />\n      </div>\n    </el-collapse-transition>\n  </div>\n</template>\n<script lang=\"ts\">\nimport {\n  defineComponent,\n  getCurrentInstance,\n  ref,\n  watch,\n  nextTick,\n  inject,\n  provide,\n} from 'vue'\nimport { isString, isFunction } from '@vue/shared'\nimport ElCollapseTransition from '@element-plus/components/collapse-transition'\nimport ElCheckbox from '@element-plus/components/checkbox'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { CaretRight, Loading } from '@element-plus/icons-vue'\nimport { debugWarn } from '@element-plus/utils/error'\nimport NodeContent from './tree-node-content.vue'\nimport { getNodeKey as getNodeKeyUtil } from './model/util'\nimport { useNodeExpandEventBroadcast } from './model/useNodeExpandEventBroadcast'\nimport { dragEventsKey } from './model/useDragNode'\nimport Node from './model/node'\n\nimport type { ComponentInternalInstance, PropType } from 'vue'\nimport type { Nullable } from '@element-plus/utils/types'\nimport type { TreeOptionProps, TreeNodeData, RootTreeType } from './tree.type'\n\nexport default defineComponent({\n  name: 'ElTreeNode',\n  components: {\n    ElCollapseTransition,\n    ElCheckbox,\n    NodeContent,\n    ElIcon,\n    Loading,\n  },\n  props: {\n    node: {\n      type: Node,\n      default: () => ({}),\n    },\n    props: {\n      type: Object as PropType<TreeOptionProps>,\n      default: () => ({}),\n    },\n    accordion: Boolean,\n    renderContent: Function,\n    renderAfterExpand: Boolean,\n    showCheckbox: {\n      type: Boolean,\n      default: false,\n    },\n  },\n  emits: ['node-expand'],\n  setup(props, ctx) {\n    const { broadcastExpanded } = useNodeExpandEventBroadcast(props)\n    const tree = inject<RootTreeType>('RootTree')\n    const expanded = ref(false)\n    const childNodeRendered = ref(false)\n    const oldChecked = ref<boolean>(null)\n    const oldIndeterminate = ref<boolean>(null)\n    const node$ = ref<Nullable<HTMLElement>>(null)\n    const dragEvents = inject(dragEventsKey)\n    const instance = getCurrentInstance()\n\n    provide('NodeInstance', instance)\n    if (!tree) {\n      debugWarn('Tree', \"Can not find node's tree.\")\n    }\n\n    if (props.node.expanded) {\n      expanded.value = true\n      childNodeRendered.value = true\n    }\n\n    const childrenKey = tree.props['children'] || 'children'\n    watch(\n      () => {\n        const children = props.node.data[childrenKey]\n        return children && [...children]\n      },\n      () => {\n        props.node.updateChildren()\n      }\n    )\n\n    watch(\n      () => props.node.indeterminate,\n      (val) => {\n        handleSelectChange(props.node.checked, val)\n      }\n    )\n\n    watch(\n      () => props.node.checked,\n      (val) => {\n        handleSelectChange(val, props.node.indeterminate)\n      }\n    )\n\n    watch(\n      () => props.node.expanded,\n      (val) => {\n        nextTick(() => (expanded.value = val))\n        if (val) {\n          childNodeRendered.value = true\n        }\n      }\n    )\n\n    const getNodeKey = (node: Node): any => {\n      return getNodeKeyUtil(tree.props.nodeKey, node.data)\n    }\n\n    const getNodeClass = (node: Node) => {\n      const nodeClassFunc = props.props.class\n      if (!nodeClassFunc) {\n        return {}\n      }\n      let className\n      if (isFunction(nodeClassFunc)) {\n        const { data } = node\n        className = nodeClassFunc(data, node)\n      } else {\n        className = nodeClassFunc\n      }\n\n      if (isString(className)) {\n        return { [className]: true }\n      } else {\n        return className\n      }\n    }\n\n    const handleSelectChange = (checked: boolean, indeterminate: boolean) => {\n      if (\n        oldChecked.value !== checked ||\n        oldIndeterminate.value !== indeterminate\n      ) {\n        tree.ctx.emit('check-change', props.node.data, checked, indeterminate)\n      }\n      oldChecked.value = checked\n      oldIndeterminate.value = indeterminate\n    }\n\n    const handleClick = () => {\n      const store = tree.store.value\n      store.setCurrentNode(props.node)\n      tree.ctx.emit(\n        'current-change',\n        store.currentNode ? store.currentNode.data : null,\n        store.currentNode\n      )\n      tree.currentNode.value = props.node\n\n      if (tree.props.expandOnClickNode) {\n        handleExpandIconClick()\n      }\n\n      if (tree.props.checkOnClickNode && !props.node.disabled) {\n        handleCheckChange(null, {\n          target: { checked: !props.node.checked },\n        })\n      }\n      tree.ctx.emit('node-click', props.node.data, props.node, instance)\n    }\n\n    const handleContextMenu = (event: Event) => {\n      if (tree.instance.vnode.props['onNodeContextmenu']) {\n        event.stopPropagation()\n        event.preventDefault()\n      }\n      tree.ctx.emit(\n        'node-contextmenu',\n        event,\n        props.node.data,\n        props.node,\n        instance\n      )\n    }\n\n    const handleExpandIconClick = () => {\n      if (props.node.isLeaf) return\n      if (expanded.value) {\n        tree.ctx.emit('node-collapse', props.node.data, props.node, instance)\n        props.node.collapse()\n      } else {\n        props.node.expand()\n        ctx.emit('node-expand', props.node.data, props.node, instance)\n      }\n    }\n\n    const handleCheckChange = (value, ev) => {\n      props.node.setChecked(ev.target.checked, !tree.props.checkStrictly)\n      nextTick(() => {\n        const store = tree.store.value\n        tree.ctx.emit('check', props.node.data, {\n          checkedNodes: store.getCheckedNodes(),\n          checkedKeys: store.getCheckedKeys(),\n          halfCheckedNodes: store.getHalfCheckedNodes(),\n          halfCheckedKeys: store.getHalfCheckedKeys(),\n        })\n      })\n    }\n\n    const handleChildNodeExpand = (\n      nodeData: TreeNodeData,\n      node: Node,\n      instance: ComponentInternalInstance\n    ) => {\n      broadcastExpanded(node)\n      tree.ctx.emit('node-expand', nodeData, node, instance)\n    }\n\n    const handleDragStart = (event: DragEvent) => {\n      if (!tree.props.draggable) return\n      dragEvents.treeNodeDragStart({ event, treeNode: props })\n    }\n\n    const handleDragOver = (event: DragEvent) => {\n      if (!tree.props.draggable) return\n      dragEvents.treeNodeDragOver({\n        event,\n        treeNode: { $el: node$.value, node: props.node },\n      })\n      event.preventDefault()\n    }\n\n    const handleDrop = (event: DragEvent) => {\n      event.preventDefault()\n    }\n\n    const handleDragEnd = (event: DragEvent) => {\n      if (!tree.props.draggable) return\n      dragEvents.treeNodeDragEnd(event)\n    }\n\n    return {\n      node$,\n      tree,\n      expanded,\n      childNodeRendered,\n      oldChecked,\n      oldIndeterminate,\n      getNodeKey,\n      getNodeClass,\n      handleSelectChange,\n      handleClick,\n      handleContextMenu,\n      handleExpandIconClick,\n      handleCheckChange,\n      handleChildNodeExpand,\n      handleDragStart,\n      handleDragOver,\n      handleDrop,\n      handleDragEnd,\n      CaretRight,\n    }\n  },\n})\n</script>\n"],"names":["_createElementBlock","_createElementVNode","_createBlock","_createVNode"],"mappings":";;;;;;;;;;;;;;;8CACEA;IAEE,KAAI;AAAA,IACJ,2BAAM;;;;;;;;IASN,MAAK;AAAA,IACL,UAAS;AAAA,IACR,iBAAe;IACf,iBAAe,UAAK;AAAA,IACpB,gBAAc,UAAK;AAAA,IACnB,WAAW,UAAK,MAAM;AAAA,IACtB,YAAU,gBAAW;IACrB,kEAAY;IACZ,sDAAa;IACb,sEAAgB;IAChB,qEAAe;IACf,oEAAc;IACd,iEAAW;;IAEZC;MACE,OAAM;AAAA,MACL,yCAAuB,WAAK,aAAa,UAAK,MAAM;;MAG7C,UAAK,MAAM,QAAQ,oCAD3BC;;QAEG;;;;;;;QAOA,2BAAY;;6BAEb;4BAAAA,4CAAgB,UAAK,MAAM,QAAQ;;;;MAG7B,sCADRA;;QAEG,eAAa,UAAK;AAAA,QAClB,eAAe,UAAK;AAAA,QACpB,YAAY,UAAK;AAAA,QACjB,qDAAD;;QACC,UAAQ;;MAGH,UAAK,4BADbA;;QAEE,OAAM;AAAA;6BAEN;UAAAC;;;;MAEFA;QAAe,MAAM;QAAO,kBAAgB;;;IAE9CA;2BACE;SACS,0BAAqB,8DAD9BH;;UAGE,OAAM;AAAA,UACN,MAAK;AAAA,UACJ,iBAAe;;gCAEhBA,0DACkB,UAAK,aAAd;oCADTE;cAEG,KAAK,gBAAW;AAAA,cAChB,kBAAgB;cAChB,uBAAqB;cACrB,iBAAe;cACf,MAAM;AAAA,cACN,OAAO;cACP,cAAa;;;;sBAbR;;;;;;gBA7DJ,UAAK;AAAA;AAAA;;;;"}

package/lib/components/tree/src/tree.vue.d.ts

@@ -419,9 +419,9 @@ declare const _default: import("vue").DefineComponent<{
     draggable: boolean;
     highlightCurrent: boolean;
 } & {
-    emptyText?: string | undefined;
     icon?: string | Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions> | undefined;
     load?: import("./tree.type").LoadFunction | undefined;
+    emptyText?: string | undefined;
     renderContent?: Function | undefined;
     defaultCheckedKeys?: TreeKey[] | undefined;
     defaultExpandedKeys?: TreeKey[] | undefined;

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

@@ -77,8 +77,8 @@ export declare const ElTreeV2: import("../../utils/types").SFCWithInstall<import
     highlightCurrent: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     perfMode: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
 } & {
-    emptyText?: string | undefined;
     icon?: string | undefined;
+    emptyText?: string | undefined;
     filterMethod?: import("./src/types").FilterMethod | undefined;
     currentNodeKey?: import("../../utils/props").BuildPropType<import("../../utils/props").PropWrapper<import("./src/types").TreeKey>, unknown, unknown> | undefined;
 }> & {
@@ -90,11 +90,11 @@ export declare const ElTreeV2: import("../../utils/types").SFCWithInstall<import
     "onNode-contextmenu"?: ((event: Event, data: import("../tree/src/tree.type").TreeNodeData, node: import("./src/types").TreeNode) => any) | undefined;
     "onNode-collapse"?: ((data: import("../tree/src/tree.type").TreeNodeData, node: import("./src/types").TreeNode) => any) | undefined;
 }, {
-    emptyText: string;
     icon: string;
     props: import("./src/types").TreeOptionProps;
     data: import("./src/types").TreeData;
     height: number;
+    emptyText: string;
     checkStrictly: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     filterMethod: import("./src/types").FilterMethod;
     accordion: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;

package/lib/components/tree-v2/src/composables/useTree.d.ts

@@ -0,0 +1,29 @@
+import type { TreeProps, TreeNodeData, TreeKey, TreeNode, TreeData, Tree } from '../types';
+export declare function useTree(props: TreeProps, emit: any): {
+    tree: import("@vue/reactivity").ShallowRef<Tree | undefined>;
+    flattenTree: import("vue").ComputedRef<TreeNode[]>;
+    isNotEmpty: import("vue").ComputedRef<boolean>;
+    getKey: (node: TreeNodeData) => TreeKey;
+    getChildren: (node: TreeNodeData) => TreeNodeData[];
+    toggleExpand: (node: TreeNode) => void;
+    toggleCheckbox: (node: TreeNode, isChecked: boolean, nodeClick?: boolean) => void;
+    isExpanded: (node: TreeNode) => boolean;
+    isChecked: (node: TreeNode) => boolean;
+    isIndeterminate: (node: TreeNode) => boolean;
+    isDisabled: (node: TreeNode) => boolean;
+    isCurrent: (node: TreeNode) => boolean;
+    isForceHiddenExpandIcon: (node: TreeNode) => boolean;
+    handleNodeClick: (node: TreeNode) => void;
+    handleNodeCheck: (node: TreeNode, checked: boolean) => void;
+    getCurrentNode: () => TreeNodeData | undefined;
+    getCurrentKey: () => TreeKey | undefined;
+    setCurrentKey: (key: TreeKey) => void;
+    getCheckedKeys: (leafOnly?: boolean) => TreeKey[];
+    getCheckedNodes: (leafOnly?: boolean) => TreeNodeData[];
+    getHalfCheckedKeys: () => TreeKey[];
+    getHalfCheckedNodes: () => TreeNodeData[];
+    setChecked: (key: TreeKey, isChecked: boolean) => void;
+    setCheckedKeys: (keys: TreeKey[]) => void;
+    filter: (query: string) => void;
+    setData: (data: TreeData) => void;
+};

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

@@ -34,11 +34,11 @@ declare const _default: import("vue").DefineComponent<{
 } & {
     disabled: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     expanded: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
+    current: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     indeterminate: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     checked: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     node: import("./types").TreeNode;
     showCheckbox: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
-    current: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     hiddenExpandIcon: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
 } & {}> & {
     onClick?: ((node: import("./types").TreeNode) => any) | undefined;
@@ -47,11 +47,11 @@ declare const _default: import("vue").DefineComponent<{
 }, {
     disabled: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     expanded: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
+    current: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     indeterminate: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     checked: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     node: import("./types").TreeNode;
     showCheckbox: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
-    current: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     hiddenExpandIcon: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
 }>;
 export default _default;

package/lib/components/tree-v2/src/tree-node.vue_vue_type_script_lang.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var vue = require('vue');
-var icons = require('@element-plus/icons');
+var iconsVue = require('@element-plus/icons-vue');
 var index = require('../../icon/index.js');
 var index$1 = require('../../checkbox/index.js');
 var treeNodeContent = require('./tree-node-content.js');
@@ -14,7 +14,7 @@ var script = vue.defineComponent({
   name: "ElTreeNode",
   components: {
     ElIcon: index.ElIcon,
-    CaretRight: icons.CaretRight,
+    CaretRight: iconsVue.CaretRight,
     ElCheckbox: index$1.ElCheckbox,
     ElNodeContent: treeNodeContent["default"]
   },