vuestic-ui
Version:
Vue 3 UI Framework
72 lines (71 loc) • 2.91 kB
JavaScript
import { computed } from "vue";
import { s as startCase } from "../../../utils/text-case.js";
import { a as mergeDeepMultiple } from "../../../utils/merge-deep.js";
import { c as createItemsProp } from "./useCommonProps.js";
import { w as warn } from "../../../utils/console.js";
const sortingOptionsValidator = (options) => {
const isAllowedOptionsLength = options.length === 2 || options.length === 3;
const isAvailableOptions = options.every((option) => ["asc", "desc", null].includes(option));
const isUniqueOptions = options.length === new Set(options).size;
return isAllowedOptionsLength && isAvailableOptions && isUniqueOptions;
};
const useColumnsProps = {
...createItemsProp(),
columns: { type: Array, default: () => [] },
sortingOptions: {
type: Array,
default: () => ["asc", "desc", null],
validator: sortingOptionsValidator
}
};
const buildTableColumn = (source, initialIndex, props) => {
const input = typeof source === "string" ? { key: source } : source;
const isValidOptions = input.sortingOptions ? sortingOptionsValidator(input.sortingOptions) : true;
if (!isValidOptions) {
warn(`The "sortingOptions" array in the column with "${input.key}" key is invalid. For this column, the "sortingOptions" value is taken as for the table: ${JSON.stringify(props.sortingOptions)}.`);
}
return {
source,
initialIndex,
key: input.key,
name: input.name || input.key,
label: input.label || startCase(input.key),
thTitle: input.thTitle || input.headerTitle || input.label || startCase(input.key),
sortable: input.sortable || false,
sortingFn: input.sortingFn,
displayFormatFn: input.displayFormatFn,
sortingOptions: isValidOptions && input.sortingOptions || props.sortingOptions,
thAlign: input.thAlign || input.alignHead || "left",
thVerticalAlign: input.thVerticalAlign || input.verticalAlignHead || "middle",
tdAlign: input.tdAlign || input.align || "left",
tdVerticalAlign: input.tdVerticalAlign || input.verticalAlign || "middle",
width: input.width,
tdClass: input.tdClass || input.classes,
thClass: input.thClass || input.headerClasses,
tdStyle: input.tdStyle || input.style,
thStyle: input.thStyle || input.headerStyle
};
};
const buildColumnsFromItems = (props) => {
return Object.keys(mergeDeepMultiple({}, ...props.items)).map((item, index) => buildTableColumn(item, index, props));
};
const buildNormalizedColumns = (props) => {
return props.columns.map((item, index) => buildTableColumn(item, index, props));
};
const useColumns = (props) => {
const columnsComputed = computed(() => {
if (props.columns.length === 0) {
return buildColumnsFromItems(props);
} else {
return buildNormalizedColumns(props);
}
});
return {
columnsComputed
};
};
export {
useColumns as a,
useColumnsProps as u
};
//# sourceMappingURL=useColumns.js.map