hy-app 0.4.13 → 0.5.0

package/components/hy-code-input/typing.d.ts

@@ -1,78 +1,78 @@
 import type { CSSProperties } from 'vue'
 
 export default interface HyCodeInputProps {
-  modelValue: string | number
-  /**
-   * @description 键盘弹起时，是否自动上推页面（默认 true ）
-   * */
-  adjustPosition?: boolean
-  /**
-   * @description 最大输入长度（默认 6 ）
-   * */
-  maxlength?: number
-  /**
-   * @description 显示border
-   * */
-  border?: boolean
-  /**
-   * @description 是否用圆点填充（默认 false ）
-   * */
-  dot?: boolean
-  /**
-   * @description 显示模式，box-盒子模式，line-底部横线模式 （默认 'box' ）
-   * */
-  mode?: 'box' | string
-  /**
-   * @description 是否细边框 （默认 false ）
-   * */
-  hairline?: boolean
-  /**
-   * @description 字符间的距离 （默认 10 ）
-   * */
-  space?: number
-  /**
-   * @description 是否自动获取焦点 （默认 false ）
-   * */
-  focus?: boolean
-  /**
-   * @description 字体是否加粗 （默认 false ）
-   * */
-  bold?: boolean
-  /**
-   * @description 字体颜色 （默认 '#606266' ）
-   * */
-  color?: string
-  /**
-   * @description 字体大小，单位px （默认 18 ）
-   * */
-  fontSize?: number
-  /**
-   * @description 输入框的大小，宽等于高 （默认 35 ）
-   * */
-  size?: number | string
-  /**
-   * @description 是否隐藏原生键盘，如果想用自定义键盘的话，需设置此参数为true （默认 false ）
-   * */
-  disabledKeyboard?: boolean
-  /**
-   * @description 边框和线条颜色 （默认 '#c9cacc' ）
-   * */
-  borderColor?: string
-  /**
-   * @description 是否禁止输入"."符号 （默认 true ）
-   * */
-  disabledDot?: boolean
-  /**
-   * @description 定义需要用到的外部样式
-   * */
-  customStyle?: CSSProperties
+    modelValue: string | number
+    /**
+     * @description 键盘弹起时，是否自动上推页面（默认 true ）
+     * */
+    adjustPosition?: boolean
+    /**
+     * @description 最大输入长度（默认 6 ）
+     * */
+    maxlength?: number
+    /**
+     * @description 显示border
+     * */
+    border?: boolean
+    /**
+     * @description 是否用圆点填充（默认 false ）
+     * */
+    dot?: boolean
+    /**
+     * @description 显示模式，box-盒子模式，line-底部横线模式 （默认 'box' ）
+     * */
+    mode?: 'box' | string
+    /**
+     * @description 是否细边框 （默认 false ）
+     * */
+    hairline?: boolean
+    /**
+     * @description 字符间的距离 （默认 10 ）
+     * */
+    space?: number
+    /**
+     * @description 是否自动获取焦点 （默认 false ）
+     * */
+    focus?: boolean
+    /**
+     * @description 字体是否加粗 （默认 false ）
+     * */
+    bold?: boolean
+    /**
+     * @description 字体颜色 （默认 '#606266' ）
+     * */
+    color?: string
+    /**
+     * @description 字体大小，单位px （默认 18 ）
+     * */
+    fontSize?: number
+    /**
+     * @description 输入框的大小，宽等于高 （默认 35 ）
+     * */
+    size?: number | string
+    /**
+     * @description 是否隐藏原生键盘，如果想用自定义键盘的话，需设置此参数为true （默认 false ）
+     * */
+    disabledKeyboard?: boolean
+    /**
+     * @description 边框和线条颜色 （默认 '#c9cacc' ）
+     * */
+    borderColor?: string
+    /**
+     * @description 是否禁止输入"."符号 （默认 true ）
+     * */
+    disabledDot?: boolean
+    /**
+     * @description 定义需要用到的外部样式
+     * */
+    customStyle?: CSSProperties
 }
 
 export interface ICodeInputEmits {
-  /** 输入内容发生改变时触发 */
-  (e: 'change', value: string | number): void
-  /** 输入字符个数达maxlength值时触发确认 */
-  (e: 'finish', value: string | number): void
-  /** 更新值 */
-  (e: 'update:modelValue', value: string | number): void
+    /** 输入内容发生改变时触发 */
+    (e: 'change', value: string | number): void
+    /** 输入字符个数达maxlength值时触发确认 */
+    (e: 'finish', value: string | number): void
+    /** 更新值 */
+    (e: 'update:modelValue', value: string | number): void
 }

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

@@ -1,73 +1,51 @@
 <template>
-  <view :class="themeClass" :style="themeStyle">
-    <!-- @slot 默认插槽 -->
-    <slot />
-  </view>
+    <view :class="themeClass" :style="themeStyle">
+        <!-- @slot 默认插槽 -->
+        <slot />
+    </view>
 </template>
 
 <script lang="ts">
 export default {
-  name: "hy-config-provider",
-  options: {
-    addGlobalClass: true,
-    virtualHost: true,
-    styleIsolation: "shared",
-  },
-};
+    name: 'hy-config-provider',
+    options: {
+        addGlobalClass: true,
+        virtualHost: true,
+        styleIsolation: 'shared'
+    }
+}
 </script>
 
 <script setup lang="ts">
-import { computed } from "vue";
-import type { CSSProperties, PropType } from "vue";
-import { ColorConfig, addUnit, colorGradient } from "../../libs";
+import { computed } from 'vue'
+import { addUnit, colorGradient } from '../../libs'
+import configProviderProps from './props'
 
 /**
  * 将 ConfigProvider 组件的 theme 属性设置为 dark，可以开启深色模式。 深色模式会全局生效，使页面上的所有 Wot 组件变为深色风格。
  * @displayName hy-config-provider
  */
-defineOptions({});
+defineOptions({})
 
 // 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, Array] as PropType<CSSProperties | CSSProperties[]>,
-  },
-});
+const props = defineProps(configProviderProps)
 
 const themeClass = computed(() => {
-  return [props.customClass, "hy-config-provider", `hy-theme--${props.theme}`];
-});
+    return [props.customClass, 'hy-config-provider', `hy-theme--${props.theme}`]
+})
 
 const themeStyle = computed(() => {
-  return [
-    {
-      "--hy-theme-color": props.themeColor,
-      "--hy-theme--light": colorGradient(props.themeColor)[90],
-      padding: addUnit(props.padding),
-    },
-    props.customStyle,
-  ];
-});
+    return [
+        {
+            '--hy-theme-color': props.themeColor,
+            '--hy-theme--light': colorGradient(props.themeColor)[90],
+            padding: addUnit(props.padding)
+        },
+        props.customStyle
+    ]
+})
 </script>
 
 <style scoped lang="scss">
-@import "./index.scss";
+@import './index.scss';
 </style>

package/components/hy-config-provider/props.ts

@@ -1,13 +1,28 @@
-import type IProps from "./typing";
-import { ColorConfig } from "../../libs/config";
+import { ColorConfig } from '../../libs/config'
+import type { CSSProperties, PropType } from 'vue'
 
-const defaultProps: IProps = {
-  theme: "light",
-  themeColor: ColorConfig.primary,
-  themeLightColor: "#ecf5ff",
-  padding: "",
-  customClass: "",
-  customStyle: {},
-};
+const configProviderProps = {
+    /**
+     * 主题色，暗色或者默认白色
+     * @values dark,light
+     * */
+    theme: {
+        type: String,
+        default: 'light'
+    },
+    /** 主题色 */
+    themeColor: {
+        type: String,
+        default: ColorConfig.primary
+    },
+    /** 内边距 */
+    padding: [String, Number],
+    /** 定义需要用到的主题类名 */
+    customClass: String,
+    /** 定义需要用到的外部样式 */
+    customStyle: {
+        type: [Object, Array] as PropType<CSSProperties | CSSProperties[]>
+    }
+}
 
-export default defaultProps;
+export default configProviderProps

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

@@ -1,24 +1,24 @@
 import type { CSSProperties } from 'vue'
 
 export default interface HyConfigProviderProps {
-  /**
-   * @description dark-暗色、light-亮色
-   * */
-  theme?: HyApp.DarkModeType
-  /**
-   * @description 主题色（默认 #3c9cff ）
-   * */
-  themeColor?: string
-  /**
-   * @description 内边距（默认 10px ）
-   * */
-  padding?: string
-  /**
-   * @description 定义需要用到的主题类名
-   * */
-  customClass?: string | string[]
-  /**
-   * @description 定义需要用到的外部样式
-   * */
-  customStyle?: CSSProperties | CSSProperties[]
+    /**
+     * @description dark-暗色、light-亮色
+     * */
+    theme?: HyApp.DarkModeType
+    /**
+     * @description 主题色（默认 #3c9cff ）
+     * */
+    themeColor?: string
+    /**
+     * @description 内边距（默认 10px ）
+     * */
+    padding?: string
+    /**
+     * @description 定义需要用到的主题类名
+     * */
+    customClass?: string | string[]
+    /**
+     * @description 定义需要用到的外部样式
+     * */
+    customStyle?: CSSProperties | CSSProperties[]
 }

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

@@ -1,198 +1,170 @@
 <template>
-  <view :class="['hy-count-down', customClass]" :style="customStyle">
-    <!--
+    <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>
-  </view>
+        <slot :record="timeData">
+            <text class="hy-count-down__text">{{ formattedTime }}</text>
+        </slot>
+    </view>
 </template>
 
 <script lang="ts">
 export default {
-  name: "hy-count-down",
-  options: {
-    addGlobalClass: true,
-    virtualHost: true,
-    styleIsolation: "shared",
-  },
-};
+    name: 'hy-count-down',
+    options: {
+        addGlobalClass: true,
+        virtualHost: true,
+        styleIsolation: 'shared'
+    }
+}
 </script>
 
 <script setup lang="ts">
-import { onMounted, onUnmounted, ref, 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 { isSameSecond, parseFormat, parseTimeData } from './index'
+import type { ICountDownEmits } from './typing'
+import countDownProps from './props'
 
 /**
  * 一般使用于某个活动的截止时间上，通过数字的变化，给用户明确的时间感受，提示用户进行某一个行为操作。
  * @displayName hy-count-down
  */
-defineOptions({});
+defineOptions({})
 
-// 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 emit = defineEmits<ICountDownEmits>();
+const props = defineProps(countDownProps)
+const emit = defineEmits<ICountDownEmits>()
 
-let timer: any;
+let timer: any
 // 各单位(天，时，分等)剩余时间
-const timeData = ref(parseTimeData(props.time));
+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(
-  () => props.time,
-  () => reset(),
-);
+    () => props.time,
+    () => reset()
+)
 
 onMounted(() => {
-  reset();
-});
+    reset()
+})
 
 onUnmounted(() => {
-  clearTimeoutFn();
-});
+    clearTimeoutFn()
+})
 
 /**
  * @description 开始倒计时
  */
 const start = () => {
-  if (runing.value) return;
-  // 标识为进行中
-  runing.value = true;
-  // 结束时间戳 = 此刻时间戳 + 剩余的时间
-  endTime.value = Date.now() + remainTime.value;
-  toTick();
-};
+    if (runing.value) return
+    // 标识为进行中
+    runing.value = true
+    // 结束时间戳 = 此刻时间戳 + 剩余的时间
+    endTime.value = Date.now() + remainTime.value
+    toTick()
+}
 
 /**
  * @description 根据是否展示毫秒，执行不同操作函数
  */
 const toTick = () => {
-  if (props.millisecond) {
-    microTick();
-  } else {
-    macroTick();
-  }
-};
-const macroTick = () => {
-  clearTimeoutFn();
-  // 每隔一定时间，更新一遍定时器的值
-  // 同时此定时器的作用也能带来毫秒级的更新
-  timer = setTimeout(() => {
-    // 获取剩余时间
-    const remain = getRemainTime();
-    // 重设剩余时间
-    if (!isSameSecond(remain, remainTime.value) || remain === 0) {
-      setRemainTime(remain);
+    if (props.millisecond) {
+        microTick()
+    } else {
+        macroTick()
     }
-    // 如果剩余时间不为0，则继续检查更新倒计时
-    if (remainTime.value !== 0) {
-      macroTick();
-    }
-  }, 30);
-};
+}
+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);
-};
+    clearTimeoutFn()
+    timer = setTimeout(() => {
+        setRemainTime(getRemainTime())
+        if (remainTime.value !== 0) {
+            microTick()
+        }
+    }, 50)
+}
 
 /**
  * @description 获取剩余的时间
  */
 const getRemainTime = () => {
-  // 取最大值，防止出现小于0的剩余时间值
-  return Math.max(endTime.value - Date.now(), 0);
-};
+    // 取最大值，防止出现小于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(props.format, timeData.value);
-  // 如果时间已到，停止倒计时
-  if (remain <= 0) {
-    pause();
-    emit("finish");
-  }
-};
+    remainTime.value = remain
+    // 根据剩余的毫秒时间，得出该有天，小时，分钟等的值，返回一个对象
+    timeData.value = parseTimeData(remain)
+    emit('change', timeData.value)
+    // 得出格式化后的时间
+    formattedTime.value = parseFormat(props.format, timeData.value)
+    // 如果时间已到，停止倒计时
+    if (remain <= 0) {
+        pause()
+        emit('finish')
+    }
+}
 // 重置倒计时
 const reset = () => {
-  pause();
-  remainTime.value = props.time;
-  setRemainTime(remainTime.value);
-  if (props.autoStart) {
-    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,
-});
+    reset,
+    start,
+    pause
+})
 </script>
 
 <style scoped lang="scss">
-@import "./index.scss";
+@import './index.scss';
 </style>