vueye-table 2.0.0-alpha.10 → 2.0.0-alpha.13

package/dist/components/core/VueyeTable/index.d.ts

@@ -2,4 +2,5 @@ import VueyeTable from './VueyeTable.vue';
 export * from './types';
 export * from './composables';
 export * from './utils';
+export * from './api';
 export { VueyeTable };

package/dist/components/core/VueyeTable/types/Column.d.ts

@@ -1,55 +1,30 @@
 import { DeepKeys } from './Utils';
-export type SortOrder = 'ascending' | 'descending' | null;
-export type FiltrableColumnHeaderBase = {
-    filterable?: boolean;
-    filter?: (value: any, filter: any) => boolean;
-};
-export type FiltrableColumnHeader = FiltrableColumnHeaderBase & {
-    filterOptions?: any[];
-    filterMultiple?: boolean;
-    filterMethod?: (value: any, filter: any) => boolean;
-    filterRemote?: boolean;
-    filterRemoteMethod?: (prop: string, filters: any[]) => Promise<any>;
-};
-export type SortableColumnHeaderBase = {
-    sortable?: boolean;
-    sortMethod?: (a: any, b: any) => number;
-    sortBy?: (row: any) => any;
-};
-export type SortableColumnHeader = SortableColumnHeaderBase & {
-    sortOrders?: SortOrder[];
-    sortRemote?: boolean;
-    sortRemoteMethod?: (prop: string, order: SortOrder) => Promise<any>;
-    defaultSortOrder?: SortOrder;
-};
-export type ColumnHeaderBase<TData extends Record<string, unknown>> = FiltrableColumnHeaderBase & SortableColumnHeaderBase & {
+export type ColumnHeader<TData extends Record<string, unknown> = Record<string, unknown>> = {
     key: string;
+    fullKey?: string;
     label: string;
-    children?: ColumnHeaderBase<TData>[];
+    children?: ColumnHeader<TData>[];
     align?: 'left' | 'center' | 'right';
     fixed?: 'left' | 'right';
-    formatter?: (value: any, row: any, index: number) => string;
     className?: string;
     labelClassName?: string;
-    selectable?: (row: any, index: number) => boolean;
-    resizable?: boolean;
-    showOverflowTooltip?: boolean;
-};
-export type ColumnHeader = ColumnHeaderBase<Record<string, never>> & {
     rowSpan?: number;
     colSpan?: number;
-    width?: string;
-    minWidth?: string;
     scope?: string;
+    sortable?: true;
 };
-export type SlotHeaderCell<T> = {
-    [K in DeepKeys<T> as K extends string ? `headerCell.${K}` : never]: (props: {
-        headerCell: ColumnHeader;
+export declare function defineTableColumnHeaders<TData extends Record<string, unknown>>(columnHeaders: ColumnHeader<TData>[]): ColumnHeader<TData>[];
+type SlotGenerator<T, Prefix extends string> = {
+    [K in DeepKeys<T> as K extends string ? `${Prefix}.${K}` : never]: (props: {
+        headerItem: ColumnHeader;
     }) => any;
 };
-export type SlotHeaderCellContent<T> = {
-    [K in DeepKeys<T> as K extends string ? `headerCellContent.${K}` : never]: (props: {
-        headerCellContent: ColumnHeader;
+export type SlotHeaderCell<T> = SlotGenerator<T, 'headerCell'>;
+export type SlotHeaderCellContent<T> = SlotGenerator<T, 'headerCellContent'>;
+export type SlotHeader<T> = SlotHeaderCell<T> & SlotHeaderCellContent<T> & {
+    headers: (props: {
+        headers: ColumnHeader[][];
     }) => any;
+    checkbox: () => any;
 };
-export type SlotHeader<T> = SlotHeaderCell<T> & SlotHeaderCellContent<T>;
+export {};

package/dist/components/core/VueyeTable/types/Row.d.ts

@@ -1,3 +1,28 @@
+import { FlattenKeys } from './Utils';
 export type Row = {
     [key: string]: any;
 };
+export type SlotRowItem<T> = {
+    [K in `itemCell.${FlattenKeys<T>}`]: (props: {
+        itemCell: T;
+    }) => any;
+};
+export type SlotRowItemContent<T> = {
+    [K in `itemCellContent.${FlattenKeys<T>}`]: (props: {
+        itemCellContent: T;
+    }) => any;
+};
+export type SlotRow<T extends Record<string, any> = Record<string, string>> = SlotRowItem<T> & SlotRowItemContent<T> & {
+    body: (props: {
+        rows: T[];
+    }) => any;
+    rows: (props: {
+        rows: T[];
+    }) => any;
+    row: (props: {
+        row: T;
+    }) => any;
+    checkbox: (props: {
+        row: T;
+    }) => any;
+};

package/dist/components/core/VueyeTable/types/Utils.d.ts

@@ -1,8 +1,11 @@
 export type DeepKeys<T> = T extends object ? {
     [K in keyof T]: K | DeepKeys<T[K]>;
 }[keyof T] : never;
-export type Prefix<T extends object, P extends string> = {
-    [key in keyof T as `${P}${string & key}`]: T[key];
+export type FlattenKeys<T, Prefix extends string = ''> = T extends object ? {
+    [K in keyof T]: T[K] extends object ? FlattenKeys<T[K], `${Prefix}${K & string}.`> : `${Prefix}${K & string}`;
+}[keyof T] : never;
+export type FlattenObject<T> = {
+    [K in FlattenKeys<T>]: K extends `${infer Prefix}.${infer Suffix}` ? T[Prefix & keyof T] extends object ? FlattenObject<T[Prefix & keyof T]>[Suffix & keyof FlattenObject<T[Prefix & keyof T]>] : never : T[K & keyof T];
 };
 export type DeepKeyValues<T extends readonly object[]> = {
     [K in keyof T]: T[K] extends {
@@ -11,9 +14,15 @@ export type DeepKeyValues<T extends readonly object[]> = {
         children: infer C;
     } ? C extends readonly object[] ? U | DeepKeyValues<C> : never : U : never : never;
 }[number];
-type NativeType = null | number | string | boolean | symbol;
-type InferDefault<P, T> = ((props: P) => T & {}) | (T extends NativeType ? T : never);
+type NotUndefined<T> = T extends undefined ? never : T;
+export type NativeType = null | number | string | boolean | symbol;
+type InferDefault<P, T> = ((props: P) => T & {}) | (T extends NativeType ? T : never) | (T extends (...args: any[]) => any ? T : never);
 export type InferDefaults<T> = {
     [K in keyof T]?: InferDefault<T, T[K]>;
 };
+export type PropsWithDefaults<T, Defaults extends InferDefaults<T>, BKeys extends keyof T> = Omit<T, keyof Defaults> & {
+    [K in keyof Defaults]-?: K extends keyof T ? (Defaults[K] extends undefined ? T[K] : NotUndefined<T[K]>) : never;
+} & {
+    readonly [K in BKeys]-?: boolean;
+};
 export {};

package/dist/components/core/VueyeTable/utils/body.d.ts

@@ -1,4 +1,6 @@
-import { ColumnHeader, Row } from '../types';
-export declare function getBodyRows(rows: Row[], headers: ColumnHeader[], start?: number, end?: number): {
-    [x: string]: any;
-}[];
+import type { FlattenObject, NativeType } from '../types';
+export declare function getBodyRows<TData>(rows: TData[], headerKeys: string[]): FlattenObject<TData>[];
+export declare function paginateRows<TData>(rows: TData[], start?: number, end?: number): TData[];
+export declare function nestedObjectTransformer(obj: object): Record<string, any>;
+export declare function deepValues(obj: any): any[];
+export declare function isPrimitive(value: NativeType): boolean;

package/dist/components/core/VueyeTable/utils/header.d.ts

@@ -1,7 +1,7 @@
 import { ColumnHeader } from '../types';
 export declare function depthCount(headers: ColumnHeader[]): number;
 export declare function leafCount(headers: ColumnHeader[]): number;
-export declare function flatHeadersToRows(headers: ColumnHeader[], depth: number, rows?: ColumnHeader[][], currentRow?: number, level?: number): ColumnHeader[][];
+export declare function flatHeadersToRows(headers: ColumnHeader[], depth: number, rows?: ColumnHeader[][], currentRow?: number, level?: number, parentKey?: string): ColumnHeader[][];
 export declare function getHeaderKeys<T extends ColumnHeader>(headers: T[], keysPath?: string, keys?: string[]): string[];
 export declare function defineColumnHeaders(headers: any[]): ColumnHeader[];
 export declare function generateColumns<T>(dataItem: T): ColumnHeader[];

package/dist/default.css

@@ -0,0 +1 @@
+.table__checkbox{position:relative}.table__checkbox input[type=checkbox]{position:absolute;width:1.5rem;height:1.5rem;inset-inline-start:0;top:0;cursor:pointer;z-index:10;opacity:0}.table__checkbox svg{position:absolute;z-index:0;top:0;start:0;width:1.5rem;height:1.5rem;transition:transform .2s ease-in-out}.table__checkbox .checkmark,.table__checkbox .indeterminate{transform:scale(0);transform-origin:50% 50%;animation:zoom-in-out .2s ease-in-out}.table__checkbox input[type=checkbox]:indeterminate~svg .indeterminate{transform:scale(1)}.table__checkbox input[type=checkbox]:checked~svg .checkmark{transform:scale(1)}@keyframes zoom-in-out{50%{transform:scale(.9)}}.table__sort-button{background:none;border:none;cursor:pointer;display:flex;align-items:center;position:relative}.table__sort-icon{margin-inline-start:5px;transition:all .2s ease;transform:scale(1.2);visibility:hidden}.table__sort-icon--show,.table__sort-button:hover .table__sort-icon{visibility:visible}:root{--table-bg-color: #ffffff;--table-text-color: #52657a;--table-head-bg-color: #d9e2ec;--table-head-text-color: #52657a;--table-border-color: #bcccdc;--table-row-hover-bg-color: #bcccdc;--table-row-hover-text-color: #52657a;--table-row-selected-bg-color: #9fb3ca;--table-row-selected-text-color: #fff;--button-bg-color: #d9e2ec;--button-text-color: #52657a;--button-bg-color-hover: #bcccdc;--button-bg-color-active: #9fb3ca;--button-text-color-active: #fff;--button-bg-color-disabled: #bcccdc;--dropdown-bg-color: #d9e2ec;--dropdown-border-color: #bcccdc;--dropdown-item-bg-color-hover: #bcccdc;--table-cell-padding: .5rem 1rem;--table-margin: 0;--table-font-family: "Arial", sans-serif;--table-font-size: 16px;--table-font-weight: normal;--table-line-height: 1.5}.dark{--table-bg-color: #031e30;--table-text-color: #ffffff;--table-head-bg-color: #082c49;--table-head-text-color: #ffffff;--table-border-color: #034f82;--table-row-hover-bg-color: #022e4b;--table-row-hover-text-color: #ffffff;--table-row-selected-bg-color: #01456f;--table-row-selected-text-color: #ffffff;--button-bg-color: #042440;--button-text-color: #ffffff;--button-bg-color-hover: #022e4b;--button-bg-color-active: #01456f;--button-text-color-active: #ffffff;--button-bg-color-disabled: #022e4b;--dropdown-bg-color: #042440;--dropdown-border-color: #022e4b;--dropdown-item-bg-color-hover: #022e4b}.table{width:100%;border-collapse:collapse;border-spacing:0;font-size:.9rem;background-color:var(--table-bg-color)}.table__body{background-color:var(--table-bg-color)}.table__wrapper{display:flex;flex-direction:column;gap:1rem;font-family:Arial,sans-serif}.table__caption{caption-side:top;font-weight:700;text-align:left}.table__summary{caption-side:bottom;font-weight:700;text-align:left}.table__btn{border:none;background-color:var(--button-bg-color);color:var(--button-text-color);padding:.5rem 1rem;font-size:.9rem;line-height:1.5;cursor:pointer;transition:background-color .3s ease;border-radius:.25rem;height:100%}.table__pagination{align-self:center}.table__head{background-color:var(--table-head-bg-color);color:var(--table-head-text-color)}.table__row{transition:background-color .3s ease}.table__cell{padding:var(--table-cell-padding);text-align:left;border:1px solid var(--table-border-color);color:var(--table-cell-color)}.table__cell--head{text-align:center}.table__cell--loading{text-align:center;width:100%;padding-inline:50%}.table__label{display:inline-block;vertical-align:middle}.table__label--head{font-weight:500}.table__checkbox{width:1.5rem;height:1.5rem}.table__pagination-wrapper{display:flex;justify-content:space-between;align-items:center;padding:1em}.table__pagination-btn-list{display:flex;list-style:none;padding:0;gap:.125rem}.table__pagination-btn{border:none;background-color:var(--button-bg-color);color:var(--button-text-color);padding:.5rem 1rem;cursor:pointer;transition:background-color .3s ease}.table__pagination-btn:hover{background-color:var(--button-bg-color-hover)}.table__pagination-btn--current{background-color:var(--button-bg-color-active);color:var(--button-text-color-active)}.table__pagination-btn:disabled{background-color:var(--button-bg-color-disabled);cursor:not-allowed;opacity:.5}.table__pagination-details{margin:0 1em}.table__dropdown-wrapper{position:relative;display:inline-block}.table__dropdown-trigger{background-color:var(--button-bg-color);border:none;padding:.5rem 1rem;cursor:pointer;border-radius:.25rem;display:flex;align-items:center;gap:.5rem}.table__dropdown-overlay{position:fixed;top:0;right:0;bottom:0;left:0}.table__dropdown-menu{position:absolute;left:0;background-color:var(--dropdown-bg-color);border:1px solid var(--dropdown-border-color);width:200px;box-shadow:0 8px 16px #0003;z-index:1}.table__dropdown-menu--top{bottom:100%}.table__dropdown-menu:not(.table__dropdown-menu--top){top:100%}.table__dropdown-menu-item{display:block;padding:10px;width:100%;box-sizing:border-box;text-align:left;border:none;background:none;cursor:pointer}.table__dropdown-menu-item--selected,.table__dropdown-menu-item:hover{background-color:var(--dropdown-item-bg-color-hover)}