8951844f0b3b9b2af633479763acefb70ba4597755c69ad508899ba547e2b3e31009d52bd91e3aa37bf9f4faa951e4d7b835931a210f4fcc5024b9c0d55f89 7.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173
  1. 'use strict';
  2. Object.defineProperty(exports, '__esModule', { value: true });
  3. var vue = require('vue');
  4. var index$2 = require('../../button/index.js');
  5. var index$3 = require('../../icon/index.js');
  6. var iconsVue = require('@element-plus/icons-vue');
  7. var transfer = require('./transfer.js');
  8. var transferPanel = require('./transfer-panel.js');
  9. var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
  10. var useComputedData = require('./composables/use-computed-data.js');
  11. var useMove = require('./composables/use-move.js');
  12. var useCheckedChange = require('./composables/use-checked-change.js');
  13. var index = require('../../../hooks/use-locale/index.js');
  14. var index$1 = require('../../../hooks/use-namespace/index.js');
  15. var useFormItem = require('../../form/src/hooks/use-form-item.js');
  16. var usePropsAlias = require('./composables/use-props-alias.js');
  17. var error = require('../../../utils/error.js');
  18. var types = require('../../../utils/types.js');
  19. const __default__ = vue.defineComponent({
  20. name: "ElTransfer"
  21. });
  22. const _sfc_main = /* @__PURE__ */ vue.defineComponent({
  23. ...__default__,
  24. props: transfer.transferProps,
  25. emits: transfer.transferEmits,
  26. setup(__props, { expose, emit }) {
  27. const props = __props;
  28. const slots = vue.useSlots();
  29. const { t } = index.useLocale();
  30. const ns = index$1.useNamespace("transfer");
  31. const { formItem } = useFormItem.useFormItem();
  32. const checkedState = vue.reactive({
  33. leftChecked: [],
  34. rightChecked: []
  35. });
  36. const propsAlias = usePropsAlias.usePropsAlias(props);
  37. const { sourceData, targetData } = useComputedData.useComputedData(props);
  38. const { onSourceCheckedChange, onTargetCheckedChange } = useCheckedChange.useCheckedChange(checkedState, emit);
  39. const { addToLeft, addToRight } = useMove.useMove(props, checkedState, emit);
  40. const leftPanel = vue.ref();
  41. const rightPanel = vue.ref();
  42. const clearQuery = (which) => {
  43. switch (which) {
  44. case "left":
  45. leftPanel.value.query = "";
  46. break;
  47. case "right":
  48. rightPanel.value.query = "";
  49. break;
  50. }
  51. };
  52. const hasButtonTexts = vue.computed(() => props.buttonTexts.length === 2);
  53. const leftPanelTitle = vue.computed(() => props.titles[0] || t("el.transfer.titles.0"));
  54. const rightPanelTitle = vue.computed(() => props.titles[1] || t("el.transfer.titles.1"));
  55. const panelFilterPlaceholder = vue.computed(() => props.filterPlaceholder || t("el.transfer.filterPlaceholder"));
  56. vue.watch(() => props.modelValue, () => {
  57. var _a;
  58. if (props.validateEvent) {
  59. (_a = formItem == null ? void 0 : formItem.validate) == null ? void 0 : _a.call(formItem, "change").catch((err) => error.debugWarn());
  60. }
  61. });
  62. const optionRender = vue.computed(() => (option) => {
  63. var _a;
  64. if (props.renderContent)
  65. return props.renderContent(vue.h, option);
  66. const defaultSlotVNodes = (((_a = slots.default) == null ? void 0 : _a.call(slots, { option })) || []).filter((node) => node.type !== vue.Comment);
  67. if (defaultSlotVNodes.length) {
  68. return defaultSlotVNodes;
  69. }
  70. return vue.h("span", option[propsAlias.value.label] || option[propsAlias.value.key]);
  71. });
  72. expose({
  73. clearQuery,
  74. leftPanel,
  75. rightPanel
  76. });
  77. return (_ctx, _cache) => {
  78. return vue.openBlock(), vue.createElementBlock("div", {
  79. class: vue.normalizeClass(vue.unref(ns).b())
  80. }, [
  81. vue.createVNode(transferPanel["default"], {
  82. ref_key: "leftPanel",
  83. ref: leftPanel,
  84. data: vue.unref(sourceData),
  85. "option-render": vue.unref(optionRender),
  86. placeholder: vue.unref(panelFilterPlaceholder),
  87. title: vue.unref(leftPanelTitle),
  88. filterable: _ctx.filterable,
  89. format: _ctx.format,
  90. "filter-method": _ctx.filterMethod,
  91. "default-checked": _ctx.leftDefaultChecked,
  92. props: props.props,
  93. onCheckedChange: vue.unref(onSourceCheckedChange)
  94. }, {
  95. empty: vue.withCtx(() => [
  96. vue.renderSlot(_ctx.$slots, "left-empty")
  97. ]),
  98. default: vue.withCtx(() => [
  99. vue.renderSlot(_ctx.$slots, "left-footer")
  100. ]),
  101. _: 3
  102. }, 8, ["data", "option-render", "placeholder", "title", "filterable", "format", "filter-method", "default-checked", "props", "onCheckedChange"]),
  103. vue.createElementVNode("div", {
  104. class: vue.normalizeClass(vue.unref(ns).e("buttons"))
  105. }, [
  106. vue.createVNode(vue.unref(index$2.ElButton), {
  107. type: "primary",
  108. class: vue.normalizeClass([vue.unref(ns).e("button"), vue.unref(ns).is("with-texts", vue.unref(hasButtonTexts))]),
  109. disabled: vue.unref(types.isEmpty)(checkedState.rightChecked),
  110. onClick: vue.unref(addToLeft)
  111. }, {
  112. default: vue.withCtx(() => [
  113. vue.createVNode(vue.unref(index$3.ElIcon), null, {
  114. default: vue.withCtx(() => [
  115. vue.createVNode(vue.unref(iconsVue.ArrowLeft))
  116. ]),
  117. _: 1
  118. }),
  119. !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)
  120. ]),
  121. _: 1
  122. }, 8, ["class", "disabled", "onClick"]),
  123. vue.createVNode(vue.unref(index$2.ElButton), {
  124. type: "primary",
  125. class: vue.normalizeClass([vue.unref(ns).e("button"), vue.unref(ns).is("with-texts", vue.unref(hasButtonTexts))]),
  126. disabled: vue.unref(types.isEmpty)(checkedState.leftChecked),
  127. onClick: vue.unref(addToRight)
  128. }, {
  129. default: vue.withCtx(() => [
  130. !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),
  131. vue.createVNode(vue.unref(index$3.ElIcon), null, {
  132. default: vue.withCtx(() => [
  133. vue.createVNode(vue.unref(iconsVue.ArrowRight))
  134. ]),
  135. _: 1
  136. })
  137. ]),
  138. _: 1
  139. }, 8, ["class", "disabled", "onClick"])
  140. ], 2),
  141. vue.createVNode(transferPanel["default"], {
  142. ref_key: "rightPanel",
  143. ref: rightPanel,
  144. data: vue.unref(targetData),
  145. "option-render": vue.unref(optionRender),
  146. placeholder: vue.unref(panelFilterPlaceholder),
  147. filterable: _ctx.filterable,
  148. format: _ctx.format,
  149. "filter-method": _ctx.filterMethod,
  150. title: vue.unref(rightPanelTitle),
  151. "default-checked": _ctx.rightDefaultChecked,
  152. props: props.props,
  153. onCheckedChange: vue.unref(onTargetCheckedChange)
  154. }, {
  155. empty: vue.withCtx(() => [
  156. vue.renderSlot(_ctx.$slots, "right-empty")
  157. ]),
  158. default: vue.withCtx(() => [
  159. vue.renderSlot(_ctx.$slots, "right-footer")
  160. ]),
  161. _: 3
  162. }, 8, ["data", "option-render", "placeholder", "filterable", "format", "filter-method", "title", "default-checked", "props", "onCheckedChange"])
  163. ], 2);
  164. };
  165. }
  166. });
  167. var Transfer = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["__file", "transfer.vue"]]);
  168. exports["default"] = Transfer;
  169. //# sourceMappingURL=transfer2.js.map