@antify/ui 1.0.0

package/dist/components/inputs/AntTagInput.vue

@@ -0,0 +1,339 @@
+<script setup lang="ts">
+import {AntField} from './Elements';
+import type {SelectOption} from './__types';
+import {Grouped, InputState, Size} from '../../enums';
+import {useVModel} from '@vueuse/core';
+import {faChevronRight, type IconDefinition} from '@fortawesome/free-solid-svg-icons';
+import {computed, onMounted, type Ref, ref, watch} from 'vue';
+import AntTag from '../AntTag.vue';
+import AntIcon from '../AntIcon.vue';
+import {AntTagSize, IconSize} from '../__types';
+import AntDropDown from './Elements/AntDropDown.vue';
+import AntSkeleton from '../AntSkeleton.vue';
+import {vOnClickOutside} from '@vueuse/components';
+import {AntTagInputSize} from './__types/AntTagInput.types';
+import type {TagState} from '../__types/AntTag.types';
+
+const emit = defineEmits(['update:modelValue', 'blur', 'validate']);
+const props = withDefaults(
+  defineProps<{
+    modelValue: (string | number)[] | null;
+    options: SelectOption[];
+    label?: string;
+    description?: string;
+    placeholder?: string;
+    size?: AntTagInputSize;
+    state?: InputState;
+    disabled?: boolean;
+    readonly?: boolean;
+    skeleton?: boolean;
+    name?: string;
+    expanded?: boolean;
+    icon?: IconDefinition;
+    grouped?: Grouped;
+    nullable?: boolean;
+    messages?: string[];
+    allowCreate?: boolean;
+    allowDuplicates?: boolean;
+    openOnFocus?: boolean;
+    autoCloseAfterSelection?: boolean;
+    createCallback?: (item: string) => Promise<SelectOption>;
+  }>(), {
+    size: AntTagInputSize.md,
+    state: InputState.base,
+    icon: () => faChevronRight,
+    messages: () => [],
+    grouped: Grouped.none,
+    allowCreate: false,
+    allowDuplicates: false,
+    openOnFocus: true,
+    readonly: false,
+    disabled: false,
+    skeleton: false,
+    autoCloseAfterSelection: false,
+    placeholder: 'Add new tag'
+  }
+);
+
+const _modelValue: Ref<(string | number)[] | null> = useVModel(props, 'modelValue', emit);
+const _skeleton = useVModel(props, 'skeleton', emit);
+const dropDownOpen = ref(false);
+const hasInputState = computed(() => props.skeleton || props.readonly || props.disabled);
+const focusedDropDownItem: Ref<string | number | null> = ref(null);
+const tagInput = ref('');
+const filteredOptions = ref(props.options);
+const inputRef: Ref<HTMLElement | null> = ref(null);
+const inputContainerClasses = computed(() => {
+  const variants: Record<InputState, string> = {
+    [InputState.base]: 'outline-neutral-300 focus-within:outline-neutral-300 focus-within:ring-primary-200 bg-white',
+    [InputState.danger]: 'outline-danger-500 focus-within:outline-danger-500 focus-within:ring-danger-200 bg-danger-100',
+    [InputState.info]: 'outline-info-500 focus-within:outline-info-500 focus-within:ring-info-200 bg-info-100',
+    [InputState.success]: 'outline-success-500 focus-within:outline-success-500 focus-within:ring-success-200 bg-success-100',
+    [InputState.warning]: 'outline-warning-500 focus-within:outline-warning-500 focus-within:ring-warning-200 bg-warning-100',
+  };
+
+  return {
+    'flex items-center flex-wrap': true,
+    'transition-colors relative border-none outline w-full focus-within:z-10': true,
+    'outline-offset-[-1px] outline-1 focus-within:outline-offset-[-1px] focus-within:outline-1': true,
+    'opacity-50 cursor-not-allowed': props.disabled,
+    [variants[props.state]]: true,
+    // AntTagInputSize
+    'p-1.5 text-sm': props.size === AntTagInputSize.sm,
+    'p-2 text-sm': props.size === AntTagInputSize.md,
+    'p-2.5 text-sm': props.size === AntTagInputSize.lg,
+    'focus-within:ring-2': !hasInputState.value && props.size === AntTagInputSize.sm,
+    'focus-within:ring-4': !hasInputState.value && (props.size === AntTagInputSize.lg || props.size === AntTagInputSize.md),
+    // Grouping
+    'rounded-tl-md rounded-bl-md rounded-tr-none rounded-br-none': props.grouped === Grouped.left,
+    'rounded-none': props.grouped === Grouped.center,
+    'rounded-tl-none rounded-bl-none rounded-tr-md rounded-br-md': props.grouped === Grouped.right,
+    'rounded-md': props.grouped === Grouped.none,
+    'rounded-bl-none rounded-br-none': dropDownOpen.value && (!props.options || props.options.length > 0) && !props.readonly,
+    'invisible': props.skeleton,
+  };
+});
+const inputClasses = computed(() => {
+  const variants: Record<InputState, string> = {
+    [InputState.base]: 'placeholder:text-neutral-500',
+    [InputState.danger]: 'placeholder:text-danger-700',
+    [InputState.info]: 'placeholder:text-info-700',
+    [InputState.success]: 'placeholder:text-success-700',
+    [InputState.warning]: 'placeholder:text-warning-700',
+  };
+
+  return {
+    'outline-0 border:none ring:none bg-transparent w-full': true,
+    'opacity-50 cursor-not-allowed': props.disabled,
+    [variants[props.state]]: true,
+  };
+});
+const skeletonGrouped = computed(() => {
+  if (!props.nullable || (props.nullable && _modelValue.value === null)) {
+    return props.grouped;
+  }
+
+  if (props.grouped === Grouped.right || props.grouped === Grouped.center) {
+    return Grouped.center;
+  } else {
+    return Grouped.left;
+  }
+});
+
+function onClickOutside() {
+  if (!dropDownOpen.value) {
+    return;
+  }
+
+  dropDownOpen.value = false;
+}
+
+async function checkCreateTag(item: string): Promise<void> {
+  if (props.allowCreate && focusedDropDownItem.value) {
+    // If allowCreate is active but a item is focused inside the dropdown do nothing here.
+    return;
+  }
+
+  if (item && props.allowCreate && props.createCallback) {
+    const newOption: SelectOption = await props.createCallback(item);
+
+    addTag(newOption.value);
+  }
+}
+
+function addTagFromOptions(item: string | number) {
+  if (props.allowCreate && !focusedDropDownItem.value) {
+    // If allowCreate is active we don't need to add it here.
+    return;
+  }
+
+  const option = props.options?.find(option => option.value === item);
+
+  if (option) {
+    addTag(item);
+
+    if (props.autoCloseAfterSelection) {
+      dropDownOpen.value = false;
+    }
+  }
+}
+
+function addTag(tagValue: string | number): void {
+  _modelValue.value = _modelValue.value || [];
+
+  if (!props.allowDuplicates && _modelValue.value?.includes(tagValue) || !tagValue) {
+    return;
+  }
+
+  if (Array.isArray(_modelValue.value)) {
+    _modelValue.value.push(tagValue);
+  } else {
+    _modelValue.value = [tagValue];
+  }
+
+  tagInput.value = '';
+
+  filterDropDown();
+}
+
+function removeLastTag() {
+  if (tagInput.value === '' && Array.isArray(_modelValue.value) && _modelValue.value.length > 0) {
+    _modelValue.value.splice(-1, 1);
+
+    filterDropDown();
+  }
+}
+
+function removeTag(tag: string | number) {
+  if (_modelValue.value && !props.disabled && !props.skeleton && !props.readonly) {
+    _modelValue.value.splice(_modelValue.value.findIndex((_value) => _value === tag), 1);
+
+    filterDropDown();
+  }
+}
+
+function changeFocus() {
+  if (props.openOnFocus) {
+    dropDownOpen.value = true;
+  }
+}
+
+function filterDropDown() {
+  if (!props.options) {
+    return;
+  }
+
+  if (props.allowCreate) {
+    focusedDropDownItem.value = null;
+  }
+
+  dropDownOpen.value = true;
+
+  filteredOptions.value = props.options.filter(option => option.label.toLowerCase().includes(tagInput.value.toLowerCase()));
+
+  // Remove all elements that are in modelValue from the filtered options
+  if (_modelValue.value && !props.allowDuplicates) {
+    filteredOptions.value = filteredOptions.value.filter(option => !_modelValue.value?.includes(option.value));
+  }
+
+  if (!props.allowCreate && filteredOptions.value.length > 0) {
+    focusedDropDownItem.value = filteredOptions.value[0]?.value;
+  }
+}
+
+function onBlur(e: FocusEvent) {
+  emit('validate', props.modelValue);
+  emit('blur', e);
+}
+
+/**
+ * Validate default value if given after delayed data fetching.
+ */
+watch(() => props.skeleton, (val) => {
+  if (!val && props.modelValue !== null) {
+    emit('validate', props.modelValue);
+  }
+});
+watch(_modelValue, (val) => {
+  if ([InputState.danger, InputState.warning, InputState.info].includes(props.state)) {
+    emit('validate', val);
+  }
+}, {deep: true});
+
+onMounted(() => {
+  /**
+   * Validate default value without delayed data fetching.
+   */
+  if (!props.skeleton && props.modelValue !== null) {
+    emit('validate', props.modelValue);
+  }
+});
+</script>
+
+<template>
+  <AntField
+    :label="label"
+    :size="size as unknown as Size"
+    :skeleton="_skeleton"
+    :description="description"
+    :state="state"
+    :expanded="expanded"
+    :messages="messages"
+  >
+    <div
+      v-on-click-outside="onClickOutside"
+      class="relative w-full"
+    >
+      <AntSkeleton
+        v-if="skeleton"
+        absolute
+        rounded
+        :grouped="skeletonGrouped"
+      />
+
+      <div
+        :class="inputContainerClasses"
+        class="w-full flex items-center"
+      >
+        <div
+          class="flex gap-2.5 items-center"
+        >
+          <AntTag
+            v-for="(tag, index) in _modelValue"
+            :key="`tag-input-tag-${index}`"
+            :size="AntTagSize.xs3"
+            :state="state as unknown as TagState"
+            :dismiss="!readonly"
+            @close="removeTag(tag)"
+          >
+            {{ options.find((option: SelectOption) => option.value === tag)?.label }}
+          </AntTag>
+        </div>
+
+        <!-- Input -->
+        <div class="flex items-center w-32 shrink grow">
+          <AntIcon
+            :icon="icon"
+            :size="size === AntTagInputSize.sm ? IconSize.xs : IconSize.sm"
+          />
+
+          <input
+            ref="inputRef"
+            v-model="tagInput"
+            type="text"
+            :placeholder="placeholder"
+            :class="inputClasses"
+            :disabled="disabled"
+            :readonly="readonly"
+            @focus="changeFocus"
+            @input="filterDropDown"
+            @keydown.delete="removeLastTag"
+            @keydown.enter.prevent="checkCreateTag(tagInput)"
+            @blur="onBlur"
+          />
+        </div>
+      </div>
+
+      <AntDropDown
+        v-if="filteredOptions && !disabled && !readonly"
+        ref="dropDownRef"
+        v-model:focused="focusedDropDownItem"
+        v-model:open="dropDownOpen"
+        :model-value="null"
+        :auto-select-first-on-open="!allowCreate"
+        :options="filteredOptions"
+        :input-ref="inputRef"
+        :size="size as unknown as Size"
+        :state="state"
+        :focus-on-open="false"
+        @select-element="addTagFromOptions"
+      >
+        <template #empty>
+          <span v-if="allowCreate">
+            No tag found, create now
+          </span>
+        </template>
+      </AntDropDown>
+    </div>
+  </AntField>
+</template>

package/dist/components/inputs/AntTextInput.vue

@@ -0,0 +1,75 @@
+<script lang="ts" setup>
+import {onMounted} from 'vue';
+import AntField from '../forms/AntField.vue';
+import AntBaseInput from './Elements/AntBaseInput.vue';
+import {Size} from '../../enums/Size.enum';
+import {TextInputType} from './__types/AntTextInput.types';
+import {handleEnumValidation} from '../../handler';
+import {useVModel} from '@vueuse/core';
+import {InputState} from '../../enums';
+import {BaseInputType} from './Elements/__types';
+
+defineOptions({inheritAttrs: false});
+
+const emit = defineEmits(['update:modelValue', 'update:skeleton', 'validate']);
+const props = withDefaults(defineProps<{
+  modelValue: string | null;
+  label?: string;
+  placeholder?: string;
+  description?: string;
+  size?: Size;
+  state?: InputState;
+  disabled?: boolean;
+  readonly?: boolean;
+  skeleton?: boolean;
+  type?: TextInputType;
+  limiter?: boolean;
+  max?: number;
+  messages?: string[];
+}>(), {
+  state: InputState.base,
+  disabled: false,
+  readonly: false,
+  skeleton: false,
+  size: Size.md,
+  type: TextInputType.text,
+  limiter: false,
+  messages: () => []
+});
+
+const _value = useVModel(props, 'modelValue', emit);
+
+onMounted(() => {
+  handleEnumValidation(props.size, Size, 'size');
+  handleEnumValidation(props.state, InputState, 'state');
+  handleEnumValidation(props.type, TextInputType, 'type');
+});
+</script>
+
+<template>
+  <AntField
+    :label="label"
+    :size="size"
+    :skeleton="skeleton"
+    :description="description"
+    :state="state"
+    :limiter-max-value="limiter && max !== undefined ? max : undefined"
+    :limiter-value="limiter ? _value?.length : undefined"
+    :messages="messages"
+  >
+    <AntBaseInput
+      v-model="_value"
+      :type="type as unknown as BaseInputType"
+      wrapper-class="flex-grow"
+      :state="state"
+      :size="size"
+      :skeleton="skeleton"
+      :disabled="disabled"
+      :readonly="readonly"
+      :placeholder="placeholder !== undefined ? placeholder : label"
+      :show-icon="true"
+      v-bind="$attrs"
+      @validate="val => $emit('validate', val)"
+    />
+  </AntField>
+</template>

package/dist/components/inputs/AntTextarea.vue

@@ -0,0 +1,191 @@
+<script lang="ts" setup>
+import {computed, onMounted, watch} from 'vue';
+import {Size} from '../../enums/Size.enum';
+import AntSkeleton from '../AntSkeleton.vue';
+import AntIcon from '../AntIcon.vue';
+import {Grouped} from '../../enums/Grouped.enum';
+import {
+  faExclamationTriangle,
+  faExclamationCircle,
+  faCircleCheck,
+  faCircleInfo
+} from '@fortawesome/free-solid-svg-icons';
+import {handleEnumValidation} from '../../handler';
+import {classesToObjectSyntax} from '../../utils';
+import AntField from '../forms/AntField.vue';
+import {useVModel} from '@vueuse/core';
+import {InputState} from '../../enums';
+import {IconSize} from '../__types';
+
+defineOptions({inheritAttrs: false});
+
+const emit = defineEmits(['update:modelValue', 'validate', 'blur']);
+const props = withDefaults(defineProps<{
+  modelValue: string | null;
+  size?: Size;
+  state?: InputState;
+  disabled?: boolean;
+  readonly?: boolean;
+  skeleton?: boolean;
+  grouped?: Grouped;
+  wrapperClass?: string | Record<string, boolean>;
+  showIcon?: boolean;
+  label?: string;
+  placeholder?: string;
+  description?: string;
+  limiter?: boolean;
+  max?: number;
+  messages?: string[];
+}>(), {
+  state: InputState.base,
+  disabled: false,
+  readonly: false,
+  size: Size.md,
+  skeleton: false,
+  grouped: Grouped.none,
+  showIcon: true,
+  limiter: false,
+  messages: () => []
+});
+const _modelValue = useVModel(props, 'modelValue', emit);
+const hasInputState = computed(() => props.skeleton || props.readonly || props.disabled);
+const icons = {
+  [InputState.info]: faCircleInfo,
+  [InputState.warning]: faExclamationTriangle,
+  [InputState.danger]: faExclamationCircle,
+  [InputState.success]: faCircleCheck,
+  [InputState.base]: null,
+};
+/*TODO #59:: If the scrollbar is showing than the pr is moving and the gap between icon and text is bigger and the icon is stuck in the scrollbar*/
+const inputClasses = computed(() => {
+  const variants: Record<InputState, string> = {
+    [InputState.base]: 'outline-neutral-300 focus:ring-primary-200 bg-white placeholder:text-neutral-500',
+    [InputState.danger]: 'outline-danger-500 focus:ring-danger-200 bg-danger-100 placeholder:text-danger-700',
+    [InputState.info]: 'outline-info-500 focus:ring-info-200 bg-info-100 placeholder:text-info-700',
+    [InputState.success]: 'outline-success-500 focus:ring-success-200 bg-success-100 placeholder:text-success-700',
+    [InputState.warning]: 'outline-warning-500 focus:ring-warning-200 bg-warning-100 placeholder:text-warning-700',
+  };
+
+  return {
+    'block transition-colors relative border-none outline w-full focus:z-10': true,
+    'outline-offset-[-1px] outline-1 focus:outline-offset-[-1px] focus:outline-1': true,
+    'disabled:opacity-50 disabled:cursor-not-allowed': props.disabled,
+    [variants[props.state]]: true,
+    // Size
+    'p-1 text-xs': props.size === Size.xs2,
+    'p-1.5 text-xs': props.size === Size.xs,
+    'p-1.5 text-sm': props.size === Size.sm,
+    'p-2 text-sm': props.size === Size.md,
+    'p-2.5 text-sm': props.size === Size.lg,
+    'focus:ring-2': !hasInputState.value && (props.size === Size.sm || props.size === Size.xs || props.size === Size.xs2),
+    'focus:ring-4': !hasInputState.value && (props.size === Size.lg || props.size === Size.md),
+    // Icon right
+    'pr-6': props.size === Size.xs2 && props.showIcon && icon.value,
+    'pr-7': props.size === Size.xs && props.showIcon && icon.value,
+    'pr-8': props.size === Size.sm && props.showIcon && icon.value,
+    'pr-9': props.size === Size.md && props.showIcon && icon.value,
+    'pr-10': props.size === Size.lg && props.showIcon && icon.value,
+    // Grouped
+    'rounded-tl-md rounded-bl-md rounded-tr-none rounded-br-none': props.grouped === Grouped.left,
+    'rounded-none': props.grouped === Grouped.center,
+    'rounded-tl-none rounded-bl-none rounded-tr-md rounded-br-md': props.grouped === Grouped.right,
+    'rounded-md': props.grouped === Grouped.none,
+    'invisible': props.skeleton
+  };
+});
+const iconColor = computed(() => {
+  const variants = {
+    'base': undefined,
+    'danger': 'text-danger-500',
+    'info': 'text-info-500',
+    'primary': 'text-primary-500',
+    'secondary': 'text-secondary-500',
+    'success': 'text-success-500',
+    'warning': 'text-warning-500',
+  };
+
+  return variants[props.state];
+});
+const _wrapperClass = computed(() => classesToObjectSyntax(props.wrapperClass));
+const icon = computed(() => icons[props.state]);
+const getIconSize = computed(() => {
+  if (props.size === Size.xs || props.size === Size.xs2) {
+    return IconSize.xs;
+  } else {
+    return IconSize.sm;
+  }
+});
+
+onMounted(() => {
+  handleEnumValidation(props.size, Size, 'size');
+  handleEnumValidation(props.grouped, Grouped, 'grouped');
+  handleEnumValidation(props.state, InputState, 'state');
+
+  if (!props.skeleton && props.modelValue !== null) {
+    emit('validate', props.modelValue);
+  }
+});
+
+watch(_modelValue, (val) => {
+  if ([InputState.danger, InputState.warning, InputState.info].includes(props.state)) {
+    emit('validate', val);
+  }
+}, {deep: true});
+watch(() => props.skeleton, (val) => {
+  if (!val && props.modelValue !== null) {
+    emit('validate', props.modelValue);
+  }
+});
+
+function onBlur(e: FocusEvent) {
+  emit('validate', props.modelValue);
+  emit('blur', e);
+}
+</script>
+
+<template>
+  <AntField
+    :label="label"
+    :size="size"
+    :skeleton="skeleton"
+    :description="description"
+    :state="state"
+    :limiter-max-value="limiter && max !== undefined ? max : undefined"
+    :limiter-value="limiter ? _modelValue?.length : undefined"
+    :messages="messages"
+  >
+    <div
+      class="block relative w-full"
+      :class="{...{'-mr-px': grouped !== Grouped.none}, ..._wrapperClass}"
+    >
+      <textarea
+        v-model="_modelValue"
+        :class="inputClasses"
+        :placeholder="placeholder !== undefined ? placeholder : label"
+        :disabled="disabled || skeleton"
+        :readonly="readonly"
+        v-bind="$attrs"
+        @blur="onBlur"
+      />
+
+      <div
+        v-if="showIcon && icon"
+        class="absolute flex h-[95%] right-0 top-0 transition-all z-20"
+        :class="{'p-1': size === Size.xs2, 'p-1.5': size === Size.sm || size === Size.xs, 'p-2': size === Size.md, 'p-2.5': size === Size.lg}"
+      >
+        <AntIcon
+          :icon="icon"
+          :size="getIconSize"
+          :color="iconColor"
+        />
+      </div>
+
+      <AntSkeleton
+        v-if="skeleton"
+        absolute
+        :grouped="grouped"
+        rounded
+      />
+    </div>
+  </AntField>
+</template>

package/dist/components/inputs/AntUnitInput.vue

@@ -0,0 +1,96 @@
+<script lang="ts" setup>
+import {onMounted} from 'vue';
+import AntButton from '../buttons/AntButton.vue';
+import AntField from '../forms/AntField.vue';
+import AntBaseInput from './Elements/AntBaseInput.vue';
+import {Size} from '../../enums/Size.enum';
+import {type IconDefinition} from '@fortawesome/free-solid-svg-icons';
+import {useVModel} from '@vueuse/core';
+import {State, InputState} from '../../enums';
+import {Grouped} from '../../enums/Grouped.enum';
+import {BaseInputType} from './Elements/__types';
+import {handleEnumValidation} from '../../handler';
+
+defineOptions({inheritAttrs: false});
+
+const props = withDefaults(defineProps<{
+  modelValue: number | null;
+  unit: string | IconDefinition;
+  label?: string;
+  placeholder?: string;
+  description?: string;
+  limiter?: boolean;
+  min?: number;
+  max?: number;
+  size?: Size;
+  state?: InputState;
+  disabled?: boolean;
+  readonly?: boolean;
+  skeleton?: boolean;
+  wrapperClass?: string | Record<string, boolean>;
+  messages?: string[];
+}>(), {
+  state: InputState.base,
+  disabled: false,
+  readonly: false,
+  skeleton: false,
+  size: Size.md,
+  limiter: false,
+  messages: () => []
+});
+const emit = defineEmits(['update:modelValue', 'validate']);
+const _modelValue = useVModel(props, 'modelValue', emit);
+
+onMounted(() => {
+  handleEnumValidation(props.state, InputState, 'state');
+  handleEnumValidation(props.size, Size, 'size');
+});
+</script>
+
+<template>
+  <AntField
+    :label="label"
+    :size="size"
+    :skeleton="skeleton"
+    :description="description"
+    :state="state"
+    :limiter-max-value="limiter && max !== undefined ? max : undefined"
+    :limiter-value="limiter && _modelValue !== undefined && _modelValue !== null ? _modelValue : undefined"
+    :messages="messages"
+  >
+    <div
+      class="flex relative"
+    >
+      <AntBaseInput
+        v-model="_modelValue"
+        :type="BaseInputType.number"
+        :grouped="Grouped.left"
+        wrapper-class="flex-grow"
+        :state="state"
+        :size="size"
+        :min="min"
+        :max="max"
+        :skeleton="skeleton"
+        :disabled="disabled"
+        :readonly="readonly"
+        :placeholder="placeholder || label"
+        :show-icon="false"
+        v-bind="$attrs"
+        @validate="val => $emit('validate', val)"
+      />
+
+      <AntButton
+        :icon-left="typeof unit === 'object' ? unit : undefined"
+        :grouped="Grouped.right"
+        :state="state as unknown as State"
+        :size="size"
+        :skeleton="skeleton"
+        :readonly="true"
+      >
+        <span v-if="typeof unit === 'string'">
+          {{ unit }}
+        </span>
+      </AntButton>
+    </div>
+  </AntField>
+</template>