hy-app 0.2.13 → 0.2.15

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

@@ -1,5 +1,6 @@
 <template>
   <HyTransition mode="fade" :customStyle="backTopStyle" :show="show">
+    <!-- @slot 默认插槽 -->
     <slot>
       <view class="hy-back-top" :style="contentStyle" @click="backToTop">
         <HyIcon
@@ -23,59 +24,116 @@
 </template>
 
 <script lang="ts">
+/**
+ * 该组件一个用于长页面，滑动一定距离后，出现返回顶部按钮，方便快速返回顶部的场景。
+ * @displayName hy-back-top
+ */
+defineOptions({})
 export default {
   name: 'hy-back-top',
   options: {
     addGlobalClass: true,
     virtualHost: true,
-    styleIsolation: 'shared'
-  }
+    styleIsolation: 'shared',
+  },
 }
 </script>
 
 <script setup lang="ts">
-import { computed, type CSSProperties, toRefs } from "vue";
-import defaultProps from "./props";
-import { addUnit, getPx } from "../../utils";
-import { IconConfig } from "@/package";
-import type IProps from "./typing";
+import { computed, type CSSProperties, PropType, toRefs } from 'vue'
+import { addUnit, getPx } from '../../utils'
+import { IconConfig } from '../../config'
+import type { IBackTopEmit } from './typing'
+import type HyIconProps from '../hy-icon/typing'
 // 组件
-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'
 
-const props = withDefaults(defineProps<IProps>(), defaultProps);
-const { customStyle, duration, mode, bottom, right, top, scrollTop } =
-  toRefs(props);
-const emit = defineEmits(["click"]);
+// 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 backTopStyle = computed<CSSProperties>(() => {
   return {
     bottom: addUnit(bottom.value),
     right: addUnit(right.value),
-    width: "40px",
-    height: "40px",
-    position: "fixed",
+    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);
-});
+    borderRadius: mode.value === 'circle' ? '50%' : '4px',
+  }
+  return Object.assign(style, customStyle.value)
+})
 const show = computed<boolean>(() => {
-  return getPx(scrollTop.value) > getPx(top.value);
-});
+  return getPx(scrollTop.value) > getPx(top.value)
+})
 const backToTop = () => {
   uni.pageScrollTo({
     scrollTop: 0,
     duration: duration.value,
-  });
-  emit("click");
-};
+  })
+  emit('click')
+}
 </script>
 
 <style lang="scss" scoped>
-@import "./index.scss";
+@import './index.scss';
 </style>

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

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

package/components/hy-badge/hy-badge.vue

@@ -9,88 +9,159 @@
       `hy-badge--${type}${inverted ? '--inverted' : ''}`,
     ]"
     :style="[customStyle, badgeStyle]"
-    >{{ isDot ? "" : showValue }}</text
+    @tap="onClick"
   >
+    {{ isDot ? '' : showValue }}
+  </text>
 </template>
 
 <script lang="ts">
+/**
+ * 此选择器用于选择地址
+ * @displayName hy-address-picker
+ */
+defineOptions({})
 export default {
   name: 'hy-badge',
   options: {
     addGlobalClass: true,
     virtualHost: true,
-    styleIsolation: 'shared'
-  }
+    styleIsolation: 'shared',
+  },
 }
 </script>
 
 <script setup lang="ts">
-import type IProps from "./typing";
-import defaultProps from "./props";
-import { computed, type CSSProperties, toRefs } from "vue";
-import { addUnit } from "../../utils";
+import type { IBadgeEmit } from './typing'
+import defaultProps from './props'
+import { computed, type CSSProperties, PropType, toRefs } from 'vue'
+import { addUnit } from '../../utils'
 
-const props = withDefaults(defineProps<IProps>(), defaultProps);
-const {
-  value,
-  bgColor,
-  color,
-  numberType,
-  absolute,
-  offset,
-  inverted,
-  max,
-  customStyle,
-} = toRefs(props);
-const emit = defineEmits(["click"]);
+// const props = withDefaults(defineProps<IProps>(), defaultProps);
+const props = defineProps({
+  /** 是否显示圆点 */
+  isDot: {
+    type: Boolean,
+    default: false,
+  },
+  /** 显示的内容 */
+  value: {
+    type: Number,
+    default: 0,
+  },
+  /** 是否显示 */
+  show: {
+    type: Boolean,
+    default: true,
+  },
+  /** 最大值，超过最大值会显示 '{max}+' */
+  max: {
+    type: Number,
+    default: 999,
+  },
+  /**
+   * 主题类型
+   * @values error,warning,success,primary,info
+   * */
+  type: {
+    type: String,
+    default: 'error',
+  },
+  /** 当数值为 0 时，是否展示 Badge */
+  showZero: {
+    type: Boolean,
+    default: false,
+  },
+  /** 背景颜色，优先级比type高，如设置，type参数会失效 */
+  bgColor: String,
+  /** 字体颜色 */
+  color: String,
+  /**
+   * 徽标形状
+   * @values circle,horn
+   * */
+  shape: {
+    type: String,
+    default: 'circle',
+  },
+  /**
+   * 设置数字的显示方式
+   * @values overflow,ellipsis,limit
+   * */
+  numberType: {
+    type: String,
+    default: 'overflow',
+  },
+  /**  设置badge的位置偏移，格式为 [x, y]，也即设置的为top和right的值，absolute为true时有效 */
+  offset: Array<number>,
+  /** 是否反转背景和字体颜色 */
+  inverted: {
+    type: Boolean,
+    default: false,
+  },
+  /** 是否绝对定位 */
+  absolute: {
+    type: Boolean,
+    default: false,
+  },
+  /** 自定义输入框外部样式 */
+  customStyle: {
+    type: Object as PropType<CSSProperties>,
+  },
+})
+const { value, bgColor, color, numberType, absolute, offset, inverted, max, customStyle } =
+  toRefs(props)
+const emit = defineEmits<IBadgeEmit>()
 
 /**
  * @description 整个组件的样式
  * */
 const badgeStyle = computed<CSSProperties>(() => {
-  const style: CSSProperties = {};
+  const style: CSSProperties = {}
   if (color.value) {
-    style.color = color.value;
+    style.color = color.value
   }
   if (bgColor.value && !inverted.value) {
-    style.backgroundColor = bgColor.value;
+    style.backgroundColor = bgColor.value
   }
   if (absolute.value) {
-    style.position = "absolute";
+    style.position = 'absolute'
     // 如果有设置offset参数
     if (offset.value && Array.isArray(offset.value)) {
       // top和right分为为offset的第一个和第二个值，如果没有第二个值，则right等于top
-      const top = offset.value[0];
-      const right = offset.value[1] || top;
-      style.top = addUnit(top);
-      style.left = addUnit(right);
+      const top = offset.value[0]
+      const right = offset.value[1] || top
+      style.top = addUnit(top)
+      style.left = addUnit(right)
     }
   }
-  return style;
-});
+  return style
+})
 /**
  * @description 显示值
  * */
 const showValue = computed(() => {
   switch (numberType.value) {
-    case "overflow":
-      return Number(value.value) > Number(max.value)
-        ? max.value + "+"
-        : value.value;
-    case "ellipsis":
-      return Number(value.value) > Number(max.value) ? "..." : value.value;
-    case "limit":
+    case 'overflow':
+      return Number(value.value) > Number(max.value) ? max.value + '+' : value.value
+    case 'ellipsis':
+      return Number(value.value) > Number(max.value) ? '...' : value.value
+    case 'limit':
       return Number(value.value) > 999
         ? Number(value.value) >= 9999
-          ? Math.floor((value.value / 1e4) * 100) / 100 + "w"
-          : Math.floor((value.value / 1e3) * 100) / 100 + "k"
-        : value.value;
+          ? Math.floor((value.value / 1e4) * 100) / 100 + 'w'
+          : Math.floor((value.value / 1e3) * 100) / 100 + 'k'
+        : value.value
     default:
-      return Number(value.value);
+      return Number(value.value)
   }
-});
+})
+
+const onClick = (e: Event) => {
+  emit('click', e)
+}
 </script>
 
 <style lang="scss" scoped>
-@import "./index.scss";
+@import './index.scss';
 </style>

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

@@ -1,60 +1,65 @@
-import type { CSSProperties } from "vue";
+import type { CSSProperties } from 'vue'
 
 export default interface HyBadgeProps {
   /**
    * @description 是否显示圆点 （默认 false ）
    * */
-  isDot?: boolean;
+  isDot?: boolean
   /**
    * @description 显示的内容
    * */
-  value?: number;
+  value?: number
   /**
    * @description 是否显示 （默认 true ）
    * */
-  show?: boolean;
+  show?: boolean
   /**
    * @description 最大值，超过最大值会显示 '{max}+'  （默认999）
    * */
-  max?: number;
+  max?: number
   /**
    * @description 主题类型，error|warning|success|primary|info （默认 'error' ）
    * */
-  type?: HyApp.ThemeType;
+  type?: HyApp.ThemeType
   /**
    * @description 当数值为 0 时，是否展示 Badge （默认 false ）
    * */
-  showZero?: boolean;
+  showZero?: boolean
   /**
    * @description 背景颜色，优先级比type高，如设置，type参数会失效
    * */
-  bgColor?: string | null;
+  bgColor?: string | null
   /**
    * @description 字体颜色 （默认 '#ffffff' ）
    * */
-  color?: string | null;
+  color?: string | null
   /**
    * @description 徽标形状，circle-四角均为圆角，horn-左下角为直角 （默认 'circle' ）
    * */
-  shape?: "circle" | "horn";
+  shape?: 'circle' | 'horn'
   /**
    * @description 设置数字的显示方式，overflow|ellipsis|limit  （默认 'overflow' ）
    * */
-  numberType?: "overflow" | "ellipsis" | "limit";
+  numberType?: 'overflow' | 'ellipsis' | 'limit'
   /**
    * @description 设置badge的位置偏移，格式为 [x, y]，也即设置的为top和right的值，absolute为true时有效
    * */
-  offset?: number[] | null;
+  offset?: number[] | null
   /**
    * @description 是否反转背景和字体颜色（默认 false ）
    * */
-  inverted?: boolean;
+  inverted?: boolean
   /**
    * @description 是否绝对定位（默认 false ）
    * */
-  absolute?: boolean;
+  absolute?: boolean
   /**
    * @description 定义需要用到的外部样式
    * */
-  customStyle?: CSSProperties;
+  customStyle?: CSSProperties
+}
+
+export interface IBadgeEmit {
+  /** 点击触发 */
+  (e: 'click', event: Event): void
 }

package/components/hy-button/HyButton.docgen.js

@@ -0,0 +1,6 @@
+// HyButton.docgen.js
+const { buttonProps } = require('./props.ts')
+
+module.exports = {
+  props: buttonProps,
+}