@opentiny/vue-docs 3.17.2 → 3.17.4

package/demos/pc/app/tree-select/size-composition-api.vue

@@ -0,0 +1,69 @@
+<template>
+  <div>
+    <p>medium</p>
+    <tiny-tree-select v-model="value" size="medium" multiple :tree-op="treeOp"></tiny-tree-select>
+    <p>small</p>
+    <tiny-tree-select v-model="value" size="small" multiple :tree-op="treeOp"> </tiny-tree-select>
+    <p>默认</p>
+    <tiny-tree-select v-model="value" multiple :tree-op="treeOp"></tiny-tree-select>
+    <p>mini</p>
+    <tiny-tree-select v-model="value" size="mini" multiple :tree-op="treeOp"> </tiny-tree-select>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { TreeSelect as TinyTreeSelect } from '@opentiny/vue'
+
+const value = ref([])
+
+const treeOp = ref({
+  data: [
+    {
+      value: 1,
+      label: '一级 1',
+      children: [
+        {
+          value: 4,
+          label: '二级 1-1',
+          children: [
+            {
+              value: 9,
+              label: '三级 1-1-1'
+            },
+            {
+              value: 10,
+              label: '三级 1-1-2'
+            }
+          ]
+        }
+      ]
+    },
+    {
+      value: 2,
+      label: '一级 2',
+      children: [
+        {
+          value: 5,
+          label: '二级 2-1'
+        },
+        {
+          value: 6,
+          label: '二级 2-2'
+        }
+      ]
+    }
+  ]
+})
+</script>
+
+<style scoped>
+.tiny-tree-select {
+  width: 280px;
+}
+
+p {
+  font-size: 14px;
+  line-height: 2.5;
+}
+</style>

package/demos/pc/app/tree-select/size.vue

@@ -0,0 +1,76 @@
+<template>
+  <div>
+    <p>medium</p>
+    <tiny-tree-select v-model="value" size="medium" multiple :tree-op="treeOp"></tiny-tree-select>
+    <p>small</p>
+    <tiny-tree-select v-model="value" size="small" multiple :tree-op="treeOp"> </tiny-tree-select>
+    <p>默认</p>
+    <tiny-tree-select v-model="value" multiple :tree-op="treeOp"></tiny-tree-select>
+    <p>mini</p>
+    <tiny-tree-select v-model="value" size="mini" multiple :tree-op="treeOp"> </tiny-tree-select>
+  </div>
+</template>
+
+<script>
+import { TreeSelect } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyTreeSelect: TreeSelect
+  },
+  data() {
+    return {
+      value: [],
+      treeOp: {
+        data: [
+          {
+            value: 1,
+            label: '一级 1',
+            children: [
+              {
+                value: 4,
+                label: '二级 1-1',
+                children: [
+                  {
+                    value: 9,
+                    label: '三级 1-1-1'
+                  },
+                  {
+                    value: 10,
+                    label: '三级 1-1-2'
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            value: 2,
+            label: '一级 2',
+            children: [
+              {
+                value: 5,
+                label: '二级 2-1'
+              },
+              {
+                value: 6,
+                label: '二级 2-2'
+              }
+            ]
+          }
+        ]
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.tiny-tree-select {
+  width: 280px;
+}
+
+p {
+  font-size: 14px;
+  line-height: 2.5;
+}
+</style>

package/demos/pc/app/tree-select/webdoc/tree-select.js

@@ -1,6 +1,9 @@
 export default {
   column: '2',
   owner: '',
+  metaData: {
+    experimental: '3.17.0'
+  },
   demos: [
     {
       demoId: 'basic-usage',
@@ -13,6 +16,127 @@ export default {
         'en-US': ''
       },
       codeFiles: ['basic-usage.vue']
+    },
+    {
+      demoId: 'multiple',
+      name: {
+        'zh-CN': '多选',
+        'en-US': 'Multiple'
+      },
+      desc: {
+        'zh-CN': `通过 <code>multiple</code> 属性启用多选功能，此时 <code>v-model</code> 的值为当前选中值所组成的数组，默认选中值会以标签形式展示。<br>`,
+        'en-US': `Use the <code>multiple</code> attribute to enable the multi-selection function. In this case, the value of <code>v-model</code> is an array of selected values. By default, the selected value is displayed as a tag.<br>`
+      },
+      codeFiles: ['multiple.vue']
+    },
+    {
+      demoId: 'collapse-tags',
+      name: {
+        'zh-CN': '折叠标签',
+        'en-US': 'Collapse tags'
+      },
+      desc: {
+        'zh-CN':
+          '<p>通过 <code>collapse-tags</code> 属性设置选中多个选项时，多个标签缩略展示。设置 <code>hover-expand</code> 为 <code>true</code> ，默认折叠标签, <code>hover</code> 时展示所有标签。标签内容超长时超出省略，<code>hover</code> 标签时展示 <code>tooltip</code> 。</p>\n',
+        'en-US':
+          '<p>When multiple options are selected through the <code>collapse-tags</code> attribute settings, multiple tags are displayed in a thumbnail. By setting <code>hover-expand</code> to <code>true</code> , the tags are collapsed by default, and all tags are displayed when hovering. If the content of the tag is too long, it should be omitted. When hovering the tag, a <code>tooltip</code> should be displayed</p>'
+      },
+      codeFiles: ['collapse-tags.vue']
+    },
+    {
+      demoId: 'size',
+      name: {
+        'zh-CN': '尺寸',
+        'en-US': 'Size'
+      },
+      desc: {
+        'zh-CN': '<p>通过 <code>size</code> 属性设置输入框尺寸，可选值：medium / small / mini 。</p>',
+        'en-US':
+          '<p>Set the input box size through the <code>size</code> attribute, with optional values of medium / small / mini.</p>'
+      },
+      codeFiles: ['size.vue']
+    },
+    {
+      demoId: 'disabled',
+      name: {
+        'zh-CN': '禁用',
+        'en-US': 'Disabled'
+      },
+      desc: {
+        'zh-CN': '<p>通过 <code>disabled</code> 属性设置禁用状态。</p>\n',
+        'en-US':
+          '<p>Set the disabled status of the dropdown or dropdown item through the <code>disabled</code> attribute. </p>\n'
+      },
+      codeFiles: ['disabled.vue']
+    },
+    {
+      demoId: 'map-field',
+      name: {
+        'zh-CN': '映射字段',
+        'en-US': 'Map Fields'
+      },
+      desc: {
+        'zh-CN': '通过 <code>text-field</code> 设置显示文本字段，<code>value-field</code>设置绑定值字段。',
+        'en-US':
+          '<p>Set the display text field by <code>text-field</code>, and set the binding value field by <code>value-field</code>. </p>\n'
+      },
+      codeFiles: ['map-field.vue']
+    },
+    {
+      demoId: 'reference-style',
+      name: {
+        'zh-CN': '触发源样式',
+        'en-US': 'Reference type'
+      },
+      desc: {
+        'zh-CN':
+          '<p>通过 <code>dropdown-icon</code> 属性可自定义下拉图标，<code>drop-style</code> 属性可自定义下拉选项样式，<code>tag-type</code> 属性设置标签类型（同 Tag 组件的 type 属性），<code>input-box-type</code> 属性设置输入框类型。</p>\n',
+        'en-US':
+          '<p>Set the label type through the <code>tag-type</code> attribute, which is the same as the type attribute of the Tag component. Optional values: success/info/warning/danger.</p>\n'
+      },
+      codeFiles: ['reference-style.vue']
+    },
+    {
+      demoId: 'panel-style',
+      name: {
+        'zh-CN': '下拉面板样式',
+        'en-US': 'Panel style'
+      },
+      desc: {
+        'zh-CN':
+          '<p>通过 <code>popper-append-to-body</code> 设置是否将弹框 dom 元素插入至 body 元素，默认为 true，<code>popper-class</code> 属性设置下拉弹框的类名，可自定义样式，<code>placement</code>设置弹出位置。</p>\n',
+        'en-US':
+          '<p>You can customize the style by setting the class name of the dropdown pop-up box through the <code>popper-class</code> attribute <code>placement</code> set the pop-up position <code>popper-append-to-body</code> set whether to insert the pop-up dom element into the body element, default to true. </p>\n'
+      },
+      codeFiles: ['panel-style.vue']
+    },
+    {
+      demoId: 'copy',
+      name: {
+        'zh-CN': '可复制',
+        'en-US': 'Copyable'
+      },
+      desc: {
+        'zh-CN':
+          '<p>通过 <code>copyable</code> 设置启用一键复制所有标签的文本内容并以逗号分隔，<code>text-split</code> 自定义复制文本的分隔符。</p>\n',
+        'en-US':
+          '<p>When setting radio searchable through the <code>allow-copy</code> attribute, the mouse can slide to select and copy the content of the input box. </p>\n'
+      },
+      codeFiles: ['copy.vue']
+    },
+    {
+      demoId: 'native-properties',
+      name: {
+        'zh-CN': '原生属性',
+        'en-US': 'Native properties'
+      },
+      desc: {
+        'zh-CN':
+          '<p>通过 <code>name</code> / <code>placeholder</code> / <code>autocomplete</code> 属性设置下拉组件内置 Input 的原生属性。</p>\n',
+        'en-US':
+          '<p>Set the native properties of the built-in Input in the dropdown component through the <code>name</code> / <code>placeholder</code> / <code>autocomplete</code> attribute settings.</p>\n'
+      },
+      codeFiles: ['native-properties.vue']
     }
   ]
 }

package/demos/pc/menus.js

@@ -261,6 +261,7 @@ export const cmpMenus = [
     'labelEn': 'Chart',
     'key': 'cmp-chart-components',
     'children': [
+      { 'nameCn': '图表文档', 'name': 'Chart Docs', 'key': 'chart-docs' },
       { 'nameCn': '基本用法', 'name': 'Basic Usage', 'key': 'chart' },
       { 'nameCn': '事件监听', 'name': 'Event Listening', 'key': 'chart-events' },
       { 'nameCn': '属性配置示例', 'name': 'Attribute Configuration Example', 'key': 'chart-attributes-demo' },
@@ -313,7 +314,10 @@ export const cmpMenus = [
     'label': '自定义指令',
     'labelEn': 'Custom Instruction',
     'key': 'directives-custom-instruction',
-    'children': [{ 'nameCn': '超出隐藏', 'name': 'AutoTip', 'key': 'directives-auto-tip' }]
+    'children': [
+      { 'nameCn': '超出隐藏', 'name': 'AutoTip', 'key': 'directives-auto-tip' },
+      { 'nameCn': '高亮搜索字', 'name': 'HighlightQuery', 'key': 'directives-highlight-query' }
+    ]
   }
 ]
 

package/demos/pc/overviewimage/chart-docs.svg

@@ -0,0 +1,44 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Chart-Docs 图表文档</title>
+    <defs>
+        <linearGradient x1="46.6204972%" y1="86.8386573%" x2="95.1231838%" y2="-43.8247114%" id="linearGradient-1">
+            <stop stop-color="#5073E5" offset="0%"></stop>
+            <stop stop-color="#5E7CE0" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="44.0988019%" y1="86.8386573%" x2="128.792906%" y2="-43.8247114%" id="linearGradient-2">
+            <stop stop-color="#5073E5" offset="0%"></stop>
+            <stop stop-color="#5E7CE0" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="49.0892284%" y1="86.8386573%" x2="62.1606399%" y2="-43.8247114%" id="linearGradient-3">
+            <stop stop-color="#5073E5" offset="0%"></stop>
+            <stop stop-color="#5E7CE0" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="46.2232332%" y1="86.8386573%" x2="100.42746%" y2="-43.8247114%" id="linearGradient-4">
+            <stop stop-color="#5073E5" offset="0%"></stop>
+            <stop stop-color="#5E7CE0" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="49.4821325%" y1="86.8386573%" x2="56.9145764%" y2="-43.8247114%" id="linearGradient-5">
+            <stop stop-color="#5073E5" offset="0%"></stop>
+            <stop stop-color="#5E7CE0" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="组件总览" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="-TinyUI-Vue-组件总览3" transform="translate(-696.000000, -334.000000)">
+            <g id="编组-17" transform="translate(598.000000, 301.000000)">
+                <g id="Chart-基本用法" transform="translate(98.000000, 33.000000)">
+                    <g id="编组"></g>
+                    <g id="说明" transform="translate(40.000000, 45.000000)">
+                        <rect id="矩形备份-6" fill="url(#linearGradient-1)" opacity="0.204287574" x="0" y="0" width="28" height="37" rx="4"></rect>
+                        <path d="M11.7752734,20 C8.82473155,20.4956338 6.49506187,22.8260384 6,25.7772097 L11.7752734,25.7772097 L11.7752734,20 Z M14.1268173,20.0002691 L14.1268173,28.1257787 L11.7752734,28.1257787 L6.0000269,28.1257787 C6.55933919,31.460933 9.45886815,34 12.9499153,34 C16.8431734,34 20,30.8460328 20,26.9509022 C20,23.4601526 17.4599021,20.5607029 14.1268173,20.0002691 Z" id="形状" fill="url(#linearGradient-2)"></path>
+                        <rect id="矩形" fill="#5073E5" x="6" y="12" width="22" height="4" rx="2"></rect>
+                        <rect id="矩形备份-4" fill="#5073E5" x="6" y="3" width="15" height="4" rx="2"></rect>
+                    </g>
+                    <rect id="矩形" fill="url(#linearGradient-3)" opacity="0.204287574" x="75" y="53" width="11" height="28" rx="2"></rect>
+                    <rect id="矩形" stroke="url(#linearGradient-4)" stroke-width="4" x="39" y="40" width="36" height="45" rx="3"></rect>
+                    <path d="M77.894627,53 L79.894627,53 L83,53 C84.6568542,53 86,54.1456243 86,55.5588235 L86,79.4411765 C86,80.8543757 84.6568542,82 83,82 L77.4091284,82 L79.4091284,82" id="路径" stroke="url(#linearGradient-5)" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-docs",
-  "version": "3.17.2",
+  "version": "3.17.4",
   "license": "MIT",
   "dependencies": {
     "@opentiny/vue-repl": "^1.1.2",
@@ -17,17 +17,17 @@
     "vue-i18n": "^9.1.10",
     "vue-router": "4.1.5",
     "@opentiny/vue": "~3.17.0",
-    "@opentiny/vue-design-saas": "~3.17.0",
-    "@opentiny/vue-design-aurora": "~3.17.0",
     "@opentiny/vue-common": "~3.17.0",
     "@opentiny/vue-design-smb": "~3.17.0",
-    "@opentiny/vue-icon": "~3.17.0",
-    "@opentiny/vue-theme": "~3.17.3",
-    "@opentiny/vue-theme-mobile": "~3.17.0",
+    "@opentiny/vue-design-saas": "~3.17.0",
     "@opentiny/vue-directive": "~3.17.0",
+    "@opentiny/vue-design-aurora": "~3.17.0",
+    "@opentiny/vue-icon": "~3.17.0",
     "@opentiny/vue-vite-import": "~1.1.5",
     "@opentiny/vue-theme-saas": "~3.17.0",
-    "@opentiny/vue-icon-saas": "~3.17.0"
+    "@opentiny/vue-icon-saas": "~3.17.0",
+    "@opentiny/vue-theme": "~3.17.4",
+    "@opentiny/vue-theme-mobile": "~3.17.0"
   },
   "devDependencies": {
     "@playwright/test": "~1.42.0",

package/playground/App.vue

@@ -49,6 +49,7 @@ const createImportMap = (version) => {
     '@opentiny/vue-icon': `${getRuntime(version)}tiny-vue-icon.mjs`,
     '@opentiny/vue-locale': `${getRuntime(version)}tiny-vue-locale.mjs`,
     '@opentiny/vue-common': `${getRuntime(version)}tiny-vue-common.mjs`,
+    '@opentiny/vue-directive': `${getRuntime(version)}tiny-vue-directive.mjs`,
     '@opentiny/vue-theme/': `${cdnHost}/@opentiny/vue-theme${versionDelimiter}${version}/${fileDelimiter}`,
     '@opentiny/vue-theme-mobile/': `${cdnHost}/@opentiny/vue-theme-mobile${versionDelimiter}${version}/${fileDelimiter}`,
     '@opentiny/vue-renderless/': `${cdnHost}/@opentiny/vue-renderless${versionDelimiter}${version}/${fileDelimiter}`,

package/src/i18n/en.json

@@ -1,5 +1,7 @@
 {
-  "language": "EN",
+  "zh-cn": "Chinese",
+  "en-us": "English",
+  "localeType": "Language Selection",
   "dark": "Dark",
   "light": "Light",
   "searchPlaceholder": "Search",
@@ -39,4 +41,4 @@
   "demoModeMultiple": "Multiple",
   "contributor": "Contributors",
   "noData": "No Data"
-}
+}

package/src/i18n/zh.json

@@ -1,5 +1,7 @@
 {
-  "language": "中",
+  "zh-cn": "中文",
+  "en-us": "英文",
+  "localeType": "语言选择",
   "dark": "深色",
   "light": "浅色",
   "searchPlaceholder": "搜索",
@@ -39,4 +41,4 @@
   "demoModeMultiple": "多示例",
   "contributor": "贡献者",
   "noData": "暂无数据"
-}
+}

package/src/style.css

@@ -3,10 +3,18 @@ html {
   font-size: 16px;
 }
 
+:root {
+  --docs-markdown-top-body-zindex: 99;
+  --docs-tabs-header-zindex: 100;
+  --docs-float-settings-zindex: 999;
+  --docs-header-zindex: 200;
+  --docs-layout-sider-zindex: 201;
+}
+
 .tinyui-design-header {
   z-index: 1000 !important;
 }
 
-.tiny-grid td,.tiny-grid th { 
+.tiny-grid td,.tiny-grid th {
   vertical-align: middle;
-}
+}

package/src/tools/appData.js

@@ -11,17 +11,14 @@ const appData = reactive({
   bpState: useMediaQuery([640, 1024, 1280]).matches // 3点4区间， bp0,bp1,bp2,bp3
 })
 const isZhCn = computed(() => appData.lang === ZH_CN_LANG)
-let appFn = {
-  toggleLang() {
-    let url = location.href
-    if (appData.lang === ZH_CN_LANG) {
-      url = location.href.replace(zhPath, enPath)
-    } else {
-      url = location.href.replace(enPath, zhPath)
+const appFn = {
+  toggleLang(name) {
+    if (name !== appData.lang) {
+      let url = location.href
+      url = location.href.replace(LANG_PATH_MAP[appData.lang], LANG_PATH_MAP[name])
+      appData.lang = name
+      location.replace(url)
     }
-    appData.lang = appData.lang === ZH_CN_LANG ? EN_US_LANG : ZH_CN_LANG
-    // router.push(url)
-    location.replace(url)
   },
   toggleTheme() {
     appData.theme = appData.theme === 'light' ? 'dark' : 'light'

package/src/tools/useApiMode.js

@@ -1,9 +1,11 @@
 import { reactive } from 'vue'
 import { $local } from './storage'
+import { appFn } from './appData'
 
 const _modeKey = 'tiny-vue-api-mode'
 const _demoModeKey = 'tiny-vue-demo-mode'
 const apiModeState = reactive({
+  localeMode: location.href.includes('en-US') ? 'enUS' : 'zhCN',
   apiMode: $local[_modeKey] || 'Composition', // 示例风格:  Options: 组合式; Composition: 选项式
   demoMode: $local[_demoModeKey] || 'default' // 示例展示： default:多示例， single:单示例
 })
@@ -12,6 +14,9 @@ const apiModeFn = {
   getDemoName: (name) => {
     return name.replace(/\.vue$/, `${apiModeState.apiMode === 'Options' ? '' : '-composition-api'}.vue`)
   },
+  changeLocaleMode: (name) => {
+    appFn.toggleLang(name)
+  },
   changeApiMode: (name) => {
     $local[_modeKey] = name
   },

package/src/tools/useStyleSettings.js

@@ -1,6 +1,22 @@
 /** 文档显示风格设置 */
 const getStyleSettings = (i18nByKey) => {
   const styleSettings = [
+    {
+      // 语言选择
+      name: 'localeMode',
+      defaultValue: 'zhCN',
+      title: i18nByKey('localeType'),
+      options: [
+        {
+          value: 'zhCN',
+          text: i18nByKey('zh-cn')
+        },
+        {
+          value: 'enUS',
+          text: i18nByKey('en-us')
+        }
+      ]
+    },
     {
       // 示例代码风格
       name: 'apiMode',

package/src/tools/useTheme.js

@@ -16,6 +16,17 @@ import {
   INFINITY_THEME,
   getKeyByValue
 } from '../const'
+import glaciers from '@/assets/images/glaciers.png'
+import glaciersIcon from '@/assets/images/glaciers-icon.png'
+
+import infinitely from '@/assets/images/Infinitely.png'
+import infinitelyIcon from '@/assets/images/Infinitely-icon.png'
+
+import oceanic from '@/assets/images/oceanic.png'
+import oceanicIcon from '@/assets/images/oceanic-icon.png'
+
+import starrySky from '@/assets/images/starry-sky.png'
+import starrySkyIcon from '@/assets/images/starry-sky-icon.png'
 
 const themeMap = {
   [DEFAULT_THEME]: null,
@@ -27,10 +38,34 @@ const themeMap = {
 const isEn = appData.lang === 'enUS'
 
 const themeData = [
-  { value: [DEFAULT_THEME], label: isEn ? 'Default Theme' : '默认主题' },
-  { value: [INFINITY_THEME], label: isEn ? 'Infinity Theme' : '无限主题' },
-  { value: [AURORA_THEME], label: isEn ? 'Aurora Theme' : 'Aurora 主题' },
-  { value: [SMB_THEME], label: isEn ? 'SMB Theme' : 'SMB 主题' }
+  {
+    value: [DEFAULT_THEME],
+    label: isEn ? 'Default Theme' : '冰川主题',
+    tips: isEn ? 'Accurate, Efficient, Distinct' : '精准、高效、清晰',
+    icon: glaciersIcon,
+    bgImage: glaciers
+  },
+  {
+    value: [SMB_THEME],
+    label: isEn ? 'Star Theme' : '星空主题',
+    tips: isEn ? 'Leading, Innovative, Reliable' : '领先、创新、信赖',
+    icon: starrySkyIcon,
+    bgImage: starrySky
+  },
+  {
+    value: [AURORA_THEME],
+    label: isEn ? 'Ocean Theme' : '海洋主题',
+    tips: isEn ? 'Simple, Agile, Delightful' : '简约、敏捷、愉悦',
+    icon: oceanicIcon,
+    bgImage: oceanic
+  },
+  {
+    value: [INFINITY_THEME],
+    label: isEn ? 'Infinity Theme' : '无限主题',
+    tips: isEn ? 'Creative, Scientific, Efficient' : '创造、科学、高效',
+    icon: infinitelyIcon,
+    bgImage: infinitely
+  }
 ]
 
 const designConfigMap = {