transfer-panel.js 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138
  1. 'use strict';
  2. Object.defineProperty(exports, '__esModule', { value: true });
  3. var vue = require('vue');
  4. var index$2 = require('../../checkbox/index.js');
  5. var index$3 = require('../../input/index.js');
  6. var iconsVue = require('@element-plus/icons-vue');
  7. var transferPanel = require('./transfer-panel2.js');
  8. var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
  9. var usePropsAlias = require('./composables/use-props-alias.js');
  10. var useCheck = require('./composables/use-check.js');
  11. var index = require('../../../hooks/use-locale/index.js');
  12. var index$1 = require('../../../hooks/use-namespace/index.js');
  13. var types = require('../../../utils/types.js');
  14. const __default__ = vue.defineComponent({
  15. name: "ElTransferPanel"
  16. });
  17. const _sfc_main = /* @__PURE__ */ vue.defineComponent({
  18. ...__default__,
  19. props: transferPanel.transferPanelProps,
  20. emits: transferPanel.transferPanelEmits,
  21. setup(__props, { expose, emit }) {
  22. const props = __props;
  23. const slots = vue.useSlots();
  24. const OptionContent = ({ option }) => option;
  25. const { t } = index.useLocale();
  26. const ns = index$1.useNamespace("transfer");
  27. const panelState = vue.reactive({
  28. checked: [],
  29. allChecked: false,
  30. query: "",
  31. checkChangeByUser: true
  32. });
  33. const propsAlias = usePropsAlias.usePropsAlias(props);
  34. const {
  35. filteredData,
  36. checkedSummary,
  37. isIndeterminate,
  38. handleAllCheckedChange
  39. } = useCheck.useCheck(props, panelState, emit);
  40. const hasNoMatch = vue.computed(() => !types.isEmpty(panelState.query) && types.isEmpty(filteredData.value));
  41. const hasFooter = vue.computed(() => !types.isEmpty(slots.default()[0].children));
  42. const { checked, allChecked, query } = vue.toRefs(panelState);
  43. expose({
  44. query
  45. });
  46. return (_ctx, _cache) => {
  47. return vue.openBlock(), vue.createElementBlock("div", {
  48. class: vue.normalizeClass(vue.unref(ns).b("panel"))
  49. }, [
  50. vue.createElementVNode("p", {
  51. class: vue.normalizeClass(vue.unref(ns).be("panel", "header"))
  52. }, [
  53. vue.createVNode(vue.unref(index$2.ElCheckbox), {
  54. modelValue: vue.unref(allChecked),
  55. "onUpdate:modelValue": ($event) => vue.isRef(allChecked) ? allChecked.value = $event : null,
  56. indeterminate: vue.unref(isIndeterminate),
  57. "validate-event": false,
  58. onChange: vue.unref(handleAllCheckedChange)
  59. }, {
  60. default: vue.withCtx(() => [
  61. vue.createTextVNode(vue.toDisplayString(_ctx.title) + " ", 1),
  62. vue.createElementVNode("span", null, vue.toDisplayString(vue.unref(checkedSummary)), 1)
  63. ]),
  64. _: 1
  65. }, 8, ["modelValue", "onUpdate:modelValue", "indeterminate", "onChange"])
  66. ], 2),
  67. vue.createElementVNode("div", {
  68. class: vue.normalizeClass([vue.unref(ns).be("panel", "body"), vue.unref(ns).is("with-footer", vue.unref(hasFooter))])
  69. }, [
  70. _ctx.filterable ? (vue.openBlock(), vue.createBlock(vue.unref(index$3.ElInput), {
  71. key: 0,
  72. modelValue: vue.unref(query),
  73. "onUpdate:modelValue": ($event) => vue.isRef(query) ? query.value = $event : null,
  74. class: vue.normalizeClass(vue.unref(ns).be("panel", "filter")),
  75. size: "default",
  76. placeholder: _ctx.placeholder,
  77. "prefix-icon": vue.unref(iconsVue.Search),
  78. clearable: "",
  79. "validate-event": false
  80. }, null, 8, ["modelValue", "onUpdate:modelValue", "class", "placeholder", "prefix-icon"])) : vue.createCommentVNode("v-if", true),
  81. vue.withDirectives(vue.createVNode(vue.unref(index$2.ElCheckboxGroup), {
  82. modelValue: vue.unref(checked),
  83. "onUpdate:modelValue": ($event) => vue.isRef(checked) ? checked.value = $event : null,
  84. "validate-event": false,
  85. class: vue.normalizeClass([vue.unref(ns).is("filterable", _ctx.filterable), vue.unref(ns).be("panel", "list")])
  86. }, {
  87. default: vue.withCtx(() => [
  88. (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(filteredData), (item) => {
  89. return vue.openBlock(), vue.createBlock(vue.unref(index$2.ElCheckbox), {
  90. key: item[vue.unref(propsAlias).key],
  91. class: vue.normalizeClass(vue.unref(ns).be("panel", "item")),
  92. value: item[vue.unref(propsAlias).key],
  93. disabled: item[vue.unref(propsAlias).disabled],
  94. "validate-event": false
  95. }, {
  96. default: vue.withCtx(() => {
  97. var _a;
  98. return [
  99. vue.createVNode(OptionContent, {
  100. option: (_a = _ctx.optionRender) == null ? void 0 : _a.call(_ctx, item)
  101. }, null, 8, ["option"])
  102. ];
  103. }),
  104. _: 2
  105. }, 1032, ["class", "value", "disabled"]);
  106. }), 128))
  107. ]),
  108. _: 1
  109. }, 8, ["modelValue", "onUpdate:modelValue", "class"]), [
  110. [vue.vShow, !vue.unref(hasNoMatch) && !vue.unref(types.isEmpty)(_ctx.data)]
  111. ]),
  112. vue.withDirectives(vue.createElementVNode("div", {
  113. class: vue.normalizeClass(vue.unref(ns).be("panel", "empty"))
  114. }, [
  115. vue.renderSlot(_ctx.$slots, "empty", {}, () => [
  116. vue.createTextVNode(vue.toDisplayString(vue.unref(hasNoMatch) ? vue.unref(t)("el.transfer.noMatch") : vue.unref(t)("el.transfer.noData")), 1)
  117. ])
  118. ], 2), [
  119. [vue.vShow, vue.unref(hasNoMatch) || vue.unref(types.isEmpty)(_ctx.data)]
  120. ])
  121. ], 2),
  122. vue.unref(hasFooter) ? (vue.openBlock(), vue.createElementBlock("p", {
  123. key: 0,
  124. class: vue.normalizeClass(vue.unref(ns).be("panel", "footer"))
  125. }, [
  126. vue.renderSlot(_ctx.$slots, "default")
  127. ], 2)) : vue.createCommentVNode("v-if", true)
  128. ], 2);
  129. };
  130. }
  131. });
  132. var TransferPanel = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["__file", "transfer-panel.vue"]]);
  133. exports["default"] = TransferPanel;
  134. //# sourceMappingURL=transfer-panel.js.map