@element-plus/nightly 0.0.20250501 → 0.0.20250502

package/lib/components/transfer/src/transfer2.js

@@ -2,80 +2,172 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var lodashUnified = require('lodash-unified');
-var runtime = require('../../../utils/vue/props/runtime.js');
-var typescript = require('../../../utils/typescript.js');
-var shared = require('@vue/shared');
-var event = require('../../../constants/event.js');
+var vue = require('vue');
+var index$2 = require('../../button/index.js');
+var index$3 = require('../../icon/index.js');
+var iconsVue = require('@element-plus/icons-vue');
+var transfer = require('./transfer.js');
+var transferPanel = require('./transfer-panel2.js');
+var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
+var useComputedData = require('./composables/use-computed-data.js');
+var useMove = require('./composables/use-move.js');
+var useCheckedChange = require('./composables/use-checked-change.js');
+var index = require('../../../hooks/use-locale/index.js');
+var index$1 = require('../../../hooks/use-namespace/index.js');
+var useFormItem = require('../../form/src/hooks/use-form-item.js');
+var usePropsAlias = require('./composables/use-props-alias.js');
+var error = require('../../../utils/error.js');
+var types = require('../../../utils/types.js');
 
-const LEFT_CHECK_CHANGE_EVENT = "left-check-change";
-const RIGHT_CHECK_CHANGE_EVENT = "right-check-change";
-const transferProps = runtime.buildProps({
-  data: {
-    type: runtime.definePropType(Array),
-    default: () => []
-  },
-  titles: {
-    type: runtime.definePropType(Array),
-    default: () => []
-  },
-  buttonTexts: {
-    type: runtime.definePropType(Array),
-    default: () => []
-  },
-  filterPlaceholder: String,
-  filterMethod: {
-    type: runtime.definePropType(Function)
-  },
-  leftDefaultChecked: {
-    type: runtime.definePropType(Array),
-    default: () => []
-  },
-  rightDefaultChecked: {
-    type: runtime.definePropType(Array),
-    default: () => []
-  },
-  renderContent: {
-    type: runtime.definePropType(Function)
-  },
-  modelValue: {
-    type: runtime.definePropType(Array),
-    default: () => []
-  },
-  format: {
-    type: runtime.definePropType(Object),
-    default: () => ({})
-  },
-  filterable: Boolean,
-  props: {
-    type: runtime.definePropType(Object),
-    default: () => typescript.mutable({
-      label: "label",
-      key: "key",
-      disabled: "disabled"
-    })
-  },
-  targetOrder: {
-    type: String,
-    values: ["original", "push", "unshift"],
-    default: "original"
-  },
-  validateEvent: {
-    type: Boolean,
-    default: true
+const __default__ = vue.defineComponent({
+  name: "ElTransfer"
+});
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  ...__default__,
+  props: transfer.transferProps,
+  emits: transfer.transferEmits,
+  setup(__props, { expose, emit }) {
+    const props = __props;
+    const slots = vue.useSlots();
+    const { t } = index.useLocale();
+    const ns = index$1.useNamespace("transfer");
+    const { formItem } = useFormItem.useFormItem();
+    const checkedState = vue.reactive({
+      leftChecked: [],
+      rightChecked: []
+    });
+    const propsAlias = usePropsAlias.usePropsAlias(props);
+    const { sourceData, targetData } = useComputedData.useComputedData(props);
+    const { onSourceCheckedChange, onTargetCheckedChange } = useCheckedChange.useCheckedChange(checkedState, emit);
+    const { addToLeft, addToRight } = useMove.useMove(props, checkedState, emit);
+    const leftPanel = vue.ref();
+    const rightPanel = vue.ref();
+    const clearQuery = (which) => {
+      switch (which) {
+        case "left":
+          leftPanel.value.query = "";
+          break;
+        case "right":
+          rightPanel.value.query = "";
+          break;
+      }
+    };
+    const hasButtonTexts = vue.computed(() => props.buttonTexts.length === 2);
+    const leftPanelTitle = vue.computed(() => props.titles[0] || t("el.transfer.titles.0"));
+    const rightPanelTitle = vue.computed(() => props.titles[1] || t("el.transfer.titles.1"));
+    const panelFilterPlaceholder = vue.computed(() => props.filterPlaceholder || t("el.transfer.filterPlaceholder"));
+    vue.watch(() => props.modelValue, () => {
+      var _a;
+      if (props.validateEvent) {
+        (_a = formItem == null ? void 0 : formItem.validate) == null ? void 0 : _a.call(formItem, "change").catch((err) => error.debugWarn(err));
+      }
+    });
+    const optionRender = vue.computed(() => (option) => {
+      var _a;
+      if (props.renderContent)
+        return props.renderContent(vue.h, option);
+      const defaultSlotVNodes = (((_a = slots.default) == null ? void 0 : _a.call(slots, { option })) || []).filter((node) => node.type !== vue.Comment);
+      if (defaultSlotVNodes.length) {
+        return defaultSlotVNodes;
+      }
+      return vue.h("span", option[propsAlias.value.label] || option[propsAlias.value.key]);
+    });
+    expose({
+      clearQuery,
+      leftPanel,
+      rightPanel
+    });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", {
+        class: vue.normalizeClass(vue.unref(ns).b())
+      }, [
+        vue.createVNode(transferPanel["default"], {
+          ref_key: "leftPanel",
+          ref: leftPanel,
+          data: vue.unref(sourceData),
+          "option-render": vue.unref(optionRender),
+          placeholder: vue.unref(panelFilterPlaceholder),
+          title: vue.unref(leftPanelTitle),
+          filterable: _ctx.filterable,
+          format: _ctx.format,
+          "filter-method": _ctx.filterMethod,
+          "default-checked": _ctx.leftDefaultChecked,
+          props: props.props,
+          onCheckedChange: vue.unref(onSourceCheckedChange)
+        }, {
+          empty: vue.withCtx(() => [
+            vue.renderSlot(_ctx.$slots, "left-empty")
+          ]),
+          default: vue.withCtx(() => [
+            vue.renderSlot(_ctx.$slots, "left-footer")
+          ]),
+          _: 3
+        }, 8, ["data", "option-render", "placeholder", "title", "filterable", "format", "filter-method", "default-checked", "props", "onCheckedChange"]),
+        vue.createElementVNode("div", {
+          class: vue.normalizeClass(vue.unref(ns).e("buttons"))
+        }, [
+          vue.createVNode(vue.unref(index$2.ElButton), {
+            type: "primary",
+            class: vue.normalizeClass([vue.unref(ns).e("button"), vue.unref(ns).is("with-texts", vue.unref(hasButtonTexts))]),
+            disabled: vue.unref(types.isEmpty)(checkedState.rightChecked),
+            onClick: vue.unref(addToLeft)
+          }, {
+            default: vue.withCtx(() => [
+              vue.createVNode(vue.unref(index$3.ElIcon), null, {
+                default: vue.withCtx(() => [
+                  vue.createVNode(vue.unref(iconsVue.ArrowLeft))
+                ]),
+                _: 1
+              }),
+              !vue.unref(types.isUndefined)(_ctx.buttonTexts[0]) ? (vue.openBlock(), vue.createElementBlock("span", { key: 0 }, vue.toDisplayString(_ctx.buttonTexts[0]), 1)) : vue.createCommentVNode("v-if", true)
+            ]),
+            _: 1
+          }, 8, ["class", "disabled", "onClick"]),
+          vue.createVNode(vue.unref(index$2.ElButton), {
+            type: "primary",
+            class: vue.normalizeClass([vue.unref(ns).e("button"), vue.unref(ns).is("with-texts", vue.unref(hasButtonTexts))]),
+            disabled: vue.unref(types.isEmpty)(checkedState.leftChecked),
+            onClick: vue.unref(addToRight)
+          }, {
+            default: vue.withCtx(() => [
+              !vue.unref(types.isUndefined)(_ctx.buttonTexts[1]) ? (vue.openBlock(), vue.createElementBlock("span", { key: 0 }, vue.toDisplayString(_ctx.buttonTexts[1]), 1)) : vue.createCommentVNode("v-if", true),
+              vue.createVNode(vue.unref(index$3.ElIcon), null, {
+                default: vue.withCtx(() => [
+                  vue.createVNode(vue.unref(iconsVue.ArrowRight))
+                ]),
+                _: 1
+              })
+            ]),
+            _: 1
+          }, 8, ["class", "disabled", "onClick"])
+        ], 2),
+        vue.createVNode(transferPanel["default"], {
+          ref_key: "rightPanel",
+          ref: rightPanel,
+          data: vue.unref(targetData),
+          "option-render": vue.unref(optionRender),
+          placeholder: vue.unref(panelFilterPlaceholder),
+          filterable: _ctx.filterable,
+          format: _ctx.format,
+          "filter-method": _ctx.filterMethod,
+          title: vue.unref(rightPanelTitle),
+          "default-checked": _ctx.rightDefaultChecked,
+          props: props.props,
+          onCheckedChange: vue.unref(onTargetCheckedChange)
+        }, {
+          empty: vue.withCtx(() => [
+            vue.renderSlot(_ctx.$slots, "right-empty")
+          ]),
+          default: vue.withCtx(() => [
+            vue.renderSlot(_ctx.$slots, "right-footer")
+          ]),
+          _: 3
+        }, 8, ["data", "option-render", "placeholder", "filterable", "format", "filter-method", "title", "default-checked", "props", "onCheckedChange"])
+      ], 2);
+    };
   }
 });
-const transferCheckedChangeFn = (value, movedKeys) => [value, movedKeys].every(shared.isArray) || shared.isArray(value) && lodashUnified.isNil(movedKeys);
-const transferEmits = {
-  [event.CHANGE_EVENT]: (value, direction, movedKeys) => [value, movedKeys].every(shared.isArray) && ["left", "right"].includes(direction),
-  [event.UPDATE_MODEL_EVENT]: (value) => shared.isArray(value),
-  [LEFT_CHECK_CHANGE_EVENT]: transferCheckedChangeFn,
-  [RIGHT_CHECK_CHANGE_EVENT]: transferCheckedChangeFn
-};
+var Transfer = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["__file", "transfer.vue"]]);
 
-exports.LEFT_CHECK_CHANGE_EVENT = LEFT_CHECK_CHANGE_EVENT;
-exports.RIGHT_CHECK_CHANGE_EVENT = RIGHT_CHECK_CHANGE_EVENT;
-exports.transferCheckedChangeFn = transferCheckedChangeFn;
-exports.transferEmits = transferEmits;
-exports.transferProps = transferProps;
+exports["default"] = Transfer;
 //# sourceMappingURL=transfer2.js.map

package/lib/components/transfer/src/transfer2.js.map

@@ -1 +1 @@
-{"version":3,"file":"transfer2.js","sources":["../../../../../../packages/components/transfer/src/transfer.ts"],"sourcesContent":["import { isNil } from 'lodash-unified'\nimport {\n  buildProps,\n  definePropType,\n  isArray,\n  mutable,\n} from '@element-plus/utils'\nimport { CHANGE_EVENT, UPDATE_MODEL_EVENT } from '@element-plus/constants'\n\nimport type { ExtractPropTypes, h as H, VNode } from 'vue'\nimport type Transfer from './transfer.vue'\n\nexport type TransferKey = string | number\nexport type TransferDirection = 'left' | 'right'\n\nexport type TransferDataItem = Record<string, any>\n\nexport type renderContent = (\n  h: typeof H,\n  option: TransferDataItem\n) => VNode | VNode[]\n\nexport interface TransferFormat {\n  noChecked?: string\n  hasChecked?: string\n}\n\nexport interface TransferPropsAlias {\n  label?: string\n  key?: string\n  disabled?: string\n}\n\nexport interface TransferCheckedState {\n  leftChecked: TransferKey[]\n  rightChecked: TransferKey[]\n}\n\nexport const LEFT_CHECK_CHANGE_EVENT = 'left-check-change'\nexport const RIGHT_CHECK_CHANGE_EVENT = 'right-check-change'\n\nexport const transferProps = buildProps({\n  /**\n   * @description data source\n   */\n  data: {\n    type: definePropType<TransferDataItem[]>(Array),\n    default: () => [],\n  },\n  /**\n   * @description custom list titles\n   */\n  titles: {\n    type: definePropType<[string, string]>(Array),\n    default: () => [],\n  },\n  /**\n   * @description custom button texts\n   */\n  buttonTexts: {\n    type: definePropType<[string, string]>(Array),\n    default: () => [],\n  },\n  /**\n   * @description placeholder for the filter input\n   */\n  filterPlaceholder: String,\n  /**\n   * @description custom filter method\n   */\n  filterMethod: {\n    type: definePropType<(query: string, item: TransferDataItem) => boolean>(\n      Function\n    ),\n  },\n  /**\n   * @description key array of initially checked data items of the left list\n   */\n  leftDefaultChecked: {\n    type: definePropType<TransferKey[]>(Array),\n    default: () => [],\n  },\n  /**\n   * @description key array of initially checked data items of the right list\n   */\n  rightDefaultChecked: {\n    type: definePropType<TransferKey[]>(Array),\n    default: () => [],\n  },\n  /**\n   * @description custom render function for data items\n   */\n  renderContent: {\n    type: definePropType<renderContent>(Function),\n  },\n  /**\n   * @description binding value\n   */\n  modelValue: {\n    type: definePropType<TransferKey[]>(Array),\n    default: () => [],\n  },\n  /**\n   * @description texts for checking status in list header\n   */\n  format: {\n    type: definePropType<TransferFormat>(Object),\n    default: () => ({}),\n  },\n  /**\n   * @description whether Transfer is filterable\n   */\n  filterable: Boolean,\n  /**\n   * @description prop aliases for data source\n   */\n  props: {\n    type: definePropType<TransferPropsAlias>(Object),\n    default: () =>\n      mutable({\n        label: 'label',\n        key: 'key',\n        disabled: 'disabled',\n      } as const),\n  },\n  /**\n   * @description order strategy for elements in the target list. If set to `original`, the elements will keep the same order as the data source. If set to `push`, the newly added elements will be pushed to the bottom. If set to `unshift`, the newly added elements will be inserted on the top\n   */\n  targetOrder: {\n    type: String,\n    values: ['original', 'push', 'unshift'],\n    default: 'original',\n  },\n  /**\n   * @description whether to trigger form validation\n   */\n  validateEvent: {\n    type: Boolean,\n    default: true,\n  },\n} as const)\nexport type TransferProps = ExtractPropTypes<typeof transferProps>\n\nexport const transferCheckedChangeFn = (\n  value: TransferKey[],\n  movedKeys?: TransferKey[]\n) => [value, movedKeys].every(isArray) || (isArray(value) && isNil(movedKeys))\n\nexport const transferEmits = {\n  [CHANGE_EVENT]: (\n    value: TransferKey[],\n    direction: TransferDirection,\n    movedKeys: TransferKey[]\n  ) =>\n    [value, movedKeys].every(isArray) && ['left', 'right'].includes(direction),\n  [UPDATE_MODEL_EVENT]: (value: TransferKey[]) => isArray(value),\n  [LEFT_CHECK_CHANGE_EVENT]: transferCheckedChangeFn,\n  [RIGHT_CHECK_CHANGE_EVENT]: transferCheckedChangeFn,\n}\nexport type TransferEmits = typeof transferEmits\n\nexport type TransferInstance = InstanceType<typeof Transfer> & unknown\n"],"names":["buildProps","definePropType","mutable","isArray","isNil","CHANGE_EVENT","UPDATE_MODEL_EVENT"],"mappings":";;;;;;;;;;AAQY,MAAC,uBAAuB,GAAG,oBAAoB;AAC/C,MAAC,wBAAwB,GAAG,qBAAqB;AACjD,MAAC,aAAa,GAAGA,kBAAU,CAAC;AACxC,EAAE,IAAI,EAAE;AACR,IAAI,IAAI,EAAEC,sBAAc,CAAC,KAAK,CAAC;AAC/B,IAAI,OAAO,EAAE,MAAM,EAAE;AACrB,GAAG;AACH,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAEA,sBAAc,CAAC,KAAK,CAAC;AAC/B,IAAI,OAAO,EAAE,MAAM,EAAE;AACrB,GAAG;AACH,EAAE,WAAW,EAAE;AACf,IAAI,IAAI,EAAEA,sBAAc,CAAC,KAAK,CAAC;AAC/B,IAAI,OAAO,EAAE,MAAM,EAAE;AACrB,GAAG;AACH,EAAE,iBAAiB,EAAE,MAAM;AAC3B,EAAE,YAAY,EAAE;AAChB,IAAI,IAAI,EAAEA,sBAAc,CAAC,QAAQ,CAAC;AAClC,GAAG;AACH,EAAE,kBAAkB,EAAE;AACtB,IAAI,IAAI,EAAEA,sBAAc,CAAC,KAAK,CAAC;AAC/B,IAAI,OAAO,EAAE,MAAM,EAAE;AACrB,GAAG;AACH,EAAE,mBAAmB,EAAE;AACvB,IAAI,IAAI,EAAEA,sBAAc,CAAC,KAAK,CAAC;AAC/B,IAAI,OAAO,EAAE,MAAM,EAAE;AACrB,GAAG;AACH,EAAE,aAAa,EAAE;AACjB,IAAI,IAAI,EAAEA,sBAAc,CAAC,QAAQ,CAAC;AAClC,GAAG;AACH,EAAE,UAAU,EAAE;AACd,IAAI,IAAI,EAAEA,sBAAc,CAAC,KAAK,CAAC;AAC/B,IAAI,OAAO,EAAE,MAAM,EAAE;AACrB,GAAG;AACH,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAEA,sBAAc,CAAC,MAAM,CAAC;AAChC,IAAI,OAAO,EAAE,OAAO,EAAE,CAAC;AACvB,GAAG;AACH,EAAE,UAAU,EAAE,OAAO;AACrB,EAAE,KAAK,EAAE;AACT,IAAI,IAAI,EAAEA,sBAAc,CAAC,MAAM,CAAC;AAChC,IAAI,OAAO,EAAE,MAAMC,kBAAO,CAAC;AAC3B,MAAM,KAAK,EAAE,OAAO;AACpB,MAAM,GAAG,EAAE,KAAK;AAChB,MAAM,QAAQ,EAAE,UAAU;AAC1B,KAAK,CAAC;AACN,GAAG;AACH,EAAE,WAAW,EAAE;AACf,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,MAAM,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,SAAS,CAAC;AAC3C,IAAI,OAAO,EAAE,UAAU;AACvB,GAAG;AACH,EAAE,aAAa,EAAE;AACjB,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,IAAI;AACjB,GAAG;AACH,CAAC,EAAE;AACS,MAAC,uBAAuB,GAAG,CAAC,KAAK,EAAE,SAAS,KAAK,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC,KAAK,CAACC,cAAO,CAAC,IAAIA,cAAO,CAAC,KAAK,CAAC,IAAIC,mBAAK,CAAC,SAAS,EAAE;AACzH,MAAC,aAAa,GAAG;AAC7B,EAAE,CAACC,kBAAY,GAAG,CAAC,KAAK,EAAE,SAAS,EAAE,SAAS,KAAK,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC,KAAK,CAACF,cAAO,CAAC,IAAI,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,QAAQ,CAAC,SAAS,CAAC;AAC7H,EAAE,CAACG,wBAAkB,GAAG,CAAC,KAAK,KAAKH,cAAO,CAAC,KAAK,CAAC;AACjD,EAAE,CAAC,uBAAuB,GAAG,uBAAuB;AACpD,EAAE,CAAC,wBAAwB,GAAG,uBAAuB;AACrD;;;;;;;;"}
+{"version":3,"file":"transfer2.js","sources":["../../../../../../packages/components/transfer/src/transfer.vue"],"sourcesContent":["<template>\n  <div :class=\"ns.b()\">\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.props\"\n      @checked-change=\"onSourceCheckedChange\"\n    >\n      <template #empty>\n        <slot name=\"left-empty\" />\n      </template>\n      <slot name=\"left-footer\" />\n    </transfer-panel>\n    <div :class=\"ns.e('buttons')\">\n      <el-button\n        type=\"primary\"\n        :class=\"[ns.e('button'), ns.is('with-texts', hasButtonTexts)]\"\n        :disabled=\"isEmpty(checkedState.rightChecked)\"\n        @click=\"addToLeft\"\n      >\n        <el-icon><arrow-left /></el-icon>\n        <span v-if=\"!isUndefined(buttonTexts[0])\">{{ buttonTexts[0] }}</span>\n      </el-button>\n      <el-button\n        type=\"primary\"\n        :class=\"[ns.e('button'), ns.is('with-texts', hasButtonTexts)]\"\n        :disabled=\"isEmpty(checkedState.leftChecked)\"\n        @click=\"addToRight\"\n      >\n        <span v-if=\"!isUndefined(buttonTexts[1])\">{{ 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.props\"\n      @checked-change=\"onTargetCheckedChange\"\n    >\n      <template #empty>\n        <slot name=\"right-empty\" />\n      </template>\n      <slot name=\"right-footer\" />\n    </transfer-panel>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { Comment, computed, h, reactive, ref, useSlots, watch } from 'vue'\nimport { debugWarn, isEmpty, isUndefined } from '@element-plus/utils'\nimport { useLocale, useNamespace } from '@element-plus/hooks'\nimport { ElButton } from '@element-plus/components/button'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { useFormItem } from '@element-plus/components/form'\nimport { ArrowLeft, ArrowRight } from '@element-plus/icons-vue'\nimport { transferEmits, transferProps } from './transfer'\nimport {\n  useCheckedChange,\n  useComputedData,\n  useMove,\n  usePropsAlias,\n} from './composables'\nimport TransferPanel from './transfer-panel.vue'\n\nimport type {\n  TransferCheckedState,\n  TransferDataItem,\n  TransferDirection,\n} from './transfer'\nimport type { TransferPanelInstance } from './transfer-panel'\n\ndefineOptions({\n  name: 'ElTransfer',\n})\n\nconst props = defineProps(transferProps)\nconst emit = defineEmits(transferEmits)\nconst slots = useSlots()\n\nconst { t } = useLocale()\nconst ns = useNamespace('transfer')\nconst { formItem } = useFormItem()\n\nconst checkedState = reactive<TransferCheckedState>({\n  leftChecked: [],\n  rightChecked: [],\n})\n\nconst propsAlias = usePropsAlias(props)\n\nconst { sourceData, targetData } = useComputedData(props)\n\nconst { onSourceCheckedChange, onTargetCheckedChange } = useCheckedChange(\n  checkedState,\n  emit\n)\n\nconst { addToLeft, addToRight } = useMove(props, checkedState, emit)\n\nconst leftPanel = ref<TransferPanelInstance>()\nconst rightPanel = ref<TransferPanelInstance>()\n\nconst clearQuery = (which: TransferDirection) => {\n  switch (which) {\n    case 'left':\n      leftPanel.value!.query = ''\n      break\n    case 'right':\n      rightPanel.value!.query = ''\n      break\n  }\n}\n\nconst hasButtonTexts = computed(() => props.buttonTexts.length === 2)\n\nconst leftPanelTitle = computed(\n  () => props.titles[0] || t('el.transfer.titles.0')\n)\n\nconst rightPanelTitle = computed(\n  () => props.titles[1] || t('el.transfer.titles.1')\n)\n\nconst panelFilterPlaceholder = computed(\n  () => props.filterPlaceholder || t('el.transfer.filterPlaceholder')\n)\n\nwatch(\n  () => props.modelValue,\n  () => {\n    if (props.validateEvent) {\n      formItem?.validate?.('change').catch((err) => debugWarn(err))\n    }\n  }\n)\n\nconst optionRender = computed(() => (option: TransferDataItem) => {\n  if (props.renderContent) return props.renderContent(h, option)\n\n  const defaultSlotVNodes = (slots.default?.({ option }) || []).filter(\n    (node) => node.type !== Comment\n  )\n  if (defaultSlotVNodes.length) {\n    return defaultSlotVNodes\n  }\n\n  return h(\n    'span',\n    option[propsAlias.value.label] || option[propsAlias.value.key]\n  )\n})\n\ndefineExpose({\n  /** @description clear the filter keyword of a certain panel */\n  clearQuery,\n  /** @description left panel ref */\n  leftPanel,\n  /** @description right panel ref */\n  rightPanel,\n})\n</script>\n"],"names":["useSlots","useLocale","useNamespace","useFormItem","reactive","usePropsAlias","useComputedData","useCheckedChange","useMove","ref","computed","watch","debugWarn","h","Comment","_normalizeClass","_unref","_createVNode","TransferPanel"],"mappings":"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"}

package/lib/components/watermark/index.js

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var watermark$1 = require('./src/watermark2.js');
-var watermark = require('./src/watermark.js');
+var watermark$1 = require('./src/watermark.js');
+var watermark = require('./src/watermark2.js');
 var install = require('../../utils/vue/install.js');
 
 const ElWatermark = install.withInstall(watermark$1["default"]);

package/lib/components/watermark/src/watermark.js

@@ -2,35 +2,228 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var runtime = require('../../../utils/vue/props/runtime.js');
+var vue = require('vue');
+var core = require('@vueuse/core');
+var watermark = require('./watermark2.js');
+var utils = require('./utils.js');
+var useClips = require('./useClips.js');
+var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
+var shared = require('@vue/shared');
+var types = require('../../../utils/types.js');
 
-const watermarkProps = runtime.buildProps({
-  zIndex: {
-    type: Number,
-    default: 9
-  },
-  rotate: {
-    type: Number,
-    default: -22
-  },
-  width: Number,
-  height: Number,
-  image: String,
-  content: {
-    type: runtime.definePropType([String, Array]),
-    default: "Element Plus"
-  },
-  font: {
-    type: runtime.definePropType(Object)
-  },
-  gap: {
-    type: runtime.definePropType(Array),
-    default: () => [100, 100]
-  },
-  offset: {
-    type: runtime.definePropType(Array)
+const __default__ = vue.defineComponent({
+  name: "ElWatermark"
+});
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  ...__default__,
+  props: watermark.watermarkProps,
+  setup(__props) {
+    const props = __props;
+    const style = {
+      position: "relative"
+    };
+    const color = vue.computed(() => {
+      var _a, _b;
+      return (_b = (_a = props.font) == null ? void 0 : _a.color) != null ? _b : "rgba(0,0,0,.15)";
+    });
+    const fontSize = vue.computed(() => {
+      var _a, _b;
+      return (_b = (_a = props.font) == null ? void 0 : _a.fontSize) != null ? _b : 16;
+    });
+    const fontWeight = vue.computed(() => {
+      var _a, _b;
+      return (_b = (_a = props.font) == null ? void 0 : _a.fontWeight) != null ? _b : "normal";
+    });
+    const fontStyle = vue.computed(() => {
+      var _a, _b;
+      return (_b = (_a = props.font) == null ? void 0 : _a.fontStyle) != null ? _b : "normal";
+    });
+    const fontFamily = vue.computed(() => {
+      var _a, _b;
+      return (_b = (_a = props.font) == null ? void 0 : _a.fontFamily) != null ? _b : "sans-serif";
+    });
+    const textAlign = vue.computed(() => {
+      var _a, _b;
+      return (_b = (_a = props.font) == null ? void 0 : _a.textAlign) != null ? _b : "center";
+    });
+    const textBaseline = vue.computed(() => {
+      var _a, _b;
+      return (_b = (_a = props.font) == null ? void 0 : _a.textBaseline) != null ? _b : "hanging";
+    });
+    const gapX = vue.computed(() => props.gap[0]);
+    const gapY = vue.computed(() => props.gap[1]);
+    const gapXCenter = vue.computed(() => gapX.value / 2);
+    const gapYCenter = vue.computed(() => gapY.value / 2);
+    const offsetLeft = vue.computed(() => {
+      var _a, _b;
+      return (_b = (_a = props.offset) == null ? void 0 : _a[0]) != null ? _b : gapXCenter.value;
+    });
+    const offsetTop = vue.computed(() => {
+      var _a, _b;
+      return (_b = (_a = props.offset) == null ? void 0 : _a[1]) != null ? _b : gapYCenter.value;
+    });
+    const getMarkStyle = () => {
+      const markStyle = {
+        zIndex: props.zIndex,
+        position: "absolute",
+        left: 0,
+        top: 0,
+        width: "100%",
+        height: "100%",
+        pointerEvents: "none",
+        backgroundRepeat: "repeat"
+      };
+      let positionLeft = offsetLeft.value - gapXCenter.value;
+      let positionTop = offsetTop.value - gapYCenter.value;
+      if (positionLeft > 0) {
+        markStyle.left = `${positionLeft}px`;
+        markStyle.width = `calc(100% - ${positionLeft}px)`;
+        positionLeft = 0;
+      }
+      if (positionTop > 0) {
+        markStyle.top = `${positionTop}px`;
+        markStyle.height = `calc(100% - ${positionTop}px)`;
+        positionTop = 0;
+      }
+      markStyle.backgroundPosition = `${positionLeft}px ${positionTop}px`;
+      return markStyle;
+    };
+    const containerRef = vue.shallowRef(null);
+    const watermarkRef = vue.shallowRef();
+    const stopObservation = vue.ref(false);
+    const destroyWatermark = () => {
+      if (watermarkRef.value) {
+        watermarkRef.value.remove();
+        watermarkRef.value = void 0;
+      }
+    };
+    const appendWatermark = (base64Url, markWidth) => {
+      var _a;
+      if (containerRef.value && watermarkRef.value) {
+        stopObservation.value = true;
+        watermarkRef.value.setAttribute("style", utils.getStyleStr({
+          ...getMarkStyle(),
+          backgroundImage: `url('${base64Url}')`,
+          backgroundSize: `${Math.floor(markWidth)}px`
+        }));
+        (_a = containerRef.value) == null ? void 0 : _a.append(watermarkRef.value);
+        setTimeout(() => {
+          stopObservation.value = false;
+        });
+      }
+    };
+    const getMarkSize = (ctx) => {
+      let defaultWidth = 120;
+      let defaultHeight = 64;
+      const { image, content, width, height, rotate } = props;
+      if (!image && ctx.measureText) {
+        ctx.font = `${Number(fontSize.value)}px ${fontFamily.value}`;
+        const contents = shared.isArray(content) ? content : [content];
+        let maxWidth = 0;
+        let maxHeight = 0;
+        contents.forEach((item) => {
+          const {
+            width: width2,
+            fontBoundingBoxAscent,
+            fontBoundingBoxDescent,
+            actualBoundingBoxAscent,
+            actualBoundingBoxDescent
+          } = ctx.measureText(item);
+          const height2 = types.isUndefined(fontBoundingBoxAscent) ? actualBoundingBoxAscent + actualBoundingBoxDescent : fontBoundingBoxAscent + fontBoundingBoxDescent;
+          if (width2 > maxWidth)
+            maxWidth = Math.ceil(width2);
+          if (height2 > maxHeight)
+            maxHeight = Math.ceil(height2);
+        });
+        defaultWidth = maxWidth;
+        defaultHeight = maxHeight * contents.length + (contents.length - 1) * useClips.FontGap;
+        const angle = Math.PI / 180 * Number(rotate);
+        const space = Math.ceil(Math.abs(Math.sin(angle) * defaultHeight) / 2);
+        defaultWidth += space;
+      }
+      return [width != null ? width : defaultWidth, height != null ? height : defaultHeight];
+    };
+    const getClips = useClips["default"]();
+    const renderWatermark = () => {
+      const canvas = document.createElement("canvas");
+      const ctx = canvas.getContext("2d");
+      const image = props.image;
+      const content = props.content;
+      const rotate = props.rotate;
+      if (ctx) {
+        if (!watermarkRef.value) {
+          watermarkRef.value = document.createElement("div");
+        }
+        const ratio = utils.getPixelRatio();
+        const [markWidth, markHeight] = getMarkSize(ctx);
+        const drawCanvas = (drawContent) => {
+          const [textClips, clipWidth] = getClips(drawContent || "", rotate, ratio, markWidth, markHeight, {
+            color: color.value,
+            fontSize: fontSize.value,
+            fontStyle: fontStyle.value,
+            fontWeight: fontWeight.value,
+            fontFamily: fontFamily.value,
+            textAlign: textAlign.value,
+            textBaseline: textBaseline.value
+          }, gapX.value, gapY.value);
+          appendWatermark(textClips, clipWidth);
+        };
+        if (image) {
+          const img = new Image();
+          img.onload = () => {
+            drawCanvas(img);
+          };
+          img.onerror = () => {
+            drawCanvas(content);
+          };
+          img.crossOrigin = "anonymous";
+          img.referrerPolicy = "no-referrer";
+          img.src = image;
+        } else {
+          drawCanvas(content);
+        }
+      }
+    };
+    vue.onMounted(() => {
+      renderWatermark();
+    });
+    vue.watch(() => props, () => {
+      renderWatermark();
+    }, {
+      deep: true,
+      flush: "post"
+    });
+    vue.onBeforeUnmount(() => {
+      destroyWatermark();
+    });
+    const onMutate = (mutations) => {
+      if (stopObservation.value) {
+        return;
+      }
+      mutations.forEach((mutation) => {
+        if (utils.reRendering(mutation, watermarkRef.value)) {
+          destroyWatermark();
+          renderWatermark();
+        }
+      });
+    };
+    core.useMutationObserver(containerRef, onMutate, {
+      attributes: true,
+      subtree: true,
+      childList: true
+    });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", {
+        ref_key: "containerRef",
+        ref: containerRef,
+        style: vue.normalizeStyle([style])
+      }, [
+        vue.renderSlot(_ctx.$slots, "default")
+      ], 4);
+    };
   }
 });
+var Watermark = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["__file", "watermark.vue"]]);
 
-exports.watermarkProps = watermarkProps;
+exports["default"] = Watermark;
 //# sourceMappingURL=watermark.js.map

package/lib/components/watermark/src/watermark.js.map

@@ -1 +1 @@
-{"version":3,"file":"watermark.js","sources":["../../../../../../packages/components/watermark/src/watermark.ts"],"sourcesContent":["import { buildProps, definePropType } from '@element-plus/utils'\n\nimport type { ExtractPropTypes } from 'vue'\nimport type Watermark from './watermark.vue'\n\nexport interface WatermarkFontType {\n  color?: string\n  fontSize?: number | string\n  fontWeight?: 'normal' | 'light' | 'weight' | number\n  fontStyle?: 'none' | 'normal' | 'italic' | 'oblique'\n  fontFamily?: string\n  textAlign?: 'start' | 'end' | 'left' | 'right' | 'center'\n  textBaseline?:\n    | 'top'\n    | 'hanging'\n    | 'middle'\n    | 'alphabetic'\n    | 'ideographic'\n    | 'bottom'\n}\n\nexport const watermarkProps = buildProps({\n  /**\n   * @description The z-index of the appended watermark element\n   */\n  zIndex: {\n    type: Number,\n    default: 9,\n  },\n  /**\n   * @description The rotation angle of the watermark\n   */\n  rotate: {\n    type: Number,\n    default: -22,\n  },\n  /**\n   * @description The width of the watermark\n   */\n  width: Number,\n  /**\n   * @description The height of the watermark\n   */\n  height: Number,\n  /**\n   * @description Image source, it is recommended to export 2x or 3x image, high priority (support base64 format)\n   */\n  image: String,\n  /**\n   * @description Watermark text content\n   */\n  content: {\n    type: definePropType<string | string[]>([String, Array]),\n    default: 'Element Plus',\n  },\n  /**\n   * @description Text style\n   */\n  font: {\n    type: definePropType<WatermarkFontType>(Object),\n  },\n  /**\n   * @description The spacing between watermarks\n   */\n  gap: {\n    type: definePropType<[number, number]>(Array),\n    default: () => [100, 100],\n  },\n  /**\n   * @description The offset of the watermark from the upper left corner of the container. The default is gap/2\n   */\n  offset: {\n    type: definePropType<[number, number]>(Array),\n  },\n} as const)\n\nexport type WatermarkProps = ExtractPropTypes<typeof watermarkProps>\nexport type WatermarkInstance = InstanceType<typeof Watermark> & unknown\n"],"names":["buildProps","definePropType"],"mappings":";;;;;;AACY,MAAC,cAAc,GAAGA,kBAAU,CAAC;AACzC,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,CAAC;AACd,GAAG;AACH,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,CAAC,EAAE;AAChB,GAAG;AACH,EAAE,KAAK,EAAE,MAAM;AACf,EAAE,MAAM,EAAE,MAAM;AAChB,EAAE,KAAK,EAAE,MAAM;AACf,EAAE,OAAO,EAAE;AACX,IAAI,IAAI,EAAEC,sBAAc,CAAC,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;AACzC,IAAI,OAAO,EAAE,cAAc;AAC3B,GAAG;AACH,EAAE,IAAI,EAAE;AACR,IAAI,IAAI,EAAEA,sBAAc,CAAC,MAAM,CAAC;AAChC,GAAG;AACH,EAAE,GAAG,EAAE;AACP,IAAI,IAAI,EAAEA,sBAAc,CAAC,KAAK,CAAC;AAC/B,IAAI,OAAO,EAAE,MAAM,CAAC,GAAG,EAAE,GAAG,CAAC;AAC7B,GAAG;AACH,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAEA,sBAAc,CAAC,KAAK,CAAC;AAC/B,GAAG;AACH,CAAC;;;;"}
+{"version":3,"file":"watermark.js","sources":["../../../../../../packages/components/watermark/src/watermark.vue"],"sourcesContent":["<template>\n  <div ref=\"containerRef\" :style=\"[style]\">\n    <slot />\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport {\n  computed,\n  onBeforeUnmount,\n  onMounted,\n  ref,\n  shallowRef,\n  watch,\n} from 'vue'\nimport { useMutationObserver } from '@vueuse/core'\nimport { isArray, isUndefined } from '@element-plus/utils'\nimport { watermarkProps } from './watermark'\nimport { getPixelRatio, getStyleStr, reRendering } from './utils'\nimport useClips, { FontGap } from './useClips'\nimport type { WatermarkProps } from './watermark'\nimport type { CSSProperties } from 'vue'\n\ndefineOptions({\n  name: 'ElWatermark',\n})\n\nconst style: CSSProperties = {\n  position: 'relative',\n}\n\nconst props = defineProps(watermarkProps)\nconst color = computed(() => props.font?.color ?? 'rgba(0,0,0,.15)')\nconst fontSize = computed(() => props.font?.fontSize ?? 16)\nconst fontWeight = computed(() => props.font?.fontWeight ?? 'normal')\nconst fontStyle = computed(() => props.font?.fontStyle ?? 'normal')\nconst fontFamily = computed(() => props.font?.fontFamily ?? 'sans-serif')\nconst textAlign = computed(() => props.font?.textAlign ?? 'center')\nconst textBaseline = computed(() => props.font?.textBaseline ?? 'hanging')\n\nconst gapX = computed(() => props.gap[0])\nconst gapY = computed(() => props.gap[1])\nconst gapXCenter = computed(() => gapX.value / 2)\nconst gapYCenter = computed(() => gapY.value / 2)\nconst offsetLeft = computed(() => props.offset?.[0] ?? gapXCenter.value)\nconst offsetTop = computed(() => props.offset?.[1] ?? gapYCenter.value)\n\nconst getMarkStyle = () => {\n  const markStyle: CSSProperties = {\n    zIndex: props.zIndex,\n    position: 'absolute',\n    left: 0,\n    top: 0,\n    width: '100%',\n    height: '100%',\n    pointerEvents: 'none',\n    backgroundRepeat: 'repeat',\n  }\n\n  /** Calculate the style of the offset */\n  let positionLeft = offsetLeft.value - gapXCenter.value\n  let positionTop = offsetTop.value - gapYCenter.value\n  if (positionLeft > 0) {\n    markStyle.left = `${positionLeft}px`\n    markStyle.width = `calc(100% - ${positionLeft}px)`\n    positionLeft = 0\n  }\n  if (positionTop > 0) {\n    markStyle.top = `${positionTop}px`\n    markStyle.height = `calc(100% - ${positionTop}px)`\n    positionTop = 0\n  }\n  markStyle.backgroundPosition = `${positionLeft}px ${positionTop}px`\n\n  return markStyle\n}\n\nconst containerRef = shallowRef<HTMLDivElement | null>(null)\nconst watermarkRef = shallowRef<HTMLDivElement>()\nconst stopObservation = ref(false)\n\nconst destroyWatermark = () => {\n  if (watermarkRef.value) {\n    watermarkRef.value.remove()\n    watermarkRef.value = undefined\n  }\n}\nconst appendWatermark = (base64Url: string, markWidth: number) => {\n  if (containerRef.value && watermarkRef.value) {\n    stopObservation.value = true\n    watermarkRef.value.setAttribute(\n      'style',\n      getStyleStr({\n        ...getMarkStyle(),\n        backgroundImage: `url('${base64Url}')`,\n        backgroundSize: `${Math.floor(markWidth)}px`,\n      })\n    )\n    containerRef.value?.append(watermarkRef.value)\n    // Delayed execution\n    setTimeout(() => {\n      stopObservation.value = false\n    })\n  }\n}\n\n/**\n * Get the width and height of the watermark. The default values are as follows\n * Image: [120, 64]; Content: It's calculated by content;\n */\nconst getMarkSize = (ctx: CanvasRenderingContext2D) => {\n  let defaultWidth = 120\n  let defaultHeight = 64\n\n  const { image, content, width, height, rotate } = props\n\n  if (!image && ctx.measureText) {\n    ctx.font = `${Number(fontSize.value)}px ${fontFamily.value}`\n\n    const contents = isArray(content) ? content : [content]\n    let maxWidth = 0\n    let maxHeight = 0\n\n    contents.forEach((item) => {\n      const {\n        width,\n        fontBoundingBoxAscent,\n        fontBoundingBoxDescent,\n        actualBoundingBoxAscent,\n        actualBoundingBoxDescent,\n      } = ctx.measureText(item!)\n      // Using `actualBoundingBoxAscent` to be compatible with lower version browsers (eg: Firefox < 116)\n      const height = isUndefined(fontBoundingBoxAscent)\n        ? actualBoundingBoxAscent + actualBoundingBoxDescent\n        : fontBoundingBoxAscent + fontBoundingBoxDescent\n\n      if (width > maxWidth) maxWidth = Math.ceil(width)\n      if (height > maxHeight) maxHeight = Math.ceil(height)\n    })\n\n    defaultWidth = maxWidth\n    defaultHeight =\n      maxHeight * contents.length + (contents.length - 1) * FontGap\n\n    const angle = (Math.PI / 180) * Number(rotate)\n    const space = Math.ceil(Math.abs(Math.sin(angle) * defaultHeight) / 2)\n\n    defaultWidth += space\n  }\n\n  return [width ?? defaultWidth, height ?? defaultHeight] as const\n}\n\nconst getClips = useClips()\n\nconst renderWatermark = () => {\n  const canvas = document.createElement('canvas')\n  const ctx = canvas.getContext('2d')\n  const image = props.image\n  const content = props.content\n  const rotate = props.rotate\n\n  if (ctx) {\n    if (!watermarkRef.value) {\n      watermarkRef.value = document.createElement('div')\n    }\n\n    const ratio = getPixelRatio()\n    const [markWidth, markHeight] = getMarkSize(ctx)\n\n    const drawCanvas = (\n      drawContent?: NonNullable<WatermarkProps['content']> | HTMLImageElement\n    ) => {\n      const [textClips, clipWidth] = getClips(\n        drawContent || '',\n        rotate,\n        ratio,\n        markWidth,\n        markHeight,\n        {\n          color: color.value,\n          fontSize: fontSize.value,\n          fontStyle: fontStyle.value,\n          fontWeight: fontWeight.value,\n          fontFamily: fontFamily.value,\n          textAlign: textAlign.value,\n          textBaseline: textBaseline.value,\n        },\n        gapX.value,\n        gapY.value\n      )\n\n      appendWatermark(textClips, clipWidth)\n    }\n\n    if (image) {\n      const img = new Image()\n      img.onload = () => {\n        drawCanvas(img)\n      }\n      img.onerror = () => {\n        drawCanvas(content)\n      }\n      img.crossOrigin = 'anonymous'\n      img.referrerPolicy = 'no-referrer'\n      img.src = image\n    } else {\n      drawCanvas(content)\n    }\n  }\n}\n\nonMounted(() => {\n  renderWatermark()\n})\n\nwatch(\n  () => props,\n  () => {\n    renderWatermark()\n  },\n  {\n    deep: true,\n    flush: 'post',\n  }\n)\n\nonBeforeUnmount(() => {\n  destroyWatermark()\n})\n\nconst onMutate = (mutations: MutationRecord[]) => {\n  if (stopObservation.value) {\n    return\n  }\n  mutations.forEach((mutation) => {\n    if (reRendering(mutation, watermarkRef.value)) {\n      destroyWatermark()\n      renderWatermark()\n    }\n  })\n}\n\nuseMutationObserver(containerRef, onMutate, {\n  attributes: true,\n  subtree: true,\n  childList: true,\n})\n</script>\n"],"names":["computed","shallowRef","ref","width","getStyleStr","height","isArray","isUndefined","FontGap","getPixelRatio","onMounted","watch","onBeforeUnmount"],"mappings":"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"}