feat: add round global config

Author: zzcr

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

@@ -3,15 +3,15 @@
     <tiny-config-provider :design="design">
       <div class="demo-form">
         <tiny-alert type="warning" description="全局配置组件的默认行为"></tiny-alert>
-        <tiny-form :model="formData">
+        <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 type="primary"> 提交 </tiny-button>
+            <tiny-button @click="handleSubmitPromise" type="primary"> 校验 </tiny-button>
           </tiny-form-item>
         </tiny-form>
       </div>
@@ -33,6 +33,7 @@ import {
 } from '@opentiny/vue'
 import { iconWarningTriangle } from '@opentiny/vue-icon'
 
+const ruleFormRef = ref()
 const design = {
   name: 'x-design', // 设计规范名称
   version: '1.0.0', // 设计规范版本号
@@ -44,7 +45,8 @@ const design = {
     },
     Button: {
       props: {
-        resetTime: 0
+        resetTime: 0,
+        round: true
       }
     },
     Alert: {
@@ -72,6 +74,10 @@ const design = {
   }
 }
 
+const handleSubmitPromise = () => {
+  ruleFormRef.value.validate()
+}
+
 const formData = ref({
   name: '',
   age: ''

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

@@ -3,15 +3,15 @@
     <tiny-config-provider :design="design">
       <div class="demo-form">
         <tiny-alert type="warning" description="全局配置组件的默认行为"></tiny-alert>
-        <tiny-form :model="formData">
+        <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 type="primary"> 提交 </tiny-button>
+            <tiny-button @click="handleSubmitPromise" type="primary"> 校验 </tiny-button>
           </tiny-form-item>
         </tiny-form>
       </div>
@@ -55,7 +55,8 @@ export default {
           },
           Button: {
             props: {
-              resetTime: 0
+              resetTime: 0,
+              round: true
             }
           },
           Alert: {
@@ -87,6 +88,11 @@ export default {
         age: ''
       }
     }
+  },
+  methods: {
+    handleSubmitPromise() {
+      this.$refs.ruleFormRef.validate()
+    }
   }
 }
 </script>

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

@@ -10,7 +10,7 @@ export default {
       },
       desc: {
         'zh-CN':
-          '可通过<code> design </code>属性设置自定义不同设计规范的图标和逻辑，例如：全局配置 Form 表单组件的必填星号是否默认显示、Button 组件的点击后的禁用时间。',
+          '可通过<code> design </code>属性设置自定义不同设计规范的图标和逻辑，例如：全局配置 Form 表单组件的必填星号是否默认显示、Button 组件的点击后的禁用时间和是否默认圆角。',
         'en-US':
           'Icons and logic for different design specifications can be customized through the <code>design</code> attribute configuration.'
       },

packages/renderless/src/button/vue.ts

@@ -26,6 +26,7 @@ export const renderless = (
     timer: 0,
     disabled: props.disabled,
     plain: computed(() => props.plain || (parent.buttonGroup || {}).plain),
+    round: computed(() => props.round ?? designConfig?.props?.round ?? false),
     formDisabled: computed(() => (parent.tinyForm || {}).disabled),
     buttonDisabled: computed(
       () => props.disabled || state.disabled || (parent.buttonGroup || {}).disabled || state.formDisabled

packages/renderless/types/button.type.ts

@@ -7,6 +7,7 @@ export interface IButtonState {
   timer: number
   disabled: boolean
   plain: ComputedRef<boolean>
+  round: ComputedRef<boolean>
   formDisabled: ComputedRef<boolean>
   buttonDisabled: ComputedRef<boolean>
 }

packages/vue/src/button/src/index.ts

@@ -55,7 +55,10 @@ export const buttonProps = {
     }
   },
   /** 是否圆角按钮 */
-  round: Boolean,
+  round: {
+    type: Boolean,
+    default: undefined
+  },
   /** 是否朴素按钮  */
   plain: Boolean,
   /** 是否圆形按钮  */

packages/vue/src/button/src/mobile-first.vue

@@ -15,7 +15,7 @@
             state.buttonDisabled ? '-disabled' : ''
           }`
         ),
-        gcls(round ? 'is-round' : 'no-round'),
+        gcls(state.round ? 'is-round' : 'no-round'),
         gcls(circle ? 'is-circle' : 'no-circle'),
         gcls({ 'is-border': circle || !(type === 'text' || icon) }),
         gcls({ 'button-link': href }),

packages/vue/src/button/src/pc.vue

@@ -24,7 +24,7 @@
         'is-loading': loading,
         'is-plain': state.plain,
         'is-ghost': ghost,
-        'is-round': round,
+        'is-round': state.round,
         'is-circle': circle,
         'is-icon': icon && !loading && (text || slots.default),
         'is-only-icon': icon && !loading && !(text || slots.default)