vuestic-ui
Version:
Vue 3 UI Framework
1 lines • 4.33 kB
Source Map (JSON)
{"version":3,"file":"useStylable.mjs","sources":["../../../../../../src/components/va-data-table/hooks/useStylable.ts"],"sourcesContent":["import { computed, PropType, ExtractPropTypes } from 'vue'\n\nimport { safeCSSLength } from '../../../utils/css'\nimport { useColors } from '../../../composables'\nimport { useSelectableProp } from './useCommonProps'\n\nimport type {\n DataTableColumnInternal,\n DataTableColumnClass,\n DataTableColumnStyle,\n DataTableCell,\n} from '../types'\n\nconst prefix = '--va-data-table'\n\nconst isFunction = (val: unknown): val is Function => typeof val === 'function'\n\nexport const useStylableProps = {\n ...useSelectableProp,\n selectedColor: { type: String, default: 'primary' },\n allowFooterSorting: { type: Boolean, default: false },\n stickyHeader: { type: Boolean, default: false },\n stickyFooter: { type: Boolean, default: false },\n height: { type: [String, Number] as PropType<string | number | undefined> },\n}\n\nconst getClass = (classes: DataTableColumnClass) => isFunction(classes) ? classes() : classes\nconst getStyle = (styles: DataTableColumnStyle) => isFunction(styles) ? styles() : styles\n\nexport const useStylable = (props: ExtractPropTypes<typeof useStylableProps>) => {\n const { getColor, getFocusColor, getHoverColor } = useColors()\n\n const color = computed(() => getColor(props.selectedColor))\n\n const CSSVariables = computed(() => ({\n hoverColor: getHoverColor(color.value),\n selectedColor: props.selectable ? getFocusColor(color.value) : undefined,\n tableHeight: props.height ? safeCSSLength(props.height) : 'var(--va-data-table-height)',\n theadBg: props.stickyHeader\n ? 'var(--va-data-table-thead-background, var(--va-data-table-header-background))'\n : 'var(--va-data-table-thead-background)',\n tfootBg: props.stickyFooter\n ? 'var(--va-data-table-tfoot-background, var(--va-data-table-header-background))'\n : 'var(--va-data-table-tfoot-background)',\n }))\n\n const getHeaderCSSVariables = (column: DataTableColumnInternal) => ({\n [`${prefix}-width`]: column.width && safeCSSLength(column.width),\n [`${prefix}-align`]: column.thAlign,\n [`${prefix}-vertical-align`]: column.thVerticalAlign,\n [`${prefix}-cursor`]: column.sortable ? 'pointer' : 'default',\n })\n\n const getCellCSSVariables = (cell: DataTableCell) => ({\n [`${prefix}-align`]: cell.column.tdAlign,\n [`${prefix}-vertical-align`]: cell.column.tdVerticalAlign,\n })\n\n const getFooterCSSVariables = (column: DataTableColumnInternal) => ({\n [`${prefix}-align`]: column.thAlign,\n [`${prefix}-vertical-align`]: column.thVerticalAlign,\n [`${prefix}-cursor`]: props.allowFooterSorting && column.sortable ? 'pointer' : 'default',\n })\n\n return {\n CSSVariables,\n getHeaderCSSVariables,\n getCellCSSVariables,\n getFooterCSSVariables,\n getClass,\n getStyle,\n }\n}\n"],"names":[],"mappings":";;;;AAaA,MAAM,SAAS;AAEf,MAAM,aAAa,CAAC,QAAkC,OAAO,QAAQ;AAE9D,MAAM,mBAAmB;AAAA,EAC9B,GAAG;AAAA,EACH,eAAe,EAAE,MAAM,QAAQ,SAAS,UAAU;AAAA,EAClD,oBAAoB,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,EACpD,cAAc,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,EAC9C,cAAc,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,EAC9C,QAAQ,EAAE,MAAM,CAAC,QAAQ,MAAM,EAA2C;AAC5E;AAEA,MAAM,WAAW,CAAC,YAAkC,WAAW,OAAO,IAAI,QAAY,IAAA;AACtF,MAAM,WAAW,CAAC,WAAiC,WAAW,MAAM,IAAI,OAAW,IAAA;AAEtE,MAAA,cAAc,CAAC,UAAqD;AAC/E,QAAM,EAAE,UAAU,eAAe,kBAAkB,UAAU;AAE7D,QAAM,QAAQ,SAAS,MAAM,SAAS,MAAM,aAAa,CAAC;AAEpD,QAAA,eAAe,SAAS,OAAO;AAAA,IACnC,YAAY,cAAc,MAAM,KAAK;AAAA,IACrC,eAAe,MAAM,aAAa,cAAc,MAAM,KAAK,IAAI;AAAA,IAC/D,aAAa,MAAM,SAAS,cAAc,MAAM,MAAM,IAAI;AAAA,IAC1D,SAAS,MAAM,eACX,kFACA;AAAA,IACJ,SAAS,MAAM,eACX,kFACA;AAAA,EACJ,EAAA;AAEI,QAAA,wBAAwB,CAAC,YAAqC;AAAA,IAClE,CAAC,GAAG,MAAM,QAAQ,GAAG,OAAO,SAAS,cAAc,OAAO,KAAK;AAAA,IAC/D,CAAC,GAAG,MAAM,QAAQ,GAAG,OAAO;AAAA,IAC5B,CAAC,GAAG,MAAM,iBAAiB,GAAG,OAAO;AAAA,IACrC,CAAC,GAAG,MAAM,SAAS,GAAG,OAAO,WAAW,YAAY;AAAA,EAAA;AAGhD,QAAA,sBAAsB,CAAC,UAAyB;AAAA,IACpD,CAAC,GAAG,MAAM,QAAQ,GAAG,KAAK,OAAO;AAAA,IACjC,CAAC,GAAG,MAAM,iBAAiB,GAAG,KAAK,OAAO;AAAA,EAAA;AAGtC,QAAA,wBAAwB,CAAC,YAAqC;AAAA,IAClE,CAAC,GAAG,MAAM,QAAQ,GAAG,OAAO;AAAA,IAC5B,CAAC,GAAG,MAAM,iBAAiB,GAAG,OAAO;AAAA,IACrC,CAAC,GAAG,MAAM,SAAS,GAAG,MAAM,sBAAsB,OAAO,WAAW,YAAY;AAAA,EAAA;AAG3E,SAAA;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAEJ;"}