feat: [config-provider] optimize global configuration component documentation

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()
+}
+
+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()
+    }
   }
 }
 </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 })
 })

examples/sites/demos/pc/app/config-provider/webdoc/config-provider.js

@@ -9,7 +9,8 @@ export default {
         'en-US': 'Basic Use'
       },
       desc: {
-        'zh-CN': '可通过<code>design</code>属性设置自定义不同设计规范的图标和逻辑。',
+        'zh-CN':
+          '可通过<code> design </code>属性设置自定义不同设计规范的图标和逻辑，例如：全局配置 Form 表单组件的必填星号是否默认显示、Button 组件的点击后的禁用时间和是否默认圆角。',
         'en-US':
           'Icons and logic for different design specifications can be customized through the <code>design</code> attribute configuration.'
       },
@@ -40,18 +41,6 @@ export default {
         'en-US': 'Container labels can be customized through<code>tag</code>.'
       },
       codeFiles: ['tag.vue']
-    },
-    {
-      demoId: 'form',
-      name: {
-        'zh-CN': '隐藏表单必填星号',
-        'en-US': 'Hide all form required asterisks'
-      },
-      desc: {
-        'zh-CN': '通过 <code>design</code> 设置所有表单组件默认不显示必填星号。',
-        'en-US': 'Set the all form component via <code>design</code> to not display required asterisks by default.'
-      },
-      codeFiles: ['form.vue']
     }
   ]
 }

examples/sites/demos/pc/menus.js

@@ -80,6 +80,7 @@ export const cmpMenus = [
     'children': [
       { 'nameCn': '按钮', 'name': 'Button', 'key': 'button' },
       { 'nameCn': '按钮组', 'name': 'ButtonGroup', 'key': 'button-group' },
+      { 'nameCn': '全局配置', 'name': 'ConfigProvider', 'key': 'config-provider' },
       { 'nameCn': '容器布局', 'name': 'Container', 'key': 'container' },
       { 'nameCn': '图标', 'name': 'Icon', 'key': 'icon' },
       // { 'nameCn': '多色图标', 'name': 'IconMulticolor', 'key': 'icon-multicolor' }, // 隐藏路由，目前只有saas使用
@@ -309,7 +310,6 @@ export const cmpMenus = [
     'key': 'cmp-other-components',
     'children': [
       { 'nameCn': '公告牌', 'name': 'BulletinBoard', 'key': 'bulletin-board' },
-      { 'nameCn': '全局配置', 'name': 'ConfigProvider', 'key': 'config-provider' },
       { 'nameCn': '图片裁剪', 'name': 'Crop', 'key': 'crop' },
       { 'nameCn': '弹窗选择 ', 'name': 'DialogSelect ', 'key': 'dialog-select' },
       { 'nameCn': '过滤器面板', 'name': 'FilterPanel', 'key': 'filter-panel' },

packages/renderless/src/button/index.ts

@@ -13,18 +13,27 @@ import type { IButtonRenderlessParams, IButtonState } from '@/types'
 import { xss } from '../common/xss'
 
 export const handleClick =
-  ({ emit, props, state }: Pick<IButtonRenderlessParams, 'emit' | 'props' | 'state'>) =>
+  ({ emit, props, state, designConfig }: Pick<IButtonRenderlessParams, 'emit' | 'props' | 'state' | 'designConfig'>) =>
   (event: MouseEvent): void => {
     const urlHref = xss.filterUrl(props.href)
+    const DEFAULT_RESETTIME = 1000
+
+    let resetTime = DEFAULT_RESETTIME
+
+    if (props.resetTime !== DEFAULT_RESETTIME) {
+      resetTime = props.resetTime
+    } else {
+      resetTime = designConfig?.props?.resetTime ?? props.resetTime
+    }
 
     if (urlHref) {
       location.href = urlHref
-    } else if (props.nativeType === 'button' && props.resetTime > 0) {
+    } else if (props.nativeType === 'button' && resetTime > 0) {
       state.disabled = true
 
       state.timer = window.setTimeout(() => {
         state.disabled = false
-      }, props.resetTime)
+      }, resetTime)
     }
 
     emit('click', event)