@antify/ui 2.2.0 → 2.2.3

package/dist/components/inputs/__stories/AntTagInput.stories.mjs

@@ -1,7 +1,13 @@
 import AntTagInput from "../AntTagInput.vue";
-import { ref } from "vue";
-import { InputState } from "../../../enums/index.mjs";
-import { AntTagInputSize } from "../__types/AntTagInput.types.mjs";
+import {
+  ref
+} from "vue";
+import {
+  InputState
+} from "../../../enums/index.mjs";
+import {
+  AntTagInputSize
+} from "../__types/AntTagInput.types.mjs";
 import AntFormGroup from "../../forms/AntFormGroup.vue";
 import AntFormGroupLabel from "../../forms/AntFormGroupLabel.vue";
 const meta = {
@@ -10,19 +16,35 @@ const meta = {
   argTypes: {
     modelValue: {
       control: "text",
-      table: { type: { summary: "string|null" } }
+      table: {
+        type: {
+          summary: "string|null"
+        }
+      }
     },
     state: {
-      control: { type: "select" },
+      control: {
+        type: "select"
+      },
       options: Object.values(InputState)
     },
     size: {
-      control: { type: "select" },
+      control: {
+        type: "select"
+      },
       options: Object.values(AntTagInputSize),
-      table: { defaultValue: { summary: AntTagInputSize.md } }
+      table: {
+        defaultValue: {
+          summary: AntTagInputSize.md
+        }
+      }
     },
     placeholder: {
-      table: { defaultValue: { summary: "this.label" } }
+      table: {
+        defaultValue: {
+          summary: "this.label"
+        }
+      }
     },
     createCallback: {
       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.",
@@ -62,7 +84,9 @@ const options = [
 ];
 export const Docs = {
   render: (args) => ({
-    components: { AntTagInput },
+    components: {
+      AntTagInput
+    },
     setup() {
       const value = ref([]);
       return {
@@ -87,16 +111,26 @@ export const AllowCreate = {
     allowCreate: true,
     createCallback(item) {
       return new Promise((resolve) => {
-        resolve({ label: item, value: `${Math.random()}-${item}` });
+        resolve({
+          label: item,
+          value: `${Math.random()}-${item}`
+        });
       });
     }
   }
 };
 export const summary = {
   render: (args) => ({
-    components: { AntTagInput, AntFormGroup, AntFormGroupLabel },
+    components: {
+      AntTagInput,
+      AntFormGroup,
+      AntFormGroupLabel
+    },
     setup() {
-      const value = ref(["1", "2"]);
+      const value = ref([
+        "1",
+        "2"
+      ]);
       const noValue = ref([]);
       return {
         args,

package/dist/components/inputs/__stories/AntTextInput.stories.mjs

@@ -1,41 +1,77 @@
-import { Size } from "../../../enums/Size.enum.mjs";
+import {
+  Size
+} from "../../../enums/Size.enum.mjs";
 import AntTextInput from "../AntTextInput.vue";
-import { TextInputType } from "../__types/AntTextInput.types.mjs";
-import { InputState } from "../../../enums/index.mjs";
+import {
+  TextInputType
+} from "../__types/AntTextInput.types.mjs";
+import {
+  InputState
+} from "../../../enums/index.mjs";
 const meta = {
   title: "Inputs/Text Input",
   component: AntTextInput,
-  parameters: { controls: { sort: "requiredFirst" } },
+  parameters: {
+    controls: {
+      sort: "requiredFirst"
+    }
+  },
   argTypes: {
     modelValue: {
       control: "text",
-      table: { type: { summary: "string|null" } }
+      table: {
+        type: {
+          summary: "string|null"
+        }
+      }
     },
     state: {
-      control: { type: "select" },
+      control: {
+        type: "select"
+      },
       options: Object.values(InputState)
     },
     size: {
-      control: { type: "select" },
+      control: {
+        type: "select"
+      },
       options: Object.values(Size),
-      table: { defaultValue: { summary: Size.md } }
+      table: {
+        defaultValue: {
+          summary: Size.md
+        }
+      }
     },
     placeholder: {
-      table: { defaultValue: { summary: "this.label" } }
+      table: {
+        defaultValue: {
+          summary: "this.label"
+        }
+      }
     },
     type: {
-      control: { type: "select" },
+      control: {
+        type: "select"
+      },
       options: Object.values(TextInputType),
-      table: { defaultValue: { summary: TextInputType.text } }
+      table: {
+        defaultValue: {
+          summary: TextInputType.text
+        }
+      }
     }
   }
 };
 export default meta;
 export const Docs = {
   render: (args) => ({
-    components: { AntTextInput },
+    components: {
+      AntTextInput
+    },
     setup() {
-      return { args };
+      return {
+        args
+      };
     },
     template: `
       <AntTextInput
@@ -51,12 +87,19 @@ export const Docs = {
 };
 export const Summary = {
   parameters: {
-    chromatic: { disableSnapshot: false }
+    chromatic: {
+      disableSnapshot: false
+    }
   },
   render: (args) => ({
-    components: { AntTextInput },
+    components: {
+      AntTextInput
+    },
     setup() {
-      return { args, InputState };
+      return {
+        args,
+        InputState
+      };
     },
     template: `
       <div class="flex gap-2.5">

package/dist/components/inputs/__stories/AntTextarea.stories.mjs

@@ -1,46 +1,78 @@
-import { Grouped as _Grouped } from "../../../enums/Grouped.enum.mjs";
-import { Size } from "../../../enums/Size.enum.mjs";
+import {
+  Grouped as _Grouped
+} from "../../../enums/Grouped.enum.mjs";
+import {
+  Size
+} from "../../../enums/Size.enum.mjs";
 import AntTextarea from "../AntTextarea.vue";
-import { InputState } from "../../../enums/index.mjs";
+import {
+  InputState
+} from "../../../enums/index.mjs";
 const meta = {
   title: "Inputs/Textarea",
   component: AntTextarea,
-  parameters: { controls: { sort: "requiredFirst" } },
+  parameters: {
+    controls: {
+      sort: "requiredFirst"
+    }
+  },
   argTypes: {
     state: {
-      control: { type: "select" },
+      control: {
+        type: "select"
+      },
       options: Object.values(InputState)
     },
     size: {
-      control: { type: "select" },
+      control: {
+        type: "select"
+      },
       options: Object.values(Size)
     },
     placeholder: {
-      table: { defaultValue: { summary: "this.label" } }
+      table: {
+        defaultValue: {
+          summary: "this.label"
+        }
+      }
     },
     grouped: {
-      control: { type: "select" },
+      control: {
+        type: "select"
+      },
       options: Object.values(_Grouped),
       description: "Where is this fields position in a group"
     },
     wrapperClass: {
       control: "text",
       description: 'Class for the first element because the attribute "class" would affect the input element.',
-      table: { type: { summary: "string|object" } }
+      table: {
+        type: {
+          summary: "string|object"
+        }
+      }
     },
     showIcon: {
       control: "boolean",
       description: "Some InputStates can has an icon. Control with this property if it get shown or not.",
-      table: { type: { summary: "Type" } }
+      table: {
+        type: {
+          summary: "Type"
+        }
+      }
     }
   }
 };
 export default meta;
 export const Docs = {
   render: (args) => ({
-    components: { AntTextarea },
+    components: {
+      AntTextarea
+    },
     setup: () => {
-      return { args };
+      return {
+        args
+      };
     },
     template: `
       <div class="h-screen">
@@ -59,7 +91,9 @@ export const Docs = {
 };
 export const summary = {
   parameters: {
-    chromatic: { disableSnapshot: false }
+    chromatic: {
+      disableSnapshot: false
+    }
   },
   render: (args, ctx) => ({
     // @ts-ignore

package/dist/components/inputs/__stories/AntUnitInput.stories.mjs

@@ -1,44 +1,78 @@
-import { Size } from "../../../enums/Size.enum.mjs";
+import {
+  Size
+} from "../../../enums/Size.enum.mjs";
 import AntUnitInput from "../AntUnitInput.vue";
-import { faEuroSign } from "@fortawesome/free-solid-svg-icons";
-import { InputState } from "../../../enums/index.mjs";
+import {
+  faEuroSign
+} from "@fortawesome/free-solid-svg-icons";
+import {
+  InputState
+} from "../../../enums/index.mjs";
 const meta = {
   title: "Inputs/Unit Input",
   component: AntUnitInput,
-  parameters: { controls: { sort: "requiredFirst" } },
+  parameters: {
+    controls: {
+      sort: "requiredFirst"
+    }
+  },
   argTypes: {
     modelValue: {
-      table: { type: { summary: "number|null" } }
+      table: {
+        type: {
+          summary: "number|null"
+        }
+      }
     },
     unit: {
       control: "text",
       description: "Will be displayed right to the input.<br>Use text or Font-awesome Icons.",
-      table: { type: { summary: "string|IconDefinition" } }
+      table: {
+        type: {
+          summary: "string|IconDefinition"
+        }
+      }
     },
     state: {
-      control: { type: "select" },
+      control: {
+        type: "select"
+      },
       options: Object.values(InputState)
     },
     size: {
-      control: { type: "select" },
+      control: {
+        type: "select"
+      },
       options: Object.values(Size)
     },
     placeholder: {
-      table: { defaultValue: { summary: "this.label" } }
+      table: {
+        defaultValue: {
+          summary: "this.label"
+        }
+      }
     },
     wrapperClass: {
       control: "text",
       description: 'Class for the first element because the attribute "class" would affect the input element.',
-      table: { type: { summary: "string|object" } }
+      table: {
+        type: {
+          summary: "string|object"
+        }
+      }
     }
   }
 };
 export default meta;
 export const Docs = {
   render: (args) => ({
-    components: { AntUnitInput },
+    components: {
+      AntUnitInput
+    },
     setup() {
-      return { args };
+      return {
+        args
+      };
     },
     template: `
       <AntUnitInput

package/dist/components/layouts/AntNavLeftLayout.vue

@@ -1,8 +1,14 @@
 <script setup lang="ts">
-import {computed, useSlots} from 'vue';
+import {
+  computed, useSlots,
+} from 'vue';
 import AntNavbar from '../navbar/AntNavbar.vue';
-import type {RouteLocationRaw} from 'vue-router';
-import type {NavbarItemTypes} from '../navbar/__types/NavbarItem.types';
+import type {
+  RouteLocationRaw,
+} from 'vue-router';
+import type {
+  NavbarItemTypes,
+} from '../navbar/__types/NavbarItem.types';
 
 defineProps<{
   navbarItems: NavbarItemTypes[];
@@ -21,7 +27,7 @@ const hasLogoImageSlot = computed(() => useSlots()['logo-image'] || false);
         :to="logoRoute"
         class="bg-white min-h-[60px] flex justify-center items-center p-2.5"
       >
-        <slot name="logo-image"/>
+        <slot name="logo-image" />
       </component>
 
       <AntNavbar
@@ -29,8 +35,8 @@ const hasLogoImageSlot = computed(() => useSlots()['logo-image'] || false);
       />
     </div>
 
-    <div class="w-px flex-grow">
-      <slot/>
+    <div class="w-px grow">
+      <slot />
     </div>
   </div>
 </template>

package/dist/components/layouts/__stories/AntNavLeftLayout.stories.mjs

@@ -3,8 +3,16 @@ import AntNavLeftLayout from "../AntNavLeftLayout.vue";
 const meta = {
   title: "Layouts/NavLeftLayout",
   component: AntNavLeftLayout,
-  parameters: { controls: { sort: "requiredFirst" } },
-  decorators: [() => ({ template: '<div class="border border-dashed border-base-300"><story/></div>' })],
+  parameters: {
+    controls: {
+      sort: "requiredFirst"
+    }
+  },
+  decorators: [
+    () => ({
+      template: '<div class="border border-dashed border-base-300"><story/></div>'
+    })
+  ],
   argTypes: {}
 };
 export default meta;

package/dist/components/navbar/AntNavbar.vue

@@ -1,11 +1,15 @@
 <script setup lang="ts">
 
-import {computed} from 'vue';
-import type {NavbarItemTypes} from './__types/NavbarItem.types';
+import {
+  computed,
+} from 'vue';
+import type {
+  NavbarItemTypes,
+} from './__types/NavbarItem.types';
 import AntNavbarItem from './AntNavbarItem.vue';
 
 defineProps<{
-  navbarItems: NavbarItemTypes[]
+  navbarItems: NavbarItemTypes[];
 }>();
 
 const containerClasses = computed(() => ({

package/dist/components/navbar/AntNavbarItem.vue

@@ -1,18 +1,24 @@
 <script setup lang="ts">
-import type {NavbarItemTypes} from './__types/NavbarItem.types';
-import {computed, ref} from 'vue';
+import type {
+  NavbarItemTypes,
+} from './__types/NavbarItem.types';
+import {
+  computed, ref,
+} from 'vue';
 import AntIcon from '../AntIcon.vue';
-import {faChevronDown, faChevronUp} from '@fortawesome/free-solid-svg-icons';
+import {
+  faChevronDown, faChevronUp,
+} from '@fortawesome/free-solid-svg-icons';
 import AntTransitionCollapseHeight from '../transitions/AntTransitionCollapseHeight.vue';
 
 const props = defineProps<{
-  navbarItem: NavbarItemTypes
+  navbarItem: NavbarItemTypes;
 }>();
 
 const itemClasses = computed(() => ({
   'w-full text-sm p-1.5 rounded-md cursor-pointer flex items-center flex-nowrap gap-1': true,
   'transition-colors hover:bg-base-100': true,
-  'text-primary-500': props.navbarItem.active
+  'text-primary-500': props.navbarItem.active,
 }));
 
 const open = ref(false);
@@ -42,7 +48,7 @@ function itemClick(): void {
       :color="navbarItem.active ? 'text-primary-500' : 'text-for-white-bg-font'"
     />
 
-    <div class="flex-grow select-none">
+    <div class="grow select-none">
       {{ navbarItem.label }}
     </div>
 

package/dist/components/navbar/__stories/AntNavbar.stories.mjs

@@ -1,7 +1,11 @@
 import AntNavbar from "../AntNavbar.vue";
 import AntNavbarItem from "../AntNavbarItem.vue";
-import { faUserCircle } from "@fortawesome/free-regular-svg-icons";
-import { faBook } from "@fortawesome/free-solid-svg-icons";
+import {
+  faUserCircle
+} from "@fortawesome/free-regular-svg-icons";
+import {
+  faBook
+} from "@fortawesome/free-solid-svg-icons";
 const meta = {
   title: "Components/Navbar",
   component: AntNavbar,
@@ -13,7 +17,9 @@ const meta = {
 export default meta;
 export const Docs = {
   render: (args) => ({
-    components: { AntNavbar },
+    components: {
+      AntNavbar
+    },
     setup() {
       return {
         args
@@ -26,39 +32,55 @@ export const Docs = {
     `
   }),
   args: {
-    navbarItems: [{
-      icon: faUserCircle,
-      label: "Navbar item",
-      children: [{
-        label: "Child"
-      }]
-    }, {
-      icon: faBook,
-      label: "Navbar item"
-    }, {
-      label: "Navbar item"
-    }, {
-      label: "Navbar item"
-    }, {
-      label: "Navbar item"
-    }, {
-      icon: faBook,
-      label: "Navbar item",
-      active: true,
-      children: [{
-        label: "Child",
-        icon: faBook
-      }]
-    }, {
-      label: "Navbar item"
-    }, {
-      label: "Navbar item"
-    }, {
-      label: "Navbar item"
-    }, {
-      label: "Navbar item"
-    }, {
-      label: "Navbar item"
-    }]
+    navbarItems: [
+      {
+        icon: faUserCircle,
+        label: "Navbar item",
+        children: [
+          {
+            label: "Child"
+          }
+        ]
+      },
+      {
+        icon: faBook,
+        label: "Navbar item"
+      },
+      {
+        label: "Navbar item"
+      },
+      {
+        label: "Navbar item"
+      },
+      {
+        label: "Navbar item"
+      },
+      {
+        icon: faBook,
+        label: "Navbar item",
+        active: true,
+        children: [
+          {
+            label: "Child",
+            icon: faBook
+          }
+        ]
+      },
+      {
+        label: "Navbar item"
+      },
+      {
+        label: "Navbar item"
+      },
+      {
+        label: "Navbar item"
+      },
+      {
+        label: "Navbar item"
+      },
+      {
+        label: "Navbar item"
+      }
+    ]
   }
 };

package/dist/components/table/AntCollapsibleTableRowContent.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
-import {computed} from "vue";
+import {
+  computed,
+} from 'vue';
 
 const props = withDefaults(defineProps<{
   isOpen: boolean;
@@ -9,9 +11,9 @@ const props = withDefaults(defineProps<{
 });
 
 const rowContentClasses = computed(() => ({
-  "grid transition-all duration-300 delay-0 ease-in-out": true,
-  "grid-rows-[0fr]": !props.isOpen,
-  "grid-rows-[1fr]": props.isOpen,
+  'grid transition-all duration-300 delay-0 ease-in-out': true,
+  'grid-rows-[0fr]': !props.isOpen,
+  'grid-rows-[1fr]': props.isOpen,
 }));
 
 </script>
@@ -19,7 +21,7 @@ const rowContentClasses = computed(() => ({
 <template>
   <div :class="rowContentClasses">
     <div class="overflow-hidden">
-      <slot/>
+      <slot />
     </div>
   </div>
 </template>