@opentiny/vue-docs 3.19.3 → 3.19.5

package/demos/pc/app/user/nodata-text-composition-api.vue

@@ -1,5 +1,7 @@
 <template>
-  <tiny-user v-model="user" no-data-text="查无此人"></tiny-user>
+  <div class="demo-user-class">
+    <tiny-user v-model="user" no-data-text="查无此人"></tiny-user>
+  </div>
 </template>
 
 <script setup>
@@ -8,3 +10,9 @@ import { TinyUser } from '@opentiny/vue'
 
 const user = ref('702973890055088')
 </script>
+
+<style scoped>
+.demo-user-class {
+  width: 280px;
+}
+</style>

package/demos/pc/app/user/nodata-text.vue

@@ -1,5 +1,7 @@
 <template>
-  <tiny-user v-model="user" no-data-text="查无此人"></tiny-user>
+  <div class="demo-user-class">
+    <tiny-user v-model="user" no-data-text="查无此人"></tiny-user>
+  </div>
 </template>
 
 <script>
@@ -16,3 +18,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-user-class {
+  width: 280px;
+}
+</style>

package/demos/pc/app/user/tag-copy-all-composition-api.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-user-class">
     <tiny-user v-model="user" multiple value-field="userAccount" copyable></tiny-user>
   </div>
 </template>
@@ -10,3 +10,9 @@ import { TinyUser } from '@opentiny/vue'
 
 const user = ref('test1,test2,test3')
 </script>
+
+<style scoped>
+.demo-user-class {
+  width: 280px;
+}
+</style>

package/demos/pc/app/user/tag-copy-all.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-user-class">
     <tiny-user v-model="user" multiple value-field="userAccount" copyable></tiny-user>
   </div>
 </template>
@@ -18,3 +18,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-user-class {
+  width: 280px;
+}
+</style>

package/demos/pc/app/user/tag-copy-composition-api.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-user-class">
     <tiny-user v-model="user" multiple value-field="userAccount" tag-selectable></tiny-user>
   </div>
 </template>
@@ -10,3 +10,9 @@ import { TinyUser } from '@opentiny/vue'
 
 const user = ref('test1,test2,test3')
 </script>
+
+<style scoped>
+.demo-user-class {
+  width: 280px;
+}
+</style>

package/demos/pc/app/user/tag-copy.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-user-class">
     <tiny-user v-model="user" multiple value-field="userAccount" tag-selectable></tiny-user>
   </div>
 </template>
@@ -18,3 +18,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-user-class {
+  width: 280px;
+}
+</style>

package/demos/pc/app/user/text-field-composition-api.vue

@@ -1,5 +1,7 @@
 <template>
-  <tiny-user v-model="user" multiple text-field="userCN"></tiny-user>
+  <div class="demo-user-class">
+    <tiny-user v-model="user" multiple text-field="userCN"></tiny-user>
+  </div>
 </template>
 
 <script setup lang="jsx">
@@ -8,3 +10,9 @@ import { TinyUser } from '@opentiny/vue'
 
 const user = ref('441047913162396,702973890055088,421000103624183')
 </script>
+
+<style scoped>
+.demo-user-class {
+  width: 280px;
+}
+</style>

package/demos/pc/app/user/text-field.vue

@@ -1,5 +1,7 @@
 <template>
-  <tiny-user v-model="user" multiple text-field="userCN"></tiny-user>
+  <div class="demo-user-class">
+    <tiny-user v-model="user" multiple text-field="userCN"></tiny-user>
+  </div>
 </template>
 
 <script lang="jsx">
@@ -16,3 +18,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-user-class {
+  width: 280px;
+}
+</style>

package/demos/pc/app/user/user-options-composition-api.vue

@@ -1,12 +1,14 @@
 <template>
-  <tiny-user v-model="user">
-    <template #options="slotScope">
-      <div>
-        <span>{{ slotScope.slotScope.employeeNumber }}</span
-        >-<span>{{ slotScope.slotScope.email }}</span>
-      </div>
-    </template>
-  </tiny-user>
+  <div class="demo-user-class">
+    <tiny-user v-model="user">
+      <template #options="slotScope">
+        <div>
+          <span>{{ slotScope.slotScope.employeeNumber }}</span
+          >-<span>{{ slotScope.slotScope.email }}</span>
+        </div>
+      </template>
+    </tiny-user>
+  </div>
 </template>
 
 <script setup lang="jsx">
@@ -15,3 +17,9 @@ import { TinyUser } from '@opentiny/vue'
 
 const user = ref('702973890055088')
 </script>
+
+<style scoped>
+.demo-user-class {
+  width: 280px;
+}
+</style>

package/demos/pc/app/user/user-options.vue

@@ -1,12 +1,14 @@
 <template>
-  <tiny-user v-model="user">
-    <template #options="slotScope">
-      <div>
-        <span>{{ slotScope.slotScope.employeeNumber }}</span
-        >-<span>{{ slotScope.slotScope.email }}</span>
-      </div>
-    </template>
-  </tiny-user>
+  <div class="demo-user-class">
+    <tiny-user v-model="user">
+      <template #options="slotScope">
+        <div>
+          <span>{{ slotScope.slotScope.employeeNumber }}</span
+          >-<span>{{ slotScope.slotScope.email }}</span>
+        </div>
+      </template>
+    </tiny-user>
+  </div>
 </template>
 
 <script lang="jsx">
@@ -23,3 +25,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-user-class {
+  width: 280px;
+}
+</style>

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

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-user-class">
     <p>尺寸：medium</p>
     <tiny-user v-model="user" size="medium"></tiny-user>
     <p>尺寸：small</p>
@@ -17,6 +17,9 @@ const user = ref('421000103624183')
 </script>
 
 <style scoped>
+.demo-user-class {
+  width: 280px;
+}
 p {
   font-size: 14px;
   line-height: 1.5;

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

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-user-class">
     <p>尺寸：medium</p>
     <tiny-user v-model="user" size="medium"></tiny-user>
     <p>尺寸：small</p>
@@ -25,6 +25,9 @@ export default {
 </script>
 
 <style scoped>
+.demo-user-class {
+  width: 280px;
+}
 p {
   font-size: 14px;
   line-height: 1.5;

package/demos/pc/app/user/value-field-composition-api.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-user-class">
     <tiny-user v-model="user" multiple value-field="userAccount"></tiny-user>
     <p>value 值：{{ user }}</p>
   </div>
@@ -13,6 +13,9 @@ const user = ref('test1,test2,test3')
 </script>
 
 <style scoped>
+.demo-user-class {
+  width: 280px;
+}
 p {
   font-size: 14px;
   line-height: 1.5;

package/demos/pc/app/user/value-field.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-user-class">
     <tiny-user v-model="user" multiple value-field="userAccount"></tiny-user>
     <p>value 值：{{ user }}</p>
   </div>
@@ -21,6 +21,9 @@ export default {
 </script>
 
 <style scoped>
+.demo-user-class {
+  width: 280px;
+}
 p {
   font-size: 14px;
   line-height: 1.5;

package/demos/pc/app/user/value-split-composition-api.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-user-class">
     <tiny-user v-model="user" multiple value-split=";" text-split="," value-field="userAccount"></tiny-user>
     <p>value 值：{{ user }}</p>
   </div>
@@ -13,6 +13,9 @@ const user = ref('test1,test2,test3')
 </script>
 
 <style scoped>
+.demo-user-class {
+  width: 280px;
+}
 p {
   font-size: 14px;
   line-height: 1.5;

package/demos/pc/app/user/value-split.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-user-class">
     <tiny-user v-model="user" multiple value-split=";" text-split="," value-field="userAccount"></tiny-user>
     <p>value 值：{{ user }}</p>
   </div>
@@ -21,6 +21,9 @@ export default {
 </script>
 
 <style scoped>
+.demo-user-class {
+  width: 280px;
+}
 p {
   font-size: 14px;
   line-height: 1.5;

package/demos/pc/app/virtual-tree/basic-usage-composition-api.vue

@@ -6,7 +6,7 @@
       width="600"
       height="400"
       row-height="36"
-      scrollbar-size="6"
+      scrollbar-size="8"
       :tree-op="treeOp"
     ></tiny-virtual-tree>
   </div>

package/demos/pc/app/virtual-tree/basic-usage.vue

@@ -6,7 +6,7 @@
       width="600"
       height="400"
       row-height="36"
-      scrollbar-size="6"
+      scrollbar-size="8"
       :tree-op="treeOp"
     ></tiny-virtual-tree>
   </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-docs",
-  "version": "3.19.3",
+  "version": "3.19.5",
   "license": "MIT",
   "dependencies": {
     "@opentiny/vue-repl": "^1.1.2",
@@ -16,19 +16,19 @@
     "vue": "^3.4.31",
     "vue-i18n": "^9.1.10",
     "vue-router": "4.1.5",
-    "@opentiny/vue-common": "~3.19.0",
     "@opentiny/vue": "~3.19.0",
-    "@opentiny/vue-design-aurora": "~3.19.0",
+    "@opentiny/vue-common": "~3.19.0",
     "@opentiny/vue-design-saas": "~3.19.0",
-    "@opentiny/vue-icon": "~3.19.0",
-    "@opentiny/vue-icon-multicolor": "~3.19.0",
+    "@opentiny/vue-hooks": "~3.19.0",
     "@opentiny/vue-directive": "~3.19.0",
+    "@opentiny/vue-design-aurora": "~3.19.0",
+    "@opentiny/vue-icon": "~3.19.0",
     "@opentiny/vue-icon-saas": "~3.19.0",
+    "@opentiny/vue-icon-multicolor": "~3.19.0",
+    "@opentiny/vue-theme": "~3.19.4",
+    "@opentiny/vue-theme-mobile": "~3.19.0",
     "@opentiny/vue-theme-saas": "~3.19.0",
-    "@opentiny/vue-theme": "~3.19.3",
-    "@opentiny/vue-vite-import": "~1.2.0",
-    "@opentiny/vue-hooks": "~3.19.0",
-    "@opentiny/vue-theme-mobile": "~3.19.0"
+    "@opentiny/vue-vite-import": "~1.2.0"
   },
   "devDependencies": {
     "@playwright/test": "~1.42.0",

package/playground/App.vue

@@ -1,23 +1,18 @@
-<script setup>
+<script setup lang="jsx">
 import { onMounted, reactive, nextTick } from 'vue'
 import { Repl, useStore, File } from '@opentiny/vue-repl'
 import '@opentiny/vue-repl/dist/style.css'
 
 import Editor from '@vue/repl/codemirror-editor'
-import {
-  ButtonGroup as TinyButtonGroup,
-  Select as TinySelect,
-  Option as TinyOption,
-  Switch as TinySwitch,
-  Notify
-} from '@opentiny/vue'
+import { TinyButtonGroup, TinyButton, TinySelect, TinyOption, TinySwitch, Notify } from '@opentiny/vue'
 import { staticDemoPath, getWebdocPath } from '@/views/components/cmp-config'
 import { fetchDemosFile } from '@/tools/utils'
 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.16'
+const VERSION = 'tiny-vue-version-3.19'
+const NOTIFY_KEY = 'tiny-vue-playground-notify'
 const LAYOUT = 'playground-layout'
 const LAYOUT_REVERSE = 'playground-layout-reverse'
 
@@ -28,40 +23,57 @@ const isMobileFirst = tinyMode === 'mobile-first'
 const isSaas = tinyTheme === 'saas'
 const isPreview = searchObj.get('openMode') === 'preview' // 是否多端弹窗预览
 
-const versions = ['3.19', '3.18', '3.17', '3.16', '3.15', '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 versions = ['3.19', '3.18', '3.17']
+const getVersion = () => {
+  if (isPreview) {
+    return versions[0]
+  }
+  if (versions.includes(localStorage.getItem(VERSION))) {
+    localStorage.getItem(VERSION)
+  }
+  return versions[0]
+}
+const latestVersion = getVersion()
 const cdnHost = localStorage.getItem('setting-cdn')
 
 const versionDelimiter = cdnHost.includes('npmmirror') ? '/' : '@'
 const fileDelimiter = cdnHost.includes('npmmirror') ? 'files/' : ''
 
-const isOldVersion = (version) => {
-  const minorVersion = version?.split('.')?.[1]
-  return minorVersion && minorVersion < 16
-}
-
-// 3.16.0版本之前的runtime还没有抽离单独的包
-const getRuntime = (version) => {
-  if (isOldVersion(version)) {
-    return `${cdnHost}/@opentiny/vue${versionDelimiter}${version}/${fileDelimiter}runtime/`
+let notify
+const showNotify = () => {
+  if (localStorage.getItem(NOTIFY_KEY) !== 'true' && !notify) {
+    const muteNotify = () => {
+      notify.close()
+      localStorage.setItem(NOTIFY_KEY, true)
+    }
+    notify = Notify({
+      type: 'info',
+      title: '温馨提示：',
+      message: () => (
+        <div>
+          <div>演练场仅保留最新的三个版本可选。</div>
+          <div style="text-align: right;margin-top: 12px;">
+            <TinyButton onClick={muteNotify} type={'primary'}>
+              不再提示
+            </TinyButton>
+          </div>
+        </div>
+      ),
+      duration: -1,
+      position: 'top-right',
+      verticalOffset: 200
+    })
   }
-  return `${cdnHost}/@opentiny/vue-runtime${versionDelimiter}${version}/${fileDelimiter}dist3/`
 }
 
-// 3.16.0版本之前的runtime没有tiny-vue-pc.mjs文件
-const getPcRuntime = (version) => {
-  if (isOldVersion(version)) {
-    return `${getRuntime(version)}tiny-vue.mjs`
-  }
-  return `${getRuntime(version)}tiny-vue-pc.mjs`
-}
+const getRuntime = (version) => `${cdnHost}/@opentiny/vue-runtime${versionDelimiter}${version}/${fileDelimiter}dist3/`
 
 const createImportMap = (version) => {
   const imports = {
     'vue': `${cdnHost}/vue${versionDelimiter}3.4.27/${fileDelimiter}dist/vue.runtime.esm-browser.js`,
     'echarts': `${cdnHost}/echarts${versionDelimiter}5.4.1/${fileDelimiter}dist/echarts.esm.js`,
     '@vue/compiler-sfc': `${cdnHost}/@vue/compiler-sfc${versionDelimiter}3.4.27/${fileDelimiter}dist/compiler-sfc.esm-browser.js`,
-    '@opentiny/vue': getPcRuntime(version),
+    '@opentiny/vue': `${getRuntime(version)}tiny-vue-pc.mjs`,
     '@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`,
@@ -276,9 +288,9 @@ function share() {
 
 <template>
   <div class="header">
-    <div class="title"><img class="logo" :src="logoUrl" /> <span>OpenTiny Vue 演练场</span></div>
+    <div class="title"><img class="logo" :src="logoUrl" /> <span class="mobile-hide">OpenTiny Vue 演练场</span></div>
     <div>
-      <span class="ml20">
+      <span class="ml20 mobile-hide">
         布局方向:
         <tiny-button-group
           :data="state.layoutOptions"
@@ -286,13 +298,19 @@ function share() {
           @change="changeLayout"
         ></tiny-button-group>
       </span>
-      <span class="ml20">
+      <span class="ml20 mobile-hide">
         布局反转:
         <tiny-switch v-model="state.layoutReverse" mini @change="changeReserve"></tiny-switch>
       </span>
       <span class="ml20">
-        OpenTiny Vue 版本:
-        <tiny-select v-model="state.selectVersion" @change="selectVersion" style="width: 150px" :disabled="isPreview">
+        <span class="mobile-hide">OpenTiny Vue 版本: </span>
+        <tiny-select
+          v-model="state.selectVersion"
+          style="width: 150px"
+          :disabled="isPreview"
+          @change="selectVersion"
+          @click="showNotify"
+        >
           <tiny-option v-for="item in state.versions" :key="item.value" :label="item.value" :value="item.value">
           </tiny-option>
         </tiny-select>
@@ -318,6 +336,12 @@ function share() {
   box-sizing: border-box;
 }
 
+/** 小屏幕时隐藏 */
+@media screen and (max-width: 640px) {
+  .mobile-hide {
+    display: none;
+  }
+}
 #header {
   display: none;
 }