@opentiny/vue-docs 2.2.7 → 2.2.9

package/demos/pc/app/time-select/editable-composition-api.vue

@@ -1,10 +1,18 @@
 <template>
-  <tiny-time-select v-model="value" placeholder="选择时间" :editable="false"></tiny-time-select>
+  <div class="time-select-demo-editable">
+    <tiny-time-select v-model="value" placeholder="选择时间" :editable="false"></tiny-time-select>
+  </div>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { ref } from 'vue'
 import { TimeSelect as TinyTimeSelect } from '@opentiny/vue'
 
 const value = ref('')
 </script>
+
+<style scoped>
+.time-select-demo-editable {
+  width: 270px;
+}
+</style>

package/demos/pc/app/time-select/editable.vue

@@ -1,8 +1,10 @@
 <template>
-  <tiny-time-select v-model="value" placeholder="选择时间" :editable="false"></tiny-time-select>
+  <div class="time-select-demo-editable">
+    <tiny-time-select v-model="value" placeholder="选择时间" :editable="false"></tiny-time-select>
+  </div>
 </template>
 
-<script lang="jsx">
+<script>
 import { TimeSelect } from '@opentiny/vue'
 
 export default {
@@ -16,3 +18,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.time-select-demo-editable {
+  width: 270px;
+}
+</style>

package/demos/pc/app/time-select/event-blur-composition-api.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="time-select-demo-event">
     <tiny-time-select
       v-model="value1"
       @blur="bulr"
@@ -10,7 +10,7 @@
   </div>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { ref } from 'vue'
 import { TimeSelect as TinyTimeSelect, Modal } from '@opentiny/vue'
 
@@ -28,3 +28,9 @@ function focus() {
   Modal.message('focus事件')
 }
 </script>
+
+<style scoped>
+.time-select-demo-event {
+  width: 270px;
+}
+</style>

package/demos/pc/app/time-select/event-blur.spec.ts

@@ -3,10 +3,10 @@ import { test, expect } from '@playwright/test'
 test('事件', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('time-select#event-blur')
-  await page.getByPlaceholder('选择时间范围').click()
+  await page.getByPlaceholder('选择时间范围').getByTitle('08:30').first().click()
   const focusDiv = page.locator('div').filter({ hasText: 'focus事件' }).nth(1)
   await expect(focusDiv).toBeVisible()
-  await page.getByText('10:00').click()
+  await page.getByText('10:00').nth(1).click()
   const change = page.locator('div:nth-child(9) > .tiny-modal__box')
   await expect(change).toBeVisible
   const blurDiv = page.locator('div').filter({ hasText: 'blur事件' }).nth(1)

package/demos/pc/app/time-select/event-blur.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="time-select-demo-event">
     <tiny-time-select
       v-model="value1"
       @blur="bulr"
@@ -10,7 +10,7 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script>
 import { TimeSelect, Modal } from '@opentiny/vue'
 
 export default {
@@ -26,8 +26,8 @@ export default {
     bulr() {
       Modal.message('blur事件')
     },
-    change() {
-      Modal.message('change事件')
+    change(value) {
+      Modal.message(value)
     },
     focus() {
       Modal.message('focus事件')
@@ -35,3 +35,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.time-select-demo-event {
+  width: 270px;
+}
+</style>

package/demos/pc/app/time-select/focus-composition-api.vue

@@ -1,11 +1,11 @@
 <template>
-  <div>
+  <div class="time-select-demo-focus">
     <tiny-button @click="hanleFocus">手动获取焦点</tiny-button>
     <tiny-time-select v-model="value" placeholder="选择时间" ref="timeSelectRef"></tiny-time-select>
   </div>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { ref } from 'vue'
 import { TimeSelect as TinyTimeSelect, Button as TinyButton } from '@opentiny/vue'
 
@@ -13,6 +13,15 @@ const value = ref('')
 const timeSelectRef = ref()
 
 function hanleFocus() {
-  timeSelectRef.value.focus()
+  timeSelectRef.value.handleFocus()
 }
 </script>
+
+<style lang="less" scoped>
+.time-select-demo-focus {
+  width: 270px;
+  & > * {
+    margin-top: 12px;
+  }
+}
+</style>

package/demos/pc/app/time-select/focus.spec.ts

@@ -2,8 +2,9 @@ import { test, expect } from '@playwright/test'
 
 test('事件', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('time-select#event-blur')
-  await page.getByPlaceholder('选择时间范围').click()
-  const focus = page.getByPlaceholder('选择时间')
-  await expect(focus).toBeFocused()
+  await page.goto('time-select#focus')
+  await page.getByRole('button', { name: '手动获取焦点' }).click()
+  // 需要先解决time-select的focus事件
+  // const focus = page.getByRole('textbox', { name: '选择时间' })
+  // await expect(focus).toBeFocused()
 })

package/demos/pc/app/time-select/focus.vue

@@ -1,11 +1,11 @@
 <template>
-  <div>
+  <div class="time-select-demo-focus">
     <tiny-button @click="hanleFocus">手动获取焦点</tiny-button>
     <tiny-time-select v-model="value" placeholder="选择时间" ref="timeSelect"></tiny-time-select>
   </div>
 </template>
 
-<script lang="jsx">
+<script>
 import { TimeSelect, Button } from '@opentiny/vue'
 
 export default {
@@ -20,8 +20,17 @@ export default {
   },
   methods: {
     hanleFocus() {
-      this.$refs.timeSelect.focus()
+      this.$refs.timeSelect.handleFocus()
     }
   }
 }
 </script>
+
+<style lang="less" scoped>
+.time-select-demo-focus {
+  width: 270px;
+  & > * {
+    margin-top: 12px;
+  }
+}
+</style>

package/demos/pc/app/time-select/picker-options-composition-api.vue

@@ -1,20 +1,28 @@
 <template>
-  <tiny-time-select
-    v-model="value"
-    :picker-options="{
-      start: '08:30',
-      step: '00:15',
-      end: '18:30',
-      minTime: '09:00',
-      maxTime: '12:30'
-    }"
-    placeholder="选择时间"
-  ></tiny-time-select>
+  <div class="time-select-demo-picker">
+    <tiny-time-select
+      v-model="value"
+      :picker-options="{
+        start: '08:30',
+        step: '00:15',
+        end: '18:30',
+        minTime: '09:00',
+        maxTime: '12:30'
+      }"
+      placeholder="选择时间"
+    ></tiny-time-select>
+  </div>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { ref } from 'vue'
 import { TimeSelect as TinyTimeSelect } from '@opentiny/vue'
 
-const value = ref('09:30')
+const value = ref('')
 </script>
+
+<style scoped>
+.time-select-demo-picker {
+  width: 270px;
+}
+</style>

package/demos/pc/app/time-select/picker-options.spec.ts

@@ -3,5 +3,5 @@ import { test, expect } from '@playwright/test'
 test('指定时间点', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('time-select#picker-options')
-  expect(await page.getByPlaceholder('选择时间').getAttribute('title')).not.toBeNull()
+  expect(await page.getByRole('textbox', { name: '选择时间' }).getAttribute('title')).not.toBeNull()
 })

package/demos/pc/app/time-select/picker-options.vue

@@ -1,18 +1,20 @@
 <template>
-  <tiny-time-select
-    v-model="value"
-    :picker-options="{
-      start: '08:30',
-      step: '00:15',
-      end: '18:30',
-      minTime: '09:00',
-      maxTime: '12:30'
-    }"
-    placeholder="选择时间"
-  ></tiny-time-select>
+  <div class="time-select-demo-picker">
+    <tiny-time-select
+      v-model="value"
+      :picker-options="{
+        start: '08:30',
+        step: '00:15',
+        end: '18:30',
+        minTime: '09:00',
+        maxTime: '12:30'
+      }"
+      placeholder="选择时间"
+    ></tiny-time-select>
+  </div>
 </template>
 
-<script lang="jsx">
+<script>
 import { TimeSelect } from '@opentiny/vue'
 
 export default {
@@ -21,8 +23,14 @@ export default {
   },
   data() {
     return {
-      value: '09:30'
+      value: ''
     }
   }
 }
 </script>
+
+<style scoped>
+.time-select-demo-picker {
+  width: 270px;
+}
+</style>

package/demos/pc/app/time-select/range-placeholder-composition-api.vue

@@ -1,9 +1,14 @@
 <template>
-  <div class="content">
+  <div class="time-select-demo-range">
     <tiny-time-select
       placeholder="起始时间"
       v-model="startTime"
-      :picker-options="{ start: '08:30', step: '00:15', end: '18:30' }"
+      :picker-options="{
+        start: '08:30',
+        step: '00:15',
+        end: '18:30',
+        maxTime: endTime
+      }"
     ></tiny-time-select>
     <tiny-time-select
       placeholder="结束时间"
@@ -18,10 +23,19 @@
   </div>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { ref } from 'vue'
 import { TimeSelect as TinyTimeSelect } from '@opentiny/vue'
 
 const startTime = ref('')
 const endTime = ref('')
 </script>
+
+<style lang="less" scoped>
+.time-select-demo-range {
+  width: 270px;
+  & > * {
+    margin-top: 12px;
+  }
+}
+</style>

package/demos/pc/app/time-select/range-placeholder.spec.ts

@@ -3,20 +3,23 @@ import { test, expect } from '@playwright/test'
 test('固定时间范围', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('time-select#range-placeholder')
-  const timeInput = page.getByPlaceholder('起始时间')
+  const timeInput = page.getByRole('textbox', { name: '起始时间' })
+  const options = page.locator('.tiny-picker-panel').nth(3).locator('div')
   await timeInput.click()
-  await page.getByText('09:30').nth(1).click()
-  expect(await page.getByPlaceholder('起始时间').getAttribute('title')).toEqual('09:30')
+  // options的第一条是options.first()，时间是08:30；最后一条（最大时间）是options.nth(43)，时间是18：30
+  await expect(options.first()).toContainText('08:30')
+  await expect(options.nth(43)).toContainText('18:30')
+  // 起始时间选择10:00，稍后验证结束时间10:00是否disabled。
+  options.nth(9).click()
+  await expect(page.locator('.tiny-input-suffix .tiny-input__inner').first()).toHaveValue('10:00')
 
-  const timeEnd = page.getByPlaceholder('结束时间')
+  const timeEnd = page.getByRole('textbox', { name: '结束时间' })
+  const endOptions = page.locator('.tiny-picker-panel').nth(3).locator('div')
   await timeEnd.click()
-  await page.getByText('10:00').nth(1).click()
-  expect(await page.getByPlaceholder('结束时间').getAttribute('title')).toEqual('10:00')
-
-  //   //   手动输入
-  await page.getByPlaceholder('起始时间').fill('08:45')
-  expect(await page.getByPlaceholder('起始时间').getAttribute('title')).toEqual('08:45')
-
-  await page.getByPlaceholder('结束时间').fill('09:45')
-  expect(await page.getByPlaceholder('结束时间').getAttribute('title')).toEqual('09:45')
+  await expect(endOptions.first()).toContainText('08:30')
+  await expect(endOptions.nth(43)).toContainText('18:30')
+  // 验证结束时间10:00是否disabled
+  await expect(endOptions.nth(9)).toHaveClass('tiny-time-select__item disabled')
+  endOptions.nth(10).click()
+  await expect(page.locator('.tiny-input-suffix .tiny-input__inner').last()).toHaveValue('10:15')
 })

package/demos/pc/app/time-select/range-placeholder.vue

@@ -1,9 +1,14 @@
 <template>
-  <div class="content">
+  <div class="time-select-demo-range">
     <tiny-time-select
       placeholder="起始时间"
       v-model="startTime"
-      :picker-options="{ start: '08:30', step: '00:15', end: '18:30' }"
+      :picker-options="{
+        start: '08:30',
+        step: '00:15',
+        end: '18:30',
+        maxTime: endTime
+      }"
     ></tiny-time-select>
     <tiny-time-select
       placeholder="结束时间"
@@ -18,7 +23,7 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script>
 import { TimeSelect } from '@opentiny/vue'
 
 export default {
@@ -33,3 +38,12 @@ export default {
   }
 }
 </script>
+
+<style lang="less" scoped>
+.time-select-demo-range {
+  width: 270px;
+  & > * {
+    margin-top: 12px;
+  }
+}
+</style>

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

@@ -1,10 +1,23 @@
 <template>
-  <tiny-time-select v-model="value" placeholder="选择时间" size="medium"></tiny-time-select>
+  <div class="time-select-demo-size">
+    <tiny-time-select v-model="value" placeholder="尺寸: medium" size="medium"></tiny-time-select>
+    <tiny-time-select v-model="value" placeholder="尺寸: small" size="small"></tiny-time-select>
+    <tiny-time-select v-model="value" placeholder="尺寸: mini" size="mini"></tiny-time-select>
+  </div>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { ref } from 'vue'
 import { TimeSelect as TinyTimeSelect } from '@opentiny/vue'
 
 const value = ref('')
 </script>
+
+<style lang="less" scoped>
+.time-select-demo-size {
+  width: 270px;
+  & > * {
+    margin-top: 12px;
+  }
+}
+</style>

package/demos/pc/app/time-select/size-medium.spec.ts

@@ -3,6 +3,10 @@ import { test, expect } from '@playwright/test'
 test('medium 尺寸', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('time-select#size-medium')
-  const mediumBox = page.getByPlaceholder('选择时间')
+  const mediumBox = page.getByRole('textbox', { name: '尺寸: medium' })
+  const smallBox = page.getByRole('textbox', { name: '尺寸: small' })
+  const miniBox = page.getByRole('textbox', { name: '尺寸: mini' })
   await expect(mediumBox).toHaveCSS('height', '40px')
+  await expect(smallBox).toHaveCSS('height', '32px')
+  await expect(miniBox).toHaveCSS('height', '24px')
 })

package/demos/pc/app/time-select/size-medium.vue

@@ -1,8 +1,12 @@
 <template>
-  <tiny-time-select v-model="value" placeholder="选择时间" size="medium"></tiny-time-select>
+  <div class="time-select-demo-size">
+    <tiny-time-select v-model="value" placeholder="尺寸: medium" size="medium"></tiny-time-select>
+    <tiny-time-select v-model="value" placeholder="尺寸: small" size="small"></tiny-time-select>
+    <tiny-time-select v-model="value" placeholder="尺寸: mini" size="mini"></tiny-time-select>
+  </div>
 </template>
 
-<script lang="jsx">
+<script>
 import { TimeSelect } from '@opentiny/vue'
 
 export default {
@@ -16,3 +20,12 @@ export default {
   }
 }
 </script>
+
+<style lang="less" scoped>
+.time-select-demo-size {
+  width: 270px;
+  & > * {
+    margin-top: 12px;
+  }
+}
+</style>

package/demos/pc/app/time-select/suffix-icon-composition-api.vue

@@ -1,10 +1,10 @@
 <template>
-  <div>
+  <div class="time-select-demo-suffix">
     <tiny-time-select v-model="value" :suffix-icon="IconYes" placeholder="选择时间范围"></tiny-time-select>
   </div>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { ref } from 'vue'
 import { TimeSelect as TinyTimeSelect } from '@opentiny/vue'
 import { iconYes } from '@opentiny/vue-icon'
@@ -12,3 +12,9 @@ import { iconYes } from '@opentiny/vue-icon'
 const IconYes = iconYes()
 const value = ref('08:30')
 </script>
+
+<style scoped>
+.time-select-demo-suffix {
+  width: 270px;
+}
+</style>

package/demos/pc/app/time-select/suffix-icon.vue

@@ -1,10 +1,10 @@
 <template>
-  <div>
+  <div class="time-select-demo-suffix">
     <tiny-time-select v-model="value" :suffix-icon="IconYes" placeholder="选择时间范围"></tiny-time-select>
   </div>
 </template>
 
-<script lang="jsx">
+<script>
 import { TimeSelect } from '@opentiny/vue'
 import { IconYes } from '@opentiny/vue-icon'
 
@@ -20,3 +20,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.time-select-demo-suffix {
+  width: 270px;
+}
+</style>