@opentiny/vue-docs 3.16.2 → 3.17.1

package/demos/pc/app/button/ghost.vue

@@ -21,12 +21,12 @@ export default {
 
 <style scoped>
 .gray-bg {
-  background: #ccc;
+  background: #fafafa;
   padding: 20px 10px 10px;
 }
 .tiny-button {
   margin-bottom: 10px;
   margin-left: 0;
-  margin-right: 8px;
+  margin-right: 24px;
 }
 </style>

package/demos/pc/app/button/icon-composition-api.vue

@@ -40,6 +40,6 @@ const TinyIconSearch = iconSearch()
 .tiny-button {
   margin-bottom: 10px;
   margin-left: 0;
-  margin-right: 8px;
+  margin-right: 24px;
 }
 </style>

package/demos/pc/app/button/icon.vue

@@ -51,6 +51,6 @@ export default {
 .tiny-button {
   margin-bottom: 10px;
   margin-left: 0;
-  margin-right: 8px;
+  margin-right: 24px;
 }
 </style>

package/demos/pc/app/button/loading-composition-api.vue

@@ -17,6 +17,6 @@ import { Button as TinyButton } from '@opentiny/vue'
 .tiny-button {
   margin-bottom: 10px;
   margin-left: 0;
-  margin-right: 8px;
+  margin-right: 24px;
 }
 </style>

package/demos/pc/app/button/loading.vue

@@ -23,6 +23,6 @@ export default {
 .tiny-button {
   margin-bottom: 10px;
   margin-left: 0;
-  margin-right: 8px;
+  margin-right: 24px;
 }
 </style>

package/demos/pc/app/button/reset-time-composition-api.vue

@@ -9,3 +9,11 @@
 <script setup>
 import { Button as TinyButton } from '@opentiny/vue'
 </script>
+
+<style scoped>
+.tiny-button {
+  margin-bottom: 10px;
+  margin-left: 0;
+  margin-right: 24px;
+}
+</style>

package/demos/pc/app/button/reset-time.vue

@@ -15,3 +15,11 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.tiny-button {
+  margin-bottom: 10px;
+  margin-left: 0;
+  margin-right: 24px;
+}
+</style>

package/demos/pc/app/button/size-composition-api.vue

@@ -69,6 +69,6 @@ const TinyIconEdit = iconEdit()
 .tiny-button {
   margin-bottom: 10px;
   margin-left: 0;
-  margin-right: 8px;
+  margin-right: 24px;
 }
 </style>

package/demos/pc/app/button/size.vue

@@ -80,6 +80,6 @@ export default {
 .tiny-button {
   margin-bottom: 10px;
   margin-left: 0;
-  margin-right: 8px;
+  margin-right: 24px;
 }
 </style>

package/demos/pc/app/button/text-composition-api.vue

@@ -24,8 +24,13 @@ const TinyIconMail = iconMail()
 <style scoped>
 .title {
   margin-top: 16px;
-  padding: 10px 0 6px 0;
+  padding: 10px 0 10px 0;
   font-size: 16px;
   font-weight: bold;
 }
+.tiny-button {
+  margin-bottom: 10px;
+  margin-left: 0;
+  margin-right: 24px;
+}
 </style>

package/demos/pc/app/button/text.vue

@@ -33,8 +33,13 @@ export default {
 <style scoped>
 .title {
   margin-top: 16px;
-  padding: 10px 0 6px 0;
+  padding: 10px 0 10px 0;
   font-size: 16px;
   font-weight: bold;
 }
+.tiny-button {
+  margin-bottom: 10px;
+  margin-left: 0;
+  margin-right: 24px;
+}
 </style>

package/demos/pc/app/button-group/disabled-composition-api.vue

@@ -25,7 +25,7 @@ const groupData = ref([
 
 const disabledGroup = ref([
   { text: 'Button1', value: 1 },
-  { text: 'Button2', value: 2, disabled: true },
+  { text: 'Button2', value: 2, disabled: true, tip: '因为xxx原因被禁用' },
   { text: 'Button3', value: 3 }
 ])
 </script>

package/demos/pc/app/button-group/disabled.spec.ts

@@ -38,4 +38,8 @@ test('测试按钮是否禁用', async ({ page }) => {
   await expect(buttonGroup3.locator('button').nth(1)).toHaveCSS('background-color', 'rgb(245, 245, 246)')
   await expect(buttonGroup3.locator('button').nth(1)).toHaveCSS('border-bottom-color', 'rgb(173, 176, 184)')
   await expect(buttonGroup3.locator('button').nth(1)).toHaveCSS('color', 'rgb(173, 176, 184)')
+
+  // 按钮悬浮提示
+  await buttonGroup3.locator('button').nth(1).hover()
+  await expect(page.getByText('因为xxx原因被禁用')).toBeVisible()
 })

package/demos/pc/app/button-group/disabled.vue

@@ -29,7 +29,7 @@ export default {
       ],
       disabledGroup: [
         { text: 'Button1', value: 1 },
-        { text: 'Button2', value: 2, disabled: true },
+        { text: 'Button2', value: 2, disabled: true, tip: '因为xxx原因被禁用' },
         { text: 'Button3', value: 3 }
       ]
     }

package/demos/pc/app/button-group/slot-empty-composition-api.vue

@@ -2,7 +2,9 @@
   <div>
     <tiny-button-group :data="groupData" v-model="checkedVal"></tiny-button-group>
     <tiny-button-group :data="groupData" v-model="checkedVal">
-      <span class="custom-empty">自定义空数据</span>
+      <template #empty>
+        <span class="custom-empty">自定义空数据</span>
+      </template>
     </tiny-button-group>
   </div>
 </template>

package/demos/pc/app/button-group/slot-empty.vue

@@ -2,7 +2,9 @@
   <div>
     <tiny-button-group :data="groupData" v-model="checkedVal"></tiny-button-group>
     <tiny-button-group :data="groupData" v-model="checkedVal">
-      <span class="custom-empty">自定义空数据</span>
+      <template #empty>
+        <span class="custom-empty">自定义空数据</span>
+      </template>
     </tiny-button-group>
   </div>
 </template>

package/demos/pc/app/button-group/sup-composition-api.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-button">
     <tiny-button-group :data="groupData" v-model="checkedVal">
       <template #button4="{ sup }">
         <tiny-icon-plus-circle></tiny-icon-plus-circle>
@@ -20,7 +20,7 @@ const TinyIconPlusCircle = iconPlusCircle()
 const checkedVal = ref('Button1')
 const groupData = ref([
   {
-    text: 'Button1',
+    text: '1年',
     value: 'Button1',
     sup: {
       class: ['success-bg'],
@@ -28,7 +28,7 @@ const groupData = ref([
     }
   },
   {
-    text: 'Button2',
+    text: '2年',
     value: 'Button2',
     sup: {
       class: 'sup-icon',
@@ -36,20 +36,20 @@ const groupData = ref([
     }
   },
   {
-    text: 'Button3',
+    text: '3年',
     value: 'Button3',
     sup: {
       class: 'sup-text',
-      text: '8.8折'
+      text: '8折'
     }
   },
   {
-    text: 'Button4',
+    text: '4年',
     value: 'Button4',
     sup: {
       slot: 'button4',
       class: 'sup-slot',
-      text: '8.8折'
+      text: '8折'
     }
   }
 ])
@@ -75,3 +75,9 @@ const groupData = ref([
   vertical-align: middle;
 }
 </style>
+
+<style>
+.demo-button button {
+  width: 124px;
+}
+</style>

package/demos/pc/app/button-group/sup.spec.ts

@@ -21,12 +21,12 @@ test('测试选块角标', async ({ page }) => {
 
   // 测试文字角标
   const sup3 = getSup(item.nth(2))
-  await expect(sup3).toHaveText('8.8折')
+  await expect(sup3).toHaveText('8折')
   await expect(sup3).toHaveClass(/tiny-group-item__sup-text/)
 
   // 测试自定义角标
   const sup4 = getSup(item.nth(3))
   await expect(sup4.locator('svg')).toBeVisible()
-  await expect(sup4).toHaveText('8.8折')
+  await expect(sup4).toHaveText('8折')
   await expect(sup4).toHaveClass(/sup-slot/)
 })

package/demos/pc/app/button-group/sup.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-button">
     <tiny-button-group :data="groupData" v-model="checkedVal">
       <template #button4="{ sup }">
         <icon-plus-circle></icon-plus-circle>
@@ -26,7 +26,7 @@ export default {
       checkedVal: 'Button1',
       groupData: [
         {
-          text: 'Button1',
+          text: '1年',
           value: 'Button1',
           sup: {
             class: ['success-bg'],
@@ -34,7 +34,7 @@ export default {
           }
         },
         {
-          text: 'Button2',
+          text: '2年',
           value: 'Button2',
           sup: {
             class: 'sup-icon',
@@ -42,20 +42,20 @@ export default {
           }
         },
         {
-          text: 'Button3',
+          text: '3年',
           value: 'Button3',
           sup: {
             class: 'sup-text',
-            text: '8.8折'
+            text: '8折'
           }
         },
         {
-          text: 'Button4',
+          text: '4年',
           value: 'Button4',
           sup: {
             slot: 'button4',
             class: 'sup-slot',
-            text: '8.8折'
+            text: '8折'
           }
         }
       ]
@@ -84,3 +84,9 @@ export default {
   vertical-align: middle;
 }
 </style>
+
+<style>
+.demo-button button {
+  width: 124px;
+}
+</style>

package/demos/pc/app/button-group/webdoc/button-group.js

@@ -37,9 +37,9 @@ export default {
       },
       desc: {
         'zh-CN':
-          '<p>通过 <code>disabled</code> 设置按钮组是否禁用，数据项设置 <code>disabled</code> 属性可以禁用单个按钮。</p>',
+          '<p>通过 <code>disabled</code> 设置按钮组是否禁用，数据项设置 <code>disabled</code> 属性可以禁用单个按钮，数据项设置 <code>tip</code> 属性(v3.17.0版本增加此功能)增加按钮悬浮提示功能。</p>',
         'en-US':
-          '<p>By setting whether the button group is disabled through <code>disabled</code> , and setting the <code>disabled</code> property of the data item, individual buttons can be disabled.</p>'
+          '<p>You can set whether to disable the button group through <code>disabled</code>. You can set the <code>disabled</code> attribute to disable a single button. You can set the <code>tip</code> attribute to add the reason for disabling the button. </p></p>'
       },
       codeFiles: ['disabled.vue']
     },
@@ -113,12 +113,15 @@ export default {
     {
       demoId: 'slot-empty',
       name: {
-        'zh-CN': '空数据插槽',
-        'en-US': 'Empty slot'
+        'zh-CN': '空数据',
+        'en-US': 'No data'
+      },
+      metaData: {
+        new: '3.17.1'
       },
       desc: {
-        'zh-CN': '<p>当数据为空时，默认会显示暂无数据，通过默认插槽自定义内容。</p>',
-        'en-US': '<p>When the data is empty, customize the content via the <code>empty</code> slot.</p>'
+        'zh-CN': '<p>当数据为空时，默认会显示"暂无数据"，通过 <code>empty</code> 插槽自定义内容。</p>',
+        'en-US': '<p>Show "No data" when the data is empty, customize the content via the <code>empty</code> slot.</p>'
       },
       codeFiles: ['slot-empty.vue']
     },

package/demos/pc/app/calendar/dynamic-add-schedule.spec.ts

@@ -3,24 +3,11 @@ import { test, expect } from '@playwright/test'
 test('添加日程事件', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('calendar#dynamic-add-schedule')
+
   const selectedDay4 = page.getByText('通知事项通知事项A', { exact: true })
   const dayFun4 = page.locator('.tiny-calendar__tip-content').filter({ hasText: '请注意该通知事项A' })
 
-  const selectedDay13 = page.getByRole('listitem').filter({ hasText: '这是一条警告' })
-  const dayFun13 = page.locator('.tiny-calendar__tip-content').filter({ hasText: '这是一条警告消息这是一条警告' })
-
-  const selectedDay14 = page.getByRole('listitem').filter({ hasText: '这是一条错误' })
-  const datFun14 = page.locator('.tiny-calendar__tip-content').filter({ hasText: '这是一条错误，还有错误' })
-
   await selectedDay4.hover()
   await page.waitForTimeout(200)
   await expect(dayFun4).toBeVisible()
-
-  await selectedDay13.hover()
-  await page.waitForTimeout(200)
-  await expect(dayFun13).toBeVisible()
-
-  await selectedDay14.hover()
-  await page.waitForTimeout(200)
-  await expect(datFun14).toBeVisible()
 })

package/demos/pc/app/calendar-view/set-working-day-composition-api.vue

@@ -39,10 +39,30 @@ const setDays = (type) => {
     return
   }
   map[type].value.push(...selectedDate.value)
+
+  selectedDate.value.forEach((date) => {
+    if (type === 'workingDays') {
+      removeFromArray(offDays.value, date)
+      removeFromArray(holidays.value, date)
+    } else if (type === 'offDays') {
+      removeFromArray(holidays.value, date)
+      removeFromArray(workingDays.value, date)
+    } else {
+      removeFromArray(offDays.value, date)
+      removeFromArray(workingDays.value, date)
+    }
+  })
   selectedDates.value = []
   selectedDate.value = []
 }
 
+const removeFromArray = (array, item) => {
+  const index = array.indexOf(item)
+  if (index !== -1) {
+    array.splice(index, 1)
+  }
+}
+
 const setDayBgColor = (date) => {
   if (workingDays.value.includes(date)) {
     return 'blue'

package/demos/pc/app/calendar-view/set-working-day.vue

@@ -41,9 +41,29 @@ export default {
         return
       }
       this[type].push(...this.selectedDate)
+
+      this.selectedDate.forEach((date) => {
+        if (type === 'workingDays') {
+          this.removeFromArray(this.offDays, date)
+          this.removeFromArray(this.holidays, date)
+        } else if (type === 'offDays') {
+          this.removeFromArray(this.holidays, date)
+          this.removeFromArray(this.workingDays, date)
+        } else {
+          this.removeFromArray(this.offDays, date)
+          this.removeFromArray(this.workingDays, date)
+        }
+      })
       this.selectedDates = []
       this.selectedDate = []
     },
+    removeFromArray(array, item) {
+      const index = array.indexOf(item)
+      if (index !== -1) {
+        array.splice(index, 1)
+      }
+    },
+
     setDayBgColor(date) {
       if (this.workingDays.includes(date)) {
         return 'blue'

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

@@ -13,7 +13,7 @@
 import { Card as TinyCard } from '@opentiny/vue'
 import { ref } from 'vue'
 
-const image = ref(`${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/button-image.png`)
+const image = ref(`${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/dsj.png`)
 </script>
 
 <style scoped>

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

@@ -18,7 +18,7 @@ export default {
   },
   data() {
     return {
-      image: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/button-image.png`
+      image: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/dsj.png`
     }
   }
 }

package/demos/pc/app/card/card-select-composition-api.vue

@@ -0,0 +1,165 @@
+<template>
+  <div class="card-wrap">
+    <!-- 单选demo -->
+    <tiny-card-group v-model="radioValue" check-type="radio">
+      <tiny-card
+        id="smb-card"
+        v-for="item in dataArr"
+        :key="item.title"
+        :label="item.title"
+        check-mode="simple"
+        custom-class="smb-card"
+      >
+        <div class="card-content">
+          <img class="card-image" :src="item.imageSrc" :alt="item.imageAlt || ''" />
+          <div class="card-text">
+            <div class="card-title">{{ item.title }}</div>
+            <div class="card-descript">
+              {{ item.content }}
+            </div>
+          </div>
+        </div>
+        <div v-if="item.options" class="card-stlecting">
+          <tiny-select v-model="item.selectVal" :options="item.options"> </tiny-select>
+        </div>
+      </tiny-card>
+    </tiny-card-group>
+
+    <!-- 多选demo -->
+    <tiny-card-group v-model="checkboxValue" check-type="checkbox">
+      <tiny-card
+        id="smb-card"
+        v-for="item in dataArr"
+        :key="item.title"
+        :label="item.title"
+        check-mode="badge"
+        custom-class="smb-card"
+      >
+        <div class="card-content">
+          <img class="card-image" :src="item.imageSrc" :alt="item.imageAlt || ''" />
+          <div class="card-text">
+            <div class="card-title">{{ item.title }}</div>
+            <div class="card-descript">
+              {{ item.content }}
+            </div>
+          </div>
+        </div>
+        <div v-if="item.options" class="card-stlecting">
+          <tiny-select v-model="item.selectVal" :options="item.options"> </tiny-select>
+        </div>
+      </tiny-card>
+    </tiny-card-group>
+  </div>
+</template>
+
+<script setup>
+import { Card as TinyCard, CardGroup as TinyCardGroup, Select as TinySelect } from '@opentiny/vue'
+import { ref } from 'vue'
+
+const radioValue = ref('TinyVue')
+const checkboxValue = ref(['TinyVue', 'TinyNG'])
+const dataArr = ref([
+  {
+    title: 'TinyVue',
+    content: '^15.0.01',
+    imageSrc: ''
+  },
+  {
+    title: 'TinyNG',
+    content: '^16.0.01',
+    imageSrc: ''
+  },
+  {
+    title: 'TinyEngine',
+    content: '^14.0.01',
+    imageSrc: '',
+    selectVal: 'TinyVue',
+    options: [
+      { value: 'TinyVue', label: 'TinyVue' },
+      { value: 'TinyNG', label: 'TinyNG' },
+      { value: 'TinyEngine', label: 'TinyEngine' }
+    ]
+  }
+])
+</script>
+
+<style scoped>
+.card-wrap {
+  width: 100%;
+  background: #f5f5f5;
+  padding: 16px;
+  display: flex;
+  justify-content: space-between;
+}
+.my-card {
+  width: 80%;
+  cursor: pointer;
+  padding: 20px;
+}
+.content {
+  display: flex;
+}
+.content img {
+  width: 80px;
+  height: 80px;
+  margin-right: 20px;
+}
+/* 业务功能demo */
+.smb-card {
+  display: inline-block;
+  position: relative;
+  width: 220px;
+  margin: 25px;
+  border-radius: 8px;
+  cursor: pointer;
+  background-color: #fafafa;
+}
+
+.smb-card:hover {
+  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
+}
+.card-content {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  padding: 24px;
+}
+.card-image {
+  display: block;
+  width: 40px;
+  height: 40px;
+}
+.card-text {
+  margin-left: 16px;
+}
+.card-title {
+  font-size: 14px;
+  text-align: left;
+  line-height: 22px;
+  color: #252b3a;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  max-width: 136px;
+  overflow: hidden;
+}
+
+.card-descript {
+  font-size: 12px;
+  text-align: left;
+  line-height: 20px;
+  color: #575d6c;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  max-width: 136px;
+  overflow: hidden;
+}
+.card-stlecting {
+  border-top: 1px solid rgba(0, 0, 0, 0.05);
+}
+</style>
+
+<style>
+#smb-card .tiny-card--small-padding {
+  padding: 0;
+}
+</style>