For some reason the last changes didnt... go?
This commit is contained in:
ajdj100
@@ -1,71 +1,32 @@
|
||||
<script>
|
||||
import { provide } from 'vue';
|
||||
import { Icon } from '@iconify/vue'
|
||||
import clickOutSide from '@mahdikhashan/vue3-click-outside'
|
||||
|
||||
export default {
|
||||
name: 'Dropdown',
|
||||
provide() {
|
||||
return {
|
||||
sharedState: this.sharedState
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
sharedState: {
|
||||
active: false
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toggle() {
|
||||
this.sharedState.active = !this.sharedState.active
|
||||
},
|
||||
away() {
|
||||
this.sharedState.active = false
|
||||
}
|
||||
},
|
||||
components: {
|
||||
Icon
|
||||
},
|
||||
props: {
|
||||
title: String
|
||||
},
|
||||
directives: {
|
||||
clickOutSide,
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div id="button" @click="toggle" v-click-out-side="away">
|
||||
<slot name="toggler">
|
||||
<button>
|
||||
<p>{{ title }}</p>
|
||||
<Icon icon="carbon:caret-down" />
|
||||
</button>
|
||||
<Listbox v-model="unitFilter" class="w-32 mx-5">
|
||||
<div class="relative">
|
||||
<ListboxButton class="w-full h-full bg-gray-dark text-white px-4 rounded-md hover:bg-blue transition-all">
|
||||
|
||||
</slot>
|
||||
|
||||
<slot />
|
||||
</div>
|
||||
<span class="block w-full text-left">{{ unitFilter.name }}</span>
|
||||
<span class="absolute inset-y-0 right-0 flex items-center pr-2">
|
||||
<Icon icon="carbon:chevron-sort" />
|
||||
</span>
|
||||
</ListboxButton>
|
||||
<ListboxOptions class="w-full bg-gray-dark last:rounded-b-md first:rounded-none absolute text-white">
|
||||
<ListboxOption v-for="unit in unitFilters" :key="unit.id" :value="unit" :disabled="unit.disabled"
|
||||
v-slot="{ active, selected }"
|
||||
class="ui-active:text-white p-3 hover:last:rounded-b-md hover:bg-blue transition-colors">
|
||||
<li>
|
||||
{{ unit.name }}
|
||||
</li>
|
||||
</ListboxOption>
|
||||
</ListboxOptions>
|
||||
</div>
|
||||
</Listbox>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
button {
|
||||
background-color: var(--background-secondary);
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
font-size: 15px;
|
||||
padding: 10px;
|
||||
padding-left: 15px;
|
||||
color: var(--white);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
<script>
|
||||
import { Listbox, ListboxButton, ListboxOption, ListboxOptions } from '@headlessui/vue'
|
||||
|
||||
export default {
|
||||
props: ['currentValue', 'values'],
|
||||
emits: ['update:currentValue']
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0 10px 0 0px;
|
||||
}
|
||||
</style>
|
||||
</script>
|
||||
@@ -1,29 +0,0 @@
|
||||
<script>
|
||||
import { inject } from 'vue';
|
||||
|
||||
export default {
|
||||
name: 'DropdownContent',
|
||||
inject: ['sharedState'],
|
||||
computed: {
|
||||
active() {
|
||||
return this.sharedState.active
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="active">
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
div {
|
||||
display: block;
|
||||
width: 10%;
|
||||
position: absolute;
|
||||
background-color: var(--background-secondary);
|
||||
border-radius: 0px 0px 10px 10px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,31 +0,0 @@
|
||||
<script>
|
||||
export default {
|
||||
name: 'dropdownItem',
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
* {
|
||||
color: var(--white);
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
div {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
div:last-child {
|
||||
border-radius: 0 0 5px 5px;
|
||||
}
|
||||
|
||||
div:hover {
|
||||
background-color: var(--accent-primary);
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -1,35 +0,0 @@
|
||||
<template>
|
||||
<Listbox v-model="selectedPerson">
|
||||
<ListboxButton>{{ selectedPerson.name }}</ListboxButton>
|
||||
<ListboxOptions>
|
||||
<ListboxOption v-for="person in people" :key="person.id" :value="person" :disabled="person.unavailable">
|
||||
{{ person.name }}
|
||||
</ListboxOption>
|
||||
</ListboxOptions>
|
||||
</Listbox>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import {
|
||||
Listbox,
|
||||
ListboxButton,
|
||||
ListboxOptions,
|
||||
ListboxOption,
|
||||
} from '@headlessui/vue'
|
||||
|
||||
const people = [
|
||||
{ id: 1, name: 'Durward Reynolds', unavailable: false },
|
||||
{ id: 2, name: 'Kenton Towne', unavailable: false },
|
||||
{ id: 3, name: 'Therese Wunsch', unavailable: false },
|
||||
{ id: 4, name: 'Benedict Kessler', unavailable: true },
|
||||
{ id: 5, name: 'Katelyn Rohan', unavailable: false },
|
||||
]
|
||||
const selectedPerson = ref(people[0])
|
||||
</script>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'testDropdown'
|
||||
}
|
||||
</script>
|
||||
@@ -111,7 +111,7 @@ export default {
|
||||
</Listbox>
|
||||
|
||||
<button @click="resetFilters()"
|
||||
class="bg-gray-dark hover:bg-blue text-white transition-colors duration-0.5s rounded-md px-5 ">Clear
|
||||
class="bg-gray-dark hover:bg-blue text-white transition-colors duration-0.5s rounded-md px-5">Clear
|
||||
Filters</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -199,10 +199,10 @@ input {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#searchRow select,
|
||||
/* #searchRow select,
|
||||
button {
|
||||
margin: 0 15px 0 0;
|
||||
}
|
||||
} */
|
||||
|
||||
#header h1 {
|
||||
color: var(--white);
|
||||
@@ -244,4 +244,5 @@ th {
|
||||
background-color: var(--background-secondary);
|
||||
font-size: 18px;
|
||||
cursor: auto;
|
||||
}</style>
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user