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

Refactor InputWithFilter and Type15 components

Browse Source
This commit is contained in:
Dede Fuji Abdul
2024-03-12 19:14:51 +07:00
parent d4ad845ac3
commit 7c284a4fea
4 changed files with 5036 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/components/Form/InputWithFilter.vue
View File

@@ -1,10 +1,10 @@
<script setup lang="ts">
import { PhMagnifyingGlass } from '@phosphor-icons/vue';
import { PhMagnifyingGlass } from '@phosphor-icons/vue'
import { type PropType } from 'vue'
interface FilterItems {
id: number;
title: string;
id: number
title: string
}
const props = defineProps({
@@ -25,29 +25,43 @@ const props = defineProps({
required: true
}
})
const emit = defineEmits(['update:keyword', 'update:filters'])
const setKeyword = (event: Event) => {
emit('update:keyword', (event.target as HTMLInputElement).value)
}
const setFilter = (event: Event) => {
emit('update:filters', (event.target as HTMLSelectElement).value)
}
</script>
<template>
<div class="relative w-full overflow-hidden rounded-lg">
<div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
<div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
<PhMagnifyingGlass size="18" class="text-gray-900" weight="regular" />
</div>
<input
@input="setKeyword"
:placeholder="placeholder"
:disabled="disabled"
:readonly="readonly"
type="text"
class="w-full px-4 py-2 pl-10 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"
class="w-full px-4 py-2 pl-10 text-sm leading-6 text-gray-900 bg-gray-200 border-0 border-transparent rounded-lg placeholder:text-gray-400 outline-0 focus:outline-0 focus:border-0 focus:ring-0"
/>
<div class="absolute inset-y-0 right-0 flex items-center">
<label for="filters" class="sr-only">filters</label>
<span class="block border border-gray-600 h-5"></span>
<span class="block h-5 border border-gray-600"></span>
<select
@change="setFilter"
id="filters"
name="filters"
class="h-full bg-gray-200 text-sm rounded-lg border-transparent py-0 pl-2 pr-7 text-gray-900 focus:outline-0 focus:border-0 focus:ring-0"
class="h-full py-0 pl-2 text-sm text-gray-900 bg-gray-200 border-transparent rounded-lg pr-7 focus:outline-0 focus:border-0 focus:ring-0"
>
<option :key="filter.id" :value="filter.id" v-for="filter in filters">{{ filter.title }}</option>
<option :key="filter.id" :value="filter.id" v-for="filter in filters">
{{ filter.title }}
</option>
</select>
</div>
</div>