@saasmakers/ui 0.1.19 → 0.1.21

package/app/app.vue

@@ -1,3 +1,3 @@
 <template>
-  <HelloWorld />
+  <div />
 </template>

package/app/components/bases/BaseDivider.vue

@@ -0,0 +1,41 @@
+<script lang="ts" setup>
+withDefaults(defineProps<BaseDivider>(), {
+  borderStyle: 'solid',
+  margin: 6,
+  size: 'base',
+  title: '',
+})
+</script>
+
+<template>
+  <div
+    class="relative block border-t border-gray-300 text-center dark:border-gray-700"
+    :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,
+      'my-6': margin === 6,
+      'my-7': margin === 7,
+      'my-8': margin === 8,
+      'my-10': margin === 10,
+      'my-12': margin === 12,
+      'my-16': margin === 16,
+      'my-20': margin === 20,
+
+      'mx-auto max-w-xs': size === 'sm',
+      'w-full': size === 'base',
+    }"
+    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"
+      size="sm"
+      :text="title"
+    />
+  </div>
+</template>

package/app/components/bases/BaseText.vue

@@ -1,59 +1,21 @@
 <script lang="ts" setup>
 import { NuxtLinkLocale } from '#components'
-
-const props = defineProps({
-  background: {
-    default: '',
-    type: String as PropType<BaseTextBackground>,
-  },
-  bold: {
-    default: false,
-    type: Boolean,
-  },
-  hasMargin: {
-    default: false,
-    type: Boolean,
-  },
-  maxCharacters: {
-    default: 0,
-    type: Number,
-  },
-  noWrap: {
-    default: false,
-    type: Boolean,
-  },
-  reverse: {
-    default: false,
-    type: Boolean,
-  },
-  size: {
-    default: 'base',
-    type: String as PropType<BaseSize>,
-  },
-  skeleton: {
-    default: false,
-    type: Boolean,
-  },
-  text: {
-    default: '',
-    type: [String, Object] as PropType<BaseTextText>,
-  },
-  to: {
-    default: undefined,
-    type: [Object, String] as PropType<RouteLocationRaw | string>,
-  },
-  truncate: {
-    default: false,
-    type: Boolean,
-  },
-  underline: {
-    default: false,
-    type: Boolean,
-  },
-  uppercase: {
-    default: false,
-    type: Boolean,
-  },
+import type { BaseText } from '@/types/bases'
+
+const props = withDefaults(defineProps<BaseText>(), {
+  background: '',
+  bold: false,
+  hasMargin: false,
+  maxCharacters: 0,
+  noWrap: false,
+  reverse: false,
+  size: 'base',
+  skeleton: false,
+  text: '',
+  to: undefined,
+  truncate: false,
+  underline: false,
+  uppercase: false,
 })
 
 const emit = defineEmits<{

package/app/types/bases.d.ts

@@ -0,0 +1,57 @@
+export type BaseColor
+  = | 'black'
+    | 'gray'
+    | 'green'
+    | 'indigo'
+    | 'orange'
+    | 'red'
+    | 'white'
+
+export type BaseSize
+  = | '2xl'
+    | '2xs'
+    | '3xl'
+    | '3xs'
+    | '4xl'
+    | 'base'
+    | 'lg'
+    | 'sm'
+    | 'xl'
+    | 'xs'
+
+export type BaseStatus
+  = | 'error'
+    | 'info'
+    | 'success'
+    | 'warning'
+
+export interface BaseDivider {
+  borderStyle?: BaseDividerBorderStyle
+  margin?: number
+  size?: BaseDividerSize
+  title?: string
+}
+
+export type BaseDividerBorderStyle = 'dashed' | 'dotted' | 'solid'
+
+export type BaseDividerSize = 'base' | 'sm'
+
+export interface BaseText {
+  background?: BaseTextBackground
+  bold?: boolean
+  hasMargin?: boolean
+  maxCharacters?: number
+  noWrap?: boolean
+  reverse?: boolean
+  size?: BaseSize
+  skeleton?: boolean
+  text?: BaseTextText
+  to?: RouteLocationRaw
+  truncate?: boolean
+  underline?: boolean
+  uppercase?: boolean
+}
+
+export type BaseTextBackground = '' | 'gray' | 'white'
+
+export type BaseTextText = string | { base: string, sm: string }

package/{types/index.d.ts → app/types/globals.d.ts}

@@ -1,5 +1,3 @@
-import './bases'
-
 declare global {
   // Packages
   type LocationQuery = import('vue-router').LocationQuery

package/nuxt.config.ts

@@ -11,15 +11,6 @@ export default defineNuxtConfig({
 
   experimental: { typedPages: true },
 
-  typescript: {
-    tsConfig: {
-      compilerOptions: {
-        noUncheckedIndexedAccess: false,
-        types: ['@saasmakers/ui'],
-      },
-    },
-  },
-
   // --> COMPONENTS, CSS, MODULES & PLUGINS <--
 
   components: [
@@ -59,6 +50,7 @@ export default defineNuxtConfig({
 
   i18n: {
     defaultLocale: 'en',
+    locales: ['en', 'fr'],
     strategy: 'prefix_except_default',
 
     detectBrowserLanguage: {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@saasmakers/ui",
   "type": "module",
-  "version": "0.1.19",
+  "version": "0.1.21",
   "private": false,
   "description": "Reusable Nuxt UI components for SaaS Makers projects",
   "license": "MIT",
@@ -11,21 +11,13 @@
     "directory": "packages/ui"
   },
   "main": "nuxt.config.ts",
-  "types": "types/index.d.ts",
   "publishConfig": {
     "access": "public"
   },
   "files": [
     "app",
-    "nuxt.config.ts",
-    "types"
+    "nuxt.config.ts"
   ],
-  "scripts": {
-    "dev": "nuxi dev .playground",
-    "dev:prepare": "nuxi prepare .playground",
-    "lint": "eslint .",
-    "typecheck": "nuxi typecheck"
-  },
   "peerDependencies": {
     "nuxt": "4.2.1"
   },
@@ -47,5 +39,10 @@
   "devDependencies": {
     "nuxt": "4.2.1",
     "typescript": "5.9.3"
+  },
+  "scripts": {
+    "dev": "nuxi dev",
+    "lint": "eslint .",
+    "typecheck": "nuxi typecheck"
   }
-}
+}

package/types/bases.d.ts

@@ -1,50 +0,0 @@
-declare global {
-  export type BaseColor
-    = | 'black'
-      | 'gray'
-      | 'green'
-      | 'indigo'
-      | 'orange'
-      | 'red'
-      | 'white'
-
-  export type BaseSize
-    = | '2xl'
-      | '2xs'
-      | '3xl'
-      | '3xs'
-      | '4xl'
-      | 'base'
-      | 'lg'
-      | 'sm'
-      | 'xl'
-      | 'xs'
-
-  export type BaseStatus
-    = | 'error'
-      | 'info'
-      | 'success'
-      | 'warning'
-
-  interface BaseText {
-    background?: BaseTextBackground
-    bold?: boolean
-    hasMargin?: boolean
-    maxCharacters?: number
-    noWrap?: boolean
-    reverse?: boolean
-    size?: BaseSize
-    skeleton?: boolean
-    text?: BaseTextText
-    to?: RouteLocationRaw
-    truncate?: boolean
-    underline?: boolean
-    uppercase?: boolean
-  }
-
-  type BaseTextBackground = 'gray' | 'white'
-
-  type BaseTextText = string | { base: string, sm: string }
-}
-
-export { }