@saasmakers/ui 1.4.21 → 1.4.23

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

@@ -13,7 +13,12 @@ export default {
         'solid',
       ] satisfies BaseDividerBorderStyle[],
     },
+    hideNext: { control: 'boolean' },
     margin: { control: 'number' },
+    navigable: { control: 'boolean' },
+    navigationLoading: { control: 'boolean' },
+    nextLabel: { control: 'text' },
+    previousLabel: { control: 'text' },
     size: {
       control: 'select',
       options: ['sm', 'base'] satisfies BaseDividerSize[],
@@ -23,3 +28,12 @@ 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,
+    nextLabel: 'Next',
+    previousLabel: 'Previous',
+    title: 'This week',
+  } satisfies Partial<BaseDivider>,
+}

package/app/components/bases/BaseDivider.vue

@@ -1,21 +1,55 @@
 <script lang="ts" setup>
 import type { BaseDivider } from '../../types/bases'
 
-withDefaults(defineProps<BaseDivider>(), {
+const props = withDefaults(defineProps<BaseDivider>(), {
   borderStyle: 'solid',
+  hideNext: false,
   margin: 6,
+  navigable: false,
+  navigationLoading: false,
+  nextLabel: '',
+  previousLabel: '',
   size: 'base',
   title: '',
 })
+
+const emit = defineEmits<{
+  navigateNext: []
+  navigatePrevious: []
+}>()
+
+const { t } = useI18n()
+const { getIcon } = useLayerIcons()
+
+const displayTitle = computed(() => {
+  if (props.navigationLoading) {
+    return t('loading')
+  }
+
+  return props.title
+})
+
+function onNavigatePrevious() {
+  if (props.navigationLoading) {
+    return
+  }
+
+  emit('navigatePrevious')
+}
+
+function onNavigateNext() {
+  if (props.navigationLoading) {
+    return
+  }
+
+  emit('navigateNext')
+}
 </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 +63,89 @@ 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="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="title"
+      :text="displayTitle"
+    />
+
+    <BaseIcon
+      v-if="navigable && !navigationLoading"
+      class="absolute left-0 -mt-3"
+      clickable
+      :icon="getIcon('chevronLeft')"
+      size="2xs"
+      :text="previousLabel"
+      :uppercase="false"
+      @click="onNavigatePrevious()"
+    />
+
+    <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()"
     />
   </div>
 </template>
+
+<i18n lang="json">
+{
+  "de": {
+    "loading": "Laden…"
+  },
+  "en": {
+    "loading": "Loading…"
+  },
+  "es": {
+    "loading": "Cargando…"
+  },
+  "fr": {
+    "loading": "Chargement…"
+  },
+  "it": {
+    "loading": "Caricamento…"
+  },
+  "ja": {
+    "loading": "読み込み中…"
+  },
+  "ko": {
+    "loading": "로딩 중…"
+  },
+  "nl": {
+    "loading": "Laden…"
+  },
+  "pl": {
+    "loading": "Ładowanie…"
+  },
+  "pt": {
+    "loading": "A carregar…"
+  },
+  "pt-BR": {
+    "loading": "Carregando…"
+  },
+  "id": {
+    "loading": "Memuat…"
+  },
+  "vi": {
+    "loading": "Đang tải…"
+  }
+}
+</i18n>

package/app/components/bases/BaseHeading.vue

@@ -28,7 +28,7 @@ defineSlots<{
       'text-2xl sm:text-4xl': size === 'lg',
     }"
   >
-    <template v-if="typeof text === 'string'">
+    <template v-if="text && typeof text === 'string'">
       {{ text }}
     </template>
 

package/app/components/bases/BaseParagraph.vue

@@ -24,7 +24,7 @@ defineSlots<{
       'text-lg sm:text-xl': size === 'lg',
     }"
   >
-    <template v-if="typeof text === 'string'">
+    <template v-if="text && typeof text === 'string'">
       {{ text }}
     </template>
 

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,7 +107,12 @@ export type BaseColor
 
 export interface BaseDivider {
   borderStyle?: BaseDividerBorderStyle
+  hideNext?: boolean
   margin?: number
+  navigable?: boolean
+  navigationLoading?: boolean
+  nextLabel?: string
+  previousLabel?: string
   size?: BaseDividerSize
   title?: string
 }

package/package.json

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