Merge branch 'dev' of github.com:You-Hw-Y/tiny-vue into lty/feat-button

examples/sites/demos/apis/checkbox.js

@@ -145,7 +145,7 @@ export default {
           type: "'medium' | 'small' | 'mini'",
           defaultValue: '',
           desc: {
-            'zh-CN': 'checkbox 的尺寸，仅在 border 为真时有效',
+            'zh-CN': 'checkbox 的尺寸，仅在 border 为true时有效',
             'en-US': 'Checkbox size. This parameter is valid only when border is set to true'
           },
           mode: ['pc', 'mobile-first'],

examples/sites/demos/apis/steps.js

@@ -62,6 +62,20 @@ export default {
           },
           mode: ['mobile-first']
         },
+        {
+          name: 'dot',
+          type: 'Boolean',
+          defaultValue: 'false',
+          meta: {
+            stable: '3.19.0'
+          },
+          desc: {
+            'zh-CN': '点状形步骤条，当值只支持垂直样式',
+            'en-US': 'Dot shaped step bar, values only support vertical style'
+          },
+          mode: ['pc'],
+          pcDemo: 'line-dot'
+        },
         {
           name: 'duration',
           type: 'number',

examples/sites/demos/pc/app/calendar-view/calendar-event.spec.ts

@@ -3,27 +3,27 @@ import { test, expect } from '@playwright/test'
 test('事件', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('calendar-view#calendar-event')
-  const timeInput = page.locator('.tiny-filter-box').locator('.value')
-  const timeBtn = page.getByText('2023 年 05 月')
+  const timeInput = page.locator('.tiny-calendar-view').locator('.tiny-input__inner')
+  const timeBtn = page.getByRole('textbox', { name: '年 05 月' })
   const leftYear = page.getByRole('button', { name: '前一年' })
   const month6 = page.getByText('六月')
   const leftSvg = page.locator('.header-left > .tiny-svg')
   const rightSvg = page.locator('.header-right > .tiny-svg')
   const mode = page.locator('label').nth(2)
-  const modalVal = page.getByText('模式切换事件: timeline')
+  const modalVal = page.getByText('模式切换事件: schedule')
   await timeBtn.click()
   await page.waitForTimeout(100)
   await leftYear.click()
   await page.waitForTimeout(100)
   await month6.click()
   await page.waitForTimeout(100)
-  await expect(timeInput).toHaveText('2022 年 06 月')
+  await expect(timeInput).toHaveAttribute('title', '2022 年 06 月')
   await leftSvg.click()
   await page.waitForTimeout(100)
-  await expect(timeInput).toHaveText('2022 年 05 月')
+  await expect(timeInput).toHaveAttribute('title', '2022 年 05 月')
   await rightSvg.click()
   await page.waitForTimeout(100)
-  await expect(timeInput).toHaveText('2022 年 06 月')
+  await expect(timeInput).toHaveAttribute('title', '2022 年 06 月')
   await mode.click()
   await page.waitForTimeout(100)
   await expect(modalVal).toBeVisible()

examples/sites/demos/pc/app/calendar-view/calendar-mode.spec.ts

@@ -3,9 +3,9 @@ import { test, expect } from '@playwright/test'
 test('显示模式', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('calendar-view#calendar-mode')
-  const monthBtn = page.locator('label').nth(1)
-  const timelineBtn = page.locator('label').nth(2)
-  const scheduleBtn = page.locator('label').nth(3)
+  const monthBtn = page.getByLabel('示例', { exact: true }).locator('label').first()
+  const timelineBtn = page.getByLabel('示例', { exact: true }).locator('label').nth(1)
+  const scheduleBtn = page.getByLabel('示例', { exact: true }).locator('label').nth(2)
   const dmonthDom = page.locator('.tiny-calendar-view-month__main')
   const timelineDom = page.locator('.tiny-calendar-view-week__timeline')
   const scheduleDom = page.locator('.tiny-calendar-view-week__schedule')

examples/sites/demos/pc/app/calendar-view/custom-header.spec.ts

@@ -5,7 +5,7 @@ test('自定义头部显示', async ({ page }) => {
   await page.goto('calendar-view#custom-header')
 
   const demo = page.locator('#custom-header')
-  const timelineBtn = demo.locator('label').nth(3)
+  const timelineBtn = page.getByLabel('示例', { exact: true }).locator('label').nth(2)
   const customHeader = demo.getByText('2023-5-3 周三')
   await timelineBtn.click()
   await page.waitForTimeout(200)

examples/sites/demos/pc/app/checkbox/border-composition-api.vue

@@ -21,5 +21,7 @@ const checked = ref(false)
   white-space: nowrap;
   display: inline-block;
   vertical-align: middle;
+  line-height: 22px;
+  height: 22px;
 }
 </style>

examples/sites/demos/pc/app/checkbox/border.spec.ts

@@ -8,7 +8,7 @@ test('带边框复选框', async ({ page }) => {
   const checkbox = demo.locator('.tiny-checkbox')
   const label = demo.locator('.tiny-checkbox__label > div').first()
 
-  await expect(checkbox).toHaveCSS('width', '156px')
+  await expect(checkbox).toHaveCSS('width', '158px')
   await expect(checkbox).toHaveCSS('height', '40px')
   await expect(checkbox).toHaveCSS('border-left-color', 'rgb(173, 176, 184)')
   await expect(checkbox).toHaveCSS('border-bottom-color', 'rgb(173, 176, 184)')

examples/sites/demos/pc/app/checkbox/border.vue

@@ -30,5 +30,7 @@ export default {
   white-space: nowrap;
   display: inline-block;
   vertical-align: middle;
+  line-height: 22px;
+  height: 22px;
 }
 </style>

examples/sites/demos/pc/app/checkbox/custom-color.vue

@@ -6,13 +6,12 @@
 </template>
 
 <script>
-import { CheckboxButton, CheckboxGroup, Switch } from '@opentiny/vue'
+import { CheckboxButton, CheckboxGroup } from '@opentiny/vue'
 
 export default {
   components: {
     TinyCheckboxButton: CheckboxButton,
-    TinyCheckboxGroup: CheckboxGroup,
-    TinySwitch: Switch
+    TinyCheckboxGroup: CheckboxGroup
   },
   data() {
     return {

examples/sites/demos/pc/app/checkbox/size.spec.ts

@@ -8,10 +8,10 @@ test('复选框组', async ({ page }) => {
   const getCheckboxBtn = (index: number) =>
     demo.locator('.tiny-checkbox-group').nth(index).locator('.tiny-checkbox-button').first()
 
-  await expect(getCheckboxBtn(0)).toHaveCSS('width', '74px')
+  await expect(getCheckboxBtn(0)).toHaveCSS('width', '98px')
   await expect(getCheckboxBtn(0)).toHaveCSS('height', '44px')
-  await expect(getCheckboxBtn(1)).toHaveCSS('width', '70px')
-  await expect(getCheckboxBtn(1)).toHaveCSS('height', '38px')
+  await expect(getCheckboxBtn(1)).toHaveCSS('width', '64px')
+  await expect(getCheckboxBtn(1)).toHaveCSS('height', '32px')
   await expect(getCheckboxBtn(2)).toHaveCSS('width', '60px')
   await expect(getCheckboxBtn(2)).toHaveCSS('height', '30px')
   await expect(getCheckboxBtn(3)).toHaveCSS('width', '54px')

examples/sites/demos/pc/app/filter-panel/code-composition-api.vue

@@ -2,31 +2,31 @@
   <div class="tiny-filter-panel-demo">
     <tiny-filter-panel
       :popper-append-to-body="false"
-      ref="filterPanel"
+      ref="filterPanelRef"
       label="编码编码"
+      :tip="tip"
       clearable
-      :value="value"
       @handle-clear="handleClear"
     >
       <div class="tiny-filter-panel-textarea">
         <div class="tiny-filter-panel-title">支持输入多个值，用分号区隔</div>
-        <tiny-input type="textarea" resize="none" v-model="inputVal"></tiny-input>
+        <tiny-input type="textarea" resize="none" v-model="inputVal" @change="handleChange"></tiny-input>
       </div>
-      <tiny-button size="mini" type="primary" class="tiny-filter-panel-button" @click="hide">确定</tiny-button>
+      <tiny-button size="small" type="primary" class="tiny-filter-panel-button" @click="hide">确定</tiny-button>
     </tiny-filter-panel>
+    <tiny-tag v-for="(tag, index) in tags" :key="tag" closable @close="handleClose(index)">{{ tag }}</tiny-tag>
   </div>
 </template>
 
 <script setup>
-import { ref, computed } from 'vue'
-import { FilterPanel as TinyFilterPanel, Input as TinyInput, Button as TinyButton } from '@opentiny/vue'
+import { ref } from 'vue'
+import { FilterPanel as TinyFilterPanel, Input as TinyInput, Button as TinyButton, Tag as TinyTag } from '@opentiny/vue'
 
+const tip = ref('请选择物品数量')
 const inputVal = ref('')
 const radioVal = ref('')
 const filterPanelRef = ref()
-const value = computed(() => {
-  return radioVal.value + inputVal.value
-})
+const tags = ref([])
 
 function handleClear() {
   radioVal.value = ''
@@ -35,32 +35,47 @@ function handleClear() {
 function hide() {
   filterPanelRef.value.hide()
 }
+
+const handleChange = () => {
+  const newTags = inputVal.value.split(';')
+  if (newTags.length) {
+    tags.value.push(...newTags)
+  }
+}
+
+const handleClose = (i) => {
+  tags.value.splice(i, 1)
+}
 </script>
 
 <style scoped>
-:deep(.tiny-filter-panel__popover) {
+.tiny-filter-panel-demo {
+  display: flex;
   height: 194px;
-  padding-top: 8px !important;
 }
-:deep(.tiny-filter-panel-demo) {
-  height: 194px;
+.tiny-tag {
+  margin-left: 4px;
+}
+:deep(.tiny-filter-panel__popover) > div {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
 }
 .tiny-filter-panel-textarea :deep(.tiny-textarea__inner) {
   width: 276px;
-  height: 112px;
+  height: 80px;
   box-sizing: border-box;
   padding: 6px 10px;
 }
 .tiny-filter-panel-textarea :deep(.tiny-filter-panel-title) {
   font-size: 12px;
   line-height: 18px;
+  color: #808080;
 }
 .tiny-filter-panel-textarea :deep(.tiny-textarea) {
   margin-top: 8px;
 }
 :deep(.tiny-filter-panel-button) {
-  margin: 12px 0;
-  position: absolute;
-  right: 12px;
+  margin-top: 16px;
 }
 </style>

examples/sites/demos/pc/app/filter-panel/code.spec.ts

@@ -4,13 +4,15 @@ test('编码下拉框正常展示', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('filter-panel#code')
 
+  const container = page.locator('#code')
   const panel = page.locator('.tiny-filter-panel')
   const button = panel.locator('.tiny-filter-box')
+  const tags = container.locator('.tiny-tag')
 
   await button.click()
   await page.locator('textarea').isVisible()
   await page.getByText('支持输入多个值，用分号区隔').isVisible()
-  await page.getByRole('button', { name: '确定' }).isVisible()
-  await page.locator('textarea').fill('111')
-  await page.getByText('编码编码111').isVisible()
+  await page.locator('textarea').fill('标签：111')
+  await page.getByRole('button', { name: '确定' }).click()
+  await expect(tags.first()).toHaveText('标签：111')
 })

examples/sites/demos/pc/app/filter-panel/code.vue

@@ -4,44 +4,52 @@
       :popper-append-to-body="false"
       ref="filterPanel"
       label="编码编码"
+      :tip="tip"
       clearable
-      :value="value"
       @handle-clear="handleClear"
     >
       <div class="tiny-filter-panel-textarea">
         <div class="tiny-filter-panel-title">支持输入多个值，用分号区隔</div>
-        <tiny-input type="textarea" resize="none" v-model="inputVal"></tiny-input>
+        <tiny-input type="textarea" resize="none" v-model="inputVal" @change="handleChange"></tiny-input>
       </div>
-      <tiny-button size="mini" type="primary" class="tiny-filter-panel-button" @click="hide">确定</tiny-button>
+      <tiny-button size="small" type="primary" class="tiny-filter-panel-button" @click="hide">确定</tiny-button>
     </tiny-filter-panel>
+    <tiny-tag v-for="(tag, index) in tags" :key="tag" closable @close="handleClose(index)">{{ tag }}</tiny-tag>
   </div>
 </template>
 
 <script>
-import { FilterPanel, Input, Button } from '@opentiny/vue'
+import { FilterPanel, Input, Button, Tag } from '@opentiny/vue'
 
 export default {
   components: {
     TinyFilterPanel: FilterPanel,
     TinyInput: Input,
-    TinyButton: Button
+    TinyButton: Button,
+    TinyTag: Tag
   },
   data() {
     return {
+      tip: '请选择物品数量',
       inputVal: '',
-      radioVal: ''
-    }
-  },
-  computed: {
-    value() {
-      return this.radioVal + this.inputVal
+      radioVal: '',
+      tags: []
     }
   },
   methods: {
+    handleChange() {
+      const newTags = this.inputVal.split(';')
+      if (newTags.length) {
+        this.tags.push(...newTags)
+      }
+    },
     handleClear() {
       this.radioVal = ''
       this.inputVal = ''
     },
+    handleClose(i) {
+      this.tags.splice(i, 1)
+    },
     hide() {
       this.$refs.filterPanel.hide()
     }
@@ -50,29 +58,33 @@ export default {
 </script>
 
 <style scoped>
-:deep(.tiny-filter-panel__popover) {
+.tiny-filter-panel-demo {
+  display: flex;
   height: 194px;
-  padding-top: 8px !important;
 }
-:deep(.tiny-filter-panel-demo) {
-  height: 194px;
+.tiny-tag {
+  margin-left: 4px;
+}
+:deep(.tiny-filter-panel__popover) > div {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
 }
 .tiny-filter-panel-textarea :deep(.tiny-textarea__inner) {
   width: 276px;
-  height: 112px;
+  height: 80px;
   box-sizing: border-box;
   padding: 6px 10px;
 }
 .tiny-filter-panel-textarea :deep(.tiny-filter-panel-title) {
   font-size: 12px;
   line-height: 18px;
+  color: #808080;
 }
 .tiny-filter-panel-textarea :deep(.tiny-textarea) {
   margin-top: 8px;
 }
 :deep(.tiny-filter-panel-button) {
-  margin: 12px 0;
-  position: absolute;
-  right: 12px;
+  margin-top: 16px;
 }
 </style>