hy-app 0.3.0 → 0.3.2

package/components/hy-grid/hy-grid.vue

@@ -24,7 +24,9 @@
             :top="item?.iconConfig?.top || iconConfig?.top"
             :stop="item?.iconConfig?.stop || iconConfig?.stop"
             :round="item?.iconConfig?.round || iconConfig?.round || 6"
-            :customStyle="item?.iconConfig?.customStyle || iconConfig?.customStyle"
+            :customStyle="
+              item?.iconConfig?.customStyle || iconConfig?.customStyle
+            "
           ></HyIcon>
         </slot>
       </view>
@@ -34,29 +36,29 @@
 
 <script lang="ts">
 export default {
-  name: 'hy-grid',
+  name: "hy-grid",
   options: {
     addGlobalClass: true,
     virtualHost: true,
-    styleIsolation: 'shared',
+    styleIsolation: "shared",
   },
-}
+};
 </script>
 
 <script setup lang="ts">
-import { computed, toRefs } from 'vue'
-import type { CSSProperties, PropType } from 'vue'
-import type { CustomKeysVo, GridItemVo, IGridEmits } from './typing'
-import { addUnit } from '../../utils'
-import type HyIconProps from '../hy-icon/typing'
+import { computed } from "vue";
+import type { CSSProperties, PropType } from "vue";
+import type { CustomKeysVo, GridItemVo, IGridEmits } from "./typing";
+import { addUnit } from "../../utils";
+import type HyIconProps from "../hy-icon/typing";
 // 组件
-import HyIcon from '../hy-icon/hy-icon.vue'
+import HyIcon from "../hy-icon/hy-icon.vue";
 
 /**
  * 宫格组件一般用于同时展示多个同类项目的场景，可以给宫格的项目设置徽标组件(badge)，或者图标等，也可以扩展为左右滑动的轮播形式
  * @displayName hy-grid
  */
-defineOptions({})
+defineOptions({});
 
 // const props = withDefaults(defineProps<IProps>(), defaultProps);
 const props = defineProps({
@@ -69,8 +71,8 @@ const props = defineProps({
   customKeys: {
     type: Object as PropType<CustomKeysVo>,
     default: () => ({
-      name: 'name',
-      icon: 'icon',
+      name: "name",
+      icon: "icon",
     }),
   },
   /** 宫格的列数 */
@@ -86,7 +88,7 @@ const props = defineProps({
   /** 单个宫格高度 */
   itemHeight: {
     type: [Number, String],
-    default: '80px',
+    default: "80px",
   },
   /**
    * 宫格对齐方式，表现为数量少的时候，靠左，居中，还是靠右
@@ -94,7 +96,7 @@ const props = defineProps({
    * */
   align: {
     type: String,
-    default: 'left',
+    default: "left",
   },
   /** 间隔 */
   gap: {
@@ -104,7 +106,7 @@ const props = defineProps({
   /** 宫格的背景颜色 */
   bgColor: {
     type: String,
-    default: 'transparent',
+    default: "transparent",
   },
   /** 图标属性api配置集合 */
   iconConfig: Object as PropType<HyIconProps>,
@@ -112,47 +114,46 @@ const props = defineProps({
   customStyle: Object as PropType<CSSProperties>,
   /** 自定义外部类名 */
   customClass: String,
-})
-const { align, customStyle, bgColor, itemHeight, border } = toRefs(props)
-const emit = defineEmits<IGridEmits>()
+});
+const emit = defineEmits<IGridEmits>();
 
 /**
  * @description 宫格对齐方式
  * */
 const gridStyle = computed<CSSProperties>(() => {
-  let style: CSSProperties = {}
-  switch (align.value) {
-    case 'left':
-      style.justifyContent = 'flex-start'
-      break
-    case 'center':
-      style.justifyContent = 'center'
-      break
-    case 'right':
-      style.justifyContent = 'flex-end'
-      break
+  let style: CSSProperties = {};
+  switch (props.align) {
+    case "left":
+      style.justifyContent = "flex-start";
+      break;
+    case "center":
+      style.justifyContent = "center";
+      break;
+    case "right":
+      style.justifyContent = "flex-end";
+      break;
     default:
-      style.justifyContent = 'flex-start'
+      style.justifyContent = "flex-start";
   }
-  return Object.assign(style, customStyle.value || {})
-})
+  return Object.assign(style, props.customStyle);
+});
 
 const itemStyle = computed<CSSProperties>(() => {
   const style: CSSProperties = {
-    background: bgColor.value,
-    height: addUnit(itemHeight.value),
-    width: '100%',
-    border: border.value ? '0.5px solid #c8c7cc66' : '',
-  }
-  return style
-})
+    background: props.bgColor,
+    height: addUnit(props.itemHeight),
+    width: "100%",
+    border: props.border ? "0.5px solid #c8c7cc66" : "",
+  };
+  return style;
+});
 
 /**
  * @description 点击事件
  * */
 const childClick = (name: string | Record<string, any>) => {
-  emit('click', name)
-}
+  emit("click", name);
+};
 </script>
 
 <style lang="scss" scoped>
@@ -160,5 +161,5 @@ const childClick = (name: string | Record<string, any>) => {
   grid-gap: v-bind(gap);
   grid-template-columns: repeat(v-bind(col), 1fr);
 }
-@import './index.scss';
+@import "./index.scss";
 </style>

package/components/hy-icon/hy-icon.vue

@@ -1,5 +1,8 @@
 <template>
-  <view :class="`hy-icon ${customClass} hy-icon--${labelPos}`" @tap="clickHandler">
+  <view
+    :class="`hy-icon ${customClass} hy-icon--${labelPos}`"
+    @tap="clickHandler"
+  >
     <image
       class="hy-icon__img"
       v-if="isImg"
@@ -7,7 +10,12 @@
       :mode="imgMode"
       :style="[imgStyle, customStyle]"
     ></image>
-    <text v-else class="hy-icon__icon" :class="uClasses" :style="[iconStyle, customStyle]"></text>
+    <text
+      v-else
+      class="hy-icon__icon"
+      :class="uClasses"
+      :style="[iconStyle, customStyle]"
+    ></text>
     <!-- 这里进行空字符串判断，如果仅仅是v-if="label"，可能会出现传递0的时候，结果也无法显示 -->
     <text
       v-if="label"
@@ -26,26 +34,26 @@
 
 <script lang="ts">
 export default {
-  name: 'hy-icon',
+  name: "hy-icon",
   options: {
     addGlobalClass: true,
     virtualHost: true,
-    styleIsolation: 'shared',
+    styleIsolation: "shared",
   },
-}
+};
 </script>
 
 <script setup lang="ts">
-import { computed, toRefs } from 'vue'
-import type { PropType, CSSProperties } from 'vue'
-import { addUnit } from '../../utils'
-import type { IIconEmits } from './typing'
+import { computed } from "vue";
+import type { PropType, CSSProperties } from "vue";
+import { addUnit } from "../../utils";
+import type { IIconEmits } from "./typing";
 
 /**
  * 基于字体的图标集，包含了大多数常见场景的图标，使用简单，开箱即用，无需自己再写每个图标的样式，直接简单配置即可。支持自定义图标。
  * @displayName hy-icon
  */
-defineOptions({})
+defineOptions({});
 
 // const props = withDefaults(defineProps<IProps>(), defaultProps)
 const props = defineProps({
@@ -56,7 +64,7 @@ const props = defineProps({
   /** 图标字体大小，单位px */
   size: {
     type: [Number, String],
-    default: '20px',
+    default: "20px",
   },
   /** 是否显示粗体 */
   bold: {
@@ -64,11 +72,14 @@ const props = defineProps({
     default: false,
   },
   /** 点击图标的时候传递事件出去的index（用于区分点击了哪一个） */
-  index: String,
+  index: {
+    type: String,
+    default: "",
+  },
   /** 自定义扩展前缀，方便用户扩展自己的图标库 */
   customPrefix: {
     type: String,
-    default: 'hy-icon',
+    default: "hy-icon",
   },
   /** 图标右侧的label文字 */
   label: String,
@@ -78,7 +89,7 @@ const props = defineProps({
    * */
   labelPos: {
     type: String,
-    default: 'right',
+    default: "right",
   },
   /** label字体大小，单位px */
   labelSize: String,
@@ -87,7 +98,7 @@ const props = defineProps({
   /** label与图标的距离，单位px */
   space: {
     type: [Number, String],
-    default: '2px',
+    default: "2px",
   },
   /** 图片的mode */
   imgMode: String,
@@ -119,82 +130,65 @@ const props = defineProps({
   customStyle: Object as PropType<CSSProperties>,
   /** 自定义外部类名 */
   customClass: String,
-})
-const {
-  customPrefix,
-  name,
-  color,
-  size,
-  bold,
-  top,
-  width,
-  height,
-  stop,
-  index,
-  isRotate,
-  round,
-  customClass,
-  customStyle,
-} = toRefs(props)
-const emit = defineEmits<IIconEmits>()
+});
+const emit = defineEmits<IIconEmits>();
 
 const uClasses = computed(() => {
   let classes: string | string[] = [
-    'iconfont',
-    `${customPrefix.value}-${name.value}`,
-    customPrefix.value,
-  ]
-  if (isRotate.value) classes.push('hy-rotate')
-  if (color.value)
+    "iconfont",
+    `${props.customPrefix}-${props.name}`,
+    props.customPrefix,
+  ];
+  if (props.isRotate) classes.push("hy-rotate");
+  if (props.color)
     // 主题色，通过类配置
-    classes.push('hy-icon__icon--' + color.value)
+    classes.push("hy-icon__icon--" + props.color);
   // 阿里，头条，百度小程序通过数组绑定类名时，无法直接使用[a, b, c]的形式，否则无法识别
   // 故需将其拆成一个字符串的形式，通过空格隔开各个类名
   //#ifdef MP-ALIPAY || MP-TOUTIAO || MP-BAIDU
-  classes = classes.join(' ')
+  classes = classes.join(" ");
   //#endif
-  return classes
-})
+  return classes;
+});
 const iconStyle = computed<CSSProperties>(() => {
-  let style: CSSProperties = {}
-  style = {
-    fontSize: addUnit(size.value),
-    lineHeight: addUnit(size.value),
-    fontWeight: bold.value ? 'bold' : 'normal',
-    // 某些特殊情况需要设置一个到顶部的距离，才能更好的垂直居中
-    top: addUnit(top.value),
-    borderRadius: addUnit(round.value),
-    color: color.value,
-  }
+  const style: CSSProperties = {
+    fontSize: addUnit(props.size),
+    lineHeight: addUnit(props.size),
+    fontWeight: props.bold ? "bold" : "normal",
+    // 某些特殊情况需要设置一个到顶部的距离，才能更好地垂直居中
+    top: addUnit(props.top),
+    borderRadius: addUnit(props.round),
+    color: props.color,
+  };
 
-  return style
-})
+  return style;
+});
 
 /**
  * @description 判断传入的name属性，是否图片路径，只要带有"/"均认为是图片形式
  * */
 const isImg = computed(() => {
-  return name.value?.indexOf('/') !== -1
-})
+  return props.name?.indexOf("/") !== -1;
+});
 const imgStyle = computed((): CSSProperties => {
-  let style: CSSProperties = {}
+  let style: CSSProperties = {};
   // 如果设置width和height属性，则优先使用，否则使用size属性
-  style.width = width.value ? addUnit(width.value) : addUnit(size.value)
-  style.height = height.value ? addUnit(height.value) : addUnit(size.value)
-  style.borderRadius = addUnit(round.value)
-  return style
-})
+  style.width = props.width ? addUnit(props.width) : addUnit(props.size);
+  style.height = props.height ? addUnit(props.height) : addUnit(props.size);
+  style.borderRadius = addUnit(props.round);
+  return style;
+});
 
 /**
  * @description 点击
  * */
 const clickHandler = (e: Event) => {
-  emit('click', index.value, e)
+  emit("click", props.index, e);
   // 是否阻止事件冒泡
-  stop.value && e.stopPropagation()
-}
+  props.stop && e.stopPropagation();
+};
 </script>
 
 <style lang="scss" scoped>
-@import './index.scss';
+@import "./index.scss";
 </style>