style(radio): center radio content slot

indielayer · Aug 18, 2022 · 7fb2a7b · 7fb2a7b
1 parent 65e53c5
commit 7fb2a7b
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 21 deletions.
diff --git a/packages/docs/src/pages/component/radio/variants.vue b/packages/docs/src/pages/component/radio/variants.vue
@@ -4,10 +4,9 @@
       v-model="selected"
       value="a"
       color="rose"
-      bordered
       label="Option A"
     >
-      label and content
+      option extra content
     </x-radio>
     <x-radio
       v-model="selected"

diff --git a/packages/ui/src/components/radio/Radio.theme.ts b/packages/ui/src/components/radio/Radio.theme.ts
@@ -27,7 +27,7 @@ export default {
       return c
     },
 
-    label: ({ props }: ThemeParams) => {
+    label: ({ props, data }: ThemeParams) => {
       let c = 'font-medium text-gray-800 dark:text-gray-200 pl-2'
 
       if (props.size === 'xs') c += ' text-xs'
@@ -39,12 +39,14 @@ export default {
     },
 
     content: ({ props }: ThemeParams) => {
-      if (props.size === 'xs') return 'text-xs pl-6'
-      else if (props.size === 'sm') return 'text-sm pl-6'
-      else if (props.size === 'lg') return 'text-lg pl-7'
-      else if (props.size === 'xl') return 'text-lg pl-8'
+      let c = 'pl-2'
 
-      return 'pl-7'
+      if (props.size === 'xs') c += ' text-xs'
+      else if (props.size === 'sm') c += ' text-sm'
+      else if (props.size === 'lg') c += ' text-lg'
+      else if (props.size === 'xl') c += ' text-xl'
+
+      return c
     },
   },
 

diff --git a/packages/ui/src/components/radio/Radio.vue b/packages/ui/src/components/radio/Radio.vue
@@ -98,18 +98,20 @@ defineExpose({ focus, blur, reset, validate, setError })
           <circle cx="10" cy="10" r="10"/>
         </svg>
       </div>
-      <span
-        v-if="label"
-        :class="classes.label"
-        v-text="label"
-      ></span>
-    </div>
-
-    <div
-      v-if="$slots.default"
-      :class="classes.content"
-    >
-      <slot></slot>
+      <div>
+        <div
+          v-if="label"
+          :class="classes.label"
+          v-text="label"
+        ></div>
+
+        <div
+          v-if="$slots.default"
+          :class="classes.content"
+        >
+          <slot></slot>
+        </div>
+      </div>
     </div>
 
     <x-input-error :error="errorInternal" :helper="helper"/>

diff --git a/packages/ui/src/components/tab/TabGroup.vue b/packages/ui/src/components/tab/TabGroup.vue
@@ -115,7 +115,7 @@ const { styles, classes, className } = useTheme('tabs', theme, props)
         mousewheel
         :class="{
           'rounded-md': variant === 'block',
-          'bg-gray-50 dark:bg-gray-800 p-1': variant === 'block' && !ghost
+          'bg-slate-100 dark:bg-gray-800 p-1': variant === 'block' && !ghost
         }"
       >
         <ul