@antify/ui-module 1.5.1 → 1.7.1

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

@@ -7,7 +7,7 @@ const meta = {
   parameters: { controls: { sort: "requiredFirst" } },
   argTypes: {
     size: {
-      control: { type: "radio" },
+      control: { type: "select" },
       options: Object.values(IconSize)
     },
     icon: {
@@ -41,9 +41,12 @@ export const Size = {
     },
     template: `
       <div class="flex flex-col gap-2.5">
-        <AntIcon v-bind="args" size="sm"/>
-        <AntIcon v-bind="args" size="md"/>
-        <AntIcon v-bind="args" size="3xl"/>
+				<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>
     `
   }),

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

@@ -1,4 +1,5 @@
 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",
@@ -8,6 +9,10 @@ const meta = {
     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)
     }
   }
 };
@@ -20,7 +25,9 @@ export const Docs = {
     },
     template: '<div class="p-4"><AntKeycap v-bind="args">F</AntKeycap></div>'
   }),
-  args: {}
+  args: {
+    size: AntKeycapSize.sm
+  }
 };
 export const Text = {
   render: Docs.render,

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

@@ -1,14 +1,14 @@
 import AntListGroupItem from "../AntListGroupItem.vue";
 import { faUser, faChevronRight } from "@fortawesome/free-solid-svg-icons";
-import { ListGroupItemColorType } from "../../types/AntListGroupItem.type.mjs";
+import { ListGroupItemState } from "../__types/AntListGroupItem.types.mjs";
 const meta = {
   title: "Components/List Group Item",
   component: AntListGroupItem,
   parameters: { controls: { sort: "requiredFirst" } },
   argTypes: {
-    colorType: {
+    state: {
       control: { type: "select" },
-      options: Object.values(ListGroupItemColorType)
+      options: Object.values(ListGroupItemState)
     },
     iconLeft: {
       control: { type: "none" },

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

@@ -40,7 +40,7 @@ export const Docs = {
           sed diam voluptua. At vero eos et accusam et <br/>
           justo duo dolores et ea rebum. Stet clita kasd
         </div>
-        <AntButton @click="() => open = true" color-type="primary">Open Modal</AntButton>
+        <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/>
@@ -57,7 +57,7 @@ export const Docs = {
                 to close modal
               </div>
 
-              <AntButton color-type="primary">Save</AntButton>
+              <AntButton state="primary">Save</AntButton>
             </div>
           </template>
         </AntModal>

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

@@ -1,19 +1,19 @@
 import AntSpinner from "../AntSpinner.vue";
-import { Size } from "../../enums/Size.enum.mjs";
-import { ColorType } from "../../enums/ColorType.enum.mjs";
+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: "radio" },
-      options: Object.values(Size),
-      table: { defaultValue: { summary: Size.md } }
+      control: { type: "select" },
+      options: Object.values(AntSpinnerSize),
+      table: { defaultValue: { summary: AntSpinnerSize.md } }
     },
-    colorType: {
+    state: {
       control: { type: "select" },
-      options: Object.values(ColorType)
+      options: Object.values(State)
     },
     inverted: {
       control: "boolean",

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

@@ -1,6 +1,5 @@
 import AntTag from "../AntTag.vue";
-import { Size } from "../../enums/Size.enum.mjs";
-import { TagColorType } from "../../types/AntTag.type.mjs";
+import { AntTagSize, TagState } from "../__types/AntTag.types.mjs";
 import { faTag } from "@fortawesome/free-solid-svg-icons";
 const meta = {
   title: "Components/Tag",
@@ -8,12 +7,12 @@ const meta = {
   parameters: { controls: { sort: "requiredFirst" } },
   argTypes: {
     size: {
-      control: { type: "radio" },
-      options: Object.values(Size)
+      control: { type: "select" },
+      options: Object.values(AntTagSize)
     },
-    colorType: {
+    state: {
       control: { type: "select" },
-      options: Object.values(TagColorType)
+      options: Object.values(TagState)
     },
     iconLeft: {
       control: { type: "none" },

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

@@ -1,13 +1,13 @@
 import AntToast from "../AntToast.vue";
-import { InputColorType } from "../../enums/index.mjs";
+import { InputState } from "../../enums/index.mjs";
 const meta = {
   title: "Components/Toast",
   component: AntToast,
   parameters: { controls: { sort: "requiredFirst" } },
   argTypes: {
-    colorType: {
+    state: {
       control: { type: "select" },
-      options: Object.values(InputColorType)
+      options: Object.values(InputState)
     }
   }
 };

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

@@ -1,4 +1,4 @@
-import { InputColorType } from '../../enums';
+import { InputState } from '../../enums';
 declare const _default: {
     title: string;
     parameters: {
@@ -28,7 +28,7 @@ export declare const Simple: (args: any) => {
     };
     setup(): {
         args: any;
-        InputColorType: typeof InputColorType;
+        InputState: typeof InputState;
     };
     template: string;
 };

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

@@ -1,5 +1,5 @@
 import AntButton from "../buttons/AntButton.vue";
-import { CornerPosition, InputColorType } from "../../enums/index.mjs";
+import { CornerPosition, InputState } from "../../enums/index.mjs";
 import { enumToPlainText } from "../../utils.mjs";
 export default {
   title: "Components/Toaster",
@@ -22,7 +22,7 @@ export default {
 export const Simple = (args) => ({
   components: { AntButton },
   setup() {
-    return { args, InputColorType };
+    return { args, InputState };
   },
   template: `
     <div class="flex flex-col m-4 space-y-2">
@@ -33,9 +33,9 @@ export const Simple = (args) => ({
       </p>
 
       <AntButton
-          v-for="colorType in Object.values(InputColorType)"
+          v-for="state in Object.values(InputState)"
       >
-        Toast {{ colorType }}
+        Toast {{ state }}
       </AntButton>
     </div>
   `

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

@@ -1,8 +1,8 @@
 import AntTooltip from "../AntTooltip.vue";
-import AntFormGroup from "../form/AntFormGroup.vue";
-import AntFormGroupLabel from "../form/AntFormGroupLabel.vue";
+import AntFormGroup from "../forms/AntFormGroup.vue";
+import AntFormGroupLabel from "../forms/AntFormGroupLabel.vue";
 import { Position } from "../../enums/Position.enum.mjs";
-import { InputColorType } from "../../enums/index.mjs";
+import { InputState } from "../../enums/index.mjs";
 import { expect, userEvent, waitFor, within } from "@storybook/test";
 const meta = {
   title: "Components/Tooltip",
@@ -15,9 +15,9 @@ const meta = {
       control: { type: "select" },
       options: Object.values(Position)
     },
-    colorType: {
+    state: {
       control: { type: "select" },
-      options: Object.values(InputColorType)
+      options: Object.values(InputState)
     }
   }
 };
@@ -108,7 +108,7 @@ export const Summary = {
       AntFormGroupLabel
     },
     setup() {
-      return { args, Position, InputColorType };
+      return { args, Position, InputState };
     },
     template: `
 			<AntFormGroup>
@@ -141,31 +141,31 @@ export const Summary = {
 
 				<AntFormGroupLabel>Color type</AntFormGroupLabel>
 				<AntFormGroup direction="row" class="pb-16 dashed">
-					<AntTooltip :position="Position.bottom" :color-type="InputColorType.base">
+					<AntTooltip :position="Position.bottom" :state="InputState.base">
 						<div class="box">Hover me</div>
 
 						<template #content>Lorem</template>
 					</AntTooltip>
 
-					<AntTooltip :position="Position.bottom" :color-type="InputColorType.info">
+					<AntTooltip :position="Position.bottom" :state="InputState.info">
 						<div class="box">Hover me</div>
 
 						<template #content>Lorem</template>
 					</AntTooltip>
 
-					<AntTooltip :position="Position.bottom" :color-type="InputColorType.success">
+					<AntTooltip :position="Position.bottom" :state="InputState.success">
 						<div class="box">Hover me</div>
 
 						<template #content>Lorem</template>
 					</AntTooltip>
 
-					<AntTooltip :position="Position.bottom" :color-type="InputColorType.warning">
+					<AntTooltip :position="Position.bottom" :state="InputState.warning">
 						<div class="box">Hover me</div>
 
 						<template #content>Lorem</template>
 					</AntTooltip>
 
-					<AntTooltip :position="Position.bottom" :color-type="InputColorType.danger">
+					<AntTooltip :position="Position.bottom" :state="InputState.danger">
 						<div class="box">Hover me</div>
 
 						<template #content>Lorem</template>

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

@@ -1,6 +1,8 @@
 export declare enum IconSize {
-    xs = "xs",
-    sm = "sm",
+    xl3 = "3xl",
+    lg = "lg",
     md = "md",
-    xl3 = "3xl"
+    sm = "sm",
+    xs = "xs",
+    xs2 = "2xs"
 }

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

@@ -1,7 +1,9 @@
 export var IconSize = /* @__PURE__ */ ((IconSize2) => {
-  IconSize2["xs"] = "xs";
-  IconSize2["sm"] = "sm";
-  IconSize2["md"] = "md";
   IconSize2["xl3"] = "3xl";
+  IconSize2["lg"] = "lg";
+  IconSize2["md"] = "md";
+  IconSize2["sm"] = "sm";
+  IconSize2["xs"] = "xs";
+  IconSize2["xs2"] = "2xs";
   return IconSize2;
 })(IconSize || {});

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

@@ -0,0 +1,4 @@
+export declare enum AntKeycapSize {
+    sm = "sm",
+    xs = "xs"
+}

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

@@ -0,0 +1,5 @@
+export var AntKeycapSize = /* @__PURE__ */ ((AntKeycapSize2) => {
+  AntKeycapSize2["sm"] = "sm";
+  AntKeycapSize2["xs"] = "xs";
+  return AntKeycapSize2;
+})(AntKeycapSize || {});

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

@@ -0,0 +1,9 @@
+export declare enum ListGroupItemState {
+    base = "base",
+    primary = "primary",
+    secondary = "secondary",
+    info = "info",
+    success = "success",
+    warning = "warning",
+    danger = "danger"
+}

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

@@ -0,0 +1,10 @@
+export var ListGroupItemState = /* @__PURE__ */ ((ListGroupItemState2) => {
+  ListGroupItemState2["base"] = "base";
+  ListGroupItemState2["primary"] = "primary";
+  ListGroupItemState2["secondary"] = "secondary";
+  ListGroupItemState2["info"] = "info";
+  ListGroupItemState2["success"] = "success";
+  ListGroupItemState2["warning"] = "warning";
+  ListGroupItemState2["danger"] = "danger";
+  return ListGroupItemState2;
+})(ListGroupItemState || {});

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

@@ -0,0 +1,10 @@
+export declare enum AntSpinnerSize {
+    xl4 = "4xl",
+    xl3 = "3xl",
+    xl2 = "2xl",
+    lg = "lg",
+    md = "md",
+    sm = "sm",
+    xs = "xs",
+    xs2 = "2xs"
+}

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

@@ -0,0 +1,11 @@
+export var AntSpinnerSize = /* @__PURE__ */ ((AntSpinnerSize2) => {
+  AntSpinnerSize2["xl4"] = "4xl";
+  AntSpinnerSize2["xl3"] = "3xl";
+  AntSpinnerSize2["xl2"] = "2xl";
+  AntSpinnerSize2["lg"] = "lg";
+  AntSpinnerSize2["md"] = "md";
+  AntSpinnerSize2["sm"] = "sm";
+  AntSpinnerSize2["xs"] = "xs";
+  AntSpinnerSize2["xs2"] = "2xs";
+  return AntSpinnerSize2;
+})(AntSpinnerSize || {});

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

@@ -0,0 +1,17 @@
+export declare enum TagState {
+    base = "base",
+    primary = "primary",
+    secondary = "secondary",
+    info = "info",
+    success = "success",
+    warning = "warning",
+    danger = "danger"
+}
+export declare enum AntTagSize {
+    lg = "lg",
+    md = "md",
+    sm = "sm",
+    xs = "xs",
+    xs2 = "2xs",
+    xs3 = "3xs"
+}

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

@@ -0,0 +1,19 @@
+export var TagState = /* @__PURE__ */ ((TagState2) => {
+  TagState2["base"] = "base";
+  TagState2["primary"] = "primary";
+  TagState2["secondary"] = "secondary";
+  TagState2["info"] = "info";
+  TagState2["success"] = "success";
+  TagState2["warning"] = "warning";
+  TagState2["danger"] = "danger";
+  return TagState2;
+})(TagState || {});
+export var AntTagSize = /* @__PURE__ */ ((AntTagSize2) => {
+  AntTagSize2["lg"] = "lg";
+  AntTagSize2["md"] = "md";
+  AntTagSize2["sm"] = "sm";
+  AntTagSize2["xs"] = "xs";
+  AntTagSize2["xs2"] = "2xs";
+  AntTagSize2["xs3"] = "3xs";
+  return AntTagSize2;
+})(AntTagSize || {});

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

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

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

@@ -1,2 +1,7 @@
-export * from './Accordion.types';
+export * from './AntAccordion.types';
 export * from './AntIcon.types';
+export * from './AntKeycap.types';
+export * from './AntListGroupItem.types';
+export * from './AntSpinner.types';
+export * from './AntTag.types';
+export * from './AntToaster.types';

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

@@ -1,2 +1,7 @@
-export * from "./Accordion.types.mjs";
+export * from "./AntAccordion.types.mjs";
 export * from "./AntIcon.types.mjs";
+export * from "./AntKeycap.types.mjs";
+export * from "./AntListGroupItem.types.mjs";
+export * from "./AntSpinner.types.mjs";
+export * from "./AntTag.types.mjs";
+export * from "./AntToaster.types.mjs";

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

@@ -3,7 +3,7 @@
  * This button is used for everything what is the primary
  * action like save, confirm, create, etc.
  */
-import {Position, ColorType, InputColorType, Size, Grouped} from '../../enums';
+import {Position, State, InputState, Size, Grouped} from '../../enums';
 import AntButton from './AntButton.vue';
 import type {IconDefinition} from '@fortawesome/free-solid-svg-icons';
 import {computed, useSlots} from 'vue';
@@ -17,20 +17,20 @@ const props = withDefaults(
 		size?: Size;
 		disabled?: boolean;
 		grouped?: Grouped;
-		colorType?: ColorType;
+		state?: State;
 		skeleton?: boolean;
 		expanded?: boolean;
 		filled?: boolean;
 		hasPermission?: boolean;
 		tooltipPosition?: Position;
-		tooltipColorType?: InputColorType;
+		tooltipState?: InputState;
 		tooltipDelay?: number;
 	}>(), {
-		colorType: ColorType.primary,
+		state: State.primary,
 		hasPermission: true,
 		filled: true
 	}
-)
+);
 const slots = useSlots();
 const hasTooltip = computed(() => !props.skeleton && !props.disabled && props.hasPermission && hasSlotContent(slots['tooltipContent']));
 const hasPermissionTooltip = computed(() => !props.skeleton && !props.disabled && !props.hasPermission && hasSlotContent(slots['invalidPermissionTooltipContent']));
@@ -45,10 +45,10 @@ const hasPermissionTooltip = computed(() => !props.skeleton && !props.disabled &
     :grouped="grouped"
     :skeleton="skeleton"
     :expanded="expanded"
-    :color-type="colorType"
+    :state="state"
     :filled="filled"
     :tooltip-position="tooltipPosition"
-    :tooltip-color-type="hasPermissionTooltip ? InputColorType.info : tooltipColorType"
+    :tooltip-state="hasPermissionTooltip ? InputState.info : tooltipState"
     :tooltip-delay="hasPermissionTooltip ? 300 : tooltipDelay"
     data-e2e="action-button"
     @click="$emit('click')"