@antify/ui 2.2.0 → 2.2.3

package/dist/components/crud/AntCrudTableFilter.vue

@@ -3,19 +3,27 @@
 import AntSearch from '../inputs/AntSearch.vue';
 import AntCreateButton from '../buttons/AntCreateButton.vue';
 import AntDropdown from '../AntDropdown.vue';
-import {computed, ref, watch} from 'vue';
+import {
+  computed, ref, watch,
+} from 'vue';
 import AntButton from '../buttons/AntButton.vue';
-import {faFilter, faMultiply} from '@fortawesome/free-solid-svg-icons';
-import {State, Grouped, Position} from '../../enums';
-import {useRoute, useRouter} from 'vue-router';
+import {
+  faFilter, faMultiply,
+} from '@fortawesome/free-solid-svg-icons';
+import {
+  State, Grouped, Position,
+} from '../../enums';
+import {
+  useRoute, useRouter,
+} from 'vue-router';
 
 const props = withDefaults(defineProps<{
-  fullWidth?: boolean,
-  showFilter?: boolean,
-  searchQuery?: string,
-  hasFilter?: boolean,
-  canCreate?: boolean,
-  skeleton?: boolean,
+  fullWidth?: boolean;
+  showFilter?: boolean;
+  searchQuery?: string;
+  hasFilter?: boolean;
+  canCreate?: boolean;
+  skeleton?: boolean;
 }>(), {
   fullWidth: true,
   showFilter: true,
@@ -24,7 +32,11 @@ const props = withDefaults(defineProps<{
   canCreate: true,
   skeleton: false,
 });
-const emit = defineEmits(['search', 'create', 'removeFilter']);
+const emit = defineEmits([
+  'search',
+  'create',
+  'removeFilter',
+]);
 const router = useRouter();
 const route = useRoute();
 
@@ -35,7 +47,7 @@ const search = computed({
   set: (value) => {
     const query = {
       ...route.query,
-      [props.searchQuery]: value
+      [props.searchQuery]: value,
     };
 
     if (!value) {
@@ -45,12 +57,12 @@ const search = computed({
     (async () => {
       await router.replace({
         ...route,
-        query
+        query,
       });
 
       emit('search', value);
     })();
-  }
+  },
 });
 
 watch(() => props.fullWidth, (val) => {
@@ -66,8 +78,8 @@ watch(() => props.fullWidth, (val) => {
     data-e2e="crud-table-filter"
   >
     <div
-      class="flex gap-2.5 flex-grow"
-      :class="{'flex-grow': !_fullWidth}"
+      class="flex gap-2.5 grow"
+      :class="{'grow': !_fullWidth}"
     >
       <div :class="{'w-80': _fullWidth, 'w-full': !_fullWidth}">
         <AntSearch
@@ -102,7 +114,7 @@ watch(() => props.fullWidth, (val) => {
         </div>
 
         <template #content>
-          <slot name="dropdownContent"/>
+          <slot name="dropdownContent" />
         </template>
       </AntDropdown>
     </div>

package/dist/components/crud/AntCrudTableNav.vue

@@ -4,40 +4,52 @@
  * TODO:: test me in storybook through vue router
  * TODO:: fix ts errors
  */
-import {useRouter, useRoute} from 'vue-router';
+import {
+  useRouter, useRoute,
+} from 'vue-router';
 import AntPagination from '../AntPagination.vue';
-import {computed, ref, watch} from 'vue';
+import {
+  computed, ref, watch,
+} from 'vue';
 import AntSelect from '../inputs/AntSelect.vue';
 import AntSkeleton from '../AntSkeleton.vue';
-import {type SelectOption} from '../inputs/__types';
+import {
+  type SelectOption,
+} from '../inputs/__types';
 
-const emit = defineEmits(['changeItemsPerPage', 'changePage']);
+const emit = defineEmits([
+  'changeItemsPerPage',
+  'changePage',
+]);
 const props = withDefaults(
   defineProps<{
-    count: number | null,
-    pageQuery?: string,
-    itemsPerPageQuery?: string,
-    fullWidth?: boolean,
-    validItemsPerPage?: number[],
-    skeleton?: boolean
+    count: number | null;
+    pageQuery?: string;
+    itemsPerPageQuery?: string;
+    fullWidth?: boolean;
+    validItemsPerPage?: number[];
+    skeleton?: boolean;
   }>(),
   {
     pageQuery: 'p',
     itemsPerPageQuery: 'ipp',
     fullWidth: true,
-    validItemsPerPage: () => [20, 50, 100, 200],
-    skeleton: false
-  }
+    validItemsPerPage: () => [
+      20,
+      50,
+      100,
+      200,
+    ],
+    skeleton: false,
+  },
 );
 
 const route = useRoute();
 const router = useRouter();
-const itemsPerPageOptions = computed(() =>
-  props.validItemsPerPage.map(item => ({
-    label: `${item}`,
-    value: item
-  }) as SelectOption)
-);
+const itemsPerPageOptions = computed(() => props.validItemsPerPage.map(item => ({
+  label: `${item}`,
+  value: item,
+}) as SelectOption));
 const page = computed(() => {
   const _page = route.query[props.pageQuery] >= 1 ? Number.parseInt(route.query[props.pageQuery]) : 1;
 
@@ -54,19 +66,21 @@ const itemsPerPage = computed({
       props.validItemsPerPage[0];
   },
   set(val) {
-    const query = {...route.query};
+    const query = {
+      ...route.query,
+    };
     query[props.itemsPerPageQuery] = `${val}`;
     delete query[props.pageQuery];
 
     (async () => {
       await router.push({
         ...route,
-        query
+        query,
       });
 
       emit('changeItemsPerPage', val);
     })();
-  }
+  },
 });
 const fromItems = computed(() => (itemsPerPage.value * (page.value - 1)) + 1);
 const toItems = computed(() => {

package/dist/components/crud/__stories/AntCrud.stories.mjs

@@ -1,21 +1,33 @@
-import { computed, ref, watch } from "vue";
+import {
+  computed,
+  ref,
+  watch
+} from "vue";
 import AntTabs from "../../tabs/AntTabs.vue";
 import AntCrud from "../AntCrud.vue";
 import AntCrudTableNav from "../AntCrudTableNav.vue";
 import AntTable from "../../table/AntTable.vue";
 import AntCrudTableFilter from "../AntCrudTableFilter.vue";
 import AntCrudDetail from "../AntCrudDetail.vue";
-import { AntTableRowTypes } from "../../table/__types/TableHeader.types.mjs";
-import { vueRouter } from "storybook-vue3-router";
+import {
+  AntTableRowTypes
+} from "../../table/__types/TableHeader.types.mjs";
+import {
+  vueRouter
+} from "storybook-vue3-router";
 const meta = {
   title: "Crud/Crud",
   component: AntCrud,
   parameters: {
-    controls: { sort: "requiredFirst" },
+    controls: {
+      sort: "requiredFirst"
+    },
     fullscreen: true
   },
   decorators: [
-    () => ({ template: '<div class="dashed h-80"><story/></div>' }),
+    () => ({
+      template: '<div class="dashed h-80"><story/></div>'
+    }),
     vueRouter()
   ],
   argTypes: {}

package/dist/components/crud/__stories/AntCrudDetail.stories.mjs

@@ -1,13 +1,21 @@
 import AntCrudDetail from "../AntCrudDetail.vue";
 import AntCrudDetailNav from "../AntCrudDetailNav.vue";
 import AntCrudDetailActions from "../AntCrudDetailActions.vue";
-import { vueRouter } from "storybook-vue3-router";
+import {
+  vueRouter
+} from "storybook-vue3-router";
 const meta = {
   title: "Crud/Crud Detail",
   component: AntCrudDetail,
-  parameters: { controls: { sort: "requiredFirst" } },
+  parameters: {
+    controls: {
+      sort: "requiredFirst"
+    }
+  },
   decorators: [
-    () => ({ template: '<div class="dashed h-80"><story/></div>' }),
+    () => ({
+      template: '<div class="dashed h-80"><story/></div>'
+    }),
     vueRouter()
   ],
   argTypes: {}

package/dist/components/crud/__stories/AntCrudDetailActions.stories.mjs

@@ -3,8 +3,16 @@ import AntCrudDetailActions from "../AntCrudDetailActions.vue";
 const meta = {
   title: "Crud/Crud Detail Actions",
   component: AntCrudDetailActions,
-  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/crud/__stories/AntCrudDetailNav.stories.mjs

@@ -1,12 +1,20 @@
 import AntTabs from "../../tabs/AntTabs.vue";
 import AntCrudDetailNav from "../AntCrudDetailNav.vue";
-import { vueRouter } from "storybook-vue3-router";
+import {
+  vueRouter
+} from "storybook-vue3-router";
 const meta = {
   title: "Crud/Crud Detail Nav",
   component: AntCrudDetailNav,
-  parameters: { controls: { sort: "requiredFirst" } },
+  parameters: {
+    controls: {
+      sort: "requiredFirst"
+    }
+  },
   decorators: [
-    () => ({ template: '<div class="dashed"><story/></div>' }),
+    () => ({
+      template: '<div class="dashed"><story/></div>'
+    }),
     vueRouter()
   ],
   argTypes: {}

package/dist/components/crud/__stories/AntCrudTableFilter.stories.mjs

@@ -1,18 +1,30 @@
 import AntCrudTableFilter from "../AntCrudTableFilter.vue";
-import { vueRouter } from "storybook-vue3-router";
+import {
+  vueRouter
+} from "storybook-vue3-router";
 const meta = {
   title: "Crud/Crud Table Filter",
   component: AntCrudTableFilter,
-  parameters: { controls: { sort: "requiredFirst" } },
+  parameters: {
+    controls: {
+      sort: "requiredFirst"
+    }
+  },
   argTypes: {},
-  decorators: [vueRouter()]
+  decorators: [
+    vueRouter()
+  ]
 };
 export default meta;
 export const Docs = {
   render: (args) => ({
-    components: { AntCrudTableFilter },
+    components: {
+      AntCrudTableFilter
+    },
     setup() {
-      return { args };
+      return {
+        args
+      };
     },
     template: `
       <div class="border border-base-300 border-dashed">

package/dist/components/crud/__stories/AntCrudTableNav.stories.mjs

@@ -1,22 +1,34 @@
 import AntCrudTableNav from "../AntCrudTableNav.vue";
-import { vueRouter } from "storybook-vue3-router";
+import {
+  vueRouter
+} from "storybook-vue3-router";
 const meta = {
   title: "Crud/Crud Table Nav",
   component: AntCrudTableNav,
-  parameters: { controls: { sort: "requiredFirst" } },
+  parameters: {
+    controls: {
+      sort: "requiredFirst"
+    }
+  },
   argTypes: {
     pageQuery: {
       description: "Which query parameter should be used, for writing the current page into it."
     }
   },
-  decorators: [vueRouter()]
+  decorators: [
+    vueRouter()
+  ]
 };
 export default meta;
 export const Docs = {
   render: (args) => ({
-    components: { AntCrudTableNav },
+    components: {
+      AntCrudTableNav
+    },
     setup() {
-      return { args };
+      return {
+        args
+      };
     },
     template: `
       <div class="dashed">
@@ -30,9 +42,13 @@ export const Docs = {
 };
 export const fullWidth = {
   render: (args) => ({
-    components: { AntCrudTableNav },
+    components: {
+      AntCrudTableNav
+    },
     setup() {
-      return { args };
+      return {
+        args
+      };
     },
     template: `
       <div class="p-4 flex gap-4">

package/dist/components/dialogs/AntDeleteDialog.vue

@@ -1,12 +1,20 @@
 <script setup lang="ts">
-import {InputState} from '../../enums';
+import {
+  InputState,
+} from '../../enums';
 import AntDialog from './AntDialog.vue';
-import {useVModel} from '@vueuse/core';
+import {
+  useVModel,
+} from '@vueuse/core';
 
-const emit = defineEmits(['update:open', 'close', 'confirm']);
+const emit = defineEmits([
+  'update:open',
+  'close',
+  'confirm',
+]);
 const props = defineProps<{
-  open: boolean,
-  entity: string
+  open: boolean;
+  entity: string;
 }>();
 
 const _open = useVModel(props, 'open', emit);

package/dist/components/dialogs/AntDialog.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
 // TODO:: remove ts ignore
 // @ts-nocheck
-import {computed, ref, watch} from 'vue';
+import {
+  computed, ref, watch,
+} from 'vue';
 import AntButton from '../buttons/AntButton.vue';
 import AntIcon from '../AntIcon.vue';
 import {
@@ -11,17 +13,25 @@ import {
   faInfoCircle,
   type IconDefinition,
 } from '@fortawesome/free-solid-svg-icons';
-import {State, InputState} from '../../enums';
-import {IconSize} from '../__types';
-
-const emit = defineEmits(['update:open', 'close', 'confirm']);
+import {
+  State, InputState,
+} from '../../enums';
+import {
+  IconSize,
+} from '../__types';
+
+const emit = defineEmits([
+  'update:open',
+  'close',
+  'confirm',
+]);
 const props = withDefaults(defineProps<{
-  title?: string,
-  open: boolean,
-  confirmText?: string,
-  cancelText?: string,
-  showCancel?: boolean,
-  state?: InputState
+  title?: string;
+  open: boolean;
+  confirmText?: string;
+  cancelText?: string;
+  showCancel?: boolean;
+  state?: InputState;
 }>(), {
   state: InputState.base,
   confirmText: 'Confirm',
@@ -84,7 +94,7 @@ function confirmDialog() {
   <Transition name="fade">
     <div
       v-if="openBackground"
-      class="absolute inset-0 flex items-center justify-center z-50 cursor-pointer overflow-hidden bg-black/50 backdrop-blur-sm"
+      class="absolute inset-0 flex items-center justify-center z-50 cursor-pointer overflow-hidden bg-black/50 backdrop-blur-xs"
       data-e2e="dialog"
       @click.self="closeDialog"
     >
@@ -113,7 +123,7 @@ function confirmDialog() {
               />
             </slot>
 
-            <slot/>
+            <slot />
           </div>
 
           <div

package/dist/components/dialogs/__stories/AndDeleteDialog.stories.mjs

@@ -3,15 +3,24 @@ import AntButton from "../../buttons/AntButton.vue";
 const meta = {
   title: "Components/Dialogs/Delete Dialog",
   component: AntDeleteDialog,
-  parameters: { controls: { sort: "requiredFirst" } },
+  parameters: {
+    controls: {
+      sort: "requiredFirst"
+    }
+  },
   argTypes: {}
 };
 export default meta;
 export const Docs = {
   render: (args) => ({
-    components: { AntDeleteDialog, AntButton },
+    components: {
+      AntDeleteDialog,
+      AntButton
+    },
     setup() {
-      return { args };
+      return {
+        args
+      };
     },
     template: `
     <div class="h-96">

package/dist/components/dialogs/__stories/AntDialog.stories.mjs

@@ -1,28 +1,49 @@
 import AntDialog from "../AntDialog.vue";
 import AntButton from "../../buttons/AntButton.vue";
-import { InputState } from "../../../enums/index.mjs";
+import {
+  InputState
+} from "../../../enums/index.mjs";
 const meta = {
   title: "Components/Dialogs/Dialog",
   component: AntDialog,
-  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: {
     state: {
-      control: { type: "select" },
+      control: {
+        type: "select"
+      },
       options: Object.values(InputState)
     },
     title: {
       control: "text",
-      table: { type: { summary: "string|null" } }
+      table: {
+        type: {
+          summary: "string|null"
+        }
+      }
     }
   }
 };
 export default meta;
 export const Docs = {
   render: (args) => ({
-    components: { AntDialog, AntButton },
+    components: {
+      AntDialog,
+      AntButton
+    },
     setup() {
-      return { args };
+      return {
+        args
+      };
     },
     template: `
       <div

package/dist/components/forms/AntField.vue

@@ -1,13 +1,24 @@
 <script lang="ts" setup>
-import {onMounted, computed} from 'vue';
-import {Size} from '../../enums/Size.enum';
+import {
+  onMounted, computed,
+} from 'vue';
+import {
+  Size,
+} from '../../enums/Size.enum';
 import AntInputLabel from '../inputs/Elements/AntInputLabel.vue';
 import AntInputDescription from '../inputs/Elements/AntInputDescription.vue';
-import {handleEnumValidation} from '../../handler';
+import {
+  handleEnumValidation,
+} from '../../handler';
 import AntInputLimiter from '../inputs/Elements/AntInputLimiter.vue';
-import {InputState} from '../../enums';
+import {
+  InputState,
+} from '../../enums';
 
-defineEmits(['clickLabel', 'validate']);
+defineEmits([
+  'clickLabel',
+  'validate',
+]);
 
 const props = withDefaults(defineProps<{
   label?: string;
@@ -74,7 +85,7 @@ const descriptionClasses = computed(() => ({
       @click-content="$emit('clickLabel')"
     >
       <div class="w-full h-full">
-        <slot/>
+        <slot />
       </div>
     </AntInputLabel>
 
@@ -114,7 +125,7 @@ const descriptionClasses = computed(() => ({
 
       <div
         v-if="limiterMaxValue !== undefined && limiterValue !== undefined"
-        class="flex flex-grow justify-end"
+        class="flex grow justify-end"
       >
         <AntInputLimiter
           :value="limiterValue"

package/dist/components/forms/AntFormGroup.vue

@@ -1,6 +1,10 @@
 <script lang="ts" setup>
-import {Direction} from '../../enums/Direction.enum';
-import {computed, useAttrs} from 'vue';
+import {
+  Direction,
+} from '../../enums/Direction.enum';
+import {
+  computed, useAttrs,
+} from 'vue';
 
 const attrs = useAttrs();
 const props = withDefaults(defineProps<{
@@ -11,7 +15,7 @@ const props = withDefaults(defineProps<{
 
 const classes = computed(() => {
   // Let override gap-x-* and gap-y-* classes from outside
-  const attrClasses = typeof attrs.class === 'string' ? attrs.class : ''
+  const attrClasses = typeof attrs.class === 'string' ? attrs.class : '';
   const hasGapX = /gap-x-\d/.test(attrClasses);
   const hasGapY = /gap-y-\d/.test(attrClasses);
 
@@ -20,7 +24,7 @@ const classes = computed(() => {
     'gap-y-2.5': !hasGapY && props.direction === Direction.column,
     'flex-row': props.direction === Direction.row,
     'gap-x-2.5': !hasGapX && props.direction === Direction.row,
-  }
+  };
 
   return classes;
 });
@@ -31,6 +35,6 @@ const classes = computed(() => {
     class="flex"
     :class="classes"
   >
-    <slot/>
+    <slot />
   </section>
 </template>

package/dist/components/forms/AntFormGroupLabel.vue

@@ -1,5 +1,5 @@
 <template>
   <div class="text-primary-500 text-xl font-medium">
-    <slot/>
+    <slot />
   </div>
 </template>