@antify/ui 1.0.0

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

@@ -0,0 +1,101 @@
+import AntAccordion from "../AntAccordion.vue";
+import AntAccordionItem from "../AntAccordionItem.vue";
+import { CollapseStrategy } from "../__types/AntAccordion.types.mjs";
+const meta = {
+  title: "Components/Accordion",
+  component: AntAccordion,
+  subcomponents: { AntAccordionItem },
+  parameters: { controls: { sort: "requiredFirst" } },
+  argTypes: {
+    collapseStrategy: {
+      control: { type: "select" },
+      options: Object.values(CollapseStrategy)
+    }
+  }
+};
+export default meta;
+export const Docs = {
+  parameters: {
+    chromatic: { disableSnapshot: false }
+  },
+  render: (args) => ({
+    components: { AntAccordion, AntAccordionItem },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div class="p-4">
+        <AntAccordion v-bind="args"/>
+      </div>`
+  }),
+  args: {
+    items: [
+      {
+        label: "First entry",
+        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. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet."
+      },
+      {
+        label: "Second entry",
+        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. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.",
+        iconLeft: true
+      },
+      {
+        label: "Third entry",
+        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. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet."
+      },
+      {
+        label: "Fourth entry",
+        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. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet."
+      }
+    ]
+  }
+};
+export const CustomContent = {
+  render: (args) => ({
+    components: { AntAccordion, AntAccordionItem },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div class="p-4">
+        <AntAccordion v-bind="args">
+          <template #item-content="{item, index}">
+            <div class="text-danger-500">{{ item.content }}</div>
+          </template>
+        </AntAccordion>
+      </div>`
+  }),
+  args: {
+    ...Docs.args
+  }
+};
+export const MultipleCollapseStrategy = {
+  render: Docs.render,
+  args: {
+    ...Docs.args,
+    collapseStrategy: CollapseStrategy.multiple
+  }
+};
+export const htmlInContent = {
+  render: Docs.render,
+  args: {
+    items: [
+      {
+        label: "First entry",
+        content: `Lorem <strong>ipsum</strong> 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`
+      },
+      {
+        label: "Second entry",
+        content: `Lorem <strong>ipsum</strong> 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`
+      }
+    ]
+  }
+};

package/dist/components/__stories/AntAlert.stories.d.ts

@@ -0,0 +1,11 @@
+import AntAlert from '../AntAlert.vue';
+import { type Meta, type StoryObj } from '@storybook/vue3';
+declare const meta: Meta<typeof AntAlert>;
+export default meta;
+type Story = StoryObj<typeof AntAlert>;
+export declare const Docs: Story;
+export declare const WithOutTitle: Story;
+export declare const WithContent: Story;
+export declare const WithoutContent: Story;
+export declare const WithQuestionIcon: Story;
+export declare const Skeleton: Story;

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

@@ -0,0 +1,99 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+module.exports = exports.WithoutContent = exports.WithQuestionIcon = exports.WithOutTitle = exports.WithContent = exports.Skeleton = exports.Docs = void 0;
+var _AntAlert = _interopRequireDefault(require("../AntAlert.vue"));
+var _enums = require("../../enums");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const meta = {
+  title: "Components/Alert",
+  component: _AntAlert.default,
+  parameters: {
+    controls: {
+      sort: "requiredFirst"
+    }
+  },
+  argTypes: {
+    state: {
+      control: {
+        type: "select"
+      },
+      options: Object.values(_enums.InputState)
+    }
+  }
+};
+module.exports = meta;
+const Docs = exports.Docs = {
+  render: args => ({
+    components: {
+      AntAlert: _AntAlert.default
+    },
+    setup() {
+      function logClick() {
+        console.log("Clicked close icon");
+      }
+      return {
+        args,
+        logClick
+      };
+    },
+    template: `
+			<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>
+    `
+  }),
+  args: {
+    title: "Lorem ipsum dolor"
+  }
+};
+const WithOutTitle = exports.WithOutTitle = {
+  render: Docs.render,
+  args: {
+    title: "",
+    dismissBtn: false,
+    icon: false
+  }
+};
+const WithContent = exports.WithContent = {
+  render: Docs.render,
+  args: {
+    ...Docs.args
+  }
+};
+const WithoutContent = exports.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
+  }
+};
+const WithQuestionIcon = exports.WithQuestionIcon = {
+  render: Docs.render,
+  args: {
+    ...Docs.args,
+    questionMarkText: "Lorem ipsum dolor"
+  }
+};
+const Skeleton = exports.Skeleton = {
+  render: Docs.render,
+  args: {
+    ...Docs.args,
+    skeleton: true
+  }
+};

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

@@ -0,0 +1,81 @@
+import AntAlert from "../AntAlert.vue";
+import { InputState } from "../../enums/index.mjs";
+const meta = {
+  title: "Components/Alert",
+  component: AntAlert,
+  parameters: { controls: { sort: "requiredFirst" } },
+  argTypes: {
+    state: {
+      control: { type: "select" },
+      options: Object.values(InputState)
+    }
+  }
+};
+export default meta;
+export const Docs = {
+  render: (args) => ({
+    components: { AntAlert },
+    setup() {
+      function logClick() {
+        console.log("Clicked close icon");
+      }
+      return { args, logClick };
+    },
+    template: `
+			<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>
+    `
+  }),
+  args: {
+    title: "Lorem ipsum dolor"
+  }
+};
+export const WithOutTitle = {
+  render: Docs.render,
+  args: {
+    title: "",
+    dismissBtn: false,
+    icon: false
+  }
+};
+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/components/__stories/AntCard.stories.d.ts

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

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

@@ -0,0 +1,118 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+module.exports = exports.Summary = exports.Docs = void 0;
+var _AntCard = _interopRequireDefault(require("../AntCard.vue"));
+var _enums = require("../../enums");
+var _AntFormGroup = _interopRequireDefault(require("../forms/AntFormGroup.vue"));
+var _AntFormGroupLabel = _interopRequireDefault(require("../forms/AntFormGroupLabel.vue"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const meta = {
+  title: "Components/Card",
+  component: _AntCard.default,
+  parameters: {
+    controls: {
+      sort: "requiredFirst"
+    }
+  },
+  argTypes: {
+    size: {
+      control: {
+        type: "select"
+      },
+      options: Object.values(_enums.Size)
+    },
+    padding: {
+      control: {
+        type: "boolean"
+      }
+    },
+    expanded: {
+      control: {
+        type: "boolean"
+      }
+    }
+  }
+};
+module.exports = meta;
+const Docs = exports.Docs = {
+  render: args => ({
+    components: {
+      AntCard: _AntCard.default
+    },
+    setup() {
+      return {
+        args,
+        Size: _enums.Size
+      };
+    },
+    template: `
+      <AntCard v-bind="args">
+        <div
+          class="slot h-40"
+          :class="args.expanded ? 'w-full' : 'w-48'"
+        >
+          SLOT
+        </div>
+      </AntCard>
+    `
+  }),
+  args: {}
+};
+const Summary = exports.Summary = {
+  parameters: {
+    chromatic: {
+      disableSnapshot: false
+    }
+  },
+  render: args => ({
+    components: {
+      AntCard: _AntCard.default,
+      AntFormGroup: _AntFormGroup.default,
+      AntFormGroupLabel: _AntFormGroupLabel.default
+    },
+    setup() {
+      return {
+        args,
+        Size: _enums.Size
+      };
+    },
+    template: `
+      <AntFormGroup direction="column">
+        <AntFormGroupLabel>Size</AntFormGroupLabel>
+        <AntFormGroup direction="row">
+          <AntCard v-bind="args" :size="Size.lg" :expanded="true">
+            <div class="slot h-40">SLOT</div>
+          </AntCard>
+          <AntCard v-bind="args" :size="Size.md" :expanded="true">
+            <div class="slot h-full">SLOT</div>
+          </AntCard>
+          <AntCard v-bind="args" :size="Size.sm" :expanded="true">
+            <div class="slot h-full">SLOT</div>
+          </AntCard>
+          <AntCard v-bind="args" :size="Size.xs" :expanded="true">
+            <div class="slot h-full">SLOT</div>
+          </AntCard>
+          <AntCard v-bind="args" :size="Size.xs2" :expanded="true">
+            <div class="slot h-full">SLOT</div>
+          </AntCard>
+        </AntFormGroup>
+        <AntFormGroupLabel>Paddingles</AntFormGroupLabel>
+        <AntCard v-bind="args" :padding="false" class="w-48">
+          <div class="slot h-40">SLOT</div>
+        </AntCard>
+        <AntFormGroupLabel>Expanded</AntFormGroupLabel>
+        <AntFormGroup direction="row">
+          <AntCard v-bind="args" class="w-48">
+            <div class="slot h-40">SLOT</div>
+          </AntCard>
+          <AntCard v-bind="args" :expanded="true">
+            <div class="slot h-40">SLOT</div>
+          </AntCard>
+        </AntFormGroup>
+      </AntFormGroup>`
+  }),
+  args: {}
+};

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

@@ -0,0 +1,87 @@
+import AntCard from "../AntCard.vue";
+import { Size } from "../../enums/index.mjs";
+import AntFormGroup from "../forms/AntFormGroup.vue";
+import AntFormGroupLabel from "../forms/AntFormGroupLabel.vue";
+const meta = {
+  title: "Components/Card",
+  component: AntCard,
+  parameters: { controls: { sort: "requiredFirst" } },
+  argTypes: {
+    size: {
+      control: { type: "select" },
+      options: Object.values(Size)
+    },
+    padding: {
+      control: { type: "boolean" }
+    },
+    expanded: {
+      control: { type: "boolean" }
+    }
+  }
+};
+export default meta;
+export const Docs = {
+  render: (args) => ({
+    components: { AntCard },
+    setup() {
+      return { args, Size };
+    },
+    template: `
+      <AntCard v-bind="args">
+        <div
+          class="slot h-40"
+          :class="args.expanded ? 'w-full' : 'w-48'"
+        >
+          SLOT
+        </div>
+      </AntCard>
+    `
+  }),
+  args: {}
+};
+export const Summary = {
+  parameters: {
+    chromatic: { disableSnapshot: false }
+  },
+  render: (args) => ({
+    components: { AntCard, AntFormGroup, AntFormGroupLabel },
+    setup() {
+      return { args, Size };
+    },
+    template: `
+      <AntFormGroup direction="column">
+        <AntFormGroupLabel>Size</AntFormGroupLabel>
+        <AntFormGroup direction="row">
+          <AntCard v-bind="args" :size="Size.lg" :expanded="true">
+            <div class="slot h-40">SLOT</div>
+          </AntCard>
+          <AntCard v-bind="args" :size="Size.md" :expanded="true">
+            <div class="slot h-full">SLOT</div>
+          </AntCard>
+          <AntCard v-bind="args" :size="Size.sm" :expanded="true">
+            <div class="slot h-full">SLOT</div>
+          </AntCard>
+          <AntCard v-bind="args" :size="Size.xs" :expanded="true">
+            <div class="slot h-full">SLOT</div>
+          </AntCard>
+          <AntCard v-bind="args" :size="Size.xs2" :expanded="true">
+            <div class="slot h-full">SLOT</div>
+          </AntCard>
+        </AntFormGroup>
+        <AntFormGroupLabel>Paddingles</AntFormGroupLabel>
+        <AntCard v-bind="args" :padding="false" class="w-48">
+          <div class="slot h-40">SLOT</div>
+        </AntCard>
+        <AntFormGroupLabel>Expanded</AntFormGroupLabel>
+        <AntFormGroup direction="row">
+          <AntCard v-bind="args" class="w-48">
+            <div class="slot h-40">SLOT</div>
+          </AntCard>
+          <AntCard v-bind="args" :expanded="true">
+            <div class="slot h-40">SLOT</div>
+          </AntCard>
+        </AntFormGroup>
+      </AntFormGroup>`
+  }),
+  args: {}
+};

package/dist/components/__stories/AntContent.stories.d.ts

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

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

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+module.exports = exports.Docs = void 0;
+var _AntContent = _interopRequireDefault(require("../AntContent.vue"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const meta = {
+  title: "Components/Content",
+  component: _AntContent.default,
+  parameters: {
+    controls: {
+      sort: "requiredFirst"
+    }
+  },
+  argTypes: {}
+};
+module.exports = meta;
+const Docs = exports.Docs = {
+  parameters: {
+    chromatic: {
+      disableSnapshot: false
+    }
+  },
+  render: args => ({
+    components: {
+      AntContent: _AntContent.default
+    },
+    setup() {
+      return {
+        args
+      };
+    },
+    template: `
+			<div class="outline outline-neutral-300">
+				<AntContent v-bind="args" class="h-40">
+					<div class="slot h-60">SLOT</div>
+				</AntContent>
+			</div>`
+  }),
+  args: {}
+};

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

@@ -0,0 +1,26 @@
+import AntContent from "../AntContent.vue";
+const meta = {
+  title: "Components/Content",
+  component: AntContent,
+  parameters: { controls: { sort: "requiredFirst" } },
+  argTypes: {}
+};
+export default meta;
+export const Docs = {
+  parameters: {
+    chromatic: { disableSnapshot: false }
+  },
+  render: (args) => ({
+    components: { AntContent },
+    setup() {
+      return { args };
+    },
+    template: `
+			<div class="outline outline-neutral-300">
+				<AntContent v-bind="args" class="h-40">
+					<div class="slot h-60">SLOT</div>
+				</AntContent>
+			</div>`
+  }),
+  args: {}
+};

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

@@ -0,0 +1,71 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+module.exports = exports.Docs = void 0;
+var _AntDropdown = _interopRequireDefault(require("../AntDropdown.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/Dropdown",
+  component: _AntDropdown.default,
+  parameters: {
+    controls: {
+      sort: "requiredFirst"
+    }
+  },
+  argTypes: {
+    position: {
+      control: {
+        type: "select"
+      },
+      options: Object.values(_Position.Position)
+    },
+    contentPadding: {
+      description: "If the content require a paddingless dropdown to expand over the whole size, set this to false"
+    }
+  }
+};
+module.exports = meta;
+const Docs = exports.Docs = {
+  render: args => ({
+    components: {
+      AntDropdown: _AntDropdown.default,
+      AntButton: _AntButton.default
+    },
+    setup() {
+      const showDropdown = (0, _vue.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
+  }
+};