hy-app 0.2.14 → 0.2.16

package/components/hy-config-provider/hy-config-provider.vue

@@ -1,53 +1,73 @@
 <template>
   <view :class="themeClass" :style="themeStyle">
+    <!-- @slot 默认插槽 -->
     <slot />
   </view>
 </template>
 
 <script lang="ts">
+/**
+ * 将 ConfigProvider 组件的 theme 属性设置为 dark，可以开启深色模式。 深色模式会全局生效，使页面上的所有 Wot 组件变为深色风格。
+ * @displayName hy-config-provider
+ */
+defineOptions({})
 export default {
-  name: "hy-config-provider",
+  name: 'hy-config-provider',
   options: {
     addGlobalClass: true,
     virtualHost: true,
-    styleIsolation: "shared",
+    styleIsolation: 'shared',
   },
-};
+}
 </script>
 
 <script setup lang="ts">
-import { computed, toRefs } from "vue";
-import type IProps from "./typing";
-import defaultProps from "./props";
-import { addUnit } from "@/package";
-import { colorGradient } from "@/package/utils";
+import { computed, type CSSProperties, type PropType, toRefs } from 'vue'
+import { addUnit, colorGradient } from '../../utils'
+import { ColorConfig } from '../../config'
 
-const props = withDefaults(defineProps<IProps>(), defaultProps);
-const {
-  theme,
-  themeColor,
-  themeLightColor,
-  customClass,
-  customStyle,
-  padding,
-} = toRefs(props);
+// const props = withDefaults(defineProps<IProps>(), defaultProps);
+const props = defineProps({
+  /**
+   * 主题色，暗色或者默认白色
+   * @values dark,light
+   * */
+  theme: {
+    type: String,
+    default: 'light',
+  },
+  /** 主题色 */
+  themeColor: {
+    type: String,
+    default: ColorConfig.primary,
+  },
+  /** 内边距 */
+  padding: [String, Number],
+  /** 定义需要用到的主题类名 */
+  customClass: String,
+  /** 定义需要用到的外部样式 */
+  customStyle: {
+    type: Object as PropType<CSSProperties>,
+  },
+})
+const { theme, themeColor, customClass, customStyle, padding } = toRefs(props)
 
 const themeClass = computed(() => {
-  return [customClass.value, "hy-config-provider", `hy-theme--${theme.value}`];
-});
+  return [customClass.value, 'hy-config-provider', `hy-theme--${theme.value}`]
+})
 
 const themeStyle = computed(() => {
   return [
     {
-      "--hy-theme-color": themeColor.value,
-      "--hy-theme--light": colorGradient(themeColor.value)[90],
+      '--hy-theme-color': themeColor.value,
+      '--hy-theme--light': colorGradient(themeColor.value)[90],
       padding: addUnit(padding.value),
     },
     customStyle.value,
-  ];
-});
+  ]
+})
 </script>
 
 <style scoped lang="scss">
-@import "./index.scss";
+@import './index.scss';
 </style>

package/components/hy-config-provider/typing.d.ts

@@ -9,10 +9,6 @@ export default interface HyConfigProviderProps {
    * @description 主题色（默认 #3c9cff ）
    * */
   themeColor?: string
-  /**
-   * @description 主题色（默认 #ecf5ff ）
-   * */
-  themeLightColor?: string
   /**
    * @description 内边距（默认 10px ）
    * */

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

@@ -1,5 +1,9 @@
 <template>
-  <view class="hy-count-down">
+  <view :class="['hy-count-down', customClass]" :style="customStyle">
+    <!--
+    @slot 默认插槽
+    @param {String | Number} record
+     -->
     <slot :record="timeData">
       <text class="hy-count-down__text">{{ formattedTime }}</text>
     </slot>
@@ -7,155 +11,188 @@
 </template>
 
 <script lang="ts">
+/**
+ * 一般使用于某个活动的截止时间上，通过数字的变化，给用户明确的时间感受，提示用户进行某一个行为操作。
+ * @displayName hy-count-down
+ */
+defineOptions({})
 export default {
   name: 'hy-count-down',
   options: {
     addGlobalClass: true,
     virtualHost: true,
-    styleIsolation: 'shared'
-  }
+    styleIsolation: 'shared',
+  },
 }
 </script>
 
 <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";
+import { onMounted, onUnmounted, ref, toRefs, watch } from 'vue'
+import type { CSSProperties, PropType } from 'vue'
+import { isSameSecond, parseFormat, parseTimeData } from './index'
+import { ICountDownEmits } from './typing'
 
-const props = withDefaults(defineProps<IProps>(), defaultProps);
-const { time, autoStart, millisecond, format } = toRefs(props);
-const emit = defineEmits(["change", "finish"]);
+// const props = withDefaults(defineProps<IProps>(), defaultProps)
+const props = defineProps({
+  /** 倒计时时长，单位ms */
+  time: {
+    type: Number,
+    default: 0,
+  },
+  /** 时间格式，DD-日，HH-时，mm-分，ss-秒，SSS-毫秒 */
+  format: {
+    type: String,
+    default: 'HH:mm:ss',
+  },
+  /** 是否自动开始倒计时 */
+  autoStart: {
+    type: Boolean,
+    default: true,
+  },
+  /** 是否展示毫秒倒计时 */
+  millisecond: {
+    type: Boolean,
+    default: false,
+  },
+  /** 定义需要用到的外部样式 */
+  customStyle: {
+    type: Object as PropType<CSSProperties>,
+  },
+  /** 自定义外部类名 */
+  customClass: String,
+})
+const { time, autoStart, millisecond, format } = toRefs(props)
+const emit = defineEmits<ICountDownEmits>()
 
-let timer: any;
+let timer: any
 // 各单位(天，时，分等)剩余时间
-const timeData = ref(parseTimeData(time.value));
+const timeData = ref(parseTimeData(time.value))
 // 格式化后的时间，如"03:23:21"
-const formattedTime = ref("");
+const formattedTime = ref('')
 // 倒计时是否正在进行中
-const runing = ref(false);
+const runing = ref(false)
 // 结束的毫秒时间戳
-const endTime = ref(0);
+const endTime = ref(0)
 // 剩余的毫秒时间
-const remainTime = ref(0);
+const remainTime = ref(0)
 
 watch(
   () => time.value,
   () => reset(),
-);
+)
 
 onMounted(() => {
-  reset();
-});
+  reset()
+})
 
 onUnmounted(() => {
-  clearTimeoutFn();
-});
+  clearTimeoutFn()
+})
 
 /**
  * @description 开始倒计时
  */
 const start = () => {
-  if (runing.value) return;
+  if (runing.value) return
   // 标识为进行中
-  runing.value = true;
+  runing.value = true
   // 结束时间戳 = 此刻时间戳 + 剩余的时间
-  endTime.value = Date.now() + remainTime.value;
-  toTick();
-};
+  endTime.value = Date.now() + remainTime.value
+  toTick()
+}
 
 /**
  * @description 根据是否展示毫秒，执行不同操作函数
  */
 const toTick = () => {
   if (millisecond.value) {
-    microTick();
+    microTick()
   } else {
-    macroTick();
+    macroTick()
   }
-};
+}
 const macroTick = () => {
-  clearTimeoutFn();
+  clearTimeoutFn()
   // 每隔一定时间，更新一遍定时器的值
   // 同时此定时器的作用也能带来毫秒级的更新
   timer = setTimeout(() => {
     // 获取剩余时间
-    const remain = getRemainTime();
+    const remain = getRemainTime()
     // 重设剩余时间
     if (!isSameSecond(remain, remainTime.value) || remain === 0) {
-      setRemainTime(remain);
+      setRemainTime(remain)
     }
     // 如果剩余时间不为0，则继续检查更新倒计时
     if (remainTime.value !== 0) {
-      macroTick();
+      macroTick()
     }
-  }, 30);
-};
+  }, 30)
+}
 
 const microTick = () => {
-  clearTimeoutFn();
+  clearTimeoutFn()
   timer = setTimeout(() => {
-    setRemainTime(getRemainTime());
+    setRemainTime(getRemainTime())
     if (remainTime.value !== 0) {
-      microTick();
+      microTick()
     }
-  }, 50);
-};
+  }, 50)
+}
 
 /**
  * @description 获取剩余的时间
  */
 const getRemainTime = () => {
   // 取最大值，防止出现小于0的剩余时间值
-  return Math.max(endTime.value - Date.now(), 0);
-};
+  return Math.max(endTime.value - Date.now(), 0)
+}
 /**
  * @description 设置剩余的时间
  */
 const setRemainTime = (remain: number) => {
-  remainTime.value = remain;
+  remainTime.value = remain
   // 根据剩余的毫秒时间，得出该有天，小时，分钟等的值，返回一个对象
-  timeData.value = parseTimeData(remain);
-  emit("change", timeData.value);
+  timeData.value = parseTimeData(remain)
+  emit('change', timeData.value)
   // 得出格式化后的时间
-  formattedTime.value = parseFormat(format.value, timeData.value);
+  formattedTime.value = parseFormat(format.value, timeData.value)
   // 如果时间已到，停止倒计时
   if (remain <= 0) {
-    pause();
-    emit("finish");
+    pause()
+    emit('finish')
   }
-};
+}
 // 重置倒计时
 const reset = () => {
-  pause();
-  remainTime.value = time.value;
-  setRemainTime(remainTime.value);
+  pause()
+  remainTime.value = time.value
+  setRemainTime(remainTime.value)
   if (autoStart.value) {
-    start();
+    start()
   }
-};
+}
 /**
  * @description 暂停倒计时
  * */
 const pause = () => {
-  runing.value = false;
-  clearTimeoutFn();
-};
+  runing.value = false
+  clearTimeoutFn()
+}
 /**
  * @description 清空定时器
  * */
 const clearTimeoutFn = () => {
-  clearTimeout(timer);
-  timer = null;
-};
+  clearTimeout(timer)
+  timer = null
+}
 
 defineExpose({
   reset,
   start,
   pause,
-});
+})
 </script>
 
 <style scoped lang="scss">
-@import "./index.scss";
+@import './index.scss';
 </style>

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

@@ -1,20 +1,33 @@
-import type { CSSProperties } from "vue";
+import type { CSSProperties } from 'vue'
 
 export default interface HyCountDownProps {
   /**
    * @description 倒计时时长，单位ms （默认 0 ）
    * */
-  time: number;
+  time: number
   /**
    * @description 时间格式，DD-日，HH-时，mm-分，ss-秒，SSS-毫秒  （默认 'HH:mm:ss' ）
    * */
-  format?: string;
+  format?: string
   /**
    * @description 是否自动开始倒计时 （默认 true ）
    * */
-  autoStart?: boolean;
+  autoStart?: boolean
   /**
    * @description 是否展示毫秒倒计时 （默认 false ）
    * */
-  millisecond?: boolean;
+  millisecond?: boolean
+}
+type TimeDataVo = {
+  days: number
+  hours: number
+  minutes: number
+  seconds: number
+  milliseconds: number
+}
+export interface ICountDownEmits {
+  /** 过程中，倒计时变化时触发 */
+  (e: 'change', time: TimeDataVo): void
+  /** 倒计时结束触发 */
+  (e: 'finish'): void
 }