@antify/ui-module 1.7.2 → 1.8.0

package/dist/runtime/components/inputs/AntSwitcher.vue

@@ -1,196 +0,0 @@
-<script setup lang="ts">
-import AntField from '../forms/AntField.vue';
-import AntButton from '../buttons/AntButton.vue';
-import {faChevronLeft, faChevronRight} from '@fortawesome/free-solid-svg-icons';
-import AntSkeleton from '../AntSkeleton.vue';
-import {type SwitcherOption} from './__types/AntSwitcher.types';
-import {State, Grouped, InputState, Size} from '../../enums';
-import {computed, onMounted, watch} from 'vue';
-
-const emit = defineEmits(['update:modelValue', 'validate', 'blur']);
-const props = withDefaults(defineProps<{
-  modelValue: string | null;
-  options: string[] | SwitcherOption[];
-  label?: string;
-  description?: string;
-  skeleton?: boolean;
-  readonly?: boolean;
-  disabled?: boolean;
-  state?: InputState;
-  size?: Size,
-  messages?: string[];
-}>(), {
-  state: InputState.base,
-  size: Size.md,
-  messages: () => []
-});
-const _value = computed({
-  get() {
-    const found = props.options.find((option: string | SwitcherOption) =>
-      typeof option === 'string' ? option === props.modelValue : option.value === props.modelValue);
-
-    if (!found) {
-      return props.options[0];
-    }
-
-    return found;
-  },
-  set(val: string | SwitcherOption) {
-    emit('update:modelValue', typeof val === 'string' ? val : val.value);
-  }
-});
-const hasInputState = computed(() => props.skeleton || props.readonly || props.disabled);
-const containerClasses = computed(() => {
-  const classes: { [key: string]: boolean } = {
-    'flex relative ring-primary/25 rounded-md outline-none': true,
-    'focus-within:ring-2': (props.size === Size.xs2 || props.size === Size.xs || props.size === Size.sm) && !hasInputState.value,
-    'focus-within:ring-4': (props.size === Size.md || props.size === Size.lg) && !hasInputState.value,
-  };
-  const colorVariant = {
-    [InputState.base]: 'focus-within:ring-primary-200',
-    [InputState.danger]: 'focus-within:ring-danger-200',
-    [InputState.info]: 'focus-within:ring-info-200',
-    [InputState.success]: 'focus-within:ring-success-200',
-    [InputState.warning]: 'focus-within:ring-warning-200',
-  };
-
-  classes[colorVariant[props.state]] = true;
-
-  return classes;
-});
-const itemClasses = computed(() => {
-  const classes: { [key: string]: boolean } = {
-    'grow text-center text-black relative outline outline-1 -outline-offset-1': true,
-    '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,
-    'invisible': props.skeleton,
-    'opacity-50 cursor-not-allowed': props.disabled,
-  };
-
-  const colorVariant = {
-    [InputState.danger]: 'outline-danger-500 bg-danger-100',
-    [InputState.base]: 'outline-neutral-300 bg-white',
-    [InputState.info]: 'outline-info-500 bg-info-100',
-    [InputState.success]: 'outline-success-500 bg-success-100',
-    [InputState.warning]: 'outline-warning-500 bg-warning-100',
-  };
-
-  classes[colorVariant[props.state]] = true;
-
-  return classes;
-});
-
-/**
- * Validate default value if given after delayed data fetching.
- */
-watch(() => props.skeleton, (val) => {
-  if (!val && props.modelValue !== null) {
-    emit('validate', props.modelValue);
-  }
-});
-watch(_value, () => {
-  if (props.messages.length > 0) {
-    emit('validate', props.modelValue);
-  }
-});
-
-function onBlur(e: FocusEvent) {
-  emit('validate', props.modelValue);
-  emit('blur', e);
-}
-
-function prevOption() {
-  if (props.readonly || props.disabled) {
-    return;
-  }
-
-  const index = props.options.findIndex((option) => option === _value.value);
-
-  if (index !== -1 && props.options[index - 1]) {
-    _value.value = props.options[index - 1];
-  } else {
-    _value.value = props.options[props.options.length - 1];
-  }
-}
-
-function nextOption() {
-  if (props.readonly || props.disabled) {
-    return;
-  }
-
-  const index = props.options.findIndex((option) => option === _value.value);
-
-  if (index !== -1 && props.options[index + 1]) {
-    _value.value = props.options[index + 1];
-  } else {
-    _value.value = props.options[0];
-  }
-}
-
-onMounted(() => {
-  if (!props.skeleton && props.modelValue !== null) {
-    emit('validate', props.modelValue);
-  }
-});
-</script>
-
-<template>
-  <AntField
-    :label="label"
-    :size="size"
-    :skeleton="skeleton"
-    :description="description"
-    :state="state"
-    :messages="messages"
-    label-for="noop"
-  >
-    <div
-      :class="containerClasses"
-      tabindex="0"
-      @blur="onBlur"
-      @keydown.left.prevent="prevOption()"
-      @keydown.right.prevent="nextOption()"
-    >
-      <AntButton
-        :icon-left="faChevronLeft"
-        :grouped="Grouped.left"
-        :no-focus="true"
-        :state="state as unknown as State"
-        :size="size"
-        :skeleton="skeleton"
-        :readonly="readonly"
-        :disabled="disabled"
-        @click="prevOption"
-        @blur="onBlur"
-      />
-      <div class="grow relative">
-        <div :class="itemClasses">
-          {{ typeof _value === 'string' ? _value : _value.label }}
-        </div>
-
-        <AntSkeleton
-          v-if="skeleton"
-          absolute
-          :grouped="Grouped.center"
-          rounded
-        />
-      </div>
-
-      <AntButton
-        :icon-left="faChevronRight"
-        :grouped="Grouped.right"
-        :no-focus="true"
-        :state="state as unknown as State"
-        :size="size"
-        :skeleton="skeleton"
-        :readonly="readonly"
-        :disabled="disabled"
-        @click="nextOption"
-        @blur="onBlur"
-      />
-    </div>
-  </AntField>
-</template>

package/dist/runtime/components/inputs/AntTagInput.vue

@@ -1,331 +0,0 @@
-<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;
-    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,
-    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 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-primary-500 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,
-    // Size
-    'focus-within:ring-2 p-1.5 text-sm': props.size === AntTagInputSize.sm,
-    'focus-within:ring-4 p-2 text-sm': props.size === AntTagInputSize.md,
-    'focus-within:ring-4 p-2.5 text-sm': props.size === AntTagInputSize.lg,
-    // 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),
-    '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) {
-    _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.sm"
-    :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="true"
-            @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"
-            @focus="changeFocus"
-            @input="filterDropDown"
-            @keydown.delete="removeLastTag"
-            @keydown.enter.prevent="checkCreateTag(tagInput)"
-            @blur="onBlur"
-          />
-        </div>
-      </div>
-
-      <AntDropDown
-        v-if="filteredOptions && !disabled"
-        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/runtime/components/inputs/AntTextInput.vue

@@ -1,72 +0,0 @@
-<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;
-  skeleton?: boolean;
-  type?: TextInputType;
-  limiter?: boolean;
-  max?: number;
-  messages?: string[];
-}>(), {
-  state: InputState.base,
-  disabled: 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"
-      :placeholder="placeholder !== undefined ? placeholder : label"
-      :show-icon="true"
-      v-bind="$attrs"
-      @validate="val => $emit('validate', val)"
-    />
-  </AntField>
-</template>