@antify/ui-module 1.5.0 → 1.5.1

package/dist/runtime/components/buttons/AntDuplicateButton.vue

@@ -1,42 +1,54 @@
 <script lang="ts" setup>
-import {Grouped} from '../../enums/Grouped.enum';
-import {Size} from '../../enums/Size.enum';
 import AntActionButton from './AntActionButton.vue';
-import {ColorType, Position} from '../../enums';
+import {Position, Size, Grouped, ColorType} from '../../enums';
 import {faCopy} from '@fortawesome/free-solid-svg-icons';
 
 defineEmits(['click', 'blur']);
 withDefaults(defineProps<{
+	iconVariant?: boolean;
 	size?: Size;
 	disabled?: boolean;
 	grouped?: Grouped;
 	skeleton?: boolean;
 	expanded?: boolean;
 	canDuplicate?: boolean;
-	invalidPermissionTooltipPosition?: Position;
+	tooltipPosition?: Position;
 }>(), {
+	iconVariant: false,
 	canDuplicate: true
 });
 </script>
 
 <template>
   <AntActionButton
-    :icon-left="faCopy"
+    :filled="false"
     :color-type="ColorType.base"
     :size="size"
     :disabled="disabled"
+    :icon-left="iconVariant ? faCopy : undefined"
     :grouped="grouped"
     :skeleton="skeleton"
     :expanded="expanded"
     :has-permission="canDuplicate"
-    :invalid-permission-tooltip-position="invalidPermissionTooltipPosition"
-    data-e2e="create-button"
+    :tooltip-position="tooltipPosition"
+    data-e2e="duplicate-button"
     @click="$emit('click')"
     @blur="$emit('blur')"
   >
+    <template
+      v-if="!iconVariant"
+      #default
+    >
+      Duplicate
+    </template>
+
     <template #invalidPermissionTooltipContent>
       You have no permission to duplicate entries.<br>
       Please contact your administrator.
     </template>
+
+    <template #tooltipContent>
+      Duplicate entry
+    </template>
   </AntActionButton>
 </template>

package/dist/runtime/components/buttons/AntEditButton.vue

@@ -0,0 +1,54 @@
+<script lang="ts" setup>
+import AntActionButton from './AntActionButton.vue';
+import {Position, Size, Grouped, ColorType} from '../../enums';
+import {faPencil} from '@fortawesome/free-solid-svg-icons';
+
+defineEmits(['click', 'blur']);
+withDefaults(defineProps<{
+	iconVariant?: boolean;
+	size?: Size;
+	disabled?: boolean;
+	grouped?: Grouped;
+	skeleton?: boolean;
+	expanded?: boolean;
+	canEdit?: boolean;
+	tooltipPosition?: Position;
+}>(), {
+	iconVariant: false,
+	canEdit: true
+});
+</script>
+
+<template>
+  <AntActionButton
+    :filled="false"
+    :color-type="ColorType.base"
+    :size="size"
+    :disabled="disabled"
+    :icon-left="iconVariant ? faPencil : undefined"
+    :grouped="grouped"
+    :skeleton="skeleton"
+    :expanded="expanded"
+    :has-permission="canEdit"
+    :tooltip-position="tooltipPosition"
+    data-e2e="edit-button"
+    @click="$emit('click')"
+    @blur="$emit('blur')"
+  >
+    <template
+      v-if="!iconVariant"
+      #default
+    >
+      Edit
+    </template>
+
+    <template #invalidPermissionTooltipContent>
+      You have no permission to edit entries.<br>
+      Please contact your administrator.
+    </template>
+
+    <template #tooltipContent>
+      Edit entry
+    </template>
+  </AntActionButton>
+</template>

package/dist/runtime/components/buttons/AntSaveAndNewButton.vue

@@ -1,42 +1,55 @@
 <script lang="ts" setup>
-import {Grouped} from '../../enums/Grouped.enum';
-import {Size} from '../../enums/Size.enum';
 import AntActionButton from './AntActionButton.vue';
-import {Position} from '../../enums';
+import {Position, Size, Grouped, ColorType} from '../../enums';
+import {faFloppyDisk, faPlus} from '@fortawesome/free-solid-svg-icons';
 
 defineEmits(['click', 'blur']);
 withDefaults(defineProps<{
+	iconVariant?: boolean;
 	size?: Size;
 	disabled?: boolean;
 	grouped?: Grouped;
 	skeleton?: boolean;
 	expanded?: boolean;
 	canSave?: boolean;
-	invalidPermissionTooltipPosition?: Position;
+	tooltipPosition?: Position;
 }>(), {
+	iconVariant: false,
 	canSave: true
 });
 </script>
 
 <template>
   <AntActionButton
+    :filled="false"
+    :color-type="ColorType.primary"
     :size="size"
     :disabled="disabled"
+    :icon-left="iconVariant ? faFloppyDisk : undefined"
+    :icon-right="iconVariant ? faPlus : undefined"
     :grouped="grouped"
     :skeleton="skeleton"
     :expanded="expanded"
-    :filled="false"
     :has-permission="canSave"
-    :invalid-permission-tooltip-position="invalidPermissionTooltipPosition"
+    :tooltip-position="tooltipPosition"
     data-e2e="save-and-new-button"
     @click="$emit('click')"
     @blur="$emit('blur')"
   >
-    <template #default>Save and new</template>
+    <template
+      v-if="!iconVariant"
+      #default
+    >
+      Save and new
+    </template>
 
     <template #invalidPermissionTooltipContent>
-      You have no permission to save this entry.<br>
+      You have no permission to save entries.<br>
       Please contact your administrator.
     </template>
+
+    <template #tooltipContent>
+      Save entry
+    </template>
   </AntActionButton>
 </template>

package/dist/runtime/components/buttons/AntSaveButton.vue

@@ -1,43 +1,54 @@
 <script lang="ts" setup>
-import {Grouped} from '../../enums/Grouped.enum';
-import {Size} from '../../enums/Size.enum';
-import {ColorType} from '../../enums/ColorType.enum';
 import AntActionButton from './AntActionButton.vue';
-import {Position} from '../../enums';
+import {Position, Size, Grouped, ColorType} from '../../enums';
+import {faFloppyDisk} from '@fortawesome/free-solid-svg-icons';
 
 defineEmits(['click', 'blur']);
 withDefaults(defineProps<{
+	iconVariant?: boolean;
 	size?: Size;
 	disabled?: boolean;
 	grouped?: Grouped;
 	skeleton?: boolean;
 	expanded?: boolean;
 	canSave?: boolean;
-	invalidPermissionTooltipPosition?: Position;
+	tooltipPosition?: Position;
 }>(), {
+	iconVariant: false,
 	canSave: true
 });
 </script>
 
 <template>
   <AntActionButton
+    :filled="true"
+    :color-type="ColorType.primary"
     :size="size"
     :disabled="disabled"
+    :icon-left="iconVariant ? faFloppyDisk : undefined"
     :grouped="grouped"
     :skeleton="skeleton"
     :expanded="expanded"
-    :color-type="ColorType.primary"
-    data-e2e="save-button"
     :has-permission="canSave"
-    :invalid-permission-tooltip-position="invalidPermissionTooltipPosition"
+    :tooltip-position="tooltipPosition"
+    data-e2e="save-button"
     @click="$emit('click')"
     @blur="$emit('blur')"
   >
-    <template #default>Save</template>
+    <template
+      v-if="!iconVariant"
+      #default
+    >
+      Save
+    </template>
 
     <template #invalidPermissionTooltipContent>
-      You have no permission to save this entry.<br>
+      You have no permission to save entries.<br>
       Please contact your administrator.
     </template>
+
+    <template #tooltipContent>
+      Save entry
+    </template>
   </AntActionButton>
 </template>

package/dist/runtime/components/buttons/__stories/AntActionButton.stories.d.ts

@@ -8,4 +8,4 @@ export declare const Disabled: Story;
 export declare const Grouped: Story;
 export declare const Skeleton: Story;
 export declare const Expanded: Story;
-export declare const WithPermissionTooltip: Story;
+export declare const WithoutPermission: Story;

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

@@ -1,12 +1,15 @@
 import AntActionButton from "../AntActionButton.vue";
-import { Size } from "../../../enums/Size.enum.mjs";
 import { Grouped as _Grouped } from "../../../enums/Grouped.enum.mjs";
-import { Position } from "../../../enums/Position.enum.mjs";
+import { ColorType, InputColorType, Position, Size } from "../../../enums/index.mjs";
 const meta = {
   title: "Components/Buttons/Action Button",
   component: AntActionButton,
   parameters: { controls: { sort: "requiredFirst" } },
   argTypes: {
+    colorType: {
+      control: { type: "select" },
+      options: Object.values(ColorType)
+    },
     size: {
       control: { type: "radio" },
       options: Object.values(Size)
@@ -15,9 +18,13 @@ const meta = {
       control: { type: "select" },
       options: Object.values(_Grouped)
     },
-    invalidPermissionTooltipPosition: {
+    tooltipPosition: {
       control: { type: "select" },
       options: Object.values(Position)
+    },
+    tooltipColorType: {
+      control: { type: "select" },
+      options: Object.values(InputColorType)
     }
   }
 };
@@ -28,10 +35,14 @@ export const Docs = {
     setup() {
       return { args };
     },
-    template: '<AntActionButton v-bind="args">Action Button</AntActionButton>'
+    template: `<AntActionButton v-bind="args">
+			<template #default>Action Button</template>
+			<template #tooltipContent>This is an action button</template>
+			<template #invalidPermissionTooltipContent>You have no permission <br>to click this button</template>
+		</AntActionButton>`
   }),
   args: {
-    invalidPermissionTooltipPosition: Position.right
+    tooltipPosition: Position.right
   }
 };
 export const Disabled = {
@@ -62,18 +73,8 @@ export const Expanded = {
     expanded: true
   }
 };
-export const WithPermissionTooltip = {
-  render: (args) => ({
-    components: { AntActionButton },
-    setup() {
-      return { args };
-    },
-    template: `<AntActionButton v-bind="args">
-			Action Button
-
-			<template #invalidPermissionTooltipContent>You have no permission to do this</template>
-		</AntActionButton>`
-  }),
+export const WithoutPermission = {
+  render: Docs.render,
   args: {
     ...Docs.args,
     hasPermission: false

package/dist/runtime/components/buttons/__stories/AntButton.stories.d.ts

@@ -12,4 +12,5 @@ export declare const Skeleton: Story;
 export declare const ReadOnly: Story;
 export declare const Expanded: Story;
 export declare const WithoutBorder: Story;
+export declare const WithTooltip: Story;
 export declare const Summary: Story;

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

@@ -4,7 +4,8 @@ import AntFormGroup from "../../form/AntFormGroup.vue";
 import { faCaretRight, faCaretLeft } from "@fortawesome/free-solid-svg-icons";
 import { Size } from "../../../enums/Size.enum.mjs";
 import { Grouped as _Grouped } from "../../../enums/Grouped.enum.mjs";
-import { ColorType } from "../../../enums/index.mjs";
+import { ColorType, InputColorType, Position } from "../../../enums/index.mjs";
+import { within } from "@storybook/test";
 const meta = {
   component: AntButton,
   title: "Components/Buttons/Button",
@@ -39,6 +40,16 @@ const meta = {
     },
     submit: {
       description: 'Change the button type to type="submit"'
+    },
+    tooltipPosition: {
+      control: { type: "select" },
+      options: Object.values(Position),
+      description: "The tooltips position. Tooltip is only shown if a tooltip-content slot is provided."
+    },
+    tooltipColorType: {
+      control: { type: "select" },
+      options: Object.values(InputColorType),
+      description: "The tooltips color type. Tooltip is only shown if a tooltip-content slot is provided."
     }
   }
 };
@@ -138,6 +149,29 @@ export const WithoutBorder = {
     outlined: false
   }
 };
+export const WithTooltip = {
+  render: (args) => ({
+    components: { AntButton },
+    setup() {
+      return { args };
+    },
+    template: `
+			<AntButton v-bind="args">
+				<template #default>Button</template>
+
+				<template #tooltip-content>This is a button</template>
+			</AntButton>`
+  }),
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+  },
+  args: {
+    tooltipDelay: 800
+  },
+  parameters: {
+    chromatic: { disableSnapshot: false }
+  }
+};
 export const Summary = {
   parameters: {
     chromatic: { disableSnapshot: false }
@@ -154,7 +188,7 @@ export const Summary = {
     template: `
 			<div class="flex flex-col gap-2.5">
 				<AntFormGroup>
-					<AntFormGroupLabel class="text-xl">
+					<AntFormGroupLabel>
 						Grouped | Filled | Outlined combinations
 					</AntFormGroupLabel>
 					<div class="flex">
@@ -256,8 +290,9 @@ export const Summary = {
 						</AntButton>
 					</div>
 				</AntFormGroup>
+
 				<AntFormGroup>
-					<AntFormGroupLabel class="text-xl">
+					<AntFormGroupLabel>
 						Size
 					</AntFormGroupLabel>
 					<AntFormGroup direction="row">

package/dist/runtime/components/buttons/__stories/AntCreateButton.stories.d.ts

@@ -4,6 +4,7 @@ declare const meta: Meta<typeof AntCreateButton>;
 export default meta;
 type Story = StoryObj<typeof AntCreateButton>;
 export declare const Docs: Story;
+export declare const IconVariant: Story;
 export declare const Disabled: Story;
 export declare const Grouped: Story;
 export declare const Skeleton: Story;

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

@@ -1,7 +1,5 @@
 import AntCreateButton from "../AntCreateButton.vue";
-import { Size } from "../../../enums/Size.enum.mjs";
-import { Grouped as _Grouped } from "../../../enums/Grouped.enum.mjs";
-import { Position } from "../../../enums/index.mjs";
+import { Position, Grouped as _Grouped, Size } from "../../../enums/index.mjs";
 const meta = {
   title: "Components/Buttons/Create Button",
   component: AntCreateButton,
@@ -14,6 +12,10 @@ const meta = {
     grouped: {
       control: { type: "select" },
       options: Object.values(_Grouped)
+    },
+    tooltipPosition: {
+      control: { type: "select" },
+      options: Object.values(Position)
     }
   }
 };
@@ -27,7 +29,14 @@ export const Docs = {
     template: '<AntCreateButton v-bind="args"/>'
   }),
   args: {
-    invalidPermissionTooltipPosition: Position.right
+    tooltipPosition: Position.right
+  }
+};
+export const IconVariant = {
+  render: Docs.render,
+  args: {
+    ...Docs.args,
+    iconVariant: true
   }
 };
 export const Disabled = {

package/dist/runtime/components/buttons/__stories/AntDeleteButton.stories.d.ts

@@ -4,9 +4,9 @@ declare const meta: Meta<typeof AntDeleteButton>;
 export default meta;
 type Story = StoryObj<typeof AntDeleteButton>;
 export declare const Docs: Story;
+export declare const IconVariant: Story;
 export declare const Disabled: Story;
 export declare const Grouped: Story;
 export declare const Skeleton: Story;
 export declare const Expanded: Story;
-export declare const IconVariant: Story;
 export declare const InvalidPermission: Story;

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

@@ -1,7 +1,5 @@
 import AntDeleteButton from "../AntDeleteButton.vue";
-import { Size } from "../../../enums/Size.enum.mjs";
-import { Grouped as _Grouped } from "../../../enums/Grouped.enum.mjs";
-import { Position } from "../../../enums/index.mjs";
+import { Position, Grouped as _Grouped, Size } from "../../../enums/index.mjs";
 const meta = {
   title: "Components/Buttons/Delete Button",
   component: AntDeleteButton,
@@ -14,6 +12,10 @@ const meta = {
     grouped: {
       control: { type: "select" },
       options: Object.values(_Grouped)
+    },
+    tooltipPosition: {
+      control: { type: "select" },
+      options: Object.values(Position)
     }
   }
 };
@@ -27,7 +29,14 @@ export const Docs = {
     template: '<AntDeleteButton v-bind="args"/>'
   }),
   args: {
-    invalidPermissionTooltipPosition: Position.right
+    tooltipPosition: Position.right
+  }
+};
+export const IconVariant = {
+  render: Docs.render,
+  args: {
+    ...Docs.args,
+    iconVariant: true
   }
 };
 export const Disabled = {
@@ -58,13 +67,6 @@ export const Expanded = {
     expanded: true
   }
 };
-export const IconVariant = {
-  render: Docs.render,
-  args: {
-    ...Docs.args,
-    iconVariant: true
-  }
-};
 export const InvalidPermission = {
   render: Docs.render,
   args: {

package/dist/runtime/components/buttons/__stories/AntDuplicateButton.stories.d.ts

@@ -4,6 +4,7 @@ declare const meta: Meta<typeof AntDuplicateButton>;
 export default meta;
 type Story = StoryObj<typeof AntDuplicateButton>;
 export declare const Docs: Story;
+export declare const IconVariant: Story;
 export declare const Disabled: Story;
 export declare const Grouped: Story;
 export declare const Skeleton: Story;

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

@@ -1,7 +1,5 @@
 import AntDuplicateButton from "../AntDuplicateButton.vue";
-import { Size } from "../../../enums/Size.enum.mjs";
-import { Grouped as _Grouped } from "../../../enums/Grouped.enum.mjs";
-import { Position } from "../../../enums/index.mjs";
+import { Position, Grouped as _Grouped, Size } from "../../../enums/index.mjs";
 const meta = {
   title: "Components/Buttons/Duplicate Button",
   component: AntDuplicateButton,
@@ -14,6 +12,10 @@ const meta = {
     grouped: {
       control: { type: "select" },
       options: Object.values(_Grouped)
+    },
+    tooltipPosition: {
+      control: { type: "select" },
+      options: Object.values(Position)
     }
   }
 };
@@ -27,7 +29,14 @@ export const Docs = {
     template: '<AntDuplicateButton v-bind="args"/>'
   }),
   args: {
-    invalidPermissionTooltipPosition: Position.right
+    tooltipPosition: Position.right
+  }
+};
+export const IconVariant = {
+  render: Docs.render,
+  args: {
+    ...Docs.args,
+    iconVariant: true
   }
 };
 export const Disabled = {

package/dist/runtime/components/buttons/__stories/AntEditButton.stories.d.ts

@@ -0,0 +1,12 @@
+import AntEditButton from '../AntEditButton.vue';
+import { type Meta, type StoryObj } from '@storybook/vue3';
+declare const meta: Meta<typeof AntEditButton>;
+export default meta;
+type Story = StoryObj<typeof AntEditButton>;
+export declare const Docs: Story;
+export declare const IconVariant: Story;
+export declare const Disabled: Story;
+export declare const Grouped: Story;
+export declare const Skeleton: Story;
+export declare const Expanded: Story;
+export declare const InvalidPermission: Story;

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

@@ -0,0 +1,76 @@
+import AntEditButton from "../AntEditButton.vue";
+import { Position, Grouped as _Grouped, Size } from "../../../enums/index.mjs";
+const meta = {
+  title: "Components/Buttons/Edit Button",
+  component: AntEditButton,
+  parameters: { controls: { sort: "requiredFirst" } },
+  argTypes: {
+    size: {
+      control: { type: "radio" },
+      options: Object.values(Size)
+    },
+    grouped: {
+      control: { type: "select" },
+      options: Object.values(_Grouped)
+    },
+    tooltipPosition: {
+      control: { type: "select" },
+      options: Object.values(Position)
+    }
+  }
+};
+export default meta;
+export const Docs = {
+  render: (args) => ({
+    components: { AntEditButton },
+    setup() {
+      return { args };
+    },
+    template: '<AntEditButton v-bind="args"/>'
+  }),
+  args: {
+    tooltipPosition: Position.right
+  }
+};
+export const IconVariant = {
+  render: Docs.render,
+  args: {
+    ...Docs.args,
+    iconVariant: true
+  }
+};
+export const Disabled = {
+  render: Docs.render,
+  args: {
+    ...Docs.args,
+    disabled: true
+  }
+};
+export const Grouped = {
+  render: Docs.render,
+  args: {
+    ...Docs.args,
+    grouped: _Grouped.left
+  }
+};
+export const Skeleton = {
+  render: Docs.render,
+  args: {
+    ...Docs.args,
+    skeleton: true
+  }
+};
+export const Expanded = {
+  render: Docs.render,
+  args: {
+    ...Docs.args,
+    expanded: true
+  }
+};
+export const InvalidPermission = {
+  render: Docs.render,
+  args: {
+    ...Docs.args,
+    canEdit: false
+  }
+};

package/dist/runtime/components/buttons/__stories/AntSaveAndNewButton.stories.d.ts

@@ -4,6 +4,7 @@ declare const meta: Meta<typeof AntSaveAndNewButton>;
 export default meta;
 type Story = StoryObj<typeof AntSaveAndNewButton>;
 export declare const Docs: Story;
+export declare const IconVariant: Story;
 export declare const Disabled: Story;
 export declare const Grouped: Story;
 export declare const Skeleton: Story;