transfer2.mjs 7.1 KB

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