You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

134 lines
5.9 KiB

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