@antify/ui-module 1.1.3

package/dist/runtime/components/AntSpinner.vue

@@ -0,0 +1,95 @@
+<script lang="ts" setup>
+import {computed, onMounted} from 'vue';
+import {Size} from '../enums/Size.enum'
+import {handleEnumValidation} from '../handler';
+import {ColorType} from '../enums/ColorType.enum';
+
+const props = withDefaults(defineProps<{
+  colorType?: ColorType,
+  size?: Size;
+  inverted?: boolean;
+}>(), {
+  size: Size.md,
+  colorType: ColorType.base,
+  inverted: false
+});
+
+const classes = computed(() => ({
+  'animate-spin': true,
+  'w-4 h-4': props.size === Size.sm,
+  'w-5 h-5': props.size === Size.md,
+}));
+onMounted(() => {
+  handleEnumValidation(props.size, Size, 'size');
+  handleEnumValidation(props.colorType, ColorType, 'colorType');
+});
+const circleClass = computed(() => {
+  const invertedVariants: Record<ColorType, string> = {
+    [ColorType.base]: 'fill-neutral-500',
+    [ColorType.primary]: 'fill-primary-700',
+    [ColorType.secondary]: 'fill-secondary-700',
+    [ColorType.danger]: 'fill-danger-700',
+    [ColorType.info]: 'fill-info-700',
+    [ColorType.success]: 'fill-success-700',
+    [ColorType.warning]: 'fill-warning-700',
+  };
+  const notInvertedVariants: Record<ColorType, string> = {
+    [ColorType.base]: 'fill-neutral-100',
+    [ColorType.primary]: 'fill-primary-100',
+    [ColorType.secondary]: 'fill-secondary-100',
+    [ColorType.danger]: 'fill-danger-100',
+    [ColorType.info]: 'fill-info-100',
+    [ColorType.success]: 'fill-success-100',
+    [ColorType.warning]: 'fill-warning-100',
+  };
+
+  return {
+    [invertedVariants[props.colorType]]: props.inverted,
+    [notInvertedVariants[props.colorType]]: !props.inverted,
+  };
+});
+const spinningElementClass = computed(() => {
+  const invertedVariants: Record<ColorType, string> = {
+    [ColorType.base]: 'fill-neutral-100',
+    [ColorType.primary]: 'fill-primary-100',
+    [ColorType.secondary]: 'fill-secondary-100',
+    [ColorType.danger]: 'fill-danger-100',
+    [ColorType.info]: 'fill-info-100',
+    [ColorType.success]: 'fill-success-100',
+    [ColorType.warning]: 'fill-warning-100',
+  };
+  const notInvertedVariants: Record<ColorType, string> = {
+    [ColorType.base]: 'fill-neutral-500',
+    [ColorType.primary]: 'fill-primary-500',
+    [ColorType.secondary]: 'fill-secondary-500',
+    [ColorType.danger]: 'fill-danger-500',
+    [ColorType.info]: 'fill-info-500',
+    [ColorType.success]: 'fill-success-500',
+    [ColorType.warning]: 'fill-warning-500',
+  };
+
+  return {
+    [invertedVariants[props.colorType]]: props.inverted,
+    [notInvertedVariants[props.colorType]]: !props.inverted,
+  };
+});
+</script>
+
+<template>
+  <svg
+    :class="classes"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    data-e2e="spinner"
+  >
+    <path
+        :class="circleClass"
+        d="M8 16C12.4183 16 16 12.4183 16 8H14C14 11.5346 11.5346 14 8 14C4.46538 14 2 11.5346 2 8C2 4.46538 4.46538 2 8 2V0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16Z"
+    />
+    <path
+        :class="spinningElementClass"
+        d="M16 8C16 6.94942 15.7931 5.90914 15.391 4.93853C14.989 3.96793 14.3997 3.08601 13.6569 2.34315C12.914 1.60028 12.0321 1.011 11.0615 0.608963C10.0909 0.206926 9.05057 -1.7116e-07 8 0L8 2C8.78793 2 9.56815 2.15519 10.2961 2.45672C11.0241 2.75825 11.6855 3.20021 12.2426 3.75736C12.7998 4.31451 13.2417 4.97595 13.5433 5.7039C13.8448 6.43185 14 7.21207 14 8H16Z"
+    />
+  </svg>
+</template>

package/dist/runtime/components/AntTag.vue

@@ -0,0 +1,79 @@
+<script lang="ts" setup>
+import {computed, onMounted} from 'vue';
+import {Size} from '../enums/Size.enum'
+import {TagColorType} from '../types/AntTag.type';
+import {handleEnumValidation} from '../handler';
+import {type IconDefinition} from '@fortawesome/free-solid-svg-icons';
+import {faCircleXmark} from '@fortawesome/free-solid-svg-icons';
+
+const props = withDefaults(defineProps<{
+  colorType?: TagColorType,
+  size?: Size;
+  iconLeft?: IconDefinition;
+  dismiss?: boolean
+}>(), {
+  size: Size.md,
+  colorType: TagColorType.neutral300,
+  dismiss: false
+});
+
+const classes = computed(() => {
+  const variants: Record<TagColorType, string> = {
+    [TagColorType.danger]: 'bg-danger-500 text-danger-500-font',
+    [TagColorType.info]: 'bg-info-500 text-info-500-font',
+    [TagColorType.neutral300]: 'bg-neutral-300 text-neutral-300-font',
+    [TagColorType.neutral50]: 'bg-neutral-50 text-neutral-50-font',
+    [TagColorType.success]: 'bg-success-500 text-success-500-font',
+    [TagColorType.warning]: 'bg-warning-500 text-warning-500-font',
+  };
+
+  return {
+    'rounded-md inline-flex items-center': true,
+    'px-1.5 py-1 text-sm gap-1.5': props.size === Size.md,
+    'px-1 py-0.5 text-xs  gap-1': props.size === Size.sm,
+    [variants[props.colorType]]: true,
+  };
+});
+const iconClasses = computed(() => ({
+  'h-3': props.size === Size.sm,
+  'h-4': props.size === Size.md,
+}));
+
+onMounted(() => {
+  handleEnumValidation(props.size, Size, 'size');
+  handleEnumValidation(props.colorType, TagColorType, 'colorType');
+});
+</script>
+
+<template>
+  <span
+    :class="classes"
+    data-e2e="tag"
+  >
+    <span
+        v-if="iconLeft"
+        class="inline-flex items-center justify-center"
+        :class="{'w-4 h-4': props.size === Size.sm, 'w-5 h-5': props.size === Size.md}"
+    >
+      <fa-icon
+          :icon="iconLeft"
+          :class="iconClasses"
+      />
+    </span>
+
+    <slot/>
+
+    <span
+        v-if="dismiss"
+        class="inline-flex items-center justify-center"
+        :class="{'w-4 h-4': props.size === Size.sm, 'w-5 h-5': props.size === Size.md}"
+    >
+      <fa-icon
+          :icon="faCircleXmark"
+          :class="iconClasses"
+          class="cursor-pointer"
+          @click="() => $emit('close')"
+      />
+    </span>
+  </span>
+</template>

package/dist/runtime/components/AntToast.vue

@@ -0,0 +1,109 @@
+<script lang="ts" setup>
+import {computed, onMounted, useSlots} from 'vue';
+import {handleEnumValidation} from '../handler';
+import {
+  faCheckCircle,
+  faExclamationCircle,
+  faExclamationTriangle,
+  faInfoCircle,
+  faXmark
+} from '@fortawesome/free-solid-svg-icons';
+import AntIcon from './AntIcon.vue';
+import AntButton from './buttons/AntButton.vue';
+import {ColorType, InputColorType} from '../enums';
+
+const props = withDefaults(defineProps<{
+  title?: string,
+  colorType?: InputColorType,
+  showUndo?: boolean,
+  icon?: boolean
+}>(), {
+  colorType: InputColorType.base,
+  showUndo: false,
+  icon: true
+});
+
+const icons = {
+  [InputColorType.base]: faInfoCircle,
+  [InputColorType.info]: faInfoCircle,
+  [InputColorType.danger]: faExclamationCircle,
+  [InputColorType.warning]: faExclamationTriangle,
+  [InputColorType.success]: faCheckCircle,
+};
+
+const _icon = computed(() => icons[props.colorType]);
+const classes = computed(() => {
+  const variants: Record<InputColorType, string> = {
+    [InputColorType.base]: 'bg-neutral-100 border-neutral-500 text-neutral-500',
+    [InputColorType.danger]: 'bg-danger-100 border-danger-500 text-danger-500',
+    [InputColorType.info]: 'bg-info-100 border-info-500 text-info-500',
+    [InputColorType.success]: 'bg-success-100 border-success-500 text-success-500',
+    [InputColorType.warning]: 'bg-warning-100 border-warning-500 text-warning-500',
+  };
+
+  return {
+    'inline-flex flex-col gap-2.5 rounded-md p-2.5 border transition-colors shadow-md': true,
+    [variants[props.colorType]]: true,
+  };
+});
+const hasDefaultSlot = computed(() => useSlots()['default'] || false);
+const iconColor = computed(() => {
+  const variants = {
+    [InputColorType.base]: 'text-neutral-100-font',
+    [InputColorType.danger]: 'text-danger-500',
+    [InputColorType.info]: 'text-info-500',
+    [InputColorType.success]: 'text-success-500',
+    [InputColorType.warning]: 'text-warning-500',
+  };
+
+  return variants[props.colorType];
+});
+
+onMounted(() => {
+  handleEnumValidation(props.colorType, InputColorType, 'colorType');
+});
+</script>
+
+<template>
+  <div
+    :class="classes"
+    data-e2e="toast"
+  >
+    <div class="inline-flex items-center justify-between w-content gap-2.5">
+      <div class="inline-flex items-center gap-2.5">
+        <AntIcon
+          v-if="icon"
+          :icon="_icon"
+          :color="iconColor"
+        />
+
+        <div class="whitespace-pre" :class="{'font-semibold': hasDefaultSlot}">
+          <slot name="title">
+            {{ title }}
+          </slot>
+        </div>
+      </div>
+
+      <AntIcon
+        :icon="faXmark"
+        class="cursor-pointer"
+        :color="iconColor"
+        @click="() => $emit('close')"
+      />
+    </div>
+
+    <div v-if="hasDefaultSlot">
+      <slot/>
+    </div>
+
+    <div v-if="showUndo" class="flex justify-end">
+      <AntButton
+        :color-type="props.colorType as unknown as ColorType"
+        filled
+        @click="() => $emit('undo')"
+      >
+        undo
+      </AntButton>
+    </div>
+  </div>
+</template>

package/dist/runtime/components/AntToaster.vue

@@ -0,0 +1,46 @@
+<script lang="ts" setup>
+/**
+ * To let the toaster show toasts, use the plugin "$uiModule.toaster" property.
+ */
+import {computed} from 'vue';
+import AntToast from './AntToast.vue';
+import {CornerPosition} from '../enums/Position.enum';
+
+const props = withDefaults(defineProps<{
+  position?: CornerPosition;
+}>(), {
+  position: CornerPosition.bottomLeft
+});
+
+const classes = computed(() => ({
+  'left-0 top-0': props.position === CornerPosition.topLeft,
+  'right-0 top-0': props.position === CornerPosition.topRight,
+  'left-0 bottom-0': props.position === CornerPosition.bottomLeft,
+  'right-0 bottom-0': props.position === CornerPosition.bottomRight,
+}));
+</script>
+
+<template>
+  <div
+    class="absolute flex flex-col items-baseline space-y-2.5 p-2.5"
+    :class="classes"
+    data-e2e="toaster"
+  >
+    <TransitionGroup name="list">
+      <AntToast
+        v-for="toast of $uiModule.toaster.getToasts()"
+        :title="toast.title"
+        :color-type="toast.type"
+        :icon="toast.hasIcon"
+        @close="$uiModule.toaster.removeToast(toast)"
+        v-bind:key="`ant-toast-${toast.id}`"
+      >
+        <template v-if="toast.content" #default>{{ toast.content }}</template>
+      </AntToast>
+    </TransitionGroup>
+  </div>
+</template>
+
+<style>
+.list-move{transition:all .5s ease}.list-enter-active{animation:bounce-in-left .6s}.list-leave-active{animation:bounce-in-left .4s reverse}@keyframes bounce-in-left{0%{opacity:0;transform:translateX(-10rem)}50%{opacity:1;transform:translateX(.5rem)}to{opacity:1;transform:translateX(0)}}
+</style>

package/dist/runtime/components/AntTooltip.vue

@@ -0,0 +1,165 @@
+<script lang="ts" setup>
+import {computed, onMounted, ref} from 'vue';
+import {handleEnumValidation} from '../handler';
+import {InputColorType, Position} from '../enums';
+import {classesToObjectSyntax} from '../utils';
+
+const props = withDefaults(defineProps<{
+  content?: string,
+  position?: Position,
+  tooltipClasses?: string | Record<string, boolean>,
+  colorType?: InputColorType
+}>(), {
+  position: Position.left,
+  tooltipClasses: '',
+  colorType: InputColorType.base
+});
+const visible = ref(false);
+const _tooltipClasses = computed(() => ({
+  'absolute w-max inline-flex': true,
+  // Position
+  'bottom-full pb-3.5': props.position === Position.top,
+  'top-full pt-3.5': props.position === Position.bottom,
+  'right-full pr-3.5': props.position === Position.left,
+  'left-full pl-3.5': props.position === Position.right,
+  ...classesToObjectSyntax(props.tooltipClasses)
+}));
+const classes = computed(() => ({
+  'z-10 absolute flex': true,
+  'top-0 left-0 right-0 -m-[2px] justify-center': props.position === Position.bottom,
+  'bottom-0 left-0 right-0 -m-[2px] justify-center': props.position === Position.top,
+  'top-0 left-0 bottom-0 -ml-[2.2px] items-center': props.position === Position.right,
+  'top-0 right-0 bottom-0 -mr-[2.2px] items-center': props.position === Position.left,
+}));
+const itemContainerClasses = computed(() => ({
+  'relative flex items-center': true,
+  'justify-center': props.position === Position.bottom,
+  'justify-center rotate-180': props.position === Position.top,
+  'justify-center -rotate-90': props.position === Position.right,
+  'justify-center rotate-90': props.position === Position.left,
+}));
+const contentClasses = computed(() => {
+  const variants: Record<InputColorType, string> = {
+    [InputColorType.base]: 'text-neutral-50-font bg-neutral-50 border-neutral-300',
+    [InputColorType.danger]: 'text-danger-500-font bg-danger-500 border-danger-500',
+    [InputColorType.info]: 'text-info-500-font bg-info-500 border-info-500',
+    [InputColorType.success]: 'text-success-500-font bg-success-500 border-success-500',
+    [InputColorType.warning]: 'text-warning-500-font bg-warning-500 border-warning-500',
+  };
+
+  return {[variants[props.colorType]]: true};
+});
+const svgPathClasses = computed(() => {
+  const variants: Record<InputColorType, string> = {
+    [InputColorType.base]: 'fill-neutral-50 stroke-neutral-50',
+    [InputColorType.danger]: 'fill-danger-500 stroke-danger-500',
+    [InputColorType.info]: 'fill-info-500 stroke-info-500',
+    [InputColorType.success]: 'fill-success-500 stroke-success-500',
+    [InputColorType.warning]: 'fill-warning-500 stroke-warning-500',
+  };
+
+  return {[variants[props.colorType]]: true};
+});
+const arrowSvgPathClasses = computed(() => {
+  const variants: Record<InputColorType, string> = {
+    [InputColorType.base]: 'stroke-neutral-300',
+    [InputColorType.danger]: 'stroke-danger-500',
+    [InputColorType.info]: 'stroke-info-500',
+    [InputColorType.success]: 'stroke-success-500',
+    [InputColorType.warning]: 'stroke-warning-500',
+  };
+
+  return {[variants[props.colorType]]: true};
+});
+
+onMounted(() => {
+  handleEnumValidation(props.position, Position, 'Position')
+  handleEnumValidation(props.colorType, InputColorType, 'colorType')
+});
+
+/**
+ * To prevent a fliggering ux, add a delay on hover and leaving the hover target,
+ * before showing the tooltip content.
+ */
+const delayVisible = ref(visible.value);
+
+function onMouseOver() {
+  delayVisible.value = true;
+
+  setTimeout(() => {
+    if (delayVisible.value) {
+      visible.value = true
+    }
+  }, 300)
+}
+
+function onMouseLeave() {
+  delayVisible.value = false
+  visible.value = false
+}
+</script>
+
+<template>
+  <div
+    class="relative inline-flex justify-center items-center"
+    data-e2e="tooltip"
+    @mouseover="onMouseOver"
+    @mouseleave="onMouseLeave"
+  >
+    <slot/>
+
+    <div v-if="visible" :class="_tooltipClasses">
+      <div
+        class="shadow-lg text-sm relative inline-flex flex-col relative"
+      >
+        <div
+          :class="classes"
+        >
+          <div
+            :class="itemContainerClasses"
+          >
+            <svg
+              class="absolute mt-[.5px]"
+              width="30"
+              height="8"
+              viewBox="0 0 35 8"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M20.3284 1.82843L23.1569 4.65685C24.6571 6.15715 26.692 7 28.8137 7L6.18629 7C8.30802 7 10.3429 6.15715 11.8431 4.65686L14.6716 1.82843C16.2337 0.266331 18.7663 0.266328 20.3284 1.82843Z"
+                :class="svgPathClasses"
+              />
+
+              <path
+                d="M34.5 7L28.8137 7C26.692 7 24.6571 6.15715 23.1569 4.65685L20.3284 1.82843C18.7663 0.266328 16.2337 0.266331 14.6716 1.82843L11.8431 4.65686C10.3429 6.15715 8.30802 7 6.18629 7L0.5 7L34.5 7Z"
+                :class="svgPathClasses"
+              />
+            </svg>
+
+            <svg
+              class="absolute"
+              width="30"
+              height="8"
+              viewBox="0 0 35 8"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M34.5 7L28.8137 7C26.692 7 24.6571 6.15715 23.1569 4.65685L20.3284 1.82843C18.7663 0.266328 16.2337 0.266331 14.6716 1.82843L11.8431 4.65686C10.3429 6.15715 8.30802 7 6.18629 7L0.5 7"
+                :class="arrowSvgPathClasses"
+              />
+            </svg>
+          </div>
+        </div>
+
+        <div
+          class="p-2.5 rounded-md border"
+          :class="contentClasses"
+        >
+          <slot name="content"/>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

package/dist/runtime/components/Main.stories.mdx

@@ -0,0 +1,10 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+
+<Meta title="Main" />
+
+<h1>This is the storybook for Antify UI.</h1>
+
+<p>
+  Antify UI is a Tailwind based components library for use in Vue 3 / Nuxt
+  projects.{' '}
+</p>

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

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

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

@@ -0,0 +1,97 @@
+import AntAccordion from "../AntAccordion.vue";
+import AntAccordionItem from "../AntAccordionItem.vue";
+import { CollapseStrategy } from "../__types/Accordion.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 = {
+  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."
+      },
+      {
+        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/runtime/components/__stories/AntAlert.stories.d.ts

@@ -0,0 +1,10 @@
+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 WithContent: Story;
+export declare const WithoutContent: Story;
+export declare const WithQuestionIcon: Story;
+export declare const Skeleton: Story;