hy-app 0.6.4 → 0.6.6

package/components/hy-signature/props.ts

@@ -1,121 +1,121 @@
-import type { CSSProperties, PropType } from 'vue'
-import { useTranslate } from '../../libs'
-
-const { t } = useTranslate('signature')
-
-const signatureProps = {
-    /** 签名笔颜色 */
-    penColor: {
-        type: String,
-        default: '#000'
-    },
-    /** 签名笔宽度 */
-    lineWidth: {
-        type: Number,
-        default: 3
-    },
-    /** 清空按钮的文本 */
-    clearText: {
-        type: String,
-        default: () => t('clear')
-    },
-    /** 撤回按钮的文本 */
-    revokeText: {
-        type: String,
-        default: () => t('revoke')
-    },
-    /** 恢复按钮的文本 */
-    restoreText: {
-        type: String,
-        default: () => t('restore')
-    },
-    /** 确认按钮的文本 */
-    confirmText: {
-        type: String,
-        default: () => t('confirm')
-    },
-    /** 目标文件的类型 */
-    fileType: {
-        type: String,
-        default: 'png'
-    },
-    /** 签名笔颜色 */
-    quality: {
-        type: Number,
-        default: 1
-    },
-    /** 目标文件的质量 */
-    exportScale: {
-        type: Number,
-        default: 1
-    },
-    /** 是否禁用签名板 */
-    disabled: {
-        type: Boolean,
-        default: false
-    },
-    /** 画布的高度 */
-    height: {
-        type: Number,
-        default: 1
-    },
-    /** 画布的宽度 */
-    width: {
-        type: Number,
-        default: 1
-    },
-    /** 边框圆角 */
-    round: {
-        type: String,
-        default: '10rpx'
-    },
-    /** 画板的背景色 */
-    backgroundColor: String,
-    /** 是否禁用画布滚动 */
-    disableScroll: {
-        type: Boolean,
-        default: true
-    },
-    /** 是否开启历史记录 */
-    enableHistory: {
-        type: Boolean,
-        default: false
-    },
-    /** 撤回和恢复的步长 */
-    step: {
-        type: Number,
-        default: 1
-    },
-    /** 撤回按钮的文本 */
-    undoText: String,
-    /** 恢复按钮的文本 */
-    redoText: String,
-    /** 是否启用压感模式 */
-    pressure: {
-        type: Boolean,
-        default: false
-    },
-    /** 压感模式下笔画最小宽度 */
-    minWidth: {
-        type: Number,
-        default: 2
-    },
-    /** 压感模式下笔画最大宽度 */
-    maxWidth: {
-        type: Number,
-        default: 6
-    },
-    /** 最小速度阈值，影响压感模式下的笔画宽度变化 */
-    minSpeed: {
-        type: Number,
-        default: 1.5
-    },
-    /** 定义需要用到的外部样式 */
-    customStyle: {
-        type: Object as PropType<CSSProperties>
-    },
-    /** 自定义外部类名 */
-    customClass: String
-}
-
-export default signatureProps
+import type { CSSProperties, PropType } from 'vue'
+import { useTranslate } from '../../libs'
+
+const { t } = useTranslate('signature')
+
+const signatureProps = {
+    /** 签名笔颜色 */
+    penColor: {
+        type: String,
+        default: '#000'
+    },
+    /** 签名笔宽度 */
+    lineWidth: {
+        type: Number,
+        default: 3
+    },
+    /** 清空按钮的文本 */
+    clearText: {
+        type: String,
+        default: () => t('clear')
+    },
+    /** 撤回按钮的文本 */
+    revokeText: {
+        type: String,
+        default: () => t('revoke')
+    },
+    /** 恢复按钮的文本 */
+    restoreText: {
+        type: String,
+        default: () => t('restore')
+    },
+    /** 确认按钮的文本 */
+    confirmText: {
+        type: String,
+        default: () => t('confirm')
+    },
+    /** 目标文件的类型 */
+    fileType: {
+        type: String,
+        default: 'png'
+    },
+    /** 签名笔颜色 */
+    quality: {
+        type: Number,
+        default: 1
+    },
+    /** 目标文件的质量 */
+    exportScale: {
+        type: Number,
+        default: 1
+    },
+    /** 是否禁用签名板 */
+    disabled: {
+        type: Boolean,
+        default: false
+    },
+    /** 画布的高度 */
+    height: {
+        type: Number,
+        default: 1
+    },
+    /** 画布的宽度 */
+    width: {
+        type: Number,
+        default: 1
+    },
+    /** 边框圆角 */
+    round: {
+        type: String,
+        default: '10rpx'
+    },
+    /** 画板的背景色 */
+    backgroundColor: String,
+    /** 是否禁用画布滚动 */
+    disableScroll: {
+        type: Boolean,
+        default: true
+    },
+    /** 是否开启历史记录 */
+    enableHistory: {
+        type: Boolean,
+        default: false
+    },
+    /** 撤回和恢复的步长 */
+    step: {
+        type: Number,
+        default: 1
+    },
+    /** 撤回按钮的文本 */
+    undoText: String,
+    /** 恢复按钮的文本 */
+    redoText: String,
+    /** 是否启用压感模式 */
+    pressure: {
+        type: Boolean,
+        default: false
+    },
+    /** 压感模式下笔画最小宽度 */
+    minWidth: {
+        type: Number,
+        default: 2
+    },
+    /** 压感模式下笔画最大宽度 */
+    maxWidth: {
+        type: Number,
+        default: 6
+    },
+    /** 最小速度阈值，影响压感模式下的笔画宽度变化 */
+    minSpeed: {
+        type: Number,
+        default: 1.5
+    },
+    /** 定义需要用到的外部样式 */
+    customStyle: {
+        type: Object as PropType<CSSProperties>
+    },
+    /** 自定义外部类名 */
+    customClass: String
+}
+
+export default signatureProps

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

@@ -1,142 +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>
+<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/props.ts

@@ -1,46 +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
+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