vuestic-ui
Version:
Vue 3 UI Framework
56 lines (55 loc) • 2.42 kB
JavaScript
import { computed } from "vue";
import { s as safeCSSLength } from "../../../utils/css.js";
import { b as useSelectableProp } from "./useCommonProps.js";
import { u as useColors } from "../../../composables/useColors.js";
const prefix = "--va-data-table";
const isFunction = (val) => typeof val === "function";
const useStylableProps = {
...useSelectableProp,
selectedColor: { type: String, default: "primary" },
allowFooterSorting: { type: Boolean, default: false },
stickyHeader: { type: Boolean, default: false },
stickyFooter: { type: Boolean, default: false },
height: { type: [String, Number] }
};
const getClass = (classes) => isFunction(classes) ? classes() : classes;
const getStyle = (styles) => isFunction(styles) ? styles() : styles;
const useStylable = (props) => {
const { getColor, getFocusColor, getHoverColor } = useColors();
const color = computed(() => getColor(props.selectedColor));
const CSSVariables = computed(() => ({
hoverColor: getHoverColor(color.value),
selectedColor: props.selectable ? getFocusColor(color.value) : void 0,
tableHeight: props.height ? safeCSSLength(props.height) : "var(--va-data-table-height)",
theadBg: props.stickyHeader ? "var(--va-data-table-thead-background, var(--va-data-table-header-background))" : "var(--va-data-table-thead-background)",
tfootBg: props.stickyFooter ? "var(--va-data-table-tfoot-background, var(--va-data-table-header-background))" : "var(--va-data-table-tfoot-background)"
}));
const getHeaderCSSVariables = (column) => ({
[`${prefix}-width`]: column.width && safeCSSLength(column.width),
[`${prefix}-align`]: column.thAlign,
[`${prefix}-vertical-align`]: column.thVerticalAlign,
[`${prefix}-cursor`]: column.sortable ? "pointer" : "default"
});
const getCellCSSVariables = (cell) => ({
[`${prefix}-align`]: cell.column.tdAlign,
[`${prefix}-vertical-align`]: cell.column.tdVerticalAlign
});
const getFooterCSSVariables = (column) => ({
[`${prefix}-align`]: column.thAlign,
[`${prefix}-vertical-align`]: column.thVerticalAlign,
[`${prefix}-cursor`]: props.allowFooterSorting && column.sortable ? "pointer" : "default"
});
return {
CSSVariables,
getHeaderCSSVariables,
getCellCSSVariables,
getFooterCSSVariables,
getClass,
getStyle
};
};
export {
useStylable as a,
useStylableProps as u
};
//# sourceMappingURL=useStylable.js.map