@saasmakers/ui 2.0.52 → 2.0.53

package/app/components/bases/BaseTag.vue

@@ -1,199 +1,24 @@
 <script lang="ts" setup>
-import { NuxtLinkLocale } from '#components'
 import type { BaseTag } from '../../types/bases'
 
-const props = withDefaults(defineProps<BaseTag>(), {
-  active: false,
-  avatar: '',
-  circle: '',
-  clickable: true,
-  color: 'black',
-  draggable: false,
-  editable: false,
-  icon: undefined,
-  iconSize: undefined,
-  id: undefined,
-  isCreation: false,
-  light: true,
-  removable: false,
-  rounded: false,
+withDefaults(defineProps<BaseTag>(), {
+  color: 'gray',
   size: 'base',
   text: '',
-  to: undefined,
-  truncate: false,
 })
-
-const emit = defineEmits<{
-  click: [event: MouseEvent, id?: number | string]
-  close: [event: MouseEvent, id?: number | string]
-  inputBlur: [event: FocusEvent, name: string, id?: number | string]
-  inputSubmit: [event: KeyboardEvent, name: string, id?: number | string]
-  remove: [event: MouseEvent, id?: number | string]
-}>()
-
-defineSlots<{
-  default?: () => VNode[]
-}>()
-
-const hovered = ref(false)
-const form = reactive({ name: '' })
-
-onBeforeMount(() => {
-  if (!props.isCreation) {
-    initializeFormForExistingTag()
-  }
-})
-
-function initializeFormForExistingTag() {
-  form.name = String(props.text)?.slice(1)
-}
-
-function onBlur() {
-  hovered.value = false
-}
-
-function onClick(event: MouseEvent) {
-  if (!props.removable) {
-    emit('click', event, props.id)
-  }
-}
-
-function onFocus() {
-  hovered.value = true
-}
-
-function onInputBlur(event: FocusEvent) {
-  emit('inputBlur', event, form.name.trim(), props.id)
-}
-
-function onInputSubmit(event: KeyboardEvent) {
-  emit('inputSubmit', event, form.name.trim(), props.id)
-}
-
-function onKeyDown(event: KeyboardEvent) {
-  if (props.clickable) {
-    (event.currentTarget as HTMLElement).click()
-  }
-}
-
-function onMouseEnter() {
-  hovered.value = true
-}
-
-function onMouseLeave() {
-  hovered.value = false
-}
-
-function onRemove(event: MouseEvent) {
-  emit('remove', event, props.id)
-}
 </script>
 
 <template>
   <span
-    class="flex select-none"
-    role="button"
-    :aria-disabled="!clickable"
-    tabindex="0"
-    @click.stop="onClick"
-    @keydown.enter.stop="onKeyDown"
-    @keydown.space.prevent.stop="onKeyDown"
-    @mouseenter="onMouseEnter"
-    @mouseleave="onMouseLeave"
-    @focusin="onFocus"
-    @focusout="onBlur"
+    class="pointer-events-none inline-flex rounded font-medium tracking-tight"
+    :class="{
+      'px-0.5 py-px text-3xs': size === 'xs',
+      'px-1 py-px text-3xs': size === 'sm',
+      'px-1.5 py-0.5 text-2xs': size === 'base',
+      'bg-orange-100 text-orange-700 dark:bg-orange-950 dark:text-orange-300': color === 'orange',
+      'bg-gray-200 text-gray-600 dark:bg-gray-800 dark:text-gray-400': color === 'gray',
+    }"
   >
-    <component
-      :is="to ? NuxtLinkLocale : 'span'"
-      class="inline-flex items-center border font-medium"
-      :class="{
-        'cursor-pointer': clickable,
-        'rounded-md': !rounded,
-        'rounded-full': rounded,
-        'border-gray-200 dark:border-gray-800 bg-gray-200 dark:bg-gray-800 text-gray-800 dark:text-gray-200': (color === 'black' && light && !active) || removable,
-        'border-gray-900 dark:border-gray-100 bg-gray-900 dark:bg-gray-100 text-white dark:text-black': color === 'black' && (!light || active),
-        'border-gray-700 dark:border-gray-300 bg-gray-100 dark:bg-gray-900 text-gray-700 dark:text-gray-300': color === 'gray' && light && !active,
-        'border-gray-800 dark:border-gray-200 bg-gray-800 dark:bg-gray-200 text-white dark:text-black': color === 'gray' && (!light || active),
-        'border-green-700 dark:border-green-300 bg-green-100 dark:bg-green-900 text-green-700 dark:text-green-300': color === 'green' && light && !active,
-        'border-green-800 dark:border-green-200 bg-green-800 dark:bg-green-200 text-white dark:text-black': color === 'green' && (!light || active),
-        'border-indigo-700 dark:border-indigo-300 bg-indigo-100 dark:bg-indigo-900 text-indigo-700 dark:text-indigo-300': color === 'indigo' && light && !active,
-        'border-indigo-800 dark:border-indigo-200 bg-indigo-800 dark:bg-indigo-200 text-white dark:text-black': color === 'indigo' && (!light || active),
-        'border-orange-700 dark:border-orange-300 bg-white dark:bg-gray-900 text-orange-700 dark:text-orange-300': color === 'orange' && light && !active,
-        'border-orange-800 dark:border-orange-200 bg-orange-800 dark:bg-orange-200 text-white dark:text-black': color === 'orange' && (!light || active),
-        'border-red-700 dark:border-red-300 bg-white dark:bg-gray-900 text-red-700 dark:text-red-300': color === 'red' && light && !active,
-        'border-red-800 dark:border-red-200 bg-red-800 dark:bg-red-200 text-white dark:text-black': color === 'red' && (!light || active),
-        'border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 text-gray-800 dark:text-gray-200': color === 'white' && light && !active,
-        'border-white dark:border-gray-900 text-white dark:text-black': color === 'white' && (!light || active),
-        'border-dashed border-gray-400 dark:border-gray-600 bg-white dark:bg-gray-900 text-gray-800 dark:text-gray-200': color === 'white' && light && !active,
-        'py-0.5 px-1.5': size === 'xs',
-        'py-1.5 px-2.5': size === 'sm',
-        'py-2 px-3': size === 'base',
-      }"
-      :to="to"
-    >
-      <BaseIcon
-        v-if="draggable"
-        class="js-drag-handle mr-2 cursor-move"
-        clickable
-        color="gray"
-        :icon="getLayerIcon('drag')"
-      />
-
-      <span
-        v-if="avatar || circle || icon"
-        class="mr-1 flex items-center text-center"
-        :class="{
-          'h-2.5 w-2.5': size === 'xs' || size === 'sm' || iconSize === 2.5,
-          'h-3 w-3': size === 'base' || iconSize === 3,
-          'h-3.5 w-3.5': iconSize === 3.5,
-          'h-4 w-4': iconSize === 4,
-        }"
-      >
-        <BaseAvatar
-          v-if="avatar"
-          class="h-full w-full"
-          :shadow="false"
-          :src="avatar"
-        />
-
-        <BaseIcon
-          v-else-if="icon"
-          class="h-full w-full"
-          :icon="icon"
-        />
-      </span>
-
-      <span
-        v-if="$slots.default"
-        class="mr-1"
-      >
-        <slot />
-      </span>
-
-      <BaseText
-        v-if="!editable"
-        class="whitespace-nowrap outline-none"
-        :class="{ truncate }"
-        :size="size === 'xs' ? '3xs' : size === 'sm' ? '2xs' : 'xs'"
-        :text="text"
-      />
-
-      <FieldInput
-        v-else
-        v-model="form.name"
-        border="none"
-        class="w-16"
-        size="sm"
-        @blur="onInputBlur"
-        @submit="onInputSubmit"
-      />
-
-      <BaseIcon
-        v-if="removable"
-        class="ml-1.5 text-red-700 dark:text-red-300 hover:text-black dark:hover:text-white"
-        :icon="getLayerIcon('closeCircle')"
-        @click.prevent.stop="onRemove"
-      />
-    </component>
+    <slot>{{ text }}</slot>
   </span>
 </template>

package/app/types/bases.d.ts

@@ -127,6 +127,16 @@ export interface BaseCircle {
 
 export type BaseCircleColor = 'amber' | 'green' | 'indigo' | 'red'
 
+export interface BaseTag {
+  color?: BaseTagColor
+  size?: BaseTagSize
+  text?: BaseTextText
+}
+
+export type BaseTagColor = 'gray' | 'orange'
+
+export type BaseTagSize = 'base' | 'sm' | 'xs'
+
 export type BaseColor
   = | 'black'
     | 'gray'
@@ -327,47 +337,6 @@ export interface BaseSpinner {
 
 export type BaseStatus = | 'error' | 'info' | 'success' | 'warning'
 
-export interface BaseTag {
-  active?: boolean
-  avatar?: string
-  circle?: string
-  clickable?: boolean
-  color?: BaseColor
-  draggable?: boolean
-  editable?: boolean
-  icon?: string
-  iconSize?: number
-  id?: number
-  isCreation?: boolean
-  light?: boolean
-  order?: number
-  removable?: boolean
-  rounded?: boolean
-  size?: BaseTagSize
-  text: BaseTextText
-  to?: RouteLocationNamedI18n
-  truncate?: boolean
-}
-
-export interface BaseTags {
-  active?: boolean
-  clickable?: boolean
-  draggable?: boolean
-  editable?: boolean
-  hasBack?: boolean
-  hasCreation?: boolean
-  maxTags?: number
-  modelValue: (number | string)[]
-  removable?: boolean
-  selectable?: boolean
-  selectableUnique?: boolean
-  size?: BaseTagSize
-  tags: BaseTag[]
-  wrap?: boolean
-}
-
-export type BaseTagSize = 'base' | 'sm' | 'xs'
-
 export interface BaseText {
   alignment?: BaseAlignment
   background?: BaseBackground

package/app/types/global.d.ts

@@ -69,7 +69,7 @@ declare global {
   type BaseSpinner = import('./bases').BaseSpinner
   type BaseStatus = import('./bases').BaseStatus
   type BaseTag = import('./bases').BaseTag
-  type BaseTags = import('./bases').BaseTags
+  type BaseTagColor = import('./bases').BaseTagColor
   type BaseTagSize = import('./bases').BaseTagSize
   type BaseText = import('./bases').BaseText
   type BaseTextText = import('./bases').BaseTextText

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saasmakers/ui",
-  "version": "2.0.52",
+  "version": "2.0.53",
   "private": false,
   "description": "Reusable Nuxt UI components for SaaS Makers projects",
   "license": "MIT",

package/app/components/bases/BaseTags.vue

@@ -1,289 +0,0 @@
-<script lang="ts" setup>
-import type { BaseTags } from '../../types/bases'
-
-const props = withDefaults(defineProps<Omit<BaseTags, 'modelValue'>>(), {
-  active: false,
-  clickable: true,
-  draggable: false,
-  editable: false,
-  hasBack: false,
-  hasCreation: false,
-  maxTags: Number.POSITIVE_INFINITY,
-  removable: false,
-  selectable: false,
-  selectableUnique: false,
-  size: 'base',
-  tags: () => [],
-  wrap: false,
-})
-
-const emit = defineEmits<{
-  attach: [event: MouseEvent, tagId?: number | string]
-  back: [event: MouseEvent]
-  click: [event: MouseEvent]
-  create: [event: FocusEvent | KeyboardEvent, name: string]
-  detach: [event: MouseEvent, tagId?: number | string]
-  remove: [event: MouseEvent, tagId?: number | string]
-  update: [event: FocusEvent | KeyboardEvent, name: string, tagId?: number | string]
-}>()
-
-const modelValue = defineModel<BaseTags['modelValue']>({ default: () => [] })
-const keyForTagCreation = ref(Date.now())
-const keyForTagUpdate = ref(Date.now())
-const root = ref<HTMLDivElement>()
-const showingAllTags = ref(false)
-const showingTagCreationField = ref(false)
-const { t } = useI18n()
-
-const sortedTags = computed({
-  get() {
-    return [...props.tags]
-      .filter((_tag, tagIndex) => tagIndex < props.maxTags || showingAllTags.value)
-      .toSorted((tagA, tagB) => {
-        return (tagA.order ?? 0) < (tagB.order ?? 0) ? -1 : 0
-      })
-  },
-
-  set(tags) {
-    const suiteForTags = tags
-      .map((tag, order) => ({
-        id: tag.id,
-        order,
-      }))
-      .map(tag => ({
-        id: tag.id,
-        order: tag.order,
-      }))
-
-    return suiteForTags
-  },
-})
-
-function onCreateTag(event: FocusEvent | KeyboardEvent, name: string) {
-  showingTagCreationField.value = false
-  keyForTagCreation.value = Date.now()
-
-  emit('create', event, name)
-}
-
-function onGoBack(event: MouseEvent) {
-  emit('back', event)
-}
-
-function onRemoveTag(event: MouseEvent, tagId?: number | string) {
-  emit('remove', event, tagId)
-}
-
-function onShowAllTags() {
-  showingAllTags.value = true
-}
-
-function onShowTagField() {
-  if (!showingTagCreationField.value) {
-    showingTagCreationField.value = true
-
-    nextTick(() => {
-      const element = root.value?.querySelector<HTMLInputElement>('input[type="text"]')
-
-      element?.focus()
-    })
-  }
-}
-
-function onTagClick(event: MouseEvent, tagId?: number | string) {
-  if (props.selectable && tagId) {
-    let value = [...modelValue.value]
-
-    if (value.includes(tagId)) {
-      value.splice(value.indexOf(tagId), 1)
-      emit('detach', event, tagId)
-    }
-    else if (props.selectableUnique) {
-      value = [tagId]
-
-      emit('attach', event, tagId)
-    }
-    else {
-      value.push(tagId)
-      emit('attach', event, tagId)
-    }
-
-    modelValue.value = value
-  }
-}
-
-function onUpdateTag(event: FocusEvent | KeyboardEvent, name: string, tagId?: number | string) {
-  if (name) {
-    emit('update', event, name, tagId)
-  }
-
-  else {
-    keyForTagUpdate.value = Date.now()
-  }
-}
-</script>
-
-<template>
-  <div
-    ref="root"
-    class="flex items-center"
-    :class="{
-      'flex-wrap': wrap,
-      'w-full overflow-x-auto': !wrap,
-      '-mt-0.75 -ml-0.75': size === 'sm',
-      '-mt-1 -ml-1': size === 'base',
-    }"
-  >
-    <BaseTag
-      v-if="hasBack"
-      key="BaseTagToGoBack"
-      :class="{
-        'm-0.75': size === 'sm',
-        'm-1': size === 'base',
-      }"
-      color="indigo"
-      :icon="getLayerIcon('back')"
-      :size="size"
-      :text="t('cancel')"
-      @click="onGoBack"
-    />
-
-    <BaseTag
-      v-if="hasCreation"
-      :key="keyForTagCreation"
-      :class="{
-        'm-0.75': size === 'sm',
-        'm-1': size === 'base',
-      }"
-      color="indigo"
-      :editable="showingTagCreationField"
-      :icon="showingTagCreationField ? getLayerIcon('tags') : getLayerIcon('plus')"
-      is-creation
-      :light="false"
-      :size="size"
-      :text="showingTagCreationField ? '' : t('newTag')"
-      @click="onShowTagField"
-      @input-blur="onCreateTag"
-      @input-submit="onCreateTag"
-    />
-
-    <div class="flex items-center">
-      <span
-        v-for="(tag, tagIndex) in sortedTags"
-        :key="tag.id ? `${tag.id}_${tag.order}_${keyForTagUpdate}` : tagIndex"
-        class="flex flex-wrap items-center"
-        :class="{
-          'm-0.75': size === 'sm',
-          'm-1': size === 'base',
-        }"
-      >
-        <template v-if="tag">
-          <BaseTag
-            :id="tag.id || tagIndex"
-            :key="`${tag.id}_${tagIndex}`"
-            :active="tag.id && modelValue.includes(tag.id) || tag.active"
-            :avatar="tag.avatar"
-            :circle="tag.circle"
-            :clickable="clickable"
-            :color="tag.color"
-            :draggable="draggable"
-            :editable="editable"
-            :icon="tag.icon"
-            :icon-size="tag.iconSize"
-            :light="tag.light"
-            :removable="removable"
-            :size="size"
-            :text="tag.text"
-            :to="tag.to"
-            @click="onTagClick"
-            @input-blur="onUpdateTag"
-            @input-submit="onUpdateTag"
-            @remove="onRemoveTag"
-          />
-        </template>
-      </span>
-    </div>
-
-    <BaseTag
-      v-if="tags.length > maxTags && !showingAllTags"
-      key="showMore"
-      :class="{
-        'm-0.75': size === 'sm',
-        'm-1': size === 'base',
-      }"
-      :size="size"
-      :text="t('showMore', { value: tags.length - maxTags })"
-      @click="onShowAllTags"
-    />
-  </div>
-</template>
-
-<i18n lang="json">
-{
-  "de": {
-    "cancel": "Abbrechen",
-    "newTag": "Neues Tag",
-    "showMore": "& {value} weiteres | & {value} weitere"
-  },
-  "en": {
-    "cancel": "Cancel",
-    "newTag": "New tag",
-    "showMore": "& {value} other | & {value} others"
-  },
-  "es": {
-    "cancel": "Cancelar",
-    "newTag": "Nueva etiqueta",
-    "showMore": "& {value} otro | & {value} otros"
-  },
-  "fr": {
-    "cancel": "Annuler",
-    "newTag": "Nouveau tag",
-    "showMore": "& {value} autre | & {value} autres"
-  },
-  "id": {
-    "cancel": "Batal",
-    "newTag": "Tag baru",
-    "showMore": "& {value} lainnya | & {value} lainnya"
-  },
-  "it": {
-    "cancel": "Annulla",
-    "newTag": "Nuovo tag",
-    "showMore": "& {value} altro | & {value} altri"
-  },
-  "ja": {
-    "cancel": "キャンセル",
-    "newTag": "新しいタグ",
-    "showMore": "& {value} その他 | & {value} その他"
-  },
-  "ko": {
-    "cancel": "취소",
-    "newTag": "새 태그",
-    "showMore": "& {value}개 더 | & {value}개 더"
-  },
-  "nl": {
-    "cancel": "Annuleren",
-    "newTag": "Nieuwe tag",
-    "showMore": "& {value} andere | & {value} anderen"
-  },
-  "pl": {
-    "cancel": "Anuluj",
-    "newTag": "Nowy tag",
-    "showMore": "& {value} inny | & {value} innych"
-  },
-  "pt": {
-    "cancel": "Cancelar",
-    "newTag": "Nova etiqueta",
-    "showMore": "& {value} outro | & {value} outros"
-  },
-  "pt-BR": {
-    "cancel": "Cancelar",
-    "newTag": "Nova tag",
-    "showMore": "& {value} outro | & {value} outros"
-  },
-  "vi": {
-    "cancel": "Hủy",
-    "newTag": "Thẻ mới",
-    "showMore": "& {value} mục khác | & {value} mục khác"
-  }
-}
-</i18n>