style: 优化最新语法

packages/fighting-design/_hooks/use-button/index.ts

@@ -11,11 +11,11 @@ import type { ClassList } from '../../_interface'
  * useButton 返回值类型接口
  *
  * @param { Object } classList 类名列表
- * @param { Object } styleList 样式列表
+ * @param { Object } style 样式列表
  */
 export interface UseButtonReturn {
   classList: ComputedRef<ClassList>
-  styleList: ComputedRef<CSSProperties>
+  style: ComputedRef<CSSProperties>
 }
 
 /**
@@ -65,7 +65,7 @@ export const useButton = (prop: ButtonProps): UseButtonReturn => {
   })
 
   /** 样式列表 */
-  const styleList = computed((): CSSProperties => {
+  const style = computed((): CSSProperties => {
     const { color, fontColor, shadow, fontSize } = prop
 
     if (prop.color) {
@@ -90,6 +90,6 @@ export const useButton = (prop: ButtonProps): UseButtonReturn => {
 
   return {
     classList,
-    styleList
+    style
   }
 }

packages/fighting-design/_hooks/use-message-work/index.ts

@@ -6,7 +6,7 @@ import type { ClassList } from '../../_interface'
 
 export interface UseMessageWorkReturn {
   classList: ComputedRef<ClassList>
-  styleList: ComputedRef<CSSProperties>
+  style: ComputedRef<CSSProperties>
   visible: Ref<boolean>
   isPosition: ComputedRef<boolean>
   offsetStyle: ComputedRef<CSSProperties>
@@ -44,7 +44,7 @@ export const useMessageWork = (
   const classList = classes(['type', 'placement', 'round'], `f-${name}`)
 
   /** 样式列表 */
-  const styleList = styles(['color', 'background', 'zIndex'], 'zIndex')
+  const style = styles(['color', 'background', 'zIndex'], 'zIndex')
 
   /**
    * 判断方位
@@ -120,7 +120,7 @@ export const useMessageWork = (
 
   return {
     classList,
-    styleList,
+    style,
     visible,
     isPosition,
     offsetStyle,

packages/fighting-design/alert/src/alert.vue

@@ -27,7 +27,7 @@
   )
 
   /** 样式列表 */
-  const styleList = styles(['fontSize', 'color', 'background', 'titleSize', 'titleColor'])
+  const style = styles(['fontSize', 'color', 'background', 'titleSize', 'titleColor'])
 
   /**
    * 点击关闭按钮
@@ -52,7 +52,7 @@
 
 <template>
   <transition name="f-alert">
-    <div v-if="isShow" role="alert" :class="classList" :style="styleList">
+    <div v-if="isShow" role="alert" :class="classList" :style>
       <!-- 前缀 icon -->
       <f-svg-icon v-if="$slots.beforeIcon || beforeIcon" :icon="beforeIcon">
         <slot name="beforeIcon" />

packages/fighting-design/aside/src/aside.vue

@@ -9,11 +9,11 @@
   const { styles } = useList(prop, 'aside')
 
   /** 样式列表 */
-  const styleList = styles(['width', 'padding', 'background'])
+  const style = styles(['width', 'padding', 'background'])
 </script>
 
 <template>
-  <aside class="f-aside" :style="styleList">
+  <aside class="f-aside" :style>
     <slot />
   </aside>
 </template>

packages/fighting-design/avatar-group/src/avatar-group.vue

@@ -35,11 +35,11 @@
   onMounted(setZIndexStyle)
 
   /** 样式列表 */
-  const styleList = styles(['positionSize'])
+  const style = styles(['positionSize'])
 </script>
 
 <template>
-  <div ref="avatarGroupRef" role="group" class="f-avatar-group" :style="styleList">
+  <div ref="avatarGroupRef" role="group" class="f-avatar-group" :style>
     <slot />
   </div>
 </template>

packages/fighting-design/avatar/src/avatar.vue

@@ -50,7 +50,7 @@
   )
 
   /** 样式列表 */
-  const styleList = styles(
+  const style = styles(
     [
       'background',
       'fontColor',
@@ -73,13 +73,13 @@
 </script>
 
 <template>
-  <div v-if="isSuccess" role="img" :class="classList" :style="styleList">
+  <div v-if="isSuccess" role="img" :class="classList" :style>
     <!-- 图标头像 -->
     <f-svg-icon
       v-if="$slots.icon || icon"
       :size="fontSize || 15"
       :color="fontColor"
-      :icon="icon"
+      :icon
     >
       <slot name="icon" />
     </f-svg-icon>
@@ -96,12 +96,12 @@
       class="f-avatar__img"
       src=""
       :style="isShowNode ? '' : 'visibility: hidden'"
-      :alt="alt"
+      :alt
     />
   </div>
 
   <!-- 加载失败的 -->
-  <div v-else class="f-avatar__error" :style="styleList">
+  <div v-else class="f-avatar__error" :style>
     <slot name="error">
       <span class="f-avatar__error-text">{{ alt || '加载失败' }}</span>
     </slot>

packages/fighting-design/back-top/src/back-top.vue

@@ -127,15 +127,15 @@
   })
 
   /** 样式列表 */
-  const styleList = styles(['right', 'bottom', 'background', 'color', 'zIndex'], 'zIndex')
+  const style = styles(['right', 'bottom', 'background', 'color', 'zIndex'], 'zIndex')
 
   /** 类名列表 */
   const classList = classes(['round'], 'f-back-top')
 </script>
 
 <template>
   <transition name="f-back-top">
-    <div v-show="visible" :class="classList" :style="styleList" @click.stop="handleClick">
+    <div v-show="visible" :class="classList" :style @click.stop="handleClick">
       <slot />
     </div>
   </transition>

packages/fighting-design/badge/src/badge.vue

@@ -14,7 +14,7 @@
   const classList = classes(['type', 'dot'], 'f-badge')
 
   /** 样式列表 */
-  const styleList = styles(['background', 'color'])
+  const style = styles(['background', 'color'])
 
   /** 展示的内容 */
   const content = computed((): string | number => {
@@ -48,7 +48,7 @@
 </script>
 
 <template>
-  <div :class="classList" :style="styleList">
+  <div :class="classList" :style>
     <slot />
 
     <transition name="f-badge">

packages/fighting-design/box/src/box.vue

@@ -9,11 +9,11 @@
   const { styles } = useList(prop, 'box')
 
   /** 样式列表 */
-  const styleList = styles(['padding', 'width', 'height', 'background', 'display'])
+  const style = styles(['padding', 'width', 'height', 'background', 'display'])
 </script>
 
 <template>
-  <div class="f-box" :role="role || 'none'" :style="styleList">
+  <div class="f-box" :role="role || 'none'" :style>
     <slot />
   </div>
 </template>

packages/fighting-design/breadcrumb-item/src/breadcrumb-item.vue

@@ -42,7 +42,7 @@
   })
 
   /** 样式列表 */
-  const styleList = styles(['fontColor', 'iconColor', 'fontSize'])
+  const style = styles(['fontColor', 'iconColor', 'fontSize'])
 
   /** 点击触发 */
   const handelClick = (): void => {
@@ -60,7 +60,7 @@
 </script>
 
 <template>
-  <div class="f-breadcrumb-item" :style="styleList" @click="handelClick">
+  <div class="f-breadcrumb-item" :style @click="handelClick">
     <span class="f-breadcrumb-item__text">
       <slot />
     </span>

packages/fighting-design/button/src/button.vue

@@ -13,7 +13,7 @@
 
   const { getType } = useGlobal(prop)
   const { run } = useRun()
-  const { classList, styleList } = useButton(prop)
+  const { classList, style } = useButton(prop)
 
   /** 元素节点 */
   const FButtonRef = ref<HTMLButtonElement | undefined>()
@@ -77,9 +77,9 @@
       role="link"
       tabindex="0"
       :class="classList"
-      :href="href"
-      :target="target"
-      :style="styleList"
+      :href
+      :target
+      :style
       @click="handleClick"
     >
       <f-svg-icon
@@ -102,10 +102,10 @@
       tabindex="0"
       :class="classList"
       :disabled="disabled || loading"
-      :autofocus="autofocus"
-      :name="name"
+      :autofocus
+      :name
       :type="nativeType"
-      :style="styleList"
+      :style
       @click="handleClick"
     >
       <f-svg-icon

packages/fighting-design/calendar/src/calendar.vue

@@ -153,14 +153,14 @@
   })
 
   /** 样式列表 */
-  const styleList = styles(['borderColor', 'dayCellHeight', 'weekCellHeight'])
+  const style = styles(['borderColor', 'dayCellHeight', 'weekCellHeight'])
 
   /** 类名列表 */
   const classList = classes(['border'], 'f-calendar')
 </script>
 
 <template>
-  <div :class="classList" :style="styleList">
+  <div :class="classList" :style>
     <!-- 头部操作栏 -->
     <header v-if="showHeader" class="f-calendar__header">
       <!-- 上个月切换按钮 -->

packages/fighting-design/card/src/card.vue

@@ -18,7 +18,7 @@
   const classList = classes(['round', 'shadow'], 'f-card')
 
   /** 样式列表 */
-  const styleList = styles(['padding', 'borderColor', 'background', 'titleColor'])
+  const style = styles(['padding', 'borderColor', 'background', 'titleColor'])
 
   /** 点击关闭按钮关闭卡片 */
   const handelClose = (): void => {
@@ -29,7 +29,7 @@
 
 <template>
   <transition name="f-card">
-    <div v-if="isShow" :class="classList" :style="styleList">
+    <div v-if="isShow" :class="classList" :style>
       <!-- 头部 -->
       <header v-if="$slots.header || title" role="heading" class="f-card__header">
         <!-- 标题 -->

packages/fighting-design/checkbox-group/src/checkbox-group.vue

@@ -36,14 +36,14 @@
   )
 
   /** 样式列表 */
-  const styleList = styles(['columnGap', 'rowGap'])
+  const style = styles(['columnGap', 'rowGap'])
 
   /** 类名列表 */
   const classList = classes(['background', 'vertical', 'size'], 'f-checkbox-group')
 </script>
 
 <template>
-  <div role="group" aria-label="checkbox-group" :class="classList" :style="styleList">
+  <div role="group" aria-label="checkbox-group" :class="classList" :style>
     <slot />
   </div>
 </template>

packages/fighting-design/close-btn/src/close-btn.vue

@@ -25,12 +25,12 @@
   const classList = classes(['round', 'disabled'], 'f-close-btn')
 
   /** 样式列表 */
-  const styleList = styles(['color', 'hoverColor'])
+  const style = styles(['color', 'hoverColor'])
 </script>
 
 <template>
-  <div role="button" :class="classList" :style="styleList" @click="handleClick">
-    <f-svg-icon :size="size" :icon="icon">
+  <div role="button" :class="classList" :style @click="handleClick">
+    <f-svg-icon :size :icon="icon">
       <slot>
         <f-icon-cross />
       </slot>

packages/fighting-design/date-picker/src/date-picker.vue

@@ -105,16 +105,16 @@
 
 <template>
   <div class="f-date-picker">
-    <f-trigger ref="triggerInstance" trigger="click" :disabled="disabled">
+    <f-trigger ref="triggerInstance" trigger="click" :disabled>
       <!-- 输入框 -->
       <f-input
         v-model="dateModelValue"
         autocomplete="off"
         readonly
-        :disabled="disabled"
+        :disabled
         :placeholder="placeholder || '请选择日期'"
-        :clear="clear"
-        :size="size"
+        :clear
+        :size
         :after-icon="FIconCalendar"
       />
 

packages/fighting-design/dialog/src/dialog.vue

@@ -17,7 +17,7 @@
   const { handleOpen, handleOpenEnd, handleClose, handleCloseEnd } = useTransition(prop)
 
   /** 样式列表 */
-  const styleList = styles(
+  const style = styles(
     ['width', 'zIndex', 'maskBackground', 'maskOpacity'],
     ['maskOpacity', 'zIndex']
   )
@@ -41,7 +41,7 @@
         aria-modal="true"
         tabindex="-1"
         :class="classList"
-        :style="styleList"
+        :style
       >
         <!-- 遮罩层 -->
         <div v-if="showMask" class="f-dialog__mask" />

packages/fighting-design/divider/src/divider.vue

@@ -12,18 +12,11 @@
   const classList = classes(['vertical', 'position'], 'f-divider')
 
   /** 类名列表 */
-  const styleList = styles([
-    'color',
-    'margin',
-    'background',
-    'fontColor',
-    'height',
-    'type'
-  ])
+  const style = styles(['color', 'margin', 'background', 'fontColor', 'height', 'type'])
 </script>
 
 <template>
-  <div role="separator" :class="classList" :style="styleList">
+  <div role="separator" :class="classList" :style>
     <span v-if="!vertical || !$slots.default" class="f-divider__text">
       <slot />
     </span>

packages/fighting-design/drawer/src/drawer.vue

@@ -17,7 +17,7 @@
   const { handleOpen, handleOpenEnd, handleClose, handleCloseEnd } = useTransition(prop)
 
   /** 样式列表 */
-  const styleList = styles(
+  const style = styles(
     ['width', 'zIndex', 'maskBackground', 'maskOpacity'],
     ['zIndex', 'maskOpacity']
   )
@@ -41,7 +41,7 @@
         aria-modal="true"
         tabindex="-1"
         :class="classList"
-        :style="styleList"
+        :style
       >
         <!-- 遮罩层 -->
         <div v-if="showMask" class="f-drawer__mask" />