@opentiny/vue-docs 3.16.2 → 3.17.1

package/demos/pc/app/input/display-only-popup-more-composition-api.vue

@@ -0,0 +1,18 @@
+<template>
+  <div class="demo-input">
+    <tiny-input v-model="input" counter></tiny-input>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { Input as TinyInput } from '@opentiny/vue'
+
+const input = ref('')
+</script>
+
+<style scoped>
+.demo-input .tiny-input {
+  width: 250px;
+}
+</style>

package/demos/pc/app/input/display-only-popup-more.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="demo-input">
+    <tiny-input type="textarea" v-model="input" display-only popup-more></tiny-input>
+  </div>
+</template>
+
+<script>
+import { Input } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyInput: Input
+  },
+  data() {
+    return {
+      input:
+        '表单文本域开启只读模式，文本内容超过5行自动隐藏。表单文本域开启只读模式，文本内容超过5行自动隐藏。表单文本域开启只读模式，文本内容超过5行自动隐藏。表单文本域开启只读模式，文本内容超过5行自动隐藏。表单文本域开启只读模式，文本内容超过5行自动隐藏'
+    }
+  }
+}
+</script>
+
+<style scoped>
+.demo-input .tiny-textarea {
+  width: 260px;
+}
+</style>

package/demos/pc/app/input/display-only.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="display-only">
+    <p class="demp-input">输入框</p>
     <p>
       <label>display-only & display-only-content：</label>
       <tiny-input v-model="input" display-only display-only-content="display-only-content 的内容"></tiny-input>
@@ -8,6 +9,17 @@
       <label>display-only：</label>
       <tiny-input v-model="input1" display-only></tiny-input>
     </p>
+    <br />
+
+    <p class="demp-input">文本域</p>
+    <p class="demp-input">
+      <label>display-only：</label>
+      <tiny-input class="demp-input-dis" v-model="input1" type="textarea" display-only></tiny-input>
+    </p>
+    <p>
+      <label>display-only&autosize：</label>
+      <tiny-input class="demp-input-dis" v-model="input1" type="textarea" display-only autosize></tiny-input>
+    </p>
   </div>
 </template>
 
@@ -27,9 +39,15 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang="less" scoped>
 .display-only .tiny-input {
   display: inline-block;
   width: auto;
 }
+.demp-input {
+  margin-bottom: 8px;
+}
+.demp-input-dis {
+  margin-top: 8px;
+}
 </style>

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

@@ -1,25 +1,31 @@
 <template>
   <div class="demo-input">
     <p><span>disabled</span><tiny-input v-model="input" disabled></tiny-input></p>
+    <br />
     <p><span>readonly</span><tiny-input v-model="input" readonly></tiny-input></p>
+    <br />
     <p>
       <span>step=2</span>
       <tiny-input type="number" v-model="inputStep" :step="2" placeholder="step 为 2"></tiny-input>
     </p>
+    <br />
     <p>
       <span>min=2;max=11</span>
       <tiny-input type="number" v-model="inputMaxMin" :min="2" :max="11"></tiny-input>
     </p>
+    <br />
     <p>
       <span>maxlength=5</span>
       <tiny-input v-model="input" :maxlength="5"></tiny-input>
     </p>
-    <p>
+    <br />
+    <div>
       <span>autocomplete="on"</span>
+      <br /><br />
       <form>
         <tiny-input v-model="inputAutocomplete" autocomplete="on" name="email" type="email"></tiny-input>
       </form>
-    </p>
+    </div>
   </div>
 </template>
 

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

@@ -1,25 +1,31 @@
 <template>
   <div class="demo-input">
     <p><span>disabled</span><tiny-input v-model="input" disabled></tiny-input></p>
+    <br />
     <p><span>readonly</span><tiny-input v-model="input" readonly></tiny-input></p>
+    <br />
     <p>
       <span>step=2</span>
       <tiny-input type="number" v-model="inputStep" :step="2" placeholder="step 为 2"></tiny-input>
     </p>
+    <br />
     <p>
       <span>min=2;max=11</span>
       <tiny-input type="number" v-model="inputMaxMin" :min="2" :max="11"></tiny-input>
     </p>
+    <br />
     <p>
       <span>maxlength=5</span>
       <tiny-input v-model="input" :maxlength="5"></tiny-input>
     </p>
-    <p>
+    <br />
+    <div>
       <span>autocomplete="on"</span>
+      <br /><br />
       <form>
         <tiny-input v-model="inputAutocomplete" autocomplete="on" name="email" type="email"></tiny-input>
       </form>
-    </p>
+    </div>
   </div>
 </template>
 

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

@@ -44,7 +44,7 @@ const hoverText = ref('')
 
 <style scoped>
 .demo-input .tiny-textarea {
-  width: auto;
+  width: 400px;
   margin: 5px;
 }
 

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

@@ -10,26 +10,40 @@ test('可缩放文本域', async ({ page }) => {
   await expect(textarea.nth(3)).toHaveCSS('resize', 'horizontal')
   await expect(textarea.nth(4)).toHaveCSS('resize', 'vertical')
 
-
-
-  const fillText = 'test1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111'
+  const fillText =
+    'test1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111'
   const textarea2 = page.locator('.demo-input .tiny-textarea .tiny-textarea-autosize-display-only > textarea')
 
   // autosize = { minRows: 2, maxRows: 3 } 检查高度
-  let defaultHeight = await textarea2.nth(0).boundingBox().then(box => box?.height)
+  let defaultHeight = await textarea2
+    .nth(0)
+    .boundingBox()
+    .then((box) => box?.height)
   await textarea2.nth(0).fill(fillText)
-  let fill1Height = await textarea2.nth(0).boundingBox().then(box => box?.height)
-  await textarea.nth(0).fill(fillText+ fillText)
-  let fill2Height = await textarea2.nth(0).boundingBox().then(box => box?.height)
+  let fill1Height = await textarea2
+    .nth(0)
+    .boundingBox()
+    .then((box) => box?.height)
+  await textarea.nth(0).fill(fillText + fillText)
+  let fill2Height = await textarea2
+    .nth(0)
+    .boundingBox()
+    .then((box) => box?.height)
+
   await expect(fill1Height).not.toEqual(defaultHeight)
   await expect(fill1Height).toEqual(fill2Height)
 
   // autosize 检查高度
   await textarea2.nth(1).fill('')
-  defaultHeight = await textarea2.nth(0).boundingBox().then(box => box?.height)
-  await textarea2.nth(1).fill(fillText+ fillText)
-  fill1Height = await textarea2.nth(0).boundingBox().then(box => box?.height)
+  defaultHeight = await textarea2
+    .nth(0)
+    .boundingBox()
+    .then((box) => box?.height)
+  await textarea2.nth(1).fill(fillText + fillText)
+  fill1Height = await textarea2
+    .nth(0)
+    .boundingBox()
+    .then((box) => box?.height)
   await expect(fill1Height).not.toBeNull()
   await expect(defaultHeight).toBeLessThan(fill1Height || 0)
-
 })

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

@@ -1,5 +1,6 @@
 <template>
   <div class="demo-input">
+    <p>resize</p>
     <tiny-input type="textarea" v-model="input" placeholder="default"></tiny-input>
     <tiny-input type="textarea" v-model="input" resize="none" placeholder="resize = none"></tiny-input>
     <tiny-input type="textarea" v-model="input" resize="both" placeholder="resize = both"></tiny-input>
@@ -30,6 +31,14 @@
       autosize
       hover-expand
     ></tiny-input>
+    <tiny-input
+      type="textarea"
+      v-model="displayOnlyText"
+      placeholder="autosize  hover-expand display-only"
+      autosize
+      hover-expand
+      display-only
+    ></tiny-input>
   </div>
 </template>
 
@@ -44,19 +53,21 @@ export default {
     return {
       input: '',
       textarea: '',
-      hoverText: ''
+      hoverText: '',
+      displayOnlyText: 'value 的内容'
     }
   }
 }
 </script>
 
-<style scoped>
-.demo-input .tiny-textarea {
-  width: auto;
-  margin: 5px;
-}
-
-.demo-input .expand {
-  width: 200px;
+<style lang="less" scoped>
+.demo-input {
+  .tiny-textarea {
+    width: 400px;
+    margin: 5px;
+  }
+  .expand {
+    width: 200px;
+  }
 }
 </style>

package/demos/pc/app/input/show-word-limit-composition-api.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="demo-input">
     <tiny-input v-model="text" :maxlength="10" show-word-limit></tiny-input>
+    <br />
     <tiny-input type="textarea" v-model="textarea" :maxlength="20" show-word-limit></tiny-input>
   </div>
 </template>

package/demos/pc/app/input/show-word-limit.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="demo-input">
     <tiny-input v-model="text" :maxlength="10" show-word-limit></tiny-input>
+    <br />
     <tiny-input type="textarea" v-model="textarea" :maxlength="20" show-word-limit></tiny-input>
   </div>
 </template>

package/demos/pc/app/input/validate-event.spec.ts

@@ -5,10 +5,11 @@ test('[Input]validate-event', async ({ page }) => {
   await page.goto('input#validate-event')
   await page.locator('.demo-form .tiny-input').getByRole('textbox').click()
   await page
-    .locator('div')
+    .locator('label')
     .filter({ hasText: /^活动名称$/ })
     .first()
     .click()
+
   const tip = page.getByRole('tooltip', { name: '请输入活动名称' })
   await expect(tip).toBeVisible()
 })

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

@@ -130,9 +130,13 @@ export default {
       },
       desc: {
         'zh-CN':
-          '\n          <p>可通过 <code>resize</code> 属性设置文本域的缩放。可选值：<code>none / both / horizontal / vertical</code>。注意：只在 <code>type="textarea"</code> 时有效。</p>\n          <p>可通过 <code>autosize</code> 属性设置文本域自适应内容高度。可传入对象，如<code>{ minRows: 2, maxRows: 6 }</code>。注意：只对 <code>type="textarea"</code> 有效。</p>\n        ',
+          '<p>可通过 <code>resize</code> 属性设置文本域的缩放。可选值：<code>none / both / horizontal / vertical</code>。注意：只在 <code>type="textarea"</code> 时有效。</p>\n ' +
+          '<p>可通过 <code>autosize</code> 属性设置文本域自适应内容高度。可传入对象，如<code>{ minRows: 2, maxRows: 6 }</code>。注意：只对 <code>type="textarea"</code> 有效。</p>\n' +
+          '<p>可通过 <code>hover-expand</code> 属性设置文本域鼠标悬浮展开/收起，只对 <code>type=textarea</code> 有效，最好搭配 <code>autosize</code> 一起使用<p>',
         'en-US':
-          '\n          <p>You can use the <code>resize</code> property to set the zoom of the text field. The value can be <code>none / both / horizontal / vertical</code> . Note: This parameter is valid only when <code>type="textarea"</code> is used. </p>\n          <p>You can use the <code>autosize</code> attribute to set the text field to adapt to the content height. You can transfer an object, for example, <code>{minRows: 2, maxRows: 6}</code> . Note: This parameter is valid only for <code>type="textarea"</code> . </p>\n        '
+          '<p>You can use the <code>resize</code> property to set the scaling of the text field. The value can be <code>none / both / horizontal / vertical</code>. Note: This parameter is valid only when <code>type="textarea"</code>.</p>' +
+          '<p>The <code>autosize</code> property allows you to set the text field to adapt to the content height. You can transfer an object, for example, <code>{minRows: 2, maxRows: 6}</code>.</p>' +
+          '<p>You can use the <code>hover-expand</code> attribute to set the text field to be expanded or collapsed by hovering the mouse. This parameter is valid only for <code>type=textarea</code>. It is recommended that you use it together with <code>autosize</code></p>'
       },
       codeFiles: ['resize.vue']
     },
@@ -229,6 +233,20 @@ export default {
       },
       codeFiles: ['native.vue']
     },
+    {
+      demoId: 'display-only-popup-more',
+      name: {
+        'zh-CN': '文本域只读超出显示更多按钮',
+        'en-US': 'Text field read-only beyond Show more button'
+      },
+      desc: {
+        'zh-CN':
+          '在只读的基础上增加<code>popup-more</code>属性，可使文本域超出显示更多按钮，点击更多按钮可以查看详细信息。',
+        'en-US':
+          'The <code>popup-more</code> attribute is added to enable the text field to exceed the display of more buttons. You can click more buttons to view details.'
+      },
+      codeFiles: ['display-only-popup-more.vue']
+    },
     {
       demoId: 'event',
       name: {
@@ -236,10 +254,21 @@ export default {
         'en-US': 'Event'
       },
       desc: {
-        'zh-CN':
-          '\n          <p>输入框的事件，包括\n            <code>input</code>(输入值时触发), \n            <code>blur</code>(失去焦点时触发), \n            <code>focus</code>(获取焦点时触发), \n            <code>change</code>(值改变时触发), \n            <code>clear</code>(清除按钮时触发)。\n          </p>\n        ',
-        'en-US':
-          '\n          <p>Event of the text box, including:\n            <code>input</code> (triggered when a value is entered)\n            <code>blur</code> (triggered when the focus is lost)\n            <code>focus</code> (triggered when the focus is obtained)\n            <code>change</code> (triggered when the value changes)\n            <code>clear</code> (triggered when the button is cleared)\n          </p>\n        '
+        'zh-CN': `
+          输入框的事件，包括:<br>
+            <code>input</code>(输入值时触发), <br>
+            <code>blur</code>(失去焦点时触发), <br>
+            <code>focus</code>(获取焦点时触发), <br>
+            <code>change</code>(值改变时触发), <br>
+            <code>clear</code>(清除按钮时触发)。`,
+        'en-US': `
+          Event of the text box, including: <br>
+            <code>input</code> (triggered when a value is entered), <br>
+            <code>blur</code> (triggered when the focus is lost), <br>
+            <code>focus</code> (triggered when the focus is obtained), <br>
+            <code>change</code> (triggered when the value changes), <br>
+            <code>clear</code> (triggered when the button is cleared)
+            `
       },
       codeFiles: ['event.vue']
     }

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

@@ -1,7 +1,7 @@
 <template>
   <div class="content">
     <div v-for="cols in [12, 24]" :key="cols">
-      <div>每行 {{ cols }} 栅格布局示例：</div>
+      <div class="demo-layout">每行 {{ cols }} 栅格布局示例：</div>
       <tiny-layout :cols="cols">
         <tiny-row>
           <tiny-col :span="12">
@@ -65,4 +65,7 @@ import { Layout as TinyLayout, Row as TinyRow, Col as TinyCol } from '@opentiny/
 .content .tiny-col:nth-child(even) .col {
   background: #73d0fc;
 }
+.demo-layout {
+  font-size: 14px;
+}
 </style>

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

@@ -1,7 +1,7 @@
 <template>
   <div class="content">
     <div v-for="cols in [12, 24]" :key="cols">
-      <div>每行 {{ cols }} 栅格布局示例：</div>
+      <div class="demo-layout">每行 {{ cols }} 栅格布局示例：</div>
       <tiny-layout :cols="cols">
         <tiny-row>
           <tiny-col :span="12">
@@ -73,4 +73,7 @@ export default {
 .content .tiny-col:nth-child(even) .col {
   background: #73d0fc;
 }
+.demo-layout {
+  font-size: 14px;
+}
 </style>

package/demos/pc/app/layout/responsive-layout.spec.ts

@@ -9,6 +9,8 @@ test('响应式布局', async ({ page }) => {
   const firstDiv = layout.locator('.tiny-row div').first()
 
   // 默认视口 1280
+  await page.setViewportSize({ width: 1280, height: 720 })
+  await page.waitForTimeout(300)
   let layoutBox = await layout.boundingBox()
   let firstBox = await firstDiv.boundingBox()
   expect(firstBox?.width).toBeCloseTo(layoutBox.width / 3, 0)

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

@@ -1,7 +1,7 @@
 <template>
   <div class="tiny-deom-size-loading">
     <div id="tiny-size-loading1"></div>
-    <div id="tiny-size-loading2"></div>
+    <div id="tiny-size-loading2" class="demo-loading"></div>
     <div id="tiny-size-loading3"></div>
   </div>
 </template>
@@ -27,8 +27,8 @@ onMounted(() => {
   })
 })
 </script>
-<style>
 
+<style>
 .tiny-deom-size-loading {
   display: flex;
 }
@@ -37,4 +37,7 @@ onMounted(() => {
   width: 100px;
   height: 100px;
 }
-</style>
+.demo-loading {
+  margin: 0 8px;
+}
+</style>

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

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <p class="status">是否登录：{{ isLogin }}</p>
+    <p class="demo-logout">是否登录：{{ isLogin }}</p>
     <tiny-logout v-bind="service" :is-local="false" :is-mock="false" :before-logout="beforeLogout"></tiny-logout>
   </div>
 </template>
@@ -50,3 +50,10 @@ function showLogin() {
   })
 }
 </script>
+
+<style scoped>
+.demo-logout {
+  line-height: 1.5px;
+  padding-bottom: 16px;
+}
+</style>

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

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <p class="status">是否登录：{{ isLogin }}</p>
+    <p class="demo-logout">是否登录：{{ isLogin }}</p>
     <tiny-logout v-bind="service" :is-local="false" :is-mock="false" :before-logout="beforeLogout"></tiny-logout>
   </div>
 </template>
@@ -54,3 +54,10 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-logout {
+  line-height: 1.5px;
+  padding-bottom: 16px;
+}
+</style>

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

@@ -1,5 +1,7 @@
 <template>
-  <tiny-milestone :data="milestoneData" :milestones-status="statusMap"></tiny-milestone>
+  <div class="demo-milestone">
+    <tiny-milestone :data="milestoneData" :milestones-status="statusMap"></tiny-milestone>
+  </div>
 </template>
 
 <script setup lang="jsx">
@@ -75,3 +77,9 @@ const milestoneData = ref([
   }
 ])
 </script>
+
+<style scoped>
+.demo-milestone ::v-deep .tiny-milestone__description-status {
+  margin-top: 4px;
+}
+</style>

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

@@ -1,5 +1,7 @@
 <template>
-  <tiny-milestone :data="milestoneData" :milestones-status="statusMap"></tiny-milestone>
+  <div class="demo-milestone">
+    <tiny-milestone :data="milestoneData" :milestones-status="statusMap"></tiny-milestone>
+  </div>
 </template>
 
 <script lang="jsx">
@@ -83,3 +85,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-milestone ::v-deep .tiny-milestone__description-status {
+  margin-top: 4px;
+}
+</style>

package/demos/pc/app/milestone/custom-bottom-top-composition-api.vue

@@ -1,12 +1,14 @@
 <template>
-  <tiny-milestone :data="milestoneData" :milestones-status="statusMap">
-    <template #top="data">
-      <span class="f18 ml50">{{ data.slotScope.status }}</span>
-    </template>
-    <template #bottom="data">
-      <span class="f12">{{ data.slotScope.name }} {{ data.slotScope.time }}</span>
-    </template>
-  </tiny-milestone>
+  <div class="demo-milestone">
+    <tiny-milestone :data="milestoneData" :milestones-status="statusMap">
+      <template #top="data">
+        <span class="f18 ml50">{{ data.slotScope.status }}</span>
+      </template>
+      <template #bottom="data">
+        <span class="f12">{{ data.slotScope.name }} {{ data.slotScope.time }}</span>
+      </template>
+    </tiny-milestone>
+  </div>
 </template>
 
 <script setup lang="jsx">
@@ -48,3 +50,9 @@ const milestoneData = ref([
   }
 ])
 </script>
+
+<style scoped>
+.demo-milestone ::v-deep .tiny-milestone__description-status {
+  margin-top: 4px;
+}
+</style>

package/demos/pc/app/milestone/custom-bottom-top.vue

@@ -1,12 +1,14 @@
 <template>
-  <tiny-milestone :data="milestoneData" :milestones-status="statusMap">
-    <template #top="data">
-      <span class="f18 ml50">{{ data.slotScope.status }}</span>
-    </template>
-    <template #bottom="data">
-      <span class="f12">{{ data.slotScope.name }} {{ data.slotScope.time }}</span>
-    </template>
-  </tiny-milestone>
+  <div class="demo-milestone">
+    <tiny-milestone :data="milestoneData" :milestones-status="statusMap">
+      <template #top="data">
+        <span class="f18 ml50">{{ data.slotScope.status }}</span>
+      </template>
+      <template #bottom="data">
+        <span class="f12">{{ data.slotScope.name }} {{ data.slotScope.time }}</span>
+      </template>
+    </tiny-milestone>
+  </div>
 </template>
 
 <script lang="jsx">
@@ -56,3 +58,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-milestone ::v-deep .tiny-milestone__description-status {
+  margin-top: 4px;
+}
+</style>

package/demos/pc/app/milestone/custom-flag-composition-api.vue

@@ -1,9 +1,11 @@
 <template>
-  <tiny-milestone :data="milestoneData" :milestones-status="statusMap">
-    <template #flag="data">
-      <span style="font-size: 12px">{{ data.slotScope.content }}</span>
-    </template>
-  </tiny-milestone>
+  <div class="demo-milestone">
+    <tiny-milestone :data="milestoneData" :milestones-status="statusMap">
+      <template #flag="data">
+        <span style="font-size: 12px">{{ data.slotScope.content }}</span>
+      </template>
+    </tiny-milestone>
+  </div>
 </template>
 
 <script setup lang="jsx">
@@ -75,3 +77,9 @@ const milestoneData = ref([
   }
 ])
 </script>
+
+<style scoped>
+.demo-milestone ::v-deep .tiny-milestone__description-status {
+  margin-top: 4px;
+}
+</style>

package/demos/pc/app/milestone/custom-flag.vue

@@ -1,9 +1,11 @@
 <template>
-  <tiny-milestone :data="milestoneData" :milestones-status="statusMap">
-    <template #flag="data">
-      <span style="font-size: 12px">{{ data.slotScope.content }}</span>
-    </template>
-  </tiny-milestone>
+  <div class="demo-milestone">
+    <tiny-milestone :data="milestoneData" :milestones-status="statusMap">
+      <template #flag="data">
+        <span style="font-size: 12px">{{ data.slotScope.content }}</span>
+      </template>
+    </tiny-milestone>
+  </div>
 </template>
 
 <script lang="jsx">
@@ -83,3 +85,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-milestone ::v-deep .tiny-milestone__description-status {
+  margin-top: 4px;
+}
+</style>