@antify/ui-module 1.1.3

package/dist/runtime/components/__stories/AntAlert.stories.mjs

@@ -0,0 +1,75 @@
+import AntAlert from "../AntAlert.vue";
+import { InputColorType } from "../../enums/index.mjs";
+const meta = {
+  title: "Components/Alert",
+  component: AntAlert,
+  parameters: { controls: { sort: "requiredFirst" } },
+  argTypes: {
+    colorType: {
+      control: { type: "select" },
+      options: Object.values(InputColorType)
+    }
+  }
+};
+export default meta;
+export const Docs = {
+  render: (args) => ({
+    components: { AntAlert },
+    setup() {
+      function logClick() {
+        console.log("Clicked close icon");
+      }
+      return { args, logClick };
+    },
+    template: `
+      <div class="p-4">
+        <AntAlert v-bind="args" @close="logClick">
+          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, <br/>
+          sed diam nonumy eirmod tempor invidunt <br/>
+          ut labore et dolore magna aliquyam erat, <br/>
+          sed diam voluptua. At vero eos et accusam et <br/>
+          justo duo dolores et ea rebum. Stet clita kasd
+        </AntAlert>
+      </div>
+    `
+  }),
+  args: {
+    title: "Lorem ipsum dolor"
+  }
+};
+export const WithContent = {
+  render: Docs.render,
+  args: {
+    ...Docs.args
+  }
+};
+export const WithoutContent = {
+  render: (args, ctx) => ({
+    // @ts-ignore
+    components: Docs.render(args, ctx).components,
+    // @ts-ignore
+    setup: Docs.render(args, ctx).setup,
+    template: `
+      <div class="p-4">
+        <AntAlert v-bind="args" @close="logClick"/>
+      </div>
+    `
+  }),
+  args: {
+    ...Docs.args
+  }
+};
+export const WithQuestionIcon = {
+  render: Docs.render,
+  args: {
+    ...Docs.args,
+    questionMarkText: "Lorem ipsum dolor"
+  }
+};
+export const Skeleton = {
+  render: Docs.render,
+  args: {
+    ...Docs.args,
+    skeleton: true
+  }
+};

package/dist/runtime/components/__stories/AntDropdown.stories.d.ts

@@ -0,0 +1,6 @@
+import AntDropdown from '../AntDropdown.vue';
+import { type Meta, type StoryObj } from '@storybook/vue3';
+declare const meta: Meta<typeof AntDropdown>;
+export default meta;
+type Story = StoryObj<typeof AntDropdown>;
+export declare const Docs: Story;

package/dist/runtime/components/__stories/AntDropdown.stories.mjs

@@ -0,0 +1,52 @@
+import AntDropdown from "../AntDropdown.vue";
+import AntButton from "../buttons/AntButton.vue";
+import { Position } from "../../enums/Position.enum.mjs";
+import { computed } from "vue";
+const meta = {
+  title: "Components/Dropdown",
+  component: AntDropdown,
+  parameters: { controls: { sort: "requiredFirst" } },
+  argTypes: {
+    position: {
+      control: { type: "select" },
+      options: Object.values(Position)
+    },
+    contentPadding: {
+      description: "If the content require a paddingless dropdown to expand over the whole size, set this to false"
+    }
+  }
+};
+export default meta;
+export const Docs = {
+  render: (args) => ({
+    components: { AntDropdown, AntButton },
+    setup() {
+      const showDropdown = computed({
+        get() {
+          return args.showDropdown;
+        },
+        set(val) {
+          args.showDropdown = val;
+        }
+      });
+      return { args, showDropdown };
+    },
+    template: `
+          <div class="p-64 flex justify-center items-center">
+            <AntDropdown dropdown-classes="w-64" v-bind="args" v-model:show-dropdown="showDropdown">
+              <template #content>
+                Lorem ipsum dolor sit amet, consetetur sadipscing
+                elitr, sed diam nonumy eirmod tempor invidunt ut
+                labore et dolore magna aliquyam erat, sed diam voluptua.
+              </template>
+              <template #default>
+                <AntButton @click="() => showDropdown = !showDropdown" filled>Click me</AntButton>
+              </template>
+            </AntDropdown>
+          </div>
+        `
+  }),
+  args: {
+    showDropdown: true
+  }
+};

package/dist/runtime/components/__stories/AntIcon.stories.d.ts

@@ -0,0 +1,8 @@
+import AntIcon from '../AntIcon.vue';
+import { type Meta, type StoryObj } from '@storybook/vue3';
+declare const meta: Meta<typeof AntIcon>;
+export default meta;
+type Story = StoryObj<typeof AntIcon>;
+export declare const Docs: Story;
+export declare const Size: Story;
+export declare const Color: Story;

package/dist/runtime/components/__stories/AntIcon.stories.mjs

@@ -0,0 +1,90 @@
+import AntIcon from "../AntIcon.vue";
+import { faTag } from "@fortawesome/free-solid-svg-icons";
+import { IconSize } from "../__types/AntIcon.types.mjs";
+const meta = {
+  title: "Components/Icon",
+  component: AntIcon,
+  parameters: { controls: { sort: "requiredFirst" } },
+  argTypes: {
+    size: {
+      control: { type: "radio" },
+      options: Object.values(IconSize)
+    },
+    icon: {
+      control: { type: "none" },
+      description: "Use Font-awesome Icons."
+    },
+    color: {
+      control: { type: "text" },
+      description: "A text-* css class to change the color of the icon."
+    }
+  }
+};
+export default meta;
+export const Docs = {
+  render: (args) => ({
+    components: { AntIcon },
+    setup() {
+      return { args };
+    },
+    template: '<AntIcon v-bind="args"/>'
+  }),
+  args: {
+    icon: faTag
+  }
+};
+export const Size = {
+  render: (args) => ({
+    components: { AntIcon },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div class="flex flex-col gap-2.5">
+        <AntIcon v-bind="args" size="sm"/>
+        <AntIcon v-bind="args" size="md"/>
+        <AntIcon v-bind="args" size="3xl"/>
+      </div>
+    `
+  }),
+  args: {
+    icon: faTag
+  }
+};
+export const Color = {
+  render: (args) => ({
+    components: { AntIcon },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div class="flex items-center gap-2.5">
+        <AntIcon v-bind="args" color="text-primary-500"/>
+        <span>primary</span>
+      </div>
+      <div class="flex items-center gap-2.5">
+        <AntIcon v-bind="args" color="text-secondary-500"/>
+        <span>secondary</span>
+      </div>
+      <div class="flex items-center gap-2.5">
+        <AntIcon v-bind="args" color="text-info-500"/>
+        <span>info</span>
+      </div>
+      <div class="flex items-center gap-2.5">
+        <AntIcon v-bind="args" color="text-success-500"/>
+        <span>success</span>
+      </div>
+      <div class="flex items-center gap-2.5">
+        <AntIcon v-bind="args" color="text-info-500">Warning</AntIcon>
+        <span>warning</span>
+      </div>
+      <div class="flex items-center gap-2.5">
+        <AntIcon v-bind="args" color="text-danger-500"/>
+        <span>danger</span>
+      </div>
+    `
+  }),
+  args: {
+    icon: faTag
+  }
+};

package/dist/runtime/components/__stories/AntKeycap.stories.d.ts

@@ -0,0 +1,9 @@
+import AntKeycap from '../AntKeycap.vue';
+import { type Meta, type StoryObj } from "@storybook/vue3";
+declare const meta: Meta<typeof AntKeycap>;
+export default meta;
+type Story = StoryObj<typeof AntKeycap>;
+export declare const Docs: Story;
+export declare const Text: Story;
+export declare const Icon: Story;
+export declare const Summary: Story;

package/dist/runtime/components/__stories/AntKeycap.stories.mjs

@@ -0,0 +1,59 @@
+import AntKeycap from "../AntKeycap.vue";
+import { faChevronUp, faChevronDown } from "@fortawesome/free-solid-svg-icons";
+const meta = {
+  title: "Components/Keycap",
+  component: AntKeycap,
+  parameters: { controls: { sort: "requiredFirst" } },
+  argTypes: {
+    icon: {
+      control: { type: "none" },
+      description: "Will be displayed instead of the default slot if given.<br>Use Font-awesome Icons."
+    }
+  }
+};
+export default meta;
+export const Docs = {
+  render: (args) => ({
+    components: { AntKeycap },
+    setup() {
+      return { args };
+    },
+    template: '<div class="p-4"><AntKeycap v-bind="args">F</AntKeycap></div>'
+  }),
+  args: {}
+};
+export const Text = {
+  render: Docs.render,
+  args: {
+    ...Docs.args
+  }
+};
+export const Icon = {
+  render: Docs.render,
+  args: {
+    ...Docs.args,
+    icon: faChevronUp
+  }
+};
+export const Summary = {
+  render: (args) => ({
+    components: { AntKeycap, faChevronUp, faChevronDown },
+    setup() {
+      return { args, faChevronUp, faChevronDown };
+    },
+    template: `
+          <div class="p-4">
+            Press
+            <AntKeycap v-bind="args" :icon="faChevronUp"/>
+            or
+            <AntKeycap v-bind="args" :icon="faChevronDown"/>
+            to navigate. Press
+            <AntKeycap v-bind="args">ctl</AntKeycap>
+            +
+            <AntKeycap v-bind="args">K</AntKeycap>
+            to search.
+          </div>
+        `
+  }),
+  args: {}
+};

package/dist/runtime/components/__stories/AntListGroup.stories.d.ts

@@ -0,0 +1,7 @@
+import AntListGroup from '../AntListGroup.vue';
+import { type Meta, type StoryObj } from "@storybook/vue3";
+declare const meta: Meta<typeof AntListGroup>;
+export default meta;
+type Story = StoryObj<typeof AntListGroup>;
+export declare const Docs: Story;
+export declare const Skeleton: Story;

package/dist/runtime/components/__stories/AntListGroup.stories.mjs

@@ -0,0 +1,36 @@
+import AntListGroup from "../AntListGroup.vue";
+import AntListGroupItem from "../AntListGroupItem.vue";
+import { faDownload, faMessage, faUser, faCog } from "@fortawesome/free-solid-svg-icons";
+const meta = {
+  title: "Components/List Group",
+  component: AntListGroup,
+  parameters: { controls: { sort: "requiredFirst" } },
+  argTypes: {}
+};
+export default meta;
+export const Docs = {
+  render: (args) => ({
+    components: { AntListGroup, AntListGroupItem },
+    setup() {
+      return { args, faUser, faDownload, faMessage, faCog };
+    },
+    template: `
+          <div class="p-4">
+            <AntListGroup v-bind="args">
+              <AntListGroupItem to="/example" :icon-left="faUser">Profile</AntListGroupItem>
+              <AntListGroupItem to="/example" :icon-left="faDownload">Downloads</AntListGroupItem>
+              <AntListGroupItem to="/example" :icon-left="faMessage">Messages</AntListGroupItem>
+              <AntListGroupItem to="/example" :icon-left="faCog">Settings</AntListGroupItem>
+            </AntListGroup>
+          </div>
+        `
+  }),
+  args: {}
+};
+export const Skeleton = {
+  render: Docs.render,
+  args: {
+    ...Docs.args,
+    skeleton: true
+  }
+};

package/dist/runtime/components/__stories/AntListGroupItem.stories.d.ts

@@ -0,0 +1,10 @@
+import AntListGroupItem from '../AntListGroupItem.vue';
+import { type Meta, type StoryObj } from '@storybook/vue3';
+declare const meta: Meta<typeof AntListGroupItem>;
+export default meta;
+type Story = StoryObj<typeof AntListGroupItem>;
+export declare const Docs: Story;
+export declare const Link: Story;
+export declare const IconLeft: Story;
+export declare const IconRight: Story;
+export declare const IconLeftAndRight: Story;

package/dist/runtime/components/__stories/AntListGroupItem.stories.mjs

@@ -0,0 +1,62 @@
+import AntListGroupItem from "../AntListGroupItem.vue";
+import { faUser, faChevronRight } from "@fortawesome/free-solid-svg-icons";
+import { ListGroupItemColorType } from "../../types/AntListGroupItem.type.mjs";
+const meta = {
+  title: "Components/List Group Item",
+  component: AntListGroupItem,
+  parameters: { controls: { sort: "requiredFirst" } },
+  argTypes: {
+    colorType: {
+      control: { type: "select" },
+      options: Object.values(ListGroupItemColorType)
+    },
+    iconLeft: {
+      control: { type: "none" },
+      description: "Will be displayed right to the default slot.<br>Use Font-awesome Icons."
+    },
+    iconRight: {
+      control: { type: "none" },
+      description: "Will be displayed right to the default slot.<br>Use Font-awesome Icons."
+    }
+  }
+};
+export default meta;
+export const Docs = {
+  render: (args) => ({
+    components: { AntListGroupItem },
+    setup() {
+      return { args };
+    },
+    template: '<div class="p-4 bg-neutral-100"><AntListGroupItem v-bind="args">Item</AntListGroupItem></div>'
+  }),
+  args: {}
+};
+export const Link = {
+  render: Docs.render,
+  args: {
+    ...Docs.args,
+    to: "/example"
+  }
+};
+export const IconLeft = {
+  render: Docs.render,
+  args: {
+    ...Docs.args,
+    iconLeft: faUser
+  }
+};
+export const IconRight = {
+  render: Docs.render,
+  args: {
+    ...Docs.args,
+    iconRight: faChevronRight
+  }
+};
+export const IconLeftAndRight = {
+  render: Docs.render,
+  args: {
+    ...Docs.args,
+    iconLeft: faUser,
+    iconRight: faChevronRight
+  }
+};

package/dist/runtime/components/__stories/AntModal.stories.d.ts

@@ -0,0 +1,7 @@
+import AntModal from '../AntModal.vue';
+import { type Meta, type StoryObj } from '@storybook/vue3';
+declare const meta: Meta<typeof AntModal>;
+export default meta;
+type Story = StoryObj<typeof AntModal>;
+export declare const Docs: Story;
+export declare const Fullscreen: Story;

package/dist/runtime/components/__stories/AntModal.stories.mjs

@@ -0,0 +1,78 @@
+import AntModal from "../AntModal.vue";
+import AntButton from "../buttons/AntButton.vue";
+import { computed } from "vue";
+import AntKeycap from "../AntKeycap.vue";
+const meta = {
+  title: "Components/Modal",
+  component: AntModal,
+  parameters: { controls: { sort: "requiredFirst" } },
+  argTypes: {}
+};
+export default meta;
+export const Docs = {
+  render: (args) => ({
+    components: { AntModal, AntButton, AntKeycap },
+    setup() {
+      const open = computed({
+        // @ts-ignore
+        get: () => args.open,
+        // @ts-ignore
+        set: (val) => args.open = val
+      });
+      return { args, open };
+    },
+    template: `
+      <div
+        class="p-4 h-96 flex items-center justify-center relative"
+        :class="{'border-b border-dashed': args.fullscreen}"
+      >
+        <div class="absolute inset-0">
+          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, <br/>
+          sed diam nonumy eirmod tempor invidunt <br/>
+          ut labore et dolore magna aliquyam erat, <br/>
+          sed diam voluptua. At vero eos et accusam et <br/>
+          justo duo dolores et ea rebum. Stet clita kasd
+        </div>
+        <div class="absolute bottom-0 right-0">
+          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, <br/>
+          sed diam nonumy eirmod tempor invidunt <br/>
+          ut labore et dolore magna aliquyam erat, <br/>
+          sed diam voluptua. At vero eos et accusam et <br/>
+          justo duo dolores et ea rebum. Stet clita kasd
+        </div>
+        <AntButton @click="() => open = true" color-type="primary">Open Modal</AntButton>
+
+        <AntModal v-bind="args" v-model:open="open">
+          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, <br/>
+          sed diam nonumy eirmod tempor invidunt <br/>
+          ut labore et dolore magna aliquyam erat, <br/>
+          sed diam voluptua. At vero eos et accusam et <br/>
+          justo duo dolores et ea rebum. Stet clita kasd
+
+          <template #footer>
+            <div class="flex justify-between items-center">
+              <div>
+                Press
+                <AntKeycap>esc</AntKeycap>
+                to close modal
+              </div>
+
+              <AntButton color-type="primary">Save</AntButton>
+            </div>
+          </template>
+        </AntModal>
+      </div>
+    `
+  }),
+  args: {
+    title: "Lorem ipsum dolor"
+  }
+};
+export const Fullscreen = {
+  render: Docs.render,
+  args: {
+    ...Docs.args,
+    open: true,
+    fullscreen: true
+  }
+};

package/dist/runtime/components/__stories/AntPagination.stories.d.ts

@@ -0,0 +1,8 @@
+import AntPagination from '../AntPagination.vue';
+import { type Meta, type StoryObj } from '@storybook/vue3';
+declare const meta: Meta<typeof AntPagination>;
+export default meta;
+type Story = StoryObj<typeof AntPagination>;
+export declare const Docs: Story;
+export declare const LightVersion: Story;
+export declare const Skeleton: Story;

package/dist/runtime/components/__stories/AntPagination.stories.mjs

@@ -0,0 +1,39 @@
+import AntPagination from "../AntPagination.vue";
+import { faAngleRight } from "@fortawesome/free-solid-svg-icons";
+const meta = {
+  title: "Components/Pagination",
+  component: AntPagination,
+  parameters: { controls: { sort: "requiredFirst" } },
+  argTypes: {
+    pageQuery: {
+      description: "Which query parameter should be used, for writing the current page into it."
+    }
+  }
+};
+export default meta;
+export const Docs = {
+  render: (args) => ({
+    components: { AntPagination },
+    setup() {
+      return { args, faAngleRight };
+    },
+    template: '<AntPagination v-bind="args"/>'
+  }),
+  args: {
+    pages: 20
+  }
+};
+export const LightVersion = {
+  render: Docs.render,
+  args: {
+    ...Docs.args,
+    lightVersion: true
+  }
+};
+export const Skeleton = {
+  render: Docs.render,
+  args: {
+    ...Docs.args,
+    skeleton: true
+  }
+};

package/dist/runtime/components/__stories/AntPopover.stories.d.ts

@@ -0,0 +1,6 @@
+import AntPopover from '../AntPopover.vue';
+import { type Meta, type StoryObj } from '@storybook/vue3';
+declare const meta: Meta<typeof AntPopover>;
+export default meta;
+type Story = StoryObj<typeof AntPopover>;
+export declare const Docs: Story;

package/dist/runtime/components/__stories/AntPopover.stories.mjs

@@ -0,0 +1,47 @@
+import AntPopover from "../AntPopover.vue";
+import AntButton from "../buttons/AntButton.vue";
+import { Position } from "../../enums/Position.enum.mjs";
+import { computed } from "vue";
+const meta = {
+  title: "Components/Popover",
+  component: AntPopover,
+  parameters: { controls: { sort: "requiredFirst" } },
+  argTypes: {
+    position: {
+      control: { type: "select" },
+      options: Object.values(Position)
+    }
+  }
+};
+export default meta;
+export const Docs = {
+  render: (args) => ({
+    components: { AntPopover, AntButton },
+    setup() {
+      const dummyText = "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.";
+      const showPopover = computed({
+        get() {
+          return args.showPopover;
+        },
+        set(val) {
+          args.showPopover = val;
+        }
+      });
+      return { args, showPopover, dummyText };
+    },
+    template: `
+          <div class="p-64 flex justify-center items-center">
+            <AntPopover popover-classes="w-64" v-bind="args">
+              <template #content>{{ dummyText }}</template>
+              <template #default>
+                <AntButton @click="() => showPopover = !showPopover" filled>Click me</AntButton>
+              </template>
+            </AntPopover>
+          </div>
+        `
+  }),
+  args: {
+    showPopover: true,
+    title: "Title"
+  }
+};

package/dist/runtime/components/__stories/AntSkeleton.stories.d.ts

@@ -0,0 +1,8 @@
+import AntSkeleton from '../AntSkeleton.vue';
+import { type Meta, type StoryObj } from '@storybook/vue3';
+declare const meta: Meta<typeof AntSkeleton>;
+export default meta;
+type Story = StoryObj<typeof AntSkeleton>;
+export declare const Docs: Story;
+export declare const Rounded: Story;
+export declare const Grouped: Story;

package/dist/runtime/components/__stories/AntSkeleton.stories.mjs

@@ -0,0 +1,43 @@
+import AntSkeleton from "../AntSkeleton.vue";
+import { Grouped as _Grouped } from "../../enums/Grouped.enum.mjs";
+const meta = {
+  title: "Components/Skeleton",
+  component: AntSkeleton,
+  argTypes: {
+    grouped: {
+      control: { type: "select" },
+      options: Object.values(_Grouped),
+      description: "Where is this fields position in a group",
+      table: { defaultValue: { summary: _Grouped.none } }
+    }
+  }
+};
+export default meta;
+export const Docs = {
+  render: (args) => ({
+    components: { AntSkeleton },
+    setup() {
+      return { args };
+    },
+    template: `
+      <AntSkeleton
+        v-bind="args"
+        class="h-5 w-full"
+      />`
+  }),
+  args: {}
+};
+export const Rounded = {
+  render: Docs.render,
+  args: {
+    ...Docs.args,
+    rounded: true
+  }
+};
+export const Grouped = {
+  render: Docs.render,
+  args: {
+    ...Docs.args,
+    grouped: _Grouped.left
+  }
+};

package/dist/runtime/components/__stories/AntSpinner.stories.d.ts

@@ -0,0 +1,6 @@
+import AntSpinner from '../AntSpinner.vue';
+import { type Meta, type StoryObj } from '@storybook/vue3';
+declare const meta: Meta<typeof AntSpinner>;
+export default meta;
+type Story = StoryObj<typeof AntSpinner>;
+export declare const Docs: Story;