@antify/ui-module 1.1.4 → 1.2.0

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

@@ -0,0 +1,306 @@
+<script setup lang="ts">
+
+import { AntField } from './Elements';
+import type { SelectOption } from './__types';
+import { Grouped, InputColorType, Size } from '../../enums';
+import type { FieldValidator } from '@antify/validate';
+import { useVModel } from '@vueuse/core';
+import {
+  faChevronRight,
+  type IconDefinition
+} from '@fortawesome/free-solid-svg-icons';
+import { computed, type Ref, ref } from 'vue';
+import AntTag from '../AntTag.vue';
+import AntIcon from '../AntIcon.vue';
+import { IconSize } from '../__types';
+import AntDropDown from './Elements/AntDropDown.vue';
+import AntSkeleton from '../AntSkeleton.vue';
+import { vOnClickOutside } from '@vueuse/components'
+
+const emit = defineEmits([ 'update:modelValue' ]);
+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;
+    name?: string;
+    showMessageOnError?: boolean;
+    expanded?: boolean;
+    icon?: IconDefinition;
+    grouped?: Grouped;
+    nullable?: boolean;
+
+    allowCreate?: boolean;
+    allowDuplicates?: boolean;
+    openOnFocus?: boolean;
+    autoCloseAfterSelection?: boolean;
+
+    createCallback?: (item: string) => Promise<SelectOption>;
+  }>(), {
+    size: Size.md,
+    colorType: InputColorType.base,
+    icon: () => faChevronRight,
+    grouped: Grouped.none,
+
+    allowCreate: false,
+    allowDuplicates: false,
+    openOnFocus: true,
+    autoCloseAfterSelection: false,
+    showMessageOnError: true,
+
+    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 _colorType = computed(() => props.validator?.hasErrors() ? InputColorType.danger : props.colorType);
+
+const inputContainerClasses = computed(() => {
+  const variants: Record<InputColorType, string> = {
+    [InputColorType.base]: 'outline-neutral-300 focus-within:outline-primary-500 focus-within:ring-primary-200 bg-white',
+    [InputColorType.danger]: 'outline-danger-500 focus-within:outline-danger-500 focus-within:ring-danger-200 bg-danger-100',
+    [InputColorType.info]: 'outline-info-500 focus-within:outline-info-500 focus-within:ring-info-200 bg-info-100',
+    [InputColorType.success]: 'outline-success-500 focus-within:outline-success-500 focus-within:ring-success-200 bg-success-100',
+    [InputColorType.warning]: 'outline-warning-500 focus-within:outline-warning-500 focus-within:ring-warning-200 bg-warning-100',
+  };
+
+  return {
+    'flex gap-1 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[_colorType.value]]: true,
+    // Size
+    'focus-within:ring-2 px-1.5 py-1.5 text-xs': props.size === Size.sm,
+    'focus-within:ring-4 px-2.5 py-1.5 text-sm': props.size === Size.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),
+    'invisible': props.skeleton,
+  };
+});
+
+const inputClasses = computed(() => {
+  const variants: Record<InputColorType, string> = {
+    [InputColorType.base]: 'placeholder:text-neutral-500',
+    [InputColorType.danger]: 'placeholder:text-danger-700',
+    [InputColorType.info]: 'placeholder:text-info-700',
+    [InputColorType.success]: 'placeholder:text-success-700',
+    [InputColorType.warning]: 'placeholder:text-warning-700',
+  };
+
+  return {
+    'outline-0 border:none ring:none bg-transparent w-full py-1': true,
+    'opacity-50 cursor-not-allowed': props.disabled,
+    [variants[_colorType.value]]: 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;
+  }
+
+  _modelValue.value.push(tagValue);
+
+  tagInput.value = '';
+
+  filterDropDown();
+}
+
+function removeLastTag() {
+  if (tagInput.value === '' && _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;
+  }
+}
+</script>
+
+<template>
+  <AntField
+    :label="label"
+    :size="size"
+    :skeleton="_skeleton"
+    :description="description"
+    :color-type="colorType"
+    :validator="validator"
+    :show-message-on-error="showMessageOnError"
+    :expanded="expanded"
+  >
+    <div
+      class="relative w-full"
+      v-on-click-outside="onClickOutside"
+    >
+      <AntSkeleton
+        v-if="skeleton"
+        absolute
+        rounded
+        :grouped="skeletonGrouped"
+      />
+
+      <div
+        :class="inputContainerClasses"
+        class="w-full flex gap-2.5 items-center"
+      >
+        <AntTag
+          v-for="(tag, index) in _modelValue"
+          :key="`tag-input-tag-${index}`"
+          :size="size"
+          :color-type="_colorType"
+          dismiss
+          @close="removeTag(tag)"
+        >
+          {{ options.find((option: SelectOption) => option.value === tag)?.label }}
+        </AntTag>
+
+        <!-- Input -->
+        <div class="flex items-center gap-1 w-32 shrink grow">
+          <AntIcon :icon="icon" :size="size === Size.sm ? IconSize.xs : IconSize.sm"/>
+
+          <input
+            v-model="tagInput"
+            type="text"
+            ref="inputRef"
+            :placeholder="placeholder"
+            :class="inputClasses"
+            :disabled="disabled"
+            @focus="changeFocus"
+            @input="filterDropDown"
+            @keydown.delete="removeLastTag"
+            @keydown.enter.prevent="checkCreateTag(tagInput)"
+          />
+        </div>
+      </div>
+
+      <AntDropDown
+        v-if="filteredOptions && !disabled"
+        v-model:focused="focusedDropDownItem"
+        v-model:open="dropDownOpen"
+        ref="dropDownRef"
+        :model-value="null"
+        :auto-select-first-on-open="!allowCreate"
+        :options="filteredOptions"
+        :input-ref="inputRef"
+        :size="size"
+        :color-type="_colorType"
+        :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/form/Elements/AntDropDown.vue

@@ -7,30 +7,34 @@
  * TODO:: if the dropdown is open and the user types something, the element with a matching value should be focused.
  */
 
-import { computed, nextTick, ref, watch } from 'vue';
+import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
 import { InputColorType, Size } from '../../../enums';
 import type { SelectOption } from '../__types';
 import { useVModel } from '@vueuse/core';
 import type { Validator } from '@antify/validate';
 
-const emit = defineEmits(['update:open', 'update:modelValue']);
+const emit = defineEmits([ 'update:open', 'update:modelValue', 'update:focused', 'selectElement' ]);
 const props = withDefaults(defineProps<{
-  modelValue: string | number | null;
+  modelValue: string | string[] | number | number[] | null;
+  focused: string | number | null;
   open: boolean;
   options: SelectOption[];
   colorType?: InputColorType;
   validator?: Validator;
   size?: Size;
-  inputRef?: HTMLElement | null
+  inputRef?: HTMLElement | null;
+  closeOnEnter?: boolean;
+  autoSelectFirstOnOpen?: boolean;
 }>(), {
   colorType: InputColorType.base,
+  focusOnOpen: true,
+  closeOnEnter: false,
+  autoSelectFirstOnOpen: true
 });
 
 const _modelValue = useVModel(props, 'modelValue', emit);
 const isOpen = useVModel(props, 'open', emit);
-
-const focusedDropDownItem = ref<string | number | null>(null);
-const dropDownRef = ref<HTMLElement | null>(null);
+const focusedDropDownItem = useVModel(props, 'focused', emit);
 
 const dropdownClasses = computed(() => {
   const variants: Record<InputColorType, string> = {
@@ -68,28 +72,45 @@ const dropDownItemClasses = computed(() => {
   };
 });
 
-watch(isOpen, (val) => {
+watch(isOpen, () => {
   nextTick(() => {
-    if (val) {
-      dropDownRef.value?.focus();
-      focusedDropDownItem.value = _modelValue.value || props.options[0].value;
+    if (props.autoSelectFirstOnOpen) {
+      focusedDropDownItem.value =
+        typeof _modelValue.value === 'string' || typeof _modelValue.value === 'number' ? _modelValue.value :
+          Array.isArray(_modelValue.value) ? _modelValue.value[0] :
+            props.options[0].value;
+    } else {
+      focusedDropDownItem.value = null;
     }
   });
 });
 
+onMounted(() => {
+  nextTick(() => {
+    props.inputRef?.addEventListener('keydown', onKeyDownDropDown);
+  });
+});
+
+onUnmounted(() => {
+  props.inputRef?.removeEventListener('keydown', onKeyDownDropDown);
+});
+
 function onKeyDownDropDown(e: KeyboardEvent) {
   if (e.key === 'Enter') {
-    isOpen.value = false;
-    _modelValue.value = focusedDropDownItem.value;
-    props.inputRef?.focus();
+    if (props.closeOnEnter) {
+      isOpen.value = false;
+    }
+
+    emit('selectElement', focusedDropDownItem.value);
   }
 
   if (e.key === 'Escape') {
     isOpen.value = false;
-    props.inputRef?.focus();
   }
 
   if (e.key === 'ArrowDown' || e.key === 'ArrowRight') {
+    isOpen.value = true;
+
     const index = props.options.findIndex(option => option.value === focusedDropDownItem.value);
     const option = props.options[index + 1];
 
@@ -101,6 +122,8 @@ function onKeyDownDropDown(e: KeyboardEvent) {
   }
 
   if (e.key === 'ArrowUp' || e.key === 'ArrowLeft') {
+    isOpen.value = true;
+
     const index = props.options.findIndex(option => option.value === focusedDropDownItem.value);
     const option = props.options[index - 1];
 
@@ -123,7 +146,7 @@ function getActiveDropDownItemClasses(option: SelectOption) {
     [InputColorType.danger]: 'bg-danger-100/25',
   };
 
-  return option.value === focusedDropDownItem.value ? {[variants[props.colorType]]: true} : {};
+  return option.value === focusedDropDownItem.value ? { [variants[props.colorType]]: true } : {};
 }
 
 function onClickDropDownItem(e: MouseEvent, value: string | number | null) {
@@ -131,17 +154,19 @@ function onClickDropDownItem(e: MouseEvent, value: string | number | null) {
   props.inputRef?.focus();
 
   isOpen.value = false;
+  emit('selectElement', value);
   _modelValue.value = value;
 }
+
+watch(_modelValue, (val) => {
+  focusedDropDownItem.value = Array.isArray(val) ? val[0] : val;
+});
 </script>
 
 <template>
   <div
     v-if="isOpen"
     :class="dropdownClasses"
-    @keydown="onKeyDownDropDown"
-    ref="dropDownRef"
-    tabindex="0"
   >
     <div
       v-for="(option, index) in options"
@@ -152,9 +177,14 @@ function onClickDropDownItem(e: MouseEvent, value: string | number | null) {
     >
       {{ option.label }}
     </div>
+
+    <div
+      v-if="options.length === 0"
+      :class="{...dropDownItemClasses}"
+    >
+      <slot name="empty">
+        No options available
+      </slot>
+    </div>
   </div>
 </template>
-
-<style scoped>
-
-</style>

package/dist/runtime/components/form/Elements/AntField.vue

@@ -7,7 +7,7 @@ import {handleEnumValidation} from '../../../handler';
 import AntInputLimiter from './AntInputLimiter.vue';
 import {InputColorType} from '../../../enums';
 
-const emits = defineEmits(['clickLabel', 'validate']);
+defineEmits(['clickLabel', 'validate']);
 const props = withDefaults(defineProps<{
   label?: string;
   description?: string;
@@ -25,7 +25,7 @@ const props = withDefaults(defineProps<{
   skeleton: false,
   size: Size.md,
   showMessageOnError: true,
-  errors: [],
+  errors: () => [],
   expanded: true
 });
 

package/dist/runtime/components/form/Elements/__stories/AntBaseInput.stories.mjs

@@ -109,6 +109,9 @@ export const IconLeft = {
   }
 };
 export const Summary = {
+  parameters: {
+    chromatic: { disableSnapshot: false }
+  },
   render: (args) => ({
     components: { AntBaseInput, AntButton },
     setup: () => {

package/dist/runtime/components/form/Elements/__types/AntBaseInput.type.d.ts

@@ -1,6 +1,7 @@
 export declare enum BaseInputType {
     date = "date",
     datetime = "datetime",
+    datetimeLocal = "datetime-local",
     email = "email",
     hidden = "hidden",
     month = "month",

package/dist/runtime/components/form/Elements/__types/AntBaseInput.type.mjs

@@ -1,6 +1,7 @@
 export var BaseInputType = /* @__PURE__ */ ((BaseInputType2) => {
   BaseInputType2["date"] = "date";
   BaseInputType2["datetime"] = "datetime";
+  BaseInputType2["datetimeLocal"] = "datetime-local";
   BaseInputType2["email"] = "email";
   BaseInputType2["hidden"] = "hidden";
   BaseInputType2["month"] = "month";

package/dist/runtime/components/form/__stories/AntSelect.stories.mjs

@@ -144,6 +144,9 @@ export const ellipsisText = {
   }
 };
 export const summary = {
+  parameters: {
+    chromatic: { disableSnapshot: false }
+  },
   render: (args) => ({
     components: { AntSelect },
     setup() {

package/dist/runtime/components/form/__stories/AntSwitch.stories.mjs

@@ -46,6 +46,9 @@ export const withValidator = {
   }
 };
 export const Summary = {
+  parameters: {
+    chromatic: { disableSnapshot: false }
+  },
   render: (args) => ({
     components: { AntSwitch },
     setup() {

package/dist/runtime/components/form/__stories/AntSwitcher.stories.mjs

@@ -85,6 +85,9 @@ export const withValidator = {
   }
 };
 export const Summary = {
+  parameters: {
+    chromatic: { disableSnapshot: false }
+  },
   render: (args) => ({
     components: { AntSwitcher },
     setup() {

package/dist/runtime/components/form/__stories/AntTagInput.stories.d.ts

@@ -0,0 +1,9 @@
+import { AntTagInput } from '../index';
+import type { Meta, StoryObj } from '@storybook/vue3';
+declare const meta: Meta<typeof AntTagInput>;
+export default meta;
+type Story = StoryObj<typeof AntTagInput>;
+export declare const Docs: Story;
+export declare const AllowCreate: Story;
+export declare const Disabled: Story;
+export declare const Skeleton: Story;

package/dist/runtime/components/form/__stories/AntTagInput.stories.mjs

@@ -0,0 +1,106 @@
+import { AntTagInput } from "../index.mjs";
+import { ref } from "vue";
+import { InputColorType, Size } from "../../../enums/index.mjs";
+const meta = {
+  title: "Components/Forms/Tag input",
+  component: AntTagInput,
+  argTypes: {
+    modelValue: {
+      control: "text",
+      table: { type: { summary: "string|null" } }
+    },
+    colorType: {
+      control: { type: "select" },
+      options: Object.values(InputColorType)
+    },
+    size: {
+      control: { type: "radio" },
+      options: Object.values(Size),
+      table: { defaultValue: { summary: Size.md } }
+    },
+    placeholder: {
+      table: { defaultValue: { summary: "this.label" } }
+    },
+    createCallback: {
+      control: "none",
+      description: "If allowCreate is true the createCallback needs to be specified. It will be called when the user creates a new tag. It should return a promise that resolves to a SelectOption.",
+      table: {
+        type: {
+          summary: "(item: string) => Promise<SelectOption>",
+          detail: `
+Params:
+item: string - the label of the new tag
+
+Returns:
+Promise<SelectOption> - the new tag as a SelectOption
+          `
+        }
+      }
+    }
+  }
+};
+export default meta;
+const options = [
+  {
+    label: "Tag",
+    value: "1"
+  },
+  {
+    label: "Cat",
+    value: "2"
+  },
+  {
+    label: "Dog",
+    value: "3"
+  },
+  {
+    label: "Chicken",
+    value: "4"
+  }
+];
+export const Docs = {
+  render: (args) => ({
+    components: { AntTagInput },
+    setup() {
+      const value = ref([]);
+      return {
+        args,
+        value
+      };
+    },
+    template: `
+      <div style="width: 360px">
+      <AntTagInput v-model="value" v-bind="args"/>
+      </div>
+    `
+  }),
+  args: {
+    options
+  }
+};
+export const AllowCreate = {
+  render: Docs.render,
+  args: {
+    options,
+    allowCreate: true,
+    createCallback(item) {
+      return new Promise((resolve) => {
+        resolve({ label: item, value: `${Math.random()}-${item}` });
+      });
+    }
+  }
+};
+export const Disabled = {
+  render: Docs.render,
+  args: {
+    options,
+    disabled: true
+  }
+};
+export const Skeleton = {
+  render: Docs.render,
+  args: {
+    options,
+    skeleton: true
+  }
+};

package/dist/runtime/components/form/__stories/AntTextarea.stories.mjs

@@ -86,6 +86,9 @@ export const limited = {
   }
 };
 export const summary = {
+  parameters: {
+    chromatic: { disableSnapshot: false }
+  },
   render: (args, ctx) => ({
     // @ts-ignore
     components: Docs.render(args, ctx).components,

package/dist/runtime/components/form/index.d.ts

@@ -5,7 +5,8 @@ import AntSwitcher from './AntSwitcher.vue';
 import AntSearch from './AntSearch.vue';
 import AntSelect from './AntSelect.vue';
 import AntSwitch from './AntSwitch.vue';
+import AntTagInput from './AntTagInput.vue';
 import AntTextarea from './AntTextarea.vue';
 import AntTextInput from './AntTextInput.vue';
 import AntUnitInput from './AntUnitInput.vue';
-export { AntButton, AntNumberInput, AntRangeSlider, AntSwitcher, AntSearch, AntSelect, AntSwitch, AntTextarea, AntTextInput, AntUnitInput, };
+export { AntButton, AntNumberInput, AntRangeSlider, AntSwitcher, AntSearch, AntSelect, AntSwitch, AntTagInput, AntTextarea, AntTextInput, AntUnitInput, };

package/dist/runtime/components/form/index.mjs

@@ -5,6 +5,7 @@ import AntSwitcher from "./AntSwitcher.vue";
 import AntSearch from "./AntSearch.vue";
 import AntSelect from "./AntSelect.vue";
 import AntSwitch from "./AntSwitch.vue";
+import AntTagInput from "./AntTagInput.vue";
 import AntTextarea from "./AntTextarea.vue";
 import AntTextInput from "./AntTextInput.vue";
 import AntUnitInput from "./AntUnitInput.vue";
@@ -16,6 +17,7 @@ export {
   AntSearch,
   AntSelect,
   AntSwitch,
+  AntTagInput,
   AntTextarea,
   AntTextInput,
   AntUnitInput