@antify/ui-module 1.3.0 → 1.5.0

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.d.ts

@@ -8,3 +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 InvalidPermission: Story;

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

@@ -1,6 +1,7 @@
 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";
 const meta = {
   title: "Components/Buttons/Create Button",
   component: AntCreateButton,
@@ -25,7 +26,9 @@ export const Docs = {
     },
     template: '<AntCreateButton v-bind="args"/>'
   }),
-  args: {}
+  args: {
+    invalidPermissionTooltipPosition: Position.right
+  }
 };
 export const Disabled = {
   render: Docs.render,
@@ -55,3 +58,10 @@ export const Expanded = {
     expanded: true
   }
 };
+export const InvalidPermission = {
+  render: Docs.render,
+  args: {
+    ...Docs.args,
+    canCreate: false
+  }
+};

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

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

@@ -1,6 +1,7 @@
 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";
 const meta = {
   title: "Components/Buttons/Delete Button",
   component: AntDeleteButton,
@@ -25,7 +26,9 @@ export const Docs = {
     },
     template: '<AntDeleteButton v-bind="args"/>'
   }),
-  args: {}
+  args: {
+    invalidPermissionTooltipPosition: Position.right
+  }
 };
 export const Disabled = {
   render: Docs.render,
@@ -55,3 +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
+  }
+};

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.d.ts

@@ -8,3 +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 InvalidPermission: Story;

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

@@ -1,6 +1,7 @@
 import AntSaveAndNewButton from "../AntSaveAndNewButton.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/Save And New Button",
   component: AntSaveAndNewButton,
@@ -25,7 +26,9 @@ export const Docs = {
     },
     template: '<AntSaveAndNewButton v-bind="args"/>'
   }),
-  args: {}
+  args: {
+    invalidPermissionTooltipPosition: Position.right
+  }
 };
 export const Disabled = {
   render: Docs.render,
@@ -55,3 +58,10 @@ export const Expanded = {
     expanded: true
   }
 };
+export const InvalidPermission = {
+  render: Docs.render,
+  args: {
+    ...Docs.args,
+    canSave: false
+  }
+};

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

@@ -8,3 +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 InvalidPermission: Story;

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

@@ -1,6 +1,7 @@
 import AntSaveButton from "../AntSaveButton.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/Save Button",
   component: AntSaveButton,
@@ -25,7 +26,9 @@ export const Docs = {
     },
     template: '<AntSaveButton v-bind="args"/>'
   }),
-  args: {}
+  args: {
+    invalidPermissionTooltipPosition: Position.right
+  }
 };
 export const Disabled = {
   render: Docs.render,
@@ -55,3 +58,10 @@ export const Expanded = {
     expanded: true
   }
 };
+export const InvalidPermission = {
+  render: Docs.render,
+  args: {
+    ...Docs.args,
+    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

@@ -8,14 +8,19 @@ defineEmits(['back', 'save', 'save-and-new']);
 withDefaults(defineProps<{
   disabled?: boolean
   skeleton?: boolean
+	canSave?: boolean
 }>(), {
   disabled: false,
   skeleton: false,
+	canSave: true
 });
 </script>
 
 <template>
-  <div class="flex justify-between p-2.5 gap-2.5 bg-neutral-50" data-e2e="crud-detail-actions">
+  <div
+    class="flex justify-between p-2.5 gap-2.5 bg-white"
+    data-e2e="crud-detail-actions"
+  >
     <div class="flex gap-2.5">
       <slot name="buttons-left">
         <AntButton
@@ -31,21 +36,23 @@ withDefaults(defineProps<{
     </div>
 
     <div class="flex gap-2.5">
-      <slot name="before-buttons-right"/>
+      <slot name="before-buttons-right" />
       <slot name="buttons-right">
         <AntSaveAndNewButton
           :skeleton="skeleton"
           :disabled="disabled"
+          :can-save="canSave"
           @click="$emit('save-and-new')"
         />
 
         <AntSaveButton
           :skeleton="skeleton"
           :disabled="disabled"
+          :can-save="canSave"
           @click="$emit('save')"
         />
       </slot>
-      <slot name="after-buttons-right"/>
+      <slot name="after-buttons-right" />
     </div>
   </div>
 </template>