chore: support presets for InputGroup and ToggleGroup

docs/pages/components/[component].vue

@@ -110,6 +110,14 @@ const defaultProps = {
   Input: {
     name: 'input'
   },
+  InputGroup: {
+    name: 'input',
+    label: 'Input group'
+  },
+  ToggleGroup: {
+    name: 'input',
+    label: 'Toggle group'
+  },
   Checkbox: {
     name: 'checkbox'
   },

docs/pages/migration.vue

@@ -101,6 +101,13 @@ const components = [
     nuxt3: true,
     capi: true
   },
+  {
+    label: 'ToggleGroup',
+    to: '/components/ToggleGroup',
+    nuxt3: true,
+    capi: true,
+    preset: true
+  },
   {
     label: 'Alert',
     to: '/components/Alert'
@@ -117,7 +124,10 @@ const components = [
   },
   {
     label: 'InputGroup',
-    to: '/components/InputGroup'
+    to: '/components/InputGroup',
+    nuxt3: true,
+    capi: true,
+    preset: true
   },
   {
     label: 'Radio',

src/components/forms/InputGroup.vue

@@ -1,30 +1,23 @@
 <template>
-  <div
-    :class="{ 'sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:u-border-gray-200': inline }"
-  >
+  <div>
     <slot name="label">
-      <div :class="{ 'flex content-center justify-between': !inline }">
+      <div class="flex content-center justify-between">
         <label
           v-if="label"
           :for="name"
-          class="block text-sm font-medium leading-5 u-text-gray-700"
-          :class="{'sm:mt-px sm:pt-2': inline }"
+          :class="labelClass"
         >
           {{ label }}
-          <span v-if="required" class="text-red-400">*</span>
+          <span v-if="required" :class="requiredClass">*</span>
         </label>
-        <span
-          v-if="$slots.hint || hint"
-          class="text-sm leading-5 u-text-gray-500"
-          :class="{ 'mt-1 max-w-2xl': inline }"
-        ><slot name="hint">{{ hint }}</slot></span>
+        <span v-if="$slots.hint || hint" :class="hintClass">
+          <slot name="hint">{{ hint }}</slot>
+        </span>
       </div>
     </slot>
-    <div
-      :class="{ 'mt-1': label && !inline, 'mt-1 sm:mt-0': label && inline, 'sm:col-span-2': inline }"
-    >
+    <div :class="!!label && containerClass">
       <slot />
-      <p v-if="help" class="mt-2 text-sm u-text-gray-500">
+      <p v-if="help" :class="helpClass">
         {{ help }}
       </p>
     </div>
@@ -32,6 +25,8 @@
 </template>
 
 <script>
+import $ui from '#build/ui'
+
 export default {
   props: {
     name: {
@@ -54,9 +49,25 @@ export default {
       type: String,
       default: null
     },
-    inline: {
-      type: Boolean,
-      default: false
+    containerClass: {
+      type: String,
+      default: () => $ui.inputGroup.container
+    },
+    labelClass: {
+      type: String,
+      default: () => $ui.inputGroup.label
+    },
+    requiredClass: {
+      type: String,
+      default: () => $ui.inputGroup.required
+    },
+    hintClass: {
+      type: String,
+      default: () => $ui.inputGroup.hint
+    },
+    helpClass: {
+      type: String,
+      default: () => $ui.inputGroup.help
     }
   }
 }

src/components/forms/ToggleGroup.vue

@@ -1,31 +1,23 @@
 <template>
-  <SwitchGroup
-    :class="{ 'sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:u-border-gray-200': inline }"
-    as="div"
-  >
+  <SwitchGroup as="div">
     <slot name="label">
-      <div :class="{ 'flex content-center justify-between': !inline }">
+      <div class="flex content-center justify-between">
         <SwitchLabel
           v-if="label"
           :for="name"
-          class="block text-sm font-medium leading-5 u-text-gray-700"
-          :class="{'sm:mt-px sm:pt-2': inline }"
+          :class="labelClass"
         >
           {{ label }}
-          <span v-if="required" class="text-red-400">*</span>
+          <span v-if="required" :class="requiredClass">*</span>
         </SwitchLabel>
-        <span
-          v-if="$slots.hint || hint"
-          class="text-sm leading-5 u-text-gray-500"
-          :class="{ 'mt-1 max-w-2xl': inline }"
-        ><slot name="hint">{{ hint }}</slot></span>
+        <span v-if="$slots.hint || hint" :class="hintClass">
+          <slot name="hint">{{ hint }}</slot>
+        </span>
       </div>
     </slot>
-    <div
-      :class="{ 'mt-1': label && !inline, 'mt-1 sm:mt-0': label && inline, 'sm:col-span-2': inline }"
-    >
+    <div :class="!!label && containerClass">
       <slot />
-      <p v-if="help" class="mt-2 text-sm u-text-gray-500">
+      <p v-if="help" :class="helpClass">
         {{ help }}
       </p>
     </div>
@@ -34,6 +26,7 @@
 
 <script>
 import { SwitchGroup, SwitchLabel } from '@headlessui/vue'
+import $ui from '#build/ui'
 
 export default {
   components: {
@@ -61,9 +54,25 @@ export default {
       type: String,
       default: null
     },
-    inline: {
-      type: Boolean,
-      default: false
+    containerClass: {
+      type: String,
+      default: () => $ui.toggleGroup.container
+    },
+    labelClass: {
+      type: String,
+      default: () => $ui.toggleGroup.label
+    },
+    requiredClass: {
+      type: String,
+      default: () => $ui.toggleGroup.required
+    },
+    hintClass: {
+      type: String,
+      default: () => $ui.toggleGroup.hint
+    },
+    helpClass: {
+      type: String,
+      default: () => $ui.toggleGroup.help
     }
   }
 }

src/presets/tailwindui.ts

@@ -98,6 +98,18 @@ const input = {
   }
 }
 
+const inputGroup = {
+  label: 'block text-sm font-medium u-text-gray-700',
+  container: 'mt-1 relative',
+  required: 'text-red-400',
+  hint: 'text-sm leading-5 u-text-gray-500',
+  help: 'mt-2 text-sm u-text-gray-500'
+}
+
+const toggleGroup = {
+  ...inputGroup
+}
+
 const textarea = {
   ...input
 }
@@ -184,6 +196,8 @@ const button = {
 
 export default {
   input,
+  inputGroup,
+  toggleGroup,
   textarea,
   select,
   button