@antify/ui-module 1.4.0 → 1.5.1

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."
     }
   }
 };
@@ -82,24 +93,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 = {
@@ -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 }
@@ -152,121 +186,122 @@ 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>
+						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>
+						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

@@ -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)
     }
   }
 };
@@ -26,7 +28,16 @@ export const Docs = {
     },
     template: '<AntCreateButton v-bind="args"/>'
   }),
-  args: {}
+  args: {
+    tooltipPosition: Position.right
+  }
+};
+export const IconVariant = {
+  render: Docs.render,
+  args: {
+    ...Docs.args,
+    iconVariant: true
+  }
 };
 export const Disabled = {
   render: Docs.render,
@@ -60,7 +71,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

@@ -4,6 +4,7 @@ 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;

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)
     }
   }
 };
@@ -26,7 +28,16 @@ export const Docs = {
     },
     template: '<AntDeleteButton v-bind="args"/>'
   }),
-  args: {}
+  args: {
+    tooltipPosition: Position.right
+  }
+};
+export const IconVariant = {
+  render: Docs.render,
+  args: {
+    ...Docs.args,
+    iconVariant: true
+  }
 };
 export const Disabled = {
   render: Docs.render,
@@ -60,7 +71,6 @@ 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,12 @@
+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 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/AntDuplicateButton.stories.mjs

@@ -0,0 +1,76 @@
+import AntDuplicateButton from "../AntDuplicateButton.vue";
+import { Position, Grouped as _Grouped, Size } 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)
+    },
+    tooltipPosition: {
+      control: { type: "select" },
+      options: Object.values(Position)
+    }
+  }
+};
+export default meta;
+export const Docs = {
+  render: (args) => ({
+    components: { AntDuplicateButton },
+    setup() {
+      return { args };
+    },
+    template: '<AntDuplicateButton 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,
+    canDuplicate: false
+  }
+};

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;