@antify/ui 1.0.0

package/dist/components/inputs/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/components/inputs/AntSearch.vue

@@ -0,0 +1,75 @@
+<script lang="ts" setup>
+import {computed, onMounted, ref} from 'vue';
+import AntBaseInput from './Elements/AntBaseInput.vue';
+import {Size} from '../../enums/Size.enum';
+import {handleEnumValidation} from '../../handler';
+import {faSearch} from '@fortawesome/free-solid-svg-icons';
+import {BaseInputType} from './Elements/__types';
+import AntField from '../forms/AntField.vue';
+
+const emits = defineEmits(['update:modelValue']);
+const props = withDefaults(defineProps<{
+  modelValue: string | null;
+  label?: string;
+  placeholder?: string;
+  description?: string;
+  size?: Size;
+  disabled?: boolean;
+  readonly?: boolean;
+  skeleton?: boolean;
+  inputTimeout?: number;
+  query?: string;
+}>(), {
+  disabled: false,
+  skeleton: false,
+  readonly: 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"
+    data-e2e="search"
+  >
+    <AntBaseInput
+      v-model="_value"
+      :type="BaseInputType.search"
+      :size="size"
+      :skeleton="skeleton"
+      :disabled="disabled"
+      :readonly="readonly"
+      :placeholder="placeholder"
+      :icon-left="faSearch"
+      nullable
+      v-bind="$attrs"
+    />
+  </AntField>
+</template>

package/dist/components/inputs/AntSelect.vue

@@ -0,0 +1,319 @@
+<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 '../forms/AntField.vue';
+import {type SelectOption} from './__types/AntSelect.types';
+import {computed, onMounted, ref, watch} from 'vue';
+import {Size} from '../../enums/Size.enum';
+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 {State, InputState} 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;
+    state?: InputState;
+    disabled?: boolean;
+    readonly?: boolean;
+    skeleton?: boolean;
+    nullable?: boolean;
+    grouped?: Grouped;
+    name?: string;
+    wrapperClass?: string | Record<string, boolean>;
+    expanded?: boolean;
+    messages?: string[]
+  }>(), {
+    state: InputState.base,
+    grouped: Grouped.none,
+    size: Size.md,
+    disabled: false,
+    readonly: false,
+    skeleton: false,
+    nullable: false,
+    expanded: true,
+    messages: () => []
+  }
+);
+const emit = defineEmits(['update:modelValue', 'blur', 'validate']);
+const isOpen = ref(false);
+const _modelValue = computed({
+  get: () => props.modelValue,
+  set: (val: string | number | null) => {
+    emit('update:modelValue', val);
+  },
+});
+const hasInputState = computed(() => props.skeleton || props.readonly || props.disabled);
+const valueLabel = computed(() => props.options.find(option => option.value === _modelValue.value)?.label || null);
+const inputClasses = computed(() => {
+  const variants: Record<InputState, string> = {
+    [InputState.base]: 'outline-neutral-300 bg-white focus:ring-primary-200',
+    [InputState.success]: 'outline-success-500 bg-success-100 focus:ring-success-200',
+    [InputState.info]: 'outline-info-500 bg-info-100 focus:ring-info-200',
+    [InputState.warning]: 'outline-warning-500 bg-warning-100 focus:ring-warning-200',
+    [InputState.danger]: 'outline-danger-500  bg-danger-100 focus:ring-danger-200',
+  };
+
+  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[props.state]]: true,
+    // Skeleton
+    'invisible': props.skeleton,
+    // Disabled
+    'disabled:opacity-50 disabled:cursor-not-allowed': 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),
+    // 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<InputState, string> = {
+    [InputState.base]: 'text-neutral-500',
+    [InputState.success]: 'text-success-700',
+    [InputState.info]: 'text-info-700',
+    [InputState.warning]: 'text-warning-700',
+    [InputState.danger]: 'text-danger-700',
+  };
+
+  return {
+    'select-none text-ellipsis overflow-hidden whitespace-nowrap w-full': true,
+    [variants[props.state]]: true,
+  };
+});
+const arrowClasses = computed(() => {
+  const variants: Record<InputState, string> = {
+    [InputState.base]: 'text-for-white-bg-font',
+    [InputState.success]: 'text-success-100-font',
+    [InputState.info]: 'text-info-100-font',
+    [InputState.warning]: 'text-warning-100-font',
+    [InputState.danger]: 'text-danger-100-font',
+  };
+
+  return {[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;
+  }
+});
+const inputRef = ref<HTMLElement | null>(null);
+const dropDownRef = ref<HTMLElement | null>(null);
+const focusedDropDownItem = ref<string | number | null>(null);
+// TODO:: Hotfix to prevent missing required prop warning. Fix it with https://github.com/antify/ui-module/issues/52
+const dropDownFocused = ref(null);
+
+onMounted(() => {
+  handleEnumValidation(props.size, Size, 'size');
+  handleEnumValidation(props.state, InputState, 'state');
+  handleEnumValidation(props.grouped, Grouped, 'grouped');
+
+  focusedDropDownItem.value = _modelValue.value;
+
+  if (!props.skeleton && props.modelValue !== null) {
+    emit('validate', props.modelValue);
+  }
+});
+
+/**
+ * Validate default value if given after delayed data fetching.
+ */
+watch(() => props.skeleton, (val) => {
+  if (!val && props.modelValue !== null) {
+    emit('validate', props.modelValue);
+  }
+});
+watch(_modelValue, () => {
+  if (props.messages.length > 0) {
+    emit('validate', props.modelValue);
+  }
+});
+
+function onBlur(e: FocusEvent) {
+  emit('validate', props.modelValue);
+  emit('blur', e);
+}
+
+function onClickOutside() {
+  if (!isOpen.value) {
+    return;
+  }
+
+  isOpen.value = false;
+  inputRef.value?.focus();
+}
+
+function onClickSelectInput(e: MouseEvent) {
+  e.preventDefault();
+
+  if (props.disabled || props.readonly) {
+    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"
+    :state="state"
+    :class="wrapperClass"
+    :expanded="expanded"
+    :messages="messages"
+    label-for="noop"
+    data-e2e="select"
+    @click-label="() => inputRef?.focus()"
+  >
+    <div
+      class="h-fit flex flex-row w-full"
+    >
+      <div
+        v-on-click-outside="onClickOutside"
+        class="relative w-full"
+        :class="{'cursor-pointer': !skeleton && !readonly}"
+      >
+        <AntSkeleton
+          v-if="skeleton"
+          absolute
+          rounded
+          :grouped="skeletonGrouped"
+        />
+
+        <input
+          v-model="_modelValue"
+          type="hidden"
+          :name="name"
+        >
+
+        <!-- Input -->
+        <div
+          ref="inputRef"
+          :class="inputClasses"
+          :tabindex="disabled || readonly ? -1 : 0"
+          v-bind="$attrs"
+          @mousedown="onClickSelectInput"
+          @click="inputRef?.focus()"
+          @blur="onBlur"
+        >
+          <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="select-none text-ellipsis overflow-hidden whitespace-nowrap w-full text-black"
+          >
+            {{ valueLabel }}
+          </div>
+
+          <AntIcon
+            v-if="isOpen"
+            :icon="faChevronUp"
+            :size="IconSize.sm"
+            :class="arrowClasses"
+          />
+
+          <AntIcon
+            v-else
+            :icon="faChevronDown"
+            :size="IconSize.sm"
+            :class="arrowClasses"
+          />
+        </div>
+
+        <!-- Dropdown -->
+        <AntDropDown
+          ref="dropDownRef"
+          v-model="_modelValue"
+          v-model:open="isOpen"
+          v-model:focused="dropDownFocused"
+          :options="options"
+          :input-ref="inputRef"
+          :size="size"
+          :state="state"
+          :close-on-enter="true"
+          @select-element="(e) => _modelValue = e"
+        />
+      </div>
+
+      <AntButton
+        v-if="nullable && _modelValue !== null"
+        :icon-left="faMultiply"
+        :state="state as unknown as State"
+        :grouped="[Grouped.left, Grouped.center].some(item => item === grouped) ? Grouped.center : Grouped.right"
+        :size="size"
+        :skeleton="skeleton"
+        @click="onClickRemoveButton"
+      />
+    </div>
+  </AntField>
+</template>