@saasmakers/ui 0.1.19 → 0.1.20

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,20 @@
 <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,
-  },
+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/{types → app/types}/bases.d.ts

@@ -1,5 +1,5 @@
 declare global {
-  export type BaseColor
+  type BaseColor
     = | 'black'
       | 'gray'
       | 'green'
@@ -8,7 +8,7 @@ declare global {
       | 'red'
       | 'white'
 
-  export type BaseSize
+  type BaseSize
     = | '2xl'
       | '2xs'
       | '3xl'
@@ -20,12 +20,23 @@ declare global {
       | 'xl'
       | 'xs'
 
-  export type BaseStatus
+  type BaseStatus
     = | 'error'
       | 'info'
       | 'success'
       | 'warning'
 
+  interface BaseDivider {
+    borderStyle?: BaseDividerBorderStyle
+    margin?: number
+    size?: BaseDividerSize
+    title?: string
+  }
+
+  type BaseDividerBorderStyle = 'dashed' | 'dotted' | 'solid'
+
+  type BaseDividerSize = 'base' | 'sm'
+
   interface BaseText {
     background?: BaseTextBackground
     bold?: boolean
@@ -42,7 +53,7 @@ declare global {
     uppercase?: boolean
   }
 
-  type BaseTextBackground = 'gray' | 'white'
+  type BaseTextBackground = '' | 'gray' | 'white'
 
   type BaseTextText = string | { base: string, sm: string }
 }

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.20",
   "private": false,
   "description": "Reusable Nuxt UI components for SaaS Makers projects",
   "license": "MIT",
@@ -11,19 +11,18 @@
     "directory": "packages/ui"
   },
   "main": "nuxt.config.ts",
-  "types": "types/index.d.ts",
+  "types": "app/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",
+    "dev": "nuxi dev",
     "lint": "eslint .",
+    "prepare": "nuxi prepare",
     "typecheck": "nuxi typecheck"
   },
   "peerDependencies": {