@opentiny/vue-docs 3.19.3 → 3.19.5

package/demos/pc/app/dept/title.vue

@@ -1,5 +1,7 @@
 <template>
-  <tiny-dept v-model="value" title="部门"></tiny-dept>
+  <div class="demo-dept-class">
+    <tiny-dept v-model="value" title="部门"></tiny-dept>
+  </div>
 </template>
 
 <script lang="jsx">
@@ -16,3 +18,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-dept-class {
+  width: 280px;
+}
+</style>

package/demos/pc/app/dialog-box/dialog-width-composition-api.vue

@@ -1,9 +1,18 @@
 <template>
   <div>
-    <tiny-button @click="boxVisibility1 = true" type="info">宽度 30%</tiny-button>
+    <tiny-button @click="boxVisibility1 = true" type="info">宽度30% 最大高度200px</tiny-button>
     <tiny-button @click="boxVisibility2 = true">宽度 60%</tiny-button>
-    <tiny-dialog-box v-model:visible="boxVisibility1" title="消息" width="30%">
-      <span>dialog-box 内容</span>
+    <tiny-dialog-box v-model:visible="boxVisibility1" title="消息" width="30%" max-height="200px">
+      <div>
+        <tiny-radio-group>
+          <tiny-radio :label="0">产品</tiny-radio>
+        </tiny-radio-group>
+      </div>
+      <div>
+        <tiny-radio-group>
+          <tiny-radio :label="0">研发</tiny-radio>
+        </tiny-radio-group>
+      </div>
       <template #footer>
         <tiny-button type="primary" @click="boxVisibility1 = false">确 定</tiny-button>
       </template>
@@ -19,7 +28,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { TinyButton, TinyDialogBox } from '@opentiny/vue'
+import { TinyButton, TinyDialogBox, TinyRadio, TinyRadioGroup } from '@opentiny/vue'
 
 const boxVisibility1 = ref(false)
 const boxVisibility2 = ref(false)
@@ -29,4 +38,7 @@ const boxVisibility2 = ref(false)
 .mydialogBox {
   background: rgba(150, 137, 137, 0.8);
 }
+.demo-class {
+  height: 300px;
+}
 </style>

package/demos/pc/app/dialog-box/dialog-width.spec.ts

@@ -1,11 +1,12 @@
 import { test, expect } from '@playwright/test'
 
-test('dialogBox 弹窗的宽度', async ({ page }) => {
+test('dialogBox 弹窗的宽度和最大高度', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('dialog-box#dialog-width')
 
   const dialogBox = page.locator('.tiny-dialog-box')
   await page.getByRole('button', { name: /30%/ }).click()
+  await expect(dialogBox.first()).toHaveCSS('max-height', '200px')
   await page.getByRole('button', { name: 'Close' }).click()
   await page.getByRole('button', { name: /60%/ }).click()
   await expect(dialogBox.nth(1)).toBeVisible()

package/demos/pc/app/dialog-box/dialog-width.vue

@@ -1,9 +1,18 @@
 <template>
   <div>
-    <tiny-button @click="boxVisibility1 = true" type="info">宽度 30%</tiny-button>
+    <tiny-button @click="boxVisibility1 = true" type="info">宽度30% 最大高度200px</tiny-button>
     <tiny-button @click="boxVisibility2 = true">宽度 60%</tiny-button>
-    <tiny-dialog-box v-model:visible="boxVisibility1" title="消息" width="30%">
-      <span>dialog-box 内容</span>
+    <tiny-dialog-box v-model:visible="boxVisibility1" title="消息" width="30%" max-height="200px">
+      <div>
+        <tiny-radio-group>
+          <tiny-radio :label="0">产品</tiny-radio>
+        </tiny-radio-group>
+      </div>
+      <div>
+        <tiny-radio-group>
+          <tiny-radio :label="0">研发</tiny-radio>
+        </tiny-radio-group>
+      </div>
       <template #footer>
         <tiny-button type="primary" @click="boxVisibility1 = false">确 定</tiny-button>
       </template>
@@ -18,12 +27,14 @@
 </template>
 
 <script lang="jsx">
-import { TinyButton, TinyDialogBox } from '@opentiny/vue'
+import { TinyButton, TinyDialogBox, TinyRadio, TinyRadioGroup } from '@opentiny/vue'
 
 export default {
   components: {
     TinyButton,
-    TinyDialogBox
+    TinyDialogBox,
+    TinyRadio,
+    TinyRadioGroup
   },
   data() {
     return {
@@ -38,4 +49,7 @@ export default {
 .mydialogBox {
   background: rgba(150, 137, 137, 0.8);
 }
+.demo-class {
+  height: 300px;
+}
 </style>

package/demos/pc/app/dialog-box/webdoc/dialog-box.js

@@ -111,12 +111,14 @@ export default {
     {
       demoId: 'dialog-width',
       name: {
-        'zh-CN': '弹窗的宽度',
-        'en-US': 'Wideness of the pop-up window'
+        'zh-CN': '弹窗的宽度和最大高度',
+        'en-US': 'The width and height of the pop-up window'
       },
       desc: {
-        'zh-CN': '<p>可通过<code>width</code>属性设置指定弹窗的宽度。</p>\n',
-        'en-US': '<p>The<code>width</code>attribute specifies the width of the pop-up window. </p>\n'
+        'zh-CN':
+          '<p>可通过<code>width</code>属性设置指定弹窗的宽度，<code>max-height</code>属性设置窗口最大高度。</p>\n',
+        'en-US':
+          '<p>The<code>width</code>attribute specifies the width of the pop-up window,<code>max-height</code> Property Setting the maximum height of the window.</p>\n'
       },
       codeFiles: ['dialog-width.vue']
     },
@@ -243,9 +245,9 @@ export default {
       },
       desc: {
         'zh-CN':
-          '<p>可通过<code>is-form-reset</code>属性设置<code>false</code>,关闭弹窗不重置数据，<code>resize</code>属性设置窗口最大化，<code>max-height</code>属性设置窗口最大高度。</p>',
+          '<p>可通过<code>is-form-reset</code>属性设置<code>false</code>,关闭弹窗不重置数据，<code>resize</code>属性设置窗口最大化。</p>',
         'en-US':
-          '<p>By setting the<code>is-form-reset</code>attribute to <code>false</code>, close the pop-up window without resetting the data,<code>resize</code> Property Setting Window Maximization,<code>max-height</code> Property Setting the maximum height of the window.</p>'
+          '<p>By setting the<code>is-form-reset</code>attribute to <code>false</code>, close the pop-up window without resetting the data,<code>resize</code> Property Setting Window Maximization.</p>'
       },
       codeFiles: ['form-in-dialog.vue']
     },

package/demos/pc/app/drawer/dragable-composition-api.vue

@@ -10,8 +10,9 @@
       :visible="visible"
       @update:visible="visible = $event"
       @drag="drag"
+      height="600px"
     >
-      <div class="content">
+      <div>
         <p v-if="placement === 'right'">横向拖拽左边框可改变抽屉主体宽度。</p>
         <p v-else>竖向拖拽上边框可改变抽屉主体高度。</p>
       </div>
@@ -35,9 +36,3 @@ const drag = ({ width, height }) => {
   TinyModal.message({ message: `抽屉的宽为${width},高为${height}`, status: 'info' })
 }
 </script>
-
-<style scoped>
-.content {
-  height: 300px;
-}
-</style>

package/demos/pc/app/drawer/dragable.vue

@@ -10,8 +10,9 @@
       :visible="visible"
       @update:visible="visible = $event"
       @drag="drag"
+      height="600px"
     >
-      <div class="content">
+      <div>
         <p v-if="placement === 'right'">横向拖拽左边框可改变抽屉主体宽度。</p>
         <p v-else>竖向拖拽上边框可改变抽屉主体高度。</p>
       </div>
@@ -44,9 +45,3 @@ export default {
   }
 }
 </script>
-
-<style scoped>
-.content {
-  height: 300px;
-}
-</style>

package/demos/pc/app/drawer/placement-composition-api.vue

@@ -10,6 +10,7 @@
       title="标题"
       :placement="placement"
       v-model:visible="visible"
+      height="600px"
     >
       <div>left或者right内容区域</div>
     </tiny-drawer>

package/demos/pc/app/drawer/placement.vue

@@ -9,6 +9,7 @@
       title="标题"
       :placement="placement"
       v-model:visible="visible"
+      height="600px"
     >
       <div>left或者right内容区域</div>
     </tiny-drawer>

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

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-drop-roles-class">
     <tiny-drop-roles v-model="value" @change="change"></tiny-drop-roles>
     <p>当前选中值：{{ value }}</p>
   </div>
@@ -26,6 +26,9 @@ function change(role) {
 </script>
 
 <style scoped>
+.demo-drop-roles-class {
+  width: 280px;
+}
 p {
   font-size: 14px;
   line-height: 1.5;

package/demos/pc/app/drop-roles/basic-usage.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-drop-roles-class">
     <tiny-drop-roles v-model="value" @change="change"></tiny-drop-roles>
     <p>当前选中值：{{ value }}</p>
   </div>
@@ -34,6 +34,9 @@ export default {
 </script>
 
 <style scoped>
+.demo-drop-roles-class {
+  width: 280px;
+}
 p {
   font-size: 14px;
   line-height: 1.5;

package/demos/pc/app/drop-roles/change-role-event-composition-api.vue

@@ -1,5 +1,7 @@
 <template>
-  <tiny-drop-roles v-model="value" @change="change"></tiny-drop-roles>
+  <div class="demo-drop-roles-class">
+    <tiny-drop-roles v-model="value" @change="change"></tiny-drop-roles>
+  </div>
 </template>
 
 <script setup lang="jsx">
@@ -21,3 +23,9 @@ function change(role) {
   })
 }
 </script>
+
+<style scoped>
+.demo-drop-roles-class {
+  width: 280px;
+}
+</style>

package/demos/pc/app/drop-roles/change-role-event.vue

@@ -1,5 +1,7 @@
 <template>
-  <tiny-drop-roles v-model="value" @change="change"></tiny-drop-roles>
+  <div class="demo-drop-roles-class">
+    <tiny-drop-roles v-model="value" @change="change"></tiny-drop-roles>
+  </div>
 </template>
 
 <script lang="jsx">
@@ -29,3 +31,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-drop-roles-class {
+  width: 280px;
+}
+</style>

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

@@ -1,12 +1,14 @@
 <template>
-  <tiny-drop-roles
-    v-model="value"
-    placeholder="选择角色"
-    :fields="fields"
-    :fetch-role="getRoleList"
-    :fetch-current-role="getCurrentRole"
-    @change="change"
-  ></tiny-drop-roles>
+  <div class="demo-drop-roles-class">
+    <tiny-drop-roles
+      v-model="value"
+      placeholder="选择角色"
+      :fields="fields"
+      :fetch-role="getRoleList"
+      :fetch-current-role="getCurrentRole"
+      @change="change"
+    ></tiny-drop-roles>
+  </div>
 </template>
 
 <script setup lang="jsx">
@@ -41,3 +43,9 @@ function change(role) {
   )
 }
 </script>
+
+<style scoped>
+.demo-drop-roles-class {
+  width: 280px;
+}
+</style>

package/demos/pc/app/drop-roles/custom-service.vue

@@ -1,12 +1,14 @@
 <template>
-  <tiny-drop-roles
-    v-model="value"
-    placeholder="选择角色"
-    :fields="fields"
-    :fetch-role="getRoleList"
-    :fetch-current-role="getCurrentRole"
-    @change="change"
-  ></tiny-drop-roles>
+  <div class="demo-drop-roles-class">
+    <tiny-drop-roles
+      v-model="value"
+      placeholder="选择角色"
+      :fields="fields"
+      :fetch-role="getRoleList"
+      :fetch-current-role="getCurrentRole"
+      @change="change"
+    ></tiny-drop-roles>
+  </div>
 </template>
 
 <script lang="jsx">
@@ -48,3 +50,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-drop-roles-class {
+  width: 280px;
+}
+</style>

package/demos/pc/app/drop-roles/size-composition-api.vue

@@ -1,6 +1,13 @@
 <template>
-  <div>
+  <div class="demo-drop-roles-class">
     <tiny-drop-roles size="medium" v-model="value" @change="change"></tiny-drop-roles>
+    <br /><br />
+    <tiny-drop-roles v-model="value" @change="change"></tiny-drop-roles>
+    <br /><br />
+    <tiny-drop-roles size="small" v-model="value" @change="change"></tiny-drop-roles>
+    <br /><br />
+    <tiny-drop-roles size="mini" v-model="value" @change="change"></tiny-drop-roles>
+    <br /><br />
     <p>当前选中值：{{ value }}</p>
   </div>
 </template>
@@ -26,9 +33,7 @@ function change(role) {
 </script>
 
 <style scoped>
-p {
-  font-size: 14px;
-  line-height: 1.5;
-  padding: 16px 0;
+.demo-drop-roles-class {
+  width: 280px;
 }
 </style>

package/demos/pc/app/drop-roles/size.vue

@@ -1,6 +1,13 @@
 <template>
-  <div>
+  <div class="demo-drop-roles-class">
     <tiny-drop-roles size="medium" v-model="value" @change="change"></tiny-drop-roles>
+    <br /><br />
+    <tiny-drop-roles v-model="value" @change="change"></tiny-drop-roles>
+    <br /><br />
+    <tiny-drop-roles size="small" v-model="value" @change="change"></tiny-drop-roles>
+    <br /><br />
+    <tiny-drop-roles size="mini" v-model="value" @change="change"></tiny-drop-roles>
+    <br /><br />
     <p>当前选中值：{{ value }}</p>
   </div>
 </template>
@@ -34,9 +41,7 @@ export default {
 </script>
 
 <style scoped>
-p {
-  font-size: 14px;
-  line-height: 1.5;
-  padding: 16px 0;
+.demo-drop-roles-class {
+  width: 280px;
 }
 </style>

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

@@ -1,5 +1,12 @@
 <template>
-  <tiny-hrapprover v-model="value" :approval-person="person" @update:approvalPerson="person = $event"></tiny-hrapprover>
+  <div class="demo-hrapprover-class">
+    <tiny-hrapprover
+      v-model="value"
+      title="选择权签人"
+      :approval-person="person"
+      @update:approvalPerson="person = $event"
+    ></tiny-hrapprover>
+  </div>
 </template>
 
 <script setup lang="jsx">
@@ -9,3 +16,9 @@ import { TinyHrapprover } from '@opentiny/vue'
 const value = ref('022471')
 const person = ref('wangxiaofeng 00193664')
 </script>
+
+<style scoped>
+.demo-hrapprover-class {
+  width: 280px;
+}
+</style>

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

@@ -1,5 +1,12 @@
 <template>
-  <tiny-hrapprover v-model="value" :approval-person="person" @update:approvalPerson="person = $event"></tiny-hrapprover>
+  <div class="demo-hrapprover-class">
+    <tiny-hrapprover
+      v-model="value"
+      title="选择权签人"
+      :approval-person="person"
+      @update:approvalPerson="person = $event"
+    ></tiny-hrapprover>
+  </div>
 </template>
 
 <script lang="jsx">
@@ -17,3 +24,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-hrapprover-class {
+  width: 280px;
+}
+</style>

package/demos/pc/app/hrapprover/category-type-composition-api.vue

@@ -1,10 +1,13 @@
 <template>
-  <tiny-hrapprover
-    v-model="value"
-    :approval-person="person"
-    @update:approvalPerson="person = $event"
-    category="0506"
-  ></tiny-hrapprover>
+  <div class="demo-hrapprover-class">
+    <tiny-hrapprover
+      v-model="value"
+      :approval-person="person"
+      @update:approvalPerson="person = $event"
+      title="选择权签人"
+      category="0506"
+    ></tiny-hrapprover>
+  </div>
 </template>
 
 <script setup lang="jsx">
@@ -14,3 +17,9 @@ import { TinyHrapprover } from '@opentiny/vue'
 const value = ref('022471')
 const person = ref('wangxiaofeng 00193664')
 </script>
+
+<style scoped>
+.demo-hrapprover-class {
+  width: 280px;
+}
+</style>

package/demos/pc/app/hrapprover/category-type.vue

@@ -1,10 +1,13 @@
 <template>
-  <tiny-hrapprover
-    v-model="value"
-    :approval-person="person"
-    @update:approvalPerson="person = $event"
-    category="0506"
-  ></tiny-hrapprover>
+  <div class="demo-hrapprover-class">
+    <tiny-hrapprover
+      v-model="value"
+      :approval-person="person"
+      title="选择权签人"
+      @update:approvalPerson="person = $event"
+      category="0506"
+    ></tiny-hrapprover>
+  </div>
 </template>
 
 <script lang="jsx">
@@ -22,3 +25,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-hrapprover-class {
+  width: 280px;
+}
+</style>

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

@@ -1,11 +1,14 @@
 <template>
-  <tiny-hrapprover
-    v-model="value"
-    :approval-person="person"
-    @update:approvalPerson="person = $event"
-    :fetch-hrapprover="getFetchHrapprover"
-    :category="category"
-  ></tiny-hrapprover>
+  <div class="demo-hrapprover-class">
+    <tiny-hrapprover
+      v-model="value"
+      :approval-person="person"
+      @update:approvalPerson="person = $event"
+      :fetch-hrapprover="getFetchHrapprover"
+      :category="category"
+      title="选择权签人"
+    ></tiny-hrapprover>
+  </div>
 </template>
 
 <script setup lang="jsx">
@@ -39,3 +42,9 @@ function getFetchHrapprover() {
   ])
 }
 </script>
+
+<style scoped>
+.demo-hrapprover-class {
+  width: 280px;
+}
+</style>

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

@@ -1,11 +1,14 @@
 <template>
-  <tiny-hrapprover
-    v-model="value"
-    :approval-person="person"
-    @update:approvalPerson="person = $event"
-    :fetch-hrapprover="getFetchHrapprover"
-    :category="category"
-  ></tiny-hrapprover>
+  <div class="demo-hrapprover-class">
+    <tiny-hrapprover
+      v-model="value"
+      :approval-person="person"
+      @update:approvalPerson="person = $event"
+      :fetch-hrapprover="getFetchHrapprover"
+      :category="category"
+      title="选择权签人"
+    ></tiny-hrapprover>
+  </div>
 </template>
 
 <script lang="jsx">
@@ -48,3 +51,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-hrapprover-class {
+  width: 280px;
+}
+</style>

package/demos/pc/app/hrapprover/disabled-composition-api.vue

@@ -1,9 +1,10 @@
 <template>
-  <div>
+  <div class="demo-hrapprover-class">
     <tiny-button @click="Switchover" style="margin-bottom: 10px">启用/禁用</tiny-button>
     <tiny-hrapprover
       :value="value"
       :approval-person="person"
+      title="选择权签人"
       @update:approvalPerson="person = $event"
       :disabled="disabled"
     ></tiny-hrapprover>
@@ -22,3 +23,9 @@ function Switchover() {
   disabled.value = !disabled.value
 }
 </script>
+
+<style scoped>
+.demo-hrapprover-class {
+  width: 280px;
+}
+</style>

package/demos/pc/app/hrapprover/disabled.vue

@@ -1,9 +1,10 @@
 <template>
-  <div>
+  <div class="demo-hrapprover-class">
     <tiny-button @click="Switchover" style="margin-bottom: 10px">启用/禁用</tiny-button>
     <tiny-hrapprover
       :value="value"
       :approval-person="person"
+      title="选择权签人"
       @update:approvalPerson="person = $event"
       :disabled="disabled"
     ></tiny-hrapprover>
@@ -32,3 +33,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-hrapprover-class {
+  width: 280px;
+}
+</style>

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

@@ -17,7 +17,7 @@
       <tiny-input class="demp-input-dis" v-model="input1" type="textarea" display-only></tiny-input>
     </p>
     <p>
-      <label>display-only&autosize：</label>
+      <label>display-only & autosize：</label>
       <tiny-input class="demp-input-dis" v-model="input1" type="textarea" display-only autosize></tiny-input>
     </p>
   </div>

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

@@ -17,7 +17,7 @@
       <tiny-input class="demp-input-dis" v-model="input1" type="textarea" display-only></tiny-input>
     </p>
     <p>
-      <label>display-only&autosize：</label>
+      <label>display-only & autosize：</label>
       <tiny-input class="demp-input-dis" v-model="input1" type="textarea" display-only autosize></tiny-input>
     </p>
   </div>