hy-app 0.5.15 → 0.5.16

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 v-if="$slots.icon" name="icon"></slot>
+                <hy-icon
+                    v-else-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>
+                <text :class="textClass" :style="textStyle">
+                    <slot>
+                        {{ text }}
+                    </slot>
+                </text>
+                <!-- 关闭按钮 -->
+                <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>
+        </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/index.scss

@@ -88,17 +88,14 @@ $hy-background--disabled);
 
   /* 关闭按钮 */
   @include e(close) {
-    position: absolute;
-    z-index: 999;
-    top: 10px;
-    right: 10px;
     border-radius: $hy-border-radius-semicircle;
-    background-color: #c6c7cb;
+    background-color: #C6C7CB;
+    margin-left: $hy-border-margin-padding-sm;
     @include flex(row);
     align-items: center;
     justify-content: center;
     /* #ifndef APP-NVUE */
-    transform: scale(0.6) translate(80%, -80%);
+    transform: scale(0.8) translate(40%, 0%);
     /* #endif */
     /* #ifdef APP-NVUE */
     transform: scale(0.6) translate(50%, -50%);

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: ''
+    },
+    /** 镂空时是否填充背景色 */
+    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/global.d.ts

@@ -36,6 +36,7 @@ declare module 'vue' {
         HyGrid: (typeof import('./components/hy-grid/hy-grid.vue'))['default']
         HyIcon: (typeof import('./components/hy-icon/hy-icon.vue'))['default']
         HyImage: (typeof import('./components/hy-image/hy-image.vue'))['default']
+        HyIndexBar: (typeof import('./components/hy-index-bar/hy-index-bar.vue'))['default']
         HyInput: (typeof import('./components/hy-input/hy-input.vue'))['default']
         HyLine: (typeof import('./components/hy-line/hy-line.vue'))['default']
         HyLineProgress: (typeof import('./components/hy-line-progress/hy-line-progress.vue'))['default']
@@ -62,6 +63,7 @@ declare module 'vue' {
         HyScrollList: (typeof import('./components/hy-scroll-list/hy-scroll-list.vue'))['default']
         HySearch: (typeof import('./components/hy-search/hy-search.vue'))['default']
         HySignature: (typeof import('./components/hy-signature/hy-signature.vue'))['default']
+        HySkeleton: (typeof import('./components/hy-skeleton/hy-skeleton.vue'))['default']
         HySlider: (typeof import('./components/hy-slider/hy-slider.vue'))['default']
         HyStatusBar: (typeof import('./components/hy-status-bar/hy-status-bar.vue'))['default']
         HySteps: (typeof import('./components/hy-steps/hy-steps.vue'))['default']

package/index.scss

@@ -1,4 +1,4 @@
 @use "./libs/css/common.scss";
 @use "./libs/css/vars.scss";
-@use "libs/css/mixin";
+@use "./libs/css/mixin.scss";
 @use "./libs/css/theme.scss";

package/libs/css/theme.scss

@@ -46,6 +46,7 @@ $hy-background--container: var(--hy-background--container, #ffffff) !default; //
 $hy-background--disabled: var(--hy-background--disabled, rgba(0, 0, 0, 0.04)); // 禁用背景色
 $hy-background--track: var(--hy-background--track, #F6F6F6) !default; // 轨道背景色
 $hy-background--empty: var(--hy-background--empty, #F3F3F3) !default; // 搜索背景色
+$hy-background--skeleton: var(--hy-background--skeleton, #eee) !default; // 骨架屏背景色
 $hy-background--hover: var(--hy-background--hover, rgba(0,0,0,0.05)) !default; // 点击状态
 $hy-background-mask: var(--hy-background-mask, rgba(0, 0, 0, 0.5)); //遮罩颜色
 $hy-background--active: var(--hy-background--active, #FFFFFF); // 选中背景色

package/libs/css/vars.scss

@@ -17,6 +17,7 @@
   --hy-background--container: #FFFFFF;
   --hy-background--disabled: rgba(0, 0, 0, 0.04);
   --hy-background--empty: #F3F3F3;
+  --hy-background--skeleton: #EEEEEE;
   --hy-background--hover: rgba(0,0,0,0.05);
   --hy-background--active: #FFFFFF;
   --hy-background--close:  #f0f0f0;
@@ -53,6 +54,7 @@
   --hy-background--container: #242424;
   --hy-background--disabled: rgba(255, 255, 255, 0.08);
   --hy-background--empty: #3A3A44;
+  --hy-background--skeleton: #323233;
   --hy-background--hover: rgba(255,255,255,0.2);
   --hy-background--active: #000000;
   --hy-background--close:  #323233;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "hy-app",
-  "version": "0.5.15",
-  "description": "feat: 新增图标",
+  "version": "0.5.16",
+  "description": "feat: 新增骨架屏组件",
   "main": "./index.ts",
   "private": false,
   "scripts": {},
@@ -14,5 +14,64 @@
   ],
   "web-types": "./web-types.json",
   "author": "华玥作者",
-  "license": "MIT"
+  "license": "MIT",
+    "uni_modules": {
+        "dependencies": [],
+        "encrypt": [],
+        "platforms": {
+            "cloud": {
+                "tcb": "√",
+                "aliyun": "√",
+                "alipay": "√"
+            },
+            "client": {
+                "uni-app": {
+                    "vue": {
+                        "vue2": "x",
+                        "vue3": "√"
+                    },
+                    "web": {
+                        "safari": "√",
+                        "chrome": "√"
+                    },
+                    "app": {
+                        "vue": "√",
+                        "nvue": "-",
+                        "android": "√",
+                        "ios": "√",
+                        "harmony": "√"
+                    },
+                    "mp": {
+                        "weixin": "√",
+                        "alipay": "√",
+                        "toutiao": "√",
+                        "baidu": "-",
+                        "kuaishou": "-",
+                        "jd": "-",
+                        "harmony": "√",
+                        "qq": "√",
+                        "lark": "-"
+                    },
+                    "quickapp": {
+                        "huawei": "-",
+                        "union": "-"
+                    }
+                },
+                "uni-app-x": {
+                    "web": {
+                        "safari": "-",
+                        "chrome": "-"
+                    },
+                    "app": {
+                        "android": "-",
+                        "ios": "-",
+                        "harmony": "-"
+                    },
+                    "mp": {
+                        "weixin": "-"
+                    }
+                }
+            }
+        }
+    }
 }