@antify/ui 1.0.0

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

@@ -0,0 +1,62 @@
+import AntListGroupItem from "../AntListGroupItem.vue";
+import { faUser, faChevronRight } from "@fortawesome/free-solid-svg-icons";
+import { ListGroupItemState } from "../__types/AntListGroupItem.types.mjs";
+const meta = {
+  title: "Components/List Group Item",
+  component: AntListGroupItem,
+  parameters: { controls: { sort: "requiredFirst" } },
+  argTypes: {
+    state: {
+      control: { type: "select" },
+      options: Object.values(ListGroupItemState)
+    },
+    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/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/components/__stories/AntModal.stories.js

@@ -0,0 +1,96 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+module.exports = exports.Fullscreen = exports.Docs = void 0;
+var _AntModal = _interopRequireDefault(require("../AntModal.vue"));
+var _AntButton = _interopRequireDefault(require("../buttons/AntButton.vue"));
+var _vue = require("vue");
+var _AntKeycap = _interopRequireDefault(require("../AntKeycap.vue"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const meta = {
+  title: "Components/Modal",
+  component: _AntModal.default,
+  parameters: {
+    controls: {
+      sort: "requiredFirst"
+    }
+  },
+  argTypes: {}
+};
+module.exports = meta;
+const Docs = exports.Docs = {
+  render: args => ({
+    components: {
+      AntModal: _AntModal.default,
+      AntButton: _AntButton.default,
+      AntKeycap: _AntKeycap.default
+    },
+    setup() {
+      const open = (0, _vue.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" state="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 state="primary">Save</AntButton>
+            </div>
+          </template>
+        </AntModal>
+      </div>
+    `
+  }),
+  args: {
+    title: "Lorem ipsum dolor"
+  }
+};
+const Fullscreen = exports.Fullscreen = {
+  render: Docs.render,
+  args: {
+    ...Docs.args,
+    open: true,
+    fullscreen: true
+  }
+};

package/dist/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" state="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 state="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/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/components/__stories/AntPagination.stories.js

@@ -0,0 +1,57 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+module.exports = exports.Skeleton = exports.LightVersion = exports.Docs = void 0;
+var _AntPagination = _interopRequireDefault(require("../AntPagination.vue"));
+var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
+var _storybookVue3Router = require("storybook-vue3-router");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const meta = {
+  title: "Components/Pagination",
+  component: _AntPagination.default,
+  parameters: {
+    controls: {
+      sort: "requiredFirst"
+    }
+  },
+  argTypes: {
+    pageQuery: {
+      description: "Which query parameter should be used, for writing the current page into it."
+    }
+  },
+  decorators: [(0, _storybookVue3Router.vueRouter)()]
+};
+module.exports = meta;
+const Docs = exports.Docs = {
+  render: args => ({
+    components: {
+      AntPagination: _AntPagination.default
+    },
+    setup() {
+      return {
+        args,
+        faAngleRight: _freeSolidSvgIcons.faAngleRight
+      };
+    },
+    template: '<AntPagination v-bind="args"/>'
+  }),
+  args: {
+    pages: 20
+  }
+};
+const LightVersion = exports.LightVersion = {
+  render: Docs.render,
+  args: {
+    ...Docs.args,
+    lightVersion: true
+  }
+};
+const Skeleton = exports.Skeleton = {
+  render: Docs.render,
+  args: {
+    ...Docs.args,
+    skeleton: true
+  }
+};

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

@@ -0,0 +1,41 @@
+import AntPagination from "../AntPagination.vue";
+import { faAngleRight } from "@fortawesome/free-solid-svg-icons";
+import { vueRouter } from "storybook-vue3-router";
+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."
+    }
+  },
+  decorators: [vueRouter()]
+};
+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/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/components/__stories/AntPopover.stories.js

@@ -0,0 +1,67 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+module.exports = exports.Docs = void 0;
+var _AntPopover = _interopRequireDefault(require("../AntPopover.vue"));
+var _AntButton = _interopRequireDefault(require("../buttons/AntButton.vue"));
+var _Position = require("../../enums/Position.enum");
+var _vue = require("vue");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const meta = {
+  title: "Components/Popover",
+  component: _AntPopover.default,
+  parameters: {
+    controls: {
+      sort: "requiredFirst"
+    }
+  },
+  argTypes: {
+    position: {
+      control: {
+        type: "select"
+      },
+      options: Object.values(_Position.Position)
+    }
+  }
+};
+module.exports = meta;
+const Docs = exports.Docs = {
+  render: args => ({
+    components: {
+      AntPopover: _AntPopover.default,
+      AntButton: _AntButton.default
+    },
+    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 = (0, _vue.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/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/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/components/__stories/AntSkeleton.stories.js

@@ -0,0 +1,60 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+module.exports = exports.Rounded = exports.Grouped = exports.Docs = void 0;
+var _AntSkeleton = _interopRequireDefault(require("../AntSkeleton.vue"));
+var _Grouped2 = require("../../enums/Grouped.enum");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const meta = {
+  title: "Components/Skeleton",
+  component: _AntSkeleton.default,
+  argTypes: {
+    grouped: {
+      control: {
+        type: "select"
+      },
+      options: Object.values(_Grouped2.Grouped),
+      description: "Where is this fields position in a group",
+      table: {
+        defaultValue: {
+          summary: _Grouped2.Grouped.none
+        }
+      }
+    }
+  }
+};
+module.exports = meta;
+const Docs = exports.Docs = {
+  render: args => ({
+    components: {
+      AntSkeleton: _AntSkeleton.default
+    },
+    setup() {
+      return {
+        args
+      };
+    },
+    template: `
+      <AntSkeleton
+        v-bind="args"
+        class="h-5 w-full"
+      />`
+  }),
+  args: {}
+};
+const Rounded = exports.Rounded = {
+  render: Docs.render,
+  args: {
+    ...Docs.args,
+    rounded: true
+  }
+};
+const Grouped = exports.Grouped = {
+  render: Docs.render,
+  args: {
+    ...Docs.args,
+    grouped: _Grouped2.Grouped.left
+  }
+};

package/dist/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/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;

package/dist/components/__stories/AntSpinner.stories.js

@@ -0,0 +1,61 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+module.exports = exports.Docs = void 0;
+var _AntSpinner = _interopRequireDefault(require("../AntSpinner.vue"));
+var _AntSpinner2 = require("../__types/AntSpinner.types");
+var _State = require("../../enums/State.enum");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const meta = {
+  title: "Components/Spinner",
+  component: _AntSpinner.default,
+  parameters: {
+    controls: {
+      sort: "requiredFirst"
+    }
+  },
+  argTypes: {
+    size: {
+      control: {
+        type: "select"
+      },
+      options: Object.values(_AntSpinner2.AntSpinnerSize),
+      table: {
+        defaultValue: {
+          summary: _AntSpinner2.AntSpinnerSize.md
+        }
+      }
+    },
+    state: {
+      control: {
+        type: "select"
+      },
+      options: Object.values(_State.State)
+    },
+    inverted: {
+      control: "boolean",
+      table: {
+        defaultValue: {
+          summary: false
+        }
+      }
+    }
+  }
+};
+module.exports = meta;
+const Docs = exports.Docs = {
+  render: args => ({
+    components: {
+      AntSpinner: _AntSpinner.default
+    },
+    setup() {
+      return {
+        args
+      };
+    },
+    template: '<div class="p-4"><AntSpinner v-bind="args" /></div>'
+  }),
+  args: {}
+};

package/dist/components/__stories/AntSpinner.stories.mjs

@@ -0,0 +1,34 @@
+import AntSpinner from "../AntSpinner.vue";
+import { AntSpinnerSize } from "../__types/AntSpinner.types.mjs";
+import { State } from "../../enums/State.enum.mjs";
+const meta = {
+  title: "Components/Spinner",
+  component: AntSpinner,
+  parameters: { controls: { sort: "requiredFirst" } },
+  argTypes: {
+    size: {
+      control: { type: "select" },
+      options: Object.values(AntSpinnerSize),
+      table: { defaultValue: { summary: AntSpinnerSize.md } }
+    },
+    state: {
+      control: { type: "select" },
+      options: Object.values(State)
+    },
+    inverted: {
+      control: "boolean",
+      table: { defaultValue: { summary: false } }
+    }
+  }
+};
+export default meta;
+export const Docs = {
+  render: (args) => ({
+    components: { AntSpinner },
+    setup() {
+      return { args };
+    },
+    template: '<div class="p-4"><AntSpinner v-bind="args" /></div>'
+  }),
+  args: {}
+};