@saasmakers/ui 1.5.1 → 1.5.3

package/app/components/bases/BaseDivider.vue

@@ -6,7 +6,6 @@ const props = withDefaults(defineProps<BaseDivider>(), {
   color: 'black',
   hideNext: false,
   hidePrevious: false,
-  light: false,
   loading: false,
   navigable: false,
   pill: false,
@@ -14,34 +13,6 @@ 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]
 }>()
@@ -94,13 +65,18 @@ function onNavigate(event: MouseEvent, direction: BaseDividerNavigateDirection)
 
         <div
           class="flex-1 border-t"
-          :class="[
-            pillLineBorderClasses,
-            {
-              'border-dashed': borderStyle === 'dashed',
-              'border-dotted': borderStyle === 'dotted',
-            },
-          ]"
+          :class="{
+            'border-dashed': borderStyle === 'dashed',
+            'border-dotted': borderStyle === 'dotted',
+            '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"
         />
       </div>
@@ -108,7 +84,15 @@ function onNavigate(event: MouseEvent, direction: BaseDividerNavigateDirection)
       <span
         v-if="pill && title && !loading"
         class="mx-3 rounded-full px-3 py-1 text-xs font-medium tracking-wide"
-        :class="pillClasses"
+        :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
@@ -121,13 +105,18 @@ function onNavigate(event: MouseEvent, direction: BaseDividerNavigateDirection)
       <div class="flex items-center">
         <div
           class="flex-1 border-t"
-          :class="[
-            pillLineBorderClasses,
-            {
-              'border-dashed': borderStyle === 'dashed',
-              'border-dotted': borderStyle === 'dotted',
-            },
-          ]"
+          :class="{
+            'border-dashed': borderStyle === 'dashed',
+            'border-dotted': borderStyle === 'dotted',
+            '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,55 @@
+<script lang="ts" setup>
+import type { BaseProgress } from '../../types/bases'
+
+const props = withDefaults(defineProps<BaseProgress>(), {
+  max: 100,
+  showLabel: false,
+  size: 'base',
+  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="flex items-center"
+    :class="size === 'base' ? 'gap-2.5' : 'gap-2'"
+  >
+    <div
+      role="progressbar"
+      class="min-w-0 flex-1 overflow-hidden rounded-full bg-gray-200 dark:bg-gray-800"
+      :class="size === 'base' ? 'h-1.5' : 'h-1'"
+      :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="size === 'base' ? 'xs' : '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

@@ -134,7 +134,6 @@ export interface BaseDivider {
   color?: BaseColor
   hideNext?: boolean
   hidePrevious?: boolean
-  light?: boolean
   loading?: boolean
   navigable?: boolean
   pill?: boolean
@@ -282,6 +281,15 @@ export type BasePowerPower
 
 export type BasePowerSize = 'base' | 'lg' | 'sm' | 'xs'
 
+export interface BaseProgress {
+  max?: number
+  showLabel?: boolean
+  size?: BaseProgressSize
+  value?: number
+}
+
+export type BaseProgressSize = 'base' | 'sm'
+
 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.1",
+  "version": "1.5.3",
   "private": false,
   "description": "Reusable Nuxt UI components for SaaS Makers projects",
   "license": "MIT",