Merge pull request #835 from GuYith/master

feat: add loading site example and improve site tabs change event
Tencent · Sep 5, 2023 · 8304273 · 8304273
2 parents 54cb494 + 1357240
commit 8304273
Show file tree

Hide file tree

Showing 34 changed files with 691 additions and 246 deletions.
diff --git a/tdesign/desktop/package.json b/tdesign/desktop/package.json
@@ -142,7 +142,7 @@
     "markdown-it-anchor": "^8.1.0",
     "marked": "^7.0.2",
     "mitt": "^3.0.1",
-    "omi": "^6.25.18",
+    "omi": "^6.25.20",
     "omi-router": "^3.0.5",
     "omi-twind": "^0.0.4",
     "prismjs": "^1.24.0",

diff --git a/tdesign/desktop/site/site.config.mjs b/tdesign/desktop/site/site.config.mjs
@@ -477,14 +477,14 @@ export const docs = [
         name: 'list',
         path: '/list',
       },
-      //     {
-      //       title: 'Loading 加载',
-      //       titleEn: 'Loading',
-      //       name: 'loading',
-      //       path: '/loading',
-      //       component: () => import('tdesign-omi/loading/loading.md'),
-      //       componentEn: () => import('tdesign-omi/loading/loading.en-US.md'),
-      //     },
+      {
+        title: 'Loading 加载',
+        titleEn: 'Loading',
+        name: 'loading',
+        path: '/loading',
+        //       component: () => import('tdesign-omi/loading/loading.md'),
+        //       componentEn: () => import('tdesign-omi/loading/loading.en-US.md'),
+      },
       //     {
       //       title: 'Progress 进度条',
       //       titleEn: 'Progress',

diff --git a/tdesign/desktop/site/src/components/web/back-top/index.tsx b/tdesign/desktop/site/src/components/web/back-top/index.tsx
@@ -79,11 +79,11 @@ define(
     }
 
     installed() {
-      this.tdDocTabs.current.onchange = ({ detail: currentTab }) => {
+      const tdDocTabsEl = this.tdDocTabs.current as HTMLElement
+      tdDocTabsEl.onchange = ({ detail: currentTab }: CustomEvent) => {
         this.updateTab(currentTab)
       }
     }
-
 
     render() {
       return (
@@ -113,22 +113,22 @@ define(
             </demo-wrapper>
 
             <h3 id="不同组件主题的回到顶部">
-            不同组件形状的回到顶部 <a class="header-anchor" href="#不同组件形状的回到顶部"></a>
+              不同组件形状的回到顶部 <a class="header-anchor" href="#不同组件形状的回到顶部"></a>
             </h3>
             <p>不同组件形状的回到顶部</p>
             <demo-wrapper>
               <back-top-shape></back-top-shape>
             </demo-wrapper>
 
             <h3 id="不同组件主题的回到顶部">
-            不同组件主题的回到顶部 <a class="header-anchor" href="#不同组件主题的回到顶部"></a>
+              不同组件主题的回到顶部 <a class="header-anchor" href="#不同组件主题的回到顶部"></a>
             </h3>
             <demo-wrapper>
               <back-top-theme></back-top-theme>
             </demo-wrapper>
 
             <h3 id="可自定义内容的回到顶部">
-            可自定义内容的回到顶部 <a class="header-anchor" href="#可自定义内容的回到顶部"></a>
+              可自定义内容的回到顶部 <a class="header-anchor" href="#可自定义内容的回到顶部"></a>
             </h3>
             <demo-wrapper>
               <back-top-custom></back-top-custom>

diff --git a/tdesign/desktop/site/src/components/web/comment/index.tsx b/tdesign/desktop/site/src/components/web/comment/index.tsx
@@ -60,7 +60,8 @@ define(
     }
 
     installed() {
-      this.tdDocTabs.current.onchange = ({ detail: currentTab }) => {
+      const tdDocTabsEl = this.tdDocTabs.current as HTMLElement
+      tdDocTabsEl.onchange = ({ detail: currentTab }: CustomEvent) => {
         this.updateTab(currentTab)
       }
     }

diff --git a/tdesign/desktop/site/src/components/web/divider/index.tsx b/tdesign/desktop/site/src/components/web/divider/index.tsx
@@ -51,7 +51,8 @@ define(
     }
 
     installed() {
-      this.tdDocTabs.current.onchange = ({ detail: currentTab }) => {
+      const tdDocTabsEl = this.tdDocTabs.current as HTMLElement
+      tdDocTabsEl.onchange = ({ detail: currentTab }: CustomEvent) => {
         this.updateTab(currentTab)
       }
     }

diff --git a/tdesign/desktop/site/src/components/web/dropdown/index.tsx b/tdesign/desktop/site/src/components/web/dropdown/index.tsx
@@ -79,7 +79,8 @@ define(
     }
 
     installed() {
-      this.tdDocTabs.current.onchange = ({ detail: currentTab }) => {
+      const tdDocTabsEl = this.tdDocTabs.current as HTMLElement
+      tdDocTabsEl.onchange = ({ detail: currentTab }: CustomEvent) => {
         this.updateTab(currentTab)
       }
     }

diff --git a/tdesign/desktop/site/src/components/web/grid/index.tsx b/tdesign/desktop/site/src/components/web/grid/index.tsx
@@ -74,7 +74,8 @@ define(
     }
 
     installed() {
-      this.tdDocTabs.current.onchange = ({ detail: currentTab }) => {
+      const tdDocTabsEl = this.tdDocTabs.current as HTMLElement
+      tdDocTabsEl.onchange = ({ detail: currentTab }: CustomEvent) => {
         this.updateTab(currentTab)
       }
     }

diff --git a/tdesign/desktop/site/src/components/web/icon/index.tsx b/tdesign/desktop/site/src/components/web/icon/index.tsx
@@ -59,7 +59,8 @@ define(
     }
 
     installed() {
-      this.tdDocTabs.current.onchange = ({ detail: currentTab }) => {
+      const tdDocTabsEl = this.tdDocTabs.current as HTMLElement
+      tdDocTabsEl.onchange = ({ detail: currentTab }: CustomEvent) => {
         this.updateTab(currentTab)
       }
     }

diff --git a/tdesign/desktop/site/src/components/web/input-adornment/index.tsx b/tdesign/desktop/site/src/components/web/input-adornment/index.tsx
@@ -49,7 +49,8 @@ define(
     }
 
     installed() {
-      this.tdDocTabs.current.onchange = ({ detail: currentTab }) => {
+      const tdDocTabsEl = this.tdDocTabs.current as HTMLElement
+      tdDocTabsEl.onchange = ({ detail: currentTab }: CustomEvent) => {
         this.updateTab(currentTab)
       }
     }

diff --git a/tdesign/desktop/site/src/components/web/link/index.tsx b/tdesign/desktop/site/src/components/web/link/index.tsx
@@ -67,7 +67,8 @@ define(
     }
 
     installed() {
-      this.tdDocTabs.current.onchange = ({ detail: currentTab }) => {
+      const tdDocTabsEl = this.tdDocTabs.current as HTMLElement
+      tdDocTabsEl.onchange = ({ detail: currentTab }: CustomEvent) => {
         this.updateTab(currentTab)
       }
     }
@@ -172,9 +173,7 @@ define(
             <h3 id="不同尺寸的链接">
               不同尺寸的链接 <a class="header-anchor" href="#不同尺寸的链接"></a>
             </h3>
-            <p>
-              提供大、中（默认）、小三种尺寸。
-            </p>
+            <p>提供大、中（默认）、小三种尺寸。</p>
             <demo-wrapper>
               <link-size></link-size>
             </demo-wrapper>

diff --git a/tdesign/desktop/site/src/components/web/list/index.tsx b/tdesign/desktop/site/src/components/web/list/index.tsx
@@ -10,7 +10,6 @@ import '../../../../../src/list/_example/list-async-loading'
 import '../../../../../src/list/_example/list-header-footer'
 import '../../../../../src/list/_example/list-scroll'
 
-
 import '../../../../../src/list/style/index'
 
 import * as marked from 'marked'
@@ -85,7 +84,8 @@ define(
     }
 
     installed() {
-      this.tdDocTabs.current.onchange = ({ detail: currentTab }) => {
+      const tdDocTabsEl = this.tdDocTabs.current as HTMLElement
+      tdDocTabsEl.onchange = ({ detail: currentTab }: CustomEvent) => {
         this.updateTab(currentTab)
       }
     }
@@ -94,65 +94,73 @@ define(
       return (
         <>
           <div style={this.isShow('demo')} name="DEMO">
-            <h3 id='基础文字列表'>
-            基础文字列表 <a class="header-anchor" href="#基础文字列表"></a></h3>
-              <p>仅包含简单文字的列表。对较简单的信息进行陈列时使用。</p>
-              <demo-wrapper>
-                <list-base-text></list-base-text>
-              </demo-wrapper>
-
-            <h3 id='多行文字列表'>
-            多行文字列表 <a class="header-anchor" href="#多行文字列表"></a></h3>
-              <p>仅包含主要文字及描述性文字的列表。对较复杂的，包含多个字段或内容的信息进行展示时使用。</p>
-              <demo-wrapper>
-                <list-multiple-text></list-multiple-text>
-              </demo-wrapper>
-
-              <h3 id='基础图文列表'>
-              基础图文列表 <a class="header-anchor" href="#基础图文列表"></a></h3>
-              <p>包含简单图文的列表。需使用图片和文字结合展示信息。</p>
-              <demo-wrapper>
-                <list-base-image-text></list-base-image-text>
-              </demo-wrapper>
-
-              <h3 id='带操作列表'>
-              带操作列表 <a class="header-anchor" href="#带操作列表"></a></h3>
-              <p>包含操作的列表。需要对所在列进行操作时使用。</p>
-              <demo-wrapper>
-                <list-with-action></list-with-action>
-              </demo-wrapper>
-
-              <h3 id='不同尺寸的列表'>
-              不同尺寸的列表 <a class="header-anchor" href="#不同尺寸的列表"></a></h3>
-              <p>提供大、中（默认）、小三种尺寸。</p>
-              <demo-wrapper>
-                <list-size></list-size>
-              </demo-wrapper>
-
-              <h3 id='斑马纹区分列表'>
-              斑马纹区分列表 <a class="header-anchor" href="#斑马纹区分列表"></a></h3>
-              <demo-wrapper>
-                <list-zebra></list-zebra>
-              </demo-wrapper>
-
-              <h3 id='异步加载的列表'>
-              异步加载的列表 <a class="header-anchor" href="#异步加载的列表"></a></h3>
-              <demo-wrapper>
-                <list-async-loading></list-async-loading>
-              </demo-wrapper>
-
-              <h3 id='带头部及尾部的列表'>
-              带头部及尾部的列表 <a class="header-anchor" href="#带头部及尾部的列表"></a></h3>
-              <demo-wrapper>
-                <list-header-footer></list-header-footer>
-              </demo-wrapper>
-
-              <h3 id='带滚动事件的列表'>
-              带滚动事件的列表 <a class="header-anchor" href="#带滚动事件的列表"></a></h3>
-              <demo-wrapper>
-                <list-scroll></list-scroll>
-              </demo-wrapper>
-
+            <h3 id="基础文字列表">
+              基础文字列表 <a class="header-anchor" href="#基础文字列表"></a>
+            </h3>
+            <p>仅包含简单文字的列表。对较简单的信息进行陈列时使用。</p>
+            <demo-wrapper>
+              <list-base-text></list-base-text>
+            </demo-wrapper>
+
+            <h3 id="多行文字列表">
+              多行文字列表 <a class="header-anchor" href="#多行文字列表"></a>
+            </h3>
+            <p>仅包含主要文字及描述性文字的列表。对较复杂的，包含多个字段或内容的信息进行展示时使用。</p>
+            <demo-wrapper>
+              <list-multiple-text></list-multiple-text>
+            </demo-wrapper>
+
+            <h3 id="基础图文列表">
+              基础图文列表 <a class="header-anchor" href="#基础图文列表"></a>
+            </h3>
+            <p>包含简单图文的列表。需使用图片和文字结合展示信息。</p>
+            <demo-wrapper>
+              <list-base-image-text></list-base-image-text>
+            </demo-wrapper>
+
+            <h3 id="带操作列表">
+              带操作列表 <a class="header-anchor" href="#带操作列表"></a>
+            </h3>
+            <p>包含操作的列表。需要对所在列进行操作时使用。</p>
+            <demo-wrapper>
+              <list-with-action></list-with-action>
+            </demo-wrapper>
+
+            <h3 id="不同尺寸的列表">
+              不同尺寸的列表 <a class="header-anchor" href="#不同尺寸的列表"></a>
+            </h3>
+            <p>提供大、中（默认）、小三种尺寸。</p>
+            <demo-wrapper>
+              <list-size></list-size>
+            </demo-wrapper>
+
+            <h3 id="斑马纹区分列表">
+              斑马纹区分列表 <a class="header-anchor" href="#斑马纹区分列表"></a>
+            </h3>
+            <demo-wrapper>
+              <list-zebra></list-zebra>
+            </demo-wrapper>
+
+            <h3 id="异步加载的列表">
+              异步加载的列表 <a class="header-anchor" href="#异步加载的列表"></a>
+            </h3>
+            <demo-wrapper>
+              <list-async-loading></list-async-loading>
+            </demo-wrapper>
+
+            <h3 id="带头部及尾部的列表">
+              带头部及尾部的列表 <a class="header-anchor" href="#带头部及尾部的列表"></a>
+            </h3>
+            <demo-wrapper>
+              <list-header-footer></list-header-footer>
+            </demo-wrapper>
+
+            <h3 id="带滚动事件的列表">
+              带滚动事件的列表 <a class="header-anchor" href="#带滚动事件的列表"></a>
+            </h3>
+            <demo-wrapper>
+              <list-scroll></list-scroll>
+            </demo-wrapper>
           </div>
           <div style={this.isShow('api')} name="API">
             <div