hy-app 0.2.14 → 0.2.16

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/hy-button.vue

@@ -64,8 +64,8 @@
       !disabled && !loading && !color && (plain || type === 'info')
         ? 'hy-button--active--plain'
         : !disabled && !loading && !plain
-        ? 'hy-button--active'
-        : ''
+          ? 'hy-button--active'
+          : ''
     "
     @click="clickHandler"
     :class="bemClass"
@@ -115,6 +115,11 @@
 </template>
 
 <script lang="ts">
+/**
+ * 该组件内部实现以uni-app的基础button组件为基础，进行二次封装
+ * @displayName hy-button
+ */
+defineOptions({})
 export default {
   name: 'hy-button',
   options: {
@@ -126,39 +131,17 @@ export default {
 </script>
 
 <script setup lang="ts">
-/**
- * 提供试剂耗材的入库、申领、出库和明细查询等操作按钮
- * @displayName hy-button
- */
-// 支持 VueDocGen 生成文档时显示 JsDoc 的内容，也可以简单编写为：defineOptions({});
-defineOptions({})
-type MessageType = 'info' | 'primary' | 'error' | 'warning' | 'success'
-/**
- * 334
- * */
-export interface buttonProps {
-  /**
-   * 按钮类型
-   *
-   * @values primary,default,danger
-   * */
-  type: MessageType
-}
-// 支持 VueDocGen 生成文档时显示 JsDoc 的内容，也可以简单编写为：defineOptions({});
-defineOptions({})
-import { computed, type CSSProperties, toRefs, type PropType } from 'vue'
+import { computed, toRefs } from 'vue'
+import type { CSSProperties, PropType } from 'vue'
 import { bem, throttle } from '../../utils'
-import { defaultProps } from './props'
 import { ColorConfig } from '../../config'
-import type { HyButtonProps, IButtonEmits } from './typing.d.ts'
+import type { IButtonEmits } from './typing.d.ts'
 import type HyIconProps from '../hy-icon/typing'
 
 // 组件
 import HyIcon from '../hy-icon/hy-icon.vue'
 import HyLoading from '../hy-loading/hy-loading.vue'
-import { HyApp } from 'hy-app/typing/modules/common'
 
-// 可选：定义 props 类型
 // const props = withDefaults(defineProps<HyButtonProps>(), param)
 const props = defineProps({
   /** 是否显示按钮的细边框 */
@@ -171,7 +154,7 @@ const props = defineProps({
    * @values info,primary,error,warning,success
    * */
   type: {
-    type: String as PropType<HyApp.ThemeType>,
+    type: String,
     default: 'primary',
   },
   /**
@@ -179,7 +162,7 @@ const props = defineProps({
    * @values large,medium,small,mini
    * */
   size: {
-    type: String as PropType<HyApp.SizeType | 'mini'>,
+    type: String,
     default: 'medium',
   },
   /**
@@ -187,7 +170,7 @@ const props = defineProps({
    * @values circle,square
    * */
   shape: {
-    type: String as PropType<HyApp.ShapeType>,
+    type: String,
     default: 'square',
   },
   /** 按钮是否镂空，背景色透明  */
@@ -212,7 +195,7 @@ const props = defineProps({
    * @values spinner,circle,semicircle
    * */
   loadingMode: {
-    type: String as PropType<HyApp.LoadingMode>,
+    type: String,
     default: 'spinner',
   },
   /** 加载图标大小 */
@@ -231,7 +214,10 @@ const props = defineProps({
     type: Boolean,
     default: true,
   },
-  /** 指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文（默认 en ） */
+  /**
+   * 指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文（默认 en ）
+   * @values zh_CN,zh_TW,en
+   * */
   lang: {
     type: String,
     default: 'en',
@@ -269,9 +255,7 @@ const props = defineProps({
   /** 按钮文字，之所以通过props传入，是因为slot传入的话（注：nvue中无法控制文字的样式） */
   text: String,
   /** 按钮图标api集合 */
-  icon: {
-    type: Object as PropType<HyIconProps>,
-  },
+  icon: Object as PropType<HyIconProps>,
   /** 按钮颜色，支持传入linear-gradient渐变色 */
   color: String,
   /** 阻止事件冒泡 */
@@ -279,11 +263,9 @@ const props = defineProps({
     type: Boolean,
     default: true,
   },
-  /** 阻止事件冒泡 */
-  customStyle: {
-    type: Object as PropType<CSSProperties>,
-  },
-  /** 阻止事件冒泡 */
+  /** 定义需要用到的外部样式 */
+  customStyle: Object as unknown as PropType<CSSProperties>,
+  /** 自定义外部类名 */
   customClass: String,
 })
 const { disabled, loading, throttleTime, stop, size, type, plain, color, icon } = toRefs(props)