feat(core): edit radio-group 调整 radio-group 组件

Kythuen · May 16, 2024 · e127de1 · e127de1
1 parent 41ec857
commit e127de1
Show file tree

Hide file tree

Showing 8 changed files with 164 additions and 92 deletions.
diff --git a/packages/core/src/components/radio-group/api.ts b/packages/core/src/components/radio-group/api.ts
@@ -13,17 +13,22 @@ export type Props = {
   options?: OptionsItem[]
   /*
    * Style of the radio-group.
-   * 'default' | 'tabs' | 'outline'
+   * 'base' | 'tab' | 'outline'
    */
   type?: RadioGroupType
   /*
-   * When type of the group-radio is `tabs` or `outline`, change the shape of the radio item.
-   * 'soft' | 'emphasize' | 'primary'
+   * When property `type` equal `tab`, you can choose detail display type of the tab.
+   * 'soft' | 'emphasize'
+   */
+  tabType?: RadioGroupTheme
+  /*
+   * When type of the group-radio is `tab` or `outline`, change the shape of the radio item.
+   * 'primary' | 'success' | 'warning' | 'danger' | 'white' | 'default'
    */
   theme?: RadioGroupTheme
   /*
    * Colors of the radio-group.
-   * 'rectangle' | 'rounded'
+   * 'rectangle' | 'round'
    */
   shape?: RadioGroupShape
   /*
@@ -33,7 +38,8 @@ export type Props = {
 }
 
 export default {
-  type: 'default',
+  type: 'base',
   shape: 'rectangle',
-  theme: 'soft'
+  tabType: 'soft',
+  theme: 'primary'
 } as Props
diff --git a/packages/core/src/components/radio-group/examples/shape.json b/packages/core/src/components/radio-group/examples/shape.json
@@ -1,23 +1,42 @@
 {
   "components": [
-    { "shape": "rectangle", "content": "A" },
-    { "shape": "round", "content": "B" },
-    { "shape": "square", "content": "C" },
-    { "shape": "circle", "content": "D" }
+    {
+      "defaultValue": "1",
+      "shape": "round",
+      "options": [
+        { "label": "option1", "value": "1" },
+        { "label": "option2", "value": "2" },
+        { "label": "option3", "value": "3" }
+      ]
+    }
   ],
   "configs": [
+    {
+      "name": "shape",
+      "type": "select",
+      "default": "round",
+      "options": [
+        { "label": "rectangle", "value": "rectangle" },
+        { "label": "round", "value": "round" }
+      ]
+    },
     {
       "name": "type",
       "type": "select",
-      "default": "base",
+      "default": "tab",
       "options": [
         { "label": "base", "value": "base" },
-        { "label": "plain", "value": "plain" },
-        { "label": "dashed", "value": "dashed" },
-        { "label": "outline", "value": "outline" },
-        { "label": "ghost", "value": "ghost" },
-        { "label": "link", "value": "link" },
-        { "label": "text", "value": "text" }
+        { "label": "tab", "value": "tab" },
+        { "label": "outline", "value": "outline" }
+      ]
+    },
+    {
+      "name": "tabType",
+      "type": "select",
+      "default": "soft",
+      "options": [
+        { "label": "soft", "value": "soft" },
+        { "label": "emphasize", "value": "emphasize" }
       ]
     },
     {
@@ -33,20 +52,10 @@
         { "label": "default", "value": "default" }
       ]
     },
-    {
-      "name": "loading",
-      "type": "toggle",
-      "default": false
-    },
     {
       "name": "disabled",
       "type": "toggle",
       "default": false
-    },
-    {
-      "name": "content",
-      "type": "input",
-      "default": "A"
     }
   ]
 }
diff --git a/packages/core/src/components/radio-group/examples/type_theme.json b/packages/core/src/components/radio-group/examples/type_theme.json
@@ -1,6 +1,7 @@
 {
   "components": [
     {
+      "defaultValue": "1",
       "options": [
         { "label": "option1", "value": "1" },
         { "label": "option2", "value": "2" },
@@ -12,21 +13,33 @@
     {
       "name": "type",
       "type": "select",
-      "default": "default",
+      "default": "tab",
       "options": [
-        { "label": "default", "value": "default" },
-        { "label": "tabs", "value": "tabs" },
+        { "label": "base", "value": "base" },
+        { "label": "tab", "value": "tab" },
         { "label": "outline", "value": "outline" }
       ]
     },
     {
-      "name": "theme",
+      "name": "tabType",
       "type": "select",
       "default": "soft",
       "options": [
         { "label": "soft", "value": "soft" },
-        { "label": "emphasize", "value": "emphasize" },
-        { "label": "primary", "value": "primary" }
+        { "label": "emphasize", "value": "emphasize" }
+      ]
+    },
+    {
+      "name": "theme",
+      "type": "select",
+      "default": "primary",
+      "options": [
+        { "label": "primary", "value": "primary" },
+        { "label": "success", "value": "success" },
+        { "label": "warning", "value": "warning" },
+        { "label": "danger", "value": "danger" },
+        { "label": "white", "value": "white" },
+        { "label": "default", "value": "default" }
       ]
     },
     {

diff --git a/packages/core/src/components/radio-group/radio-group.vue b/packages/core/src/components/radio-group/radio-group.vue
@@ -4,25 +4,27 @@
     bg="$wb-radio-group-background"
     rounded="$wb-radio-group-radius"
     ring="1 inset $wb-radio-group-border"
+    color="$wb-radio-group-text"
     :class="propsClasses"
   >
     <div relative flex="~ row nowrap">
       <wb-radio
         v-for="item in options"
         :key="item.value"
+        rounded="$wb-radio-group-radius"
+        ring="1 $wb-radio-group-item-border hover:$wb-radio-group-item-border-active"
+        flex="inline 1"
+        :class="{ 'wb-radio--checked': radioGroupValue === item.value }"
         :size="size"
         :type="type"
         :shape="shape"
         :content="item.label"
-        :value="radioGroupValue === item.value"
-        :checked="radioGroupValue === item.value"
         v-bind="radioProps ?? {}"
-        flex="1"
-        :color="radioGroupValue === item.value ? '$wb-radio-group-active' : ''"
+        :value="radioGroupValue === item.value"
         @change="checked => handleItemChange(checked, item.value)"
       />
       <div
-        v-if="radioGroupValue"
+        v-if="type === 'tab' && radioGroupValue"
         absolute
         inset="0"
         h="full"
@@ -64,7 +66,7 @@ defineSlots<Slots>()
 
 const propsClasses = computed(() => {
   const result = ['wb-radio-group']
-  const displayProps = ['type', 'theme', 'shape', 'size', 'disabled']
+  const displayProps = ['type', 'tabType', 'theme', 'shape', 'size', 'disabled']
   for (const item of displayProps) {
     if (props[item]) {
       result.push(`wb-radio-group--${props[item]}`)

diff --git a/packages/core/src/components/radio-group/styles.css b/packages/core/src/components/radio-group/styles.css
@@ -1,69 +1,111 @@
-.wb-radio-group .wb-radio:not(.wb-radio:last-of-type) {
+.wb-radio-group {
+  --wb-radio-group-text: var(--wb-color-text-3);
+  --wb-radio-group-item-border: transparent;
+  --wb-radio-group-item-border-active: transparent;
+}
+.wb-radio-group .wb-radio {
+  --wb-radio-text-active: var(--wb-radio-group-color-main);
   border-radius: 0;
-  margin-right: -1px;
 }
 .wb-radio-group .wb-radio:first-of-type {
-  border-radius: var(--wb-radio-radius) 0 0 var(--wb-radio-radius) !important;
+  border-radius: var(--wb-radio-radius) 0 0 var(--wb-radio-radius);
 }
 .wb-radio-group .wb-radio:last-of-type {
   border-radius: 0 var(--wb-radio-radius) var(--wb-radio-radius) 0;
 }
-.wb-radio-group .wb-radio {
-  flex: 1;
-}
 
 /* -------------------------------------------- size -------------------------------------------- */
 .wb-radio-group--xs {
-  --wb-radio-group-padding: var(--size-2);
+  --wb-radio-group-padding: var(--comp-content-gap-xs);
   --wb-radio-group-radius: var(--comp-radius-xs);
 }
 .wb-radio-group--sm {
-  --wb-radio-group-padding: var(--size-3);
+  --wb-radio-group-padding: var(--comp-content-gap-sm);
   --wb-radio-group-radius: var(--comp-radius-sm);
 }
 .wb-radio-group--md {
-  --wb-radio-group-padding: var(--size-3);
+  --wb-radio-group-padding: var(--comp-content-gap-md);
   --wb-radio-group-radius: var(--comp-radius-md);
 }
 .wb-radio-group--lg {
-  --wb-radio-group-padding: var(--size-4);
+  --wb-radio-group-padding: var(--comp-content-gap-lg);
   --wb-radio-group-radius: var(--comp-radius-lg);
 }
 .wb-radio-group--xl {
-  --wb-radio-group-padding: var(--size-5);
+  --wb-radio-group-padding: var(--comp-content-gap-xl);
   --wb-radio-group-radius: var(--comp-radius-xl);
 }
 
+/* -------------------------------------------- theme -------------------------------------------- */
+.wb-radio-group--primary {
+  --wb-radio-group-vc-main: var(--wb-vc-primary);
+  --wb-radio-group-color-main: var(--wb-color-primary);
+}
+.wb-radio-group--white {
+  --wb-radio-group-vc-main: var(--wb-vc-foreground);
+  --wb-radio-group-color-main: rgb(var(--wb-vc-foreground));
+}
+.wb-radio-group--success {
+  --wb-radio-group-vc-main: var(--vc-success);
+  --wb-radio-group-color-main: rgb(var(--vc-success));
+}
+.wb-radio-group--warning {
+  --wb-radio-group-vc-main: var(--vc-warning);
+  --wb-radio-group-color-main: rgb(var(--vc-warning));
+}
+.wb-radio-group--danger {
+  --wb-radio-group-vc-main: var(--vc-danger);
+  --wb-radio-group-color-main: rgb(var(--vc-danger));
+}
+/* TODO: theme default --wb-vc-layer */
+.wb-radio-group--default {
+  --wb-radio-group-vc-main: var(--wb-vc-foreground);
+  --wb-radio-group-color-main: rgb(var(--wb-vc-foreground));
+}
+
 /* -------------------------------------------- type -------------------------------------------- */
-.wb-radio-group--tabs.wb-radio-group--emphasize {
-  --wb-radio-group-active: var(--wb-color-foreground);
-  --wb-radio-group-background: var(--wb-color-container);
-  --wb-radio-group-indicator: var(--wb-color-background);
-  --wb-radio-group-border: var(--wb-color-ring-2);
+.wb-radio-group--tab .wb-radio {
+  position: relative;
+  z-index: 1;
+}
+.wb-radio-group--tab .wb-radio input {
+  display: none;
 }
-.wb-radio-group--tabs.wb-radio-group--soft {
-  --wb-radio-group-active: var(--wb-color-foreground);
+.wb-radio-group--tab.wb-radio-group--soft {
   --wb-radio-group-background: var(--wb-color-background);
-  --wb-radio-group-indicator: var(--wb-color-layer);
+  --wb-radio-group-indicator: rgb(var(--wb-radio-group-vc-main) / 15%);
 }
-.wb-radio-group--tabs.wb-radio-group--primary {
-  --wb-radio-group-active: var(--wb-color-background);
+.wb-radio-group--tab.wb-radio-group--emphasize {
   --wb-radio-group-background: var(--wb-color-container);
-  --wb-radio-group-indicator: var(--wb-color-primary);
-  --wb-radio-group-border: var(--wb-color-ring-2);
+  --wb-radio-group-indicator: var(--wb-radio-group-color-main);
+  --wb-radio-group-border: var(--wb-color-border-base);
 }
-.wb-radio-group--tabs .wb-radio {
-  --wb-radio-gap: 0;
-  --wb-radio-size: 0;
-  position: relative;
-  z-index: 1;
+.wb-radio-group--tab.wb-radio-group--emphasize .wb-radio {
+  --wb-radio-text-active: var(--wb-color-background);
 }
 
+.wb-radio-group--outline {
+  --wb-radio-group-item-border: var(--wb-color-border-base);
+  --wb-radio-group-item-border-active: var(--wb-radio-group-color-main);
+}
+.wb-radio-group--outline .wb-radio input {
+  display: none;
+}
+.wb-radio-group--outline .wb-radio--checked {
+  --wb-radio-group-item-border: var(--wb-radio-group-item-border-active);
+  z-index: 1;
+}
 .wb-radio-group--outline .wb-radio {
-  --wb-radio-size: 0;
-  --wb-radio-border: var(--wb-color-border-base);
+  --wb-radio-group-border: var(--wb-color-border-base);
+}
+.wb-radio-group--outline .wb-radio:hover {
+  position: relative;
+  --wb-radio-text: var(--wb-radio-group-color-main);
 }
 /* -------------------------------------------- shape -------------------------------------------- */
-.wb-radio-group--tabs.wb-radio-group--rounded {
+.wb-radio-group--tab.wb-radio-group--round {
   --wb-radio-group-radius: 9999px;
 }
+.wb-radio-group--outline.wb-radio-group--round .wb-radio {
+  --wb-radio-radius: 9999px;
+}
diff --git a/packages/core/src/components/radio-group/types.ts b/packages/core/src/components/radio-group/types.ts
@@ -1,9 +1,16 @@
 import { OptionsItem } from '../types'
-import { RadioShape } from '../radio/types'
 
 export type RadioOptionsItem = OptionsItem
 export type RadioOptions = RadioOptionsItem[]
 
-export type RadioGroupType = 'default' | 'tabs' | 'outline'
-export type RadioGroupTheme = 'soft' | 'emphasize' | 'primary'
-export type RadioGroupShape = RadioShape
+export type RadioGroupType = 'base' | 'tab' | 'outline'
+export type RadioGroupTheme =
+  | 'soft'
+  | 'emphasize'
+  | 'primary'
+  | 'success'
+  | 'warning'
+  | 'danger'
+  | 'white'
+  | 'default'
+export type RadioGroupShape = 'rectangle' | 'round'
diff --git a/packages/core/src/components/radio/radio.vue b/packages/core/src/components/radio/radio.vue
@@ -1,10 +1,17 @@
 <template>
   <label
-    tabindex="0"
+    h="$wb-radio-height"
+    p="x-$wb-radio-padding"
     rounded="$wb-radio-radius"
-    border="px solid $wb-radio-border"
+    cursor="pointer"
+    select="none"
+    flex="inline"
+    items="center"
+    gap="$wb-radio-gap"
+    :color="radioValue ? '$wb-radio-text-active' : '$wb-radio-text'"
     :class="propsClasses"
     :style="propsStyles"
+    tabindex="0"
   >
     <input
       type="radio"
@@ -18,7 +25,6 @@
       cursor="pointer"
       @click.stop="onClick"
     />
-    <span />
     <span w="full" truncate flex items="center" gap="$wb-radio-gap">
       <component :is="ContentNode" />
     </span>