@antify/ui-module 1.1.4 → 1.2.0

package/dist/runtime/tailwind.config.d.ts

@@ -82,6 +82,7 @@ declare const _default: {
             'danger-800-font': any;
             'danger-900-font': any;
             'danger-950-font': any;
+            transparent: any;
             white: any;
             black: any;
             'neutral-50': any;

package/dist/runtime/tailwind.config.mjs

@@ -1,5 +1,6 @@
 import defaultColors from "tailwindcss/colors.js";
 const colors = {
+  "transparent": defaultColors.transparent,
   "white": defaultColors.white,
   "black": defaultColors.black,
   "neutral-50": defaultColors.slate["50"],

package/dist/runtime/types/AntTag.type.d.ts

@@ -1,8 +1,7 @@
 export declare enum TagColorType {
     danger = "danger",
     info = "info",
-    neutral300 = "neutral-300",
-    neutral50 = "neutral-50",
+    base = "base",
     success = "success",
     warning = "warning"
 }

package/dist/runtime/types/AntTag.type.mjs

@@ -1,8 +1,7 @@
 export var TagColorType = /* @__PURE__ */ ((TagColorType2) => {
   TagColorType2["danger"] = "danger";
   TagColorType2["info"] = "info";
-  TagColorType2["neutral300"] = "neutral-300";
-  TagColorType2["neutral50"] = "neutral-50";
+  TagColorType2["base"] = "base";
   TagColorType2["success"] = "success";
   TagColorType2["warning"] = "warning";
   return TagColorType2;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@antify/ui-module",
   "private": false,
-  "version": "1.1.4",
+  "version": "1.2.0",
   "license": "MIT",
   "type": "module",
   "exports": {
@@ -41,31 +41,29 @@
   },
   "devDependencies": {
     "@faker-js/faker": "^8.3.1",
-    "@nuxt/eslint-config": "^0.2.0",
-    "@nuxt/module-builder": "^0.5.5",
-    "@storybook/addon-docs": "^7.6.10",
-    "@storybook/addon-essentials": "^7.6.10",
-    "@storybook/addon-interactions": "^7.6.10",
-    "@storybook/addon-links": "^7.6.10",
-    "@storybook/blocks": "^7.6.10",
-    "@storybook/test": "^7.6.10",
-    "@storybook/vue3": "^7.6.10",
-    "@storybook/vue3-vite": "^7.6.10",
-    "@typescript-eslint/eslint-plugin": "^6.19.1",
-    "@typescript-eslint/parser": "^6.19.1",
+    "@nuxt/eslint-config": "latest",
+    "@nuxt/module-builder": "latest",
+    "@storybook/addon-docs": "^8.0.0-beta.5",
+    "@storybook/addon-essentials": "^8.0.0-beta.5",
+    "@storybook/addon-interactions": "^8.0.0-beta.5",
+    "@storybook/addon-links": "^8.0.0-beta.5",
+    "@storybook/addon-mdx-gfm": "^8.0.0-beta.5",
+    "@storybook/blocks": "^8.0.0-beta.5",
+    "@storybook/test": "^8.0.0-beta.5",
+    "@storybook/vue3": "^8.0.0-beta.5",
+    "@storybook/vue3-vite": "^8.0.0-beta.5",
+    "@vitejs/plugin-vue": "^5.0.4",
     "autoprefixer": "^10.4.16",
-    "eslint": "^8.56.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-storybook": "^0.6.15",
-    "eslint-plugin-vue": "^9.20.1",
+    "chromatic": "^11.0.0",
+    "eslint": "latest",
+    "eslint-plugin-storybook": "latest",
     "nuxt": "^3.9.3",
     "ofetch": "^1.3.3",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
     "standard-version": "latest",
-    "storybook": "7.5.3",
+    "storybook": "^8.0.0-beta.5",
     "typescript": "^5.3.3",
     "unbuild": "^2.0.0",
+    "vite": "^5.1.4",
     "vue-cli-plugin-tailwind": "3.0.0"
   },
   "scripts": {
@@ -76,6 +74,7 @@
     "storybook": "storybook dev -p 6006 --no-open",
     "build-storybook": "storybook build",
     "release": "standard-version && git push --follow-tags && pnpm publish --access public",
-    "release-minor": "standard-version -- --release-as minor && git push --follow-tags && pnpm publish"
+    "release-minor": "standard-version -- --release-as minor && git push --follow-tags && pnpm publish",
+    "chromatic": "npx chromatic --project-token=chpt_2abc12269958fdc"
   }
 }

package/src/runtime/components/AntAccordionItem.vue

@@ -93,12 +93,12 @@ function onClick() {
   animation: slide 1s reverse;
 }
 
-@keyframes slide {
+/*@keyframes slide {
   0% {
   //transform: translateY(-100%); max-height: 0; opacity: 0;
   }
   100% {
   //transform: translateY(0%); max-height: 100%; opacity: 1;
   }
-}
+}*/
 </style>

package/src/runtime/components/AntTag.vue

@@ -6,6 +6,7 @@ import {handleEnumValidation} from '../handler';
 import {type IconDefinition} from '@fortawesome/free-solid-svg-icons';
 import {faCircleXmark} from '@fortawesome/free-solid-svg-icons';
 
+defineEmits(['close']);
 const props = withDefaults(defineProps<{
   colorType?: TagColorType,
   size?: Size;
@@ -13,7 +14,7 @@ const props = withDefaults(defineProps<{
   dismiss?: boolean
 }>(), {
   size: Size.md,
-  colorType: TagColorType.neutral300,
+  colorType: TagColorType.base,
   dismiss: false
 });
 
@@ -21,8 +22,7 @@ const classes = computed(() => {
   const variants: Record<TagColorType, string> = {
     [TagColorType.danger]: 'bg-danger-500 text-danger-500-font',
     [TagColorType.info]: 'bg-info-500 text-info-500-font',
-    [TagColorType.neutral300]: 'bg-neutral-300 text-neutral-300-font',
-    [TagColorType.neutral50]: 'bg-neutral-50 text-neutral-50-font',
+    [TagColorType.base]: 'bg-neutral-300 text-neutral-300-font',
     [TagColorType.success]: 'bg-success-500 text-success-500-font',
     [TagColorType.warning]: 'bg-warning-500 text-warning-500-font',
   };

package/src/runtime/components/AntToast.vue

@@ -68,6 +68,7 @@ onMounted(() => {
   <div
     :class="classes"
     data-e2e="toast"
+    :data-e2e-color-type="props.colorType"
   >
     <div class="inline-flex items-center justify-between w-content gap-2.5">
       <div class="inline-flex items-center gap-2.5">

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

@@ -14,7 +14,7 @@
  */
 import AntField from './Elements/AntField.vue';
 import {type SelectOption} from './__types/AntSelect.type';
-import {computed, onMounted, ref, watch, nextTick} from 'vue';
+import {computed, onMounted, ref} from 'vue';
 import {Size} from '../../enums/Size.enum';
 import {FieldValidator} from '@antify/validate';
 import {handleEnumValidation} from '../../handler';
@@ -164,13 +164,6 @@ onMounted(() => {
 
   focusedDropDownItem.value = _modelValue.value;
 });
-watch(isOpen, (val) => {
-  nextTick(() => {
-    if (val) {
-      dropDownRef.value?.focus();
-    }
-  });
-});
 
 function onClickOutside() {
   if (!isOpen.value) {
@@ -181,47 +174,6 @@ function onClickOutside() {
   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();
 
@@ -280,9 +232,8 @@ function onClickRemoveButton() {
             ref="inputRef"
             :tabindex="disabled ? undefined : 0"
             @mousedown="onClickSelectInput"
-            @focusin="onFocusInInput"
-            @focusout="onFocusOutInput"
             v-bind="$attrs"
+            @click="inputRef?.focus()"
         >
           <div
               v-if="_modelValue === null && placeholder !== undefined"
@@ -329,6 +280,8 @@ function onClickRemoveButton() {
           :input-ref="inputRef"
           :size="size"
           :color-type="_colorType"
+          @select-element="(e) => _modelValue = e"
+          close-on-enter
         />
       </div>
 

package/src/runtime/components/form/AntSwitch.vue

@@ -1,12 +1,11 @@
 <script setup lang="ts">
 import AntField from './Elements/AntField.vue';
-import { useVModel } from '@vueuse/core';
 import { computed, type Ref } from 'vue';
 import { FieldValidator } from '@antify/validate';
 import AntSkeleton from '../AntSkeleton.vue';
 import { InputColorType, Size } from '../../enums';
 
-const emits = defineEmits([ 'update:modelValue' ]);
+const emits = defineEmits([ 'update:modelValue', 'input' ]);
 const props = withDefaults(defineProps<{
   modelValue: boolean;
   label?: string;
@@ -23,7 +22,13 @@ const props = withDefaults(defineProps<{
   colorType: InputColorType.base
 });
 
-const _value = useVModel(props, 'modelValue', emits);
+const _value = computed({
+  get: () => props.modelValue,
+  set: (value: boolean) => {
+    emits('update:modelValue', value)
+    emits('input', value)
+  }
+});
 const hasAction = computed(() => (!props.skeleton && !props.readonly && !props.disabled))
 const _colorType: Ref<InputColorType> = computed(() => props.validator?.hasErrors() ? InputColorType.danger : props.colorType);
 

package/src/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>