fix(modal): center align and arrow navigation (#63)

indielayer · Mar 26, 2024 · 1fc6956 · 1fc6956
1 parent 9a35590
commit 1fc6956
Show file tree

Hide file tree

Showing 5 changed files with 8 additions and 25 deletions.
diff --git a/.changeset/tough-terms-allow.md b/.changeset/tough-terms-allow.md
@@ -0,0 +1,5 @@
+---
+"@indielayer/ui": patch
+---
+
+fix(modal): center align and arrow navigation
diff --git a/packages/ui/src/components/form/Form.vue b/packages/ui/src/components/form/Form.vue
@@ -145,7 +145,7 @@ const { styles, classes, className } = useTheme('Form', {}, props)
       </div>
     </slot>
 
-    <fieldset :disabled="disabled" :class="classes.content">
+    <fieldset :disabled="disabled" :class="classes.content" class="contents">
       <slot></slot>
     </fieldset>
 

diff --git a/packages/ui/src/components/modal/Modal.vue b/packages/ui/src/components/modal/Modal.vue
@@ -188,6 +188,7 @@ defineExpose({ open, close })
         <component
           :is="isForm ? XForm : 'div'"
           ref="modalRef"
+          class="max-h-full"
           :disabled="formDisabled"
           :auto-validate="formAutoValidate"
           :title="formTitle"

diff --git a/packages/ui/src/components/modal/theme/Modal.base.theme.ts b/packages/ui/src/components/modal/theme/Modal.base.theme.ts
@@ -18,7 +18,7 @@ const theme: ModalTheme = {
 
       if (props.position === 'top') classes.push('items-start')
       else if (props.position === 'bottom') classes.push('items-end')
-      else classes.push('sm:items-end items-center')
+      else classes.push('items-end sm:items-center')
 
       return classes
     },

diff --git a/packages/ui/src/composables/useFocusTrap.ts b/packages/ui/src/composables/useFocusTrap.ts
@@ -64,29 +64,6 @@ export function useFocusTrap() {
         lastEl?.focus()
       }
 
-    } else if (event.key === 'ArrowUp' || event.key === 'ArrowLeft') {
-      event.preventDefault()
-      const currentEl = document.activeElement as HTMLElement
-      const index = focusable.indexOf(currentEl)
-      const previousEl = focusable[index - 1]
-
-      if (previousEl) {
-        previousEl.focus()
-      } else if (lastFocusableEl) {
-        lastFocusableEl.focus()
-      }
-
-    } else if (event.key === 'ArrowDown' || event.key === 'ArrowRight') {
-      event.preventDefault()
-      const currentEl = document.activeElement as HTMLElement
-      const index = focusable.indexOf(currentEl)
-      const nextElement = focusable[index + 1]
-
-      if (nextElement) {
-        nextElement.focus()
-      } else if (firstFocusableEl) {
-        firstFocusableEl.focus()
-      }
     }
   }