@antify/ui-module 1.4.0 → 1.5.1

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

@@ -0,0 +1,54 @@
+<script lang="ts" setup>
+import AntActionButton from './AntActionButton.vue';
+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;
+	tooltipPosition?: Position;
+}>(), {
+	iconVariant: false,
+	canDuplicate: true
+});
+</script>
+
+<template>
+  <AntActionButton
+    :filled="false"
+    :color-type="ColorType.base"
+    :size="size"
+    :disabled="disabled"
+    :icon-left="iconVariant ? faCopy : undefined"
+    :grouped="grouped"
+    :skeleton="skeleton"
+    :expanded="expanded"
+    :has-permission="canDuplicate"
+    :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/index.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,9 +35,15 @@ 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: {}
+  args: {
+    tooltipPosition: Position.right
+  }
 };
 export const Disabled = {
   render: Docs.render,
@@ -60,20 +73,10 @@ 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: {
-    hasPermission: false,
-    invalidPermissionTooltipPosition: Position.right
+    ...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;