@saasmakers/ui 1.4.23 → 1.4.25

package/app/components/bases/BaseDivider.stories.ts

@@ -14,11 +14,10 @@ export default {
       ] satisfies BaseDividerBorderStyle[],
     },
     hideNext: { control: 'boolean' },
+    hidePrevious: { control: 'boolean' },
     margin: { control: 'number' },
     navigable: { control: 'boolean' },
-    navigationLoading: { control: 'boolean' },
-    nextLabel: { control: 'text' },
-    previousLabel: { control: 'text' },
+    loading: { control: 'boolean' },
     size: {
       control: 'select',
       options: ['sm', 'base'] satisfies BaseDividerSize[],
@@ -32,8 +31,6 @@ export const Default: StoryObj<typeof BaseDivider> = { args: { title: 'Divider T
 export const Navigable: StoryObj<typeof BaseDivider> = {
   args: {
     navigable: true,
-    nextLabel: 'Next',
-    previousLabel: 'Previous',
     title: 'This week',
   } satisfies Partial<BaseDivider>,
 }

package/app/components/bases/BaseDivider.vue

@@ -4,45 +4,25 @@ import type { BaseDivider } from '../../types/bases'
 const props = withDefaults(defineProps<BaseDivider>(), {
   borderStyle: 'solid',
   hideNext: false,
+  hidePrevious: false,
+  loading: false,
   margin: 6,
   navigable: false,
-  navigationLoading: false,
-  nextLabel: '',
-  previousLabel: '',
   size: 'base',
   title: '',
 })
 
 const emit = defineEmits<{
-  navigateNext: []
-  navigatePrevious: []
+  navigate: [event: MouseEvent, direction: BaseDividerNavigateDirection]
 }>()
 
 const { t } = useI18n()
 const { getIcon } = useLayerIcons()
 
-const displayTitle = computed(() => {
-  if (props.navigationLoading) {
-    return t('loading')
+function onNavigate(event: MouseEvent, direction: BaseDividerNavigateDirection) {
+  if (!props.loading) {
+    emit('navigate', event, direction)
   }
-
-  return props.title
-})
-
-function onNavigatePrevious() {
-  if (props.navigationLoading) {
-    return
-  }
-
-  emit('navigatePrevious')
-}
-
-function onNavigateNext() {
-  if (props.navigationLoading) {
-    return
-  }
-
-  emit('navigateNext')
 }
 </script>
 
@@ -65,87 +45,130 @@ function onNavigateNext() {
     }"
   >
     <div
-      class="border-t border-gray-300 dark:border-gray-700"
-      :class="{
-        'border-dashed': borderStyle === 'dashed',
-        'border-dotted': borderStyle === 'dotted',
-        'border-solid': borderStyle === 'solid',
-      }"
-      style="height: 1px"
-    />
+      class="flex items-center"
+      :class="{ 'gap-2': navigable }"
+    >
+      <BaseIcon
+        v-if="navigable && !loading && !hidePrevious"
+        class="shrink-0 hover:!no-underline"
+        clickable
+        :icon="getIcon('chevronLeft')"
+        size="sm"
+        :text="t('previous')"
+        :uppercase="false"
+        @click="onNavigate($event, 'previous')"
+      />
+
+      <div class="min-w-0 flex flex-1 items-center">
+        <div
+          class="flex-1 border-t border-gray-300 dark:border-gray-700"
+          :class="{
+            'border-dashed': borderStyle === 'dashed',
+            'border-dotted': borderStyle === 'dotted',
+            'border-solid': borderStyle === 'solid',
+          }"
+          style="height: 1px"
+        />
 
-    <BaseText
-      v-if="displayTitle"
-      class="absolute left-1/2 inline-block -mt-3 -translate-x-1/2 transform whitespace-nowrap bg-gray-100 px-4 text-center dark:bg-gray-900"
-      size="sm"
-      :text="displayTitle"
-    />
+        <BaseText
+          v-if="loading || title"
+          class="shrink-0 px-4 text-center"
+          size="sm"
+          :text="loading ? t('loading') : title"
+        />
 
-    <BaseIcon
-      v-if="navigable && !navigationLoading"
-      class="absolute left-0 -mt-3"
-      clickable
-      :icon="getIcon('chevronLeft')"
-      size="2xs"
-      :text="previousLabel"
-      :uppercase="false"
-      @click="onNavigatePrevious()"
-    />
+        <div
+          class="flex-1 border-t border-gray-300 dark:border-gray-700"
+          :class="{
+            'border-dashed': borderStyle === 'dashed',
+            'border-dotted': borderStyle === 'dotted',
+            'border-solid': borderStyle === 'solid',
+          }"
+          style="height: 1px"
+        />
+      </div>
 
-    <BaseIcon
-      v-if="navigable && !navigationLoading && !hideNext"
-      class="absolute right-0 -mt-3"
-      clickable
-      reverse
-      :icon="getIcon('chevronRight')"
-      size="2xs"
-      :text="nextLabel"
-      :uppercase="false"
-      @click="onNavigateNext()"
-    />
+      <BaseIcon
+        v-if="navigable && !loading && !hideNext"
+        class="shrink-0 hover:!no-underline"
+        clickable
+        reverse
+        :icon="getIcon('chevronRight')"
+        size="sm"
+        :text="t('next')"
+        :uppercase="false"
+        @click="onNavigate($event, 'next')"
+      />
+    </div>
   </div>
 </template>
 
 <i18n lang="json">
 {
   "de": {
-    "loading": "Laden…"
+    "loading": "Laden…",
+    "next": "Weiter",
+    "previous": "Zurück"
   },
   "en": {
-    "loading": "Loading…"
+    "loading": "Loading…",
+    "next": "Next",
+    "previous": "Previous"
   },
   "es": {
-    "loading": "Cargando…"
+    "loading": "Cargando…",
+    "next": "Siguiente",
+    "previous": "Anterior"
   },
   "fr": {
-    "loading": "Chargement…"
+    "loading": "Chargement…",
+    "next": "Suivant",
+    "previous": "Précédent"
   },
   "it": {
-    "loading": "Caricamento…"
+    "loading": "Caricamento…",
+    "next": "Successivo",
+    "previous": "Precedente"
   },
   "ja": {
-    "loading": "読み込み中…"
+    "loading": "読み込み中…",
+    "next": "次へ",
+    "previous": "前へ"
   },
   "ko": {
-    "loading": "로딩 중…"
+    "loading": "로딩 중…",
+    "next": "다음",
+    "previous": "이전"
   },
   "nl": {
-    "loading": "Laden…"
+    "loading": "Laden…",
+    "next": "Volgende",
+    "previous": "Vorige"
   },
   "pl": {
-    "loading": "Ładowanie…"
+    "loading": "Ładowanie…",
+    "next": "Następny",
+    "previous": "Poprzedni"
   },
   "pt": {
-    "loading": "A carregar…"
+    "loading": "A carregar…",
+    "next": "Seguinte",
+    "previous": "Anterior"
   },
   "pt-BR": {
-    "loading": "Carregando…"
+    "loading": "Carregando…",
+    "next": "Próximo",
+    "previous": "Anterior"
   },
   "id": {
-    "loading": "Memuat…"
+    "loading": "Memuat…",
+    "next": "Berikutnya",
+    "previous": "Sebelumnya"
   },
   "vi": {
-    "loading": "Đang tải…"
+    "loading": "Đang tải…",
+    "next": "Sau",
+    "previous": "Trước"
   }
 }
 </i18n>

package/app/types/bases.d.ts

@@ -108,17 +108,18 @@ export type BaseColor
 export interface BaseDivider {
   borderStyle?: BaseDividerBorderStyle
   hideNext?: boolean
+  hidePrevious?: boolean
   margin?: number
   navigable?: boolean
-  navigationLoading?: boolean
-  nextLabel?: string
-  previousLabel?: string
+  loading?: boolean
   size?: BaseDividerSize
   title?: string
 }
 
 export type BaseDividerBorderStyle = 'dashed' | 'dotted' | 'solid'
 
+export type BaseDividerNavigateDirection = 'next' | 'previous'
+
 export type BaseDividerSize = 'base' | 'sm'
 
 export interface BaseEmoji {

package/app/types/global.d.ts

@@ -24,6 +24,7 @@ declare global {
   type BaseColor = Bases.BaseColor
   type BaseDivider = Bases.BaseDivider
   type BaseDividerBorderStyle = Bases.BaseDividerBorderStyle
+  type BaseDividerNavigateDirection = Bases.BaseDividerNavigateDirection
   type BaseDividerSize = Bases.BaseDividerSize
   type BaseEmoji = Bases.BaseEmoji
   type BaseHeading = Bases.BaseHeading

package/package.json

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