hy-app 0.4.13 → 0.5.0

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

@@ -1,127 +1,127 @@
-import type { CSSProperties } from "vue";
+import type { CSSProperties } from 'vue'
 
 export default interface HySwiperProps {
-  /**
-   * @description 轮播图数据
-   * */
-  list: (string | Record<string, unknown>)[];
-  /**
-   * @description list数组中指定对象的目标属性名（默认 'url' ）
-   * */
-  keyName?: string;
-  /**
-   * @description 是否显示面板指示器（默认 false ）
-   * */
-  indicator?: boolean;
-  /**
-   * @description 指示器非激活颜色（默认 '#FFFFFF' ）
-   * */
-  indicatorActiveColor?: string;
-  /**
-   * @description 指示器的激活颜色（默认 'rgba(255, 255, 255, 0.35)' ）
-   * */
-  indicatorInactiveColor?: string;
-  /**
-   * @description 指示器样式，可通过bottom，left，right进行定位
-   * */
-  indicatorStyle?: CSSProperties;
-  /**
-   * @description 指示器模式（默认 'line' ）
-   * */
-  indicatorMode?: HyApp.SwiperIndicatorModeType;
-  /**
-   * @description 是否自动切换（默认 true ）
-   * */
-  autoplay?: boolean;
-  /**
-   * @description 当前所在滑块的 index（默认 0 ）
-   * */
-  current?: number | string;
-  /**
-   * @description 当前所在滑块的 item-id ，不能与 current 被同时指定
-   * */
-  currentItemId?: string;
-  /**
-   * @description 滑块自动切换时间间隔（ms）（默认 3000 ）
-   * */
-  interval?: number;
-  /**
-   * @description 滑块切换过程所需时间（ms）（默认 300 ）
-   * */
-  duration?: number;
-  /**
-   * @description 播放到末尾后是否重新回到开头（默认 false ）
-   * */
-  circular?: boolean;
-  /**
-   * @description 前边距，可用于露出前一项的一小部分，nvue和支付宝不支持（默认 0 ）
-   * */
-  previousMargin?: number | string;
-  /**
-   * @description 后边距，可用于露出后一项的一小部分，nvue和支付宝不支持（默认 0 ）
-   * */
-  nextMargin?: number | string;
-  /**
-   * @description 当开启时，会根据滑动速度，连续滑动多屏，支付宝不支持（默认 false ）
-   * */
-  acceleration?: boolean;
-  /**
-   * @description 同时显示的滑块数量，nvue、支付宝小程序不支持（默认 1 ）
-   * */
-  displayMultipleItems?: number;
-  /**
-   * @description 指定swiper切换缓动动画类型， 只对微信小程序有效（默认 'default' ）
-   * */
-  easingFunction?: string;
-  /**
-   * @description 图片的裁剪模式（默认 'aspectFill' ）
-   * */
-  imgMode?: HyApp.ImageModeVo;
-  /**
-   * @description 组件高度（默认 130 ）
-   * */
-  height?: number;
-  /**
-   * @description 背景颜色（默认 	'#f3f4f6' ）
-   * */
-  bgColor?: string;
-  /**
-   * @description 组件圆角，数值或带单位的字符串（默认 4 ）
-   * */
-  radius?: number | string;
-  /**
-   * @description 是否加载中（默认 false ）
-   * */
-  loading?: boolean;
-  /**
-   * @description 是否显示标题，要求数组对象中有title属性（默认 false ）
-   * */
-  showTitle?: boolean;
+    /**
+     * @description 轮播图数据
+     * */
+    list: (string | Record<string, unknown>)[]
+    /**
+     * @description list数组中指定对象的目标属性名（默认 'url' ）
+     * */
+    keyName?: string
+    /**
+     * @description 是否显示面板指示器（默认 false ）
+     * */
+    indicator?: boolean
+    /**
+     * @description 指示器非激活颜色（默认 '#FFFFFF' ）
+     * */
+    indicatorActiveColor?: string
+    /**
+     * @description 指示器的激活颜色（默认 'rgba(255, 255, 255, 0.35)' ）
+     * */
+    indicatorInactiveColor?: string
+    /**
+     * @description 指示器样式，可通过bottom，left，right进行定位
+     * */
+    indicatorStyle?: CSSProperties
+    /**
+     * @description 指示器模式（默认 'line' ）
+     * */
+    indicatorMode?: HyApp.SwiperIndicatorModeType
+    /**
+     * @description 是否自动切换（默认 true ）
+     * */
+    autoplay?: boolean
+    /**
+     * @description 当前所在滑块的 index（默认 0 ）
+     * */
+    current?: number | string
+    /**
+     * @description 当前所在滑块的 item-id ，不能与 current 被同时指定
+     * */
+    currentItemId?: string
+    /**
+     * @description 滑块自动切换时间间隔（ms）（默认 3000 ）
+     * */
+    interval?: number
+    /**
+     * @description 滑块切换过程所需时间（ms）（默认 300 ）
+     * */
+    duration?: number
+    /**
+     * @description 播放到末尾后是否重新回到开头（默认 false ）
+     * */
+    circular?: boolean
+    /**
+     * @description 前边距，可用于露出前一项的一小部分，nvue和支付宝不支持（默认 0 ）
+     * */
+    previousMargin?: number | string
+    /**
+     * @description 后边距，可用于露出后一项的一小部分，nvue和支付宝不支持（默认 0 ）
+     * */
+    nextMargin?: number | string
+    /**
+     * @description 当开启时，会根据滑动速度，连续滑动多屏，支付宝不支持（默认 false ）
+     * */
+    acceleration?: boolean
+    /**
+     * @description 同时显示的滑块数量，nvue、支付宝小程序不支持（默认 1 ）
+     * */
+    displayMultipleItems?: number
+    /**
+     * @description 指定swiper切换缓动动画类型， 只对微信小程序有效（默认 'default' ）
+     * */
+    easingFunction?: string
+    /**
+     * @description 图片的裁剪模式（默认 'aspectFill' ）
+     * */
+    imgMode?: HyApp.ImageModeVo
+    /**
+     * @description 组件高度（默认 130 ）
+     * */
+    height?: number
+    /**
+     * @description 背景颜色（默认 	'#f3f4f6' ）
+     * */
+    bgColor?: string
+    /**
+     * @description 组件圆角，数值或带单位的字符串（默认 4 ）
+     * */
+    radius?: number | string
+    /**
+     * @description 是否加载中（默认 false ）
+     * */
+    loading?: boolean
+    /**
+     * @description 是否显示标题，要求数组对象中有title属性（默认 false ）
+     * */
+    showTitle?: boolean
 }
 
 export interface SwiperList {
-  [key: string]: any;
-  /** 线上地址 */
-  url?: string;
-  /** 标题 */
-  title?: string;
-  /** 海报，为视频必填 */
-  poster?: string;
-  /** 轮播图展示类型 */
-  type?: "image" | "video";
+    [key: string]: any
+    /** 线上地址 */
+    url?: string
+    /** 标题 */
+    title?: string
+    /** 海报，为视频必填 */
+    poster?: string
+    /** 轮播图展示类型 */
+    type?: 'image' | 'video'
 }
 
 export interface SwiperVo {
-  detail: {
-    current: number;
-  };
+    detail: {
+        current: number
+    }
 }
 
 export interface ISwiperEmits {
-  /** 点击轮播图触发 */
-  (e: "click", index: number): void;
-  /** 滑动轮播图触发 */
-  (e: "change", temp: SwiperVo["detail"]): void;
-  /** 滑动轮播图触发 */
-  (e: "update:current", value: string | number): void;
+    /** 点击轮播图触发 */
+    (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,237 +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"
+        :class="[
+            'hy-switch cursor-pointer',
+            disabled && 'hy-switch__disabled',
+            isActive ? 'hy-switch__active' : 'hy-switch__container',
+            customClass
+        ]"
+        :style="[switchStyle, customStyle]"
+        @tap="clickHandler"
     >
-      <hy-loading
-        :show="loading"
-        :size="switchSize * 0.6"
-        mode="circle"
-      ></hy-loading>
-      <view class="" v-if="!loading">
-        <slot>
-          <HyIcon
-            :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"
-          ></HyIcon>
-        </slot>
-      </view>
+        <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>
-  </view>
 </template>
 
 <script lang="ts">
 export default {
-  name: "hy-switch",
-  options: {
-    addGlobalClass: true,
-    virtualHost: true,
-    styleIsolation: "shared",
-  },
-};
+    name: 'hy-switch',
+    options: {
+        addGlobalClass: true,
+        virtualHost: true,
+        styleIsolation: 'shared'
+    }
+}
 </script>
 
 <script setup lang="ts">
-import { watch, nextTick, computed } from "vue";
-import type { CSSProperties, PropType } from "vue";
-import { addUnit, error, isNumber } from "../../libs";
-import type { ISwitchEmits, SwiperValue } from "./typing";
+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";
-import type HyIconProps from "../hy-icon/typing";
+import HyLoading from '../hy-loading/hy-loading.vue'
+import HyIcon from '../hy-icon/hy-icon.vue'
 
 /**
  * 选择开关用于在打开和关闭状态之间进行切换。
  * @displayName hy-switch
  */
-defineOptions({});
+defineOptions({})
 
-// const props = withDefaults(defineProps<IProps>(), defaultProps)
-const props = defineProps({
-  /** 通过v-model双向绑定的值 */
-  modelValue: {
-    type: [String, Number, Boolean] as PropType<SwiperValue>,
-    default: false,
-  },
-  /** 是否处于加载中 */
-  loading: {
-    type: Boolean,
-    default: false,
-  },
-  /** 是否禁用 */
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-  /** 开关尺寸，单位px */
-  size: {
-    type: [String, Number] as PropType<string | number>,
-    default: "medium",
-  },
-  /** 打开时的背景色 */
-  activeColor: String,
-  /** 关闭时的背景色 */
-  inactiveColor: String,
-  /** 打开选择器时通过change事件发出的值 */
-  activeValue: {
-    type: [String, Number, Boolean] as PropType<SwiperValue>,
-    default: true,
-  },
-  /** 关闭选择器时通过change事件发出的值 */
-  inactiveValue: {
-    type: [String, Number, Boolean] as PropType<SwiperValue>,
-    default: false,
-  },
-  /** 打开选择器时图标 */
-  activeIcon: String,
-  /** 关闭选择器时图标 */
-  inactiveIcon: String,
-  /** 图标 */
-  icon: Object as unknown as PropType<HyIconProps>,
-  /** 是否开启异步变更，开启后需要手动控制输入值 */
-  asyncChange: {
-    type: Boolean,
-    default: false,
-  },
-  /** 圆点与外边框的距离 */
-  space: {
-    type: Number,
-    default: 0,
-  },
-  /** 定义需要用到的外部样式 */
-  customStyle: Object as PropType<CSSProperties>,
-  /** 自定义外部类名 */
-  customClass: String,
-});
-const emit = defineEmits<ISwitchEmits>();
+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 },
-);
+    () => 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;
-});
+    return props.modelValue === props.activeValue
+})
 
 /**
  * @description 设置开关大小
  * */
 const switchSize = computed((): number => {
-  const sz: AnyObject = {
-    small: 20,
-    medium: 25,
-    large: 30,
-  };
+    const sz: AnyObject = {
+        small: 20,
+        medium: 25,
+        large: 30
+    }
 
-  return isNumber(props.size) ? props.size : sz[props.size];
-});
+    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;
-});
+    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;
-});
+    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;
-});
+    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";
-});
+    // 之所以需要判断是否自定义了“非激活”颜色，是为了让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);
+    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)
+        })
     }
-    // 放到下一个生命周期，因为双向绑定的value修改父组件状态需要时间，且是异步的
-    nextTick(() => {
-      emit("change", oldValue);
-    });
-  }
-};
+}
 </script>
 
 <style lang="scss" scoped>
-@import "./index.scss";
+@import './index.scss';
 </style>