defuj/apkt-eis
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

create filters components

Browse Source
This commit is contained in:
kur0nek-o
2023-10-27 09:19:37 +07:00
parent 9f1e91c253
commit 5f99a7c312
9 changed files with 412 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

150
src/assets/css/style.css
View File

@ -705,7 +705,6 @@ select {
--tw-backdrop-sepia: ;
}
<<<<<<< HEAD
.container {
width: 100%;
}
@ -738,7 +737,8 @@ select {
.container {
max-width: 1536px;
}
=======
}
/* NavBar */
.menu-item {
@ -870,7 +870,6 @@ select {
.group:hover .aside-single-item-icon-inactive {
stroke: #fff;
>>>>>>> 1885f28d62cccd232f8b53fac507e44d59bb191d
}
.sr-only {
@ -962,6 +961,10 @@ select {
top: 50%;
}
.top-16 {
top: 4rem;
}
.top-3 {
top: 0.75rem;
}
@ -1248,6 +1251,10 @@ select {
max-height: 0px;
}
.max-h-60 {
max-height: 15rem;
}
.max-h-80 {
max-height: 20rem;
}
@ -1312,6 +1319,10 @@ select {
width: 1.5rem;
}
.w-72 {
width: 18rem;
}
.w-8 {
width: 2rem;
}
@ -1533,6 +1544,14 @@ select {
gap: 0.25rem;
}
.gap-2 {
gap: 0.5rem;
}
.gap-3 {
gap: 0.75rem;
}
.gap-4 {
gap: 1rem;
}
@ -1568,6 +1587,12 @@ select {
margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}
.space-y-3 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}
.space-y-4 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
@ -1589,6 +1614,10 @@ select {
--tw-divide-opacity: 0.1;
}
.overflow-auto {
overflow: auto;
}
.overflow-hidden {
overflow: hidden;
}
@ -1615,6 +1644,10 @@ select {
border-radius: 0.25rem;
}
.rounded-2xl {
border-radius: 1rem;
}
.rounded-full {
border-radius: 9999px;
}
@ -1688,6 +1721,10 @@ select {
border-style: solid;
}
.border-none {
border-style: none;
}
.border-black\/\[\.1\] {
border-color: rgb(0 0 0 / .1);
}
@ -1702,19 +1739,11 @@ select {
border-color: rgb(209 213 219 / var(--tw-border-opacity));
}
<<<<<<< HEAD
.border-gray-50 {
--tw-border-opacity: 1;
border-color: rgb(249 250 251 / var(--tw-border-opacity));
}
.border-primary-500 {
--tw-border-opacity: 1;
border-color: rgb(3 91 113 / var(--tw-border-opacity));
}
=======
>>>>>>> 1885f28d62cccd232f8b53fac507e44d59bb191d
.border-transparent {
border-color: transparent;
}
@ -1729,6 +1758,11 @@ select {
background-color: rgb(243 244 246 / var(--tw-bg-opacity));
}
.bg-gray-200 {
--tw-bg-opacity: 1;
background-color: rgb(229 231 235 / var(--tw-bg-opacity));
}
.bg-gray-300 {
--tw-bg-opacity: 1;
background-color: rgb(209 213 219 / var(--tw-bg-opacity));
@ -1754,14 +1788,6 @@ select {
background-color: rgb(17 24 39 / var(--tw-bg-opacity));
}
<<<<<<< HEAD
.bg-green-400 {
--tw-bg-opacity: 1;
background-color: rgb(74 222 128 / var(--tw-bg-opacity));
}
=======
>>>>>>> 1885f28d62cccd232f8b53fac507e44d59bb191d
.bg-indigo-600 {
--tw-bg-opacity: 1;
background-color: rgb(79 70 229 / var(--tw-bg-opacity));
@ -1807,6 +1833,11 @@ select {
background-color: rgb(204 235 239 / var(--tw-bg-opacity));
}
.bg-teal-600 {
--tw-bg-opacity: 1;
background-color: rgb(13 148 136 / var(--tw-bg-opacity));
}
.bg-transparent {
background-color: transparent;
}
@ -1861,13 +1892,10 @@ select {
--tw-bg-opacity: 0.8;
}
<<<<<<< HEAD
.bg-none {
background-image: none;
}
=======
>>>>>>> 1885f28d62cccd232f8b53fac507e44d59bb191d
.fill-gray-400 {
fill: #9ca3af;
}
@ -1888,8 +1916,6 @@ select {
fill: #007b8d;
}
<<<<<<< HEAD
=======
.fill-white {
fill: #fff;
}
@ -1898,7 +1924,6 @@ select {
stroke: #fff;
}
>>>>>>> 1885f28d62cccd232f8b53fac507e44d59bb191d
.p-1 {
padding: 0.25rem;
}
@ -1915,6 +1940,10 @@ select {
padding: 1rem;
}
.p-5 {
padding: 1.25rem;
}
.\!px-2 {
padding-left: 0.5rem !important;
padding-right: 0.5rem !important;
@ -2020,11 +2049,6 @@ select {
padding-bottom: 1rem;
}
.py-5 {
padding-top: 1.25rem;
padding-bottom: 1.25rem;
}
.py-6 {
padding-top: 1.5rem;
padding-bottom: 1.5rem;
@ -2038,6 +2062,10 @@ select {
padding-left: 0.25rem;
}
.pl-10 {
padding-left: 2.5rem;
}
.pl-11 {
padding-left: 2.75rem;
}
@ -2046,6 +2074,10 @@ select {
padding-left: 0.75rem;
}
.pr-10 {
padding-right: 2.5rem;
}
.pr-12 {
padding-right: 3rem;
}
@ -2244,6 +2276,11 @@ select {
color: rgb(55 65 81 / var(--tw-text-opacity));
}
.text-gray-800 {
--tw-text-opacity: 1;
color: rgb(31 41 55 / var(--tw-text-opacity));
}
.text-gray-900 {
--tw-text-opacity: 1;
color: rgb(17 24 39 / var(--tw-text-opacity));
@ -2319,6 +2356,11 @@ select {
color: rgb(15 23 42 / var(--tw-text-opacity));
}
.text-teal-600 {
--tw-text-opacity: 1;
color: rgb(13 148 136 / var(--tw-text-opacity));
}
.text-vtd-primary-500 {
--tw-text-opacity: 1;
color: rgb(3 91 113 / var(--tw-text-opacity));
@ -2399,6 +2441,12 @@ select {
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-sm {
--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
@ -2580,18 +2628,11 @@ select {
color: rgb(75 85 99 / var(--tw-text-opacity));
}
<<<<<<< HEAD
.hover\:overflow-y-auto:hover {
overflow-y: auto;
}
.hover\:border-primary-500:hover {
--tw-border-opacity: 1;
border-color: rgb(3 91 113 / var(--tw-border-opacity));
}
=======
>>>>>>> 1885f28d62cccd232f8b53fac507e44d59bb191d
.hover\:bg-gray-200:hover {
--tw-bg-opacity: 1;
background-color: rgb(229 231 235 / var(--tw-bg-opacity));
@ -2771,6 +2812,29 @@ select {
outline-color: #4f46e5;
}
.focus-visible\:ring-2:focus-visible {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus-visible\:ring-white:focus-visible {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity));
}
.focus-visible\:ring-opacity-75:focus-visible {
--tw-ring-opacity: 0.75;
}
.focus-visible\:ring-offset-2:focus-visible {
--tw-ring-offset-width: 2px;
}
.focus-visible\:ring-offset-teal-300:focus-visible {
--tw-ring-offset-color: #5eead4;
}
.disabled\:cursor-not-allowed:disabled {
cursor: not-allowed;
}
@ -2795,7 +2859,6 @@ select {
background-color: rgb(53 124 141 / var(--tw-bg-opacity));
}
<<<<<<< HEAD
.disabled\:text-primary-300:disabled {
--tw-text-opacity: 1;
color: rgb(104 157 170 / var(--tw-text-opacity));
@ -2806,13 +2869,6 @@ select {
color: rgb(53 124 141 / var(--tw-text-opacity));
}
.group:hover .group-hover\:bg-primary-100 {
--tw-bg-opacity: 1;
background-color: rgb(205 222 227 / var(--tw-bg-opacity));
}
=======
>>>>>>> 1885f28d62cccd232f8b53fac507e44d59bb191d
.group:hover .group-hover\:fill-gray-500 {
fill: #6b7280;
}
@ -3313,6 +3369,10 @@ select {
width: fit-content;
}
.lg\:grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.lg\:flex-nowrap {
flex-wrap: nowrap;
}

58
src/components/Button.vue
View File

@ -1,36 +1,36 @@
<script setup lang="ts">
import { computed } from 'vue';
import { computed } from 'vue'
const props = defineProps({
type: {
type: String as () => "button" | "submit" | "reset",
default: "button",
type: String as () => 'button' | 'submit' | 'reset',
default: 'button'
},
onClick: {
type: Function as unknown as () => (payload: MouseEvent) => void,
default: () => { },
default: () => {}
},
label: {
type: String,
default: "",
default: ''
},
disabled: {
type: Boolean,
default: false,
default: false
},
isLoading: {
type: Boolean,
default: false,
default: false
},
className: {
type: String,
default: "",
default: ''
},
styleType: {
type: String as () => "filled" | "secondary" | "outline" | "text",
default: "filled"
type: String as () => 'filled' | 'secondary' | 'outline' | 'text',
default: 'filled'
}
});
})
const buttonStyle = computed(() => {
switch (props.styleType) {
@ -50,21 +50,39 @@ const buttonStyle = computed(() => {
</script>
<template>
<button :type="type" @click="onClick" :disabled="isLoading ? true : disabled"
:class="['px-3 py-2 mt-2 text-sm font-semibold w-full', buttonStyle, className]">
<button
:type="type"
@click="onClick"
:disabled="isLoading ? true : disabled"
:class="['px-3 py-2 text-sm font-semibold', buttonStyle, className]"
>
<div class="flex items-center" v-if="!isLoading">
<span class="me-1">{{ label }}</span>
<slot></slot>
</div>
<span v-else>
<center>
<svg class="animate-spin h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor"
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
</path>
<svg
class="animate-spin h-5 w-5 text-white"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
>
<circle
class="opacity-25"
cx="12"
cy="12"
r="10"
stroke="currentColor"
stroke-width="4"
></circle>
<path
class="opacity-75"
fill="currentColor"
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
></path>
</svg>
</center>
</span>
</button></template>
</button>
</template>

44
src/components/Form/Filters.vue Normal file
View File

@ -0,0 +1,44 @@
<script setup lang="ts">
// components
import Button from '@/components/Button.vue';
// icons
import {
PhArrowsCounterClockwise,
PhFileText,
PhMagnifyingGlass
} from '@phosphor-icons/vue';
defineProps({
reportButton: {
type: Boolean,
default: false
}
})
</script>
<template>
<div class="filters rounded-2xl shadow">
<form class="filter-body bg-gray-50 mx-auto space-y-3 p-4">
<slot></slot>
</form>
<div class="filter-footer px-4 py-3 bg-primary-50 flex justify-end">
<div class="filter-buttons flex gap-3 flex-wrap">
<Button label="Ulangi" style-type="outline" class-name="bg-white">
<PhArrowsCounterClockwise size="18" class="ml-1" weight="regular" />
</Button>
<Button v-if="reportButton" label="Lihat Laporan" style-type="outline" class-name="bg-white">
<PhFileText size="18" class="ml-1" weight="regular" />
</Button>
<Button label="Cari Data">
<PhMagnifyingGlass size="18" class="ml-1" weight="regular" />
</Button>
</div>
</div>
</div>
</template>

67
src/components/Form/FiltersType/Type1.vue Normal file
View File

@ -0,0 +1,67 @@
<template>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
<label class="text-gray-800 font-bold mb-2 sm:mb-0 block">Regional:</label>
<div class="relative w-full overflow-hidden rounded-lg bg-gray-200">
<select
class="w-full px-4 py-2 text-sm leading-6 placeholder:text-gray-400 text-gray-900 border-0 border-transparent rounded-lg outline-0 bg-gray-200 focus:outline-0 focus:border-0 focus:ring-0">
<option value="">Semua Regional</option>
</select>
</div>
</div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
<label class="text-gray-800 font-bold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
<div class="relative w-full overflow-hidden rounded-lg bg-gray-200">
<select
class="w-full px-4 py-2 text-sm leading-6 placeholder:text-gray-400 text-gray-900 border-0 border-transparent rounded-lg outline-0 bg-gray-200 focus:outline-0 focus:border-0 focus:ring-0">
<option value="">Semua Unit Induk Distribusi/Wilayah</option>
</select>
</div>
</div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
<label class="text-gray-800 font-bold mb-2 sm:mb-0 block">Unit Pelaksanaan Pelayanan Pelanggan:</label>
<div class="relative w-full overflow-hidden rounded-lg bg-gray-200">
<select
class="w-full px-4 py-2 text-sm leading-6 placeholder:text-gray-400 text-gray-900 border-0 border-transparent rounded-lg outline-0 bg-gray-200 focus:outline-0 focus:border-0 focus:ring-0">
<option value="">Semua Unit Pelaksanaan Pelayanan Pelanggan</option>
</select>
</div>
</div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
<label class="text-gray-800 font-bold mb-2 sm:mb-0 block">Unit Layanan Pelanggan:</label>
<div class="relative w-full overflow-hidden rounded-lg bg-gray-200">
<select
class="w-full px-4 py-2 text-sm leading-6 placeholder:text-gray-400 text-gray-900 border-0 border-transparent rounded-lg outline-0 bg-gray-200 focus:outline-0 focus:border-0 focus:ring-0">
<option value="">Semua Unit Layanan Pelanggan</option>
</select>
</div>
</div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
<label class="text-gray-800 font-bold mb-2 sm:mb-0 block">Periode:</label>
<div class="flex gap-2">
<div class="flex-1 relative w-full overflow-hidden rounded-lg bg-gray-200">
<select
class="w-full px-4 py-2 text-sm leading-6 placeholder:text-gray-400 text-gray-900 border-0 border-transparent rounded-lg outline-0 bg-gray-200 focus:outline-0 focus:border-0 focus:ring-0">
<option value="">Juli</option>
</select>
</div>
<div class="flex-1 relative w-full overflow-hidden rounded-lg bg-gray-200">
<select
class="w-full px-4 py-2 text-sm leading-6 placeholder:text-gray-400 text-gray-900 border-0 border-transparent rounded-lg outline-0 bg-gray-200 focus:outline-0 focus:border-0 focus:ring-0">
<option value="">2023</option>
</select>
</div>
</div>
</div>
</template>

61
src/components/Form/FiltersType/Type2.vue Normal file
View File

@ -0,0 +1,61 @@
<script setup lang="ts">
import { ref, watch } from 'vue'
import VueTailwindDatepicker from 'vue-tailwind-datepicker'
const dateValue = ref([])
const formatter = ref({
date: 'DD MMM YYYY',
month: 'MMM'
})
</script>
<template>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
<label class="text-gray-800 font-bold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
<div class="relative w-full overflow-hidden rounded-lg bg-gray-200">
<select
class="w-full px-4 py-2 text-sm leading-6 placeholder:text-gray-400 text-gray-900 border-0 border-transparent rounded-lg outline-0 bg-gray-200 focus:outline-0 focus:border-0 focus:ring-0">
<option value="">Semua Unit Induk Distribusi/Wilayah</option>
</select>
</div>
</div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
<label class="text-gray-800 font-bold mb-2 sm:mb-0 block">Unit Pelaksanaan Pelayanan Pelanggan:</label>
<div class="relative w-full overflow-hidden rounded-lg bg-gray-200">
<select
class="w-full px-4 py-2 text-sm leading-6 placeholder:text-gray-400 text-gray-900 border-0 border-transparent rounded-lg outline-0 bg-gray-200 focus:outline-0 focus:border-0 focus:ring-0">
<option value="">Semua Unit Pelaksanaan Pelayanan Pelanggan</option>
</select>
</div>
</div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
<label class="text-gray-800 font-bold mb-2 sm:mb-0 block">Unit Layanan Pelanggan:</label>
<div class="relative w-full overflow-hidden rounded-lg bg-gray-200">
<select
class="w-full px-4 py-2 text-sm leading-6 placeholder:text-gray-400 text-gray-900 border-0 border-transparent rounded-lg outline-0 bg-gray-200 focus:outline-0 focus:border-0 focus:ring-0">
<option value="">Semua Unit Layanan Pelanggan</option>
</select>
</div>
</div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
<label class="text-gray-800 font-bold mb-2 sm:mb-0 block">Periode Tanggal:</label>
<div class="flex-1 relative w-full rounded-lg bg-gray-200">
<vue-tailwind-datepicker
input-classes="w-full px-4 py-2 text-sm leading-6 placeholder:text-gray-400 text-gray-900 border-0 border-transparent rounded-lg outline-0 bg-gray-200 focus:outline-0 focus:border-0 focus:ring-0"
v-model="dateValue"
:formatter="formatter"
separator=" s/d "
:shortcuts="false"
:auto-apply="false"
/>
</div>
</div>
</template>

2
src/components/InputText.vue
View File

@ -46,7 +46,7 @@ const switchInputType = () => {
<div :class="['relative w-full overflow-hidden rounded-lg bg-gray-50 ', className]">
<input autocomplete="off" :type="inputType" :placeholder="placeholder" :value="value" @input="updateValue($event)"
:disabled="disabled" :readonly="readonly"
:class="['w-full px-4 py-2 text-sm leading-6 placeholder:text-gray-400 text-gray-900 border-0 border-transparent rounded-lg outline-0 bg-gray-50 focus:outline-0 focus:border-0 focus:ring-0']" />
:class="['w-full px-4 py-2 text-sm leading-6 placeholder:text-gray-400 text-gray-900 border-0 border-transparent rounded-lg outline-0 bg-gray-200 focus:outline-0 focus:border-0 focus:ring-0']" />
<span @click="switchInputType" v-if="type == 'password'"
class="absolute top-0 bottom-0 right-0 mx-3 my-auto cursor-pointer h-fit">
<svg width="20" height="20" viewBox="0 0 20 20"

1
src/main.ts
View File

@ -7,6 +7,7 @@ import App from './App.vue'
import router from './router'
const app = createApp(App)
app.use(createPinia())
app.use(router)
app.mount('#app')

5
src/router/index.ts
View File

@ -457,6 +457,11 @@ const routes: RouteRecordRaw[] = [
name: 'Login',
component: LoginView
},
{
path: '/playground',
name: 'Playground',
component: TestView
},
{
path: '/404',
name: 'Not Found',

103
src/views/TestView.vue
View File

@ -1,19 +1,96 @@
<script setup lang="ts">
import Button from '@/components/Button.vue'
import Filters from '@/components/Form/Filters.vue'
import Type2 from '@/components/Form/FiltersType/Type2.vue'
</script>
<template>
<div class="container mx-auto py-5">
<p>Default / filled</p>
<Button label="Button" className="mb-3 flex-1" />
<p>secondary</p>
<Button label="Button" styleType="secondary" className="mb-3" />
<p>outline</p>
<Button label="Button" styleType="outline" className="mb-3"/>
<p>text</p>
<Button label="Button" styleType="text" />
<div class="container h-full p-5 mx-auto">
<Filters :reportButton="true" >
<Type2/>
</Filters>
</div>
</template>
<!-- <template>
<div class="fixed top-16 w-72">
<Combobox v-model="selected" v-slot="{ open }">
<div class="relative mt-1">
<div
class="relative w-full cursor-default overflow-hidden rounded-lg bg-white text-left shadow-md focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-teal-300 sm:text-sm">
<ComboboxInput class="w-full border-none py-2 pl-3 pr-10 text-sm leading-5 text-gray-900 focus:ring-0"
:displayValue="(person: any) => (show || open) ? '' : person.name" @change="query = $event.target.value" @click="show = true" @blur="show = false" defaultValue="sasa" />
<ComboboxButton id="Test" class="absolute inset-y-0 right-0 flex items-center pr-2">
<ChevronUpDownIcon class="h-5 w-5 text-gray-400" aria-hidden="true" />
</ComboboxButton>
</div>
<TransitionRoot :show="show || open" leave="transition ease-in duration-100" leaveFrom="opacity-100" leaveTo="opacity-0"
@after-leave="query = ''">
<ComboboxOptions
class="absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
<div v-if="filteredPeople.length === 0 && query !== ''"
class="relative cursor-default select-none py-2 px-4 text-gray-700">
Nothing found.
</div>
<ComboboxOption v-for="person in filteredPeople" as="template" :key="person.id" :value="person"
v-slot="{ selected, active }">
<li class="relative cursor-default select-none py-2 pl-10 pr-4" :class="{
'bg-teal-600 text-white': active,
'text-gray-900': !active,
}">
<span class="block truncate" :class="{ 'font-medium': selected, 'font-normal': !selected }">
{{ person.name }}
</span>
<span v-if="selected" class="absolute inset-y-0 left-0 flex items-center pl-3"
:class="{ 'text-white': active, 'text-teal-600': !active }">
<CheckIcon class="h-5 w-5" aria-hidden="true" />
</span>
</li>
</ComboboxOption>
</ComboboxOptions>
</TransitionRoot>
</div>
</Combobox>
</div>
</template>
<script setup lang="ts">
import { ref, computed, onMounted, watch } from 'vue'
import {
Combobox,
ComboboxInput,
ComboboxButton,
ComboboxOptions,
ComboboxOption,
TransitionRoot,
} from '@headlessui/vue'
import { CheckIcon, ChevronUpDownIcon } from '@heroicons/vue/20/solid'
const people = [
{ id: 1, name: 'Semua Regional' },
{ id: 2, name: 'Arlene Mccoy' },
{ id: 3, name: 'Devon Webb' },
{ id: 4, name: 'Tom Cook' },
{ id: 5, name: 'Tanya Fox' },
{ id: 6, name: 'Hellen Schmidt' },
]
let selected = ref(people[0])
let query = ref('')
let filteredPeople = computed(() =>
query.value === ''
? people
: people.filter((person) =>
person.name
.toLowerCase()
.replace(/\s+/g, '')
.includes(query.value.toLowerCase().replace(/\s+/g, ''))
)
)
const show = ref(false)
</script> -->