change datepicker style

This commit is contained in:
kur0nek-o
2023-11-03 12:35:43 +07:00
parent f58a148bd0
commit 09d4d1a714
9 changed files with 168 additions and 145 deletions

View File

@ -1,6 +1,8 @@
<script setup lang="ts">
import { PhCalendarBlank } from '@phosphor-icons/vue';
import { ref } from 'vue'
import VueTailwindDatepicker from 'vue-tailwind-datepicker'
const dateValue = ref('')
const formatter = ref({
@ -17,17 +19,20 @@
separator=" s/d "
:shortcuts="false"
:auto-apply="false"
as-single
use-range
v-slot="{ value, placeholder }"
>
<div class="flex">
<div class="flex-1">
<button
type="button"
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"
class="w-full flex items-center justify-between 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 class="text-gray-900">
{{ value || placeholder }}
</span>
<PhCalendarBlank size="18" weight="regular"/>
</button>
</div>
</div>

View File

@ -0,0 +1,17 @@
export { default as Type1 } from '@/components/Form/FiltersType/Type1.vue'
export { default as Type2 } from '@/components/Form/FiltersType/Type2.vue'
export { default as Type3 } from '@/components/Form/FiltersType/Type3.vue'
export { default as Type4 } from '@/components/Form/FiltersType/Type4.vue'
export { default as Type5 } from '@/components/Form/FiltersType/Type5.vue'
export { default as Type6 } from '@/components/Form/FiltersType/Type6.vue'
export { default as Type7 } from '@/components/Form/FiltersType/Type7.vue'
export { default as Type8 } from '@/components/Form/FiltersType/Type8.vue'
export { default as Type9 } from '@/components/Form/FiltersType/Type9.vue'
export { default as Type10 } from '@/components/Form/FiltersType/Type10.vue'
export { default as Type11 } from '@/components/Form/FiltersType/Type11.vue'
export { default as Type12 } from '@/components/Form/FiltersType/Type12.vue'
export { default as Type13 } from '@/components/Form/FiltersType/Type13.vue'
export { default as Type14 } from '@/components/Form/FiltersType/Type14.vue'
export { default as Type15 } from '@/components/Form/FiltersType/Type15.vue'
export { default as Type16 } from '@/components/Form/FiltersType/Type16.vue'
export { default as Type17 } from '@/components/Form/FiltersType/Type17.vue'

View File

@ -26,7 +26,7 @@
</template>
<script setup lang="ts">
import { defineProps, type PropType } from 'vue'
import { type PropType } from 'vue'
interface Item {
id: number;

View File

@ -151,8 +151,7 @@ onMounted(() => {
createDummy()
filters.setConfig({
type: 'type-15',
reportButton: false
type: 'type-1',
})
})

View File

@ -5,23 +5,8 @@
<h1 class="text-xl font-medium md:text-3xl text-dark">{{ pageTitle }}</h1>
</div>
<div class="flex-1 mt-2 sm:mt-4 dx-viewport">
<Filters :report-button="filters.config.reportButton" class="mb-4" v-if="filters.config.type">
<Type1 v-if="filters.config.type == 'type-1'" />
<Type2 v-else-if="filters.config.type == 'type-2'" />
<Type3 v-else-if="filters.config.type == 'type-3'" />
<Type4 v-else-if="filters.config.type == 'type-4'" />
<Type5 v-else-if="filters.config.type == 'type-5'" />
<Type6 v-else-if="filters.config.type == 'type-6'" />
<Type7 v-else-if="filters.config.type == 'type-7'" />
<Type8 v-else-if="filters.config.type == 'type-8'" />
<Type9 v-else-if="filters.config.type == 'type-9'" />
<Type10 v-else-if="filters.config.type == 'type-10'" />
<Type11 v-else-if="filters.config.type == 'type-11'" />
<Type12 v-else-if="filters.config.type == 'type-12'" />
<Type13 v-else-if="filters.config.type == 'type-13'" />
<Type14 v-else-if="filters.config.type == 'type-14'" />
<Type15 v-else-if="filters.config.type == 'type-15'" />
<Type17 v-else-if="filters.config.type == 'type-17'" />
<Filters :report-button="filters.config.reportButton" class="mb-4" v-if="filters.config.component">
<component :is="filters.config.component" />
</Filters>
<slot></slot>
@ -32,26 +17,10 @@
<script setup lang="ts">
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import Filters from '../Form/Filters.vue'
import Type1 from '../Form/FiltersType/Type1.vue';
import Type2 from '../Form/FiltersType/Type2.vue';
import Type3 from '../Form/FiltersType/Type3.vue';
import Type4 from '../Form/FiltersType/Type4.vue';
import Type5 from '../Form/FiltersType/Type5.vue';
import Type6 from '../Form/FiltersType/Type6.vue';
import Type7 from '../Form/FiltersType/Type7.vue';
import Type8 from '../Form/FiltersType/Type8.vue';
import Type9 from '../Form/FiltersType/Type9.vue';
import Type10 from '../Form/FiltersType/Type10.vue';
import Type11 from '../Form/FiltersType/Type11.vue';
import Type12 from '../Form/FiltersType/Type12.vue';
import Type13 from '../Form/FiltersType/Type13.vue';
import Type14 from '../Form/FiltersType/Type14.vue';
import Type15 from '../Form/FiltersType/Type15.vue';
import Type16 from '../Form/FiltersType/Type16.vue';
import Type17 from '../Form/FiltersType/Type17.vue';
import { useFiltersStore } from '@/stores/filters';
import Filters from '../Form/Filters.vue'
// Dapatkan objek route dari vue-router
const route = useRoute()