1 line
6.8 KiB
Plaintext
1 line
6.8 KiB
Plaintext
|
{"version":3,"file":"VDatePickerYears.mjs","names":["VBtn","useDate","useProxiedModel","computed","nextTick","onMounted","ref","watchEffect","convertToUnit","createRange","genericComponent","propsFactory","useRender","makeVDatePickerYearsProps","color","String","height","Number","min","max","modelValue","VDatePickerYears","name","props","emits","year","setup","_ref","slots","adapter","model","years","getYear","date","startOfYear","setYear","map","i","text","format","value","yearRef","$el","scrollIntoView","block","_createVNode","btnProps","undefined","active","rounded","variant","onClick","_mergeProps"],"sources":["../../../src/components/VDatePicker/VDatePickerYears.tsx"],"sourcesContent":["// Styles\nimport './VDatePickerYears.sass'\n\n// Components\nimport { VBtn } from '@/components/VBtn'\n\n// Composables\nimport { useDate } from '@/composables/date'\nimport { useProxiedModel } from '@/composables/proxiedModel'\n\n// Utilities\nimport { computed, nextTick, onMounted, ref, watchEffect } from 'vue'\nimport { convertToUnit, createRange, genericComponent, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\n\n// Types\nexport type VDatePickerYearsSlots = {\n year: {\n year: {\n text: string\n value: number\n }\n i: number\n props: {\n active: boolean\n color?: string\n rounded: boolean\n text: string\n variant: 'flat' | 'text'\n onClick: () => void\n }\n }\n}\n\nexport const makeVDatePickerYearsProps = propsFactory({\n color: String,\n height: [String, Number],\n min: null as any as PropType<unknown>,\n max: null as any as PropType<unknown>,\n modelValue: Number,\n}, 'VDatePickerYears')\n\nexport const VDatePickerYears = genericComponent<VDatePickerYearsSlots>()({\n name: 'VDatePickerYears',\n\n props: makeVDatePickerYearsProps(),\n\n emits: {\n 'update:modelValue': (year: number) => true,\n },\n\n setup (props, { slots }) {\n const adapter = useDate()\n const model = useProxiedModel(props, 'modelValue')\n const years = computed(() => {\n const year = adapter.getYear(adapter.date())\n\n let min = year - 100\n let max = year + 52\n\n if (props.min) {\n min = adapter.getYear(adapter.date(props.min))\n }\n\n if (props.max) {\n max = adapter.getYear(adapter.date(props.max))\n }\n\n let date = adapter.startOfYear(adapter.date())\n\n date = adapter.setYear(date, min)\n\n return createRange(max - min + 1, min).map(i => {\n const text = adapter.format(date, 'year')\n date = adapter.setYear(date, adapter.getYear(date) + 1)\n\n return {\n text,\n value: i,\n }\n })\n })\n\n watchEffect(() => {\n model.value = model.value ?? adapter.getYear(adapter.date())\n })\n\n const yearRef = ref<VBtn>()\n onMounted(async () => {\n await nextTick()\n yearRef.value?.$el.scrollIntoView({ block: 'center' })\n })\n\n useRender(() => (\n <div\n class=\"v-date-picker-years\"\n style={{\n height: convertToUnit(props.height),\n }}\n >\n <div class=\"v-date-picker-years__content\">\n { years.value.map((year, i) => {\n const btnProps = {\n ref: model.value === year.value ? yearRef : undefined,\n active: model.value === year.value,\n color: model.value === year.value ? props.color : undefined,\n rounded: true,\n text: year.text,\n variant: model.value === year.value ? 'flat' : 'text',\n onClick: () => model.value = year.value,\n } as const\n\n return slots.year?.({\n year,\n i,\n props: btnProps,\n }) ?? (\n <VBtn\n key=\"month\"\n { ...btnProps }\n />\n )\n })}\n </div>\n </div>\n ))\n\n return {}\n },\n})\n\nexport type VDatePickerYears = InstanceType<typeof VDatePicker
|