docs(time-select): [time-select] optimize docs and demos (#1403)

* docs(time-select): [time-select] optimize docs and demos

* docs(time-select): [time-select] optimize docs and demos

* docs(time-select): [time-select] optimize docs and demos

examples/sites/demos/apis/time-select.js

@@ -188,7 +188,7 @@ export default {
       ],
       methods: [
         {
-          name: 'handleFocus',
+          name: 'focus',
           type: '( ) => void',
           defaultValue: '',
           desc: {

examples/sites/demos/pc/app/time-select/basic-usage.spec.ts

@@ -6,7 +6,7 @@ test('基础用法', async ({ page }) => {
   const input = page.locator('#basic-usage').locator('.tiny-input__inner')
   const timeInput = page.locator('#basic-usage').getByRole('textbox', { name: '选择时间' })
   await timeInput.click()
-  await page.getByText('10:00').nth(1).click()
+  await page.getByText('10:00').click()
   await expect(input).toHaveValue('10:00')
 
   //   手动输入

examples/sites/demos/pc/app/time-select/clear-icon.spec.ts

@@ -7,7 +7,7 @@ test('自定义清空图标', async ({ page }) => {
   const timeInput = page.getByRole('textbox', { name: '选择时间' })
   const input = demo.locator('.tiny-input__inner')
   await timeInput.click()
-  await page.getByText('10:00').nth(1).click()
+  await page.getByText('10:00').click()
   await input.hover()
   //   点击图标，清除输入框内容
   await page.locator('#clear-icon svg').first().click()

examples/sites/demos/pc/app/time-select/default-value.spec.ts

@@ -5,6 +5,6 @@ test('选择器打开时默认时间设置', async ({ page }) => {
   await page.goto('time-select#default-value')
   const demo = page.locator('#default-value')
   await demo.locator('.tiny-date-editor').click()
-  const defaultSelect = page.getByText('10:00').nth(1)
+  const defaultSelect = page.getByText('10:00')
   await expect(defaultSelect).toHaveClass(/default/)
 })

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

@@ -17,15 +17,15 @@ import { TimeSelect as TinyTimeSelect, Modal } from '@opentiny/vue'
 const value1 = ref('08:30')
 
 function bulr() {
-  Modal.message('blur事件')
+  Modal.message({ message: 'blur事件', status: 'info' })
 }
 
 function change() {
-  Modal.message('change事件')
+  Modal.message({ message: 'change事件', status: 'info' })
 }
 
 function focus() {
-  Modal.message('focus事件')
+  Modal.message({ message: 'focus事件', status: 'info' })
 }
 </script>
 

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

@@ -6,7 +6,7 @@ test('事件', async ({ page }) => {
   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').nth(1).click()
+  await page.getByText('10:00').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)

examples/sites/demos/pc/app/time-select/event-blur.vue

@@ -24,13 +24,13 @@ export default {
   },
   methods: {
     bulr() {
-      Modal.message('blur事件')
+      Modal.message({ message: 'blur事件', status: 'info' })
     },
     change(value) {
-      Modal.message(value)
+      Modal.message({ message: value, status: 'info' })
     },
     focus() {
-      Modal.message('focus事件')
+      Modal.message({ message: 'focus事件', status: 'info' })
     }
   }
 }

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

@@ -13,7 +13,7 @@ const value = ref('')
 const timeSelectRef = ref()
 
 function hanleFocus() {
-  timeSelectRef.value.handleFocus()
+  timeSelectRef.value.$el.querySelector('input').focus()
 }
 </script>
 

examples/sites/demos/pc/app/time-select/focus.vue

@@ -20,7 +20,7 @@ export default {
   },
   methods: {
     hanleFocus() {
-      this.$refs.timeSelect.handleFocus()
+      this.$refs.timeSelect.$el.querySelector('input').focus()
     }
   }
 }

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

@@ -4,7 +4,7 @@ test('固定时间范围', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('time-select#range-placeholder')
   const timeInput = page.getByRole('textbox', { name: '起始时间' })
-  const options = page.locator('.tiny-picker-panel').nth(3).locator('div')
+  const options = page.locator('.tiny-picker-panel').nth(1).locator('div')
   await timeInput.click()
   // options的第一条是options.first()，时间是08:30；最后一条（最大时间）是options.nth(43)，时间是18：30
   await expect(options.first()).toContainText('08:30')
@@ -14,7 +14,7 @@ test('固定时间范围', async ({ page }) => {
   await expect(page.locator('.tiny-input-suffix .tiny-input__inner').first()).toHaveValue('10:00')
 
   const timeEnd = page.getByRole('textbox', { name: '结束时间' })
-  const endOptions = page.locator('.tiny-picker-panel').nth(3).locator('div')
+  const endOptions = page.locator('.tiny-picker-panel').nth(1).locator('div')
   await timeEnd.click()
   await expect(endOptions.first()).toContainText('08:30')
   await expect(endOptions.nth(43)).toContainText('18:30')