feat: 全部组件均已支持自定义类名与style

.github/workflows/github-repo-stats.yml

@@ -13,4 +13,4 @@ jobs:
         uses: jgehrcke/github-repo-stats@RELEASE
         with:
           repository: nutui-uniapp/nutui-uniapp
-          ghtoken: ${{ secrets.GIT_ACTION }}
+          ghtoken: ${{ secrets.GITHUB_TOKEN }}

packages/nutui/components/actionsheet/actionsheet.vue

@@ -23,7 +23,7 @@ function cancelActionSheet() {
   emit(UPDATE_VISIBLE_EVENT, false)
 }
 
-function chooseItem(item: ActionSheetOption, index: any) {
+function chooseItem(item: ActionSheetOption, index: number) {
   if (!item.disable && !item.loading) {
     emit(CHOOSE_EVENT, item, index)
     emit(UPDATE_VISIBLE_EVENT, false)

packages/nutui/components/address/address.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed, defineComponent, reactive, ref, watch } from 'vue'
+import type { ScrollViewOnScrollEvent } from '@uni-helper/uni-app-types'
 import { CHANGE_EVENT, CLOSE_EVENT, PREFIX, SELECTED_EVENT, UPDATE_MODEL_EVENT, UPDATE_VISIBLE_EVENT } from '../_constants'
 import { useTranslate } from '../../locale'
 import NutPopup from '../popup/popup.vue'
@@ -163,7 +164,7 @@ function changeRegionTab(item: AddressRegionData, index: number) {
   }
 }
 
-function scrollChange(e: any) {
+function scrollChange(e: ScrollViewOnScrollEvent) {
   scrollDis.value[tabIndex.value] = e.detail.scrollTop
 }
 

packages/nutui/components/addresslist/addresslist.vue

@@ -10,7 +10,7 @@ import { addresslistEmits, addresslistProps } from './addresslist'
 const props = defineProps(addresslistProps)
 const emit = defineEmits(addresslistEmits)
 
-const dataArray = ref([]) as any
+const dataArray = ref<any[]>([])
 const dataInfo = reactive({
   id: 2,
   addressName: '姓名',

packages/nutui/components/animate/animate.ts

@@ -1,9 +1,10 @@
 import type { ExtractPropTypes } from 'vue'
-import { makeNumericProp, makeStringProp } from '../_utils'
+import { commonProps, makeNumericProp, makeStringProp } from '../_utils'
 import { CLICK_EVENT } from '../_constants'
 import type { AnimateAction, AnimateType } from './type'
 
 export const animateProps = {
+  ...commonProps,
   /**
    * @description 控制动画，当值从 false 变为 true 时会触发一次动画
    */
@@ -36,7 +37,7 @@ export const animateProps = {
 export type AnimateProps = ExtractPropTypes<typeof animateProps>
 
 export const animateEmits = {
-  [CLICK_EVENT]: (evt: Event) => evt instanceof Object,
+  [CLICK_EVENT]: (evt: MouseEvent) => evt instanceof Object,
   animate: () => true,
 }
 

packages/nutui/components/animate/animate.vue

@@ -2,19 +2,25 @@
 import { computed, defineComponent, ref, watch } from 'vue'
 import { CLICK_EVENT, PREFIX } from '../_constants'
 import requestAniFrame from '../_utils/raf'
+import { getMainClass, getMainStyle } from '../_utils'
 import { animateEmits, animateProps } from './animate'
 
 const props = defineProps(animateProps)
 const emit = defineEmits(animateEmits)
 
 const animated = ref(props.action === 'initial' || props.show === true || props.loop)
 const classes = computed(() => {
-  const prefixCls = 'nut-animate'
-  return {
-    'nut-animate__container': true,
-    [`${prefixCls}-${props.type}`]: animated.value,
-    'loop': props.loop,
+  const obj = {
+    [`${componentName}__container`]: true,
+    [`${componentName}-${props.type}`]: animated.value,
+    loop: props.loop,
   }
+  return getMainClass(props, componentName, obj)
+})
+const getStyle = computed(() => {
+  return getMainStyle(props, {
+    animationDuration: props.duration ? `${props.duration}ms` : undefined,
+  })
 })
 
 function animate() {
@@ -27,10 +33,10 @@ function animate() {
   })
 }
 
-function handleClick(event: Event) {
+function handleClick(event: unknown) {
   if (props.action === 'click') {
     animate()
-    emit(CLICK_EVENT, event)
+    emit(CLICK_EVENT, event as MouseEvent)
     emit('animate')
   }
 }
@@ -63,10 +69,8 @@ export default defineComponent({
   <view class="nut-animate">
     <view
       :class="classes"
-      :style="{
-        animationDuration: duration ? `${duration}ms` : undefined,
-      }"
-      @click="(handleClick as any)"
+      :style="getStyle"
+      @click="handleClick"
     >
       <slot />
     </view>

packages/nutui/components/avatar/avatar.vue

@@ -3,6 +3,7 @@ import { computed, defineComponent, ref, toRefs } from 'vue'
 import { PREFIX } from '../_constants'
 import { AVATAR_KEY, type AvatarGroupProps } from '../avatargroup'
 import { useInject } from '../_hooks'
+import { getMainClass, getMainStyle } from '../_utils'
 import { avatarProps } from './avatar'
 
 const props = defineProps(avatarProps)
@@ -14,22 +15,20 @@ const avatarRef = ref(null)
 const { parent } = useInject<{ props: Required<AvatarGroupProps> }>(AVATAR_KEY)
 
 const classes = computed(() => {
-  const prefixCls = componentName
-  return {
-    [prefixCls]: true,
+  return getMainClass(props, componentName, {
     [`nut-avatar-${size.value || parent?.props?.size || 'normal'}`]: true,
     [`nut-avatar-${shape.value || parent?.props?.shape || 'normal'}`]: true,
-  }
+  })
 })
 
-const styles = computed(() => {
-  return {
+const getStyles = computed(() => {
+  return getMainStyle(props, {
     width: sizeValue.includes(size.value as string) ? '' : `${size.value}px`,
     height: sizeValue.includes(size.value as string) ? '' : `${size.value}px`,
     backgroundColor: `${bgColor.value}`,
     color: `${customColor.value}`,
     marginLeft: (parent?.props?.span ? `${parent?.props?.span}px` : ''),
-  }
+  })
 })
 </script>
 
@@ -47,7 +46,7 @@ export default defineComponent({
 </script>
 
 <template>
-  <view ref="avatarRef" :style="[styles, props.customStyle]" :class="[classes, props.customClass]">
+  <view ref="avatarRef" :style="getStyles" :class="classes">
     <slot />
   </view>
 </template>

packages/nutui/components/avatargroup/avatargroup.ts

@@ -1,9 +1,10 @@
 import type { ExtractPropTypes } from 'vue'
 import type { AvatarShape, AvatarSize } from '../avatar'
-import { makeNumericProp, makeStringProp } from '../_utils'
+import { commonProps, makeNumericProp, makeStringProp } from '../_utils'
 
 export const AVATAR_KEY = Symbol('avatarGroup')
 export const avatargroupProps = {
+  ...commonProps,
   /**
    * @description 显示的最大头像个数
    */

packages/nutui/components/avatargroup/avatargroup.vue

@@ -3,6 +3,7 @@ import { computed, defineComponent, ref } from 'vue'
 import { PREFIX } from '../_constants'
 import { useProvide } from '../_hooks'
 import NutAvatar from '../avatar/avatar.vue'
+import { getMainClass, getMainStyle } from '../_utils'
 import { AVATAR_KEY, avatargroupProps } from './avatargroup'
 
 const props = defineProps(avatargroupProps)
@@ -12,18 +13,14 @@ const avatarGroupRef = ref(null)
 const index = ref(0)
 
 const foldCount = ref(99)
-const observer = ref<MutationObserver>()
 const styles = computed(() => {
-  return {
+  return getMainStyle(props, {
     marginLeft: `${-1 * Number(props.span)}px`,
-  }
+  })
 })
 
 const classes = computed(() => {
-  const prefixCls = componentName
-  return {
-    [prefixCls]: true,
-  }
+  return getMainClass(props, componentName)
 })
 
 useProvide(AVATAR_KEY, `${PREFIX}-avatar`)({ props, avatarGroupRef, index })
@@ -43,7 +40,7 @@ export default defineComponent({
 </script>
 
 <template>
-  <view ref="avatarGroupRef" :class="classes">
+  <view ref="avatarGroupRef" :class="classes" :style="styles">
     <slot />
     <NutAvatar
       v-if="foldCount > 0"

packages/nutui/components/backtop/backtop.ts

@@ -1,10 +1,11 @@
 import type { ExtractPropTypes } from 'vue'
-import { makeNumberProp, makeStringProp } from '../_utils'
+import { commonProps, makeNumberProp, makeStringProp } from '../_utils'
 import { CLICK_EVENT } from '../_constants'
 
 const { theme } = uni.getSystemInfoSync()
 
 export const backtopProps = {
+  ...commonProps,
   /**
    * @description 滚动区域的高度
    */

packages/nutui/components/backtop/backtop.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
 import { computed, defineComponent, ref } from 'vue'
+import type { ScrollViewOnScrollEvent } from '@uni-helper/uni-app-types'
 import { CLICK_EVENT, PREFIX } from '../_constants'
 import NutIcon from '../icon/icon.vue'
+import { getMainClass, getMainStyle } from '../_utils'
 import { backtopEmits, backtopProps } from './backtop'
 
 const props = defineProps(backtopProps)
@@ -11,28 +13,26 @@ const emit = defineEmits(backtopEmits)
 const backTop = ref(false)
 const scrollTop = ref(1)
 const classes = computed(() => {
-  const prefixCls = componentName
-  return {
-    [prefixCls]: true,
+  return getMainClass(props, componentName, {
     show: backTop.value,
-  }
+  })
 })
 const style = computed(() => {
-  return {
+  return getMainStyle(props, {
     right: `${props.right}px`,
     bottom: `${props.bottom}px`,
     zIndex: props.zIndex,
-  }
+  })
 })
 
-function scroll(e: any) {
+function scroll(e: ScrollViewOnScrollEvent) {
   scrollTop.value = 2
   backTop.value = e.detail.scrollTop >= props.distance
 }
 
-function click(e: MouseEvent) {
+function click(e: unknown) {
   scrollTop.value = 1
-  emit(CLICK_EVENT, e)
+  emit(CLICK_EVENT, e as MouseEvent)
 }
 </script>
 
@@ -60,7 +60,7 @@ export default defineComponent({
     >
       <slot name="content" />
     </scroll-view>
-    <view :class="classes" :style="style" @click.stop="(click as any)">
+    <view :class="classes" :style="style" @click.stop="click">
       <slot name="icon">
         <NutIcon :custom-color="customColor" name="top" :size="19" custom-class="nut-backtop-main" />
       </slot>

packages/nutui/components/badge/badge.ts

@@ -1,7 +1,8 @@
 import type { ExtractPropTypes } from 'vue'
-import { makeNumberProp, makeStringProp } from '../_utils'
+import { commonProps, makeNumberProp, makeStringProp } from '../_utils'
 
 export const badgeProps = {
+  ...commonProps,
   /**
    * @description 显示的内容
    */

packages/nutui/components/badge/badge.vue

@@ -1,18 +1,21 @@
 <script setup lang="ts">
 import { computed, defineComponent } from 'vue'
 import { PREFIX } from '../_constants'
-import { pxCheck } from '../_utils'
+import { getMainClass, getMainStyle, pxCheck } from '../_utils'
 import { badgeProps } from './badge'
 
 const props = defineProps(badgeProps)
 
-const stl = computed(() => {
-  return {
+const getStyle = computed(() => {
+  return getMainStyle(props, {
     top: pxCheck(props.top),
     right: pxCheck(props.right),
     zIndex: props.zIndex,
     background: props.customColor,
-  }
+  })
+})
+const classes = computed(() => {
+  return getMainClass(props, componentName)
 })
 
 const content = computed(() => {
@@ -41,16 +44,16 @@ export default defineComponent({
 </script>
 
 <template>
-  <view class="nut-badge">
-    <view v-if="!hidden && !dot && $slots.icon" class="nut-badge__icon" :style="stl">
+  <view :class="classes">
+    <view v-if="!hidden && !dot && $slots.icon" class="nut-badge__icon" :style="getStyle">
       <slot name="icon" />
     </view>
     <slot />
     <view
       v-if="!hidden && (content || dot)"
       class="nut-badge__content nut-badge__content--sup"
       :class="{ 'nut-badge__content--dot': dot, 'nut-badge__content--bubble': !dot && bubble }"
-      :style="stl"
+      :style="getStyle"
     >
       {{ content }}
     </view>

packages/nutui/components/barrage/barrage.ts

@@ -1,7 +1,8 @@
 import type { ExtractPropTypes } from 'vue'
-import { makeArrayProp, makeNumberProp, truthProp } from '../_utils'
+import { commonProps, makeArrayProp, makeNumberProp, truthProp } from '../_utils'
 
 export const barrageProps = {
+  ...commonProps,
   /**
    * @description 弹幕列表数据
    */

packages/nutui/components/barrage/barrage.vue

@@ -3,6 +3,7 @@ import type { ComponentInternalInstance } from 'vue'
 import { computed, defineComponent, getCurrentInstance, onMounted, reactive, ref, useSlots, watch } from 'vue'
 import { PREFIX } from '../_constants'
 import { useSelectorQuery } from '../_hooks'
+import { getMainClass } from '../_utils'
 import { barrageProps } from './barrage'
 
 const props = defineProps(barrageProps)
@@ -22,11 +23,9 @@ const top = ref<number>(props.top)
 const speeds = props.speeds
 
 const classes = computed(() => {
-  const prefixCls = componentName
-  return {
-    [prefixCls]: true,
+  return getMainClass(props, componentName, {
     [`nut-barrage--dmBody${timeId.value}`]: true,
-  }
+  })
 })
 
 onMounted(() => {
@@ -72,7 +71,6 @@ function runStep() {
     getNode(index)
   })
 }
-// const distance = ref('0');
 const styleList: any[] = reactive([])
 function styleInfo(index: number, nodeTop: string, width: number) {
   const timeIndex = index - rows.value > 0 ? index - rows.value : 0
@@ -112,7 +110,7 @@ export default defineComponent({
 </script>
 
 <template>
-  <view :class="classes">
+  <view :class="classes" :style="customStyle">
     <div>
       <div :class="[`nut-barrage__slotBody${classTime}`]">
         <view