vuetify/lib/labs/VDataTable/VDataTableHeaders.mjs.map

Vue Material Component Framework

{"version":3,"file":"VDataTableHeaders.mjs","names":["VDataTableColumn","VCheckboxBtn","VIcon","useHeaders","useSelection","useSort","useBackgroundColor","IconValue","LoaderSlot","makeLoaderProps","useLoader","computed","convertToUnit","genericComponent","propsFactory","useRender","makeVDataTableHeadersProps","color","String","sticky","Boolean","multiSort","sortAscIcon","type","default","sortDescIcon","VDataTableHeaders","name","props","setup","_ref","slots","emit","toggleSort","sortBy","isSorted","someSelected","allSelected","selectAll","showSelectAll","columns","headers","loaderClasses","getFixedStyles","column","y","fixed","undefined","position","zIndex","left","fixedOffset","top","getSortIcon","item","value","find","key","order","backgroundColorClasses","backgroundColorStyles","slotProps","VDataTableHeaderCell","_ref2","x","noPadding","_createVNode","align","sortable","width","minWidth","colspan","rowspan","lastFixed","columnSlotName","columnSlotProps","title","findIndex","_Fragment","map","row","loading","length","loader"],"sources":["../../../src/labs/VDataTable/VDataTableHeaders.tsx"],"sourcesContent":["// Components\nimport { VDataTableColumn } from './VDataTableColumn'\nimport { VCheckboxBtn } from '@/components/VCheckbox'\nimport { VIcon } from '@/components/VIcon'\n\n// Composables\nimport { useHeaders } from './composables/headers'\nimport { useSelection } from './composables/select'\nimport { useSort } from './composables/sort'\nimport { useBackgroundColor } from '@/composables/color'\nimport { IconValue } from '@/composables/icons'\nimport { LoaderSlot, makeLoaderProps, useLoader } from '@/composables/loader'\n\n// Utilities\nimport { computed } from 'vue'\nimport { convertToUnit, genericComponent, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { CSSProperties, UnwrapRef } from 'vue'\nimport type { provideSelection } from './composables/select'\nimport type { provideSort } from './composables/sort'\nimport type { InternalDataTableHeader } from './types'\nimport type { LoaderSlotProps } from '@/composables/loader'\n\nexport type HeadersSlotProps = {\n  headers: InternalDataTableHeader[][]\n  columns: InternalDataTableHeader[]\n  sortBy: UnwrapRef<ReturnType<typeof provideSort>['sortBy']>\n  someSelected: UnwrapRef<ReturnType<typeof provideSelection>['someSelected']>\n  allSelected: UnwrapRef<ReturnType<typeof provideSelection>['allSelected']>\n  toggleSort: ReturnType<typeof provideSort>['toggleSort']\n  selectAll: ReturnType<typeof provideSelection>['selectAll']\n  getSortIcon: (column: InternalDataTableHeader) => IconValue\n  getFixedStyles: (column: InternalDataTableHeader, y: number) => CSSProperties | undefined\n  isSorted: ReturnType<typeof provideSort>['isSorted']\n}\n\ntype VDataTableHeaderCellColumnSlotProps = {\n  column: InternalDataTableHeader\n  selectAll: ReturnType<typeof provideSelection>['selectAll']\n  isSorted: ReturnType<typeof provideSort>['isSorted']\n  toggleSort: ReturnType<typeof provideSort>['toggleSort']\n  sortBy: UnwrapRef<ReturnType<typeof provideSort>['sortBy']>\n  someSelected: UnwrapRef<ReturnType<typeof provideSelection>['someSelected']>\n  allSelected: UnwrapRef<ReturnType<typeof provideSelection>['allSelected']>\n  getSortIcon: (column: InternalDataTableHeader) => IconValue\n}\n\nexport type VDataTableHeadersSlots = {\n  headers: HeadersSlotProps\n  loader: LoaderSlotProps\n  'column.data-table-select': VDataTableHeaderCellColumnSlotProps\n  'column.data-table-expand': VDataTableHeaderCellColumnSlotProps\n} & { [key: `column.${string}`]: VDataTableHeaderCellColumnSlotProps }\n\nexport const makeVDataTableHeadersProps = propsFactory({\n  color: String,\n  sticky: Boolean,\n  multiSort: Boolean,\n  sortAscIcon: {\n    type: IconValue,\n    default: '$sortAsc',\n  },\n  sortDescIcon: {\n    type: IconValue,\n    default: '$sortDesc',\n  },\n\n  ...makeLoaderProps(),\n}, 'VDataTableHeaders')\n\nexport const VDataTableHeaders = genericComponent<VDataTableHeadersSlots>()({\n  name: 'VDataTableHeaders',\n\n  props: makeVDataTableHeadersProps(),\n\n  setup (props, { slots, emit }) {\n    const { toggleSort, sortBy, isSorted } = useSort()\n    const { someSelected, allSelected, selectAll, showSelectAll } = useSelection()\n    const { columns, headers } = useHeaders()\n    const { loaderClasses } = useLoader(props)\n\n    const getFixedStyles = (column: InternalDataTableHeader, y: number): CSSProperties | undefined => {\n      if (!props.sticky && !column.fixed) return undefined\n\n      return {\n        position: 'sticky',\n        zIndex: column.fixed ? 4 : props.sticky ? 3 : undefined, // TODO: This needs to account for possible previous fixed columns.\n        left: column.fixed ? convertToUnit(column.fixedOffset) : undefined, // TODO: This needs to account for possible row/colspan of previous columns\n        top: props.sticky ? `calc(var(--v-table-header-height) * ${y})` : undefined,\n      }\n    }\n\n    function getSortIcon (column: InternalDataTableHeader) {\n      const item = sortBy.value.find(item => item.key === column.key)\n\n      if (!item) return props.sortAscIcon\n\n      return item.order === 'asc' ? props.sortAscIcon : props.sortDescIcon\n    }\n\n    const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(props, 'color')\n\n    const slotProps = computed(() => ({\n      headers: headers.value,\n      columns: columns.value,\n      toggleSort,\n      isSorted,\n      sortBy: sortBy.value,\n      someSelected: someSelected.value,\n      allSelected: allSelected.value,\n      selectAll,\n      getSortIcon,\n      getFixedStyles,\n    } satisfies HeadersSlotProps))\n\n    const VDataTableHeaderCell = ({ column, x, y }: { column: InternalDataTableHeader, x: number, y: number }) => {\n      const noPadding = column.key === 'data-table-select' || column.key === 'data-table-expand'\n\n      return (\n        <VDataTableColumn\n          tag=\"th\"\n          align={ column.align }\n          class={[\n            'v-data-table__th',\n            {\n              'v-data-table__th--sortable': column.sortable,\n              'v-data-table__th--sorted': isSorted(column),\n            },\n            loaderClasses.value,\n          ]}\n          style={{\n            width: convertToUnit(column.width),\n            minWidth: convertToUnit(column.width),\n            ...getFixedStyles(column, y),\n          }}\n          colspan={ column.colspan }\n          rowspan={ column.rowspan }\n          onClick={ column.sortable ? () => toggleSort(column) : undefined }\n          lastFixed={ column.lastFixed }\n          noPadding={ noPadding }\n        >\n          {{\n            default: () => {\n              const columnSlotName = `column.${column.key}` as const\n              const columnSlotProps: VDataTableHeaderCellColumnSlotProps = {\n                column,\n                selectAll,\n                isSorted,\n                toggleSort,\n                sortBy: sortBy.value,\n                someSelected: someSelected.value,\n                allSelected: allSelected.value,\n                getSortIcon,\n              }\n\n              if (slots[columnSlotName]) return slots[columnSlotName]!(columnSlotProps)\n\n              if (column.key === 'data-table-select') {\n                return slots['column.data-table-select']?.(columnSlotProps) ?? (showSelectAll && (\n                  <VCheckboxBtn\n                    modelValue={ allSelected.value }\n                    indeterminate={ someSelected.value && !allSelected.value }\n                    onUpdate:modelValue={ selectAll }\n                  />\n                ))\n              }\n\n              return (\n                <div class=\"v-data-table-header__content\">\n                  <span>{ column.title }</span>\n                  { column.sortable && (\n                    <VIcon\n                      key=\"icon\"\n                      class=\"v-data-table-header__sort-icon\"\n                      icon={ getSortIcon(column) }\n                    />\n                  )}\n                  { props.multiSort && isSorted(column) && (\n                    <div\n                      key=\"badge\"\n                      class={[\n                        'v-data-table-header__sort-badge',\n                        ...backgroundColorClasses.value,\n                      ]}\n                      style={ backgroundColorStyles.value }\n                    >\n                      { sortBy.value.findIndex(x => x.key === column.key) + 1 }\n                    </div>\n                  )}\n                </div>\n              )\n            },\n          }}\n        </VDataTableColumn>\n      )\n    }\n\n    useRender(() => {\n      return (\n        <>\n          { slots.headers\n            ? slots.headers(slotProps.value)\n            : headers.value.map((row, y) => (\n            <tr>\n              { row.map((column, x) => (\n                <VDataTableHeaderCell column={ column } x={ x } y={ y } />\n              ))}\n            </tr>\n            ))}\n\n          { props.loading && (\n            <tr class=\"v-data-table-progress\">\n              <th colspan={ columns.value.length }>\n                <LoaderSlot\n                  name=\"v-data-table-progress\"\n                  active\n                  color={ typeof props.loading === 'boolean' ? undefined : props.loading }\n                  indeterminate\n                  v-slots={{ default: slots.loader }}\n                />\n              </th>\n            </tr>\n          )}\n        </>\n      )\n    })\n  },\n})\n"],"mappings":"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"}