hy-app 0.5.10 → 0.5.11

package/components/hy-swiper/props.ts

@@ -1,128 +1,128 @@
-import type { SwiperList } from './typing'
-import type { CSSProperties, PropType } from 'vue'
-import type { SwiperEasingFunction } from '@uni-helper/uni-types'
-
-const swiperProps = {
-    /** 轮播图数据 */
-    list: {
-        type: Array as PropType<string[] | SwiperList[]>,
-        default: () => []
-    },
-    /** list数组中指定对象的目标属性名 */
-    keyName: {
-        type: String,
-        default: 'url'
-    },
-    /** 是否显示面板指示器 */
-    indicator: {
-        type: Boolean,
-        default: false
-    },
-    /** 指示器非激活颜色 */
-    indicatorActiveColor: {
-        type: String,
-        default: '#FFFFFF'
-    },
-    /** 指示器的激活颜色 */
-    indicatorInactiveColor: {
-        type: String,
-        default: 'rgba(255, 255, 255, 0.35)'
-    },
-    /** 指示器样式，可通过bottom，left，right进行定位 */
-    indicatorStyle: Object as PropType<CSSProperties>,
-    /**
-     * 指示器模式
-     * @values line,dot
-     * */
-    indicatorMode: {
-        type: String,
-        default: 'line'
-    },
-    /** 是否自动切换 */
-    autoplay: {
-        type: Boolean,
-        default: true
-    },
-    /** 当前所在滑块的 index */
-    current: {
-        type: Number,
-        default: 0
-    },
-    /** 当前所在滑块的 item-id ，不能与 current 被同时指定 */
-    currentItemId: String,
-    /** 滑块自动切换时间间隔（ms） */
-    interval: {
-        type: Number,
-        default: 3000
-    },
-    /** 滑块切换过程所需时间（ms） */
-    duration: {
-        type: Number,
-        default: 300
-    },
-    /** 播放到末尾后是否重新回到开头 */
-    circular: {
-        type: Boolean,
-        default: false
-    },
-    /** 前边距，可用于露出前一项的一小部分，nvue和支付宝不支持 */
-    previousMargin: {
-        type: [String, Number],
-        default: 0
-    },
-    /** 后边距，可用于露出后一项的一小部分，nvue和支付宝不支持 */
-    nextMargin: {
-        type: [String, Number],
-        default: 0
-    },
-    /** 当开启时，会根据滑动速度，连续滑动多屏，支付宝不支持 */
-    acceleration: {
-        type: Boolean,
-        default: false
-    },
-    /** 同时显示的滑块数量，nvue、支付宝小程序不支持 */
-    displayMultipleItems: {
-        type: Number,
-        default: 1
-    },
-    /**
-     * 指定swiper切换缓动动画类型， 只对微信小程序有效
-     * @values default,linear,easeInCubic,easeOutCubic,easeInOutCubic
-     * */
-    easingFunction: {
-        type: String,
-        default: 'default'
-    },
-    /** 图片的裁剪模式 */
-    imgMode: {
-        type: String,
-        default: 'aspectFill'
-    },
-    /** 组件高度 */
-    height: {
-        type: Number,
-        default: 130
-    },
-    /** 背景颜色 */
-    bgColor: {
-        type: String,
-        default: '#f3f4f6'
-    },
-    /** 组件圆角，数值或带单位的字符串 */
-    radius: {
-        type: [String, Number],
-        default: 4
-    },
-    /** 轮播图是否加载中数据 */
-    loading: {
-        type: Boolean,
-        default: false
-    },
-    /** 是否显示标题，要求数组对象中有title属性 */
-    showTitle: {
-        type: Boolean,
-        default: false
-    }
-}
-
-export default swiperProps
+import type { SwiperList } from './typing'
+import type { CSSProperties, PropType } from 'vue'
+import type { SwiperEasingFunction } from '@uni-helper/uni-types'
+
+const swiperProps = {
+    /** 轮播图数据 */
+    list: {
+        type: Array as PropType<string[] | SwiperList[]>,
+        default: () => []
+    },
+    /** list数组中指定对象的目标属性名 */
+    keyName: {
+        type: String,
+        default: 'url'
+    },
+    /** 是否显示面板指示器 */
+    indicator: {
+        type: Boolean,
+        default: false
+    },
+    /** 指示器非激活颜色 */
+    indicatorActiveColor: {
+        type: String,
+        default: '#FFFFFF'
+    },
+    /** 指示器的激活颜色 */
+    indicatorInactiveColor: {
+        type: String,
+        default: 'rgba(255, 255, 255, 0.35)'
+    },
+    /** 指示器样式，可通过bottom，left，right进行定位 */
+    indicatorStyle: Object as PropType<CSSProperties>,
+    /**
+     * 指示器模式
+     * @values line,dot
+     * */
+    indicatorMode: {
+        type: String,
+        default: 'line'
+    },
+    /** 是否自动切换 */
+    autoplay: {
+        type: Boolean,
+        default: true
+    },
+    /** 当前所在滑块的 index */
+    current: {
+        type: Number,
+        default: 0
+    },
+    /** 当前所在滑块的 item-id ，不能与 current 被同时指定 */
+    currentItemId: String,
+    /** 滑块自动切换时间间隔（ms） */
+    interval: {
+        type: Number,
+        default: 3000
+    },
+    /** 滑块切换过程所需时间（ms） */
+    duration: {
+        type: Number,
+        default: 300
+    },
+    /** 播放到末尾后是否重新回到开头 */
+    circular: {
+        type: Boolean,
+        default: false
+    },
+    /** 前边距，可用于露出前一项的一小部分，nvue和支付宝不支持 */
+    previousMargin: {
+        type: [String, Number],
+        default: 0
+    },
+    /** 后边距，可用于露出后一项的一小部分，nvue和支付宝不支持 */
+    nextMargin: {
+        type: [String, Number],
+        default: 0
+    },
+    /** 当开启时，会根据滑动速度，连续滑动多屏，支付宝不支持 */
+    acceleration: {
+        type: Boolean,
+        default: false
+    },
+    /** 同时显示的滑块数量，nvue、支付宝小程序不支持 */
+    displayMultipleItems: {
+        type: Number,
+        default: 1
+    },
+    /**
+     * 指定swiper切换缓动动画类型， 只对微信小程序有效
+     * @values default,linear,easeInCubic,easeOutCubic,easeInOutCubic
+     * */
+    easingFunction: {
+        type: String,
+        default: 'default'
+    },
+    /** 图片的裁剪模式 */
+    imgMode: {
+        type: String,
+        default: 'aspectFill'
+    },
+    /** 组件高度 */
+    height: {
+        type: Number,
+        default: 130
+    },
+    /** 背景颜色 */
+    bgColor: {
+        type: String,
+        default: '#f3f4f6'
+    },
+    /** 组件圆角，数值或带单位的字符串 */
+    radius: {
+        type: [String, Number],
+        default: 4
+    },
+    /** 轮播图是否加载中数据 */
+    loading: {
+        type: Boolean,
+        default: false
+    },
+    /** 是否显示标题，要求数组对象中有title属性 */
+    showTitle: {
+        type: Boolean,
+        default: false
+    }
+}
+
+export default swiperProps

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

@@ -1,26 +1,26 @@
-export interface SwiperList {
-    [key: string]: any
-    /** 线上地址 */
-    url?: string
-    /** 标题 */
-    title?: string
-    /** 海报，为视频必填 */
-    poster?: string
-    /** 轮播图展示类型 */
-    type?: 'image' | 'video'
-}
-
-export interface SwiperVo {
-    detail: {
-        current: number
-    }
-}
-
-export interface ISwiperEmits {
-    /** 点击轮播图触发 */
-    (e: 'click', index: number): void
-    /** 滑动轮播图触发 */
-    (e: 'change', temp: SwiperVo['detail']): void
-    /** 滑动轮播图触发 */
-    (e: 'update:current', value: string | number): void
-}
+export interface SwiperList {
+    [key: string]: any
+    /** 线上地址 */
+    url?: string
+    /** 标题 */
+    title?: string
+    /** 海报，为视频必填 */
+    poster?: string
+    /** 轮播图展示类型 */
+    type?: 'image' | 'video'
+}
+
+export interface SwiperVo {
+    detail: {
+        current: number
+    }
+}
+
+export interface ISwiperEmits {
+    /** 点击轮播图触发 */
+    (e: 'click', index: number): void
+    /** 滑动轮播图触发 */
+    (e: 'change', temp: SwiperVo['detail']): void
+    /** 滑动轮播图触发 */
+    (e: 'update:current', value: string | number): void
+}

package/components/hy-switch/hy-switch.vue

@@ -1,173 +1,173 @@
-<template>
-    <view
-        :class="[
-            'hy-switch cursor-pointer',
-            disabled && 'hy-switch__disabled',
-            isActive ? 'hy-switch__active' : 'hy-switch__container',
-            customClass
-        ]"
-        :style="[switchStyle, customStyle]"
-        @tap="clickHandler"
-    >
-        <view class="hy-switch__bg" :style="[bgStyle]"></view>
-        <view
-            :class="['hy-switch__node', modelValue && 'hy-switch__node--on']"
-            :style="[nodeStyle]"
-            ref="hy-switch__node"
-        >
-            <hy-loading :show="loading" :size="switchSize * 0.6" mode="circle"></hy-loading>
-            <view class="" v-if="!loading">
-                <slot>
-                    <hy-icon
-                        :name="modelValue ? activeIcon : inactiveIcon"
-                        :size="icon?.size || switchSize * 0.6"
-                        :color="icon?.color"
-                        :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"
-                    ></hy-icon>
-                </slot>
-            </view>
-        </view>
-    </view>
-</template>
-
-<script lang="ts">
-export default {
-    name: 'hy-switch',
-    options: {
-        addGlobalClass: true,
-        virtualHost: true,
-        styleIsolation: 'shared'
-    }
-}
-</script>
-
-<script setup lang="ts">
-import { watch, nextTick, computed } from 'vue'
-import type { CSSProperties } from 'vue'
-import { addUnit, error, isNumber } from '../../libs'
-import type { ISwitchEmits } from './typing'
-import switchProps from './props'
-// 组件
-import HyLoading from '../hy-loading/hy-loading.vue'
-import HyIcon from '../hy-icon/hy-icon.vue'
-
-/**
- * 选择开关用于在打开和关闭状态之间进行切换。
- * @displayName hy-switch
- */
-defineOptions({})
-
-const props = defineProps(switchProps)
-const emit = defineEmits<ISwitchEmits>()
-
-watch(
-    () => props.modelValue,
-    (newValue) => {
-        if (newValue !== props.inactiveValue && newValue !== props.activeValue) {
-            error('v-model绑定的值必须为inactiveValue、activeValue二者之一')
-        }
-    },
-    { immediate: true }
-)
-
-/**
- * @description 是否打开
- * */
-const isActive = computed(() => {
-    return props.modelValue === props.activeValue
-})
-
-/**
- * @description 设置开关大小
- * */
-const switchSize = computed((): number => {
-    const sz: AnyObject = {
-        small: 20,
-        medium: 25,
-        large: 30
-    }
-
-    return isNumber(props.size) ? props.size : sz[props.size]
-})
-
-/**
- * @description 开关样式
- * */
-const switchStyle = computed<CSSProperties>(() => {
-    let style: CSSProperties = {}
-    // 这里需要加2，是为了腾出边框的距离，否则圆点node会和外边框紧贴在一起
-    style.width = addUnit(switchSize.value * 2 + 2)
-    style.height = addUnit(switchSize.value + 2)
-    // style.borderColor = this.value ? 'rgba(0, 0, 0, 0)' : 'rgba(0, 0, 0, 0.12)'
-    // 如果自定义了“非激活”演示，name边框颜色设置为透明(跟非激活颜色一致)
-    // 这里不能简单的设置为非激活的颜色，否则打开状态时，会有边框，所以需要透明
-    if (customInactiveColor.value) {
-        style.borderColor = 'rgba(0, 0, 0, 0)'
-    }
-    style.backgroundColor = isActive.value ? props.activeColor : props.inactiveColor
-    return style
-})
-
-/**
- * @description 圆圈样式
- * */
-const nodeStyle = computed<CSSProperties>(() => {
-    let style: CSSProperties = {}
-    // 如果自定义非激活颜色，将node圆点的尺寸减少两个像素，让其与外边框距离更大一点
-    style.width = addUnit(switchSize.value - props.space)
-    style.height = addUnit(switchSize.value - props.space)
-    const translateX = isActive.value ? addUnit(props.space) : addUnit(switchSize.value)
-    style.transform = `translateX(-${translateX})`
-    return style
-})
-
-/**
- * @description 背景样式
- * */
-const bgStyle = computed<CSSProperties>(() => {
-    let style: CSSProperties = {}
-    // 这里配置一个多余的元素在HTML中，是为了让switch切换时，有更良好的背景色扩充体验(见实际效果)
-    style.width = addUnit(switchSize.value * 2 - switchSize.value / 2)
-    style.height = addUnit(switchSize.value)
-    style.backgroundColor = props.inactiveColor
-    // 打开时，让此元素收缩，否则反之
-    style.transform = `scale(${isActive.value ? 0 : 1})`
-    return style
-})
-
-/**
- * @description 自定义颜色
- * */
-const customInactiveColor = computed(() => {
-    // 之所以需要判断是否自定义了“非激活”颜色，是为了让node圆点离外边框更宽一点的距离
-    return props.inactiveColor !== '#fff' && props.inactiveColor !== '#ffffff'
-})
-
-/**
- * @description 点击事件
- * */
-const clickHandler = () => {
-    if (!props.disabled && !props.loading) {
-        const oldValue = isActive.value ? props.inactiveValue : props.activeValue
-        if (!props.asyncChange) {
-            emit('update:modelValue', oldValue)
-        }
-        // 放到下一个生命周期，因为双向绑定的value修改父组件状态需要时间，且是异步的
-        nextTick(() => {
-            emit('change', oldValue)
-        })
-    }
-}
-</script>
-
-<style lang="scss" scoped>
-@import './index.scss';
-</style>
+<template>
+    <view
+        :class="[
+            'hy-switch cursor-pointer',
+            disabled && 'hy-switch__disabled',
+            isActive ? 'hy-switch__active' : 'hy-switch__container',
+            customClass
+        ]"
+        :style="[switchStyle, customStyle]"
+        @tap="clickHandler"
+    >
+        <view class="hy-switch__bg" :style="[bgStyle]"></view>
+        <view
+            :class="['hy-switch__node', modelValue && 'hy-switch__node--on']"
+            :style="[nodeStyle]"
+            ref="hy-switch__node"
+        >
+            <hy-loading :show="loading" :size="switchSize * 0.6" mode="circle"></hy-loading>
+            <view class="" v-if="!loading">
+                <slot>
+                    <hy-icon
+                        :name="modelValue ? activeIcon : inactiveIcon"
+                        :size="icon?.size || switchSize * 0.6"
+                        :color="icon?.color"
+                        :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"
+                    ></hy-icon>
+                </slot>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script lang="ts">
+export default {
+    name: 'hy-switch',
+    options: {
+        addGlobalClass: true,
+        virtualHost: true,
+        styleIsolation: 'shared'
+    }
+}
+</script>
+
+<script setup lang="ts">
+import { watch, nextTick, computed } from 'vue'
+import type { CSSProperties } from 'vue'
+import { addUnit, error, isNumber } from '../../libs'
+import type { ISwitchEmits } from './typing'
+import switchProps from './props'
+// 组件
+import HyLoading from '../hy-loading/hy-loading.vue'
+import HyIcon from '../hy-icon/hy-icon.vue'
+
+/**
+ * 选择开关用于在打开和关闭状态之间进行切换。
+ * @displayName hy-switch
+ */
+defineOptions({})
+
+const props = defineProps(switchProps)
+const emit = defineEmits<ISwitchEmits>()
+
+watch(
+    () => props.modelValue,
+    (newValue) => {
+        if (newValue !== props.inactiveValue && newValue !== props.activeValue) {
+            error('v-model绑定的值必须为inactiveValue、activeValue二者之一')
+        }
+    },
+    { immediate: true }
+)
+
+/**
+ * @description 是否打开
+ * */
+const isActive = computed(() => {
+    return props.modelValue === props.activeValue
+})
+
+/**
+ * @description 设置开关大小
+ * */
+const switchSize = computed((): number => {
+    const sz: AnyObject = {
+        small: 20,
+        medium: 25,
+        large: 30
+    }
+
+    return isNumber(props.size) ? props.size : sz[props.size]
+})
+
+/**
+ * @description 开关样式
+ * */
+const switchStyle = computed<CSSProperties>(() => {
+    let style: CSSProperties = {}
+    // 这里需要加2，是为了腾出边框的距离，否则圆点node会和外边框紧贴在一起
+    style.width = addUnit(switchSize.value * 2 + 2)
+    style.height = addUnit(switchSize.value + 2)
+    // style.borderColor = this.value ? 'rgba(0, 0, 0, 0)' : 'rgba(0, 0, 0, 0.12)'
+    // 如果自定义了“非激活”演示，name边框颜色设置为透明(跟非激活颜色一致)
+    // 这里不能简单的设置为非激活的颜色，否则打开状态时，会有边框，所以需要透明
+    if (customInactiveColor.value) {
+        style.borderColor = 'rgba(0, 0, 0, 0)'
+    }
+    style.backgroundColor = isActive.value ? props.activeColor : props.inactiveColor
+    return style
+})
+
+/**
+ * @description 圆圈样式
+ * */
+const nodeStyle = computed<CSSProperties>(() => {
+    let style: CSSProperties = {}
+    // 如果自定义非激活颜色，将node圆点的尺寸减少两个像素，让其与外边框距离更大一点
+    style.width = addUnit(switchSize.value - props.space)
+    style.height = addUnit(switchSize.value - props.space)
+    const translateX = isActive.value ? addUnit(props.space) : addUnit(switchSize.value)
+    style.transform = `translateX(-${translateX})`
+    return style
+})
+
+/**
+ * @description 背景样式
+ * */
+const bgStyle = computed<CSSProperties>(() => {
+    let style: CSSProperties = {}
+    // 这里配置一个多余的元素在HTML中，是为了让switch切换时，有更良好的背景色扩充体验(见实际效果)
+    style.width = addUnit(switchSize.value * 2 - switchSize.value / 2)
+    style.height = addUnit(switchSize.value)
+    style.backgroundColor = props.inactiveColor
+    // 打开时，让此元素收缩，否则反之
+    style.transform = `scale(${isActive.value ? 0 : 1})`
+    return style
+})
+
+/**
+ * @description 自定义颜色
+ * */
+const customInactiveColor = computed(() => {
+    // 之所以需要判断是否自定义了“非激活”颜色，是为了让node圆点离外边框更宽一点的距离
+    return props.inactiveColor !== '#fff' && props.inactiveColor !== '#ffffff'
+})
+
+/**
+ * @description 点击事件
+ * */
+const clickHandler = () => {
+    if (!props.disabled && !props.loading) {
+        const oldValue = isActive.value ? props.inactiveValue : props.activeValue
+        if (!props.asyncChange) {
+            emit('update:modelValue', oldValue)
+        }
+        // 放到下一个生命周期，因为双向绑定的value修改父组件状态需要时间，且是异步的
+        nextTick(() => {
+            emit('change', oldValue)
+        })
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>