@antify/ui 1.0.0

package/dist/components/buttons/__stories/AntButton.stories.js

@@ -0,0 +1,361 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+module.exports = exports.WithoutBorder = exports.WithTooltip = exports.Summary = exports.Skeleton = exports.ReadOnly = exports.Link = exports.Icons = exports.Grouped = exports.Filled = exports.Expanded = exports.Docs = void 0;
+var _AntButton = _interopRequireDefault(require("../AntButton.vue"));
+var _AntFormGroupLabel = _interopRequireDefault(require("../../forms/AntFormGroupLabel.vue"));
+var _AntFormGroup = _interopRequireDefault(require("../../forms/AntFormGroup.vue"));
+var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
+var _Size = require("../../../enums/Size.enum");
+var _Grouped2 = require("../../../enums/Grouped.enum");
+var _enums = require("../../../enums");
+var _test = require("@storybook/test");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const meta = {
+  component: _AntButton.default,
+  title: "Components/Buttons/Button",
+  parameters: {
+    controls: {
+      sort: "requiredFirst"
+    }
+  },
+  argTypes: {
+    state: {
+      control: {
+        type: "select"
+      },
+      options: Object.values(_enums.State)
+    },
+    grouped: {
+      control: {
+        type: "select"
+      },
+      options: Object.values(_Grouped2.Grouped),
+      description: "Where is this fields position in a group"
+    },
+    size: {
+      control: {
+        type: "select"
+      },
+      options: Object.values(_Size.Size),
+      description: "Defines the size of the button"
+    },
+    iconLeft: {
+      control: {
+        type: "none"
+      },
+      description: "Will be displayed left to the label or the default slot.<br>Use Font-awesome Icons."
+    },
+    iconRight: {
+      control: {
+        type: "none"
+      },
+      description: "Will be displayed right to the label or the default slot.<br>Use Font-awesome Icons."
+    },
+    to: {
+      control: {
+        type: "RouteLocationRaw"
+      },
+      description: "If provided transforms the button into an a-tag with the provided link. Style is still the same as a button.",
+      table: {
+        type: {
+          summary: "string|object"
+        }
+      }
+    },
+    submit: {
+      description: 'Change the button type to type="submit"'
+    },
+    tooltipPosition: {
+      control: {
+        type: "select"
+      },
+      options: Object.values(_enums.Position),
+      description: "The tooltips position. Tooltip is only shown if a tooltip-content slot is provided."
+    },
+    tooltipState: {
+      control: {
+        type: "select"
+      },
+      options: Object.values(_enums.InputState),
+      description: "The tooltips color type. Tooltip is only shown if a tooltip-content slot is provided."
+    }
+  }
+};
+module.exports = meta;
+const Docs = exports.Docs = {
+  render: args => ({
+    components: {
+      AntButton: _AntButton.default
+    },
+    setup() {
+      return {
+        args
+      };
+    },
+    template: '<AntButton v-bind="args">Button</AntButton>'
+  }),
+  args: {}
+};
+const Filled = exports.Filled = {
+  render: Docs.render,
+  args: {
+    ...Docs.args,
+    filled: true
+  }
+};
+const Link = exports.Link = {
+  render: Docs.render,
+  args: {
+    ...Docs.args,
+    to: "/example"
+  }
+};
+const Icons = exports.Icons = {
+  render: args => ({
+    components: {
+      AntButton: _AntButton.default,
+      AntFormGroup: _AntFormGroup.default,
+      AntFormGroupLabel: _AntFormGroupLabel.default
+    },
+    setup() {
+      return {
+        args,
+        faCaretLeft: _freeSolidSvgIcons.faCaretLeft,
+        faCaretRight: _freeSolidSvgIcons.faCaretRight
+      };
+    },
+    template: `
+			<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>
+
+				<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>
+		`
+  })
+};
+const Grouped = exports.Grouped = {
+  render: Docs.render,
+  args: {
+    ...Docs.args,
+    grouped: _Grouped2.Grouped.left
+  }
+};
+const Skeleton = exports.Skeleton = {
+  render: Docs.render,
+  args: {
+    ...Docs.args,
+    skeleton: true
+  }
+};
+const ReadOnly = exports.ReadOnly = {
+  render: Docs.render,
+  args: {
+    ...Docs.args,
+    readonly: true
+  }
+};
+const Expanded = exports.Expanded = {
+  render: Docs.render,
+  args: {
+    ...Docs.args,
+    expanded: true
+  }
+};
+const WithoutBorder = exports.WithoutBorder = {
+  render: Docs.render,
+  args: {
+    ...Docs.args,
+    filled: true,
+    outlined: false
+  }
+};
+const WithTooltip = exports.WithTooltip = {
+  render: args => ({
+    components: {
+      AntButton: _AntButton.default
+    },
+    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 = (0, _test.within)(canvasElement);
+  },
+  args: {
+    tooltipDelay: 800
+  },
+  parameters: {
+    chromatic: {
+      disableSnapshot: false
+    }
+  }
+};
+const Summary = exports.Summary = {
+  parameters: {
+    chromatic: {
+      disableSnapshot: false
+    }
+  },
+  render: args => ({
+    components: {
+      AntButton: _AntButton.default,
+      AntFormGroupLabel: _AntFormGroupLabel.default,
+      AntFormGroup: _AntFormGroup.default
+    },
+    setup() {
+      return {
+        args
+      };
+    },
+    template: `
+			<div class="flex flex-col gap-2.5">
+				<AntFormGroup>
+					<AntFormGroupLabel>
+						Grouped | Filled | Outlined combinations
+					</AntFormGroupLabel>
+					<div class="flex">
+						<AntButton v-bind="args" state="base" grouped="left" :filled="true" :outlined="false">
+							Button
+						</AntButton>
+						<AntButton v-bind="args" state="base" grouped="center" :filled="false" :outlined="false">
+							Button
+						</AntButton>
+						<AntButton v-bind="args" state="base" grouped="center" :filled="true" :outlined="true">
+							Button
+						</AntButton>
+						<AntButton v-bind="args" state="base" grouped="right" :filled="false" :outlined="true">
+							Button
+						</AntButton>
+					</div>
+					<div class="flex">
+						<AntButton v-bind="args" state="primary" grouped="left" :filled="true" :outlined="false">
+							Button
+						</AntButton>
+						<AntButton v-bind="args" state="primary" grouped="center" :filled="false" :outlined="false">
+							Button
+						</AntButton>
+						<AntButton v-bind="args" state="primary" grouped="center" :filled="true" :outlined="true">
+							Button
+						</AntButton>
+						<AntButton v-bind="args" state="primary" grouped="right" :filled="false" :outlined="true">
+							Button
+						</AntButton>
+					</div>
+					<div class="flex">
+						<AntButton v-bind="args" state="secondary" grouped="left" :filled="true" :outlined="false">
+							Button
+						</AntButton>
+						<AntButton v-bind="args" state="secondary" grouped="center" :filled="false" :outlined="false">
+							Button
+						</AntButton>
+						<AntButton v-bind="args" state="secondary" grouped="center" :filled="true" :outlined="true">
+							Button
+						</AntButton>
+						<AntButton v-bind="args" state="secondary" grouped="right" :filled="false" :outlined="true">
+							Button
+						</AntButton>
+					</div>
+					<div class="flex">
+						<AntButton v-bind="args" state="success" grouped="left" :filled="true" :outlined="false">
+							Button
+						</AntButton>
+						<AntButton v-bind="args" state="success" grouped="center" :filled="false" :outlined="false">
+							Button
+						</AntButton>
+						<AntButton v-bind="args" state="success" grouped="center" :filled="true" :outlined="true">
+							Button
+						</AntButton>
+						<AntButton v-bind="args" state="success" grouped="right" :filled="false" :outlined="true">
+							Button
+						</AntButton>
+					</div>
+					<div class="flex">
+						<AntButton v-bind="args" state="info" grouped="left" :filled="true" :outlined="false">
+							Button
+						</AntButton>
+						<AntButton v-bind="args" state="info" grouped="center" :filled="false" :outlined="false">
+							Button
+						</AntButton>
+						<AntButton v-bind="args" state="info" grouped="center" :filled="true" :outlined="true">
+							Button
+						</AntButton>
+						<AntButton v-bind="args" state="info" grouped="right" :filled="false" :outlined="true">
+							Button
+						</AntButton>
+					</div>
+					<div class="flex">
+						<AntButton v-bind="args" state="warning" grouped="left" :filled="true" :outlined="false">
+							Button
+						</AntButton>
+						<AntButton v-bind="args" state="warning" grouped="center" :filled="false" :outlined="false">
+							Button
+						</AntButton>
+						<AntButton v-bind="args" state="warning" grouped="center" :filled="true" :outlined="true">
+							Button
+						</AntButton>
+						<AntButton v-bind="args" state="warning" grouped="right" :filled="false" :outlined="true">
+							Button
+						</AntButton>
+					</div>
+					<div class="flex">
+						<AntButton v-bind="args" state="danger" grouped="left" :filled="true" :outlined="false">
+							Button
+						</AntButton>
+						<AntButton v-bind="args" state="danger" grouped="center" :filled="false" :outlined="false">
+							Button
+						</AntButton>
+						<AntButton v-bind="args" state="danger" grouped="center" :filled="true" :outlined="true">
+							Button
+						</AntButton>
+						<AntButton v-bind="args" state="danger" grouped="right" :filled="false" :outlined="true">
+							Button
+						</AntButton>
+					</div>
+				</AntFormGroup>
+
+				<AntFormGroup>
+					<AntFormGroupLabel>
+						Size
+					</AntFormGroupLabel>
+					<AntFormGroup direction="row">
+						<AntButton v-bind="args" size="lg">Button</AntButton>
+						<AntButton v-bind="args" size="md">Button</AntButton>
+						<AntButton v-bind="args" size="sm">Button</AntButton>
+						<AntButton v-bind="args" size="xs">Button</AntButton>
+						<AntButton v-bind="args" size="2xs">Button</AntButton>
+					</AntFormGroup>
+				</AntFormGroup>
+			</div>
+		`
+  }),
+  args: {
+    iconLeft: _freeSolidSvgIcons.faCaretLeft,
+    iconRight: _freeSolidSvgIcons.faCaretRight
+  }
+};

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

@@ -0,0 +1,313 @@
+import AntButton from "../AntButton.vue";
+import AntFormGroupLabel from "../../forms/AntFormGroupLabel.vue";
+import AntFormGroup from "../../forms/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 { State, InputState, Position } from "../../../enums/index.mjs";
+import { within } from "@storybook/test";
+const meta = {
+  component: AntButton,
+  title: "Components/Buttons/Button",
+  parameters: { controls: { sort: "requiredFirst" } },
+  argTypes: {
+    state: {
+      control: { type: "select" },
+      options: Object.values(State)
+    },
+    grouped: {
+      control: { type: "select" },
+      options: Object.values(_Grouped),
+      description: "Where is this fields position in a group"
+    },
+    size: {
+      control: { type: "select" },
+      options: Object.values(Size),
+      description: "Defines the size of the button"
+    },
+    iconLeft: {
+      control: { type: "none" },
+      description: "Will be displayed left to the label or the default slot.<br>Use Font-awesome Icons."
+    },
+    iconRight: {
+      control: { type: "none" },
+      description: "Will be displayed right to the label or the default slot.<br>Use Font-awesome Icons."
+    },
+    to: {
+      control: { type: "RouteLocationRaw" },
+      description: "If provided transforms the button into an a-tag with the provided link. Style is still the same as a button.",
+      table: { type: { summary: "string|object" } }
+    },
+    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."
+    },
+    tooltipState: {
+      control: { type: "select" },
+      options: Object.values(InputState),
+      description: "The tooltips color type. Tooltip is only shown if a tooltip-content slot is provided."
+    }
+  }
+};
+export default meta;
+export const Docs = {
+  render: (args) => ({
+    components: { AntButton },
+    setup() {
+      return { args };
+    },
+    template: '<AntButton v-bind="args">Button</AntButton>'
+  }),
+  args: {}
+};
+export const Filled = {
+  render: Docs.render,
+  args: {
+    ...Docs.args,
+    filled: true
+  }
+};
+export const Link = {
+  render: Docs.render,
+  args: {
+    ...Docs.args,
+    to: "/example"
+  }
+};
+export const Icons = {
+  render: (args) => ({
+    components: {
+      AntButton,
+      AntFormGroup,
+      AntFormGroupLabel
+    },
+    setup() {
+      return {
+        args,
+        faCaretLeft,
+        faCaretRight
+      };
+    },
+    template: `
+			<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>
+
+				<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>
+		`
+  })
+};
+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 ReadOnly = {
+  render: Docs.render,
+  args: {
+    ...Docs.args,
+    readonly: true
+  }
+};
+export const Expanded = {
+  render: Docs.render,
+  args: {
+    ...Docs.args,
+    expanded: true
+  }
+};
+export const WithoutBorder = {
+  render: Docs.render,
+  args: {
+    ...Docs.args,
+    filled: true,
+    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 }
+  },
+  render: (args) => ({
+    components: {
+      AntButton,
+      AntFormGroupLabel,
+      AntFormGroup
+    },
+    setup() {
+      return { args };
+    },
+    template: `
+			<div class="flex flex-col gap-2.5">
+				<AntFormGroup>
+					<AntFormGroupLabel>
+						Grouped | Filled | Outlined combinations
+					</AntFormGroupLabel>
+					<div class="flex">
+						<AntButton v-bind="args" state="base" grouped="left" :filled="true" :outlined="false">
+							Button
+						</AntButton>
+						<AntButton v-bind="args" state="base" grouped="center" :filled="false" :outlined="false">
+							Button
+						</AntButton>
+						<AntButton v-bind="args" state="base" grouped="center" :filled="true" :outlined="true">
+							Button
+						</AntButton>
+						<AntButton v-bind="args" state="base" grouped="right" :filled="false" :outlined="true">
+							Button
+						</AntButton>
+					</div>
+					<div class="flex">
+						<AntButton v-bind="args" state="primary" grouped="left" :filled="true" :outlined="false">
+							Button
+						</AntButton>
+						<AntButton v-bind="args" state="primary" grouped="center" :filled="false" :outlined="false">
+							Button
+						</AntButton>
+						<AntButton v-bind="args" state="primary" grouped="center" :filled="true" :outlined="true">
+							Button
+						</AntButton>
+						<AntButton v-bind="args" state="primary" grouped="right" :filled="false" :outlined="true">
+							Button
+						</AntButton>
+					</div>
+					<div class="flex">
+						<AntButton v-bind="args" state="secondary" grouped="left" :filled="true" :outlined="false">
+							Button
+						</AntButton>
+						<AntButton v-bind="args" state="secondary" grouped="center" :filled="false" :outlined="false">
+							Button
+						</AntButton>
+						<AntButton v-bind="args" state="secondary" grouped="center" :filled="true" :outlined="true">
+							Button
+						</AntButton>
+						<AntButton v-bind="args" state="secondary" grouped="right" :filled="false" :outlined="true">
+							Button
+						</AntButton>
+					</div>
+					<div class="flex">
+						<AntButton v-bind="args" state="success" grouped="left" :filled="true" :outlined="false">
+							Button
+						</AntButton>
+						<AntButton v-bind="args" state="success" grouped="center" :filled="false" :outlined="false">
+							Button
+						</AntButton>
+						<AntButton v-bind="args" state="success" grouped="center" :filled="true" :outlined="true">
+							Button
+						</AntButton>
+						<AntButton v-bind="args" state="success" grouped="right" :filled="false" :outlined="true">
+							Button
+						</AntButton>
+					</div>
+					<div class="flex">
+						<AntButton v-bind="args" state="info" grouped="left" :filled="true" :outlined="false">
+							Button
+						</AntButton>
+						<AntButton v-bind="args" state="info" grouped="center" :filled="false" :outlined="false">
+							Button
+						</AntButton>
+						<AntButton v-bind="args" state="info" grouped="center" :filled="true" :outlined="true">
+							Button
+						</AntButton>
+						<AntButton v-bind="args" state="info" grouped="right" :filled="false" :outlined="true">
+							Button
+						</AntButton>
+					</div>
+					<div class="flex">
+						<AntButton v-bind="args" state="warning" grouped="left" :filled="true" :outlined="false">
+							Button
+						</AntButton>
+						<AntButton v-bind="args" state="warning" grouped="center" :filled="false" :outlined="false">
+							Button
+						</AntButton>
+						<AntButton v-bind="args" state="warning" grouped="center" :filled="true" :outlined="true">
+							Button
+						</AntButton>
+						<AntButton v-bind="args" state="warning" grouped="right" :filled="false" :outlined="true">
+							Button
+						</AntButton>
+					</div>
+					<div class="flex">
+						<AntButton v-bind="args" state="danger" grouped="left" :filled="true" :outlined="false">
+							Button
+						</AntButton>
+						<AntButton v-bind="args" state="danger" grouped="center" :filled="false" :outlined="false">
+							Button
+						</AntButton>
+						<AntButton v-bind="args" state="danger" grouped="center" :filled="true" :outlined="true">
+							Button
+						</AntButton>
+						<AntButton v-bind="args" state="danger" grouped="right" :filled="false" :outlined="true">
+							Button
+						</AntButton>
+					</div>
+				</AntFormGroup>
+
+				<AntFormGroup>
+					<AntFormGroupLabel>
+						Size
+					</AntFormGroupLabel>
+					<AntFormGroup direction="row">
+						<AntButton v-bind="args" size="lg">Button</AntButton>
+						<AntButton v-bind="args" size="md">Button</AntButton>
+						<AntButton v-bind="args" size="sm">Button</AntButton>
+						<AntButton v-bind="args" size="xs">Button</AntButton>
+						<AntButton v-bind="args" size="2xs">Button</AntButton>
+					</AntFormGroup>
+				</AntFormGroup>
+			</div>
+		`
+  }),
+  args: {
+    iconLeft: faCaretLeft,
+    iconRight: faCaretRight
+  }
+};

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

@@ -0,0 +1,12 @@
+import AntCreateButton from '../AntCreateButton.vue';
+import { type Meta, type StoryObj } from '@storybook/vue3';
+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;
+export declare const Expanded: Story;
+export declare const InvalidPermission: Story;