@opentiny/vue-docs 3.19.0 → 3.19.2

package/demos/.eslintrc.js

@@ -3,6 +3,7 @@
 /** @type {import('eslint').Linter.Config} */
 module.exports = {
   rules: {
-    'no-console': 'off'
+    'no-console': 'off',
+    'vue/no-unused-vars': 'off'
   }
 }

package/demos/apis/tag-group.js

@@ -32,7 +32,7 @@ export default {
         },
         {
           name: 'size',
-          type: "'medium' | 'small' | 'mini'",
+          type: "'medium' | 'small'",
           defaultValue: "'medium'",
           desc: {
             'zh-CN': '尺寸',

package/demos/apis/tag.js

@@ -271,7 +271,7 @@ type IEffect = 'dark' | 'light' | 'plain'
       name: 'ISize',
       type: 'type',
       code: `
-type ISize = 'medium' | 'small' | 'mini' | ''
+type ISize = 'medium' | 'small' | ''
 `
     },
     {

package/demos/mobile/app/tabs/expand.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="demo-tabs">
     <tiny-tabs v-model="activeName" show-expand-tabs expand-tabs-title="请选择" expand-tabs-mode="columns">
-      <tiny-tab-item :key="item.name" v-for="item in Tabs" :title="item.title" :name="item.name"> </tiny-tab-item>
+      <tiny-tab-item :key="item.name" v-for="item in tabs" :title="item.title" :name="item.name"> </tiny-tab-item>
     </tiny-tabs>
   </div>
 </template>
@@ -16,7 +16,7 @@ export default {
   },
   data() {
     return {
-      TinyTabs: [
+      tabs: [
         {
           title: '标签 1',
           name: '1',

package/demos/mobile-first/app/tabs/tabdata-title.vue

@@ -1,6 +1,6 @@
 <template>
   <tiny-tabs v-model="activeName" v-if="showTab" tab-style="card" :with-close="true" @close="close">
-    <tiny-tab-item :key="item.name" v-for="item in Tabs" :title="item.title" :name="item.name">
+    <tiny-tab-item :key="item.name" v-for="item in tabs" :title="item.title" :name="item.name">
       {{ item.content }}
     </tiny-tab-item>
   </tiny-tabs>
@@ -18,12 +18,12 @@ export default {
     return {
       activeName: '',
       showTab: false,
-      TinyTabs: []
+      tabs: []
     }
   },
   mounted() {
     setTimeout(() => {
-      this.TinyTabs = [
+      this.tabs = [
         {
           title: '表单组件',
           name: 'first',
@@ -57,7 +57,7 @@ export default {
   },
   methods: {
     close(name) {
-      this.TinyTabs = this.TinyTabs.filter((tab) => {
+      this.tabs = this.tabs.filter((tab) => {
         return tab.name !== name
       })
     }

package/demos/mobile-first/app/tabs/tabs-draggable.vue

@@ -12,7 +12,7 @@
     @tab-drag-over="handleOver"
     @tab-drag-end="handleEnd"
   >
-    <tiny-tab-item :key="item.name" v-for="item in Tabs" :title="item.title" :name="item.name">
+    <tiny-tab-item :key="item.name" v-for="item in tabs" :title="item.title" :name="item.name">
       {{ item.content }}
     </tiny-tab-item>
   </tiny-tabs>
@@ -34,7 +34,7 @@ export default {
       dropConfig: {
         plugin: Sortable
       },
-      TinyTabs: [
+      tabs: [
         {
           title: 'Tab 1',
           name: '1',
@@ -62,15 +62,15 @@ export default {
     },
     handleEnd(event) {
       const { oldDraggableIndex, newDraggableIndex } = event
-      const tab = this.TinyTabs.splice(oldDraggableIndex, 1)[0]
-      this.TinyTabs.splice(newDraggableIndex, 0, tab)
+      const tab = this.tabs.splice(oldDraggableIndex, 1)[0]
+      this.tabs.splice(newDraggableIndex, 0, tab)
 
-      console.log(this.TinyTabs)
+      console.log(this.tabs)
     },
     handleAdd() {
-      this.TinyTabs.push({
-        title: 'Tab ' + String(this.TinyTabs.length + 1),
-        name: String(this.TinyTabs.length + 1),
+      this.tabs.push({
+        title: 'Tab ' + String(this.tabs.length + 1),
+        name: String(this.tabs.length + 1),
         content: '动态增加tabitem'
       })
     }

package/demos/mobile-first/app/tabs/tabs-events-add.vue

@@ -1,6 +1,6 @@
 <template>
   <tiny-tabs v-model="activeName" :with-add="true" @add="add" tab-style="card">
-    <tiny-tab-item :key="item.name" v-for="item in Tabs" :title="item.title" :name="item.name">
+    <tiny-tab-item :key="item.name" v-for="item in tabs" :title="item.title" :name="item.name">
       {{ item.content }}
     </tiny-tab-item>
   </tiny-tabs>
@@ -16,7 +16,7 @@ export default {
   },
   data() {
     return {
-      TinyTabs: [
+      tabs: [
         {
           title: '表单组件',
           name: 'first',
@@ -49,7 +49,7 @@ export default {
         message: '动态增加 tabitem'
       })
 
-      this.TinyTabs.push({
+      this.tabs.push({
         title: 'Tab ++',
         name: ++this.tabIndex + '',
         content: '动态增加 tabitem'

package/demos/mobile-first/app/tabs/tabs-events-close.vue

@@ -1,6 +1,6 @@
 <template>
   <tiny-tabs v-model="activeName" tab-style="card" :with-close="true" :before-close="beforeClose" @close="close">
-    <tiny-tab-item :key="item.name" v-for="item in Tabs" :title="item.title" :name="item.name">
+    <tiny-tab-item :key="item.name" v-for="item in tabs" :title="item.title" :name="item.name">
       {{ item.content }}
     </tiny-tab-item>
   </tiny-tabs>
@@ -17,7 +17,7 @@ export default {
   data() {
     return {
       activeName: 'first',
-      TinyTabs: [
+      tabs: [
         {
           title: '表单组件',
           name: 'first',
@@ -57,7 +57,7 @@ export default {
         message: '关闭 ' + name + ' 页签'
       })
 
-      this.TinyTabs = this.TinyTabs.filter((tab) => {
+      this.tabs = this.tabs.filter((tab) => {
         return tab.name !== name
       })
     }

package/demos/mobile-first/app/tabs/tabs-events-edit.vue

@@ -1,6 +1,6 @@
 <template>
   <tiny-tabs v-model="activeName" tab-style="card" editable @edit="edit">
-    <tiny-tab-item :key="item.name" v-for="item in Tabs" :title="item.title" :name="item.name">
+    <tiny-tab-item :key="item.name" v-for="item in tabs" :title="item.title" :name="item.name">
       {{ item.content }}
     </tiny-tab-item>
   </tiny-tabs>
@@ -17,7 +17,7 @@ export default {
   data() {
     return {
       activeName: 'first',
-      TinyTabs: [
+      tabs: [
         {
           title: '表单组件',
           name: 'first',

package/demos/mobile-first/app/tabs/tabs-tabs.vue

@@ -1,6 +1,6 @@
 <template>
   <tiny-tabs v-model="activeName" v-if="showTab" tab-style="card" :with-close="true" @close="close">
-    <tiny-tab-item :key="item.name" v-for="item in Tabs" :title="item.title" :name="item.name">
+    <tiny-tab-item :key="item.name" v-for="item in tabs" :title="item.title" :name="item.name">
       {{ item.content }}
       <tiny-tabs v-model="activeName1" v-if="item.name === 'f1'">
         <tiny-tab-item title="s1子标签页" name="s1">
@@ -32,7 +32,7 @@ export default {
       activeName: 'f1',
       activeName2: 'ss1',
       showTab: true,
-      TinyTabs: [
+      tabs: [
         {
           title: '表单组件',
           name: 'f1',
@@ -53,7 +53,7 @@ export default {
   },
   methods: {
     close(name) {
-      this.TinyTabs = this.TinyTabs.filter((tab) => {
+      this.tabs = this.tabs.filter((tab) => {
         return tab.name !== name
       })
     }

package/demos/mobile-first/app/tabs/with-add.vue

@@ -1,6 +1,6 @@
 <template>
   <tiny-tabs tab-style="card" :editable="false" :with-add="true" @add="handleadd" style="width: 500px" show-more-tabs>
-    <tiny-tab-item :key="item.name" v-for="item in Tabs" :title="item.title" :name="item.name">
+    <tiny-tab-item :key="item.name" v-for="item in tabs" :title="item.title" :name="item.name">
       {{ item.content }}
     </tiny-tab-item>
   </tiny-tabs>
@@ -16,7 +16,7 @@ export default {
   },
   data() {
     return {
-      TinyTabs: [
+      tabs: [
         {
           title: 'Tab 1',
           name: '1',
@@ -35,10 +35,10 @@ export default {
   methods: {
     handleadd() {
       // 如果tabItem数量小于指定值就可以新增
-      if (this.TinyTabs.length < this.maxCount) {
+      if (this.tabs.length < this.maxCount) {
         const name = `${++this.tabIndex}`
         const title = `Tab ++ ${name}`
-        this.TinyTabs.push({ title, name, content: '动态增加tabitem - ' + name })
+        this.tabs.push({ title, name, content: '动态增加tabitem - ' + name })
       } else {
         TinyModal.message('tabitem数量已到最大值')
       }

package/demos/pc/app/action-menu/basic-usage.spec.ts

@@ -16,10 +16,7 @@ test('基本用法', async ({ page }) => {
   // 更多按钮
   await expect(moreItem).toHaveText(/更多/)
   // 图标显示
-  await expect(moreItem.locator('svg > path').nth(0)).toHaveAttribute(
-    'd',
-    'M8 11.43c-.15 0-.31-.06-.42-.18L1.92 5.6c-.23-.23-.23-.61 0-.85s.61-.23.85 0L8 9.98l5.23-5.23a.61.61 0 0 1 .85 0c.23.23.23.61 0 .85l-5.66 5.66c-.11.11-.27.17-.42.17z'
-  )
+  await expect(moreItem.locator('.tiny-dropdown__trigger .tiny-svg')).toBeVisible()
   // 分割线
   await expect(actionMenu.locator('.tiny-action-menu__item-line')).toHaveCount(2)
   // 图标旋转

package/demos/pc/app/action-menu/card-mode.spec.ts

@@ -12,5 +12,6 @@ test('基本用法', async ({ page }) => {
   await expect(visibleItem).toHaveCount(4)
   await expect(moreItem).not.toHaveText(/更多/)
   // 三点图标
-  await expect(moreItem.locator('circle')).toHaveCount(3)
+  const SvgPathReg = /^M2\.3 7\.78v.+219-1\.17Z$/
+  await expect(moreItem.locator('.tiny-svg path').first()).toHaveAttribute('d', SvgPathReg)
 })

package/demos/pc/app/action-menu/icon.spec.ts

@@ -24,7 +24,7 @@ test('只显示文本', async ({ page }) => {
   await page.goto('action-menu#icon')
 
   const wrap = page.locator('#icon')
-  const actionMenu = wrap.locator('.tiny-action-menu').nth(2)
+  const actionMenu = wrap.locator('.tiny-action-menu').nth(1)
   const actionMenuItem = actionMenu.locator('.tiny-action-menu__item')
 
   await expect(actionMenuItem.nth(0).locator('.tiny-svg')).toBeHidden()

package/demos/pc/app/button-group/show-more.spec.ts

@@ -22,6 +22,6 @@ test('测试更多按钮', async ({ page }) => {
   // 判断图标是否正确
   const moreButton = buttonGroup.getByRole('button').nth(3)
   const moreButtonSvg = moreButton.locator('svg path').first()
-  const moreSvgPathReg = /^M292\.768 449\.694c2\.491\.515.+002-12.555-\.002z$/
+  const moreSvgPathReg = /^M2\.3 7\.78v.+219-1\.17Z$/
   await expect(moreButtonSvg).toHaveAttribute('d', moreSvgPathReg)
 })

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

@@ -62,7 +62,7 @@ const dataArr = ref([
   {
     title: 'TinyVue',
     content: '^15.0.01',
-    imageSrc: 'https://res.hc-cdn.com/tinyui-design/1.0.7.20240711104855/home/images/tinyvue.svg'
+    imageSrc: 'https://res.hc-cdn.com/tinyui-design-common/1.0.5.20240823150427/assets/tinyvue.svg'
   },
   {
     title: 'TinyNG',

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

@@ -69,7 +69,7 @@ export default {
         {
           title: 'TinyVue',
           content: '^15.0.01',
-          imageSrc: 'https://res.hc-cdn.com/tinyui-design-common/1.0.7.20240711104855/assets/tinyvue.svg'
+          imageSrc: 'https://res.hc-cdn.com/tinyui-design-common/1.0.5.20240823150427/assets/tinyvue.svg'
         },
         {
           title: 'TinyNG',

package/demos/pc/app/card/custom-class-composition-api.vue

@@ -49,6 +49,6 @@ const options = ref([
   padding: 16px;
 }
 .my-card {
-  background-color: rgba(0, 0, 0, 0.3);
+  background-color: rgba(0, 0, 0, 0.1);
 }
 </style>

package/demos/pc/app/card/custom-class.vue

@@ -57,6 +57,6 @@ export default {
   padding: 16px;
 }
 .my-card {
-  background-color: rgba(0, 0, 0, 0.3);
+  background-color: rgba(0, 0, 0, 0.1);
 }
 </style>

package/demos/pc/app/config-provider/base.vue

@@ -21,7 +21,7 @@ export default {
         name: 'smb', // 设计规范名称
         version: '1.0.0', // 设计规范版本号
         components: {
-          TinyAlert: {
+          Alert: {
             icons: {
               warning: iconWarningTriangle()
             },

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

@@ -23,7 +23,7 @@ const yearValue = ref('')
 
 <style scoped lang="less">
 .demo-date-picker-wrap {
-  width: 280px;
+  width: 360px;
 
   & > * {
     margin-top: 12px;

package/demos/pc/app/date-picker/basic-usage.vue

@@ -31,7 +31,7 @@ export default {
 
 <style scoped lang="less">
 .demo-date-picker-wrap {
-  width: 280px;
+  width: 360px;
 
   & > * {
     margin-top: 12px;

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

@@ -31,6 +31,6 @@ const IconClose = iconClose()
 
 <style scoped>
 .demo-date-picker-wrap {
-  width: 280px;
+  width: 360px;
 }
 </style>

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

@@ -12,10 +12,7 @@ test('[DatePicker] 测试清除输入', async ({ page }) => {
   // 默认显示清除按钮
   await datePickerDefaultClearIcon.hover()
   await expect(clearIcon).toBeVisible()
-  await expect(clearIcon.locator('path').nth(1)).toHaveAttribute(
-    'd',
-    'M4.25 3.4 8 7.15l3.75-3.75a.61.61 0 0 1 .85 0c.23.23.23.62 0 .85L8.85 8l3.75 3.75c.23.24.23.62 0 .85a.61.61 0 0 1-.85 0L8 8.85 4.25 12.6a.61.61 0 0 1-.85 0 .592.592 0 0 1 0-.85L7.15 8 3.4 4.25a.61.61 0 0 1 0-.85.61.61 0 0 1 .85 0z'
-  )
+  await expect(clearIcon.locator('path').nth(0)).toHaveAttribute('d', /^M12\.49 3\.3a.+22\.71 0Z$/)
 
   // 隐藏清除按钮
   await datePickerHideClearIcon.hover()
@@ -24,10 +21,7 @@ test('[DatePicker] 测试清除输入', async ({ page }) => {
   // 自定义清除图标
   await datePickerCustomClearIcon.hover()
   await expect(clearIcon).toBeVisible()
-  await expect(clearIcon.locator('path').nth(1)).toHaveAttribute(
-    'd',
-    'M4.25 3.4 8 7.15l3.75-3.75a.61.61 0 0 1 .85 0c.23.23.23.62 0 .85L8.85 8l3.75 3.75c.23.24.23.62 0 .85a.61.61 0 0 1-.85 0L8 8.85 4.25 12.6a.61.61 0 0 1-.85 0 .592.592 0 0 1 0-.85L7.15 8 3.4 4.25a.61.61 0 0 1 0-.85.61.61 0 0 1 .85 0z'
-  )
+  await expect(clearIcon.locator('path').nth(0)).toHaveAttribute('d', /^M12\.49 3\.3a.+22\.71 0Z$/)
 
   // 测试清除功能
   await expect(datePickerCustomClearIcon).toHaveValue('2023-05-24')

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

@@ -41,6 +41,6 @@ export default {
 
 <style scoped>
 .demo-date-picker-wrap {
-  width: 280px;
+  width: 360px;
 }
 </style>

package/demos/pc/app/date-picker/custom-suffix-icon-composition-api.vue

@@ -15,7 +15,7 @@ const IconMinus = iconMinus()
 
 <style>
 .demo-date-picker-wrap {
-  width: 280px;
+  width: 360px;
 }
 
 .my-date-picker {

package/demos/pc/app/date-picker/custom-suffix-icon.vue

@@ -23,7 +23,7 @@ export default {
 
 <style>
 .demo-date-picker-wrap {
-  width: 280px;
+  width: 360px;
 }
 
 .my-date-picker {

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

@@ -48,6 +48,6 @@ function formatWeeks(customWeeks, weekFirstDays) {
 
 <style scoped>
 .demo-date-picker-wrap {
-  width: 280px;
+  width: 360px;
 }
 </style>

package/demos/pc/app/date-picker/custom-weeks.vue

@@ -57,6 +57,6 @@ export default {
 
 <style scoped>
 .demo-date-picker-wrap {
-  width: 280px;
+  width: 360px;
 }
 </style>

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

@@ -31,12 +31,7 @@ const defaultTimeRange = ref(['09:00:00', '18:00:00'])
 
 <style scoped lang="less">
 .demo-date-picker-wrap {
-  width: 280px;
-
-  :deep(.tiny-date-editor--datetimerange.tiny-input__inner) {
-    width: 360px;
-  }
-
+  width: 360px;
   & > * {
     margin-top: 12px;
   }

package/demos/pc/app/date-picker/default-value.vue

@@ -39,12 +39,7 @@ export default {
 
 <style scoped lang="less">
 .demo-date-picker-wrap {
-  width: 280px;
-
-  :deep(.tiny-date-editor--datetimerange.tiny-input__inner) {
-    width: 360px;
-  }
-
+  width: 360px;
   & > * {
     margin-top: 12px;
   }

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

@@ -50,12 +50,7 @@ const pickerOptions = {
 
 <style scoped lang="less">
 .demo-date-picker-wrap {
-  width: 280px;
-
-  :deep(.tiny-date-editor--daterange.tiny-input__inner) {
-    width: 360px;
-  }
-
+  width: 360px;
   & > * {
     margin-top: 12px;
   }

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

@@ -57,12 +57,7 @@ export default {
 
 <style scoped lang="less">
 .demo-date-picker-wrap {
-  width: 280px;
-
-  :deep(.tiny-date-editor--daterange.tiny-input__inner) {
-    width: 360px;
-  }
-
+  width: 360px;
   & > * {
     margin-top: 12px;
   }

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

@@ -1,20 +1,18 @@
 <template>
   <tiny-layout>
-    <tiny-row>
-      <tiny-col :span="4">
+    <tiny-row class="demo-row">
+      <tiny-col :span="6">
         <label class="demo-date-picker-label">focus:</label>
         <tiny-date-picker v-model="valueFocus" @focus="handleFocus"></tiny-date-picker>
       </tiny-col>
-      <tiny-col :span="4">
+      <tiny-col :span="6">
         <label class="demo-date-picker-label">blur:</label>
         <tiny-date-picker v-model="valueBlur" @blur="handleBlur"></tiny-date-picker>
       </tiny-col>
-      <tiny-col :span="4">
+      <tiny-col :span="6">
         <label class="demo-date-picker-label">change:</label>
         <tiny-date-picker v-model="valueChange" @change="handleChange"></tiny-date-picker>
       </tiny-col>
-    </tiny-row>
-    <tiny-row>
       <tiny-col :span="6">
         <label class="demo-date-picker-label">onPick:</label>
         <tiny-date-picker v-model="valueOnPick" type="daterange" :picker-options="pickerOptions"></tiny-date-picker>
@@ -52,6 +50,9 @@ const pickerOptions = {
 </script>
 
 <style scoped>
+.demo-row {
+  width: 80%;
+}
 .demo-date-picker-label {
   display: inline-block;
   margin: 12px 0;

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

@@ -1,20 +1,18 @@
 <template>
   <tiny-layout>
-    <tiny-row>
-      <tiny-col :span="4">
+    <tiny-row class="demo-row">
+      <tiny-col :span="6">
         <label class="demo-date-picker-label">focus:</label>
         <tiny-date-picker v-model="valueFocus" @focus="handleFocus"></tiny-date-picker>
       </tiny-col>
-      <tiny-col :span="4">
+      <tiny-col :span="6">
         <label class="demo-date-picker-label">blur:</label>
         <tiny-date-picker v-model="valueBlur" @blur="handleBlur"></tiny-date-picker>
       </tiny-col>
-      <tiny-col :span="4">
+      <tiny-col :span="6">
         <label class="demo-date-picker-label">change:</label>
         <tiny-date-picker v-model="valueChange" @change="handleChange"></tiny-date-picker>
       </tiny-col>
-    </tiny-row>
-    <tiny-row>
       <tiny-col :span="6">
         <label class="demo-date-picker-label">onPick:</label>
         <tiny-date-picker v-model="valueOnPick" type="daterange" :picker-options="pickerOptions"></tiny-date-picker>
@@ -64,6 +62,9 @@ export default {
 </script>
 
 <style scoped>
+.demo-row {
+  width: 80%;
+}
 .demo-date-picker-label {
   display: inline-block;
   margin: 12px 0;

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

@@ -15,7 +15,7 @@ const rangeValue = ref('')
 
 <style scoped lang="less">
 .demo-date-picker-wrap {
-  width: 280px;
+  width: 360px;
 
   & > * {
     margin-top: 12px;

package/demos/pc/app/date-picker/filter-mode.vue

@@ -23,7 +23,7 @@ export default {
 
 <style scoped lang="less">
 .demo-date-picker-wrap {
-  width: 280px;
+  width: 360px;
 
   & > * {
     margin-top: 12px;

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

@@ -35,7 +35,7 @@ const selectedValue = ref(1590076800000)
 
 <style scoped lang="less">
 .demo-date-picker-wrap {
-  width: 280px;
+  width: 360px;
 
   & > * {
     margin-top: 12px;

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

@@ -43,7 +43,7 @@ export default {
 
 <style scoped lang="less">
 .demo-date-picker-wrap {
-  width: 280px;
+  width: 360px;
 
   & > * {
     margin-top: 12px;

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

@@ -15,14 +15,7 @@ const dateRangeValue = ref([])
 
 <style scoped lang="less">
 .demo-date-picker-wrap {
-  width: 280px;
-
-  :deep(.tiny-date-editor--daterange.tiny-input__inner) {
-    width: 360px;
-  }
-  :deep(.tiny-range__close-icon) {
-    right: -4px;
-  }
+  width: 360px;
 
   & > * {
     margin-top: 12px;

package/demos/pc/app/date-picker/label-inside.vue

@@ -23,14 +23,7 @@ export default {
 
 <style scoped lang="less">
 .demo-date-picker-wrap {
-  width: 280px;
-
-  :deep(.tiny-date-editor--daterange.tiny-input__inner) {
-    width: 360px;
-  }
-  :deep(.tiny-range__close-icon) {
-    right: -4px;
-  }
+  width: 360px;
 
   & > * {
     margin-top: 12px;