chore(lint): add vue/attributes-order (#2522)

packages/nutui-eslint-config/index.js

@@ -41,7 +41,6 @@ module.exports = {
     'vue/multi-word-component-names': 'off',
     'vue/no-v-text-v-html-on-component': 'off',
     // will be removed someday
-    'vue/attributes-order': 'off',
     'vue/attribute-hyphenation': 'off'
   }
 };

src/packages/__VUE/actionsheet/demo.vue

@@ -27,8 +27,8 @@
       :title="translate('title')"
       :description="desc"
       :menu-items="menuItemsTwo"
-      @choose="chooseItemThree"
       :cancel-txt="translate('cancelTxt')"
+      @choose="chooseItemThree"
     />
 
     <h2>{{ translate('optionStatus') }}</h2>
@@ -40,8 +40,8 @@
       v-model:visible="state.isVisible4"
       :cancel-txt="translate('cancelTxt')"
       :menu-items="menuItemsThree"
-      @choose="chooseItemFour"
       :choose-tag-value="chooseTagValue"
+      @choose="chooseItemFour"
     />
 
     <h2>{{ translate('customContent') }}</h2>

src/packages/__VUE/actionsheet/index.taro.vue

@@ -1,28 +1,28 @@
 <template>
-  <nut-popup :visible="visible" position="bottom" round @click-overlay="close" :closeOnClickOverlay="closeAbled">
+  <nut-popup :visible="visible" position="bottom" round :closeOnClickOverlay="closeAbled" @click-overlay="close">
     <view :class="classes">
       <view v-if="title" class="nut-action-sheet__title">{{ title }}</view>
       <slot></slot>
       <view v-if="!slotDefault">
-        <view class="nut-action-sheet__item nut-action-sheet__desc" v-if="description">{{ description }}</view>
-        <view class="nut-action-sheet__menu" v-if="menuItems.length">
+        <view v-if="description" class="nut-action-sheet__item nut-action-sheet__desc">{{ description }}</view>
+        <view v-if="menuItems.length" class="nut-action-sheet__menu">
           <view
             v-for="(item, index) of menuItems"
+            :key="index"
             class="nut-action-sheet__item"
             :class="{
               'nut-action-sheet__item--disabled': item.disable,
               'nut-action-sheet__item--loading': item.loading
             }"
             :style="{ color: isHighlight(item) || item.color }"
-            :key="index"
             @click="chooseItem(item, index)"
           >
             <Loading v-if="item.loading"></Loading>
             <view v-else> {{ item[optionTag] }}</view>
             <view class="nut-action-sheet__subdesc">{{ item[optionSubTag] }}</view>
           </view>
         </view>
-        <view class="nut-action-sheet__cancel" v-if="cancelTxt" @click="cancelActionSheet">
+        <view v-if="cancelTxt" class="nut-action-sheet__cancel" @click="cancelActionSheet">
           {{ cancelTxt }}
         </view>
       </view>

src/packages/__VUE/actionsheet/index.vue

@@ -1,28 +1,28 @@
 <template>
-  <nut-popup :visible="visible" position="bottom" round @click-overlay="close" :closeOnClickOverlay="closeAbled">
+  <nut-popup :visible="visible" position="bottom" round :closeOnClickOverlay="closeAbled" @click-overlay="close">
     <view :class="classes">
       <view v-if="title" class="nut-action-sheet__title">{{ title }}</view>
       <slot></slot>
       <view v-if="!slotDefault">
-        <view class="nut-action-sheet__item nut-action-sheet__desc" v-if="description">{{ description }}</view>
-        <view class="nut-action-sheet__menu" v-if="menuItems.length">
+        <view v-if="description" class="nut-action-sheet__item nut-action-sheet__desc">{{ description }}</view>
+        <view v-if="menuItems.length" class="nut-action-sheet__menu">
           <view
             v-for="(item, index) of menuItems"
+            :key="index"
             class="nut-action-sheet__item"
             :class="{
               'nut-action-sheet__item--disabled': item.disable,
               'nut-action-sheet__item--loading': item.loading
             }"
             :style="{ color: isHighlight(item) || item.color }"
-            :key="index"
             @click="chooseItem(item, index)"
           >
             <Loading v-if="item.loading" name="loading"></Loading>
             <view v-else> {{ item[optionTag] }}</view>
             <view class="nut-action-sheet__subdesc">{{ item[optionSubTag] }}</view>
           </view>
         </view>
-        <view class="nut-action-sheet__cancel" v-if="cancelTxt" @click="cancelActionSheet">
+        <view v-if="cancelTxt" class="nut-action-sheet__cancel" @click="cancelActionSheet">
           {{ cancelTxt }}
         </view>
       </view>

src/packages/__VUE/address/demo.vue

@@ -23,9 +23,9 @@
       :city="city"
       :country="country"
       :town="town"
+      :columns-placeholder="placeholder"
       @change="(cal) => onChange(cal, 'select')"
       @close="close6"
-      :columns-placeholder="placeholder"
     ></nut-address>
 
     <h2>{{ translate('customAddress2') }}</h2>
@@ -51,8 +51,8 @@
       v-model:visible="exist"
       type="exist"
       :exist-address="existAddress"
-      @close="close2"
       :is-show-custom-address="false"
+      @close="close2"
       @selected="selected"
     ></nut-address>
 
@@ -63,8 +63,8 @@
       v-model:visible="customImg"
       type="exist"
       :exist-address="existAddress"
-      @close="close3"
       :is-show-custom-address="false"
+      @close="close3"
       @selected="selected"
     >
       <template #unselected-icon>

src/packages/__VUE/address/index.taro.vue

@@ -1,12 +1,12 @@
 <template>
   <nut-popup
+    v-model:visible="showPopup"
     position="bottom"
     :lock-scroll="lockScroll"
     :round="round"
     @close="close"
     @click-overlay="clickOverlay"
     @open="closeWay = 'self'"
-    v-model:visible="showPopup"
   >
     <view class="nut-address">
       <view class="nut-address__header">
@@ -32,24 +32,24 @@
       </view>
 
       <!-- 请选择 -->
-      <view class="nut-address__custom" v-if="['custom', 'custom2'].includes(privateType)">
-        <view class="nut-address__region" ref="tabRegion">
+      <view v-if="['custom', 'custom2'].includes(privateType)" class="nut-address__custom">
+        <view ref="tabRegion" class="nut-address__region">
           <view
-            :class="['nut-address__region-item', index == tabIndex ? 'active' : '']"
             v-for="(item, index) in selectedRegion"
             :key="index"
+            :class="['nut-address__region-item', index == tabIndex ? 'active' : '']"
             @click="changeRegionTab(item, index)"
           >
             <view>{{ getTabName(item, index) }} </view>
             <view :class="{ 'nut-address__region-line--mini': true, active: index == tabIndex }"></view>
           </view>
-          <view class="active nut-address__region-item" v-if="tabIndex == selectedRegion.length">
+          <view v-if="tabIndex == selectedRegion.length" class="active nut-address__region-item">
             <view>{{ getTabName(null, selectedRegion.length) }} </view>
             <view class="nut-address__region-line--mini active"></view>
           </view>
         </view>
 
-        <view class="nut-address__detail" v-if="privateType == 'custom'">
+        <view v-if="privateType == 'custom'" class="nut-address__detail">
           <div class="nut-address__detail-list">
             <nut-scroll-view
               :scroll-y="true"
@@ -64,7 +64,7 @@
                 @click="nextAreaList(item)"
               >
                 <div>
-                  <slot name="icon" v-if="selectedRegion[tabIndex]?.id == item.id">
+                  <slot v-if="selectedRegion[tabIndex]?.id == item.id" name="icon">
                     <Check class="nut-address-select-icon" width="13px"></Check> </slot
                   >{{ item.name }}
                 </div>
@@ -73,7 +73,7 @@
           </div>
         </view>
 
-        <view class="nut-address__elevator-group" v-else>
+        <view v-else class="nut-address__elevator-group">
           <nut-elevator
             :height="height"
             :index-list="transformData(regionList)"
@@ -83,26 +83,26 @@
       </view>
 
       <!-- 配送至 -->
-      <view class="nut-address__exist" v-else-if="privateType == 'exist'">
+      <view v-else-if="privateType == 'exist'" class="nut-address__exist">
         <div class="nut-address__exist-group">
           <ul class="nut-address__exist-group-list">
             <li
-              class="nut-address__exist-group-item"
-              :class="[item.selectedAddress ? 'active' : '']"
               v-for="(item, index) in existAddress"
               :key="index"
+              class="nut-address__exist-group-item"
+              :class="[item.selectedAddress ? 'active' : '']"
               @click="selectedExist(item)"
             >
-              <slot name="unselected-icon" v-if="!item.selectedAddress">
+              <slot v-if="!item.selectedAddress" name="unselected-icon">
                 <Location2 class="nut-address-select-icon" width="13px"></Location2>
               </slot>
 
-              <slot name="icon" v-if="item.selectedAddress">
+              <slot v-if="item.selectedAddress" name="icon">
                 <Check class="nut-address-select-icon" width="13px"></Check>
               </slot>
 
               <div class="nut-address__exist-item-info">
-                <div class="nut-address__exist-item-info-top" v-if="item.name && item.phone">
+                <div v-if="item.name && item.phone" class="nut-address__exist-item-info-top">
                   <div class="nut-address__exist-item-info-name">{{ item.name }}</div>
                   <div class="nut-address__exist-item-info-phone">{{ item.phone }}</div>
                 </div>
@@ -115,7 +115,7 @@
             </li>
           </ul>
         </div>
-        <div class="nut-address__exist-choose" @click="switchModule" v-if="isShowCustomAddress">
+        <div v-if="isShowCustomAddress" class="nut-address__exist-choose" @click="switchModule">
           <div class="nut-address__exist-choose-btn">{{
             customAndExistTitle || translate('chooseAnotherAddress')
           }}</div>

src/packages/__VUE/address/index.vue

@@ -1,14 +1,14 @@
 <template>
   <nut-popup
+    v-model:visible="showPopup"
     position="bottom"
     :lock-scroll="lockScroll"
     :round="round"
+    :teleportDisable="teleportDisable"
+    :teleport="teleport"
     @close="close"
     @click-overlay="clickOverlay"
     @open="closeWay = 'self'"
-    v-model:visible="showPopup"
-    :teleportDisable="teleportDisable"
-    :teleport="teleport"
   >
     <view class="nut-address">
       <view class="nut-address__header">
@@ -34,41 +34,41 @@
       </view>
 
       <!-- 请选择 -->
-      <view class="nut-address__custom" v-if="['custom', 'custom2'].includes(privateType)">
-        <view class="nut-address__region" ref="tabRegion">
+      <view v-if="['custom', 'custom2'].includes(privateType)" class="nut-address__custom">
+        <view ref="tabRegion" class="nut-address__region">
           <view
-            :class="['nut-address__region-item', index == tabIndex ? 'active' : '']"
             v-for="(item, index) in selectedRegion"
             :key="index"
+            :class="['nut-address__region-item', index == tabIndex ? 'active' : '']"
             @click="changeRegionTab(item, index)"
           >
             <view>{{ getTabName(item, index) }} </view>
           </view>
-          <view class="active nut-address__region-item" v-if="tabIndex == selectedRegion.length">
+          <view v-if="tabIndex == selectedRegion.length" class="active nut-address__region-item">
             <view>{{ getTabName(null, selectedRegion.length) }} </view>
           </view>
 
-          <view class="nut-address__region-line" ref="regionLine" :style="{ left: lineDistance + 'px' }"></view>
+          <view ref="regionLine" class="nut-address__region-line" :style="{ left: lineDistance + 'px' }"></view>
         </view>
 
-        <view class="nut-address__detail" v-if="privateType == 'custom'">
-          <ul class="nut-address__detail-list" ref="scrollDom">
+        <view v-if="privateType == 'custom'" class="nut-address__detail">
+          <ul ref="scrollDom" class="nut-address__detail-list">
             <li
               v-for="(item, index) in regionList"
               :key="index"
               :class="['nut-address__detail-item', selectedRegion[tabIndex]?.id == item.id ? 'active' : '']"
               @click="nextAreaList(item)"
             >
               <div>
-                <slot name="icon" v-if="selectedRegion[tabIndex]?.id == item.id">
+                <slot v-if="selectedRegion[tabIndex]?.id == item.id" name="icon">
                   <Check class="nut-address-select-icon" size="13px"></Check> </slot
                 >{{ item.name }}
               </div>
             </li>
           </ul>
         </view>
 
-        <view class="nut-address__elevator-group" v-else>
+        <view v-else class="nut-address__elevator-group">
           <nut-elevator
             :height="height"
             :index-list="transformData(regionList)"
@@ -78,26 +78,26 @@
       </view>
 
       <!-- 配送至 -->
-      <view class="nut-address__exist" v-else>
+      <view v-else class="nut-address__exist">
         <div class="nut-address__exist-group">
           <ul class="nut-address__exist-group-list">
             <li
-              :class="['nut-address__exist-group-item', item.selectedAddress ? 'active' : '']"
               v-for="(item, index) in existAddress"
               :key="index"
+              :class="['nut-address__exist-group-item', item.selectedAddress ? 'active' : '']"
               @click="selectedExist(item)"
             >
-              <slot name="unselected-icon" v-if="!item.selectedAddress">
+              <slot v-if="!item.selectedAddress" name="unselected-icon">
                 <Location2 class="nut-address-select-icon" size="13px"></Location2>
               </slot>
 
-              <slot name="icon" v-if="item.selectedAddress">
+              <slot v-if="item.selectedAddress" name="icon">
                 <Check class="nut-address-select-icon" size="13px"></Check>
               </slot>
 
               <div class="nut-address__exist-item-info">
-                <div class="nut-address__exist-item-info-name" v-if="item.name">{{ item.name }}</div>
-                <div class="nut-address__exist-item-info-phone" v-if="item.phone">{{ item.phone }}</div>
+                <div v-if="item.name" class="nut-address__exist-item-info-name">{{ item.name }}</div>
+                <div v-if="item.phone" class="nut-address__exist-item-info-phone">{{ item.phone }}</div>
                 <div class="nut-address__exist-item-info-bottom">
                   <view>
                     {{ item.provinceName + item.cityName + item.countyName + item.townName + item.addressDetail }}
@@ -108,7 +108,7 @@
           </ul>
         </div>
 
-        <div class="nut-address__exist-choose" @click="switchModule" v-if="isShowCustomAddress">
+        <div v-if="isShowCustomAddress" class="nut-address__exist-choose" @click="switchModule">
           <div class="nut-address__exist-choose-btn">{{
             customAndExistTitle || translate('chooseAnotherAddress')
           }}</div>

src/packages/__VUE/addresslist/components/GeneralShell.taro.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="nut-address-list-general" v-if="!swipeEdition">
+  <div v-if="!swipeEdition" class="nut-address-list-general">
     <component :is="renderCompontent()" @touchstart="holddownstart" @touchend="holddownend" @touchmove="holddownmove">
       <template #content-top>
         <slot name="content-info"></slot>
@@ -11,14 +11,14 @@
         <slot name="content-addrs"></slot>
       </template>
     </component>
-    <div class="nut-address-list-general__mask" v-if="longPress && showMaskRef" @click="maskClick">
+    <div v-if="longPress && showMaskRef" class="nut-address-list-general__mask" @click="maskClick">
       <slot name="longpress-all">
         <div class="nut-address-list-general__mask-copy" @click="copyCLick"> 复制地址 </div>
         <div class="nut-address-list-general__mask-set" @click="setDefault"> 设置默认 </div>
         <div class="nut-address-list-general__mask-del" @click="delLongClick"> 删除地址 </div>
       </slot>
     </div>
-    <div class="nut-address-list__mask-bottom" v-if="showMaskRef" @click="hideMaskClick"></div>
+    <div v-if="showMaskRef" class="nut-address-list__mask-bottom" @click="hideMaskClick"></div>
   </div>
   <nut-swipe v-else>
     <div class="nut-address-list-swipe">

src/packages/__VUE/addresslist/components/GeneralShell.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="nut-address-list-general" v-if="!swipeEdition">
+  <div v-if="!swipeEdition" class="nut-address-list-general">
     <component :is="renderCompontent()" @touchstart="holddownstart" @touchend="holddownend" @touchmove="holddownmove">
       <template #content-top>
         <slot name="content-info"></slot>
@@ -11,14 +11,14 @@
         <slot name="content-addrs"></slot>
       </template>
     </component>
-    <div class="nut-address-list-general__mask" v-if="longPress && showMaskRef" @click="maskClick">
+    <div v-if="longPress && showMaskRef" class="nut-address-list-general__mask" @click="maskClick">
       <slot name="longpress-all">
         <div class="nut-address-list-general__mask-copy" @click="copyCLick"> 复制地址 </div>
         <div class="nut-address-list-general__mask-set" @click="setDefault"> 设置默认 </div>
         <div class="nut-address-list-general__mask-del" @click="delLongClick"> 删除地址 </div>
       </slot>
     </div>
-    <div class="nut-address-list__mask-bottom" v-if="showMaskRef" @click="hideMaskClick"></div>
+    <div v-if="showMaskRef" class="nut-address-list__mask-bottom" @click="hideMaskClick"></div>
   </div>
   <nut-swipe v-else>
     <div class="nut-address-list-swipe">

src/packages/__VUE/addresslist/components/ItemContents.taro.vue

@@ -5,7 +5,7 @@
         <slot name="content-top">
           <div class="nut-address-list-item__info-contact-name">{{ item.addressName }}</div>
           <div class="nut-address-list-item__info-contact-tel">{{ item.phone }}</div>
-          <div class="nut-address-list-item__info-contact-default" v-if="item.defaultAddress">{{
+          <div v-if="item.defaultAddress" class="nut-address-list-item__info-contact-default">{{
             translate('default')
           }}</div>
         </slot>