add boolean props, add table slot, remove pageIndex and pageSize even…

…ts, update docs page
3YOURMIND · Nov 25, 2024 · d1056e6 · d1056e6
1 parent 7e4a367
commit d1056e6
Show file tree

Hide file tree

Showing 6 changed files with 195 additions and 63 deletions.
diff --git a/packages/documentation/pages/usage/components/standard-table.vue b/packages/documentation/pages/usage/components/standard-table.vue
@@ -2,35 +2,45 @@
 	<div>
 		<ComponentInfo v-bind="{ component }" />
 
-		<KtStandardTable id="example-local-data" title="Local Pagination">
-			<template #header-actions>
-				<KtButton label="Some Action" />
-			</template>
-			<template #controls-actions>
-				<KtButton label="Some Action" />
-			</template>
-			<template #info-actions>
-				<KtButton label="Some Action" />
-			</template>
-		</KtStandardTable>
+		<KtStandardTable id="example-local-data" title="Local Pagination" />
 
 		<br /><br />
 
 		<KtStandardTable
 			id="example-remote-data"
+			:options="options"
 			title="Remote Pagination"
 			@update:dataFetchDependencies="fetchData"
 		>
-			<template #header-actions>
+			<template v-if="tableSlots.headerActionsSlot" #header-actions>
 				<KtButton label="Some Action" />
 			</template>
-			<template #controls-actions>
+			<template v-if="tableSlots.controlsActionsSlot" #controls-actions>
 				<KtButton label="Some Action" />
 			</template>
-			<template #info-actions>
+			<template v-if="tableSlots.infoActionsSlot" #info-actions>
 				<KtButton label="Some Action" />
 			</template>
+			<template v-if="tableSlots.tableSlot" #table> CUSTOM CONTENT </template>
 		</KtStandardTable>
+
+		<br /><br />
+
+		<KtFieldToggleGroup
+			v-model="tableFeatures"
+			isOptional
+			label="Features"
+			:options="tableFeaturesOptions"
+			type="switch"
+		/>
+
+		<KtFieldToggleGroup
+			v-model="tableSlots"
+			isOptional
+			label="Slots"
+			:options="tableSlotsOptions"
+			type="switch"
+		/>
 	</div>
 </template>
 
@@ -169,7 +179,20 @@ export default defineComponent({
 		const recipesData = ref<RecipeRow[]>([])
 		const recipesRowCount = ref(0)
 
-		const filters = ref<Kotti.StandardTable.Filter[]>([
+		const tableSlots = ref({
+			controlsActionsSlot: false,
+			headerActionsSlot: false,
+			infoActionsSlot: false,
+			tableSlot: false,
+		})
+		const tableFeatures = ref({
+			hideColumns: false,
+			hideFilters: false,
+			hideSearch: false,
+			showInlineFilters: false,
+		})
+
+		const filters = computed<Kotti.StandardTable.Filter[]>(() => [
 			{
 				dataTest: 'boolean-filter',
 				id: 'booleanFilter',
@@ -245,34 +268,38 @@ export default defineComponent({
 				type: Kotti.StandardTable.FilterType.NUMBER_RANGE,
 				unit: 'Kg',
 			},
-			{
-				dataTest: 'single-select-filter-inline',
-				displayInline: true,
-				id: 'singleSelectFilterInline',
-				isUnsorted: true,
-				label: 'Single select filter Inline',
-				options: [
-					{
-						dataTest: 'opt-1',
-						isDisabled: false,
-						label: 'Option 1',
-						value: 101,
-					},
-					{
-						dataTest: 'opt-2',
-						isDisabled: false,
-						label: 'Option 2',
-						value: 102,
-					},
-					{
-						dataTest: 'opt-3',
-						isDisabled: false,
-						label: 'Option 3',
-						value: 103,
-					},
-				],
-				type: Kotti.StandardTable.FilterType.SINGLE_SELECT,
-			},
+			...(tableFeatures.value.showInlineFilters
+				? [
+						{
+							dataTest: 'single-select-filter-inline',
+							displayInline: true,
+							id: 'singleSelectFilterInline',
+							isUnsorted: true,
+							label: 'Single select filter Inline',
+							options: [
+								{
+									dataTest: 'opt-1',
+									isDisabled: false,
+									label: 'Option 1',
+									value: 101,
+								},
+								{
+									dataTest: 'opt-2',
+									isDisabled: false,
+									label: 'Option 2',
+									value: 102,
+								},
+								{
+									dataTest: 'opt-3',
+									isDisabled: false,
+									label: 'Option 3',
+									value: 103,
+								},
+							],
+							type: Kotti.StandardTable.FilterType.SINGLE_SELECT,
+						},
+					]
+				: []),
 		])
 
 		return {
@@ -346,6 +373,56 @@ export default defineComponent({
 					},
 				})),
 			),
+			options: computed(() => ({
+				hideControls: {
+					columns: tableFeatures.value.hideColumns,
+					filters: tableFeatures.value.hideFilters,
+					search: tableFeatures.value.hideSearch,
+				},
+				popoversSize: {
+					filters: 'lg',
+				},
+				searchPlaceholder: 'Type here to search',
+			})),
+			tableFeatures,
+			tableFeaturesOptions: computed(() => [
+				{
+					key: 'hideColumns',
+					label: 'Hide columns',
+				},
+				{
+					key: 'hideFilters',
+					label: 'Hide filters',
+				},
+				{
+					key: 'hideSearch',
+					label: 'Hide search',
+				},
+				{
+					key: 'showInlineFilters',
+					label: 'Use inline filters',
+					tooltip: 'Must set `displayInline: true` in the filter definition',
+				},
+			]),
+			tableSlots,
+			tableSlotsOptions: computed(() => [
+				{
+					key: 'headerActionsSlot',
+					label: 'Use header actions slot',
+				},
+				{
+					key: 'controlsActionsSlot',
+					label: 'Use controls actions slot',
+				},
+				{
+					key: 'infoActionsSlot',
+					label: 'Use info actions slot',
+				},
+				{
+					key: 'tableSlot',
+					label: 'Use table slot',
+				},
+			]),
 		}
 	},
 })

diff --git a/packages/kotti-ui/source/kotti-table/KtStandardTable.vue b/packages/kotti-ui/source/kotti-table/KtStandardTable.vue
@@ -9,35 +9,47 @@
 				<slot name="header-actions" />
 			</div>
 		</div>
-		<div class="kt-standard-table__controls">
-			<div class="kt-standard-table__table-actions">
+		<div
+			v-if="
+				!hideTableActions ||
+				$slots['controls-actions'] ||
+				inlineFilters.length > 0
+			"
+			class="kt-standard-table__controls"
+		>
+			<div v-if="!hideTableActions" class="kt-standard-table__table-actions">
 				<TableSearch
+					v-if="!options?.hideControls?.search"
 					:isLoading="isLoading"
+					:placeholder="options?.searchPlaceholder"
 					:value="searchValue"
 					@input="onUpdateSearchValue"
 				/>
 				<TableFilters
+					v-if="!options?.hideControls?.filters"
 					:filters="popoverFilters"
 					:isLoading="isLoading"
+					:size="options?.popoversSize?.filters"
 					:value="appliedFilters"
 					@input="onUpdateAppliedFilters"
 				/>
 				<TableColumns
+					v-if="!options?.hideControls?.columns"
 					:isLoading="isLoading"
 					:options="columnOptions"
+					:size="options?.popoversSize?.columns"
 					:value="columnVisibility"
 					@input="onUpdateColumnVisivility"
 					@showAll="onShowAllColumns"
 				/>
 			</div>
-			<div v-if="$slots['controls-actions']" class="kt-standard-table__slot">
-				<slot name="controls-actions" />
-			</div>
-			<div
-				v-if="inlineFilters.length > 0"
-				class="kt-standard-table__inline-filters"
-			>
+			<div class="kt-standard-table__right-aligned-container">
+				<div v-if="$slots['controls-actions']" class="kt-standard-table__slot">
+					<slot name="controls-actions" />
+				</div>
 				<FilterList
+					v-if="inlineFilters.length > 0"
+					class="kt-standard-table__inline-filters"
 					:filters="inlineFilters"
 					:isLoading="isLoading"
 					:value="appliedFilters"
@@ -64,8 +76,14 @@
 				<slot name="info-actions" />
 			</div>
 		</div>
-		<div class="kt-standard-table__table">
-			<KtTable :isLoading="isLoading" :tableId="id" />
+		<div>
+			<slot v-if="$slots['table']" name="table" />
+			<KtTable
+				v-else
+				class="kt-standard-table__table"
+				:isLoading="isLoading"
+				:tableId="id"
+			/>
 		</div>
 		<div class="kt-standard-table__footer">
 			<TablePageSize
@@ -117,11 +135,7 @@ export default defineComponent({
 		TableSearch,
 	},
 	props: makeProps(KottiStandardTable.propsSchema),
-	emits: [
-		'update:dataFetchDependencies',
-		'update:pageIndex',
-		'update:pageSize',
-	],
+	emits: ['update:dataFetchDependencies'],
 	setup(props, { emit }) {
 		// eslint-disable-next-line vue/no-setup-props-reactivity-loss
 		const standardTableContext = useStandardTableContext(props.id)
@@ -188,6 +202,12 @@ export default defineComponent({
 					})
 					.filter(({ value }) => value.length > 0),
 			),
+			hideTableActions: computed(
+				() =>
+					props.options?.hideControls?.columns &&
+					props.options.hideControls.filters &&
+					props.options.hideControls.search,
+			),
 			inlineFilters: computed(() =>
 				filters.value.filter((filter) => filter.displayInline),
 			),
@@ -205,11 +225,9 @@ export default defineComponent({
 			},
 			onUpdatePageIndex: (value: number) => {
 				table.value.setPageIndex(value)
-				emit('update:pageIndex', value)
 			},
 			onUpdatePageSize: (value: number) => {
 				table.value.setPageSize(value)
-				emit('update:pageSize', value)
 			},
 			onUpdateSearchValue: (value: KottiFieldText.Value) => {
 				searchValue.value = value
@@ -283,6 +301,14 @@ export default defineComponent({
 		}
 	}
 
+	&__right-aligned-container {
+		display: flex;
+		gap: 0.8rem;
+		gap: var(--unit-4);
+		align-items: center;
+		margin-left: auto;
+	}
+
 	&__slot {
 		margin-left: auto;
 	}

diff --git a/packages/kotti-ui/source/kotti-table/index.ts b/packages/kotti-ui/source/kotti-table/index.ts
@@ -70,6 +70,10 @@ const STANDARD_META: Kotti.Meta = {
 			description: 'slot next to the applied filters section',
 			scope: null,
 		},
+		table: {
+			description: 'slot to show custom content instead of the KtTable',
+			scope: null,
+		},
 	},
 	typeScript: {
 		namespace: 'Kotti.StandardTable',

diff --git a/packages/kotti-ui/source/kotti-table/standard-table/components/Columns.vue b/packages/kotti-ui/source/kotti-table/standard-table/components/Columns.vue
@@ -1,7 +1,7 @@
 <template>
 	<KtPopover
 		v-if="options && options.length > 0"
-		size="md"
+		:size="size"
 		:trigger="isLoading ? 'manual' : 'click'"
 	>
 		<KtButton

diff --git a/packages/kotti-ui/source/kotti-table/standard-table/components/Filters.vue b/packages/kotti-ui/source/kotti-table/standard-table/components/Filters.vue
@@ -1,7 +1,7 @@
 <template>
 	<KtPopover
 		v-if="filters && filters.length > 0"
-		size="md"
+		:size="size"
 		:trigger="isLoading ? 'manual' : 'click'"
 	>
 		<KtButton