@opentiny/vue-docs 3.19.3 → 3.19.5

package/demos/pc/app/input/native-composition-api.vue

@@ -21,7 +21,6 @@
     <br />
     <div>
       <span>autocomplete="on"</span>
-      <br /><br />
       <form>
         <tiny-input v-model="inputAutocomplete" autocomplete="on" name="email" type="email"></tiny-input>
       </form>
@@ -40,11 +39,16 @@ const inputAutocomplete = ref('')
 </script>
 
 <style scoped>
-.demo-input > p > span {
+.demo-input > p > span,
+.demo-input > div > span {
   display: inline-block;
   width: 130px;
 }
 .demo-input .tiny-input {
   width: 250px;
 }
+.demo-input > div {
+  display: flex;
+  align-items: center;
+}
 </style>

package/demos/pc/app/input/native.vue

@@ -21,7 +21,6 @@
     <br />
     <div>
       <span>autocomplete="on"</span>
-      <br /><br />
       <form>
         <tiny-input v-model="inputAutocomplete" autocomplete="on" name="email" type="email"></tiny-input>
       </form>
@@ -48,11 +47,16 @@ export default {
 </script>
 
 <style scoped>
-.demo-input > p > span {
+.demo-input > p > span,
+.demo-input > div > span {
   display: inline-block;
   width: 130px;
 }
 .demo-input .tiny-input {
   width: 250px;
 }
+.demo-input > div {
+  display: flex;
+  align-items: center;
+}
 </style>

package/demos/pc/app/input/type-composition-api.vue

@@ -2,20 +2,7 @@
   <div class="demo-input">
     <tiny-input v-model="text" placeholder="text"></tiny-input>
     <tiny-input type="password" v-model="password" placeholder="password"></tiny-input>
-    <tiny-input type="textarea" v-model="textarea" placeholder="textarea"></tiny-input>
-    <tiny-input type="email" v-model="email" placeholder="email"></tiny-input>
     <tiny-input type="number" v-model="number" placeholder="number"></tiny-input>
-    <tiny-input type="tel" v-model="tel" placeholder="tel"></tiny-input>
-    <tiny-input type="url" v-model="url" placeholder="url"></tiny-input>
-    <tiny-input type="hidden"></tiny-input>
-    <tiny-input type="color" v-model="color"></tiny-input>
-    <tiny-input type="date" v-model="date"></tiny-input>
-    <tiny-input type="month" v-model="month"></tiny-input>
-    <tiny-input type="week" v-model="week"></tiny-input>
-    <tiny-input type="datetime-local" v-model="datetime"></tiny-input>
-    <tiny-input type="time" v-model="time"></tiny-input>
-    <tiny-input type="file" v-model="file"></tiny-input>
-    <tiny-input type="range" v-model="range"></tiny-input>
   </div>
 </template>
 
@@ -25,19 +12,7 @@ import { TinyInput } from '@opentiny/vue'
 
 const text = ref('')
 const password = ref('')
-const textarea = ref('')
-const email = ref('')
 const number = ref('')
-const tel = ref('')
-const url = ref('')
-const color = ref('#000000')
-const date = ref('')
-const month = ref('')
-const week = ref('')
-const datetime = ref('')
-const time = ref('')
-const file = ref('')
-const range = ref('')
 </script>
 
 <style scoped>
@@ -45,9 +20,4 @@ const range = ref('')
   width: 250px;
   margin: 5px;
 }
-
-.demo-input .tiny-textarea {
-  width: 250px;
-  margin: 5px;
-}
 </style>

package/demos/pc/app/input/type.spec.ts

@@ -4,21 +4,7 @@ test('[Input]type', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('input#type')
   const input = page.locator('.demo-input > .tiny-input >  .tiny-input-display-only > input')
-  const textArea = page.locator('.demo-input > .tiny-textarea > .tiny-textarea-display-only > textarea')
   await expect(input.nth(0)).toHaveAttribute('type', 'text')
   await expect(input.nth(1)).toHaveAttribute('type', 'password')
-  await expect(input.nth(2)).toHaveAttribute('type', 'email')
-  await expect(input.nth(3)).toHaveAttribute('type', 'number')
-  await expect(input.nth(4)).toHaveAttribute('type', 'tel')
-  await expect(input.nth(5)).toHaveAttribute('type', 'url')
-  await expect(input.nth(6)).toHaveAttribute('type', 'hidden')
-  await expect(input.nth(7)).toHaveAttribute('type', 'color')
-  await expect(input.nth(8)).toHaveAttribute('type', 'date')
-  await expect(input.nth(9)).toHaveAttribute('type', 'month')
-  await expect(input.nth(10)).toHaveAttribute('type', 'week')
-  await expect(input.nth(11)).toHaveAttribute('type', 'datetime-local')
-  await expect(input.nth(12)).toHaveAttribute('type', 'time')
-  await expect(input.nth(13)).toHaveAttribute('type', 'file')
-  await expect(input.nth(14)).toHaveAttribute('type', 'range')
-  await expect(textArea).toBeVisible()
+  await expect(input.nth(2)).toHaveAttribute('type', 'number')
 })

package/demos/pc/app/input/type.vue

@@ -2,20 +2,7 @@
   <div class="demo-input">
     <tiny-input v-model="text" placeholder="text"></tiny-input>
     <tiny-input type="password" v-model="password" placeholder="password"></tiny-input>
-    <tiny-input type="textarea" v-model="textarea" placeholder="textarea"></tiny-input>
-    <tiny-input type="email" v-model="email" placeholder="email"></tiny-input>
     <tiny-input type="number" v-model="number" placeholder="number"></tiny-input>
-    <tiny-input type="tel" v-model="tel" placeholder="tel"></tiny-input>
-    <tiny-input type="url" v-model="url" placeholder="url"></tiny-input>
-    <tiny-input type="hidden"></tiny-input>
-    <tiny-input type="color" v-model="color"></tiny-input>
-    <tiny-input type="date" v-model="date"></tiny-input>
-    <tiny-input type="month" v-model="month"></tiny-input>
-    <tiny-input type="week" v-model="week"></tiny-input>
-    <tiny-input type="datetime-local" v-model="datetime"></tiny-input>
-    <tiny-input type="time" v-model="time"></tiny-input>
-    <tiny-input type="file" v-model="file"></tiny-input>
-    <tiny-input type="range" v-model="range"></tiny-input>
   </div>
 </template>
 
@@ -30,19 +17,7 @@ export default {
     return {
       text: '',
       password: '',
-      textarea: '',
-      email: '',
-      number: '',
-      tel: '',
-      url: '',
-      color: '#000000',
-      date: '',
-      month: '',
-      week: '',
-      datetime: '',
-      time: '',
-      file: '',
-      range: ''
+      number: ''
     }
   }
 }
@@ -53,9 +28,4 @@ export default {
   width: 250px;
   margin: 5px;
 }
-
-.demo-input .tiny-textarea {
-  width: 250px;
-  margin: 5px;
-}
 </style>

package/demos/pc/app/input/webdoc/input.js

@@ -227,7 +227,8 @@ export default {
         'en-US': 'Memory History Input'
       },
       desc: {
-        'zh-CN': '<p>参考以下例子，输入完成后，输入会被记住。</p>',
+        'zh-CN':
+          '<p>通过组件实例方法 <code> addMemory </code> 添加历史输入数据，输入完成后，输入会被记住。通过 <code> memory-space </code> 属性配置最多可以被记录的条数。</p>',
         'en-US': '<p>Refer to the following example. After the input is complete, the input will be remembered</p>'
       },
       codeFiles: ['method-addMemory.vue']
@@ -253,9 +254,15 @@ export default {
         'en-US': 'Native Attribute'
       },
       desc: {
-        'zh-CN': '<p>可设置 <code>name</code>  <code>disabled</code> <code>readonly</code>等原生属性。</p>\n',
+        'zh-CN': `
+        <p>可设置 <code>name</code>  <code>disabled</code> <code>readonly</code>等原生属性。</p>
+         <div class="tip custom-block">
+            <p class="custom-block-title"> 温馨提示： </p>
+            <p>原生属性是透传给 <code> input </code>原生标签的，功能和使用原生标签等同。</p>
+          </div>
+        `,
         'en-US':
-          '<p>You can set native attributes such as <code>name</code> <code>disabled</code> <code>readonly</code> . </p>\n'
+          '<p>You can set native attributes such as <code>name</code> <code>disabled</code> <code>readonly</code> . </p>'
       },
       codeFiles: ['native.vue']
     },

package/demos/pc/app/locales/custom-service-composition-api.vue

@@ -11,15 +11,15 @@ import { TinyLocales } from '@opentiny/vue'
 
 function getLocale() {
   // resolve 出来的必须是国际化的 key
-  return Promise.resolve(['zhCN', 'enUS', 'zhTW'])
+  return Promise.resolve(['zh_CN', 'en_US', 'zh_TW'])
 }
 
 function getCurrentLocale() {
-  return Promise.resolve(['zhCN'])
+  return Promise.resolve(['zh_CN'])
 }
 
 function getChangeLocaleUrl(targetLocale) {
-  if (targetLocale === 'enUS') {
+  if (targetLocale === 'en_US') {
     return Promise.resolve(`${window.location.origin}/#/webenglish/en-US/component/locales/custom-service`)
   } else {
     return Promise.resolve(`${window.location.origin}/#/zh-CN/component/custom-service`)

package/demos/pc/app/locales/custom-service.spec.ts

@@ -8,7 +8,7 @@ test('locales-custom-service', async ({ page }) => {
   const reference = demo.locator('.reference-wrapper')
   const popper = page.locator('.tiny-locales__popper')
 
-  await expect(reference).toHaveText('zhCN')
+  await expect(reference).toHaveText('zh_CN')
   await expect(popper).toBeHidden()
   await reference.hover()
   await page.waitForTimeout(200)

package/demos/pc/app/locales/custom-service.vue

@@ -16,13 +16,13 @@ export default {
   methods: {
     getLocale() {
       // resolve 出来的必须是国际化的 key
-      return Promise.resolve(['zhCN', 'enUS', 'zhTW'])
+      return Promise.resolve(['zh_CN', 'en_US', 'zh_TW'])
     },
     getCurrentLocale() {
-      return Promise.resolve(['zhCN'])
+      return Promise.resolve(['zh_CN'])
     },
     getChangeLocaleUrl(targetLocale) {
-      if (targetLocale === 'enUS') {
+      if (targetLocale === 'en_US') {
         return Promise.resolve(`${window.location.origin}/#/webenglish/en-US/component/locales/custom-service`)
       } else {
         return Promise.resolve(`${window.location.origin}/#/zh-CN/component/custom-service`)

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

@@ -1,13 +1,13 @@
 <template>
   <div>
-    <p>默认</p>
+    <p>medium</p>
     <br />
-    <tiny-select v-model="value1" multiple :options="options"></tiny-select>
+    <tiny-select v-model="value2" size="medium" multiple :options="options"></tiny-select>
     <br />
     <br />
-    <p>medium</p>
+    <p>默认</p>
     <br />
-    <tiny-select v-model="value2" size="medium" multiple :options="options"></tiny-select>
+    <tiny-select v-model="value1" multiple :options="options"></tiny-select>
     <br />
     <br />
     <p>small</p>

package/demos/pc/app/select/size.spec.ts

@@ -5,7 +5,7 @@ test('默认尺寸', async ({ page }) => {
   await page.goto('select#size')
 
   const wrap = page.locator('#size')
-  const select = wrap.locator('.tiny-select').nth(0)
+  const select = wrap.locator('.tiny-select').nth(1)
   const input = select.locator('.tiny-input')
   const tag = select.locator('.tiny-tag')
 
@@ -18,12 +18,12 @@ test('medium 尺寸', async ({ page }) => {
   await page.goto('select#size')
 
   const wrap = page.locator('#size')
-  const select = wrap.locator('.tiny-select').nth(1)
+  const select = wrap.locator('.tiny-select').nth(0)
   const input = select.locator('.tiny-input')
   const tag = select.locator('.tiny-tag')
 
   await expect(input).toHaveClass(/tiny-input-medium/)
-  // TODO: 此处继承input 尺寸的话，应该是32
+
   await expect(input.locator('.tiny-input__inner')).toHaveCSS('height', '40px')
   await expect(tag.nth(0)).toHaveClass(/tiny-tag--medium tiny-tag--light/)
 })

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

@@ -1,13 +1,13 @@
 <template>
   <div>
-    <p>默认</p>
+    <p>medium</p>
     <br />
-    <tiny-select v-model="value1" multiple :options="options"></tiny-select>
+    <tiny-select v-model="value2" size="medium" multiple :options="options"></tiny-select>
     <br />
     <br />
-    <p>medium</p>
+    <p>默认</p>
     <br />
-    <tiny-select v-model="value2" size="medium" multiple :options="options"></tiny-select>
+    <tiny-select v-model="value1" multiple :options="options"></tiny-select>
     <br />
     <br />
     <p>small</p>

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

@@ -76,7 +76,4 @@ function nodeClick(data, node, vm) {
   margin-top: 16px;
   margin-bottom: 16px;
 }
-.option-row > span {
-  font-size: 18px;
-}
 </style>

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

@@ -88,7 +88,4 @@ export default {
   margin-top: 16px;
   margin-bottom: 16px;
 }
-.option-row > span {
-  font-size: 18px;
-}
 </style>

package/demos/pc/app/tree/edit-composition-api.vue

@@ -8,14 +8,7 @@
     <tiny-button @click="editNode">编辑节点</tiny-button>
     <tiny-button @click="saveNode">5s后保存节点</tiny-button> <br />
     <br />
-    <tiny-tree
-      ref="treeRef"
-      show-checkbox
-      node-key="id"
-      :data="data"
-      current-node-key="1"
-      default-expand-all
-    ></tiny-tree>
+    <tiny-tree ref="treeRef" node-key="id" :data="data" current-node-key="1" default-expand-all></tiny-tree>
   </div>
 </template>
 

package/demos/pc/app/tree/edit.vue

@@ -8,14 +8,7 @@
     <tiny-button @click="editNode">编辑节点</tiny-button>
     <tiny-button @click="saveNode">5s后保存节点</tiny-button> <br />
     <br />
-    <tiny-tree
-      ref="treeRef"
-      show-checkbox
-      node-key="id"
-      :data="data"
-      current-node-key="1"
-      default-expand-all
-    ></tiny-tree>
+    <tiny-tree ref="treeRef" node-key="id" :data="data" current-node-key="1" default-expand-all></tiny-tree>
   </div>
 </template>
 

package/demos/pc/app/tree/other-composition-api.vue

@@ -5,7 +5,7 @@
     </tiny-tree>
     <br />
     <div class="tips">提示：非手风琴模式，自定义自动勾选的内容</div>
-    <tiny-tree :data="data" accordion show-checkbox check-strictly show-check-easily :icon-trigger-click-node="false">
+    <tiny-tree :data="data" show-checkbox check-strictly show-check-easily :icon-trigger-click-node="false">
       <template #switchText>
         <span>自定义开关的内容</span>
       </template>

package/demos/pc/app/tree/other.vue

@@ -5,7 +5,7 @@
     </tiny-tree>
     <br />
     <div class="tips">提示：非手风琴模式，自定义自动勾选的内容</div>
-    <tiny-tree :data="data" accordion show-checkbox check-strictly show-check-easily :icon-trigger-click-node="false">
+    <tiny-tree :data="data" show-checkbox check-strictly show-check-easily :icon-trigger-click-node="false">
       <template #switchText>
         <span>自定义开关的内容</span>
       </template>

package/demos/pc/app/tree/slot-composition-api.vue

@@ -13,7 +13,7 @@
         </template>
         <!-- 默认插槽 -->
         <template #default="node">
-          <div style="color: red">{{ node.data.label }}</div>
+          <div style="margin: 0 8px">{{ node.data.label }}</div>
         </template>
         <!-- 后缀插槽 -->
         <template #suffix="{ node }">
@@ -22,7 +22,7 @@
         <!-- 操作插槽 -->
         <template #operation="{ node }">
           <div style="width: 80px; text-align: right">
-            <tiny-link :underline="true" title="一些功能操作" type="primary"> 新增 </tiny-link> &nbsp;
+            <tiny-link :underline="true" title="一些功能操作"> 新增 </tiny-link> &nbsp;
             <tiny-link :underline="true" title="一些功能操作" type="danger"> 删除 </tiny-link>
           </div>
         </template>
@@ -78,7 +78,7 @@ function clearData() {
 function renderContent(h, { node, data }) {
   return (
     <span>
-      {node.label} <TinyIconPlusSquare fill="red" />
+      {node.label} <TinyIconPlusSquare fill="#666" />
     </span>
   )
 }

package/demos/pc/app/tree/slot.vue

@@ -13,7 +13,7 @@
         </template>
         <!-- 默认插槽 -->
         <template #default="node">
-          <div style="color: red">{{ node.data.label }}</div>
+          <div style="margin: 0 8px">{{ node.data.label }}</div>
         </template>
         <!-- 后缀插槽 -->
         <template #suffix="{ node }">
@@ -22,7 +22,7 @@
         <!-- 操作插槽 -->
         <template #operation="{ node }">
           <div style="width: 80px; text-align: right">
-            <tiny-link :underline="true" title="一些功能操作" type="primary"> 新增 </tiny-link> &nbsp;
+            <tiny-link :underline="true" title="一些功能操作"> 新增 </tiny-link> &nbsp;
             <tiny-link :underline="true" title="一些功能操作" type="danger"> 删除 </tiny-link>
           </div>
         </template>
@@ -87,7 +87,7 @@ export default {
     renderContent(h, { node, data }) {
       return (
         <span>
-          {node.label} <TinyIconPlusSquare fill="red" />
+          {node.label} <TinyIconPlusSquare fill="#666" />
         </span>
       )
     }

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

@@ -1,5 +1,7 @@
 <template>
-  <tiny-user v-model="user" auto-close allow-copy></tiny-user>
+  <div class="demo-user-class">
+    <tiny-user v-model="user" auto-close allow-copy></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/allow-copy.vue

@@ -1,5 +1,7 @@
 <template>
-  <tiny-user v-model="user" auto-close allow-copy></tiny-user>
+  <div class="demo-user-class">
+    <tiny-user v-model="user" auto-close allow-copy></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/basic-usage-composition-api.vue

@@ -1,5 +1,7 @@
 <template>
-  <tiny-user v-model="user"></tiny-user>
+  <div class="demo-user-class">
+    <tiny-user v-model="user"></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/basic-usage.vue

@@ -1,5 +1,7 @@
 <template>
-  <tiny-user v-model="user"></tiny-user>
+  <div class="demo-user-class">
+    <tiny-user v-model="user"></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/batch-composition-api.vue

@@ -1,22 +1,24 @@
 <template>
-  <tiny-user v-model="user1" :batch="true" :cache="false"></tiny-user>
-  <br />
-  <tiny-user v-model="user2" :batch="true" :cache="false"></tiny-user>
-  <br />
-  <tiny-user v-model="user3" :batch="true" :cache="false"></tiny-user>
-  <br />
-  <tiny-user v-model="user4" :batch="true" :cache="false"></tiny-user>
-  <br />
-  <tiny-user v-model="user5" :batch="true" :cache="false"></tiny-user>
-  <br />
-  <tiny-user v-model="user6" :batch="true" :cache="false"></tiny-user>
-  <br />
-  <tiny-user v-model="user7" :batch="true" :cache="false"></tiny-user>
-  <br />
-  <tiny-user v-model="user8" :batch="true" :cache="false"></tiny-user>
-  <br />
-  <tiny-user v-model="user9" :batch="true" :cache="false"></tiny-user>
-  <br />
+  <div class="demo-user-class">
+    <tiny-user v-model="user1" :batch="true" :cache="false"></tiny-user>
+    <br />
+    <tiny-user v-model="user2" :batch="true" :cache="false"></tiny-user>
+    <br />
+    <tiny-user v-model="user3" :batch="true" :cache="false"></tiny-user>
+    <br />
+    <tiny-user v-model="user4" :batch="true" :cache="false"></tiny-user>
+    <br />
+    <tiny-user v-model="user5" :batch="true" :cache="false"></tiny-user>
+    <br />
+    <tiny-user v-model="user6" :batch="true" :cache="false"></tiny-user>
+    <br />
+    <tiny-user v-model="user7" :batch="true" :cache="false"></tiny-user>
+    <br />
+    <tiny-user v-model="user8" :batch="true" :cache="false"></tiny-user>
+    <br />
+    <tiny-user v-model="user9" :batch="true" :cache="false"></tiny-user>
+    <br />
+  </div>
 </template>
 
 <script setup>
@@ -33,3 +35,9 @@ const user7 = ref('421000103624007')
 const user8 = ref('421000103624008')
 const user9 = ref('421000103624009')
 </script>
+
+<style scoped>
+.demo-user-class {
+  width: 280px;
+}
+</style>

package/demos/pc/app/user/batch.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-user-class">
     <tiny-user v-model="user1" :batch="true" :cache="false"></tiny-user>
     <br />
     <tiny-user v-model="user2" :batch="true" :cache="false"></tiny-user>
@@ -42,3 +42,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-user-class {
+  width: 280px;
+}
+</style>

package/demos/pc/app/user/cache-users-composition-api.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-user-class">
     <p>无缓存</p>
     <tiny-user v-model="user1" multiple :cache="false" value-field="userAccount"></tiny-user>
     <p>有缓存</p>
@@ -22,6 +22,9 @@ const user2 = ref('test1,test10')
 </script>
 
 <style scoped>
+.demo-user-class {
+  width: 280px;
+}
 p {
   font-size: 14px;
   line-height: 1.5;

package/demos/pc/app/user/cache-users.vue

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