{"version":3,"file":"date-table.mjs","sources":["../../../../../../packages/components/calendar/src/date-table.vue"],"sourcesContent":["<template>\r\n  <table\r\n    :class=\"{\r\n      'sg-calendar-table': true,\r\n      'is-range': isInRange\r\n    }\"\r\n    cellspacing=\"0\"\r\n    cellpadding=\"0\"\r\n  >\r\n    <thead v-if=\"!hideHeader\">\r\n      <th v-for=\"day in weekDays\" :key=\"day\">{{ day }}</th>\r\n    </thead>\r\n    <tbody>\r\n      <tr\r\n        v-for=\"(row, index) in rows\"\r\n        :key=\"index\"\r\n        :class=\"{\r\n          'sg-calendar-table__row': true,\r\n          'sg-calendar-table__row--hide-border': index === 0 && hideHeader\r\n        }\"\r\n      >\r\n        <td\r\n          v-for=\"(cell, key) in row\"\r\n          :key=\"key\"\r\n          :class=\"getCellClass(cell)\"\r\n          @click=\"pickDay(cell)\"\r\n        >\r\n          <div class=\"sg-calendar-day\">\r\n            <slot\r\n              name=\"dateCell\"\r\n              :data=\"getSlotData(cell)\"\r\n            >\r\n              <span>{{ cell.text }}</span>\r\n            </slot>\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 {\r\n  computed,\r\n  defineComponent,\r\n  ref,\r\n  PropType,\r\n} from 'vue'\r\nimport dayjs, { Dayjs } from 'dayjs'\r\nimport localeData from 'dayjs/plugin/localeData'\r\nimport \"dayjs/locale/zh-cn\";\r\nimport { useLocale } from '@sgui-plus/hooks'\r\nimport { rangeArr } from '@sgui-plus/components/time-picker'\r\ndayjs.extend(localeData)\r\n\r\nexport const getPrevMonthLastDays = (date: Dayjs, amount) => {\r\n  const lastDay = date.subtract(1, 'month').endOf('month').date()\r\n  return rangeArr(amount).map((_, index) => lastDay - (amount - index - 1))\r\n}\r\n\r\nexport const getMonthDays = (date: Dayjs) => {\r\n  const days = date.daysInMonth()\r\n  return rangeArr(days).map((_, index) => index + 1)\r\n}\r\n\r\nexport default defineComponent({\r\n  props: {\r\n    selectedDay: {\r\n      type: Object as PropType<Dayjs>,\r\n    },\r\n    range: {\r\n      type: Array as PropType<Array<Dayjs>>,\r\n    },\r\n    date: {\r\n      type: Object as PropType<Dayjs>,\r\n      default: {}\r\n    },\r\n    hideHeader: {\r\n      type: Boolean,\r\n    },\r\n  },\r\n  emits: ['pick'],\r\n  setup(props, ctx) {\r\n    const { lang } = useLocale()\r\n\r\n    const WEEK_DAYS = ref(dayjs().locale('zh-cn').localeData().weekdaysMin())\r\n    const now = dayjs().locale(lang.value)\r\n\r\n    // todo better way to get Day.js locale object\r\n    const firstDayOfWeek = (now as any).$locale().weekStart || 0\r\n\r\n    const toNestedArr = days => {\r\n      return rangeArr(days.length / 7).map((_, index) => {\r\n        const start = index * 7\r\n        return days.slice(start, start + 7)\r\n      })\r\n    }\r\n\r\n    const getFormattedDate = (day, type): Dayjs => {\r\n      let result\r\n      if (type === 'prev') {\r\n        result = props.date.startOf('month').subtract(1, 'month').date(day)\r\n      } else if (type === 'next') {\r\n        result = props.date.startOf('month').add(1, 'month').date(day)\r\n      } else {\r\n        result = props.date.date(day)\r\n      }\r\n      return result\r\n    }\r\n\r\n    const getCellClass = ({ text, type }) => {\r\n      const classes = [type]\r\n      if (type === 'current') {\r\n        const date_ = getFormattedDate(text, type)\r\n        if (date_.isSame(props.selectedDay, 'day')) {\r\n          classes.push('is-selected')\r\n        }\r\n        if (date_.isSame(now, 'day')) {\r\n          classes.push('is-today')\r\n        }\r\n      }\r\n      return classes\r\n    }\r\n\r\n    const pickDay = ({ text, type }) => {\r\n      const date = getFormattedDate(text, type)\r\n      ctx.emit('pick', date)\r\n    }\r\n\r\n    const getSlotData = ({ text, type }) => {\r\n      const day = getFormattedDate(text, type)\r\n      return {\r\n        isSelected: day.isSame(props.selectedDay),\r\n        type: `${type}-month`,\r\n        day: day.format('YYYY-MM-DD'),\r\n        date: day.toDate(),\r\n      }\r\n    }\r\n\r\n    const isInRange = computed(() => {\r\n      return props.range && props.range.length\r\n    })\r\n\r\n    const rows = computed(() => {\r\n      let days:any[] = []\r\n      if (isInRange.value) {\r\n        const [start, end] = new Set(props.range)\r\n        const currentMonthRange = rangeArr(\r\n          end.date() - start.date() + 1,\r\n        ).map((_, index) => ({\r\n          text: start.date() + index,\r\n          type: 'current',\r\n        }))\r\n\r\n        let remaining = currentMonthRange.length % 7\r\n        remaining = remaining === 0 ? 0 : 7 - remaining\r\n        const nextMonthRange = rangeArr(remaining).map((_, index) => ({\r\n          text: index + 1,\r\n          type: 'next',\r\n        }))\r\n        days = currentMonthRange.concat(nextMonthRange)\r\n      } else {\r\n        const firstDay = props.date.startOf('month').day() || 7\r\n        const prevMonthDays = getPrevMonthLastDays(\r\n          props.date,\r\n          firstDay - firstDayOfWeek,\r\n        ).map(day => ({\r\n          text: day,\r\n          type: 'prev',\r\n        }))\r\n        const currentMonthDays = getMonthDays(props.date).map(day => ({\r\n          text: day,\r\n          type: 'current',\r\n        }))\r\n        days = [...prevMonthDays, ...currentMonthDays]\r\n        const nextMonthDays = rangeArr(42 - days.length).map((_, index) => ({\r\n          text: index + 1,\r\n          type: 'next',\r\n        }))\r\n        days = days.concat(nextMonthDays)\r\n      }\r\n      return toNestedArr(days)\r\n    })\r\n\r\n    const weekDays = computed(() => {\r\n      const start = firstDayOfWeek\r\n\r\n      if (start === 0) {\r\n        return WEEK_DAYS.value\r\n      } else {\r\n        return WEEK_DAYS.value\r\n          .slice(start)\r\n          .concat(WEEK_DAYS.value.slice(0, start))\r\n      }\r\n    })\r\n\r\n    return {\r\n      isInRange,\r\n      weekDays,\r\n      rows,\r\n      getCellClass,\r\n      pickDay,\r\n      getSlotData,\r\n    }\r\n  },\r\n})\r\n\r\n</script>\r\n"],"names":["_normalizeClass","_openBlock","_createElementBlock","_Fragment","_renderList","_createCommentVNode","_createElementVNode","_renderSlot"],"mappings":";;;;;AA2Be,MAAA,UAAA,GAAA,EAAA,GAAA,EAAK,CAAC,EAAA,CAAA;;;AAzBX,SAAA,WAAA,CAAA,IAAA,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,KAAA,EAAA,QAAA,EAAA;;AAAyD,IAAA,KAAA,EAAAA,cAAA,CAAA;AAAA,MAAA,mBAAA,EAAA,IAAA;AAI/D,MAAA,UAAA,EAAY,IAAG,CAAA,SAAA;AAAA,KACf,CAAA;AAAA,IAAA,WAAA,EAAA,GAAA;AAEc,IAAA,WAAA,EAAA,GAAA;AAAA,GAAA,EAAA;wDACZ,OAA6B,EAAA,UAAA,EAAA;AAAA,OAAAC,SAAA,CAAA,IAAA,CAAA,EAAAC,kBAAA,CAAAC,QAAA,EAAA,IAAA,EAAAC,UAAA,CAAA,IAAA,CAAA,QAAA,EAAA,CAAA,GAAA,KAAA;;;KAG7B,CAAA,IAAAC,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA;AAAA,IAAAC,kBAAA,CAAA,OAAA,EAAA,IAAA,EAAA;AAAA,OAAAL,SAAA,CAEQ,IAAK,CAAA,EAAAC,kBAAA,CAAAC,QAAA,EAAA,IAAA,EAAAC,UAAA,CAAA,IAAA,CAAA,IAAA,EAAA,CAAA,GAAA,EAAA,KAAA,KAAA;AACL,QAAA,OAAAH,SAAA,EAAA,EAAAC,kBAAA,CAAA,IAAA,EAAA;AAAA,UAAA,GAAA,EAAA,KAAA;;;;;;AAOK,WAAAD,SAAA,CAAA,IAAA,CAAA,EAAAC,kBAAA,CAAAC,QAAA,EAAA,IAAA,EAAAC,UAAA,CAAA,GAAA,EAAA,CAAA,IAAA,EAAA,GAAA,KAAA;AACH,YAAA,OAAAH,SAAA,EAAA,EAAAC,kBAAA,CAAc,IAAK,EAAA;AAAA,cACxB,GAAA;AAAA,cAAA,KAAA,EAAAF,cAAA,CAAA,IAAA,CAAA,YAAA,CAAA,IAAA,CAAA,CAAA;AAED,cAAA,OAAA,EAAA,CAAA,MAAA,KAOM,aAPN,IAOM,CAAA;AAAA,aAAA,EAAA;AAJK,cAAAM,kBAAA,CAAA,KAAA,EAAY,UAAI,EAAA;AAAA,gBAGlBC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,UAAA,EAAA;AAAA,kBADL,IAA4B,EAAA,IAAA,CAAA,WAAA,CAAA,IAAA,CAAA;AAAA,iBAAA,EAAA,MAAA;;;;;;;;;;;;;;;"}