@saasmakers/ui 2.0.27 → 2.0.28

package/app/components/layout/LayoutBackdrop.vue

@@ -0,0 +1,56 @@
+<script lang="ts" setup>
+import type { LayoutBackdrop } from '../../types/layout'
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(defineProps<LayoutBackdrop>(), {
+  dragTransition: false,
+  opacity: undefined,
+  transitionless: false,
+  zIndex: 60,
+})
+
+const emit = defineEmits<{
+  click: [event: MouseEvent]
+}>()
+
+const visible = defineModel<boolean>({ default: false })
+
+const backdropStyle = computed(() => {
+  if (props.opacity === undefined) {
+    return { zIndex: props.zIndex }
+  }
+
+  return {
+    opacity: props.opacity,
+    zIndex: props.zIndex,
+  }
+})
+</script>
+
+<template>
+  <ClientOnly>
+    <Teleport to="body">
+      <Transition
+        enter-active-class="transition-opacity duration-300 ease motion-reduce:transition-none motion-reduce:duration-0"
+        enter-from-class="opacity-0 motion-reduce:opacity-100"
+        enter-to-class="opacity-100"
+        leave-active-class="transition-opacity duration-300 ease motion-reduce:transition-none motion-reduce:duration-0"
+        leave-from-class="opacity-100"
+        leave-to-class="opacity-0 motion-reduce:opacity-100"
+      >
+        <div
+          v-if="visible"
+          aria-hidden="true"
+          class="layout-backdrop fixed inset-0 bg-black/50"
+          :class="{
+            'transition-none motion-reduce:transition-none': transitionless,
+            'transition-opacity duration-200 ease motion-reduce:transition-none motion-reduce:duration-0': dragTransition,
+          }"
+          :style="backdropStyle"
+          @click="emit('click', $event)"
+        />
+      </Transition>
+    </Teleport>
+  </ClientOnly>
+</template>

package/app/components/layout/LayoutBottomSheet.vue

@@ -177,31 +177,16 @@ watch(visible, (isVisible) => {
 </script>
 
 <template>
+  <LayoutBackdrop
+    v-model="visible"
+    :drag-transition="!drag.isDragging && (drag.closing || drag.offset > 0)"
+    :opacity="drag.closing ? 0 : drag.offset > 0 ? Math.max(0, 1 - drag.offset / (panelRef?.offsetHeight ?? 320)) : undefined"
+    :transitionless="drag.isDragging"
+    @click="onClose"
+  />
+
   <ClientOnly>
     <Teleport to="body">
-      <Transition
-        enter-active-class="transition-opacity duration-300 ease motion-reduce:transition-none motion-reduce:duration-0"
-        enter-from-class="opacity-0 motion-reduce:opacity-100"
-        enter-to-class="opacity-100"
-        leave-active-class="transition-opacity duration-300 ease motion-reduce:transition-none motion-reduce:duration-0"
-        leave-from-class="opacity-100"
-        leave-to-class="opacity-0 motion-reduce:opacity-100"
-      >
-        <div
-          v-if="visible"
-          aria-hidden="true"
-          class="layout-bottom-sheet fixed inset-0 z-[60] bg-black/50"
-          :class="{
-            'transition-none motion-reduce:transition-none': drag.isDragging,
-            'transition-opacity duration-200 ease motion-reduce:transition-none motion-reduce:duration-0': !drag.isDragging && (drag.closing || drag.offset > 0),
-          }"
-          :style="{
-            opacity: drag.closing ? 0 : drag.offset > 0 ? Math.max(0, 1 - drag.offset / (panelRef?.offsetHeight ?? 320)) : undefined,
-          }"
-          @click="onClose"
-        />
-      </Transition>
-
       <Transition
         enter-active-class="transition-transform duration-300 ease motion-reduce:transition-none motion-reduce:duration-0"
         enter-from-class="translate-y-full motion-reduce:translate-y-0"

package/app/components/layout/LayoutModal.vue

@@ -17,24 +17,13 @@ function onClose() {
 </script>
 
 <template>
+  <LayoutBackdrop
+    v-model="visible"
+    @click="onClose"
+  />
+
   <ClientOnly>
     <Teleport to="body">
-      <Transition
-        enter-active-class="transition-opacity duration-300 ease motion-reduce:transition-none motion-reduce:duration-0"
-        enter-from-class="opacity-0 motion-reduce:opacity-100"
-        enter-to-class="opacity-100"
-        leave-active-class="transition-opacity duration-300 ease motion-reduce:transition-none motion-reduce:duration-0"
-        leave-from-class="opacity-100"
-        leave-to-class="opacity-0 motion-reduce:opacity-100"
-      >
-        <div
-          v-if="visible"
-          aria-hidden="true"
-          class="layout-modal fixed inset-0 z-[60] bg-black/50"
-          @click="onClose"
-        />
-      </Transition>
-
       <Transition
         enter-active-class="transition duration-200 ease motion-reduce:transition-none motion-reduce:duration-0"
         enter-from-class="opacity-0 scale-95 motion-reduce:scale-100 motion-reduce:opacity-100"

package/app/types/bases.d.ts

@@ -230,25 +230,6 @@ export type BaseMetricPerformance = 'down' | 'equal' | 'up'
 
 export type BaseMetricSize = 'base' | 'sm'
 
-export interface BaseOverlay {
-  active?: boolean
-  clickable?: boolean
-  fixed?: boolean
-  hasClose?: boolean
-  opacity?: BaseOverlayOpacity
-  position?: BaseOverlayPosition
-}
-
-export type BaseOverlayOpacity
-  = | 0
-    | 25
-    | 50
-    | 75
-    | 95
-    | 100
-
-export type BaseOverlayPosition = 'absolute' | 'fixed'
-
 export interface BaseParagraph {
   alignment?: BaseAlignment
   size?: BaseParagraphSize

package/app/types/global.d.ts

@@ -55,9 +55,6 @@ declare global {
   type BaseMetricAlignment = import('./bases').BaseMetricAlignment
   type BaseMetricPerformance = import('./bases').BaseMetricPerformance
   type BaseMetricSize = import('./bases').BaseMetricSize
-  type BaseOverlay = import('./bases').BaseOverlay
-  type BaseOverlayOpacity = import('./bases').BaseOverlayOpacity
-  type BaseOverlayPosition = import('./bases').BaseOverlayPosition
   type BaseParagraph = import('./bases').BaseParagraph
   type BaseParagraphAlignment = import('./bases').BaseParagraphAlignment
   type BaseParagraphSize = import('./bases').BaseParagraphSize
@@ -117,6 +114,7 @@ declare global {
 
   // Layout
   type LayoutApps = import('./layout').LayoutApps
+  type LayoutBackdrop = import('./layout').LayoutBackdrop
   type LayoutBottomSheet = import('./layout').LayoutBottomSheet
   type LayoutModal = import('./layout').LayoutModal
 

package/app/types/layout.d.ts

@@ -3,6 +3,13 @@ export interface LayoutApps {
   playStoreId?: string
 }
 
+export interface LayoutBackdrop {
+  dragTransition?: boolean
+  opacity?: number
+  transitionless?: boolean
+  zIndex?: number
+}
+
 export interface LayoutBottomSheet {
   title?: string
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saasmakers/ui",
-  "version": "2.0.27",
+  "version": "2.0.28",
   "private": false,
   "description": "Reusable Nuxt UI components for SaaS Makers projects",
   "license": "MIT",

package/app/components/bases/BaseOverlay.vue

@@ -1,97 +0,0 @@
-<script lang="ts" setup>
-import { onKeyStroke } from '@vueuse/core'
-import { Motion } from 'motion-v'
-import type { BaseOverlay } from '../../types/bases'
-
-const props = withDefaults(defineProps<BaseOverlay>(), {
-  active: true,
-  clickable: true,
-  fixed: true,
-  hasClose: true,
-  opacity: 75,
-  position: 'absolute',
-})
-
-const emit = defineEmits<{
-  click: [event: MouseEvent]
-  close: [event: KeyboardEvent | MouseEvent]
-}>()
-
-defineSlots<{
-  default?: () => VNode[]
-}>()
-
-const isClickable = computed(() => {
-  return props.clickable || props.hasClose
-})
-
-function onClick(event: MouseEvent) {
-  emit('click', event)
-}
-
-function onClose(event: KeyboardEvent | MouseEvent) {
-  emit('close', event)
-}
-
-function onKeyDown(event: KeyboardEvent) {
-  if (isClickable.value) {
-    (event.currentTarget as HTMLElement).click()
-  }
-}
-
-onKeyStroke('Escape', (event) => {
-  event.preventDefault()
-  onClose(event)
-})
-</script>
-
-<template>
-  <div
-    :class="{
-      'fixed inset-0': fixed,
-      'cursor-pointer': isClickable,
-    }"
-    role="button"
-    tabindex="0"
-    @click="onClick"
-    @keydown.enter="onKeyDown"
-    @keydown.space.prevent="onKeyDown"
-  >
-    <BaseIcon
-      v-if="hasClose"
-      class="pointer-events-auto absolute right-4 top-4 z-50 text-gray-200 dark:text-gray-800"
-      clickable
-      :icon="getLayerIcon('close')"
-      @click="onClose"
-    />
-
-    <div
-      v-if="$slots.default"
-      class="relative z-50 h-full w-full"
-    >
-      <slot />
-    </div>
-
-    <Motion
-      :animate="fadeIn.animate"
-      as="span"
-      class="absolute inset-0 z-40"
-      :initial="fadeIn.initial"
-    >
-      <div
-        class="inset-0 bg-gray-900 dark:bg-gray-100"
-        :class="{
-          'h-0 w-0': !active,
-          'opacity-0': opacity === 0,
-          'opacity-25': opacity === 25,
-          'opacity-50': opacity === 50,
-          'opacity-75': opacity === 75,
-          'opacity-95': opacity === 95,
-          'opacity-100': opacity === 100,
-          'absolute': position === 'absolute',
-          'fixed': position === 'fixed',
-        }"
-      />
-    </Motion>
-  </div>
-</template>