Refactor form layout and styling

This commit is contained in:
Dede Fuji Abdul 2024-03-04 20:40:23 +07:00
parent 6748b9202e
commit afac8a545e

View File

@ -58,18 +58,15 @@ onMounted(() => {
</script>
<template>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
<label class="filter-input-label"
>Unit Induk Distribusi/Wilayah:</label
>
<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
<div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Unit Induk Distribusi/Wilayah:</label>
<Select @update:selected="setUid($event)" :data="itemsUid" :placeholder="uidPlaceholder" />
</div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
<label class="filter-input-label"
>Unit Pelaksanaan Pelayanan Pelanggan:</label
>
<div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
<Select
@update:selected="setUp3($event)"
@ -79,7 +76,7 @@ onMounted(() => {
/>
</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">Posko:</label>
<Select
@ -90,8 +87,10 @@ onMounted(() => {
/>
</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">Periode Tanggal:</label>
<DatePicker @update:date-value="(value) => (data.periode = value)" />
</div>
</div>
</template>