feat: update pc/mobile/mobile-first docs (#583)

.vscode/settings.json

@@ -82,5 +82,6 @@
       "italic": false
     }
   ],
-  "vue.codeActions.enabled": false
+  "vue.codeActions.enabled": false,
+  "git.ignoreLimitWarning": true
 }

examples/docs/newsrc/mobile-first.vue

@@ -141,7 +141,7 @@ export default {
         }
       },
       openInVscode: (demo) => {
-        fetch(`/__open-in-editor?file=../docs/resources/mobile-first/app/${modeState.pathName}/${demo.codeFiles[0]}`)
+        fetch(`/__open-in-editor?file=../sites/demos/mobile-first/app/${modeState.pathName}/${demo.codeFiles[0]}`)
       }
     }
 
@@ -152,7 +152,7 @@ export default {
     // 以下私有方法，无须传递给vue模板的。
     async function _switchPath() {
       // 查找API
-      const apiModule = apis[`../resources/mobile-first/app/${modeState.pathName}/webdoc/${modeState.pathName}.js`]
+      const apiModule = apis[`../../sites/demos/mobile-first/app/${modeState.pathName}/webdoc/${modeState.pathName}.js`]
       if (apiModule) {
         const module = await apiModule()
         const apiRoot = module.default
@@ -167,7 +167,7 @@ export default {
     }
     async function _switchDemo() {
       modeState.demoId = state.currDemo.demoId
-      const path = `../resources/mobile-first/app/${modeState.pathName}/${state.currDemo?.codeFiles[0]}`
+      const path = `../../sites/demos/mobile-first/app/${modeState.pathName}/${state.currDemo?.codeFiles[0]}`
 
       // 查找源码  查找组件
       state.currDemoSrc = await demoStr[path]()

examples/docs/newsrc/mobile.vue

@@ -144,7 +144,7 @@ export default {
         }
       },
       openInVscode: (demo) => {
-        fetch(`/__open-in-editor?file=../docs/resources/mobile/app/${modeState.pathName}/${demo.codeFiles[0]}`)
+        fetch(`/__open-in-editor?file=../sites/demos/mobile/app/${modeState.pathName}/${demo.codeFiles[0]}`)
       }
     }
 
@@ -155,7 +155,7 @@ export default {
     // 以下私有方法，无须传递给vue模板的。
     async function _switchPath() {
       // 查找API
-      const apiModule = apis[`../resources/mobile/app/${modeState.pathName}/webdoc/${modeState.pathName}.js`]
+      const apiModule = apis[`../../sites/demos/mobile/app/${modeState.pathName}/webdoc/${modeState.pathName}.js`]
       if (apiModule) {
         const module = await apiModule()
         const apiRoot = module.default
@@ -170,7 +170,7 @@ export default {
     }
     async function _switchDemo() {
       modeState.demoId = state.currDemo.demoId
-      const path = `../resources/mobile/app/${modeState.pathName}/${state.currDemo?.codeFiles[0]}`
+      const path = `../../sites/demos/mobile/app/${modeState.pathName}/${state.currDemo?.codeFiles[0]}`
 
       // 查找源码  查找组件
       state.currDemoSrc = await demoStr[path]()

examples/docs/newsrc/pc.vue

@@ -211,7 +211,7 @@ export default {
         }
       },
       openInVscode: (demo) => {
-        fetch(`/__open-in-editor?file=../sites/demos/app/${getPath(modeState.pathName)}/${demo.codeFiles[0]}`)
+        fetch(`/__open-in-editor?file=../sites/demos/pc/app/${getPath(modeState.pathName)}/${demo.codeFiles[0]}`)
       }
     }
 
@@ -223,7 +223,7 @@ export default {
     async function _switchPath() {
       state.demoLoading = true
       // 查找API
-      const apiModule = apis[`../../sites/demos/app/${getPath(modeState.pathName)}/webdoc/${modeState.pathName}.js`]
+      const apiModule = apis[`../../sites/demos/pc/app/${getPath(modeState.pathName)}/webdoc/${modeState.pathName}.js`]
 
       if (apiModule) {
         const module = await apiModule()
@@ -240,7 +240,7 @@ export default {
     }
     async function _switchDemo() {
       modeState.demoId = state.currDemo.demoId
-      const path = `../../sites/demos/app/${getPath(modeState.pathName)}/${state.currDemo?.codeFiles[0]}`
+      const path = `../../sites/demos/pc/app/${getPath(modeState.pathName)}/${state.currDemo?.codeFiles[0]}`
 
       // 查找源码  查找组件
       state.currDemoSrc = await demoStr[path]()

examples/docs/newsrc/resourceMobile.js

@@ -3,16 +3,16 @@
 
 // demo源码
 // 同web-doc的菜单资源
-import { cmpMenus } from '../resources/mobile/menus.js'
+import { cmpMenus } from '../../sites/demos/mobile/menus.js'
 
-export const demoStr = import.meta.glob('../resources/mobile/app/**/*.vue', { eager: false, as: 'raw' })
+export const demoStr = import.meta.glob('../../sites/demos/mobile/app/**/*.vue', { eager: false, as: 'raw' })
-export const demoVue = import.meta.glob('../resources/mobile/app/**/*.vue', { eager: false })
+export const demoVue = import.meta.glob('../../sites/demos/mobile/app/**/*.vue', { eager: false })
 
 // api属性
-export const apis = import.meta.glob('../resources/mobile/app/*/webdoc/*.js', { eager: false })
+export const apis = import.meta.glob('../../sites/demos/mobile/app/*/webdoc/*.js', { eager: false })
 
 // 组件的md
-const allMD = import.meta.glob('../resources/mobile/app/*/webdoc/*.cn.md', { eager: true })
+const allMD = import.meta.glob('../../sites/demos/mobile/app/*/webdoc/*.cn.md', { eager: true })
 export const mds = {}
 for (const path in allMD) {
   let key = path.split('/').slice(-1)[0]

examples/docs/newsrc/resourceMobileFirst.js

@@ -1,13 +1,13 @@
-import { cmpMenus } from '../resources/mobile-first/menus.js'
+import { cmpMenus } from '../../sites/demos/mobile-first/menus.js'
 
-export const demoStr = import.meta.glob('../resources/mobile-first/app/**/*.vue', { eager: false, as: 'raw' })
+export const demoStr = import.meta.glob('../../sites/demos/mobile-first/app/**/*.vue', { eager: false, as: 'raw' })
-export const demoVue = import.meta.glob('../resources/mobile-first/app/**/*.vue', { eager: false })
+export const demoVue = import.meta.glob('../../sites/demos/mobile-first/app/**/*.vue', { eager: false })
 
 // api属性
-export const apis = import.meta.glob('../resources/mobile-first/app/*/webdoc/*.js', { eager: false })
+export const apis = import.meta.glob('../../sites/demos/mobile-first/app/*/webdoc/*.js', { eager: false })
 
 // 组件的md
-const allMD = import.meta.glob('../resources/mobile-first/app/*/webdoc/*.cn.md', { eager: true })
+const allMD = import.meta.glob('../../sites/demos/mobile-first/app/*/webdoc/*.cn.md', { eager: true })
 export const mds = {}
 for (const path in allMD) {
   let key = path.split('/').slice(-1)[0]

examples/docs/newsrc/resourcePc.js

@@ -3,16 +3,16 @@
 
 // demo源码
 // 同web-doc的菜单资源
-import { cmpMenus } from '../../sites/demos/menus.js'
+import { cmpMenus } from '../../sites/demos/pc/menus.js'
 
-export const demoStr = import.meta.glob('../../sites/demos/app/**/*.vue', { eager: false, as: 'raw' })
+export const demoStr = import.meta.glob('../../sites/demos/pc/app/**/*.vue', { eager: false, as: 'raw' })
-export const demoVue = import.meta.glob('../../sites/demos/app/**/*.vue', { eager: false })
+export const demoVue = import.meta.glob('../../sites/demos/pc/app/**/*.vue', { eager: false })
 
 // api属性
-export const apis = import.meta.glob('../../sites/demos/app/*/webdoc/*.js', { eager: false })
+export const apis = import.meta.glob('../../sites/demos/pc/app/*/webdoc/*.js', { eager: false })
 
 // 组件的md
-const allMD = import.meta.glob('../../sites/demos/app/*/webdoc/*.cn.md', { eager: true })
+const allMD = import.meta.glob('../../sites/demos/pc/app/*/webdoc/*.cn.md', { eager: true })
 export const mds = {}
 for (const path in allMD) {
   let key = path.split('/').slice(-1)[0]

examples/sites/demos/mobile-first/app/action-sheet/basic-usage.vue

@@ -1,11 +1,11 @@
 <template>
   <div>
     <tiny-button @click="fn" type="primary"> 动作面板 </tiny-button>
-    <tiny-action-sheet
+    <tiny-action-sheet title="标题" :visible="boxVisibility" @update:visible="boxVisibility = $event">
-      title="标题"
+      <div style="text-align: center">
-      :visible="boxVisibility"
+        <p v-for="i in 20" style="height: 50px" :key="i">内容选项 {{ i }}</p>
-      @update:visible="boxVisibility = $event"
+      </div>
-    ></tiny-action-sheet>
+    </tiny-action-sheet>
   </div>
 </template>
 

examples/sites/demos/mobile-first/app/action-sheet/ellipsis.vue

@@ -16,9 +16,7 @@
       v-model="activeName1"
       title="标题1"
       :ellipsis="ellipsis"
-      :search-config="searchConfig"
       :show-footer="true"
-      :menus="menus"
       :visible="boxVisibility1"
       @update:visible="boxVisibility1 = $event"
     ></tiny-action-sheet>
@@ -27,9 +25,7 @@
       title="标题2"
       multiple
       :ellipsis="ellipsis"
-      :search-config="searchConfig"
       :show-footer="true"
-      :menus="menus"
       :visible="boxVisibility2"
       @update:visible="boxVisibility2 = $event"
     ></tiny-action-sheet>
@@ -45,36 +41,12 @@ export default {
     TinyButton: Button
   },
   data() {
-    const list = [
-      {
-        id: 1,
-        label: '进行中'
-      },
-      {
-        id: 2,
-        label: '未开始'
-      },
-      {
-        id: 3,
-        label: '已完成'
-      },
-      {
-        id: 4,
-        label:
-          '已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期'
-      }
-    ]
-
     return {
       activeName1: 1,
       activeName2: [],
       ellipsis: false,
       boxVisibility1: false,
-      boxVisibility2: false,
+      boxVisibility2: false
-      searchConfig: {
-        options: list
-      },
-      menus: list
     }
   },
   methods: {}

examples/sites/demos/mobile-first/app/action-sheet/webdoc/action-sheet.js

@@ -76,6 +76,18 @@ export default {
         'en-US': '<p>bbutton click</p>'
       },
       codeFiles: ['slot.vue']
+    },
+    {
+      demoId: 'ellipsis',
+      name: {
+        'zh-CN': '超出省略',
+        'en-US': 'events'
+      },
+      desc: {
+        'zh-CN': '<p>添加属性 `ellipsis` 选项内容会超出隐藏。<p>',
+        'en-US': '<p>bbutton click</p>'
+      },
+      codeFiles: ['ellipsis.vue']
     }
   ],
   apis: []