hy-app 0.1.1 → 0.1.3

package/components/hy-count-to/hy-count-to.vue

@@ -0,0 +1,213 @@
+<template>
+  <text
+    class="hy-count-num"
+    :style="{
+      fontSize: addUnit(fontSize),
+      fontWeight: bold ? 'bold' : 'normal',
+      color: color,
+    }"
+    >{{ displayValue }}</text
+  >
+</template>
+
+<script setup lang="ts">
+import type IProps from "./typing";
+import defaultProps from "./props";
+import { computed, onMounted, onUnmounted, ref, toRefs, watch } from "vue";
+import { addUnit, isNumber } from "../../utils";
+
+const props = withDefaults(defineProps<IProps>(), defaultProps);
+const {
+  startVal,
+  duration,
+  endVal,
+  autoplay,
+  separator,
+  useEasing,
+  decimals,
+  decimal,
+} = toRefs(props);
+const emit = defineEmits(["end"]);
+
+const formatNumber = (num: number): string => {
+  let numStr = "";
+  // 将num转为Number类型，因为其值可能为字符串数值，调用toFixed会报错
+  num = Number(num);
+  numStr = num.toFixed(Number(decimals.value));
+  numStr += "";
+  const x = numStr.split(".");
+  let x1 = x[0];
+  const x2 = x.length > 1 ? decimal.value + x[1] : "";
+  const rgx = /(\d+)(\d{3})/;
+  if (separator.value && !isNumber(separator.value)) {
+    while (rgx.test(x1)) {
+      x1 = x1.replace(rgx, "$1" + separator.value + "$2");
+    }
+  }
+  return x1 + x2;
+};
+
+const localStartVal = ref(startVal.value);
+let displayValue = ref(formatNumber(startVal.value));
+const printVal = ref<number | null>(null);
+const paused = ref(false); // 是否暂停
+const localDuration = ref(Number(duration.value));
+const startTime = ref<number | null>(null); // 开始的时间
+const timestamp = ref<number | null>(null); // 时间戳
+const remaining = ref<number | null>(null); // 停留的时间
+const rAF = ref<number>(); // 停留的时间
+const lastTime = ref(0); // 上一次的时间
+
+const countDown = computed(() => {
+  return startVal.value > endVal.value;
+});
+
+watch(
+  () => startVal.value,
+  () => autoplay.value && start(),
+);
+
+watch(
+  () => endVal.value,
+  () => autoplay.value && start(),
+);
+
+onMounted(() => {
+  autoplay.value && start();
+});
+
+const easingFn = (t: number, b: number, c: number, d: number) => {
+  return (c * (-Math.pow(2, (-10 * t) / d) + 1) * 1024) / 1023 + b;
+};
+
+const requestAnimationFrame = (callback: Function): number => {
+  const currTime = new Date().getTime();
+  // 为了使setTimteout的尽可能的接近每秒60帧的效果
+  const timeToCall = Math.max(0, 16 - (currTime - lastTime.value));
+  const id = setTimeout(() => {
+    callback(currTime + timeToCall);
+  }, timeToCall) as unknown as number;
+  lastTime.value = currTime + timeToCall;
+  return id;
+};
+
+const cancelAnimationFrame = (id?: number) => {
+  clearTimeout(id);
+};
+
+/**
+ * @description 开始滚动数字
+ * */
+const start = () => {
+  localStartVal.value = startVal.value;
+  startTime.value = null;
+  localDuration.value = duration.value;
+  paused.value = false;
+  rAF.value = requestAnimationFrame(count);
+};
+
+/**
+ * @description 暂定状态，重新再开始滚动；或者滚动状态下，暂停
+ * */
+const reStart = () => {
+  if (paused.value) {
+    resume();
+    paused.value = false;
+  } else {
+    stop();
+    paused.value = true;
+  }
+};
+
+/**
+ * @description 暂停
+ * */
+const stop = () => {
+  cancelAnimationFrame(rAF.value);
+};
+
+/**
+ * @description 重新开始(暂停的情况下)
+ * */
+const resume = () => {
+  if (!remaining.value) return;
+  startTime.value = 0;
+  localDuration.value = remaining.value;
+  if (printVal.value) {
+    localStartVal.value = printVal.value;
+  }
+  requestAnimationFrame(count);
+};
+
+/**
+ * @description 重置
+ * */
+const reset = () => {
+  startTime.value = null;
+  cancelAnimationFrame(rAF.value);
+  displayValue.value = formatNumber(startVal.value);
+};
+const count = (time_stamp: number) => {
+  if (!startTime.value) startTime.value = time_stamp;
+  timestamp.value = time_stamp;
+  const progress = time_stamp - startTime.value;
+  remaining.value = localDuration.value - progress;
+  if (useEasing.value) {
+    if (countDown.value) {
+      printVal.value =
+        localStartVal.value -
+        easingFn(
+          progress,
+          0,
+          localStartVal.value - endVal.value,
+          localDuration.value,
+        );
+    } else {
+      printVal.value = easingFn(
+        progress,
+        localStartVal.value,
+        endVal.value - localStartVal.value,
+        localDuration.value,
+      );
+    }
+  } else {
+    if (countDown.value) {
+      printVal.value =
+        localStartVal.value -
+        (localStartVal.value - endVal.value) * (progress / localDuration.value);
+    } else {
+      printVal.value =
+        localStartVal.value +
+        (endVal.value - localStartVal.value) * (progress / localDuration.value);
+    }
+  }
+  if (countDown.value) {
+    printVal.value =
+      printVal.value < endVal.value ? endVal.value : printVal.value;
+  } else {
+    printVal.value =
+      printVal.value > endVal.value ? endVal.value : printVal.value;
+  }
+  displayValue.value = formatNumber(printVal.value);
+  if (progress < localDuration.value) {
+    rAF.value = requestAnimationFrame(count);
+  } else {
+    emit("end");
+  }
+};
+
+const destroyed = () => {
+  cancelAnimationFrame(rAF.value);
+};
+
+defineExpose({
+  start,
+  stop,
+  reStart,
+  resume,
+});
+</script>
+
+<style scoped lang="scss">
+@import "./index.scss";
+</style>

package/components/hy-count-to/index.scss

@@ -0,0 +1,6 @@
+.hy-count-num {
+  /* #ifndef APP-NVUE */
+  display: inline-flex;
+  /* #endif */
+  text-align: center;
+}

package/components/hy-count-to/props.ts

@@ -0,0 +1,17 @@
+import type IProps from "./typing";
+
+const defaultProps: IProps = {
+  startVal: 0,
+  endVal: 0,
+  duration: 2000,
+  autoplay: true,
+  decimals: 0,
+  useEasing: true,
+  decimal: ".",
+  color: "#606266",
+  fontSize: 22,
+  bold: false,
+  separator: "",
+};
+
+export default defaultProps;

package/components/hy-count-to/typing.d.ts

@@ -0,0 +1,48 @@
+import type { CSSProperties } from "vue";
+
+export default interface IProps {
+  /**
+   * @description 开始的数值，默认从0增长到某一个数（默认 0 ）
+   * */
+  startVal?: number;
+  /**
+   * @description 要滚动的目标数值，必须 （默认 0 ）
+   * */
+  endVal?: number;
+  /**
+   * @description 滚动到目标数值的动画持续时间，单位为毫秒（ms） （默认
+   * */
+  duration?: number;
+  /**
+   * @description 设置数值后是否自动开始滚动 （默认 true ）
+   * */
+  autoplay?: boolean;
+  /**
+   * @description 要显示的小数位数，见官网说明（默认 0 ）
+   * */
+  decimals?: number;
+  /**
+   * @description 滚动结束时，是否缓动结尾，见官网说明（默认 true ）
+   * */
+  useEasing?: boolean;
+  /**
+   * @description 十进制分割 （ 默认 "." ）
+   * */
+  decimal?: string;
+  /**
+   * @description 字体颜色（ 默认 '#606266' )
+   * */
+  color?: string;
+  /**
+   * @description 字体大小，单位px（ 默认 22 ）
+   * */
+  fontSize?: number | string;
+  /**
+   * @description 字体是否加粗（默认 false ）
+   * */
+  bold?: boolean;
+  /**
+   * @description 千位分隔符，见官网说明
+   * */
+  separator?: string;
+}

package/components/hy-datetime-picker/hy-datetime-picker.vue

@@ -8,7 +8,7 @@
       <slot name="trigger" :value="inputValue">
         <HyInput
           :placeholder="placeholder"
-          :readonly="!!showByClickInput"
+          :readonly="true"
           v-model="inputValue"
           :disabled="disabled"
           :disabledColor="disabledColor"
@@ -55,7 +55,7 @@
 <script setup lang="ts">
 import { computed, onMounted, ref, toRefs, watch } from "vue";
 import defaultProps from "./props";
-import IProps from "./typing";
+import type IProps from "./typing";
 import dayjs from "dayjs/esm";
 import { error, padZero } from "../../utils";
 import { DateModeEnum } from "../../typing";
@@ -79,14 +79,14 @@ const {
   minHour,
   maxHour,
   minMinute,
-  maxMinute
+  maxMinute,
 } = toRefs(props);
 const emit = defineEmits([
   "close",
   "cancel",
   "confirm",
   "change",
-  "update:modelValue"
+  "update:modelValue",
 ]);
 
 // 原来的日期选择器不方便，这里增加一个hasInput选项支持类似element的自带输入框的功能。
@@ -100,7 +100,7 @@ const validModes = new Set([
   DateModeEnum.TIME,
   DateModeEnum.MONTH_DAY,
   DateModeEnum.HOUR_MINUTE,
-  DateModeEnum.MINUTE_SECOND
+  DateModeEnum.MINUTE_SECOND,
 ]);
 
 /**
@@ -110,7 +110,7 @@ const updateColumns = () => {
   const formatterFn = formatter.value || innerFormatter;
   // 获取各列的值，并且map后，对各列的具体值进行补0操作
   columns.value = getOriginColumns().map((column) =>
-    column.values.map((value) => formatterFn(column.type, value))
+    column.values.map((value) => formatterFn(column.type, value)),
   );
 };
 
@@ -122,7 +122,7 @@ const updateColumnValue = (value: string | number) => {
   updateColumns();
   // 延迟执行,等待u-picker组件列数据更新完后再设置选中值索引
   setTimeout(() => {
-    updateIndexs(value);
+    updateIndexes(value);
   }, 100);
 };
 
@@ -142,12 +142,12 @@ watch(
     if (newValue) {
       updateColumnValue(innerValue.value);
     }
-  }
+  },
 );
 
 watch(
   () => modelValue.value,
-  () => init()
+  () => init(),
 );
 
 const propsChange = computed(() => {
@@ -159,13 +159,13 @@ const propsChange = computed(() => {
     maxHour.value,
     minMinute.value,
     maxMinute.value,
-    filter.value
+    filter.value,
   ];
 });
 
 watch(
   () => propsChange.value,
-  () => init()
+  () => init(),
 );
 
 onMounted(() => {
@@ -254,7 +254,7 @@ const confirm = () => {
   }
   emit("confirm", {
     value: innerValue.value,
-    mode: mode.value
+    mode: mode.value,
   });
 };
 
@@ -287,12 +287,12 @@ const change = (e: any) => {
   if (validModes.has(mode.value) && mode.value !== DateModeEnum.MONTH_DAY) {
     // 根据value各列索引，从各列数组中，取出当前时间的选中值
     selectValue = `${intercept(values[0][indexs[0]])}:${intercept(
-      values[1][indexs[1]]
+      values[1][indexs[1]],
     )}`;
   } else if (mode.value === DateModeEnum.MONTH_DAY) {
     // 根据value各列索引，从各列数组中，取出当前时间的选中值
     selectValue = `${intercept(values[0][indexs[0]])}-${intercept(
-      values[1][indexs[1]]
+      values[1][indexs[1]],
     )}`;
   } else {
     // 将选择的值转为数值，比如'03'转为数值的3，'2019'转为数值的2019
@@ -325,15 +325,15 @@ const change = (e: any) => {
     // 微信小程序不能传递this实例，会因为循环引用而报错
     // picker: this.$refs.picker,
     // #endif
-    mode: mode.value
+    mode: mode.value,
   });
 };
 
 /**
  * @description 更新索引
  * */
-const updateIndexs = (value: number | string) => {
-  let values = [];
+const updateIndexes = (value: number | string) => {
+  let values: string[] = [];
   let timeArr: string[] = [];
   const formatterFn = formatter.value || innerFormatter;
 
@@ -343,7 +343,7 @@ const updateIndexs = (value: number | string) => {
       // 使用formatter格式化方法进行管道处理
       values = [
         formatterFn("hour", timeArr[0]),
-        formatterFn("minute", timeArr[1])
+        formatterFn("minute", timeArr[1]),
       ];
       break;
     case DateModeEnum.MONTH_DAY:
@@ -351,7 +351,7 @@ const updateIndexs = (value: number | string) => {
       // 使用formatter格式化方法进行管道处理
       values = [
         formatterFn("month", timeArr[0]),
-        formatterFn("day", timeArr[1])
+        formatterFn("day", timeArr[1]),
       ];
       break;
     case DateModeEnum.HOUR_MINUTE:
@@ -359,7 +359,7 @@ const updateIndexs = (value: number | string) => {
       // 使用formatter格式化方法进行管道处理
       values = [
         formatterFn("hour", timeArr[0]),
-        formatterFn("minute", timeArr[1])
+        formatterFn("minute", timeArr[1]),
       ];
       break;
     case DateModeEnum.MINUTE_SECOND:
@@ -367,14 +367,14 @@ const updateIndexs = (value: number | string) => {
       // 使用formatter格式化方法进行管道处理
       values = [
         formatterFn("minute", timeArr[0]),
-        formatterFn("second", timeArr[1])
+        formatterFn("second", timeArr[1]),
       ];
       break;
     default:
       values = [
         formatterFn("year", `${dayjs(value).year()}`),
         // 月份补0
-        formatterFn("month", padZero(dayjs(value).month() + 1))
+        formatterFn("month", padZero(dayjs(value).month() + 1)),
       ];
       if (mode.value === DateModeEnum.DATE) {
         // date模式，需要添加天列
@@ -386,7 +386,7 @@ const updateIndexs = (value: number | string) => {
           formatterFn("day", padZero(dayjs(value).date())),
           formatterFn("hour", padZero(dayjs(value).hour())),
           formatterFn("minute", padZero(dayjs(value).minute())),
-          formatterFn("second", padZero(dayjs(value).second()))
+          formatterFn("second", padZero(dayjs(value).second())),
         );
       }
       break;
@@ -396,7 +396,7 @@ const updateIndexs = (value: number | string) => {
     // 通过取大值，可以保证不会出现找不到索引的"-1"情况
     return Math.max(
       0,
-      column.findIndex((item: string) => item === values[index])
+      column.findIndex((item: string) => item === values[index]),
     );
   });
 };
@@ -456,47 +456,47 @@ const getRanges = () => {
     return [
       {
         type: "hour",
-        range: [props.minHour, props.maxHour]
+        range: [props.minHour, props.maxHour],
       },
       {
         type: "minute",
-        range: [props.minMinute, props.maxMinute]
-      }
+        range: [props.minMinute, props.maxMinute],
+      },
     ];
   }
   const { maxYear, maxDate, maxMonth, maxHour, maxMinute } = getBoundary(
     "max",
-    innerValue.value
+    innerValue.value,
   );
   const { minYear, minDate, minMonth, minHour, minMinute } = getBoundary(
     "min",
-    innerValue.value
+    innerValue.value,
   );
   const result = [
     {
       type: "year",
-      range: [minYear, maxYear]
+      range: [minYear, maxYear],
     },
     {
       type: "month",
-      range: [minMonth, maxMonth]
+      range: [minMonth, maxMonth],
     },
     {
       type: "day",
-      range: [minDate, maxDate]
+      range: [minDate, maxDate],
     },
     {
       type: "hour",
-      range: [minHour, maxHour]
+      range: [minHour, maxHour],
     },
     {
       type: "minute",
-      range: [minMinute, maxMinute]
+      range: [minMinute, maxMinute],
     },
     {
       type: "second",
-      range: [minMinute, maxMinute]
-    }
+      range: [minMinute, maxMinute],
+    },
   ];
   let arr = result;
   // 截取对应的列数
@@ -543,7 +543,7 @@ const getBoundary = (type: string, innerVal: string | number) => {
     [`${type}Month`]: month,
     [`${type}Date`]: date,
     [`${type}Hour`]: hour,
-    [`${type}Minute`]: minute
+    [`${type}Minute`]: minute,
   };
 };
 const onShowByClickInput = () => {
@@ -554,31 +554,5 @@ const onShowByClickInput = () => {
 </script>
 
 <style lang="scss" scoped>
-@import "../../libs/css/mixin.scss";
-.hy-datetime-picker {
-  flex: 1;
-  &__has-input {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    /* #ifndef APP-NVUE */
-    width: 100%;
-    /* #endif */
-    .input-cover {
-      opacity: 0;
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      border-radius: 4px;
-      border: 1px solid #eee;
-      padding: 0 10px;
-    }
-  }
-}
+@import "./index.scss";
 </style>

package/components/hy-datetime-picker/index.scss

@@ -0,0 +1,28 @@
+@use "../../libs/css/mixin.scss" as *;
+
+.hy-datetime-picker {
+  flex: 1;
+  &__has-input {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    /* #ifndef APP-NVUE */
+    width: 100%;
+    /* #endif */
+    .input-cover {
+      opacity: 0;
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      border-radius: 4px;
+      border: 1px solid #eee;
+      padding: 0 10px;
+    }
+  }
+}

package/components/hy-datetime-picker/props.ts

@@ -1,4 +1,4 @@
-import IProps from "./typing";
+import type IProps from "./typing";
 import { DateModeEnum } from "../../typing";
 
 const defaultProps: IProps = {
@@ -30,7 +30,7 @@ const defaultProps: IProps = {
   format: "",
   placeholder: "请选择日期",
   disabledColor: "#F5F5F5",
-  toolbarRightSlot: false
+  toolbarRightSlot: false,
 };
 
 export default defaultProps;

package/components/hy-datetime-picker/typing.d.ts

@@ -1,5 +1,5 @@
 import { DateModeEnum } from "../../typing";
-import { CSSProperties } from "vue";
+import type { CSSProperties } from "vue";
 
 export default interface IProps {
   /**