@saasmakers/ui 1.5.0 → 1.5.1

package/app/components/bases/BaseDivider.vue

@@ -3,8 +3,10 @@ import type { BaseDivider } from '../../types/bases'
 
 const props = withDefaults(defineProps<BaseDivider>(), {
   borderStyle: 'solid',
+  color: 'black',
   hideNext: false,
   hidePrevious: false,
+  light: false,
   loading: false,
   navigable: false,
   pill: false,
@@ -12,6 +14,34 @@ const props = withDefaults(defineProps<BaseDivider>(), {
   title: '',
 })
 
+const pillLineBorderClasses = computed(() => {
+  if (!props.pill) {
+    return 'border-gray-300 dark:border-gray-700'
+  }
+
+  if (props.color === 'indigo' && !props.light) {
+    return 'border-indigo-700 dark:border-indigo-300'
+  }
+
+  if (props.color === 'gray' && props.light) {
+    return 'border-gray-300 dark:border-gray-700'
+  }
+
+  return 'border-gray-900 dark:border-gray-300'
+})
+
+const pillClasses = computed(() => {
+  if (props.color === 'indigo' && !props.light) {
+    return 'bg-indigo-800 dark:bg-indigo-200 text-white dark:text-black'
+  }
+
+  if (props.color === 'gray' && props.light) {
+    return 'bg-gray-100 dark:bg-gray-900 text-gray-600 dark:text-gray-400'
+  }
+
+  return 'bg-gray-900 text-white dark:bg-gray-100 dark:text-gray-900'
+})
+
 const emit = defineEmits<{
   navigate: [event: MouseEvent, direction: BaseDividerNavigateDirection]
 }>()
@@ -64,19 +94,21 @@ function onNavigate(event: MouseEvent, direction: BaseDividerNavigateDirection)
 
         <div
           class="flex-1 border-t"
-          :class="{
-            'border-dashed': borderStyle === 'dashed',
-            'border-dotted': borderStyle === 'dotted',
-            'border-gray-900 dark:border-gray-300': pill,
-            'border-gray-300 dark:border-gray-700': !pill,
-          }"
+          :class="[
+            pillLineBorderClasses,
+            {
+              'border-dashed': borderStyle === 'dashed',
+              'border-dotted': borderStyle === 'dotted',
+            },
+          ]"
           style="height: 1px"
         />
       </div>
 
       <span
         v-if="pill && title && !loading"
-        class="mx-3 rounded-full bg-gray-900 px-3 py-1 text-xs text-white font-medium tracking-wide dark:bg-gray-100 dark:text-gray-900"
+        class="mx-3 rounded-full px-3 py-1 text-xs font-medium tracking-wide"
+        :class="pillClasses"
       >{{ title }}</span>
 
       <BaseText
@@ -89,12 +121,13 @@ function onNavigate(event: MouseEvent, direction: BaseDividerNavigateDirection)
       <div class="flex items-center">
         <div
           class="flex-1 border-t"
-          :class="{
-            'border-dashed': borderStyle === 'dashed',
-            'border-dotted': borderStyle === 'dotted',
-            'border-gray-900 dark:border-gray-300': pill,
-            'border-gray-300 dark:border-gray-700': !pill,
-          }"
+          :class="[
+            pillLineBorderClasses,
+            {
+              'border-dashed': borderStyle === 'dashed',
+              'border-dotted': borderStyle === 'dotted',
+            },
+          ]"
           style="height: 1px"
         />
 

package/app/types/bases.d.ts

@@ -131,8 +131,10 @@ export type BaseColor
 
 export interface BaseDivider {
   borderStyle?: BaseDividerBorderStyle
+  color?: BaseColor
   hideNext?: boolean
   hidePrevious?: boolean
+  light?: boolean
   loading?: boolean
   navigable?: boolean
   pill?: boolean

package/package.json

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