hy-app 0.2.16 → 0.2.18

package/components/hy-submit-bar/hy-submit-bar.vue

@@ -67,11 +67,6 @@
 </template>
 
 <script lang="ts">
-/**
- * 该布局一般用于商品详情页底部引导用户快速购买商品的场景，开发者可以根据自己的需求修改布局结构和样式。
- * @displayName hy-submit-bar
- */
-defineOptions({})
 export default {
   name: 'hy-submit-bar',
   options: {
@@ -86,13 +81,18 @@ export default {
 import { computed, toRefs } from 'vue'
 import type { CSSProperties, PropType } from 'vue'
 import type { IconMenus, ISubmitBarEmits } from './typing'
-import { debounce } from '../../utils'
 
 // 组件
 import HyIcon from '../hy-icon/hy-icon.vue'
 import HyLoading from '../hy-loading/hy-loading.vue'
 import HyBadge from '../hy-badge/hy-badge.vue'
 
+/**
+ * 该布局一般用于商品详情页底部引导用户快速购买商品的场景，开发者可以根据自己的需求修改布局结构和样式。
+ * @displayName hy-submit-bar
+ */
+defineOptions({})
+
 // const props = withDefaults(defineProps<IProps>(), defaultProps)
 const props = defineProps({
   /** 左边菜单栏 */

package/components/hy-subsection/hy-subsection.vue

@@ -1,7 +1,7 @@
 <template>
   <view
     ref="hy-subsection"
-    :class="[`hy-subsection--${mode}`, 'hy-subsection']"
+    :class="[`hy-subsection--${mode}`, 'hy-subsection', customClass]"
     :style="[customStyle, wrapperStyle]"
   >
     <view ref="hy-subsection__bar" :style="barStyle" :class="barClass"></view>
@@ -19,11 +19,6 @@
 </template>
 
 <script lang="ts">
-/**
- * 该分段器一般用于用户从几个选项中选择某一个的场景
- * @displayName hy-subsection
- */
-defineOptions({})
 export default {
   name: 'hy-subsection',
   options: {
@@ -36,15 +31,20 @@ export default {
 
 <script setup lang="ts">
 import { computed, toRefs, ref, onMounted, getCurrentInstance } from 'vue'
-import type { CSSProperties } from 'vue'
-import type { ISubsectionEmits } from './typing'
-import type { SubSectionVo } from './typing'
+import type { CSSProperties, PropType } from 'vue'
+import type { ISubsectionEmits, SubSectionVo } from './typing'
 import { addUnit, getRect, guid } from '../../utils'
 
+/**
+ * 该分段器一般用于用户从几个选项中选择某一个的场景
+ * @displayName hy-subsection
+ */
+defineOptions({})
+
 // const props = withDefaults(defineProps<IProps>(), defaultProps);
 const props = defineProps({
   /** 接收值 */
-  modelValue: String,
+  modelValue: [String, Number],
   /** 默认值 */
   current: {
     type: Number,
@@ -53,19 +53,12 @@ const props = defineProps({
   /** tab的数据 */
   list: {
     type: Array,
-    default() {
-      return []
-    },
+    default: () => [],
   },
   /** list的键值 */
   customKeys: {
     type: Object,
-    default() {
-      return {
-        name: 'name',
-        value: 'value',
-      }
-    },
+    default: () => ({ name: 'name', value: 'value' }),
   },
   /** 激活时的颜色 */
   activeColor: String,
@@ -91,6 +84,10 @@ const props = defineProps({
   },
   /** 组件背景颜色，mode为button时有效 */
   bgColor: String,
+  /** 定义需要用到的外部样式 */
+  customStyle: Object as PropType<CSSProperties>,
+  /** 自定义外部类名 */
+  customClass: String,
 })
 const {
   modelValue,

package/components/hy-swipe-action/hy-swipe-action.vue

@@ -43,11 +43,6 @@
 </template>
 
 <script lang="ts">
-/**
- * 常用于单元格左右滑删除等手势操作。
- * @displayName hy-swipe-action
- */
-defineOptions({})
 export default {
   name: 'hy-swipe-action',
   options: {
@@ -74,6 +69,12 @@ import { useTouch } from '../../composables'
 import { closeOther, pushToQueue, removeFromQueue } from './index'
 import { getRect, guid } from '../../utils'
 
+/**
+ * 常用于单元格左右滑删除等手势操作。
+ * @displayName hy-swipe-action
+ */
+defineOptions({})
+
 // const props = withDefaults(defineProps<IProps>(), defaultProps)
 const props = defineProps({
   /**
@@ -94,22 +95,20 @@ const props = defineProps({
   /** 右侧按钮内容 */
   options: {
     type: Array as unknown as PropType<SwipeActionStatus>,
-    default() {
-      return [
-        {
-          text: '收藏',
-          style: {
-            backgroundColor: '#3c9cff',
-          },
+    default: () => [
+      {
+        text: '收藏',
+        style: {
+          backgroundColor: '#3c9cff',
         },
-        {
-          text: '删除',
-          style: {
-            backgroundColor: '#f56c6c',
-          },
+      },
+      {
+        text: '删除',
+        style: {
+          backgroundColor: '#f56c6c',
         },
-      ]
-    },
+      },
+    ],
   },
   /** 动画过渡时间，单位ms */
   duration: {

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

@@ -85,11 +85,6 @@
 </template>
 
 <script lang="ts">
-/**
- * 一般用于导航轮播，广告展示等场景,可开箱即用
- * @displayName hy-swiper
- */
-defineOptions({})
 export default {
   name: 'hy-swiper',
   options: {
@@ -101,23 +96,28 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { computed, toRefs, ref, watch, getCurrentInstance, type CSSProperties, PropType } from 'vue'
+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, SwiperVo } from './typing'
+import type { ISwiperEmits, SwiperList, SwiperVo } from './typing'
 
 // 组件
 import HyIcon from '../hy-icon/hy-icon.vue'
 import HySwiperIndicator from './hy-swiper-indicator.vue'
 
+/**
+ * 一般用于导航轮播，广告展示等场景,可开箱即用
+ * @displayName hy-swiper
+ */
+defineOptions({})
+
 // const props = withDefaults(defineProps<IProps>(), defaultProps);
 const props = defineProps({
   /** 轮播图数据 */
   list: {
-    type: Array as unknown as PropType<(string | Record<string, any>)[]>,
-    default() {
-      return []
-    },
+    type: Array as PropType<string[] | SwiperList[]>,
+    default: () => [],
   },
   /** list数组中指定对象的目标属性名 */
   keyName: {
@@ -175,12 +175,12 @@ const props = defineProps({
   },
   /** 前边距，可用于露出前一项的一小部分，nvue和支付宝不支持 */
   previousMargin: {
-    type: Number,
+    type: [String, Number],
     default: 0,
   },
   /** 后边距，可用于露出后一项的一小部分，nvue和支付宝不支持 */
   nextMargin: {
-    type: Number,
+    type: [String, Number],
     default: 0,
   },
   /** 当开启时，会根据滑动速度，连续滑动多屏，支付宝不支持 */
@@ -215,7 +215,7 @@ const props = defineProps({
   },
   /** 组件圆角，数值或带单位的字符串 */
   radius: {
-    type: Number,
+    type: [String, Number],
     default: 4,
   },
   /** 轮播图是否加载中数据 */
@@ -306,7 +306,7 @@ const pauseVideo = (index: number | string) => {
 /**
  * @description 当一个轮播item为视频时，获取它的视频海报
  * */
-const getPoster = (item: string | Record<string, unknown>): string => {
+const getPoster = (item: string | SwiperList): string => {
   return typeof item === 'object' && item.poster ? item.poster : ''
 }
 

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

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

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

@@ -1,9 +1,10 @@
 <template>
   <view
-    class="hy-switch cursor-pointer"
     :class="[
+      'hy-switch cursor-pointer',
       disabled && 'hy-switch--disabled',
       isActive ? 'hy-switch--active' : 'hy-switch--container',
+      customClass,
     ]"
     :style="[switchStyle, customStyle]"
     @tap="clickHandler"
@@ -38,11 +39,6 @@
 </template>
 
 <script lang="ts">
-/**
- * 选择开关用于在打开和关闭状态之间进行切换。
- * @displayName hy-switch
- */
-defineOptions({})
 export default {
   name: 'hy-switch',
   options: {
@@ -54,7 +50,8 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { toRefs, watch, nextTick, computed, type CSSProperties, PropType } from 'vue'
+import { toRefs, watch, nextTick, computed } from 'vue'
+import type { CSSProperties, PropType } from 'vue'
 import { addUnit, error } from '../../utils'
 import type { ISwitchEmits } from './typing'
 
@@ -63,11 +60,17 @@ import HyLoading from '../hy-loading/hy-loading.vue'
 import HyIcon from '../hy-icon/hy-icon.vue'
 import HyIconProps from '../hy-icon/typing'
 
+/**
+ * 选择开关用于在打开和关闭状态之间进行切换。
+ * @displayName hy-switch
+ */
+defineOptions({})
+
 // const props = withDefaults(defineProps<IProps>(), defaultProps)
 const props = defineProps({
   /** 通过v-model双向绑定的值 */
   modelValue: {
-    type: Boolean,
+    type: [String, Number, Boolean],
     default: false,
   },
   /** 是否处于加载中 */
@@ -91,12 +94,12 @@ const props = defineProps({
   inactiveColor: String,
   /** 打开选择器时通过change事件发出的值 */
   activeValue: {
-    type: Boolean,
+    type: [String, Number, Boolean],
     default: true,
   },
   /** 关闭选择器时通过change事件发出的值 */
   inactiveValue: {
-    type: Boolean,
+    type: [String, Number, Boolean],
     default: false,
   },
   /** 打开选择器时图标 */
@@ -115,6 +118,10 @@ const props = defineProps({
     type: Number,
     default: 0,
   },
+  /** 定义需要用到的外部样式 */
+  customStyle: Object as PropType<CSSProperties>,
+  /** 自定义外部类名 */
+  customClass: String,
 })
 const {
   modelValue,

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

@@ -4,11 +4,7 @@
     <view class="hy-tabBar--box" :style="{ backgroundColor: barBgColor }">
       <view class="hy-tabBar--container">
         <view
-          :class="[
-            'hy-tabBar--container__item',
-            'list',
-            current === i ? 'is-active' : '',
-          ]"
+          :class="['hy-tabBar--container__item', 'list', current === i ? 'is-active' : '']"
           v-for="(item, i) in list"
           :key="i"
           @click="checkItem(i)"
@@ -31,9 +27,7 @@
               ></HyBadge>
               <HyIcon :name="item.icon" :color="color" size="25"></HyIcon>
             </view>
-            <text class="text" :style="[{ color: color }]">{{
-              item.name
-            }}</text>
+            <text class="text" :style="[{ color: color }]">{{ item.name }}</text>
             <text class="circle"></text>
           </view>
         </view>
@@ -49,38 +43,53 @@
   </view>
 </template>
 
+<script lang="ts">
+export default {
+  name: 'hy-switch',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared',
+  },
+}
+</script>
+
 <script setup lang="ts">
-import { ref, toRefs, watch } from "vue";
-import defaultProps from "./props";
-import type IProps from "./typing";
+import { ref, toRefs, watch } from 'vue'
+import defaultProps from './props'
+import type IProps from './typing'
 
 // 组件
-import HyIcon from "../hy-icon/hy-icon.vue";
-import HyBadge from "../hy-badge/hy-badge.vue";
+import HyIcon from '../hy-icon/hy-icon.vue'
+import HyBadge from '../hy-badge/hy-badge.vue'
+
+/**
+ * 一般用于导航轮播，广告展示等场景,可开箱即用
+ * @displayName hy-swiper
+ */
+defineOptions({})
 
-const props = withDefaults(defineProps<IProps>(), defaultProps);
-const { modelValue, baseBgColor } = toRefs(props);
-const emit = defineEmits(["clickTab"]);
+const props = withDefaults(defineProps<IProps>(), defaultProps)
+const { modelValue, baseBgColor } = toRefs(props)
+const emit = defineEmits(['clickTab'])
 
-const baseBackgroundColor = baseBgColor.value
-  ? baseBgColor.value
-  : "var(--hy-background)";
-const current = ref(0);
+const baseBackgroundColor = baseBgColor.value ? baseBgColor.value : 'var(--hy-background)'
+const current = ref(0)
 watch(
   () => modelValue.value,
   (newVal) => {
-    current.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";
+@import './index.scss';
 .hy-tabBar {
   background: v-bind(baseBackgroundColor);
   &--indicator {

package/components/hy-tabs/hy-tabs.vue

@@ -98,11 +98,6 @@
 </template>
 
 <script lang="ts">
-/**
- * 该组件是一个tabs标签组件，在标签多的时候，可以配置为左右滑动，标签少的时候，可以禁止滑动。 该组件的一个特点是配置为滚动模式时，激活的tab会自动移动到组件的中间位置。
- * @displayName hy-tabs
- */
-defineOptions({})
 export default {
   name: 'hy-tabs',
   options: {
@@ -114,25 +109,23 @@ export default {
 </script>
 
 <script setup lang="ts">
-import {
-  computed,
-  type CSSProperties,
-  toRefs,
-  ref,
-  watch,
-  nextTick,
-  onMounted,
-  getCurrentInstance,
-  PropType,
-} from 'vue'
+import { computed, toRefs, ref, watch, nextTick, onMounted, getCurrentInstance } from 'vue'
+import type { CSSProperties, PropType } from 'vue'
 import type { ITabsEmits } from './typing'
 import type { TabsItemVo } from './typing'
+import type HyBadgeProps from '../hy-badge/typing'
 import { addUnit, getPx, getRect, sleep } from '../../utils'
 
 // 组件
 import HyBadge from '../hy-badge/hy-badge.vue'
 import HyIcon from '../hy-icon/hy-icon.vue'
 
+/**
+ * 该组件是一个tabs标签组件，在标签多的时候，可以配置为左右滑动，标签少的时候，可以禁止滑动。 该组件的一个特点是配置为滚动模式时，激活的tab会自动移动到组件的中间位置。
+ * @displayName hy-tabs
+ */
+defineOptions({})
+
 // const props = withDefaults(defineProps<IProps>(), defaultProps)
 const props = defineProps({
   /** 标签数组，元素为对象，如[{name: '推荐'}] */
@@ -147,7 +140,7 @@ const props = defineProps({
   },
   /** 从list元素对象中读取的键名 */
   keyName: {
-    type: Number,
+    type: String,
     default: 'name',
   },
   /** 滑块移动一次所需的时间，单位秒 */
@@ -158,9 +151,15 @@ const props = defineProps({
   /** 滑块颜色 */
   lineColor: String,
   /** 菜单选择中时的样式 */
-  activeStyle: Object as PropType<CSSProperties>,
+  activeStyle: {
+    type: Object as PropType<CSSProperties>,
+    default: {},
+  },
   /** 菜单非选中时的样式 */
-  inactiveStyle: Object as PropType<CSSProperties>,
+  inactiveStyle: {
+    type: Object as PropType<CSSProperties>,
+    default: {},
+  },
   /** 滑块长度 */
   lineWidth: {
     type: [String, Number],
@@ -188,8 +187,16 @@ const props = defineProps({
     type: Boolean,
     default: true,
   },
+  /**
+   * @description 徽标props全局定义
+   * */
+  propsBadge: Object as PropType<HyBadgeProps>,
   /** 标签左侧图标样式自定义 */
   iconStyle: Object as PropType<CSSProperties>,
+  /** 定义需要用到的外部样式 */
+  customStyle: Object as PropType<CSSProperties>,
+  /** 自定义外部类名 */
+  customClass: String,
 })
 const { list, current, activeStyle, lineWidth, inactiveStyle } = toRefs(props)
 const emit = defineEmits<ITabsEmits>()
@@ -226,12 +233,12 @@ const textStyle = computed(() => {
   return (index: number): CSSProperties => {
     const style: CSSProperties = {}
     // 取当期是否激活的样式
-    const customStyle = index == innerCurrent.value ? activeStyle.value : inactiveStyle.value
+    const customStyle_1 = index == innerCurrent.value ? activeStyle.value : inactiveStyle.value
     // 如果当前菜单被禁用，则加上对应颜色，需要在此做处理，是因为nvue下，无法在style样式中通过!import覆盖标签的内联样式
     if (list.value[index]?.disabled) {
       style.color = '#c8c9cc'
     }
-    return Object.assign(customStyle, style)
+    return Object.assign(customStyle_1, style)
   }
 })
 

package/components/hy-tag/hy-tag.vue

@@ -38,11 +38,6 @@
 </template>
 
 <script lang="ts">
-/**
- * tag组件一般用于标记和选择，我们提供了更加丰富的表现形式，能够较全面的涵盖您的使用场景
- * @displayName hy-tag
- */
-defineOptions({})
 export default {
   name: 'hy-tag',
   options: {
@@ -54,22 +49,29 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { computed, type CSSProperties, PropType, toRefs } from 'vue'
+import { computed, toRefs } from 'vue'
+import type { CSSProperties, PropType } from 'vue'
 import type { ITagEmits } from './typing'
 import { IconConfig } from '../../config'
 import { colorGradient } from '../../utils'
-import HyIconProps from '../hy-icon/typing'
+import type HyIconProps from '../hy-icon/typing'
 
 // 组件
 import HyTransition from '../hy-transition/hy-transition.vue'
 import HyIcon from '../hy-icon/hy-icon.vue'
 
+/**
+ * tag组件一般用于标记和选择，我们提供了更加丰富的表现形式，能够较全面的涵盖您的使用场景
+ * @displayName hy-tag
+ */
+defineOptions({})
+
 // const props = withDefaults(defineProps<IProps>(), defaultProps)
 const props = defineProps({
   /** 标签的文字内容 */
   text: String,
   /** 点击需要传得值 */
-  name: String,
+  name: [String, Number],
   /**
    * 标签类型
    * @values info,primary,success,error,warning
@@ -131,14 +133,9 @@ const props = defineProps({
     default: true,
   },
   /** 组件内置图标，或绝对路径的图片 */
-  icon: {
-    type: Object as PropType<HyIconProps>,
-    default: {},
-  },
+  icon: Object as PropType<HyIconProps>,
   /** 定义需要用到的外部样式 */
-  customStyle: {
-    type: Object as PropType<CSSProperties>,
-  },
+  customStyle: Object as PropType<CSSProperties>,
   /** 自定义外部类名 */
   customClass: String,
 })
@@ -170,8 +167,7 @@ const tagClass = computed((): string[] => {
     classes.push('hy-tag--disabled')
   } else {
     const arr = [
-      !plain.value && `hy-tag--${type.value}`,
-      plain.value && `hy-tag--${type.value}--plain`,
+      plain.value ? `hy-tag--${type.value}--plain` : `hy-tag--${type.value}`,
       plain.value && plainFill.value && `hy-tag--${type.value}--plain__fill`,
     ].filter(Boolean)
     classes = classes.concat(arr as string[])

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

@@ -68,7 +68,7 @@ export default interface HyTagProps {
   customStyle?: CSSProperties
 }
 
-type TagParamsVo = { value: string; name: string }
+type TagParamsVo = { value: string; name: string | number }
 export interface ITagEmits {
   /** 点击标签触发 */
   (e: 'click', params: TagParamsVo): void