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

Merge pull request #20 from themesberg/chank1e/list-group

Browse Source 
feat: list-group
This commit is contained in:
Alexandr P
2022-07-13 16:33:05 +03:00
committed by GitHub
parent 8f882dac8e 6f6bdc9eaf
commit a788a4d1bd
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>
import DropdownPlacementExample from './examples/DropdownPlacementExample.vue';
import DropdownListGroupExample from './examples/DropdownListGroupExample.vue';
</script>
# Dropdown
@@ -38,3 +39,44 @@ import { Dropdown } from 'flowbite-vue'
```
<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>
</Button>
</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">
<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>
content
</dropdown>
<dropdown placement="right" text="Right">
<Spinner size="6" class="m-4" />

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

@@ -1,8 +1,14 @@
<template>
<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>
</template>
<script setup>
import { ListGroup } from '../../../../src/index'
import { ListGroup, ListGroupItem } from '../../../../src/index'
</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>
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>
# ListGroup
## No hover
```vue
<script setup>
import { ListGroup } from 'flowbite-vue'
import { ListGroup, ListGroupItem } from 'flowbite-vue'
</script>
<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>
```
<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>
<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">
<li class="w-full px-4 py-2 border-b border-gray-200 rounded-t-lg dark:border-gray-600">Profile</li>
<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 :class="containerClasses">
<slot />
</ul>
</template>
<script lang="ts" setup>
import { computed, toRefs } from 'vue'
import type { PropType } from 'vue'
const props = defineProps({
})
import { useListGroupClasses } from './composables/useListGroupClasses'
const { containerClasses } = useListGroupClasses()
</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

3
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 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'
export { default as Tooltip } from './components/Tooltip/Tooltip.vue'