create filters components
This commit is contained in:
kur0nek-o
@ -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
44
src/components/Form/Filters.vue
Normal 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
67
src/components/Form/FiltersType/Type1.vue
Normal 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
61
src/components/Form/FiltersType/Type2.vue
Normal 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>
|
||||
@ -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"
|
||||
|
||||
Reference in New Issue
Block a user