hy-app 0.3.1 → 0.3.2

package/components/hy-swiper/hy-swiper.vue

@@ -30,9 +30,16 @@
       :displayMultipleItems="list.length > 0 ? displayMultipleItems : 0"
       :easingFunction="easingFunction"
     >
-      <swiper-item class="hy-swiper__wrapper__item" v-for="(item, index) in list" :key="index">
+      <swiper-item
+        class="hy-swiper__wrapper__item"
+        v-for="(item, index) in list"
+        :key="index"
+      >
         <slot :record="item" :index="index">
-          <view class="hy-swiper__wrapper__item__wrapper" :style="[itemStyle(index)]">
+          <view
+            class="hy-swiper__wrapper__item__wrapper"
+            :style="[itemStyle(index)]"
+          >
             <!-- 在nvue中，image图片的宽度默认为屏幕宽度，需要通过flex:1撑开，另外必须设置高度才能显示图片 -->
             <image
               class="hy-swiper__wrapper__item__wrapper__image"
@@ -86,31 +93,32 @@
 
 <script lang="ts">
 export default {
-  name: 'hy-swiper',
+  name: "hy-swiper",
   options: {
     addGlobalClass: true,
     virtualHost: true,
-    styleIsolation: 'shared',
+    styleIsolation: "shared",
   },
-}
+};
 </script>
 
 <script setup lang="ts">
-import { computed, toRefs, ref, watch, getCurrentInstance } from 'vue'
-import type { CSSProperties, PropType } from 'vue'
-import { addUnit, isVideo } from '../../utils'
-import { IconConfig } from '../../config'
-import type { ISwiperEmits, SwiperList, SwiperVo } from './typing'
+import { computed, toRefs, ref, watch, getCurrentInstance } from "vue";
+import type { CSSProperties, PropType } from "vue";
+import { addUnit, isVideo } from "../../utils";
+import { IconConfig } from "../../config";
+import type { ISwiperEmits, SwiperList, SwiperVo } from "./typing";
 
 // 组件
-import HyIcon from '../hy-icon/hy-icon.vue'
-import HySwiperIndicator from './hy-swiper-indicator.vue'
+import HyIcon from "../hy-icon/hy-icon.vue";
+import HySwiperIndicator from "./hy-swiper-indicator.vue";
+import type { SwiperEasingFunction } from "@uni-helper/uni-types";
 
 /**
  * 一般用于导航轮播，广告展示等场景,可开箱即用
  * @displayName hy-swiper
  */
-defineOptions({})
+defineOptions({});
 
 // const props = withDefaults(defineProps<IProps>(), defaultProps);
 const props = defineProps({
@@ -122,7 +130,7 @@ const props = defineProps({
   /** list数组中指定对象的目标属性名 */
   keyName: {
     type: String,
-    default: 'url',
+    default: "url",
   },
   /** 是否显示面板指示器 */
   indicator: {
@@ -132,19 +140,22 @@ const props = defineProps({
   /** 指示器非激活颜色 */
   indicatorActiveColor: {
     type: String,
-    default: '#FFFFFF',
+    default: "#FFFFFF",
   },
   /** 指示器的激活颜色 */
   indicatorInactiveColor: {
     type: String,
-    default: 'rgba(255, 255, 255, 0.35)',
+    default: "rgba(255, 255, 255, 0.35)",
   },
   /** 指示器样式，可通过bottom，left，right进行定位 */
   indicatorStyle: Object as PropType<CSSProperties>,
-  /** 指示器模式 */
+  /**
+   * 指示器模式
+   * @values line,dot
+   * */
   indicatorMode: {
-    type: String,
-    default: 'line',
+    type: String as PropType<HyApp.SwiperIndicatorModeType>,
+    default: "line",
   },
   /** 是否自动切换 */
   autoplay: {
@@ -193,15 +204,18 @@ const props = defineProps({
     type: Number,
     default: 1,
   },
-  /** 指定swiper切换缓动动画类型， 只对微信小程序有效 */
+  /**
+   * 指定swiper切换缓动动画类型， 只对微信小程序有效
+   * @values default,linear,easeInCubic,easeOutCubic,easeInOutCubic
+   * */
   easingFunction: {
-    type: String,
-    default: 'default',
+    type: String as PropType<SwiperEasingFunction>,
+    default: "default",
   },
   /** 图片的裁剪模式 */
   imgMode: {
     type: String,
-    default: 'aspectFill',
+    default: "aspectFill",
   },
   /** 组件高度 */
   height: {
@@ -211,7 +225,7 @@ const props = defineProps({
   /** 背景颜色 */
   bgColor: {
     type: String,
-    default: '#f3f4f6',
+    default: "#f3f4f6",
   },
   /** 组件圆角，数值或带单位的字符串 */
   radius: {
@@ -228,111 +242,111 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
-})
-const { keyName, list, current, nextMargin, previousMargin, radius } = toRefs(props)
-const emit = defineEmits<ISwiperEmits>()
+});
+const emit = defineEmits<ISwiperEmits>();
 
-const instance = getCurrentInstance()
-const currentIndex = ref<string | number>(0)
+const instance = getCurrentInstance();
+const currentIndex = ref<string | number>(0);
 
 watch(
-  () => current.value,
+  () => props.current,
   (newVal) => {
-    currentIndex.value = newVal
+    currentIndex.value = newVal;
   },
-)
+);
 
 const hasTitle = computed(() => {
   return (item: string | Record<string, any>) => {
-    if (typeof item === 'object') {
-      return item.title ?? ''
+    if (typeof item === "object") {
+      return item.title ?? "";
     } else {
-      return ''
+      return "";
     }
-  }
-})
+  };
+});
 
 /**
  * @description 轮播图3D效果
  * */
 const itemStyle = computed(() => {
   return (index: number): CSSProperties => {
-    const style: CSSProperties = {}
+    const style: CSSProperties = {};
     // #ifndef APP-NVUE || MP-TOUTIAO
     // 左右流出空间的写法不支持nvue和头条
     // 只有配置了此二值，才加上对应的圆角，以及缩放
-    if (nextMargin.value && previousMargin.value) {
-      style.borderRadius = addUnit(radius.value)
-      if (index !== currentIndex.value) style.transform = 'scale(0.92)'
+    if (props.nextMargin && props.previousMargin) {
+      style.borderRadius = addUnit(props.radius);
+      if (index !== currentIndex.value) style.transform = "scale(0.92)";
     }
     // #endif
-    return style
-  }
-})
+    return style;
+  };
+});
 
 /**
  * @description 获取目标路径，可能数组中为字符串，对象的形式，额外可指定对象的目标属性名keyName
  * */
 const getSource = (item: string | Record<string, any>): string => {
-  if (typeof item === 'string') return item
-  if (typeof item === 'object' && keyName.value) return item[keyName.value]
-  return ''
-}
+  if (typeof item === "string") return item;
+  if (typeof item === "object" && props.keyName) return item[props.keyName];
+  return "";
+};
 
 /**
  * @description 轮播切换事件
  */
 const change = (e: SwiperVo) => {
   // 当前的激活索引
-  const { current } = e.detail
-  pauseVideo(currentIndex.value)
-  currentIndex.value = current
-  emit('update:current', currentIndex.value)
-  emit('change', e.detail)
-}
+  const { current } = e.detail;
+  pauseVideo(currentIndex.value);
+  currentIndex.value = current;
+  emit("update:current", currentIndex.value);
+  emit("change", e.detail);
+};
 
 /**
  * @description 切换轮播时，暂停视频播放
  * */
 const pauseVideo = (index: number | string) => {
-  const lastItem = getSource(list.value[Number(index)])
+  const lastItem = getSource(props.list[Number(index)]);
   if (isVideo(lastItem)) {
     // 当视频隐藏时，暂停播放
-    const video = uni.createVideoContext(`video-${index}`, instance)
-    video.pause()
+    const video = uni.createVideoContext(`video-${index}`, instance);
+    video.pause();
   }
-}
+};
 
 /**
  * @description 当一个轮播item为视频时，获取它的视频海报
  * */
 const getPoster = (item: string | SwiperList): string => {
-  return typeof item === 'object' && item.poster ? item.poster : ''
-}
+  return typeof item === "object" && item.poster ? item.poster : "";
+};
 
 /**
  * @description 点击某个item
  * */
 const clickHandler = (index: number) => {
-  emit('click', index)
-}
+  emit("click", index);
+};
 
 /**
  * @description 判断链接是视频还是图片
  * */
 const getItemType = computed(() => {
   return (item: string | Record<string, unknown>) => {
-    if (typeof item === 'string') return isVideo(item) ? 'video' : 'image'
-    if (typeof item === 'object' && keyName.value) {
-      if (!item.type) return isVideo(item[keyName.value] as string) ? 'video' : 'image'
-      if (item.type === 'image') return 'image'
-      if (item.type === 'video') return 'video'
-      return 'image'
+    if (typeof item === "string") return isVideo(item) ? "video" : "image";
+    if (typeof item === "object" && props.keyName) {
+      if (!item.type)
+        return isVideo(item[props.keyName] as string) ? "video" : "image";
+      if (item.type === "image") return "image";
+      if (item.type === "video") return "video";
+      return "image";
     }
-  }
-})
+  };
+});
 </script>
 
 <style lang="scss" scoped>
-@import './index.scss';
+@import "./index.scss";
 </style>

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

@@ -15,7 +15,11 @@
       :style="[nodeStyle]"
       ref="hy-switch__node"
     >
-      <hy-loading :show="loading" :size="switchSize * 0.6" mode="circle"></hy-loading>
+      <hy-loading
+        :show="loading"
+        :size="switchSize * 0.6"
+        mode="circle"
+      ></hy-loading>
       <view class="" v-if="!loading">
         <slot>
           <HyIcon
@@ -40,37 +44,36 @@
 
 <script lang="ts">
 export default {
-  name: 'hy-switch',
+  name: "hy-switch",
   options: {
     addGlobalClass: true,
     virtualHost: true,
-    styleIsolation: 'shared',
+    styleIsolation: "shared",
   },
-}
+};
 </script>
 
 <script setup lang="ts">
-import { toRefs, watch, nextTick, computed } from 'vue'
-import type { CSSProperties, PropType } from 'vue'
-import { addUnit, error } from '../../utils'
-import type { ISwitchEmits } from './typing'
-
+import { toRefs, watch, nextTick, computed } from "vue";
+import type { CSSProperties, PropType } from "vue";
+import { addUnit, error, isNumber } from "../../utils";
+import type { ISwitchEmits, SwiperValue } from "./typing";
 // 组件
-import HyLoading from '../hy-loading/hy-loading.vue'
-import HyIcon from '../hy-icon/hy-icon.vue'
-import HyIconProps from '../hy-icon/typing'
+import HyLoading from "../hy-loading/hy-loading.vue";
+import HyIcon from "../hy-icon/hy-icon.vue";
+import type HyIconProps from "../hy-icon/typing";
 
 /**
  * 选择开关用于在打开和关闭状态之间进行切换。
  * @displayName hy-switch
  */
-defineOptions({})
+defineOptions({});
 
 // const props = withDefaults(defineProps<IProps>(), defaultProps)
 const props = defineProps({
   /** 通过v-model双向绑定的值 */
   modelValue: {
-    type: [String, Number, Boolean],
+    type: [String, Number, Boolean] as PropType<SwiperValue>,
     default: false,
   },
   /** 是否处于加载中 */
@@ -85,8 +88,8 @@ const props = defineProps({
   },
   /** 开关尺寸，单位px */
   size: {
-    type: String,
-    default: 'medium',
+    type: [String, Number] as PropType<string | number>,
+    default: "medium",
   },
   /** 打开时的背景色 */
   activeColor: String,
@@ -94,12 +97,12 @@ const props = defineProps({
   inactiveColor: String,
   /** 打开选择器时通过change事件发出的值 */
   activeValue: {
-    type: [String, Number, Boolean],
+    type: [String, Number, Boolean] as PropType<SwiperValue>,
     default: true,
   },
   /** 关闭选择器时通过change事件发出的值 */
   inactiveValue: {
-    type: [String, Number, Boolean],
+    type: [String, Number, Boolean] as PropType<SwiperValue>,
     default: false,
   },
   /** 打开选择器时图标 */
@@ -122,37 +125,25 @@ const props = defineProps({
   customStyle: Object as PropType<CSSProperties>,
   /** 自定义外部类名 */
   customClass: String,
-})
-const {
-  modelValue,
-  size,
-  space,
-  inactiveValue,
-  activeValue,
-  activeColor,
-  disabled,
-  loading,
-  asyncChange,
-  inactiveColor,
-} = toRefs(props)
-const emit = defineEmits<ISwitchEmits>()
+});
+const emit = defineEmits<ISwitchEmits>();
 
 watch(
-  () => modelValue.value,
+  () => props.modelValue,
   (newValue) => {
-    if (newValue !== inactiveValue.value && newValue !== activeValue.value) {
-      error('v-model绑定的值必须为inactiveValue、activeValue二者之一')
+    if (newValue !== props.inactiveValue && newValue !== props.activeValue) {
+      error("v-model绑定的值必须为inactiveValue、activeValue二者之一");
     }
   },
   { immediate: true },
-)
+);
 
 /**
  * @description 是否打开
  * */
 const isActive = computed(() => {
-  return modelValue.value === activeValue.value
-})
+  return props.modelValue === props.activeValue;
+});
 
 /**
  * @description 设置开关大小
@@ -162,81 +153,85 @@ const switchSize = computed((): number => {
     small: 20,
     medium: 25,
     large: 30,
-  }
+  };
 
-  return typeof size.value === 'number' ? size.value : sz[size.value] || Number(size.value)
-})
+  return isNumber(props.size) ? props.size : sz[props.size];
+});
 
 /**
  * @description 开关样式
  * */
 const switchStyle = computed<CSSProperties>(() => {
-  let style: CSSProperties = {}
+  let style: CSSProperties = {};
   // 这里需要加2，是为了腾出边框的距离，否则圆点node会和外边框紧贴在一起
-  style.width = addUnit(switchSize.value * 2 + 2)
-  style.height = addUnit(switchSize.value + 2)
+  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.borderColor = "rgba(0, 0, 0, 0)";
   }
-  style.backgroundColor = isActive.value ? activeColor.value : inactiveColor.value
-  return style
-})
+  style.backgroundColor = isActive.value
+    ? props.activeColor
+    : props.inactiveColor;
+  return style;
+});
 
 /**
  * @description 圆圈样式
  * */
 const nodeStyle = computed<CSSProperties>(() => {
-  let style: CSSProperties = {}
+  let style: CSSProperties = {};
   // 如果自定义非激活颜色，将node圆点的尺寸减少两个像素，让其与外边框距离更大一点
-  style.width = addUnit(switchSize.value - space.value)
-  style.height = addUnit(switchSize.value - space.value)
-  const translateX = isActive.value ? addUnit(space.value) : addUnit(switchSize.value)
-  style.transform = `translateX(-${translateX})`
-  return style
-})
+  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 = {}
+  let style: CSSProperties = {};
   // 这里配置一个多余的元素在HTML中，是为了让switch切换时，有更良好的背景色扩充体验(见实际效果)
-  style.width = addUnit(switchSize.value * 2 - switchSize.value / 2)
-  style.height = addUnit(switchSize.value)
-  style.backgroundColor = inactiveColor.value
+  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
-})
+  style.transform = `scale(${isActive.value ? 0 : 1})`;
+  return style;
+});
 
 /**
  * @description 自定义颜色
  * */
 const customInactiveColor = computed(() => {
   // 之所以需要判断是否自定义了“非激活”颜色，是为了让node圆点离外边框更宽一点的距离
-  return inactiveColor.value !== '#fff' && inactiveColor.value !== '#ffffff'
-})
+  return props.inactiveColor !== "#fff" && props.inactiveColor !== "#ffffff";
+});
 
 /**
  * @description 点击事件
  * */
 const clickHandler = () => {
-  if (!disabled.value && !loading.value) {
-    const oldValue = isActive.value ? inactiveValue.value : activeValue.value
-    if (!asyncChange.value) {
-      emit('update:modelValue', oldValue)
+  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)
-    })
+      emit("change", oldValue);
+    });
   }
-}
+};
 </script>
 
 <style lang="scss" scoped>
-@import './index.scss';
+@import "./index.scss";
 </style>

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

@@ -1,69 +1,71 @@
-import type { CSSProperties } from 'vue'
-import { HyApp } from '@/package/typing/modules/common'
-import type IconProps from '../hy-icon/typing'
+import type { CSSProperties } from "vue";
+import { HyApp } from "@/package/typing/modules/common";
+import type IconProps from "../hy-icon/typing";
 
 export default interface HySwitchProps {
   /**
    * @description 通过v-model双向绑定的值 （默认 false ）
    * */
-  modelValue: boolean | string | number
+  modelValue: boolean | string | number;
   /**
    * @description 是否处于加载中（默认 false ）
    * */
-  loading?: boolean
+  loading?: boolean;
   /**
    * @description 是否禁用（默认 false ）
    * */
-  disabled?: boolean
+  disabled?: boolean;
   /**
    * @description 开关尺寸，单位px （默认 25 ）
    * */
-  size?: HyApp.SizeType | string | number
+  size?: HyApp.SizeType | string | number;
   /**
    * @description 打开时的背景色 （默认 '#2979ff' ）
    * */
-  activeColor?: string
+  activeColor?: string;
   /**
    * @description 关闭时的背景色 （默认 '#ffffff' ）
    * */
-  inactiveColor?: string
+  inactiveColor?: string;
   /**
    * @description 打开选择器时通过change事件发出的值 （默认 true ）
    * */
-  activeValue?: boolean | string | number
+  activeValue?: boolean | string | number;
   /**
    * @description 关闭选择器时通过change事件发出的值 （默认 false ）
    * */
-  inactiveValue?: boolean | string | number
+  inactiveValue?: boolean | string | number;
   /**
    * @description 打开选择器时图标
    * */
-  activeIcon?: string
+  activeIcon?: string;
   /**
    * @description 关闭选择器时图标
    * */
-  inactiveIcon?: string
+  inactiveIcon?: string;
   /**
    * @description 图标
    * */
-  icon?: IconProps
+  icon?: IconProps;
   /**
    * @description 是否开启异步变更，开启后需要手动控制输入值 （默认 false ）
    * */
-  asyncChange?: boolean
+  asyncChange?: boolean;
   /**
    * @description 圆点与外边框的距离 （默认 0 ）
    * */
-  space?: number
+  space?: number;
   /**
    * @description 定义需要用到的外部样式
    * */
-  customStyle?: CSSProperties
+  customStyle?: CSSProperties;
 }
 
+export type SwiperValue = boolean | number | string;
+
 export interface ISwitchEmits {
   /** 改变值触发 */
-  (e: 'change', value: boolean): void
+  (e: "change", value: SwiperValue): void;
   /** 改变值触发 */
-  (e: 'update:modelValue', value: boolean): void
+  (e: "update:modelValue", value: SwiperValue): void;
 }