hy-app 0.3.0 → 0.3.2

package/components/hy-code-input/hy-code-input.vue

@@ -43,26 +43,27 @@
 
 <script lang="ts">
 export default {
-  name: 'hy-code-input',
+  name: "hy-code-input",
   options: {
     addGlobalClass: true,
     virtualHost: true,
-    styleIsolation: 'shared',
+    styleIsolation: "shared",
   },
-}
+};
 </script>
 
 <script setup lang="ts">
-import { computed, nextTick, onUnmounted, ref, toRefs, watch } from 'vue'
-import type { CSSProperties, PropType } from 'vue'
-import type { ICodeInputEmits } from './typing'
-import { addUnit, getPx } from '../../utils'
+import { computed, nextTick, onUnmounted, ref, watch } from "vue";
+import type { CSSProperties, PropType } from "vue";
+import type { ICodeInputEmits } from "./typing";
+import { addUnit, getPx } from "../../utils";
+import type { InputOnInputEvent } from "@uni-helper/uni-types";
 
 /**
  * 一般用于验证用户短信验证码的场景，也可以结合华玥的键盘组件使用
  * @displayName hy-code-input
  */
-defineOptions({})
+defineOptions({});
 
 // const props = withDefaults(defineProps<IProps>(), defaultProps)
 const props = defineProps({
@@ -97,7 +98,7 @@ const props = defineProps({
    * */
   mode: {
     type: String,
-    default: 'box',
+    default: "box",
   },
   /** 是否细边框 */
   hairline: {
@@ -147,38 +148,26 @@ const props = defineProps({
   customStyle: {
     type: Object as PropType<CSSProperties>,
   },
-})
-const {
-  modelValue,
-  focus,
-  maxlength,
-  border,
-  disabledDot,
-  size,
-  mode,
-  hairline,
-  space,
-  borderColor,
-} = toRefs(props)
-const emit = defineEmits<ICodeInputEmits>()
+});
+const emit = defineEmits<ICodeInputEmits>();
 
-const current = ref(0)
-const inputValue = ref('')
-const isFocus = ref(focus.value)
-let timer: ReturnType<typeof setInterval>
-const opacity = ref(1)
-const borderWidth = computed(() => (hairline.value ? '0.5px' : '2px'))
-const lineHeight = computed(() => (hairline.value ? '2px' : '4px'))
-const boxSize = addUnit(size.value)
+const current = ref(0);
+const inputValue = ref("");
+const isFocus = ref(props.focus);
+let timer: ReturnType<typeof setInterval>;
+const opacity = ref(1);
+const borderWidth = computed(() => (props.hairline ? "0.5px" : "2px"));
+const lineHeight = computed(() => (props.hairline ? "2px" : "4px"));
+const boxSize = addUnit(props.size);
 
 watch(
-  () => modelValue.value,
+  () => props.modelValue,
   (newValue: string | number) => {
-    inputValue.value = String(newValue).substring(0, maxlength.value)
-    current.value = newValue.toString().length
+    inputValue.value = String(newValue).substring(0, props.maxlength);
+    current.value = newValue.toString().length;
   },
   { immediate: true },
-)
+);
 
 watch(
   () => isFocus.value,
@@ -186,123 +175,125 @@ watch(
     // #ifdef APP-NVUE
     if (newValue) {
       timer = setInterval(() => {
-        opacity.value = Math.abs(opacity.value - 1)
-      }, 600)
+        opacity.value = Math.abs(opacity.value - 1);
+      }, 600);
     } else {
-      clearInterval(timer)
+      clearInterval(timer);
     }
     // #endif
   },
-)
+);
 
 onUnmounted(() => {
   // #ifdef APP-NVUE
-  clearInterval(timer)
+  clearInterval(timer);
   // #endif
-})
+});
 
 // 根据长度，循环输入框的个数，因为头条小程序数值不能用于v-for
 const codeLength = computed(() => {
-  return new Array(Number(maxlength.value))
-})
+  return new Array(Number(props.maxlength));
+});
 // 循环item的样式
 const itemStyle = computed(() => {
   return (index: number) => {
     const style: CSSProperties = {
       width: boxSize,
       height: boxSize,
-    }
-    if (borderColor.value) {
-      style['--hy-border-color'] = borderColor.value
+    };
+    if (props.borderColor) {
+      style["--hy-border-color"] = props.borderColor;
     }
     // 盒子模式下，需要额外进行处理
-    if (mode.value === 'box' && border.value) {
+    if (props.mode === "box" && props.border) {
       // 设置盒子的边框，如果是细边框，则设置为1px宽度
-      style.borderWidth = borderWidth.value
-      style.borderStyle = 'solid'
-      style.borderColor = borderColor.value
+      style.borderWidth = borderWidth.value;
+      style.borderStyle = "solid";
+      style.borderColor = props.borderColor;
       // 如果盒子间距为0的话
-      if (getPx(space.value) === 0) {
+      if (getPx(props.space) === 0) {
         // 给第一和最后一个盒子设置圆角
         if (index === 0) {
-          style.borderTopLeftRadius = '6px'
-          style.borderBottomLeftRadius = '6px'
+          style.borderTopLeftRadius = "6px";
+          style.borderBottomLeftRadius = "6px";
         }
         if (index === codeLength.value.length - 1) {
-          style.borderTopRightRadius = '6px'
-          style.borderBottomRightRadius = '6px'
+          style.borderTopRightRadius = "6px";
+          style.borderBottomRightRadius = "6px";
         }
         // 最后一个盒子的右边框需要保留
         if (index !== codeLength.value.length - 1) {
-          style.borderRight = 'none'
+          style.borderRight = "none";
         }
       }
     }
     if (index !== codeLength.value.length - 1) {
       // 设置验证码字符之间的距离，通过margin-right设置，最后一个字符，无需右边框
-      style.marginRight = addUnit(space.value)
+      style.marginRight = addUnit(props.space);
     } else {
       // 最后一个盒子的有边框需要保留
-      style.marginRight = 0
+      style.marginRight = 0;
     }
 
-    return style
-  }
-})
+    return style;
+  };
+});
 
 const itemClass = computed(() => {
   return (index: number) => {
     return [
-      'hy-code-input--item',
-      border.value ? `hy-code-input--item__${mode.value}` : 'hy-code-input--item__not',
+      "hy-code-input--item",
+      props.border
+        ? `hy-code-input--item__${props.mode}`
+        : "hy-code-input--item__not",
       current.value > index &&
-        getPx(space.value) != 0 &&
-        border.value &&
-        `hy-code-input--item__${mode.value}__border`,
+        getPx(props.space) != 0 &&
+        props.border &&
+        `hy-code-input--item__${props.mode}__border`,
       isFocus.value &&
         current.value === index &&
-        getPx(space.value) != 0 &&
-        (border.value
-          ? `hy-code-input--item__${mode.value}__active`
-          : 'hy-code-input--item__not__active'),
-    ]
-  }
-})
+        getPx(props.space) != 0 &&
+        (props.border
+          ? `hy-code-input--item__${props.mode}__active`
+          : "hy-code-input--item__not__active"),
+    ];
+  };
+});
 
 /**
  * @description 将输入的值，转为数组，给item历遍时，根据当前的索引显示数组的元素
  */
 const codeArray = computed(() => {
-  return String(inputValue.value).split('')
-})
+  return String(inputValue.value).split("");
+});
 
 /**
  * @description 监听输入框的值发生变化
  * */
-const inputHandler = (e: any) => {
-  const value = e.detail.value
-  inputValue.value = value
+const inputHandler = (e: InputOnInputEvent) => {
+  const value = e.detail.value;
+  inputValue.value = value;
   // 是否允许输入“.”符号
-  if (disabledDot.value) {
+  if (props.disabledDot) {
     nextTick(() => {
-      inputValue.value = value.replace('.', '')
-    })
+      inputValue.value = value.replace(".", "");
+    });
   }
   // 未达到maxlength之前，发送change事件，达到后发送finish事件
-  emit('change', value)
+  emit("change", value);
   // 修改通过v-model双向绑定的值
-  emit('update:modelValue', value)
+  emit("update:modelValue", value);
   // 达到用户指定输入长度时，发出完成事件
-  if (String(value).length >= Number(maxlength.value)) {
-    emit('finish', value)
+  if (String(value).length >= Number(props.maxlength)) {
+    emit("finish", value);
   }
-}
+};
 </script>
 
 <style scoped lang="scss">
-@import './index.scss';
-@import '../../libs/css/mixin.scss';
-@import '../../theme.scss';
+@import "./index.scss";
+@import "../../libs/css/mixin.scss";
+@import "../../theme.scss";
 @include b(code-input) {
   @include m(item) {
     &__box {

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

@@ -7,26 +7,26 @@
 
 <script lang="ts">
 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 { CSSProperties, PropType } from 'vue'
-import { addUnit, colorGradient } from '../../utils'
-import { ColorConfig } from '../../config'
+import { computed } from "vue";
+import type { CSSProperties, PropType } from "vue";
+import { addUnit, colorGradient } from "../../utils";
+import { ColorConfig } from "../../config";
 
 /**
  * 将 ConfigProvider 组件的 theme 属性设置为 dark，可以开启深色模式。 深色模式会全局生效，使页面上的所有 Wot 组件变为深色风格。
  * @displayName hy-config-provider
  */
-defineOptions({})
+defineOptions({});
 
 // const props = withDefaults(defineProps<IProps>(), defaultProps);
 const props = defineProps({
@@ -36,7 +36,7 @@ const props = defineProps({
    * */
   theme: {
     type: String,
-    default: 'light',
+    default: "light",
   },
   /** 主题色 */
   themeColor: {
@@ -49,27 +49,26 @@ const props = defineProps({
   customClass: String,
   /** 定义需要用到的外部样式 */
   customStyle: {
-    type: Object as PropType<CSSProperties>,
+    type: [Object, Array] as PropType<CSSProperties | CSSProperties[]>,
   },
-})
-const { theme, themeColor, customClass, customStyle, padding } = toRefs(props)
+});
 
 const themeClass = computed(() => {
-  return [customClass.value, 'hy-config-provider', `hy-theme--${theme.value}`]
-})
+  return [props.customClass, "hy-config-provider", `hy-theme--${props.theme}`];
+});
 
 const themeStyle = computed(() => {
   return [
     {
-      '--hy-theme-color': themeColor.value,
-      '--hy-theme--light': colorGradient(themeColor.value)[90],
-      padding: addUnit(padding.value),
+      "--hy-theme-color": props.themeColor,
+      "--hy-theme--light": colorGradient(props.themeColor)[90],
+      padding: addUnit(props.padding),
     },
-    customStyle.value,
-  ]
-})
+    props.customStyle,
+  ];
+});
 </script>
 
 <style scoped lang="scss">
-@import './index.scss';
+@import "./index.scss";
 </style>

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

@@ -12,26 +12,26 @@
 
 <script lang="ts">
 export default {
-  name: 'hy-count-down',
+  name: "hy-count-down",
   options: {
     addGlobalClass: true,
     virtualHost: true,
-    styleIsolation: 'shared',
+    styleIsolation: "shared",
   },
-}
+};
 </script>
 
 <script setup lang="ts">
-import { onMounted, onUnmounted, ref, toRefs, watch } from 'vue'
-import type { CSSProperties, PropType } from 'vue'
-import { isSameSecond, parseFormat, parseTimeData } from './index'
-import type { ICountDownEmits } from './typing'
+import { onMounted, onUnmounted, ref, watch } from "vue";
+import type { CSSProperties, PropType } from "vue";
+import { isSameSecond, parseFormat, parseTimeData } from "./index";
+import type { ICountDownEmits } from "./typing";
 
 /**
  * 一般使用于某个活动的截止时间上，通过数字的变化，给用户明确的时间感受，提示用户进行某一个行为操作。
  * @displayName hy-count-down
  */
-defineOptions({})
+defineOptions({});
 
 // const props = withDefaults(defineProps<IProps>(), defaultProps)
 const props = defineProps({
@@ -43,7 +43,7 @@ const props = defineProps({
   /** 时间格式，DD-日，HH-时，mm-分，ss-秒，SSS-毫秒 */
   format: {
     type: String,
-    default: 'HH:mm:ss',
+    default: "HH:mm:ss",
   },
   /** 是否自动开始倒计时 */
   autoStart: {
@@ -61,139 +61,138 @@ const props = defineProps({
   },
   /** 自定义外部类名 */
   customClass: String,
-})
-const { time, autoStart, millisecond, format } = toRefs(props)
-const emit = defineEmits<ICountDownEmits>()
+});
+const emit = defineEmits<ICountDownEmits>();
 
-let timer: any
+let timer: any;
 // 各单位(天，时，分等)剩余时间
-const timeData = ref(parseTimeData(time.value))
+const timeData = ref(parseTimeData(props.time));
 // 格式化后的时间，如"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,
+  () => props.time,
   () => 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()
+  if (props.millisecond) {
+    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(props.format, timeData.value);
   // 如果时间已到，停止倒计时
   if (remain <= 0) {
-    pause()
-    emit('finish')
+    pause();
+    emit("finish");
   }
-}
+};
 // 重置倒计时
 const reset = () => {
-  pause()
-  remainTime.value = time.value
-  setRemainTime(remainTime.value)
-  if (autoStart.value) {
-    start()
+  pause();
+  remainTime.value = props.time;
+  setRemainTime(remainTime.value);
+  if (props.autoStart) {
+    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>