feat: uniformize components sizes (#68)

nuxt · Apr 16, 2024 · f302a15 · f302a15
1 parent 78e4560
commit f302a15
Show file tree

Hide file tree

Showing 96 changed files with 1,439 additions and 1,305 deletions.
diff --git a/cli/templates.mjs b/cli/templates.mjs
@@ -101,7 +101,7 @@ import ComponentRender from '../component-render'
 
 describe('${upperName}', () => {
   it.each([
-    ['basic case', {}],
+    // Props
     ['with class', { props: { class: '' } }],
     ['with ui', { props: { ui: {} } }]
   ])('renders %s correctly', async (nameOrHtml: string, options: { props?: ${upperName}Props, slots?: any }) => {

diff --git a/playground/pages/checkbox.vue b/playground/pages/checkbox.vue
@@ -8,18 +8,18 @@ const checked = ref(false)
 
 <template>
   <div class="flex flex-col items-center gap-4">
-    <div class="flex flex-col gap-4 ml-[-286px]">
+    <div class="flex flex-col gap-4">
       <UCheckbox v-model="checked" label="Model" />
       <UCheckbox label="Default value" :default-value="true" />
       <UCheckbox label="Indeterminate" indeterminate />
       <UCheckbox label="Required" required />
       <UCheckbox label="Disabled" disabled />
       <UCheckbox label="Custom icon" color="red" icon="i-heroicons-heart-solid" :model-value="true" />
     </div>
-    <div class="flex items-center gap-4 ml-[-156px]">
+    <div class="flex items-center gap-4 mr-[-11px]">
       <UCheckbox v-for="size in sizes" :key="size" label="Check me" :size="(size as any)" />
     </div>
-    <div class="flex items-center gap-4">
+    <div class="flex items-center gap-4 mr-[-96px]">
       <UCheckbox v-for="size in sizes" :key="size" label="Check me" description="This is a description" :size="(size as any)" />
     </div>
   </div>

diff --git a/playground/pages/chip.vue b/playground/pages/chip.vue
@@ -29,7 +29,7 @@ const items = [{
       </UChip>
     </div>
 
-    <div class="flex items-center gap-2 ml-[-84px]">
+    <div class="flex items-center gap-2">
       <UChip v-for="size in sizes" :key="size" :size="(size as any)" inset text="1">
         <UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" :size="(size as any)" />
       </UChip>

diff --git a/playground/pages/form-field.vue b/playground/pages/form-field.vue
@@ -13,7 +13,7 @@ const feedbacks = [
 
 <template>
   <div class="flex flex-col items-center gap-4">
-    <div class="flex flex-col gap-4 ml-[-258px]">
+    <div class="flex flex-col gap-4 ml-[-38px]">
       <div v-for="(feedback, count) in feedbacks" :key="count" class="flex items-center">
         <UFormField v-bind="feedback" label="Email" name="email">
           <UInput placeholder="john@lennon.com" />

diff --git a/playground/pages/input.vue b/playground/pages/input.vue
@@ -6,21 +6,21 @@ const sizes = Object.keys(theme.variants.size)
 
 <template>
   <div class="flex flex-col items-center gap-4">
-    <div class="flex flex-col gap-4 ml-[-169px]">
+    <div class="flex flex-col gap-4 ml-[86px]">
       <UInput placeholder="Search..." autofocus />
       <UInput placeholder="Search..." color="gray" />
       <UInput placeholder="Search..." color="primary" />
       <UInput placeholder="Search..." disabled />
-      <UInput placeholder="Search..." type="number" />
-      <UInput icon="i-heroicons-folder" placeholder="Search..." type="file" />
-      <UInput icon="i-heroicons-calendar" placeholder="Search..." type="date" />
-      <UInput icon="i-heroicons-lock-closed" placeholder="Search..." type="password" value="password" />
+      <UInput file="i-heroicons-calculator" type="number" :model-value="10" />
+      <UInput icon="i-heroicons-folder" type="file" />
+      <UInput icon="i-heroicons-calendar" type="date" :model-value="new Date().toISOString().substring(0, 10)" />
+      <UInput icon="i-heroicons-lock-closed" type="password" model-value="password" />
       <UInput loading placeholder="Search..." />
       <UInput loading leading-icon="i-heroicons-magnifying-glass" placeholder="Search..." />
       <UInput loading trailing placeholder="Search..." />
       <UInput loading trailing-icon="i-heroicons-magnifying-glass" placeholder="Search..." />
     </div>
-    <div class="flex items-center gap-4 ml-[-76px]">
+    <div class="flex items-center gap-4 -ml-[42px]">
       <UInput
         v-for="size in sizes"
         :key="size"

diff --git a/playground/pages/radio-group.vue b/playground/pages/radio-group.vue
@@ -23,23 +23,23 @@ const optionsWithDescription = [
 
 <template>
   <div class="flex flex-col items-center gap-4">
-    <div class="flex flex-col gap-4 ml-[-142px]">
+    <div class="flex flex-col gap-4">
       <URadioGroup :options="options" default-value="1" />
       <URadioGroup :options="literalOptions" />
       <URadioGroup :options="options" label="Disabled" disabled />
       <URadioGroup :options="options" color="red" default-value="1" />
       <URadioGroup :options="options" orientation="horizontal" />
     </div>
 
-    <div class="flex items-center gap-4">
+    <div class="flex items-center gap-4 ml-[34px]">
       <URadioGroup v-for="size in sizes" :key="size" :size="(size as any)" :options="options" />
     </div>
 
-    <div class="flex items-center gap-4 ml-[75px]">
+    <div class="flex items-center gap-4 ml-[74px]">
       <URadioGroup v-for="size in sizes" :key="size" :size="(size as any)" :options="optionsWithDescription" />
     </div>
 
-    <div class="flex gap-4 ml-[-142px]">
+    <div class="flex gap-4">
       <URadioGroup :options="options" legend="Legend" />
       <URadioGroup :options="options" legend="Legend" required />
       <URadioGroup :options="options">

diff --git a/playground/pages/separator.vue b/playground/pages/separator.vue
@@ -15,7 +15,7 @@
       </div>
 
       <USeparator
-        :avatar="{ size: 'sm', src: 'https://avatars.githubusercontent.com/u/739984?v=4' }"
+        :avatar="{ src: 'https://avatars.githubusercontent.com/u/739984?v=4' }"
         decorative
         orientation="vertical"
       />
@@ -25,7 +25,7 @@
       </div>
 
       <USeparator decorative orientation="vertical">
-        <UAvatar src="https://avatars.githubusercontent.com/u/13056429?v=4" />
+        <UAvatar size="2xs" src="https://avatars.githubusercontent.com/u/13056429?v=4" />
       </USeparator>
 
       <div class="flex-1 text-center">

diff --git a/playground/pages/slider.vue b/playground/pages/slider.vue
@@ -14,22 +14,24 @@ const value = ref(50)
       <USlider color="green" />
       <USlider inverted />
       <USlider disabled />
-      <USlider :min="4" :max="12" :step="2" />
+      <USlider :min="4" :max="12" :step="2" :model-value="6" />
     </div>
 
     <div class="flex flex-col gap-4 w-48">
-      <USlider :model-value="[0, 10]" />
-      <USlider :model-value="[0, 10, 30]" />
-      <USlider :model-value="[0, 30]" :min-steps-between-thumbs="20" />
-      <USlider :default-value="[0, 10]" />
+      <USlider :default-value="[0, 20]" />
+      <USlider :model-value="[0, 20]" />
+      <USlider :model-value="[0, 20, 80]" />
+      <USlider :model-value="[0, 80]" :min-steps-between-thumbs="20" />
     </div>
 
     <div class="flex items-center gap-4">
-      <USlider v-for="size in sizes" :key="size" :size="(size as any)" class="w-32" />
+      <USlider v-for="size in sizes" :key="size" v-model="value" :size="(size as any)" class="w-48" />
     </div>
 
-    <div class="h-48">
+    <div class="h-48 flex items-center gap-8">
+      <USlider :model-value="[0, 20, 80]" orientation="vertical" />
       <USlider v-model="value" orientation="vertical" />
+      <USlider :model-value="[0, 80]" :min-steps-between-thumbs="20" orientation="vertical" />
     </div>
   </div>
 </template>
diff --git a/playground/pages/switch.vue b/playground/pages/switch.vue
@@ -8,16 +8,16 @@ const checked = ref(false)
 
 <template>
   <div class="flex flex-col items-center gap-4">
-    <div class="flex flex-col gap-4 ml-[-369px]">
+    <div class="flex flex-col gap-4 ml-[-114px]">
       <USwitch v-model="checked" label="Model" />
       <USwitch label="Default value" :default-value="true" />
       <USwitch label="Required" required />
       <USwitch label="Disabled" disabled />
     </div>
-    <div class="flex items-center gap-4 ml-[-150px]">
+    <div class="flex items-center gap-4 ml-[-82px]">
       <USwitch v-for="size in sizes" :key="size" :size="(size as any)" label="Switch me" />
     </div>
-    <div class="flex items-center gap-4 ml-[-150px]">
+    <div class="flex items-center gap-4 ml-[-82px]">
       <USwitch
         v-for="size in sizes"
         :key="size"
@@ -27,7 +27,7 @@ const checked = ref(false)
         checked-icon="i-heroicons-check-20-solid"
       />
     </div>
-    <div class="flex items-center gap-4 ml-[-150px]">
+    <div class="flex items-center gap-4 ml-[-82px]">
       <USwitch
         v-for="size in sizes"
         :key="size"
@@ -47,5 +47,16 @@ const checked = ref(false)
         description="This is a description"
       />
     </div>
+    <div class="flex items-center gap-4">
+      <USwitch
+        v-for="size in sizes"
+        :key="size"
+        :size="(size as any)"
+        label="Switch me"
+        description="This is a description"
+        unchecked-icon="i-heroicons-x-mark-20-solid"
+        checked-icon="i-heroicons-check-20-solid"
+      />
+    </div>
   </div>
 </template>
diff --git a/src/module.ts b/src/module.ts
@@ -24,7 +24,7 @@ export default defineNuxtModule<ModuleOptions>({
   async setup(options, nuxt) {
     const { resolve } = createResolver(import.meta.url)
 
-    options.colors = options.colors || ['primary', 'red', 'orange', 'amber', 'yellow', 'lime', 'green', 'emerald', 'teal', 'cyan', 'sky', 'blue', 'indigo', 'violet', 'purple', 'fuchia', 'pink', 'rose']
+    options.colors = options.colors?.length ? ['primary', ...options.colors] : ['primary', 'red', 'orange', 'amber', 'yellow', 'lime', 'green', 'emerald', 'teal', 'cyan', 'sky', 'blue', 'indigo', 'violet', 'purple', 'fuchia', 'pink', 'rose']
 
     nuxt.options.alias['#ui'] = resolve('./runtime')
 

diff --git a/src/runtime/components/Accordion.vue b/src/runtime/components/Accordion.vue
@@ -63,7 +63,7 @@ const ui = computed(() => tv({ extend: accordion, slots: props.ui })({ disabled:
   <AccordionRoot v-bind="rootProps" :class="ui.root({ class: props.class })">
     <AccordionItem v-for="(item, index) in items" :key="index" :value="item.value || String(index)" :disabled="item.disabled" :class="ui.item()">
       <AccordionHeader :class="ui.header()">
-        <AccordionTrigger :class="ui.trigger()">
+        <AccordionTrigger :class="ui.trigger({ disabled: item.disabled })">
           <slot name="leading" :item="item" :index="index">
             <UIcon v-if="item.icon" :name="item.icon" :class="ui.leadingIcon()" />
           </slot>

diff --git a/src/runtime/components/Alert.vue b/src/runtime/components/Alert.vue
@@ -93,7 +93,7 @@ const ui = computed(() => tv({ extend: alert, slots: props.ui })({
       <UButton
         v-if="close"
         :icon="appConfig.ui.icons.close"
-        size="sm"
+        size="md"
         color="gray"
         variant="link"
         aria-label="Close"

diff --git a/src/runtime/components/DropdownMenuContent.vue b/src/runtime/components/DropdownMenuContent.vue
@@ -54,7 +54,7 @@ const groups = computed(() => props.items?.length ? (Array.isArray(props.items[0
       <slot name="trailing" :item="item" :active="active">
         <UIcon v-if="item.children?.length" :name="appConfig.ui.icons.chevronRight" :class="ui.itemTrailingIcon()" />
         <span v-else-if="item.shortcuts?.length" :class="ui.itemTrailingShortcuts()">
-          <UKbd v-for="(shortcut, shortcutIndex) in item.shortcuts" :key="shortcutIndex" size="sm" v-bind="typeof shortcut === 'string' ? { value: shortcut } : shortcut" />
+          <UKbd v-for="(shortcut, shortcutIndex) in item.shortcuts" :key="shortcutIndex" size="md" v-bind="typeof shortcut === 'string' ? { value: shortcut } : shortcut" />
         </span>
       </slot>
     </span>

diff --git a/src/runtime/components/Input.vue b/src/runtime/components/Input.vue
@@ -63,6 +63,7 @@ const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponen
 // const size = computed(() => sizeButtonGroup.value || sizeFormGroup.value)
 
 const ui = computed(() => tv({ extend: input, slots: props.ui })({
+  type: props.type,
   color: color.value,
   variant: props.variant,
   size: size?.value,

diff --git a/src/runtime/components/Modal.vue b/src/runtime/components/Modal.vue
@@ -104,7 +104,7 @@ const ui = computed(() => tv({ extend: modal, slots: props.ui })({
                   <UButton
                     v-if="close !== null"
                     :icon="appConfig.ui.icons.close"
-                    size="sm"
+                    size="md"
                     color="gray"
                     variant="ghost"
                     aria-label="Close"

diff --git a/src/runtime/components/NavigationMenu.vue b/src/runtime/components/NavigationMenu.vue
@@ -78,9 +78,8 @@ const lists = computed(() => props.links?.length ? (Array.isArray(props.links[0]
                   <slot name="trailing" :link="link" :active="active">
                     <UBadge
                       v-if="link.badge"
-                      color="gray"
-                      variant="solid"
-                      size="xs"
+                      color="white"
+                      size="sm"
                       v-bind="(typeof link.badge === 'string' || typeof link.badge === 'number') ? { label: link.badge } : link.badge"
                       :class="ui.linkTrailingBadge()"
                     />

diff --git a/src/runtime/components/Slideover.vue b/src/runtime/components/Slideover.vue
@@ -107,7 +107,7 @@ const ui = computed(() => tv({ extend: slideover, slots: props.ui })({
                   <UButton
                     v-if="close !== null"
                     :icon="appConfig.ui.icons.close"
-                    size="sm"
+                    size="md"
                     color="gray"
                     variant="ghost"
                     aria-label="Close"

diff --git a/src/runtime/components/Toast.vue b/src/runtime/components/Toast.vue
@@ -121,7 +121,7 @@ defineExpose({
           <UButton
             v-if="close !== null"
             :icon="appConfig.ui.icons.close"
-            size="sm"
+            size="md"
             color="gray"
             variant="link"
             aria-label="Close"

diff --git a/src/runtime/components/Tooltip.vue b/src/runtime/components/Tooltip.vue
@@ -63,7 +63,7 @@ const ui = computed(() => tv({ extend: tooltip, slots: props.ui })({ side: conte
 
           <span v-if="shortcuts?.length || $slots.shortcuts" :class="ui.shortcuts()">
             <slot name="shortcuts">
-              <UKbd v-for="(shortcut, index) in shortcuts" :key="index" size="xs" v-bind="typeof shortcut === 'string' ? { value: shortcut } : shortcut" />
+              <UKbd v-for="(shortcut, index) in shortcuts" :key="index" size="sm" v-bind="typeof shortcut === 'string' ? { value: shortcut } : shortcut" />
             </slot>
           </span>
         </slot>

diff --git a/src/templates.ts b/src/templates.ts
@@ -168,6 +168,8 @@ export function addTemplates(options: ModuleOptions, nuxt: Nuxt) {
   --color-cool-900: #111827;
   --color-cool-950: #030712;
 
+  --spacing-4_5: 1.125rem;
+
   ${shades.map(shade => `--color-primary-${shade}: var(--color-primary-${shade});`).join('\n\t')}
   ${shades.map(shade => `--color-gray-${shade}: var(--color-gray-${shade});`).join('\n\t')}
 }

diff --git a/src/theme/avatar.ts b/src/theme/avatar.ts
@@ -37,6 +37,6 @@ export default {
     }
   },
   defaultVariants: {
-    size: 'sm'
+    size: 'md'
   }
 }
diff --git a/src/theme/badge.ts b/src/theme/badge.ts
@@ -14,10 +14,9 @@ export default (config: { colors: string[] }) => ({
       subtle: ''
     },
     size: {
-      xs: 'text-xs px-1.5 py-0.5',
-      sm: 'text-xs px-2 py-1',
-      md: 'text-sm px-2 py-1',
-      lg: 'text-sm px-2.5 py-1.5'
+      sm: 'text-xs px-1.5 py-0.5',
+      md: 'text-xs px-2 py-1',
+      lg: 'text-sm px-2 py-1'
     }
   },
   compoundVariants: [...config.colors.map((color: string) => ({
@@ -52,6 +51,6 @@ export default (config: { colors: string[] }) => ({
   defaultVariants: {
     color: 'primary',
     variant: 'solid',
-    size: 'sm'
+    size: 'md'
   }
 })