Many resources are needed to download a project. Please understand that we have to compensate our server costs. Thank you in advance.
Project price only 1 $
You can buy this project and download/modify it how often you want.
package.lib.components.VDataTable.VDataTableHeaders.mjs.map Maven / Gradle / Ivy
{"version":3,"file":"VDataTableHeaders.mjs","names":["VDataTableColumn","VCheckboxBtn","VChip","VIcon","VSelect","useHeaders","useSelection","useSort","useBackgroundColor","makeDisplayProps","useDisplay","IconValue","LoaderSlot","makeLoaderProps","useLoader","useLocale","computed","mergeProps","convertToUnit","genericComponent","propsFactory","useRender","makeVDataTableHeadersProps","color","String","sticky","Boolean","disableSort","multiSort","sortAscIcon","type","default","sortDescIcon","headerProps","Object","VDataTableHeaders","name","props","setup","_ref","slots","t","toggleSort","sortBy","isSorted","someSelected","allSelected","selectAll","showSelectAll","columns","headers","loaderClasses","getFixedStyles","column","y","fixed","undefined","position","left","fixedOffset","top","getSortIcon","item","value","find","key","order","backgroundColorClasses","backgroundColorStyles","displayClasses","mobile","slotProps","headerCellClasses","VDataTableHeaderCell","_ref2","x","noPadding","_createVNode","_mergeProps","align","sortable","width","minWidth","maxWidth","colspan","rowspan","nowrap","lastFixed","columnSlotName","columnSlotProps","title","findIndex","VDataTableMobileHeaderCell","displayItems","filter","appendIcon","showSelectColumn","length","onClick:clear","onClick:append","chip","raw","e","preventDefault","stopPropagation","_Fragment","map","row","loading","loader"],"sources":["../../../src/components/VDataTable/VDataTableHeaders.tsx"],"sourcesContent":["// Components\nimport { VDataTableColumn } from './VDataTableColumn'\nimport { VCheckboxBtn } from '@/components/VCheckbox'\nimport { VChip } from '@/components/VChip'\nimport { VIcon } from '@/components/VIcon'\nimport { VSelect } from '@/components/VSelect'\n\n// Composables\nimport { useHeaders } from './composables/headers'\nimport { useSelection } from './composables/select'\nimport { useSort } from './composables/sort'\nimport { useBackgroundColor } from '@/composables/color'\nimport { makeDisplayProps, useDisplay } from '@/composables/display'\nimport { IconValue } from '@/composables/icons'\nimport { LoaderSlot, makeLoaderProps, useLoader } from '@/composables/loader'\nimport { useLocale } from '@/composables/locale'\n\n// Utilities\nimport { computed, mergeProps } from 'vue'\nimport { convertToUnit, genericComponent, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { CSSProperties, PropType, UnwrapRef } from 'vue'\nimport type { provideSelection } from './composables/select'\nimport type { provideSort } from './composables/sort'\nimport type { InternalDataTableHeader } from './types'\nimport type { ItemProps } from '@/composables/list-items'\nimport type { LoaderSlotProps } from '@/composables/loader'\n\nexport type HeadersSlotProps = {\n headers: InternalDataTableHeader[][]\n columns: InternalDataTableHeader[]\n sortBy: UnwrapRef['sortBy']>\n someSelected: UnwrapRef['someSelected']>\n allSelected: UnwrapRef['allSelected']>\n toggleSort: ReturnType['toggleSort']\n selectAll: ReturnType['selectAll']\n getSortIcon: (column: InternalDataTableHeader) => IconValue\n isSorted: ReturnType['isSorted']\n}\n\nexport type VDataTableHeaderCellColumnSlotProps = {\n column: InternalDataTableHeader\n selectAll: ReturnType['selectAll']\n isSorted: ReturnType['isSorted']\n toggleSort: ReturnType['toggleSort']\n sortBy: UnwrapRef['sortBy']>\n someSelected: UnwrapRef['someSelected']>\n allSelected: UnwrapRef['allSelected']>\n getSortIcon: (column: InternalDataTableHeader) => IconValue\n}\n\nexport type VDataTableHeadersSlots = {\n headers: HeadersSlotProps\n loader: LoaderSlotProps\n 'header.data-table-select': VDataTableHeaderCellColumnSlotProps\n 'header.data-table-expand': VDataTableHeaderCellColumnSlotProps\n} & { [key: `header.${string}`]: VDataTableHeaderCellColumnSlotProps }\n\nexport const makeVDataTableHeadersProps = propsFactory({\n color: String,\n sticky: Boolean,\n disableSort: Boolean,\n multiSort: Boolean,\n sortAscIcon: {\n type: IconValue,\n default: '$sortAsc',\n },\n sortDescIcon: {\n type: IconValue,\n default: '$sortDesc',\n },\n headerProps: {\n type: Object as PropType>,\n },\n\n ...makeDisplayProps(),\n ...makeLoaderProps(),\n}, 'VDataTableHeaders')\n\nexport const VDataTableHeaders = genericComponent()({\n name: 'VDataTableHeaders',\n\n props: makeVDataTableHeadersProps(),\n\n setup (props, { slots }) {\n const { t } = useLocale()\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 function getFixedStyles (column: InternalDataTableHeader, y: number): CSSProperties | undefined {\n if (!props.sticky && !column.fixed) return undefined\n\n return {\n position: 'sticky',\n left: column.fixed ? convertToUnit(column.fixedOffset) : undefined,\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 { displayClasses, mobile } = useDisplay(props)\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 } satisfies HeadersSlotProps))\n\n const headerCellClasses = computed(() => ([\n 'v-data-table__th',\n {\n 'v-data-table__th--sticky': props.sticky,\n },\n displayClasses.value,\n loaderClasses.value,\n ]))\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 const headerProps = mergeProps(props.headerProps ?? {}, column.headerProps ?? {})\n\n return (\n toggleSort(column) : undefined }\n fixed={ column.fixed }\n nowrap={ column.nowrap }\n lastFixed={ column.lastFixed }\n noPadding={ noPadding }\n { ...headerProps }\n >\n {{\n default: () => {\n const columnSlotName = `header.${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['header.data-table-select']?.(columnSlotProps) ?? (showSelectAll.value && (\n 