hy-app 0.1.2 → 0.1.4

package/components/hy-checkbox/index.scss

@@ -0,0 +1,94 @@
+@use "../../libs/css/mixin.scss" as *;
+@use "../../theme.scss" as *;
+
+.hy-checkbox {
+  &-group {
+    &--row {
+      /* #ifndef APP-NVUE */
+      display: flex;
+      /* #endif */
+      flex-flow: row wrap;
+    }
+
+    &--column {
+      @include flex(column);
+    }
+  }
+
+  /* #ifndef APP-NVUE */
+  @include flex(row);
+  /* #endif */
+  overflow: hidden;
+  flex-direction: row;
+  align-items: center;
+  margin-bottom: 5px;
+  margin-top: 5px;
+
+  &-label--left {
+    flex-direction: row;
+  }
+
+  &-label--right {
+    flex-direction: row-reverse;
+    justify-content: space-between;
+  }
+
+  &__icon-wrap {
+    /* #ifndef APP-NVUE */
+    box-sizing: border-box;
+    // nvue下，border-color过渡有问题
+    transition-property: border-color, background-color, color;
+    transition-duration: 0.2s;
+    /* #endif */
+    @include flex;
+    align-items: center;
+    justify-content: center;
+    color: transparent;
+    text-align: center;
+    margin-right: $hy-border-margin-padding-sm;
+    border: $hy-border-line;
+
+    /* #ifdef MP-TOUTIAO */
+    // 头条小程序兼容性问题，需要设置行高为0，否则图标偏下
+    &__icon {
+      line-height: 0;
+    }
+
+    /* #endif */
+
+    &--circle {
+      border-radius: 50%;
+    }
+
+    &--square {
+      border-radius: 3px;
+    }
+
+    &--checked {
+      color: $hy-text-color-inverse;
+      background-color: $hy-primary;
+      border-color: $hy-primary;
+    }
+
+    &--disabled {
+      background-color: $hy-color-disable-bg !important;
+    }
+
+    &--disabled--checked {
+      color: $hy-color-disable-icon !important;
+    }
+  }
+
+  &__label-wrap {
+    /* #ifndef APP-NVUE */
+    word-wrap: break-word;
+    /* #endif */
+    color: $hy-text-color;
+    font-size: $hy-font-size-base;
+    margin-right: $hy-border-margin-padding-sm;
+
+    &--disabled {
+      color: $hy-text-color-disable;
+    }
+  }
+}

package/components/hy-checkbox/typing.d.ts

@@ -1,6 +1,5 @@
 import type { CSSProperties } from "vue";
 import type { CheckboxColumnsVo, IFieldNames } from "../hy-check-button/typing";
-import { HyApp } from "@/package/typing/modules/common";
 
 export default interface IProps {
   /**
@@ -70,5 +69,5 @@ export default interface IProps {
   /**
    * @description 排列方式，row-横向，column-纵向
    * */
-  placement?: HyApp.PermutationType;
+  placement?: HyApp.DirectionType;
 }

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

@@ -0,0 +1,150 @@
+<template>
+  <view class="hy-count-down">
+    <slot :record="timeData">
+      <text class="hy-count-down__text">{{ formattedTime }}</text>
+    </slot>
+  </view>
+</template>
+
+<script setup lang="ts">
+import type IProps from "./typing";
+import defaultProps from "./props";
+import { onMounted, onUnmounted, ref, toRefs, watch } from "vue";
+import { isSameSecond, parseFormat, parseTimeData } from "./index";
+
+const props = withDefaults(defineProps<IProps>(), defaultProps);
+const { time, autoStart, millisecond, format } = toRefs(props);
+const emit = defineEmits(["change", "finish"]);
+
+let timer: any;
+// 各单位(天，时，分等)剩余时间
+const timeData = ref(parseTimeData(time.value));
+// 格式化后的时间，如"03:23:21"
+const formattedTime = ref("");
+// 倒计时是否正在进行中
+const runing = ref(false);
+// 结束的毫秒时间戳
+const endTime = ref(0);
+// 剩余的毫秒时间
+const remainTime = ref(0);
+
+watch(
+  () => time.value,
+  () => reset(),
+);
+
+onMounted(() => {
+  reset();
+});
+
+onUnmounted(() => {
+  clearTimeoutFn();
+});
+
+/**
+ * @description 开始倒计时
+ */
+const start = () => {
+  if (runing.value) return;
+  // 标识为进行中
+  runing.value = true;
+  // 结束时间戳 = 此刻时间戳 + 剩余的时间
+  endTime.value = Date.now() + remainTime.value;
+  toTick();
+};
+
+/**
+ * @description 根据是否展示毫秒，执行不同操作函数
+ */
+const toTick = () => {
+  if (millisecond.value) {
+    microTick();
+  } else {
+    macroTick();
+  }
+};
+const macroTick = () => {
+  clearTimeoutFn();
+  // 每隔一定时间，更新一遍定时器的值
+  // 同时此定时器的作用也能带来毫秒级的更新
+  timer = setTimeout(() => {
+    // 获取剩余时间
+    const remain = getRemainTime();
+    // 重设剩余时间
+    if (!isSameSecond(remain, remainTime.value) || remain === 0) {
+      setRemainTime(remain);
+    }
+    // 如果剩余时间不为0，则继续检查更新倒计时
+    if (remainTime.value !== 0) {
+      macroTick();
+    }
+  }, 30);
+};
+
+const microTick = () => {
+  clearTimeoutFn();
+  timer = setTimeout(() => {
+    setRemainTime(getRemainTime());
+    if (remainTime.value !== 0) {
+      microTick();
+    }
+  }, 50);
+};
+
+/**
+ * @description 获取剩余的时间
+ */
+const getRemainTime = () => {
+  // 取最大值，防止出现小于0的剩余时间值
+  return Math.max(endTime.value - Date.now(), 0);
+};
+/**
+ * @description 设置剩余的时间
+ */
+const setRemainTime = (remain: number) => {
+  remainTime.value = remain;
+  // 根据剩余的毫秒时间，得出该有天，小时，分钟等的值，返回一个对象
+  timeData.value = parseTimeData(remain);
+  emit("change", timeData.value);
+  // 得出格式化后的时间
+  formattedTime.value = parseFormat(format.value, timeData.value);
+  // 如果时间已到，停止倒计时
+  if (remain <= 0) {
+    pause();
+    emit("finish");
+  }
+};
+// 重置倒计时
+const reset = () => {
+  pause();
+  remainTime.value = time.value;
+  setRemainTime(remainTime.value);
+  if (autoStart.value) {
+    start();
+  }
+};
+/**
+ * @description 暂停倒计时
+ * */
+const pause = () => {
+  runing.value = false;
+  clearTimeoutFn();
+};
+/**
+ * @description 清空定时器
+ * */
+const clearTimeoutFn = () => {
+  clearTimeout(timer);
+  timer = null;
+};
+
+defineExpose({
+  reset,
+  start,
+  pause,
+});
+</script>
+
+<style scoped lang="scss">
+@import "./index.scss";
+</style>

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

@@ -0,0 +1,6 @@
+.hy-count-down {
+  &__text {
+    font-size: 15px;
+    line-height: 22px;
+  }
+}

package/components/hy-count-down/index.ts

@@ -0,0 +1,52 @@
+import { padZero } from "../../utils";
+
+const SECOND = 1000;
+const MINUTE = 60 * SECOND;
+const HOUR = 60 * MINUTE;
+const DAY = 24 * HOUR;
+export function parseTimeData(time: number) {
+  const days = Math.floor(time / DAY);
+  const hours = Math.floor((time % DAY) / HOUR);
+  const minutes = Math.floor((time % HOUR) / MINUTE);
+  const seconds = Math.floor((time % MINUTE) / SECOND);
+  const milliseconds = Math.floor(time % SECOND);
+  return {
+    days,
+    hours,
+    minutes,
+    seconds,
+    milliseconds,
+  };
+}
+
+export function parseFormat(format: string, timeData: AnyObject) {
+  let { days, hours, minutes, seconds, milliseconds } = timeData;
+  // 如果格式化字符串中不存在DD(天)，则将天的时间转为小时中去
+  if (format.indexOf("DD") === -1) {
+    hours += days * 24;
+  } else {
+    // 对天补0
+    format = format.replace("DD", padZero(days));
+  }
+  // 其他同理于DD的格式化处理方式
+  if (format.indexOf("HH") === -1) {
+    minutes += hours * 60;
+  } else {
+    format = format.replace("HH", padZero(hours));
+  }
+  if (format.indexOf("mm") === -1) {
+    seconds += minutes * 60;
+  } else {
+    format = format.replace("mm", padZero(minutes));
+  }
+  if (format.indexOf("ss") === -1) {
+    milliseconds += seconds * 1000;
+  } else {
+    format = format.replace("ss", padZero(seconds));
+  }
+  return format.replace("SSS", padZero(milliseconds));
+}
+
+export function isSameSecond(time1: number, time2: number) {
+  return Math.floor(time1 / 1000) === Math.floor(time2 / 1000);
+}

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

@@ -0,0 +1,10 @@
+import type IProps from "./typing";
+
+const defaultProps: IProps = {
+  time: 0,
+  format: "HH:mm:ss",
+  autoStart: true,
+  millisecond: false,
+};
+
+export default defaultProps;

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

@@ -0,0 +1,20 @@
+import type { CSSProperties } from "vue";
+
+export default interface IProps {
+  /**
+   * @description 倒计时时长，单位ms （默认 0 ）
+   * */
+  time: number;
+  /**
+   * @description 时间格式，DD-日，HH-时，mm-分，ss-秒，SSS-毫秒  （默认 'HH:mm:ss' ）
+   * */
+  format?: string;
+  /**
+   * @description 是否自动开始倒计时 （默认 true ）
+   * */
+  autoStart?: boolean;
+  /**
+   * @description 是否展示毫秒倒计时 （默认 false ）
+   * */
+  millisecond?: boolean;
+}

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"
@@ -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;
+    }
+  }
+}