@saasmakers/ui 0.1.18 → 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

@@ -0,0 +1,169 @@
+<script lang="ts" setup>
+import { NuxtLinkLocale } from '#components'
+
+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<{
+  click: [event: MouseEvent]
+}>()
+
+const showAll = ref(false)
+
+const { t } = useI18n()
+
+const finalText = computed(() => {
+  if (props.maxCharacters && typeof props.text === 'string') {
+    return ellipsize(
+      props.text,
+      showAll.value ? Number.POSITIVE_INFINITY : props.maxCharacters,
+    )
+  }
+
+  return props.text as string
+})
+
+function ellipsize(inputString: string, maxLength: number) {
+  if (inputString.length <= maxLength) {
+    return inputString
+  }
+  else {
+    // If the input string is longer than the maximum length, find the last full word that fits
+    const truncatedString = inputString.slice(0, maxLength)
+    const lastSpaceIndex = truncatedString.lastIndexOf(' ')
+
+    // If there's no space in the truncated string, we can't avoid cutting a word
+    if (lastSpaceIndex === -1) {
+      return `${truncatedString.slice(0, maxLength - 3)}...`
+    }
+
+    // Return the string truncated at the last full word, with an ellipsis appended
+    return `${truncatedString.slice(0, lastSpaceIndex)}...`
+  }
+}
+
+function onClick(event: MouseEvent) {
+  if (props.to) {
+    event.stopPropagation()
+  }
+
+  emit('click', event)
+}
+
+function onShowMore() {
+  showAll.value = true
+}
+</script>
+
+<template>
+  <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,
+
+      'bg-gray-100 dark:bg-gray-900': background === 'gray',
+      'bg-white dark:bg-gray-900': background === 'white',
+
+      '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-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-3': ['3xl', '4xl'].includes(size) && reverse && hasMargin,
+
+      'text-3xs': (size === '3xs') && !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-base': (size === 'base' && !uppercase) || (size === 'lg' && uppercase),
+      'text-lg': (size === 'lg' && !uppercase) || (size === 'xl' && 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,
+    }"
+    :to="to"
+    @click="onClick"
+  >
+    <template v-if="!skeleton">
+      <span v-if="maxCharacters || typeof text === 'string'">
+        {{ finalText }}
+      </span>
+
+      <template v-else-if="typeof text === 'object'">
+        <span class="sm:hidden">
+          {{ text.sm }}
+        </span>
+
+        <span class="hidden sm:inline">
+          {{ text.base }}
+        </span>
+      </template>
+
+      <BaseText
+        v-if="maxCharacters && typeof text === 'string' && finalText?.length !== text.length"
+        class="inline cursor-pointer text-indigo-700 dark:text-indigo-300"
+        has-margin
+        :size="size"
+        :text="t('showMore')"
+        @click="onShowMore"
+      />
+    </template>
+
+    <div
+      v-else
+      class="w-full rounded bg-gray-300 dark:bg-gray-700"
+      :class="{
+        'h-2': size === '3xs',
+        'h-2.5': size === '2xs',
+        'h-3': size === 'xs',
+        'h-3.5': size === 'sm',
+        'h-4': size === 'base',
+        'h-4.5': size === 'lg',
+        'h-5': size === 'xl',
+        'h-6': size === '2xl',
+        'h-7': size === '3xl',
+        'h-8': size === '4xl',
+      }"
+    />
+
+    <slot />
+  </Component>
+</template>
+
+<i18n lang="json">
+{
+  "en": {
+    "showMore": "(show more)"
+  },
+  "fr": {
+    "showMore": "(afficher)"
+  },
+  "ja": {
+    "showMore": "(もっと見る)"
+  }
+}
+</i18n>

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.18",
+  "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": {

package/app/components/bases/HelloWorld.vue

@@ -1,5 +0,0 @@
-<template>
-  <div>
-    <h1>Hello World!</h1>
-  </div>
-</template>