chore(lint): add vue/attribute-hyphenation

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'
+    'vue/attributes-order': 'off'
   }
 };

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

@@ -1,5 +1,5 @@
 <template>
-  <nut-popup :visible="visible" position="bottom" round @click-overlay="close" :closeOnClickOverlay="closeAbled">
+  <nut-popup :visible="visible" position="bottom" round @click-overlay="close" :close-on-click-overlay="closeAbled">
     <view :class="classes">
       <view v-if="title" class="nut-action-sheet__title">{{ title }}</view>
       <slot></slot>

src/packages/__VUE/actionsheet/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <nut-popup :visible="visible" position="bottom" round @click-overlay="close" :closeOnClickOverlay="closeAbled">
+  <nut-popup :visible="visible" position="bottom" round @click-overlay="close" :close-on-click-overlay="closeAbled">
     <view :class="classes">
       <view v-if="title" class="nut-action-sheet__title">{{ title }}</view>
       <slot></slot>

src/packages/__VUE/address/index.vue

@@ -7,7 +7,7 @@
     @click-overlay="clickOverlay"
     @open="closeWay = 'self'"
     v-model:visible="showPopup"
-    :teleportDisable="teleportDisable"
+    :teleport-disable="teleportDisable"
     :teleport="teleport"
   >
     <view class="nut-address">

src/packages/__VUE/addresslist/demo.vue

@@ -13,7 +13,7 @@
     <h2>{{ translate('title1') }}</h2>
     <nut-address-list
       :data="data"
-      long-Press
+      long-press
       :show-bottom-button="false"
       @click-item="clickItem"
       @del-icon="delClick"
@@ -27,7 +27,7 @@
     <h2>{{ translate('title2') }}</h2>
     <nut-address-list
       :data="data"
-      swipeEdition
+      swipe-edition
       show-bottom-button
       @click-item="clickItem"
       @del-icon="delClick"

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

@@ -4,8 +4,8 @@
       v-for="(item, index) of dataArray"
       :key="index"
       :item="item"
-      :longPress="longPress"
-      :swipeEdition="swipeEdition"
+      :long-press="longPress"
+      :swipe-edition="swipeEdition"
       @del-icon="clickDelIcon"
       @edit-icon="clickEditIcon"
       @click-item="clickContentItem"

src/packages/__VUE/addresslist/index.vue

@@ -4,8 +4,8 @@
       v-for="(item, index) of dataArray"
       :key="index"
       :item="item"
-      :longPress="longPress"
-      :swipeEdition="swipeEdition"
+      :long-press="longPress"
+      :swipe-edition="swipeEdition"
       @del-icon="clickDelIcon"
       @edit-icon="clickEditIcon"
       @click-item="clickContentItem"

src/packages/__VUE/avatar/demo.vue

@@ -75,7 +75,7 @@
     </nut-cell>
 
     <nut-cell>
-      <nut-avatar-group max-count="3" max-color="#fff" max-bgColor="#498ff2">
+      <nut-avatar-group max-count="3" max-color="#fff" max-bg-color="#498ff2">
         <nut-avatar>
           <img
             src="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png"
@@ -92,7 +92,7 @@
     </nut-cell>
     <h2>{{ translate('title7') }}</h2>
     <nut-cell>
-      <nut-avatar-group max-count="3" zIndex="right" max-content="...">
+      <nut-avatar-group max-count="3" z-index="right" max-content="...">
         <nut-avatar>
           <img
             src="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png"
@@ -119,7 +119,7 @@
       >{{ translate('title9') }}<nut-button @click="addAvatar" size="mini">{{ translate('add') }}</nut-button></h2
     >
     <nut-cell>
-      <nut-avatar-group max-count="4" zIndex="right">
+      <nut-avatar-group max-count="4" z-index="right">
         <nut-avatar v-for="i in avatarCount" :key="i">
           <My v-if="i % 2 == 0" />
           <img

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

@@ -5,7 +5,7 @@
       v-if="foldCount > 0"
       class="avater-fold"
       :color="maxColor"
-      :bgColor="maxBgColor"
+      :bg-color="maxBgColor"
       :size="size"
       :shape="shape"
       :style="{ magrinLeft: `${span}px` }"

src/packages/__VUE/avatargroup/index.vue

@@ -5,7 +5,7 @@
       v-if="foldCount > 0"
       class="avater-fold"
       :color="maxColor"
-      :bgColor="maxBgColor"
+      :bg-color="maxBgColor"
       :size="size"
       :shape="shape"
       :style="{ magrinLeft: `${span}px` }"

src/packages/__VUE/card/demo.vue

@@ -5,21 +5,21 @@
       :img-url="state.imgUrl"
       :title="state.title"
       :price="state.price"
-      :vipPrice="state.vipPrice"
-      :shopDesc="state.shopDesc"
+      :vip-price="state.vipPrice"
+      :shop-desc="state.shopDesc"
       :delivery="state.delivery"
-      :shopName="state.shopName"
+      :shop-name="state.shopName"
     >
     </nut-card>
     <h2>{{ translate('customProduct') }}</h2>
     <nut-card
       :img-url="state.imgUrl"
       :title="state.title"
       :price="state.price"
-      :vipPrice="state.vipPrice"
-      :shopDesc="state.shopDesc"
+      :vip-price="state.vipPrice"
+      :shop-desc="state.shopDesc"
       :delivery="state.delivery"
-      :shopName="state.shopName"
+      :shop-name="state.shopName"
     >
       <template #prolist>
         <div class="search_prolist_attr">
@@ -34,10 +34,10 @@
       :img-url="state.imgUrl"
       :title="state.title"
       :price="state.price"
-      :vipPrice="state.vipPrice"
-      :shopDesc="state.shopDesc"
+      :vip-price="state.vipPrice"
+      :shop-desc="state.shopDesc"
       :delivery="state.delivery"
-      :shopName="state.shopName"
+      :shop-name="state.shopName"
     >
       <template #shop-tag>
         <div>{{ translate('customShop') }}</div>
@@ -58,10 +58,10 @@
       :img-url="state.imgUrl"
       :title="state.title"
       :price="state.price"
-      :vipPrice="state.vipPrice"
-      :shopDesc="state.shopDesc"
+      :vip-price="state.vipPrice"
+      :shop-desc="state.shopDesc"
       :delivery="state.delivery"
-      :shopName="state.shopName"
+      :shop-name="state.shopName"
     >
       <template #footer>
         <div class="customize">{{ translate('customContent') }}</div>

src/packages/__VUE/cascader/cascader-item.taro.vue

@@ -3,7 +3,7 @@
     <template v-if="!initLoading && panes.length">
       <nut-tab-pane v-for="(pane, index) in panes" :title="formatTabTitle(pane)" :key="index">
         <view role="menu" class="nut-cascader-pane">
-          <nut-scroll-view :scrollY="true" style="height: 100%">
+          <nut-scroll-view :scroll-y="true" style="height: 100%">
             <template v-for="node in pane.nodes" :key="node.value">
               <view
                 class="nut-cascader-item"

src/packages/__VUE/cascader/demo.vue

@@ -28,11 +28,11 @@
       :title="translate('addressTip')"
       v-model:visible="demo2.visible"
       v-model="demo2.value"
-      labelKey="text"
+      label-key="text"
       @change="events.change"
       @path-change="events.pathChange"
-      valueKey="text"
-      childrenKey="items"
+      value-key="text"
+      children-key="items"
       :options="demo2.options"
     ></nut-cascader>
 
@@ -50,7 +50,7 @@
       @change="events.change"
       @path-change="events.pathChange"
       lazy
-      :lazyLoad="demo3.lazyLoad"
+      :lazy-load="demo3.lazyLoad"
     ></nut-cascader>
 
     <h2>{{ translate('title3') }}</h2>
@@ -68,7 +68,7 @@
       @path-change="events.pathChange"
       :options="demo4.options"
       lazy
-      :lazyLoad="demo4.lazyLoad"
+      :lazy-load="demo4.lazyLoad"
     ></nut-cascader>
 
     <h2>{{ translate('title4') }}</h2>
@@ -85,7 +85,7 @@
       @change="events.change"
       @path-change="events.pathChange"
       :options="demo5.options"
-      :convertConfig="demo5.convertConfig"
+      :convert-config="demo5.convertConfig"
     ></nut-cascader>
   </div>
 </template>

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

@@ -18,7 +18,7 @@
       <nut-cascader-item
         @change="onChange"
         @path-change="onPathChange"
-        :modelValue="innerValue"
+        :model-value="innerValue"
         :options="options"
         :lazy="lazy"
         :lazy-load="lazyLoad"
@@ -35,7 +35,7 @@
     <nut-cascader-item
       @change="onChange"
       @path-change="onPathChange"
-      :modelValue="innerValue"
+      :model-value="innerValue"
       :options="options"
       :lazy="lazy"
       :lazy-load="lazyLoad"

src/packages/__VUE/cascader/index.vue

@@ -16,7 +16,7 @@
       <nut-cascader-item
         @change="onChange"
         @path-change="onPathChange"
-        :modelValue="innerValue"
+        :model-value="innerValue"
         :options="options"
         :lazy="lazy"
         :lazy-load="lazyLoad"
@@ -32,7 +32,7 @@
     <nut-cascader-item
       @change="onChange"
       @path-change="onPathChange"
-      :modelValue="innerValue"
+      :model-value="innerValue"
       :options="options"
       :lazy="lazy"
       :lazy-load="lazyLoad"

src/packages/__VUE/category/demo.vue

@@ -2,16 +2,16 @@
   <div class="demo">
     <h2>{{ translate('title1') }}</h2>
     <nut-category :category="category" @change="change">
-      <nut-category-pane :categoryChild="categoryChild1" @on-change="onChange"> </nut-category-pane>
+      <nut-category-pane :category-child="categoryChild1" @on-change="onChange"> </nut-category-pane>
     </nut-category>
     <h2>{{ translate('title2') }}</h2>
     <nut-category :category="category" @change="changeText">
-      <nut-category-pane type="text" :categoryChild="categoryChild2" @on-change="onChange"> </nut-category-pane
+      <nut-category-pane type="text" :category-child="categoryChild2" @on-change="onChange"> </nut-category-pane
     ></nut-category>
 
     <h2>{{ translate('title3') }}</h2>
     <nut-category
-      ><nut-category-pane type="custom" :customCategory="customCategory" @on-change="changeCustom"> </nut-category-pane
+      ><nut-category-pane type="custom" :custom-category="customCategory" @on-change="changeCustom"> </nut-category-pane
     ></nut-category>
   </div>
 </template>

src/packages/__VUE/cell/demo.vue

@@ -55,7 +55,7 @@
     </nut-cell-group>
 
     <h2>{{ translate('displayIcon') }}</h2>
-    <nut-cell :title="translate('name')" :desc="translate('desc')" isLink>
+    <nut-cell :title="translate('name')" :desc="translate('desc')" is-link>
       <template #icon>
         <My />
       </template>

src/packages/__VUE/circleprogress/demo.vue

@@ -6,7 +6,7 @@
     </div>
     <h2>{{ translate('customWidth') }}</h2>
     <div class="demo__piece">
-      <nut-circle-progress progress="50" strokeWidth="10" />
+      <nut-circle-progress progress="50" stroke-width="10" />
     </div>
 
     <h2>{{ translate('Gradient') }}</h2>

src/packages/__VUE/comment/demo.vue

@@ -22,8 +22,8 @@
     <h2>{{ translate('multiRow') }}</h2>
     <nut-cell>
       <nut-comment
-        headerType="complex"
-        imagesRows="multi"
+        header-type="complex"
+        images-rows="multi"
         :images="cmt.images"
         :videos="cmt.videos"
         :info="cmt.info"
@@ -50,7 +50,7 @@
     <h2>{{ translate('additionalReviewd') }}</h2>
     <nut-cell>
       <nut-comment
-        imagesRows="multi"
+        images-rows="multi"
         :images="cmt.images"
         :videos="cmt.videos"
         :info="cmt.info"

src/packages/__VUE/countdown/demo.vue

@@ -2,38 +2,38 @@
   <div class="demo">
     <h2>{{ translate('basic') }}</h2>
     <nut-cell>
-      <nut-countdown :endTime="end" @on-end="onend"></nut-countdown>
+      <nut-countdown :end-time="end" @on-end="onend"></nut-countdown>
     </nut-cell>
     <h2>{{ translate('format') }}</h2>
     <nut-cell>
       <nut-countdown
-        :endTime="end"
+        :end-time="end"
         :format="`DD ${translate('day')} HH ${translate('hour')} mm ${translate('minute')} ss ${translate('second')}`"
       />
     </nut-cell>
 
     <h2>{{ translate('millisecond') }}</h2>
 
     <nut-cell>
-      <nut-countdown :endTime="end" millisecond format="HH:mm:ss:SS" />
+      <nut-countdown :end-time="end" millisecond format="HH:mm:ss:SS" />
     </nut-cell>
 
     <h2>{{ translate('serverTime') }}</h2>
 
     <nut-cell>
-      <nut-countdown :startTime="serverTime" :endTime="end" />
+      <nut-countdown :start-time="serverTime" :end-time="end" />
     </nut-cell>
 
     <h2>{{ translate('async') }}</h2>
 
     <nut-cell>
-      <nut-countdown :endTime="asyncEnd" />
+      <nut-countdown :end-time="asyncEnd" />
     </nut-cell>
 
     <h2>{{ translate('controlTime') }}</h2>
 
     <nut-cell>
-      <nut-countdown :endTime="end" :paused="paused" @on-paused="onpaused" @on-restart="onrestart" />
+      <nut-countdown :end-time="end" :paused="paused" @on-paused="onpaused" @on-restart="onrestart" />
       <div style="position: absolute; right: 10px; top: 9px">
         <nut-button type="primary" size="small" @click="toggle">{{ paused ? 'start' : 'stop' }}</nut-button>
       </div>
@@ -43,7 +43,7 @@
 
     <nut-cell>
       <span>
-        <nut-countdown v-model="resetTime" :endTime="end">
+        <nut-countdown v-model="resetTime" :end-time="end">
           <div class="countdown-part-box">
             <div class="part-item-symbol">{{ resetTime.d }}{{ translate('day') }}</div>
             <div class="part-item h">{{ resetTime.h }}</div>
@@ -58,7 +58,7 @@
 
     <h2>{{ translate('handleControl') }}</h2>
     <nut-cell>
-      <nut-countdown time="20000" ref="Countdown" :autoStart="false" format="ss:SS" />
+      <nut-countdown time="20000" ref="Countdown" :auto-start="false" format="ss:SS" />
     </nut-cell>
 
     <nut-grid :column-num="3">

src/packages/__VUE/datepicker/demo.vue

@@ -8,7 +8,7 @@
       :max-date="maxDate"
       @confirm="confirm"
       :is-show-chinese="true"
-      :threeDimensional="false"
+      :three-dimensional="false"
     ></nut-date-picker>
 
     <h2>{{ translate('popupDesc') }}</h2>
@@ -20,7 +20,7 @@
         :max-date="maxDate"
         @confirm="popupConfirm"
         :is-show-chinese="true"
-        :threeDimensional="false"
+        :three-dimensional="false"
       >
         <nut-button block type="primary" @click="alwaysFun">{{ translate('forever') }}</nut-button>
       </nut-date-picker>