@extclp/vexip-ui/es/components/calendar/calendar.vue2.mjs.map

A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good

{"version":3,"file":"calendar.vue2.mjs","sources":["../../../components/calendar/calendar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { Column } from '@/components/column'\nimport { NumberInput } from '@/components/number-input'\nimport { Renderer } from '@/components/renderer'\nimport { Row } from '@/components/row'\n\nimport { ref, toRef, watch } from 'vue'\n\nimport CalendarPanel from './calendar-panel.vue'\nimport { emitEvent, useLocale, useNameHelper, useProps } from '@vexip-ui/config'\nimport { calendarProps } from './props'\n\nimport type { CalendarSlots } from './symbol'\n\ndefineOptions({ name: 'Calendar' })\n\nconst _props = defineProps(calendarProps)\nconst props = useProps('calendar', _props, {\n  locale: null,\n  value: {\n    default: null,\n    static: true\n  },\n  year: () => new Date().getFullYear(),\n  month: {\n    default: () => new Date().getMonth() + 1,\n    validator: value => value > 0 && value <= 12\n  },\n  weekDays: {\n    default: null,\n    validator: value => !value || value.length === 0 || value.length === 7\n  },\n  weekStart: {\n    default: 0,\n    validator: value => value >= 0 && value < 7\n  },\n  today: {\n    default: () => new Date(),\n    validator: value => !Number.isNaN(+new Date(value))\n  },\n  disabledDate: {\n    default: () => false,\n    isFunc: true\n  },\n  slots: () => ({})\n})\n\nconst emit = defineEmits(['update:value', 'update:year', 'update:month'])\n\ndefineSlots<CalendarSlots>()\n\nconst nh = useNameHelper('calendar')\nconst locale = useLocale('calendar', toRef(props, 'locale'))\n\nconst calendarValue = ref(props.value)\nconst calendarYear = ref(props.year)\nconst calendarMonth = ref(props.month)\n\nwatch(\n  () => props.value,\n  value => {\n    calendarValue.value = value\n  }\n)\nwatch(\n  () => props.year,\n  value => {\n    calendarYear.value = value\n  }\n)\nwatch(\n  () => props.month,\n  value => {\n    calendarMonth.value = value\n  }\n)\n\ndefineExpose({ calendarValue, calendarYear, calendarMonth })\n\nfunction formatYearInput(value: number) {\n  return `${value}${locale.value.year}`\n}\n\nfunction formatMonthInput(value: number) {\n  return `${value}${locale.value.month}`\n}\n\nfunction isDisabled(date: Date) {\n  if (typeof props.disabledDate !== 'function') {\n    return true\n  }\n\n  return props.disabledDate(date)\n}\n\nfunction handleClick(date: Date) {\n  if (!isDisabled(date)) {\n    calendarValue.value = date\n  }\n\n  emitEvent(props.onSelect, date)\n  emit('update:value', date)\n}\n\nfunction handleYearChange(value: number) {\n  calendarYear.value = value\n\n  emitEvent(props.onYearChange, value, calendarMonth.value)\n  emit('update:year', value)\n}\n\nfunction handleMonthChange(value: number) {\n  calendarMonth.value = value\n\n  emitEvent(props.onMonthChange, calendarYear.value, value)\n  emit('update:month', value)\n}\n</script>\n\n<template>\n  <CalendarPanel\n    v-model:value=\"calendarValue\"\n    :inherit=\"props.inherit\"\n    :class=\"[nh.b()]\"\n    :year=\"calendarYear\"\n    :month=\"calendarMonth\"\n    :week-start=\"props.weekStart\"\n    :today=\"props.today\"\n    :disabled-date=\"props.disabledDate\"\n  >\n    <template #header>\n      <slot name=\"header\">\n        <Renderer :renderer=\"props.slots.header\">\n          <Row inherit :class=\"nh.be('header')\" align=\"middle\">\n            <Column flex=\"auto\">\n              <slot name=\"title\">\n                <Renderer :renderer=\"props.slots.title\"></Renderer>\n              </slot>\n            </Column>\n            <Column :class=\"nh.be('actions')\" flex=\"0\">\n              <NumberInput\n                :value=\"calendarYear\"\n                inherit\n                :class=\"nh.be('year-input')\"\n                :min=\"1970\"\n                :max=\"2300\"\n                :formatter=\"formatYearInput\"\n                @change=\"handleYearChange\"\n              ></NumberInput>\n              <NumberInput\n                :value=\"calendarMonth\"\n                inherit\n                :class=\"nh.be('month-input')\"\n                :min=\"1\"\n                :max=\"12\"\n                :formatter=\"formatMonthInput\"\n                @change=\"handleMonthChange\"\n              ></NumberInput>\n            </Column>\n          </Row>\n        </Renderer>\n      </slot>\n    </template>\n    <template #week=\"{ label, index, week }\">\n      <div :class=\"nh.be('week')\">\n        <slot\n          name=\"week\"\n          :label=\"label\"\n          :index=\"index\"\n          :week=\"week\"\n        >\n          <Renderer :renderer=\"props.slots.week\" :data=\"{ label, index, week }\">\n            <div :class=\"nh.be('week-value')\">\n              {{ label }}\n            </div>\n          </Renderer>\n        </slot>\n      </div>\n    </template>\n    <template #item=\"{ date, label, selected, hovered, isPrev, isNext, isToday, disabled }\">\n      <div\n        :class=\"{\n          [nh.be('date')]: true,\n          [nh.bem('date', 'selected')]: selected,\n          [nh.bem('date', 'prev')]: isPrev,\n          [nh.bem('date', 'next')]: isNext,\n          [nh.bem('date', 'today')]: isToday,\n          [nh.bem('date', 'disabled')]: disabled\n        }\"\n        tabindex=\"0\"\n        @click=\"handleClick(date)\"\n        @keydown.enter.prevent=\"handleClick(date)\"\n        @keydown.space.prevent=\"handleClick(date)\"\n      >\n        <div :class=\"nh.be('date-header')\">\n          <slot\n            name=\"date\"\n            :selected=\"selected\"\n            :hovered=\"hovered\"\n            :date=\"date\"\n            :is-prev=\"isPrev\"\n            :is-next=\"isNext\"\n            :is-today=\"isToday\"\n            :disabled=\"disabled\"\n          >\n            <Renderer\n              :renderer=\"props.slots.date\"\n              :data=\"{ selected, hovered, date, isPrev, isNext, isToday, disabled }\"\n            >\n              <div :class=\"nh.be('date-value')\" :aria-label=\"label\">\n                {{ date.getDate() }}\n              </div>\n            </Renderer>\n          </slot>\n        </div>\n        <div :class=\"nh.be('date-content')\">\n          <slot\n            name=\"content\"\n            :selected=\"selected\"\n            :hovered=\"hovered\"\n            :date=\"date\"\n            :is-prev=\"isPrev\"\n            :is-next=\"isNext\"\n            :is-today=\"isToday\"\n            :disabled=\"disabled\"\n          >\n            <Renderer\n              :renderer=\"props.slots.content\"\n              :data=\"{ selected, hovered, date, isPrev, isNext, isToday, disabled }\"\n            ></Renderer>\n          </slot>\n        </div>\n      </div>\n    </template>\n  </CalendarPanel>\n</template>\n"],"names":["props","useProps","__props","value","emit","__emit","nh","useNameHelper","locale","useLocale","toRef","calendarValue","ref","calendarYear","calendarMonth","watch","__expose","formatYearInput","formatMonthInput","isDisabled","date","handleClick","emitEvent","handleYearChange","handleMonthChange"],"mappings":";;;;;;;;;;;;;;;;;;;AAiBM,UAAAA,IAAQC,EAAS,YADRC,GAC4B;AAAA,MACzC,QAAQ;AAAA,MACR,OAAO;AAAA,QACL,SAAS;AAAA,QACT,QAAQ;AAAA,MACV;AAAA,MACA,MAAM,OAAU,oBAAA,KAAA,GAAO,YAAY;AAAA,MACnC,OAAO;AAAA,QACL,SAAS,OAAM,oBAAI,KAAK,GAAE,SAAa,IAAA;AAAA,QACvC,WAAW,CAAAC,MAASA,IAAQ,KAAKA,KAAS;AAAA,MAC5C;AAAA,MACA,UAAU;AAAA,QACR,SAAS;AAAA,QACT,WAAW,OAAS,CAACA,KAASA,EAAM,WAAW,KAAKA,EAAM,WAAW;AAAA,MACvE;AAAA,MACA,WAAW;AAAA,QACT,SAAS;AAAA,QACT,WAAW,CAAAA,MAASA,KAAS,KAAKA,IAAQ;AAAA,MAC5C;AAAA,MACA,OAAO;AAAA,QACL,SAAS,MAAM,oBAAI,KAAK;AAAA,QACxB,WAAW,OAAS,CAAC,OAAO,MAAM,CAAC,IAAI,KAAKA,CAAK,CAAC;AAAA,MACpD;AAAA,MACA,cAAc;AAAA,QACZ,SAAS,MAAM;AAAA,QACf,QAAQ;AAAA,MACV;AAAA,MACA,OAAO,OAAO,CAAC;AAAA,IAAA,CAChB,GAEKC,IAAOC,GAIPC,IAAKC,EAAc,UAAU,GAC7BC,IAASC,EAAU,YAAYC,EAAMV,GAAO,QAAQ,CAAC,GAErDW,IAAgBC,EAAIZ,EAAM,KAAK,GAC/Ba,IAAeD,EAAIZ,EAAM,IAAI,GAC7Bc,IAAgBF,EAAIZ,EAAM,KAAK;AAErC,IAAAe;AAAA,MACE,MAAMf,EAAM;AAAA,MACZ,CAASG,MAAA;AACP,QAAAQ,EAAc,QAAQR;AAAA,MAAA;AAAA,IAE1B,GACAY;AAAA,MACE,MAAMf,EAAM;AAAA,MACZ,CAASG,MAAA;AACP,QAAAU,EAAa,QAAQV;AAAA,MAAA;AAAA,IAEzB,GACAY;AAAA,MACE,MAAMf,EAAM;AAAA,MACZ,CAASG,MAAA;AACP,QAAAW,EAAc,QAAQX;AAAA,MAAA;AAAA,IAE1B,GAEAa,EAAa,EAAE,eAAAL,GAAe,cAAAE,GAAc,eAAAC,EAAA,CAAe;AAE3D,aAASG,EAAgBd,GAAe;AACtC,aAAO,GAAGA,CAAK,GAAGK,EAAO,MAAM,IAAI;AAAA,IAAA;AAGrC,aAASU,EAAiBf,GAAe;AACvC,aAAO,GAAGA,CAAK,GAAGK,EAAO,MAAM,KAAK;AAAA,IAAA;AAGtC,aAASW,EAAWC,GAAY;AAC1B,aAAA,OAAOpB,EAAM,gBAAiB,aACzB,KAGFA,EAAM,aAAaoB,CAAI;AAAA,IAAA;AAGhC,aAASC,EAAYD,GAAY;AAC3B,MAACD,EAAWC,CAAI,MAClBT,EAAc,QAAQS,IAGdE,EAAAtB,EAAM,UAAUoB,CAAI,GAC9BhB,EAAK,gBAAgBgB,CAAI;AAAA,IAAA;AAG3B,aAASG,EAAiBpB,GAAe;AACvC,MAAAU,EAAa,QAAQV,GAErBmB,EAAUtB,EAAM,cAAcG,GAAOW,EAAc,KAAK,GACxDV,EAAK,eAAeD,CAAK;AAAA,IAAA;AAG3B,aAASqB,EAAkBrB,GAAe;AACxC,MAAAW,EAAc,QAAQX,GAEtBmB,EAAUtB,EAAM,eAAea,EAAa,OAAOV,CAAK,GACxDC,EAAK,gBAAgBD,CAAK;AAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}