hy-app 0.2.13 → 0.2.15

package/components/hy-calendar/hy-calendar.vue

@@ -65,29 +65,184 @@
 </template>
 
 <script lang="ts">
+/**
+ * 用于单个选择日期，范围选择日期等，日历被包裹在底部弹起的容器中。
+ * @displayName hy-calendar
+ */
+defineOptions({})
 export default {
-  name: "hy-calendar",
+  name: 'hy-calendar',
   options: {
     virtualHost: true,
-    styleIsolation: "shared",
+    styleIsolation: 'shared',
   },
-};
+}
 </script>
 <script setup lang="ts">
-import type IProps from "./typing";
-import defaultProps from "./props";
-import { computed, nextTick, onMounted, ref, toRefs, watch } from "vue";
-import { addUnit, error, isNumericString, padZero, range } from "../../utils";
-import Calendar from "../../utils/calendar.js";
-import dayjs from "dayjs/esm";
+import type { ICalendarEmit } from './typing'
+import { computed, nextTick, onMounted, type PropType, ref, toRefs, watch } from 'vue'
+import { addUnit, error, isNumericString, padZero, range } from '../../utils'
+import Calendar from '../../utils/calendar.js'
+import dayjs from 'dayjs/esm'
 
 // 组件
-import HyMount from "./month.vue";
-import HyHeader from "./header.vue";
-import HyPopup from "../hy-popup/hy-popup.vue";
-import HyButton from "../hy-button/hy-button.vue";
+import HyMount from './month.vue'
+import HyHeader from './header.vue'
+import HyPopup from '../hy-popup/hy-popup.vue'
+import HyButton from '../hy-button/hy-button.vue'
 
-const props = withDefaults(defineProps<IProps>(), defaultProps);
+// const props = withDefaults(defineProps<IProps>(), defaultProps);
+const props = defineProps({
+  /** 是否显示日历弹窗 */
+  show: {
+    type: Boolean,
+    default: false,
+    required: true,
+  },
+  /** 标题内容 */
+  title: {
+    type: String,
+    default: '日期选选择',
+  },
+  /** 是否显示标题 */
+  showTitle: {
+    type: Boolean,
+    default: true,
+  },
+  /** 是否显示副标题 */
+  showSubtitle: {
+    type: Boolean,
+    default: true,
+  },
+  /**
+   * 日期类型选择
+   * @values single,range,multiple
+   * */
+  mode: {
+    type: String,
+    default: 'single',
+  },
+  /** mode=range时，第一个日期底部的提示文字 */
+  startText: {
+    type: String,
+    default: '开始',
+  },
+  /** mode=range时，最后一个日期底部的提示文字 */
+  endText: {
+    type: String,
+    default: '结束',
+  },
+  /** 自定义列表 */
+  customList: {
+    type: Array as unknown as any[],
+    default: [],
+  },
+  /** 主题色，对底部按钮和选中日期有效 */
+  color: String,
+  /** 最小的可选日期 */
+  minDate: {
+    type: Number,
+    default: 0,
+  },
+  /** 最大可选日期 */
+  maxDate: {
+    type: Number,
+    default: 0,
+  },
+  /** 默认选中的日期，mode为multiple或range是必须为数组格式 */
+  defaultDate: [Date, String, Array<string>],
+  /** mode=multiple时，最多可选多少个日期 */
+  maxCount: {
+    type: Number,
+    default: Number.MAX_SAFE_INTEGER,
+  },
+  /** 日期行高 */
+  rowHeight: {
+    type: Number,
+    default: 56,
+  },
+  /** 日期格式化函数 */
+  formatter: {
+    type: Function as PropType<(date: Date) => string>,
+  },
+  /** 是否显示农历 */
+  showLunar: {
+    type: Boolean,
+    default: false,
+  },
+  /** 是否显示月份背景色 */
+  showMark: {
+    type: Boolean,
+    default: true,
+  },
+  /** 确定按钮的文字 */
+  confirmText: {
+    type: String,
+    default: '确定',
+  },
+  /** 确认按钮处于禁用状态时的文字 */
+  confirmDisabledText: {
+    type: String,
+    default: '确定',
+  },
+  /** 是否允许点击遮罩关闭日历 */
+  closeOnClickOverlay: {
+    type: Boolean,
+    default: false,
+  },
+  /** 是否为只读状态，只读状态下禁止选择日期 */
+  readonly: {
+    type: Boolean,
+    default: false,
+  },
+  /** 是否展示确认按钮 */
+  showConfirm: {
+    type: Boolean,
+    default: true,
+  },
+  /** 日期区间最多可选天数，默认无限制，mode = range时有效 */
+  maxRange: {
+    type: Number,
+    default: Number.MAX_SAFE_INTEGER,
+  },
+  /** 范围选择超过最多可选天数时的提示文案，mode = range时有效 */
+  rangePrompt: String,
+  /** 范围选择超过最多可选天数时，是否展示提示文案，mode = range时有效 */
+  showRangePrompt: {
+    type: Boolean,
+    default: true,
+  },
+  /** 是否允许日期范围的起止时间为同一天，mode = range时有效 */
+  allowSameDay: {
+    type: Boolean,
+    default: false,
+  },
+  /** 圆角值，默认无圆角 */
+  round: {
+    type: Number,
+    default: 0,
+  },
+  /** 最多展示的月份数量 */
+  monthNum: {
+    type: Number,
+    default: 3,
+  },
+  /** 星期文案 */
+  weekText: {
+    type: Array as unknown as string[],
+    default: ['一', '二', '三', '四', '五', '六', '日'],
+  },
+  /** 单选与多选禁止选中的日期列表，mode!=range时有效。 */
+  forbidDays: {
+    type: Array as unknown as Date[],
+    default: [],
+  },
+  /** 单选与多选禁止选中的日期选择时提示 */
+  forbidDaysToast: {
+    type: String,
+    default: '该日期已禁用',
+  },
+})
 const {
   show,
   maxDate,
@@ -99,37 +254,37 @@ const {
   monthNum,
   formatter,
   showLunar,
-} = toRefs(props);
-const emit = defineEmits(["confirm", "change", "close"]);
+} = toRefs(props)
+const emit = defineEmits<ICalendarEmit>(['confirm', 'close'])
 
 // 需要显示的月份的数组
-const months = ref<any[]>([]);
+const months = ref<any[]>([])
 // 在月份滚动区域中，当前视图中月份的index索引
-const monthIndex = ref(0);
+const monthIndex = ref(0)
 // 月份滚动区域的高度
-const listHeight = ref(0);
+const listHeight = ref(0)
 // month组件中选择的日期数组
-const selected = ref<string[]>([]);
-const scrollIntoView = ref("");
-const scrollIntoViewScroll = ref("");
-const scrollTop = ref(0);
+const selected = ref<string[]>([])
+const scrollIntoView = ref('')
+const scrollIntoViewScroll = ref('')
+const scrollTop = ref(0)
 // 过滤处理方法
-let innerFormatter = (value: string) => value;
+let innerFormatter = (value: string) => value
 
 // 由于maxDate和minDate可以为字符串(2021-10-10)，或者数值(时间戳)，但是dayjs如果接受字符串形式的时间戳会有问题，这里进行处理
 const innerMaxDate = computed(() => {
-  return isNumericString(maxDate.value) ? Number(maxDate.value) : maxDate.value;
-});
+  return isNumericString(maxDate.value) ? Number(maxDate.value) : maxDate.value
+})
 const innerMinDate = computed(() => {
-  return isNumericString(minDate.value) ? Number(minDate.value) : minDate.value;
-});
+  return isNumericString(minDate.value) ? Number(minDate.value) : minDate.value
+})
 
 /**
  * @description 多个条件的变化，会引起选中日期的变化，这里统一管理监听
  * */
 const selectedChange = computed(() => {
-  return [innerMinDate.value, innerMaxDate.value, defaultDate.value];
-});
+  return [innerMinDate.value, innerMaxDate.value, defaultDate.value]
+})
 
 /**
  * @description 获得两个日期之间的月份数
@@ -137,175 +292,167 @@ const selectedChange = computed(() => {
  * @param maxDate 最大日期
  * */
 const getMonths = (minDate: number | string, maxDate: number | string) => {
-  const minYear = dayjs(minDate).year();
-  const minMonth = dayjs(minDate).month() + 1;
-  const maxYear = dayjs(maxDate).year();
-  const maxMonth = dayjs(maxDate).month() + 1;
-  return (maxYear - minYear) * 12 + (maxMonth - minMonth) + 1;
-};
+  const minYear = dayjs(minDate).year()
+  const minMonth = dayjs(minDate).month() + 1
+  const maxYear = dayjs(maxDate).year()
+  const maxMonth = dayjs(maxDate).month() + 1
+  return (maxYear - minYear) * 12 + (maxMonth - minMonth) + 1
+}
 
 /**
  * @description 设置月份数据
  * */
 const setMonth = () => {
   // 最小日期的毫秒数
-  const minDate = innerMinDate.value || dayjs().valueOf();
+  const minDate = innerMinDate.value || dayjs().valueOf()
   // 如果没有指定最大日期，则往后推3个月
   const maxDate =
     innerMaxDate.value ||
     dayjs(minDate)
-      .add(monthNum.value - 1, "month")
-      .valueOf();
+      .add(monthNum.value - 1, 'month')
+      .valueOf()
   // 最大最小月份之间的共有多少个月份，
-  const monthList = range(1, monthNum.value, getMonths(minDate, maxDate));
+  const monthList = range(1, monthNum.value, getMonths(minDate, maxDate))
   // 先清空数组
-  months.value = [];
+  months.value = []
   for (let i = 0; i < monthList; i++) {
     months.value.push({
-      date: new Array(dayjs(minDate).add(i, "month").daysInMonth())
-        .fill(1)
-        .map((item, index) => {
-          // 日期，取值1-31
-          let day = index + 1;
-          // 星期，0-6，0为周日
-          const week = dayjs(minDate).add(i, "month").date(day).day();
-          const date = dayjs(minDate)
-            .add(i, "month")
-            .date(day)
-            .format("YYYY-MM-DD");
-          let bottomInfo = "";
-          if (showLunar.value) {
-            // 将日期转为农历格式
-            const lunar = Calendar.solar2lunar(
-              dayjs(date).year(),
-              dayjs(date).month() + 1,
-              dayjs(date).date(),
-            );
-            bottomInfo = lunar.IDayCn;
-          }
-          let config = {
-            day,
-            week,
-            // 小于最小允许的日期，或者大于最大的日期，则设置为disabled状态
-            disabled:
-              dayjs(date).isBefore(dayjs(minDate).format("YYYY-MM-DD")) ||
-              dayjs(date).isAfter(dayjs(maxDate).format("YYYY-MM-DD")),
-            // 返回一个日期对象，供外部的formatter获取当前日期的年月日等信息，进行加工处理
-            date: new Date(date),
-            bottomInfo,
-            dot: false,
-            month: dayjs(minDate).add(i, "month").month() + 1,
-          };
-          const format = formatter.value || innerFormatter;
-          return format(config as any);
-        }),
+      date: new Array(dayjs(minDate).add(i, 'month').daysInMonth()).fill(1).map((item, index) => {
+        // 日期，取值1-31
+        let day = index + 1
+        // 星期，0-6，0为周日
+        const week = dayjs(minDate).add(i, 'month').date(day).day()
+        const date = dayjs(minDate).add(i, 'month').date(day).format('YYYY-MM-DD')
+        let bottomInfo = ''
+        if (showLunar.value) {
+          // 将日期转为农历格式
+          const lunar = Calendar.solar2lunar(
+            dayjs(date).year(),
+            dayjs(date).month() + 1,
+            dayjs(date).date(),
+          )
+          bottomInfo = lunar.IDayCn
+        }
+        let config = {
+          day,
+          week,
+          // 小于最小允许的日期，或者大于最大的日期，则设置为disabled状态
+          disabled:
+            dayjs(date).isBefore(dayjs(minDate).format('YYYY-MM-DD')) ||
+            dayjs(date).isAfter(dayjs(maxDate).format('YYYY-MM-DD')),
+          // 返回一个日期对象，供外部的formatter获取当前日期的年月日等信息，进行加工处理
+          date: new Date(date),
+          bottomInfo,
+          dot: false,
+          month: dayjs(minDate).add(i, 'month').month() + 1,
+        }
+        const format = formatter.value || innerFormatter
+        return format(config as any)
+      }),
       // 当前所属的月份
-      month: dayjs(minDate).add(i, "month").month() + 1,
+      month: dayjs(minDate).add(i, 'month').month() + 1,
       // 当前年份
-      year: dayjs(minDate).add(i, "month").year(),
-    });
+      year: dayjs(minDate).add(i, 'month').year(),
+    })
   }
-};
+}
 
 watch(
   () => selectedChange.value,
   () => setMonth(),
   { immediate: true },
-);
+)
 
 watch(
   () => show.value,
   (newVal: boolean) => {
     if (newVal) {
-      setMonth();
+      setMonth()
     } else {
       // 关闭时重置scrollIntoView，否则会出现二次打开日历，当前月份数据显示不正确。
       // scrollIntoView需要有一个值变动过程，才会产生作用。
-      scrollIntoView.value = "";
+      scrollIntoView.value = ''
     }
   },
   { immediate: true },
-);
+)
 
 const subtitle = computed(() => {
   // 初始化时，this.months为空数组，所以需要特别判断处理
   if (months.value.length) {
-    return `${months.value[monthIndex.value].year}年${
-      months.value[monthIndex.value].month
-    }月`;
+    return `${months.value[monthIndex.value].year}年${months.value[monthIndex.value].month}月`
   } else {
-    return "";
+    return ''
   }
-});
+})
 
 const buttonDisabled = computed(() => {
   // 如果为range类型，且选择的日期个数不足1个时，让底部的按钮出于disabled状态
-  if (mode.value === "range") {
-    return selected.value.length <= 1;
+  if (mode.value === 'range') {
+    return selected.value.length <= 1
   } else {
-    return false;
+    return false
   }
-});
+})
 
 onMounted(() => {
   // start.value = Date.now();
-  init();
-});
+  init()
+})
 
 // 在微信小程序中，不支持将函数当做props参数，故只能通过ref形式调用
 const setFormatter = (e: (value: string) => string) => {
-  innerFormatter = e;
-};
+  innerFormatter = e
+}
 
 /**
  * @description month组件内部选择日期后，通过事件通知给父组件
  */
-const monthSelected = (e: string[], scene = "init") => {
-  selected.value = e;
+const monthSelected = (e: string[], scene = 'init') => {
+  selected.value = e
   if (!showConfirm.value) {
     // 在不需要确认按钮的情况下，如果为单选，或者范围多选且已选长度大于2，则直接进行返还
     if (
-      mode.value === "multiple" ||
-      mode.value === "single" ||
-      (mode.value === "range" && selected.value.length >= 2)
+      mode.value === 'multiple' ||
+      mode.value === 'single' ||
+      (mode.value === 'range' && selected.value.length >= 2)
     ) {
-      if (scene === "init") {
-        return;
+      if (scene === 'init') {
+        return
       }
-      if (scene === "tap") {
-        emit("confirm", selected.value);
+      if (scene === 'tap') {
+        emit('confirm', selected.value)
       }
     }
   }
-};
+}
 
 const init = () => {
   // 校验maxDate，不能小于minDate。
   if (
     innerMaxDate.value &&
     innerMinDate.value &&
-    new Date(innerMaxDate.value).getTime() <
-      new Date(innerMinDate.value).getTime()
+    new Date(innerMaxDate.value).getTime() < new Date(innerMinDate.value).getTime()
   ) {
-    return error("maxDate不能小于minDate时间");
+    return error('maxDate不能小于minDate时间')
   }
   // 滚动区域的高度
-  listHeight.value = rowHeight.value * 5 + 30;
-  setMonth();
-};
+  listHeight.value = rowHeight.value * 5 + 30
+  setMonth()
+}
 
 const close = () => {
-  emit("close");
-};
+  emit('close')
+}
 
 /**
  * @description 点击确定按钮
  * */
 const confirm = () => {
   if (!buttonDisabled.value) {
-    emit("confirm", selected.value);
+    emit('confirm', selected.value)
   }
-};
+}
 
 /**
  * @description 滚动到默认设置的月份
@@ -314,62 +461,62 @@ const confirm = () => {
 const scrollIntoDefaultMonth = (selected: string) => {
   // 查询默认日期在可选列表的下标
   const _index = months.value.findIndex(({ year, month }) => {
-    month = padZero(month);
-    return `${year}-${month}` === selected;
-  });
+    month = padZero(month)
+    return `${year}-${month}` === selected
+  })
   if (_index !== -1) {
     // #ifndef MP-WEIXIN
     nextTick(() => {
-      scrollIntoView.value = `month-${_index}`;
-      scrollIntoViewScroll.value = scrollIntoView.value;
-    });
+      scrollIntoView.value = `month-${_index}`
+      scrollIntoViewScroll.value = scrollIntoView.value
+    })
     // #endif
     // #ifdef MP-WEIXIN
-    scrollTop.value = months.value[_index].top || 0;
+    scrollTop.value = months.value[_index].top || 0
     // #endif
   }
-};
+}
 // scroll-view滚动监听
 const onScroll = (event: any) => {
   // 不允许小于0的滚动值，如果scroll-view到顶了，继续下拉，会出现负数值
-  const scrollTop = Math.max(0, event.detail.scrollTop);
+  const scrollTop = Math.max(0, event.detail.scrollTop)
   // 将当前滚动条数值，除以滚动区域的高度，可以得出当前滚动到了哪一个月份的索引
   for (let i = 0; i < months.value.length; i++) {
     if (scrollTop >= (months.value[i].top || listHeight.value)) {
-      monthIndex.value = i;
-      scrollIntoViewScroll.value = `month-${i}`;
+      monthIndex.value = i
+      scrollIntoViewScroll.value = `month-${i}`
     }
   }
-};
+}
 // 更新月份的top值
 const updateMonthTop = (topArr = []) => {
   // 设置对应月份的top值，用于onScroll方法更新月份
   topArr.map((item, index) => {
-    months.value[index].top = item;
-  });
+    months.value[index].top = item
+  })
 
   // 获取默认日期的下标
   if (!defaultDate.value) {
     // 如果没有设置默认日期，则将当天日期设置为默认选中的日期
-    const selected = dayjs().format("YYYY-MM");
-    scrollIntoDefaultMonth(selected);
-    return;
+    const selected = dayjs().format('YYYY-MM')
+    scrollIntoDefaultMonth(selected)
+    return
   }
-  let selected = dayjs().format("YYYY-MM");
+  let selected = dayjs().format('YYYY-MM')
   // 单选模式，可以是字符串或数组，Date对象等
   if (!Array.isArray(defaultDate.value)) {
-    selected = dayjs(defaultDate.value).format("YYYY-MM");
+    selected = dayjs(defaultDate.value).format('YYYY-MM')
   } else {
-    selected = dayjs(defaultDate.value[0]).format("YYYY-MM");
+    selected = dayjs(defaultDate.value[0]).format('YYYY-MM')
   }
-  scrollIntoDefaultMonth(selected);
-};
+  scrollIntoDefaultMonth(selected)
+}
 
 defineExpose({
   setFormatter,
-});
+})
 </script>
 
 <style scoped lang="scss">
-@import "./index.scss";
+@import './index.scss';
 </style>