feat(Slideover): preset support (#68)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>

docs/pages/migration.vue

@@ -77,6 +77,7 @@ const components = [
     label: 'AvatarGroup',
     to: '/components/AvatarGroup',
     nuxt3: true,
+    capi: true,
     typescript: true
   },
   {
@@ -129,6 +130,7 @@ const components = [
     label: 'Alert',
     to: '/components/Alert',
     nuxt3: true,
+    capi: true,
     typescript: true
   },
   {
@@ -181,6 +183,8 @@ const components = [
   {
     label: 'SelectCustom',
     to: '/components/SelectCustom',
+    capi: true,
+    preset: true,
     typescript: true
   },
   {
@@ -265,6 +269,7 @@ const components = [
     to: '/components/Slideover',
     nuxt3: true,
     capi: true,
+    preset: true,
     typescript: true
   },
   {

src/runtime/components/overlays/Modal.vue

@@ -12,7 +12,7 @@
           leave-from="opacity-100"
           leave-to="opacity-0"
         >
-          <div class="fixed inset-0 bg-gray-500/75 dark:bg-gray-600/75 transition-opacity" />
+          <div class="fixed inset-0 transition-opacity" :class="overlayClass" />
         </TransitionChild>
 
         <div class="fixed inset-0 overflow-y-auto">
@@ -77,6 +77,10 @@ const props = defineProps({
     type: String,
     default: () => $ui.modal.background
   },
+  overlayClass: {
+    type: String,
+    default: () => $ui.modal.overlay
+  },
   shadowClass: {
     type: String,
     default: () => $ui.modal.shadow

src/runtime/components/overlays/Slideover.vue

@@ -16,7 +16,7 @@
         leave-from="opacity-100"
         leave-to="opacity-0"
       >
-        <div class="fixed inset-0 bg-gray-500/75 dark:bg-gray-600/75 transition-opacity" />
+        <div class="fixed inset-0 transition-opacity" :class="overlayClass" />
       </TransitionChild>
 
       <TransitionChild
@@ -28,9 +28,9 @@
         leave-from="translate-x-0"
         :leave-to="side === 'left' ? '-translate-x-full' : 'translate-x-full'"
       >
-        <DialogPanel class="relative flex-1 flex flex-col w-full max-w-md u-bg-white focus:outline-none" :class="panelClass">
-          <div v-if="$slots.header" class="border-b u-border-gray-200">
-            <div class="flex items-center justify-between px-4 sm:px-6 h-16">
+        <DialogPanel :class="slideoverClass">
+          <div v-if="$slots.header" :class="headerWrapperClass">
+            <div :class="headerClass">
               <slot name="header" />
             </div>
           </div>
@@ -45,6 +45,8 @@
 import { computed } from 'vue'
 import type { WritableComputedRef, PropType } from 'vue'
 import { Dialog, DialogPanel, TransitionRoot, TransitionChild } from '@headlessui/vue'
+import { classNames } from '../../utils/'
+import $ui from '#build/ui'
 
 const props = defineProps({
   modelValue: {
@@ -56,9 +58,29 @@ const props = defineProps({
     default: 'left',
     validator: (value: string) => ['left', 'right'].includes(value)
   },
-  panelClass: {
+  baseClass: {
     type: String,
-    default: 'max-w-md'
+    default: () => $ui.slideover.base
+  },
+  backgroundClass: {
+    type: String,
+    default: () => $ui.slideover.background
+  },
+  overlayClass: {
+    type: String,
+    default: () => $ui.slideover.overlay
+  },
+  widthClass: {
+    type: String,
+    default: () => $ui.slideover.width
+  },
+  headerWrapperClass: {
+    type: String,
+    default: () => $ui.slideover.header.wrapper
+  },
+  headerClass: {
+    type: String,
+    default: () => $ui.slideover.header.base
   }
 })
 const emit = defineEmits(['update:modelValue'])
@@ -71,6 +93,14 @@ const isOpen: WritableComputedRef<boolean> = computed({
     emit('update:modelValue', value)
   }
 })
+
+const slideoverClass = computed(() => {
+  return classNames(
+    props.baseClass,
+    props.widthClass,
+    props.backgroundClass
+  )
+})
 </script>
 
 <script lang="ts">

src/runtime/presets/default.ts

@@ -239,6 +239,7 @@ export default (variantColors: string[]) => {
   const modal = {
     base: 'relative inline-block align-bottom text-left overflow-hidden transform transition-all sm:my-8 sm:align-middle w-full',
     background: 'u-bg-white',
+    overlay: 'bg-gray-500/75 dark:bg-gray-600/75',
     border: '',
     ring: '',
     rounded: 'rounded-lg',
@@ -372,6 +373,17 @@ export default (variantColors: string[]) => {
     }
   }
 
+  const slideover = {
+    overlay: 'bg-gray-500/75 dark:bg-gray-600/75',
+    base: 'relative flex-1 flex flex-col w-full focus:outline-none',
+    background: 'u-bg-white',
+    width: 'max-w-md',
+    header: {
+      wrapper: 'border-b u-border-gray-200',
+      base: 'flex items-center justify-between px-4 sm:px-6 h-16'
+    }
+  }
+
   return {
     card,
     modal,
@@ -391,6 +403,7 @@ export default (variantColors: string[]) => {
     dropdown,
     tabs,
     pills,
-    avatar
+    avatar,
+    slideover
   }
 }