@saasmakers/ui 1.4.22 → 1.4.24

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

@@ -13,7 +13,11 @@ export default {
         'solid',
       ] satisfies BaseDividerBorderStyle[],
     },
+    hideNext: { control: 'boolean' },
+    hidePrevious: { control: 'boolean' },
     margin: { control: 'number' },
+    navigable: { control: 'boolean' },
+    loading: { control: 'boolean' },
     size: {
       control: 'select',
       options: ['sm', 'base'] satisfies BaseDividerSize[],
@@ -23,3 +27,10 @@ export default {
 } satisfies Meta<typeof BaseDivider>
 
 export const Default: StoryObj<typeof BaseDivider> = { args: { title: 'Divider Title' } satisfies Partial<BaseDivider> }
+
+export const Navigable: StoryObj<typeof BaseDivider> = {
+  args: {
+    navigable: true,
+    title: 'This week',
+  } satisfies Partial<BaseDivider>,
+}

package/app/components/bases/BaseDivider.vue

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

package/app/composables/useLayerIcons.ts

@@ -14,6 +14,8 @@ const icons = {
   arrowUp: 'solar:alt-arrow-up-bold',
   back: 'hugeicons:arrow-turn-backward',
   checkCircle: 'hugeicons:checkmark-circle-02',
+  chevronLeft: 'hugeicons:arrow-left-01',
+  chevronRight: 'hugeicons:arrow-right-01',
   clock: 'solar:alarm-linear',
   close: 'hugeicons:cancel-01',
   closeCircle: 'hugeicons:cancel-circle',

package/app/types/bases.d.ts

@@ -107,13 +107,19 @@ export type BaseColor
 
 export interface BaseDivider {
   borderStyle?: BaseDividerBorderStyle
+  hideNext?: boolean
+  hidePrevious?: boolean
   margin?: number
+  navigable?: boolean
+  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.22",
+  "version": "1.4.24",
   "private": false,
   "description": "Reusable Nuxt UI components for SaaS Makers projects",
   "license": "MIT",