@opentiny/vue-docs 2.0.4 → 2.0.5

package/demos/app/chart/webdoc/chart.js

@@ -28,7 +28,7 @@ export default {
             'en-US':
               'Data consists of indicators and dimensions. Dimension refers to data attributes, and indicator refers to quantitative measurement standards.'
           },
-          'demoId': 'chart/attributes-demo#props-demo10'
+          'demoId': 'chart-attributes-demo#props-demo10'
         },
         {
           'name': 'settings ',
@@ -45,42 +45,42 @@ export default {
           'type': 'String',
           'defaultValue': '该属性的默认值为 auto',
           'desc': { 'zh-CN': '设置图表容器的宽度。', 'en-US': 'Set the width of the chart container.' },
-          'demoId': 'chart/attributes-demo#props-demo10'
+          'demoId': 'chart-attributes-demo#props-demo10'
         },
         {
           'name': 'height',
           'type': 'String',
           'defaultValue': '该属性的默认值为 400px',
           'desc': { 'zh-CN': '设置图表容器的高度。', 'en-US': 'Set the height of the chart container.' },
-          'demoId': 'chart/attributes-demo#props-demo10'
+          'demoId': 'chart-attributes-demo#props-demo10'
         },
         {
           'name': 'events',
           'type': 'Object',
           'defaultValue': '',
           'desc': { 'zh-CN': '事件绑定', 'en-US': 'Event binding' },
-          'demoId': 'chart/events#events-base'
+          'demoId': 'chart-events#events-base'
         },
         {
           'name': 'init-options',
           'type': 'Object',
           'defaultValue': '',
           'desc': { 'zh-CN': 'init 附加参数', 'en-US': 'Init Additional Parameters' },
-          'demoId': 'chart/attributes-demo#props-demo10'
+          'demoId': 'chart-attributes-demo#props-demo10'
         },
         {
           'name': 'tooltip-visible',
           'type': 'Boolean',
           'defaultValue': '该属性的默认值为 true',
           'desc': { 'zh-CN': '是否显示提示框', 'en-US': 'Display dialog box' },
-          'demoId': 'chart/attributes-demo#props-demo10'
+          'demoId': 'chart-attributes-demo#props-demo10'
         },
         {
           'name': 'legend-visible',
           'type': 'Boolean',
           'defaultValue': '该属性的默认值为 true',
           'desc': { 'zh-CN': '是否显示图例', 'en-US': 'Display legend' },
-          'demoId': 'chart/attributes-demo#props-demo10'
+          'demoId': 'chart-attributes-demo#props-demo10'
         },
         {
           'name': 'theme',
@@ -110,21 +110,21 @@ export default {
             'zh-CN': '是否处理生成图表时的宽度问题',
             'en-US': 'Do you want to process the width issue when generating charts?'
           },
-          'demoId': 'chart/events#events-base'
+          'demoId': 'chart-events#events-base'
         },
         {
           'name': 'width-change-delay',
           'type': 'Number',
           'defaultValue': '该属性的默认值为 300',
           'desc': { 'zh-CN': '容器宽度变化的延迟', 'en-US': 'Container width change delay' },
-          'demoId': 'chart/question#question-base'
+          'demoId': 'chart-question#question-base'
         },
         {
           'name': 'resizeable',
           'type': 'Boolean',
           'defaultValue': '该属性的默认值为 true',
           'desc': { 'zh-CN': '是否处理窗口 resize 事件', 'en-US': 'Whether to process the window resize event' },
-          'demoId': 'chart/question#question-base'
+          'demoId': 'chart-question#question-base'
         },
         {
           'name': 'cancel-resize-check',
@@ -134,14 +134,14 @@ export default {
             'zh-CN': '是否禁用 resize 时的容器检测',
             'en-US': 'Whether to disable container detection during resize'
           },
-          'demoId': 'chart/question#question-base'
+          'demoId': 'chart-question#question-base'
         },
         {
           'name': 'resize-delay',
           'type': 'Number',
           'defaultValue': '该属性的默认值为 200',
           'desc': { 'zh-CN': '窗口 resize 事件回调的延迟', 'en-US': 'Delay of the window resize event callback' },
-          'demoId': 'chart/attributes-demo#props-demo10'
+          'demoId': 'chart-attributes-demo#props-demo10'
         },
         {
           'name': 'change-delay',
@@ -151,7 +151,7 @@ export default {
             'zh-CN': '属性修改触发图表重绘回调的延迟',
             'en-US': 'Delay for triggering chart redrawing callback after attribute modification'
           },
-          'demoId': 'chart/question#question-base'
+          'demoId': 'chart-question#question-base'
         },
         {
           'name': 'set-option-opts',

package/index.html

@@ -11,6 +11,7 @@
     <script type="module">
       window.PUBLIC_URL = import.meta.env.BASE_URL
       window.DEPLOY_URL = ''
+      window.process = {env:{}}
     </script>
   </head>
 

package/md.extend.config.js

@@ -18,35 +18,11 @@ import md_anchor from 'markdown-it-anchor'
 
 export const MdExt = [md_emoji, md_sub, md_sup, md_mark]
 
-// 自定义container
-function createContainer(klass) {
-  return [
-    md_container,
-    klass,
-    {
-      render(tokens, idx) {
-        const token = tokens[idx]
-        const info = token.info.trim().slice(klass.length).trim() || ''
-        if (token.nesting === 1) {
-          return `<div class="${klass} custom-block"><p class="custom-block-title">${info}</p>\n`
-        } else {
-          return `</div>\n`
-        }
-      }
-    }
-  ]
-}
-
 export function mdInstall(md) {
-  md.use(md_prism, { plugins: ['line-highlight'] })
-    .use(...createContainer('tip'))
-    .use(...createContainer('info'))
-    .use(...createContainer('warning'))
-    .use(...createContainer('danger'))
-    .use(md_anchor, {
-      permalink: true,
-      permalinkBefore: true,
-      permalinkSymbol: '',
-      slugify: (s) => encodeURIComponent(s)
-    })
+  md.use(md_prism, { plugins: ['line-highlight'] }).use(md_anchor, {
+    permalink: true,
+    permalinkBefore: true,
+    permalinkSymbol: '',
+    slugify: (s) => encodeURIComponent(s)
+  })
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-docs",
-  "version": "2.0.4",
+  "version": "2.0.5",
   "dependencies": {
     "@unocss/reset": "0.38.2",
     "@vue/repl": "^2.5.5",
@@ -16,15 +16,15 @@
     "@playwright/test": "^1.29.2",
     "sortablejs": "1.15.0",
     "@opentiny/vue-repl": "^1.0.2",
-    "@opentiny/vue": "~3.10.0",
     "@opentiny/vue-common": "~3.10.0",
-    "@opentiny/vue-design-aurora": "~3.10.0",
+    "@opentiny/vue": "~3.10.0",
     "@opentiny/vue-icon": "~3.10.0",
-    "@opentiny/vue-vite-import": "~1.1.5",
-    "@opentiny/vue-theme": "~3.10.0",
-    "@opentiny/vue-design-smb": "~3.10.0",
     "@opentiny/vue-theme-saas": "~3.10.0",
-    "@opentiny/vue-theme-mobile": "~3.10.0"
+    "@opentiny/vue-design-aurora": "~3.10.0",
+    "@opentiny/vue-design-smb": "~3.10.0",
+    "@opentiny/vue-theme": "~3.10.0",
+    "@opentiny/vue-theme-mobile": "~3.10.0",
+    "@opentiny/vue-vite-import": "~1.1.5"
   },
   "devDependencies": {
     "@types/markdown-it": "^12.2.3",

package/playground/App.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { reactive, ref } from 'vue'
+import { onMounted, reactive, ref } from 'vue'
 import { Repl, useStore, File } from '@opentiny/vue-repl'
 import '@opentiny/vue-repl/dist/style.css'
 import Monaco from '@vue/repl/monaco-editor'
@@ -22,7 +22,8 @@ const createImportMap = (version) => {
       '@opentiny/vue': `${cdnHost}/@opentiny/vue@${version}/runtime/tiny-vue.mjs`,
       '@opentiny/vue-icon': `${cdnHost}/@opentiny/vue@${version}/runtime/tiny-vue-icon.mjs`,
       '@opentiny/vue-locale': `${cdnHost}/@opentiny/vue@${version}/runtime/tiny-vue-locale.mjs`,
-      '@opentiny/vue-common': `${cdnHost}/@opentiny/vue@${version}/runtime/tiny-vue-common.mjs`
+      '@opentiny/vue-common': `${cdnHost}/@opentiny/vue@${version}/runtime/tiny-vue-common.mjs`,
+      'sortablejs': `${cdnHost}/sortablejs@1.15.0/modular/sortable.esm.js`
     }
   }
 }
@@ -63,19 +64,18 @@ const state = reactive({
 
 function versionChange(version) {
   const importMap = createImportMap(version)
-  store.setImportMap(importMap)
+  store.state.files['import-map.json'] = new File('', JSON.stringify(importMap))
 
-  const iframeWin = document.querySelector('iframe').contentWindow
-  const styleDom = iframeWin.document.getElementById('tiny-theme')
-  if (styleDom) {
-    styleDom.href = `${cdnHost}/@opentiny/vue-theme@${version}/index.css`
-  } else {
+  setTimeout(() => {
+    if (!document.querySelector('iframe')) return
+
+    const iframeWin = document.querySelector('iframe').contentWindow
     const link = iframeWin.document.createElement('link')
     link.id = 'tiny-theme'
     link.rel = 'stylesheet'
     link.href = `${cdnHost}/@opentiny/vue-theme@${version}/index.css`
     iframeWin.document.head.append(link)
-  }
+  }, 300)
 }
 
 function getDemoName(name, apiMode) {
@@ -89,7 +89,7 @@ const getDemoCode = async ({ cmpId, fileName, apiMode }) => {
     .then((code) => {
       return code
     })
-    .catch((error) => {
+    .catch(() => {
       return `${demoName}示例资源不存在，请检查文件名是否正确？`
     })
 
@@ -104,23 +104,25 @@ const loadFileCode = async ({ cmpId, fileName, apiMode }) => {
   versionChange(latestVersion)
 }
 
-// 初始加载,有分享则加载分享，否则加载默认版本的默认文件
-if (shareData.length === 2) {
-  versionChange(shareData[0])
-} else {
-  const searchObj = new URLSearchParams(location.search)
-  const fileName = searchObj.get('fileName')
-  const cmpId = searchObj.get('cmpId')
-  const apiMode = searchObj.get('apiMode')
-  if (fileName && cmpId && apiMode) {
-    loadFileCode({ cmpId, fileName, apiMode })
+onMounted(() => {
+  // 初始加载,有分享则加载分享，否则加载默认版本的默认文件
+  if (shareData.length === 2) {
+    versionChange(shareData[0])
+  } else {
+    const searchObj = new URLSearchParams(location.search)
+    const fileName = searchObj.get('fileName')
+    const cmpId = searchObj.get('cmpId')
+    const apiMode = searchObj.get('apiMode')
+    if (fileName && cmpId && apiMode) {
+      loadFileCode({ cmpId, fileName, apiMode })
+    }
   }
-}
+})
 
 // 分享功能
 function share() {
-  const hash = store.serialize().slice(1)
-  const shareUrl = location.origin + '/tiny-vue/playground.html#' + state.selectVersion + '|' + hash
+  const hash = store.serialize()
+  const shareUrl = location.origin + '/tiny-vue/playground#' + state.selectVersion + '|' + hash
 
   navigator.clipboard.writeText(shareUrl)
   Notify({

package/src/views/components/components.vue

@@ -59,7 +59,7 @@
                     <tbody>
                       <tr v-for="row in oneApiArr" :key="row.name">
                         <td>
-                          <a v-if="row.demoId" :href="`#${row.demoId}`">{{ row.name }}</a>
+                          <a v-if="row.demoId" @click="jumpToDemo(row.demoId)">{{ row.name }}</a>
                           <span v-else>{{ row.name }}</span>
                         </td>
                         <td v-if="!key.includes('slots')"><span class="route-anchor" v-html="row.type"></span></td>
@@ -254,6 +254,13 @@ const handleApiAnchor = (ev) => {
 const fn = {
   copyText: (text) => {
     navigator.clipboard.writeText(text)
+  },
+  jumpToDemo: (demoId) => {
+    if (demoId.startsWith('chart') || demoId.startsWith('grid')) {
+      router.push(demoId)
+    } else {
+      router.push(`#${demoId}`)
+    }
   }
 }
 

package/vite.config.js

@@ -51,9 +51,6 @@ export default defineConfig((config) => {
       }),
       Unocss(UnoCssConfig)
     ],
-    define: {
-      'process.env': {}
-    },
     optimizeDeps: getOptimizeDeps(3),
     build: {
       rollupOptions: {