feat: modify the resource file loading mode and add postcss plugin configuration. (#3615)

Author: zzcr

examples/docs/newsrc/resourceMobileFirst.js

@@ -1,6 +1,10 @@
 import { cmpMenus } from '../../sites/demos/mobile-first/menus.js'
 
-export const demoStr = import.meta.glob('../../sites/demos/mobile-first/app/**/*.vue', { eager: false, as: 'raw' })
+export const demoStr = import.meta.glob('../../sites/demos/mobile-first/app/**/*.vue', {
+  eager: false,
+  query: '?raw',
+  import: 'default'
+})
 export const demoVue = import.meta.glob('../../sites/demos/mobile-first/app/**/*.vue', { eager: false })
 
 // demos配置

examples/docs/newsrc/resourcePc.js

@@ -5,7 +5,11 @@
 // 同web-doc的菜单资源
 import { cmpMenus } from '../../sites/demos/pc/menus.js'
 
-export const demoStr = import.meta.glob('../../sites/demos/pc/app/**/*.vue', { eager: false, as: 'raw' })
+export const demoStr = import.meta.glob('../../sites/demos/pc/app/**/*.vue', {
+  eager: false,
+  query: '?raw',
+  import: 'default'
+})
 export const demoVue = import.meta.glob('../../sites/demos/pc/app/**/*.vue', { eager: false })
 
 // demos配置

examples/sites/demos/apis/numeric.js

@@ -460,13 +460,13 @@ export default {
         },
         {
           name: 'input',
-          type: 'Function(value)',
+          type: '(event: InputEvent) => void',
           defaultValue: '',
           desc: {
             'zh-CN': '输入值时触发事件',
-            'en-US': ''
+            'en-US': 'Trigger event when input value is entered '
           },
-          mode: ['mobile-first'],
+          mode: ['pc', 'mobile-first'],
           mfDemo: ''
         }
       ],

examples/sites/demos/apis/split.js

@@ -86,6 +86,17 @@ export default {
           mode: ['pc'],
           pcDemo: 'three-areas'
         },
+        {
+          name: 'trigger-simple',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否启用简易模式',
+            'en-US': 'Whether to enable simplified mode.'
+          },
+          mode: ['pc'],
+          pcDemo: 'trigger-simple'
+        },
         {
           name: 'border',
           type: 'boolean',

examples/sites/demos/apis/time-line.js

@@ -199,6 +199,17 @@ export default {
           mode: ['mobile-first'],
           mfDemo: 'sub-field'
         },
+        {
+          name: 'text-position',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': `节点文案位置。默认名称和时间分别展示在图标上下方；可选值：'right'，只有名称展示名称在右方`,
+            'en-US': `Node copy position. The default name and time are displayed above and below the icon, respectively; optional value: 'right', where only the name is displayed on the right side. `
+          },
+          mode: ['pc'],
+          pcDemo: 'text-position'
+        },
         {
           name: 'time-field',
           type: 'string',
@@ -249,6 +260,15 @@ export default {
       ],
       methods: [],
       slots: [
+        {
+          name: 'default',
+          desc: {
+            'zh-CN': '组件默认插槽。组件显示为插槽内容',
+            'en-US': 'Component default slot. The component displays as the slot content. '
+          },
+          mode: ['pc'],
+          pcDemo: 'slot-default'
+        },
         {
           name: 'bottom',
           desc: {

examples/sites/demos/pc/app/dialog-select/nest-grid-single.spec.ts

@@ -0,0 +1,40 @@
+import { test, expect } from '@playwright/test'
+
+test('dialogSelect 表格单选', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('dialog-select#nest-grid-single')
+
+  await page.locator('#nest-grid-single').getByRole('button', { name: '打开窗口' }).click()
+
+  await page.locator('.tiny-grid-body__row').first().waitFor()
+  let rows
+  rows = await page.locator('.tiny-grid-body__row').all()
+  for (const row of rows) {
+    const checked = await row.locator('input[type="radio"]').isChecked()
+    expect(checked).toBe(false)
+  }
+
+  await page.getByRole('row', { name: 'GFD 科技有限公司 福建 福州' }).locator('path').nth(1).click()
+
+  rows = await page.locator('.tiny-grid-body__row').all()
+  for (let i = 0; i < rows.length; i++) {
+    const checked = await rows[i].locator('input[type="radio"]').first().isChecked()
+    if (i === 0) {
+      expect(checked).toBe(true)
+    } else {
+      expect(checked).toBe(false)
+    }
+  }
+
+  await page.getByRole('row', { name: 'WWW 科技有限公司 广东 深圳' }).locator('path').nth(1).click()
+
+  rows = await page.locator('.tiny-grid-body__row').all()
+  for (let i = 0; i < rows.length; i++) {
+    const checked = await rows[i].locator('input[type="radio"]').first().isChecked()
+    if (i === 1) {
+      expect(checked).toBe(true)
+    } else {
+      expect(checked).toBe(false)
+    }
+  }
+})

examples/sites/demos/pc/app/dialog-select/nest-tree-multi.spec.ts

@@ -0,0 +1,53 @@
+import { test, expect } from '@playwright/test'
+
+test('dialogSelect 树多选', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('dialog-select#nest-tree-multi')
+  await page.locator('#nest-tree-multi').getByRole('button', { name: '打开窗口', exact: true }).click()
+
+  const nodeContent = await page.locator('.tiny-tree-node__content-left label').nth(1)
+
+  const iconNode = await nodeContent.getAttribute('class')
+
+  expect(iconNode?.includes('tiny-radio')).toBe(false)
+  expect(iconNode?.includes('tiny-checkbox')).toBe(true)
+
+  let isChecked
+
+  isChecked = await page
+    .getByRole('treeitem', { name: '三级 9' })
+    .locator('.tiny-checkbox input[type="checkbox"]')
+    .isChecked()
+  expect(isChecked).toBeFalsy()
+
+  let current
+  current = await page.getByRole('treeitem', { name: '三级 9' }).locator('path').nth(1)
+  await current.click()
+
+  isChecked = await page
+    .getByRole('treeitem', { name: '三级 9' })
+    .locator('.tiny-checkbox input[type="checkbox"]')
+    .isChecked()
+  expect(isChecked).toBeTruthy()
+
+  await page
+    .locator('div')
+    .filter({ hasText: /^一级 1二级 4三级 8三级 9暂无数据$/ })
+    .getByRole('img')
+    .nth(3)
+    .click()
+
+  isChecked = await page
+    .getByRole('treeitem', { name: '三级 9' })
+    .locator('.tiny-checkbox input[type="checkbox"]')
+    .isChecked()
+  expect(isChecked).toBeFalsy()
+
+  await page.getByRole('treeitem', { name: '三级 9' }).locator('path').nth(1).click()
+
+  isChecked = await page
+    .getByRole('treeitem', { name: '三级 9' })
+    .locator('.tiny-checkbox input[type="checkbox"]')
+    .isChecked()
+  expect(isChecked).toBeTruthy()
+})

examples/sites/demos/pc/app/dialog-select/nest-tree-single.spec.ts

@@ -0,0 +1,25 @@
+import { test, expect } from '@playwright/test'
+
+test('dialogSelect 树单选', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('dialog-select#nest-tree-single')
+  await page.locator('#nest-tree-single').getByRole('button', { name: '打开窗口' }).click()
+
+  const nodeContent = await page.locator('.tiny-tree-node__content-left label').nth(1)
+
+  const iconNode = await nodeContent.getAttribute('class')
+
+  expect(iconNode?.includes('tiny-radio')).toBe(true)
+  expect(iconNode?.includes('tiny-checkbox')).toBe(false)
+
+  let current
+  current = await page.getByText('201一级')
+  await current.click()
+  expect(await current.locator('input[type="radio"]').isChecked()).toBe(true)
+
+  current = await page.getByRole('treeitem', { name: '二级 6' }).locator('label')
+  await current.click()
+  expect(await current.locator('input[type="radio"]').isChecked()).toBe(true)
+  current = await page.getByText('201一级')
+  expect(await current.locator('input[type="radio"]').isChecked()).toBe(false)
+})

examples/sites/demos/pc/app/dialog-select/set-selection.spec.ts

@@ -0,0 +1,20 @@
+import { test, expect } from '@playwright/test'
+
+test('dialogSelect 设置多选状态', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('dialog-select#set-selection')
+  await page.locator('#set-selection').getByRole('button', { name: '打开窗口' }).click()
+  await page.getByRole('button', { name: 'Close' }).click()
+  await page.getByRole('button', { name: '切换第二行选中状态' }).click()
+  await page.locator('#set-selection').getByRole('button', { name: '打开窗口' }).click()
+
+  const trs = await page.locator('.tiny-grid table tbody tr').all()
+  for (let i = 0; i < trs.length; i++) {
+    const classes = await trs[i].getAttribute('class')
+    if (i === 1) {
+      expect(classes?.includes('row__selected')).toBeTruthy()
+    } else {
+      expect(classes?.includes('row__selected')).toBeFalsy()
+    }
+  }
+})

examples/sites/demos/pc/app/numeric/input-event-composition-api.vue

@@ -0,0 +1,26 @@
+<template>
+  <div>
+    <tiny-numeric v-model="value" @input="onInput"></tiny-numeric>
+    <div>
+      input事件触发了:<span class="count">{{ inputCount }}</span> 次
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+import { TinyModal, TinyNumeric } from '@opentiny/vue'
+
+const value = ref(1)
+const inputCount = ref(0)
+
+const onInput = (event: InputEvent) => {
+  const currentValue = (event.target as HTMLInputElement).value
+  TinyModal.message({
+    message: `新值： ${currentValue}`,
+    status: 'info'
+  })
+  inputCount.value++
+}
+</script>