hongluan-ui/es/components/table/src/filter-panel.mjs.map

Hongluan Component Library for Vue 3

{"version":3,"file":"filter-panel.mjs","sources":["../../../../../../packages/components/table/src/filter-panel.vue"],"sourcesContent":["<template>\n  <hl-tooltip\n    ref=\"tooltip\"\n    :visible=\"tooltipVisible\"\n    :offset=\"0\"\n    :placement=\"placement\"\n    :show-arrow=\"false\"\n    :stop-popper-mouse-event=\"false\"\n    teleported\n    effect=\"light\"\n    pure\n    :popper-class=\"filterClassName\"\n    persistent\n  >\n    <template #content>\n      <div v-if=\"multiple\">\n        <div class=\"table-filter-content\">\n          <hl-scrollbar wrap-class=\"table-filter-wrap\">\n            <hl-checkbox-group\n              v-model=\"filteredValue\"\n              class=\"table-filter-checkbox-group\"\n            >\n              <hl-checkbox\n                v-for=\"filter in filters\"\n                :key=\"filter.value\"\n                :label=\"filter.value\"\n              >\n                {{ filter.text }}\n              </hl-checkbox>\n            </hl-checkbox-group>\n          </hl-scrollbar>\n        </div>\n        <div class=\"table-filter-bottom\">\n          <hl-button\n            :class=\"{ 'is-disabled': filteredValue.length === 0 }\"\n            :disabled=\"filteredValue.length === 0\"\n            @click=\"handleConfirm\"\n          >\n            {{ t('hl.table.confirmFilter') }}\n          </hl-button>\n          <hl-button type=\"button\" @click=\"handleReset\">\n            {{ t('hl.table.resetFilter') }}\n          </hl-button>\n        </div>\n      </div>\n      <ul v-else class=\"table-filter-list\">\n        <li\n          :class=\"[\n            'table-filter-list-item',\n            {\n              'is-active':\n                filterValue === undefined || filterValue === null,\n            },\n          ]\"\n          @click=\"handleSelect(null)\"\n        >\n          {{ t('hl.table.clearFilter') }}\n        </li>\n        <li\n          v-for=\"filter in filters\"\n          :key=\"filter.value\"\n          :class=\"['table-filter-list-item', isActive(filter) ? 'is-active' : '']\"\n          :label=\"filter.value\"\n          @click=\"handleSelect(filter.value)\"\n        >\n          {{ filter.text }}\n        </li>\n      </ul>\n    </template>\n    <template #default>\n      <span\n        v-click-outside:[popperPaneRef]=\"hideFilterPanel\"\n        :class=\"[\n          `table-filter-trigger`,\n          `none-outline`,\n          column.filterOpened ? 'opened' : ''\n        ]\"\n        @click=\"showFilterPanel\"\n      >\n        <hl-icon>\n          <slot name=\"filter-icon\" :filterOpened=\"column.filterOpened\">\n            <system-filter />\n          </slot>\n        </hl-icon>\n      </span>\n    </template>\n  </hl-tooltip>\n</template>\n\n<script lang=\"ts\">\n// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-nocheck\nimport { computed, defineComponent, getCurrentInstance, ref, watch } from 'vue'\nimport HlCheckbox from '@hongluan-ui/components/checkbox'\nimport HlCheckboxGroup from '@hongluan-ui/components/checkbox-group'\nimport HlIcon from '@hongluan-ui/components/icon'\nimport { SystemFilter } from '@hongluan-ui/components/system-icon'\nimport { ClickOutside } from '@hongluan-ui/directives'\nimport { useLocale } from '@hongluan-ui/hooks'\nimport HlTooltip from '@hongluan-ui/components/tooltip'\nimport HlButton from '@hongluan-ui/components/button'\nimport HlScrollbar from '@hongluan-ui/components/scrollbar'\nimport type { Placement } from '@hongluan-ui/components/popper'\n\nimport type { PropType, WritableComputedRef } from 'vue'\nimport type { TableColumnCtx } from './table-column/defaults'\nimport type { TableHeader } from './table-header'\nimport type { Store } from './store'\n\nexport default defineComponent({\n  name: 'TableFilterPanel',\n  components: {\n    HlCheckbox,\n    HlCheckboxGroup,\n    HlScrollbar,\n    HlTooltip,\n    HlIcon,\n    HlButton,\n    SystemFilter,\n  },\n  directives: { ClickOutside },\n  props: {\n    placement: {\n      type: String as PropType<Placement>,\n      default: 'bottom-start',\n    },\n    store: {\n      type: Object as PropType<Store<unknown>>,\n    },\n    column: {\n      type: Object as PropType<TableColumnCtx<unknown>>,\n    },\n    upDataColumn: {\n      type: Function,\n    },\n  },\n  setup(props) {\n    const instance = getCurrentInstance()\n    const { t } = useLocale()\n    const parent = instance?.parent as TableHeader\n    if (!parent.filterPanels.value[props.column.id]) {\n      parent.filterPanels.value[props.column.id] = instance\n    }\n    const tooltipVisible = ref(false)\n    const tooltip = ref<InstanceType<typeof HlTooltip> | null>(null)\n    const filters = computed(() => {\n      return props.column && props.column.filters\n    })\n    const filterClassName = computed(() => {\n      if (props.column.filterClassName) {\n        return `popover popover-table-filter ${props.column.filterClassName}`\n      }\n      return 'popover popover-table-filter'\n    })\n    const filterValue = computed({\n      get: () => (props.column?.filteredValue || [])[0],\n      set: (value: string) => {\n        if (filteredValue.value) {\n          if (typeof value !== 'undefined' && value !== null) {\n            filteredValue.value.splice(0, 1, value)\n          } else {\n            filteredValue.value.splice(0, 1)\n          }\n        }\n      },\n    })\n    const filteredValue: WritableComputedRef<unknown[]> = computed({\n      get() {\n        if (props.column) {\n          return props.column.filteredValue || []\n        }\n        return []\n      },\n      set(value: unknown[]) {\n        if (props.column) {\n          props.upDataColumn('filteredValue', value)\n        }\n      },\n    })\n    const multiple = computed(() => {\n      if (props.column) {\n        return props.column.filterMultiple\n      }\n      return true\n    })\n    const isActive = filter => {\n      return filter.value === filterValue.value\n    }\n    const hidden = () => {\n      tooltipVisible.value = false\n    }\n    const showFilterPanel = (e: MouseEvent) => {\n      e.stopPropagation()\n      tooltipVisible.value = !tooltipVisible.value\n    }\n    const hideFilterPanel = () => {\n      tooltipVisible.value = false\n    }\n    const handleConfirm = () => {\n      confirmFilter(filteredValue.value)\n      hidden()\n    }\n    const handleReset = () => {\n      filteredValue.value = []\n      confirmFilter(filteredValue.value)\n      hidden()\n    }\n    const handleSelect = (_filterValue?: string) => {\n      filterValue.value = _filterValue\n      if (typeof _filterValue !== 'undefined' && _filterValue !== null) {\n        confirmFilter(filteredValue.value)\n      } else {\n        confirmFilter([])\n      }\n      hidden()\n    }\n    const confirmFilter = (filteredValue: unknown[]) => {\n      props.store.commit('filterChange', {\n        column: props.column,\n        values: filteredValue,\n      })\n      props.store.updateAllSelected()\n    }\n    watch(\n      tooltipVisible,\n      value => {\n        // todo\n        if (props.column) {\n          props.upDataColumn('filterOpened', value)\n        }\n      },\n      {\n        immediate: true,\n      },\n    )\n\n    const popperPaneRef = computed(() => {\n      return tooltip.value?.popperRef?.contentRef\n    })\n\n    return {\n      tooltipVisible,\n      multiple,\n      filteredValue,\n      filterValue,\n      filters,\n      filterClassName,\n      handleConfirm,\n      handleReset,\n      handleSelect,\n      isActive,\n      t,\n      showFilterPanel,\n      hideFilterPanel,\n      popperPaneRef,\n      tooltip,\n    }\n  },\n})\n</script>\n"],"names":["_toDisplayString","_createElementBlock"],"mappings":";;;;;;;;;;;;;;;AA6GA,MAAK,YAAa,gBAAa;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AACF,EACA,YAAY,EAAE;AAAa,EAC3B,OAAO;AAAA,IACL,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA;AACX,IACA,OAAO;AAAA,MACL,MAAM;AAAA;AACR,IACA,QAAQ;AAAA,MACN,MAAM;AAAA;AACR,IACA,cAAc;AAAA,MACZ,MAAM;AAAA;AACR;AACF,EACA,MAAM,OAAO;AACX,UAAM,WAAW;AACjB,UAAM,EAAE,MAAM;AACd,UAAM,SAAS;AACf,QAAI,CAAC,OAAO,aAAa,MAAM,MAAM,OAAO,KAAK;AAC/C,aAAO,aAAa,MAAM,MAAM,OAAO,MAAM;AAAA;AAE/C,UAAM,iBAAiB,IAAI,KAAK;AAChC,UAAM,UAAU,IAA2C,IAAI;AAC/D,UAAM,UAAU,SAAS,MAAM;AAC7B,aAAO,MAAM,UAAU,MAAM,OAAO;AAAA,KACrC;AACD,UAAM,kBAAkB,SAAS,MAAM;AACrC,UAAI,MAAM,OAAO,iBAAiB;AAChC,eAAO,gCAAgC,MAAM,OAAO;AAAA;AAEtD,aAAO;AAAA,KACR;AACD,UAAM,cAAc,SAAS;AAAA,MAC3B,KAAK,MAAO;AAAmC,YACzC;AACJ;AACE;AACE;AAAsC;AAEtC,0BAAc,gBAAgB;AAAC;AACjC;AACF;AACF;AAEF;AAA+D;AAE3D;AACE,uBAAa;AAAyB;AAExC;AAAQ;AACV;AAEE,kBAAU;AACR;AAAyC;AAC3C;AACF;AAEF;AACE;AACE;AAAoB;AAEtB;AAAO;AAET;AACE,aAAO;AAA6B;AAEtC,UAAM;AACJ;AAAuB;AAEzB,UAAM;AACJ;AACA;AAAuC,IACzC;AACA;AACE,qBAAe,QAAQ;AAAA;AAEzB,UAAM;AACJ,oBAAc,cAAc;AAC5B;AAAO,IACT;AACA;AACE;AACA;AACA;AAAO;AAET;AACE;AACA;AACE,sBAAc;AAAmB,MACnC;AACE;AAAgB;AAElB,aAAO;AAAA;AAET;AACE,YAAM;AAA6B;AACnB;AACN,MACV;AACA;AAA8B;AAEhC;AAII;AACE;AAAwC;AAC1C;AAEF;AACa;AAIf;AACE,qBAAe;AAAkB,KAClC;AAED;AAAO,MACL;AAAA,MACA;AAAA,MACA;AAAA;AACA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AACF;AAEJ;;;;;;;;;;;AA5Ke;AApFP;AACM;AACD;AACG,IACX,cAAY;AAAA,IACZ;AAAyB,IAC1B;AAAA,IACA;AAAO,IACP;AAAA,IACC;AAAc,IACf;AAAA;IAEW;AA8BH;AAAA;AA5B6B;AACa;AAYtB;AAAA,2BAVT;AAAA;AAAa;AAChB;;AAGqB,qCAD3B;;AAMc;AAJC;AACE;;AAEE;AAAH;;;;;;;;;;;;AAKU;AAOlB,YALT;AAA4C;AACd;AACvB;;AAEyB;AAA7B;;;;AAIM;AAFI,YAAU;AAAO;;AACA;AAA3B;;;;;AA0BL;;AAtBY;QACf;AAWK;AAVG;;0BAAmG;AAAwC;;;AAO7H;AAEhB;;AAUD,iBANG;AAAO,2EAC+B;AAAM,kBAC1C;AAAO,iDACM;AAAY;AAEnB;;;aAIFA;AAeT;AAAA,QAZJ;AAAK;;mCAA6FC;AAAA;;AAK3F;qBAME;AAAA;AADD;AAAA;AAFwC,oBAExC;AAAA,0BADY;AAAA;;;;;;AAVU;;;;;;;;;;;;;"}