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

Update date picker in Form FiltersType components

Browse Source
This commit is contained in:
probdg
2024-02-09 19:26:49 +07:00
parent 01e66847bf
commit 945914a48b
24 changed files with 379 additions and 266 deletions
Download Patch File Download Diff File Expand all files Collapse all files

119
src/components/Select.vue
View File

@ -1,7 +1,7 @@
<script setup lang="ts">
interface DataItem {
id: any;
name: string;
id: any
name: any
}
import { ref, computed, watch } from 'vue'
@ -29,25 +29,24 @@ const props = defineProps({
default: () => ({ id: 0, name: '' })
}
})
const emit = defineEmits(["update:selected"])
const emit = defineEmits(['update:selected'])
const data = computed(() => [{ id:0, name: props.placeholder }, ...props.data]);
const data = computed(() => [{ id: 0, name: props.placeholder }, ...props.data])
computed(() => {
if (props.selected.id === 0) {
selected.value = { id:0, name: props.placeholder }
}
console.log('selected', selected.value.name);
})
watch(() => props.selected, (value) => {
if (value.id === 0) {
selected.value = { id:0, name: props.placeholder }
selected.value = { id: 0, name: props.placeholder }
}
})
watch(
() => props.selected,
(value) => {
if (value.id === 0) {
selected.value = { id: 0, name: props.placeholder }
}
}
)
let selected = ref<DataItem>(data.value[0])
let query = ref('')
@ -55,56 +54,82 @@ let filteredData = computed(() =>
query.value === ''
? data.value
: data.value.filter((item: DataItem) =>
item.name
.toLowerCase()
.replace(/\s+/g, '')
.includes(query.value.toLowerCase().replace(/\s+/g, ''))
)
item.name
.toLowerCase()
.replace(/\s+/g, '')
.includes(query.value.toLowerCase().replace(/\s+/g, ''))
)
)
const show = ref(false)
</script>
<template>
<Combobox
@update:modelValue="value => emit('update:selected', value)"
v-model="selected" v-slot="{ open }">
<Combobox
@update:modelValue="(value) => emit('update:selected', value)"
v-model="selected"
v-slot="{ open }"
>
<div class="relative mt-1">
<div
class="relative w-full cursor-default overflow-hidden rounded-lg bg-gray-200 text-left 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 bg-gray-200 text-sm leading-5 text-gray-900 focus:ring-0"
:displayValue="(item: any) => (show || open ? '' : item.name)" @change="query = $event.target.value"
@click="show = true" @blur="show = false" defaultValue="" />
class="relative w-full cursor-default overflow-hidden rounded-lg bg-gray-200 text-left 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 bg-gray-200 text-sm leading-5 text-gray-900 focus:ring-0"
:displayValue="(item: any) => (show || open ? '' : item.name)"
@change="query = $event.target.value"
@click="show = true"
@blur="show = false"
defaultValue=""
/>
<ComboboxButton 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 static
class="absolute mt-1 z-10 max-h-60 w-full overflow-auto rounded-md bg-gray-200 py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
<div v-if="filteredData.length === 0 && query !== ''"
class="relative cursor-default select-none py-2 px-4 text-gray-700">
<TransitionRoot
:show="show || open"
leave="transition ease-in duration-100"
leaveFrom="opacity-100"
leaveTo="opacity-0"
@after-leave="query = ''"
>
<ComboboxOptions
static
class="absolute mt-1 z-10 max-h-60 w-full overflow-auto rounded-md bg-gray-200 py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
>
<div
v-if="filteredData.length === 0 && query !== ''"
class="relative cursor-default select-none py-2 px-4 text-gray-700"
>
Nothing found.
</div>
<ComboboxOption v-for="item in filteredData"
as="template" :key="item.id" :value="item"
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 }">
<ComboboxOption
v-for="item in filteredData"
as="template"
:key="item.id"
:value="item"
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 }"
>
{{ item.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 }">
<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>