@saasmakers/ui 0.1.59 → 0.1.61

package/app/components/bases/BaseAvatar.vue

@@ -74,7 +74,7 @@ function onLoad() {
     @mouseleave="onMouseLeave"
   >
     <div
-      :aria-label="editable ? t('globals.edit') : undefined"
+      :aria-label="editable ? t('edit') : undefined"
       class="relative h-full w-full overflow-hidden"
       :class="{
         'rounded-full': circular,
@@ -103,7 +103,7 @@ function onLoad() {
         v-if="editable && hovered"
         class="absolute bottom-0 left-0 right-0 w-full bg-gray-900 text-center text-white dark:bg-gray-900 dark:text-white"
         size="3xs"
-        :text="t('globals.edit')"
+        :text="t('edit')"
       />
 
       <input
@@ -126,13 +126,13 @@ function onLoad() {
   <i18n lang="json">
   {
     "en": {
-      "habitsCompleted": "Habits completed"
+      "edit": "Edit"
     },
     "fr": {
-      "habitsCompleted": "Habitudes accomplies"
+      "edit": "Modifier"
     },
     "ja": {
-      "habitsCompleted": "習慣を完了しました"
+      "edit": "編集"
     }
   }
   </i18n>

package/app/components/bases/BaseButton.vue

@@ -126,7 +126,7 @@ function onClick(event: MouseEvent) {
         :light="light"
         :reverse="reverse"
         :size="size"
-        :text="confirming ? t('globals.confirm') : text"
+        :text="confirming ? t('confirm') : text"
       />
     </span>
 
@@ -138,3 +138,17 @@ function onClick(event: MouseEvent) {
     />
   </component>
 </template>
+
+<i18n lang="json">
+{
+  "en": {
+    "confirm": "Confirm"
+  },
+  "fr": {
+    "confirm": "Confirmer"
+  },
+  "ja": {
+    "confirm": "確認"
+  }
+}
+</i18n>

package/app/components/bases/BaseIcon.vue

@@ -132,10 +132,24 @@ function onClick(event: MouseEvent) {
       no-wrap
       :reverse="reverse"
       :size="size"
-      :text="confirming ? t('globals.confirm') : text"
+      :text="confirming ? t('confirm') : text"
       :truncate="truncate"
       :underline="underline"
       :uppercase="uppercase"
     />
   </div>
 </template>
+
+<i18n lang="json">
+  {
+    "en": {
+      "confirm": "Confirm"
+    },
+    "fr": {
+      "confirm": "Confirmer"
+    },
+    "ja": {
+      "confirm": "確認"
+    }
+  }
+</i18n>

package/app/components/bases/BaseQuote.vue

@@ -136,7 +136,7 @@ function onClose(event: MouseEvent) {
 
         <BaseIcon
           v-if="hasClose"
-          v-tooltip="t('globals.close')"
+          v-tooltip="t('close')"
           class="mt-1 self-start text-gray-600 flex-initial dark:text-gray-400 hover:text-red-600 dark:hover:text-red-400"
           :class="{
             'ml-2': size === 'xs',
@@ -150,3 +150,17 @@ function onClose(event: MouseEvent) {
     </div>
   </div>
 </template>
+
+<i18n lang="json">
+  {
+    "en": {
+      "close": "Close"
+    },
+    "fr": {
+      "close": "Fermer"
+    },
+    "ja": {
+      "close": "閉じる"
+    }
+  }
+</i18n>

package/app/components/bases/BaseTag.vue

@@ -0,0 +1,179 @@
+<script lang="ts" setup>
+import type { BaseTag } from '../../types/bases'
+import { NuxtLinkLocale } from '#components'
+import { getIcon } from '../../composables/useIcons'
+
+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,
+  size: 'base',
+  text: '',
+  to: undefined,
+  truncate: false,
+  uppercase: true,
+})
+
+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]
+}>()
+
+const hovered = ref(false)
+
+const form = reactive({ name: '' })
+
+onBeforeMount(() => {
+  if (!props.isCreation) {
+    initializeFormForExistingTag()
+  }
+})
+
+function initializeFormForExistingTag() {
+  form.name = String(props.text)?.substring(1)
+}
+
+function onClick(event: MouseEvent) {
+  if (!props.removable) {
+    emit('click', event, props.id)
+  }
+}
+
+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 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"
+    @click.stop="onClick"
+    @mouseenter="onMouseEnter"
+    @mouseleave="onMouseLeave"
+  >
+    <component
+      :is="to ? NuxtLinkLocale : 'span'"
+      class="inline-flex items-center border font-medium"
+      :class="{
+        'cursor-pointer': clickable,
+        'rounded-md': !rounded,
+        'rounded-full': rounded,
+        'uppercase': uppercase,
+
+        '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-1.5 px-2.5 text-2xs': size === 'sm',
+        'py-2 px-3 text-xs': size === 'base',
+      }"
+      :to="to"
+    >
+      <BaseIcon
+        v-if="draggable"
+        class="js-drag-handle mr-2 cursor-move"
+        clickable
+        color="gray"
+        :icon="getIcon('drag')"
+      />
+
+      <span
+        v-if="avatar || circle || icon"
+        class="mr-1 flex items-center text-center"
+        :class="{
+          'h-2.5 w-2.5': 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"
+          rounded="sm"
+          :shadow="false"
+          :src="avatar"
+        />
+
+        <BaseIcon
+          v-else-if="icon"
+          class="h-full w-full"
+          :icon="icon"
+        />
+      </span>
+
+      <span
+        v-if="$slots.left"
+        class="mr-1"
+      >
+        <slot name="left" />
+      </span>
+
+      <BaseText
+        v-if="!editable"
+        class="whitespace-nowrap outline-none"
+        :class="{ truncate }"
+        :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="getIcon('closeCircle')"
+        @click.prevent.stop="onRemove"
+      />
+    </component>
+  </span>
+</template>

package/app/components/bases/BaseTags.vue

@@ -0,0 +1,242 @@
+<script lang="ts" setup>
+import type { BaseTags } from '../../types/bases'
+import { getIcon } from '../../composables/useIcons'
+
+const props = withDefaults(defineProps<BaseTags>(), {
+  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: () => [],
+  value: () => [],
+  wrap: false,
+})
+
+const emit = defineEmits<{
+  'attach': [event: MouseEvent, tagId?: number | string]
+  'back': [event: MouseEvent]
+  'click': [event: MouseEvent]
+  'create': [event: MouseEvent, name: string]
+  'detach': [event: MouseEvent, tagId?: number | string]
+  'remove': [event: MouseEvent, tagId?: number | string]
+  'update': [event: MouseEvent, name: string, tagId?: number | string]
+  'update:modelValue': [value: (number | string)[]]
+}>()
+
+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
+      .slice()
+      .filter((_tag, tagIndex) => tagIndex < props.maxTags || showingAllTags.value)
+      .sort((tagA, tagB) => (tagA.order! < tagB.order! ? -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: MouseEvent, name: string) {
+  showingTagCreationField.value = false
+  keyForTagCreation.value = Date.now()
+
+  emit('create', event, name)
+}
+
+function onGoBack(event: MouseEvent) {
+  emit('back', event)
+}
+
+function onShowTagField() {
+  if (!showingTagCreationField.value) {
+    showingTagCreationField.value = true
+
+    // Focus contenteditable
+    nextTick(() => {
+      const element = root.value?.querySelector<HTMLInputElement>('input[type="text"]')
+
+      element?.focus()
+    })
+  }
+}
+
+function onShowAllTags() {
+  showingAllTags.value = true
+}
+
+function onTagClick(event: MouseEvent, tagId?: number | string) {
+  if (props.selectable && tagId) {
+    let value = [...props.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)
+    }
+
+    emit('update:modelValue', value)
+  }
+}
+
+function onUpdateTag(event: MouseEvent, name: string, tagId?: number | string) {
+  if (name) {
+    emit('update', event, name, tagId)
+  }
+
+  else {
+    keyForTagUpdate.value = Date.now()
+  }
+}
+
+function onRemoveTag(event: MouseEvent, tagId?: number | string) {
+  emit('remove', event, tagId)
+}
+</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="getIcon('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 ? getIcon('tags') : getIcon('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 && value.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">
+  {
+    "en": {
+      "cancel": "Cancel",
+      "newTag": "New tag",
+      "showMore": "& {value} other | & {value} others"
+    },
+    "fr": {
+      "cancel": "Annuler",
+      "newTag": "Nouveau tag",
+      "showMore": "& {value} autre | & {value} autres"
+    },
+    "ja": {
+      "cancel": "キャンセル",
+      "newTag": "新しいタグ",
+      "showMore": "& {value} その他 | & {value} その他"
+    }
+  }
+  </i18n>

package/app/components/fields/FieldCheckbox.vue

@@ -0,0 +1,98 @@
+<script lang="ts" setup>
+import type { FieldCheckbox } from '../../types/fields'
+
+const props = withDefaults(defineProps<FieldCheckbox>(), {
+  description: '',
+  disabled: false,
+  fullWidth: false,
+  hideError: false,
+  label: '',
+  labelIcon: undefined,
+  lineThrough: false,
+  loading: false,
+  modelValue: false,
+  required: false,
+  size: 'base',
+  truncate: false,
+  uppercase: false,
+  validation: undefined,
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean ]
+}>()
+
+const input = ref<HTMLInputElement>()
+const uuid = ref(`${Math.floor((1 + Math.random()) * 0x100000)}`)
+
+const value = computed({
+  get() {
+    return props.modelValue
+  },
+  set(value) {
+    emit('update:modelValue', value || false)
+  },
+})
+
+function onFieldChange(event: Event) {
+  const value = (event.target as HTMLInputElement).checked
+
+  emit('update:modelValue', value)
+}
+</script>
+
+<template>
+  <div
+    class="relative flex flex-col"
+    :class="{ 'w-full': fullWidth }"
+    @click.stop
+  >
+    <div class="flex flex-1 items-center">
+      <input
+        v-if="!loading"
+        :id="uuid"
+        ref="input"
+        v-model="value"
+        class="cursor-pointer border border-gray-300 rounded-lg accent-indigo-700 transition-shadow flex-initial dark:border-gray-700 focus:border-gray-500 hover:border-gray-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-indigo-500/40 dark:focus:border-gray-500 dark:hover:border-gray-600"
+        :class="{
+          'disabled:opacity-50 disabled:cursor-not-allowed': disabled,
+
+          'h-3.5 w-3.5': size === 'xs',
+          'h-4 w-4': size === 'sm',
+          'h-4.5 w-4.5': size === 'base',
+          'h-5 w-5': size === 'lg',
+        }"
+        :disabled="disabled"
+        type="checkbox"
+        @change="onFieldChange"
+      >
+
+      <BaseSpinner
+        v-else
+        class="flex-initial"
+        :size="size"
+      />
+
+      <FieldLabel
+        v-if="label"
+        class="flex-1"
+        :disabled="disabled"
+        :for-field="uuid"
+        has-margin-left
+        :icon="labelIcon"
+        :label="label"
+        :line-through="lineThrough && modelValue"
+        :required="required"
+        :size="size"
+        :truncate="truncate"
+      />
+    </div>
+
+    <FieldMessage
+      :description="description"
+      :hide-error="hideError"
+      :size="size"
+      :validation="validation"
+    />
+  </div>
+</template>