Merge branch 'dev' of github.com:opentiny/tiny-vue into wyp/bulletin-…

…click-1130

.github/workflows/auto-deploy-site.yml

@@ -0,0 +1,57 @@
+name: Auto Deploy Site
+
+on:
+  push:
+    branches: [dev]
+    paths:
+      - 'examples/sites/**'
+      - '!examples/sites/**/*.spec.ts'
+
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow one concurrent deployment
+concurrency:
+  group: pages
+  cancel-in-progress: true
+
+jobs:
+  # Build job
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v3
+        with:
+          version: 9
+      - name: Install deps
+        run: pnpm -F @opentiny/vue-docs i --ignore-scripts --no-frozen-lockfile
+      - name: Build site
+        run: pnpm -F @opentiny/vue-docs build
+      - name: Setup Pages
+        uses: actions/configure-pages@v2
+      - name: Build with Jekyll
+        uses: actions/jekyll-build-pages@v1
+        with:
+          source: ./examples/sites/dist
+          destination: ./_site
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v1
+
+  # Deployment job
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v1

examples/sites/demos/apis/numeric.js

@@ -289,8 +289,12 @@ export default {
         },
         {
           name: 'step',
-          type: 'number',
+          type: 'number | string | IStepStrategy',
+          typeAnchorName: 'IStepStrategy',
           defaultValue: '1',
+          meta: {
+            stable: '3.20.0'
+          },
           desc: {
             'zh-CN': '步长',
             'en-US': 'Increment or decrement value each time'
@@ -309,13 +313,13 @@ export default {
             'en-US': 'Whether to enter only multiples of step'
           },
           mode: ['pc', 'mobile', 'mobile-first'],
-          pcDemo: 'step',
+          pcDemo: 'about-step',
           mobileDemo: 'step',
           mfDemo: ''
         },
         {
           name: 'strict-input',
-          type: 'Boolean',
+          type: 'boolean',
           defaultValue: '',
           desc: {
             'zh-CN': '严格控制输入，包含合法性输入与小数点长度验证，不允许输入超过精度设置',
@@ -511,6 +515,16 @@ interface INumericFormat {
   fractionGroupSize: 0, // 小数部分分组间隔
   fractionGroupSeparator: '', // 小数分组分隔符
   suffix: '@' // 后置标识
+}
+      `
+    },
+    {
+      name: 'IStepStrategy',
+      type: 'interface',
+      code: `
+interface IStepStrategy {
+  value: number | string, // 5 或者 '5'
+  mode: 'strictly' | 'restore'
 }
       `
     }

examples/sites/demos/pc/app/config-provider/base-composition-api.vue

@@ -1,20 +1,54 @@
 <template>
   <div>
     <tiny-config-provider :design="design">
-      <tiny-alert type="warning" description="type 为 warning"></tiny-alert>
+      <div class="demo-form">
+        <tiny-alert type="warning" description="全局配置组件的默认行为"></tiny-alert>
+        <tiny-form ref="ruleFormRef" :model="formData">
+          <tiny-form-item label="年龄" prop="age" required>
+            <tiny-numeric v-model="formData.age"></tiny-numeric>
+          </tiny-form-item>
+          <tiny-form-item label="姓名" prop="name" required>
+            <tiny-input v-model="formData.name"></tiny-input>
+          </tiny-form-item>
+          <tiny-form-item>
+            <tiny-button @click="handleSubmitPromise" type="primary"> 校验 </tiny-button>
+          </tiny-form-item>
+        </tiny-form>
+      </div>
     </tiny-config-provider>
   </div>
 </template>
 
 <script setup>
 import { ref } from 'vue'
-import { TinyConfigProvider, TinyAlert, TinyModal } from '@opentiny/vue'
+import {
+  TinyConfigProvider,
+  TinyAlert,
+  TinyModal,
+  TinyForm,
+  TinyFormItem,
+  TinyInput,
+  TinyNumeric,
+  TinyButton
+} from '@opentiny/vue'
 import { iconWarningTriangle } from '@opentiny/vue-icon'
 
-const design = ref({
-  name: 'smb', // 设计规范名称
+const ruleFormRef = ref()
+const design = {
+  name: 'x-design', // 设计规范名称
   version: '1.0.0', // 设计规范版本号
   components: {
+    Form: {
+      props: {
+        hideRequiredAsterisk: true
+      }
+    },
+    Button: {
+      props: {
+        resetTime: 0,
+        round: true
+      }
+    },
     Alert: {
       icons: {
         warning: iconWarningTriangle()
@@ -38,5 +72,20 @@ const design = ref({
       }
     }
   }
+}
+
+const handleSubmitPromise = () => {
+  ruleFormRef.value.validate().catch(() => {})
+}
+
+const formData = ref({
+  name: '',
+  age: ''
 })
 </script>
+
+<style scoped>
+.demo-form {
+  width: 380px;
+}
+</style>

examples/sites/demos/pc/app/config-provider/base.vue

@@ -1,26 +1,64 @@
 <template>
   <div>
     <tiny-config-provider :design="design">
-      <tiny-alert type="warning" description="type 为 warning"></tiny-alert>
+      <div class="demo-form">
+        <tiny-alert type="warning" description="全局配置组件的默认行为"></tiny-alert>
+        <tiny-form ref="ruleFormRef" :model="formData">
+          <tiny-form-item label="年龄" prop="age" required>
+            <tiny-numeric v-model="formData.age"></tiny-numeric>
+          </tiny-form-item>
+          <tiny-form-item label="姓名" prop="name" required>
+            <tiny-input v-model="formData.name"></tiny-input>
+          </tiny-form-item>
+          <tiny-form-item>
+            <tiny-button @click="handleSubmitPromise" type="primary"> 校验 </tiny-button>
+          </tiny-form-item>
+        </tiny-form>
+      </div>
     </tiny-config-provider>
   </div>
 </template>
 
 <script>
-import { TinyConfigProvider, TinyAlert, TinyModal } from '@opentiny/vue'
+import {
+  TinyConfigProvider,
+  TinyAlert,
+  TinyModal,
+  TinyForm,
+  TinyFormItem,
+  TinyInput,
+  TinyNumeric,
+  TinyButton
+} from '@opentiny/vue'
 import { iconWarningTriangle } from '@opentiny/vue-icon'
 
 export default {
   components: {
     TinyConfigProvider,
-    TinyAlert
+    TinyAlert,
+    TinyForm,
+    TinyFormItem,
+    TinyInput,
+    TinyNumeric,
+    TinyButton
   },
   data() {
     return {
       design: {
-        name: 'smb', // 设计规范名称
+        name: 'x-design', // 设计规范名称
         version: '1.0.0', // 设计规范版本号
         components: {
+          Form: {
+            props: {
+              hideRequiredAsterisk: true
+            }
+          },
+          Button: {
+            props: {
+              resetTime: 0,
+              round: true
+            }
+          },
           Alert: {
             icons: {
               warning: iconWarningTriangle()
@@ -44,8 +82,23 @@ export default {
             }
           }
         }
+      },
+      formData: {
+        name: '',
+        age: ''
       }
     }
+  },
+  methods: {
+    handleSubmitPromise() {
+      this.$refs.ruleFormRef.validate().catch(() => {})
+    }
   }
 }
 </script>
+
+<style scoped>
+.demo-form {
+  width: 380px;
+}
+</style>

examples/sites/demos/pc/app/config-provider/basic.spec.ts

@@ -3,7 +3,23 @@ import { test, expect } from '@playwright/test'
 test('测试自定义事件', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('config-provider#base')
-  await page.locator('.tiny-config-provider > .tiny-alert > .tiny-svg').nth(1).click()
+
+  // 验证自定义方法
+  const demo = page.locator('#base')
+  await demo.locator('.tiny-config-provider .tiny-alert > .tiny-alert__close').click()
   await page.waitForTimeout(500)
   await expect(page.locator('.tiny-modal > .tiny-modal__box').nth(1)).toHaveText('触发自定方法')
+
+  // 验证必填星号
+  await expect(demo.locator('.tiny-form')).toBeVisible()
+  const beforeElement = await page.evaluate(() => {
+    const labelBefore = document.querySelector('.tiny-form .tiny-form-item__label')
+    const { display, content } = window.getComputedStyle(labelBefore, '::before')
+    return { display, content }
+  })
+  expect(beforeElement.content).toBe('none')
+
+  // 验证按钮点击禁用时间
+  await demo.locator('.tiny-button').click()
+  await expect(demo.locator('.tiny-button')).not.toBeDisabled({ timeout: 300 })
 })