@extclp/vexip-ui
Version:
A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good
1 lines • 4.2 kB
Source Map (JSON)
{"version":3,"file":"calendar-cell.vue2.mjs","sources":["../../../components/calendar/calendar-cell.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\nimport { useNameHelper } from '@vexip-ui/config'\nimport { toAttrValue } from '@vexip-ui/utils'\n\nimport type { PropType } from 'vue'\nimport type { LocaleConfig } from '@vexip-ui/config'\nimport type { MonthIndex, WeekIndex } from './symbol'\n\nconst props = defineProps({\n date: {\n type: Date,\n required: true\n },\n locale: {\n type: Object as PropType<LocaleConfig['calendar']>,\n required: true\n },\n selected: {\n type: Boolean,\n default: false\n },\n hovered: {\n type: Boolean,\n default: false\n },\n isPrev: {\n type: Boolean,\n default: false\n },\n isNext: {\n type: Boolean,\n default: false\n },\n isToday: {\n type: Boolean,\n default: false\n },\n disabled: {\n type: Boolean,\n default: false\n },\n inRange: {\n type: Boolean,\n default: false\n }\n})\n\nconst emit = defineEmits(['select', 'hover'])\n\ndefineSlots<{\n item: (params: {\n date: Date,\n label: string,\n selected: boolean,\n hovered: boolean,\n isPrev: boolean,\n isNext: boolean,\n isToday: boolean,\n disabled: boolean,\n inRange: boolean\n }) => any,\n default: (params: {\n date: Date,\n label: string,\n selected: boolean,\n hovered: boolean,\n isPrev: boolean,\n isNext: boolean,\n isToday: boolean,\n disabled: boolean,\n inRange: boolean\n }) => any\n}>()\n\nconst nh = useNameHelper('calendar')\n\nconst label = computed(() => {\n const label = props.locale.ariaLabel\n const year = props.date.getFullYear()\n const month = (props.date.getMonth() + 1) as MonthIndex\n const day = props.date.getDate()\n const weekDay = (props.date.getDay() || 7) as WeekIndex\n\n return `${label[`week${weekDay}`]}, ${label[`month${month}`]} ${day}, ${year}`\n})\n</script>\n\n<template>\n <div\n :class=\"nh.be('cell')\"\n role=\"gridcell\"\n :aria-selected=\"toAttrValue(selected)\"\n :aria-disabled=\"toAttrValue(disabled)\"\n @mouseenter=\"emit('hover', date)\"\n >\n <slot\n name=\"item\"\n :date=\"date\"\n :label=\"label\"\n :selected=\"selected\"\n :hovered=\"hovered\"\n :is-prev=\"isPrev\"\n :is-next=\"isNext\"\n :is-today=\"isToday\"\n :disabled=\"disabled\"\n :in-range=\"inRange\"\n >\n <div\n :class=\"{\n [nh.be('index')]: true,\n [nh.bem('index', 'selected')]: selected,\n [nh.bem('index', 'prev')]: isPrev,\n [nh.bem('index', 'next')]: isNext,\n [nh.bem('index', 'today')]: isToday,\n [nh.bem('index', 'disabled')]: disabled,\n [nh.bem('index', 'in-range')]: inRange\n }\"\n tabindex=\"0\"\n role=\"button\"\n :aria-label=\"label\"\n :aria-disabled=\"toAttrValue(disabled)\"\n @click=\"emit('select', date)\"\n @keydown.enter.prevent=\"emit('select', date)\"\n @keydown.space.prevent=\"emit('select', date)\"\n >\n <slot\n :date=\"date\"\n :label=\"label\"\n :selected=\"selected\"\n :hovered=\"hovered\"\n :is-prev=\"isPrev\"\n :is-next=\"isNext\"\n :is-today=\"isToday\"\n :disabled=\"disabled\"\n :in-range=\"inRange\"\n >\n <div :class=\"nh.be('index-inner')\">\n {{ date.getDate() }}\n </div>\n </slot>\n </div>\n </slot>\n </div>\n</template>\n"],"names":["props","__props","emit","__emit","nh","useNameHelper","label","computed","year","month","day","weekDay"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUA,UAAMA,IAAQC,GAuCRC,IAAOC,GA2BPC,IAAKC,EAAc,UAAU,GAE7BC,IAAQC,EAAS,MAAM;AACrBD,YAAAA,IAAQN,EAAM,OAAO,WACrBQ,IAAOR,EAAM,KAAK,YAAY,GAC9BS,IAAST,EAAM,KAAK,SAAa,IAAA,GACjCU,IAAMV,EAAM,KAAK,QAAQ,GACzBW,IAAWX,EAAM,KAAK,OAAY,KAAA;AAExC,aAAO,GAAGM,EAAM,OAAOK,CAAO,EAAE,CAAC,KAAKL,EAAM,QAAQG,CAAK,EAAE,CAAC,IAAIC,CAAG,KAAKF,CAAI;AAAA,IAAA,CAC7E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}