hy-app 0.5.10 → 0.5.12

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

@@ -1,174 +1,174 @@
-<template>
-    <hy-transition mode="fade" :show="show" :custom-style="{ display: 'inline-block' }">
-        <view class="hy-tag__wrapper cursor-pointer">
-            <view :class="tagClass" @tap.stop="clickHandler" :style="tagStyle">
-                <slot name="icon">
-                    <hy-icon
-                        v-if="icon?.name"
-                        :name="icon?.name"
-                        :color="hyIconColor"
-                        :size="hyIconSize"
-                        :bold="icon?.bold"
-                        :customPrefix="icon?.customPrefix"
-                        :imgMode="icon?.imgMode"
-                        :width="icon?.width"
-                        :height="icon?.height"
-                        :top="icon?.top"
-                        :stop="icon?.stop"
-                        :round="icon?.round"
-                        :customStyle="Object.assign({ marginRight: '3px' }, icon?.customStyle)"
-                    ></hy-icon>
-                </slot>
-                <text :class="textClass" :style="textStyle">
-                    <slot>
-                        {{ text }}
-                    </slot>
-                </text>
-            </view>
-            <view
-                :class="['hy-tag__close', `hy-tag__close--${size}`]"
-                v-if="closable"
-                @tap.stop="closeHandler"
-                :style="{ backgroundColor: closeColor }"
-            >
-                <hy-icon :name="IconConfig.CLOSE" :size="closeSize" color="#ffffff"></hy-icon>
-            </view>
-        </view>
-    </hy-transition>
-</template>
-
-<script lang="ts">
-export default {
-    name: 'hy-tag',
-    options: {
-        addGlobalClass: true,
-        virtualHost: true,
-        styleIsolation: 'shared'
-    }
-}
-</script>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-import type { CSSProperties } from 'vue'
-import type { ITagEmits } from './typing'
-import { IconConfig, colorGradient } from '../../libs'
-import tagProps from './props'
-
-// 组件
-import HyTransition from '../hy-transition/hy-transition.vue'
-import HyIcon from '../hy-icon/hy-icon.vue'
-
-/**
- * tag组件一般用于标记和选择，我们提供了更加丰富的表现形式，能够较全面的涵盖您的使用场景
- * @displayName hy-tag
- */
-defineOptions({})
-
-const props = defineProps(tagProps)
-const emit = defineEmits<ITagEmits>()
-
-/**
- * @description tag类名
- * */
-const tagClass = computed((): string[] => {
-    let classes = ['hy-tag', `hy-tag--${props.shape}`, `hy-tag--${props.size}`, props.customClass]
-    if (props.disabled) {
-        classes.push('hy-tag--disabled')
-    } else {
-        const arr = [
-            props.plain ? `hy-tag--${props.type}--plain` : `hy-tag--${props.type}`,
-            props.plain && props.plainFill && `hy-tag--${props.type}--plain__fill`
-        ].filter(Boolean)
-        classes = classes.concat(arr as string[])
-    }
-    return classes
-})
-/**
- * @description tag样式
- * */
-const tagStyle = computed<CSSProperties>(() => {
-    const style: CSSProperties = {
-        marginRight: props.closable ? '10px' : 0,
-        marginTop: props.closable ? '10px' : 0,
-        background: props.bgColor,
-        borderColor: props.borderColor
-    }
-
-    if (props.color) {
-        if (props.plain) {
-            style.borderColor = props.color
-            if (props.plainFill) {
-                style.background = colorGradient(props.color, '#FFFFFF', 100)[90]
-            }
-        } else {
-            style.background = props.color
-            style.borderColor = props.color
-        }
-    }
-
-    return Object.assign(style, props.customStyle)
-})
-
-/**
- * @description 文本样式
- * */
-const textStyle = computed(() => {
-    const style: CSSProperties = {}
-    if (props.color && props.plain) style.color = props.color
-    return style
-})
-/**
- * @description 文本类名
- * */
-const textClass = computed((): string[] => {
-    return [`hy-tag__text`, `hy-tag__text--${props.size}`]
-})
-
-/**
- * @description 关闭图标icon大小
- */
-const closeSize = computed(() => {
-    return props.size === 'large' ? 15 : props.size === 'medium' ? 13 : 11
-})
-/**
- * @description 图标大小
- * */
-const hyIconSize = computed(() => {
-    if (props.icon?.size) {
-        return props.icon.size
-    } else {
-        return props.size === 'large' ? 18 : props.size === 'medium' ? 14 : 10
-    }
-})
-/**
- * @description 图标颜色
- * */
-const hyIconColor = computed(() => {
-    return props.icon?.color ? props.icon.color : props.plain ? props.type : '#ffffff'
-})
-
-/**
- * @description 点击关闭按钮
- * */
-const closeHandler = () => {
-    if (!props.disabled) {
-        emit('close', props.text)
-    }
-}
-/**
- * @description 点击标签
- * */
-const clickHandler = () => {
-    if (!props.disabled) {
-        emit('click', {
-            value: props.text,
-            name: props.name
-        })
-    }
-}
-</script>
-
-<style lang="scss" scoped>
-@import './index.scss';
-</style>
+<template>
+    <hy-transition mode="fade" :show="show" :custom-style="{ display: 'inline-block' }">
+        <view class="hy-tag__wrapper cursor-pointer">
+            <view :class="tagClass" @tap.stop="clickHandler" :style="tagStyle">
+                <slot name="icon">
+                    <hy-icon
+                        v-if="icon?.name"
+                        :name="icon?.name"
+                        :color="hyIconColor"
+                        :size="hyIconSize"
+                        :bold="icon?.bold"
+                        :customPrefix="icon?.customPrefix"
+                        :imgMode="icon?.imgMode"
+                        :width="icon?.width"
+                        :height="icon?.height"
+                        :top="icon?.top"
+                        :stop="icon?.stop"
+                        :round="icon?.round"
+                        :customStyle="Object.assign({ marginRight: '3px' }, icon?.customStyle)"
+                    ></hy-icon>
+                </slot>
+                <text :class="textClass" :style="textStyle">
+                    <slot>
+                        {{ text }}
+                    </slot>
+                </text>
+            </view>
+            <view
+                :class="['hy-tag__close', `hy-tag__close--${size}`]"
+                v-if="closable"
+                @tap.stop="closeHandler"
+                :style="{ backgroundColor: closeColor }"
+            >
+                <hy-icon :name="IconConfig.CLOSE" :size="closeSize" color="#ffffff"></hy-icon>
+            </view>
+        </view>
+    </hy-transition>
+</template>
+
+<script lang="ts">
+export default {
+    name: 'hy-tag',
+    options: {
+        addGlobalClass: true,
+        virtualHost: true,
+        styleIsolation: 'shared'
+    }
+}
+</script>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { CSSProperties } from 'vue'
+import type { ITagEmits } from './typing'
+import { IconConfig, colorGradient } from '../../libs'
+import tagProps from './props'
+
+// 组件
+import HyTransition from '../hy-transition/hy-transition.vue'
+import HyIcon from '../hy-icon/hy-icon.vue'
+
+/**
+ * tag组件一般用于标记和选择，我们提供了更加丰富的表现形式，能够较全面的涵盖您的使用场景
+ * @displayName hy-tag
+ */
+defineOptions({})
+
+const props = defineProps(tagProps)
+const emit = defineEmits<ITagEmits>()
+
+/**
+ * @description tag类名
+ * */
+const tagClass = computed((): string[] => {
+    let classes = ['hy-tag', `hy-tag--${props.shape}`, `hy-tag--${props.size}`, props.customClass]
+    if (props.disabled) {
+        classes.push('hy-tag--disabled')
+    } else {
+        const arr = [
+            props.plain ? `hy-tag--${props.type}--plain` : `hy-tag--${props.type}`,
+            props.plain && props.plainFill && `hy-tag--${props.type}--plain__fill`
+        ].filter(Boolean)
+        classes = classes.concat(arr as string[])
+    }
+    return classes
+})
+/**
+ * @description tag样式
+ * */
+const tagStyle = computed<CSSProperties>(() => {
+    const style: CSSProperties = {
+        marginRight: props.closable ? '10px' : 0,
+        marginTop: props.closable ? '10px' : 0,
+        background: props.bgColor,
+        borderColor: props.borderColor
+    }
+
+    if (props.color) {
+        if (props.plain) {
+            style.borderColor = props.color
+            if (props.plainFill) {
+                style.background = colorGradient(props.color, '#FFFFFF', 100)[90]
+            }
+        } else {
+            style.background = props.color
+            style.borderColor = props.color
+        }
+    }
+
+    return Object.assign(style, props.customStyle)
+})
+
+/**
+ * @description 文本样式
+ * */
+const textStyle = computed(() => {
+    const style: CSSProperties = {}
+    if (props.color && props.plain) style.color = props.color
+    return style
+})
+/**
+ * @description 文本类名
+ * */
+const textClass = computed((): string[] => {
+    return [`hy-tag__text`, `hy-tag__text--${props.size}`]
+})
+
+/**
+ * @description 关闭图标icon大小
+ */
+const closeSize = computed(() => {
+    return props.size === 'large' ? 15 : props.size === 'medium' ? 13 : 11
+})
+/**
+ * @description 图标大小
+ * */
+const hyIconSize = computed(() => {
+    if (props.icon?.size) {
+        return props.icon.size
+    } else {
+        return props.size === 'large' ? 18 : props.size === 'medium' ? 14 : 10
+    }
+})
+/**
+ * @description 图标颜色
+ * */
+const hyIconColor = computed(() => {
+    return props.icon?.color ? props.icon.color : props.plain ? props.type : '#ffffff'
+})
+
+/**
+ * @description 点击关闭按钮
+ * */
+const closeHandler = () => {
+    if (!props.disabled) {
+        emit('close', props.text)
+    }
+}
+/**
+ * @description 点击标签
+ * */
+const clickHandler = () => {
+    if (!props.disabled) {
+        emit('click', {
+            value: props.text,
+            name: props.name
+        })
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>

package/components/hy-tag/props.ts

@@ -1,89 +1,89 @@
-import type { CSSProperties, PropType } from 'vue'
-import type { HyIconProps } from '../hy-icon/typing'
-
-const tagProps = {
-    /** 标签的文字内容 */
-    text: {
-        type: String,
-        default: ''
-    },
-    /** 点击需要传得值 */
-    name: {
-        type: [String, Number],
-        default: ''
-    },
-    /**
-     * 标签类型
-     * @values info,primary,success,error,warning
-     * */
-    type: {
-        type: String,
-        default: 'primary'
-    },
-    /** 禁用点击标签 */
-    disabled: {
-        type: Boolean,
-        default: false
-    },
-    /**
-     * 标签的大小
-     * @values large,medium,small,mini
-     * */
-    size: {
-        type: String,
-        default: 'medium'
-    },
-    /**
-     * tag的形状
-     * @values circle,square,opposite
-     * */
-    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: Object as PropType<HyIconProps>,
-    /** 定义需要用到的外部样式 */
-    customStyle: {
-        type: Object as PropType<CSSProperties>,
-        default: () => {}
-    },
-    /** 自定义外部类名 */
-    customClass: {
-        type: String,
-        default: ''
-    }
-}
-
-export default tagProps
+import type { CSSProperties, PropType } from 'vue'
+import type { HyIconProps } from '../hy-icon/typing'
+
+const tagProps = {
+    /** 标签的文字内容 */
+    text: {
+        type: String,
+        default: ''
+    },
+    /** 点击需要传得值 */
+    name: {
+        type: [String, Number],
+        default: ''
+    },
+    /**
+     * 标签类型
+     * @values info,primary,success,error,warning
+     * */
+    type: {
+        type: String,
+        default: 'primary'
+    },
+    /** 禁用点击标签 */
+    disabled: {
+        type: Boolean,
+        default: false
+    },
+    /**
+     * 标签的大小
+     * @values large,medium,small,mini
+     * */
+    size: {
+        type: String,
+        default: 'medium'
+    },
+    /**
+     * tag的形状
+     * @values circle,square,opposite
+     * */
+    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: Object as PropType<HyIconProps>,
+    /** 定义需要用到的外部样式 */
+    customStyle: {
+        type: Object as PropType<CSSProperties>,
+        default: () => {}
+    },
+    /** 自定义外部类名 */
+    customClass: {
+        type: String,
+        default: ''
+    }
+}
+
+export default tagProps

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

@@ -1,13 +1,13 @@
-export type TagParamsVo = {
-    /** 值 */
-    value?: string
-    /** 名称 */
-    name?: string | number
-}
-
-export interface ITagEmits {
-    /** 点击标签触发 */
-    (e: 'click', params: TagParamsVo): void
-    /** 关闭标签触发 */
-    (e: 'close', value?: string): void
-}
+export type TagParamsVo = {
+    /** 值 */
+    value?: string
+    /** 名称 */
+    name?: string | number
+}
+
+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', customClass]" v-if="show" :style="wrapStyle" @tap="clickHandler">
+    <view :class="['hy-test', customClass]" v-if="show" :style="wrapStyle" @tap="clickHandler">
         <text
             :class="['hy-text__price', type && `hy-text__value--${type}`]"
             v-if="mode === 'price'"
@@ -85,7 +85,7 @@ import HyIcon from '../hy-icon/hy-icon.vue'
 
 /**
  * 此组件集成了文本类在项目中的常用功能，包括状态，拨打电话，格式化日期，*替换，超链接...等功能。 您大可不必在使用特殊文本时自己定义，text组件几乎涵盖您能使用的大部分场景。
- * @displayName hy-text
+ * @displayName hy-test
  */
 defineOptions({})
 
@@ -152,7 +152,7 @@ const value = computed(() => {
             return formatTime(props.text, 'yyyy-MM-dd')
         case 'phone':
             // 判断是否合法的手机号
-            // !test.mobile(text) && error('手机号模式下，text参数需要为手机号码格式')
+            // !test.mobile(test) && error('手机号模式下，text参数需要为手机号码格式')
             if (typeof props.format === 'function') {
                 // 如果用户传入的是函数，使用函数格式化
                 return props.format(props.text)

package/components/hy-text/props.ts

@@ -23,7 +23,7 @@ const textProps = {
     suffixIcon: String,
     /**
      * 文本处理的匹配模式
-     * @values text,price,phone,name,date,link
+     * @values test,price,phone,name,date,link
      * */
     mode: {
         type: String,

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

@@ -1,6 +1,6 @@
-export type TextMode = 'text' | 'price' | 'phone' | 'name' | 'date' | 'link'
-
-export interface ITextEmits {
-    /** 点击触发 */
-    (e: 'click', event: any): void
-}
+export type TextMode = 'text' | 'price' | 'phone' | 'name' | 'date' | 'link'
+
+export interface ITextEmits {
+    /** 点击触发 */
+    (e: 'click', event: any): void
+}

package/components/hy-textarea/hy-textarea.vue

@@ -4,7 +4,7 @@
         :style="[textareaStyle, borderStyle(isFocus)]"
     >
         <textarea
-            :class="['hy-textarea__field', disabled && 'hy-textarea__disabled-text']"
+            :class="['hy-textarea__field', disabled && 'hy-textarea__disabled-test']"
             :value="innerValue"
             :style="`height: ${autoHeight ? 'auto' : addUnit(height)}`"
             :placeholder="placeholder || ''"
@@ -111,7 +111,8 @@ watch(
 // 组件的类名
 const textareaClass = computed(() => {
     let classes: string[] = []
-    props.border === 'surround' && (classes = classes.concat(['hy-textarea__border', 'hy-textarea__radius']))
+    props.border === 'surround' &&
+        (classes = classes.concat(['hy-textarea__border', 'hy-textarea__radius']))
     props.border === 'bottom' &&
         (classes = classes.concat(['hy-border__bottom', 'hy-textarea__no-radius']))
     props.disabled && classes.push('hy-textarea__disabled')

package/components/hy-textarea/index.scss

@@ -7,10 +7,9 @@
   @include flex;
   flex: 1;
   padding: $hy-border-margin-padding-sm;
-  
+
   @include e(border) {
-  	/* TODO: 先这样写，因为在某些pda中写$hy-border-line，边框不显示，后续排除问题 */
-  	border: 1px solid #e8e8e8;
+    border: $hy-border-line;
   }
 
   @include e(radius) {