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

Vue Material Component Framework

{"version":3,"file":"VDataTableHeaders.mjs","names":["VCheckboxBtn","VDataTableColumn","VIcon","IconValue","LoaderSlot","makeLoaderProps","useLoader","useBackgroundColor","useHeaders","useSelection","useSort","convertToUnit","genericComponent","useRender","VDataTableHeaders","name","props","color","String","sticky","Boolean","multiSort","sortAscIcon","type","default","sortDescIcon","setup","slots","emit","toggleSort","sortBy","someSelected","allSelected","selectAll","columns","headers","loaderClasses","getFixedStyles","column","y","fixed","position","zIndex","undefined","left","fixedOffset","top","getSortIcon","id","item","value","find","key","order","backgroundColorClasses","backgroundColorStyles","VDataTableHeaderCell","x","isSorted","noPadding","align","sortable","width","minWidth","colspan","rowspan","lastFixed","slotName","slotProps","title","findIndex","map","row","loading","length","loader"],"sources":["../../../src/labs/VDataTable/VDataTableHeaders.tsx"],"sourcesContent":["// Components\nimport { VCheckboxBtn } from '@/components/VCheckbox'\nimport { VDataTableColumn } from './VDataTableColumn'\nimport { VIcon } from '@/components/VIcon'\n\n// Composables\nimport { IconValue } from '@/composables/icons'\nimport { LoaderSlot, makeLoaderProps, useLoader } from '@/composables/loader'\nimport { useBackgroundColor } from '@/composables/color'\nimport { useHeaders } from './composables/headers'\nimport { useSelection } from './composables/select'\nimport { useSort } from './composables/sort'\n\n// Utilities\nimport { convertToUnit, genericComponent, useRender } from '@/util'\n\n// Types\nimport type { InternalDataTableHeader } from './types'\nimport type { LoaderSlotProps } from '@/composables/loader'\n\nexport type VDataTableHeadersSlots = {\n  default: []\n  loader: [LoaderSlotProps]\n  'column.data-table-select': [InternalDataTableHeader, (value: boolean) => void]\n}\n\nexport const VDataTableHeaders = genericComponent<VDataTableHeadersSlots>()({\n  name: 'VDataTableHeaders',\n\n  props: {\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  },\n\n  setup (props, { slots, emit }) {\n    const { toggleSort, sortBy } = useSort()\n    const { someSelected, allSelected, selectAll } = useSelection()\n    const { columns, headers } = useHeaders()\n    const { loaderClasses } = useLoader(props)\n\n    const getFixedStyles = (column: InternalDataTableHeader, y: number) => {\n      if (!props.sticky && !column.fixed) return null\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 (id: string) {\n      const item = sortBy.value.find(item => item.key === id)\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 VDataTableHeaderCell = ({ column, x, y }: { column: InternalDataTableHeader, x: number, y: number }) => {\n      const isSorted = !!sortBy.value.find(x => x.key === column.key)\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,\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.key) : undefined}\n          lastFixed={column.lastFixed}\n          noPadding={noPadding}\n        >\n          {{\n            default: () => {\n              const slotName = `column.${column.key}`\n              const slotProps = {\n                column,\n                selectAll,\n              }\n\n              if (slots[slotName]) return slots[slotName]!(slotProps)\n\n              if (column.key === 'data-table-select') {\n                return slots['column.data-table-select']?.(slotProps) ?? (\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.key) }\n                    />\n                  )}\n                  { props.multiSort && isSorted && (\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      <>\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\n            <LoaderSlot\n              name=\"v-data-table-headers\"\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"],"mappings":"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"}