hy-app 0.4.13 → 0.5.0

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

@@ -1,194 +1,117 @@
 <template>
-  <view
-    :class="`hy-icon ${customClass} hy-icon--${labelPos}`"
-    @tap="clickHandler"
-  >
-    <image
-      class="hy-icon__img"
-      v-if="isImg"
-      :src="name"
-      :mode="imgMode"
-      :style="[imgStyle, customStyle]"
-    ></image>
-    <text
-      v-else
-      class="hy-icon__icon"
-      :class="uClasses"
-      :style="[iconStyle, customStyle]"
-    ></text>
-    <!-- 这里进行空字符串判断，如果仅仅是v-if="label"，可能会出现传递0的时候，结果也无法显示 -->
-    <text
-      v-if="label"
-      class="hy-icon__label"
-      :style="{
-        color: labelColor,
-        fontSize: addUnit(labelSize),
-        marginLeft: labelPos == 'right' ? addUnit(space) : 0,
-        marginTop: labelPos == 'bottom' ? addUnit(space) : 0,
-      }"
-    >
-      {{ label }}
-    </text>
-  </view>
+    <view :class="`hy-icon ${customClass} hy-icon--${labelPos}`" @tap="clickHandler">
+        <image
+            class="hy-icon__img"
+            v-if="isImg"
+            :src="name"
+            :mode="imgMode"
+            :style="[imgStyle, customStyle]"
+        ></image>
+        <text
+            v-else
+            class="hy-icon__icon"
+            :class="uClasses"
+            :style="[iconStyle, customStyle]"
+        ></text>
+        <!-- 这里进行空字符串判断，如果仅仅是v-if="label"，可能会出现传递0的时候，结果也无法显示 -->
+        <text
+            v-if="label"
+            class="hy-icon__label"
+            :style="{
+                color: labelColor,
+                fontSize: addUnit(labelSize),
+                marginLeft: labelPos == 'right' ? addUnit(space) : 0,
+                marginTop: labelPos == 'bottom' ? addUnit(space) : 0
+            }"
+        >
+            {{ label }}
+        </text>
+    </view>
 </template>
 
 <script lang="ts">
 export default {
-  name: "hy-icon",
-  options: {
-    addGlobalClass: true,
-    virtualHost: true,
-    styleIsolation: "shared",
-  },
-};
+    name: 'hy-icon',
+    options: {
+        addGlobalClass: true,
+        virtualHost: true,
+        styleIsolation: 'shared'
+    }
+}
 </script>
 
 <script setup lang="ts">
-import { computed } from "vue";
-import type { PropType, CSSProperties } from "vue";
-import { addUnit } from "../../libs";
-import type { IIconEmits } from "./typing";
+import { computed } from 'vue'
+import type { CSSProperties } from 'vue'
+import { addUnit } from '../../libs'
+import type { IIconEmits } from './typing'
+import iconProps from './props'
 
 /**
  * 基于字体的图标集，包含了大多数常见场景的图标，使用简单，开箱即用，无需自己再写每个图标的样式，直接简单配置即可。支持自定义图标。
  * @displayName hy-icon
  */
-defineOptions({});
+defineOptions({})
 
-// const props = withDefaults(defineProps<IProps>(), defaultProps)
-const props = defineProps({
-  /** 图标名称 */
-  name: String,
-  /** 图标颜色 */
-  color: String,
-  /** 图标字体大小，单位px */
-  size: {
-    type: [Number, String],
-    default: "20px",
-  },
-  /** 是否显示粗体 */
-  bold: {
-    type: Boolean,
-    default: false,
-  },
-  /** 点击图标的时候传递事件出去的index（用于区分点击了哪一个） */
-  index: {
-    type: String,
-    default: "",
-  },
-  /** 自定义扩展前缀，方便用户扩展自己的图标库 */
-  customPrefix: {
-    type: String,
-    default: "hy-icon",
-  },
-  /** 图标右侧的label文字 */
-  label: String,
-  /**
-   * label相对于图标的位置，只能right或bottom
-   * @values right,bottom
-   * */
-  labelPos: {
-    type: String,
-    default: "right",
-  },
-  /** label字体大小，单位px */
-  labelSize: String,
-  /** 图标右侧的label文字颜色 */
-  labelColor: String,
-  /** label与图标的距离，单位px */
-  space: {
-    type: [Number, String],
-    default: "2px",
-  },
-  /** 图片的mode */
-  imgMode: String,
-  /** 显示图片小图标时的宽度 */
-  width: [String, Number],
-  /** 显示图片小图标时的高度 */
-  height: [String, Number],
-  /** 图标在垂直方向上的定位 用于解决某些情况下，让图标垂直居中的用途 */
-  top: {
-    type: [String, Number],
-    default: 0,
-  },
-  /** 是否阻止事件传播 */
-  stop: {
-    type: Boolean,
-    default: false,
-  },
-  /** 是否旋转 */
-  isRotate: {
-    type: Boolean,
-    default: false,
-  },
-  /** 图标圆角 */
-  round: {
-    type: [String, Number],
-    default: 0,
-  },
-  /** 定义需要用到的外部样式 */
-  customStyle: Object as PropType<CSSProperties>,
-  /** 自定义外部类名 */
-  customClass: String,
-});
-const emit = defineEmits<IIconEmits>();
+const props = defineProps(iconProps)
+const emit = defineEmits<IIconEmits>()
 
 const uClasses = computed(() => {
-  let classes: string | string[] = [
-    "iconfont",
-    `${props.customPrefix}-${props.name}`,
-    props.customPrefix,
-  ];
-  if (props.isRotate) classes.push("hy-rotate");
-  if (props.color)
-    // 主题色，通过类配置
-    classes.push("hy-icon__icon--" + props.color);
-  // 阿里，头条，百度小程序通过数组绑定类名时，无法直接使用[a, b, c]的形式，否则无法识别
-  // 故需将其拆成一个字符串的形式，通过空格隔开各个类名
-  //#ifdef MP-ALIPAY || MP-TOUTIAO || MP-BAIDU
-  classes = classes.join(" ");
-  //#endif
-  return classes;
-});
+    let classes: string | string[] = [
+        'iconfont',
+        `${props.customPrefix}-${props.name}`,
+        props.customPrefix
+    ]
+    if (props.isRotate) classes.push('hy-rotate')
+    if (props.color)
+        // 主题色，通过类配置
+        classes.push('hy-icon__icon--' + props.color)
+    // 阿里，头条，百度小程序通过数组绑定类名时，无法直接使用[a, b, c]的形式，否则无法识别
+    // 故需将其拆成一个字符串的形式，通过空格隔开各个类名
+    //#ifdef MP-ALIPAY || MP-TOUTIAO || MP-BAIDU
+    classes = classes.join(' ')
+    //#endif
+    return classes
+})
 const iconStyle = computed<CSSProperties>(() => {
-  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,
-  };
+    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 props.name?.indexOf("/") !== -1;
-});
+    return props.name?.indexOf('/') !== -1
+})
 const imgStyle = computed((): CSSProperties => {
-  let style: CSSProperties = {};
-  // 如果设置width和height属性，则优先使用，否则使用size属性
-  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;
-});
+    let style: CSSProperties = {}
+    // 如果设置width和height属性，则优先使用，否则使用size属性
+    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", props.index, e);
-  // 是否阻止事件冒泡
-  props.stop && e.stopPropagation();
-};
+    emit('click', props.index, e)
+    // 是否阻止事件冒泡
+    props.stop && e.stopPropagation()
+}
 </script>
 
 <style lang="scss" scoped>
-@import "./index.scss";
+@import './index.scss';
 </style>

package/components/hy-icon/props.ts

@@ -1,25 +1,79 @@
-import type IProps from './typing'
+import type { CSSProperties, PropType } from 'vue'
 
-const defaultProps: IProps = {
-  name: '',
-  color: '',
-  size: '20px',
-  bold: false,
-  index: '',
-  customPrefix: 'hy-icon',
-  label: '',
-  labelPos: 'right',
-  labelSize: '',
-  labelColor: '',
-  space: '2px',
-  imgMode: '',
-  width: '',
-  height: '',
-  top: 0,
-  stop: false,
-  isRotate: false,
-  round: 0,
-  customClass: '',
+const iconProps = {
+    /** 图标名称 */
+    name: String,
+    /** 图标颜色 */
+    color: String,
+    /** 图标字体大小，单位px */
+    size: {
+        type: [Number, String],
+        default: '20px'
+    },
+    /** 是否显示粗体 */
+    bold: {
+        type: Boolean,
+        default: false
+    },
+    /** 点击图标的时候传递事件出去的index（用于区分点击了哪一个） */
+    index: {
+        type: String,
+        default: ''
+    },
+    /** 自定义扩展前缀，方便用户扩展自己的图标库 */
+    customPrefix: {
+        type: String,
+        default: 'hy-icon'
+    },
+    /** 图标右侧的label文字 */
+    label: String,
+    /**
+     * label相对于图标的位置，只能right或bottom
+     * @values right,bottom
+     * */
+    labelPos: {
+        type: String,
+        default: 'right'
+    },
+    /** label字体大小，单位px */
+    labelSize: String,
+    /** 图标右侧的label文字颜色 */
+    labelColor: String,
+    /** label与图标的距离，单位px */
+    space: {
+        type: [Number, String],
+        default: '2px'
+    },
+    /** 图片的mode */
+    imgMode: String,
+    /** 显示图片小图标时的宽度 */
+    width: [String, Number],
+    /** 显示图片小图标时的高度 */
+    height: [String, Number],
+    /** 图标在垂直方向上的定位 用于解决某些情况下，让图标垂直居中的用途 */
+    top: {
+        type: [String, Number],
+        default: 0
+    },
+    /** 是否阻止事件传播 */
+    stop: {
+        type: Boolean,
+        default: false
+    },
+    /** 是否旋转 */
+    isRotate: {
+        type: Boolean,
+        default: false
+    },
+    /** 图标圆角 */
+    round: {
+        type: [String, Number],
+        default: 0
+    },
+    /** 定义需要用到的外部样式 */
+    customStyle: Object as PropType<CSSProperties>,
+    /** 自定义外部类名 */
+    customClass: String
 }
 
-export default defaultProps
+export default iconProps

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

@@ -1,89 +1,90 @@
 import { CSSProperties } from 'vue'
 
 export default interface HyIconProps {
-  /**
-   * @description 图标名称，见示例图标集
-   * */
-  name: string | HyIconConfig
-  /**
-   * @description 图标颜色
-   * */
-  color?: string
-  /**
-   * @description 图标字体大小，单位px （默认 '16px' ）
-   * */
-  size?: string | number
-  /**
-   * @description 是否显示粗体 （默认 false ）
-   * */
-  bold?: boolean
-  /**
-   * @description 点击图标的时候传递事件出去的index（用于区分点击了哪一个）
-   * */
-  index?: string | number
-  /**
-   * @description 自定义扩展前缀，方便用户扩展自己的图标库 （默认 'hy-icon' ）
-   * */
-  customPrefix?: string
-  /**
-   * @description 图标右侧的label文字
-   * */
-  label?: string
-  /**
-   * @description label相对于图标的位置，只能right或bottom （默认 'right' ）
-   * */
-  labelPos?: 'right' | 'bottom'
-  /**
-   * @description label字体大小，单位px （默认 '15px' ）
-   * */
-  labelSize?: string | number
-  /**
-   * @description 图标右侧的label文字颜色
-   * */
-  labelColor?: string
-  /**
-   * @description label与图标的距离，单位px （默认 '3px' ）
-   * */
-  space?: string | number
-  /**
-   * @description 图片的mode
-   * */
-  imgMode?: string
-  /**
-   * @description 显示图片小图标时的宽度
-   * */
-  width?: string | number
-  /**
-   * @description 显示图片小图标时的高度
-   * */
-  height?: string | number
-  /**
-   * @description 图标在垂直方向上的定位 用于解决某些情况下，让图标垂直居中的用途  （默认 0 ）
-   * */
-  top?: number | string
-  /**
-   * @description 是否阻止事件传播 （默认 false ）
-   * */
-  stop?: boolean
-  /**
-   * @description 是否旋转 （默认 false ）
-   * */
-  isRotate?: boolean
-  /**
-   * @description 图标圆角
-   * */
-  round?: string | number
-  /**
-   * @description 自定义样式
-   * */
-  customStyle?: CSSProperties
-  /**
-   * @description 自定义类名
-   * */
-  customClass?: string
+    /**
+     * @description 图标名称，见示例图标集
+     * */
+    name: string | HyIconConfig
+    /**
+     * @description 图标颜色
+     * */
+    color?: string
+    /**
+     * @description 图标字体大小，单位px （默认 '16px' ）
+     * */
+    size?: string | number
+
+    /**
+     * @description 是否显示粗体 （默认 false ）
+     * */
+    bold?: boolean
+    /**
+     * @description 点击图标的时候传递事件出去的index（用于区分点击了哪一个）
+     * */
+    index?: string | number
+    /**
+     * @description 自定义扩展前缀，方便用户扩展自己的图标库 （默认 'hy-icon' ）
+     * */
+    customPrefix?: string
+    /**
+     * @description 图标右侧的label文字
+     * */
+    label?: string
+    /**
+     * @description label相对于图标的位置，只能right或bottom （默认 'right' ）
+     * */
+    labelPos?: 'right' | 'bottom'
+    /**
+     * @description label字体大小，单位px （默认 '15px' ）
+     * */
+    labelSize?: string | number
+    /**
+     * @description 图标右侧的label文字颜色
+     * */
+    labelColor?: string
+    /**
+     * @description label与图标的距离，单位px （默认 '3px' ）
+     * */
+    space?: string | number
+    /**
+     * @description 图片的mode
+     * */
+    imgMode?: string
+    /**
+     * @description 显示图片小图标时的宽度
+     * */
+    width?: string | number
+    /**
+     * @description 显示图片小图标时的高度
+     * */
+    height?: string | number
+    /**
+     * @description 图标在垂直方向上的定位 用于解决某些情况下，让图标垂直居中的用途  （默认 0 ）
+     * */
+    top?: number | string
+    /**
+     * @description 是否阻止事件传播 （默认 false ）
+     * */
+    stop?: boolean
+    /**
+     * @description 是否旋转 （默认 false ）
+     * */
+    isRotate?: boolean
+    /**
+     * @description 图标圆角
+     * */
+    round?: string | number
+    /**
+     * @description 自定义样式
+     * */
+    customStyle?: CSSProperties
+    /**
+     * @description 自定义类名
+     * */
+    customClass?: string
 }
 
 export interface IIconEmits {
-  /** 点击图标触发 */
-  (e: 'click', index: string, e: Event): void
+    /** 点击图标触发 */
+    (e: 'click', index: string, e: Event): void
 }