Skip to content

Commit

Permalink
refactor: fix bugs | update classes
Browse files Browse the repository at this point in the history
  • Loading branch information
@mlmoravek
mlmoravek committed Nov 29, 2024
1 parent ed08391 commit 33b4bc5
Show file tree
Hide file tree
Showing 6 changed files with 81 additions and 44 deletions.
3 changes: 2 additions & 1 deletion packages/docs/components/Loading.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,8 @@
| iconSpin | Enable spin effect on icon | boolean | - | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>loading: {<br>&nbsp;&nbsp;iconSpin: true<br>}</code> |
| label | Notification label, unnecessary when default slot is used. | string | - | |
| override | Override existing theme classes completely | boolean | - | |
| scroll | Use `clip` to remove the body scrollbar, `keep` to have a non scrollable scrollbar to avoid shifting background,<br/>but will set body to position fixed, might break some layouts. | "clip" \| "keep" | `keep`, `clip` | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>modal: {<br>&nbsp;&nbsp;scroll: "keep"<br>}</code> |
| role | Role attribute to be passed to the div wrapper for better accessibility | string | - | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>loading: {<br>&nbsp;&nbsp;role: "dialog"<br>}</code> |
| scroll | Use `clip` to remove the body scrollbar, `keep` to have a non scrollable scrollbar to avoid shifting background,<br/>but will set body to position fixed, might break some layouts. | "clip" \| "keep" | `keep`, `clip` | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>loading: {<br>&nbsp;&nbsp;scroll: "keep"<br>}</code> |

### Events

Expand Down
84 changes: 54 additions & 30 deletions packages/oruga/src/components/table/Table.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import {
useSlots,
toValue,
useTemplateRef,
triggerRef,
type MaybeRefOrGetter,
} from "vue";
Expand Down Expand Up @@ -87,7 +88,7 @@ const props = withDefaults(defineProps<TableProps<T>>(), {
scrollable: undefined,
stickyHeader: false,
height: undefined,
debounceSearch: () => getDefault("table.debounceSearch"),
debounceSearch: () => getDefault("table.debounceSearch", 300),
checkable: false,
stickyCheckbox: false,
headerCheckable: true,
Expand Down Expand Up @@ -363,14 +364,18 @@ const tableColumns = computed<TableColumnItem<T>[]>(() => {
const column = toValue(columnItem.data!);
// create additional th attrs data
const thAttrsData =
let thAttrsData =
typeof props.thAttrs === "function" ? props.thAttrs(column) : {};
thAttrsData = Object.assign(thAttrsData, column.thAttrs);
// create additional td attrs data
const tdAttrsData = (props.data ?? []).map((data) =>
typeof props.tdAttrs === "function"
? props.tdAttrs(data, column)
: {},
);
const tdAttrsData = (props.data ?? []).map((data) => {
const tdAttrs =
typeof props.tdAttrs === "function"
? props.tdAttrs(data, column)
: {};
return Object.assign(tdAttrs, column.tdAttrs);
});
return {
...column,
Expand Down Expand Up @@ -615,24 +620,29 @@ const hasSearchableColumns = computed(() => {
return tableColumns.value.some((column) => column.searchable);
});
let debouncedFilter: ReturnType<
typeof useDebounce<Parameters<typeof handleFiltersChange>>
>;
// initialise and update debounces filter function
watch(
filters,
(value) => {
if (props.backendFiltering) return;
if (props.debounceSearch)
useDebounce(
() => handleFiltersChange(value),
props.debounceSearch,
)();
else handleFiltersChange(value);
},
{ deep: true },
() => props.debounceSearch,
(debounce) =>
(debouncedFilter = useDebounce(handleFiltersChange, debounce || 0)),
{ immediate: true },
);
// react on filters got changed
watch(filters, (value) => debouncedFilter(value), { deep: true });
function handleFiltersChange(value: Record<string, string>): void {
emits("filters-change", value);
// recompute rows visibility with updated filters
filterTableRows();
// if not backend filtered, recompute rows visibility with updated filters
if (!props.backendFiltering) {
filterTableRows();
// force tableRows reactivity to update
triggerRef(tableRows);
}
}
function onFiltersEvent(event: Event): void {
Expand Down Expand Up @@ -1034,17 +1044,25 @@ const footerClasses = defineClasses(["footerClass", "o-table__footer"]);
const thBaseClasses = defineClasses(["thClass", "o-table__th"]);
const thCheckboxClasses = defineClasses([
"thCheckboxClass",
"o-table__th-checkbox",
]);
const thCheckboxClasses = defineClasses(
["thCheckboxClass", "o-table__th-checkbox"],
[
"thStickyClass",
"o-table__th--sticky",
null,
computed(() => props.stickyCheckbox),
],
);
const thDetailedClasses = defineClasses([
"thDetailedClass",
"o-table__th--detailed",
"o-table__th-detailed",
]);
const thSubheadingClasses = defineClasses(["thSubheadingClass", "o-table__th"]);
const thSubheadingClasses = defineClasses([
"thSubheadingClass",
"o-table__th-subheading",
]);
const thSortIconClasses = defineClasses([
"thSortIconClass",
Expand All @@ -1061,6 +1079,13 @@ const trCheckedClasses = defineClasses([
"o-table__tr--checked",
]);
const trEmptyClasses = defineClasses(["trEmptyClass", "o-table__tr-empty"]);
const trDetailedClasses = defineClasses([
"trDetailedClass",
"o-table__tr-detail",
]);
const tdBaseClasses = defineClasses(["tdClass", "o-table__td"]);
const tdCheckboxClasses = defineClasses(
Expand All @@ -1078,8 +1103,6 @@ const tdDetailedChevronClasses = defineClasses([
"o-table__td-chevron",
]);
const detailedClasses = defineClasses(["detailedClass", "o-table__detail"]);
const mobileSortClasses = defineClasses([
"mobileSortClass",
"o-table__mobile-sort",
Expand Down Expand Up @@ -1604,7 +1627,7 @@ defineExpose({ rows: tableRows, sort: sortByField });
<tr
v-else
:key="`${row.key}_detail`"
:class="detailedClasses">
:class="trDetailedClasses">
<td :colspan="columnCount">
<!--
@slot Place row detail content here
Expand All @@ -1621,7 +1644,7 @@ defineExpose({ rows: tableRows, sort: sortByField });
</transition>
</template>

<tr v-if="!availableRows.length">
<tr v-if="!availableRows.length" :class="trEmptyClasses">
<td :colspan="columnCount">
<!--
@slot Define content if table is empty
Expand All @@ -1631,6 +1654,7 @@ defineExpose({ rows: tableRows, sort: sortByField });
v-if="emptyIcon"
:icon="emptyIcon"
:size="emptyIconSize"
:pack="iconPack"
both />
{{ emptyLabel }}
</slot>
Expand Down
4 changes: 3 additions & 1 deletion packages/oruga/src/components/table/examples/customise.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,9 @@ const hasMobileCards = ref(true);
:checkable="isCheckbale"
:loading="isLoading"
:selectable="isSelectable"
:mobile-cards="hasMobileCards">
:mobile-cards="hasMobileCards"
empty-label="Table is empty"
empty-icon="frown">
<o-table-column
v-slot="{ row }"
field="id"
Expand Down
27 changes: 17 additions & 10 deletions packages/oruga/src/components/table/examples/inspector.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -124,16 +124,6 @@ const inspectData = [
data.striped = true;
},
},
{
class: "detailedClass",
description: "Class of the Table row detail",
properties: ["detailed"],
warning: "Expand details to see it in action!",
action: (cmp, data) => {
data.tableClass = "inspector_table";
data.mobileCards = true;
},
},
{
class: "narrowedClass",
properties: ["narrowed"],
Expand Down Expand Up @@ -167,6 +157,16 @@ const inspectData = [
data.scrollable = true;
},
},
{
class: "trDetailedClass",
description: "Class of the detail Table row ",
properties: ["detailed"],
warning: "Expand details to see it in action!",
action: (cmp, data) => {
data.tableClass = "inspector_table";
data.mobileCards = true;
},
},
{
class: "trSelectedClass",
description: "Class of the Table row when selected",
Expand All @@ -184,6 +184,13 @@ const inspectData = [
data.checkable = true;
},
},
{
class: "trEmptyClass",
description: "Class of the Table row when table is empty",
action: (cmp, data) => {
data.data = [];
},
},
{
class: "thClass",
description: "Class of the Table `th` element",
Expand Down
6 changes: 4 additions & 2 deletions packages/oruga/src/components/table/props.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -193,8 +193,6 @@ type TableClasses = Partial<{
footerClass: ComponentClass;
/** Class of the Table when it is empty */
emptyClass: ComponentClass;
/** Class of the Table row detail */
detailedClass: ComponentClass;
/** Class of the Table when is bordered */
borderedClass: ComponentClass;
/** Class of the Table when rows are striped */
Expand All @@ -211,6 +209,10 @@ type TableClasses = Partial<{
trSelectedClass: ComponentClass;
/** Class of the Table row when checkable and checked */
trCheckedClass: ComponentClass;
/** Class of the detail Table row */
trDetailedClass: ComponentClass;
/** Class of the Table row when table is empty */
trEmptyClass: ComponentClass;
/** Class of the Table `th` element */
thClass: ComponentClass;
/** Class of the Table `th` element when component is positioned */
Expand Down
1 change: 1 addition & 0 deletions packages/oruga/src/utils/icons.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,7 @@ const faIcons = () => {
"close-circle": "times-circle",
close: "times",
loading: "circle-notch",
"emoticon-sad": "frown",
},
};
};
Expand Down

0 comments on commit 33b4bc5

Please sign in to comment.