Skip to content

Commit

Permalink
feat(table): enhance loading spinner (#946)
Browse files Browse the repository at this point in the history
  • Loading branch information
@mlmoravek
mlmoravek authored Jun 7, 2024
1 parent 66c09f4 commit a1b7d45
Show file tree
Hide file tree
Showing 3 changed files with 40 additions and 4 deletions.
4 changes: 3 additions & 1 deletion packages/docs/components/Table.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,8 @@ title: Table
| isRowCheckable | Custom method to verify if a row is checkable, works when is checkable | (row: unknown) =&gt; boolean | - | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>table: {<br>&nbsp;&nbsp;isRowCheckable: (row) => true<br>}</code> |
| 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 | - | <code style='white-space: nowrap; padding: 0;'>false</code> |
| loadingIcon | Icon for the loading state | string | - | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>table: {<br>&nbsp;&nbsp;loadingIcon: "loading"<br>}</code> |
| loadingLabel | Label for the loading state | string | - | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>table: {<br>&nbsp;&nbsp;loadingLabel: undefined<br>}</code> |
| mobileBreakpoint | Mobile breakpoint as max-width value | string | - | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>table: {<br>&nbsp;&nbsp;mobileBreakpoint: undefined<br>}</code> |
| mobileCards | Rows appears as cards on mobile (collapse rows) | boolean | - | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>table: {<br>&nbsp;&nbsp;mobileCards: true<br>}</code> |
| mobileSortPlaceholder | Text when nothing is selected | string | - | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>table: {<br>&nbsp;&nbsp;mobileSortPlaceholder: undefined<br>}</code> |
Expand Down Expand Up @@ -148,7 +150,7 @@ title: Table
| detail | Place row detail content here | **row** `unknown` - row content<br/>**index** `number` - row index |
| empty | Define content if table is empty | |
| footer | Define a custom footer | **column-count** `number` - counts of visible columns<br/>**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 | |

</div>
Expand Down
34 changes: 31 additions & 3 deletions packages/oruga/src/components/table/Table.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -484,6 +494,15 @@ const props = defineProps({
type: [String, Array, Function] as PropType<ComponentClass>,
default: undefined,
},
/**
* Class configuration for the internal loading component
* @ignore
*/
loadingClasses: {
type: Object,
default: () =>
getOption<OrugaOptions["loading"]>("table.loadingClasses", {}),
},
});
const emits = defineEmits<{
Expand Down Expand Up @@ -2000,12 +2019,21 @@ function tdClasses(row: unknown, column: TableColumnComponent): ClassBind[] {
</tr>
</tfoot>
</table>

<!--
@slot Override loading component
@binding {boolean} loading - is loading enabled
@binding {boolean} loading - is loading state enabled
-->
<slot name="loading" :loading="loading">
<o-loading :full-page="false" :active="loading" />
<o-loading
v-bind="loadingClasses"
:full-page="false"
:active="loading"
:icon="loadingIcon"
:label="loadingLabel"
icon-size="large"
role="status"
:aria-hidden="!loading" />
</slot>
</div>

Expand Down
6 changes: 6 additions & 0 deletions packages/oruga/src/components/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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<string, any>;
/** Class of the root element */
rootClass: ClassDefinition;
/** Class of the sortable form wrapper on mobile */
Expand Down Expand Up @@ -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 */
Expand Down

0 comments on commit a1b7d45

Please sign in to comment.