@saasmakers/ui 1.4.48 → 1.4.50

package/app/components/bases/BaseCard.vue

@@ -0,0 +1,179 @@
+<script lang="ts" setup>
+import { NuxtLinkLocale } from '#components'
+import type { BaseCard } from '../../types/bases'
+
+const props = withDefaults(defineProps<BaseCard>(), {
+  avatar: '',
+  clickable: true,
+  color: 'gray',
+  description: '',
+  details: '',
+  detailsIcon: undefined,
+  direction: 'horizontal',
+  emoji: undefined,
+  hasBackground: true,
+  hasChevron: false,
+  icon: undefined,
+  id: undefined,
+  image: '',
+  isSelected: false,
+  title: undefined,
+  titleIcon: undefined,
+  to: undefined,
+})
+
+const emit = defineEmits<{
+  click: [event: MouseEvent, id?: number | string]
+}>()
+
+defineSlots<{
+  default?: () => VNode[]
+  detailsLeft?: () => VNode[]
+  innerBoxLeft?: () => VNode[]
+  innerBoxRight?: () => VNode[]
+  outerBoxLeft?: () => VNode[]
+  outerBoxRight?: () => VNode[]
+  right?: () => VNode[]
+}>()
+
+const { getIcon } = useLayerIcons()
+const hasAvatarBox = computed<boolean>(() => !!(props.avatar || props.emoji || props.icon || props.image))
+
+const isClickable = computed(() => {
+  return props.to || props.clickable
+})
+
+function onClick(event: MouseEvent) {
+  emit('click', event, props.id)
+}
+</script>
+
+<template>
+  <component
+    :is="to ? NuxtLinkLocale : 'div'"
+    class="group flex flex-col"
+    :class="{
+      'cursor-pointer': isClickable,
+      'border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 shadow-sm p-1.5 pr-2.5': hasBackground,
+      'hover:border-gray-300 dark:hover:border-gray-700': hasBackground && isClickable,
+      'rounded-xl': hasBackground,
+    }"
+    :to="to"
+    @click="onClick"
+  >
+    <div
+      class="flex overflow-hidden"
+      :class="{
+        'flex-row items-center text-left': direction === 'horizontal',
+        'flex-col text-center': direction === 'vertical',
+      }"
+    >
+      <span class="flex justify-center">
+        <slot name="outerBoxLeft" />
+
+        <span
+          v-if="hasAvatarBox"
+          class="relative z-10 h-9 w-9 flex items-center justify-center flex-initial"
+          :class="{
+            'border shadow-inner': !avatar && !image,
+            'rounded-lg': !avatar && !image,
+            'border-gray-200 dark:border-gray-800 bg-gray-100 dark:bg-gray-900': !avatar && !image,
+            'mr-2': direction === 'horizontal',
+            'mb-1': direction === 'vertical',
+          }"
+        >
+          <slot name="innerBoxLeft" />
+
+          <BaseAvatar
+            v-if="avatar"
+            class="h-10 w-10 rounded-lg flex-initial"
+            :src="avatar"
+          />
+
+          <BaseEmoji
+            v-else-if="emoji"
+            class="m-0.5"
+            :emoji="emoji"
+            :has-box="false"
+          />
+
+          <BaseIcon
+            v-else-if="icon"
+            class="text-lg"
+            :color="color"
+            :icon="icon"
+          />
+
+          <img
+            v-else-if="image"
+            class="h-9 w-9 rounded-lg object-cover shadow-sm drag-none flex-initial"
+            :alt="title"
+            loading="lazy"
+            :src="image"
+          >
+
+          <slot name="innerBoxRight" />
+        </span>
+
+        <slot name="outerBoxRight" />
+      </span>
+
+      <div
+        class="min-w-0 flex flex-1 flex-col justify-center leading-snug"
+        :class="{
+          'mr-4': direction === 'horizontal',
+          'items-center': direction === 'vertical',
+        }"
+      >
+        <div class="w-full flex flex-col gap-0">
+          <BaseIcon
+            v-if="title"
+            class="w-full"
+            :class="{ 'self-center': !hasAvatarBox }"
+            :icon="titleIcon"
+            size="base"
+            :text="title"
+            truncate
+          />
+
+          <BaseText
+            v-if="description"
+            block
+            class="text-gray-600 leading-4 dark:text-gray-400"
+            size="2xs"
+            :text="description"
+          />
+        </div>
+
+        <div class="flex items-center">
+          <slot name="detailsLeft" />
+
+          <BaseIcon
+            v-if="details"
+            class="mt-0.5 whitespace-nowrap text-gray-700 font-semibold tracking-tighter dark:text-gray-300"
+            :icon="detailsIcon"
+            size="2xs"
+            :text="details"
+          />
+        </div>
+      </div>
+
+      <BaseIcon
+        v-if="isSelected"
+        class="mr-1.5 self-center text-2xl flex-initial"
+        color="green"
+        :icon="getIcon('checkCircle')"
+      />
+
+      <BaseIcon
+        v-else-if="to || hasChevron"
+        class="self-center text-xl text-gray-500 flex-initial dark:text-gray-500 group-hover:text-gray-900 dark:group-hover:text-gray-100"
+        :icon="getIcon('chevronRight')"
+      />
+
+      <slot name="right" />
+    </div>
+
+    <slot />
+  </component>
+</template>

package/app/components/layout/LayoutBottomSheet.vue

@@ -0,0 +1,393 @@
+<script lang="ts" setup>
+import type { LayoutBottomSheet } from '../../types/layout'
+
+withDefaults(defineProps<LayoutBottomSheet>(), { title: undefined })
+
+defineSlots<{
+  default?: () => VNode[]
+}>()
+
+const closeThresholdRatio = 0.25
+const dragMoveThreshold = 8
+const focusableSelector = 'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])'
+const visible = defineModel<boolean>({ default: false })
+const contentRef = ref<HTMLElement>()
+const focusTrigger = ref<HTMLElement>()
+const panelRef = ref<HTMLElement>()
+
+const drag = reactive({
+  closing: false,
+  isDragging: false,
+  offset: 0,
+  pointerId: undefined as number | undefined,
+  startedFromContent: false,
+  startY: 0,
+})
+
+let savedBodyOverflow = ''
+let savedBodyPaddingRight = ''
+
+const fixedElementPadding = new Map<HTMLElement, string>()
+
+const closeThreshold = computed(() => {
+  return (panelRef.value?.offsetHeight ?? 320) * closeThresholdRatio
+})
+
+function getFocusableElements(container: HTMLElement) {
+  return Array.from(container.querySelectorAll<HTMLElement>(focusableSelector))
+    .filter((element) => {
+      return element.offsetParent !== null || getComputedStyle(element).position === 'fixed'
+    })
+}
+
+function lockBodyScroll() {
+  const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth
+
+  savedBodyOverflow = document.body.style.overflow
+  savedBodyPaddingRight = document.body.style.paddingRight
+  document.body.style.overflow = 'hidden'
+
+  if (scrollbarWidth > 0) {
+    document.body.style.paddingRight = `${scrollbarWidth}px`
+
+    for (const element of document.querySelectorAll('body *')) {
+      if (!(element instanceof HTMLElement)) {
+        continue
+      }
+
+      if (element.classList.contains('layout-bottom-sheet')) {
+        continue
+      }
+
+      const { position } = getComputedStyle(element)
+
+      if (position !== 'fixed' && position !== 'sticky') {
+        continue
+      }
+
+      fixedElementPadding.set(element, element.style.paddingRight)
+
+      const currentPadding = Number.parseFloat(getComputedStyle(element).paddingRight) || 0
+
+      element.style.paddingRight = `${currentPadding + scrollbarWidth}px`
+    }
+  }
+}
+
+function onClose() {
+  visible.value = false
+}
+
+function onContentPointerDown(event: PointerEvent) {
+  if (drag.closing) {
+    return
+  }
+
+  if ((contentRef.value?.scrollTop ?? 0) > 0) {
+    return
+  }
+
+  drag.startedFromContent = true
+  drag.pointerId = event.pointerId
+  drag.startY = event.clientY
+}
+
+function onFocusTrap(event: KeyboardEvent) {
+  if (event.key !== 'Tab' || !panelRef.value) {
+    return
+  }
+
+  const focusableElements = getFocusableElements(panelRef.value)
+
+  if (focusableElements.length === 0) {
+    event.preventDefault()
+    panelRef.value.focus()
+
+    return
+  }
+
+  const firstElement = focusableElements[0]
+  const lastElement = focusableElements[focusableElements.length - 1]
+  const activeElement = document.activeElement
+
+  if (event.shiftKey && activeElement === firstElement) {
+    event.preventDefault()
+    lastElement.focus()
+  }
+  else if (!event.shiftKey && activeElement === lastElement) {
+    event.preventDefault()
+    firstElement.focus()
+  }
+}
+
+function onHeaderPointerDown(event: PointerEvent) {
+  if (drag.closing) {
+    return
+  }
+
+  drag.startedFromContent = false
+  drag.isDragging = true
+  drag.pointerId = event.pointerId
+  drag.startY = event.clientY
+  drag.offset = 0
+
+  const handle = event.currentTarget as HTMLElement
+
+  handle.setPointerCapture(event.pointerId)
+}
+
+function onKeydown(event: KeyboardEvent) {
+  if (!visible.value) {
+    return
+  }
+
+  if (event.key === 'Escape') {
+    onClose()
+  }
+}
+
+function onPanelAfterLeave() {
+  if (import.meta.client) {
+    unlockBodyScroll()
+    window.removeEventListener('keydown', onFocusTrap)
+    focusTrigger.value?.focus()
+
+    focusTrigger.value = undefined
+  }
+}
+
+function onPanelTransitionEnd(event: TransitionEvent) {
+  if (event.propertyName !== 'transform' || !drag.closing) {
+    return
+  }
+
+  onClose()
+  resetDragState()
+}
+
+function onPointerMove(event: PointerEvent) {
+  if (drag.startedFromContent && !drag.isDragging) {
+    if (event.pointerId !== drag.pointerId) {
+      return
+    }
+
+    if ((contentRef.value?.scrollTop ?? 0) > 0) {
+      resetPendingDrag()
+
+      return
+    }
+
+    const offset = event.clientY - drag.startY
+
+    if (offset < 0) {
+      resetPendingDrag()
+
+      return
+    }
+
+    if (offset < dragMoveThreshold) {
+      return
+    }
+
+    drag.isDragging = true
+    drag.offset = offset
+
+    const handle = event.currentTarget as HTMLElement
+
+    handle.setPointerCapture(event.pointerId)
+
+    return
+  }
+
+  if (!drag.isDragging) {
+    return
+  }
+
+  const offset = event.clientY - drag.startY
+
+  if (drag.startedFromContent && offset < 0) {
+    drag.isDragging = false
+
+    resetPendingDrag()
+
+    drag.offset = 0
+
+    const handle = event.currentTarget as HTMLElement
+
+    if (handle.hasPointerCapture(event.pointerId)) {
+      handle.releasePointerCapture(event.pointerId)
+    }
+
+    return
+  }
+
+  drag.offset = Math.max(0, offset)
+}
+
+function onPointerUp(event: PointerEvent) {
+  if (!drag.isDragging) {
+    resetPendingDrag()
+
+    return
+  }
+
+  drag.isDragging = false
+
+  resetPendingDrag()
+
+  const handle = event.currentTarget as HTMLElement
+
+  handle.releasePointerCapture(event.pointerId)
+
+  if (drag.offset >= closeThreshold.value) {
+    drag.closing = true
+
+    return
+  }
+
+  drag.offset = 0
+}
+
+function resetDragState() {
+  drag.closing = false
+  drag.isDragging = false
+  drag.offset = 0
+  drag.pointerId = undefined
+  drag.startY = 0
+  drag.startedFromContent = false
+}
+
+function resetPendingDrag() {
+  drag.pointerId = undefined
+  drag.startedFromContent = false
+}
+
+function unlockBodyScroll() {
+  document.body.style.overflow = savedBodyOverflow
+  document.body.style.paddingRight = savedBodyPaddingRight
+
+  for (const [element, paddingRight] of fixedElementPadding) {
+    element.style.paddingRight = paddingRight
+  }
+
+  fixedElementPadding.clear()
+}
+
+watch(visible, async (isVisible) => {
+  if (import.meta.client && isVisible) {
+    focusTrigger.value = document.activeElement instanceof HTMLElement
+      ? document.activeElement
+      : undefined
+
+    lockBodyScroll()
+
+    await nextTick()
+
+    if (panelRef.value) {
+      const focusableElements = getFocusableElements(panelRef.value)
+
+      if (focusableElements.length > 0) {
+        focusableElements[0].focus()
+      }
+      else {
+        panelRef.value.focus()
+      }
+
+      window.addEventListener('keydown', onFocusTrap)
+    }
+  }
+
+  if (!isVisible) {
+    resetDragState()
+  }
+}, { immediate: true })
+
+onMounted(() => window.addEventListener('keydown', onKeydown))
+
+onUnmounted(() => {
+  window.removeEventListener('keydown', onKeydown)
+  window.removeEventListener('keydown', onFocusTrap)
+
+  if (import.meta.client) {
+    unlockBodyScroll()
+  }
+})
+</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-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"
+        enter-to-class="translate-y-0"
+        leave-active-class="transition-transform duration-300 ease motion-reduce:transition-none motion-reduce:duration-0"
+        leave-from-class="translate-y-0"
+        leave-to-class="translate-y-full motion-reduce:translate-y-0"
+        @after-leave="onPanelAfterLeave"
+      >
+        <div
+          v-if="visible"
+          ref="panelRef"
+          :aria-label="title"
+          aria-modal="true"
+          class="layout-bottom-sheet fixed bottom-0 left-0 right-0 z-[60] mx-auto max-h-[85dvh] max-w-screen-md flex flex-col rounded-t-2xl bg-white text-gray-900 shadow-lg safe-bottom dark:bg-gray-900 dark:text-gray-100"
+          :class="{
+            'transition-none motion-reduce:transition-none': drag.isDragging,
+            'transition-transform duration-200 ease motion-reduce:transition-none motion-reduce:duration-0': !drag.isDragging && (drag.closing || drag.offset > 0),
+          }"
+          role="dialog"
+          :style="{
+            transform: drag.closing ? 'translateY(100%)' : drag.offset > 0 ? `translateY(${drag.offset}px)` : undefined,
+          }"
+          tabindex="-1"
+          @transitionend="onPanelTransitionEnd"
+        >
+          <div
+            class="flex shrink-0 cursor-grab touch-none justify-center px-5 pb-2 pt-3 active:cursor-grabbing"
+            @pointercancel="onPointerUp"
+            @pointerdown="onHeaderPointerDown"
+            @pointermove="onPointerMove"
+            @pointerup="onPointerUp"
+          >
+            <div class="h-1.5 w-10 rounded-full bg-gray-300 dark:bg-gray-700" />
+          </div>
+
+          <div
+            ref="contentRef"
+            class="min-h-0 flex-1 overflow-y-auto px-5 pb-4"
+            @pointercancel="onPointerUp"
+            @pointerdown="onContentPointerDown"
+            @pointermove="onPointerMove"
+            @pointerup="onPointerUp"
+          >
+            <slot />
+          </div>
+        </div>
+      </Transition>
+    </Teleport>
+  </ClientOnly>
+</template>

package/app/types/bases.d.ts

@@ -72,6 +72,28 @@ export type BaseButtonSize
 
 export type BaseButtonType = 'button' | 'reset' | 'submit'
 
+export interface BaseCard {
+  avatar?: string
+  clickable?: boolean
+  color?: BaseColor
+  description?: string
+  details?: string
+  detailsIcon?: string
+  direction?: BaseCardDirection
+  emoji?: string
+  hasBackground?: boolean
+  hasChevron?: boolean
+  icon?: string
+  id?: number | string
+  image?: string
+  isSelected?: boolean
+  title?: string
+  titleIcon?: string
+  to?: RouteLocationNamedI18n
+}
+
+export type BaseCardDirection = 'horizontal' | 'vertical'
+
 export interface BaseCharacter {
   character?: BaseCharacterCharacter
   size?: BaseCharacterSize

package/app/types/global.d.ts

@@ -12,6 +12,8 @@ declare global {
   type BaseButtonRounded = import('./bases').BaseButtonRounded
   type BaseButtonSize = import('./bases').BaseButtonSize
   type BaseButtonType = import('./bases').BaseButtonType
+  type BaseCard = import('./bases').BaseCard
+  type BaseCardDirection = import('./bases').BaseCardDirection
   type BaseCharacter = import('./bases').BaseCharacter
   type BaseCharacterCharacter = import('./bases').BaseCharacterCharacter
   type BaseCharacterSize = import('./bases').BaseCharacterSize
@@ -90,6 +92,9 @@ declare global {
   type FieldTextarea = import('./fields').FieldTextarea
   type FieldTime = import('./fields').FieldTime
 
+  // Layout
+  type LayoutBottomSheet = import('./layout').LayoutBottomSheet
+
   // Project
   type LayerIconIcon = import('../composables/useLayerIcons').LayerIconIcon
   type LayerIconValue = import('../composables/useLayerIcons').LayerIconValue

package/app/types/layout.d.ts

@@ -0,0 +1,3 @@
+export interface LayoutBottomSheet {
+  title?: string
+}

package/package.json

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