{"version":3,"file":"basic-month-table.mjs","sources":["../../../../../../../packages/components/date-picker/src/date-picker-com/basic-month-table.vue"],"sourcesContent":["<template>\r\n  <table\r\n    class=\"sg-month-table\"\r\n    @click=\"handleMonthTableClick\"\r\n    @mousemove=\"handleMouseMove\"\r\n  >\r\n    <tbody>\r\n      <tr v-for=\"(row, key) in rows\" :key=\"key\">\r\n        <td v-for=\"(cell, key_) in row\" :key=\"key_\" :class=\"getCellStyle(cell)\">\r\n          <div>\r\n            <a class=\"cell\">{{\r\n              t('sg.datepicker.months.' + months[cell.text])\r\n            }}</a>\r\n          </div>\r\n        </td>\r\n      </tr>\r\n    </tbody>\r\n  </table>\r\n</template>\r\n\r\n<script lang=\"ts\">\r\nimport { defineComponent, computed, ref } from 'vue'\r\nimport dayjs from 'dayjs'\r\nimport { useLocale } from '@sgui-plus/hooks'\r\nimport { rangeArr } from '@sgui-plus/components/time-picker'\r\nimport { hasClass } from '@sgui-plus/utils/dom'\r\nimport { coerceTruthyValueToArray } from '@sgui-plus/utils/util'\r\n\r\nimport type { PropType } from 'vue'\r\nimport type { Dayjs } from 'dayjs'\r\n\r\nconst datesInMonth = (year: number, month: number, lang: string) => {\r\n  const firstDay = dayjs().locale(lang).startOf('month').month(month).year(year)\r\n  const numOfDays = firstDay.daysInMonth()\r\n  return rangeArr(numOfDays).map((n) => firstDay.add(n, 'day').toDate())\r\n}\r\n\r\nexport default defineComponent({\r\n  props: {\r\n    disabledDate: {\r\n      type: Function as PropType<(_: Date) => void>,\r\n    },\r\n    selectionMode: {\r\n      type: String,\r\n      default: 'month',\r\n    },\r\n    minDate: {\r\n      type: Object as PropType<Dayjs>,\r\n    },\r\n    maxDate: {\r\n      type: Object as PropType<Dayjs>,\r\n    },\r\n    date: {\r\n      type: Object as PropType<Dayjs>,\r\n    },\r\n    parsedValue: {\r\n      type: Object as PropType<Dayjs>,\r\n    },\r\n    rangeState: {\r\n      type: Object,\r\n      default: () => ({\r\n        endDate: null,\r\n        selecting: false,\r\n      }),\r\n    },\r\n  },\r\n\r\n  emits: ['changerange', 'pick', 'select'],\r\n\r\n  setup(props, ctx) {\r\n    const { t, lang } = useLocale()\r\n    const months = ref(\r\n      props.date!\r\n        .locale('en')\r\n        .localeData()\r\n        .monthsShort()\r\n        .map((_) => _.toLowerCase())\r\n    )\r\n    const tableRows = ref([[], [], []])\r\n    const lastRow = ref(null)\r\n    const lastColumn = ref(null)\r\n    const rows = computed(() => {\r\n      // TODO: refactory rows / getCellClasses\r\n      const rows:any[] = tableRows.value\r\n      const now = dayjs().locale(lang.value).startOf('month')\r\n\r\n      for (let i = 0; i < 3; i++) {\r\n        const row = rows[i]\r\n        for (let j = 0; j < 4; j++) {\r\n          let cell = row[j]\r\n          if (!cell) {\r\n            cell = {\r\n              row: i,\r\n              column: j,\r\n              type: 'normal',\r\n              inRange: false,\r\n              start: false,\r\n              end: false,\r\n            }\r\n          }\r\n\r\n          cell.type = 'normal'\r\n\r\n          const index = i * 4 + j\r\n          const calTime = props.date!.startOf('year').month(index)\r\n\r\n          const calEndDate =\r\n            props.rangeState.endDate ||\r\n            props.maxDate ||\r\n            (props.rangeState.selecting && props.minDate)\r\n\r\n          cell.inRange =\r\n            (props.minDate &&\r\n              calTime.isSameOrAfter(props.minDate, 'month') &&\r\n              calEndDate &&\r\n              calTime.isSameOrBefore(calEndDate, 'month')) ||\r\n            (props.minDate &&\r\n              calTime.isSameOrBefore(props.minDate, 'month') &&\r\n              calEndDate &&\r\n              calTime.isSameOrAfter(calEndDate, 'month'))\r\n\r\n          if (props.minDate?.isSameOrAfter(calEndDate)) {\r\n            cell.start = calEndDate && calTime.isSame(calEndDate, 'month')\r\n            cell.end = props.minDate && calTime.isSame(props.minDate, 'month')\r\n          } else {\r\n            cell.start = props.minDate && calTime.isSame(props.minDate, 'month')\r\n            cell.end = calEndDate && calTime.isSame(calEndDate, 'month')\r\n          }\r\n\r\n          const isToday = now.isSame(calTime)\r\n\r\n          if (isToday) {\r\n            cell.type = 'today'\r\n          }\r\n          cell.text = index\r\n          const cellDate = calTime.toDate()\r\n          cell.disabled = props.disabledDate && props.disabledDate(cellDate)\r\n          row[j] = cell\r\n        }\r\n      }\r\n      return rows\r\n    })\r\n    const getCellStyle = (cell) => {\r\n      const style = {} as any\r\n      const year = props.date!.year()\r\n      const today = new Date()\r\n      const month = cell.text\r\n\r\n      style.disabled = props.disabledDate\r\n        ? datesInMonth(year, month, lang.value).every(props.disabledDate)\r\n        : false\r\n      style.current =\r\n        coerceTruthyValueToArray(props.parsedValue).findIndex(\r\n          (date) => date.year() === year && date.month() === month\r\n        ) >= 0\r\n      style.today = today.getFullYear() === year && today.getMonth() === month\r\n\r\n      if (cell.inRange) {\r\n        style['in-range'] = true\r\n\r\n        if (cell.start) {\r\n          style['start-date'] = true\r\n        }\r\n\r\n        if (cell.end) {\r\n          style['end-date'] = true\r\n        }\r\n      }\r\n      return style\r\n    }\r\n\r\n    const handleMouseMove = (event) => {\r\n      if (!props.rangeState.selecting) return\r\n\r\n      let target = event.target\r\n      if (target.tagName === 'A') {\r\n        target = target.parentNode.parentNode\r\n      }\r\n      if (target.tagName === 'DIV') {\r\n        target = target.parentNode\r\n      }\r\n      if (target.tagName !== 'TD') return\r\n\r\n      const row = target.parentNode.rowIndex\r\n      const column = target.cellIndex\r\n      // can not select disabled date\r\n      if (rows.value[row][column].disabled) return\r\n\r\n      // only update rangeState when mouse moves to a new cell\r\n      // this avoids frequent Date object creation and improves performance\r\n      if (row !== lastRow.value || column !== lastColumn.value) {\r\n        lastRow.value = row\r\n        lastColumn.value = column\r\n        ctx.emit('changerange', {\r\n          selecting: true,\r\n          endDate: props.date!.startOf('year').month(row * 4 + column),\r\n        })\r\n      }\r\n    }\r\n    const handleMonthTableClick = (event) => {\r\n      let target = event.target\r\n      if (target.tagName === 'A') {\r\n        target = target.parentNode.parentNode\r\n      }\r\n      if (target.tagName === 'DIV') {\r\n        target = target.parentNode\r\n      }\r\n      if (target.tagName !== 'TD') return\r\n      if (hasClass(target, 'disabled')) return\r\n      const column = target.cellIndex\r\n      const row = target.parentNode.rowIndex\r\n      const month = row * 4 + column\r\n      const newDate = props.date!.startOf('year').month(month)\r\n      if (props.selectionMode === 'range') {\r\n        if (!props.rangeState.selecting) {\r\n          ctx.emit('pick', { minDate: newDate, maxDate: null })\r\n          ctx.emit('select', true)\r\n        } else {\r\n          if (newDate >= props.minDate!) {\r\n            ctx.emit('pick', { minDate: props.minDate, maxDate: newDate })\r\n          } else {\r\n            ctx.emit('pick', { minDate: newDate, maxDate: props.minDate })\r\n          }\r\n          ctx.emit('select', false)\r\n        }\r\n      } else {\r\n        ctx.emit('pick', month)\r\n      }\r\n    }\r\n\r\n    return {\r\n      handleMouseMove,\r\n      handleMonthTableClick,\r\n      rows,\r\n      getCellStyle,\r\n      t,\r\n      months,\r\n    }\r\n  },\r\n})\r\n</script>\r\n"],"names":["_openBlock","_createElementBlock","_createElementVNode","_Fragment","_renderList","_normalizeClass"],"mappings":";;;;;AAES,SAAA,WAAA,CAAC,IAAgB,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,KAAA,EAAA,QAAA,EAAA;AACrB,EAAA,OAAAA,SAAA,EAAO,EAAAC,kBAAA,CAAA,OAAA,EAAA;AAAA,IACP,KAAA,EAAA,gBAAA;AAAA,IAAA,OAAA,EAAA,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAA,IAAA,CAAA,qBAAA,IAAA,IAAA,CAAA,qBAAA,CAAA,GAAA,IAAA,CAAA,CAAA;IAED,WAUQ,EAAA,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAA,IAAA,CAAA,eAAA,IAAA,IAAA,CAAA,eAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,GAAA,EAAA;AATN,IAAAC,kBAAA,CAAA,OAAA,EAAA,IAAA,EAAA;AAAA,OAAAF,SAAA,CAAA,IAAA,CAAA,EAAAC,kBAAA,CACEE,QAMK,EAAA,IAAA,EAAAC,UAAA,CAAA,IAAA,CANsB,IAAf,EAAA,CAAA,GAAA,EAAM,GAAI,KAAA;+CAAtB,IAMK,EAAA,EAAA,GAAA,EAAA,EAAA;AAAA,WAAAJ,SAAA,CANiC,IAAI,CAAA,EAAAC,kBAAA,CAAAE,QAAA,EAAA,IAAA,EAAAC,UAAA,CAAA,GAAA,EAAA,CAAA,IAAA,EAAA,IAAA,KAAA;AAAQ,YAAA,OAAAJ,SAAA,EAAA,EAAAC,kBAAA,CAAc,IAAK,EAAA;AAAA,cAAA,GAAA,EAAA,IAAA;cACnE,KAIM,EAAAI,cAAA,CAAA,IAAA,CAAA,YAAA,CAAA,IAAA,CAAA,CAAA;AAAA,aAAA,EAAA;;;;;;;;;;;;;;;"}