@antify/ui-module 1.1.3

package/dist/runtime/components/form/AntRichTextEditor.vue

@@ -0,0 +1,237 @@
+<template></template>
+
+<!--<script lang="ts" setup>-->
+<!--defineOptions({ inheritAttrs: false });-->
+<!--// TODO:: fix ts errors-->
+<!--// @ts-nocheck-->
+<!--import {ref, computed, onUnmounted, watch} from 'vue';-->
+<!--import {useEditor, EditorContent} from '@tiptap/vue-3';-->
+<!--import StarterKit from '@tiptap/starter-kit';-->
+<!--import Underline from '@tiptap/extension-underline';-->
+<!--import Heading from '@tiptap/extension-heading';-->
+<!--import AntButton from './AntButton.vue';-->
+<!--import AntSkeleton from '../AntSkeleton.vue';-->
+<!--import {generateId} from '../../utils/helper';-->
+
+<!--const emit = defineEmits(['update:data']);-->
+
+<!--const props =-->
+<!--  defineProps<{-->
+<!--    id?: string;-->
+<!--    data?: string;-->
+<!--    label?: string;-->
+<!--    description?: string;-->
+<!--    validator?: Function;-->
+<!--    errors?: string[];-->
+<!--    isError?: boolean;-->
+<!--    loading?: boolean;-->
+<!--    disabled?: boolean;-->
+<!--  }>();-->
+
+<!--const _data = computed({-->
+<!--  get: () => {-->
+<!--    return props.data || '';-->
+<!--  },-->
+<!--  set: (val) => {-->
+<!--    emit('update:data', val);-->
+<!--  },-->
+<!--});-->
+
+<!--const _id = ref(props.id || generateId(40));-->
+<!--const editor = ref(-->
+<!--  useEditor({-->
+<!--    content: _data.value,-->
+<!--    extensions: [-->
+<!--      StarterKit,-->
+<!--      Underline,-->
+<!--      Heading.configure({-->
+<!--        levels: [1, 2, 3],-->
+<!--      }),-->
+<!--    ],-->
+<!--    onUpdate: ({editor}) => {-->
+<!--      const state = editor.getHTML();-->
+<!--      _data.value = state;-->
+
+<!--      if (props.validator && typeof props.validator === 'function') {-->
+<!--        props.validator(_data.value);-->
+<!--      }-->
+<!--    },-->
+<!--    editable: !props.disabled,-->
+<!--  })-->
+<!--);-->
+
+<!--watch(-->
+<!--  () => props.disabled,-->
+<!--  () => {-->
+<!--    editor.value?.setOptions({editable: !props.disabled});-->
+<!--  }-->
+<!--);-->
+
+<!--onUnmounted(() => editor?.value?.destroy());-->
+<!--</script>-->
+
+<!--<template>-->
+<!--  <div v-if="!loading">-->
+<!--    <slot>-->
+<!--      <label-->
+<!--        v-if="label"-->
+<!--        :for="_id"-->
+<!--        class="block text-sm font-medium text-gray-700"-->
+<!--      >-->
+<!--        {{ label }}-->
+<!--      </label>-->
+<!--    </slot>-->
+
+<!--    <div-->
+<!--      v-if="editor"-->
+<!--      class="border border-gray-200 rounded-md overflow-hidden p-2 bg-gray-50"-->
+<!--    >-->
+<!--      <slot name="buttons" v-bind="editor">-->
+<!--        <div class="space-x-1 mb-2 flex">-->
+<!--          <slot name="headers-buttons" v-bind="editor">-->
+<!--            <AntButton-->
+<!--              @click="-->
+<!--                editor-->
+<!--                  ? editor.chain().focus().toggleHeading({ level: 1 }).run()-->
+<!--                  : false-->
+<!--              "-->
+<!--              :class="{-->
+<!--                '!bg-gray-200': editor.isActive('heading', { level: 1 }),-->
+<!--              }"-->
+<!--              class="hover:bg-gray-200 border-none"-->
+<!--              :disabled="disabled"-->
+<!--            >-->
+<!--              <span>H1</span>-->
+<!--            </AntButton>-->
+
+<!--            <AntButton-->
+<!--              @click="-->
+<!--                editor-->
+<!--                  ? editor.chain().focus().toggleHeading({ level: 2 }).run()-->
+<!--                  : false-->
+<!--              "-->
+<!--              :class="{-->
+<!--                '!bg-gray-200': editor.isActive('heading', { level: 2 }),-->
+<!--              }"-->
+<!--              class="hover:bg-gray-200 border-none"-->
+<!--              :disabled="disabled"-->
+<!--            >-->
+<!--              <span class="">H2</span>-->
+<!--            </AntButton>-->
+
+<!--            <AntButton-->
+<!--              @click="-->
+<!--                editor-->
+<!--                  ? editor.chain().focus().toggleHeading({ level: 3 }).run()-->
+<!--                  : false-->
+<!--              "-->
+<!--              :class="{-->
+<!--                '!bg-gray-200': editor.isActive('heading', { level: 3 }),-->
+<!--              }"-->
+<!--              class="hover:bg-gray-200 border-none"-->
+<!--              :disabled="disabled"-->
+<!--            >-->
+<!--              <span class="">H3</span>-->
+<!--            </AntButton>-->
+<!--          </slot>-->
+
+<!--          <slot name="bold-button" v-bind="editor">-->
+<!--            <AntButton-->
+<!--              @click="-->
+<!--                editor ? editor.chain().focus().toggleBold().run() : false-->
+<!--              "-->
+<!--              :class="{ '!bg-gray-200': editor.isActive('bold') }"-->
+<!--              class="hover:bg-gray-200 border-none"-->
+<!--              :disabled="disabled"-->
+<!--            >-->
+<!--              <span class="font-bold">B</span>-->
+<!--            </AntButton>-->
+<!--          </slot>-->
+
+<!--          <slot name="italic-button" v-bind="editor">-->
+<!--            <AntButton-->
+<!--              @click="-->
+<!--                editor ? editor.chain().focus().toggleItalic().run() : false-->
+<!--              "-->
+<!--              :class="{ '!bg-gray-200': editor.isActive('italic') }"-->
+<!--              class="hover:bg-gray-200 border-none"-->
+<!--              :disabled="disabled"-->
+<!--            >-->
+<!--              <span class="italic">I</span>-->
+<!--            </AntButton>-->
+<!--          </slot>-->
+
+<!--          <slot name="underline-button" v-bind="editor">-->
+<!--            <AntButton-->
+<!--              @click="-->
+<!--                editor ? editor.chain().focus().toggleUnderline().run() : false-->
+<!--              "-->
+<!--              :class="{ '!bg-gray-200': editor.isActive('underline') }"-->
+<!--              class="hover:bg-gray-200 border-none"-->
+<!--              :disabled="disabled"-->
+<!--            >-->
+<!--              <span class="underline">U</span>-->
+<!--            </AntButton>-->
+<!--          </slot>-->
+
+<!--          <slot name="strike-button" v-bind="editor">-->
+<!--            <AntButton-->
+<!--              @click="-->
+<!--                editor ? editor.chain().focus().toggleStrike().run() : false-->
+<!--              "-->
+<!--              :class="{ '!bg-gray-200': editor.isActive('strike') }"-->
+<!--              class="hover:bg-gray-200 border-none"-->
+<!--              :disabled="disabled"-->
+<!--            >-->
+<!--              <span class="line-through">S</span>-->
+<!--            </AntButton>-->
+<!--          </slot>-->
+
+<!--          <slot name="custom-buttons" v-bind="editor"></slot>-->
+<!--        </div>-->
+<!--      </slot>-->
+
+<!--      <EditorContent-->
+<!--        :id="_id"-->
+<!--        :described-by="`${_id}-description`"-->
+<!--        :editor="editor"-->
+<!--        v-bind="$attrs"-->
+<!--        :class="{-->
+<!--          'border-red-300 text-red-900 placeholder-red-300 focus:border-red-500':-->
+<!--            (errors && errors.length > 0) || isError,-->
+<!--        }"-->
+<!--      />-->
+
+<!--      <slot name="errorList" v-bind="{ errors }">-->
+<!--        <div v-for="error in errors" class="text-red-600">{{ error }}</div>-->
+<!--      </slot>-->
+<!--    </div>-->
+
+<!--    <div-->
+<!--      v-if="description"-->
+<!--      class="mt-1 text-sm text-gray-500"-->
+<!--      :id="`${_id}-description`"-->
+<!--    >-->
+<!--      <slot name="description"> {{ description }}</slot>-->
+<!--    </div>-->
+<!--  </div>-->
+
+<!--  <div v-else>-->
+<!--    <AntSkeleton-->
+<!--      :model-value="loading"-->
+<!--      v-if="label || $slots['label']"-->
+<!--      class="w-2/6 h-4 rounded-md mb-1"-->
+<!--    />-->
+
+<!--    <AntSkeleton-->
+<!--      :model-value="loading"-->
+<!--      class="w-full h-24 rounded-md"-->
+<!--    />-->
+
+<!--    <AntSkeleton-->
+<!--      :model-value="loading"-->
+<!--      v-if="description || $slots['description']"-->
+<!--      class="w-4/6 h-4 rounded-md mt-1"-->
+<!--    />-->
+<!--  </div>-->
+<!--</template>-->

package/dist/runtime/components/form/AntSearch.vue

@@ -0,0 +1,76 @@
+<script lang="ts" setup>
+import {computed, onMounted, ref} from 'vue';
+import AntBaseInput from './Elements/AntBaseInput.vue'
+import {Size} from '../../enums/Size.enum'
+import {FieldValidator} from '@antify/validate'
+import {handleEnumValidation} from '../../handler';
+import {faSearch} from '@fortawesome/free-solid-svg-icons';
+import {BaseInputType} from './Elements/__types';
+import AntField from './Elements/AntField.vue';
+
+const emits = defineEmits(['update:modelValue']);
+const props = withDefaults(defineProps<{
+  modelValue: string | null;
+  label?: string;
+  placeholder?: string;
+  description?: string;
+  size?: Size;
+  disabled?: boolean;
+  skeleton?: boolean;
+  validator?: FieldValidator;
+  inputTimeout?: number;
+  query?: string;
+}>(), {
+  disabled: false,
+  skeleton: false,
+  size: Size.md,
+  inputTimeout: 300,
+  placeholder: 'Search'
+});
+
+const timeout = ref<ReturnType<typeof setTimeout> | null>(null);
+
+// TODO:: implement query prop. Find a way to use vue router in Storybook.
+const _value = computed<string | null>({
+  get: () => props.modelValue,
+  set: (val: string | null) => {
+    if (val === null) {
+      return emits('update:modelValue', val);
+    }
+
+    if (timeout.value) {
+      clearTimeout(timeout.value);
+    }
+
+    timeout.value = setTimeout(() => {
+      emits('update:modelValue', val);
+    }, props.inputTimeout);
+  },
+});
+
+onMounted(() => handleEnumValidation(props.size, Size, 'size'));
+</script>
+
+<template>
+  <AntField
+      :label="label"
+      :size="size"
+      :skeleton="skeleton"
+      :description="description"
+      :validator="validator"
+      data-e2e="search"
+  >
+    <AntBaseInput
+        v-model:value="_value"
+        :type="BaseInputType.search"
+        :size="size"
+        :skeleton="skeleton"
+        :disabled="disabled"
+        :placeholder="placeholder"
+        :validator="validator"
+        :icon-left="faSearch"
+        nullable
+        v-bind="$attrs"
+    />
+  </AntField>
+</template>

package/dist/runtime/components/form/AntSelect.vue

@@ -0,0 +1,346 @@
+<script lang="ts" setup>
+/**
+ * This select is a custom component instead of a native <select> because the dropdown is not good
+ * customizable with css.
+ *
+ * Known problem using a custom select instead of a native one:
+ * - Label tags does not trigger the custom select by containing the select input or using the for attribute.
+ * This means, this select is not usable in a custom field with multiple elements in there.
+ * If the user clicks on the label, this select will not be focused.
+ *
+ * TODO:: add screen reader support
+ * Fix overflow bug (See Ellipsis Text story)
+ * TODO:: if the dropdown is open and the user types something, the element with a matching value should be focused.
+ */
+import AntField from './Elements/AntField.vue';
+import {type SelectOption} from './__types/AntSelect.type';
+import {computed, onMounted, ref, watch, nextTick} from 'vue';
+import {Size} from '../../enums/Size.enum';
+import {FieldValidator} from '@antify/validate';
+import {handleEnumValidation} from '../../handler';
+import {Grouped} from '../../enums/Grouped.enum';
+import AntIcon from '../AntIcon.vue';
+import {faChevronDown, faChevronUp, faMultiply} from '@fortawesome/free-solid-svg-icons';
+import AntSkeleton from '../AntSkeleton.vue';
+import {vOnClickOutside} from '@vueuse/components';
+import AntButton from '../buttons/AntButton.vue';
+import {ColorType, InputColorType} from '../../enums';
+import {IconSize} from '../__types';
+import AntDropDown from './Elements/AntDropDown.vue';
+
+defineOptions({ inheritAttrs: false });
+const props = withDefaults(
+    defineProps<{
+      modelValue: string | number | null;
+      options: SelectOption[];
+      label?: string;
+      description?: string;
+      placeholder?: string;
+      size?: Size;
+      colorType?: InputColorType;
+      disabled?: boolean;
+      skeleton?: boolean;
+      validator?: FieldValidator;
+      nullable?: boolean;
+      grouped?: Grouped;
+      name?: string;
+      wrapperClass?: string | Record<string, boolean>;
+      showMessageOnError?: boolean;
+      expanded?: boolean;
+    }>(), {
+      colorType: InputColorType.base,
+      grouped: Grouped.none,
+      size: Size.md,
+      disabled: false,
+      skeleton: false,
+      nullable: false,
+      showMessageOnError: true,
+      expanded: true
+    }
+);
+const emit = defineEmits(['update:modelValue']);
+const isOpen = ref(false);
+const _modelValue = computed({
+  get: () => props.modelValue,
+  set: (val: string | number | null) => {
+    props.validator?.validate(val);
+    emit('update:modelValue', val);
+  },
+});
+const valueLabel = computed(() => props.options.find(option => option.value === _modelValue.value)?.label || null);
+const inputClasses = computed(() => {
+  const variants: Record<InputColorType, string> = {
+    [InputColorType.base]: 'outline-neutral-300 focus:outline-primary-500 bg-neutral-50 focus:ring-primary/25',
+    [InputColorType.success]: 'outline-success-500 focus:outline-success-500 bg-success-100 focus:ring-success/25',
+    [InputColorType.info]: 'outline-info-500 focus:outline-info-500 bg-info-100 focus:ring-info/25',
+    [InputColorType.warning]: 'outline-warning-500 focus:outline-warning-500 bg-warning-100 focus:ring-warning/25',
+    [InputColorType.danger]: 'outline-danger-500 focus:outline-danger-500 bg-danger-100 focus:ring-danger/25',
+  };
+
+  return {
+    'flex items-center transition-colors border-none outline relative focus:z-10': true,
+    'outline-offset-[-1px] outline-1 focus:outline-offset-[-1px] focus:outline-1': true,
+    [variants[_colorType.value]]: true,
+    // Skeleton
+    'invisible': props.skeleton,
+    // Disabled
+    'disabled:opacity-50 disabled:cursor-not-allowed': true,
+    // Size
+    'focus:ring-2 p-1.5 gap-1.5 text-xs': props.size === Size.sm,
+    'focus:ring-4 p-2.5 gap-2.5 text-sm': props.size === Size.md,
+    // Grouped
+    'rounded-tl-md rounded-bl-md rounded-tr-none rounded-br-none': props.grouped === Grouped.left,
+    'rounded-tl-none rounded-bl-none rounded-tr-md rounded-br-md': props.grouped === Grouped.right,
+    'rounded-none': props.grouped === Grouped.center,
+    'rounded-md': props.grouped === Grouped.none,
+    'rounded-tr-none rounded-br-none': props.nullable && _modelValue.value !== null,
+    'rounded-bl-none rounded-br-none': isOpen.value,
+    // Open
+    'shadow-md': isOpen.value,
+    // Disabled
+    'opacity-50 cursor-not-allowed': props.disabled,
+  };
+});
+const placeholderClasses = computed(() => {
+  const variants: Record<InputColorType, string> = {
+    [InputColorType.base]: 'text-neutral-500',
+    [InputColorType.success]: 'text-success-700',
+    [InputColorType.info]: 'text-info-700',
+    [InputColorType.warning]: 'text-warning-700',
+    [InputColorType.danger]: 'text-danger-700',
+  };
+
+  return {
+    'select-none text-ellipsis overflow-hidden whitespace-nowrap w-full': true,
+    [variants[_colorType.value]]: true,
+  };
+});
+const inputValueClasses = computed(() => {
+  const variants: Record<InputColorType, string> = {
+    [InputColorType.base]: 'text-neutral-50-font',
+    [InputColorType.success]: 'text-success-100-font',
+    [InputColorType.info]: 'text-info-100-font',
+    [InputColorType.warning]: 'text-warning-100-font',
+    [InputColorType.danger]: 'text-danger-100-font',
+  };
+  return {
+    'select-none text-ellipsis overflow-hidden whitespace-nowrap w-full': true,
+    [variants[_colorType.value]]: true,
+  };
+});
+const arrowClasses = computed(() => {
+  const variants: Record<InputColorType, string> = {
+    [InputColorType.base]: 'text-neutral-50-font',
+    [InputColorType.success]: 'text-success-100-font',
+    [InputColorType.info]: 'text-info-100-font',
+    [InputColorType.warning]: 'text-warning-100-font',
+    [InputColorType.danger]: 'text-danger-100-font',
+  };
+
+  return {[variants[_colorType.value]]: true};
+});
+const _colorType = computed(() => props.validator?.hasErrors() ? InputColorType.danger : props.colorType);
+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;
+  }
+});
+const inputRef = ref<HTMLElement | null>(null);
+const dropDownRef = ref<HTMLElement | null>(null);
+const focusedDropDownItem = ref<string | number | null>(null);
+
+onMounted(() => {
+  handleEnumValidation(props.size, Size, 'size');
+  handleEnumValidation(props.colorType, InputColorType, 'colorType');
+  handleEnumValidation(props.grouped, Grouped, 'grouped');
+
+  props.validator?.validate(_modelValue.value);
+
+  focusedDropDownItem.value = _modelValue.value;
+});
+watch(isOpen, (val) => {
+  nextTick(() => {
+    if (val) {
+      dropDownRef.value?.focus();
+    }
+  });
+});
+
+function onClickOutside() {
+  if (!isOpen.value) {
+    return;
+  }
+
+  isOpen.value = false;
+  inputRef.value?.focus();
+}
+
+function onKeyDownInput(e: KeyboardEvent) {
+  if (e.key === 'Enter') {
+    isOpen.value = true;
+    inputRef.value?.blur();
+  }
+
+  if (e.key === 'Escape') {
+    isOpen.value = false;
+    inputRef.value?.focus();
+  }
+
+  if (e.key === 'ArrowDown' || e.key === 'ArrowRight') {
+    const index = props.options.findIndex(option => option.value === _modelValue.value);
+    const option = props.options[index + 1];
+
+    if (index === -1) {
+      _modelValue.value = props.options[0].value;
+    } else if (option !== undefined) {
+      _modelValue.value = option.value;
+    }
+  }
+
+  if (e.key === 'ArrowUp' || e.key === 'ArrowLeft') {
+    const index = props.options.findIndex(option => option.value === _modelValue.value);
+    const option = props.options[index - 1];
+
+    if (option !== undefined) {
+      _modelValue.value = option.value;
+    }
+  }
+}
+
+function onFocusInInput() {
+  inputRef.value?.addEventListener('keydown', onKeyDownInput);
+}
+
+function onFocusOutInput(e: FocusEvent) {
+  e.preventDefault();
+  inputRef.value?.removeEventListener('keydown', onKeyDownInput);
+}
+
+function onClickSelectInput(e: MouseEvent) {
+  e.preventDefault();
+
+  if (props.disabled) {
+    return;
+  }
+
+  if (isOpen.value) {
+    inputRef.value?.focus()
+  }
+
+  isOpen.value = !isOpen.value;
+}
+
+function onClickRemoveButton() {
+  inputRef.value?.focus();
+  _modelValue.value = null;
+}
+</script>
+
+<template>
+  <AntField
+      :label="label"
+      :size="size"
+      :skeleton="skeleton"
+      :description="description"
+      :color-type="colorType"
+      :validator="validator"
+      :class="wrapperClass"
+      :show-message-on-error="showMessageOnError"
+      :expanded="expanded"
+      label-for="noop"
+      data-e2e="select"
+      @clickLabel="() => inputRef?.focus()"
+  >
+    <div
+        class="h-fit flex flex-row w-full"
+    >
+      <div
+          class="relative w-full"
+          :class="{'cursor-pointer': !skeleton}"
+          v-on-click-outside="onClickOutside"
+      >
+        <AntSkeleton
+            v-if="skeleton"
+            absolute
+            rounded
+            :grouped="skeletonGrouped"
+        />
+
+        <input type="hidden" :name="name" v-model="_modelValue">
+
+        <!-- Input -->
+        <div
+            :class="inputClasses"
+            ref="inputRef"
+            :tabindex="disabled ? undefined : 0"
+            @mousedown="onClickSelectInput"
+            @focusin="onFocusInInput"
+            @focusout="onFocusOutInput"
+            v-bind="$attrs"
+        >
+          <div
+              v-if="_modelValue === null && placeholder !== undefined"
+              :class="placeholderClasses"
+          >
+            {{ placeholder }}
+          </div>
+
+          <div
+              v-else-if="_modelValue === null && label !== undefined"
+              :class="placeholderClasses"
+          >
+            {{ label }}
+          </div>
+
+          <div
+              v-else
+              :class="inputValueClasses"
+          >
+            {{ valueLabel }}
+          </div>
+
+          <AntIcon
+              v-if="isOpen"
+              :icon="faChevronUp"
+              :size="size as unknown as IconSize"
+              :class="arrowClasses"
+          />
+
+          <AntIcon
+              v-else
+              :icon="faChevronDown"
+              :size="size as unknown as IconSize"
+              :class="arrowClasses"
+          />
+        </div>
+
+        <!-- Dropdown -->
+        <AntDropDown
+          v-model="_modelValue"
+          v-model:open="isOpen"
+          ref="dropDownRef"
+          :options="options"
+          :input-ref="inputRef"
+          :size="size"
+          :color-type="_colorType"
+        />
+      </div>
+
+      <AntButton
+          v-if="nullable && _modelValue !== null"
+          :icon-left="faMultiply"
+          :color-type="_colorType as unknown as ColorType"
+          :grouped="[Grouped.left, Grouped.center].some(item => item === grouped) ? Grouped.center : Grouped.right"
+          :size="size"
+          :skeleton="skeleton"
+          @click="onClickRemoveButton"
+      />
+    </div>
+  </AntField>
+</template>