hy-app 0.5.15 → 0.5.16

package/components/hy-skeleton/hy-skeleton.vue

@@ -0,0 +1,142 @@
+<template>
+    <view :class="`hy-skeleton ${customClass}`" :style="customStyle">
+        <view class="hy-skeleton__content" v-if="show">
+            <view
+                class="hy-skeleton__row"
+                v-for="(row, index) of parsedRowCols"
+                :key="`row-${index}`"
+            >
+                <view
+                    v-for="(col, idx) of row"
+                    :key="`col-${idx}`"
+                    :class="col.class"
+                    :style="col.style"
+                />
+            </view>
+        </view>
+        <view v-else>
+            <slot />
+        </view>
+    </view>
+</template>
+
+<script lang="ts">
+export default {
+    // #ifdef H5
+    name: 'hy-skeleton',
+    // #endif
+    options: { virtualHost: true, addGlobalClass: true, styleIsolation: 'shared' }
+}
+</script>
+
+<script lang="ts" setup>
+import type { CSSProperties } from 'vue'
+import { ref, computed, watch } from 'vue'
+import type { SkeletonRowCol, SkeletonRowColObj } from './typing'
+import skeletonProps from './props'
+import { isNumber, addUnit, isArray } from '../../libs'
+
+/**
+ * 用于等待加载内容所展示的占位图形组合，有动态效果加载效果，减少用户等待焦虑。
+ * @displayName hy-skeleton
+ */
+defineOptions({})
+
+const themeMap = {
+    avatar: [{ type: 'circle', height: '64px', width: '64px' }],
+    image: [{ type: 'rect', height: '64px', width: '64px' }],
+    text: [
+        1,
+        [
+            { width: '24%', height: '16px', marginRight: '16px' },
+            { width: '76%', height: '16px' }
+        ]
+    ],
+    paragraph: [1, 1, 1, { width: '55%' }]
+}
+const props = defineProps(skeletonProps)
+const rowCols = ref<SkeletonRowCol[]>([])
+
+const parsedRowCols = computed(() => {
+    return rowCols.value.map((item) => {
+        if (isNumber(item)) {
+            return [
+                {
+                    class: getColItemClass({ type: 'text' }),
+                    style: {}
+                }
+            ]
+        }
+        if (Array.isArray(item)) {
+            return item.map((col) => {
+                return {
+                    ...col,
+                    class: getColItemClass(col),
+                    style: getColItemStyle(col)
+                }
+            })
+        }
+        const nItem = item as SkeletonRowColObj
+
+        return [
+            {
+                ...nItem,
+                class: getColItemClass(nItem),
+                style: getColItemStyle(nItem)
+            }
+        ]
+    })
+})
+
+function getColItemClass(rowCol: SkeletonRowColObj) {
+    return [
+        'hy-skeleton__col',
+        `hy-skeleton--type-${rowCol.type || 'text'}`,
+        { [`hy-skeleton--animation-${props.animation}`]: props.animation }
+    ]
+}
+function getColItemStyle(rowCol: SkeletonRowColObj) {
+    const style: CSSProperties = {}
+    const styleName = [
+        'size',
+        'width',
+        'height',
+        'margin',
+        'background',
+        'marginLeft',
+        'marginRight',
+        'borderRadius',
+        'backgroundColor'
+    ]
+
+    for (const name of styleName) {
+        if (Object.prototype.hasOwnProperty.call(rowCol, name)) {
+            const px = addUnit(rowCol[name])
+
+            if (name === 'size') {
+                style.width = px
+                style.height = px
+            } else {
+                ;(style as any)[name] = px
+            }
+        }
+    }
+    return style
+}
+
+watch(
+    () => props.rowCol,
+    (rowCol) => {
+        rowCols.value = [
+            ...(isArray(rowCol) && rowCol.length ? props.rowCol : themeMap[props.theme])
+        ]
+    },
+    { immediate: true }
+)
+
+const show = computed(() => props.loading == undefined || props.loading === true)
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>

package/components/hy-skeleton/index.scss

@@ -0,0 +1,90 @@
+@use "../../libs/css/theme" as *;
+@use "../../libs/css/mixin" as *;
+
+
+@include b(skeleton) {
+  box-sizing: border-box;
+
+  @include e(row) {
+    justify-content: space-between;
+    margin-bottom: $hy-border-margin-padding-base;
+    display: flex;
+    align-items: center;
+
+    &:only-child,
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+  @include e(col) {
+    border-radius: $hy-border-radius-sm;
+    background-color: $hy-background--skeleton;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &:first-child:last-child,
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+  @include m(type) {
+    &-text {
+      width: 100%;
+      height: 20px;
+      border-radius: $hy-border-radius-sm;
+    }
+
+    &-rect {
+      width: 100%;
+      height: 20px;
+      border-radius: $hy-border-radius-base;
+    }
+
+    &-circle {
+      flex-shrink: 0;
+      width: 48px;
+      height: 48px;
+      border-radius: $hy-border-radius-circle;
+    }
+  }
+  @include m(animation) {
+    &-gradient {
+      position: relative;
+      overflow-x: hidden;
+
+      &::after {
+        content: ' ';
+        position: absolute;
+        animation: wd-skeleton-gradient 1.5s linear 2s infinite;
+        background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.04), rgba(255, 255, 255, 0));
+        inset: 0;
+      }
+    }
+
+    &-flashed {
+      animation: wd-skeleton-flashed 2s linear 2s infinite;
+    }
+  }
+
+  @keyframes wd-skeleton-gradient {
+    0% {
+      transform: translateX(-100%) skewX(-15deg);
+    }
+    100% {
+      transform: translateX(100%) skewX(-15deg);
+    }
+  }
+  @keyframes wd-skeleton-flashed {
+    0% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.3;
+      background-color: rgba(230, 230, 230, 0.3);
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+}

package/components/hy-skeleton/props.ts

@@ -0,0 +1,46 @@
+import type { CSSProperties, PropType } from 'vue'
+import type { SkeletonAnimation, SkeletonRowCol, SkeletonTheme } from './typing'
+
+const skeletonProps = {
+    /**
+     * 骨架图风格，有基础、头像组合等两大类
+     * @values text,avatar,paragraph,image
+     */
+    theme: {
+        type: String as PropType<SkeletonTheme>,
+        default: 'text'
+    },
+    /**
+     * 用于设置行列数量、宽度高度、间距等。
+     * @example
+     * 【示例一】，`[1, 1, 2]` 表示输出三行骨架图，第一行一列，第二行一列，第三行两列。
+     * 【示例二】，`[1, 1, { width: '100px' }]` 表示自定义第三行的宽度为 `100px`。
+     * 【示例三】，`[1, 2, [{ width, height }, { width, height, marginLeft }]]` 表示第三行有两列，且自定义宽度、高度和间距
+     */
+    rowCol: {
+        type: Array as PropType<SkeletonRowCol>
+    },
+    /**
+     * 是否为加载状态，如果是则显示骨架图，如果不是则显示加载完成的内容
+     * @default true
+     */
+    loading: {
+        type: Boolean,
+        default: true
+    },
+    /**
+     * 动画效果，有「渐变加载动画」和「闪烁加载动画」两种。值为空则表示没有动画
+     */
+    animation: {
+        type: String as PropType<SkeletonAnimation>,
+        default: ''
+    },
+    /** 定义需要用到的外部样式 */
+    customStyle: {
+        type: Object as PropType<CSSProperties>
+    },
+    /** 自定义外部类名 */
+    customClass: String
+}
+
+export default skeletonProps

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

@@ -0,0 +1,31 @@
+import type { ExtractPropTypes } from 'vue'
+import skeletonProps from './props'
+
+export type SkeletonTheme = 'text' | 'avatar' | 'paragraph' | 'image'
+export type SkeletonAnimation = 'gradient' | 'flashed'
+export type SkeletonRowColObj = {
+    [key: string]: any
+    type?: 'rect' | 'circle' | 'text'
+    size?: string | number
+    width?: string | number
+    height?: string | number
+    margin?: string | number
+    background?: string
+    marginLeft?: string | number
+    marginRight?: string | number
+    borderRadius?: string | number
+    backgroundColor?: string
+}
+export type SkeletonRowCol = number | SkeletonRowColObj | Array<SkeletonRowColObj>
+export type SkeletonThemeVars = {
+    notifyPadding?: string
+    notifyFontSize?: string
+    notifyTextColor?: string
+    notifyLineHeight?: number | string
+    notifyDangerBackground?: string
+    notifyPrimaryBackground?: string
+    notifySuccessBackground?: string
+    notifyWarningBackground?: string
+}
+
+export type HySkeletonProps = ExtractPropTypes<typeof skeletonProps>