555520d53f11c55faedd936a2230c6aca9a3e308ebadb7a8b05454b91eed76fe3cff17ac00f16eddbdb083331a2a0935ee3400c8b0ea0df24f4f015df4e7d4 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295
  1. 'use strict';
  2. Object.defineProperty(exports, '__esModule', { value: true });
  3. var vue = require('vue');
  4. var index = require('../../checkbox/index.js');
  5. var index$3 = require('../../icon/index.js');
  6. var iconsVue = require('@element-plus/icons-vue');
  7. var index$2 = require('../../tooltip/index.js');
  8. var index$1 = require('../../scrollbar/index.js');
  9. var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
  10. var index$4 = require('../../../directives/click-outside/index.js');
  11. var content = require('../../tooltip/src/content.js');
  12. var index$5 = require('../../../hooks/use-locale/index.js');
  13. var index$6 = require('../../../hooks/use-namespace/index.js');
  14. var types = require('../../../utils/types.js');
  15. const { CheckboxGroup: ElCheckboxGroup } = index.ElCheckbox;
  16. const _sfc_main = vue.defineComponent({
  17. name: "ElTableFilterPanel",
  18. components: {
  19. ElCheckbox: index.ElCheckbox,
  20. ElCheckboxGroup,
  21. ElScrollbar: index$1.ElScrollbar,
  22. ElTooltip: index$2.ElTooltip,
  23. ElIcon: index$3.ElIcon,
  24. ArrowDown: iconsVue.ArrowDown,
  25. ArrowUp: iconsVue.ArrowUp
  26. },
  27. directives: { ClickOutside: index$4["default"] },
  28. props: {
  29. placement: {
  30. type: String,
  31. default: "bottom-start"
  32. },
  33. store: {
  34. type: Object
  35. },
  36. column: {
  37. type: Object
  38. },
  39. upDataColumn: {
  40. type: Function
  41. },
  42. appendTo: content.useTooltipContentProps.appendTo
  43. },
  44. setup(props) {
  45. const instance = vue.getCurrentInstance();
  46. const { t } = index$5.useLocale();
  47. const ns = index$6.useNamespace("table-filter");
  48. const parent = instance == null ? void 0 : instance.parent;
  49. if (props.column && !parent.filterPanels.value[props.column.id]) {
  50. parent.filterPanels.value[props.column.id] = instance;
  51. }
  52. const tooltipVisible = vue.ref(false);
  53. const tooltip = vue.ref(null);
  54. const filters = vue.computed(() => {
  55. return props.column && props.column.filters;
  56. });
  57. const filterClassName = vue.computed(() => {
  58. if (props.column && props.column.filterClassName) {
  59. return `${ns.b()} ${props.column.filterClassName}`;
  60. }
  61. return ns.b();
  62. });
  63. const filterValue = vue.computed({
  64. get: () => {
  65. var _a;
  66. return (((_a = props.column) == null ? void 0 : _a.filteredValue) || [])[0];
  67. },
  68. set: (value) => {
  69. if (filteredValue.value) {
  70. if (!types.isPropAbsent(value)) {
  71. filteredValue.value.splice(0, 1, value);
  72. } else {
  73. filteredValue.value.splice(0, 1);
  74. }
  75. }
  76. }
  77. });
  78. const filteredValue = vue.computed({
  79. get() {
  80. if (props.column) {
  81. return props.column.filteredValue || [];
  82. }
  83. return [];
  84. },
  85. set(value) {
  86. var _a;
  87. if (props.column) {
  88. (_a = props.upDataColumn) == null ? void 0 : _a.call(props, "filteredValue", value);
  89. }
  90. }
  91. });
  92. const multiple = vue.computed(() => {
  93. if (props.column) {
  94. return props.column.filterMultiple;
  95. }
  96. return true;
  97. });
  98. const isActive = (filter) => {
  99. return filter.value === filterValue.value;
  100. };
  101. const hidden = () => {
  102. tooltipVisible.value = false;
  103. };
  104. const showFilterPanel = (e) => {
  105. e.stopPropagation();
  106. tooltipVisible.value = !tooltipVisible.value;
  107. };
  108. const hideFilterPanel = () => {
  109. tooltipVisible.value = false;
  110. };
  111. const handleConfirm = () => {
  112. confirmFilter(filteredValue.value);
  113. hidden();
  114. };
  115. const handleReset = () => {
  116. filteredValue.value = [];
  117. confirmFilter(filteredValue.value);
  118. hidden();
  119. };
  120. const handleSelect = (_filterValue) => {
  121. filterValue.value = _filterValue;
  122. if (!types.isPropAbsent(_filterValue)) {
  123. confirmFilter(filteredValue.value);
  124. } else {
  125. confirmFilter([]);
  126. }
  127. hidden();
  128. };
  129. const confirmFilter = (filteredValue2) => {
  130. var _a, _b;
  131. (_a = props.store) == null ? void 0 : _a.commit("filterChange", {
  132. column: props.column,
  133. values: filteredValue2
  134. });
  135. (_b = props.store) == null ? void 0 : _b.updateAllSelected();
  136. };
  137. vue.watch(tooltipVisible, (value) => {
  138. var _a;
  139. if (props.column) {
  140. (_a = props.upDataColumn) == null ? void 0 : _a.call(props, "filterOpened", value);
  141. }
  142. }, {
  143. immediate: true
  144. });
  145. const popperPaneRef = vue.computed(() => {
  146. var _a, _b;
  147. return (_b = (_a = tooltip.value) == null ? void 0 : _a.popperRef) == null ? void 0 : _b.contentRef;
  148. });
  149. return {
  150. tooltipVisible,
  151. multiple,
  152. filterClassName,
  153. filteredValue,
  154. filterValue,
  155. filters,
  156. handleConfirm,
  157. handleReset,
  158. handleSelect,
  159. isPropAbsent: types.isPropAbsent,
  160. isActive,
  161. t,
  162. ns,
  163. showFilterPanel,
  164. hideFilterPanel,
  165. popperPaneRef,
  166. tooltip
  167. };
  168. }
  169. });
  170. function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  171. const _component_el_checkbox = vue.resolveComponent("el-checkbox");
  172. const _component_el_checkbox_group = vue.resolveComponent("el-checkbox-group");
  173. const _component_el_scrollbar = vue.resolveComponent("el-scrollbar");
  174. const _component_arrow_up = vue.resolveComponent("arrow-up");
  175. const _component_arrow_down = vue.resolveComponent("arrow-down");
  176. const _component_el_icon = vue.resolveComponent("el-icon");
  177. const _component_el_tooltip = vue.resolveComponent("el-tooltip");
  178. const _directive_click_outside = vue.resolveDirective("click-outside");
  179. return vue.openBlock(), vue.createBlock(_component_el_tooltip, {
  180. ref: "tooltip",
  181. visible: _ctx.tooltipVisible,
  182. offset: 0,
  183. placement: _ctx.placement,
  184. "show-arrow": false,
  185. "stop-popper-mouse-event": false,
  186. teleported: "",
  187. effect: "light",
  188. pure: "",
  189. "popper-class": _ctx.filterClassName,
  190. persistent: "",
  191. "append-to": _ctx.appendTo
  192. }, {
  193. content: vue.withCtx(() => [
  194. _ctx.multiple ? (vue.openBlock(), vue.createElementBlock("div", { key: 0 }, [
  195. vue.createElementVNode("div", {
  196. class: vue.normalizeClass(_ctx.ns.e("content"))
  197. }, [
  198. vue.createVNode(_component_el_scrollbar, {
  199. "wrap-class": _ctx.ns.e("wrap")
  200. }, {
  201. default: vue.withCtx(() => [
  202. vue.createVNode(_component_el_checkbox_group, {
  203. modelValue: _ctx.filteredValue,
  204. "onUpdate:modelValue": ($event) => _ctx.filteredValue = $event,
  205. class: vue.normalizeClass(_ctx.ns.e("checkbox-group"))
  206. }, {
  207. default: vue.withCtx(() => [
  208. (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.filters, (filter) => {
  209. return vue.openBlock(), vue.createBlock(_component_el_checkbox, {
  210. key: filter.value,
  211. value: filter.value
  212. }, {
  213. default: vue.withCtx(() => [
  214. vue.createTextVNode(vue.toDisplayString(filter.text), 1)
  215. ]),
  216. _: 2
  217. }, 1032, ["value"]);
  218. }), 128))
  219. ]),
  220. _: 1
  221. }, 8, ["modelValue", "onUpdate:modelValue", "class"])
  222. ]),
  223. _: 1
  224. }, 8, ["wrap-class"])
  225. ], 2),
  226. vue.createElementVNode("div", {
  227. class: vue.normalizeClass(_ctx.ns.e("bottom"))
  228. }, [
  229. vue.createElementVNode("button", {
  230. class: vue.normalizeClass({ [_ctx.ns.is("disabled")]: _ctx.filteredValue.length === 0 }),
  231. disabled: _ctx.filteredValue.length === 0,
  232. type: "button",
  233. onClick: _ctx.handleConfirm
  234. }, vue.toDisplayString(_ctx.t("el.table.confirmFilter")), 11, ["disabled", "onClick"]),
  235. vue.createElementVNode("button", {
  236. type: "button",
  237. onClick: _ctx.handleReset
  238. }, vue.toDisplayString(_ctx.t("el.table.resetFilter")), 9, ["onClick"])
  239. ], 2)
  240. ])) : (vue.openBlock(), vue.createElementBlock("ul", {
  241. key: 1,
  242. class: vue.normalizeClass(_ctx.ns.e("list"))
  243. }, [
  244. vue.createElementVNode("li", {
  245. class: vue.normalizeClass([
  246. _ctx.ns.e("list-item"),
  247. {
  248. [_ctx.ns.is("active")]: _ctx.isPropAbsent(_ctx.filterValue)
  249. }
  250. ]),
  251. onClick: ($event) => _ctx.handleSelect(null)
  252. }, vue.toDisplayString(_ctx.t("el.table.clearFilter")), 11, ["onClick"]),
  253. (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.filters, (filter) => {
  254. return vue.openBlock(), vue.createElementBlock("li", {
  255. key: filter.value,
  256. class: vue.normalizeClass([_ctx.ns.e("list-item"), _ctx.ns.is("active", _ctx.isActive(filter))]),
  257. label: filter.value,
  258. onClick: ($event) => _ctx.handleSelect(filter.value)
  259. }, vue.toDisplayString(filter.text), 11, ["label", "onClick"]);
  260. }), 128))
  261. ], 2))
  262. ]),
  263. default: vue.withCtx(() => [
  264. vue.withDirectives((vue.openBlock(), vue.createElementBlock("span", {
  265. class: vue.normalizeClass([
  266. `${_ctx.ns.namespace.value}-table__column-filter-trigger`,
  267. `${_ctx.ns.namespace.value}-none-outline`
  268. ]),
  269. onClick: _ctx.showFilterPanel
  270. }, [
  271. vue.createVNode(_component_el_icon, null, {
  272. default: vue.withCtx(() => [
  273. vue.renderSlot(_ctx.$slots, "filter-icon", {}, () => {
  274. var _a;
  275. return [
  276. ((_a = _ctx.column) == null ? void 0 : _a.filterOpened) ? (vue.openBlock(), vue.createBlock(_component_arrow_up, { key: 0 })) : (vue.openBlock(), vue.createBlock(_component_arrow_down, { key: 1 }))
  277. ];
  278. })
  279. ]),
  280. _: 3
  281. })
  282. ], 10, ["onClick"])), [
  283. [_directive_click_outside, _ctx.hideFilterPanel, _ctx.popperPaneRef]
  284. ])
  285. ]),
  286. _: 3
  287. }, 8, ["visible", "placement", "popper-class", "append-to"]);
  288. }
  289. var FilterPanel = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["render", _sfc_render], ["__file", "filter-panel.vue"]]);
  290. exports["default"] = FilterPanel;
  291. //# sourceMappingURL=filter-panel.js.map