@opentiny/vue-docs 3.26.7 → 3.27.0

package/demos/pc/app/date-panel/format.vue

@@ -9,13 +9,23 @@
   </div>
 </template>
 
-<script setup>
-import { ref } from 'vue'
+<script>
 import { TinyDatePanel, TinyDateRange, TinyMonthRange } from '@opentiny/vue'
 
-const value = ref('2025/01/15')
-const value1 = ref(['2025/01/15', '2025/02/15'])
-const value2 = ref(['2024/03', '2025/02'])
+export default {
+  components: {
+    TinyDatePanel,
+    TinyDateRange,
+    TinyMonthRange
+  },
+  data() {
+    return {
+      value: '2025/01/15',
+      value1: ['2025/01/15', '2025/02/15'],
+      value2: ['2024/03', '2025/02']
+    }
+  }
+}
 </script>
 
 <style scoped lang="less">

package/demos/pc/app/date-panel/readonly.vue

@@ -15,16 +15,27 @@
   </div>
 </template>
 
-<script setup>
-import { ref } from 'vue'
+<script>
 import { TinyDatePanel, TinyDateRange, TinyMonthRange, TinyYearRange } from '@opentiny/vue'
 
-const value = ref('2025-01-15')
-const month = ref('2025-01')
-const year = ref('2025')
-const value1 = ref(['2025-01-15', '2025-02-15'])
-const value2 = ref(['2024-03', '2025-02'])
-const value3 = ref(['2024', '2028'])
+export default {
+  components: {
+    TinyDatePanel,
+    TinyDateRange,
+    TinyMonthRange,
+    TinyYearRange
+  },
+  data() {
+    return {
+      value: '2025-01-15',
+      month: '2025-01',
+      year: '2025',
+      value1: ['2025-01-15', '2025-02-15'],
+      value2: ['2024-03', '2025-02'],
+      value3: ['2024', '2028']
+    }
+  }
+}
 </script>
 
 <style scoped lang="less">

package/demos/pc/app/date-panel/shortcuts.vue

@@ -15,187 +15,193 @@
   </div>
 </template>
 
-<script setup>
-import { ref } from 'vue'
+<script>
 import { TinyDatePanel, TinyDateRange, TinyMonthRange, TinyYearRange } from '@opentiny/vue'
 
-const value = ref('2025-01-15')
-const month = ref('2025-01')
-const year = ref('2025')
-const value1 = ref(['2025-01-15', '2025-02-15'])
-const value2 = ref(['2024-03', '2025-02'])
-const value3 = ref(['2024', '2028'])
-const shortcuts = [
-  {
-    text: '今天',
-    onClick(picker) {
-      const date = new Date()
-      picker.$emit('pick', date)
-    }
-  },
-  {
-    text: '昨天',
-    onClick(picker) {
-      const date = new Date()
-      date.setTime(date.getTime() - 3600 * 1000 * 24)
-      picker.$emit('pick', date)
-    }
-  },
-  {
-    text: '一周前',
-    onClick(picker) {
-      const date = new Date()
-      date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
-      picker.$emit('pick', date)
-    }
-  }
-]
-
-const shortcutsMonth = [
-  {
-    text: '一个月前',
-    onClick(picker) {
-      const date = new Date()
-      date.setMonth(date.getMonth() - 1)
-      picker.$emit('pick', date)
-    }
-  },
-  {
-    text: '三个月前',
-    onClick(picker) {
-      const date = new Date()
-      date.setMonth(date.getMonth() - 3)
-      picker.$emit('pick', date)
-    }
+export default {
+  components: {
+    TinyDatePanel,
+    TinyDateRange,
+    TinyMonthRange,
+    TinyYearRange
   },
-  {
-    text: '六个月前',
-    onClick(picker) {
-      const date = new Date()
-      date.setMonth(date.getMonth() - 6)
-      picker.$emit('pick', date)
+  data() {
+    return {
+      value: '2025-01-15',
+      month: '2025-01',
+      year: '2025',
+      value1: ['2025-01-15', '2025-02-15'],
+      value2: ['2024-03', '2025-02'],
+      value3: ['2024', '2028'],
+      shortcuts: [
+        {
+          text: '今天',
+          onClick(picker) {
+            const date = new Date()
+            picker.$emit('pick', date)
+          }
+        },
+        {
+          text: '昨天',
+          onClick(picker) {
+            const date = new Date()
+            date.setTime(date.getTime() - 3600 * 1000 * 24)
+            picker.$emit('pick', date)
+          }
+        },
+        {
+          text: '一周前',
+          onClick(picker) {
+            const date = new Date()
+            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
+            picker.$emit('pick', date)
+          }
+        }
+      ],
+      shortcutsMonth: [
+          {
+            text: '一个月前',
+            onClick(picker) {
+              const date = new Date()
+              date.setMonth(date.getMonth() - 1)
+              picker.$emit('pick', date)
+            }
+          },
+          {
+            text: '三个月前',
+            onClick(picker) {
+              const date = new Date()
+              date.setMonth(date.getMonth() - 3)
+              picker.$emit('pick', date)
+            }
+          },
+          {
+            text: '六个月前',
+            onClick(picker) {
+              const date = new Date()
+              date.setMonth(date.getMonth() - 6)
+              picker.$emit('pick', date)
+            }
+          }
+      ],
+      shortcutsYear: [
+        {
+          text: '一年前',
+          onClick(picker) {
+            const date = new Date()
+            date.setFullYear(date.getFullYear() - 1)
+            picker.$emit('pick', date)
+          }
+        },
+        {
+          text: '五年前',
+          onClick(picker) {
+            const date = new Date()
+            date.setFullYear(date.getFullYear() - 5)
+            picker.$emit('pick', date)
+          }
+        },
+        {
+          text: '十年前',
+          onClick(picker) {
+            const date = new Date()
+            date.setFullYear(date.getFullYear() - 10)
+            picker.$emit('pick', date)
+          }
+        }
+      ],
+      shortcuts1: [
+        {
+          text: '最近一周',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+            picker.$emit('pick', [start, end])
+          }
+        },
+        {
+          text: '最近一个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+            picker.$emit('pick', [start, end])
+          }
+        },
+        {
+          text: '最近三个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+            picker.$emit('pick', [start, end])
+          }
+        }
+      ],
+      shortcuts2: [
+        {
+          text: '本月',
+          onClick(picker) {
+            const date = new Date()
+            const tmp = new Date(date.getFullYear(), date.getMonth() + 1, 1, 0, 0, 0)
+            const start = new Date(date.getFullYear(), date.getMonth(), 1, 0, 0, 0)
+            const end = new Date(tmp.getTime() - 1)
+            picker.$emit('pick', [start, end])
+          }
+        },
+        {
+          text: '今年至今',
+          onClick(picker) {
+            const date = new Date()
+            const start = new Date(date.getFullYear(), 0)
+            const end = new Date()
+            picker.$emit('pick', [start, end])
+          }
+        },
+        {
+          text: '最近六个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setMonth(start.getMonth() - 6)
+            picker.$emit('pick', [start, end])
+          }
+        }
+      ],
+      shortcuts3: [
+        {
+          text: '本年',
+          onClick(picker) {
+            const date = new Date()
+            const tmp = new Date(date.getFullYear(), 0, 2)
+            const start = new Date(date.getFullYear(), 0, 2)
+            const end = new Date(tmp.getTime() - 1)
+            picker.$emit('pick', [start, end])
+          }
+        },
+        {
+          text: '近五年',
+          onClick(picker) {
+            const date = new Date()
+            const start = new Date(date.getFullYear() - 5, 0, 2)
+            const end = date
+            picker.$emit('pick', [start, end])
+          }
+        },
+        {
+          text: '近十年',
+          onClick(picker) {
+            const date = new Date()
+            const start = new Date(date.getFullYear() - 10, 0, 2)
+            const end = new Date()
+            picker.$emit('pick', [start, end])
+          }
+        }
+      ]
     }
   }
-]
-
-const shortcutsYear = [
-  {
-    text: '一年前',
-    onClick(picker) {
-      const date = new Date()
-      date.setFullYear(date.getFullYear() - 1)
-      picker.$emit('pick', date)
-    }
-  },
-  {
-    text: '五年前',
-    onClick(picker) {
-      const date = new Date()
-      date.setFullYear(date.getFullYear() - 5)
-      picker.$emit('pick', date)
-    }
-  },
-  {
-    text: '十年前',
-    onClick(picker) {
-      const date = new Date()
-      date.setFullYear(date.getFullYear() - 10)
-      picker.$emit('pick', date)
-    }
-  }
-]
-
-const shortcuts1 = [
-  {
-    text: '最近一周',
-    onClick(picker) {
-      const end = new Date()
-      const start = new Date()
-      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
-      picker.$emit('pick', [start, end])
-    }
-  },
-  {
-    text: '最近一个月',
-    onClick(picker) {
-      const end = new Date()
-      const start = new Date()
-      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
-      picker.$emit('pick', [start, end])
-    }
-  },
-  {
-    text: '最近三个月',
-    onClick(picker) {
-      const end = new Date()
-      const start = new Date()
-      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
-      picker.$emit('pick', [start, end])
-    }
-  }
-]
-
-const shortcuts2 = [
-  {
-    text: '本月',
-    onClick(picker) {
-      const date = new Date()
-      const tmp = new Date(date.getFullYear(), date.getMonth() + 1, 1, 0, 0, 0)
-      const start = new Date(date.getFullYear(), date.getMonth(), 1, 0, 0, 0)
-      const end = new Date(tmp.getTime() - 1)
-      picker.$emit('pick', [start, end])
-    }
-  },
-  {
-    text: '今年至今',
-    onClick(picker) {
-      const date = new Date()
-      const start = new Date(date.getFullYear(), 0)
-      const end = new Date()
-      picker.$emit('pick', [start, end])
-    }
-  },
-  {
-    text: '最近六个月',
-    onClick(picker) {
-      const end = new Date()
-      const start = new Date()
-      start.setMonth(start.getMonth() - 6)
-      picker.$emit('pick', [start, end])
-    }
-  }
-]
-
-const shortcuts3 = [
-  {
-    text: '本年',
-    onClick(picker) {
-      const date = new Date()
-      const tmp = new Date(date.getFullYear(), 0, 2)
-      const start = new Date(date.getFullYear(), 0, 2)
-      const end = new Date(tmp.getTime() - 1)
-      picker.$emit('pick', [start, end])
-    }
-  },
-  {
-    text: '近五年',
-    onClick(picker) {
-      const date = new Date()
-      const start = new Date(date.getFullYear() - 5, 0, 2)
-      const end = date
-      picker.$emit('pick', [start, end])
-    }
-  },
-  {
-    text: '近十年',
-    onClick(picker) {
-      const date = new Date()
-      const start = new Date(date.getFullYear() - 10, 0, 2)
-      const end = new Date()
-      picker.$emit('pick', [start, end])
-    }
-  }
-]
+}
 </script>
 
 <style scoped lang="less">

package/demos/pc/app/date-panel/unlink-panels.vue

@@ -18,13 +18,23 @@
   </div>
 </template>
 
-<script setup>
-import { ref } from 'vue'
+<script>
 import { TinyDateRange, TinyMonthRange, TinyYearRange } from '@opentiny/vue'
 
-const value = ref(['2025-01-15', '2025-02-15'])
-const value1 = ref(['2024-03', '2025-02'])
-const value2 = ref(['2024', '2028'])
+export default {
+  components: {
+    TinyDateRange,
+    TinyMonthRange,
+    TinyYearRange
+  },
+  data() {
+    return {
+      value: ['2025-01-15', '2025-02-15'],
+      value1: ['2024-03', '2025-02'],
+      value2: ['2024', '2028']
+    }
+  }
+}
 </script>
 
 <style scoped lang="less">

package/demos/pc/app/date-picker/now-composition-api.vue

@@ -6,6 +6,9 @@
         <template #now>
           <div class="nowclass" @click="now">此刻（服务器时间）</div>
         </template>
+        <template #confirm="{ confirm }">
+          <tiny-button type="primary" @click="confirm">确定</tiny-button>
+        </template>
       </tiny-date-picker>
     </div>
 
@@ -18,7 +21,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { TinyDatePicker } from '@opentiny/vue'
+import { TinyDatePicker, TinyButton } from '@opentiny/vue'
 
 const value1 = ref('2020-11-11 10:10:11')
 const value2 = ref('2020-11-11 10:10:11')

package/demos/pc/app/date-picker/now.vue

@@ -6,6 +6,9 @@
         <template #now>
           <div class="nowclass" @click="now">此刻（服务器时间）</div>
         </template>
+        <template #confirm="{ confirm }">
+          <tiny-button type="primary" @click="confirm">确定</tiny-button>
+        </template>
       </tiny-date-picker>
     </div>
 
@@ -17,11 +20,12 @@
 </template>
 
 <script>
-import { TinyDatePicker } from '@opentiny/vue'
+import { TinyDatePicker, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyDatePicker
+    TinyDatePicker,
+    TinyButton
   },
   data() {
     return {

package/demos/pc/app/date-picker/slot-composition-api.vue

@@ -0,0 +1,112 @@
+<template>
+  <div class="demo-footer-slot">
+    <tiny-date-picker v-model="value" type="date" placeholder="请选择日期">
+      <template #footer="{ confirm }">
+        <div class="custom-footer end">
+          <tiny-button type="primary" @click="confirm">自定义按钮</tiny-button>
+        </div>
+      </template>
+    </tiny-date-picker>
+    <tiny-date-picker v-model="dateTimeValue" type="datetime" placeholder="请选择日期时间">
+      <template #footer="{ confirm, changeToNow }">
+        <div class="custom-footer">
+          <tiny-button type="default" @click="changeToNow">自定义此刻</tiny-button>
+          <tiny-button type="primary" @click="confirm">自定义按钮</tiny-button>
+        </div>
+      </template>
+    </tiny-date-picker>
+    <tiny-date-picker v-model="weekValue" type="week" placeholder="请选择周">
+      <template #footer="{ confirm }">
+        <div class="custom-footer end">
+          <tiny-button type="primary" @click="confirm">自定义按钮</tiny-button>
+        </div>
+      </template>
+    </tiny-date-picker>
+    <tiny-date-picker v-model="monthValue" type="month" placeholder="请选择月份">
+      <template #footer="{ confirm }">
+        <div class="custom-footer end">
+          <tiny-button type="primary" @click="confirm">自定义按钮</tiny-button>
+        </div>
+      </template>
+    </tiny-date-picker>
+    <tiny-date-picker v-model="yearValue" type="year" placeholder="请选择年份">
+      <template #footer="{ confirm }">
+        <div class="custom-footer end">
+          <tiny-button type="primary" @click="confirm">自定义按钮</tiny-button>
+        </div>
+      </template>
+    </tiny-date-picker>
+    <tiny-date-picker v-model="valueRange" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期">
+      <template #footer="{ confirm, clear }">
+        <div class="custom-footer">
+          <tiny-button type="default" @click="clear">自定义清空</tiny-button>
+          <tiny-button type="primary" @click="confirm">自定义按钮</tiny-button>
+        </div>
+      </template>
+    </tiny-date-picker>
+    <tiny-date-picker
+      v-model="valueDateTimeRange"
+      type="datetimerange"
+      start-placeholder="开始日期时间"
+      end-placeholder="结束日期时间"
+    >
+      <template #footer="{ confirm, clear }">
+        <div class="custom-footer">
+          <tiny-button type="default" @click="clear">自定义清空</tiny-button>
+          <tiny-button type="primary" @click="confirm">自定义按钮</tiny-button>
+        </div>
+      </template>
+    </tiny-date-picker>
+    <tiny-date-picker
+      v-model="valueMonthRange"
+      type="monthrange"
+      start-placeholder="开始月份"
+      end-placeholder="结束月份"
+    >
+      <template #footer>
+        <div class="custom-footer end">
+          <tiny-button type="primary">自定义按钮</tiny-button>
+        </div>
+      </template>
+    </tiny-date-picker>
+    <tiny-date-picker v-model="valueYearRange" type="yearrange" start-placeholder="开始年份" end-placeholder="结束年份">
+      <template #footer>
+        <div class="custom-footer end">
+          <tiny-button type="primary">自定义按钮</tiny-button>
+        </div>
+      </template>
+    </tiny-date-picker>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { TinyDatePicker, TinyButton } from '@opentiny/vue'
+
+const value = ref('')
+const dateTimeValue = ref('')
+const weekValue = ref('')
+const monthValue = ref('')
+const yearValue = ref('')
+const valueRange = ref([])
+const valueDateTimeRange = ref([])
+const valueMonthRange = ref([])
+const valueYearRange = ref([])
+</script>
+
+<style scoped lang="less">
+.demo-footer-slot {
+  width: 360px;
+  gap: 10px;
+  display: flex;
+  flex-direction: column;
+}
+.custom-footer {
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+}
+.end {
+  justify-content: flex-end;
+}
+</style>

package/demos/pc/app/date-picker/slot.spec.ts

@@ -0,0 +1,41 @@
+import { expect, test } from '@playwright/test'
+
+test('[DatePicker] 测试尺寸设置', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('date-picker#slot')
+
+  let btn = page.getByRole('button', { name: '自定义按钮' })
+  let nowBtn = page.getByRole('button', { name: '自定义此刻' })
+
+  await page.locator('#slot').getByRole('textbox', { name: '请选择日期', exact: true }).click()
+  await page.waitForTimeout(200)
+  await expect(btn).toBeVisible()
+
+  await page.getByRole('textbox', { name: '请选择日期时间' }).click()
+  await page.waitForTimeout(200)
+  await expect(nowBtn).toBeVisible()
+
+  await page.locator('#slot').getByRole('textbox', { name: '请选择周' }).click()
+  await page.waitForTimeout(200)
+  await expect(btn.first()).toBeVisible()
+
+  await page.locator('#slot').getByRole('textbox', { name: '请选择月份' }).click()
+  await page.waitForTimeout(200)
+  await expect(btn.first()).toBeVisible()
+
+  await page.locator('#slot').getByRole('textbox', { name: '请选择年份' }).click()
+  await page.waitForTimeout(200)
+  await expect(btn.first()).toBeVisible()
+
+  await page.getByPlaceholder('开始日期时间').click()
+  await page.waitForTimeout(200)
+  await expect(btn.first()).toBeVisible()
+
+  await page.locator('#slot').getByPlaceholder('开始月份').click()
+  await page.waitForTimeout(200)
+  await expect(btn.first()).toBeVisible()
+
+  await page.locator('#slot').getByPlaceholder('开始年份').click()
+  await page.waitForTimeout(200)
+  await expect(btn.first()).toBeVisible()
+})