Merge branch 'dev' into feat-old-vars-1028

examples/sites/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'
   }
 }

examples/sites/demos/apis/dialog-box.js

@@ -133,7 +133,7 @@ export default {
             'en-US': 'Achieve the maximum height of the window'
           },
           mode: ['pc'],
-          pcDemo: 'form-in-dialog'
+          pcDemo: 'dialog-width'
         },
         {
           name: 'modal',

examples/sites/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': '尺寸',

examples/sites/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' | ''
 `
     },
     {

examples/sites/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
       })
     }

examples/sites/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'
       })
     }

examples/sites/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'

examples/sites/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
       })
     }

examples/sites/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',

examples/sites/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
       })
     }

examples/sites/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数量已到最大值')
       }

examples/sites/demos/mobile/app/input/webdoc/input.js

@@ -37,7 +37,7 @@ export default {
       },
       desc: {
         'zh-CN':
-          '<p>通过对应的 <code>type</code> 属性，可以设置为对应的类型。默认为 text，可选值为 text，textarea 和其他 原生 input 的 type 值</p>',
+          '<p>通过对应的 <code>type</code> 属性，可以设置为对应的类型。默认为 text，可选值为 text，number 等其他 原生 input 的 type 值</p>',
         'en-US':
           '<p>You can set the corresponding type through the corresponding <code>type</code> attribute. The default value is text. The options are text, textarea, and other type values of the native input</p>'
       },

examples/sites/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',

examples/sites/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)
   // 图标旋转

examples/sites/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)
 })

examples/sites/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()

examples/sites/demos/pc/app/anchor/change-composition-api.vue

@@ -4,7 +4,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { TinyAnchor, TinyModal } from '@opentiny/vue'
+import { TinyAnchor } from '@opentiny/vue'
 
 const links = ref([
   {
@@ -42,6 +42,6 @@ const links = ref([
 ])
 
 function handleChange(link) {
-  TinyModal.message({ message: `change${link}`, status: 'info' })
+  console.log(`当前锚点${link}`)
 }
 </script>

examples/sites/demos/pc/app/anchor/change.spec.ts

@@ -5,13 +5,20 @@ test('change事件', async ({ page }) => {
   await page.goto('anchor#change')
 
   const anchor = page.locator('.tiny-anchor')
-  const link1 = anchor.getByRole('link', { name: '演示' })
+  const link1 = anchor.getByRole('link', { name: '基本用法' })
   const link2 = anchor.getByRole('link', { name: 'change 事件' })
-  const modal = page.locator('.tiny-modal')
 
+  const values = [] as string[]
+  page.on('console', async (msg) => {
+    for (const arg of msg.args()) {
+      const text = await arg.jsonValue()
+      if (text.includes('当前锚点')) {
+        values.push(text)
+      }
+    }
+  })
   await link1.click()
-  await expect(modal).toHaveCount(1)
   await link2.click()
-  await expect(modal).toHaveCount(2)
-  await expect(modal.last()).toHaveText(/#change/)
+  expect(values.length).toBe(2)
+  expect(values[0].startsWith('当前锚点#basic-usage')).toBeTruthy()
 })

examples/sites/demos/pc/app/anchor/change.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script>
-import { TinyAnchor, TinyModal } from '@opentiny/vue'
+import { TinyAnchor } from '@opentiny/vue'
 
 export default {
   components: {
@@ -49,7 +49,7 @@ export default {
   },
   methods: {
     handleChange(link) {
-      TinyModal.message({ message: `change${link}`, status: 'info' })
+      console.log(`当前锚点${link}`)
     }
   }
 }

examples/sites/demos/pc/app/anchor/set-container-composition-api.vue

@@ -67,25 +67,29 @@ function handleClick(e, link) {
 .scroll-container {
   height: 40vh;
   overflow: auto;
+  text-align: center;
+  font-size: 24px;
+}
+.scroll-container > div {
+  padding-top: 20%;
 }
 .sec-1 {
   height: 50vh;
-  background: rgba(135, 206, 235, 0.1);
+  background: #b6d4f2;
 }
 .sec-2 {
   height: 50vh;
-  background: rgba(135, 206, 235, 0.3);
+  background: #c2c2c2;
 }
 .sec-3 {
-  background: rgba(135, 206, 235, 0.6);
-  padding-top: 20vh;
+  background: #fff4e8;
 }
 .sec-3-1 {
   height: 50vh;
-  background: rgba(135, 206, 235, 0.8);
+  background: #b9e683;
 }
 .sec-3-2 {
   height: 50vh;
-  background: rgba(135, 206, 235, 1);
+  background: #f2c5c2;
 }
 </style>