hy-app 0.4.13 → 0.5.0

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

@@ -1,69 +1,70 @@
 import type { CSSProperties } from 'vue'
 
 export default interface HyAvatarProps {
-  /**
-   * @description 头像路径，如加载失败，将会显示默认头像(不能为相对路径)
-   * */
-  src?: string
-  /**
-   * @description 头像形状  （ circle (默认) | square）
-   * */
-  shape?: HyApp.ShapeType
-  /**
-   * @description 头像尺寸，可以为指定字符串(large, default, mini)，或者数值 （默认 40 ）
-   * */
-  size?: number | HyApp.SizeType
-  /**
-   * @description 头像图片的裁剪类型，与uni的image组件的mode参数一致，如效果达不到需求，可尝试传widthFix值 （默认 'scaleToFill' ）
-   * */
-  mode?: string
-  /**
-   * @description 用文字替代图片，级别优先于src
-   * */
-  text?: string
-  /**
-   * @description 背景颜色，一般显示文字时用 （默认 '#c0c4cc' ）
-   * */
-  bgColor?: string
-  /**
-   * @description 文字颜色 （默认 '#ffffff' ）
-   * */
-  color?: string
-  /**
-   * @description 文字大小  （默认 18 ）
-   * */
-  fontSize?: number | string
-  /**
-   * @description 显示的图标
-   * */
-  icon?: string
-  /**
-   * @description 显示小程序头像，只对百度，微信，QQ小程序有效  （默认 false ）
-   * */
-  mpAvatar?: boolean
-  /**
-   * @description 是否使用随机背景色  （默认 false ）
-   * */
-  randomBgColor?: boolean
-  /**
-   * @description 加载失败的默认头像(组件有内置默认图片)
-   * */
-  defaultUrl?: string
-  /**
-   * @description 如果配置了randomBgColor为true，且配置了此值，则从默认的背景色数组中取出对应索引的颜色值，取值0-19之间
-   * */
-  colorIndex?: number
-  /**
-   * @description 组件标识符  （默认 'level' ）
-   * */
-  name?: string
-  /**
-   * @description 定义需要用到的外部样式
-   * */
-  customStyle?: CSSProperties
+    /**
+     * @description 头像路径，如加载失败，将会显示默认头像(不能为相对路径)
+     * */
+    src?: string
+
+    /**
+     * @description 头像形状  （ circle (默认) | square）
+     * */
+    shape?: HyApp.ShapeType
+    /**
+     * @description 头像尺寸，可以为指定字符串(large, default, mini)，或者数值 （默认 40 ）
+     * */
+    size?: number | HyApp.SizeType
+    /**
+     * @description 头像图片的裁剪类型，与uni的image组件的mode参数一致，如效果达不到需求，可尝试传widthFix值 （默认 'scaleToFill' ）
+     * */
+    mode?: string
+    /**
+     * @description 用文字替代图片，级别优先于src
+     * */
+    text?: string
+    /**
+     * @description 背景颜色，一般显示文字时用 （默认 '#c0c4cc' ）
+     * */
+    bgColor?: string
+    /**
+     * @description 文字颜色 （默认 '#ffffff' ）
+     * */
+    color?: string
+    /**
+     * @description 文字大小  （默认 18 ）
+     * */
+    fontSize?: number | string
+    /**
+     * @description 显示的图标
+     * */
+    icon?: string
+    /**
+     * @description 显示小程序头像，只对百度，微信，QQ小程序有效  （默认 false ）
+     * */
+    mpAvatar?: boolean
+    /**
+     * @description 是否使用随机背景色  （默认 false ）
+     * */
+    randomBgColor?: boolean
+    /**
+     * @description 加载失败的默认头像(组件有内置默认图片)
+     * */
+    defaultUrl?: string
+    /**
+     * @description 如果配置了randomBgColor为true，且配置了此值，则从默认的背景色数组中取出对应索引的颜色值，取值0-19之间
+     * */
+    colorIndex?: number
+    /**
+     * @description 组件标识符  （默认 'level' ）
+     * */
+    name?: string
+    /**
+     * @description 定义需要用到的外部样式
+     * */
+    customStyle?: CSSProperties
 }
 
 export interface IAvatarEmit {
-  /** 点击头像触发 */
-  (e: 'click', name: string, e: Event): void
+    /** 点击头像触发 */
+    (e: 'click', name: string, e: Event): void
 }

package/components/hy-back-top/hy-back-top.vue

@@ -1,144 +1,89 @@
 <template>
-  <HyTransition mode="fade" :customStyle="backTopStyle" :show="show">
-    <!-- @slot 默认插槽 -->
-    <slot>
-      <view class="hy-back-top" :style="contentStyle" @click="backToTop">
-        <HyIcon
-          :name="icon?.name || IconConfig.DOWNLOAD"
-          :color="icon?.color"
-          :size="icon?.size"
-          :bold="icon?.bold"
-          :customPrefix="icon?.customPrefix"
-          :imgMode="icon?.imgMode"
-          :width="icon?.width"
-          :height="icon?.height"
-          :top="icon?.top"
-          :stop="icon?.stop"
-          :round="icon?.round"
-          :customStyle="icon?.customStyle"
-        ></HyIcon>
-        <text v-if="text" class="hy-back-top__text">{{ text }}</text>
-      </view>
-    </slot>
-  </HyTransition>
+    <HyTransition mode="fade" :customStyle="backTopStyle" :show="show">
+        <!-- @slot 默认插槽 -->
+        <slot>
+            <view class="hy-back-top" :style="contentStyle" @click="backToTop">
+                <HyIcon
+                    :name="icon?.name || IconConfig.DOWNLOAD"
+                    :color="icon?.color"
+                    :size="icon?.size"
+                    :bold="icon?.bold"
+                    :customPrefix="icon?.customPrefix"
+                    :imgMode="icon?.imgMode"
+                    :width="icon?.width"
+                    :height="icon?.height"
+                    :top="icon?.top"
+                    :stop="icon?.stop"
+                    :round="icon?.round"
+                    :customStyle="icon?.customStyle"
+                ></HyIcon>
+                <text v-if="text" class="hy-back-top__text">{{ text }}</text>
+            </view>
+        </slot>
+    </HyTransition>
 </template>
 
 <script lang="ts">
 export default {
-  name: "hy-back-top",
-  options: {
-    addGlobalClass: true,
-    virtualHost: true,
-    styleIsolation: "shared",
-  },
-};
+    name: 'hy-back-top',
+    options: {
+        addGlobalClass: true,
+        virtualHost: true,
+        styleIsolation: 'shared'
+    }
+}
 </script>
 
 <script setup lang="ts">
-import { computed, toRefs } from "vue";
-import type { CSSProperties, PropType } from "vue";
-import { IconConfig, addUnit, getPx } from "../../libs";
-import type { IBackTopEmit } from "./typing";
-import type HyIconProps from "../hy-icon/typing";
+import { computed } from 'vue'
+import type { CSSProperties } from 'vue'
+import { IconConfig, addUnit, getPx } from '../../libs'
+import type { IBackTopEmit } from './typing'
+import backTopProps from './props'
 // 组件
-import HyTransition from "../hy-transition/hy-transition.vue";
-import HyIcon from "../hy-icon/hy-icon.vue";
+import HyTransition from '../hy-transition/hy-transition.vue'
+import HyIcon from '../hy-icon/hy-icon.vue'
 
 /**
  * 该组件一个用于长页面，滑动一定距离后，出现返回顶部按钮，方便快速返回顶部的场景。
  * @displayName hy-back-top
  */
-defineOptions({});
+defineOptions({})
 
-// const props = withDefaults(defineProps<IProps>(), defaultProps)
-const props = defineProps({
-  /**
-   * 返回顶部的形状
-   * @values circle,square
-   * */
-  mode: {
-    type: String,
-    default: "circle",
-  },
-  /** 自定义图标属性集合 */
-  icon: {
-    type: Object as PropType<HyIconProps>,
-  },
-  /** 提示文字 */
-  text: String,
-  /** 返回顶部滚动时间 */
-  duration: {
-    type: Number,
-    default: 500,
-  },
-  /** 滚动距离 */
-  scrollTop: {
-    type: Number,
-    default: 0,
-  },
-  /** 距离顶部多少距离显示，单位px */
-  top: {
-    type: Number,
-    default: 400,
-  },
-  /** 返回顶部按钮到底部的距离，单位px */
-  bottom: {
-    type: Number,
-    default: 100,
-  },
-  /** 返回顶部按钮到右边的距离，单位px */
-  right: {
-    type: Number,
-    default: 20,
-  },
-  /** 层级 */
-  zIndex: {
-    type: Number,
-    default: 888,
-  },
-  /** 定义需要用到的外部样式 */
-  customStyle: {
-    type: Object as PropType<CSSProperties>,
-    default: {
-      transform: "rotate(180deg)",
-    },
-  },
-});
-const { customStyle, duration, mode, bottom, right, top, scrollTop } =
-  toRefs(props);
-const emit = defineEmits<IBackTopEmit>();
+const props = defineProps(backTopProps)
+const emit = defineEmits<IBackTopEmit>()
 
 const backTopStyle = computed<CSSProperties>(() => {
-  return {
-    bottom: addUnit(bottom.value),
-    right: addUnit(right.value),
-    width: "40px",
-    height: "40px",
-    position: "fixed",
-    zIndex: 10,
-  };
-});
+    return {
+        bottom: addUnit(props.bottom),
+        right: addUnit(props.right),
+        width: '40px',
+        height: '40px',
+        position: 'fixed',
+        zIndex: 10
+    }
+})
 const contentStyle = computed<CSSProperties>(() => {
-  const style: CSSProperties = {
-    borderRadius: mode.value === "circle" ? "50%" : "4px",
-  };
-  return Object.assign(style, customStyle.value);
-});
+    const style: CSSProperties = {
+        borderRadius: props.mode === 'circle' ? '50%' : '4px'
+    }
+    return Object.assign(style, props.customStyle)
+})
 const show = computed<boolean>(() => {
-  return getPx(scrollTop.value) > getPx(top.value);
-});
+    return getPx(props.scrollTop) > getPx(props.top)
+})
 const backToTop = () => {
-  uni.pageScrollTo({
-    scrollTop: 0,
-    // #ifndef MP-ALIPAY
-    // 支付宝不支持duration属性
-    duration: duration.value,
-    // #endif
-  });
-  emit("click");
-};
+    uni.pageScrollTo({
+        scrollTop: 0,
+        // #ifndef MP-ALIPAY
+        // 支付宝不支持duration属性
+        duration: props.duration
+        // #endif
+    })
+    emit('click')
+}
 </script>
 
 <style lang="scss" scoped>
-@import "./index.scss";
+@import './index.scss';
 </style>

package/components/hy-back-top/props.ts

@@ -1,18 +1,59 @@
-import type IProps from "./typing";
+import type IProps from './typing'
+import type { CSSProperties, PropType } from 'vue'
+import type HyIconProps from '../hy-icon/typing'
 
-const defaultProps: IProps = {
-  mode: "circle",
-  icon: {},
-  text: "",
-  duration: 500,
-  scrollTop: 0,
-  top: 400,
-  bottom: 100,
-  right: 20,
-  zIndex: 888,
-  customStyle: {
-    transform: "rotate(180deg)",
-  },
-};
+const backTopProps = {
+    /**
+     * 返回顶部的形状
+     * @values circle,square
+     * */
+    mode: {
+        type: String,
+        default: 'circle'
+    },
+    /** 自定义图标属性集合 */
+    icon: {
+        type: Object as PropType<HyIconProps>
+    },
+    /** 提示文字 */
+    text: String,
+    /** 返回顶部滚动时间 */
+    duration: {
+        type: Number,
+        default: 500
+    },
+    /** 滚动距离 */
+    scrollTop: {
+        type: Number,
+        default: 0
+    },
+    /** 距离顶部多少距离显示，单位px */
+    top: {
+        type: Number,
+        default: 400
+    },
+    /** 返回顶部按钮到底部的距离，单位px */
+    bottom: {
+        type: Number,
+        default: 100
+    },
+    /** 返回顶部按钮到右边的距离，单位px */
+    right: {
+        type: Number,
+        default: 20
+    },
+    /** 层级 */
+    zIndex: {
+        type: Number,
+        default: 888
+    },
+    /** 定义需要用到的外部样式 */
+    customStyle: {
+        type: Object as PropType<CSSProperties>,
+        default: {
+            transform: 'rotate(180deg)'
+        }
+    }
+}
 
-export default defaultProps;
+export default backTopProps

package/components/hy-back-top/typing.d.ts

@@ -2,49 +2,50 @@ import type { CSSProperties } from 'vue'
 import type HyIconProps from '../hy-icon/typing'
 
 export default interface HyBackTopProps {
-  /**
-   * @description 返回顶部的形状，circle-圆形，square-方形 （默认 'circle' ）
-   * */
-  mode?: HyApp.ShapeType
-  /**
-   * @description 自定义图标属性集合
-   * */
-  icon?: Partial<HyIconProps>
-  /**
-   * @description 提示文字
-   * */
-  text?: string
-  /**
-   * @description 返回顶部滚动时间 （默认 500）
-   * */
-  duration?: number
-  /**
-   * @description 滚动距离 （默认 0 ）
-   * */
-  scrollTop: number
-  /**
-   * @description 距离顶部多少距离显示，单位px （默认 400 ）
-   * */
-  top?: number | string
-  /**
-   * @description 返回顶部按钮到底部的距离，单位px （默认 100 ）
-   * */
-  bottom?: number | string
-  /**
-   * @description 返回顶部按钮到右边的距离，单位px （默认 20 ）
-   * */
-  right?: number | string
-  /**
-   * @description 层级   （默认 888 ）
-   * */
-  zIndex?: number
-  /**
-   * @description 定义需要用到的外部样式（默认{transform: "rotate(180deg)"}）
-   * */
-  customStyle?: CSSProperties
+    /**
+     * @description 返回顶部的形状，circle-圆形，square-方形 （默认 'circle' ）
+     * */
+    mode?: HyApp.ShapeType
+    /**
+     * @description 自定义图标属性集合
+     * */
+    icon?: Partial<HyIconProps>
+
+    /**
+     * @description 提示文字
+     * */
+    text?: string
+    /**
+     * @description 返回顶部滚动时间 （默认 500）
+     * */
+    duration?: number
+    /**
+     * @description 滚动距离 （默认 0 ）
+     * */
+    scrollTop: number
+    /**
+     * @description 距离顶部多少距离显示，单位px （默认 400 ）
+     * */
+    top?: number | string
+    /**
+     * @description 返回顶部按钮到底部的距离，单位px （默认 100 ）
+     * */
+    bottom?: number | string
+    /**
+     * @description 返回顶部按钮到右边的距离，单位px （默认 20 ）
+     * */
+    right?: number | string
+    /**
+     * @description 层级   （默认 888 ）
+     * */
+    zIndex?: number
+    /**
+     * @description 定义需要用到的外部样式（默认{transform: "rotate(180deg)"}）
+     * */
+    customStyle?: CSSProperties
 }
 
 export interface IBackTopEmit {
-  /** 点击触发 */
-  (e: 'click'): void
+    /** 点击触发 */
+    (e: 'click'): void
 }