Skip to content

Commit

Permalink
add boolean props, add table slot, remove pageIndex and pageSize even…
Browse files Browse the repository at this point in the history 
…ts, update docs page
  • Loading branch information
@santiagoballadares
santiagoballadares committed Nov 26, 2024
1 parent 7e4a367 commit 9ff4c0a
Show file tree
Hide file tree
Showing 6 changed files with 272 additions and 75 deletions.
252 changes: 197 additions & 55 deletions packages/documentation/pages/usage/components/standard-table.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,35 +2,114 @@
<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"
title="Remote Pagination"
@update:dataFetchDependencies="fetchData"
>
<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>
<KtI18nContext :locale="settings.locale">
<KtStandardTable
id="example-remote-data"
:options="options"
:title="settings.title"
@update:dataFetchDependencies="fetchData"
>
<template v-if="settings.slots.headerActionsSlot" #header-actions>
<KtButton label="Some Action" />
</template>
<template v-if="settings.slots.controlsActionsSlot" #controls-actions>
<KtButton label="Some Action" />
</template>
<template v-if="settings.slots.infoActionsSlot" #info-actions>
<KtButton label="Some Action" />
</template>
<template v-if="settings.slots.tableSlot" #table>
CUSTOM CONTENT
</template>
</KtStandardTable>
</KtI18nContext>

<br />

<KtForm v-model="settings" size="small">
<div class="wrapper">
<div>
<h4>Settings</h4>
<KtFieldSingleSelect
formKey="locale"
helpText="Can be set via KtI18nContext"
hideClear
label="Language"
leftIcon="global"
:options="[
{ label: 'German (de-DE)', value: 'de-DE' },
{ label: 'English (en-US)', value: 'en-US' },
{ label: 'Spanish (es-ES)', value: 'es-ES' },
{ label: 'French (fr-FR)', value: 'fr-FR' },
{ label: 'Japanese (ja-JP)', value: 'ja-JP' },
]"
/>
<KtFieldToggleGroup
formKey="booleanFlags"
helpText="Can be set via hideControls prop"
isOptional
label="Boolean Flags"
:options="[
{ key: 'hideColumns', label: 'Hide columns' },
{ key: 'hideFilters', label: 'Hide filters' },
{ key: 'hideSearch', label: 'Hide search' },
]"
type="switch"
/>
<KtFieldToggle
formKey="showInlineFilters"
helpText="Must set via filter definition: `displayInline: true`"
isOptional
label="Use inline filters"
type="switch"
/>
<KtFieldToggleGroup
formKey="slots"
isOptional
label="Slots"
:options="[
{ 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' },
]"
type="switch"
/>
<KtFieldSingleSelect
formKey="columnsPopoverSize"
helpText="Can be set via popoversSize prop"
hideClear
isOptional
label="Columns popover size"
:options="sizeOptions"
/>
<KtFieldSingleSelect
formKey="filtersPopoverSize"
helpText="Can be set via popoversSize prop"
hideClear
isOptional
label="Filters popover size"
:options="sizeOptions"
/>
</div>
<div>
<h4>Texts</h4>
<KtFieldText formKey="title" isOptional label="title" />
<KtFieldText
formKey="searchPlaceholder"
isOptional
label="searchPlaceholder"
/>
</div>
</div>
</KtForm>
</div>
</template>

Expand Down Expand Up @@ -169,7 +248,45 @@ export default defineComponent({
const recipesData = ref<RecipeRow[]>([])
const recipesRowCount = ref(0)
const filters = ref<Kotti.StandardTable.Filter[]>([
const settings = ref<{
booleanFlags: {
hideColumns: Kotti.FieldToggle.Value
hideFilters: Kotti.FieldToggle.Value
hideSearch: Kotti.FieldToggle.Value
}
columnsPopoverSize: Kotti.FieldSingleSelect.Value
filtersPopoverSize: Kotti.FieldSingleSelect.Value
locale: Kotti.I18n.SupportedLanguages
searchPlaceholder?: Kotti.FieldText.Value
showInlineFilters: Kotti.FieldToggle.Value
slots: {
controlsActionsSlot: Kotti.FieldToggle.Value
headerActionsSlot: Kotti.FieldToggle.Value
infoActionsSlot: Kotti.FieldToggle.Value
tableSlot: Kotti.FieldToggle.Value
}
title: Kotti.FieldText.Value
}>({
booleanFlags: {
hideColumns: false,
hideFilters: false,
hideSearch: false,
},
columnsPopoverSize: Kotti.Popover.Size.MEDIUM,
filtersPopoverSize: Kotti.Popover.Size.MEDIUM,
locale: 'en-US',
searchPlaceholder: undefined,
showInlineFilters: false,
slots: {
controlsActionsSlot: false,
headerActionsSlot: false,
infoActionsSlot: false,
tableSlot: false,
},
title: 'Title',
})
const filters = computed<Kotti.StandardTable.Filter[]>(() => [
{
dataTest: 'boolean-filter',
id: 'booleanFilter',
Expand Down Expand Up @@ -245,34 +362,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,
},
...(settings.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 {
Expand Down Expand Up @@ -346,7 +467,28 @@ export default defineComponent({
},
})),
),
options: computed(() => ({
hideControls: {
columns: settings.value.booleanFlags.hideColumns,
filters: settings.value.booleanFlags.hideFilters,
search: settings.value.booleanFlags.hideSearch,
},
popoversSize: {
columns: settings.value.columnsPopoverSize,
filters: settings.value.filtersPopoverSize,
},
searchPlaceholder: settings.value.searchPlaceholder,
})),
settings,
sizeOptions: computed((): Kotti.FieldSingleSelect.Props['options'] =>
Object.entries(Kotti.Popover.Size).map(([key, value]) => ({
label: `Kotti.Popover.Size.${key} (${value})`,
value,
})),
),
}
},
})
</script>

<style src="../../../styles/form-fields.scss" lang="scss" scoped />
Loading

0 comments on commit 9ff4c0a

Please sign in to comment.