@saasmakers/ui 0.1.18 → 0.1.19

package/app/components/bases/BaseText.vue

@@ -0,0 +1,208 @@
+<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 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/package.json

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

package/app/components/bases/HelloWorld.vue

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