transfer2.js 8.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213
  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-panel2.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 _hoisted_1 = { key: 0 };
  20. const _hoisted_2 = { key: 0 };
  21. const _sfc_main = vue.defineComponent({
  22. ...{
  23. name: "ElTransfer"
  24. },
  25. __name: "transfer",
  26. props: transfer.transferProps,
  27. emits: transfer.transferEmits,
  28. setup(__props, { expose: __expose, emit: __emit }) {
  29. const props = __props;
  30. const emit = __emit;
  31. const slots = vue.useSlots();
  32. const { t } = index.useLocale();
  33. const ns = index$1.useNamespace("transfer");
  34. const { formItem } = useFormItem.useFormItem();
  35. const checkedState = vue.reactive({
  36. leftChecked: [],
  37. rightChecked: []
  38. });
  39. const propsAlias = usePropsAlias.usePropsAlias(props);
  40. const { sourceData, targetData } = useComputedData.useComputedData(props);
  41. const { onSourceCheckedChange, onTargetCheckedChange } = useCheckedChange.useCheckedChange(
  42. checkedState,
  43. emit
  44. );
  45. const { addToLeft, addToRight } = useMove.useMove(props, checkedState, emit);
  46. const leftPanel = vue.ref();
  47. const rightPanel = vue.ref();
  48. const clearQuery = (which) => {
  49. switch (which) {
  50. case "left":
  51. leftPanel.value.query = "";
  52. break;
  53. case "right":
  54. rightPanel.value.query = "";
  55. break;
  56. }
  57. };
  58. const hasButtonTexts = vue.computed(() => props.buttonTexts.length === 2);
  59. const leftPanelTitle = vue.computed(
  60. () => props.titles[0] || t("el.transfer.titles.0")
  61. );
  62. const rightPanelTitle = vue.computed(
  63. () => props.titles[1] || t("el.transfer.titles.1")
  64. );
  65. const panelFilterPlaceholder = vue.computed(
  66. () => props.filterPlaceholder || t("el.transfer.filterPlaceholder")
  67. );
  68. vue.watch(
  69. () => props.modelValue,
  70. () => {
  71. var _a;
  72. if (props.validateEvent) {
  73. (_a = formItem == null ? void 0 : formItem.validate) == null ? void 0 : _a.call(formItem, "change").catch((err) => error.debugWarn(err));
  74. }
  75. }
  76. );
  77. const optionRender = vue.computed(() => (option) => {
  78. var _a;
  79. if (props.renderContent)
  80. return props.renderContent(vue.h, option);
  81. const defaultSlotVNodes = (((_a = slots.default) == null ? void 0 : _a.call(slots, { option })) || []).filter(
  82. (node) => node.type !== vue.Comment
  83. );
  84. if (defaultSlotVNodes.length) {
  85. return defaultSlotVNodes;
  86. }
  87. return vue.h(
  88. "span",
  89. option[propsAlias.value.label] || option[propsAlias.value.key]
  90. );
  91. });
  92. __expose({
  93. clearQuery,
  94. leftPanel,
  95. rightPanel
  96. });
  97. return (_ctx, _cache) => {
  98. return vue.openBlock(), vue.createElementBlock(
  99. "div",
  100. {
  101. class: vue.normalizeClass(vue.unref(ns).b())
  102. },
  103. [
  104. vue.createVNode(transferPanel["default"], {
  105. ref_key: "leftPanel",
  106. ref: leftPanel,
  107. data: vue.unref(sourceData),
  108. "option-render": optionRender.value,
  109. placeholder: panelFilterPlaceholder.value,
  110. title: leftPanelTitle.value,
  111. filterable: _ctx.filterable,
  112. format: _ctx.format,
  113. "filter-method": _ctx.filterMethod,
  114. "default-checked": _ctx.leftDefaultChecked,
  115. props: props.props,
  116. onCheckedChange: vue.unref(onSourceCheckedChange)
  117. }, {
  118. empty: vue.withCtx(() => [
  119. vue.renderSlot(_ctx.$slots, "left-empty")
  120. ]),
  121. default: vue.withCtx(() => [
  122. vue.renderSlot(_ctx.$slots, "left-footer")
  123. ]),
  124. _: 3
  125. }, 8, ["data", "option-render", "placeholder", "title", "filterable", "format", "filter-method", "default-checked", "props", "onCheckedChange"]),
  126. vue.createElementVNode(
  127. "div",
  128. {
  129. class: vue.normalizeClass(vue.unref(ns).e("buttons"))
  130. },
  131. [
  132. vue.createVNode(vue.unref(index$2.ElButton), {
  133. type: "primary",
  134. class: vue.normalizeClass([vue.unref(ns).e("button"), vue.unref(ns).is("with-texts", hasButtonTexts.value)]),
  135. disabled: vue.unref(types.isEmpty)(checkedState.rightChecked),
  136. onClick: vue.unref(addToLeft)
  137. }, {
  138. default: vue.withCtx(() => [
  139. vue.createVNode(vue.unref(index$3.ElIcon), null, {
  140. default: vue.withCtx(() => [
  141. vue.createVNode(vue.unref(iconsVue.ArrowLeft))
  142. ]),
  143. _: 1
  144. }),
  145. !vue.unref(types.isUndefined)(_ctx.buttonTexts[0]) ? (vue.openBlock(), vue.createElementBlock(
  146. "span",
  147. _hoisted_1,
  148. vue.toDisplayString(_ctx.buttonTexts[0]),
  149. 1
  150. )) : vue.createCommentVNode("v-if", true)
  151. ]),
  152. _: 1
  153. }, 8, ["class", "disabled", "onClick"]),
  154. vue.createVNode(vue.unref(index$2.ElButton), {
  155. type: "primary",
  156. class: vue.normalizeClass([vue.unref(ns).e("button"), vue.unref(ns).is("with-texts", hasButtonTexts.value)]),
  157. disabled: vue.unref(types.isEmpty)(checkedState.leftChecked),
  158. onClick: vue.unref(addToRight)
  159. }, {
  160. default: vue.withCtx(() => [
  161. !vue.unref(types.isUndefined)(_ctx.buttonTexts[1]) ? (vue.openBlock(), vue.createElementBlock(
  162. "span",
  163. _hoisted_2,
  164. vue.toDisplayString(_ctx.buttonTexts[1]),
  165. 1
  166. )) : vue.createCommentVNode("v-if", true),
  167. vue.createVNode(vue.unref(index$3.ElIcon), null, {
  168. default: vue.withCtx(() => [
  169. vue.createVNode(vue.unref(iconsVue.ArrowRight))
  170. ]),
  171. _: 1
  172. })
  173. ]),
  174. _: 1
  175. }, 8, ["class", "disabled", "onClick"])
  176. ],
  177. 2
  178. ),
  179. vue.createVNode(transferPanel["default"], {
  180. ref_key: "rightPanel",
  181. ref: rightPanel,
  182. data: vue.unref(targetData),
  183. "option-render": optionRender.value,
  184. placeholder: panelFilterPlaceholder.value,
  185. filterable: _ctx.filterable,
  186. format: _ctx.format,
  187. "filter-method": _ctx.filterMethod,
  188. title: rightPanelTitle.value,
  189. "default-checked": _ctx.rightDefaultChecked,
  190. props: props.props,
  191. onCheckedChange: vue.unref(onTargetCheckedChange)
  192. }, {
  193. empty: vue.withCtx(() => [
  194. vue.renderSlot(_ctx.$slots, "right-empty")
  195. ]),
  196. default: vue.withCtx(() => [
  197. vue.renderSlot(_ctx.$slots, "right-footer")
  198. ]),
  199. _: 3
  200. }, 8, ["data", "option-render", "placeholder", "filterable", "format", "filter-method", "title", "default-checked", "props", "onCheckedChange"])
  201. ],
  202. 2
  203. );
  204. };
  205. }
  206. });
  207. var Transfer = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["__file", "/home/runner/work/element-plus/element-plus/packages/components/transfer/src/transfer.vue"]]);
  208. exports["default"] = Transfer;
  209. //# sourceMappingURL=transfer2.js.map