@saasmakers/ui 2.0.26 → 2.0.28

package/app/components/bases/BaseCircle.vue

@@ -0,0 +1,17 @@
+<script lang="ts" setup>
+import type { BaseCircle } from '../../types/bases'
+
+withDefaults(defineProps<BaseCircle>(), { color: 'indigo' })
+</script>
+
+<template>
+  <span
+    class="inline-block size-2.5 shrink-0 rounded-full"
+    :class="{
+      'bg-red-500': color === 'red',
+      'bg-amber-500': color === 'amber',
+      'bg-indigo-500': color === 'indigo',
+      'bg-green-500': color === 'green',
+    }"
+  />
+</template>

package/app/components/fields/FieldTabs.vue

@@ -45,7 +45,7 @@ function onTabClick(event: MouseEvent, tabValue: string) {
       :is="tab.to ? NuxtLinkLocale : 'div'"
       v-for="tab in tabs"
       :key="tab.value"
-      class="flex flex-1 cursor-pointer items-center justify-center text-xs"
+      class="flex flex-1 cursor-pointer select-none items-center justify-center text-xs"
       :class="{
         'flex-col sm:flex-row': orientation === 'responsive',
         'flex-col': orientation === 'vertical',
@@ -71,6 +71,17 @@ function onTabClick(event: MouseEvent, tabValue: string) {
       :to="tab.to"
       @click="onTabClick($event, tab.value)"
     >
+      <BaseCircle
+        v-if="tab.circle"
+        class="flex-initial"
+        :class="{
+          'mb-1 sm:mb-0 sm:mr-1.5': orientation === 'responsive',
+          'mr-1.5': orientation === 'horizontal',
+          'mb-1': orientation === 'vertical',
+        }"
+        :color="tab.circle"
+      />
+
       <BaseIcon
         v-if="tab.icon"
         class="flex-initial"
@@ -84,7 +95,7 @@ function onTabClick(event: MouseEvent, tabValue: string) {
       />
 
       <span
-        class="whitespace-nowrap flex-initial"
+        class="whitespace-nowrap font-medium flex-initial"
         :class="{
           'text-2xs sm:text-xs': orientation === 'responsive',
           'text-2xs': orientation === 'vertical',

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

@@ -128,6 +128,12 @@ export interface BaseChart {
 
 export type BaseChartType = 'bar' | 'line' | 'pie'
 
+export interface BaseCircle {
+  color?: BaseCircleColor
+}
+
+export type BaseCircleColor = 'amber' | 'green' | 'indigo' | 'red'
+
 export type BaseColor
   = | 'black'
     | 'gray'
@@ -224,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/fields.d.ts

@@ -179,6 +179,7 @@ export type FieldTabsOrientation = 'horizontal' | 'responsive' | 'vertical'
 
 export interface FieldTabsTab {
   activeColor?: BaseColor
+  circle?: BaseCircleColor
   icon?: string
   label: string
   to?: RouteLocationNamedI18n

package/app/types/global.d.ts

@@ -36,6 +36,8 @@ declare global {
   type BaseCharacterSize = import('./bases').BaseCharacterSize
   type BaseChart = import('./bases').BaseChart
   type BaseChartType = import('./bases').BaseChartType
+  type BaseCircle = import('./bases').BaseCircle
+  type BaseCircleColor = import('./bases').BaseCircleColor
   type BaseColor = import('./bases').BaseColor
   type BaseDivider = import('./bases').BaseDivider
   type BaseDividerBorderStyle = import('./bases').BaseDividerBorderStyle
@@ -53,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
@@ -115,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.26",
+  "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>