@saasmakers/ui 0.1.60 → 0.1.62

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>

package/app/components/fields/FieldSelect.vue

@@ -0,0 +1,291 @@
+<script lang="ts" setup>
+import type { FieldSelect, FieldSelectOption } from '../../types/fields'
+import { vOnClickOutside } from '@vueuse/components'
+import { getIcon } from '../../composables/useIcons'
+
+const props = withDefaults(defineProps<FieldSelect>(), {
+  border: 'full',
+  caret: true,
+  columns: () => [],
+  description: '',
+  direction: 'bottom',
+  disabled: false,
+  hideError: false,
+  label: '',
+  labelIcon: undefined,
+  maxHeight: 'xs',
+  modelValue: undefined,
+  openOnHover: false,
+  options: () => [],
+  padding: true,
+  placeholder: '',
+  required: false,
+  size: 'base',
+  validation: undefined,
+})
+
+const emit = defineEmits<{
+  'change': [event: MouseEvent, value?: number | string]
+  'click': [event: MouseEvent, value?: number | string]
+  'optionClick': [event: MouseEvent, value?: number | string]
+  'update:modelValue': [value?: number | string]
+}>()
+
+const { fadeIn } = useMotion()
+
+const opened = ref(false)
+const uuid = ref(`${Math.floor((1 + Math.random()) * 0x100000)}`)
+
+const computedColumns = computed(() => {
+  if (props.columns.length) {
+    return props.columns
+  }
+
+  return [{ options: computedOptions.value }]
+})
+
+const computedOptions = computed(() => {
+  const options = []
+
+  // Add index to each option
+  if (props.columns.length) {
+    for (const column of props.columns) {
+      for (const columnOption of column.options) {
+        options.push(columnOption)
+      }
+    }
+  }
+  else {
+    for (const columnOption of props.options) {
+      options.push(columnOption)
+    }
+  }
+
+  return options
+})
+
+const selectedOption = computed(() => {
+  return computedOptions.value.find((option) => {
+    return option.value === props.modelValue
+  })
+})
+
+function reset() {
+  opened.value = false
+}
+
+function selectOption(event: MouseEvent, value?: number | string) {
+  emit('change', event, value)
+  emit('update:modelValue', value)
+
+  reset()
+}
+
+function onClose() {
+  reset()
+}
+
+function onContainerClick(event: MouseEvent) {
+  if (!props.disabled) {
+    opened.value = !opened.value
+
+    emit('click', event, selectedOption.value?.value)
+  }
+}
+
+function onContainerKeypress(event: KeyboardEvent) {
+  if (['Enter', 'Space'].includes(event.code)) {
+    (event.target as HTMLElement)?.click()
+  }
+}
+
+function onLabelClick() {
+  if (!props.disabled) {
+    opened.value = !opened.value
+  }
+}
+
+function onMouseEnter() {
+  if (props.openOnHover) {
+    opened.value = true
+  }
+}
+
+function onMouseLeave() {
+  if (props.openOnHover) {
+    opened.value = false
+  }
+}
+
+function onOptionClick(event: MouseEvent, option: FieldSelectOption) {
+  // Check that the option is not currently selected
+  if ((selectedOption.value || {}).value !== option.value) {
+    selectOption(event, option.value)
+  }
+
+  else {
+    reset()
+  }
+
+  emit('optionClick', event, option.value)
+}
+</script>
+
+<template>
+  <div class="flex flex-col">
+    <FieldLabel
+      v-if="label"
+      :disabled="disabled"
+      :for-field="uuid"
+      has-margin-bottom
+      :icon="labelIcon"
+      :label="label"
+      :required="required"
+      :size="size"
+      @click="onLabelClick"
+    />
+
+    <div
+      v-on-click-outside="onClose"
+      class="text-left"
+      :class="{
+        'cursor-not-allowed': disabled,
+        'cursor-pointer': !disabled,
+      }"
+      @mouseenter="onMouseEnter"
+      @mouseleave="onMouseLeave"
+    >
+      <div
+        class="relative"
+        :class="{ 'shadow-sm': border === 'full' }"
+      >
+        <div
+          class="group flex items-center rounded-lg bg-white outline-none dark:bg-gray-900"
+          :class="{
+            'border shadow-sm border-gray-200 dark:border-gray-800': border === 'full',
+            'border-b border-gray-200 dark:border-gray-800': border === 'bottom',
+            'border-0': border === 'none',
+            'border-gray-400 dark:border-gray-600': opened,
+            'hover:border-gray-300 dark:hover:border-gray-700': !opened,
+            'focus:border-gray-400 dark:focus:border-gray-600': !disabled,
+
+            'text-2xs': size === 'xs',
+            'text-xs': size === 'sm',
+            'text-sm': size === 'base',
+            'text-base': size === 'lg',
+
+            'px-4': padding,
+
+            'h-8': size === 'xs',
+            'h-10': size === 'sm',
+            'h-12': size === 'base',
+            'h-14': size === 'lg',
+          }"
+          tabindex="0"
+          @click="onContainerClick"
+          @keypress.prevent="onContainerKeypress"
+        >
+          <template v-if="selectedOption">
+            <BaseIcon
+              v-if="selectedOption.icon"
+              class="pointer-events-none mr-2"
+              :icon="selectedOption.icon"
+            />
+
+            <span class="flex-1 truncate font-medium uppercase">
+              {{ selectedOption.text }}
+            </span>
+          </template>
+
+          <span
+            v-else-if="placeholder"
+            class="flex-1 truncate text-gray-600 font-medium uppercase dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-gray-100"
+          >
+            {{ placeholder }}
+          </span>
+
+          <BaseIcon
+            v-if="caret"
+            class="ml-2 flex-initial"
+            :class="{ 'rotate-180 transform': opened }"
+            color="gray"
+            :icon="getIcon('arrowDown')"
+          />
+        </div>
+
+        <Motion
+          v-if="opened"
+          :animate="fadeIn.animate"
+          as="div"
+          class="absolute left-0 right-0 z-10 mt-0.5 cursor-default"
+          :class="{
+            'top-0': direction === 'bottom',
+            'bottom-0': direction === 'top',
+          }"
+          :initial="fadeIn.initial"
+        >
+          <div
+            class="options min-w-xs overflow-y-auto border border-gray-400 rounded-lg bg-white text-gray-600 font-medium dark:border-gray-600 dark:bg-gray-900 dark:text-gray-400"
+            :class="{
+              'md:min-w-xl p-1 pb-0': computedColumns.length >= 2,
+
+              'mt-8': ['xs', 'sm'].includes(size) && !padding && direction === 'bottom',
+              'mt-10': ((['xs', 'sm'].includes(size) && padding) || (size === 'base' && !padding)) && direction === 'bottom',
+              'mt-12': size === 'base' && padding && direction === 'bottom',
+              'mb-8': ['xs', 'sm'].includes(size) && !padding && direction === 'top',
+              'mb-10': ((['xs', 'sm'].includes(size) && padding) || (size === 'base' && !padding)) && direction === 'top',
+              'mb-12': size === 'base' && padding && direction === 'top',
+
+              'max-h-xs': maxHeight === 'xs',
+              'max-h-sm': maxHeight === 'sm',
+              'max-h-md': maxHeight === 'md',
+              'max-h-lg': maxHeight === 'lg',
+            }"
+          >
+            <div
+              v-for="(column, columnIndex) in computedColumns"
+              :key="columnIndex"
+            >
+              <BaseIcon
+                v-if="column.title"
+                class="px-2 py-1 text-gray-900 dark:text-gray-100"
+                :text="column.title"
+              />
+
+              <div
+                v-for="option in column.options"
+                :key="option.value"
+                class="group flex cursor-pointer items-center outline-none"
+                :class="{
+                  'border-b border-gray-200 dark:border-gray-800 px-4 py-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,
+
+                  '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,
+
+                }"
+                @click="onOptionClick($event, option)"
+              >
+                <BaseIcon
+                  v-if="option.text"
+                  class="pointer-events-none mr-2 flex-initial"
+                  :icon="option.icon"
+                  :size="size"
+                  :text="option.text"
+                />
+              </div>
+            </div>
+          </div>
+        </Motion>
+      </div>
+    </div>
+
+    <FieldMessage
+      :description="description"
+      :hide-error="hideError"
+      :size="size"
+      :validation="validation"
+    />
+  </div>
+</template>

package/app/components/fields/FieldTabs.vue

@@ -0,0 +1,100 @@
+<script lang="ts" setup>
+import type { FieldTabs, FieldTabsAction } from '../../types/fields'
+import { NuxtLinkLocale } from '#components'
+
+const props = withDefaults(defineProps<FieldTabs>(), {
+  minimizeOnMobile: false,
+  modelValue: undefined,
+  multiple: false,
+  size: 'base',
+  tabs: undefined,
+  theme: 'rounded',
+})
+
+const emit = defineEmits<{
+  'change': [event: MouseEvent, tabValue: number | string, action: FieldTabsAction, activeTabs: Array<number | string>]
+  'click': [event: MouseEvent, tabValue: number | string, activeTabs: Array<number | string>]
+  'update:modelValue': [value?: Array<number | string> | number | string]
+}>()
+
+function onTabClick(event: MouseEvent, tabValue: number | string) {
+  let activeTabs = [tabValue]
+
+  // When multiple values are not allowed and tab is not already active
+  if (!props.multiple && props.modelValue !== tabValue) {
+    emit('change', event, tabValue, 'added', activeTabs)
+  }
+
+  // When multiple values are allowed
+  if (props.multiple) {
+    // Remove the tab when already active
+    if (Array.isArray(props.modelValue) && props.modelValue.includes(tabValue)) {
+      activeTabs = props.modelValue.filter(item => item !== tabValue)
+
+      emit('change', event, tabValue, 'removed', activeTabs)
+    }
+    // Push the tab when not already active
+    else {
+      activeTabs = Array.isArray(props.modelValue) ? [...props.modelValue, tabValue] : [tabValue]
+      emit('change', event, tabValue, 'added', activeTabs)
+    }
+  }
+
+  emit('click', event, tabValue, activeTabs)
+  emit('update:modelValue', props.multiple ? activeTabs : tabValue)
+}
+</script>
+
+<template>
+  <div
+    class="item-center flex border border-gray-300 shadow-inner dark:border-gray-700"
+    :class="{
+      'gap-0 border-b border-gray-300 dark:border-gray-700 bg-gray-100 dark:bg-gray-900': theme === 'border',
+      'gap-2 rounded-lg bg-gray-200 dark:bg-gray-800 p-0.5 sm:p-1': theme === 'rounded',
+    }"
+  >
+    <component
+      :is="tab.to ? NuxtLinkLocale : 'div'"
+      v-for="tab in tabs"
+      :key="tab.value"
+      class="flex cursor-pointer items-center justify-center text-xs"
+      :class="{
+        'text-gray-900 dark:text-gray-100': modelValue === tab.value,
+        'text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100': modelValue !== tab.value,
+        'flex-1': !minimizeOnMobile || modelValue !== tab.value,
+        'flex-2 sm:flex-1': minimizeOnMobile && modelValue === tab.value,
+
+        'py-1.5 px-2.5': size === 'xs' && theme === 'rounded',
+        'py-2 px-3': size === 'sm' && theme === 'rounded',
+        'py-2.5 px-3.5': size === 'base' && theme === 'rounded' || size === 'xs' && theme === 'border',
+        'py-3 px-4': size === 'lg' && theme === 'rounded' || size === 'sm' && theme === 'border',
+        'py-3.5 px-4.5': size === 'base' && theme === 'border',
+        'py-4 px-5': size === 'lg' && theme === 'border',
+
+        'border-b-2 border-gray-300 dark:border-gray-700 transition duration-500': theme === 'border',
+        'border-gray-900 dark:border-gray-100': modelValue === tab.value && theme === 'border',
+        'border-gray-100 dark:border-gray-900': modelValue !== tab.value && theme === 'border',
+
+        'rounded-lg': theme === 'rounded',
+        'bg-white dark:bg-gray-900 shadow': modelValue === tab.value && theme === 'rounded',
+        'bg-gray-200 dark:bg-gray-800': modelValue !== tab.value && theme === 'rounded',
+      }"
+      :to="tab.to"
+      @click="onTabClick($event, tab.value)"
+    >
+      <BaseIcon
+        v-if="tab.icon"
+        class="mr-1.5 flex-initial"
+        :color="modelValue === tab.value ? tab.activeColor : 'black'"
+        :icon="tab.icon"
+      />
+
+      <span
+        class="flex-initial"
+        :class="{ 'hidden sm:inline': minimizeOnMobile && modelValue !== tab.value }"
+      >
+        {{ tab.label }}
+      </span>
+    </component>
+  </div>
+</template>