hy-app 0.4.13 → 0.5.0

package/components/hy-switch/props.ts

@@ -1,16 +1,61 @@
-import type IProps from "./typing";
+import type { CSSProperties, PropType } from 'vue'
+import type { SwitchValue } from './typing'
+import type HyIconProps from '../hy-icon/typing'
 
-const defaultProps: IProps = {
-  modelValue: false,
-  loading: false,
-  disabled: false,
-  size: "medium",
-  inactiveColor: "",
-  activeValue: true,
-  inactiveValue: false,
-  activeIcon: "",
-  inactiveIcon: "",
-  asyncChange: false,
-  space: 0,
-};
-export default defaultProps;
+const switchProps = {
+    /** 通过v-model双向绑定的值 */
+    modelValue: {
+        type: [String, Number, Boolean] as PropType<SwitchValue>,
+        default: false
+    },
+    /** 是否处于加载中 */
+    loading: {
+        type: Boolean,
+        default: false
+    },
+    /** 是否禁用 */
+    disabled: {
+        type: Boolean,
+        default: false
+    },
+    /** 开关尺寸，单位px */
+    size: {
+        type: [String, Number],
+        default: 'medium'
+    },
+    /** 打开时的背景色 */
+    activeColor: String,
+    /** 关闭时的背景色 */
+    inactiveColor: String,
+    /** 打开选择器时通过change事件发出的值 */
+    activeValue: {
+        type: [String, Number, Boolean] as PropType<SwitchValue>,
+        default: true
+    },
+    /** 关闭选择器时通过change事件发出的值 */
+    inactiveValue: {
+        type: [String, Number, Boolean] as PropType<SwitchValue>,
+        default: false
+    },
+    /** 打开选择器时图标 */
+    activeIcon: String,
+    /** 关闭选择器时图标 */
+    inactiveIcon: String,
+    /** 图标 */
+    icon: Object as PropType<HyIconProps>,
+    /** 是否开启异步变更，开启后需要手动控制输入值 */
+    asyncChange: {
+        type: Boolean,
+        default: false
+    },
+    /** 圆点与外边框的距离 */
+    space: {
+        type: Number,
+        default: 0
+    },
+    /** 定义需要用到的外部样式 */
+    customStyle: Object as PropType<CSSProperties>,
+    /** 自定义外部类名 */
+    customClass: String
+}
+export default switchProps

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

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

package/components/hy-tabBar/hy-tabBar.vue

@@ -1,56 +1,60 @@
 <template>
-  <view class="hy-tabBar--placeholder"></view>
-  <view class="hy-tabBar">
-    <view class="hy-tabBar--box" :style="{ backgroundColor: barBgColor }">
-      <view class="hy-tabBar--container">
-        <view
-          :class="['hy-tabBar--container__item', 'list', current === i ? 'is-active' : '']"
-          v-for="(item, i) in list"
-          :key="i"
-          @click="checkItem(i)"
-        >
-          <view class="hy-tabBar--container__item--bar">
-            <view class="icon">
-              <HyBadge
-                :value="item?.badge"
-                absolute
-                :offset="[-13, 25]"
-                :max="badge?.max"
-                :is-dot="badge?.isDot"
-                :inverted="badge?.inverted"
-                :bg-color="badge?.bgColor"
-                :type="badge?.type"
-                :number-type="badge?.numberType"
-                :shape="badge?.shape"
-                :show-zero="badge?.showZero"
-                :show="!!item?.badge"
-              ></HyBadge>
-              <HyIcon :name="item.icon" :color="color" size="25"></HyIcon>
+    <view class="hy-tabBar--placeholder"></view>
+    <view class="hy-tabBar">
+        <view class="hy-tabBar--box" :style="{ backgroundColor: barBgColor }">
+            <view class="hy-tabBar--container">
+                <view
+                    :class="[
+                        'hy-tabBar--container__item',
+                        'list',
+                        current === i ? 'is-active' : ''
+                    ]"
+                    v-for="(item, i) in list"
+                    :key="i"
+                    @click="checkItem(i)"
+                >
+                    <view class="hy-tabBar--container__item--bar">
+                        <view class="icon">
+                            <hy-badge
+                                :value="item?.badge"
+                                absolute
+                                :offset="[-13, 25]"
+                                :max="badge?.max"
+                                :is-dot="badge?.isDot"
+                                :inverted="badge?.inverted"
+                                :bg-color="badge?.bgColor"
+                                :type="badge?.type"
+                                :number-type="badge?.numberType"
+                                :shape="badge?.shape"
+                                :show-zero="badge?.showZero"
+                                :show="!!item?.badge"
+                            ></hy-badge>
+                            <hy-icon :name="item.icon" :color="color" size="25"></hy-icon>
+                        </view>
+                        <text class="text" :style="[{ color: color }]">{{ item.name }}</text>
+                        <text class="circle"></text>
+                    </view>
+                </view>
+                <view
+                    class="hy-tabBar--indicator"
+                    :style="{
+                        '--num': `translateX(calc(((100vw - 110rpx - ${list.length} * 70rpx) / ${list.length - 1} + 70rpx) * ${current}))`,
+                        background: activeColor
+                    }"
+                ></view>
             </view>
-            <text class="text" :style="[{ color: color }]">{{ item.name }}</text>
-            <text class="circle"></text>
-          </view>
         </view>
-        <view
-          class="hy-tabBar--indicator"
-          :style="{
-            '--num': `translateX(calc(((100vw - 110rpx - ${list.length} * 70rpx) / ${list.length - 1} + 70rpx) * ${current}))`,
-            background: activeColor,
-          }"
-        ></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>
 
@@ -76,30 +80,30 @@ const emit = defineEmits(['clickTab'])
 const baseBackgroundColor = baseBgColor.value ? baseBgColor.value : 'var(--hy-background)'
 const current = ref(0)
 watch(
-  () => modelValue.value,
-  (newVal) => {
-    current.value = newVal
-  },
+    () => modelValue.value,
+    (newVal) => {
+        current.value = newVal
+    }
 )
 
 const checkItem = (index: number) => {
-  current.value = index
-  emit('clickTab', index)
+    current.value = index
+    emit('clickTab', index)
 }
 </script>
 
 <style lang="scss" scoped>
 @import './index.scss';
 .hy-tabBar {
-  background: v-bind(baseBackgroundColor);
-  &--indicator {
-    border: 12rpx solid v-bind(baseBackgroundColor);
-    &::before {
-      box-shadow: 1px -15rpx 0 v-bind(baseBackgroundColor);
-    }
-    &::after {
-      box-shadow: -1px -15rpx 0 v-bind(baseBackgroundColor);
+    background: v-bind(baseBackgroundColor);
+    &--indicator {
+        border: 12rpx solid v-bind(baseBackgroundColor);
+        &::before {
+            box-shadow: 1px -15rpx 0 v-bind(baseBackgroundColor);
+        }
+        &::after {
+            box-shadow: -1px -15rpx 0 v-bind(baseBackgroundColor);
+        }
     }
-  }
 }
 </style>