From 4b771f7da74eb369e4de4b6815461d1d211bbcc1 Mon Sep 17 00:00:00 2001 From: curt Date: Tue, 17 Dec 2024 11:17:01 -0600 Subject: [PATCH 1/6] added Atable loading component with aniamted background gradient --- atable/src/components/ATable.vue | 1 + atable/src/components/ATableLoading.vue | 87 +++++++++++++++++++ atable/src/index.ts | 4 +- ...ble-loading-gradient_2024-12-17-17-16.json | 10 +++ ...ble-loading-gradient_2024-12-17-17-16.json | 10 +++ common/reviews/api/atable.api.md | 3 + docs/atable/atable.createtablestore.md | 3 +- examples/atable/default.story.vue | 16 ++++ themes/default/_variables.css | 1 + 9 files changed, 132 insertions(+), 3 deletions(-) create mode 100644 atable/src/components/ATableLoading.vue create mode 100644 common/changes/@stonecrop/atable/feat-atable-loading-gradient_2024-12-17-17-16.json create mode 100644 common/changes/@stonecrop/themes/feat-atable-loading-gradient_2024-12-17-17-16.json diff --git a/atable/src/components/ATable.vue b/atable/src/components/ATable.vue index 9bbb1d67..dae5318a 100644 --- a/atable/src/components/ATable.vue +++ b/atable/src/components/ATable.vue @@ -99,6 +99,7 @@ watch( () => store.rows, newValue => { emit('update:modelValue', newValue) + console.log('data loaded') }, { deep: true } ) diff --git a/atable/src/components/ATableLoading.vue b/atable/src/components/ATableLoading.vue new file mode 100644 index 00000000..64a41544 --- /dev/null +++ b/atable/src/components/ATableLoading.vue @@ -0,0 +1,87 @@ + + + diff --git a/atable/src/index.ts b/atable/src/index.ts index 65016a88..93f6e761 100644 --- a/atable/src/index.ts +++ b/atable/src/index.ts @@ -5,6 +5,7 @@ import AExpansionRow from './components/AExpansionRow.vue' import ARow from './components/ARow.vue' import ATable from './components/ATable.vue' import ATableHeader from './components/ATableHeader.vue' +import ATableLoading from './components/ATableLoading.vue' import ATableModal from './components/ATableModal.vue' export { createTableStore } from './stores/table' export type { CellContext, TableColumn, TableConfig, TableDisplay, TableRow, TableModal } from './types' @@ -20,7 +21,8 @@ function install(app: App /* options */) { app.component('ARow', ARow) app.component('ATable', ATable) app.component('ATableHeader', ATableHeader) + app.component('ATableLoading', ATableLoading) app.component('ATableModal', ATableModal) } -export { install, ACell, AExpansionRow, ARow, ATable, ATableHeader, ATableModal } +export { install, ACell, AExpansionRow, ARow, ATable, ATableHeader, ATableLoading, ATableModal } diff --git a/common/changes/@stonecrop/atable/feat-atable-loading-gradient_2024-12-17-17-16.json b/common/changes/@stonecrop/atable/feat-atable-loading-gradient_2024-12-17-17-16.json new file mode 100644 index 00000000..420b5ee6 --- /dev/null +++ b/common/changes/@stonecrop/atable/feat-atable-loading-gradient_2024-12-17-17-16.json @@ -0,0 +1,10 @@ +{ + "changes": [ + { + "packageName": "@stonecrop/atable", + "comment": "added atable loading component", + "type": "none" + } + ], + "packageName": "@stonecrop/atable" +} \ No newline at end of file diff --git a/common/changes/@stonecrop/themes/feat-atable-loading-gradient_2024-12-17-17-16.json b/common/changes/@stonecrop/themes/feat-atable-loading-gradient_2024-12-17-17-16.json new file mode 100644 index 00000000..f80ae6ff --- /dev/null +++ b/common/changes/@stonecrop/themes/feat-atable-loading-gradient_2024-12-17-17-16.json @@ -0,0 +1,10 @@ +{ + "changes": [ + { + "packageName": "@stonecrop/themes", + "comment": "added rgb variable for loading gradient color", + "type": "none" + } + ], + "packageName": "@stonecrop/themes" +} \ No newline at end of file diff --git a/common/reviews/api/atable.api.md b/common/reviews/api/atable.api.md index 342e1572..9985b474 100644 --- a/common/reviews/api/atable.api.md +++ b/common/reviews/api/atable.api.md @@ -10,6 +10,7 @@ import { App } from 'vue'; import ARow from './components/ARow.vue'; import ATable from './components/ATable.vue'; import ATableHeader from './components/ATableHeader.vue'; +import ATableLoading from './components/ATableLoading.vue'; import ATableModal from './components/ATableModal.vue'; import { ComputedRef } from 'vue'; import { CSSProperties } from 'vue'; @@ -26,6 +27,8 @@ export { ATable } export { ATableHeader } +export { ATableLoading } + export { ATableModal } // @public diff --git a/docs/atable/atable.createtablestore.md b/docs/atable/atable.createtablestore.md index 79e1012e..0c532964 100644 --- a/docs/atable/atable.createtablestore.md +++ b/docs/atable/atable.createtablestore.md @@ -371,8 +371,7 @@ Initial data for the table store **Returns:** -import("pinia").Store<\`table-${string}\`, Pick<{ columns: import("vue").Ref<{ name: string; align?: CanvasTextAlign; edit?: boolean; label?: string; type?: string; width?: string; pinned?: boolean; cellComponent?: string; cellComponentProps?: Record<string, any>; modalComponent?: string \| ((context: [CellContext](./atable.cellcontext.md)) => string); modalComponentExtraProps?: Record<string, any>; format?: string \| ((value: any, context: [CellContext](./atable.cellcontext.md)) => string); mask?: (value: any) => any; }\[\], [TableColumn](./atable.tablecolumn.md)\[\] \| { name: string; align?: CanvasTextAlign; edit?: boolean; label?: string; type?: string; width?: string; pinned?: boolean; cellComponent?: string; cellComponentProps?: Record<string, any>; modalComponent?: string \| ((context: [CellContext](./atable.cellcontext.md)) => string); modalComponentExtraProps?: Record<string, any>; format?: string \| ((value: any, context: [CellContext](./atable.cellcontext.md)) => string); mask?: (value: any) => any; }\[\]>; rows: import("vue").Ref<{ \[x: string\]: any; indent?: number; parent?: number; }\[\], [TableRow](./atable.tablerow.md)\[\] \| { \[x: string\]: any; indent?: number; parent?: number; }\[\]>; config: import("vue").Ref<{ view?: "uncounted" \| "list" \| "list-expansion" \| "tree"; fullWidth?: boolean; }, [TableConfig](./atable.tableconfig.md) \| { view?: "uncounted" \| "list" \| "list-expansion" \| "tree"; fullWidth?: boolean; }>; table: import("vue").Ref<{}, {}>; display: import("vue").Ref<{ childrenOpen?: boolean; expanded?: boolean; indent?: number; isParent?: boolean; isRoot?: boolean; open?: boolean; parent?: number; rowModified?: boolean; }\[\], [TableDisplay](./atable.tabledisplay.md)\[\] \| { childrenOpen?: boolean; expanded?: boolean; indent?: number; isParent?: boolean; isRoot?: boolean; open?: boolean; parent?: number; rowModified?: boolean; }\[\]>; modal: import("vue").Ref<{ colIndex?: number; event?: string; left?: number; parent?: HTMLElement; rowIndex?: number; top?: number; visible?: boolean; width?: string; component?: string; componentProps?: Record<string, any>; }, [TableModal](./atable.tablemodal.md) \| { colIndex?: number; event?: string; left?: number; parent?: HTMLElement; rowIndex?: number; top?: number; visible?: boolean; width?: string; component?: string; componentProps?: Record<string, any>; }>; hasPinnedColumns: import("vue").ComputedRef<boolean>; numberedRowWidth: import("vue").ComputedRef<string>; zeroColumn: import("vue").ComputedRef<boolean>; closeModal: (event: MouseEvent) => void; getCellData: <T = any>(colIndex: number, rowIndex: number) => T; getCellDisplayValue: (colIndex: number, rowIndex: number) => any; getFormattedValue: (colIndex: number, rowIndex: number, value: any) => any; getHeaderCellStyle: (column: [TableColumn](./atable.tablecolumn.md)) => CSSProperties; getIndent: (colIndex: number, indentLevel?: number) => string; getRowExpandSymbol: (rowIndex: number) => "" \| "-" \| "+"; isRowVisible: (rowIndex: number) => boolean; setCellData: (colIndex: number, rowIndex: number, value: any) => void; toggleRowExpand: (rowIndex: number) => void; }, "columns" \| "rows" \| "config" \| "table" \| "display" \| "modal">, Pick<{ columns: import("vue").Ref<{ name: string; align?: CanvasTextAlign; edit?: boolean; label?: string; type?: string; width?: string; pinned?: boolean; cellComponent?: string; cellComponentProps?: Record<string, any>; modalComponent?: string \| ((context: [CellContext](./atable.cellcontext.md)) => string); modalComponentExtraProps?: Record<string, any>; format?: string \| ((value: any, context: [CellContext](./atable.cellcontext.md)) => string); mask?: (value: any) => any; }\[\], [TableColumn](./atable.tablecolumn.md)\[\] \| { name: string; align?: CanvasTextAlign; edit?: boolean; label?: string; type?: string; width?: string; pinned?: boolean; cellComponent?: string; cellComponentProps?: Record<string, any>; modalComponent?: string \| ((context: [CellContext](./atable.cellcontext.md)) => string); modalComponentExtraProps?: Record<string, any>; format?: string \| ((value: any, context: [CellContext](./atable.cellcontext.md)) => string); mask?: (value: any) => any; }\[\]>; rows: import("vue").Ref<{ \[x: string\]: any; indent?: number; parent?: number; }\[\], [TableRow](./atable.tablerow.md)\[\] \| { \[x: string\]: any; indent?: number; parent?: number; }\[\]>; config: import("vue").Ref<{ view?: "uncounted" \| "list" \| "list-expansion" \| "tree"; fullWidth?: boolean; }, [TableConfig](./atable.tableconfig.md) \| { view?: "uncounted" \| "list" \| "list-expansion" \| "tree"; fullWidth?: boolean; }>; table: import("vue").Ref<{}, {}>; display: import("vue").Ref<{ childrenOpen?: boolean; expanded?: boolean; indent?: number; isParent?: boolean; isRoot?: boolean; open?: boolean; parent?: number; rowModified?: boolean; }\[\], [TableDisplay](./atable.tabledisplay.md)\[\] \| { childrenOpen?: boolean; expanded?: boolean; indent?: number; isParent?: boolean; isRoot?: boolean; open?: boolean; parent?: number; rowModified?: boolean; }\[\]>; modal: import("vue").Ref<{ colIndex?: number; event?: string; left?: number; parent?: HTMLElement; rowIndex?: number; top?: number; visible?: boolean; width?: string; component?: string; componentProps?: Record<string, any>; }, [TableModal](./atable.tablemodal.md) \| { colIndex?: number; event?: string; left?: number; parent?: HTMLElement; rowIndex?: number; top?: number; visible?: boolean; width?: string; component?: string; componentProps?: Record<string, any>; }>; hasPinnedColumns: import("vue").ComputedRef<boolean>; numberedRowWidth: import("vue").ComputedRef<string>; zeroColumn: import("vue").ComputedRef<boolean>; closeModal: (event: MouseEvent) => void; getCellData: <T = any>(colIndex: number, rowIndex: number) => T; getCellDisplayValue: (colIndex: number, rowIndex: number) => any; getFormattedValue: (colIndex: number, rowIndex: number, value: any) => any; getHeaderCellStyle: (column: [TableColumn](./atable.tablecolumn.md)) => CSSProperties; getIndent: (colIndex: number, indentLevel?: number) => string; getRowExpandSymbol: (rowIndex: number) => "" \| "-" \| "+"; isRowVisible: (rowIndex: number) => boolean; setCellData: (colIndex: number, rowIndex: number, value: any) => void; toggleRowExpand: (rowIndex: number) => void; }, "hasPinnedColumns" \| "numberedRowWidth" \| "zeroColumn">, Pick<{ columns: import("vue").Ref<{ name: string; align?: CanvasTextAlign; edit?: boolean; label?: string; type?: string; width?: string; pinned?: boolean; cellComponent?: string; cellComponentProps?: Record<string, any>; modalComponent?: string \| ((context: [CellContext](./atable.cellcontext.md)) => string); modalComponentExtraProps?: Record<string, any>; format?: string \| ((value: any, context: [CellContext](./atable.cellcontext.md)) => string); mask?: (value: any) => any; }\[\], [TableColumn](./atable.tablecolumn.md)\[\] \| { name: string; align?: CanvasTextAlign; edit?: boolean; label?: string; type?: string; width?: string; pinned?: boolean; cellComponent?: string; cellComponentProps?: Record<string, any>; modalComponent?: string \| ((context: [CellContext](./atable.cellcontext.md)) => string); modalComponentExtraProps?: Record<string, any>; format?: string \| ((value: any, context: [CellContext](./atable.cellcontext.md)) => string); mask?: (value: any) => any; }\[\]>; rows: import("vue").Ref<{ \[x: string\]: any; indent?: number; parent?: number; }\[\], [TableRow](./atable.tablerow.md)\[\] \| { \[x: string\]: any; indent?: number; parent?: number; }\[\]>; config: import("vue").Ref<{ view?: "uncounted" \| "list" \| "list-expansion" \| "tree"; fullWidth?: boolean; }, [TableConfig](./atable.tableconfig.md) \| { view?: "uncounted" \| "list" \| "list-expansion" \| "tree"; fullWidth?: boolean; }>; table: import("vue").Ref<{}, {}>; display: import("vue").Ref<{ childrenOpen?: boolean; expanded?: boolean; indent?: number; isParent?: boolean; isRoot?: boolean; open?: boolean; parent?: number; rowModified?: boolean; }\[\], [TableDisplay](./atable.tabledisplay.md)\[\] \| { childrenOpen?: boolean; expanded?: boolean; indent?: number; isParent?: boolean; isRoot?: boolean; open?: boolean; parent?: number; rowModified?: boolean; }\[\]>; modal: import("vue").Ref<{ colIndex?: number; event?: string; left?: number; parent?: HTMLElement; rowIndex?: number; top?: number; visible?: boolean; width?: string; component?: string; componentProps?: Record<string, any>; }, [TableModal](./atable.tablemodal.md) \| { colIndex?: number; event?: string; left?: number; parent?: HTMLElement; rowIndex?: number; top?: number; visible?: boolean; width?: string; component?: string; componentProps?: Record<string, any>; }>; hasPinnedColumns: import("vue").ComputedRef<boolean>; numberedRowWidth: import("vue").ComputedRef<string>; zeroColumn: import("vue").ComputedRef<boolean>; closeModal: (event: MouseEvent) => void; getCellData: <T = any>(colIndex: number, rowIndex: number) => T; getCellDisplayValue: (colIndex: number, rowIndex: number) => any; getFormattedValue: (colIndex: number, rowIndex: number, value: any) => any; getHeaderCellStyle: (column: [TableColumn](./atable.tablecolumn.md)) => CSSProperties; getIndent: (colIndex: number, indentLevel?: number) => string; getRowExpandSymbol: (rowIndex: number) => "" \| "-" \| "+"; isRowVisible: (rowIndex: number) => boolean; setCellData: (colIndex: number, rowIndex: number, value: any) => void; toggleRowExpand: (rowIndex: number) => void; }, "closeModal" \| "getCellData" \| "getCellDisplayValue" \| "getFormattedValue" \| "getHeaderCellStyle" \| "getIndent" \| "getRowExpandSymbol" \| "isRowVisible" \| "setCellData" \| "toggleRowExpand">> - +import("pinia").Store<\`table-${string}\`, Pick<{ columns: import("vue").Ref<{ name: string; align?: CanvasTextAlign; edit?: boolean; label?: string; type?: string; width?: string; pinned?: boolean; cellComponent?: string; cellComponentProps?: Record<string, any>; modalComponent?: string \| ((context: [CellContext](./atable.cellcontext.md)) => string); modalComponentExtraProps?: Record<string, any>; format?: string \| ((value: any, context: [CellContext](./atable.cellcontext.md)) => string); mask?: (value: any) => any; }\[\], [TableColumn](./atable.tablecolumn.md)\[\] \| { name: string; align?: CanvasTextAlign; edit?: boolean; label?: string; type?: string; width?: string; pinned?: boolean; cellComponent?: string; cellComponentProps?: Record<string, any>; modalComponent?: string \| ((context: [CellContext](./atable.cellcontext.md)) => string); modalComponentExtraProps?: Record<string, any>; format?: string \| ((value: any, context: [CellContext](./atable.cellcontext.md)) => string); mask?: (value: any) => any; }\[\]>; rows: import("vue").Ref<{ \[x: string\]: any; indent?: number; parent?: number; }\[\], [TableRow](./atable.tablerow.md)\[\] \| { \[x: string\]: any; indent?: number; parent?: number; }\[\]>; config: import("vue").Ref<{ view?: "uncounted" \| "list" \| "list-expansion" \| "tree"; fullWidth?: boolean; }, [TableConfig](./atable.tableconfig.md) \| { view?: "uncounted" \| "list" \| "list-expansion" \| "tree"; fullWidth?: boolean; }>; table: import("vue").Ref<{}, {}>; display: import("vue").Ref<{ childrenOpen?: boolean; expanded?: boolean; indent?: number; isParent?: boolean; isRoot?: boolean; open?: boolean; parent?: number; rowModified?: boolean; }\[\], [TableDisplay](./atable.tabledisplay.md)\[\] \| { childrenOpen?: boolean; expanded?: boolean; indent?: number; isParent?: boolean; isRoot?: boolean; open?: boolean; parent?: number; rowModified?: boolean; }\[\]>; modal: import("vue").Ref<{ colIndex?: number; event?: string; height?: number; left?: number; parent?: HTMLElement; rowIndex?: number; top?: number; visible?: boolean; width?: number; component?: string; componentProps?: Record<string, any>; }, [TableModal](./atable.tablemodal.md) \| { colIndex?: number; event?: string; height?: number; left?: number; parent?: HTMLElement; rowIndex?: number; top?: number; visible?: boolean; width?: number; component?: string; componentProps?: Record<string, any>; }>; hasPinnedColumns: import("vue").ComputedRef<boolean>; numberedRowWidth: import("vue").ComputedRef<string>; zeroColumn: import("vue").ComputedRef<boolean>; closeModal: (event: MouseEvent) => void; getCellData: <T = any>(colIndex: number, rowIndex: number) => T; getCellDisplayValue: (colIndex: number, rowIndex: number) => any; getFormattedValue: (colIndex: number, rowIndex: number, value: any) => any; getHeaderCellStyle: (column: [TableColumn](./atable.tablecolumn.md)) => CSSProperties; getIndent: (colIndex: number, indentLevel?: number) => string; getRowExpandSymbol: (rowIndex: number) => "" \| "-" \| "+"; isRowVisible: (rowIndex: number) => boolean; setCellData: (colIndex: number, rowIndex: number, value: any) => void; toggleRowExpand: (rowIndex: number) => void; }, "columns" \| "rows" \| "config" \| "table" \| "display" \| "modal">, Pick<{ columns: import("vue").Ref<{ name: string; align?: CanvasTextAlign; edit?: boolean; label?: string; type?: string; width?: string; pinned?: boolean; cellComponent?: string; cellComponentProps?: Record<string, any>; modalComponent?: string \| ((context: [CellContext](./atable.cellcontext.md)) => string); modalComponentExtraProps?: Record<string, any>; format?: string \| ((value: any, context: [CellContext](./atable.cellcontext.md)) => string); mask?: (value: any) => any; }\[\], [TableColumn](./atable.tablecolumn.md)\[\] \| { name: string; align?: CanvasTextAlign; edit?: boolean; label?: string; type?: string; width?: string; pinned?: boolean; cellComponent?: string; cellComponentProps?: Record<string, any>; modalComponent?: string \| ((context: [CellContext](./atable.cellcontext.md)) => string); modalComponentExtraProps?: Record<string, any>; format?: string \| ((value: any, context: [CellContext](./atable.cellcontext.md)) => string); mask?: (value: any) => any; }\[\]>; rows: import("vue").Ref<{ \[x: string\]: any; indent?: number; parent?: number; }\[\], [TableRow](./atable.tablerow.md)\[\] \| { \[x: string\]: any; indent?: number; parent?: number; }\[\]>; config: import("vue").Ref<{ view?: "uncounted" \| "list" \| "list-expansion" \| "tree"; fullWidth?: boolean; }, [TableConfig](./atable.tableconfig.md) \| { view?: "uncounted" \| "list" \| "list-expansion" \| "tree"; fullWidth?: boolean; }>; table: import("vue").Ref<{}, {}>; display: import("vue").Ref<{ childrenOpen?: boolean; expanded?: boolean; indent?: number; isParent?: boolean; isRoot?: boolean; open?: boolean; parent?: number; rowModified?: boolean; }\[\], [TableDisplay](./atable.tabledisplay.md)\[\] \| { childrenOpen?: boolean; expanded?: boolean; indent?: number; isParent?: boolean; isRoot?: boolean; open?: boolean; parent?: number; rowModified?: boolean; }\[\]>; modal: import("vue").Ref<{ colIndex?: number; event?: string; height?: number; left?: number; parent?: HTMLElement; rowIndex?: number; top?: number; visible?: boolean; width?: number; component?: string; componentProps?: Record<string, any>; }, [TableModal](./atable.tablemodal.md) \| { colIndex?: number; event?: string; height?: number; left?: number; parent?: HTMLElement; rowIndex?: number; top?: number; visible?: boolean; width?: number; component?: string; componentProps?: Record<string, any>; }>; hasPinnedColumns: import("vue").ComputedRef<boolean>; numberedRowWidth: import("vue").ComputedRef<string>; zeroColumn: import("vue").ComputedRef<boolean>; closeModal: (event: MouseEvent) => void; getCellData: <T = any>(colIndex: number, rowIndex: number) => T; getCellDisplayValue: (colIndex: number, rowIndex: number) => any; getFormattedValue: (colIndex: number, rowIndex: number, value: any) => any; getHeaderCellStyle: (column: [TableColumn](./atable.tablecolumn.md)) => CSSProperties; getIndent: (colIndex: number, indentLevel?: number) => string; getRowExpandSymbol: (rowIndex: number) => "" \| "-" \| "+"; isRowVisible: (rowIndex: number) => boolean; setCellData: (colIndex: number, rowIndex: number, value: any) => void; toggleRowExpand: (rowIndex: number) => void; }, "hasPinnedColumns" \| "numberedRowWidth" \| "zeroColumn">, Pick<{ columns: import("vue").Ref<{ name: string; align?: CanvasTextAlign; edit?: boolean; label?: string; type?: string; width?: string; pinned?: boolean; cellComponent?: string; cellComponentProps?: Record<string, any>; modalComponent?: string \| ((context: [CellContext](./atable.cellcontext.md)) => string); modalComponentExtraProps?: Record<string, any>; format?: string \| ((value: any, context: [CellContext](./atable.cellcontext.md)) => string); mask?: (value: any) => any; }\[\], [TableColumn](./atable.tablecolumn.md)\[\] \| { name: string; align?: CanvasTextAlign; edit?: boolean; label?: string; type?: string; width?: string; pinned?: boolean; cellComponent?: string; cellComponentProps?: Record<string, any>; modalComponent?: string \| ((context: [CellContext](./atable.cellcontext.md)) => string); modalComponentExtraProps?: Record<string, any>; format?: string \| ((value: any, context: [CellContext](./atable.cellcontext.md)) => string); mask?: (value: any) => any; }\[\]>; rows: import("vue").Ref<{ \[x: string\]: any; indent?: number; parent?: number; }\[\], [TableRow](./atable.tablerow.md)\[\] \| { \[x: string\]: any; indent?: number; parent?: number; }\[\]>; config: import("vue").Ref<{ view?: "uncounted" \| "list" \| "list-expansion" \| "tree"; fullWidth?: boolean; }, [TableConfig](./atable.tableconfig.md) \| { view?: "uncounted" \| "list" \| "list-expansion" \| "tree"; fullWidth?: boolean; }>; table: import("vue").Ref<{}, {}>; display: import("vue").Ref<{ childrenOpen?: boolean; expanded?: boolean; indent?: number; isParent?: boolean; isRoot?: boolean; open?: boolean; parent?: number; rowModified?: boolean; }\[\], [TableDisplay](./atable.tabledisplay.md)\[\] \| { childrenOpen?: boolean; expanded?: boolean; indent?: number; isParent?: boolean; isRoot?: boolean; open?: boolean; parent?: number; rowModified?: boolean; }\[\]>; modal: import("vue").Ref<{ colIndex?: number; event?: string; height?: number; left?: number; parent?: HTMLElement; rowIndex?: number; top?: number; visible?: boolean; width?: number; component?: string; componentProps?: Record<string, any>; }, [TableModal](./atable.tablemodal.md) \| { colIndex?: number; event?: string; height?: number; left?: number; parent?: HTMLElement; rowIndex?: number; top?: number; visible?: boolean; width?: number; component?: string; componentProps?: Record<string, any>; }>; hasPinnedColumns: import("vue").ComputedRef<boolean>; numberedRowWidth: import("vue").ComputedRef<string>; zeroColumn: import("vue").ComputedRef<boolean>; closeModal: (event: MouseEvent) => void; getCellData: <T = any>(colIndex: number, rowIndex: number) => T; getCellDisplayValue: (colIndex: number, rowIndex: number) => any; getFormattedValue: (colIndex: number, rowIndex: number, value: any) => any; getHeaderCellStyle: (column: [TableColumn](./atable.tablecolumn.md)) => CSSProperties; getIndent: (colIndex: number, indentLevel?: number) => string; getRowExpandSymbol: (rowIndex: number) => "" \| "-" \| "+"; isRowVisible: (rowIndex: number) => boolean; setCellData: (colIndex: number, rowIndex: number, value: any) => void; toggleRowExpand: (rowIndex: number) => void; }, "closeModal" \| "getCellData" \| "getCellDisplayValue" \| "getFormattedValue" \| "getHeaderCellStyle" \| "getIndent" \| "getRowExpandSymbol" \| "isRowVisible" \| "setCellData" \| "toggleRowExpand">> table store instance diff --git a/examples/atable/default.story.vue b/examples/atable/default.story.vue index 533aa47c..036b290a 100644 --- a/examples/atable/default.story.vue +++ b/examples/atable/default.story.vue @@ -12,6 +12,9 @@ + + Loading + @@ -21,6 +24,19 @@ import { reactive } from 'vue' import rows from './sample_data/http_logs.json' +const empty_rows = [ + { + home_page: { + title: 'https://ceara.berlin', + url: 'https://ceara.berlin', + }, + http_method: 'HEAD', + ip_address: '75.228.138.84', + report_date: 1580804064118.311, + status: '503 Service Unavailable', + }, +] + const columns: TableColumn[] = [ { label: 'Home Page', diff --git a/themes/default/_variables.css b/themes/default/_variables.css index 53c0581a..a1c17d23 100644 --- a/themes/default/_variables.css +++ b/themes/default/_variables.css @@ -55,6 +55,7 @@ --sc-atable-row-padding: 0.125rem; --sc-atable-row-height: 1.5em; --sc-atable-cell-border-width: 2px; + --sc-table-loading-color: 204, 204, 204; /* BTNS */ --sc-btn-border: #cccccc; From 111eec434bc480f77bc3f60aa1579c42b1493570 Mon Sep 17 00:00:00 2001 From: curt Date: Wed, 18 Dec 2024 10:18:52 -0600 Subject: [PATCH 2/6] added second loading bar option --- atable/src/components/ATableLoading.vue | 1 - atable/src/components/ATableLoadingBar.vue | 81 ++++++++++++++++++++++ atable/src/index.ts | 2 + examples/atable/default.story.vue | 4 +- 4 files changed, 86 insertions(+), 2 deletions(-) create mode 100644 atable/src/components/ATableLoadingBar.vue diff --git a/atable/src/components/ATableLoading.vue b/atable/src/components/ATableLoading.vue index 64a41544..ee34678e 100644 --- a/atable/src/components/ATableLoading.vue +++ b/atable/src/components/ATableLoading.vue @@ -10,7 +10,6 @@ diff --git a/atable/src/index.ts b/atable/src/index.ts index 93f6e761..548495b4 100644 --- a/atable/src/index.ts +++ b/atable/src/index.ts @@ -6,6 +6,7 @@ import ARow from './components/ARow.vue' import ATable from './components/ATable.vue' import ATableHeader from './components/ATableHeader.vue' import ATableLoading from './components/ATableLoading.vue' +import ATableLoadingBar from './components/ATableLoadingBar.vue' import ATableModal from './components/ATableModal.vue' export { createTableStore } from './stores/table' export type { CellContext, TableColumn, TableConfig, TableDisplay, TableRow, TableModal } from './types' @@ -22,6 +23,7 @@ function install(app: App /* options */) { app.component('ATable', ATable) app.component('ATableHeader', ATableHeader) app.component('ATableLoading', ATableLoading) + app.component('ATableLoadingBar', ATableLoadingBar) app.component('ATableModal', ATableModal) } diff --git a/examples/atable/default.story.vue b/examples/atable/default.story.vue index 036b290a..61ce86f7 100644 --- a/examples/atable/default.story.vue +++ b/examples/atable/default.story.vue @@ -12,8 +12,10 @@ - + Loading +
+ Loading From 2949b0e76e4fe647e2b484648d41b2decc982dae Mon Sep 17 00:00:00 2001 From: Rohan Bansal Date: Fri, 3 Jan 2025 12:52:48 +0530 Subject: [PATCH 3/6] fix: remove console.log --- atable/src/components/ATable.vue | 1 - atable/src/components/ATableLoading.vue | 2 +- atable/src/components/ATableLoadingBar.vue | 2 +- .../atable/feat-atable-loading-gradient_2024-12-17-17-16.json | 2 +- .../themes/feat-atable-loading-gradient_2024-12-17-17-16.json | 2 +- 5 files changed, 4 insertions(+), 5 deletions(-) diff --git a/atable/src/components/ATable.vue b/atable/src/components/ATable.vue index f4024022..e58db298 100644 --- a/atable/src/components/ATable.vue +++ b/atable/src/components/ATable.vue @@ -103,7 +103,6 @@ watch( () => store.rows, newValue => { emit('update:modelValue', newValue) - console.log('data loaded') }, { deep: true } ) diff --git a/atable/src/components/ATableLoading.vue b/atable/src/components/ATableLoading.vue index ee34678e..d9bd32f8 100644 --- a/atable/src/components/ATableLoading.vue +++ b/atable/src/components/ATableLoading.vue @@ -6,7 +6,7 @@
- +