From a1b7d45495c19edc8b5ffa77466be504dd13be32 Mon Sep 17 00:00:00 2001
From: mm <25961416+mlmoravek@users.noreply.github.com>
Date: Fri, 7 Jun 2024 13:59:17 +0200
Subject: [PATCH] feat(table): enhance loading spinner (#946)
---
packages/docs/components/Table.md | 4 ++-
packages/oruga/src/components/table/Table.vue | 34 +++++++++++++++++--
packages/oruga/src/components/types.ts | 6 ++++
3 files changed, 40 insertions(+), 4 deletions(-)
diff --git a/packages/docs/components/Table.md b/packages/docs/components/Table.md
index 67c6abf66..c9ed26dfc 100644
--- a/packages/docs/components/Table.md
+++ b/packages/docs/components/Table.md
@@ -76,6 +76,8 @@ title: Table
| isRowCheckable | Custom method to verify if a row is checkable, works when is checkable | (row: unknown) => boolean | - | From config:
table: {
isRowCheckable: (row) => true
} |
| isRowSelectable | Custom method to verify if a row is selectable, works when is selected. | func | - | Default function (see source code) |
| loading | Enable loading state | boolean | - | false |
+| loadingIcon | Icon for the loading state | string | - | From config:
table: {
loadingIcon: "loading"
} |
+| loadingLabel | Label for the loading state | string | - | From config:
table: {
loadingLabel: undefined
} |
| mobileBreakpoint | Mobile breakpoint as max-width value | string | - | From config:
table: {
mobileBreakpoint: undefined
} |
| mobileCards | Rows appears as cards on mobile (collapse rows) | boolean | - | From config:
table: {
mobileCards: true
} |
| mobileSortPlaceholder | Text when nothing is selected | string | - | From config:
table: {
mobileSortPlaceholder: undefined
} |
@@ -148,7 +150,7 @@ title: Table
| detail | Place row detail content here | **row** `unknown` - row content
**index** `number` - row index |
| empty | Define content if table is empty | |
| footer | Define a custom footer | **column-count** `number` - counts of visible columns
**row-count** `number` - counts of visible rows |
-| loading | Override loading component | **loading** `boolean` - is loading enabled |
+| loading | Override loading component | **loading** `boolean` - is loading state enabled |
| bottom-left | Additional slot if table is paginated | |
diff --git a/packages/oruga/src/components/table/Table.vue b/packages/oruga/src/components/table/Table.vue
index d185d78fa..7d71c5119 100644
--- a/packages/oruga/src/components/table/Table.vue
+++ b/packages/oruga/src/components/table/Table.vue
@@ -39,7 +39,7 @@ import {
} from "@/composables";
import type { Column, TableColumn, TableColumnComponent } from "./types";
-import type { ComponentClass, ClassBind } from "@/types";
+import type { ComponentClass, ClassBind, OrugaOptions } from "@/types";
/**
* Tabulated data are sometimes needed, it's even better when it's responsive
@@ -298,6 +298,16 @@ const props = defineProps({
validator: (value: string) =>
["centered", "right", "left"].indexOf(value) >= 0,
},
+ /** Icon for the loading state */
+ loadingIcon: {
+ type: String,
+ default: () => getOption("table.loadingIcon", "loading"),
+ },
+ /** Label for the loading state */
+ loadingLabel: {
+ type: String,
+ default: () => getOption("table.loadingLabel"),
+ },
/** Mobile breakpoint as max-width value */
mobileBreakpoint: {
type: String,
@@ -484,6 +494,15 @@ const props = defineProps({
type: [String, Array, Function] as PropType,
default: undefined,
},
+ /**
+ * Class configuration for the internal loading component
+ * @ignore
+ */
+ loadingClasses: {
+ type: Object,
+ default: () =>
+ getOption("table.loadingClasses", {}),
+ },
});
const emits = defineEmits<{
@@ -2000,12 +2019,21 @@ function tdClasses(row: unknown, column: TableColumnComponent): ClassBind[] {
+
-
+
diff --git a/packages/oruga/src/components/types.ts b/packages/oruga/src/components/types.ts
index 59e74fd68..11e5d2193 100644
--- a/packages/oruga/src/components/types.ts
+++ b/packages/oruga/src/components/types.ts
@@ -1151,6 +1151,8 @@ but will set body to position fixed, might break some layouts. */
showDetailIcon: boolean;
/** Border to all cells */
bordered: boolean;
+ /** Class configuration for the internal loading component */
+ loadingClasses: Record;
/** Class of the root element */
rootClass: ClassDefinition;
/** Class of the sortable form wrapper on mobile */
@@ -1231,10 +1233,14 @@ but will set body to position fixed, might break some layouts. */
debounceSearch: number;
/** How many rows per page (if paginated) */
perPage: string | number;
+ /** Icon for the loading state */
+ loadingIcon: string;
/** Icon name of detail action */
detailIcon: string;
/** Icon pack to use */
iconPack: string;
+ /** Label for the loading state */
+ loadingLabel: string;
/** Makes the cells narrower */
narrowed: boolean;
/** Mobile breakpoint as max-width value */