@antify/ui 2.2.0 → 2.2.3

package/dist/components/__stories/AntTooltip.stories.mjs

@@ -1,17 +1,31 @@
 import AntTooltip from "../AntTooltip.vue";
-import { InputState } from "../../enums/index.mjs";
+import {
+  InputState
+} from "../../enums/index.mjs";
 import AntButton from "../buttons/AntButton.vue";
-import { onMounted, ref } from "vue";
-import { expect, userEvent, waitFor, within } from "@storybook/test";
+import {
+  onMounted,
+  ref
+} from "vue";
+import {
+  expect,
+  userEvent,
+  waitFor,
+  within
+} from "@storybook/test";
 const meta = {
   title: "Components/Tooltip",
   component: AntTooltip,
   parameters: {
-    controls: { sort: "requiredFirst" }
+    controls: {
+      sort: "requiredFirst"
+    }
   },
   argTypes: {
     state: {
-      control: { type: "select" },
+      control: {
+        type: "select"
+      },
       options: Object.values(InputState)
     }
   }
@@ -19,7 +33,10 @@ const meta = {
 export default meta;
 export const Docs = {
   render: (args) => ({
-    components: { AntTooltip, AntButton },
+    components: {
+      AntTooltip,
+      AntButton
+    },
     setup() {
       const scrollContainer = ref(void 0);
       onMounted(() => {
@@ -28,11 +45,14 @@ export const Docs = {
           scrollContainer.value.scrollTop = (scrollContainer.value.scrollHeight - scrollContainer.value.clientHeight) / 2;
         }
       });
-      return { args, scrollContainer };
+      return {
+        args,
+        scrollContainer
+      };
     },
     template: `
       <div ref="scrollContainer" class="dashed  h-[50vh] w-[50vw] overflow-scroll">
-        <div class="flex flex-grow justify-center items-center h-screen w-[1000px]">
+        <div class="flex grow justify-center items-center h-screen w-[1000px]">
           <AntTooltip v-bind="args">
             <AntButton>Hover me</AntButton>
 
@@ -46,7 +66,10 @@ export const Docs = {
       </div>
     `
   }),
-  play: async ({ canvasElement, step }) => {
+  play: async ({
+    canvasElement,
+    step
+  }) => {
     const canvas = within(canvasElement);
     const target = canvas.getByText("Hover me");
     function queryTooltip() {
@@ -54,21 +77,29 @@ export const Docs = {
     }
     await step("Hover over the target and expect showing the tooltip", async () => {
       await userEvent.hover(target);
-      await waitFor(() => expect(queryTooltip()).toBeInTheDocument(), { timeout: 600 });
+      await waitFor(() => expect(queryTooltip()).toBeInTheDocument(), {
+        timeout: 600
+      });
     });
     await step("Leave hover state and expect not showing the tooltip anymore", async () => {
       await userEvent.unhover(target);
-      await waitFor(() => expect(queryTooltip()).not.toBeInTheDocument(), { timeout: 600 });
+      await waitFor(() => expect(queryTooltip()).not.toBeInTheDocument(), {
+        timeout: 600
+      });
     });
     await step("Hover over the target, wait until the tooltip is visible, click the target and expect not showing the tooltip", async () => {
       await userEvent.hover(target);
-      await waitFor(() => expect(queryTooltip()).toBeInTheDocument(), { timeout: 600 });
+      await waitFor(() => expect(queryTooltip()).toBeInTheDocument(), {
+        timeout: 600
+      });
       await userEvent.click(target);
       await expect(queryTooltip()).not.toBeInTheDocument();
     });
     await step("Hover over the target, click it while delay and expect not showing the tooltip", async () => {
       await userEvent.hover(target);
-      await waitFor(() => expect(queryTooltip()).not.toBeInTheDocument(), { timeout: 200 });
+      await waitFor(() => expect(queryTooltip()).not.toBeInTheDocument(), {
+        timeout: 200
+      });
       await userEvent.click(target);
       await expect(queryTooltip()).not.toBeInTheDocument();
     });

package/dist/components/buttons/AntActionButton.vue

@@ -3,36 +3,45 @@
  * This button is used for everything what is the primary
  * action like save, confirm, create, etc.
  */
-import {Position, State, InputState, Size, Grouped} from '../../enums';
+import {
+  Position, State, InputState, Size, Grouped,
+} from '../../enums';
 import AntButton from './AntButton.vue';
-import type {IconDefinition} from '@fortawesome/free-solid-svg-icons';
-import {computed, useSlots} from 'vue';
-import {hasSlotContent} from '../../utils';
+import type {
+  IconDefinition,
+} from '@fortawesome/free-solid-svg-icons';
+import {
+  computed, useSlots,
+} from 'vue';
+import {
+  hasSlotContent,
+} from '../../utils';
 
-defineEmits(['click', 'blur']);
-const props = withDefaults(
-  defineProps<{
-    iconLeft?: IconDefinition;
-    iconRight?: IconDefinition;
-    size?: Size;
-    disabled?: boolean;
-    grouped?: Grouped;
-    state?: State;
-    skeleton?: boolean;
-    expanded?: boolean;
-    filled?: boolean;
-    hasPermission?: boolean;
-    tooltipPosition?: Position;
-    tooltipState?: InputState;
-    tooltipDelay?: number;
-    submit?: boolean;
-  }>(), {
-    state: State.primary,
-    hasPermission: true,
-    filled: true,
-    submit: false
-  }
-);
+defineEmits([
+  'click',
+  'blur',
+]);
+const props = withDefaults(defineProps<{
+  iconLeft?: IconDefinition;
+  iconRight?: IconDefinition;
+  size?: Size;
+  disabled?: boolean;
+  grouped?: Grouped;
+  state?: State;
+  skeleton?: boolean;
+  expanded?: boolean;
+  filled?: boolean;
+  hasPermission?: boolean;
+  tooltipPosition?: Position;
+  tooltipState?: InputState;
+  tooltipDelay?: number;
+  submit?: boolean;
+}>(), {
+  state: State.primary,
+  hasPermission: true,
+  filled: true,
+  submit: false,
+});
 const slots = useSlots();
 const hasTooltip = computed(() => !props.skeleton && !props.disabled && props.hasPermission && hasSlotContent(slots['tooltipContent']));
 const hasPermissionTooltip = computed(() => !props.skeleton && !props.disabled && !props.hasPermission && hasSlotContent(slots['invalidPermissionTooltipContent']));
@@ -57,7 +66,7 @@ const hasPermissionTooltip = computed(() => !props.skeleton && !props.disabled &
     @click="$emit('click')"
     @blur="$emit('blur')"
   >
-    <slot/>
+    <slot />
 
     <template #tooltip-content>
       <slot

package/dist/components/buttons/AntButton.vue

@@ -1,19 +1,40 @@
 <script lang="ts" setup>
-import {type IconDefinition} from '@fortawesome/free-solid-svg-icons';
-import {computed, onMounted} from 'vue';
-import {type RouteLocationRaw} from 'vue-router';
+import {
+  type IconDefinition,
+} from '@fortawesome/free-solid-svg-icons';
+import {
+  computed, onMounted,
+} from 'vue';
+import {
+  type RouteLocationRaw,
+} from 'vue-router';
 import AntSkeleton from '../AntSkeleton.vue';
 import AntSpinner from '../AntSpinner.vue';
-import {Grouped} from '../../enums/Grouped.enum';
-import {Size} from '../../enums/Size.enum';
-import {handleEnumValidation} from '../../handler';
-import {State, InputState, Position} from '../../enums';
-import {ButtonType} from './__types';
+import {
+  Grouped,
+} from '../../enums/Grouped.enum';
+import {
+  Size,
+} from '../../enums/Size.enum';
+import {
+  handleEnumValidation,
+} from '../../handler';
+import {
+  State, InputState, Position,
+} from '../../enums';
+import {
+  ButtonType,
+} from './__types';
 import AntIcon from '../AntIcon.vue';
 import AntTooltip from '../AntTooltip.vue';
-import {IconSize} from '../__types/AntIcon.types';
+import {
+  IconSize,
+} from '../__types/AntIcon.types';
 
-defineEmits(['click', 'blur']);
+defineEmits([
+  'click',
+  'blur',
+]);
 
 const props = withDefaults(defineProps<{
   filled?: boolean;
@@ -49,7 +70,7 @@ const props = withDefaults(defineProps<{
   noFocus: false,
   tooltipPosition: Position.bottom,
   tooltipState: InputState.base,
-  tooltipDelay: 800
+  tooltipDelay: 800,
 });
 
 const hasInputState = computed(() => props.skeleton || props.readonly || props.disabled);
@@ -119,7 +140,7 @@ const classes = computed(() => {
     'focus:ring-2': !props.readonly && props.size === Size.sm || props.size === Size.xs || props.size === Size.xs2,
     'focus:ring-4': !props.readonly && props.size === Size.md || props.size === Size.lg,
     'w-full': props.expanded,
-    'invisible': props.skeleton,
+    invisible: props.skeleton,
     'outline outline-1 outline-offset-[-1px]': props.outlined,
     ...groupedClassList.value,
     [variants[props.state]]: true,
@@ -246,7 +267,7 @@ onMounted(() => {
       </component>
 
       <template #content>
-        <slot name="tooltip-content"/>
+        <slot name="tooltip-content" />
       </template>
     </AntTooltip>
   </div>

package/dist/components/buttons/AntCreateButton.vue

@@ -1,9 +1,16 @@
 <script lang="ts" setup>
 import AntActionButton from './AntActionButton.vue';
-import {Position, Size, Grouped, State} from '../../enums';
-import {faPlus} from '@fortawesome/free-solid-svg-icons';
+import {
+  Position, Size, Grouped, State,
+} from '../../enums';
+import {
+  faPlus,
+} from '@fortawesome/free-solid-svg-icons';
 
-defineEmits(['click', 'blur']);
+defineEmits([
+  'click',
+  'blur',
+]);
 withDefaults(defineProps<{
   iconVariant?: boolean;
   size?: Size;
@@ -15,7 +22,7 @@ withDefaults(defineProps<{
   tooltipPosition?: Position;
 }>(), {
   iconVariant: false,
-  canCreate: true
+  canCreate: true,
 });
 </script>
 

package/dist/components/buttons/AntDeleteButton.vue

@@ -1,9 +1,16 @@
 <script lang="ts" setup>
 import AntActionButton from './AntActionButton.vue';
-import {Position, Size, Grouped, State} from '../../enums';
-import {faTrash} from '@fortawesome/free-solid-svg-icons';
+import {
+  Position, Size, Grouped, State,
+} from '../../enums';
+import {
+  faTrash,
+} from '@fortawesome/free-solid-svg-icons';
 
-defineEmits(['click', 'blur']);
+defineEmits([
+  'click',
+  'blur',
+]);
 withDefaults(defineProps<{
   iconVariant?: boolean;
   size?: Size;
@@ -15,7 +22,7 @@ withDefaults(defineProps<{
   tooltipPosition?: Position;
 }>(), {
   iconVariant: false,
-  canDelete: true
+  canDelete: true,
 });
 </script>
 

package/dist/components/buttons/AntDuplicateButton.vue

@@ -1,9 +1,16 @@
 <script lang="ts" setup>
 import AntActionButton from './AntActionButton.vue';
-import {Position, Size, Grouped, State} from '../../enums';
-import {faCopy} from '@fortawesome/free-solid-svg-icons';
+import {
+  Position, Size, Grouped, State,
+} from '../../enums';
+import {
+  faCopy,
+} from '@fortawesome/free-solid-svg-icons';
 
-defineEmits(['click', 'blur']);
+defineEmits([
+  'click',
+  'blur',
+]);
 withDefaults(defineProps<{
   iconVariant?: boolean;
   size?: Size;
@@ -15,7 +22,7 @@ withDefaults(defineProps<{
   tooltipPosition?: Position;
 }>(), {
   iconVariant: false,
-  canDuplicate: true
+  canDuplicate: true,
 });
 </script>
 

package/dist/components/buttons/AntEditButton.vue

@@ -1,9 +1,16 @@
 <script lang="ts" setup>
 import AntActionButton from './AntActionButton.vue';
-import {Position, Size, Grouped, State} from '../../enums';
-import {faPencil} from '@fortawesome/free-solid-svg-icons';
+import {
+  Position, Size, Grouped, State,
+} from '../../enums';
+import {
+  faPencil,
+} from '@fortawesome/free-solid-svg-icons';
 
-defineEmits(['click', 'blur']);
+defineEmits([
+  'click',
+  'blur',
+]);
 withDefaults(defineProps<{
   iconVariant?: boolean;
   size?: Size;
@@ -15,7 +22,7 @@ withDefaults(defineProps<{
   tooltipPosition?: Position;
 }>(), {
   iconVariant: false,
-  canEdit: true
+  canEdit: true,
 });
 </script>
 

package/dist/components/buttons/AntSaveAndNewButton.vue

@@ -1,9 +1,16 @@
 <script lang="ts" setup>
 import AntActionButton from './AntActionButton.vue';
-import {Position, Size, Grouped, State} from '../../enums';
-import {faFloppyDisk, faPlus} from '@fortawesome/free-solid-svg-icons';
+import {
+  Position, Size, Grouped, State,
+} from '../../enums';
+import {
+  faFloppyDisk, faPlus,
+} from '@fortawesome/free-solid-svg-icons';
 
-defineEmits(['click', 'blur']);
+defineEmits([
+  'click',
+  'blur',
+]);
 withDefaults(defineProps<{
   iconVariant?: boolean;
   size?: Size;
@@ -15,7 +22,7 @@ withDefaults(defineProps<{
   tooltipPosition?: Position;
 }>(), {
   iconVariant: false,
-  canSave: true
+  canSave: true,
 });
 </script>
 

package/dist/components/buttons/AntSaveButton.vue

@@ -1,9 +1,16 @@
 <script lang="ts" setup>
 import AntActionButton from './AntActionButton.vue';
-import {Position, Size, Grouped, State} from '../../enums';
-import {faFloppyDisk} from '@fortawesome/free-solid-svg-icons';
+import {
+  Position, Size, Grouped, State,
+} from '../../enums';
+import {
+  faFloppyDisk,
+} from '@fortawesome/free-solid-svg-icons';
 
-defineEmits(['click', 'blur']);
+defineEmits([
+  'click',
+  'blur',
+]);
 withDefaults(defineProps<{
   iconVariant?: boolean;
   size?: Size;
@@ -15,7 +22,7 @@ withDefaults(defineProps<{
   tooltipPosition?: Position;
 }>(), {
   iconVariant: false,
-  canSave: true
+  canSave: true,
 });
 </script>
 

package/dist/components/buttons/__stories/AntActionButton.stories.mjs

@@ -1,29 +1,50 @@
 import AntActionButton from "../AntActionButton.vue";
-import { Grouped as _Grouped } from "../../../enums/Grouped.enum.mjs";
-import { State, InputState, Position, Size } from "../../../enums/index.mjs";
+import {
+  Grouped as _Grouped
+} from "../../../enums/Grouped.enum.mjs";
+import {
+  State,
+  InputState,
+  Position,
+  Size
+} from "../../../enums/index.mjs";
 const meta = {
   title: "Components/Buttons/Action Button",
   component: AntActionButton,
-  parameters: { controls: { sort: "requiredFirst" } },
+  parameters: {
+    controls: {
+      sort: "requiredFirst"
+    }
+  },
   argTypes: {
     state: {
-      control: { type: "select" },
+      control: {
+        type: "select"
+      },
       options: Object.values(State)
     },
     size: {
-      control: { type: "select" },
+      control: {
+        type: "select"
+      },
       options: Object.values(Size)
     },
     grouped: {
-      control: { type: "select" },
+      control: {
+        type: "select"
+      },
       options: Object.values(_Grouped)
     },
     tooltipPosition: {
-      control: { type: "select" },
+      control: {
+        type: "select"
+      },
       options: Object.values(Position)
     },
     tooltipState: {
-      control: { type: "select" },
+      control: {
+        type: "select"
+      },
       options: Object.values(InputState)
     },
     submit: {
@@ -34,9 +55,13 @@ const meta = {
 export default meta;
 export const Docs = {
   render: (args) => ({
-    components: { AntActionButton },
+    components: {
+      AntActionButton
+    },
     setup() {
-      return { args };
+      return {
+        args
+      };
     },
     template: `
       <AntActionButton v-bind="args">