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

jd/generate-entry-es.js

@@ -16,7 +16,7 @@ config.nav.forEach((item) => {
       children: element.styleDeps
     });
     // gen entry
-    let outputMjs = `import _${element.name} from '../_es/${element.name}.js';
+    let outputMjs = `import '../../styles/reset.css';\nimport _${element.name} from '../_es/${element.name}.js';
 const treeshaking = (t) => t;
 const ${element.name} = treeshaking(_${element.name});
 export { ${element.name} };`;

publish/nutui/package.json

@@ -7,7 +7,8 @@
   "style": "dist/style.css",
   "typings": "dist/types/index.d.ts",
   "sideEffects": [
-    "dist/packages/**/*",
+    "dist/packages/_es/*",
+    "dist/packages/**/style.mjs",
     "dist/styles/**",
     "dist/style.css"
   ],

src/packages/__VUE/barrage/index.vue

@@ -8,7 +8,7 @@
   </div>
 </template>
 <script lang="ts">
-import { computed, onMounted, onUnmounted, onDeactivated, ref, watch, nextTick, useSlots } from 'vue';
+import { computed, onMounted, onUnmounted, ref, watch, nextTick, useSlots } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { componentName, create } = createComponent('barrage');
 
@@ -40,9 +40,7 @@ export default create({
       default: true
     }
   },
-  emits: ['click'],
-
-  setup(props, { slots }) {
+  setup(props) {
     const classTime = new Date().getTime();
     const slotDefault = !!useSlots().default;
 
@@ -65,36 +63,60 @@ export default create({
     const danmuCWidth = ref(0);
 
     onMounted(() => {
+      init();
+      if (slotDefault) {
+        document.addEventListener('visibilitychange', function () {
+          if (document.visibilityState === 'hidden') {
+            clearTime();
+            index.value = 0;
+            eleSlot('hidden');
+          } else if (document.visibilityState === 'visible') {
+            init();
+          }
+        });
+      }
+    });
+
+    onUnmounted(() => {
+      danmuList.value = [];
+      clearTime();
+    });
+
+    const init = () => {
       danmuCWidth.value = dmBody.value.offsetWidth;
       if (slotDefault) {
-        const list = document.getElementsByClassName('slotBody' + classTime);
-        let childrens = list?.[0]?.children || [];
-        const dmList: any[] = [];
-        if (childrens) {
-          Array.from(childrens).forEach((item: any) => {
-            item.style.opacity = '0';
-            dmList.push(item);
-          });
-        }
-        danmuList.value = dmList;
+        eleSlot('init');
       }
       setTimeout(() => {
         dmBody.value?.style.setProperty('--move-distance', `-${danmuCWidth.value}px`);
         run();
       }, 300);
-    });
+    };
 
-    onUnmounted(() => {
-      danmuList.value = [];
-      clearInterval(timer);
-      timer = 0;
-    });
+    const eleSlot = (flag?: string) => {
+      const list = document.getElementsByClassName('slotBody' + classTime);
+      let childrens = list?.[0]?.children || [];
+      const dmList: any[] = [];
+      if (childrens) {
+        Array.from(childrens).forEach((item: any) => {
+          if (flag == 'init') {
+            item.style.opacity = '0';
+            dmList.push(item);
+          } else {
+            item.classList = '';
+            item.style = {};
+          }
+        });
+      }
+      if (flag == 'init') {
+        danmuList.value = dmList;
+      }
+    };
 
-    onDeactivated(() => {
-      danmuList.value = [];
-      clearInterval(timer);
+    const clearTime = () => {
+      clearTimeout(timer);
       timer = 0;
-    });
+    };
 
     watch(
       () => props.danmu,
@@ -115,20 +137,18 @@ export default create({
     };
 
     const run = () => {
-      clearInterval(timer);
-      timer = 0;
+      clearTime();
       timer = setTimeout(() => {
         play();
-        run();
       }, props.frequency);
     };
-    // const distance = ref('0');
     const play = () => {
       if (!props.loop && index.value >= danmuList.value.length) {
         return;
       }
       const _index = props.loop ? index.value % danmuList.value.length : index.value;
       let el = document.createElement(`view`);
+
       if (slotDefault && typeof danmuList.value[_index] == 'object') {
         el = danmuList.value[_index];
         el?.classList?.add('dmitem');
@@ -137,10 +157,9 @@ export default create({
         el.classList.add('dmitem');
         dmContainer.value.appendChild(el);
       }
-
       // let el = document.createElement(`div`);
       // el.innerHTML = danmuList.value[_index] as string;
-      // el.classList.add('dmitem');
+      // el.classList.add('nut-barrage__item');
       // dmContainer.value.appendChild(el);
       nextTick(() => {
         const height = el.offsetHeight;
@@ -152,25 +171,26 @@ export default create({
           const width = el.offsetWidth;
           el.style.width = width + 20 + 'px';
         }
-
-        // el.style.left = "-"+(_index % rows.value) + 'px';
+        // el.style.left = '-' + (_index % rows.value) + 'px';
         // el.style.setProperty('--move-distance', `-${danmuCWidth.value}px`);
-        // document.documentElement.style.setProperty('--move-distance', `-${danmuCWidth.value}px`);
         // distance.value = '-' + (speeds / 1000) * 150 + '%';
-        el.dataset.index = `${_index}`;
-        if (slotDefault) {
-          index.value++;
-          el.addEventListener('animationend', () => {
-            if (el?.classList?.contains('move')) {
-              el.classList.remove('move');
-            }
-          });
-        } else {
-          el.addEventListener('animationend', () => {
+        // el.dataset.index = `${_index}`;
+
+        el.addEventListener('animationend', () => {
+          if (slotDefault) {
+            el.classList.remove('move');
+          } else {
             dmContainer.value.removeChild(el);
-          });
-          index.value++;
+          }
+        });
+        index.value++;
+        if (index.value >= danmuList.value.length) {
+          index.value = 0;
         }
+        el.removeEventListener('animationend', () => {
+          // 回调
+        });
+        run();
       });
     };
     return { classTime, classes, danmuList, dmBody, dmContainer, add };

src/packages/__VUE/cell/index.scss

@@ -86,6 +86,7 @@
   &__value {
     display: inline-block;
     text-align: right;
+    flex: 1;
     font-size: $cell-desc-font;
     color: $cell-desc-color;
     &--alone {

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

@@ -179,13 +179,13 @@ export default create({
     };
     const open = () => {
       proxyData.openExpanded = !proxyData.openExpanded;
-      let time = contentRef.value.childNodes?.length || 1;
-      setTimeout(() => {
-        animation();
-      }, 500 * time);
-      // timer.value = setInterval(() => {
-      // animation();
-      // }, 600);
+      // let time = contentRef.value.childNodes?.length || 1;
+      setTimeout(
+        () => {
+          animation();
+        },
+        init.value ? 500 : 0
+      );
     };
 
     const defaultOpen = () => {
@@ -242,7 +242,9 @@ export default create({
         if (tm && tm.length > 0) {
           let h = tm[0]['height'];
           item1.conHeight = h;
-          // resetHeight(h);
+          setTimeout(() => {
+            init.value && handleOpen();
+          }, 500);
         }
       });
     };
@@ -252,7 +254,9 @@ export default create({
         let ary: any = Array.from(item1.$el.children);
         let h = ary[1].children[0]['offsetHeight'];
         item1.conHeight = h;
-        // resetHeight(h);
+        setTimeout(() => {
+          init.value && handleOpen();
+        }, 500);
       });
     };
     // const prevHeight = ref(0);
@@ -282,7 +286,7 @@ export default create({
         }
       });
     };
-    onMounted(() => {
+    const handleOpen = () => {
       const { name } = props;
       const active = parent && parent.props.active;
       if (typeof active == 'number' || typeof active == 'string') {
@@ -295,6 +299,10 @@ export default create({
           defaultOpen();
         }
       }
+      init.value = false;
+    };
+    const init = ref(true);
+    onMounted(() => {
       // 获取 DOM 元素
       if (Taro.getEnv() === 'WEB') {
         getRefHeight();

src/packages/__VUE/signature/demo.vue

@@ -3,24 +3,25 @@
     <h2>{{ translate('basic') }}</h2>
     <div>
       <nut-signature @confirm="confirm" @clear="clear" custom-class="test" @start="start"></nut-signature>
-      <p class="demo-tips demo1">{{ translate('tips') }}</p>
+      <img :src="demoSignUrl" class="demoSignUrl" v-if="demoSignUrl" />
     </div>
     <h2>{{ translate('title') }}</h2>
     <div>
       <nut-signature :lineWidth="lineWidth" :strokeStyle="strokeStyle" @end="end"></nut-signature>
+      <img :src="demoSignUrl2" class="demoSignUrl" v-if="demoSignUrl2" />
     </div>
   </div>
 </template>
 
 <script lang="ts">
-import { reactive } from 'vue';
+import { reactive, ref } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { createDemo, translate } = createComponent('signature');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
 const initTranslate = () =>
   useTranslate({
     'zh-CN': {
-      basic: '基本用法',
+      basic: '基础用法',
       title: '修改颜色和签字粗细',
       tips: 'Tips: 点击确认按钮,下方显示签名图片'
     },
@@ -34,18 +35,36 @@ export default createDemo({
   props: {},
   setup() {
     initTranslate();
+    const demoSignUrl = ref('');
+    const demoSignUrl2 = ref('');
     const state = reactive({
       lineWidth: 4,
       strokeStyle: 'green'
     });
 
+    const clear = () => {
+      demoSignUrl.value = '';
+      console.log('清除事件');
+    };
+    const clear2 = () => {
+      demoSignUrl2.value = '';
+      console.log('清除事件');
+    };
     const confirm = (canvas: any, data: any) => {
-      let img = document.createElement('img');
-      img.src = data;
-      (document.querySelector('.demo1') as any).appendChild(img);
+      if (data === '') {
+        console.log(canvas);
+        return false;
+      }
+      demoSignUrl.value = data;
+      console.log('图片地址', canvas, data);
     };
-    const clear = () => {
-      console.log('清除');
+    const confirm2 = (canvas: any, data: any) => {
+      if (data === '') {
+        console.log(canvas);
+        return false;
+      }
+      demoSignUrl2.value = data;
+      console.log('图片地址', canvas, data);
     };
     const start = () => {
       console.log('签名开始');
@@ -53,7 +72,7 @@ export default createDemo({
     const end = () => {
       console.log('签名结束');
     };
-    return { ...state, confirm, clear, translate, start, end };
+    return { ...state, confirm, clear, translate, demoSignUrl, demoSignUrl2, confirm2, clear2, start, end };
   }
 });
 </script>
@@ -67,4 +86,8 @@ export default createDemo({
     color: #666;
   }
 }
+.demoSignUrl {
+  width: 100px;
+  height: 100px;
+}
 </style>

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

@@ -132,5 +132,5 @@ export default {
 |start `v3.2.0` | signature start callback function (refers to the beginning of a stroke) | none
 |signing `v3.2.0`| the callback function being signed (refers to a stroke in progress) | event
 |end `v3.2.0`| signature end callback function (refers to the end of a stroke) | none
-| confirm | Click the confirm button to trigger the event callback function | Canvas and data URI displayed by signature image
+| confirm | Click the confirm button to trigger the event callback function | `canvas and signature image display data URI，<br/>If not drawn, returns a tooltip and an empty data URI`
 | clear | Click the re sign button to trigger the event callback function | -

src/packages/__VUE/signature/doc.md

@@ -111,5 +111,5 @@ export default {
 | start `v3.2.0` | 签名开始回调函数（指某次笔画的开始） | 无
 | signing `v3.2.0` | 正在签名的回调函数（指某次笔画进行中） | event
 | end `v3.2.0` | 签名结束回调函数（指某次笔画的结束）| 无
-| confirm | 点击确认按钮触发事件回调函数 | canvas和签名图片展示的 data URI
+| confirm | 点击确认按钮触发事件回调函数 | canvas和签名图片展示的 data URI，<br>如未绘制，则返回提示信息和空 data URI
 | clear | 点击重签按钮触发事件回调函数 | 无

src/packages/__VUE/signature/doc.taro.md

@@ -81,5 +81,5 @@ export default {
 | start `v3.2.0`| 签名开始回调函数（指某次笔画的开始） | 无
 | signing `v3.2.0`| 正在签名的回调函数（指某次笔画进行中） | event
 | end `v3.2.0`| 签名结束回调函数（指某次笔画的结束）| 无
-| confirm | 点击确认按钮触发事件回调函数 | data URI
+| confirm | 点击确认按钮触发事件回调函数 | canvas和签名图片展示的 data URI，<br>如未绘制，则返回提示信息和空 data URI
 | clear | 点击重签按钮触发事件回调函数 | 无

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

@@ -78,12 +78,13 @@ export default create({
       state.ctx.lineWidth = props.lineWidth;
       state.ctx.strokeStyle = props.strokeStyle;
     };
-
+    const isDraw = ref(false);
     const moveEventHandler = (event: { preventDefault: () => void; changedTouches: any[] }) => {
       event.preventDefault();
       if (!state.ctx) {
         return false;
       }
+      isDraw.value = true;
       let evt = event.changedTouches[0];
       emit('signing', evt);
       let mouseX = evt.x || evt.clientX;
@@ -114,6 +115,7 @@ export default create({
       state.ctx.closePath();
 
       emit('clear');
+      isDraw.value = false;
     };
 
     const confirm = () => {
@@ -136,7 +138,10 @@ export default create({
             canvasId: 'spcanvas',
             fileType: props.type,
             success: function (result) {
-              emit('confirm', state.canvas, result.tempFilePath);
+              const _canvas = !isDraw.value ? '请绘制签名' : state.canvas;
+              const _filePath = !isDraw.value ? '' : result.tempFilePath;
+              emit('confirm', _canvas, _filePath);
+              // emit('confirm', state.canvas, result.tempFilePath);
             },
             fail: function (result) {
               emit('confirm', result);

src/packages/__VUE/signature/index.vue

@@ -121,7 +121,15 @@ export default create({
     const confirm = () => {
       onSave(canvas.value);
     };
-
+    const isCanvasBlank = (canvas: any) => {
+      if (!canvas) {
+        return true;
+      }
+      var blank: any = document.createElement('canvas');
+      blank.width = canvas.width;
+      blank.height = canvas.height;
+      return canvas?.toDataURL() == blank.toDataURL();
+    };
     const onSave = (canvas: { toDataURL: (arg0: string, arg1?: number | undefined) => any }) => {
       let dataurl;
       switch (props.type) {
@@ -132,8 +140,12 @@ export default create({
           dataurl = canvas.toDataURL('image/jpeg', 0.8);
           break;
       }
+      const _canvas = isCanvasBlank(canvas) ? '请绘制签名' : canvas;
+      const _filePath = isCanvasBlank(canvas) ? '' : dataurl;
       clear();
-      emit('confirm', canvas, dataurl);
+      emit('confirm', _canvas, _filePath);
+      // clear();
+      // emit('confirm', canvas, dataurl);
     };
 
     onMounted(() => {

src/packages/styles/reset.css

@@ -0,0 +1,3 @@
+html {
+  -webkit-tap-highlight-color: transparent;
+}