@antify/ui 1.0.0

package/dist/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/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/components/__stories/AntIcon.stories.js

@@ -0,0 +1,122 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+module.exports = exports.Size = exports.Docs = exports.Color = void 0;
+var _AntIcon = _interopRequireDefault(require("../AntIcon.vue"));
+var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
+var _AntIcon2 = require("../__types/AntIcon.types");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const meta = {
+  title: "Components/Icon",
+  component: _AntIcon.default,
+  parameters: {
+    controls: {
+      sort: "requiredFirst"
+    }
+  },
+  argTypes: {
+    size: {
+      control: {
+        type: "select"
+      },
+      options: Object.values(_AntIcon2.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."
+    }
+  }
+};
+module.exports = meta;
+const Docs = exports.Docs = {
+  render: args => ({
+    components: {
+      AntIcon: _AntIcon.default
+    },
+    setup() {
+      return {
+        args
+      };
+    },
+    template: '<AntIcon v-bind="args"/>'
+  }),
+  args: {
+    icon: _freeSolidSvgIcons.faTag
+  }
+};
+const Size = exports.Size = {
+  render: args => ({
+    components: {
+      AntIcon: _AntIcon.default
+    },
+    setup() {
+      return {
+        args
+      };
+    },
+    template: `
+      <div class="flex flex-col gap-2.5">
+				<AntIcon v-bind="args" size="2xs"/>
+				<AntIcon v-bind="args" size="xs"/>
+				<AntIcon v-bind="args" size="sm"/>
+				<AntIcon v-bind="args" size="md"/>
+				<AntIcon v-bind="args" size="lg"/>
+				<AntIcon v-bind="args" size="3xl"/>
+      </div>
+    `
+  }),
+  args: {
+    icon: _freeSolidSvgIcons.faTag
+  }
+};
+const Color = exports.Color = {
+  render: args => ({
+    components: {
+      AntIcon: _AntIcon.default
+    },
+    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: _freeSolidSvgIcons.faTag
+  }
+};

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

@@ -0,0 +1,93 @@
+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: "select" },
+      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="2xs"/>
+				<AntIcon v-bind="args" size="xs"/>
+				<AntIcon v-bind="args" size="sm"/>
+				<AntIcon v-bind="args" size="md"/>
+				<AntIcon v-bind="args" size="lg"/>
+				<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/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/components/__stories/AntKeycap.stories.js

@@ -0,0 +1,98 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+module.exports = exports.Text = exports.Summary = exports.Icon = exports.Docs = void 0;
+var _AntKeycap = _interopRequireDefault(require("../AntKeycap.vue"));
+var _AntKeycap2 = require("../__types/AntKeycap.types");
+var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const meta = {
+  title: "Components/Keycap",
+  component: _AntKeycap.default,
+  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."
+    },
+    size: {
+      control: {
+        type: "select"
+      },
+      options: Object.values(_AntKeycap2.AntKeycapSize)
+    }
+  }
+};
+module.exports = meta;
+const Docs = exports.Docs = {
+  render: args => ({
+    components: {
+      AntKeycap: _AntKeycap.default
+    },
+    setup() {
+      return {
+        args
+      };
+    },
+    template: '<div class="p-4"><AntKeycap v-bind="args">F</AntKeycap></div>'
+  }),
+  args: {
+    size: _AntKeycap2.AntKeycapSize.sm
+  }
+};
+const Text = exports.Text = {
+  render: Docs.render,
+  args: {
+    ...Docs.args
+  }
+};
+const Icon = exports.Icon = {
+  render: Docs.render,
+  args: {
+    ...Docs.args,
+    icon: _freeSolidSvgIcons.faChevronUp
+  }
+};
+const Summary = exports.Summary = {
+  parameters: {
+    chromatic: {
+      disableSnapshot: false
+    }
+  },
+  render: args => ({
+    components: {
+      AntKeycap: _AntKeycap.default,
+      faChevronUp: _freeSolidSvgIcons.faChevronUp,
+      faChevronDown: _freeSolidSvgIcons.faChevronDown
+    },
+    setup() {
+      return {
+        args,
+        faChevronUp: _freeSolidSvgIcons.faChevronUp,
+        faChevronDown: _freeSolidSvgIcons.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/components/__stories/AntKeycap.stories.mjs

@@ -0,0 +1,69 @@
+import AntKeycap from "../AntKeycap.vue";
+import { AntKeycapSize } from "../__types/AntKeycap.types.mjs";
+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."
+    },
+    size: {
+      control: { type: "select" },
+      options: Object.values(AntKeycapSize)
+    }
+  }
+};
+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: {
+    size: AntKeycapSize.sm
+  }
+};
+export const Text = {
+  render: Docs.render,
+  args: {
+    ...Docs.args
+  }
+};
+export const Icon = {
+  render: Docs.render,
+  args: {
+    ...Docs.args,
+    icon: faChevronUp
+  }
+};
+export const Summary = {
+  parameters: {
+    chromatic: { disableSnapshot: false }
+  },
+  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/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/components/__stories/AntListGroup.stories.js

@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+module.exports = exports.Skeleton = exports.Docs = void 0;
+var _AntListGroup = _interopRequireDefault(require("../AntListGroup.vue"));
+var _AntListGroupItem = _interopRequireDefault(require("../AntListGroupItem.vue"));
+var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const meta = {
+  title: "Components/List Group",
+  component: _AntListGroup.default,
+  parameters: {
+    controls: {
+      sort: "requiredFirst"
+    }
+  },
+  argTypes: {}
+};
+module.exports = meta;
+const Docs = exports.Docs = {
+  render: args => ({
+    components: {
+      AntListGroup: _AntListGroup.default,
+      AntListGroupItem: _AntListGroupItem.default
+    },
+    setup() {
+      return {
+        args,
+        faUser: _freeSolidSvgIcons.faUser,
+        faDownload: _freeSolidSvgIcons.faDownload,
+        faMessage: _freeSolidSvgIcons.faMessage,
+        faCog: _freeSolidSvgIcons.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: {}
+};
+const Skeleton = exports.Skeleton = {
+  render: Docs.render,
+  args: {
+    ...Docs.args,
+    skeleton: true
+  }
+};

package/dist/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/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/components/__stories/AntListGroupItem.stories.js

@@ -0,0 +1,83 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+module.exports = exports.Link = exports.IconRight = exports.IconLeftAndRight = exports.IconLeft = exports.Docs = void 0;
+var _AntListGroupItem = _interopRequireDefault(require("../AntListGroupItem.vue"));
+var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
+var _AntListGroupItem2 = require("../__types/AntListGroupItem.types");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const meta = {
+  title: "Components/List Group Item",
+  component: _AntListGroupItem.default,
+  parameters: {
+    controls: {
+      sort: "requiredFirst"
+    }
+  },
+  argTypes: {
+    state: {
+      control: {
+        type: "select"
+      },
+      options: Object.values(_AntListGroupItem2.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."
+    }
+  }
+};
+module.exports = meta;
+const Docs = exports.Docs = {
+  render: args => ({
+    components: {
+      AntListGroupItem: _AntListGroupItem.default
+    },
+    setup() {
+      return {
+        args
+      };
+    },
+    template: '<div class="p-4 bg-neutral-100"><AntListGroupItem v-bind="args">Item</AntListGroupItem></div>'
+  }),
+  args: {}
+};
+const Link = exports.Link = {
+  render: Docs.render,
+  args: {
+    ...Docs.args,
+    to: "/example"
+  }
+};
+const IconLeft = exports.IconLeft = {
+  render: Docs.render,
+  args: {
+    ...Docs.args,
+    iconLeft: _freeSolidSvgIcons.faUser
+  }
+};
+const IconRight = exports.IconRight = {
+  render: Docs.render,
+  args: {
+    ...Docs.args,
+    iconRight: _freeSolidSvgIcons.faChevronRight
+  }
+};
+const IconLeftAndRight = exports.IconLeftAndRight = {
+  render: Docs.render,
+  args: {
+    ...Docs.args,
+    iconLeft: _freeSolidSvgIcons.faUser,
+    iconRight: _freeSolidSvgIcons.faChevronRight
+  }
+};