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

Refactor form layout and styling

Browse Source
This commit is contained in:
Dede Fuji Abdul 2024-03-04 20:40:23 +07:00
parent 6748b9202e
commit afac8a545e
1 changed files with 33 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -58,40 +58,39 @@ onMounted(() => {
</script> </script>
<template> <template>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center"> <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
<label class="filter-input-label" <div class="flex flex-col flex-1 space-y-2">
>Unit Induk Distribusi/Wilayah:</label <label class="filter-input-label">Unit Induk Distribusi/Wilayah:</label>
>
<Select @update:selected="setUid($event)" :data="itemsUid" :placeholder="uidPlaceholder" /> <Select @update:selected="setUid($event)" :data="itemsUid" :placeholder="uidPlaceholder" />
</div> </div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center"> <div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label" <label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
>Unit Pelaksanaan Pelayanan Pelanggan:</label
> <Select
@update:selected="setUp3($event)"
<Select :data="itemsUp3"
@update:selected="setUp3($event)" :selected="up3"
:data="itemsUp3" :placeholder="up3placeholder"
:selected="up3" />
:placeholder="up3placeholder" </div>
/>
</div> <div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Posko:</label>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
<label class="filter-input-label">Posko:</label> <Select
@update:selected="setPosko($event)"
<Select :data="itemsPosko"
@update:selected="setPosko($event)" :selected="posko"
:data="itemsPosko" :placeholder="poskoPlaceholder"
:selected="posko" />
:placeholder="poskoPlaceholder" </div>
/>
</div> <div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Periode Tanggal:</label>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center"> <DatePicker @update:date-value="(value) => (data.periode = value)" />
<label class="filter-input-label">Periode Tanggal:</label> </div>
<DatePicker @update:date-value="(value) => (data.periode = value)" />
</div> </div>
</template> </template>