hy-app 0.2.13 → 0.2.15

package/components/hy-tag/hy-tag.vue

@@ -16,9 +16,7 @@
             :top="icon?.top"
             :stop="icon?.stop"
             :round="icon?.round"
-            :customStyle="
-              Object.assign({ marginRight: '3px' }, icon?.customStyle)
-            "
+            :customStyle="Object.assign({ marginRight: '3px' }, icon?.customStyle)"
           ></HyIcon>
         </slot>
         <text :class="textClass" :style="textStyle">
@@ -33,37 +31,117 @@
         @tap.stop="closeHandler"
         :style="{ backgroundColor: closeColor }"
       >
-        <HyIcon
-          :name="IconConfig.CLOSE"
-          :size="closeSize"
-          color="#ffffff"
-        ></HyIcon>
+        <HyIcon :name="IconConfig.CLOSE" :size="closeSize" color="#ffffff"></HyIcon>
       </view>
     </view>
   </HyTransition>
 </template>
 
 <script lang="ts">
+/**
+ * tag组件一般用于标记和选择，我们提供了更加丰富的表现形式，能够较全面的涵盖您的使用场景
+ * @displayName hy-tag
+ */
+defineOptions({})
 export default {
   name: 'hy-tag',
   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 type IProps from "./typing";
-import HyTransition from "../hy-transition/hy-transition.vue";
-import HyIcon from "../hy-icon/hy-icon.vue";
-import { IconConfig } from "../../config";
-import { colorGradient } from "@/package";
+import { computed, type CSSProperties, PropType, toRefs } from 'vue'
+import type { ITagEmits } from './typing'
+import { IconConfig } from '../../config'
+import { colorGradient } from '../../utils'
+import HyIconProps from '../hy-icon/typing'
+
+// 组件
+import HyTransition from '../hy-transition/hy-transition.vue'
+import HyIcon from '../hy-icon/hy-icon.vue'
 
-const props = withDefaults(defineProps<IProps>(), defaultProps);
+// const props = withDefaults(defineProps<IProps>(), defaultProps)
+const props = defineProps({
+  /** 标签的文字内容 */
+  text: String,
+  /** 点击需要传得值 */
+  name: String,
+  /**
+   * 标签类型
+   * @values info,primary,success,error,warning
+   * */
+  type: {
+    type: String,
+    default: 'primary',
+  },
+  /** 禁用点击标签 */
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * 标签的大小
+   * @values large,medium,small
+   * */
+  size: {
+    type: String,
+    default: 'medium',
+  },
+  /**
+   * tag的形状
+   * @values circle,square
+   * */
+  shape: {
+    type: String,
+    default: 'square',
+  },
+  /** 背景颜色，默认为空字符串，即不处理 */
+  bgColor: String,
+  /** 标签字体颜色，默认为空字符串，即不处理 */
+  color: String,
+  /** 镂空形式标签的边框颜色 */
+  borderColor: String,
+  /** 关闭按钮图标的颜色 */
+  closeColor: {
+    type: String,
+    default: '#C6C7CB',
+  },
+  /** 镂空时是否填充背景色 */
+  plainFill: {
+    type: Boolean,
+    default: false,
+  },
+  /** 是否镂空 */
+  plain: {
+    type: Boolean,
+    default: false,
+  },
+  /** 是否可关闭，设置为true，文字右边会出现一个关闭图标 */
+  closable: {
+    type: Boolean,
+    default: false,
+  },
+  /** 标签显示与否 */
+  show: {
+    type: Boolean,
+    default: true,
+  },
+  /** 组件内置图标，或绝对路径的图片 */
+  icon: {
+    type: Object as PropType<HyIconProps>,
+    default: {},
+  },
+  /** 定义需要用到的外部样式 */
+  customStyle: {
+    type: Object as PropType<CSSProperties>,
+  },
+  /** 自定义外部类名 */
+  customClass: String,
+})
 const {
   text,
   name,
@@ -79,115 +157,112 @@ const {
   icon,
   disabled,
   customStyle,
-} = toRefs(props);
-const emit = defineEmits(["click", "close"]);
+  customClass,
+} = toRefs(props)
+const emit = defineEmits<ITagEmits>()
 
 /**
  * @description tag类名
  * */
 const tagClass = computed((): string[] => {
-  let classes = ["hy-tag", `hy-tag--${shape.value}`, `hy-tag--${size.value}`];
+  let classes = ['hy-tag', `hy-tag--${shape.value}`, `hy-tag--${size.value}`, customClass.value]
   if (disabled.value) {
-    classes.push("hy-tag--disabled");
+    classes.push('hy-tag--disabled')
   } else {
     const arr = [
       !plain.value && `hy-tag--${type.value}`,
       plain.value && `hy-tag--${type.value}--plain`,
       plain.value && plainFill.value && `hy-tag--${type.value}--plain__fill`,
-    ].filter(Boolean);
-    classes = classes.concat(arr as string[]);
+    ].filter(Boolean)
+    classes = classes.concat(arr as string[])
   }
-  return classes;
-});
+  return classes
+})
 /**
  * @description tag样式
  * */
 const tagStyle = computed<CSSProperties>(() => {
   const style: CSSProperties = {
-    marginRight: closable.value ? "10px" : 0,
-    marginTop: closable.value ? "10px" : 0,
+    marginRight: closable.value ? '10px' : 0,
+    marginTop: closable.value ? '10px' : 0,
     background: bgColor.value,
     borderColor: borderColor.value,
-  };
+  }
 
   if (color.value) {
     if (plain.value) {
-      style.borderColor = color.value;
+      style.borderColor = color.value
       if (plainFill.value) {
-        style.background = colorGradient(color.value, "#FFFFFF", 100)[90];
+        style.background = colorGradient(color.value, '#FFFFFF', 100)[90]
       }
     } else {
-      style.background = color.value;
-      style.borderColor = color.value;
+      style.background = color.value
+      style.borderColor = color.value
     }
   }
 
-  return Object.assign(style, customStyle.value);
-});
+  return Object.assign(style, customStyle.value)
+})
 
 /**
  * @description 文本样式
  * */
 const textStyle = computed(() => {
-  const style: CSSProperties = {};
-  if (color.value && plain.value) style.color = color.value;
-  return style;
-});
+  const style: CSSProperties = {}
+  if (color.value && plain.value) style.color = color.value
+  return style
+})
 /**
  * @description 文本类名
  * */
 const textClass = computed((): string[] => {
-  return [`hy-tag__text`, `hy-tag__text--${size.value}`];
-});
+  return [`hy-tag__text`, `hy-tag__text--${size.value}`]
+})
 
 /**
  * @description 关闭图标icon大小
  */
 const closeSize = computed(() => {
-  return size.value === "large" ? 15 : size.value === "medium" ? 13 : 11;
-});
+  return size.value === 'large' ? 15 : size.value === 'medium' ? 13 : 11
+})
 /**
  * @description 图标大小
  * */
 const hyIconSize = computed(() => {
   if (icon.value.size) {
-    return icon.value.size;
+    return icon.value.size
   } else {
-    return size.value === "large" ? 18 : size.value === "medium" ? 14 : 10;
+    return size.value === 'large' ? 18 : size.value === 'medium' ? 14 : 10
   }
-});
+})
 /**
  * @description 图标颜色
  * */
 const hyIconColor = computed(() => {
-  return icon.value.color
-    ? icon.value.color
-    : plain.value
-      ? type.value
-      : "#ffffff";
-});
+  return icon.value.color ? icon.value.color : plain.value ? type.value : '#ffffff'
+})
 
 /**
  * @description 点击关闭按钮
  * */
 const closeHandler = () => {
   if (!disabled.value) {
-    emit("close", text.value);
+    emit('close', text.value)
   }
-};
+}
 /**
  * @description 点击标签
  * */
 const clickHandler = () => {
   if (!disabled.value) {
-    emit("click", {
+    emit('click', {
       value: text.value,
       name: name.value,
-    });
+    })
   }
-};
+}
 </script>
 
 <style lang="scss" scoped>
-@import "./index.scss";
+@import './index.scss';
 </style>

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

@@ -1,69 +1,77 @@
-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 HyTagProps {
   /**
    * @description 标签的文字内容
    * */
-  text: string | number;
+  text: string | number
   /**
    * @description 点击需要传得值
    * */
-  name?: string | number;
+  name?: string | number
   /**
    * @description 标签类型info、primary、success、warning、error （默认 'primary' ）
    * */
-  type?: HyApp.ThemeType;
+  type?: HyApp.ThemeType
   /**
    * @description 禁用（默认 false ）
    * */
-  disabled?: boolean;
+  disabled?: boolean
   /**
    * @description 标签的大小，large，medium，small （默认 'medium' ）
    * */
-  size?: HyApp.SizeType;
+  size?: HyApp.SizeType
   /**
    * @description tag的形状，circle（两边半圆形）, square（方形，带圆角）（默认 'square' ）
    * */
-  shape?: HyApp.ShapeType;
+  shape?: HyApp.ShapeType
   /**
    * @description 背景颜色，默认为空字符串，即不处理
    * */
-  bgColor?: string;
+  bgColor?: string
   /**
    * @description 标签字体颜色，默认为空字符串，即不处理
    * */
-  color?: string;
+  color?: string
   /**
    * @description 镂空形式标签的边框颜色
    * */
-  borderColor?: string;
+  borderColor?: string
   /**
    * @description 关闭按钮图标的颜色（默认 #C6C7CB）
    * */
-  closeColor?: string;
+  closeColor?: string
   /**
    * @description 镂空时是否填充背景色（默认 false ）
    * */
-  plainFill?: boolean;
+  plainFill?: boolean
   /**
    * @description 是否镂空（默认 false ）
    * */
-  plain?: boolean;
+  plain?: boolean
   /**
    * @description 是否可关闭，设置为true，文字右边会出现一个关闭图标（默认 false ）
    * */
-  closable?: boolean;
+  closable?: boolean
   /**
    * @description 标签显示与否（默认 true ）
    * */
-  show?: boolean;
+  show?: boolean
   /**
    * @description 组件内置图标，或绝对路径的图片
    * */
-  icon?: Partial<HyIconProps>;
+  icon?: Partial<HyIconProps>
   /**
    * @description 定义需要用到的外部样式
    * */
-  customStyle?: CSSProperties;
+  customStyle?: CSSProperties
+}
+
+type TagParamsVo = { value: string; name: string }
+export interface ITagEmits {
+  /** 点击标签触发 */
+  (e: 'click', params: TagParamsVo): void
+  /** 关闭标签触发 */
+  (e: 'close', value: string): void
 }

package/components/hy-text/hy-text.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="hy-text" v-if="show" :style="wrapStyle" @tap="clickHandler">
+  <view :class="['hy-text', customClass]" v-if="show" :style="wrapStyle" @tap="clickHandler">
     <text
       :class="['hy-text__price', type && `hy-text__value--${type}`]"
       v-if="mode === 'price'"
@@ -52,6 +52,11 @@
 </template>
 
 <script lang="ts">
+/**
+ * 此组件集成了文本类在项目中的常用功能，包括状态，拨打电话，格式化日期，*替换，超链接...等功能。 您大可不必在使用特殊文本时自己定义，text组件几乎涵盖您能使用的大部分场景。
+ * @displayName hy-text
+ */
+defineOptions({})
 export default {
   name: 'hy-text',
   options: {
@@ -63,15 +68,110 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { computed, type CSSProperties, nextTick, toRefs } from 'vue'
-import type IProps from './typing'
-import defaultProps from './props'
+import { computed, type CSSProperties, nextTick, PropType, toRefs } from 'vue'
+import type { ITextEmits } from './typing'
 import { addUnit, error, formatName, formatTime, isDate, priceFormat } from '../../utils'
 
 // 组件
 import HyIcon from '../hy-icon/hy-icon.vue'
 
-const props = withDefaults(defineProps<IProps>(), defaultProps)
+// const props = withDefaults(defineProps<IProps>(), defaultProps)
+const props = defineProps({
+  /** 显示的值 */
+  text: String,
+  /** 主题颜色 */
+  type: String,
+  /** 是否显示 */
+  show: {
+    type: Boolean,
+    default: true,
+  },
+  /** 前置图标 */
+  prefixIcon: String,
+  /** 后置图标 */
+  suffixIcon: String,
+  /**
+   * 文本处理的匹配模式
+   * @values text,price,phone,name,date,link
+   * */
+  mode: {
+    type: String,
+    default: 'text',
+  },
+  /** mode=link下，配置的链接 */
+  href: String,
+  /** 格式化规则 */
+  format: String,
+  /** mode=phone时，点击文本是否拨打电话 */
+  call: {
+    type: Boolean,
+    default: false,
+  },
+  /** 小程序的打开方式 */
+  openType: String,
+  /** 是否粗体，默认normal */
+  bold: {
+    type: Boolean,
+    default: false,
+  },
+  /** 是否块状 */
+  block: {
+    type: Boolean,
+    default: false,
+  },
+  /** 文本显示的行数，如果设置，超出此行数，将会显示省略号 */
+  lines: String,
+  /** 文本颜色 */
+  color: String,
+  /** 字体大小 */
+  size: {
+    type: Number,
+    default: 15,
+  },
+  /** 图标的样式 */
+  iconStyle: {
+    type: Object as unknown as PropType<CSSProperties>,
+    default() {
+      return {
+        fontSize: '15px',
+      }
+    },
+  },
+  /**
+   * 文字装饰，下划线，中划线等，可选值
+   * @values none,underline,line-through
+   * */
+  decoration: String,
+  /** 外边距，对象、字符串，数值形式均可 */
+  margin: String,
+  /** 文本行高 */
+  lineHeight: String,
+  /**
+   * 文本对齐方式
+   * @values left,center,right
+   * */
+  align: {
+    type: String,
+    default: 'left',
+  },
+  /**
+   * 文字换行
+   * @values normal,break-word,anywhere
+   * */
+  wordWrap: {
+    type: String,
+    default: 'normal',
+  },
+  /** 是否占满剩余空间 */
+  flex: {
+    type: Boolean,
+    default: true,
+  },
+  /** 定义需要用到的外部样式 */
+  customStyle: Object as PropType<CSSProperties>,
+  /** 自定义外部类名 */
+  customClass: String,
+})
 const {
   type,
   show,
@@ -92,7 +192,7 @@ const {
   format,
   customStyle,
 } = toRefs(props)
-const emit = defineEmits(['click'])
+const emit = defineEmits<ITextEmits>()
 
 const wrapStyle = computed(() => {
   const style: CSSProperties = {

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

@@ -1,98 +1,103 @@
-import type { CSSProperties } from "vue";
+import type { CSSProperties } from 'vue'
 
-export type TextMode = "text" | "price" | "phone" | "name" | "date" | "link";
+export type TextMode = 'text' | 'price' | 'phone' | 'name' | 'date' | 'link'
 
 export default interface HyTextProps {
   /**
    * @description 显示的值
    * */
-  text: string | number;
+  text: string | number
   /**
    * @description 主题颜色
    * */
-  type?: HyApp.ThemeType;
+  type?: HyApp.ThemeType
   /**
    * @description 是否显示（默认 true ）
    * */
-  show?: boolean;
+  show?: boolean
   /**
    * @description 前置图标
    * */
-  prefixIcon?: string;
+  prefixIcon?: string
   /**
    * @description 后置图标
    * */
-  suffixIcon?: string;
+  suffixIcon?: string
   /**
    * @description 文本处理的匹配模式 text-普通文本，price-价格，phone-手机号，name-姓名，date-日期，link-超链接
    * */
-  mode?: TextMode;
+  mode?: TextMode
   /**
    * @description mode=link下，配置的链接
    * */
-  href?: string;
+  href?: string
   /**
    * @description 格式化规则
    * */
-  format?: Function | string;
+  format?: Function | string
   /**
    * @description mode=phone时，点击文本是否拨打电话（默认 false ）
    * */
-  call?: boolean;
+  call?: boolean
   /**
    * @description 小程序的打开方式
    * */
-  openType?: string;
+  openType?: string
   /**
    * @description 是否粗体，默认normal（默认 false ）
    * */
-  bold?: boolean;
+  bold?: boolean
   /**
    * @description 是否块状（默认 false ）
    * */
-  block?: boolean;
+  block?: boolean
   /**
    * @description 文本显示的行数，如果设置，超出此行数，将会显示省略号
    * */
-  lines?: string | number;
+  lines?: string | number
   /**
    * @description 文本颜色（默认 '#303133' ）
    * */
-  color?: string;
+  color?: string
   /**
-   * @description 是否显示字体大小（默认 15 ）遮罩
+   * @description 字体大小（默认 15 ）
    * */
-  size?: number | string;
+  size?: number | string
   /**
    * @description 图标的样式 （默认 {fontSize: '15px'} ）
    * */
-  iconStyle?: CSSProperties;
+  iconStyle?: CSSProperties
   /**
    * @description 文字装饰，下划线，中划线等，可选值 none|underline|line-through（默认 'none' ）
    * */
-  decoration?: "" | "none" | "underline" | "line-through";
+  decoration?: '' | 'none' | 'underline' | 'line-through'
   /**
    * @description 外边距，对象、字符串，数值形式均可（默认 0 ）
    * */
-  margin?: string;
+  margin?: string
   /**
    * @description 文本行高
    * */
-  lineHeight?: string | number;
+  lineHeight?: string | number
   /**
    * @description 文本对齐方式，可选值left|center|right（默认 'left' ）
    * */
-  align?: HyApp.RowCenterType;
+  align?: HyApp.RowCenterType
   /**
    * @description 文字换行，可选值break-word|normal|anywhere（默认 'normal' ）
    * */
-  wordWrap?: "normal" | "break-word" | "anywhere";
+  wordWrap?: 'normal' | 'break-word' | 'anywhere'
   /**
    * @description 是否占满剩余空间（默认：true）
    * */
-  flex?: boolean;
+  flex?: boolean
   /**
    * @description 定义需要用到的外部样式
    * */
-  customStyle?: CSSProperties;
+  customStyle?: CSSProperties
+}
+
+export interface ITextEmits {
+  /** 点击触发 */
+  (e: 'click', event: any): void
 }