diff --git a/docs/components/table/examples/TableStripedColumnsExample.vue b/docs/components/table/examples/TableStripedColumnsExample.vue new file mode 100644 index 0000000..7508083 --- /dev/null +++ b/docs/components/table/examples/TableStripedColumnsExample.vue @@ -0,0 +1,43 @@ + + diff --git a/docs/components/table/table.md b/docs/components/table/table.md index e97fe55..9e8e5ba 100644 --- a/docs/components/table/table.md +++ b/docs/components/table/table.md @@ -1,6 +1,7 @@ # Vue Table Component - Flowbite @@ -115,6 +116,57 @@ import { Table, TableHead, TableBody, TableHeadCell, TableRow, TableCell } from ``` +## Striped columns example + + + +```vue + + + +``` + ## Hoverable example diff --git a/src/components/Table/Table.vue b/src/components/Table/Table.vue index 0385e5a..341716b 100644 --- a/src/components/Table/Table.vue +++ b/src/components/Table/Table.vue @@ -13,6 +13,10 @@ const props = defineProps({ type: Boolean, default: false, }, + stripedColumns: { + type: Boolean, + default: false, + }, hoverable: { type: Boolean, default: false, @@ -21,4 +25,5 @@ const props = defineProps({ provide('striped', props.striped) provide('hoverable', props.hoverable) +provide('stripedColumns', props.stripedColumns) diff --git a/src/components/Table/TableCell.vue b/src/components/Table/TableCell.vue index 1d8e28c..9bc5e9a 100644 --- a/src/components/Table/TableCell.vue +++ b/src/components/Table/TableCell.vue @@ -1,7 +1,11 @@ diff --git a/src/components/Table/TableHeadCell.vue b/src/components/Table/TableHeadCell.vue index 5b01927..b8e08b6 100644 --- a/src/components/Table/TableHeadCell.vue +++ b/src/components/Table/TableHeadCell.vue @@ -1,7 +1,10 @@ diff --git a/src/components/Table/TableRow.vue b/src/components/Table/TableRow.vue index 40f4bbe..f129b2a 100644 --- a/src/components/Table/TableRow.vue +++ b/src/components/Table/TableRow.vue @@ -4,7 +4,7 @@ diff --git a/src/components/Table/composables/useTableCellClasses.ts b/src/components/Table/composables/useTableCellClasses.ts new file mode 100644 index 0000000..86cd6c8 --- /dev/null +++ b/src/components/Table/composables/useTableCellClasses.ts @@ -0,0 +1,20 @@ +import { computed, inject } from 'vue' +import type { Ref } from 'vue' +import classNames from 'classnames' + +const baseClasses = 'px-6 py-4 first:font-medium first:text-gray-900 first:dark:text-white first:whitespace-nowrap last:text-right' +const stripedCellClasses = 'even:bg-gray-white even:dark:bg-gray-900 odd:dark:bg-gray-800 odd:bg-gray-50' + +export function useTableCellClasses(): { tableCellClasses: Ref } { + const isColumnsStriped = inject('stripedColumns') + + const tableCellClasses = computed(() => { + return classNames(baseClasses, { + [stripedCellClasses]: isColumnsStriped, + }) + }) + + return { + tableCellClasses, + } +} diff --git a/src/components/Table/composables/useTableHeadCellClasses.ts b/src/components/Table/composables/useTableHeadCellClasses.ts new file mode 100644 index 0000000..f928fe8 --- /dev/null +++ b/src/components/Table/composables/useTableHeadCellClasses.ts @@ -0,0 +1,20 @@ +import { computed, inject } from 'vue' +import type { Ref } from 'vue' +import classNames from 'classnames' + +const baseClasses = 'px-6 py-3 text-xs uppercase' +const stripedHeadCellClasses = 'even:bg-white even:dark:bg-gray-900 odd:dark:bg-gray-800 odd:bg-gray-50' + +export function useTableHeadCellClasses(): { tableHeadCellClasses: Ref } { + const isColumnsStriped = inject('stripedColumns') + + const tableHeadCellClasses = computed(() => { + return classNames(baseClasses, { + [stripedHeadCellClasses]: isColumnsStriped, + }) + }) + + return { + tableHeadCellClasses, + } +} diff --git a/src/components/Table/composables/tableRowClasses.ts b/src/components/Table/composables/useTableRowClasses.ts similarity index 72% rename from src/components/Table/composables/tableRowClasses.ts rename to src/components/Table/composables/useTableRowClasses.ts index 7097cef..bed91c0 100644 --- a/src/components/Table/composables/tableRowClasses.ts +++ b/src/components/Table/composables/useTableRowClasses.ts @@ -3,7 +3,7 @@ import type { Ref } from 'vue' import classNames from 'classnames' const baseClasses = 'bg-white dark:bg-gray-800 [&:not(:last-child)]:border-b [&:not(:last-child)]:dark:border-gray-700' -const stripedClasses = 'odd:bg-white even:bg-gray-50 odd:dark:bg-gray-800 even:dark:bg-gray-700 bg-white dark:border-gray-700 dark:bg-gray-800' +const stripedClasses = 'odd:bg-white even:bg-gray-50 odd:dark:bg-gray-800 even:dark:bg-gray-800' const hoverableClasses = 'hover:bg-gray-50 dark:hover:bg-gray-600' export function useTableRowClasses(): { tableRowClasses: Ref } { @@ -11,13 +11,10 @@ export function useTableRowClasses(): { tableRowClasses: Ref } { const isHoverable = inject('hoverable') const tableRowClasses = computed(() => { - return classNames( - baseClasses, - { - [stripedClasses]: isStriped, - [hoverableClasses]: isHoverable, - }, - ) + return classNames(baseClasses, { + [stripedClasses]: isStriped, + [hoverableClasses]: isHoverable, + }) }) return {