From 6f6bdc9eaf950b5e4104f54aac870112686fd9d2 Mon Sep 17 00:00:00 2001 From: Alexandr Date: Wed, 13 Jul 2022 16:30:33 +0300 Subject: [PATCH] feat: list-group --- docs/guide/dropdown/dropdown.md | 42 +++++++ .../examples/DropdownListGroupExample.vue | 35 ++++++ .../examples/DropdownPlacementExample.vue | 15 +-- .../listGroup/examples/ListGroupExample.vue | 10 +- .../examples/ListGroupHoverExample.vue | 14 +++ .../ListGroupHoverIconDisabledExample.vue | 33 ++++++ .../examples/ListGroupHoverIconExample.vue | 33 ++++++ docs/guide/listGroup/listGroup.md | 110 +++++++++++++++++- src/components/ListGroup/ListGroup.vue | 15 +-- .../ListGroupItem/ListGroupItem.vue | 30 +++++ .../composables/useListGroupItemClasses.ts | 29 +++++ .../composables/useListGroupClasses.ts | 20 ++++ src/components/ListGroup/types.ts | 0 src/index.ts | 3 +- 14 files changed, 359 insertions(+), 30 deletions(-) create mode 100644 docs/guide/dropdown/examples/DropdownListGroupExample.vue create mode 100644 docs/guide/listGroup/examples/ListGroupHoverExample.vue create mode 100644 docs/guide/listGroup/examples/ListGroupHoverIconDisabledExample.vue create mode 100644 docs/guide/listGroup/examples/ListGroupHoverIconExample.vue create mode 100644 src/components/ListGroup/components/ListGroupItem/ListGroupItem.vue create mode 100644 src/components/ListGroup/components/ListGroupItem/composables/useListGroupItemClasses.ts create mode 100644 src/components/ListGroup/composables/useListGroupClasses.ts create mode 100644 src/components/ListGroup/types.ts diff --git a/docs/guide/dropdown/dropdown.md b/docs/guide/dropdown/dropdown.md index 6d5a043..8b32b8e 100644 --- a/docs/guide/dropdown/dropdown.md +++ b/docs/guide/dropdown/dropdown.md @@ -1,5 +1,6 @@ # Dropdown @@ -38,3 +39,44 @@ import { Dropdown } from 'flowbite-vue' ``` + + +## List Group + +```vue + + +``` + + diff --git a/docs/guide/dropdown/examples/DropdownListGroupExample.vue b/docs/guide/dropdown/examples/DropdownListGroupExample.vue new file mode 100644 index 0000000..74dd179 --- /dev/null +++ b/docs/guide/dropdown/examples/DropdownListGroupExample.vue @@ -0,0 +1,35 @@ + + diff --git a/docs/guide/dropdown/examples/DropdownPlacementExample.vue b/docs/guide/dropdown/examples/DropdownPlacementExample.vue index 3714ebd..afe70f7 100644 --- a/docs/guide/dropdown/examples/DropdownPlacementExample.vue +++ b/docs/guide/dropdown/examples/DropdownPlacementExample.vue @@ -12,20 +12,7 @@ -
- - Profile - - - Settings - - - Messages - - - Download - -
+ content diff --git a/docs/guide/listGroup/examples/ListGroupExample.vue b/docs/guide/listGroup/examples/ListGroupExample.vue index d61689b..b5879d2 100644 --- a/docs/guide/listGroup/examples/ListGroupExample.vue +++ b/docs/guide/listGroup/examples/ListGroupExample.vue @@ -1,8 +1,14 @@ diff --git a/docs/guide/listGroup/examples/ListGroupHoverExample.vue b/docs/guide/listGroup/examples/ListGroupHoverExample.vue new file mode 100644 index 0000000..76d123d --- /dev/null +++ b/docs/guide/listGroup/examples/ListGroupHoverExample.vue @@ -0,0 +1,14 @@ + + diff --git a/docs/guide/listGroup/examples/ListGroupHoverIconDisabledExample.vue b/docs/guide/listGroup/examples/ListGroupHoverIconDisabledExample.vue new file mode 100644 index 0000000..87d5957 --- /dev/null +++ b/docs/guide/listGroup/examples/ListGroupHoverIconDisabledExample.vue @@ -0,0 +1,33 @@ + + diff --git a/docs/guide/listGroup/examples/ListGroupHoverIconExample.vue b/docs/guide/listGroup/examples/ListGroupHoverIconExample.vue new file mode 100644 index 0000000..e13fc54 --- /dev/null +++ b/docs/guide/listGroup/examples/ListGroupHoverIconExample.vue @@ -0,0 +1,33 @@ + + diff --git a/docs/guide/listGroup/listGroup.md b/docs/guide/listGroup/listGroup.md index 44bc41c..139512a 100644 --- a/docs/guide/listGroup/listGroup.md +++ b/docs/guide/listGroup/listGroup.md @@ -1,15 +1,121 @@ + # ListGroup + +## No hover ```vue ``` + +## Hover +```vue + + +``` + + + +## Icon + +```vue + + +``` + + + +## Disabled + +```vue + + +``` + + diff --git a/src/components/ListGroup/ListGroup.vue b/src/components/ListGroup/ListGroup.vue index 9fd1abb..c63dab4 100644 --- a/src/components/ListGroup/ListGroup.vue +++ b/src/components/ListGroup/ListGroup.vue @@ -1,17 +1,10 @@ diff --git a/src/components/ListGroup/components/ListGroupItem/ListGroupItem.vue b/src/components/ListGroup/components/ListGroupItem/ListGroupItem.vue new file mode 100644 index 0000000..9cc5e1c --- /dev/null +++ b/src/components/ListGroup/components/ListGroupItem/ListGroupItem.vue @@ -0,0 +1,30 @@ + + diff --git a/src/components/ListGroup/components/ListGroupItem/composables/useListGroupItemClasses.ts b/src/components/ListGroup/components/ListGroupItem/composables/useListGroupItemClasses.ts new file mode 100644 index 0000000..2ca0a75 --- /dev/null +++ b/src/components/ListGroup/components/ListGroupItem/composables/useListGroupItemClasses.ts @@ -0,0 +1,29 @@ +import { computed } from 'vue' +import type { Ref } from 'vue' +import { simplifyTailwindClasses } from '../../../../../utils/simplifyTailwindClasses' + +const defaultItemClasses = 'inline-flex items-center w-full px-4 py-2 border-b border-gray-200 dark:border-gray-600' +const hoverItemClasses = 'block w-full px-4 py-2 cursor-pointer hover:bg-gray-100 hover:text-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:hover:bg-gray-600 dark:hover:text-white dark:focus:ring-gray-500 dark:focus:text-white' +const disabledItemClasses = 'bg-gray-100 cursor-not-allowed dark:bg-gray-600 dark:text-gray-400' + +export type UseListGroupItemClassesProps = { + hover: Ref, + disabled: Ref, +} + +export function useListGroupItemClasses(props: UseListGroupItemClassesProps): { + itemClasses: Ref, +} { + + const itemClasses = computed(() => { + return simplifyTailwindClasses( + defaultItemClasses, + props.disabled.value ? disabledItemClasses : '', + !props.disabled.value && props.hover.value ? hoverItemClasses : '', + ) + }) + + return { + itemClasses, + } +} diff --git a/src/components/ListGroup/composables/useListGroupClasses.ts b/src/components/ListGroup/composables/useListGroupClasses.ts new file mode 100644 index 0000000..d27c365 --- /dev/null +++ b/src/components/ListGroup/composables/useListGroupClasses.ts @@ -0,0 +1,20 @@ +import { computed } from 'vue' +import type { Ref } from 'vue' +import classNames from 'classnames' + +const defaultContainerClasses = 'overflow-hidden w-48 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg dark:bg-gray-700 dark:border-gray-600 dark:text-white' + +export function useListGroupClasses(): { + containerClasses: Ref, +} { + + const containerClasses = computed(() => { + return classNames( + defaultContainerClasses, + ) + }) + + return { + containerClasses, + } +} diff --git a/src/components/ListGroup/types.ts b/src/components/ListGroup/types.ts new file mode 100644 index 0000000..e69de29 diff --git a/src/index.ts b/src/index.ts index 322eaa4..d4f24ee 100644 --- a/src/index.ts +++ b/src/index.ts @@ -14,6 +14,7 @@ export { default as Card } from './components/Card/Card.vue' export { default as Carousel } from './components/Carousel/Carousel.vue' export { default as Footer } from './components/Footer/Footer.vue' export { default as ListGroup } from './components/ListGroup/ListGroup.vue' +export { default as ListGroupItem } from './components/ListGroup/components/ListGroupItem/ListGroupItem.vue' export { default as Modal } from './components/Modal/Modal.vue' export { default as Navbar } from './components/Navbar/Navbar.vue' export { default as Pagination } from './components/Pagination/Pagination.vue' @@ -23,4 +24,4 @@ export { default as Sidebar } from './components/Sidebar/Sidebar.vue' export { default as Table } from './components/Table/Table.vue' export { default as Timeline } from './components/Timeline/Timeline.vue' export { default as Toast } from './components/Toast/Toast.vue' -export { default as Tooltip } from './components/Tooltip/Tooltip.vue' \ No newline at end of file +export { default as Tooltip } from './components/Tooltip/Tooltip.vue'