@opentiny/vue-docs 2.2.20 → 2.2.21

package/demos/pc/app/action-menu/card-mode.vue

@@ -0,0 +1,39 @@
+<template>
+  <tiny-action-menu :options="options" mode="card"> </tiny-action-menu>
+</template>
+
+<script>
+import { ActionMenu } from '@opentiny/vue'
+import { iconWebPlus, iconSuccessful, iconCloseSquare } from '@opentiny/vue-icon'
+
+export default {
+  components: {
+    TinyActionMenu: ActionMenu
+  },
+  data() {
+    return {
+      options: [
+        {
+          label: '远程登陆',
+          icon: iconWebPlus()
+        },
+        {
+          label: '开机',
+          icon: iconSuccessful()
+        },
+        {
+          label: '关机',
+          icon: iconCloseSquare()
+        },
+        {
+          label: '重启'
+        },
+        {
+          label: '网络设置',
+          children: [{ label: '更改安全组' }, { label: '切换VPC', divided: true }]
+        }
+      ]
+    }
+  }
+}
+</script>

package/demos/pc/app/action-menu/webdoc/action-menu.js

@@ -80,6 +80,20 @@ export default {
       },
       codeFiles: ['spacing.vue']
     },
+    {
+      demoId: 'card-mode',
+      name: {
+        'zh-CN': '菜单模式',
+        'en-US': 'Mode'
+      },
+      desc: {
+        'zh-CN':
+          '<p>通过 <code>mode</code> 属性设置菜单模式以适配在不同场景中能够使用，例如：菜单按钮在卡片中使用，可以配置为 <code>card</code>，卡片模式字体为黑色，间距为10px。  <code>mode</code> 默认为值<code>default</code>。</p>',
+        'en-US':
+          '<p>Use the <code>mode</code> attribute to set the menu mode so that the vehicle can be used in different scenarios. For example, if the menu button is used in configuration, it can be configured as <code>card</code>, and the auxiliary mode font is Black with 10px spacing. <code>mode</code> defaults to <code>default</code>. </p>'
+      },
+      codeFiles: ['card-mode.vue']
+    },
     {
       demoId: 'popper-class',
       name: {

package/demos/pc/app/calendar-view/calendar-event-composition-api.vue

@@ -8,6 +8,7 @@
     @week-change="weekChange"
     @year-change="yearChange"
     @month-change="monthChange"
+    @mode-change="modeChange"
   >
   </tiny-calendar-view>
 </template>
@@ -37,4 +38,8 @@ const yearChange = (newVal, oldVal) => {
 const monthChange = (newVal, oldVal) => {
   Modal.message({ message: `月改变事件: ${newVal}月, ${oldVal}月`, status: 'info' })
 }
+
+const modeChange = (val) => {
+  Modal.message({ message: `模式切换事件: ${val}`, status: 'info' })
+}
 </script>

package/demos/pc/app/calendar-view/calendar-event.spec.ts

@@ -9,6 +9,8 @@ test('事件', async ({ page }) => {
   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')
   await timeBtn.click()
   await page.waitForTimeout(100)
   await leftYear.click()
@@ -22,4 +24,7 @@ test('事件', async ({ page }) => {
   await rightSvg.click()
   await page.waitForTimeout(100)
   await expect(timeInput).toHaveText('2022 年 06 月')
+  await mode.click()
+  await page.waitForTimeout(100)
+  await expect(modalVal).toBeVisible()
 })

package/demos/pc/app/calendar-view/calendar-event.vue

@@ -8,12 +8,13 @@
     @week-change="weekChange"
     @year-change="yearChange"
     @month-change="monthChange"
+    @mode-change="modeChange"
   >
   </tiny-calendar-view>
 </template>
 
 <script>
-import { CalendarView } from '@opentiny/vue'
+import { CalendarView, Modal } from '@opentiny/vue'
 
 export default {
   components: {
@@ -39,6 +40,9 @@ export default {
     },
     monthChange(newVal, oldVal) {
       Modal.message({ message: `月改变事件: ${newVal}月, ${oldVal}月`, status: 'info' })
+    },
+    modeChange(val) {
+      Modal.message({ message: `模式切换事件: ${val}`, status: 'info' })
     }
   }
 }

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

@@ -1,6 +1,7 @@
 <template>
   <tiny-calendar-view
     ref="calendar"
+    v-model="selectedDates"
     :multi-select="true"
     :year="2023"
     :month="5"
@@ -24,6 +25,7 @@ const workingDays = ref([])
 const offDays = ref([])
 const holidays = ref([])
 const selectedDate = ref([])
+const selectedDates = ref([])
 
 const map = {
   workingDays,
@@ -37,6 +39,7 @@ const setDays = (type) => {
     return
   }
   map[type].value.push(...selectedDate.value)
+  selectedDates.value = []
   selectedDate.value = []
 }
 

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

@@ -1,6 +1,7 @@
 <template>
   <tiny-calendar-view
     ref="calendar"
+    v-model="selectedDates"
     :multi-select="true"
     :year="2023"
     :month="5"
@@ -26,6 +27,7 @@ export default {
   },
   data() {
     return {
+      selectedDates: [],
       workingDays: [],
       offDays: [],
       holidays: [],
@@ -39,6 +41,7 @@ export default {
         return
       }
       this[type].push(...this.selectedDate)
+      this.selectedDates = []
       this.selectedDate = []
     },
     setDayBgColor(date) {

package/demos/pc/app/calendar-view/webdoc/calendar-view.js

@@ -32,11 +32,11 @@ export default {
       demoId: 'calendar-disabled-day',
       name: {
         'zh-CN': '日期禁用',
-        'en-US': ''
+        'en-US': 'Date Disabled'
       },
       desc: {
         'zh-CN': '<p>通过 <code>disabled</code> 回调函数来禁用某些日期。</p>\n',
-        'en-US': '<p></p>\n'
+        'en-US': '<p>Disable certain days via the <code>disabled</code> callback function.</p>\n'
       },
       codeFiles: ['calendar-disabled-day.vue']
     },
@@ -44,11 +44,12 @@ export default {
       demoId: 'calendar-schedule-slot',
       name: {
         'zh-CN': '日程模式插槽',
-        'en-US': ''
+        'en-US': 'Schedule Mode Slot'
       },
       desc: {
         'zh-CN': '<p>日程模式下内容区提供 weekday1-weekday7 这 7 个插槽，方便用户自定义日程展示。</p>\n',
-        'en-US': '<p></p>\n'
+        'en-US':
+          '<p>In schedule mode, the content area provides seven slots from weekday1 to weekday7 for users to customize schedule display.</p>\n'
       },
       codeFiles: ['calendar-schedule-slot.vue']
     },
@@ -56,11 +57,12 @@ export default {
       demoId: 'calendar-timeline-slot',
       name: {
         'zh-CN': '时间线插槽',
-        'en-US': ''
+        'en-US': 'Timeline Slots'
       },
       desc: {
         'zh-CN': '<p>时间下模式下提供 timeline1-timeline7 这 7 个插槽，方便用户自定义日程展示。</p>\n',
-        'en-US': '<p></p>\n'
+        'en-US':
+          '<p>In time mode, seven slots from timeline1 to timeline7 are provided for users to customize the schedule display.</p>\n'
       },
       codeFiles: ['calendar-timeline-slot.vue']
     },
@@ -68,11 +70,12 @@ export default {
       demoId: 'calendar-timeline-range',
       name: {
         'zh-CN': '时间线范围配置',
-        'en-US': ''
+        'en-US': 'Timeline Range Configuration'
       },
       desc: {
         'zh-CN': '<p>通过dayTimes属性配置时间线模式下所展示的时间范围，默认为[8,18]，可配范围[0,23]。</p>\n',
-        'en-US': '<p></p>\n'
+        'en-US':
+          '<p>Use the dayTimes attribute to set the time range displayed in timeline mode. The default value is [8,18], and the value range is [0,23].</p>\n'
       },
       codeFiles: ['calendar-timeline-range.vue']
     },
@@ -80,11 +83,11 @@ export default {
       demoId: 'multi-select',
       name: {
         'zh-CN': '日期多选',
-        'en-US': ''
+        'en-US': 'Multiple date selection'
       },
       desc: {
         'zh-CN': '<p>设置 mult-select = true 属性后，可开启日期多选。</p>\n',
-        'en-US': '<p></p>\n'
+        'en-US': '<p>Set mult-select = true to enable multiple date selection.</p>\n'
       },
       codeFiles: ['multi-select.vue']
     },
@@ -92,12 +95,13 @@ export default {
       demoId: 'calendar-day-mark',
       name: {
         'zh-CN': '日期标记',
-        'en-US': ''
+        'en-US': 'Date Marker'
       },
       desc: {
         'zh-CN':
           '<p>通过showMark回调函数来标记某些日期，markColor属性设置标记的颜色，此功能只在时间线模式和日程模式生效。markColor可选颜色同 theme</p>\n',
-        'en-US': '<p></p>\n'
+        'en-US':
+          '<p>Use the showMark callback function to mark some dates. The markColor attribute is used to set the mark color. This function takes effect only in timeline mode and agenda mode. markColor Optional Color Same as theme</p>\n'
       },
       codeFiles: ['calendar-day-mark.vue']
     },
@@ -109,7 +113,7 @@ export default {
       },
       desc: {
         'zh-CN': '<p>通过作用域插槽 header 自定义需要显示的头部区域。</p>\n',
-        'en-US': '<p></p>\n'
+        'en-US': '<p>Customize the header area to be displayed through the scope slot header.</p>\n'
       },
       codeFiles: ['custom-header.vue']
     },
@@ -134,7 +138,8 @@ export default {
       desc: {
         'zh-CN':
           '<p>自定义日期单元格背景色。</p>\n<p>目前只支持预置的颜色，可选颜色blue、green、red、yellow、purple、cyan、grey</p>\n',
-        'en-US': '<p></p>\n'
+        'en-US':
+          '<p>Customize the background color of the date cell. </p>\n<p>Currently, only preset colors are supported. The options are blue, green, red, yellow, purple, cyan, and grey.</p>'
       },
       codeFiles: ['custom-day-bg-color.vue']
     },
@@ -142,11 +147,12 @@ export default {
       demoId: 'set-working-day',
       name: {
         'zh-CN': '设置工作日或节假日',
-        'en-US': ''
+        'en-US': 'Setting Workdays or Holidays'
       },
       desc: {
-        'zh-CN': '<p>可以结合日期多选，自定义背景色，工具栏插槽等功能实现设置工作日或节假日的功能</p>\n',
-        'en-US': '<p></p>\n'
+        'zh-CN': '<p>可以结合日期多选，自定义背景色，工具栏插槽等功能实现设置工作日或节假日的功能。</p>\n',
+        'en-US':
+          '<p>You can set workdays or holidays by using the functions such as selecting multiple dates, customizing background colors, and toolbar slots.</p>\n'
       },
       codeFiles: ['set-working-day.vue']
     },
@@ -154,12 +160,29 @@ export default {
       demoId: 'calendar-event',
       name: {
         'zh-CN': '事件',
-        'en-US': ''
+        'en-US': 'Event'
       },
       desc: {
         'zh-CN':
-          '<p>日历抛出的事件有以下这些：</p>\n<p>new-schedule:新增日程按钮点击事件</p>\n<p>selected-date-change:选中日期改变事件</p>\n<p>prev-week-click：上一周按钮点击事件</p>\n<p>next-week-click：下一周按钮点击事件</p>\n<p>week-change：周改变事件</p>\n<p>year-change：年改变事件</p>\n<p>month-change：月改变事件</p>\n',
-        'en-US': '<p></p>\n'
+          '<p>日历抛出的事件有以下这些：</p>\n' +
+          '<p>new-schedule：新增日程按钮点击事件</p>\n' +
+          '<p>selected-date-change：选中日期改变事件</p>\n' +
+          '<p>prev-week-click：上一周按钮点击事件</p>\n' +
+          '<p>next-week-click：下一周按钮点击事件</p>\n' +
+          '<p>week-change：周改变事件</p>\n' +
+          '<p>year-change：年改变事件</p>\n' +
+          '<p>month-change：月改变事件</p>\n' +
+          '<p>mode-change：模式切换事件</p>',
+        'en-US':
+          '<p>Calendar throws the following events:</p>\n' +
+          '<p>new-schedule: Add a schedule button click event</p>\n' +
+          '<p>selected-date-change: selected date change event</p>\n' +
+          '<p>prev-week-click: button click event of the last week</p>\n' +
+          '<p>next-week-click: button click event in the next week</p>\n' +
+          '<p>week-change: week change event</p>\n' +
+          '<p>year-change: year change event</p>\n' +
+          '<p>month-change: month change event</p>\n' +
+          '<p>mode-change: mode switching event</p>'
       },
       codeFiles: ['calendar-event.vue']
     }

package/demos/pc/app/cascader/slot-composition-api.vue

@@ -0,0 +1,226 @@
+<template>
+  <div>
+    <div class="my20">自定义节点,为节点添加提示</div>
+    <tiny-cascader v-model="value1" :options="options">
+      <template #default="{ node }">
+        <span :title="node.label"> {{ node.label }} <tiny-icon-share /></span>
+      </template>
+    </tiny-cascader>
+    <div class="my20">自定义空数据插槽</div>
+    <tiny-cascader v-model="value2" :options="[]">
+      <template #no-data>
+        <div>no-data</div>
+      </template>
+    </tiny-cascader>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { Cascader as TinyCascader } from '@opentiny/vue'
+import { iconShare } from '@opentiny/vue-icon'
+
+const tinyIconShare = iconShare()
+const value1 = ref('')
+const value2 = ref('')
+const options = ref([
+  {
+    value: 'zhinan',
+    label: '指南',
+    children: [
+      {
+        value: 'anzhuang',
+        label: '安装',
+        children: [
+          {
+            value: 'xiangmudengji',
+            label: '项目登记'
+          },
+          {
+            value: 'huanjingzhunbei',
+            label: '环境准备'
+          },
+          {
+            value: 'anzhuangcli',
+            label: '安装 CLI'
+          },
+          {
+            value: 'chuangjianxiangmu',
+            label: '创建项目'
+          }
+        ]
+      },
+      {
+        value: 'kaifa',
+        label: '开发',
+        children: [
+          {
+            value: 'yinruzujian',
+            label: '引入组件'
+          },
+          {
+            value: 'monishuju',
+            label: '模拟数据'
+          }
+        ]
+      }
+    ]
+  },
+  {
+    value: 'zujian',
+    label: '组件',
+    children: [
+      {
+        value: 'basic',
+        label: '框架风格',
+        children: [
+          {
+            value: 'layout',
+            label: 'Layout 布局'
+          },
+          {
+            value: 'color',
+            label: 'Color 色彩'
+          },
+          {
+            value: 'font',
+            label: 'Font 字体'
+          },
+          {
+            value: 'icon',
+            label: 'Icon 图标'
+          }
+        ]
+      },
+      {
+        value: 'form',
+        label: '表单组件',
+        children: [
+          {
+            value: 'radio',
+            label: 'Radio 单选框'
+          },
+          {
+            value: 'checkbox',
+            label: 'Checkbox 多选框'
+          },
+          {
+            value: 'input',
+            label: 'Input 输入框'
+          },
+          {
+            value: 'number',
+            label: 'Numeric 计数器'
+          },
+          {
+            value: 'select',
+            label: 'Select 选择器'
+          },
+          {
+            value: 'cascader',
+            label: 'Cascader 级联选择器'
+          },
+          {
+            value: 'switch',
+            label: 'Switch 开关'
+          },
+          {
+            value: 'slider',
+            label: 'Slider 滑块'
+          },
+          {
+            value: 'time-picker',
+            label: 'TimePicker 时间选择器'
+          },
+          {
+            value: 'date-picker',
+            label: 'DatePicker 日期选择器'
+          },
+          {
+            value: 'form',
+            label: 'Form 表单'
+          }
+        ]
+      },
+      {
+        value: 'data',
+        label: '数据组件',
+        children: [
+          {
+            value: 'tree',
+            label: 'Tree 树形控件'
+          },
+          {
+            value: 'pager',
+            label: 'Pager 分页'
+          }
+        ]
+      },
+      {
+        value: 'notice',
+        label: '提示组件',
+        children: [
+          {
+            value: 'alert',
+            label: 'Alert 警告'
+          },
+          {
+            value: 'loading',
+            label: 'Loading 加载'
+          }
+        ]
+      },
+      {
+        value: 'navigation',
+        label: '导航组件',
+        children: [
+          {
+            value: 'menu',
+            label: 'NavMenu 导航菜单'
+          },
+          {
+            value: 'tabs',
+            label: 'Tabs 标签页'
+          },
+          {
+            value: 'breadcrumb',
+            label: 'Breadcrumb 面包屑'
+          },
+          {
+            value: 'steps',
+            label: 'Steps 步骤条'
+          }
+        ]
+      },
+      {
+        value: 'others',
+        label: '其他组件',
+        children: [
+          {
+            value: 'rate',
+            label: 'Rate 评分'
+          },
+          {
+            value: 'tag',
+            label: 'Tag 标签'
+          },
+          {
+            value: 'usercontact',
+            label: 'UserContact 联系人'
+          },
+          {
+            value: 'slidebar',
+            label: 'SlideBar 滚动块'
+          }
+        ]
+      }
+    ]
+  }
+])
+</script>
+
+<style scoped>
+.my20 {
+  margin: 20px 0;
+}
+</style>

package/demos/pc/app/cascader/slot.spec.ts

@@ -0,0 +1,16 @@
+import { test, expect } from '@playwright/test'
+
+test('基本用法', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('cascader#slot')
+
+  // 自定义节点
+  await page.getByRole('textbox', { name: '请选择' }).nth(0).click()
+  await expect(page.getByText('指南', { exact: true })).toHaveAttribute('title', '指南')
+  await page.waitForTimeout(100)
+
+  // 无数据
+  await page.getByRole('textbox', { name: '请选择' }).nth(1).click()
+  const cascader = page.locator('.tiny-cascader-menu__no-data')
+  await expect(cascader).toHaveText('no-data')
+})