tailwind-testing #1
@@ -1,7 +1,7 @@
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
import { Listbox, ListboxButton, ListboxOptions, ListboxOption } from '@headlessui/vue'
|
||||
import testDropdown from '../components/dropdown/testDropdown.vue'
|
||||
import { Icon } from '@iconify/vue'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
@@ -10,9 +10,6 @@ export default {
|
||||
items: [{ message: 'Foo' }, { message: 'Bar' }],
|
||||
dropped: false,
|
||||
search: '',
|
||||
filter1: 'All Groups',
|
||||
|
||||
filter2: 'All Roles',
|
||||
|
||||
unitFilters: [
|
||||
{ id: 1, name: 'All Groups', disabled: false },
|
||||
@@ -23,6 +20,16 @@ export default {
|
||||
],
|
||||
|
||||
unitFilter: { id: 1, name: 'All Groups', disabled: false },
|
||||
|
||||
roleFilters: [
|
||||
{ id: 1, name: 'All Roles', disabled: false },
|
||||
{ id: 2, name: 'NCO', disabled: false },
|
||||
{ id: 3, name: 'Admin', disabled: false },
|
||||
{ id: 4, name: 'Recruiter', disabled: false },
|
||||
{ id: 5, name: 'RRC', disabled: false },
|
||||
],
|
||||
|
||||
roleFilter: { id: 1, name: 'All Roles', disabled: false },
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
@@ -30,12 +37,9 @@ export default {
|
||||
this.dropped = !this.dropped
|
||||
},
|
||||
resetFilters() {
|
||||
this.filter1 = 'All Groups'
|
||||
this.filter2 = 'All Roles'
|
||||
this.search = ''
|
||||
this.unitFilter = this.unitFilters[0];
|
||||
// this.unitFilter.id = 1
|
||||
// this.unitFilter.name = 'All Groups'
|
||||
this.roleFilter = this.roleFilters[0];
|
||||
}
|
||||
},
|
||||
components: {
|
||||
@@ -43,7 +47,7 @@ export default {
|
||||
ListboxButton,
|
||||
ListboxOption,
|
||||
ListboxOptions,
|
||||
testDropdown,
|
||||
Icon,
|
||||
},
|
||||
|
||||
}
|
||||
@@ -59,31 +63,23 @@ export default {
|
||||
<div id="searchRow">
|
||||
<input type="text" v-model="search" placeholder="Search..." />
|
||||
<div id="dropdownWrapper">
|
||||
<select v-model="filter1">
|
||||
<option>All Groups</option>
|
||||
<option>Alpha</option>
|
||||
<option>Echo</option>
|
||||
<option>HHC</option>
|
||||
<option>Recruit</option>
|
||||
</select>
|
||||
<select v-model="filter2">
|
||||
<option>All Roles</option>
|
||||
<option>NCO</option>
|
||||
<option>Admin</option>
|
||||
<option>Recruiter</option>
|
||||
<option>RRC</option>
|
||||
</select>
|
||||
|
||||
<Listbox v-model="unitFilter">
|
||||
<Listbox v-model="unitFilter" class="w-32 mx-2">
|
||||
<div class="relative">
|
||||
<ListboxButton class=" h-11 bg-gray-dark text-white px-5 rounded-md hover:bg-blue transition-all">
|
||||
{{ unitFilter.name }}
|
||||
<!-- <Icon icon="carbon:caret-down" /> -->
|
||||
<ListboxButton
|
||||
class="w-full h-full bg-gray-dark text-white px-4 rounded-md hover:bg-blue transition-all">
|
||||
|
||||
<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="bg-gray-dark last:rounded-b-md first:rounded-none fixed text-white">
|
||||
<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">
|
||||
<li :class="{ 'bg-blue': active }">
|
||||
: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>
|
||||
@@ -91,9 +87,32 @@ export default {
|
||||
</div>
|
||||
</Listbox>
|
||||
|
||||
<!-- This button needs to get finished -->
|
||||
<Listbox v-model="roleFilter" class="w-32 mx-2">
|
||||
<div class="relative">
|
||||
<ListboxButton
|
||||
class="w-full h-full bg-gray-dark text-white px-4 rounded-md hover:bg-blue transition-all">
|
||||
|
||||
<span class="block w-full text-left">{{ roleFilter.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="role in roleFilters" :key="role.id" :value="role"
|
||||
:disabled="role.disabled" v-slot="{ active, selected }"
|
||||
class="ui-active:text-white p-3 hover:last:rounded-b-md hover:bg-blue transition-colors">
|
||||
<li>
|
||||
{{ role.name }}
|
||||
</li>
|
||||
</ListboxOption>
|
||||
</ListboxOptions>
|
||||
</div>
|
||||
</Listbox>
|
||||
|
||||
<button @click="resetFilters()"
|
||||
class="bg-gray-dark hover:bg-blue text-white transition-colors duration-0.5s">Clear Filters</button>
|
||||
class="bg-gray-dark hover:bg-blue text-white transition-colors duration-0.5s rounded-md px-5 ">Clear
|
||||
Filters</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -119,7 +138,7 @@ export default {
|
||||
</table>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
<style scoped>
|
||||
.lbButton {
|
||||
background-color: var(--background-secondary);
|
||||
border: none;
|
||||
@@ -168,7 +187,6 @@ input {
|
||||
border-style: none;
|
||||
border-radius: 5px;
|
||||
width: 25vw;
|
||||
/* transition: all 0.2s ease-out; THESE TRANSITIONS ARE BROKEN*/
|
||||
}
|
||||
|
||||
/* textarea:focus, input:focus {
|
||||
@@ -226,5 +244,4 @@ th {
|
||||
background-color: var(--background-secondary);
|
||||
font-size: 18px;
|
||||
cursor: auto;
|
||||
}
|
||||
</style>
|
||||
}</style>
|
||||
Reference in New Issue
Block a user