element-plus/es/components/table/src/filter-panel.vue2.mjs.map

A Component Library for Vue 3

{"version":3,"file":"filter-panel.vue2.mjs","sources":["../../../../../../packages/components/table/src/filter-panel.vue"],"sourcesContent":["<template>\n  <el-tooltip\n    ref=\"tooltipRef\"\n    :offset=\"0\"\n    :placement=\"placement\"\n    :show-arrow=\"false\"\n    trigger=\"click\"\n    role=\"dialog\"\n    teleported\n    effect=\"light\"\n    pure\n    loop\n    :popper-class=\"filterClassName\"\n    persistent\n    :append-to=\"appendTo\"\n    @show=\"handleShowTooltip\"\n    @hide=\"handleHideTooltip\"\n  >\n    <template #content>\n      <div\n        v-if=\"multiple\"\n        ref=\"rootRef\"\n        tabindex=\"-1\"\n        :class=\"ns.e('multiple')\"\n      >\n        <div :class=\"ns.e('content')\">\n          <el-scrollbar :wrap-class=\"ns.e('wrap')\">\n            <el-checkbox-group\n              v-model=\"filteredValue\"\n              :class=\"ns.e('checkbox-group')\"\n            >\n              <el-checkbox\n                v-for=\"filter in filters\"\n                :key=\"filter.value\"\n                :value=\"filter.value\"\n              >\n                {{ filter.text }}\n              </el-checkbox>\n            </el-checkbox-group>\n          </el-scrollbar>\n        </div>\n        <div :class=\"ns.e('bottom')\">\n          <button\n            :class=\"ns.is('disabled', filteredValue.length === 0)\"\n            :disabled=\"filteredValue.length === 0\"\n            type=\"button\"\n            @click=\"handleConfirm\"\n          >\n            {{ t('el.table.confirmFilter') }}\n          </button>\n          <button type=\"button\" @click=\"handleReset\">\n            {{ t('el.table.resetFilter') }}\n          </button>\n        </div>\n      </div>\n      <ul\n        v-else\n        ref=\"rootRef\"\n        tabindex=\"-1\"\n        role=\"radiogroup\"\n        :class=\"ns.e('list')\"\n        @keydown=\"handleKeydown\"\n      >\n        <li\n          role=\"radio\"\n          :class=\"[\n            ns.e('list-item'),\n            ns.is('active', isPropAbsent(filterValue)),\n          ]\"\n          :tabindex=\"checkedIndex === 0 ? 0 : -1\"\n          :aria-checked=\"isPropAbsent(filterValue)\"\n          @click=\"handleSelect(null, 0)\"\n        >\n          {{ t('el.table.clearFilter') }}\n        </li>\n        <li\n          v-for=\"(filter, idx) in filters\"\n          :key=\"filter.value\"\n          role=\"radio\"\n          :class=\"[ns.e('list-item'), ns.is('active', isActive(filter))]\"\n          :tabindex=\"checkedIndex === idx + 1 ? 0 : -1\"\n          :aria-checked=\"isActive(filter)\"\n          @click=\"handleSelect(filter.value, idx + 1)\"\n        >\n          {{ filter.text }}\n        </li>\n      </ul>\n    </template>\n    <template #default>\n      <button\n        type=\"button\"\n        :class=\"`${ns.namespace.value}-table__column-filter-trigger`\"\n        :aria-label=\"t('el.table.filterLabel', { column: column?.label || '' })\"\n      >\n        <el-icon>\n          <slot name=\"filter-icon\">\n            <arrow-up v-if=\"column?.filterOpened\" />\n            <arrow-down v-else />\n          </slot>\n        </el-icon>\n      </button>\n    </template>\n  </el-tooltip>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent, getCurrentInstance, ref } from 'vue'\nimport { ElCheckbox, ElCheckboxGroup } from '@element-plus/components/checkbox'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { ArrowDown, ArrowUp } from '@element-plus/icons-vue'\nimport { EVENT_CODE } from '@element-plus/constants'\nimport { useLocale, useNamespace } from '@element-plus/hooks'\nimport {\n  ElTooltip,\n  useTooltipContentProps,\n} from '@element-plus/components/tooltip'\nimport ElScrollbar from '@element-plus/components/scrollbar'\nimport { getEventCode, isPropAbsent } from '@element-plus/utils'\n\nimport type { DefaultRow } from './table/defaults'\nimport type { TooltipInstance } from '@element-plus/components/tooltip'\nimport type { Placement } from '@element-plus/components/popper'\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: 'ElTableFilterPanel',\n  components: {\n    ElCheckbox,\n    ElCheckboxGroup,\n    ElScrollbar,\n    ElTooltip,\n    ElIcon,\n    ArrowDown,\n    ArrowUp,\n  },\n  props: {\n    placement: {\n      type: String as PropType<Placement>,\n      default: 'bottom-start',\n    },\n    store: {\n      type: Object as PropType<Store<DefaultRow>>,\n    },\n    column: {\n      type: Object as PropType<TableColumnCtx<DefaultRow>>,\n    },\n    upDataColumn: {\n      type: Function,\n    },\n    appendTo: useTooltipContentProps.appendTo,\n  },\n  setup(props) {\n    const instance = getCurrentInstance()\n    const { t } = useLocale()\n    const ns = useNamespace('table-filter')\n    const parent = instance?.parent as TableHeader\n    if (props.column && !parent.filterPanels.value[props.column.id]) {\n      parent.filterPanels.value[props.column.id] = instance\n    }\n\n    const tooltipRef = ref<TooltipInstance | null>(null)\n    const rootRef = ref<HTMLElement | null>(null)\n    const checkedIndex = ref(0)\n\n    const filters = computed(() => {\n      return props.column && props.column.filters\n    })\n    const filterClassName = computed(() => {\n      if (props.column && props.column.filterClassName) {\n        return `${ns.b()} ${props.column.filterClassName}`\n      }\n      return ns.b()\n    })\n    const filterValue = computed({\n      get: () => (props.column?.filteredValue || [])[0],\n      set: (value?: string | null) => {\n        if (filteredValue.value) {\n          if (!isPropAbsent(value)) {\n            filteredValue.value.splice(0, 1, value)\n          } else {\n            filteredValue.value.splice(0, 1)\n          }\n        }\n      },\n    })\n    const filteredValue: WritableComputedRef<string[]> = computed({\n      get() {\n        if (props.column) {\n          return props.column.filteredValue || []\n        }\n        return []\n      },\n      set(value: string[]) {\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: { value: string; text: string }) => {\n      return filter.value === filterValue.value\n    }\n    const hidden = () => {\n      tooltipRef.value?.onClose()\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 | null, index: number) => {\n      filterValue.value = _filterValue!\n      checkedIndex.value = index\n      if (!isPropAbsent(_filterValue)) {\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    const handleShowTooltip = () => {\n      rootRef.value?.focus()\n      !multiple.value && initCheckedIndex()\n      if (props.column) {\n        props.upDataColumn?.('filterOpened', true)\n      }\n    }\n    const handleHideTooltip = () => {\n      if (props.column) {\n        props.upDataColumn?.('filterOpened', false)\n      }\n    }\n\n    const initCheckedIndex = () => {\n      if (isPropAbsent(filterValue)) {\n        checkedIndex.value = 0\n        return\n      }\n      const idx = (filters.value || []).findIndex((item) => {\n        return item.value === filterValue.value\n      })\n      checkedIndex.value = idx >= 0 ? idx + 1 : 0\n    }\n\n    const handleKeydown = (event: KeyboardEvent) => {\n      const code = getEventCode(event)\n      const len = (filters.value ? filters.value.length : 0) + 1\n      let index = checkedIndex.value\n      let isPreventDefault = true\n\n      switch (code) {\n        case EVENT_CODE.down:\n        case EVENT_CODE.right:\n          index = (index + 1) % len\n          break\n        case EVENT_CODE.up:\n        case EVENT_CODE.left:\n          index = (index - 1 + len) % len\n          break\n        case EVENT_CODE.tab:\n          hidden()\n          isPreventDefault = false\n          break\n        case EVENT_CODE.enter:\n        case EVENT_CODE.space:\n          if (index === 0) {\n            handleSelect(null, 0)\n          } else {\n            const item = (filters.value || [])[index - 1]\n            item.value && handleSelect(item.value, index)\n          }\n          break\n        default:\n          isPreventDefault = false\n          break\n      }\n\n      isPreventDefault && event.preventDefault()\n      checkedIndex.value = index\n      rootRef.value\n        ?.querySelector<HTMLElement>(\n          `.${ns.e('list-item')}:nth-child(${index + 1})`\n        )\n        ?.focus()\n    }\n\n    return {\n      multiple,\n      filterClassName,\n      filteredValue,\n      filterValue,\n      filters,\n      handleConfirm,\n      handleReset,\n      handleSelect,\n      isPropAbsent,\n      isActive,\n      t,\n      ns,\n      tooltipRef,\n      rootRef,\n      checkedIndex,\n      handleShowTooltip,\n      handleHideTooltip,\n      handleKeydown,\n    }\n  },\n})\n</script>\n"],"names":["filteredValue"],"mappings":"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"}