@opentiny/vue-docs 2.2.5 → 2.2.7

package/src/views/components/demo.vue

@@ -16,7 +16,7 @@
           <tiny-tooltip
             placement="top"
             :append-to-body="false"
-            :content="demo.isOpen ? $t('hideCode') : $t('showCode')"
+            :content="demo.isOpen ? i18nByKey('hideCode') : i18nByKey('showCode')"
           >
             <i
               :class="!!demo.isOpen ? 'i-ti-codeslash' : 'i-ti-code'"
@@ -24,7 +24,7 @@
               @click="toggleDemoCode(demo)"
             />
           </tiny-tooltip>
-          <tiny-tooltip placement="top" :append-to-body="false" :content="$t('playground')">
+          <tiny-tooltip placement="top" :append-to-body="false" :content="i18nByKey('playground')">
             <i class="i-ti-playground ml8 h:c-success ti-w16 ti-h16 ti-cur-hand" @click="openPlayground(demo)" />
           </tiny-tooltip>
         </div>
@@ -65,8 +65,8 @@
 
 <script lang="jsx">
 import { defineComponent, reactive, computed, toRefs, shallowRef, onMounted, watch, nextTick, inject } from 'vue'
-import { $t, $t2 } from '@/i18n'
-import { $split, appData, fetchDemosFile, $pub } from '@/tools'
+import { i18nByKey, getWord } from '@/i18n'
+import { $split, appData, fetchDemosFile } from '@/tools'
 import { Tooltip as TinyTooltip, Tabs as TinyTabs, TabItem as TinyTabItem, Button as TinyButton } from '@opentiny/vue'
 import { languageMap, vueComponents, getWebdocPath, staticDemoPath } from './cmpConfig'
 import { router } from '@/router.js'
@@ -108,7 +108,7 @@ export default defineComponent({
             .then((code) => {
               return code
             })
-            .catch((error) => {
+            .catch(() => {
               return `${demoName}示例资源不存在，请检查文件名是否正确？`
             })
           const ext = $split(fileName, '.', -1)
@@ -123,7 +123,7 @@ export default defineComponent({
     const state = reactive({
       tabValue: 'tab0',
       cmpId: router.currentRoute.value.params.cmpId,
-      langKey: $t2('zh-CN', 'en-US'),
+      langKey: getWord('zh-CN', 'en-US'),
       currDemoId: computed(() => {
         let hash = router.currentRoute.value.hash?.slice(1)
 
@@ -133,7 +133,7 @@ export default defineComponent({
         }
         return hash
       }),
-      copyTip: $t('copyCode'),
+      copyTip: i18nByKey('copyCode'),
       copyIcon: 'i-ti-copy'
     })
 
@@ -169,12 +169,12 @@ export default defineComponent({
 
           navigator.clipboard.writeText(demo.files[0].code)
         }
-        state.copyTip = $t('copyCodeOk')
+        state.copyTip = i18nByKey('copyCodeOk')
         state.copyIcon = 'i-ti-check'
       },
       resetTip() {
         setTimeout(() => {
-          state.copyTip = $t('copyCode')
+          state.copyTip = i18nByKey('copyCode')
           state.copyIcon = 'i-ti-copy'
         }, 300)
       },
@@ -218,7 +218,7 @@ export default defineComponent({
       }
     )
 
-    return { ...toRefs(state), ...fn, appData, vueComponents, demoConfig, cmp, isMobileFirst }
+    return { ...toRefs(state), ...fn, appData, vueComponents, demoConfig, cmp, isMobileFirst, i18nByKey }
   }
 })
 </script>
@@ -304,7 +304,7 @@ export default defineComponent({
     position: absolute;
     left: 11px;
     top: 79px;
-    transform: translateX(0);
+    transform: i18nByKeyX(0);
     overflow: hidden;
   }
 }

package/src/views/docs/docs.vue

@@ -13,8 +13,7 @@
 
 <script setup>
 import { ref, nextTick, watch, onMounted, computed, shallowRef } from 'vue'
-import { Anchor as TinyAnchor } from '@opentiny/vue'
-import { $t2 } from '@/tools'
+import { getWord } from '@/tools'
 import docMDs, { transformIdSelector } from './docConfig.js'
 import { router } from '@/router.js'
 
@@ -28,7 +27,7 @@ const catalog = ref([])
 const docCmp = shallowRef(null)
 
 async function loadPage() {
-  let suffix = $t2('', '-en')
+  let suffix = getWord('', '-en')
   const docKey = router.currentRoute.value.params.docId
   const docName = isOpen && openDocMap[docKey] ? openDocMap[docKey] : docKey
 

package/src/views/layout/layout.vue

@@ -2,15 +2,15 @@
   <div class="main-layout ti-hp100 ti-f-c ti-f-box-stretch">
     <!-- 切换语言 -->
     <div class="lang-box">
-      <tiny-tooltip :content="$t('changeLanguage')" placement="left">
-        <span class="lang-btn" @click="changeLanguage">{{ $t('language') }}</span>
+      <tiny-tooltip :content="i18nByKey('changeLanguage')" placement="left">
+        <span class="lang-btn" @click="changeLanguage">{{ i18nByKey('language') }}</span>
       </tiny-tooltip>
     </div>
     <!-- 切換主题样式 -->
     <tiny-dropdown v-if="!templateModeState.isSaas" class="theme-change-button" trigger="click">
-      <tiny-tooltip :content="$t('changeTheme')" placement="left">
+      <tiny-tooltip :content="i18nByKey('changeTheme')" placement="left">
         <span>
-          <img :src="themeSvg" :alt="$t('changeTheme')" />
+          <img :src="themeSvg" :alt="i18nByKey('changeTheme')" />
         </span>
       </tiny-tooltip>
       <template #dropdown>
@@ -31,7 +31,7 @@
         <div v-show="!isCollapsed" class="api-type-box" :class="{ 'is-collapsed': isCollapsed }">
           <div class="api-type">
             <div :class="{ 'api-mode': true, active: apiModeState.apiMode === 'Options' }">
-              {{ $t2('选项式', 'Options') }}
+              {{ getWord('选项式', 'Options') }}
             </div>
             <tiny-switch
               class="api-switch"
@@ -41,16 +41,16 @@
               v-model="apiModeState.apiMode"
             ></tiny-switch>
             <div :class="{ 'api-mode': true, active: apiModeState.apiMode === 'Composition' }">
-              {{ $t2('组合式', 'Composition') }}
+              {{ getWord('组合式', 'Composition') }}
             </div>
-            <tiny-tooltip :content="$t('apiType')" placement="right">
+            <tiny-tooltip :content="i18nByKey('apiType')" placement="right">
               <icon-help-circle></icon-help-circle>
             </tiny-tooltip>
           </div>
 
           <div class="api-type">
             <div :class="{ 'api-mode': true, active: apiModeState.demoMode === 'single' }">
-              {{ $t2('单示例', 'Single') }}
+              {{ getWord('单示例', 'Single') }}
             </div>
             <tiny-switch
               class="api-switch"
@@ -60,9 +60,9 @@
               v-model="apiModeState.demoMode"
             ></tiny-switch>
             <div :class="{ 'api-mode': true, active: apiModeState.demoMode === 'default' }">
-              {{ $t2('多示例', 'Multiple') }}
+              {{ getWord('多示例', 'Multiple') }}
             </div>
-            <tiny-tooltip :content="$t2('切换demo的预览模式', 'Change demo preview mode')" placement="right">
+            <tiny-tooltip :content="getWord('切换demo的预览模式', 'Change demo preview mode')" placement="right">
               <icon-help-circle></icon-help-circle>
             </tiny-tooltip>
           </div>
@@ -83,12 +83,8 @@
             <div class="node-name-container">
               <tiny-tag v-if="data?.mode?.includes('mobile-first')" effect="plain">多端</tiny-tag>
               <span class="node-name-label">{{ data.label }}</span>
-              <tiny-tag 
-                v-if="data.mark?.text"
-                class="node-float-tip"
-                effect="dark"
-                :type="data.mark?.type">
-                {{ data.mark.text}}
+              <tiny-tag v-if="data.mark?.text" class="node-float-tip" effect="dark" :type="data.mark?.type">
+                {{ data.mark.text }}
               </tiny-tag>
             </div>
           </template>
@@ -113,7 +109,7 @@ import { Switch, TreeMenu, Dropdown, DropdownMenu, DropdownItem, Tooltip, Tag }
 import { iconHelpCircle } from '@opentiny/vue-icon'
 import { genMenus } from '@/menus.jsx'
 import { router } from '@/router.js'
-import { $t2, $t, appData, appFn, useApiMode, useTemplateMode } from '@/tools'
+import { getWord, i18nByKey, appData, appFn, useApiMode, useTemplateMode } from '@/tools'
 import themeSvg from '@/assets/images/theme.svg?url'
 import useTheme from '@/tools/useTheme'
 
@@ -144,7 +140,7 @@ export default defineComponent({
       expandKeys: []
     })
 
-    const lang = $t2('zh-CN', 'en-US')
+    const lang = getWord('zh-CN', 'en-US')
     const getTo = (route, key) => `${import.meta.env.VITE_CONTEXT}${lang}/os-theme/${route}${key}`
 
     const changeLanguage = () => {
@@ -217,7 +213,9 @@ export default defineComponent({
       changeLanguage,
       apiModeState,
       apiModeFn,
-      templateModeState
+      templateModeState,
+      getWord,
+      i18nByKey
     }
   }
 })

package/src/views/overview.vue

@@ -2,16 +2,16 @@
   <div>
     <div class="overview-layout ti-pt48">
       <h1 class="ti-mb20 ti-f24 ti-fw-600">
-        {{ $t('overview') }}
+        {{ i18nByKey('overview') }}
         <span class="ti-f18">({{ getTotalComponentsNum() }})</span>
       </h1>
 
       <h1 class="ti-f14 ti-my20 ti-lh21">
-        {{ $t('overviewDesc') }}
+        {{ i18nByKey('overviewDesc') }}
       </h1>
       <!-- 搜索 -->
       <tiny-input
-        :placeholder="$t('searchComponents')"
+        :placeholder="i18nByKey('searchComponents')"
         v-model="value"
         class="ti-mb10 search-input"
         :style="{ width: '100%', padding: '6px' }"
@@ -27,7 +27,7 @@
       </div>
       <div v-for="(menu, index) in searchMenus" :label="menu" :key="index">
         <div class="ti-rel ti-mt25">
-          <h2 class="ti-f16 ti-d-ib ti-fw-600 ti-mr8">{{ $t2(menu.label, menu.labelEn) }}</h2>
+          <h2 class="ti-f16 ti-d-ib ti-fw-600 ti-mr8">{{ getWord(menu.label, menu.labelEn) }}</h2>
           <span v-if="searchMenus?.length !== 0" class="cell-title">{{ menu.children.length }}</span>
         </div>
         <div class="ti-f-r ti-f-wrap ti-f-pos-between overview-card">
@@ -41,8 +41,8 @@
               <div class="ti-br-4 component-card">
                 <img
                   class="ti-h125 ti-w125"
-                  :src="$pub(`@demos/overviewimage/${getSvg(cell.key)}.svg`)"
-                  :onerror="`this.src='${$pub(`@demos/overviewimage/dev.svg`)}'`"
+                  :src="pubUrl(`@demos/overviewimage/${getSvg(cell.key)}.svg`)"
+                  :onerror="`this.src='${pubUrl(`@demos/overviewimage/dev.svg`)}'`"
                 />
                 <h2 class="ti-f16 overview-card-label">
                   {{ cell.name }}
@@ -66,8 +66,7 @@ import { cmpMenus } from '@menu/menus.js'
 import TinyInput from '@opentiny/vue-input'
 import noDataSvg from '@/assets/images/no-data.svg?url'
 import searchSvg from '@/assets/images/search.svg?url'
-import { $t2, isZhCn } from '@/tools'
-
+import { getWord, i18nByKey, isZhCn, pubUrl } from '@/tools'
 
 export default defineComponent({
   name: 'Overview',
@@ -98,7 +97,7 @@ export default defineComponent({
       const trimValue = value.replaceAll(' ', '').toLowerCase()
       const currentValue = trimValue
       const reg = new RegExp(currentValue, 'ig')
-      const isGrid = (trimValue === 'grid' || trimValue === '表格')
+      const isGrid = trimValue === 'grid' || trimValue === '表格'
       const searchMenus = state.menus
         .map((item) => {
           const label = item.label
@@ -115,7 +114,7 @@ export default defineComponent({
         .filter((item) => item.children.length > 0)
       state.searchMenus = searchMenus
     }
-    const lang = $t2('zh-CN', 'en-US')
+    const lang = getWord('zh-CN', 'en-US')
     let fn = {
       searchHandler: debounce(searchResultFn, 300),
       getTo: (key) => `${import.meta.env.VITE_CONTEXT}${lang}/os-theme/components/${key}`,
@@ -128,7 +127,7 @@ export default defineComponent({
         }
       },
       getTotalComponentsNum: () => {
-        let total = 0;
+        let total = 0
         cmpMenus.forEach((cmpCategory) => {
           if (cmpCategory.key === 'cmp_frame_style') {
             total += 2
@@ -145,7 +144,7 @@ export default defineComponent({
       const common = new window.TDCommon(['#footer'], {})
       common.renderFooter()
     })
-    return { ...toRefs(state), ...fn, TinyInput, noDataSvg, searchSvg, isZhCn }
+    return { ...toRefs(state), ...fn, TinyInput, noDataSvg, searchSvg, isZhCn, getWord, i18nByKey, pubUrl }
   }
 })
 </script>
@@ -174,7 +173,11 @@ export default defineComponent({
 
 .component-card {
   box-shadow: 1px 1px 4px 1px rgba(31, 52, 121, 0.1);
-  transition: color 0.3s, background-color 0.3s, box-shadow 0.3s, border-color 0.3s;
+  transition:
+    color 0.3s,
+    background-color 0.3s,
+    box-shadow 0.3s,
+    border-color 0.3s;
   padding: 24px;
   font-size: 14px;
   color: rgb(51, 54, 57);

package/vite.config.ts

@@ -12,6 +12,7 @@ import importPlugin from '@opentiny/vue-vite-import'
 import vue3SvgPlugin from 'vite-svg-loader'
 import { getAlias, pathFromWorkspaceRoot, getOptimizeDeps } from '../../internals/cli/src/config/vite'
 import virtualTemplatePlugin from '@opentiny-internal/unplugin-virtual-template/vite'
+import tailwindCss from 'tailwindcss'
 
 export default defineConfig((config) => {
   const env = loadEnv(config.mode, process.cwd() + '/env', '')
@@ -97,13 +98,20 @@ export default defineConfig((config) => {
         strict: false,
         allow: ['..']
       }
+    },
+    define: {
+      __VUE_I18N_FULL_INSTALL__: true,
+      __VUE_I18N_LEGACY_API__: true,
+      __INTLIFY_PROD_DEVTOOLS__: false,
+      __INTLIFY_JIT_COMPILATION__: false,
+      __INTLIFY_DROP_MESSAGE_COMPILER__: false
     }
   }
 
   if (env.VITE_TINY_THEME === 'saas') {
     viteConfig.css = {
       postcss: {
-        plugins: [require('tailwindcss')]
+        plugins: [tailwindCss]
       }
     }
     // 这里逻辑是兼容saas官网工程的alias写法
@@ -114,9 +122,7 @@ export default defineConfig((config) => {
   }
 
   if (env.NODE_ENV === 'development') {
-    viteConfig.define = {
-      'process.env': {}
-    }
+    viteConfig.define['process.env'] = {}
   }
 
   return viteConfig

package/demos/mobile/app/input/autofocus.vue

@@ -1,37 +0,0 @@
-<template>
-  <div class="input-wrap">
-    <tiny-input v-model="input" type="textarea" autosize autofocus placeholder="请输入内容"></tiny-input>
-    <tiny-input
-      v-model="input"
-      type="textarea"
-      :autosize="{ minRows: 2, maxRows: 3 }"
-      placeholder="请输入内容"
-    ></tiny-input>
-  </div>
-</template>
-
-<script lang="jsx">
-import { Input } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyInput: Input
-  },
-  data() {
-    return {
-      input: ''
-    }
-  }
-}
-</script>
-
-<style>
-.input-wrap {
-  padding-top: 20px;
-  height: 100%;
-  background: #f4f4f4;
-}
-.input-wrap .tiny-mobile-textarea + .tiny-mobile-textarea {
-  margin-top: 24px;
-}
-</style>

package/demos/mobile/app/input/autosize.vue

@@ -1,41 +0,0 @@
-<template>
-  <div class="input-wrap">
-    <tiny-input
-      v-model="input"
-      type="textarea"
-      autosize
-      disabled
-      textarea-title="textarea-title"
-      placeholder="请输入内容"
-    ></tiny-input>
-    <tiny-input
-      v-model="input"
-      type="textarea"
-      :autosize="{ minRows: 2, maxRows: 3 }"
-      placeholder="请输入内容"
-    ></tiny-input>
-  </div>
-</template>
-
-<script lang="jsx">
-import { Input } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyInput: Input
-  },
-  data() {
-    return {
-      input: ''
-    }
-  }
-}
-</script>
-
-<style>
-.input-wrap {
-  padding-top: 20px;
-  height: 100%;
-  background: #f4f4f4;
-}
-</style>

package/demos/mobile/app/input/blur-focus.vue

@@ -1,40 +0,0 @@
-<template>
-  <div class="input-wrap">
-    <tiny-button @click="focus">获取焦点</tiny-button>
-    <tiny-button @click="blur">失去焦点</tiny-button>
-    <br /><br />
-    <tiny-input ref="input" v-model="input"></tiny-input>
-  </div>
-</template>
-
-<script lang="jsx">
-import { Input, Button } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyInput: Input,
-    TinyButton: Button
-  },
-  data() {
-    return {
-      input: ''
-    }
-  },
-  methods: {
-    focus() {
-      this.$refs.input.focus()
-    },
-    blur() {
-      this.$refs.input.blur()
-    }
-  }
-}
-</script>
-
-<style>
-.input-wrap {
-  padding-top: 20px;
-  height: 100%;
-  background: #f4f4f4;
-}
-</style>

package/demos/mobile/app/input/cols-rows.vue

@@ -1,28 +0,0 @@
-<template>
-  <div class="input-wrap">
-    <tiny-input v-model="input" type="textarea" :cols="5" :rows="1"></tiny-input>
-  </div>
-</template>
-
-<script lang="jsx">
-import { Input } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyInput: Input
-  },
-  data() {
-    return {
-      input: '测试 cols 属性'
-    }
-  }
-}
-</script>
-
-<style>
-.input-wrap {
-  padding-top: 20px;
-  height: 100%;
-  background: #f4f4f4;
-}
-</style>

package/demos/mobile/app/input/form.vue

@@ -1,45 +0,0 @@
-<template>
-  <div class="input-wrap">
-    <tiny-input v-model="input" type="form" is-select :select-menu="selectMenu" placeholder="下拉功能"></tiny-input>
-  </div>
-</template>
-
-<script lang="jsx">
-import { Input } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyInput: Input
-  },
-  data() {
-    return {
-      selectMenu: [
-        {
-          label: '黄金糕'
-        },
-        {
-          label: '双皮奶'
-        },
-        {
-          label: '蚵仔煎'
-        },
-        {
-          label: '龙须面'
-        },
-        {
-          label: '北京烤鸭'
-        }
-      ],
-      input: ''
-    }
-  }
-}
-</script>
-
-<style>
-.input-wrap {
-  padding-top: 20px;
-  height: 100%;
-  background: #f4f4f4;
-}
-</style>

package/demos/mobile/app/input/input-event.vue

@@ -1,39 +0,0 @@
-<template>
-  <div class="input-wrap">
-    <tiny-input v-model="value" clearable @blur="blur" @focus="focus" @input="input"></tiny-input>
-  </div>
-</template>
-
-<script lang="jsx">
-import { Input } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyInput: Input
-  },
-  data() {
-    return {
-      value: '事件测试'
-    }
-  },
-  methods: {
-    blur() {
-      console.log('blur 事件')
-    },
-    focus() {
-      console.log('focus 事件')
-    },
-    input(value) {
-      console.log('input' + value)
-    }
-  }
-}
-</script>
-
-<style>
-.input-wrap {
-  padding-top: 20px;
-  height: 100%;
-  background: #f4f4f4;
-}
-</style>

package/demos/mobile/app/input/method-select.vue

@@ -1,36 +0,0 @@
-<template>
-  <div class="input-wrap">
-    <tiny-button @click="click">选中输入框内容</tiny-button>
-    <br /><br />
-    <tiny-input ref="input" v-model="input"></tiny-input>
-  </div>
-</template>
-
-<script lang="jsx">
-import { Input, Button } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyInput: Input,
-    TinyButton: Button
-  },
-  data() {
-    return {
-      input: '我是输入框'
-    }
-  },
-  methods: {
-    click() {
-      this.$refs.input.select()
-    }
-  }
-}
-</script>
-
-<style>
-.input-wrap {
-  padding-top: 20px;
-  height: 100%;
-  background: #f4f4f4;
-}
-</style>

package/demos/mobile/app/input/prefix-suffix.vue

@@ -1,39 +0,0 @@
-<template>
-  <div class="input-wrap">
-    <tiny-input placeholder="请输入内容" v-model="input">
-      <template #prefix>
-        <div style="color: red">Http</div>
-      </template>
-      <template #suffix>
-        <div style="color: red">com</div>
-      </template>
-    </tiny-input>
-  </div>
-</template>
-
-<script lang="jsx">
-import { Input } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyInput: Input
-  },
-  data() {
-    return {
-      input: ''
-    }
-  }
-}
-</script>
-
-<style>
-.input-wrap {
-  padding-top: 20px;
-  height: 100%;
-  background: #f4f4f4;
-}
-.tiny-mobile-input-prefix .tiny-mobile-input__inner {
-  padding-left: 45px;
-  padding-right: 28px;
-}
-</style>