@opentiny/vue-docs 2.2.22 → 3.16.0

package/index.html

@@ -4,7 +4,10 @@
     <meta charset="UTF-8" />
     <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>OpenTiny - TinyVue</title>
+    <title>TinyVue：一套跨端、跨框架的企业级 UI 组件库，支持 Vue 2 和 Vue 3，支持 PC 端和移动端</title>
+    <meta name="description" content="TinyVue 是一套跨端、跨框架的企业级 UI 组件库，支持 Vue 2 和 Vue 3，支持 PC 端和移动端。">
+    <meta name="keywords" content="vue,frontend,vue-components,component-library,renderless,renderless-components,mobile-components,tiny-vue,vue3,headless-components,opentiny,前端,UI组件库,Vue组件库,移动端组件,无渲染组件">
+    <link rel="shortcut icon" href="/favicon.ico">
     <!--图片引用方案：将PUBLIC_URL和DEPLOY_URL变量在header中提前定义，保证web-components可以获取到这两个变量，从而正确加载对应的主题样式文件-->
     <script type="module">
       window.PUBLIC_URL = import.meta.env.BASE_URL
@@ -18,7 +21,7 @@
     <app-root></app-root>
     <div id="app" class="wp100 hp100 pt60 of-hidden"></div>
     <!-- prettier-ignore -->
-    <script id="tinyui-design-common" src="https://test-static-resource.obs.cn-north-7.ulanqab.huawei.com/tinyui-design-common/1.0.5.20240330164329/tinyui-design-common.min.js"></script>
+    <script id="tinyui-design-common" src="https://res.hc-cdn.com/tinyui-design-common/1.0.5.20230707170109/tinyui-design-common.min.js"></script>
     <script type="module" src="./src/main.js"></script>
   </body>
 </html>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-docs",
-  "version": "2.2.22",
+  "version": "3.16.0",
   "license": "MIT",
   "dependencies": {
     "@unocss/reset": "0.38.2",
@@ -16,17 +16,17 @@
     "marked": "^4.3.0",
     "sortablejs": "1.15.0",
     "@opentiny/vue-repl": "^1.1.0",
-    "@opentiny/vue": "~3.15.0",
-    "@opentiny/vue-design-aurora": "~3.15.0",
-    "@opentiny/vue-icon": "~3.15.0",
-    "@opentiny/vue-icon-saas": "~3.15.0",
-    "@opentiny/vue-common": "~3.15.0",
-    "@opentiny/vue-design-saas": "~3.15.0",
-    "@opentiny/vue-theme": "~3.15.1",
-    "@opentiny/vue-theme-saas": "~3.15.0",
-    "@opentiny/vue-design-smb": "~3.15.0",
-    "@opentiny/vue-theme-mobile": "~3.15.0",
-    "@opentiny/vue-vite-import": "~1.1.5"
+    "@opentiny/vue-common": "~3.16.0",
+    "@opentiny/vue-icon-saas": "~3.16.0",
+    "@opentiny/vue-icon": "~3.16.0",
+    "@opentiny/vue": "~3.16.0",
+    "@opentiny/vue-design-smb": "~3.16.0",
+    "@opentiny/vue-design-saas": "~3.16.0",
+    "@opentiny/vue-theme": "~3.16.1",
+    "@opentiny/vue-design-aurora": "~3.16.0",
+    "@opentiny/vue-theme-mobile": "~3.16.0",
+    "@opentiny/vue-vite-import": "~1.1.5",
+    "@opentiny/vue-theme-saas": "~3.16.0"
   },
   "devDependencies": {
     "@types/markdown-it": "^12.2.3",
@@ -39,7 +39,7 @@
     "cross-spawn": "^7.0.3",
     "fs-extra": "^10.1.0",
     "less": "^4.1.3",
-    "@playwright/test": "^1.40.1",
+    "@playwright/test": "~1.42.0",
     "markdown-it": "^13.0.1",
     "markdown-it-anchor": "^8.6.4",
     "markdown-it-emoji": "^2.0.2",

package/playground/App.vue

@@ -17,7 +17,7 @@ import logoUrl from './assets/opentiny-logo.svg?url'
 import GitHub from './icons/Github.vue'
 import Share from './icons/Share.vue'
 
-const VERSION = 'tiny-vue-version-3.15'
+const VERSION = 'tiny-vue-version-3.14'
 const LAYOUT = 'playground-layout'
 const LAYOUT_REVERSE = 'playground-layout-reverse'
 
@@ -28,7 +28,7 @@ const isMobileFirst = tinyMode === 'mobile-first'
 const isSaas = tinyTheme === 'saas'
 const isPreview = searchObj.get('openMode') === 'preview' // 是否多端弹窗预览
 
-const versions = ['3.15', '3.14', '3.13', '3.12', '3.11', '3.10', '3.9', '3.8']
+const versions = ['3.14', '3.13', '3.12', '3.11', '3.10', '3.9', '3.8']
 const latestVersion = isPreview ? versions[0] : localStorage.getItem(VERSION) || versions[0]
 const cdnHost = localStorage.getItem('setting-cdn')
 const getRuntime = (version) => {

package/src/views/components/components.vue

@@ -8,11 +8,8 @@
       <div class="ti-fi-1 ti-w0 ti-rel cmp-container">
         <!-- 一个组件的文档:  描述md + demos + apis -->
         <div class="markdown-body markdown-top-body" size="medium" v-html="cmpTopMd"></div>
-        <version-tip
-          v-if="currJson.metaData || currJson.versionTipOption"
-          :meta-data="currJson.metaData"
-          v-bind="currJson.versionTipOption"
-        >
+        <version-tip v-if="currJson.metaData || currJson.versionTipOption" :meta-data="currJson.metaData"
+          v-bind="currJson.versionTipOption">
         </version-tip>
         <template v-if="currJson?.demos?.length > 0">
           <div class="all-demos-container">
@@ -72,34 +69,24 @@
                         <td>
                           <a v-if="row.demoId" @click="jumpToDemo(row.demoId)">{{ row.name }}</a>
                           <span v-else>{{ row.name }}</span>
-                          <version-tip
-                            v-if="row.metaData || row.versionTipOption"
-                            :meta-data="row.metaData"
-                            v-bind="row.versionTipOption"
-                            render-type="tag"
-                            tip-subject="api"
-                          >
+                          <version-tip v-if="row.metaData || row.versionTipOption" :meta-data="row.metaData"
+                            v-bind="row.versionTipOption" render-type="tag" tip-subject="api">
                           </version-tip>
                         </td>
                         <td v-if="!key.includes('slots') && hasKey(oneApiArr, 'type')" @click="handleTypeClick">
-                          <a
-                            v-if="row.typeAnchorName"
+                          <a v-if="row.typeAnchorName"
                             :href="`${row.typeAnchorName.indexOf('#') === -1 ? '#' : ''}${row.typeAnchorName}`"
-                            v-html="row.type"
-                          ></a>
+                            v-html="row.type"></a>
                           <span v-else v-html="row.type"></span>
                         </td>
-                        <td
-                          v-if="
-                            !key.includes('slots') &&
-                            !key.includes('events') &&
-                            !key.includes('methods') &&
-                            hasKey(oneApiArr, 'defaultValue')
-                          "
-                        >
+                        <td v-if="
+                          !key.includes('slots') &&
+                          !key.includes('events') &&
+                          !key.includes('methods') &&
+                          hasKey(oneApiArr, 'defaultValue')
+                        ">
                           <span
-                            v-html="typeof row.defaultValue === 'string' ? row.defaultValue || '--' : row.defaultValue"
-                          ></span>
+                            v-html="typeof row.defaultValue === 'string' ? row.defaultValue || '--' : row.defaultValue"></span>
                         </td>
                         <td><span v-html="row.desc[langKey]"></span></td>
                       </tr>
@@ -115,8 +102,7 @@
           <tiny-collapse v-model="activeNames">
             <div v-for="typeItem in currJson.types" :id="typeItem.name" :key="typeItem.name">
               <tiny-collapse-item :title="typeItem.name" :name="typeItem.name">
-                <async-highlight :code="typeItem.code.trim()" types="ts"></async-highlight
-              ></tiny-collapse-item>
+                <async-highlight :code="typeItem.code.trim()" types="ts"></async-highlight></tiny-collapse-item>
             </div>
           </tiny-collapse>
         </template>
@@ -129,13 +115,8 @@
 
       <!-- 目录列表 -->
       <div class="cmp-page-anchor catalog ti-w128 ti-sticky ti-top32" v-if="anchorLinks.length > 0">
-        <tiny-anchor
-          :is-affix="true"
-          :links="anchorLinks"
-          :key="anchorRefreshKey"
-          mask-class="custom-active-anchor"
-          @link-click="handleAnchorClick"
-        >
+        <tiny-anchor :is-affix="true" :links="anchorLinks" :key="anchorRefreshKey" mask-class="custom-active-anchor"
+          @link-click="handleAnchorClick">
         </tiny-anchor>
       </div>
     </div>
@@ -275,7 +256,7 @@ export default defineComponent({
       const promiseArr = [
         fetchDemosFile(`${staticPath.value}/${getWebdocPath(state.cmpId)}/webdoc/${state.cmpId}.${lang}.md`),
         fetchDemosFile(`${staticPath.value}/${getWebdocPath(state.cmpId)}/webdoc/${state.cmpId}.js`),
-        fetchDemosFile(`@demos/apis/${huiNewChart.includes(state.cmpId) ? 'hui' : getWebdocPath(state.cmpId)}.js`)
+        fetchDemosFile(`@demos/apis/${getWebdocPath(state.cmpId) === 'chart' ? state.cmpId : getWebdocPath(state.cmpId)}.js`)
       ]
       if (faqMdConfig[state.cmpId]) {
         promiseArr.push(
@@ -453,6 +434,7 @@ table.api-table {
   tbody tr:hover {
     background-color: rgb(250, 250, 252);
   }
+
   th {
     background-color: rgb(250, 250, 252);
     border-bottom: 1px solid rgb(239, 239, 245);
@@ -462,11 +444,13 @@ table.api-table {
     line-height: 1.5;
     word-break: break-word;
   }
+
   td {
     font-size: 14px;
     border-bottom: 1px solid rgb(239, 239, 245);
     padding: 12px;
     line-height: 1.5;
+
     .version-tip {
       margin-left: 6px;
     }
@@ -478,6 +462,7 @@ table.api-table {
   vertical-align: middle;
   font-weight: 600;
 }
+
 .catalog {
   height: calc(100vh - 150px);
   overflow: hidden;
@@ -503,7 +488,7 @@ table.api-table {
   grid-template-columns: minmax(0px, 1fr) minmax(0px, 1fr);
   align-items: flex-start;
 
-  > div {
+  >div {
     display: grid;
     gap: 16px;
     grid-template-columns: 100%;
@@ -512,22 +497,26 @@ table.api-table {
 
 .cmp-container {
   padding-right: 24px;
+
   p {
     font-size: 16px;
     line-height: 1.7em;
     margin: 12px 0;
   }
 }
+
 .cmp-page-anchor {
   :deep(.tiny-anchor__affix) {
     top: unset !important;
     overflow-y: auto;
     max-height: 80vh;
   }
+
   :deep(.tiny-anchor-link) {
     margin-bottom: 10px;
     max-width: 150px;
     font-size: 12px;
+
     a {
       overflow: hidden;
       white-space: nowrap;
@@ -577,6 +566,7 @@ table.api-table {
     margin: 0;
     font-size: 14px;
   }
+
   ul {
     li {
       padding: 5px 0;

package/src/views/components/demo.vue

@@ -139,7 +139,9 @@ export default defineComponent({
     const fn = {
       getDescMd(demo) {
         // desc字段是一段html
+
         const desc = demo.desc[state.langKey].trim()
+
         return <div class="demo-desc" v-html={desc}></div>
       },
       async toggleDemoCode(demo) {
@@ -295,10 +297,12 @@ export default defineComponent({
 .pc-demo-container {
   display: flex;
   flex-direction: column;
+
   .pc-demo {
     flex: 1;
   }
 }
+
 .phone-container {
   margin: auto;
   width: 395px;

package/demos/apis/dialogbox.js

@@ -1,145 +0,0 @@
-export default {
-  mode: ['mobile'],
-  apis: [
-    {
-      name: 'Dialogbox',
-      type: 'component',
-      props: [
-        {
-          mode: []
-        },
-        {
-          name: 'close-on-click-modal',
-          type: 'Boolean',
-          defaultValue: '',
-          desc: {
-            'zh-CN':
-              '<p>是否可以通过点击遮罩层关闭弹窗，默认为 true ,可以在标签上设置:close-on-click-modal="false"不能通过点击遮罩层关闭弹窗。</p>',
-            'en-US': 'Is show left arrow'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'close-on-click-modal'
-        },
-        {
-          name: 'lock-scroll',
-          type: 'Boolean',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '<p>Dialog弹出时是否禁用滚动条,该属性默认为true</p>',
-            'en-US': 'Is show right arrow'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'lock-scroll'
-        },
-        {
-          name: 'modal-append-to-body',
-          type: 'Boolean',
-          defaultValue: '',
-          desc: {
-            'zh-CN':
-              '<p>遮罩层是否应用到 body 上，为 false 时遮罩层会应用到 DialogBox 的父元素上，该属性默认为true</p>',
-            'en-US': 'Is show right text'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'slot-title'
-        },
-        {
-          name: 'show-header',
-          type: 'Boolean',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '<p>是否显示弹窗头部 header，默认值为 true 。</p>',
-            'en-US': 'Is show left text'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'show-header'
-        },
-        {
-          mode: []
-        },
-        {
-          name: 'visible',
-          type: 'String',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '<p>控制弹出框显示与关闭</p>',
-            'en-US': 'set main-title'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'with-input'
-        }
-      ],
-      events: [
-        {
-          mode: []
-        },
-        {
-          name: 'close',
-          type: 'Function()',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '<p>Dialog 关闭的回调</p>',
-            'en-US': 'Click'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'events-open-close'
-        },
-        {
-          name: 'confirm',
-          type: 'Function()',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '<p>Dialog 确定按钮的的回调</p>',
-            'en-US': 'Click'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'cancel-confirm'
-        },
-        {
-          name: 'open',
-          type: 'Function()',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '<p>Dialog 打开的回调</p>',
-            'en-US': 'Click'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'events-open-close'
-        }
-      ],
-      methods: [],
-      slots: [
-        {
-          name: 'default',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '<p>Dialog 的内容</p>',
-            'en-US': 'Click'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'slot-title'
-        },
-        {
-          name: 'footer',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '<p>Dialog 按钮操作区的内容</p>',
-            'en-US': 'Click'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'slot-footer'
-        },
-        {
-          name: 'title',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '<p>Dialog 标题区的内容</p>',
-            'en-US': 'Click'
-          },
-          mode: ['mobile'],
-          mobileDemo: 'slot-title'
-        }
-      ]
-    }
-  ]
-}

package/demos/apis/hui.js

@@ -1,49 +0,0 @@
-export default {
-  mode: ['pc'],
-  apis: [
-    {
-      name: 'chart',
-      type: 'component',
-      props: [
-        {
-          name: 'options',
-          type: 'object',
-          defaultValue: '--',
-          desc: {
-            'zh-CN': '图表参数',
-            'en-US': 'Whether to disable container detection during resize'
-          },
-          mode: ['pc'],
-          pcDemo: 'chart/question#question-base'
-        }
-      ],
-      events: [],
-      methods: [],
-      slots: []
-    }
-  ],
-  types: [
-    {
-      name: 'options',
-      type: 'interface',
-      code: `
-interface options {
-  theme: string // 主题
-  color: array | string // 颜色
-  padding: array // 图表内边距值
-  tipHtml: function // 悬浮提示框内容配置
-  event: object // 图表事件
-  data: array // 图表数据
-  name: string // 图表名称(必填)
-  unit: string // 进度图右侧文本单位
-  barWidth: number // 进度图柱形宽度
-  minWidth: string // 进度图单项数据的最小宽度
-  calibrationValue: number // 进度图标定值
-  label: object // 堆叠进度图图表图元文本样式
-  state: object // 根据状态设置颜色
-  title: object // 进度图图表标题样式
-  text: object // 进度图图表右侧文本样式
-}`
-    }
-  ]
-}