@saasmakers/ui 1.5.0 → 1.5.2

package/app/components/bases/BaseDivider.vue

@@ -3,6 +3,7 @@ import type { BaseDivider } from '../../types/bases'
 
 const props = withDefaults(defineProps<BaseDivider>(), {
   borderStyle: 'solid',
+  color: 'black',
   hideNext: false,
   hidePrevious: false,
   loading: false,
@@ -67,8 +68,14 @@ function onNavigate(event: MouseEvent, direction: BaseDividerNavigateDirection)
           :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,
+            'border-gray-900 dark:border-gray-100': pill && color === 'black',
+            'border-gray-700 dark:border-gray-300': pill && color === 'gray',
+            'border-green-700 dark:border-green-300': pill && color === 'green',
+            'border-indigo-700 dark:border-indigo-300': pill && color === 'indigo',
+            'border-orange-700 dark:border-orange-300': pill && color === 'orange',
+            'border-red-700 dark:border-red-300': pill && color === 'red',
+            'border-white dark:border-gray-900': pill && color === 'white',
           }"
           style="height: 1px"
         />
@@ -76,7 +83,16 @@ function onNavigate(event: MouseEvent, direction: BaseDividerNavigateDirection)
 
       <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="{
+          'bg-gray-900 text-white dark:bg-gray-100 dark:text-gray-900': color === 'black',
+          'bg-gray-700 text-white dark:bg-gray-300 dark:text-gray-800': color === 'gray',
+          'bg-green-700 text-white dark:bg-green-300 dark:text-black': color === 'green',
+          'bg-indigo-700 text-white dark:bg-indigo-300 dark:text-black': color === 'indigo',
+          'bg-orange-700 text-white dark:bg-orange-300 dark:text-black': color === 'orange',
+          'bg-red-700 text-white dark:bg-red-300 dark:text-black': color === 'red',
+          'bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100': color === 'white',
+        }"
       >{{ title }}</span>
 
       <BaseText
@@ -92,8 +108,14 @@ function onNavigate(event: MouseEvent, direction: BaseDividerNavigateDirection)
           :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,
+            'border-gray-900 dark:border-gray-100': pill && color === 'black',
+            'border-gray-700 dark:border-gray-300': pill && color === 'gray',
+            'border-green-700 dark:border-green-300': pill && color === 'green',
+            'border-indigo-700 dark:border-indigo-300': pill && color === 'indigo',
+            'border-orange-700 dark:border-orange-300': pill && color === 'orange',
+            'border-red-700 dark:border-red-300': pill && color === 'red',
+            'border-white dark:border-gray-900': pill && color === 'white',
           }"
           style="height: 1px"
         />

package/app/components/bases/BaseProgress.vue

@@ -0,0 +1,50 @@
+<script lang="ts" setup>
+import type { BaseProgress } from '../../types/bases'
+
+const props = withDefaults(defineProps<BaseProgress>(), {
+  max: 100,
+  showLabel: false,
+  value: 0,
+})
+
+const percent = computed(() => {
+  if (props.max <= 0) {
+    return 0
+  }
+
+  return Math.min(100, Math.max(0, (props.value / props.max) * 100))
+})
+
+const label = computed(() => {
+  if (props.max === 100) {
+    return `${Math.round(percent.value)} %`
+  }
+
+  return `${props.value}/${props.max}`
+})
+</script>
+
+<template>
+  <div class="w-full flex items-center gap-2">
+    <div
+      role="progressbar"
+      class="h-1 min-w-0 flex-1 overflow-hidden rounded-full bg-gray-200 dark:bg-gray-800"
+      :aria-label="label"
+      :aria-valuemax="max"
+      :aria-valuemin="0"
+      :aria-valuenow="value"
+    >
+      <div
+        class="h-full rounded-full bg-indigo-700 transition-[width] duration-300 dark:bg-indigo-300"
+        :style="{ width: `${percent}%` }"
+      />
+    </div>
+
+    <BaseText
+      v-if="showLabel"
+      class="shrink-0 text-indigo-700 dark:text-indigo-300"
+      size="2xs"
+      :text="label"
+    />
+  </div>
+</template>

package/app/components/fields/FieldAvatar.vue

@@ -75,7 +75,7 @@ function onOpenFilePicker() {
 
     <div
       :aria-label="loading ? t('actionLoading') : (typeof action === 'string' ? action : (action?.base || t('action')))"
-      class="w-full flex items-center gap-2 px-3 normal-case outline-none"
+      class="w-full flex items-center gap-2 px-3 uppercase outline-none"
       :class="{
         'cursor-pointer': !disabled && !loading,
         'field-disabled': disabled,

package/app/components/fields/FieldInput.vue

@@ -178,7 +178,7 @@ defineExpose({ focus })
           :id="id"
           ref="input"
           :autocomplete="autocomplete ? 'on' : 'off'"
-          class="h-full w-full appearance-none items-center rounded-lg font-medium tracking-tight normal-case outline-none placeholder-gray-600 dark:placeholder-gray-400"
+          class="h-full w-full appearance-none items-center rounded-lg font-medium tracking-tight uppercase outline-none placeholder-gray-600 dark:placeholder-gray-400"
           :class="{
             'field-disabled': disabled,
             'focus:placeholder-gray-900 hover:placeholder-gray-900 dark:focus:placeholder-gray-100 dark:hover:placeholder-gray-100': !disabled,

package/app/components/fields/FieldTextarea.vue

@@ -67,7 +67,7 @@ function onFieldClick(event: MouseEvent) {
       ref="textarea"
       v-model="modelValue"
       v-bind="{ 'data-enable-grammarly': 'false' }"
-      class="w-full flex-1 appearance-none rounded-lg text-gray-900 font-medium tracking-tight normal-case outline-none dark:text-gray-100 placeholder-gray-600 dark:placeholder-gray-400"
+      class="w-full flex-1 appearance-none rounded-lg text-gray-900 font-medium tracking-tight uppercase outline-none dark:text-gray-100 placeholder-gray-600 dark:placeholder-gray-400"
       :class="{
         'field-disabled': disabled,
         'focus:placeholder-gray-900 hover:placeholder-gray-900 dark:focus:placeholder-gray-100 dark:hover:placeholder-gray-100': !disabled,

package/app/types/bases.d.ts

@@ -131,6 +131,7 @@ export type BaseColor
 
 export interface BaseDivider {
   borderStyle?: BaseDividerBorderStyle
+  color?: BaseColor
   hideNext?: boolean
   hidePrevious?: boolean
   loading?: boolean
@@ -280,6 +281,12 @@ export type BasePowerPower
 
 export type BasePowerSize = 'base' | 'lg' | 'sm' | 'xs'
 
+export interface BaseProgress {
+  max?: number
+  showLabel?: boolean
+  value?: number
+}
+
 export interface BaseQuote {
   background?: BaseQuoteBackground
   character?: BaseCharacterCharacter

package/app/types/global.d.ts

@@ -45,6 +45,7 @@ declare global {
   type BasePower = import('./bases').BasePower
   type BasePowerPower = import('./bases').BasePowerPower
   type BasePowerSize = import('./bases').BasePowerSize
+  type BaseProgress = import('./bases').BaseProgress
   type BaseQuote = import('./bases').BaseQuote
   type BaseQuoteBackground = import('./bases').BaseQuoteBackground
   type BaseQuoteSize = import('./bases').BaseQuoteSize

package/package.json

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