Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(table): enhance loading spinner #946

Merged
merged 1 commit into from
Jun 7, 2024
Merged

feat(table): enhance loading spinner #946

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion packages/docs/components/Table.md
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading