@antify/ui-module 1.4.0 → 1.5.0

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

@@ -0,0 +1,42 @@
+<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 {faCopy} from '@fortawesome/free-solid-svg-icons';
+
+defineEmits(['click', 'blur']);
+withDefaults(defineProps<{
+	size?: Size;
+	disabled?: boolean;
+	grouped?: Grouped;
+	skeleton?: boolean;
+	expanded?: boolean;
+	canDuplicate?: boolean;
+	invalidPermissionTooltipPosition?: Position;
+}>(), {
+	canDuplicate: true
+});
+</script>
+
+<template>
+  <AntActionButton
+    :icon-left="faCopy"
+    :color-type="ColorType.base"
+    :size="size"
+    :disabled="disabled"
+    :grouped="grouped"
+    :skeleton="skeleton"
+    :expanded="expanded"
+    :has-permission="canDuplicate"
+    :invalid-permission-tooltip-position="invalidPermissionTooltipPosition"
+    data-e2e="create-button"
+    @click="$emit('click')"
+    @blur="$emit('blur')"
+  >
+    <template #invalidPermissionTooltipContent>
+      You have no permission to duplicate entries.<br>
+      Please contact your administrator.
+    </template>
+  </AntActionButton>
+</template>

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

@@ -1,7 +1,7 @@
 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 { Position } from "../../../enums/Position.enum.mjs";
 const meta = {
   title: "Components/Buttons/Action Button",
   component: AntActionButton,
@@ -30,7 +30,9 @@ export const Docs = {
     },
     template: '<AntActionButton v-bind="args">Action Button</AntActionButton>'
   }),
-  args: {}
+  args: {
+    invalidPermissionTooltipPosition: Position.right
+  }
 };
 export const Disabled = {
   render: Docs.render,
@@ -73,7 +75,7 @@ export const WithPermissionTooltip = {
 		</AntActionButton>`
   }),
   args: {
-    hasPermission: false,
-    invalidPermissionTooltipPosition: Position.right
+    ...Docs.args,
+    hasPermission: false
   }
 };

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

@@ -82,24 +82,24 @@ export const Icons = {
       };
     },
     template: `
-          <AntFormGroup>
-            <AntFormGroupLabel>Icons only</AntFormGroupLabel>
+			<AntFormGroup>
+				<AntFormGroupLabel>Icons only</AntFormGroupLabel>
 
-            <AntFormGroup direction="row">
-              <AntButton v-bind="args" :icon-left="faCaretLeft"></AntButton>
-              <AntButton v-bind="args" :icon-right="faCaretRight"></AntButton>
-              <AntButton v-bind="args" :icon-left="faCaretLeft" :icon-right="faCaretRight"></AntButton>
-            </AntFormGroup>
+				<AntFormGroup direction="row">
+					<AntButton v-bind="args" :icon-left="faCaretLeft"></AntButton>
+					<AntButton v-bind="args" :icon-right="faCaretRight"></AntButton>
+					<AntButton v-bind="args" :icon-left="faCaretLeft" :icon-right="faCaretRight"></AntButton>
+				</AntFormGroup>
 
-            <AntFormGroupLabel>Icons with text</AntFormGroupLabel>
+				<AntFormGroupLabel>Icons with text</AntFormGroupLabel>
 
-            <AntFormGroup direction="row">
-              <AntButton v-bind="args" :icon-left="faCaretLeft">Button</AntButton>
-              <AntButton v-bind="args" :icon-right="faCaretRight">Button</AntButton>
-              <AntButton v-bind="args" :icon-left="faCaretLeft" :icon-right="faCaretRight">Button</AntButton>
-            </AntFormGroup>
-          </AntFormGroup>
-        `
+				<AntFormGroup direction="row">
+					<AntButton v-bind="args" :icon-left="faCaretLeft">Button</AntButton>
+					<AntButton v-bind="args" :icon-right="faCaretRight">Button</AntButton>
+					<AntButton v-bind="args" :icon-left="faCaretLeft" :icon-right="faCaretRight">Button</AntButton>
+				</AntFormGroup>
+			</AntFormGroup>
+		`
   })
 };
 export const Grouped = {
@@ -152,121 +152,121 @@ export const Summary = {
       return { args };
     },
     template: `
-      <div class="flex flex-col gap-2.5">
-        <AntFormGroup>
-          <AntFormGroupLabel class="text-xl">
-            Grouped | Filled | Outlined combinations
-          </AntFormGroupLabel>
-          <div class="flex">
-            <AntButton v-bind="args" color-type="base" grouped="left" :filled="true" :outlined="false">
-              Button
-            </AntButton>
-            <AntButton v-bind="args" color-type="base" grouped="center" :filled="false" :outlined="false">
-              Button
-            </AntButton>
-            <AntButton v-bind="args" color-type="base" grouped="center" :filled="true" :outlined="true">
-              Button
-            </AntButton>
-            <AntButton v-bind="args" color-type="base" grouped="right" :filled="false" :outlined="true">
-              Button
-            </AntButton>
-          </div>
-          <div class="flex">
-            <AntButton v-bind="args" color-type="primary" grouped="left" :filled="true" :outlined="false">
-              Button
-            </AntButton>
-            <AntButton v-bind="args" color-type="primary" grouped="center" :filled="false" :outlined="false">
-              Button
-            </AntButton>
-            <AntButton v-bind="args" color-type="primary" grouped="center" :filled="true" :outlined="true">
-              Button
-            </AntButton>
-            <AntButton v-bind="args" color-type="primary" grouped="right" :filled="false" :outlined="true">
-              Button
-            </AntButton>
-          </div>
-          <div class="flex">
-            <AntButton v-bind="args" color-type="secondary" grouped="left" :filled="true" :outlined="false">
-              Button
-            </AntButton>
-            <AntButton v-bind="args" color-type="secondary" grouped="center" :filled="false" :outlined="false">
-              Button
-            </AntButton>
-            <AntButton v-bind="args" color-type="secondary" grouped="center" :filled="true" :outlined="true">
-              Button
-            </AntButton>
-            <AntButton v-bind="args" color-type="secondary" grouped="right" :filled="false" :outlined="true">
-              Button
-            </AntButton>
-          </div>
-          <div class="flex">
-            <AntButton v-bind="args" color-type="success" grouped="left" :filled="true" :outlined="false">
-              Button
-            </AntButton>
-            <AntButton v-bind="args" color-type="success" grouped="center" :filled="false" :outlined="false">
-              Button
-            </AntButton>
-            <AntButton v-bind="args" color-type="success" grouped="center" :filled="true" :outlined="true">
-              Button
-            </AntButton>
-            <AntButton v-bind="args" color-type="success" grouped="right" :filled="false" :outlined="true">
-              Button
-            </AntButton>
-          </div>
-          <div class="flex">
-            <AntButton v-bind="args" color-type="info" grouped="left" :filled="true" :outlined="false">
-              Button
-            </AntButton>
-            <AntButton v-bind="args" color-type="info" grouped="center" :filled="false" :outlined="false">
-              Button
-            </AntButton>
-            <AntButton v-bind="args" color-type="info" grouped="center" :filled="true" :outlined="true">
-              Button
-            </AntButton>
-            <AntButton v-bind="args" color-type="info" grouped="right" :filled="false" :outlined="true">
-              Button
-            </AntButton>
-          </div>
-          <div class="flex">
-            <AntButton v-bind="args" color-type="warning" grouped="left" :filled="true" :outlined="false">
-              Button
-            </AntButton>
-            <AntButton v-bind="args" color-type="warning" grouped="center" :filled="false" :outlined="false">
-              Button
-            </AntButton>
-            <AntButton v-bind="args" color-type="warning" grouped="center" :filled="true" :outlined="true">
-              Button
-            </AntButton>
-            <AntButton v-bind="args" color-type="warning" grouped="right" :filled="false" :outlined="true">
-              Button
-            </AntButton>
-          </div>
-          <div class="flex">
-            <AntButton v-bind="args" color-type="danger" grouped="left" :filled="true" :outlined="false">
-              Button
-            </AntButton>
-            <AntButton v-bind="args" color-type="danger" grouped="center" :filled="false" :outlined="false">
-              Button
-            </AntButton>
-            <AntButton v-bind="args" color-type="danger" grouped="center" :filled="true" :outlined="true">
-              Button
-            </AntButton>
-            <AntButton v-bind="args" color-type="danger" grouped="right" :filled="false" :outlined="true">
-              Button
-            </AntButton>
-          </div>
-        </AntFormGroup>
-        <AntFormGroup>
-          <AntFormGroupLabel class="text-xl">
-            Size
-          </AntFormGroupLabel>
-          <AntFormGroup direction="row">
-            <AntButton v-bind="args" size="md">Button</AntButton>
-            <AntButton v-bind="args" size="sm">Button</AntButton>
-          </AntFormGroup>
-        </AntFormGroup>
-      </div>
-    `
+			<div class="flex flex-col gap-2.5">
+				<AntFormGroup>
+					<AntFormGroupLabel class="text-xl">
+						Grouped | Filled | Outlined combinations
+					</AntFormGroupLabel>
+					<div class="flex">
+						<AntButton v-bind="args" color-type="base" grouped="left" :filled="true" :outlined="false">
+							Button
+						</AntButton>
+						<AntButton v-bind="args" color-type="base" grouped="center" :filled="false" :outlined="false">
+							Button
+						</AntButton>
+						<AntButton v-bind="args" color-type="base" grouped="center" :filled="true" :outlined="true">
+							Button
+						</AntButton>
+						<AntButton v-bind="args" color-type="base" grouped="right" :filled="false" :outlined="true">
+							Button
+						</AntButton>
+					</div>
+					<div class="flex">
+						<AntButton v-bind="args" color-type="primary" grouped="left" :filled="true" :outlined="false">
+							Button
+						</AntButton>
+						<AntButton v-bind="args" color-type="primary" grouped="center" :filled="false" :outlined="false">
+							Button
+						</AntButton>
+						<AntButton v-bind="args" color-type="primary" grouped="center" :filled="true" :outlined="true">
+							Button
+						</AntButton>
+						<AntButton v-bind="args" color-type="primary" grouped="right" :filled="false" :outlined="true">
+							Button
+						</AntButton>
+					</div>
+					<div class="flex">
+						<AntButton v-bind="args" color-type="secondary" grouped="left" :filled="true" :outlined="false">
+							Button
+						</AntButton>
+						<AntButton v-bind="args" color-type="secondary" grouped="center" :filled="false" :outlined="false">
+							Button
+						</AntButton>
+						<AntButton v-bind="args" color-type="secondary" grouped="center" :filled="true" :outlined="true">
+							Button
+						</AntButton>
+						<AntButton v-bind="args" color-type="secondary" grouped="right" :filled="false" :outlined="true">
+							Button
+						</AntButton>
+					</div>
+					<div class="flex">
+						<AntButton v-bind="args" color-type="success" grouped="left" :filled="true" :outlined="false">
+							Button
+						</AntButton>
+						<AntButton v-bind="args" color-type="success" grouped="center" :filled="false" :outlined="false">
+							Button
+						</AntButton>
+						<AntButton v-bind="args" color-type="success" grouped="center" :filled="true" :outlined="true">
+							Button
+						</AntButton>
+						<AntButton v-bind="args" color-type="success" grouped="right" :filled="false" :outlined="true">
+							Button
+						</AntButton>
+					</div>
+					<div class="flex">
+						<AntButton v-bind="args" color-type="info" grouped="left" :filled="true" :outlined="false">
+							Button
+						</AntButton>
+						<AntButton v-bind="args" color-type="info" grouped="center" :filled="false" :outlined="false">
+							Button
+						</AntButton>
+						<AntButton v-bind="args" color-type="info" grouped="center" :filled="true" :outlined="true">
+							Button
+						</AntButton>
+						<AntButton v-bind="args" color-type="info" grouped="right" :filled="false" :outlined="true">
+							Button
+						</AntButton>
+					</div>
+					<div class="flex">
+						<AntButton v-bind="args" color-type="warning" grouped="left" :filled="true" :outlined="false">
+							Button
+						</AntButton>
+						<AntButton v-bind="args" color-type="warning" grouped="center" :filled="false" :outlined="false">
+							Button
+						</AntButton>
+						<AntButton v-bind="args" color-type="warning" grouped="center" :filled="true" :outlined="true">
+							Button
+						</AntButton>
+						<AntButton v-bind="args" color-type="warning" grouped="right" :filled="false" :outlined="true">
+							Button
+						</AntButton>
+					</div>
+					<div class="flex">
+						<AntButton v-bind="args" color-type="danger" grouped="left" :filled="true" :outlined="false">
+							Button
+						</AntButton>
+						<AntButton v-bind="args" color-type="danger" grouped="center" :filled="false" :outlined="false">
+							Button
+						</AntButton>
+						<AntButton v-bind="args" color-type="danger" grouped="center" :filled="true" :outlined="true">
+							Button
+						</AntButton>
+						<AntButton v-bind="args" color-type="danger" grouped="right" :filled="false" :outlined="true">
+							Button
+						</AntButton>
+					</div>
+				</AntFormGroup>
+				<AntFormGroup>
+					<AntFormGroupLabel class="text-xl">
+						Size
+					</AntFormGroupLabel>
+					<AntFormGroup direction="row">
+						<AntButton v-bind="args" size="md">Button</AntButton>
+						<AntButton v-bind="args" size="sm">Button</AntButton>
+					</AntFormGroup>
+				</AntFormGroup>
+			</div>
+		`
   }),
   args: {
     iconLeft: faCaretLeft,

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

@@ -26,7 +26,9 @@ export const Docs = {
     },
     template: '<AntCreateButton v-bind="args"/>'
   }),
-  args: {}
+  args: {
+    invalidPermissionTooltipPosition: Position.right
+  }
 };
 export const Disabled = {
   render: Docs.render,
@@ -60,7 +62,6 @@ export const InvalidPermission = {
   render: Docs.render,
   args: {
     ...Docs.args,
-    canCreate: false,
-    invalidPermissionTooltipPosition: Position.right
+    canCreate: false
   }
 };

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

@@ -8,4 +8,5 @@ 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

@@ -26,7 +26,9 @@ export const Docs = {
     },
     template: '<AntDeleteButton v-bind="args"/>'
   }),
-  args: {}
+  args: {
+    invalidPermissionTooltipPosition: Position.right
+  }
 };
 export const Disabled = {
   render: Docs.render,
@@ -56,11 +58,17 @@ export const Expanded = {
     expanded: true
   }
 };
+export const IconVariant = {
+  render: Docs.render,
+  args: {
+    ...Docs.args,
+    iconVariant: true
+  }
+};
 export const InvalidPermission = {
   render: Docs.render,
   args: {
     ...Docs.args,
-    canDelete: false,
-    invalidPermissionTooltipPosition: Position.right
+    canDelete: false
   }
 };

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

@@ -0,0 +1,11 @@
+import AntDuplicateButton from '../AntDuplicateButton.vue';
+import { type Meta, type StoryObj } from '@storybook/vue3';
+declare const meta: Meta<typeof AntDuplicateButton>;
+export default meta;
+type Story = StoryObj<typeof AntDuplicateButton>;
+export declare const Docs: 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/AntDuplicateButton.stories.mjs

@@ -0,0 +1,67 @@
+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";
+const meta = {
+  title: "Components/Buttons/Duplicate Button",
+  component: AntDuplicateButton,
+  parameters: { controls: { sort: "requiredFirst" } },
+  argTypes: {
+    size: {
+      control: { type: "radio" },
+      options: Object.values(Size)
+    },
+    grouped: {
+      control: { type: "select" },
+      options: Object.values(_Grouped)
+    }
+  }
+};
+export default meta;
+export const Docs = {
+  render: (args) => ({
+    components: { AntDuplicateButton },
+    setup() {
+      return { args };
+    },
+    template: '<AntDuplicateButton v-bind="args"/>'
+  }),
+  args: {
+    invalidPermissionTooltipPosition: Position.right
+  }
+};
+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,
+    canDuplicate: false
+  }
+};

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

@@ -26,7 +26,9 @@ export const Docs = {
     },
     template: '<AntSaveAndNewButton v-bind="args"/>'
   }),
-  args: {}
+  args: {
+    invalidPermissionTooltipPosition: Position.right
+  }
 };
 export const Disabled = {
   render: Docs.render,
@@ -60,7 +62,6 @@ export const InvalidPermission = {
   render: Docs.render,
   args: {
     ...Docs.args,
-    canSave: false,
-    invalidPermissionTooltipPosition: Position.right
+    canSave: false
   }
 };

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

@@ -26,7 +26,9 @@ export const Docs = {
     },
     template: '<AntSaveButton v-bind="args"/>'
   }),
-  args: {}
+  args: {
+    invalidPermissionTooltipPosition: Position.right
+  }
 };
 export const Disabled = {
   render: Docs.render,
@@ -60,7 +62,6 @@ export const InvalidPermission = {
   render: Docs.render,
   args: {
     ...Docs.args,
-    canSave: false,
-    invalidPermissionTooltipPosition: Position.right
+    canSave: false
   }
 };

package/dist/runtime/components/crud/AntCrud.vue

@@ -7,33 +7,36 @@ withDefaults(defineProps<{
 </script>
 
 <template>
-  <div class="flex w-full h-full" data-e2e="crud">
+  <div
+    class="flex w-full h-full"
+    data-e2e="crud"
+  >
     <div
       class="left-content h-full flex flex-col bg-neutral-300 gap-px overflow-hidden"
       :class="{'w-[40rem]': showDetail, 'w-full': !showDetail}"
     >
-      <div class="bg-neutral-50">
-        <slot name="search-section"/>
+      <div class="bg-white">
+        <slot name="search-section" />
       </div>
 
-      <div class="bg-neutral-50 flex-grow h-full overflow-hidden">
-        <slot name="table-section"/>
+      <div class="bg-white flex-grow h-full overflow-hidden">
+        <slot name="table-section" />
       </div>
 
-      <div class="bg-neutral-50">
-        <slot name="table-nav-section"/>
+      <div class="bg-white">
+        <slot name="table-nav-section" />
       </div>
     </div>
 
-    <transition name="right-content">
+    <Transition name="right-content">
       <div
         v-if="showDetail"
         class="flex flex-col gap-px border-l border-neutral-300 overflow-hidden"
         :class="{'w-full': showDetail}"
       >
-        <slot/>
+        <slot />
       </div>
-    </transition>
+    </Transition>
   </div>
 </template>
 

package/dist/runtime/components/crud/AntCrudDetail.vue

@@ -2,7 +2,7 @@
   <div class="flex flex-col bg-neutral-300 gap-px h-full" data-e2e="crud-detail">
     <slot name="header"/>
 
-    <div class="flex-grow bg-neutral-50 h-full overflow-y-auto">
+    <div class="flex-grow bg-white h-full overflow-y-auto">
       <slot/>
     </div>
 

package/dist/runtime/components/crud/AntCrudDetailActions.vue

@@ -18,7 +18,7 @@ withDefaults(defineProps<{
 
 <template>
   <div
-    class="flex justify-between p-2.5 gap-2.5 bg-neutral-50"
+    class="flex justify-between p-2.5 gap-2.5 bg-white"
     data-e2e="crud-detail-actions"
   >
     <div class="flex gap-2.5">

package/dist/runtime/components/crud/AntCrudDetailNav.vue

@@ -23,7 +23,7 @@ const dialogOpen = ref(false);
 
 <template>
   <div
-    class="flex justify-between items-stretch gap-2.5 bg-neutral-50"
+    class="flex justify-between items-stretch gap-2.5 bg-white"
     data-e2e="crud-detail-nav"
   >
     <slot name="tabs">

package/dist/runtime/components/crud/AntCrudTableFilter.vue

@@ -62,7 +62,7 @@ watch(() => props.fullWidth, (val) => {
 
 <template>
   <div
-    class="flex h-full items-center p-2.5 gap-2.5 bg-neutral-50"
+    class="flex h-full items-center p-2.5 gap-2.5 bg-white"
     data-e2e="crud-table-filter"
   >
     <div