change datepicker style
This commit is contained in:
@ -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>
|
||||
|
17
src/components/Form/FiltersType/index.ts
Normal file
17
src/components/Form/FiltersType/index.ts
Normal 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'
|
@ -26,7 +26,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { defineProps, type PropType } from 'vue'
|
||||
import { type PropType } from 'vue'
|
||||
|
||||
interface Item {
|
||||
id: number;
|
||||
|
@ -151,8 +151,7 @@ onMounted(() => {
|
||||
|
||||
createDummy()
|
||||
filters.setConfig({
|
||||
type: 'type-15',
|
||||
reportButton: false
|
||||
type: 'type-1',
|
||||
})
|
||||
})
|
||||
|
||||
|
@ -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()
|
||||
|
||||
|
Reference in New Issue
Block a user