@antify/ui-module 1.6.0 → 1.7.2

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.d.ts

@@ -8,4 +8,9 @@ export declare const Docs: Story;
  * Make sure, no tooltip get shown if no content is provided.
  */
 export declare const WithoutContent: Story;
+/**
+ * Test multiple tooltips in one page to make sure that
+ * each tooltips delay does not bug with others.
+ */
+export declare const Multiple: Story;
 export declare const Summary: Story;

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)
     }
   }
 };
@@ -100,6 +100,30 @@ export const WithoutContent = {
   },
   args: {}
 };
+export const Multiple = {
+  render: (args) => ({
+    components: { AntTooltip },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div class="p-12 flex flex-col justify-center items-center gap-1">
+        <div class="flex gap-1">
+          <div
+            v-for="row in 5"
+            class="flex flex-col gap-1"
+          >
+            <AntTooltip v-for="item of 5">
+              <div class="box">Hover me</div>
+
+              <template #content>Lorem</template>
+            </AntTooltip>
+          </div>
+        </div>
+      </div>
+		`
+  })
+};
 export const Summary = {
   render: (args) => ({
     components: {
@@ -108,7 +132,7 @@ export const Summary = {
       AntFormGroupLabel
     },
     setup() {
-      return { args, Position, InputColorType };
+      return { args, Position, InputState };
     },
     template: `
 			<AntFormGroup>
@@ -141,31 +165,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';
@@ -11,26 +11,28 @@ import {hasSlotContent} from '../../utils';
 
 defineEmits(['click', 'blur']);
 const props = withDefaults(
-	defineProps<{
-		iconLeft?: IconDefinition;
-		iconRight?: IconDefinition;
-		size?: Size;
-		disabled?: boolean;
-		grouped?: Grouped;
-		colorType?: ColorType;
-		skeleton?: boolean;
-		expanded?: boolean;
-		filled?: boolean;
-		hasPermission?: boolean;
-		tooltipPosition?: Position;
-		tooltipColorType?: InputColorType;
-		tooltipDelay?: number;
-	}>(), {
-		colorType: ColorType.primary,
-		hasPermission: true,
-		filled: true
-	}
-)
+  defineProps<{
+    iconLeft?: IconDefinition;
+    iconRight?: IconDefinition;
+    size?: Size;
+    disabled?: boolean;
+    grouped?: Grouped;
+    state?: State;
+    skeleton?: boolean;
+    expanded?: boolean;
+    filled?: boolean;
+    hasPermission?: boolean;
+    tooltipPosition?: Position;
+    tooltipState?: InputState;
+    tooltipDelay?: number;
+    submit?: boolean;
+  }>(), {
+    state: State.primary,
+    hasPermission: true,
+    filled: true,
+    submit: false
+  }
+);
 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,11 +47,12 @@ 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"
+    :submit="submit"
     data-e2e="action-button"
     @click="$emit('click')"
     @blur="$emit('blur')"