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

A Component Library for Vue 3

{"version":3,"file":"filter-panel.vue.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":["_createBlock","_withCtx","_openBlock","_createElementBlock","_normalizeClass","_createElementVNode","_createVNode","_Fragment","_renderList","_createTextVNode","_toDisplayString","_renderSlot","_a"],"mappings":"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"}