@antify/ui-module 1.1.5 → 1.2.0

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

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.5",
+  "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>