hy-app 0.3.0 → 0.3.2

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

@@ -66,31 +66,46 @@
 
 <script lang="ts">
 export default {
-  name: 'hy-calendar',
+  name: "hy-calendar",
   options: {
     virtualHost: true,
-    styleIsolation: 'shared',
+    styleIsolation: "shared",
   },
-}
+};
 </script>
 
 <script setup lang="ts">
-import type { ICalendarEmits } 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 type { ICalendarEmits } from "./typing";
+import {
+  computed,
+  nextTick,
+  onMounted,
+  type PropType,
+  ref,
+  toRefs,
+  watch,
+} from "vue";
+import {
+  addUnit,
+  error,
+  isArray,
+  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";
 
 /**
  * 用于单个选择日期，范围选择日期等，日历被包裹在底部弹起的容器中。
  * @displayName hy-calendar
  */
-defineOptions({})
+defineOptions({});
 
 // const props = withDefaults(defineProps<IProps>(), defaultProps);
 const props = defineProps({
@@ -103,7 +118,7 @@ const props = defineProps({
   /** 标题内容 */
   title: {
     type: String,
-    default: '日期选选择',
+    default: "日期选选择",
   },
   /** 是否显示标题 */
   showTitle: {
@@ -121,17 +136,17 @@ const props = defineProps({
    * */
   mode: {
     type: String,
-    default: 'single',
+    default: "single",
   },
   /** mode=range时，第一个日期底部的提示文字 */
   startText: {
     type: String,
-    default: '开始',
+    default: "开始",
   },
   /** mode=range时，最后一个日期底部的提示文字 */
   endText: {
     type: String,
-    default: '结束',
+    default: "结束",
   },
   /** 自定义列表 */
   customList: {
@@ -141,7 +156,7 @@ const props = defineProps({
   /** 主题色，对底部按钮和选中日期有效 */
   color: {
     type: String,
-    default: '',
+    default: "",
   },
   /** 最小的可选日期 */
   minDate: {
@@ -182,12 +197,12 @@ const props = defineProps({
   /** 确定按钮的文字 */
   confirmText: {
     type: String,
-    default: '确定',
+    default: "确定",
   },
   /** 确认按钮处于禁用状态时的文字 */
   confirmDisabledText: {
     type: String,
-    default: '确定',
+    default: "确定",
   },
   /** 是否允许点击遮罩关闭日历 */
   closeOnClickOverlay: {
@@ -234,7 +249,7 @@ const props = defineProps({
   /** 星期文案 */
   weekText: {
     type: Array as unknown as PropType<string[]>,
-    default: () => ['一', '二', '三', '四', '五', '六', '日'],
+    default: () => ["一", "二", "三", "四", "五", "六", "日"],
   },
   /** 单选与多选禁止选中的日期列表，mode!=range时有效。 */
   forbidDays: {
@@ -244,51 +259,39 @@ const props = defineProps({
   /** 单选与多选禁止选中的日期选择时提示 */
   forbidDaysToast: {
     type: String,
-    default: '该日期已禁用',
+    default: "该日期已禁用",
   },
-})
-const {
-  show,
-  maxDate,
-  minDate,
-  defaultDate,
-  mode,
-  showConfirm,
-  rowHeight,
-  monthNum,
-  formatter,
-  showLunar,
-} = toRefs(props)
-const emit = defineEmits<ICalendarEmits>()
+});
+const emit = defineEmits<ICalendarEmits>();
 
 // 需要显示的月份的数组
-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(props.maxDate) ? Number(props.maxDate) : props.maxDate;
+});
 const innerMinDate = computed(() => {
-  return isNumericString(minDate.value) ? Number(minDate.value) : minDate.value
-})
+  return isNumericString(props.minDate) ? Number(props.minDate) : props.minDate;
+});
 
 /**
  * @description 多个条件的变化，会引起选中日期的变化，这里统一管理监听
  * */
 const selectedChange = computed(() => {
-  return [innerMinDate.value, innerMaxDate.value, defaultDate.value]
-})
+  return [innerMinDate.value, innerMaxDate.value, props.defaultDate];
+});
 
 /**
  * @description 获得两个日期之间的月份数
@@ -296,167 +299,173 @@ 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(props.monthNum - 1, "month")
+      .valueOf();
   // 最大最小月份之间的共有多少个月份，
-  const monthList = range(1, monthNum.value, getMonths(minDate, maxDate))
+  const monthList = range(1, props.monthNum, 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 (props.showLunar) {
+            // 将日期转为农历格式
+            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 = props.formatter || 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,
+  () => props.show,
   (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 (props.mode === "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
-  if (!showConfirm.value) {
+const monthSelected = (e: string[], scene = "init") => {
+  selected.value = e;
+  if (!props.showConfirm) {
     // 在不需要确认按钮的情况下，如果为单选，或者范围多选且已选长度大于2，则直接进行返还
     if (
-      mode.value === 'multiple' ||
-      mode.value === 'single' ||
-      (mode.value === 'range' && selected.value.length >= 2)
+      props.mode === "multiple" ||
+      props.mode === "single" ||
+      (props.mode === "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 = props.rowHeight * 5 + 30;
+  setMonth();
+};
 
 const close = () => {
-  emit('close')
-}
+  emit("close");
+};
 
 /**
  * @description 点击确定按钮
  * */
 const confirm = () => {
   if (!buttonDisabled.value) {
-    emit('confirm', selected.value)
+    emit("confirm", selected.value);
   }
-}
+};
 
 /**
  * @description 滚动到默认设置的月份
@@ -465,62 +474,61 @@ 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;
+  });
+  // 如果没有设置默认日期，则将当天日期设置为默认选中的日期
+  let selected = dayjs().format("YYYY-MM");
 
   // 获取默认日期的下标
-  if (!defaultDate.value) {
-    // 如果没有设置默认日期，则将当天日期设置为默认选中的日期
-    const selected = dayjs().format('YYYY-MM')
-    scrollIntoDefaultMonth(selected)
-    return
+  if (!props.defaultDate) {
+    scrollIntoDefaultMonth(selected);
+    return;
   }
-  let selected = dayjs().format('YYYY-MM')
   // 单选模式，可以是字符串或数组，Date对象等
-  if (!Array.isArray(defaultDate.value)) {
-    selected = dayjs(defaultDate.value).format('YYYY-MM')
+  if (!isArray(props.defaultDate)) {
+    selected = dayjs(props.defaultDate).format("YYYY-MM");
   } else {
-    selected = dayjs(defaultDate.value[0]).format('YYYY-MM')
+    selected = dayjs(props.defaultDate[0]).format("YYYY-MM");
   }
-  scrollIntoDefaultMonth(selected)
-}
+  scrollIntoDefaultMonth(selected);
+};
 
 defineExpose({
   setFormatter,
-})
+});
 </script>
 
 <style scoped lang="scss">
-@import './index.scss';
+@import "./index.scss";
 </style>