@saasmakers/ui 1.3.0 → 1.3.2

package/app/components/bases/BaseAvatar.vue

@@ -40,7 +40,7 @@ function onAvatarSelected(event: Event) {
 
   if (file) {
     if (props.maxSizeMb && file.size > props.maxSizeMb * 1024 * 1024) {
-      return createToast('fileSizeTooLarge', 'error', { maxSizeMb: props.maxSizeMb })
+      return createToast(t('fileSizeTooLarge', { maxSizeMb: props.maxSizeMb }), 'error')
     }
 
     emit('avatarSelected', event, file)
@@ -117,9 +117,9 @@ function onMouseLeave() {
         :class="{
           'rounded-full': circular,
           'border-white dark:border-white': bordered,
-          'border-2': borderWidth === 2,
-          'border-3': borderWidth === 3,
-          'border-4': borderWidth === 4,
+          'border-2': bordered && borderWidth === 2,
+          'border-3': bordered && borderWidth === 3,
+          'border-4': bordered && borderWidth === 4,
         }"
         :alt="editable ? t('edit') : ''"
         loading="lazy"
@@ -156,43 +156,56 @@ function onMouseLeave() {
 <i18n lang="json">
 {
   "de": {
-    "edit": "Bearbeiten"
+    "edit": "Bearbeiten",
+    "fileSizeTooLarge": "Die Datei ist zu groß (max.: {maxSizeMb}MB)"
   },
   "en": {
-    "edit": "Edit"
+    "edit": "Edit",
+    "fileSizeTooLarge": "The file is too large (max: {maxSizeMb}MB)"
   },
   "es": {
-    "edit": "Editar"
+    "edit": "Editar",
+    "fileSizeTooLarge": "El archivo es demasiado grande (máx.: {maxSizeMb}MB)"
   },
   "fr": {
-    "edit": "Modifier"
+    "edit": "Modifier",
+    "fileSizeTooLarge": "Le fichier est trop grand (max: {maxSizeMb}MB)"
   },
   "it": {
-    "edit": "Modifica"
+    "edit": "Modifica",
+    "fileSizeTooLarge": "Il file è troppo grande (max: {maxSizeMb}MB)"
   },
   "ja": {
-    "edit": "編集"
+    "edit": "編集",
+    "fileSizeTooLarge": "ファイルが大きすぎます (最大: {maxSizeMb}MB)"
   },
   "ko": {
-    "edit": "편집"
+    "edit": "편집",
+    "fileSizeTooLarge": "파일이 너무 큽니다 (최대: {maxSizeMb}MB)"
   },
   "nl": {
-    "edit": "Bewerken"
+    "edit": "Bewerken",
+    "fileSizeTooLarge": "Het bestand is te groot (max.: {maxSizeMb}MB)"
   },
   "pl": {
-    "edit": "Edytuj"
+    "edit": "Edytuj",
+    "fileSizeTooLarge": "Plik jest za duży (maks.: {maxSizeMb}MB)"
   },
   "pt": {
-    "edit": "Editar"
+    "edit": "Editar",
+    "fileSizeTooLarge": "O ficheiro é demasiado grande (máx.: {maxSizeMb}MB)"
   },
   "pt-BR": {
-    "edit": "Editar"
+    "edit": "Editar",
+    "fileSizeTooLarge": "O arquivo é muito grande (máx.: {maxSizeMb}MB)"
   },
   "id": {
-    "edit": "Edit"
+    "edit": "Edit",
+    "fileSizeTooLarge": "File terlalu besar (maks.: {maxSizeMb}MB)"
   },
   "vi": {
-    "edit": "Chỉnh sửa"
+    "edit": "Chỉnh sửa",
+    "fileSizeTooLarge": "Tệp quá lớn (tối đa: {maxSizeMb}MB)"
   }
 }
 </i18n>

package/app/components/fields/FieldAvatar.stories.ts

@@ -0,0 +1,37 @@
+import FieldAvatar from './FieldAvatar.vue'
+
+export default {
+  component: FieldAvatar,
+  title: 'Fields/FieldAvatar',
+
+  argTypes: {
+    action: { control: 'text' },
+    background: {
+      control: 'select',
+      options: ['gray', 'white'] satisfies FieldBackground[],
+    },
+    border: {
+      control: 'select',
+      options: [
+        'bottom',
+        'full',
+        'none',
+      ] satisfies FieldInputBorder[],
+    },
+    disabled: { control: 'boolean' },
+    fullWidth: { control: 'boolean' },
+    label: { control: 'text' },
+    loading: { control: 'boolean' },
+    maxSizeMb: { control: 'number' },
+    src: { control: 'text' },
+  },
+} satisfies Meta<typeof FieldAvatar>
+
+export const Default: StoryObj<typeof FieldAvatar> = { args: { src: 'https://via.placeholder.com/100' } satisfies Partial<FieldAvatar> }
+
+export const Loading: StoryObj<typeof FieldAvatar> = {
+  args: {
+    loading: true,
+    src: 'https://via.placeholder.com/100',
+  } satisfies Partial<FieldAvatar>,
+}

package/app/components/fields/FieldAvatar.vue

@@ -0,0 +1,227 @@
+<script lang="ts" setup>
+import type { FieldAvatar } from '../../types/fields'
+
+const props = withDefaults(defineProps<FieldAvatar>(), {
+  accept: 'image/*',
+  action: undefined,
+  background: 'white',
+  border: 'full',
+  description: '',
+  disabled: false,
+  fullWidth: false,
+  hideError: false,
+  label: undefined,
+  labelIcon: undefined,
+  loading: false,
+  maxSizeMb: undefined,
+  required: false,
+  size: 'base',
+  src: undefined,
+  validation: undefined,
+})
+
+const emit = defineEmits<{
+  change: [event: Event, file: File]
+}>()
+
+const { createToast } = useToasts()
+const { t } = useI18n()
+
+const fileInput = ref<HTMLInputElement>()
+const id = useId()
+
+function onAvatarChange(event: Event) {
+  const input = event.target as HTMLInputElement
+  const file = input.files?.[0]
+
+  input.value = ''
+
+  if (!file) {
+    return
+  }
+
+  if (props.maxSizeMb && file.size > props.maxSizeMb * 1024 * 1024) {
+    createToast(t('fileSizeTooLarge', { maxSizeMb: props.maxSizeMb }), 'error')
+    return
+  }
+
+  emit('change', event, file)
+}
+
+function onOpenFilePicker() {
+  if (!props.disabled && !props.loading) {
+    fileInput.value?.click()
+  }
+}
+</script>
+
+<template>
+  <div
+    class="flex flex-col"
+    :class="{ 'w-full': fullWidth }"
+  >
+    <FieldLabel
+      :disabled="disabled"
+      :for-field="id"
+      has-margin-bottom
+      :icon="labelIcon"
+      :label="props.label || t('label')"
+      :required="required"
+      :size="size"
+    />
+
+    <div
+      :aria-label="loading ? t('actionLoading') : (typeof props.action === 'string' ? props.action : (props.action?.base || t('action')))"
+      class="w-full flex items-center gap-2 px-3 normal-case outline-none"
+      :class="{
+        'cursor-pointer': !disabled && !loading,
+        'field-disabled': disabled,
+        'pointer-events-none opacity-50': disabled || loading,
+        'hover:border-gray-300 focus:border-gray-400 dark:hover:border-gray-700 dark:focus:border-gray-600': border === 'full' && !disabled && !loading,
+        'bg-gray-100 dark:bg-gray-900': background === 'gray',
+        'bg-white dark:bg-gray-900': background === 'white',
+        'rounded-lg border border-gray-200 shadow-sm dark:border-gray-800': border === 'full',
+        'border-b border-gray-200 dark:border-gray-800': border === 'bottom',
+        'border-0': border === 'none',
+        'text-2xs h-8': size === 'xs',
+        'text-xs h-10': size === 'sm',
+        'text-sm h-12': size === 'base',
+        'text-base h-14': size === 'lg',
+      }"
+      role="button"
+      :aria-disabled="disabled || loading"
+      tabindex="0"
+      @click="onOpenFilePicker"
+      @keydown.enter="onOpenFilePicker"
+      @keydown.space.prevent="onOpenFilePicker"
+    >
+      <div class="pointer-events-none min-w-0 flex flex-1 items-center gap-2">
+        <BaseSpinner
+          v-if="loading"
+          class="shrink-0"
+          :size="size === 'xs' ? 'xl' : size === 'sm' ? '2xl' : size === 'base' ? '3xl' : '3xl'"
+        />
+
+        <BaseAvatar
+          v-else
+          :border-width="2"
+          class="shrink-0"
+          :class="{
+            'h-7 w-7': size === 'xs',
+            'h-8 w-8': size === 'sm',
+            'h-9 w-9': size === 'base',
+            'h-10 w-10': size === 'lg',
+          }"
+          :shadow="false"
+          :src="src"
+        />
+
+        <BaseText
+          class="min-w-0 flex-1 text-gray-900 dark:text-gray-100"
+          :text="loading ? t('actionLoading') : (props.action || t('action'))"
+        />
+      </div>
+
+      <input
+        :id="id"
+        ref="fileInput"
+        :accept="accept"
+        class="hidden"
+        :disabled="disabled"
+        type="file"
+        @change="onAvatarChange"
+      >
+    </div>
+
+    <FieldMessage
+      :description="description"
+      :disabled="disabled"
+      :hide-error="hideError"
+      :size="size"
+      :validation="validation"
+    />
+  </div>
+</template>
+
+<i18n lang="json">
+{
+  "de": {
+    "fileSizeTooLarge": "Die Datei ist zu groß (max.: {maxSizeMb}MB)",
+    "action": "Foto ändern",
+    "actionLoading": "Foto wird aktualisiert...",
+    "label": "Profilbild"
+  },
+  "en": {
+    "fileSizeTooLarge": "The file is too large (max: {maxSizeMb}MB)",
+    "action": "Change photo",
+    "actionLoading": "Updating photo...",
+    "label": "Profile picture"
+  },
+  "es": {
+    "fileSizeTooLarge": "El archivo es demasiado grande (máx.: {maxSizeMb}MB)",
+    "action": "Cambiar foto",
+    "actionLoading": "Actualizando foto...",
+    "label": "Foto de perfil"
+  },
+  "fr": {
+    "fileSizeTooLarge": "Le fichier est trop grand (max: {maxSizeMb}MB)",
+    "action": "Changer la photo",
+    "actionLoading": "Mise a jour de la photo...",
+    "label": "Photo de profil"
+  },
+  "it": {
+    "fileSizeTooLarge": "Il file è troppo grande (max: {maxSizeMb}MB)",
+    "action": "Cambia foto",
+    "actionLoading": "Aggiornamento foto...",
+    "label": "Foto del profilo"
+  },
+  "ja": {
+    "fileSizeTooLarge": "ファイルが大きすぎます (最大: {maxSizeMb}MB)",
+    "action": "写真を変更",
+    "actionLoading": "写真を更新中...",
+    "label": "プロフィール写真"
+  },
+  "ko": {
+    "fileSizeTooLarge": "파일이 너무 큽니다 (최대: {maxSizeMb}MB)",
+    "action": "사진 변경",
+    "actionLoading": "사진 업데이트 중...",
+    "label": "프로필 사진"
+  },
+  "nl": {
+    "fileSizeTooLarge": "Het bestand is te groot (max.: {maxSizeMb}MB)",
+    "action": "Foto wijzigen",
+    "actionLoading": "Foto wordt bijgewerkt...",
+    "label": "Profielfoto"
+  },
+  "pl": {
+    "fileSizeTooLarge": "Plik jest za duży (maks.: {maxSizeMb}MB)",
+    "action": "Zmień zdjęcie",
+    "actionLoading": "Aktualizowanie zdjęcia...",
+    "label": "Zdjęcie profilowe"
+  },
+  "pt": {
+    "fileSizeTooLarge": "O ficheiro é demasiado grande (máx.: {maxSizeMb}MB)",
+    "action": "Alterar foto",
+    "actionLoading": "A atualizar foto...",
+    "label": "Foto de perfil"
+  },
+  "pt-BR": {
+    "fileSizeTooLarge": "O arquivo é muito grande (máx.: {maxSizeMb}MB)",
+    "action": "Alterar foto",
+    "actionLoading": "Atualizando foto...",
+    "label": "Foto de perfil"
+  },
+  "id": {
+    "fileSizeTooLarge": "File terlalu besar (maks.: {maxSizeMb}MB)",
+    "action": "Ganti foto",
+    "actionLoading": "Memperbarui foto...",
+    "label": "Foto profil"
+  },
+  "vi": {
+    "fileSizeTooLarge": "Tệp quá lớn (tối đa: {maxSizeMb}MB)",
+    "action": "Đổi ảnh",
+    "actionLoading": "Dang cap nhat anh...",
+    "label": "Ảnh đại diện"
+  }
+}
+</i18n>

package/app/components/fields/FieldSelect.vue

@@ -262,8 +262,8 @@ function selectOption(event: MouseEvent, value: string) {
                 :key="option.value"
                 class="group flex cursor-pointer items-center outline-none"
                 :class="{
-                  'border-b border-gray-200 dark:border-gray-800 p-3 hover:bg-gray-100 dark:hover:bg-gray-900 last:border-b-0': computedColumns.length < 2,
-                  'px-2 py-1 last:mb-2': computedColumns.length >= 2,
+                  'border-b border-gray-200 dark:border-gray-800 p-3 hover:bg-gray-100 dark:hover:bg-gray-800 last:border-b-0': computedColumns.length < 2,
+                  'px-2 py-1 hover:bg-gray-100 dark:hover:bg-gray-800 last:mb-2': computedColumns.length >= 2,
                   'font-medium underline': selectedOption && option.value === selectedOption.value,
                   'text-gray-900 dark:text-gray-100': selectedOption && option.value === selectedOption.value,
                   'bg-white dark:bg-gray-900': selectedOption && option.value !== selectedOption.value,

package/app/types/fields.d.ts

@@ -2,6 +2,25 @@
 export type FieldBackground = 'gray' | 'white'
 
 // Components
+export interface FieldAvatar {
+  accept?: string
+  action?: BaseTextText
+  background?: FieldBackground
+  border?: FieldInputBorder
+  description?: BaseTextText
+  disabled?: boolean
+  fullWidth?: boolean
+  hideError?: boolean
+  label?: BaseTextText
+  labelIcon?: string
+  loading?: boolean
+  maxSizeMb?: number
+  required?: boolean
+  size?: FieldSize
+  src?: string
+  validation?: VuelidateValidation
+}
+
 export interface FieldCheckbox {
   description?: BaseTextText
   disabled?: boolean

package/app/types/global.d.ts

@@ -64,6 +64,7 @@ declare global {
   type ChartistOptions = import('chartist').Options
   type ChartistPieChartData = import('chartist').PieChartData
   // Fields
+  type FieldAvatar = Fields.FieldAvatar
   type FieldBackground = Fields.FieldBackground
   type FieldCheckbox = Fields.FieldCheckbox
   type FieldDays = Fields.FieldDays

package/package.json

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