Merge branch 'next' of https://github.com/jdf2e/nutui into next

src/packages/__VUE/button/index.scss

@@ -15,6 +15,7 @@
   appearance: none;
   user-select: none;
   touch-action: manipulation;
+  vertical-align: bottom;
 
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   -webkit-tap-highlight-color: transparent;

src/packages/__VUE/col/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <view :class="classes" :style="style" @click="handleClick">
+  <view :class="classes" :style="style">
     <slot></slot>
   </view>
 </template>
@@ -19,8 +19,8 @@ export default create({
       default: '0'
     }
   },
-  emits: ['click'],
-  setup(props, { emit }) {
+  emits: [],
+  setup(props) {
     const prefixCls = componentName;
     const gutter = inject('gutter') as number;
     const classes = computed(() => {
@@ -37,14 +37,9 @@ export default create({
         paddingRight: gutter / 2 + 'px'
       };
     });
-    const handleClick = (evt: MouseEvent) => {
-      evt.stopPropagation();
-      emit('click', evt);
-    };
     return {
       classes,
-      style,
-      handleClick
+      style
     };
   }
 });

src/packages/__VUE/icon/demo.vue

@@ -30,7 +30,7 @@
     <nut-cell-group v-for="item in icons.data" :title="currentLang == 'zh-CN' ? item.name : item.nameEn" :key="item">
       <nut-cell>
         <ul>
-          <li v-for="item in item.icons" :key="item">
+          <li v-for="item in item.icons" :key="item" @click="copyTag(item)">
             <nut-icon :name="item"></nut-icon>
             <span>{{ item }}</span>
           </li>
@@ -40,7 +40,7 @@
     <nut-cell-group v-for="item in icons.style" :title="currentLang == 'zh-CN' ? item.name : item.nameEn" :key="item">
       <nut-cell>
         <ul>
-          <li v-for="it in item.icons" :key="it">
+          <li v-for="it in item.icons" :key="it" @click="copyTag(it['animation-name'])">
             <nut-icon :name="it.name" :class="`nut-icon-${it['animation-name']} nut-icon-${it['animation-time']}`">
             </nut-icon>
             <span>{{ it['animation-name'] }}</span>
@@ -59,24 +59,39 @@ const initTranslate = () =>
       basic: '基本用法',
       imageLink: '图片链接',
       iconColor: '图标颜色',
-      iconSize: '图标大小'
+      iconSize: '图标大小',
+      copyToast: '复制成功'
     },
     'en-US': {
       basic: 'Basic Usage',
       imageLink: 'Image Link',
       iconColor: 'Icon Color',
-      iconSize: 'Icon Size'
+      iconSize: 'Icon Size',
+      copyToast: 'Copied successfully'
     }
   });
 // import icons from '@/packages/styles/font/iconfont.json';
 import icons from '@/packages/styles/font/config.json';
 import { createComponent } from '@/packages/utils/create';
 const { createDemo, translate } = createComponent('icon');
+import { Toast } from '@/packages/nutui.vue';
 export default createDemo({
   props: {},
   setup() {
     initTranslate();
-    return { icons, translate, currentLang };
+    const copyTag = (name: string) => {
+      const text = `&lt;nut-icon name="${name}"&gt;&lt;/nut-icon&gt;`;
+      const input = document.createElement('input');
+      document.body.appendChild(input);
+      input.setAttribute('value', text);
+      input.select();
+      if (document.execCommand('copy')) {
+        document.execCommand('copy');
+        Toast.text(`${translate('copyToast')}: <br/>${text}`);
+      }
+      document.body.removeChild(input);
+    };
+    return { icons, translate, currentLang, copyTag };
   }
 });
 </script>

src/packages/__VUE/list/doc.en-US.md

@@ -60,6 +60,32 @@ export default {
   }
 };
 </script>
+<style lang="scss">
+body {
+  width: 100%;
+  height: 100vh;
+}
+#app {
+  width: 100%;
+  height: 100%;
+}
+.demo {
+  height: 100%;
+  .nut-cell {
+    height: 100%;
+  }
+  .list-item {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 50px;
+    margin-bottom: 10px;
+    background-color: #f4a8b6;
+    border-radius: 10px;
+  }
+}
+</style>
 ```
 
 :::

src/packages/__VUE/list/doc.md

@@ -60,6 +60,32 @@ export default {
   }
 };
 </script>
+<style lang="scss">
+body {
+  width: 100%;
+  height: 100vh;
+}
+#app {
+  width: 100%;
+  height: 100%;
+}
+.demo {
+  height: 100%;
+  .nut-cell {
+    height: 100%;
+  }
+  .list-item {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 50px;
+    margin-bottom: 10px;
+    background-color: #f4a8b6;
+    border-radius: 10px;
+  }
+}
+</style>
 ```
 
 :::

src/packages/__VUE/radio/index.scss

@@ -55,6 +55,7 @@
   }
 
   &__label {
+    flex: 1;
     margin-left: $radio-label-margin-left;
     font-size: $radio-label-font-size;
     color: $radio-label-font-color;

src/packages/__VUE/row/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <view :class="getClasses()" @click="handleClick">
+  <view :class="getClasses()">
     <slot></slot>
   </view>
 </template>
@@ -31,8 +31,8 @@ export default create({
       default: 'nowrap'
     }
   },
-  emits: ['click'],
-  setup(props, { emit }) {
+  emits: [],
+  setup(props) {
     const prefixCls = componentName;
     provide('gutter', props.gutter);
     const getClass = (prefix: string, type: string) => {
@@ -47,13 +47,8 @@ export default create({
               ${prefixCls}
               `;
     };
-    const handleClick = (evt: MouseEvent) => {
-      evt.stopPropagation();
-      emit('click', evt);
-    };
     return {
-      getClasses,
-      handleClick
+      getClasses
     };
   }
 });