hy-app 0.5.10 → 0.5.12

package/components/hy-loading/hy-loading.vue

@@ -1,107 +1,107 @@
-<template>
-    <view
-        v-if="show"
-        :style="customStyle"
-        :class="['hy-loading-icon', `hy-loading-icon__${direction}`, props.customClass]"
-    >
-        <view
-            v-if="!webviewHide"
-            :class="['hy-loading-icon__spinner', `hy-loading-icon__spinner--${mode}`]"
-            ref="ani"
-            :style="{
-                color: color,
-                width: addUnit(size),
-                height: addUnit(size),
-                borderTopColor: color,
-                borderBottomColor: otherBorderColor,
-                borderLeftColor: otherBorderColor,
-                borderRightColor: otherBorderColor,
-                'animation-duration': `${duration}ms`,
-                'animation-timing-function':
-                    mode === 'semicircle' || mode === 'circle' ? timingFunction : ''
-            }"
-        >
-            <block v-if="mode === 'spinner'">
-                <!-- #ifndef APP-NVUE -->
-                <view
-                    v-for="(item, index) in array12"
-                    :key="index"
-                    class="hy-loading-icon__dot"
-                ></view>
-                <!-- #endif -->
-            </block>
-        </view>
-        <text
-            v-if="text"
-            :class="['hy-loading-icon__text', `hy-loading-icon__${direction}--text`]"
-            :style="{
-                fontSize: addUnit(textSize),
-                color: textColor
-            }"
-        >
-            {{ text }}
-        </text>
-    </view>
-</template>
-
-<script lang="ts">
-export default {
-    name: 'hy-loading',
-    options: {
-        addGlobalClass: true,
-        virtualHost: true,
-        styleIsolation: 'shared'
-    }
-}
-</script>
-
-<script setup lang="ts">
-import { ref, computed } from 'vue'
-import { addUnit, colorGradient } from '../../libs'
-import loadingProps from './props'
-
-/**
- * 目前用在华玥的loadMore加载更多等组件的正在加载状态场景。
- * @displayName hy-loading
- */
-defineOptions({})
-
-const props = defineProps(loadingProps)
-
-//动画旋转角度
-const aniAngel = ref(360)
-const array12 = Array.from({
-    length: 12
-})
-const webviewHide = ref(false)
-
-const otherBorderColor = computed(() => {
-    const lightColor = colorGradient(props.color, '#ffffff', 100)[80]
-    if (props.mode === 'circle') {
-        return props.inactiveColor ? props.inactiveColor : lightColor
-    } else {
-        return 'transparent'
-    }
-})
-
-// 监听webview的显示与隐藏
-// const addEventListenerToWebview = () => {
-//   // webview的堆栈
-//   const pages = getCurrentPages()
-//   // 当前页面
-//   const page = pages[pages.length - 1]
-//   // 当前页面的webview实例
-//   const currentWebview = page.$getAppWebview()
-//   // 监听webview的显示与隐藏，从而停止或者开始动画(为了性能)
-//   currentWebview.addEventListener('hide', () => {
-//     webviewHide.value = true
-//   })
-//   currentWebview.addEventListener('show', () => {
-//     webviewHide.value = false
-//   })
-// }
-</script>
-
-<style lang="scss" scoped>
-@import './index.scss';
-</style>
+<template>
+    <view
+        v-if="show"
+        :style="customStyle"
+        :class="['hy-loading-icon', `hy-loading-icon__${direction}`, props.customClass]"
+    >
+        <view
+            v-if="!webviewHide"
+            :class="['hy-loading-icon__spinner', `hy-loading-icon__spinner--${mode}`]"
+            ref="ani"
+            :style="{
+                color: color,
+                width: addUnit(size),
+                height: addUnit(size),
+                borderTopColor: color,
+                borderBottomColor: otherBorderColor,
+                borderLeftColor: otherBorderColor,
+                borderRightColor: otherBorderColor,
+                'animation-duration': `${duration}ms`,
+                'animation-timing-function':
+                    mode === 'semicircle' || mode === 'circle' ? timingFunction : ''
+            }"
+        >
+            <block v-if="mode === 'spinner'">
+                <!-- #ifndef APP-NVUE -->
+                <view
+                    v-for="(item, index) in array12"
+                    :key="index"
+                    class="hy-loading-icon__dot"
+                ></view>
+                <!-- #endif -->
+            </block>
+        </view>
+        <text
+            v-if="text"
+            :class="['hy-loading-icon__text', `hy-loading-icon__${direction}--text`]"
+            :style="{
+                fontSize: addUnit(textSize),
+                color: textColor
+            }"
+        >
+            {{ text }}
+        </text>
+    </view>
+</template>
+
+<script lang="ts">
+export default {
+    name: 'hy-loading',
+    options: {
+        addGlobalClass: true,
+        virtualHost: true,
+        styleIsolation: 'shared'
+    }
+}
+</script>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { addUnit, colorGradient } from '../../libs'
+import loadingProps from './props'
+
+/**
+ * 目前用在华玥的loadMore加载更多等组件的正在加载状态场景。
+ * @displayName hy-loading
+ */
+defineOptions({})
+
+const props = defineProps(loadingProps)
+
+//动画旋转角度
+const aniAngel = ref(360)
+const array12 = Array.from({
+    length: 12
+})
+const webviewHide = ref(false)
+
+const otherBorderColor = computed(() => {
+    const lightColor = colorGradient(props.color, '#ffffff', 100)[80]
+    if (props.mode === 'circle') {
+        return props.inactiveColor ? props.inactiveColor : lightColor
+    } else {
+        return 'transparent'
+    }
+})
+
+// 监听webview的显示与隐藏
+// const addEventListenerToWebview = () => {
+//   // webview的堆栈
+//   const pages = getCurrentPages()
+//   // 当前页面
+//   const page = pages[pages.length - 1]
+//   // 当前页面的webview实例
+//   const currentWebview = page.$getAppWebview()
+//   // 监听webview的显示与隐藏，从而停止或者开始动画(为了性能)
+//   currentWebview.addEventListener('hide', () => {
+//     webviewHide.value = true
+//   })
+//   currentWebview.addEventListener('show', () => {
+//     webviewHide.value = false
+//   })
+// }
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>

package/components/hy-loading/props.ts

@@ -1,65 +1,65 @@
-import type { CSSProperties, PropType } from 'vue'
-
-const loadingProps = {
-    /** 是否显示组件 */
-    show: {
-        type: Boolean,
-        default: true
-    },
-    /** 动画活动区域的颜色，只对 mode = flower 模式有效 */
-    color: {
-        type: String,
-        default: '#909399'
-    },
-    /** 提示文本的颜色 */
-    textColor: {
-        type: String,
-        default: '#909399'
-    },
-    /**
-     * 文字和图标是否垂直排列
-     * @values row,column
-     * */
-    direction: {
-        type: String,
-        default: 'row'
-    },
-    /**
-     * 加载样式选择
-     * @values spinner, circle, semicircle
-     * */
-    mode: {
-        type: String,
-        default: 'spinner'
-    },
-    /** 加载图标的大小，单位px */
-    size: {
-        type: [String, Number],
-        default: 24
-    },
-    /** 文字大小 */
-    textSize: {
-        type: [String, Number],
-        default: 15
-    },
-    /** 文字内容 */
-    text: String,
-    /** 动画模式 */
-    timingFunction: {
-        type: String,
-        default: 'ease-in-out'
-    },
-    /** 动画执行周期时间 */
-    duration: {
-        type: Number,
-        default: 1200
-    },
-    /** mode=circle时的暗边颜色 */
-    inactiveColor: String,
-    /** 定义需要用到的外部样式 */
-    customStyle: Object as PropType<CSSProperties>,
-    /** 自定义外部类名 */
-    customClass: String
-}
-
-export default loadingProps
+import type { CSSProperties, PropType } from 'vue'
+
+const loadingProps = {
+    /** 是否显示组件 */
+    show: {
+        type: Boolean,
+        default: true
+    },
+    /** 动画活动区域的颜色，只对 mode = flower 模式有效 */
+    color: {
+        type: String,
+        default: '#909399'
+    },
+    /** 提示文本的颜色 */
+    textColor: {
+        type: String,
+        default: '#909399'
+    },
+    /**
+     * 文字和图标是否垂直排列
+     * @values row,column
+     * */
+    direction: {
+        type: String,
+        default: 'row'
+    },
+    /**
+     * 加载样式选择
+     * @values spinner, circle, semicircle
+     * */
+    mode: {
+        type: String,
+        default: 'spinner'
+    },
+    /** 加载图标的大小，单位px */
+    size: {
+        type: [String, Number],
+        default: 24
+    },
+    /** 文字大小 */
+    textSize: {
+        type: [String, Number],
+        default: 15
+    },
+    /** 文字内容 */
+    text: String,
+    /** 动画模式 */
+    timingFunction: {
+        type: String,
+        default: 'ease-in-out'
+    },
+    /** 动画执行周期时间 */
+    duration: {
+        type: Number,
+        default: 1200
+    },
+    /** mode=circle时的暗边颜色 */
+    inactiveColor: String,
+    /** 定义需要用到的外部样式 */
+    customStyle: Object as PropType<CSSProperties>,
+    /** 自定义外部类名 */
+    customClass: String
+}
+
+export default loadingProps

package/components/hy-menu/hy-menu.vue

@@ -1,159 +1,159 @@
-<template>
-    <view class="hy-menu" :style="{ width: addUnit(width) }">
-        <template v-for="(item, i) in list">
-            <view
-                @click="handleClick(item, i)"
-                :class="menuItemClass(item, i)"
-                :style="customStyle"
-            >
-                <template v-if="item.icon">
-                    <slot v-if="$slots.icon" name="icon" :value="item.icon"></slot>
-                    <hy-icon
-                        v-else
-                        class="hy-menu__item__icon"
-                        :name="item.icon"
-                        :color="current === i ? color || 'var(--hy-theme-color)' : ''"
-                        :size="icon?.size || 16"
-                        :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="icon?.customStyle || { marginRight: '2px' }"
-                    ></hy-icon>
-                </template>
-                <slot v-if="$slots.default"></slot>
-                <text v-else class="hy-menu__item--title">{{ item.title }}</text>
-                <hy-badge
-                    :value="item?.badge"
-                    :offset="badge?.offset"
-                    :shape="badge?.shape"
-                    :color="badge?.color"
-                    :bg-color="badge?.bgColor"
-                    :inverted="badge?.inverted"
-                    :type="badge?.type"
-                    :number-type="badge?.numberType"
-                    :is-dot="badge?.isDot"
-                    :absolute="badge?.absolute"
-                    :max="badge?.max"
-                    :show-zero="badge?.showZero"
-                    :custom-style="badge?.customStyle"
-                ></hy-badge>
-            </view>
-        </template>
-    </view>
-</template>
-
-<script lang="ts">
-export default {
-    name: 'hy-menu',
-    options: {
-        addGlobalClass: true,
-        virtualHost: true,
-        styleIsolation: 'shared'
-    }
-}
-</script>
-
-<script lang="ts" setup>
-import { computed, ref, watch } from 'vue'
-import type { IMenuEmits, MenusType } from './typing'
-import { addUnit } from '../../libs'
-import menuProps from './props'
-// 组件
-import HyIcon from '../hy-icon/hy-icon.vue'
-import HyBadge from '../hy-badge/hy-badge.vue'
-
-/**
- * 垂直展示的导航栏，用于在不同的内容区域之间进行切换。
- * @displayName hy-menu
- */
-defineOptions({})
-
-const props = defineProps(menuProps)
-const emit = defineEmits<IMenuEmits>()
-
-const current = ref<string | number>(0)
-
-watch(
-    () => props.modelValue,
-    (newVal) => {
-        if (newVal) current.value = newVal
-    },
-    { immediate: true }
-)
-
-const menuItemClass = computed(() => {
-    return (temp: MenusType, i: number) => {
-        const classes = [
-            'hy-menu__item',
-            prefix.value && 'hy-menu__item--prefix',
-            suffix.value && 'hy-menu__item--suffix',
-            temp.disabled && 'hy-menu__item--disabled'
-        ]
-        if (current.value === temp[props.id]) {
-            classes.push('hy-menu__item--active', props.color && 'hy-menu__item--active__color')
-        }
-
-        return classes
-    }
-})
-
-const prefix = computed(() => {
-    let prefix: boolean = false
-    // if (sidebar) {
-    //   let activeIndex: number = sidebar.children.findIndex((c: any) => {
-    //     return c.value === sidebar.props.modelValue;
-    //   });
-    //
-    //   let currentIndex: number = sidebar.children.findIndex((c: any) => {
-    //     return c.value === props.value;
-    //   });
-    //
-    //   if (currentIndex === activeIndex - 1) {
-    //     prefix = true;
-    //   }
-    // }
-    return prefix
-})
-
-const suffix = computed(() => {
-    let suffix: boolean = false
-    // if (sidebar) {
-    //   let activeIndex: number = sidebar.children.findIndex((c: any) => {
-    //     return c.value === sidebar.props.modelValue;
-    //   });
-    //
-    //   let currentIndex: number = sidebar.children.findIndex((c: any) => {
-    //     return c.value === props.value;
-    //   });
-    //
-    //   if (currentIndex === activeIndex + 1) {
-    //     suffix = true;
-    //   }
-    // }
-    return suffix
-})
-
-function handleClick(temp: MenusType, i: number) {
-    if (temp?.disabled) {
-        return
-    }
-    current.value = i
-    emit('update:modelValue', temp.id)
-    emit('change', temp)
-}
-</script>
-
-<style lang="scss" scoped>
-@import './index.scss';
-.hy-menu__item--active__color {
-    color: v-bind(color);
-    &::before {
-        background: v-bind(color);
-    }
-}
-</style>
+<template>
+    <view class="hy-menu" :style="{ width: addUnit(width) }">
+        <template v-for="(item, i) in list">
+            <view
+                @click="handleClick(item, i)"
+                :class="menuItemClass(item, i)"
+                :style="customStyle"
+            >
+                <template v-if="item.icon">
+                    <slot v-if="$slots.icon" name="icon" :value="item.icon"></slot>
+                    <hy-icon
+                        v-else
+                        class="hy-menu__item__icon"
+                        :name="item.icon"
+                        :color="current === i ? color || 'var(--hy-theme-color)' : ''"
+                        :size="icon?.size || 16"
+                        :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="icon?.customStyle || { marginRight: '2px' }"
+                    ></hy-icon>
+                </template>
+                <slot v-if="$slots.default"></slot>
+                <text v-else class="hy-menu__item--title">{{ item.title }}</text>
+                <hy-badge
+                    :value="item?.badge"
+                    :offset="badge?.offset"
+                    :shape="badge?.shape"
+                    :color="badge?.color"
+                    :bg-color="badge?.bgColor"
+                    :inverted="badge?.inverted"
+                    :type="badge?.type"
+                    :number-type="badge?.numberType"
+                    :is-dot="badge?.isDot"
+                    :absolute="badge?.absolute"
+                    :max="badge?.max"
+                    :show-zero="badge?.showZero"
+                    :custom-style="badge?.customStyle"
+                ></hy-badge>
+            </view>
+        </template>
+    </view>
+</template>
+
+<script lang="ts">
+export default {
+    name: 'hy-menu',
+    options: {
+        addGlobalClass: true,
+        virtualHost: true,
+        styleIsolation: 'shared'
+    }
+}
+</script>
+
+<script lang="ts" setup>
+import { computed, ref, watch } from 'vue'
+import type { IMenuEmits, MenusType } from './typing'
+import { addUnit } from '../../libs'
+import menuProps from './props'
+// 组件
+import HyIcon from '../hy-icon/hy-icon.vue'
+import HyBadge from '../hy-badge/hy-badge.vue'
+
+/**
+ * 垂直展示的导航栏，用于在不同的内容区域之间进行切换。
+ * @displayName hy-menu
+ */
+defineOptions({})
+
+const props = defineProps(menuProps)
+const emit = defineEmits<IMenuEmits>()
+
+const current = ref<string | number>(0)
+
+watch(
+    () => props.modelValue,
+    (newVal) => {
+        if (newVal) current.value = newVal
+    },
+    { immediate: true }
+)
+
+const menuItemClass = computed(() => {
+    return (temp: MenusType, i: number) => {
+        const classes = [
+            'hy-menu__item',
+            prefix.value && 'hy-menu__item--prefix',
+            suffix.value && 'hy-menu__item--suffix',
+            temp.disabled && 'hy-menu__item--disabled'
+        ]
+        if (current.value === temp[props.id]) {
+            classes.push('hy-menu__item--active', props.color && 'hy-menu__item--active__color')
+        }
+
+        return classes
+    }
+})
+
+const prefix = computed(() => {
+    let prefix: boolean = false
+    // if (sidebar) {
+    //   let activeIndex: number = sidebar.children.findIndex((c: any) => {
+    //     return c.value === sidebar.props.modelValue;
+    //   });
+    //
+    //   let currentIndex: number = sidebar.children.findIndex((c: any) => {
+    //     return c.value === props.value;
+    //   });
+    //
+    //   if (currentIndex === activeIndex - 1) {
+    //     prefix = true;
+    //   }
+    // }
+    return prefix
+})
+
+const suffix = computed(() => {
+    let suffix: boolean = false
+    // if (sidebar) {
+    //   let activeIndex: number = sidebar.children.findIndex((c: any) => {
+    //     return c.value === sidebar.props.modelValue;
+    //   });
+    //
+    //   let currentIndex: number = sidebar.children.findIndex((c: any) => {
+    //     return c.value === props.value;
+    //   });
+    //
+    //   if (currentIndex === activeIndex + 1) {
+    //     suffix = true;
+    //   }
+    // }
+    return suffix
+})
+
+function handleClick(temp: MenusType, i: number) {
+    if (temp?.disabled) {
+        return
+    }
+    current.value = i
+    emit('update:modelValue', temp.id)
+    emit('change', temp)
+}
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+.hy-menu__item--active__color {
+    color: v-bind(color);
+    &::before {
+        background: v-bind(color);
+    }
+}
+</style>