@opentiny/vue-docs 2.2.19 → 2.2.21

package/src/views/components/components.vue

@@ -62,8 +62,8 @@
                       </tr>
                       <tr v-else>
                         <th width="15%">{{ i18nByKey('name') }}</th>
-                        <th width="20%">{{ i18nByKey('propType') }}</th>
-                        <th width="20%">{{ i18nByKey('defValue') }}</th>
+                        <th width="20%" v-if="hasKey(oneApiArr, 'type')">{{ i18nByKey('propType') }}</th>
+                        <th width="20%" v-if="hasKey(oneApiArr, 'defaultValue')">{{ i18nByKey('defValue') }}</th>
                         <th width="45%">{{ i18nByKey('desc') }}</th>
                       </tr>
                     </thead>
@@ -81,7 +81,7 @@
                           >
                           </version-tip>
                         </td>
-                        <td v-if="!key.includes('slots')" @click="handleTypeClick">
+                        <td v-if="!key.includes('slots') && hasKey(oneApiArr, 'type')" @click="handleTypeClick">
                           <a
                             v-if="row.typeAnchorName"
                             :href="`${row.typeAnchorName.indexOf('#') === -1 ? '#' : ''}${row.typeAnchorName}`"
@@ -89,7 +89,14 @@
                           ></a>
                           <span v-else v-html="row.type"></span>
                         </td>
-                        <td v-if="!key.includes('slots') && !key.includes('events') && !key.includes('methods')">
+                        <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>
@@ -200,6 +207,7 @@ export default defineComponent({
 
     const { apiModeState } = useApiMode()
     const { templateModeState, staticPath, optionsList } = useTemplateMode()
+    const huiNewChart = ['chart-process']
 
     // 页面加载/点击api中的链接，根据hash滚动。
     const scrollByHash = (hash) => {
@@ -267,7 +275,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/${getWebdocPath(state.cmpId)}.js`)
+        fetchDemosFile(`@demos/apis/${huiNewChart.includes(state.cmpId) ? 'hui' : getWebdocPath(state.cmpId)}.js`)
       ]
       if (faqMdConfig[state.cmpId]) {
         promiseArr.push(
@@ -412,6 +420,8 @@ export default defineComponent({
       common.renderFooter()
     })
 
+    const hasKey = (apiArr, key) => !apiArr.every((item) => item[key] === undefined)
+
     return {
       ...toRefs(state),
       ...fn,
@@ -419,7 +429,8 @@ export default defineComponent({
       anchorRefreshKey,
       apiModeState,
       templateModeState,
-      optionsList
+      optionsList,
+      hasKey
     }
   }
 })

package/src/views/layout/layout.vue

@@ -7,11 +7,9 @@
       </tiny-tooltip>
     </div>
     <!-- 切換主题样式 -->
-    <tiny-dropdown v-if="!templateModeState.isSaas" class="theme-change-button" trigger="click">
+    <tiny-dropdown v-if="!templateModeState.isSaas" class="theme-change-button" trigger="click" :show-icon="false">
       <tiny-tooltip :content="i18nByKey('changeTheme')" placement="left">
-        <span>
-          <img :src="themeSvg" :alt="i18nByKey('changeTheme')" />
-        </span>
+        <img :src="themeSvg" :alt="i18nByKey('changeTheme')" />
       </tiny-tooltip>
       <template #dropdown>
         <tiny-dropdown-menu :options="themeData">
@@ -244,6 +242,7 @@ export default defineComponent({
   border-radius: 100%;
   background-color: transparent;
   img {
+    margin-right: calc(-1 * var(--ti-dropdown-trigger-title-margin-right));
     display: block;
     width: 26px;
     height: 26px;

package/src/views/overview.vue

@@ -12,10 +12,10 @@
       <!-- 搜索 -->
       <tiny-input
         :placeholder="i18nByKey('searchComponents')"
-        v-model="value"
+        :modelValue="value"
         class="ti-mb10 search-input"
         :style="{ width: '100%', padding: '6px' }"
-        @input="searchHandler"
+        @update:modelValue="searchHandler"
       >
         <template #suffix>
           <img class="ti-h24 ti-w24 cur-def" :src="searchSvg" />
@@ -94,8 +94,8 @@ export default defineComponent({
         }, delay)
       }
     }
-    function searchResultFn(event) {
-      const value = event
+    function searchResultFn(val) {
+      const value = val
       const trimValue = value.replaceAll(' ', '').toLowerCase()
       const currentValue = trimValue
       const reg = new RegExp(currentValue, 'ig')
@@ -120,9 +120,13 @@ export default defineComponent({
     const { defaultThemeKey } = useTheme()
     const { all: allPathParam, theme = defaultThemeKey } = useRoute().params
     const allPath = allPathParam ? allPathParam + '/' : ''
+    const debounceSearch = debounce(searchResultFn, 300)
 
     let fn = {
-      searchHandler: debounce(searchResultFn, 300),
+      searchHandler: (val) => {
+        state.value = val
+        debounceSearch(val)
+      },
       getTo: (key) => `${import.meta.env.VITE_CONTEXT}${allPath}${lang}/${theme}/components/${key}`,
       getSvg: (key) => {
         // 表格示例单独另起了许多路由，统一使用表格组件图标

package/demos/apis/credit-card-form.js

@@ -1,98 +0,0 @@
-export default {
-  mode: ['pc'],
-  apis: [
-    {
-      name: 'credit-card-form',
-      type: 'component',
-      props: [
-        {
-          name: 'background-image',
-          type: 'string , object',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '设置卡片的背景图片;',
-            'en-US': 'Set the background image of the card.'
-          },
-          mode: ['pc'],
-          pcDemo: 'background-image'
-        },
-        {
-          name: 'form-data',
-          type: 'object',
-          defaultValue:
-            "// 该属性的默认值为 \n{cardCvv: '', cardName: '', cardYear: '', cardMonth: '', cardNumber: ''}",
-          desc: {
-            'zh-CN': '设置信用卡显示数据',
-            'en-US': 'Setting Credit Card Display Data'
-          },
-          mode: ['pc'],
-          pcDemo: 'basic-usage'
-        }
-      ],
-      events: [
-        {
-          name: 'input-card-cvv',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '输入 cvv 时触发的事件',
-            'en-US': 'CVV input event triggered'
-          },
-          mode: ['pc'],
-          pcDemo: 'credit-card-form-events'
-        },
-        {
-          name: 'input-card-month',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '选择月时触发的事件',
-            'en-US': 'Event triggered when a month is selected'
-          },
-          mode: ['pc'],
-          pcDemo: 'credit-card-form-events'
-        },
-        {
-          name: 'input-card-name',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '输入卡持有者时触发的事件',
-            'en-US': 'Event triggered when a card holder is entered'
-          },
-          mode: ['pc'],
-          pcDemo: 'credit-card-form-events'
-        },
-        {
-          name: 'input-card-number',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '输入卡号时触发的事件',
-            'en-US': 'Event triggered when a card number is entered'
-          },
-          mode: ['pc'],
-          pcDemo: 'credit-card-form-events'
-        },
-        {
-          name: 'input-card-year',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '选择年时触发的事件',
-            'en-US': 'Event triggered when the year is selected'
-          },
-          mode: ['pc'],
-          pcDemo: 'credit-card-form-events'
-        },
-        {
-          name: 'submit',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '提交时触发的事件',
-            'en-US': 'Event triggered upon submission'
-          },
-          mode: ['pc'],
-          pcDemo: 'credit-card-form-events'
-        }
-      ],
-      methods: [],
-      slots: []
-    }
-  ]
-}

package/demos/apis/detail-page.js

@@ -1,126 +0,0 @@
-export default {
-  mode: ['pc'],
-  apis: [
-    {
-      name: 'detail-page',
-      type: 'component',
-      props: [
-        {
-          name: 'cancel-button',
-          type: 'string',
-          defaultValue: '',
-          desc: {
-            'zh-CN': "个性化弹窗取消按钮的文本，默认为 '取消'",
-            'en-US': "Text of the cancel button in the personalized pop-up window, The default value is'Cancel'"
-          },
-          mode: ['pc'],
-          pcDemo: 'custom-show-text'
-        },
-        {
-          name: 'dialog-title',
-          type: 'string',
-          defaultValue: '',
-          desc: {
-            'zh-CN': "个性化弹窗标题，默认为 '个性化标题'",
-            'en-US': "Personalize pop-up title, default is'Personalized title'"
-          },
-          mode: ['pc'],
-          pcDemo: 'custom-show-text'
-        },
-        {
-          name: 'label-title',
-          type: 'string',
-          defaultValue: '',
-          desc: {
-            'zh-CN': "个性化弹窗表头文本标题栏字段;默认为 '文本字段'",
-            'en-US': "Personalized pop-up window header text title bar field, The default value is 'Title'"
-          },
-          mode: ['pc'],
-          pcDemo: 'custom-show-text'
-        },
-        {
-          name: 'modelValue / v-model',
-          typeAnchorName: 'IDetailPageItem',
-          type: 'IDetailPageItem[]',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '设置表头详情栏的数据',
-            'en-US': 'Set the data in the table header details column'
-          },
-          mode: ['pc'],
-          pcDemo: ''
-        },
-        {
-          name: 'save-button',
-          type: 'string',
-          defaultValue: '',
-          desc: {
-            'zh-CN': "个性化弹窗确定按钮的文本，默认为 '确定'",
-            'en-US': "Text of the confirmation button in the personalized pop-up window, The default value is'Confirm'"
-          },
-          mode: ['pc'],
-          pcDemo: 'custom-show-text'
-        },
-        {
-          name: 'text-split',
-          type: 'string',
-          defaultValue: "'---'",
-          desc: {
-            'zh-CN': '详情栏标题分隔符',
-            'en-US': 'Details column title separator'
-          },
-          mode: ['pc'],
-          pcDemo: 'custom-show-text'
-        },
-        {
-          name: 'tips',
-          type: 'string',
-          defaultValue: '',
-          desc: {
-            'zh-CN': "提示不能全部隐藏的提示语，默认为 '不能全部隐藏'",
-            'en-US': "Prompt message that cannot be completely hidden, The default value is 'Cannot hide all' "
-          },
-          mode: ['pc'],
-          pcDemo: 'custom-show-text'
-        },
-        {
-          name: 'title',
-          type: 'string',
-          defaultValue: '',
-          desc: {
-            'zh-CN': "详情栏标, 默认为 '数据'",
-            'en-US': "Details field, default value is' Data '"
-          },
-          mode: ['pc'],
-          pcDemo: 'custom-show-text'
-        },
-        {
-          name: 'value-title',
-          type: 'string',
-          defaultValue: '',
-          desc: {
-            'zh-CN': "个性化弹窗表头文本操作栏字段，默认为 '勾选隐藏'",
-            'en-US':
-              "Personalized pop-up window header text operation column field, The default value is'Click to hide'"
-          },
-          mode: ['pc'],
-          pcDemo: 'custom-show-text'
-        }
-      ],
-      events: [],
-      methods: [],
-      slots: []
-    }
-  ],
-  types: [
-    {
-      name: 'IDetailPageItem',
-      type: 'interface',
-      code: `interface IDetailPageItem {
-  label: string
-  value: string
-  hidden?: boolean
-}`
-    }
-  ]
-}

package/demos/apis/slide-bar.js

@@ -1,104 +0,0 @@
-export default {
-  mode: ['pc'],
-  apis: [
-    {
-      name: 'slide-bar',
-      type: 'component',
-      props: [
-        {
-          name: 'init-blocks',
-          type: 'number',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '初始时需要显示的块数',
-            'en-US': 'Number of blocks to be displayed initially'
-          },
-          mode: ['pc'],
-          pcDemo: 'wheel-blocks'
-        },
-        {
-          name: 'sub-tag',
-          type: 'string',
-          defaultValue: "该属性的默认值为 'li'",
-          desc: {
-            'zh-CN': '设置组件的子级 Dom 标签',
-            'en-US': 'Setting the Dom Label of a Component'
-          },
-          mode: ['pc'],
-          pcDemo: 'custom-tag'
-        },
-        {
-          name: 'tag',
-          type: 'string',
-          defaultValue: "该属性的默认值为 'ul'",
-          desc: {
-            'zh-CN': '设置组件的 Dom 标签',
-            'en-US': 'Setting the Dom Label of a Component'
-          },
-          mode: ['pc'],
-          pcDemo: 'custom-tag'
-        },
-        {
-          name: 'value',
-          type: 'Array',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '调用服务时候获取数据的来源',
-            'en-US': 'Data source obtained during service invoking'
-          },
-          mode: ['pc'],
-          pcDemo: 'wheel-blocks'
-        },
-        {
-          name: 'wheel-blocks',
-          type: 'number',
-          defaultValue: '该属性的默认值为 1',
-          desc: {
-            'zh-CN': '鼠标滚轮上下滚动的时候，滚动的块数长度',
-            'en-US': 'Number of scrolling blocks when the mouse wheel is scrolled up or down'
-          },
-          mode: ['pc'],
-          pcDemo: 'wheel-blocks'
-        }
-      ],
-      events: [
-        {
-          name: 'before-click',
-          type: 'Function(value)',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '滑动点击前触发的事件;event: 原生事件',
-            'en-US': 'Event triggered before a user swipes the screen. event: Native event'
-          },
-          mode: ['pc'],
-          pcDemo: 'slide-bar-events'
-        },
-        {
-          name: 'click',
-          type: 'Function(data, index)',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '滑动块点击事件;data: 点击的滑块数据，index: 点击的滑块索引值',
-            'en-US':
-              'Sliding block click event; data: data of the clicked slider, index: index value of the clicked slider'
-          },
-          mode: ['pc'],
-          pcDemo: 'slide-bar-events'
-        }
-      ],
-      methods: [],
-      slots: [
-        {
-          name: 'default',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '默认的作用域插槽',
-            'en-US': 'Default scope slot'
-          },
-          mode: ['pc'],
-          pcDemo: 'custom-content'
-        }
-      ]
-    }
-  ]
-}

package/demos/pc/app/credit-card-form/background-image-composition-api.vue

@@ -1,17 +0,0 @@
-<template>
-  <tiny-credit-card-form :form-data="formData" :background-image="backgroundImage"></tiny-credit-card-form>
-</template>
-
-<script setup lang="jsx">
-import { ref } from 'vue'
-import { CreditCardForm as TinyCreditCardForm } from '@opentiny/vue'
-
-const backgroundImage = ref(`${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/mountain.png`)
-const formData = ref({
-  cardName: '',
-  cardNumber: '',
-  cardMonth: '',
-  cardYear: '',
-  cardCvv: ''
-})
-</script>

package/demos/pc/app/credit-card-form/background-image.vue

@@ -1,25 +0,0 @@
-<template>
-  <tiny-credit-card-form :form-data="formData" :background-image="backgroundImage"></tiny-credit-card-form>
-</template>
-
-<script lang="jsx">
-import { CreditCardForm } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyCreditCardForm: CreditCardForm
-  },
-  data() {
-    return {
-      backgroundImage: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/mountain.png`,
-      formData: {
-        cardName: '',
-        cardNumber: '',
-        cardMonth: '',
-        cardYear: '',
-        cardCvv: ''
-      }
-    }
-  }
-}
-</script>

package/demos/pc/app/credit-card-form/basic-usage-composition-api.vue

@@ -1,16 +0,0 @@
-<template>
-  <tiny-credit-card-form :form-data="formData"></tiny-credit-card-form>
-</template>
-
-<script setup lang="jsx">
-import { ref } from 'vue'
-import { CreditCardForm as TinyCreditCardForm } from '@opentiny/vue'
-
-const formData = ref({
-  cardName: '',
-  cardNumber: '',
-  cardMonth: '',
-  cardYear: '',
-  cardCvv: ''
-})
-</script>

package/demos/pc/app/credit-card-form/basic-usage.vue

@@ -1,24 +0,0 @@
-<template>
-  <tiny-credit-card-form :form-data="formData"></tiny-credit-card-form>
-</template>
-
-<script lang="jsx">
-import { CreditCardForm } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyCreditCardForm: CreditCardForm
-  },
-  data() {
-    return {
-      formData: {
-        cardName: '',
-        cardNumber: '',
-        cardMonth: '',
-        cardYear: '',
-        cardCvv: ''
-      }
-    }
-  }
-}
-</script>

package/demos/pc/app/credit-card-form/credit-card-form-events-composition-api.vue

@@ -1,51 +0,0 @@
-<template>
-  <tiny-credit-card-form
-    :form-data="formData"
-    @submit="submit"
-    @input-card-cvv="inputCardCvv"
-    @input-card-month="inputCardMonth"
-    @input-card-name="inputCardName"
-    @input-card-number="inputCardNumber"
-    @input-card-year="inputCardYear"
-  ></tiny-credit-card-form>
-</template>
-
-<script setup lang="jsx">
-import { ref } from 'vue'
-import { CreditCardForm as TinyCreditCardForm, Modal } from '@opentiny/vue'
-
-const formData = ref({
-  cardName: '',
-  cardNumber: '',
-  cardMonth: '',
-  cardYear: '',
-  cardCvv: ''
-})
-
-function inputCardCvv(val) {
-  Modal.message({ message: 'CCV 输入的值:' + val, status: 'info' })
-}
-
-function inputCardYear(val) {
-  Modal.message({ message: '选择的年份:' + val, status: 'info' })
-}
-
-function inputCardMonth(val) {
-  Modal.message({ message: '选择的月份:' + val, status: 'info' })
-}
-
-function inputCardName(val) {
-  Modal.message({ message: '输入的持卡者:' + val, status: 'info' })
-}
-
-function inputCardNumber(val) {
-  Modal.message({ message: '输入的卡号:' + val, status: 'info' })
-}
-
-function submit(val) {
-  Modal.message({
-    message: `已提交的信息为：${JSON.stringify(val)}`,
-    status: 'info'
-  })
-}
-</script>

package/demos/pc/app/credit-card-form/credit-card-form-events.vue

@@ -1,55 +0,0 @@
-<template>
-  <tiny-credit-card-form
-    :form-data="formData"
-    @submit="submit"
-    @input-card-cvv="inputCardCvv"
-    @input-card-month="inputCardMonth"
-    @input-card-name="inputCardName"
-    @input-card-number="inputCardNumber"
-    @input-card-year="inputCardYear"
-  ></tiny-credit-card-form>
-</template>
-
-<script lang="jsx">
-import { CreditCardForm, Modal } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyCreditCardForm: CreditCardForm
-  },
-  data() {
-    return {
-      formData: {
-        cardName: '',
-        cardNumber: '',
-        cardMonth: '',
-        cardYear: '',
-        cardCvv: ''
-      }
-    }
-  },
-  methods: {
-    inputCardCvv(val) {
-      Modal.message({ message: 'CCV 输入的值:' + val, status: 'info' })
-    },
-    inputCardYear(val) {
-      Modal.message({ message: '选择的年份:' + val, status: 'info' })
-    },
-    inputCardMonth(val) {
-      Modal.message({ message: '选择的月份:' + val, status: 'info' })
-    },
-    inputCardName(val) {
-      Modal.message({ message: '输入的持卡者:' + val, status: 'info' })
-    },
-    inputCardNumber(val) {
-      Modal.message({ message: '输入的卡号:' + val, status: 'info' })
-    },
-    submit(val) {
-      Modal.message({
-        message: `已提交的信息为：${JSON.stringify(val)}`,
-        status: 'info'
-      })
-    }
-  }
-}
-</script>

package/demos/pc/app/credit-card-form/webdoc/credit-card-form.cn.md

@@ -1,7 +0,0 @@
----
-title: CreditCardForm 信用卡表单
----
-
-# CreditCardForm 信用卡表单
-
-<div>通过表单输入实时改变信用卡卡片的相关信息。</div>

package/demos/pc/app/credit-card-form/webdoc/credit-card-form.en.md

@@ -1,7 +0,0 @@
----
-title: CreditCardForm
----
-
-# CreditCardForm
-
-<div>Change information about credit cards in real time through form input.</div>