sprintify-ui 0.10.64 → 0.10.65

package/src/components/BaseInput.vue

@@ -1,402 +1,402 @@
-<template>
-  <div :class="classes">
-    <div :class="decorationWrapClasses">
-      <component
-        :is="hasLeftListener ? 'button' : 'div'"
-        v-if="iconLeft"
-        :type="hasLeftListener ? 'button' : undefined"
-        :class="[decorationClasses, hasLeftListener ? 'hover:bg-slate-100' : '']"
-        @click="onIconLeftClickInternal"
-      >
-        <BaseIcon
-          :icon="iconLeft"
-          :class="iconClasses"
-        />
-      </component>
-      <div
-        v-if="prefix"
-        :class="decorationClasses"
-        @click="focusAction"
-      >
-        {{ prefix }}
-      </div>
-    </div>
-
-    <input
-      v-if="maskOptions"
-      ref="input"
-      v-maska="maskOptions"
-      v-bind="bindings"
-      :value="modelValue"
-      :type="type"
-      :autocomplete="autocomplete ? 'on' : 'off'"
-      :class="baseClasses"
-      @input="onInput"
-      @click="onClick"
-      @keydown="onKeydown"
-    >
-    <input
-      v-else
-      ref="input"
-      v-bind="bindings"
-      :value="modelValue"
-      :type="type"
-      :autocomplete="autocomplete ? 'on' : 'off'"
-      :class="baseClasses"
-      @input="onInput"
-      @click="onClick"
-      @keydown="onKeydown"
-    >
-    <div :class="decorationWrapClasses">
-      <div
-        v-if="suffix"
-        :class="decorationClasses"
-        @click="focusAction"
-      >
-        {{ suffix }}
-      </div>
-      <component
-        :is="hasRightListener ? 'button' : 'div'"
-        v-if="iconRight"
-        :type="hasRightListener ? 'button' : undefined"
-        :class="[decorationClasses, hasRightListener ? 'hover:bg-slate-100' : '']"
-        @click="onIconRightClickInternal"
-      >
-        <BaseIcon
-          :icon="iconRight"
-          :class="iconClasses"
-        />
-      </component>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { get } from 'lodash';
-import { PropType } from 'vue';
-import { Icon as BaseIcon } from '@iconify/vue';
-import { useField } from '@/composables/field';
-import { vMaska } from 'maska/vue';
-import { Size, sizes } from '@/utils/sizes';
-import { twMerge } from 'tailwind-merge';
-import { MaskInputOptions, MaskType } from 'maska';
-
-defineOptions({
-  inheritAttrs: false,
-})
-
-const props = defineProps({
-  modelValue: {
-    default: '',
-    type: [String, Number, null] as PropType<string | number | null>,
-  },
-  class: {
-    default: '',
-    type: [String, Array] as PropType<string | string[]>,
-  },
-  type: {
-    type: String,
-    default: 'text',
-  },
-  step: {
-    default: undefined,
-    type: [null, Number] as PropType<undefined | null | number>,
-  },
-  autocomplete: {
-    default: true,
-    type: Boolean,
-  },
-  /**
-   * Prevents submit when pressing 'Enter' while the input is focused.
-   */
-  preventSubmit: {
-    default: false,
-    type: Boolean,
-  },
-  name: {
-    default: undefined,
-    type: [null, String] as PropType<undefined | null | string>,
-  },
-  placeholder: {
-    default: '',
-    type: String,
-  },
-  disabled: {
-    default: false,
-    type: Boolean,
-  },
-  required: {
-    default: undefined,
-    type: Boolean,
-  },
-  iconLeft: {
-    default: undefined,
-    type: [null, String] as PropType<undefined | null | string>,
-  },
-  iconRight: {
-    default: undefined,
-    type: [null, String] as PropType<undefined | null | string>,
-  },
-  prefix: {
-    default: undefined,
-    type: [null, String] as PropType<undefined | null | string>,
-  },
-  suffix: {
-    default: undefined,
-    type: [null, String] as PropType<undefined | null | string>,
-  },
-  hasError: {
-    default: false,
-    type: Boolean,
-  },
-  size: {
-    default: undefined,
-    type: String as PropType<Size>,
-  },
-  min: {
-    default: undefined,
-    type: [null, Number] as PropType<undefined | null | number>,
-  },
-  max: {
-    default: undefined,
-    type: [null, Number] as PropType<undefined | null | number>,
-  },
-  mask: {
-    type: [String, Array, Function] as PropType<string | string[] | MaskType>,
-    default() {
-      return null;
-    },
-  },
-  visibleFocus: {
-    default: true,
-    type: Boolean,
-  },
-  onIconLeftClick: {
-    default: undefined,
-    type: Function as PropType<() => void>,
-  },
-  onIconRightClick: {
-    default: undefined,
-    type: Function as PropType<() => void>,
-  },
-});
-
-const input = ref<HTMLInputElement | null>(null);
-const focus = ref(false);
-
-const hasLeftDecoration = computed(() => {
-  return props.iconLeft || props.prefix;
-});
-
-const hasRightDecoration = computed(() => {
-  return props.iconRight || props.suffix;
-});
-
-const hasLeftListener = computed(() => {
-  return props.onIconLeftClick !== undefined;
-});
-
-const hasRightListener = computed(() => {
-  return props.onIconRightClick !== undefined;
-});
-
-const maskOptions = computed(() => {
-  if (props.mask) {
-    return {
-      mask: maskInternal.value,
-    };
-  }
-  return undefined;
-});
-
-const bindings = computed<any>(() => {
-  return {
-    name: nameInternal.value,
-    step: props.step,
-    min: props.min,
-    max: props.max,
-    disabled: props.disabled,
-    placeholder: props.placeholder,
-    required: requiredInternal.value,
-    onKeydown(event: KeyboardEvent) {
-      if (event.code == 'Enter' && props.preventSubmit) {
-        event.preventDefault();
-      }
-    },
-    onFocus: (e: Event) => {
-      emit('focus', e);
-      focus.value = true;
-    },
-    onBlur: (e: Event) => {
-      emit('blur', e);
-      focus.value = false;
-    },
-  };
-});
-
-const maskInternal = computed(() => {
-  if (props.mask === 'phone') {
-    return '(###) ###-####';
-  }
-  if (props.mask === 'date') {
-    return '####-##-##';
-  }
-  if (props.mask === 'time') {
-    return '##:##:##';
-  }
-  if (props.mask === 'credit-card') {
-    return '#### #### #### ####';
-  }
-  if (props.mask === 'zip-code-canada') {
-    return '@#@ #@#';
-  }
-
-  return props.mask;
-});
-
-const emit = defineEmits(['update:modelValue', 'focus', 'blur', 'click', 'keydown']);
-
-const { nameInternal, requiredInternal, hasErrorInternal, emitUpdate, sizeInternal } =
-  useField({
-    name: computed(() => props.name),
-    required: computed(() => props.required),
-    hasError: computed(() => props.hasError),
-    size: computed(() => props.size),
-    emit: emit,
-  });
-
-function onInput(event: any | null) {
-  if (event === null) {
-    emitUpdate(null);
-  }
-
-  return emitUpdate(get(event, 'target.value', ''));
-}
-
-function onClick(event: MouseEvent) {
-  emit('click', event);
-}
-
-function onKeydown(event: KeyboardEvent) {
-  emit('keydown', event);
-}
-
-const classes = computed(() => {
-  const base = `inline-flex bg-white input-rounded border transition-colors duration-200`;
-  const border = hasErrorInternal.value ? 'border-red-500' : 'border-slate-300';
-  const disabled = props.disabled ? 'cursor-not-allowed text-slate-300' : '';
-
-  const sizeConfig = sizes[sizeInternal.value];
-  let focusClass = '';
-  if (props.visibleFocus) {
-    if (hasErrorInternal.value) {
-      focusClass = 'focus-within:input-focus-error';
-    } else {
-      focusClass = 'focus-within:input-focus';
-    }
-  }
-
-  return twMerge([
-    base,
-    border,
-    disabled,
-    sizeConfig.height,
-    sizeConfig.fontSize,
-    focusClass,
-    props.class,
-  ]);
-});
-
-const baseClasses = computed(() => {
-  const base = `border-none outline-none bg-transparent grow min-w-0 focus:border-none focus:outline-none focus:ring-0`;
-  const sizeConfig = sizes[sizeInternal.value];
-  const disabled = props.disabled ? 'cursor-not-allowed text-slate-300' : '';
-
-  const paddingX = {
-    xs: [hasLeftDecoration.value ? 'pl-0' : 'pl-2', hasRightDecoration.value ? 'pr-0' : 'pr-2'],
-    sm: [hasLeftDecoration.value ? 'pl-0' : 'pl-2.5', hasRightDecoration.value ? 'pr-0' : 'pr-2.5'],
-    md: [hasLeftDecoration.value ? 'pl-0' : 'pl-3', hasRightDecoration.value ? 'pr-1' : 'pr-3'],
-    lg: [hasLeftDecoration.value ? 'pl-0' : 'pl-4', hasRightDecoration.value ? 'pr-0' : 'pr-4'],
-    xl: [hasLeftDecoration.value ? 'pl-0' : 'pl-5', hasRightDecoration.value ? 'pr-0' : 'pr-5'],
-  }[sizeInternal.value];
-
-  return [
-    base,
-    disabled,
-    paddingX,
-    sizeConfig.fontSize,
-  ];
-});
-
-const decorationWrapClasses = computed(() => {
-  const base = `flex justify-center empty:hidden`;
-  const spacing = {
-    xs: 'first:pl-0.5 last:pr-0.5 py-0.5',
-    sm: 'first:pl-1 last:pr-1 py-1',
-    md: 'first:pl-1 last:pr-1 py-1',
-    lg: 'first:pl-1 last:pr-1 py-1.5',
-    xl: 'first:pl-1 last:pr-1 py-2',
-  }[sizeInternal.value];
-
-  return [
-    base,
-    spacing,
-  ];
-});
-
-const decorationClasses = computed(() => {
-  const base = `flex items-center justify-center rounded-md whitespace-pre`;
-  const textColor = hasErrorInternal.value ? 'text-red-800' : 'text-slate-500';
-  const padding = {
-    xs: 'p-1',
-    sm: 'p-1.5',
-    md: 'p-2',
-    lg: 'p-1.5',
-    xl: 'p-1.5',
-  }[sizeInternal.value];
-
-  return `${base} ${textColor} ${padding}`;
-});
-
-const iconClasses = computed(() => {
-  const sizeConfig = sizes[sizeInternal.value];
-
-  return [
-    sizeConfig.iconSize,
-  ];
-});
-
-function focusAction() {
-  input.value?.focus();
-}
-
-function blurAction() {
-  input.value?.blur();
-}
-
-function selectAction() {
-  input.value?.select();
-}
-
-function onIconLeftClickInternal() {
-  if (props.onIconLeftClick) {
-    props.onIconLeftClick();
-  } else {
-    focusAction();
-  }
-}
-
-function onIconRightClickInternal() {
-  if (props.onIconRightClick) {
-    props.onIconRightClick();
-  } else {
-    blurAction();
-  }
-}
-
-defineExpose({
-  focus: focusAction,
-  blur: blurAction,
-  select: selectAction,
-});
-</script>
+<template>
+  <div :class="classes">
+    <div :class="decorationWrapClasses">
+      <component
+        :is="hasLeftListener ? 'button' : 'div'"
+        v-if="iconLeft"
+        :type="hasLeftListener ? 'button' : undefined"
+        :class="[decorationClasses, hasLeftListener ? 'hover:bg-slate-100' : '']"
+        @click="onIconLeftClickInternal"
+      >
+        <BaseIcon
+          :icon="iconLeft"
+          :class="iconClasses"
+        />
+      </component>
+      <div
+        v-if="prefix"
+        :class="decorationClasses"
+        @click="focusAction"
+      >
+        {{ prefix }}
+      </div>
+    </div>
+
+    <input
+      v-if="maskOptions"
+      ref="input"
+      v-maska="maskOptions"
+      v-bind="bindings"
+      :value="modelValue"
+      :type="type"
+      :autocomplete="autocomplete ? 'on' : 'off'"
+      :class="baseClasses"
+      @input="onInput"
+      @click="onClick"
+      @keydown="onKeydown"
+    >
+    <input
+      v-else
+      ref="input"
+      v-bind="bindings"
+      :value="modelValue"
+      :type="type"
+      :autocomplete="autocomplete ? 'on' : 'off'"
+      :class="baseClasses"
+      @input="onInput"
+      @click="onClick"
+      @keydown="onKeydown"
+    >
+    <div :class="decorationWrapClasses">
+      <div
+        v-if="suffix"
+        :class="decorationClasses"
+        @click="focusAction"
+      >
+        {{ suffix }}
+      </div>
+      <component
+        :is="hasRightListener ? 'button' : 'div'"
+        v-if="iconRight"
+        :type="hasRightListener ? 'button' : undefined"
+        :class="[decorationClasses, hasRightListener ? 'hover:bg-slate-100' : '']"
+        @click="onIconRightClickInternal"
+      >
+        <BaseIcon
+          :icon="iconRight"
+          :class="iconClasses"
+        />
+      </component>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { get } from 'lodash';
+import { PropType } from 'vue';
+import { Icon as BaseIcon } from '@iconify/vue';
+import { useField } from '@/composables/field';
+import { vMaska } from 'maska/vue';
+import { Size, sizes } from '@/utils/sizes';
+import { twMerge } from 'tailwind-merge';
+import { MaskInputOptions, MaskType } from 'maska';
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = defineProps({
+  modelValue: {
+    default: '',
+    type: [String, Number, null] as PropType<string | number | null>,
+  },
+  class: {
+    default: '',
+    type: [String, Array] as PropType<string | string[]>,
+  },
+  type: {
+    type: String,
+    default: 'text',
+  },
+  step: {
+    default: undefined,
+    type: [null, Number] as PropType<undefined | null | number>,
+  },
+  autocomplete: {
+    default: true,
+    type: Boolean,
+  },
+  /**
+   * Prevents submit when pressing 'Enter' while the input is focused.
+   */
+  preventSubmit: {
+    default: false,
+    type: Boolean,
+  },
+  name: {
+    default: undefined,
+    type: [null, String] as PropType<undefined | null | string>,
+  },
+  placeholder: {
+    default: '',
+    type: String,
+  },
+  disabled: {
+    default: false,
+    type: Boolean,
+  },
+  required: {
+    default: undefined,
+    type: Boolean,
+  },
+  iconLeft: {
+    default: undefined,
+    type: [null, String] as PropType<undefined | null | string>,
+  },
+  iconRight: {
+    default: undefined,
+    type: [null, String] as PropType<undefined | null | string>,
+  },
+  prefix: {
+    default: undefined,
+    type: [null, String] as PropType<undefined | null | string>,
+  },
+  suffix: {
+    default: undefined,
+    type: [null, String] as PropType<undefined | null | string>,
+  },
+  hasError: {
+    default: false,
+    type: Boolean,
+  },
+  size: {
+    default: undefined,
+    type: String as PropType<Size>,
+  },
+  min: {
+    default: undefined,
+    type: [null, Number] as PropType<undefined | null | number>,
+  },
+  max: {
+    default: undefined,
+    type: [null, Number] as PropType<undefined | null | number>,
+  },
+  mask: {
+    type: [String, Array, Function] as PropType<string | string[] | MaskType>,
+    default() {
+      return null;
+    },
+  },
+  visibleFocus: {
+    default: true,
+    type: Boolean,
+  },
+  onIconLeftClick: {
+    default: undefined,
+    type: Function as PropType<() => void>,
+  },
+  onIconRightClick: {
+    default: undefined,
+    type: Function as PropType<() => void>,
+  },
+});
+
+const input = ref<HTMLInputElement | null>(null);
+const focus = ref(false);
+
+const hasLeftDecoration = computed(() => {
+  return props.iconLeft || props.prefix;
+});
+
+const hasRightDecoration = computed(() => {
+  return props.iconRight || props.suffix;
+});
+
+const hasLeftListener = computed(() => {
+  return props.onIconLeftClick !== undefined;
+});
+
+const hasRightListener = computed(() => {
+  return props.onIconRightClick !== undefined;
+});
+
+const maskOptions = computed(() => {
+  if (props.mask) {
+    return {
+      mask: maskInternal.value,
+    };
+  }
+  return undefined;
+});
+
+const bindings = computed<any>(() => {
+  return {
+    name: nameInternal.value,
+    step: props.step,
+    min: props.min,
+    max: props.max,
+    disabled: props.disabled,
+    placeholder: props.placeholder,
+    required: requiredInternal.value,
+    onKeydown(event: KeyboardEvent) {
+      if (event.code == 'Enter' && props.preventSubmit) {
+        event.preventDefault();
+      }
+    },
+    onFocus: (e: Event) => {
+      emit('focus', e);
+      focus.value = true;
+    },
+    onBlur: (e: Event) => {
+      emit('blur', e);
+      focus.value = false;
+    },
+  };
+});
+
+const maskInternal = computed(() => {
+  if (props.mask === 'phone') {
+    return '(###) ###-####';
+  }
+  if (props.mask === 'date') {
+    return '####-##-##';
+  }
+  if (props.mask === 'time') {
+    return '##:##:##';
+  }
+  if (props.mask === 'credit-card') {
+    return '#### #### #### ####';
+  }
+  if (props.mask === 'zip-code-canada') {
+    return '@#@ #@#';
+  }
+
+  return props.mask;
+});
+
+const emit = defineEmits(['update:modelValue', 'focus', 'blur', 'click', 'keydown']);
+
+const { nameInternal, requiredInternal, hasErrorInternal, emitUpdate, sizeInternal } =
+  useField({
+    name: computed(() => props.name),
+    required: computed(() => props.required),
+    hasError: computed(() => props.hasError),
+    size: computed(() => props.size),
+    emit: emit,
+  });
+
+function onInput(event: any | null) {
+  if (event === null) {
+    emitUpdate(null);
+  }
+
+  return emitUpdate(get(event, 'target.value', ''));
+}
+
+function onClick(event: MouseEvent) {
+  emit('click', event);
+}
+
+function onKeydown(event: KeyboardEvent) {
+  emit('keydown', event);
+}
+
+const classes = computed(() => {
+  const base = `inline-flex bg-white input-rounded border transition-colors duration-200`;
+  const border = hasErrorInternal.value ? 'border-red-500' : 'border-slate-300';
+  const disabled = props.disabled ? 'cursor-not-allowed text-slate-300' : '';
+
+  const sizeConfig = sizes[sizeInternal.value];
+  let focusClass = '';
+  if (props.visibleFocus) {
+    if (hasErrorInternal.value) {
+      focusClass = 'focus-within:input-focus-error';
+    } else {
+      focusClass = 'focus-within:input-focus';
+    }
+  }
+
+  return twMerge([
+    base,
+    border,
+    disabled,
+    sizeConfig.height,
+    sizeConfig.fontSize,
+    focusClass,
+    props.class,
+  ]);
+});
+
+const baseClasses = computed(() => {
+  const base = `border-none outline-none bg-transparent grow min-w-0 focus:border-none focus:outline-none focus:ring-0`;
+  const sizeConfig = sizes[sizeInternal.value];
+  const disabled = props.disabled ? 'cursor-not-allowed text-slate-300' : '';
+
+  const paddingX = {
+    xs: [hasLeftDecoration.value ? 'pl-0' : 'pl-2', hasRightDecoration.value ? 'pr-0' : 'pr-2'],
+    sm: [hasLeftDecoration.value ? 'pl-0' : 'pl-2.5', hasRightDecoration.value ? 'pr-0' : 'pr-2.5'],
+    md: [hasLeftDecoration.value ? 'pl-0' : 'pl-3', hasRightDecoration.value ? 'pr-1' : 'pr-3'],
+    lg: [hasLeftDecoration.value ? 'pl-0' : 'pl-4', hasRightDecoration.value ? 'pr-0' : 'pr-4'],
+    xl: [hasLeftDecoration.value ? 'pl-0' : 'pl-5', hasRightDecoration.value ? 'pr-0' : 'pr-5'],
+  }[sizeInternal.value];
+
+  return [
+    base,
+    disabled,
+    paddingX,
+    sizeConfig.fontSize,
+  ];
+});
+
+const decorationWrapClasses = computed(() => {
+  const base = `flex justify-center empty:hidden`;
+  const spacing = {
+    xs: 'first:pl-0.5 last:pr-0.5 py-0.5',
+    sm: 'first:pl-1 last:pr-1 py-1',
+    md: 'first:pl-1 last:pr-1 py-1',
+    lg: 'first:pl-1 last:pr-1 py-1.5',
+    xl: 'first:pl-1 last:pr-1 py-2',
+  }[sizeInternal.value];
+
+  return [
+    base,
+    spacing,
+  ];
+});
+
+const decorationClasses = computed(() => {
+  const base = `flex items-center justify-center rounded-md`;
+  const textColor = hasErrorInternal.value ? 'text-red-800' : 'text-slate-500';
+  const padding = {
+    xs: 'p-1',
+    sm: 'p-1.5',
+    md: 'p-2',
+    lg: 'p-1.5',
+    xl: 'p-1.5',
+  }[sizeInternal.value];
+
+  return `${base} ${textColor} ${padding}`;
+});
+
+const iconClasses = computed(() => {
+  const sizeConfig = sizes[sizeInternal.value];
+
+  return [
+    sizeConfig.iconSize,
+  ];
+});
+
+function focusAction() {
+  input.value?.focus();
+}
+
+function blurAction() {
+  input.value?.blur();
+}
+
+function selectAction() {
+  input.value?.select();
+}
+
+function onIconLeftClickInternal() {
+  if (props.onIconLeftClick) {
+    props.onIconLeftClick();
+  } else {
+    focusAction();
+  }
+}
+
+function onIconRightClickInternal() {
+  if (props.onIconRightClick) {
+    props.onIconRightClick();
+  } else {
+    blurAction();
+  }
+}
+
+defineExpose({
+  focus: focusAction,
+  blur: blurAction,
+  select: selectAction,
+});
+</script>