@antify/ui-module 1.6.0 → 1.7.2

package/dist/runtime/components/table/__stories/AntTable.stories.mjs

@@ -1,6 +1,8 @@
 import AntTable from "../AntTable.vue";
-import { AntTableAlign, AntTableRowTypes } from "../__types/TableHeader.type.mjs";
+import { AntTableAlign, AntTableRowTypes, AntTableSize } from "../__types/TableHeader.types.mjs";
 import { ref } from "vue";
+import { faker } from "@faker-js/faker";
+import AntSwitch from "../../inputs/AntSwitch.vue";
 const meta = {
   title: "Components/Table",
   component: AntTable,
@@ -38,6 +40,11 @@ const meta = {
     loading: {
       description: "If true will display skeleton rows instead of an empty table if there is no data provided, otherwise it will display an overlay."
     },
+    size: {
+      control: { type: "select" },
+      options: Object.values(AntTableSize),
+      table: { defaultValue: { summary: AntTableSize.md } }
+    },
     // Slots
     afterCellContent: {
       description: "Slot to add custom elements to all cells. Gets {elem, header} as property.",
@@ -82,41 +89,24 @@ const meta = {
   }
 };
 export default meta;
-const testData = [
-  {
-    text: "Lorem ipsum dolor sit amet",
-    number: 28,
-    email: "lindsay.walton@example.com",
-    linkLabel: "Link here",
-    link: "/"
-  },
-  {
-    text: "Lorem ipsum dolor sit amet",
-    number: 54,
-    email: "courtney.henry@example.com",
-    linkLabel: "Link here",
-    link: "/"
-  },
-  {
-    text: "Lorem ipsum dolor sit amet",
-    number: 44,
-    email: "courtney.henry@example.com",
-    linkLabel: "Link here",
-    link: "/"
-  }
-];
+const testData = [];
 for (let i = 0; i < 100; i++) {
+  const randomName = faker.person.firstName() + " " + faker.person.lastName();
+  const randomNumber = faker.number.int({ min: 18, max: 60 });
+  const randomEmail = faker.internet.email();
+  const randomBoolean = faker.datatype.boolean();
   testData.push({
-    text: "Lorem ipsum dolor sit amet",
-    number: 32,
-    email: "courtney.henry@example.com",
+    name: randomName,
+    age: randomNumber,
+    email: randomEmail,
+    employeed: randomBoolean,
     linkLabel: "Link here",
     link: "/"
   });
 }
 export const Docs = {
   render: (args) => ({
-    components: { AntTable },
+    components: { AntTable, AntSwitch },
     setup() {
       const selected = ref();
       return { args, selected };
@@ -124,7 +114,10 @@ export const Docs = {
     template: `
       <div class="h-96 border border-dashed border-neutral-300">
         <AntTable v-bind="args" v-model="selected">
-          <template #emptyState>
+          <template #cellContent="{element: entry, header}">
+            <div v-if="header.identifier === 'employeed'">
+              <AntSwitch :model-value="entry.employeed"/>
+            </div>
           </template>
         </AntTable>
       </div>
@@ -133,12 +126,19 @@ export const Docs = {
   args: {
     headers: [
       {
-        title: "Text",
-        identifier: "text",
+        title: "Name",
+        identifier: "name",
         type: AntTableRowTypes.text,
         sortable: true,
         lightVersion: true
       },
+      {
+        title: "Age",
+        identifier: "age",
+        type: AntTableRowTypes.text,
+        align: AntTableAlign.right,
+        lightVersion: true
+      },
       {
         title: "E-Mail",
         identifier: "email",
@@ -146,11 +146,10 @@ export const Docs = {
         type: AntTableRowTypes.text
       },
       {
-        title: "Number",
-        identifier: "number",
-        type: AntTableRowTypes.text,
-        align: AntTableAlign.right,
-        lightVersion: true
+        title: "Employeed",
+        identifier: "employeed",
+        rowClassList: "",
+        type: AntTableRowTypes.slot
       },
       {
         title: "Link",

package/dist/runtime/components/table/__types/{TableHeader.type.d.ts → TableHeader.types.d.ts}

@@ -29,3 +29,8 @@ export type TableHeader = {
      */
     lightVersion?: boolean;
 };
+export declare enum AntTableSize {
+    lg = "lg",
+    md = "md",
+    sm = "sm"
+}

package/dist/runtime/components/table/__types/{TableHeader.type.mjs → TableHeader.types.mjs}

@@ -17,3 +17,9 @@ export var AntTableSortDirection = /* @__PURE__ */ ((AntTableSortDirection2) =>
   AntTableSortDirection2["neutral"] = "neutral";
   return AntTableSortDirection2;
 })(AntTableSortDirection || {});
+export var AntTableSize = /* @__PURE__ */ ((AntTableSize2) => {
+  AntTableSize2["lg"] = "lg";
+  AntTableSize2["md"] = "md";
+  AntTableSize2["sm"] = "sm";
+  return AntTableSize2;
+})(AntTableSize || {});

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

@@ -0,0 +1 @@
+export * from './TableHeader.types';

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

@@ -0,0 +1 @@
+export * from "./TableHeader.types.mjs";

package/dist/runtime/components/tabs/AntTabItem.vue

@@ -7,28 +7,28 @@ import {
 } from '@fortawesome/free-solid-svg-icons';
 import {computed} from 'vue';
 import {type RouteLocationRaw, useRoute} from 'vue-router';
-import {ColorType} from './__types/AntTabItem.types';
+import {TabItemState} from './__types/AntTabItem.types';
 
 const props = withDefaults(defineProps<{
   label: string;
   active: boolean;
-  colorType?: ColorType
+  state?: TabItemState
   showIcon?: boolean;
   icon?: IconDefinition;
   to?: RouteLocationRaw;
   expanded?: boolean;
 }>(), {
-  colorType: ColorType.base,
+  state: TabItemState.base,
   showIcon: true,
 });
 const route = useRoute();
 
 const icons = {
-  [ColorType.base]: null,
-  [ColorType.danger]: faExclamationCircle,
-  [ColorType.warning]: faExclamationTriangle,
+  [TabItemState.base]: null,
+  [TabItemState.danger]: faExclamationCircle,
+  [TabItemState.warning]: faExclamationTriangle,
 };
-const iconRight = computed<IconDefinition | null>(() => icons[props.colorType]);
+const iconRight = computed<IconDefinition | null>(() => icons[props.state]);
 const _active = computed<boolean>(() => {
   if (typeof props.to === 'string') {
     return route.path === props.to;
@@ -41,50 +41,50 @@ const _active = computed<boolean>(() => {
   return props.active;
 });
 const containerClasses = computed(() => {
-  const variants: Record<ColorType, string> = {
-    [ColorType.base]: 'hover:bg-neutral-100',
-    [ColorType.warning]: 'hover:bg-warning-100',
-    [ColorType.danger]: 'hover:bg-danger-100',
+  const variants: Record<TabItemState, string> = {
+    [TabItemState.base]: 'hover:bg-neutral-100',
+    [TabItemState.warning]: 'hover:bg-warning-100',
+    [TabItemState.danger]: 'hover:bg-danger-100',
   };
-  const activeVariants: Record<ColorType, string> = {
-    [ColorType.base]: 'text-primary-500 border-primary-500',
-    [ColorType.warning]: 'text-warning-500 border-warning-500',
-    [ColorType.danger]: 'text-danger-500 border-danger-500',
+  const activeVariants: Record<TabItemState, string> = {
+    [TabItemState.base]: 'text-primary-500 border-primary-500',
+    [TabItemState.warning]: 'text-warning-500 border-warning-500',
+    [TabItemState.danger]: 'text-danger-500 border-danger-500',
   };
-  const notActiveVariants: Record<ColorType, string> = {
-    [ColorType.base]: 'text-for-white-bg-font border-white',
-    [ColorType.warning]: 'text-warning-500',
-    [ColorType.danger]: 'text-danger-500',
+  const notActiveVariants: Record<TabItemState, string> = {
+    [TabItemState.base]: 'text-for-white-bg-font border-white',
+    [TabItemState.warning]: 'text-warning-500',
+    [TabItemState.danger]: 'text-danger-500',
   };
 
   return {
-    'p-2.5 hover:cursor-pointer text-center flex items-center justify-center gap-2.5 bg-white transition-[background-color] relative': true,
+    'p-2 hover:cursor-pointer text-center flex items-center justify-center gap-2 bg-white transition-[background-color] relative text-sm': true,
     'grow': props.expanded,
-    [variants[props.colorType]]: true,
-    [activeVariants[props.colorType]]: _active.value,
-    [notActiveVariants[props.colorType]]: !_active.value,
-  }
+    [variants[props.state]]: true,
+    [activeVariants[props.state]]: _active.value,
+    [notActiveVariants[props.state]]: !_active.value,
+  };
 });
 const borderBoxClasses = computed(() => {
-  const variants: Record<ColorType, string> = {
-    [ColorType.base]: 'bg-primary-500',
-    [ColorType.warning]: 'bg-warning-500',
-    [ColorType.danger]: 'bg-danger-500',
+  const variants: Record<TabItemState, string> = {
+    [TabItemState.base]: 'bg-primary-500',
+    [TabItemState.warning]: 'bg-warning-500',
+    [TabItemState.danger]: 'bg-danger-500',
   };
 
   return {
     'h-[2px] w-full bg-danger-500 absolute bottom-0': true,
-    [variants[props.colorType]]: true,
-  }
+    [variants[props.state]]: true,
+  };
 });
 const iconColor = computed(() => {
   const variants = {
-    [ColorType.base]: 'text-neutral-100-font',
-    [ColorType.warning]: 'text-warning-500',
-    [ColorType.danger]: 'text-danger-500',
+    [TabItemState.base]: 'text-neutral-100-font',
+    [TabItemState.warning]: 'text-warning-500',
+    [TabItemState.danger]: 'text-danger-500',
   };
 
-  return variants[props.colorType];
+  return variants[props.state];
 });
 </script>
 

package/dist/runtime/components/tabs/__stories/AntTabItem.stories.mjs

@@ -1,5 +1,5 @@
 import AntTabItem from "../AntTabItem.vue";
-import { ColorType } from "../__types/AntTabItem.types.mjs";
+import { TabItemState } from "../__types/AntTabItem.types.mjs";
 const meta = {
   title: "Components/Tab Item",
   component: AntTabItem,
@@ -8,11 +8,11 @@ const meta = {
   argTypes: {
     showIcon: {
       control: "boolean",
-      description: "Some InputColorTypes can have an icon. Control with this property if it gets shown or not."
+      description: "Some InputStates can have an icon. Control with this property if it gets shown or not."
     },
-    colorType: {
+    state: {
       control: { type: "select" },
-      options: Object.values(ColorType)
+      options: Object.values(TabItemState)
     }
   }
 };

package/dist/runtime/components/tabs/__stories/AntTabs.stories.mjs

@@ -1,7 +1,7 @@
 import AntTabs from "../AntTabs.vue";
 import { ref } from "vue";
 import { faUserCircle } from "@fortawesome/free-regular-svg-icons";
-import { ColorType } from "../__types/AntTabItem.types.mjs";
+import { TabItemState } from "../__types/AntTabItem.types.mjs";
 const meta = {
   title: "Components/Tabs",
   component: AntTabs,
@@ -79,12 +79,12 @@ export const DifferentStates = {
       {
         id: "3",
         label: "Third tab",
-        colorType: ColorType.warning
+        state: TabItemState.warning
       },
       {
         id: "4",
         label: "Fourth tab",
-        colorType: ColorType.danger
+        state: TabItemState.danger
       }
     ]
   }

package/dist/runtime/components/tabs/__types/AntTabItem.types.d.ts

@@ -3,14 +3,14 @@ import { type RouteLocationRaw } from 'vue-router';
 export type TabItem = {
     id: string;
     label: string;
-    colorType?: ColorType;
+    state?: TabItemState;
     showIcon?: boolean;
     icon?: IconDefinition;
     to?: string | RouteLocationRaw;
     clickHandler?: () => void;
     [key: string]: unknown;
 };
-export declare enum ColorType {
+export declare enum TabItemState {
     base = "base",
     warning = "warning",
     danger = "danger"

package/dist/runtime/components/tabs/__types/AntTabItem.types.mjs

@@ -1,6 +1,6 @@
-export var ColorType = /* @__PURE__ */ ((ColorType2) => {
-  ColorType2["base"] = "base";
-  ColorType2["warning"] = "warning";
-  ColorType2["danger"] = "danger";
-  return ColorType2;
-})(ColorType || {});
+export var TabItemState = /* @__PURE__ */ ((TabItemState2) => {
+  TabItemState2["base"] = "base";
+  TabItemState2["warning"] = "warning";
+  TabItemState2["danger"] = "danger";
+  return TabItemState2;
+})(TabItemState || {});

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

@@ -0,0 +1 @@
+export * from './AntTabItem.types';

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

@@ -0,0 +1 @@
+export * from "./AntTabItem.types.mjs";

package/dist/runtime/composables/useUi.d.ts

@@ -1,15 +1,15 @@
-import { ColorType, InputColorType } from '../enums/ColorType.enum';
-import { ColorType as TabItemColorType } from '../components/tabs/__types/AntTabItem.types';
+import { State, InputState } from '../enums/State.enum';
+import { TabItemState as TabItemState } from '../components/tabs/__types/AntTabItem.types';
 import { Direction } from '../enums/Direction.enum';
 import { Grouped } from '../enums/Grouped.enum';
 import { Position, CornerPosition } from '../enums/Position.enum';
 import { Size } from '../enums/Size.enum';
-import { AntTableRowTypes, AntTableAlign, AntTableSortDirection } from '../components/table/__types/TableHeader.type';
+import { AntTableRowTypes, AntTableAlign, AntTableSortDirection } from '../components/table/__types/TableHeader.types';
 export declare const useUi: () => {
     Direction: typeof Direction;
-    ColorType: typeof ColorType;
-    InputColorType: typeof InputColorType;
-    TabItemColorType: typeof TabItemColorType;
+    State: typeof State;
+    InputState: typeof InputState;
+    TabItemState: typeof TabItemState;
     Grouped: typeof Grouped;
     Position: typeof Position;
     CornerPosition: typeof CornerPosition;

package/dist/runtime/composables/useUi.mjs

@@ -1,9 +1,9 @@
 import {
-  ColorType,
-  InputColorType
-} from "../enums/ColorType.enum.mjs";
+  State,
+  InputState
+} from "../enums/State.enum.mjs";
 import {
-  ColorType as TabItemColorType
+  TabItemState
 } from "../components/tabs/__types/AntTabItem.types.mjs";
 import { Direction } from "../enums/Direction.enum.mjs";
 import { Grouped } from "../enums/Grouped.enum.mjs";
@@ -13,13 +13,13 @@ import {
   AntTableRowTypes,
   AntTableAlign,
   AntTableSortDirection
-} from "../components/table/__types/TableHeader.type.mjs";
+} from "../components/table/__types/TableHeader.types.mjs";
 export const useUi = () => {
   return {
     Direction,
-    ColorType,
-    InputColorType,
-    TabItemColorType,
+    State,
+    InputState,
+    TabItemState,
     Grouped,
     Position,
     CornerPosition,

package/dist/runtime/enums/Size.enum.d.ts

@@ -1,4 +1,7 @@
 export declare enum Size {
+    lg = "lg",
+    md = "md",
     sm = "sm",
-    md = "md"
+    xs = "xs",
+    xs2 = "2xs"
 }

package/dist/runtime/enums/Size.enum.mjs

@@ -1,5 +1,8 @@
 export var Size = /* @__PURE__ */ ((Size2) => {
-  Size2["sm"] = "sm";
+  Size2["lg"] = "lg";
   Size2["md"] = "md";
+  Size2["sm"] = "sm";
+  Size2["xs"] = "xs";
+  Size2["xs2"] = "2xs";
   return Size2;
 })(Size || {});

package/dist/runtime/enums/{ColorType.enum.d.ts → State.enum.d.ts}

@@ -1,4 +1,4 @@
-export declare enum ColorType {
+export declare enum State {
     base = "base",
     primary = "primary",
     secondary = "secondary",
@@ -7,7 +7,7 @@ export declare enum ColorType {
     success = "success",
     warning = "warning"
 }
-export declare enum InputColorType {
+export declare enum InputState {
     base = "base",
     danger = "danger",
     info = "info",

package/dist/runtime/enums/State.enum.mjs

@@ -0,0 +1,18 @@
+export var State = /* @__PURE__ */ ((State2) => {
+  State2["base"] = "base";
+  State2["primary"] = "primary";
+  State2["secondary"] = "secondary";
+  State2["danger"] = "danger";
+  State2["info"] = "info";
+  State2["success"] = "success";
+  State2["warning"] = "warning";
+  return State2;
+})(State || {});
+export var InputState = /* @__PURE__ */ ((InputState2) => {
+  InputState2["base"] = "base";
+  InputState2["danger"] = "danger";
+  InputState2["info"] = "info";
+  InputState2["success"] = "success";
+  InputState2["warning"] = "warning";
+  return InputState2;
+})(InputState || {});

package/dist/runtime/enums/index.d.ts

@@ -1,4 +1,5 @@
-export * from './ColorType.enum';
+export * from './Direction.enum';
 export * from './Grouped.enum';
 export * from './Position.enum';
 export * from './Size.enum';
+export * from './State.enum';

package/dist/runtime/enums/index.mjs

@@ -1,4 +1,5 @@
-export * from "./ColorType.enum.mjs";
+export * from "./Direction.enum.mjs";
 export * from "./Grouped.enum.mjs";
 export * from "./Position.enum.mjs";
 export * from "./Size.enum.mjs";
+export * from "./State.enum.mjs";

package/dist/runtime/plugins/toaster.d.ts

@@ -1,11 +1,11 @@
 import { type Toast } from '../components/__types/AntToaster.types';
-import { InputColorType } from '../enums';
+import { InputState } from '../enums';
 declare const _default: () => {
     getToasts(): {
         id?: string | undefined;
         title: string;
         content?: string | undefined;
-        type: InputColorType;
+        type: InputState;
         hasIcon?: boolean | undefined;
     }[];
     toast(toast: Toast): void;

package/dist/runtime/plugins/toaster.mjs

@@ -1,4 +1,4 @@
-import { InputColorType } from "../enums/index.mjs";
+import { InputState } from "../enums/index.mjs";
 import { ref } from "vue";
 export default () => {
   const toasts = ref([]);
@@ -26,16 +26,16 @@ export default () => {
       }
     },
     toastSuccess(message) {
-      this.toast({ title: message, type: InputColorType.success });
+      this.toast({ title: message, type: InputState.success });
     },
     toastError(message) {
-      this.toast({ title: message, type: InputColorType.danger });
+      this.toast({ title: message, type: InputState.danger });
     },
     toastWarning(message) {
-      this.toast({ title: message, type: InputColorType.warning });
+      this.toast({ title: message, type: InputState.warning });
     },
     toastInfo(message) {
-      this.toast({ title: message, type: InputColorType.info });
+      this.toast({ title: message, type: InputState.info });
     },
     toastDeleted() {
       this.toastSuccess("Deleted");

package/dist/runtime/plugins/ui-module.mjs

@@ -2,7 +2,7 @@ import { defineNuxtPlugin } from "#app";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import toaster from "./toaster.mjs";
 export default defineNuxtPlugin((nuxtApp) => {
-  nuxtApp.vueApp.component("fa-icon", FontAwesomeIcon);
+  nuxtApp.vueApp.component("FaIcon", FontAwesomeIcon);
   return {
     provide: {
       uiModule: {