ramon
/
vbv
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add icon, style dropdown

This commit is contained in:
Christian Cueni 2022-08-04 09:22:15 +02:00
parent 6007ad8576
commit 15adae1b30
3 changed files with 17 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
client/src/components/icons/IconSettings.vue Normal file
View File

File diff suppressed because one or more lines are too long

16
client/src/components/ui/ItDropdown.vue
View File

@ -36,19 +36,21 @@ const emit = defineEmits<{
leave-to-class="transform scale-95 opacity-0" leave-to-class="transform scale-95 opacity-0"
> >
<MenuItems <MenuItems
class="absolute left-0 mt-2 w-56 origin-top-right divide-y divide-gray-100 bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none" class="absolute left-0 mt-2 px-6 w-56 origin-top-right divide-y divide-gray-500 bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
> >
<div class="" v-for="section in listItems" :key="section"> <div class="" v-for="section in listItems" :key="section">
<div class="px-1 py-1" v-for="item in section" :key="item"> <div class="px-1 py-1" v-for="item in section" :key="item">
<MenuItem v-slot="{ active }"> <MenuItem>
<button <button
@click="$emit('select', item.data)" @click="$emit('select', item.data)"
:class="[ class="text-black group flex w-full items-center px-0 py-2 text-sm"
active ? 'bg-violet-500 text-white' : 'text-gray-900',
'group flex w-full items-center rounded-md px-2 py-2 text-sm',
]"
> >
<component v-if="item.icon" :is="item.icon"></component> <span class="inline-block pr-2">
<component
v-if="item.icon"
:is="item.icon"
></component>
</span>
{{item.title}} {{item.title}}
</button> </button>
</MenuItem> </MenuItem>

3
client/src/views/StyelGuideView.vue
View File

@ -5,6 +5,7 @@ import {Listbox, ListboxButton, ListboxOption, ListboxOptions} from '@headlessui
import ItCheckbox from '@/components/ui/ItCheckbox.vue'; import ItCheckbox from '@/components/ui/ItCheckbox.vue';
import ItDropdown from "@/components/ui/ItDropdown.vue"; import ItDropdown from "@/components/ui/ItDropdown.vue";
import IconLogout from "@/components/icons/IconLogout.vue" import IconLogout from "@/components/icons/IconLogout.vue"
import IconSettings from "@/components/icons/IconSettings.vue"
const state = reactive({ const state = reactive({
@ -42,7 +43,7 @@ const dropdownData = shallowRef([
[ [
{ {
title: 'Option 3', title: 'Option 3',
icon: null, icon: IconSettings,
data: { data: {
amount: 34 amount: 34
} }