fix: ts 问题修正，demo 同步，单元测试排错 (#1648)

* fix: countup优化滚动逻辑

* fix: collapse 无法动态更新问题修复

* fix: 解决H5侧动态加载问题

* docs: 文档增加调试功能(Barrage、Signature、CountUp、TextArea、Collapse)

* feat: 折叠面板 collapse 单元测试

* feat: countUp 单元测试

* feat: barrage 单元测试

* fix: 签名组件单元测试

* feat: textarea 单元测试

* feat: collapse 标题多行展示,无内容不下拉,图标位置配置

* feat: textarea 自动撑开，collapse 组件能力

* fix: collapse 单元测试优化

* fix: textarea 单元测试优化

* fix: 修改input参数,maxNum 改为 maxLength,文档修改等

* fix: maxlength 值

* fix: textarea 自适应

* fix: textarea rows

* upd: notify 增加组件调用方式

* fix: demo 修改

* feat: 新增collapse组件自定义内容（不折叠）功能

* fix: notify 单元测试优化

* feat: searchbar 组件能力补充

* feat: collapse,layout 组件国际化

* upd: countup、barrage、signature、Skeleton组件国际化

* fix: demo及文档修改，组件优化

* feat: textarea 增加autofocus、disabled等属性，增加点击区域事件

* fix: 解决 flexwrap 问题

* fix: 文档修改

* fix: 优化

* fix: collaspe 数据更新支持外部调用

* fix: demo

* feat: 修复折叠面板手风琴模式

* fix: 修复notify标签式展示报错问题及class类名问题

* fix: 解决签名组件生产环境下 getContext 报错问题

* fix: 适配textarea小程序自适应高度功能

* fix: 折叠面板优化

* feat: 组件支持暗黑模式

* feat(signature): signature 组件增加签名开始,结束,进行中回调函数

* docs: 文档修改

* fix: textarea 适配支付宝小程序

* feat: searchbar 新增自定义清除图标功能

* feat: 新增聚焦自定义样式

* fix: ts 问题修正，demo 同步。单元测试排错

Co-authored-by: richard1015 <51844712@qq.com>

src/packages/__VUE/layout/doc.md

@@ -88,7 +88,7 @@ app.use(Col);
 </style>
 ```
 :::
-### 设置元素间距
+### 分栏间隔
 :::demo
 ```html
 <template>

src/packages/__VUE/notify/demo.vue

@@ -11,8 +11,6 @@
     </nut-cell-group>
     <nut-cell-group :title="translate('t2')">
       <nut-cell is-Link @click="cusBgNotify(translate('cusBgNotify'))"> {{ translate('cusBgNotify') }} </nut-cell>
-    </nut-cell-group>
-    <nut-cell-group :title="translate('t3')">
       <nut-cell is-Link @click="timeNotify(translate('t3'))"> {{ translate('t3') }} </nut-cell>
       <nut-cell is-Link @click="positionNotify(translate('cusPostion'))"> {{ translate('cusPostion') }} </nut-cell>
     </nut-cell-group>
@@ -36,7 +34,7 @@ const initTranslate = () =>
     'zh-CN': {
       basic: '基本用法',
       t1: '通知类型',
-      t2: '自定义样式',
+      t2: '自定义',
       t3: '自定义时长',
       cusPostion: '自定义位置',
       useTemplate: '组件调用',
@@ -49,7 +47,7 @@ const initTranslate = () =>
     'en-US': {
       basic: 'Basic Usage',
       t1: 'Notify Type',
-      t2: 'Custom Style',
+      t2: 'Custom',
       t3: 'Custom Duration',
       cusPostion: 'Custom Postion',
       useTemplate: 'Template use',

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

@@ -95,6 +95,9 @@ export default {
     <nut-cell-group title="Custom Duration">
       <nut-cell is-Link @click="timeNotify('Custom Duration')">Custom Duration</nut-cell>
   </nut-cell-group>
+  <nut-cell-group title="Custom Postion">
+    <nut-cell is-Link @click="positionNotify('Custom Postion')">Custom Postion</nut-cell>
+  </nut-cell-group>
 </template>
 <script lang="ts">
 import { ref } from 'vue';
@@ -107,15 +110,55 @@ export default {
     const timeNotify = (msg: string) => {
       Notify.text(msg, { duration: 10000 });
     };
+    const positionNotify = (msg: string) => {
+      Notify.text(msg, { position: 'bottom' });
+    };
     return {
       cusBgNotify,
-      timeNotify
+      timeNotify,
+      positionNotify
+    };
+  }
+}
+</script>
+```
+:::
+
+
+
+## Template use
+:::demo
+```html
+<template>
+  <nut-cell-group title="Template use">
+    <nut-cell is-Link @click="showNotify">Template use</nut-cell>
+    <nut-notify v-model:visible="show">
+      <span>Content</span>
+    </nut-notify>
+  </nut-cell-group>
+</template>
+<script lang="ts">
+import { ref } from 'vue';
+import { Notify } from '@nutui/nutui';
+export default {
+  setup() {
+    const show = ref(false);
+    const showNotify = () => {
+      show.value = true;
+      setTimeout(() => {
+        show.value = false;
+      }, 2000);
+    };
+    return {
+      show,
+      showNotify
     };
   }
 }
 </script>
 ```
 :::
+   
     
 ## API
     

src/packages/__VUE/notify/doc.md

@@ -84,11 +84,14 @@ export default {
 :::demo
 ```html
 <template>
-  <nut-cell-group title="自定义样式">
+  <nut-cell-group title="自定义背景色和字体颜色">
     <nut-cell is-Link @click="cusBgNotify('自定义背景色和字体颜色')">自定义背景色和字体颜色</nut-cell>
   </nut-cell-group>
-    <nut-cell-group title="自定义时长">
-      <nut-cell is-Link @click="timeNotify('自定义时长')">自定义时长</nut-cell>
+  <nut-cell-group title="自定义时长">
+    <nut-cell is-Link @click="timeNotify('自定义时长')">自定义时长</nut-cell>
+  </nut-cell-group>
+  <nut-cell-group title="自定义位置">
+    <nut-cell is-Link @click="positionNotify('自定义位置')">自定义位置</nut-cell>
   </nut-cell-group>
 </template>
 <script lang="ts">
@@ -102,9 +105,46 @@ export default {
     const timeNotify = (msg: string) => {
       Notify.text(msg, { duration: 10000 });
     };
+    const positionNotify = (msg: string) => {
+      Notify.text(msg, { position: 'bottom' });
+    };
     return {
       cusBgNotify,
-      timeNotify
+      timeNotify,
+      positionNotify
+    };
+  }
+}
+</script>
+```
+:::
+
+## 组件调用
+:::demo
+```html
+<template>
+  <nut-cell-group title="组件调用">
+    <nut-cell is-Link @click="showNotify">组件调用</nut-cell>
+    <nut-notify v-model:visible="show">
+      <span>Content</span>
+    </nut-notify>
+  </nut-cell-group>
+</template>
+<script lang="ts">
+import { ref } from 'vue';
+import { Notify } from '@nutui/nutui';
+export default {
+  setup() {
+    const show = ref(false);
+    const showNotify = () => {
+      show.value = true;
+      setTimeout(() => {
+        show.value = false;
+      }, 2000);
+    };
+    return {
+      show,
+      showNotify
     };
   }
 }

src/packages/__VUE/notify/index.ts

@@ -1,4 +1,5 @@
-import { createVNode, render, h, onMounted } from 'vue';
+import { createVNode, render, h, onMounted, VNode, ComponentInternalInstance, Component } from 'vue';
+import { App } from 'vue';
 import Notify from './index.vue';
 const defaultOptions = {
   type: 'base',
@@ -8,16 +9,19 @@ const defaultOptions = {
   color: undefined,
   background: undefined,
   duration: 3000,
-  className: ''
+  className: '',
   // onClosed: null,
   // onClick: null,
   // onOpened: null,
   // textTimer: null,
-  // unmount: null
+  teleport: '',
+  unmount: new Function()
 };
+type Id = { id: string };
+type TDOptions = Partial<typeof defaultOptions & Id>;
 
 let idsMap: string[] = [];
-let optsMap: any[] = [];
+let optsMap: TDOptions[] = [];
 const clearNotify = (id?: string) => {
   if (id) {
     const container = document.getElementById(id);
@@ -38,8 +42,8 @@ const clearNotify = (id?: string) => {
   }
 };
 
-const updateNotify = (opts: any) => {
-  const container = document.getElementById(opts.id);
+const updateNotify = (opts: TDOptions) => {
+  const container = document.getElementById(opts.id as string);
   if (container) {
     const currentOpt = optsMap.find((item) => item.id === opts.id);
     if (currentOpt) {
@@ -47,13 +51,13 @@ const updateNotify = (opts: any) => {
     } else {
       opts = { ...defaultOptions, ...opts };
     }
-    const instance: any = createVNode(Notify, opts);
+    const instance: VNode = createVNode(Notify, opts);
     render(instance, container);
-    return instance.component.ctx;
+    return (instance.component as ComponentInternalInstance).data;
   }
 };
 
-const mountNotify = (opts: any) => {
+const mountNotify = (opts: TDOptions) => {
   opts.unmount = clearNotify;
   let _id;
   if (opts.id) {
@@ -89,7 +93,7 @@ const mountNotify = (opts: any) => {
       };
     }
   };
-  const instance: any = createVNode(Wrapper);
+  const instance: VNode = createVNode(Wrapper);
   document.body.appendChild(root);
   render(instance, root);
   // const container = document.createElement('view');
@@ -132,7 +136,7 @@ export const NotifyFunction = {
     errorMsg(msg);
     return mountNotify({ ...obj, msg, type: 'warning' });
   },
-  hide() {
+  hide(): void {
     clearNotify();
   },
   install(app: any): void {

src/packages/__VUE/notify/index.vue

@@ -13,10 +13,10 @@
   </nut-popup>
 </template>
 <script lang="ts">
-import { toRefs, reactive, onMounted, watch, ref } from 'vue';
+import { reactive, onMounted, watch, ref } from 'vue';
 import { createComponent } from '../../utils/create';
 import Popup from '../popup/index.vue';
-const { componentName, create } = createComponent('notify');
+const { create } = createComponent('notify');
 
 export default create({
   components: {
@@ -57,7 +57,7 @@ export default create({
     unmount: Function
   },
 
-  setup(props, { slots }) {
+  setup(props) {
     let timer: null | number = null;
     const state = reactive({
       mounted: false

src/packages/__VUE/searchbar/__tests__/searchbar.spec.ts

@@ -141,17 +141,6 @@ test('clear event test', async () => {
   expect(clear.exists()).toBe(true);
 });
 
-test('custom clear icon', async () => {
-  const wrapper = mount(SearchBar, {
-    props: {
-      clearIcon: 'close',
-      modelValue: 'test'
-    }
-  });
-  const input = wrapper.find('.nut-searchbar__input-clear i');
-  expect(input.classes()).toContain('nut-icon-close');
-});
-
 test('slot test', () => {
   const wrapper = mount(SearchBar, {
     props: { modelValue: '' },
@@ -177,3 +166,14 @@ test('slot test', () => {
 
   expect(wrapper.html()).toMatchSnapshot();
 });
+
+test('custom clear icon', async () => {
+  const wrapper = mount(SearchBar, {
+    props: {
+      clearIcon: 'close',
+      modelValue: 'test'
+    }
+  });
+  const input = wrapper.find('.nut-searchbar__input-clear i');
+  expect(input.classes()).toContain('nut-icon-close');
+});

src/packages/__VUE/searchbar/index.vue

@@ -27,14 +27,14 @@
             @input="valueChange"
             @focus="valueFocus"
             @blur="valueBlur"
-            :style="(styleSearchbar as CSSProperties)"
+            :style="styleSearchbar"
           />
         </form>
         <view
           @click="handleClear"
           class="nut-searchbar__input-clear"
           v-if="clearable"
-          v-show="(modelValue as string).length > 0"
+          v-show="String(modelValue).length > 0"
         >
           <nut-icon :name="clearIcon" size="12" color="#555"></nut-icon>
         </view>
@@ -56,6 +56,7 @@
 <script lang="ts">
 import { toRefs, reactive, computed, onMounted, ref, Ref, CSSProperties } from 'vue';
 import { createComponent } from '@/packages/utils/create';
+import { TextAlignProperty } from 'csstype';
 const { create, translate } = createComponent('searchbar');
 // interface Events {
 //   eventName: 'change' | 'focus' | 'blur' | 'clear' | 'update:modelValue';
@@ -207,9 +208,10 @@ export default create({
     };
 
     const styleSearchbar = computed(() => {
-      return {
-        textAlign: props.inputAlign
+      const style: CSSProperties = {
+        textAlign: props.inputAlign as TextAlignProperty
       };
+      return style;
     });
     const inputsearch: Ref<HTMLElement | null> = ref(null);
     onMounted(() => {

tsconfig.json

@@ -21,5 +21,5 @@
     }
   },
   "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
-  "exclude": ["./node_modules","src/sites/mobile-taro","src/packages/vscode-extension"]
+  "exclude": ["./node_modules", "src/sites/mobile-taro", "src/packages/vscode-extension"]
 }