Merge pull request #105 from VisActor/102-demo-replace-ts-to-js-with-…

…all-demos docs: update all demo as needed format
VisActor · Jul 5, 2023 · 8dade4a · 8dade4a
2 parents a3cdc92 + 48f8333
commit 8dade4a
Show file tree

Hide file tree

Showing 49 changed files with 918 additions and 427 deletions.
diff --git a/common/config/rush/pnpm-lock.yaml b/common/config/rush/pnpm-lock.yaml
diff --git a/packages/vtable/package.json b/packages/vtable/package.json
@@ -94,7 +94,8 @@
     "vite-plugin-markdown": "^2.1.0",
     "markdown-it": "13.0.1",
     "node-fetch": "2.6.7",
-    "form-data": "~4.0.0"
+    "form-data": "~4.0.0",
+    "axios": "~1.4.0"
   },
   "unpkg": "latest",
   "unpkgFiles": [

diff --git a/packages/vtable/site-demo/basic-functionality/auto-wrap-text.md b/packages/vtable/site-demo/basic-functionality/auto-wrap-text.md
@@ -1,24 +1,23 @@
 ---
 category: examples
-group: basic-functionality auto-wrap-text
-title: 基本表格
-cover:
+group: Basic Features
+title: 自动换行
+cover: https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/preview/auto-wrap-text.gif
+order: 3-1
 ---
 
-# 基本表格
+# 自动换行
 
-开启了自动换行，当列宽有变化时，文本会根据宽度来自动计算展示内容。在使用此功能时，一般需要将autoRowHeight置为true。
+开启了自动换行，当列宽有变化时，文本会根据宽度来自动计算展示内容。在使用此功能时，需要配合开启autoRowHeight，才能将折行文字显示出来。
 
 ## 关键配置
 
 - 'autoWrapText:true' 开启自动换行
 
 ## 代码演示
 
-```ts
-// <script type='text/javascript' src='../sales.js'></script>
-// import { menus } from './menu';
-  fetch('../mock-data/North_American_Superstore_list100.json')
+```javascript livedemo template=vtable
+  fetch('https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/North_American_Superstore_list100.json')
     .then((res) => res.json())
     .then((data) => {
 
@@ -70,7 +69,7 @@ const columns =[
 ];
 
 const option = {
-  parentElement: document.getElementById(Table_CONTAINER_DOM_ID),
+  parentElement: document.getElementById(CONTAINER_ID),
   records:data,
   columns,
   widthMode:'standard',

diff --git a/packages/vtable/site-demo/basic-functionality/frozen-col.md b/packages/vtable/site-demo/basic-functionality/frozen-col.md
@@ -1,13 +1,14 @@
 ---
 category: examples
-group: table-type list-table
-title: 基本表格
-cover:
+group: Basic Features
+title: 冻结列
+cover: https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/preview/frozen-col.gif
+order: 3-3
 ---
 
-# 基本表格
+# 冻结列
 
-选中单元格 配置选中效果
+为了在横向滚动过程中，始终保持这些关键信息列可见，我们需要将这些列进行“冻结”。
 
 ## 关键配置
 
@@ -17,10 +18,9 @@ cover:
 
 ## 代码演示
 
-```ts
-// <script type='text/javascript' src='../sales.js'></script>
-// import { menus } from './menu';
-  fetch('../mock-data/North_American_Superstore_list100.json')
+```javascript livedemo template=vtable
+
+  fetch('https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/North_American_Superstore_list100.json')
     .then((res) => res.json())
     .then((data) => {
 
@@ -83,7 +83,7 @@ const columns =[
 ];
 
 const option = {
-  parentElement: document.getElementById(Table_CONTAINER_DOM_ID),
+  parentElement: document.getElementById(CONTAINER_ID),
   records:data,
   columns,
   widthMode:'standard',

diff --git a/packages/vtable/site-demo/basic-functionality/merge.md b/packages/vtable/site-demo/basic-functionality/merge.md
@@ -1,23 +1,23 @@
 ---
 category: examples
-group: table-type list-table
-title: 基本表格
-cover:
+group: Basic Features
+title: 合并单元格
+cover: https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/preview/merge.png
+order: 3-4
 ---
 
-# 基本表格
+# 合并单元格
 
-基本表格
+通过配置将内容相同的单元格进行自动合并
 
 ## 关键配置
 
-
+ - `merge`  同一列中内容相同的相邻单元格进行合并
 ## 代码演示
 
-```ts
-// <script type='text/javascript' src='../sales.js'></script>
-// import { menus } from './menu';
-  fetch('../mock-data/North_American_Superstore_list100.json')
+```javascript livedemo template=vtable
+
+  fetch('https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/North_American_Superstore_list100.json')
     .then((res) => res.json())
     .then((data) => {
 
@@ -92,7 +92,7 @@ const columns =[
 ];
 
 const option = {
-  parentElement: document.getElementById(Table_CONTAINER_DOM_ID),
+  parentElement: document.getElementById(CONTAINER_ID),
   records:data,
   columns,
   widthMode:'standard',

diff --git a/packages/vtable/site-demo/basic-functionality/sort.md b/packages/vtable/site-demo/basic-functionality/sort.md
@@ -1,8 +1,9 @@
 ---
 category: examples
-group: table-type list-table
-title: 基本表格
-cover:
+group: Basic Features
+title: 排序
+cover: https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/preview/sort.gif
+order: 3-2
 ---
 
 # 排序
@@ -23,10 +24,9 @@ cover:
 
 ## 代码演示
 
-```ts
-// <script type='text/javascript' src='../sales.js'></script>
-// import { menus } from './menu';
-  fetch('../mock-data/North_American_Superstore_list100.json')
+```javascript livedemo template=vtable
+
+  fetch('https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/North_American_Superstore_list100.json')
     .then((res) => res.json())
     .then((data) => {
 
@@ -99,7 +99,7 @@ const columns =[
 ];
 
 const option = {
-  parentElement: document.getElementById(Table_CONTAINER_DOM_ID),
+  parentElement: document.getElementById(CONTAINER_ID),
   records:data,
   columns,
   sortState:{

diff --git a/packages/vtable/site-demo/basic-functionality/width-mode-adaptive.md b/packages/vtable/site-demo/basic-functionality/width-mode-adaptive.md
@@ -1,11 +1,12 @@
 ---
 category: examples
-group: table-type list-table
-title: 表格列宽适应容器宽度
-cover:
+group: Basic Features
+title: 适应容器宽度
+cover: https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/preview/width-mode-adaptive.png
+order: 3-5
 ---
 
-# 列宽模式
+# 列宽模式-适应容器宽度
 
 表格列宽适应容器宽度
 
@@ -15,10 +16,9 @@ cover:
 
 ## 代码演示
 
-```ts
-// <script type='text/javascript' src='../sales.js'></script>
-// import { menus } from './menu';
-  fetch('../mock-data/North_American_Superstore_list100.json')
+```javascript livedemo template=vtable
+
+  fetch('https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/North_American_Superstore_list100.json')
     .then((res) => res.json())
     .then((data) => {
 
@@ -81,7 +81,7 @@ const columns =[
 ];
 
 const option = {
-  parentElement: document.getElementById(Table_CONTAINER_DOM_ID),
+  parentElement: document.getElementById(CONTAINER_ID),
   records:data,
   columns,
   widthMode: 'adaptive'

diff --git a/packages/vtable/site-demo/basic-functionality/width-mode-autoWidth.md b/packages/vtable/site-demo/basic-functionality/width-mode-autoWidth.md
@@ -1,11 +1,12 @@
 ---
 category: examples
-group: table-type list-table
-title: 表格列宽自动计算
-cover:
+group: Basic Features
+title: 列宽适应内容
+cover: https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/preview/width-mode-autoWidth.png
+order: 3-6
 ---
 
-# 列宽模式
+# 列宽模式-适应内容
 
 指定所有列的宽度大小按内容宽度。
 
@@ -15,10 +16,8 @@ cover:
 
 ## 代码演示
 
-```ts
-// <script type='text/javascript' src='../sales.js'></script>
-// import { menus } from './menu';
-  fetch('../mock-data/North_American_Superstore_list100.json')
+```javascript livedemo template=vtable
+  fetch('https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/North_American_Superstore_list100.json')
     .then((res) => res.json())
     .then((data) => {
 
@@ -74,7 +73,7 @@ const columns =[
 ];
 
 const option = {
-  parentElement: document.getElementById(Table_CONTAINER_DOM_ID),
+  parentElement: document.getElementById(CONTAINER_ID),
   records:data,
   columns,
   widthMode: 'autoWidth'

diff --git a/packages/vtable/site-demo/business/color-level.md b/packages/vtable/site-demo/business/color-level.md
@@ -1,8 +1,9 @@
 ---
 category: examples
-group: table-type pivot-table
+group: Business
 title: 销售热图
-cover:
+cover: https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/preview/color-level.png
+order: 9-1
 ---
 
 # 销售热图
@@ -15,7 +16,7 @@ cover:
 
 ## 代码演示
 
-```ts
+```javascript livedemo template=vtable
 function getColor(min, max, n) {
   if (max === min) {
     if (n > 0) {
@@ -30,7 +31,7 @@ function getColor(min, max, n) {
   return `rgb(${red},${green},255)`;
 }
 const option = {
-  parentElement: document.getElementById(Table_CONTAINER_DOM_ID),
+  parentElement: document.getElementById(CONTAINER_ID),
   columnResizeType: 'all',
   records: [
     {