@antify/ui-module 1.1.4 → 1.2.0

package/dist/module.d.mts

@@ -48,6 +48,7 @@ declare enum CollapseStrategy {
 }
 
 declare enum IconSize {
+    xs = "xs",
     sm = "sm",
     md = "md",
     xl3 = "3xl"
@@ -111,6 +112,7 @@ declare enum ButtonType {
 declare enum BaseInputType {
     date = "date",
     datetime = "datetime",
+    datetimeLocal = "datetime-local",
     email = "email",
     hidden = "hidden",
     month = "month",

package/dist/module.d.ts

@@ -48,6 +48,7 @@ declare enum CollapseStrategy {
 }
 
 declare enum IconSize {
+    xs = "xs",
     sm = "sm",
     md = "md",
     xl3 = "3xl"
@@ -111,6 +112,7 @@ declare enum ButtonType {
 declare enum BaseInputType {
     date = "date",
     datetime = "datetime",
+    datetimeLocal = "datetime-local",
     email = "email",
     hidden = "hidden",
     month = "month",

package/dist/module.json

@@ -1,5 +1,5 @@
 {
   "name": "ui-module",
   "configKey": "uiModule",
-  "version": "1.1.4"
+  "version": "1.2.0"
 }

package/dist/module.mjs

@@ -2,6 +2,7 @@ import defaultColors from 'tailwindcss/colors.js';
 import { defineNuxtModule, createResolver, addPlugin, addImportsDir, addComponentsDir } from '@nuxt/kit';
 
 const colors = {
+  "transparent": defaultColors.transparent,
   "white": defaultColors.white,
   "black": defaultColors.black,
   "neutral-50": defaultColors.slate["50"],
@@ -252,6 +253,7 @@ var CollapseStrategy = /* @__PURE__ */ ((CollapseStrategy2) => {
 })(CollapseStrategy || {});
 
 var IconSize = /* @__PURE__ */ ((IconSize2) => {
+  IconSize2["xs"] = "xs";
   IconSize2["sm"] = "sm";
   IconSize2["md"] = "md";
   IconSize2["xl3"] = "3xl";
@@ -296,6 +298,7 @@ var ButtonType = /* @__PURE__ */ ((ButtonType2) => {
 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/AntAccordionItem.vue

@@ -62,5 +62,5 @@ function onClick() {
 </template>
 
 <style scoped>
-.bounce-enter-active{animation:bounce .6s}.bounce-leave-active{animation:bounce .6s reverse}@keyframes bounce{0%{opacity:0;transform:translateY(-100%)}50%{opacity:1;transform:translateY(5%)}to{opacity:1;transform:translateY(0)}}.slide-enter-active{animation:slide 1s}.slide-leave-active{animation:slide 1s reverse}@keyframes slide{0%{//transform:translateY(-100%);max-height:0;opacity:0}to{//transform:translateY(0);max-height:100%;opacity:1}}
+.bounce-enter-active{animation:bounce .6s}.bounce-leave-active{animation:bounce .6s reverse}@keyframes bounce{0%{opacity:0;transform:translateY(-100%)}50%{opacity:1;transform:translateY(5%)}to{opacity:1;transform:translateY(0)}}.slide-enter-active{animation:slide 1s}.slide-leave-active{animation:slide 1s reverse}
 </style>

package/dist/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/dist/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/dist/runtime/components/{Main.stories.mdx → Main.mdx}

@@ -1,6 +1,7 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs';
+import { Canvas, Meta, Story } from '@storybook/blocks';
+import * as MainStories from './Main.stories';
 
-<Meta title="Main" />
+<Meta of={MainStories} />
 
 <h1>This is the storybook for Antify UI.</h1>
 

package/dist/runtime/components/Main.stories.d.ts

@@ -0,0 +1,7 @@
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const Main: () => {
+    template: string;
+};

package/dist/runtime/components/Main.stories.mjs

@@ -0,0 +1,8 @@
+export default {
+  title: "Main"
+};
+export const Main = () => {
+  return {
+    template: "<div>main</div>"
+  };
+};

package/dist/runtime/components/__stories/AntAccordion.stories.mjs

@@ -15,15 +15,18 @@ const meta = {
 };
 export default meta;
 export const Docs = {
+  parameters: {
+    chromatic: { disableSnapshot: false }
+  },
   render: (args) => ({
     components: { AntAccordion, AntAccordionItem },
     setup() {
       return { args };
     },
     template: `
-          <div class="p-4">
-            <AntAccordion v-bind="args"/>
-          </div>`
+      <div class="p-4">
+        <AntAccordion v-bind="args"/>
+      </div>`
   }),
   args: {
     items: [
@@ -53,13 +56,13 @@ export const CustomContent = {
       return { args };
     },
     template: `
-          <div class="p-4">
-            <AntAccordion v-bind="args">
-              <template #item-content="{item, index}">
-                <div class="text-danger-500">{{ item.content }}</div>
-              </template>
-            </AntAccordion>
-          </div>`
+      <div class="p-4">
+        <AntAccordion v-bind="args">
+          <template #item-content="{item, index}">
+            <div class="text-danger-500">{{ item.content }}</div>
+          </template>
+        </AntAccordion>
+      </div>`
   }),
   args: {
     ...Docs.args

package/dist/runtime/components/__stories/AntKeycap.stories.d.ts

@@ -1,5 +1,5 @@
 import AntKeycap from '../AntKeycap.vue';
-import { type Meta, type StoryObj } from "@storybook/vue3";
+import { type Meta, type StoryObj } from '@storybook/vue3';
 declare const meta: Meta<typeof AntKeycap>;
 export default meta;
 type Story = StoryObj<typeof AntKeycap>;

package/dist/runtime/components/__stories/AntKeycap.stories.mjs

@@ -36,24 +36,27 @@ export const Icon = {
   }
 };
 export const Summary = {
+  parameters: {
+    chromatic: { disableSnapshot: false }
+  },
   render: (args) => ({
     components: { AntKeycap, faChevronUp, faChevronDown },
     setup() {
       return { args, faChevronUp, faChevronDown };
     },
     template: `
-          <div class="p-4">
-            Press
-            <AntKeycap v-bind="args" :icon="faChevronUp"/>
-            or
-            <AntKeycap v-bind="args" :icon="faChevronDown"/>
-            to navigate. Press
-            <AntKeycap v-bind="args">ctl</AntKeycap>
-            +
-            <AntKeycap v-bind="args">K</AntKeycap>
-            to search.
-          </div>
-        `
+      <div class="p-4">
+        Press
+        <AntKeycap v-bind="args" :icon="faChevronUp"/>
+        or
+        <AntKeycap v-bind="args" :icon="faChevronDown"/>
+        to navigate. Press
+        <AntKeycap v-bind="args">ctl</AntKeycap>
+        +
+        <AntKeycap v-bind="args">K</AntKeycap>
+        to search.
+      </div>
+    `
   }),
   args: {}
 };

package/dist/runtime/components/__types/AntIcon.types.d.ts

@@ -1,4 +1,5 @@
 export declare enum IconSize {
+    xs = "xs",
     sm = "sm",
     md = "md",
     xl3 = "3xl"

package/dist/runtime/components/__types/AntIcon.types.mjs

@@ -1,4 +1,5 @@
 export var IconSize = /* @__PURE__ */ ((IconSize2) => {
+  IconSize2["xs"] = "xs";
   IconSize2["sm"] = "sm";
   IconSize2["md"] = "md";
   IconSize2["xl3"] = "3xl";

package/dist/runtime/components/buttons/__stories/AntButton.stories.mjs

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

package/dist/runtime/components/form/AntCheckboxWidget/__stories/AntCheckbox.stories.mjs

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

package/dist/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/dist/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);