hy-app 0.3.1 → 0.3.2

package/components/hy-avatar/hy-avatar.vue

@@ -1,5 +1,10 @@
 <template>
-  <view class="hy-avatar" :class="avatarClass" :style="avatarStyle" @tap="clickHandler">
+  <view
+    class="hy-avatar"
+    :class="avatarClass"
+    :style="avatarStyle"
+    @tap="clickHandler"
+  >
     <slot>
       <!-- #ifdef MP-WEIXIN || MP-QQ || MP-BAIDU  -->
       <open-data
@@ -16,7 +21,12 @@
       <!-- #ifndef MP-WEIXIN && MP-QQ && MP-BAIDU  -->
       <template v-if="mpAvatar && allowMp"></template>
       <!-- #endif -->
-      <HyIcon v-else-if="icon" :name="icon" :size="fontSize" :color="color"></HyIcon>
+      <HyIcon
+        v-else-if="icon"
+        :name="icon"
+        :size="fontSize"
+        :color="color"
+      ></HyIcon>
       <text
         v-else-if="text"
         :style="{
@@ -42,27 +52,28 @@
 
 <script lang="ts">
 export default {
-  name: 'hy-avatar',
+  name: "hy-avatar",
   options: {
     addGlobalClass: true,
     virtualHost: true,
-    styleIsolation: 'shared',
+    styleIsolation: "shared",
   },
-}
+};
 </script>
 
 <script setup lang="ts">
+import { computed, toRefs, ref, watch } from "vue";
+import type { CSSProperties, PropType } from "vue";
+import type { IAvatarEmit } from "./typing";
+import { addUnit, isNumber, random } from "../../utils";
+// 组件
+import HyIcon from "../hy-icon/hy-icon.vue";
+
 /**
  * 本组件一般用于展示头像的地方，如个人中心，或者评论列表页的用户头像展示等场所
  * @displayName hy-avatar
  */
-defineOptions({})
-import { computed, type CSSProperties, toRefs, ref, watch } from 'vue'
-import type { IAvatarEmit } from './typing'
-import { addUnit, random } from '../../utils'
-
-// 组件
-import HyIcon from '../hy-icon/hy-icon.vue'
+defineOptions({});
 
 // const props = withDefaults(defineProps<IProps>(), defaultProps)
 const props = defineProps({
@@ -74,7 +85,7 @@ const props = defineProps({
    * */
   shape: {
     type: String,
-    default: 'circle',
+    default: "circle",
   },
   /**
    * 头像尺寸
@@ -82,7 +93,7 @@ const props = defineProps({
    * */
   size: {
     type: [String, Number],
-    default: 'medium',
+    default: "medium",
   },
   /**
    * 头像图片的裁剪类型
@@ -90,19 +101,19 @@ const props = defineProps({
    * */
   mode: {
     type: String,
-    default: 'scaleToFill',
+    default: "scaleToFill",
   },
   /** 用文字替代图片，级别优先于src */
   text: String,
   /** 头像背景颜色 */
   bgColor: {
     type: String,
-    default: '#c0c4cc',
+    default: "#c0c4cc",
   },
   /** 文字颜色 */
   color: {
     type: String,
-    default: '#ffffff',
+    default: "#ffffff",
   },
   /** 文字大小 */
   fontSize: {
@@ -133,117 +144,105 @@ const props = defineProps({
   /** 自定义输入框外部样式 */
   customStyle: {
     type: Object as PropType<CSSProperties>,
+    default: () => {},
   },
-})
-const {
-  src,
-  defaultUrl,
-  text,
-  icon,
-  randomBgColor,
-  colorIndex,
-  bgColor,
-  size,
-  shape,
-  name,
-  customStyle,
-} = toRefs(props)
-const emit = defineEmits<IAvatarEmit>()
+});
+const emit = defineEmits<IAvatarEmit>();
 
 const base64Avatar =
-  'data:image/jpg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAAA8AAD/4QMraHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjMtYzAxMSA2Ni4xNDU2NjEsIDIwMTIvMDIvMDYtMTQ6NTY6MjcgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDUzYgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjREMEQwRkY0RjgwNDExRUE5OTY2RDgxODY3NkJFODMxIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjREMEQwRkY1RjgwNDExRUE5OTY2RDgxODY3NkJFODMxIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NEQwRDBGRjJGODA0MTFFQTk5NjZEODE4Njc2QkU4MzEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NEQwRDBGRjNGODA0MTFFQTk5NjZEODE4Njc2QkU4MzEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7/7gAOQWRvYmUAZMAAAAAB/9sAhAAGBAQEBQQGBQUGCQYFBgkLCAYG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'
+  "data:image/jpg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAAA8AAD/4QMraHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjMtYzAxMSA2Ni4xNDU2NjEsIDIwMTIvMDIvMDYtMTQ6NTY6MjcgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDUzYgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjREMEQwRkY0RjgwNDExRUE5OTY2RDgxODY3NkJFODMxIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjREMEQwRkY1RjgwNDExRUE5OTY2RDgxODY3NkJFODMxIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NEQwRDBGRjJGODA0MTFFQTk5NjZEODE4Njc2QkU4MzEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NEQwRDBGRjNGODA0MTFFQTk5NjZEODE4Njc2QkU4MzEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7/7gAOQWRvYmUAZMAAAAAB/9sAhAAGBAQEBQQGBQUGCQYFBgkLCAYG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";
 // 如果配置randomBgColor参数为true，在图标或者文字的模式下，会随机从中取出一个颜色值当做背景色
 const colors = ref<string[]>([
-  '#ffb34b',
-  '#f2bba9',
-  '#f7a196',
-  '#f18080',
-  '#88a867',
-  '#bfbf39',
-  '#89c152',
-  '#94d554',
-  '#f19ec2',
-  '#afaae4',
-  '#e1b0df',
-  '#c38cc1',
-  '#72dcdc',
-  '#9acdcb',
-  '#77b1cc',
-  '#448aca',
-  '#86cefa',
-  '#98d1ee',
-  '#73d1f1',
-  '#80a7dc',
-])
-const avatarUrl = ref(src.value)
-const allowMp = ref<boolean>(false)
+  "#ffb34b",
+  "#f2bba9",
+  "#f7a196",
+  "#f18080",
+  "#88a867",
+  "#bfbf39",
+  "#89c152",
+  "#94d554",
+  "#f19ec2",
+  "#afaae4",
+  "#e1b0df",
+  "#c38cc1",
+  "#72dcdc",
+  "#9acdcb",
+  "#77b1cc",
+  "#448aca",
+  "#86cefa",
+  "#98d1ee",
+  "#73d1f1",
+  "#80a7dc",
+]);
+const avatarUrl = ref(props.src);
+const allowMp = ref<boolean>(false);
 
 watch(
-  () => src.value,
+  () => props.src,
   (newVal) => {
-    avatarUrl.value = newVal
+    avatarUrl.value = newVal;
     // 如果没有传src，则主动触发error事件，用于显示默认的头像，否则src为''空字符等的时候，会无内容展示
     if (!newVal) {
-      errorHandler()
+      errorHandler();
     }
   },
   { immediate: true },
-)
+);
 
 const avatarStyle = computed<CSSProperties>(() => {
   const style: CSSProperties = {
     backgroundColor:
-      text.value || icon.value
-        ? randomBgColor.value
-          ? colors.value[colorIndex.value ? colorIndex.value : random(0, 19)]
-          : bgColor.value
-        : 'transparent',
-  }
-  if (typeof size.value === 'number') {
-    style.width = addUnit(size.value)
-    style.height = addUnit(size.value)
+      props.text || props.icon
+        ? props.randomBgColor
+          ? colors.value[props.colorIndex ? props.colorIndex : random(0, 19)]
+          : props.bgColor
+        : "transparent",
+  };
+  if (isNumber(props.size)) {
+    style.width = addUnit(props.size);
+    style.height = addUnit(props.size);
   }
 
-  return Object.assign(style, customStyle.value)
-})
+  return Object.assign(style, customStyle.value);
+});
 const avatarClass = computed<string[]>(() => {
-  const classes: string[] = [`hy-avatar--${shape.value}`]
-  if (typeof size.value === 'string') {
-    classes.push(`hy-avatar--${size.value}`)
+  const classes: string[] = [`hy-avatar--${shape.value}`];
+  if (typeof props.size === "string") {
+    classes.push(`hy-avatar--${props.size}`);
   }
 
-  return classes
-})
+  return classes;
+});
 
 const init = () => {
   // 目前只有这几个小程序平台具有open-data标签
   // 其他平台可以通过uni.getUserInfo类似接口获取信息，但是需要弹窗授权(首次)，不合符组件逻辑
   // 故目前自动获取小程序头像只支持这几个平台
   // #ifdef MP-WEIXIN || MP-QQ || MP-BAIDU
-  allowMp.value = true
+  allowMp.value = true;
   // #endif
-}
-init()
+};
+init();
 
 /**
  * @description 判断传入的name属性，是否图片路径，只要带有"/"均认为是图片形式
  * */
 const isImg = () => {
-  return src.value.indexOf('/') !== -1
-}
+  return props.src.indexOf("/") !== -1;
+};
 // 图片加载时失败时触发
 function errorHandler() {
-  avatarUrl.value = defaultUrl.value || base64Avatar
+  avatarUrl.value = defaultUrl.value || base64Avatar;
 }
 
 /**
  * @description 点击头像
  * */
 const clickHandler = (e: Event) => {
-  emit('click', name.value, e)
-}
+  emit("click", name.value, e);
+};
 </script>
 
 <style lang="scss" scoped>
-@import './index.scss';
+@import "./index.scss";
 </style>

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

@@ -11,31 +11,32 @@
     :style="[customStyle, badgeStyle]"
     @tap="onClick"
   >
-    {{ isDot ? '' : showValue }}
+    {{ isDot ? "" : showValue }}
   </text>
 </template>
 
 <script lang="ts">
 export default {
-  name: 'hy-badge',
+  name: "hy-badge",
   options: {
     addGlobalClass: true,
     virtualHost: true,
-    styleIsolation: 'shared',
+    styleIsolation: "shared",
   },
-}
+};
 </script>
 
 <script setup lang="ts">
+import { computed } from "vue";
+import type { CSSProperties, PropType } from "vue";
+import type { IBadgeEmit } from "./typing";
+import { addUnit } from "../../utils";
+
 /**
  * 该组件一般用于图标右上角显示未读的消息数量，提示用户点击，有圆点和圆包含文字两种形式。
  * @displayName hy-badge
  */
-defineOptions({})
-import type { IBadgeEmit } from './typing'
-import defaultProps from './props'
-import { computed, type CSSProperties, PropType, toRefs } from 'vue'
-import { addUnit } from '../../utils'
+defineOptions({});
 
 // const props = withDefaults(defineProps<IProps>(), defaultProps);
 const props = defineProps({
@@ -65,7 +66,7 @@ const props = defineProps({
    * */
   type: {
     type: String,
-    default: 'error',
+    default: "error",
   },
   /** 当数值为 0 时，是否展示 Badge */
   showZero: {
@@ -82,7 +83,7 @@ const props = defineProps({
    * */
   shape: {
     type: String,
-    default: 'circle',
+    default: "circle",
   },
   /**
    * 设置数字的显示方式
@@ -90,7 +91,7 @@ const props = defineProps({
    * */
   numberType: {
     type: String,
-    default: 'overflow',
+    default: "overflow",
   },
   /**  设置badge的位置偏移，格式为 [x, y]，也即设置的为top和right的值，absolute为true时有效 */
   offset: Array<number>,
@@ -108,60 +109,60 @@ const props = defineProps({
   customStyle: {
     type: Object as PropType<CSSProperties>,
   },
-})
-const { value, bgColor, color, numberType, absolute, offset, inverted, max, customStyle } =
-  toRefs(props)
-const emit = defineEmits<IBadgeEmit>()
+});
+const emit = defineEmits<IBadgeEmit>();
 
 /**
  * @description 整个组件的样式
  * */
 const badgeStyle = computed<CSSProperties>(() => {
-  const style: CSSProperties = {}
-  if (color.value) {
-    style.color = color.value
+  const style: CSSProperties = {};
+  if (props.color) {
+    style.color = props.color;
   }
-  if (bgColor.value && !inverted.value) {
-    style.backgroundColor = bgColor.value
+  if (props.bgColor && !props.inverted) {
+    style.backgroundColor = props.bgColor;
   }
-  if (absolute.value) {
-    style.position = 'absolute'
+  if (props.absolute) {
+    style.position = "absolute";
     // 如果有设置offset参数
-    if (offset.value && Array.isArray(offset.value)) {
+    if (props.offset && Array.isArray(props.offset)) {
       // 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 = props.offset[0];
+      const right = props.offset[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':
-      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
+  switch (props.numberType) {
+    case "overflow":
+      return Number(props.value) > Number(props.max)
+        ? props.max + "+"
+        : props.value;
+    case "ellipsis":
+      return Number(props.value) > Number(props.max) ? "..." : props.value;
+    case "limit":
+      return Number(props.value) > 999
+        ? Number(props.value) >= 9999
+          ? Math.floor((props.value / 1e4) * 100) / 100 + "w"
+          : Math.floor((props.value / 1e3) * 100) / 100 + "k"
+        : props.value;
     default:
-      return Number(value.value)
+      return Number(props.value);
   }
-})
+});
 
 const onClick = (e: Event) => {
-  emit('click', e)
-}
+  emit("click", e);
+};
 </script>
 
 <style lang="scss" scoped>
-@import './index.scss';
+@import "./index.scss";
 </style>