From ab973f736760b692dfa413aede447f6b3ad2ed5a Mon Sep 17 00:00:00 2001 From: victor Date: Mon, 12 Dec 2022 19:41:03 +0400 Subject: [PATCH 01/12] feat: added core for table component --- .../table/examples/TableExample.vue | 41 +++++++++- src/components/Table/Table.vue | 76 +------------------ src/components/Table/TableBody.vue | 7 ++ src/components/Table/TableCell.vue | 7 ++ src/components/Table/TableHead.vue | 9 +++ src/components/Table/TableHeadCell.vue | 7 ++ src/components/Table/TableRow.vue | 7 ++ src/index.ts | 5 ++ 8 files changed, 82 insertions(+), 77 deletions(-) create mode 100644 src/components/Table/TableBody.vue create mode 100644 src/components/Table/TableCell.vue create mode 100644 src/components/Table/TableHead.vue create mode 100644 src/components/Table/TableHeadCell.vue create mode 100644 src/components/Table/TableRow.vue diff --git a/docs/components/table/examples/TableExample.vue b/docs/components/table/examples/TableExample.vue index e2c2921..3827ab1 100644 --- a/docs/components/table/examples/TableExample.vue +++ b/docs/components/table/examples/TableExample.vue @@ -1,8 +1,45 @@ diff --git a/src/components/Table/Table.vue b/src/components/Table/Table.vue index ff2de14..f3e030e 100644 --- a/src/components/Table/Table.vue +++ b/src/components/Table/Table.vue @@ -1,85 +1,11 @@ diff --git a/src/components/Table/TableCell.vue b/src/components/Table/TableCell.vue new file mode 100644 index 0000000..1d8e28c --- /dev/null +++ b/src/components/Table/TableCell.vue @@ -0,0 +1,7 @@ + + diff --git a/src/components/Table/TableHead.vue b/src/components/Table/TableHead.vue new file mode 100644 index 0000000..16aba62 --- /dev/null +++ b/src/components/Table/TableHead.vue @@ -0,0 +1,9 @@ + + diff --git a/src/components/Table/TableHeadCell.vue b/src/components/Table/TableHeadCell.vue new file mode 100644 index 0000000..5b01927 --- /dev/null +++ b/src/components/Table/TableHeadCell.vue @@ -0,0 +1,7 @@ + + diff --git a/src/components/Table/TableRow.vue b/src/components/Table/TableRow.vue new file mode 100644 index 0000000..25120fc --- /dev/null +++ b/src/components/Table/TableRow.vue @@ -0,0 +1,7 @@ + + diff --git a/src/index.ts b/src/index.ts index 627797b..cb67539 100644 --- a/src/index.ts +++ b/src/index.ts @@ -29,6 +29,11 @@ export { default as Progress } from './components/Progress/Progress.vue' export { default as Rating } from './components/Rating/Rating.vue' export { default as Sidebar } from './components/Sidebar/Sidebar.vue' export { default as Table } from './components/Table/Table.vue' +export { default as TableHead } from './components/Table/TableHead.vue' +export { default as TableBody } from './components/Table/TableBody.vue' +export { default as TableHeadCell } from './components/Table/TableHeadCell.vue' +export { default as TableRow } from './components/Table/TableRow.vue' +export { default as TableCell } from './components/Table/TableCell.vue' export { default as Timeline } from './components/Timeline/Timeline.vue' export { default as Toast } from './components/Toast/Toast.vue' export { default as ToastProvider } from './components/Toast/components/ToastProvider/ToastProvider.vue' From f724f2102a767160bca1618ae7c1c02810760cf6 Mon Sep 17 00:00:00 2001 From: victor Date: Tue, 13 Dec 2022 00:35:25 +0400 Subject: [PATCH 02/12] feat: added hoverable and striped states --- src/components/Table/Table.vue | 14 +++------- src/components/Table/TableRow.vue | 6 ++++- .../Table/composables/tableRowClasses.ts | 26 +++++++++++++++++++ 3 files changed, 35 insertions(+), 11 deletions(-) create mode 100644 src/components/Table/composables/tableRowClasses.ts diff --git a/src/components/Table/Table.vue b/src/components/Table/Table.vue index f3e030e..a87f9c6 100644 --- a/src/components/Table/Table.vue +++ b/src/components/Table/Table.vue @@ -6,13 +6,9 @@ diff --git a/src/components/Table/TableRow.vue b/src/components/Table/TableRow.vue index 25120fc..74df263 100644 --- a/src/components/Table/TableRow.vue +++ b/src/components/Table/TableRow.vue @@ -1,7 +1,11 @@ diff --git a/src/components/Table/composables/tableRowClasses.ts b/src/components/Table/composables/tableRowClasses.ts new file mode 100644 index 0000000..7097cef --- /dev/null +++ b/src/components/Table/composables/tableRowClasses.ts @@ -0,0 +1,26 @@ +import { computed, inject } from 'vue' +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 hoverableClasses = 'hover:bg-gray-50 dark:hover:bg-gray-600' + +export function useTableRowClasses(): { tableRowClasses: Ref } { + const isStriped = inject('striped') + const isHoverable = inject('hoverable') + + const tableRowClasses = computed(() => { + return classNames( + baseClasses, + { + [stripedClasses]: isStriped, + [hoverableClasses]: isHoverable, + }, + ) + }) + + return { + tableRowClasses, + } +} From bae7cd2c5aea28b0033008f2f9aa7139e587414d Mon Sep 17 00:00:00 2001 From: victor Date: Tue, 13 Dec 2022 00:48:38 +0400 Subject: [PATCH 03/12] doc: added doc examples --- .../table/examples/TableExample.vue | 78 ++++---- .../table/examples/TableHoverableExample.vue | 43 +++++ .../table/examples/TableStripedExample.vue | 43 +++++ docs/components/table/table.md | 170 +++++++++++++++++- src/components/Table/Table.vue | 2 +- src/components/Table/TableRow.vue | 1 - 6 files changed, 286 insertions(+), 51 deletions(-) create mode 100644 docs/components/table/examples/TableHoverableExample.vue create mode 100644 docs/components/table/examples/TableStripedExample.vue diff --git a/docs/components/table/examples/TableExample.vue b/docs/components/table/examples/TableExample.vue index 3827ab1..0258b50 100644 --- a/docs/components/table/examples/TableExample.vue +++ b/docs/components/table/examples/TableExample.vue @@ -1,44 +1,42 @@ diff --git a/docs/components/table/examples/TableStripedExample.vue b/docs/components/table/examples/TableStripedExample.vue new file mode 100644 index 0000000..bfbb7d5 --- /dev/null +++ b/docs/components/table/examples/TableStripedExample.vue @@ -0,0 +1,43 @@ + + diff --git a/docs/components/table/table.md b/docs/components/table/table.md index 1ed74e5..e97fe55 100644 --- a/docs/components/table/table.md +++ b/docs/components/table/table.md @@ -1,15 +1,167 @@ # Vue Table Component - Flowbite -```vue - - -``` +#### Button groups are a Tailwind CSS powered set of buttons sticked together in a horizontal line + +--- + +:::tip +Original reference: [https://flowbite.com/docs/components/tables/](https://flowbite.com/docs/components/tables/) +::: + +## Basic example + +```vue + + + +``` + +## Striped example + + + +```vue + + + +``` + +## Hoverable example + + + +```vue + + + +``` diff --git a/src/components/Table/Table.vue b/src/components/Table/Table.vue index a87f9c6..0385e5a 100644 --- a/src/components/Table/Table.vue +++ b/src/components/Table/Table.vue @@ -1,5 +1,5 @@ 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 { From 8b619ae08c74ce53305abc7677d1473b08f87d56 Mon Sep 17 00:00:00 2001 From: victor Date: Tue, 13 Dec 2022 20:39:40 +0400 Subject: [PATCH 06/12] fix: fixed striped rows --- src/components/Table/composables/useTableRowClasses.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Table/composables/useTableRowClasses.ts b/src/components/Table/composables/useTableRowClasses.ts index bed91c0..75209e5 100644 --- a/src/components/Table/composables/useTableRowClasses.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-800' +const stripedClasses = 'odd:bg-white even:bg-gray-50 odd:dark:bg-gray-800 even:dark:bg-gray-700' const hoverableClasses = 'hover:bg-gray-50 dark:hover:bg-gray-600' export function useTableRowClasses(): { tableRowClasses: Ref } { From 409f53e9a70c840000c947b368bc16b9570e523a Mon Sep 17 00:00:00 2001 From: Ilya Artamonov Date: Sat, 17 Dec 2022 11:45:24 +0300 Subject: [PATCH 07/12] Update package.json --- package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 4fba9f5..37d4e61 100644 --- a/package.json +++ b/package.json @@ -74,7 +74,7 @@ "tailwindcss": "^3" }, "engines": { - "node": "14.x", - "npm": "8.x" + "node": ">=14.x", + "npm": ">=6.x" } } From 8f689d393dd6acd5b9a67a45cbd980479c8c3bf4 Mon Sep 17 00:00:00 2001 From: Ilya Artamonov Date: Sat, 17 Dec 2022 12:06:07 +0300 Subject: [PATCH 08/12] fix: Fixed types --- src/components/Accordion/AccordionContent.vue | 5 ++--- src/components/Accordion/AccordionHeader.vue | 7 ++++--- src/components/Carousel/Carousel.vue | 8 +++++--- src/components/Carousel/types.ts | 4 ++++ 4 files changed, 15 insertions(+), 9 deletions(-) create mode 100644 src/components/Carousel/types.ts diff --git a/src/components/Accordion/AccordionContent.vue b/src/components/Accordion/AccordionContent.vue index 25e9274..879c1f3 100644 --- a/src/components/Accordion/AccordionContent.vue +++ b/src/components/Accordion/AccordionContent.vue @@ -15,12 +15,11 @@ import { onMounted, ref } from 'vue' const isLoaded = ref(false) const content = ref() - -let contentClasses +const contentClasses = ref('') onMounted(() => { const accordionHeaderClasses = useAccordionContentClasses(content) - contentClasses = accordionHeaderClasses.contentClasses + contentClasses.value = accordionHeaderClasses.contentClasses.value isLoaded.value = true }) diff --git a/src/components/Accordion/AccordionHeader.vue b/src/components/Accordion/AccordionHeader.vue index 4b34fc6..3fb62ce 100644 --- a/src/components/Accordion/AccordionHeader.vue +++ b/src/components/Accordion/AccordionHeader.vue @@ -34,7 +34,8 @@ const { accordionsStates } = useAccordionState() const accordionState = computed(() => accordionsStates[accordionId.value]) const panelState = computed(() => accordionState.value.panels[panelId.value]) -let headerClasses, arrowClasses +const headerClasses = ref('') +const arrowClasses = ref('') function commonToggleItem() { const isSelectedVisible = panelState.value.isVisible for (const panelIndex in accordionState.value.panels) { @@ -53,8 +54,8 @@ function toggleItem() { onMounted(() => { const accordionHeaderClasses = useAccordionHeaderClasses(header) - headerClasses = accordionHeaderClasses.headerClasses - arrowClasses = accordionHeaderClasses.arrowClasses + headerClasses.value = accordionHeaderClasses.headerClasses.value + arrowClasses.value = accordionHeaderClasses.arrowClasses.value isLoaded.value = true }) diff --git a/src/components/Carousel/Carousel.vue b/src/components/Carousel/Carousel.vue index 1da32dd..667595a 100644 --- a/src/components/Carousel/Carousel.vue +++ b/src/components/Carousel/Carousel.vue @@ -5,13 +5,13 @@
+ v-for="(picture, index) in pictures" :key="index" class="absolute inset-0 -translate-y-0">
- +