@saasmakers/ui 0.1.59 → 0.1.61

package/app/components/fields/FieldDays.vue

@@ -0,0 +1,109 @@
+<script lang="ts" setup>
+import type { FieldDays } from '../../types/fields'
+
+const props = withDefaults(defineProps<FieldDays>(), { modelValue: () => [] })
+
+const emit = defineEmits<{
+  'change': [event: MouseEvent, value: number[]]
+  'update:modelValue': [value: number[]]
+}>()
+
+const { t } = useI18n()
+
+const daysToDisplay = computed(() => {
+  return [
+    {
+      label: t('days.monday'),
+      value: 1,
+    },
+    {
+      label: t('days.tuesday'),
+      value: 2,
+    },
+    {
+      label: t('days.wednesday'),
+      value: 3,
+    },
+    {
+      label: t('days.thursday'),
+      value: 4,
+    },
+    {
+      label: t('days.friday'),
+      value: 5,
+    },
+    {
+      label: t('days.saturday'),
+      value: 6,
+    },
+    {
+      label: t('days.sunday'),
+      value: 0,
+    },
+  ]
+})
+
+function onUpdateDays(event: MouseEvent, day: number) {
+  const days = [...props.modelValue]
+
+  days.includes(day) ? days.splice(days.indexOf(day), 1) : days.push(day)
+
+  emit('change', event, days)
+  emit('update:modelValue', days)
+}
+</script>
+
+<template>
+  <div class="flex items-center">
+    <BaseText
+      v-for="day in daysToDisplay"
+      :key="day.value"
+      class="mr-2 h-7 w-7 flex cursor-pointer items-center justify-center border rounded-full shadow-inner last:mr-0"
+      :class="{
+        'border-indigo-700 dark:border-indigo-300 bg-gray-100 dark:bg-gray-900 text-indigo-700 dark:text-indigo-300': modelValue.includes(day.value),
+        'border-red-700 dark:border-red-300 bg-red-100 dark:bg-red-900 text-red-700 dark:text-red-300': !modelValue.includes(day.value),
+      }"
+      size="xs"
+      :text="day.label.charAt(0)"
+      @click="onUpdateDays($event, day.value)"
+    />
+  </div>
+</template>
+
+<i18n lang="json">
+{
+  "en": {
+    "days": {
+      "monday": "Monday",
+      "tuesday": "Tuesday",
+      "wednesday": "Wednesday",
+      "thursday": "Thursday",
+      "friday": "Friday",
+      "saturday": "Saturday",
+      "sunday": "Sunday"
+    }
+  },
+  "fr": {
+    "days": {
+      "monday": "Lundi",
+      "tuesday": "Mardi",
+      "wednesday": "Mercredi",
+      "thursday": "Jeudi",
+      "friday": "Vendredi",
+      "saturday": "Samedi",
+      "sunday": "Dimanche"
+    }
+  },
+  "ja": {
+    "days": {
+      "monday": "月曜日",
+      "tuesday": "火曜日",
+      "wednesday": "水曜日",
+      "thursday": "木曜日",
+      "friday": "金曜日",
+      "saturday": "土曜日",
+      "sunday": "日曜日"
+    }
+  }
+}
+</i18n>

package/app/components/fields/FieldEmojis.vue

@@ -0,0 +1,104 @@
+<script lang="ts" setup>
+import type { FieldEmojis } from '../../types/fields'
+import { emojis } from '@saasmakers/shared'
+import { refDebounced } from '@vueuse/core'
+
+withDefaults(defineProps<FieldEmojis>(), { modelValue: undefined })
+
+const emit = defineEmits<{
+  'click': [event: MouseEvent, emoji: string]
+  'update:modelValue': [value: string]
+}>()
+
+const { locale, t } = useI18n()
+
+const searchRaw = ref('')
+const searchQuery = refDebounced(searchRaw, 250)
+
+const emojisFiltered = computed(() => {
+  const searchQueryCleaned = normalizeText(searchQuery.value.trim())
+
+  if (!searchQueryCleaned) {
+    return emojis
+  }
+
+  return emojis
+    .map((category) => {
+      const filtered = category.emojis.filter((emoji) => {
+        const localizedKeywords = (emoji.keywords[locale.value] ?? [])
+        const englishKeywords = (emoji.keywords.en ?? [])
+        const allKeywords = [...localizedKeywords, ...englishKeywords]
+
+        return allKeywords.some(keyword => normalizeText(keyword).includes(searchQueryCleaned))
+      })
+
+      return {
+        ...category,
+        emojis: filtered,
+      }
+    })
+    .filter(category => category.emojis.length > 0)
+})
+
+function onEmojiClick(event: MouseEvent, emoji?: string) {
+  emit('click', event, emoji || '')
+  emit('update:modelValue', emoji || '')
+}
+</script>
+
+<template>
+  <div class="border border-gray-200 rounded-lg p-4 shadow-sm dark:border-gray-800">
+    <FieldInput
+      v-model="searchRaw"
+      autofocus
+      :placeholder="t('searchEmoji')"
+      size="sm"
+    />
+
+    <div class="h-48 overflow-y-auto">
+      <template
+        v-for="category in emojisFiltered"
+        :key="category.category"
+      >
+        <div
+          v-if="category.emojis.length"
+          class="mt-4"
+        >
+          <div class="mb-4">
+            <BaseText
+              class="mb-2 text-xs text-gray-700 dark:text-gray-300"
+              size="xs"
+              :text="category.category"
+            />
+
+            <div class="flex flex-wrap">
+              <BaseEmoji
+                v-for="emoji in category.emojis"
+                :key="emoji.id"
+                class="rounded-lg p-1.5 hover:bg-gray-200 dark:hover:bg-gray-800"
+                clickable
+                :emoji="emoji.id"
+                size="xl"
+                @click="onEmojiClick"
+              />
+            </div>
+          </div>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<i18n lang="json">
+{
+  "en": {
+    "searchEmoji": "Search an emoji"
+  },
+  "fr": {
+    "searchEmoji": "Rechercher un emoji (en anglais)"
+  },
+  "ja": {
+    "searchEmoji": "絵文字を検索 (英語)"
+  }
+}
+</i18n>

package/app/components/fields/FieldInput.vue

@@ -0,0 +1,209 @@
+<script lang="ts" setup>
+import type { FieldInput } from '../../types/fields'
+
+const props = withDefaults(defineProps<FieldInput>(), {
+  alignment: 'left',
+  autocomplete: true,
+  autofocus: false,
+  background: 'gray',
+  border: 'full',
+  description: '',
+  disabled: false,
+  fullWidth: false,
+  hideError: false,
+  label: '',
+  labelIcon: undefined,
+  lineThrough: false,
+  loading: false,
+  lowercaseOnly: false,
+  max: undefined,
+  min: undefined,
+  modelValue: '',
+  placeholder: '',
+  required: false,
+  size: 'base',
+  type: 'text',
+  uppercase: false,
+  validation: undefined,
+})
+
+const emit = defineEmits<{
+  'blur': [event: FocusEvent]
+  'focus': [event: FocusEvent]
+  'keyup': [event: KeyboardEvent, value: number | string ]
+  'submit': [event: KeyboardEvent, value: number | string ]
+  'update:modelValue': [value: number | string ]
+}>()
+
+const input = ref<HTMLInputElement>()
+const uuid = ref(`${Math.floor((1 + Math.random()) * 0x100000)}`)
+
+const { isDesktopBrowser } = useDevice()
+
+onMounted(() => {
+  if (props.autofocus && input.value && isDesktopBrowser.value) {
+    input.value.focus()
+  }
+})
+
+const value = computed({
+  get() {
+    return props.modelValue
+  },
+  set(value) {
+    emit('update:modelValue', value || '')
+  },
+})
+
+function blur() {
+  if (input.value) {
+    input.value.blur()
+  }
+}
+
+function focus() {
+  if (input.value) {
+    input.value.focus()
+  }
+}
+
+function onFieldBlur(event: FocusEvent) {
+  emit('blur', event)
+}
+
+function onFieldFocus(event: FocusEvent) {
+  emit('focus', event)
+}
+
+function onFieldInput(event: Event) {
+  let value: number | string = (event.target as HTMLInputElement).value
+
+  if (props.type === 'number' && props.max && Number.parseInt(value) > props.max) {
+    value = props.max
+  }
+
+  if (props.lowercaseOnly) {
+    value = value.toString().toLowerCase()
+  }
+
+  emit('update:modelValue', value)
+}
+
+function onFieldKeyDown(event: KeyboardEvent) {
+  const value = (event.target as HTMLInputElement).value
+
+  if (['Control', 'Escape'].includes(event.key)) {
+    blur()
+  }
+
+  else if (event.key === 'Enter' && props.modelValue) {
+    emit('submit', event, value)
+  }
+
+  else if (props.type === 'number' && [
+    '+',
+    '-',
+    ':',
+    '^',
+    'e',
+    'E',
+  ].includes(event.key)) {
+    return event.preventDefault()
+  }
+
+  emit('keyup', event, value)
+}
+
+// Expose
+defineExpose({ focus })
+</script>
+
+<template>
+  <div
+    class="relative flex flex-col"
+    :class="{ 'w-full': fullWidth }"
+  >
+    <div
+      v-if="label"
+      class="flex justify-between"
+    >
+      <FieldLabel
+        :disabled="disabled"
+        :for-field="uuid"
+        has-margin-bottom
+        :icon="labelIcon"
+        :label="label"
+        :required="required"
+        :size="size"
+      />
+
+      <slot name="label" />
+    </div>
+
+    <div
+      class="flex items-center"
+      :class="{
+        'h-8': size === 'xs',
+        'h-10': size === 'sm',
+        'h-12': size === 'base',
+        'h-14': size === 'lg',
+      }"
+    >
+      <slot name="inputLeft" />
+
+      <input
+        :id="uuid"
+        ref="input"
+        v-model="value"
+        :autocomplete="autocomplete ? 'on' : 'off'"
+        class="h-full w-full flex-1 appearance-none items-center rounded-lg outline-none placeholder-gray-600 dark:placeholder-gray-400 focus:placeholder-gray-900 hover:placeholder-gray-900 dark:focus:placeholder-gray-100 dark:hover:placeholder-gray-100"
+        :class="{
+          'text-gray-900 dark:text-gray-100': !lineThrough,
+          'text-gray-500 dark:text-gray-500 line-through': lineThrough,
+          'font-medium tracking-tight uppercase': uppercase,
+          'font-normal': !uppercase,
+
+          'text-center': alignment === 'center',
+          'text-left': alignment === 'left',
+          'text-right': alignment === 'right',
+
+          'bg-gray-100 dark:bg-gray-900': background === 'gray',
+          'bg-white dark:bg-gray-900': background === 'white',
+
+          'border shadow-sm border-gray-200 dark:border-gray-800 px-4 hover:border-gray-300 focus:border-gray-400 dark:hover:border-gray-700 dark:focus:border-gray-600': border === 'full',
+          'border-b border-gray-200 dark:border-gray-800 px-10': border === 'bottom',
+          'border-0 p-0': border === 'none',
+
+          'text-xs': size === 'xs',
+          'text-sm': size === 'sm',
+          'text-base': size === 'base',
+          'text-lg': size === 'lg',
+        }"
+        :max="max"
+        :min="min"
+        :placeholder="placeholder"
+        spellcheck="false"
+        :type="type"
+        @blur="onFieldBlur"
+        @focus="onFieldFocus"
+        @input="onFieldInput"
+        @keydown="onFieldKeyDown"
+      >
+
+      <BaseSpinner
+        v-if="loading"
+        class="ml-4 flex-initial"
+        size="sm"
+      />
+
+      <slot name="inputRight" />
+    </div>
+
+    <FieldMessage
+      :description="description"
+      :hide-error="hideError"
+      :size="size"
+      :validation="validation"
+    />
+  </div>
+</template>

package/app/components/fields/FieldLabel.vue

@@ -0,0 +1,64 @@
+<script lang="ts" setup>
+import type { FieldLabel } from '../../types/fields'
+
+withDefaults(defineProps<FieldLabel>(), {
+  disabled: false,
+  forField: '',
+  hasMarginBottom: false,
+  hasMarginLeft: false,
+  icon: undefined,
+  label: '',
+  lineThrough: false,
+  loading: false,
+  required: false,
+  size: 'base',
+  truncate: false,
+})
+
+const emit = defineEmits<{
+  click: [event: MouseEvent]
+}>()
+
+function onClick(event: MouseEvent) {
+  emit('click', event)
+}
+</script>
+
+<template>
+  <label
+    class="flex select-none items-center font-semibold tracking-tight"
+    :class="{
+      'cursor-pointer': !loading && !disabled,
+      'cursor-not-allowed': disabled,
+      'cursor-wait': loading,
+      'text-gray-900 dark:text-gray-100': !lineThrough,
+      'text-gray-500 dark:text-gray-500 line-through': lineThrough,
+      'hover:text-black dark:hover:text-white': !loading && !disabled && !lineThrough,
+      'w-0 truncate': truncate,
+
+      'mb-1.5': size === 'xs' && hasMarginBottom,
+      'mb-2': size === 'sm' && hasMarginBottom,
+      'mb-2.5': size === 'base' && hasMarginBottom,
+      'mb-3': size === 'lg' && hasMarginBottom,
+      'ml-1': size === 'xs' && hasMarginLeft,
+      'ml-1.5': size === 'sm' && hasMarginLeft,
+      'ml-2': size === 'base' && hasMarginLeft,
+      'ml-2.5': size === 'lg' && hasMarginLeft,
+    }"
+    :for="forField"
+    @click="onClick"
+  >
+    <BaseIcon
+      :icon="icon"
+      :size="size"
+      :text="label"
+    />
+
+    <BaseText
+      v-if="required"
+      class="ml-1 text-red-700 dark:text-red-300"
+      :size="size"
+      text="*"
+    />
+  </label>
+</template>

package/app/components/fields/FieldMessage.vue

@@ -0,0 +1,209 @@
+<script lang="ts" setup>
+import type { FieldMessage } from '../../types/fields'
+
+const props = withDefaults(defineProps<FieldMessage>(), {
+  description: '',
+  hideError: true,
+  size: 'base',
+  validation: undefined,
+})
+
+// Composable
+const { t } = useI18n()
+
+const validationMessage = computed(() => {
+  // Available rules
+  // https://vuelidate.js.org/#sub-builtin-validators
+  let message = ''
+
+  if (props.validation && props.validation.$dirty) {
+    // Required, Required If, Required Unless
+    if (props.validation.required === false || props.validation.requiredIf === false || props.validation.requiredUnless === false) {
+      message = t('required')
+    }
+    // Min Length
+    else if (props.validation.minLength === false) {
+      const min = props.validation.$params.minLength.min
+
+      message = t('minLength', { min })
+    }
+    // Max Length
+    else if (props.validation.maxLength === false) {
+      const max = props.validation.$params.maxLength.max
+
+      message = t('maxLength', { max })
+    }
+    // Min Value
+    else if (props.validation.minValue === false) {
+      const min = props.validation.$params.minValue.min
+
+      message = t('minValue', { min })
+    }
+    // Max Value
+    else if (props.validation.maxValue === false) {
+      const max = props.validation.$params.maxValue.max
+
+      message = t('maxValue', { max })
+    }
+    // Between
+    else if (props.validation.between === false) {
+      const min = props.validation.$params.between.min
+      const max = props.validation.$params.between.max
+
+      message = t('between', {
+        max,
+        min,
+      })
+    }
+    // Alpha
+    else if (props.validation.alpha === false) {
+      message = t('alpha')
+    }
+    // Alpha Num
+    else if (props.validation.alphaNum === false) {
+      message = t('alphaNum')
+    }
+    // Numeric
+    else if (props.validation.numeric === false) {
+      message = t('numeric')
+    }
+    // Integer
+    else if (props.validation.integer === false) {
+      message = t('integer')
+    }
+    // Integer
+    else if (props.validation.decimal === false) {
+      message = t('decimal')
+    }
+    // Email
+    else if (props.validation.email === false) {
+      message = t('email')
+    }
+    // IP Address
+    else if (props.validation.ipAddress === false) {
+      message = t('ipAddress')
+    }
+    // Mac Address
+    else if (props.validation.macAddress === false) {
+      message = t('maxAddress')
+    }
+    // Same As
+    else if (props.validation.sameAs === false) {
+      const field = props.validation.$params.sameAs.eq
+
+      message = t('sameAs', { field })
+    }
+    // Url
+    else if (props.validation.url === false) {
+      message = t('url')
+    }
+    // Other rules
+    else if (props.validation.$invalid === true) {
+      message = t('invalid')
+    }
+  }
+
+  return message
+})
+
+const status = computed(() => {
+  if (validationMessage.value && !props.hideError) {
+    return 'error'
+  }
+  else if (props.description) {
+    return 'default'
+  }
+})
+
+const text = computed<BaseTextText>(() => {
+  if (validationMessage.value && !props.hideError) {
+    return validationMessage.value
+  }
+  else if (props.description) {
+    return props.description
+  }
+  else {
+    return ''
+  }
+})
+</script>
+
+<template>
+  <BaseIcon
+    v-if="text"
+    class="text-left tracking-tighter"
+    :class="{
+      'text-red-700 dark:text-red-300': status === 'error',
+      'text-gray-700 dark:text-gray-300': status === 'default',
+
+      'mt-2': size === 'xs',
+      'mt-2.5': size === 'sm',
+      'mt-3': size === 'base',
+      'mt-3.5': size === 'lg',
+    }"
+    size="sm"
+    :text="text"
+  />
+</template>
+
+<i18n lang="json">
+{
+  "en": {
+    "alpha": "The value accepts only alphabet characters",
+    "alphaNum": "The value accepts only alphanumerics",
+    "between": "Value should be between {min} and {max}",
+    "decimal": "The value accepts only positive and negative decimal numbers",
+    "email": "The value is not a valid email",
+    "integer": "The value accepts only positive and negative integers",
+    "invalid": "The value is invalid",
+    "ipAddress": "The value accepts only a valid IPv4 address",
+    "macAddress": "The value accepts only a valid MAC address",
+    "maxLength": "This value is too long (max: {max})",
+    "maxValue": "Maximum value allowed: {max}",
+    "minLength": "The value is too short (min: {min})",
+    "minValue": "Minimum value allowed: {min}",
+    "numeric": "The value accepts only numerics",
+    "required": "A value is required",
+    "sameAs": "The value does not match: {field}",
+    "url": "The value is not a valid url"
+  },
+  "fr": {
+    "alpha": "La valeur n'accepte que les caractères alphabétiques",
+    "alphaNum": "La valeur n'accepte que les alphanumériques",
+    "between": "La valeur doit être entre {min} et {max}",
+    "decimal": "La valeur naccepte que les nombres décimaux positifs et négatifs",
+    "email": "La valeur n'est pas un email valide",
+    "integer": "La valeur n'accepte que des entiers positifs et négatifs",
+    "ipAddress": "La valeur n'accepte qu'une adresse IPv4 valide",
+    "invalid": "La valeur n'est pas valide",
+    "macAddress": "La valeur n'accepte qu'une adresse MAC valide",
+    "maxLength": "La valeur est trop longue (max: {max})",
+    "maxValue": "La valeur maximum acceptée: {max}",
+    "minLength": "La valeur est trop petite (min: {min})",
+    "minValue": "La valeur minimum acceptée: {min}",
+    "numeric": "La valeur n'accepte que des chiffres",
+    "required": "La valeur est requise",
+    "sameAs": "La valeur ne correspond pas à: {field}",
+    "url": "La valeur n'est pas une URL valide"
+  },
+  "ja": {
+    "alpha": "値はアルファベット文字のみを受け入れます",
+    "alphaNum": "値はアルファベットと数字のみを受け入れます",
+    "between": "値は {min} から {max} の間である必要があります",
+    "decimal": "値は正の小数と負の小数のみを受け入れます",
+    "email": "値は有効なメールアドレスではありません",
+    "integer": "値は正の整数と負の整数のみを受け入れます",
+    "invalid": "値は無効です",
+    "ipAddress": "値は有効なIPv4アドレスのみを受け入れます",
+    "macAddress": "値は有効なMACアドレスのみを受け入れます",
+    "maxLength": "値は長すぎます (最大: {max})",
+    "maxValue": "最大値: {max}",
+    "minLength": "値は短すぎます (最小: {min})",
+    "minValue": "最小値: {max}",
+    "numeric": "値は数字のみを受け入れます",
+    "required": "値は必須です",
+    "sameAs": "値は一致しません: {field}",
+    "url": "値は有効なURLではありません"
+  }
+}
+</i18n>