@antify/ui-module 1.1.3

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

@@ -0,0 +1,34 @@
+import AntSpinner from "../AntSpinner.vue";
+import { Size } from "../../enums/Size.enum.mjs";
+import { ColorType } from "../../enums/ColorType.enum.mjs";
+const meta = {
+  title: "Components/Spinner",
+  component: AntSpinner,
+  parameters: { controls: { sort: "requiredFirst" } },
+  argTypes: {
+    size: {
+      control: { type: "radio" },
+      options: Object.values(Size),
+      table: { defaultValue: { summary: Size.md } }
+    },
+    colorType: {
+      control: { type: "select" },
+      options: Object.values(ColorType)
+    },
+    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: {}
+};

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

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

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

@@ -0,0 +1,44 @@
+import AntTag from "../AntTag.vue";
+import { Size } from "../../enums/Size.enum.mjs";
+import { TagColorType } from "../../types/AntTag.type.mjs";
+import { faTag } from "@fortawesome/free-solid-svg-icons";
+const meta = {
+  title: "Components/Tag",
+  component: AntTag,
+  parameters: { controls: { sort: "requiredFirst" } },
+  argTypes: {
+    size: {
+      control: { type: "radio" },
+      options: Object.values(Size)
+    },
+    colorType: {
+      control: { type: "select" },
+      options: Object.values(TagColorType)
+    },
+    iconLeft: {
+      control: { type: "none" },
+      description: "Will be displayed left to the default slot.<br>Use Font-awesome Icons."
+    }
+  }
+};
+export default meta;
+export const Docs = {
+  render: (args) => ({
+    components: { AntTag },
+    setup() {
+      function logClick() {
+        console.log("Clicked close icon");
+      }
+      return { args, logClick };
+    },
+    template: '<div class="p-4"><AntTag v-bind="args" @close="logClick">Tag</AntTag></div>'
+  }),
+  args: {}
+};
+export const IconLeft = {
+  render: Docs.render,
+  args: {
+    ...Docs.args,
+    iconLeft: faTag
+  }
+};

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

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

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

@@ -0,0 +1,66 @@
+import AntToast from "../AntToast.vue";
+import { InputColorType } from "../../enums/index.mjs";
+const meta = {
+  title: "Components/Toast",
+  component: AntToast,
+  parameters: { controls: { sort: "requiredFirst" } },
+  argTypes: {
+    colorType: {
+      control: { type: "select" },
+      options: Object.values(InputColorType)
+    }
+  }
+};
+export default meta;
+export const Docs = {
+  render: (args) => ({
+    components: { AntToast },
+    setup() {
+      function logClick() {
+        console.log("Clicked close icon");
+      }
+      function logUndoClick() {
+        console.log("Clicked undo button");
+      }
+      return { args, logClick, logUndoClick };
+    },
+    template: `
+      <div class="p-4">
+        <AntToast v-bind="args" @close="logClick" @undo="logUndoClick">
+          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
+        </AntToast>
+      </div>
+    `
+  }),
+  args: {
+    title: "Lorem ipsum dolor",
+    showUndo: true
+  }
+};
+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">
+        <AntToast v-bind="args" @close="logClick" @undo="logUndoClick"></AntToast>
+      </div>
+    `
+  }),
+  args: {
+    ...Docs.args,
+    showUndo: false
+  }
+};

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

@@ -0,0 +1,34 @@
+import { InputColorType } from '../../enums';
+declare const _default: {
+    title: string;
+    parameters: {
+        controls: {
+            sort: string;
+        };
+    };
+    argTypes: {
+        position: {
+            description: string;
+            table: {
+                defaultValue: {
+                    summary: string;
+                };
+                type: {
+                    summary: string;
+                    detail: string;
+                };
+            };
+        };
+    };
+};
+export default _default;
+export declare const Simple: (args: any) => {
+    components: {
+        AntButton: any;
+    };
+    setup(): {
+        args: any;
+        InputColorType: typeof InputColorType;
+    };
+    template: string;
+};

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

@@ -0,0 +1,42 @@
+import AntButton from "../buttons/AntButton.vue";
+import { CornerPosition, InputColorType } from "../../enums/index.mjs";
+import { enumToPlainText } from "../../utils.mjs";
+export default {
+  title: "Components/Toaster",
+  parameters: { controls: { sort: "requiredFirst" } },
+  argTypes: {
+    position: {
+      description: "Defines where the toasts will appear",
+      table: {
+        defaultValue: {
+          summary: "CornerPosition.bottomRight"
+        },
+        type: {
+          summary: "CornerPosition",
+          detail: enumToPlainText(CornerPosition, "CornerPosition")
+        }
+      }
+    }
+  }
+};
+export const Simple = (args) => ({
+  components: { AntButton },
+  setup() {
+    return { args, InputColorType };
+  },
+  template: `
+    <div class="flex flex-col m-4 space-y-2">
+      <p>
+        This module use the <code>useNuxtApp</code> and <code>defineNuxtPlugin</code> functions to provide the toaster to the app. <br>
+        Because storybook does not support nuxt enternals, the component is not useable here. <br>
+        To test it, open the nuxt playground.
+      </p>
+
+      <AntButton
+          v-for="colorType in Object.values(InputColorType)"
+      >
+        Toast {{ colorType }}
+      </AntButton>
+    </div>
+  `
+});

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

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

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

@@ -0,0 +1,43 @@
+import AntTooltip from "../AntTooltip.vue";
+import AntButton from "../buttons/AntButton.vue";
+import { Position } from "../../enums/Position.enum.mjs";
+import { InputColorType } from "../../enums/index.mjs";
+const meta = {
+  title: "Components/Tooltip",
+  component: AntTooltip,
+  parameters: { controls: { sort: "requiredFirst" } },
+  argTypes: {
+    position: {
+      control: { type: "select" },
+      options: Object.values(Position)
+    },
+    colorType: {
+      control: { type: "select" },
+      options: Object.values(InputColorType)
+    }
+  }
+};
+export default meta;
+export const Docs = {
+  render: (args) => ({
+    components: { AntTooltip, AntButton },
+    setup() {
+      return { args };
+    },
+    template: `
+          <div class="p-32 flex justify-center items-center">
+            <AntTooltip v-bind="args">
+              <template #content>Lorem ipsum dolor sit amet <br/> foo</template>
+              <template #default>
+                <span class="text-primary-500 bg-danger-500">
+                  Hover me
+                </span>
+              </template>
+            </AntTooltip>
+          </div>
+        `
+  }),
+  args: {
+    position: Position.top
+  }
+};

package/dist/runtime/components/__types/Accordion.types.d.ts

@@ -0,0 +1,4 @@
+export declare enum CollapseStrategy {
+    single = "single",
+    multiple = "multiple"
+}

package/dist/runtime/components/__types/Accordion.types.mjs

@@ -0,0 +1,5 @@
+export var CollapseStrategy = /* @__PURE__ */ ((CollapseStrategy2) => {
+  CollapseStrategy2["single"] = "single";
+  CollapseStrategy2["multiple"] = "multiple";
+  return CollapseStrategy2;
+})(CollapseStrategy || {});

package/dist/runtime/components/__types/AntIcon.types.d.ts

@@ -0,0 +1,5 @@
+export declare enum IconSize {
+    sm = "sm",
+    md = "md",
+    xl3 = "3xl"
+}

package/dist/runtime/components/__types/AntIcon.types.mjs

@@ -0,0 +1,6 @@
+export var IconSize = /* @__PURE__ */ ((IconSize2) => {
+  IconSize2["sm"] = "sm";
+  IconSize2["md"] = "md";
+  IconSize2["xl3"] = "3xl";
+  return IconSize2;
+})(IconSize || {});

package/dist/runtime/components/__types/AntToaster.types.d.ts

@@ -0,0 +1,8 @@
+import { InputColorType } from '../../enums';
+export type Toast = {
+    id?: string;
+    title: string;
+    content?: string;
+    type: InputColorType;
+    hasIcon?: boolean;
+};

package/dist/runtime/components/__types/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Accordion.types';
+export * from './AntIcon.types';

package/dist/runtime/components/__types/index.mjs

@@ -0,0 +1,2 @@
+export * from "./Accordion.types.mjs";
+export * from "./AntIcon.types.mjs";

package/dist/runtime/components/buttons/AntButton.vue

@@ -0,0 +1,227 @@
+<script lang="ts" setup>
+import {type IconDefinition} from '@fortawesome/free-solid-svg-icons';
+import {computed, onMounted} from 'vue';
+import {type RouteLocationRaw} from 'vue-router';
+import AntSkeleton from '../AntSkeleton.vue';
+import AntSpinner from '../AntSpinner.vue';
+import {Grouped} from '../../enums/Grouped.enum';
+import {Size} from '../../enums/Size.enum';
+import {handleEnumValidation} from '../../handler';
+import {ColorType} from '../../enums';
+import {ButtonType} from './__types';
+import AntIcon from '../AntIcon.vue';
+import {IconSize} from '../__types/AntIcon.types';
+
+defineEmits(['click', 'blur']);
+
+const props = withDefaults(defineProps<{
+  filled?: boolean;
+  size?: Size;
+  colorType?: ColorType;
+  iconLeft?: IconDefinition;
+  iconRight?: IconDefinition;
+  to?: RouteLocationRaw;
+  disabled?: boolean;
+  grouped?: Grouped;
+  skeleton?: boolean;
+  spinner?: boolean;
+  readonly?: boolean;
+  expanded?: boolean;
+  submit?: boolean;
+  outlined?: boolean;
+  noFocus?: boolean;
+}>(), {
+  colorType: ColorType.base,
+  disabled: false,
+  filled: false,
+  skeleton: false,
+  spinner: false,
+  size: Size.md,
+  grouped: Grouped.none,
+  readonly: false,
+  expanded: false,
+  submit: false,
+  outlined: true,
+  noFocus: false,
+});
+
+const hasAction = computed(() => (props.skeleton || props.readonly || props.disabled))
+const groupedClassList = computed(() => ({
+  'rounded-tl-md rounded-bl-md rounded-tr-none rounded-br-none -mr-px': props.grouped === Grouped.left,
+  'rounded-none -mx-px': props.grouped === Grouped.center,
+  'rounded-tl-none rounded-bl-none rounded-tr-md rounded-br-md -ml-px': props.grouped === Grouped.right,
+  'rounded-md': props.grouped === Grouped.none,
+}));
+const classes = computed(() => {
+  const variants = {
+    [ColorType.base]: 'ring-primary-200 outline-neutral-300',
+    [ColorType.danger]: 'ring-danger-200 outline-danger-500',
+    [ColorType.info]: 'ring-info-200 outline-info-500',
+    [ColorType.primary]: 'ring-primary-200 outline-primary-500',
+    [ColorType.secondary]: 'ring-secondary-200 outline-secondary-500',
+    [ColorType.success]: 'ring-success-200 outline-success-500',
+    [ColorType.warning]: 'ring-warning-200 outline-warning-500',
+  };
+  const notFilledVariants = {
+    [ColorType.base]: 'bg-white text-neutral-50-font',
+    [ColorType.danger]: 'bg-white text-danger-500',
+    [ColorType.info]: 'bg-white text-info-500',
+    [ColorType.primary]: 'bg-white text-primary-500',
+    [ColorType.secondary]: 'bg-white text-secondary-500',
+    [ColorType.success]: 'bg-white text-success-500',
+    [ColorType.warning]: 'bg-white text-warning-500',
+  };
+  const notFilledHoverVariants = {
+    [ColorType.base]: 'hover:bg-neutral-100',
+    [ColorType.danger]: 'hover:bg-danger-100',
+    [ColorType.info]: 'hover:bg-info-100',
+    [ColorType.primary]: 'hover:bg-primary-100',
+    [ColorType.secondary]: 'hover:bg-secondary-100',
+    [ColorType.success]: 'hover:bg-success-100',
+    [ColorType.warning]: 'hover:bg-warning-100',
+  };
+  const filledVariants = {
+    [ColorType.base]: 'bg-neutral-50 text-neutral-50-font',
+    [ColorType.danger]: 'bg-danger-500 text-danger-500-font',
+    [ColorType.info]: 'bg-info-500 text-info-500-font',
+    [ColorType.primary]: 'bg-primary-500 text-primary-500-font',
+    [ColorType.secondary]: 'bg-secondary-500 text-secondary-500-font',
+    [ColorType.success]: 'bg-success-500 text-success-500-font',
+    [ColorType.warning]: 'bg-warning-500 text-warning-500-font',
+  };
+  const filledHoverVariants = {
+    [ColorType.base]: 'hover:bg-neutral-200',
+    [ColorType.danger]: 'hover:bg-danger-600',
+    [ColorType.info]: 'hover:bg-info-600',
+    [ColorType.primary]: 'hover:bg-primary-600',
+    [ColorType.secondary]: 'hover:bg-secondary-600',
+    [ColorType.success]: 'hover:bg-success-600',
+    [ColorType.warning]: 'hover:bg-warning-600',
+  };
+
+  return {
+    'transition-all inline-flex items-center justify-center relative font-medium': true,
+    'focus:z-10': true,
+    'active:shadow-[inset_0_4px_4px_rgba(0,0,0,0.25)]': !props.readonly,
+    'py-1.5 px-2.5 text-xs gap-1': props.size === Size.sm,
+    'py-2.5 px-3.5 text-sm gap-2.5': props.size === Size.md,
+    'disabled:opacity-50 disabled:cursor-not-allowed': true,
+    'cursor-default': props.readonly,
+    'focus:ring-2': !props.readonly && props.size === Size.sm,
+    'focus:ring-4': !props.readonly && props.size === Size.md,
+    'w-full': props.expanded,
+    'invisible': props.skeleton,
+    'outline outline-1 outline-offset-[-1px]': props.outlined,
+    ...groupedClassList.value,
+    [variants[props.colorType]]: true,
+    [notFilledVariants[props.colorType]]: !props.filled,
+    [notFilledHoverVariants[props.colorType]]: !props.filled && !props.readonly,
+    [filledVariants[props.colorType]]: props.filled,
+    [filledHoverVariants[props.colorType]]: props.filled && !props.readonly,
+  };
+});
+const iconColor = computed(() => {
+  const notFilledVariants = {
+    [ColorType.base]: 'text-neutral-50-font',
+    [ColorType.danger]: 'text-danger-500',
+    [ColorType.info]: 'text-info-500',
+    [ColorType.primary]: 'text-primary-500',
+    [ColorType.secondary]: 'text-secondary-500',
+    [ColorType.success]: 'text-success-500',
+    [ColorType.warning]: 'text-warning-500',
+  };
+  const filledVariants = {
+    [ColorType.base]: 'text-neutral-50-font',
+    [ColorType.danger]: 'text-danger-500-font',
+    [ColorType.info]: 'text-info-500-font',
+    [ColorType.primary]: 'text-primary-500-font',
+    [ColorType.secondary]: 'text-secondary-500-font',
+    [ColorType.success]: 'text-success-500-font',
+    [ColorType.warning]: 'text-warning-500-font',
+  };
+
+  return props.filled ? filledVariants[props.colorType] : notFilledVariants[props.colorType];
+});
+const type = computed(() => {
+  if (props.to !== undefined) {
+    return undefined;
+  }
+
+  return props.submit ? ButtonType.submit : ButtonType.button;
+});
+const is = computed(() => {
+  if (props.readonly) {
+    return 'div';
+  }
+
+  return props.to !== undefined ? 'router-link' : 'button'
+})
+
+onMounted(() => {
+  handleEnumValidation(props.size, Size, 'size');
+  handleEnumValidation(props.colorType, ColorType, 'colorType');
+  handleEnumValidation(props.grouped, Grouped, 'grouped');
+});
+</script>
+
+<template>
+  <div
+    class="relative inline-flex h-fit"
+    :class="{'w-full': props.expanded}"
+    data-e2e="button"
+    :data-e2e-color-type="props.colorType"
+  >
+    <AntSkeleton
+      v-if="skeleton"
+      :grouped="grouped"
+      rounded
+      absolute
+    />
+
+    <component
+      :is="is"
+      :class="classes"
+      :type="type"
+      :to="to"
+      :disabled="disabled || undefined"
+      :tabindex="noFocus || hasAction ? '-1' : '0'"
+      @click="() => !props.readonly ? $emit('click') : null"
+      @blur="() => !props.readonly ? $emit('blur') : null"
+    >
+      <AntSpinner
+        v-if="spinner"
+        :size="size"
+        :color-type="colorType"
+        :inverted="!filled"
+      />
+
+      <slot
+        v-if="!spinner"
+        name="icon-left"
+      >
+        <AntIcon
+          v-if="iconLeft"
+          :icon="iconLeft"
+          :size="size as unknown as IconSize"
+          :color="iconColor"
+        />
+      </slot>
+
+      <slot
+        v-if="!spinner"
+      />
+
+      <slot
+        v-if="!spinner"
+        name="icon-right"
+      >
+        <AntIcon
+          v-if="iconRight"
+          :icon="iconRight"
+          :size="size as unknown as IconSize"
+          :color="iconColor"
+        />
+      </slot>
+    </component>
+  </div>
+</template>

package/dist/runtime/components/buttons/AntCreateButton.vue

@@ -0,0 +1,32 @@
+<script lang="ts" setup>
+import {Grouped} from '../../enums/Grouped.enum';
+import {Size} from '../../enums/Size.enum';
+import {ColorType} from '../../enums/ColorType.enum';
+import AntButton from './AntButton.vue';
+
+defineEmits(['click', 'blur']);
+defineProps<{
+  size?: Size;
+  disabled?: boolean;
+  grouped?: Grouped;
+  skeleton?: boolean;
+  expanded?: boolean;
+}>()
+</script>
+
+<template>
+  <AntButton
+    :size="size"
+    :disabled="disabled"
+    :grouped="grouped"
+    :skeleton="skeleton"
+    :expanded="expanded"
+    :color-type="ColorType.primary"
+    filled
+    data-e2e="create-button"
+    @click="$emit('click')"
+    @blur="$emit('blur')"
+  >
+    Create
+  </AntButton>
+</template>

package/dist/runtime/components/buttons/AntDeleteButton.vue

@@ -0,0 +1,32 @@
+<script lang="ts" setup>
+import {Grouped} from '../../enums/Grouped.enum';
+import {Size} from '../../enums/Size.enum';
+import {ColorType} from '../../enums/ColorType.enum';
+import AntButton from './AntButton.vue';
+
+defineEmits(['click', 'blur']);
+defineProps<{
+  size?: Size;
+  disabled?: boolean;
+  grouped?: Grouped;
+  skeleton?: boolean;
+  expanded?: boolean;
+}>()
+</script>
+
+<template>
+  <AntButton
+    :size="size"
+    :disabled="disabled"
+    :grouped="grouped"
+    :skeleton="skeleton"
+    :expanded="expanded"
+    :color-type="ColorType.danger"
+    filled
+    data-e2e="delete-button"
+    @click="$emit('click')"
+    @blur="$emit('blur')"
+  >
+    Delete
+  </AntButton>
+</template>

package/dist/runtime/components/buttons/AntSaveAndNewButton.vue

@@ -0,0 +1,32 @@
+<script lang="ts" setup>
+import {Grouped} from '../../enums/Grouped.enum';
+import {Size} from '../../enums/Size.enum';
+import {ColorType} from '../../enums/ColorType.enum';
+import AntButton from './AntButton.vue';
+
+defineEmits(['click', 'blur']);
+defineProps<{
+  size?: Size;
+  disabled?: boolean;
+  grouped?: Grouped;
+  skeleton?: boolean;
+  expanded?: boolean;
+}>()
+</script>
+
+<template>
+  <AntButton
+    :size="size"
+    :disabled="disabled"
+    :grouped="grouped"
+    :skeleton="skeleton"
+    :expanded="expanded"
+    :color-type="ColorType.primary"
+    filled
+    data-e2e="save-and-new-button"
+    @click="$emit('click')"
+    @blur="$emit('blur')"
+  >
+    Save and new
+  </AntButton>
+</template>