jaro/flowbite-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: list-group

Browse Source
This commit is contained in:
Alexandr
2022-07-13 16:30:33 +03:00
parent 8f882dac8e
commit 6f6bdc9eaf
14 changed files with 359 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
docs/guide/dropdown/dropdown.md
View File

@@ -1,5 +1,6 @@
<script setup> <script setup>
import DropdownPlacementExample from './examples/DropdownPlacementExample.vue'; import DropdownPlacementExample from './examples/DropdownPlacementExample.vue';
import DropdownListGroupExample from './examples/DropdownListGroupExample.vue';
</script> </script>
# Dropdown # Dropdown
@@ -38,3 +39,44 @@ import { Dropdown } from 'flowbite-vue'
``` ```
<DropdownPlacementExample /> <DropdownPlacementExample />
## List Group
```vue
<script setup>
import { Dropdown, ListGroup, ListGroupItem } from 'flowbite-vue'
</script>
<template>
<dropdown text="Bottom">
<list-group>
<list-group-item>
<template #prefix>
<svg class="w-4 h-4 fill-current" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z" clip-rule="evenodd"></path></svg>
</template>
Profile
</list-group-item>
<list-group-item>
<template #prefix>
<svg class="w-4 h-4 fill-current" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M5 4a1 1 0 00-2 0v7.268a2 2 0 000 3.464V16a1 1 0 102 0v-1.268a2 2 0 000-3.464V4zM11 4a1 1 0 10-2 0v1.268a2 2 0 000 3.464V16a1 1 0 102 0V8.732a2 2 0 000-3.464V4zM16 3a1 1 0 011 1v7.268a2 2 0 010 3.464V16a1 1 0 11-2 0v-1.268a2 2 0 010-3.464V4a1 1 0 011-1z"></path></svg>
</template>
Settings
</list-group-item>
<list-group-item>
<template #prefix>
<svg class="w-4 h-4 fill-current" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5 3a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2V5a2 2 0 00-2-2H5zm0 2h10v7h-2l-1 2H8l-1-2H5V5z" clip-rule="evenodd"></path></svg>
</template>
Messages
</list-group-item>
<list-group-item>
<template #prefix>
<svg class="w-4 h-4 fill-current" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M2 9.5A3.5 3.5 0 005.5 13H9v2.586l-1.293-1.293a1 1 0 00-1.414 1.414l3 3a1 1 0 001.414 0l3-3a1 1 0 00-1.414-1.414L11 15.586V13h2.5a4.5 4.5 0 10-.616-8.958 4.002 4.002 0 10-7.753 1.977A3.5 3.5 0 002 9.5zm9 3.5H9V8a1 1 0 012 0v5z" clip-rule="evenodd"></path></svg>
</template>
Download
</list-group-item>
</list-group>
</dropdown>
</template>
```
<DropdownListGroupExample />

35
docs/guide/dropdown/examples/DropdownListGroupExample.vue Normal file
View File

@@ -0,0 +1,35 @@
<template>
<div class="vp-raw inline-flex align-center gap-2 flex-wrap">
<dropdown text="Bottom">
<list-group>
<list-group-item>
<template #prefix>
<svg class="w-4 h-4 fill-current" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z" clip-rule="evenodd"></path></svg>
</template>
Profile
</list-group-item>
<list-group-item>
<template #prefix>
<svg class="w-4 h-4 fill-current" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M5 4a1 1 0 00-2 0v7.268a2 2 0 000 3.464V16a1 1 0 102 0v-1.268a2 2 0 000-3.464V4zM11 4a1 1 0 10-2 0v1.268a2 2 0 000 3.464V16a1 1 0 102 0V8.732a2 2 0 000-3.464V4zM16 3a1 1 0 011 1v7.268a2 2 0 010 3.464V16a1 1 0 11-2 0v-1.268a2 2 0 010-3.464V4a1 1 0 011-1z"></path></svg>
</template>
Settings
</list-group-item>
<list-group-item>
<template #prefix>
<svg class="w-4 h-4 fill-current" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5 3a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2V5a2 2 0 00-2-2H5zm0 2h10v7h-2l-1 2H8l-1-2H5V5z" clip-rule="evenodd"></path></svg>
</template>
Messages
</list-group-item>
<list-group-item>
<template #prefix>
<svg class="w-4 h-4 fill-current" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M2 9.5A3.5 3.5 0 005.5 13H9v2.586l-1.293-1.293a1 1 0 00-1.414 1.414l3 3a1 1 0 001.414 0l3-3a1 1 0 00-1.414-1.414L11 15.586V13h2.5a4.5 4.5 0 10-.616-8.958 4.002 4.002 0 10-7.753 1.977A3.5 3.5 0 002 9.5zm9 3.5H9V8a1 1 0 012 0v5z" clip-rule="evenodd"></path></svg>
</template>
Download
</list-group-item>
</list-group>
</dropdown>
</div>
</template>
<script setup>
import { Dropdown, Button, ListGroup, ListGroupItem } from '../../../../src/index'
</script>

15
docs/guide/dropdown/examples/DropdownPlacementExample.vue
View File

@@ -12,20 +12,7 @@
</template> </template>
</Button> </Button>
</template> </template>
<div class="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"> content
<a href="#" aria-current="true" class="block w-full px-4 py-2 text-white bg-blue-700 border-b border-gray-200 rounded-t-lg cursor-pointer dark:bg-gray-800 dark:border-gray-600">
Profile
</a>
<a href="#" class="block w-full px-4 py-2 border-b border-gray-200 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:border-gray-600 dark:hover:bg-gray-600 dark:hover:text-white dark:focus:ring-gray-500 dark:focus:text-white">
Settings
</a>
<a href="#" class="block w-full px-4 py-2 border-b border-gray-200 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:border-gray-600 dark:hover:bg-gray-600 dark:hover:text-white dark:focus:ring-gray-500 dark:focus:text-white">
Messages
</a>
<a href="#" class="block w-full px-4 py-2 rounded-b-lg 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:border-gray-600 dark:hover:bg-gray-600 dark:hover:text-white dark:focus:ring-gray-500 dark:focus:text-white">
Download
</a>
</div>
</dropdown> </dropdown>
<dropdown placement="right" text="Right"> <dropdown placement="right" text="Right">
<Spinner size="6" class="m-4" /> <Spinner size="6" class="m-4" />

10
docs/guide/listGroup/examples/ListGroupExample.vue
View File

@@ -1,8 +1,14 @@
<template> <template>
<div class="vp-raw flex flex-col"> <div class="vp-raw flex flex-col">
<ListGroup></ListGroup> <list-group>
<list-group-item :hover="false">Item 1</list-group-item>
<list-group-item :hover="false">Item 2</list-group-item>
<list-group-item :hover="false">Item 3</list-group-item>
<list-group-item :hover="false">Item 4</list-group-item>
<list-group-item :hover="false">Item 5</list-group-item>
</list-group>
</div> </div>
</template> </template>
<script setup> <script setup>
import { ListGroup } from '../../../../src/index' import { ListGroup, ListGroupItem } from '../../../../src/index'
</script> </script>

14
docs/guide/listGroup/examples/ListGroupHoverExample.vue Normal file
View File

@@ -0,0 +1,14 @@
<template>
<div class="vp-raw flex flex-col">
<list-group>
<list-group-item>Item 1</list-group-item>
<list-group-item>Item 2</list-group-item>
<list-group-item>Item 3</list-group-item>
<list-group-item>Item 4</list-group-item>
<list-group-item>Item 5</list-group-item>
</list-group>
</div>
</template>
<script setup>
import { ListGroup, ListGroupItem } from '../../../../src/index'
</script>

33
docs/guide/listGroup/examples/ListGroupHoverIconDisabledExample.vue Normal file
View File

@@ -0,0 +1,33 @@
<template>
<div class="vp-raw flex flex-col">
<list-group>
<list-group-item>
<template #prefix>
<svg class="w-4 h-4 fill-current" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z" clip-rule="evenodd"></path></svg>
</template>
Profile
</list-group-item>
<list-group-item>
<template #prefix>
<svg class="w-4 h-4 fill-current" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M5 4a1 1 0 00-2 0v7.268a2 2 0 000 3.464V16a1 1 0 102 0v-1.268a2 2 0 000-3.464V4zM11 4a1 1 0 10-2 0v1.268a2 2 0 000 3.464V16a1 1 0 102 0V8.732a2 2 0 000-3.464V4zM16 3a1 1 0 011 1v7.268a2 2 0 010 3.464V16a1 1 0 11-2 0v-1.268a2 2 0 010-3.464V4a1 1 0 011-1z"></path></svg>
</template>
Settings
</list-group-item>
<list-group-item>
<template #prefix>
<svg class="w-4 h-4 fill-current" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5 3a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2V5a2 2 0 00-2-2H5zm0 2h10v7h-2l-1 2H8l-1-2H5V5z" clip-rule="evenodd"></path></svg>
</template>
Messages
</list-group-item>
<list-group-item disabled>
<template #prefix>
<svg class="w-4 h-4 fill-current" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M2 9.5A3.5 3.5 0 005.5 13H9v2.586l-1.293-1.293a1 1 0 00-1.414 1.414l3 3a1 1 0 001.414 0l3-3a1 1 0 00-1.414-1.414L11 15.586V13h2.5a4.5 4.5 0 10-.616-8.958 4.002 4.002 0 10-7.753 1.977A3.5 3.5 0 002 9.5zm9 3.5H9V8a1 1 0 012 0v5z" clip-rule="evenodd"></path></svg>
</template>
Download
</list-group-item>
</list-group>
</div>
</template>
<script setup>
import { ListGroup, ListGroupItem } from '../../../../src/index'
</script>

33
docs/guide/listGroup/examples/ListGroupHoverIconExample.vue Normal file
View File

@@ -0,0 +1,33 @@
<template>
<div class="vp-raw flex flex-col">
<list-group>
<list-group-item>
<template #prefix>
<svg class="w-4 h-4 fill-current" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z" clip-rule="evenodd"></path></svg>
</template>
Profile
</list-group-item>
<list-group-item>
<template #prefix>
<svg class="w-4 h-4 fill-current" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M5 4a1 1 0 00-2 0v7.268a2 2 0 000 3.464V16a1 1 0 102 0v-1.268a2 2 0 000-3.464V4zM11 4a1 1 0 10-2 0v1.268a2 2 0 000 3.464V16a1 1 0 102 0V8.732a2 2 0 000-3.464V4zM16 3a1 1 0 011 1v7.268a2 2 0 010 3.464V16a1 1 0 11-2 0v-1.268a2 2 0 010-3.464V4a1 1 0 011-1z"></path></svg>
</template>
Settings
</list-group-item>
<list-group-item>
<template #prefix>
<svg class="w-4 h-4 fill-current" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5 3a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2V5a2 2 0 00-2-2H5zm0 2h10v7h-2l-1 2H8l-1-2H5V5z" clip-rule="evenodd"></path></svg>
</template>
Messages
</list-group-item>
<list-group-item>
<template #suffix>
<svg class="w-4 h-4 fill-current" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M2 9.5A3.5 3.5 0 005.5 13H9v2.586l-1.293-1.293a1 1 0 00-1.414 1.414l3 3a1 1 0 001.414 0l3-3a1 1 0 00-1.414-1.414L11 15.586V13h2.5a4.5 4.5 0 10-.616-8.958 4.002 4.002 0 10-7.753 1.977A3.5 3.5 0 002 9.5zm9 3.5H9V8a1 1 0 012 0v5z" clip-rule="evenodd"></path></svg>
</template>
Download
</list-group-item>
</list-group>
</div>
</template>
<script setup>
import { ListGroup, ListGroupItem } from '../../../../src/index'
</script>

110
docs/guide/listGroup/listGroup.md
View File

@@ -1,15 +1,121 @@
<script setup> <script setup>
import ListGroupExample from './examples/ListGroupExample.vue' import ListGroupExample from './examples/ListGroupExample.vue'
import ListGroupHoverExample from './examples/ListGroupHoverExample.vue'
import ListGroupHoverIconExample from './examples/ListGroupHoverIconExample.vue'
import ListGroupHoverIconDisabledExample from './examples/ListGroupHoverIconDisabledExample.vue'
</script> </script>
# ListGroup # ListGroup
## No hover
```vue ```vue
<script setup> <script setup>
import { ListGroup } from 'flowbite-vue' import { ListGroup, ListGroupItem } from 'flowbite-vue'
</script> </script>
<template> <template>
<ListGroup></ListGroup> <list-group>
<list-group-item :hover="false">Item 1</list-group-item>
<list-group-item :hover="false">Item 2</list-group-item>
<list-group-item :hover="false">Item 3</list-group-item>
<list-group-item :hover="false">Item 4</list-group-item>
<list-group-item :hover="false">Item 5</list-group-item>
</list-group>
</template> </template>
``` ```
<ListGroupExample /> <ListGroupExample />
## Hover
```vue
<script setup>
import { ListGroup, ListGroupItem } from 'flowbite-vue'
</script>
<template>
<list-group>
<list-group-item>Item 1</list-group-item>
<list-group-item>Item 2</list-group-item>
<list-group-item>Item 3</list-group-item>
<list-group-item>Item 4</list-group-item>
<list-group-item>Item 5</list-group-item>
</list-group>
</template>
```
<ListGroupHoverExample />
## Icon
```vue
<script setup>
import { ListGroup, ListGroupItem } from 'flowbite-vue'
</script>
<template>
<list-group>
<list-group-item>
<template #prefix>
<svg class="w-4 h-4 fill-current" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z" clip-rule="evenodd"></path></svg>
</template>
Profile
</list-group-item>
<list-group-item>
<template #prefix>
<svg class="w-4 h-4 fill-current" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M5 4a1 1 0 00-2 0v7.268a2 2 0 000 3.464V16a1 1 0 102 0v-1.268a2 2 0 000-3.464V4zM11 4a1 1 0 10-2 0v1.268a2 2 0 000 3.464V16a1 1 0 102 0V8.732a2 2 0 000-3.464V4zM16 3a1 1 0 011 1v7.268a2 2 0 010 3.464V16a1 1 0 11-2 0v-1.268a2 2 0 010-3.464V4a1 1 0 011-1z"></path></svg>
</template>
Settings
</list-group-item>
<list-group-item>
<template #prefix>
<svg class="w-4 h-4 fill-current" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5 3a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2V5a2 2 0 00-2-2H5zm0 2h10v7h-2l-1 2H8l-1-2H5V5z" clip-rule="evenodd"></path></svg>
</template>
Messages
</list-group-item>
<list-group-item>
<template #suffix>
<svg class="w-4 h-4 fill-current" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M2 9.5A3.5 3.5 0 005.5 13H9v2.586l-1.293-1.293a1 1 0 00-1.414 1.414l3 3a1 1 0 001.414 0l3-3a1 1 0 00-1.414-1.414L11 15.586V13h2.5a4.5 4.5 0 10-.616-8.958 4.002 4.002 0 10-7.753 1.977A3.5 3.5 0 002 9.5zm9 3.5H9V8a1 1 0 012 0v5z" clip-rule="evenodd"></path></svg>
</template>
Download
</list-group-item>
</list-group>
</template>
```
<ListGroupHoverIconExample />
## Disabled
```vue
<script setup>
import { ListGroup, ListGroupItem } from 'flowbite-vue'
</script>
<template>
<list-group>
<list-group-item>
<template #prefix>
<svg class="w-4 h-4 fill-current" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z" clip-rule="evenodd"></path></svg>
</template>
Profile
</list-group-item>
<list-group-item>
<template #prefix>
<svg class="w-4 h-4 fill-current" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M5 4a1 1 0 00-2 0v7.268a2 2 0 000 3.464V16a1 1 0 102 0v-1.268a2 2 0 000-3.464V4zM11 4a1 1 0 10-2 0v1.268a2 2 0 000 3.464V16a1 1 0 102 0V8.732a2 2 0 000-3.464V4zM16 3a1 1 0 011 1v7.268a2 2 0 010 3.464V16a1 1 0 11-2 0v-1.268a2 2 0 010-3.464V4a1 1 0 011-1z"></path></svg>
</template>
Settings
</list-group-item>
<list-group-item>
<template #prefix>
<svg class="w-4 h-4 fill-current" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5 3a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2V5a2 2 0 00-2-2H5zm0 2h10v7h-2l-1 2H8l-1-2H5V5z" clip-rule="evenodd"></path></svg>
</template>
Messages
</list-group-item>
<list-group-item disabled>
<template #prefix>
<svg class="w-4 h-4 fill-current" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M2 9.5A3.5 3.5 0 005.5 13H9v2.586l-1.293-1.293a1 1 0 00-1.414 1.414l3 3a1 1 0 001.414 0l3-3a1 1 0 00-1.414-1.414L11 15.586V13h2.5a4.5 4.5 0 10-.616-8.958 4.002 4.002 0 10-7.753 1.977A3.5 3.5 0 002 9.5zm9 3.5H9V8a1 1 0 012 0v5z" clip-rule="evenodd"></path></svg>
</template>
Download
</list-group-item>
</list-group>
</template>
```
<ListGroupHoverIconDisabledExample />

15
src/components/ListGroup/ListGroup.vue
View File

@@ -1,17 +1,10 @@
<template> <template>
<ul class="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"> <ul :class="containerClasses">
<li class="w-full px-4 py-2 border-b border-gray-200 rounded-t-lg dark:border-gray-600">Profile</li> <slot />
<li class="w-full px-4 py-2 border-b border-gray-200 dark:border-gray-600">Settings</li>
<li class="w-full px-4 py-2 border-b border-gray-200 dark:border-gray-600">Messages</li>
<li class="w-full px-4 py-2 rounded-b-lg">Download</li>
</ul> </ul>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { computed, toRefs } from 'vue' import { useListGroupClasses } from './composables/useListGroupClasses'
import type { PropType } from 'vue'
const props = defineProps({
})
const { containerClasses } = useListGroupClasses()
</script> </script>

30
src/components/ListGroup/components/ListGroupItem/ListGroupItem.vue Normal file
View File

@@ -0,0 +1,30 @@
<template>
<li :class="itemClasses">
<div class="mr-2" v-if="$slots.prefix">
<slot name="prefix" />
</div>
<slot />
<div class="ml-2" v-if="$slots.suffix">
<slot name="suffix" />
</div>
</li>
</template>
<script lang="ts" setup>
import {
useListGroupItemClasses,
} from './composables/useListGroupItemClasses'
import { toRefs } from 'vue'
const props = defineProps({
hover: {
type: Boolean,
default: true,
},
disabled: {
type: Boolean,
default: false,
},
})
const { itemClasses } = useListGroupItemClasses(toRefs(props))
</script>

29
src/components/ListGroup/components/ListGroupItem/composables/useListGroupItemClasses.ts Normal file
View File

@@ -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<boolean>,
disabled: Ref<boolean>,
}
export function useListGroupItemClasses(props: UseListGroupItemClassesProps): {
itemClasses: Ref<string>,
} {
const itemClasses = computed<string>(() => {
return simplifyTailwindClasses(
defaultItemClasses,
props.disabled.value ? disabledItemClasses : '',
!props.disabled.value && props.hover.value ? hoverItemClasses : '',
)
})
return {
itemClasses,
}
}

20
src/components/ListGroup/composables/useListGroupClasses.ts Normal file
View File

@@ -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<string>,
} {
const containerClasses = computed<string>(() => {
return classNames(
defaultContainerClasses,
)
})
return {
containerClasses,
}
}

0
src/components/ListGroup/types.ts Normal file
View File

1
src/index.ts
View File

@@ -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 Carousel } from './components/Carousel/Carousel.vue'
export { default as Footer } from './components/Footer/Footer.vue' export { default as Footer } from './components/Footer/Footer.vue'
export { default as ListGroup } from './components/ListGroup/ListGroup.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 Modal } from './components/Modal/Modal.vue'
export { default as Navbar } from './components/Navbar/Navbar.vue' export { default as Navbar } from './components/Navbar/Navbar.vue'
export { default as Pagination } from './components/Pagination/Pagination.vue' export { default as Pagination } from './components/Pagination/Pagination.vue'