@saasmakers/ui 0.1.76 → 0.1.79

package/app/components/bases/BaseText.vue

@@ -3,7 +3,9 @@ import type { BaseText } from '../../types/bases'
 import { NuxtLinkLocale } from '#components'
 
 const props = withDefaults(defineProps<BaseText>(), {
+  alignment: undefined,
   background: undefined,
+  block: false,
   bold: false,
   hasMargin: false,
   maxCharacters: 0,
@@ -77,35 +79,39 @@ function onShowMore() {
   <component
     :is="to ? NuxtLinkLocale : 'div'"
     :class="{
-      'font-bold': bold,
-      'font-medium': uppercase || !bold,
-      'truncate': truncate,
-      'underline text-indigo-700 dark:text-indigo-300': !!to,
-      'uppercase': uppercase,
-      'whitespace-nowrap': noWrap,
-      'underline': underline,
       'bg-gray-100 dark:bg-gray-900': background === 'gray',
       'bg-white dark:bg-gray-900': background === 'white',
+      'block': block,
+      'font-bold': bold,
+      'font-medium': uppercase || !bold,
       'ml-0.5': ['3xs'].includes(size) && !reverse && hasMargin,
       'ml-1.5': ['2xs', 'xs', 'sm'].includes(size) && !reverse && hasMargin,
-      'ml-2': ['base', 'lg'].includes(size) && !reverse && hasMargin,
       'ml-2.5': ['xl', '2xl'].includes(size) && !reverse && hasMargin,
+      'ml-2': ['base', 'lg'].includes(size) && !reverse && hasMargin,
       'ml-3': ['3xl', '4xl'].includes(size) && !reverse && hasMargin,
       'mr-0.5': ['3xs'].includes(size) && reverse && hasMargin,
       'mr-1.5': ['2xs', 'xs', 'sm'].includes(size) && reverse && hasMargin,
-      'mr-2': ['base', 'lg'].includes(size) && reverse && hasMargin,
       'mr-2.5': ['xl', '2xl'].includes(size) && reverse && hasMargin,
+      'mr-2': ['base', 'lg'].includes(size) && reverse && hasMargin,
       'mr-3': ['3xl', '4xl'].includes(size) && reverse && hasMargin,
-      'text-3xs': (size === '3xs') && !uppercase,
+      'text-2xl': (size === '2xl' && !uppercase) || (size === '3xl' && uppercase),
       'text-2xs': (size === '2xs') || (size === 'xs' && uppercase),
-      'text-xs': (size === 'xs' && !uppercase) || (size === 'sm' && uppercase),
-      'text-sm': (size === 'sm' && !uppercase) || (size === 'base' && uppercase),
+      'text-3xl': (size === '3xl' && !uppercase) || (size === '4xl' && uppercase),
+      'text-3xs': (size === '3xs') && !uppercase,
+      'text-4xl': size === '4xl' && !uppercase,
       'text-base': (size === 'base' && !uppercase) || (size === 'lg' && uppercase),
+      'text-center': alignment === 'center',
+      'text-left': alignment === 'left',
       'text-lg': (size === 'lg' && !uppercase) || (size === 'xl' && uppercase),
+      'text-right': alignment === 'right',
+      'text-sm': (size === 'sm' && !uppercase) || (size === 'base' && uppercase),
       'text-xl': (size === 'xl' && !uppercase) || (size === '2xl' && uppercase),
-      'text-2xl': (size === '2xl' && !uppercase) || (size === '3xl' && uppercase),
-      'text-3xl': (size === '3xl' && !uppercase) || (size === '4xl' && uppercase),
-      'text-4xl': size === '4xl' && !uppercase,
+      'text-xs': (size === 'xs' && !uppercase) || (size === 'sm' && uppercase),
+      'truncate': truncate,
+      'underline text-indigo-700 dark:text-indigo-300': !!to,
+      'underline': underline,
+      'uppercase': uppercase,
+      'whitespace-nowrap': noWrap,
     }"
     :to="to"
     @click="onClick"

package/app/components/fields/FieldTabs.vue

@@ -2,56 +2,32 @@
 import type { FieldTabs, FieldTabsAction } from '../../types/fields'
 import { NuxtLinkLocale } from '#components'
 
-const props = withDefaults(defineProps<Omit<FieldTabs, 'modelValue'>>(), {
+const _props = withDefaults(defineProps<Omit<FieldTabs, 'modelValue'>>(), {
   minimizeOnMobile: false,
-  multiple: false,
   size: 'base',
   tabs: undefined,
   theme: 'rounded',
 })
 
 const emit = defineEmits<{
-  change: [event: MouseEvent, tabValue: number | string, action: FieldTabsAction, activeTabs: Array<number | string>]
-  click: [event: MouseEvent, tabValue: number | string, activeTabs: Array<number | string>]
+  change: [event: MouseEvent, tabValue: string, action: FieldTabsAction, activeTab: string]
+  click: [event: MouseEvent, tabValue: string, activeTab: string]
 }>()
 
-const modelValue = defineModel<FieldTabs['modelValue']>({ default: () => [] })
-
-function isTabActive(tabValue: number | string) {
-  if (props.multiple) {
-    return Array.isArray(modelValue.value) && modelValue.value.includes(tabValue)
-  }
+const modelValue = defineModel<FieldTabs['modelValue']>({ default: '' })
 
+function isTabActive(tabValue: string) {
   return modelValue.value === tabValue
 }
 
-function onTabClick(event: MouseEvent, tabValue: number | string) {
-  let activeTabs = [tabValue]
-
-  // When multiple values are not allowed and tab is not already active
-  if (!props.multiple && modelValue.value !== tabValue) {
-    emit('change', event, tabValue, 'added', activeTabs)
-  }
-
-  // When multiple values are allowed
-  if (props.multiple) {
-    // Remove the tab when already active
-    if (Array.isArray(modelValue.value) && modelValue.value.includes(tabValue)) {
-      activeTabs = modelValue.value.filter(item => item !== tabValue)
-
-      emit('change', event, tabValue, 'removed', activeTabs)
-    }
-    // Push the tab when not already active
-    else {
-      activeTabs = Array.isArray(modelValue.value) ? [...modelValue.value, tabValue] : [tabValue]
-
-      emit('change', event, tabValue, 'added', activeTabs)
-    }
+function onTabClick(event: MouseEvent, tabValue: string) {
+  if (modelValue.value !== tabValue) {
+    emit('change', event, tabValue, 'added', tabValue)
   }
 
-  modelValue.value = props.multiple ? activeTabs : tabValue
+  modelValue.value = tabValue
 
-  emit('click', event, tabValue, activeTabs)
+  emit('click', event, tabValue, tabValue)
 }
 </script>
 

package/app/types/bases.d.ts

@@ -1,3 +1,5 @@
+export type BaseAlignment = 'center' | 'left' | 'right'
+
 export type BaseBackground = 'gray' | 'white'
 
 export type BaseColor
@@ -134,13 +136,11 @@ export interface BaseEmoji {
 }
 
 export interface BaseHeading {
-  alignment?: BaseHeadingAlignment
+  alignment?: BaseAlignment
   size?: BaseHeadingSize
   tag?: BaseHeadingTag
 }
 
-export type BaseHeadingAlignment = 'center' | 'left' | 'right'
-
 export type BaseHeadingSize
   = | 'base'
     | 'lg'
@@ -181,7 +181,7 @@ export interface BaseMessage {
 }
 
 export interface BaseMetric {
-  alignment?: BaseMetricAlignment
+  alignment?: BaseAlignment
   performance?: BaseMetricPerformance
   performanceTooltip?: string
   size?: BaseMetricSize
@@ -189,8 +189,6 @@ export interface BaseMetric {
   value?: number | string
 }
 
-export type BaseMetricAlignment = 'center' | 'left' | 'right'
-
 export type BaseMetricPerformance = 'down' | 'equal' | 'up'
 
 export type BaseMetricSize = 'base' | 'sm'
@@ -215,12 +213,10 @@ export type BaseOverlayOpacity
 export type BaseOverlayPosition = 'absolute' | 'fixed'
 
 export interface BaseParagraph {
-  alignment?: BaseParagraphAlignment
+  alignment?: BaseAlignment
   size?: BaseParagraphSize
 }
 
-export type BaseParagraphAlignment = 'center' | 'left' | 'right'
-
 export type BaseParagraphSize = 'base' | 'lg' | 'sm'
 
 export interface BasePower {
@@ -337,7 +333,9 @@ export interface BaseTags {
 }
 
 export interface BaseText {
+  alignment?: BaseAlignment
   background?: BaseTextBackground
+  block?: boolean
   bold?: boolean
   hasMargin?: boolean
   maxCharacters?: number

package/app/types/fields.d.ts

@@ -35,7 +35,7 @@ export interface FieldEmojis {
 }
 
 export interface FieldInput {
-  alignment?: FieldInputAlignment
+  alignment?: BaseAlignment
   autocomplete?: boolean
   autofocus?: boolean
   background?: FieldBackground
@@ -60,8 +60,6 @@ export interface FieldInput {
   validation?: VuelidateValidation
 }
 
-export type FieldInputAlignment = 'center' | 'left' | 'right'
-
 export type FieldInputBorder = 'bottom' | 'full' | 'none'
 
 export type FieldInputType
@@ -140,8 +138,7 @@ export type FieldSelectMaxHeight = 'lg' | 'md' | 'sm' | 'xs'
 
 export interface FieldTabs {
   minimizeOnMobile?: boolean
-  modelValue: Array<number | string> | number | string
-  multiple?: boolean
+  modelValue: string
   size?: FieldSize
   tabs: FieldTabsTab[]
   theme?: FieldTabsTheme
@@ -152,7 +149,7 @@ export interface FieldTabsTab {
   icon?: string
   label: string
   to?: RouteLocationNamedI18n
-  value: number | string
+  value: string
 }
 
 export type FieldTabsAction = 'added' | 'removed'

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@saasmakers/ui",
   "type": "module",
-  "version": "0.1.76",
+  "version": "0.1.79",
   "private": false,
   "description": "Reusable Nuxt UI components for SaaS Makers projects",
   "license": "MIT",