@antify/ui-module 1.5.1 → 1.7.1

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: {

package/dist/runtime/tailwind.config.d.ts

@@ -1,183 +1,3 @@
 /** @type {import('tailwindcss').Config} */
-declare const _default: {
-    content: string[];
-    theme: {
-        colors: {
-            'for-white-bg-font': any;
-            'for-black-bg-font': any;
-            'neutral-50-font': any;
-            'neutral-100-font': any;
-            'neutral-200-font': any;
-            'neutral-300-font': any;
-            'neutral-400-font': any;
-            'neutral-500-font': any;
-            'neutral-600-font': any;
-            'neutral-700-font': any;
-            'neutral-800-font': any;
-            'neutral-900-font': any;
-            'neutral-950-font': any;
-            'primary-50-font': any;
-            'primary-100-font': any;
-            'primary-200-font': any;
-            'primary-300-font': any;
-            'primary-400-font': any;
-            'primary-500-font': any;
-            'primary-600-font': any;
-            'primary-700-font': any;
-            'primary-800-font': any;
-            'primary-900-font': any;
-            'primary-950-font': any;
-            'secondary-50-font': any;
-            'secondary-100-font': any;
-            'secondary-200-font': any;
-            'secondary-300-font': any;
-            'secondary-400-font': any;
-            'secondary-500-font': any;
-            'secondary-600-font': any;
-            'secondary-700-font': any;
-            'secondary-800-font': any;
-            'secondary-900-font': any;
-            'secondary-950-font': any;
-            'success-50-font': any;
-            'success-100-font': any;
-            'success-200-font': any;
-            'success-300-font': any;
-            'success-400-font': any;
-            'success-500-font': any;
-            'success-600-font': any;
-            'success-700-font': any;
-            'success-800-font': any;
-            'success-900-font': any;
-            'success-950-font': any;
-            'info-50-font': any;
-            'info-100-font': any;
-            'info-200-font': any;
-            'info-300-font': any;
-            'info-400-font': any;
-            'info-500-font': any;
-            'info-600-font': any;
-            'info-700-font': any;
-            'info-800-font': any;
-            'info-900-font': any;
-            'info-950-font': any;
-            'warning-50-font': any;
-            'warning-100-font': any;
-            'warning-200-font': any;
-            'warning-300-font': any;
-            'warning-400-font': any;
-            'warning-500-font': any;
-            'warning-600-font': any;
-            'warning-700-font': any;
-            'warning-800-font': any;
-            'warning-900-font': any;
-            'warning-950-font': any;
-            'danger-50-font': any;
-            'danger-100-font': any;
-            'danger-200-font': any;
-            'danger-300-font': any;
-            'danger-400-font': any;
-            'danger-500-font': any;
-            'danger-600-font': any;
-            'danger-700-font': any;
-            'danger-800-font': any;
-            'danger-900-font': any;
-            'danger-950-font': any;
-            transparent: any;
-            white: any;
-            black: any;
-            'neutral-50': any;
-            'neutral-100': any;
-            'neutral-200': any;
-            'neutral-300': any;
-            'neutral-400': any;
-            'neutral-500': any;
-            'neutral-600': any;
-            'neutral-700': any;
-            'neutral-800': any;
-            'neutral-900': any;
-            'neutral-950': any;
-            'primary-50': any;
-            'primary-100': any;
-            'primary-200': any;
-            'primary-300': any;
-            'primary-400': any;
-            'primary-500': any;
-            'primary-600': any;
-            'primary-700': any;
-            'primary-800': any;
-            'primary-900': any;
-            'primary-950': any;
-            'secondary-50': any;
-            'secondary-100': any;
-            'secondary-200': any;
-            'secondary-300': any;
-            'secondary-400': any;
-            'secondary-500': any;
-            'secondary-600': any;
-            'secondary-700': any;
-            'secondary-800': any;
-            'secondary-900': any;
-            'secondary-950': any;
-            'info-50': any;
-            'info-100': any;
-            'info-200': any;
-            'info-300': any;
-            'info-400': any;
-            'info-500': any;
-            'info-600': any;
-            'info-700': any;
-            'info-800': any;
-            'info-900': any;
-            'info-950': any;
-            'success-50': any;
-            'success-100': any;
-            'success-200': any;
-            'success-300': any;
-            'success-400': any;
-            'success-500': any;
-            'success-600': any;
-            'success-700': any;
-            'success-800': any;
-            'success-900': any;
-            'success-950': any;
-            'warning-50': any;
-            'warning-100': any;
-            'warning-200': any;
-            'warning-300': any;
-            'warning-400': any;
-            'warning-500': any;
-            'warning-600': any;
-            'warning-700': any;
-            'warning-800': any;
-            'warning-900': any;
-            'warning-950': any;
-            'danger-50': any;
-            'danger-100': any;
-            'danger-200': any;
-            'danger-300': any;
-            'danger-400': any;
-            'danger-500': any;
-            'danger-600': any;
-            'danger-700': any;
-            'danger-800': any;
-            'danger-900': any;
-            'danger-950': any;
-        };
-        extend: {
-            animation: {
-                skeleton: string;
-            };
-            keyframes: {
-                skeleton: {
-                    '0%, 100%': {
-                        'background-color': any;
-                    };
-                    '50%': {
-                        'background-color': any;
-                    };
-                };
-            };
-        };
-    };
-};
+declare const _default: import("tailwindcss/types/config").Config;
 export default _default;

package/dist/runtime/tailwind.config.mjs

@@ -187,6 +187,9 @@ export default {
       ...fontColors
     },
     extend: {
+      fontSize: {
+        "2xs": ["0.625rem", "0.75rem"]
+      },
       animation: {
         skeleton: "skeleton 2s ease-out infinite"
       },

package/dist/runtime/types.d.ts

@@ -1,7 +1,8 @@
 export * from './enums';
-export * from './types';
 export * from './components/__types';
-export * from './components/table/__types/TableHeader.type';
-export * from './components/form/__types';
 export * from './components/buttons/__types';
-export * from './components/form/Elements/__types';
+export * from './components/inputs/__types';
+export * from './components/inputs/Elements/__types';
+export * from './components/navbar/__types';
+export * from './components/table/__types';
+export * from './components/tabs/__types';

package/dist/runtime/types.mjs

@@ -1,7 +1,8 @@
 export * from "./enums/index.mjs";
-export * from "./types/index.mjs";
 export * from "./components/__types/index.mjs";
-export * from "./components/table/__types/TableHeader.type.mjs";
-export * from "./components/form/__types/index.mjs";
 export * from "./components/buttons/__types/index.mjs";
-export * from "./components/form/Elements/__types/index.mjs";
+export * from "./components/inputs/__types/index.mjs";
+export * from "./components/inputs/Elements/__types/index.mjs";
+export * from "./components/navbar/__types/index.mjs";
+export * from "./components/table/__types/index.mjs";
+export * from "./components/tabs/__types/index.mjs";

package/dist/types.d.mts

@@ -5,4 +5,4 @@ import type {  } from './module.js'
 
 
 
-export type { AntTableAlign, AntTableRowTypes, AntTableSortDirection, BaseInputType, ButtonType, CollapseStrategy, ColorType, CornerPosition, Grouped, IconSize, InputColorType, Position, SelectOption, Size, SwitcherOption, TableHeader, TextInputType, default } from './module.js'
+export type { AntCheckboxSize, AntCheckboxType, AntDateInputTypes, AntKeycapSize, AntRadioSize, AntRadioTypes, AntSpinnerSize, AntSwitchSize, AntTableAlign, AntTableRowTypes, AntTableSize, AntTableSortDirection, AntTagInputSize, AntTagSize, BaseInputType, ButtonType, CollapseStrategy, CornerPosition, Direction, Grouped, IconSize, InputState, ListGroupItemState, NavbarItemTypes, Position, SelectOption, Size, State, SwitcherOption, TabItem, TabItemState, TableHeader, TagState, TextInputType, Toast, default } from './module.js'

package/dist/types.d.ts

@@ -5,4 +5,4 @@ import type {  } from './module'
 
 
 
-export type { AntTableAlign, AntTableRowTypes, AntTableSortDirection, BaseInputType, ButtonType, CollapseStrategy, ColorType, CornerPosition, Grouped, IconSize, InputColorType, Position, SelectOption, Size, SwitcherOption, TableHeader, TextInputType, default } from './module'
+export type { AntCheckboxSize, AntCheckboxType, AntDateInputTypes, AntKeycapSize, AntRadioSize, AntRadioTypes, AntSpinnerSize, AntSwitchSize, AntTableAlign, AntTableRowTypes, AntTableSize, AntTableSortDirection, AntTagInputSize, AntTagSize, BaseInputType, ButtonType, CollapseStrategy, CornerPosition, Direction, Grouped, IconSize, InputState, ListGroupItemState, NavbarItemTypes, Position, SelectOption, Size, State, SwitcherOption, TabItem, TabItemState, TableHeader, TagState, TextInputType, Toast, default } from './module'

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@antify/ui-module",
   "private": false,
-  "version": "1.5.1",
+  "version": "1.7.1",
   "license": "MIT",
   "type": "module",
   "exports": {

package/src/runtime/components/AntAccordion.vue

@@ -1,13 +1,14 @@
 <script lang="ts" setup>
 import AntAccordionItem from './AntAccordionItem.vue';
 import {onMounted, ref} from 'vue';
-import {CollapseStrategy} from './__types/Accordion.types';
+import {CollapseStrategy} from './__types/AntAccordion.types';
 
 const props = withDefaults(defineProps<{
   items: {
     label?: string;
     content?: string;
     isOpen?: boolean;
+    iconLeft?: boolean;
   }[];
   collapseStrategy?: CollapseStrategy;
 }>(), {
@@ -20,7 +21,7 @@ onMounted(() => {
   openItems.value = props.items
     .map((item, index) => item.isOpen ? index : -1)
     .filter((index) => index !== -1);
-})
+});
 
 function onOpen(index: number) {
   if (props.collapseStrategy === CollapseStrategy.single) {
@@ -44,14 +45,18 @@ function onClose(index: number) {
     <slot>
       <AntAccordionItem
         v-for="(item, index) in items"
+        :key="`accordion-item-${index}`"
         :label="item.label"
         :is-open="openItems.includes(index)"
-        :key="`accordion-item-${index}`"
+        :icon-left="item.iconLeft"
         @open="() => onOpen(index)"
         @close="() => onClose(index)"
       >
-        <slot name="item-content" v-bind="{item, index}">
-          <div v-html="item.content"/>
+        <slot
+          name="item-content"
+          v-bind="{item, index}"
+        >
+          <div v-html="item.content" />
         </slot>
       </AntAccordionItem>
     </slot>

package/src/runtime/components/AntAccordionItem.vue

@@ -1,14 +1,17 @@
 <script lang="ts" setup>
-import {faAngleDown, faAngleUp} from '@fortawesome/free-solid-svg-icons';
+import {faAngleDown, faAngleUp, faQuestionCircle} from '@fortawesome/free-solid-svg-icons';
 import AntIcon from './AntIcon.vue';
 import AntTransitionCollapseHeight from './transitions/AntTransitionCollapseHeight.vue';
+import {IconSize} from './__types/AntIcon.types';
 
 const props = withDefaults(defineProps<{
   isOpen: boolean;
   label?: string;
   collapseTransition?: string;
+  iconLeft: boolean;
 }>(), {
-  collapseTransition: 'slide'
+  collapseTransition: 'slide',
+  iconLeft: false,
 });
 const emit = defineEmits(['close', 'open']);
 
@@ -24,7 +27,7 @@ function onClick() {
 
 <template>
   <div
-    class="p-2.5 select-none cursor-pointer transition-colors"
+    class="p-2 select-none cursor-pointer transition-colors"
     :class="{'bg-primary-500 text-primary-500-font': isOpen, 'bg-white text-for-white-bg-font': !isOpen}"
     @click="onClick"
   >
@@ -35,9 +38,18 @@ function onClick() {
       <div
         class="hover:text-gray-800 flex justify-between items-center"
       >
-        <span class="text-sm font-semibold">
-          {{ label }}
-        </span>
+        <div class="flex items-center gap-2">
+          <AntIcon
+            v-if="iconLeft"
+            :size="IconSize.sm"
+            :icon="faQuestionCircle"
+            :color="isOpen ? 'text-primary-500-font' : 'text-for-white-bg-font'"
+          />
+
+          <span class="text-sm font-semibold">
+            {{ label }}
+          </span>
+        </div>
 
         <AntIcon
           :icon="isOpen ? faAngleUp : faAngleDown"
@@ -55,7 +67,7 @@ function onClick() {
       <Transition name="bounce">
         <div
           v-show="isOpen"
-          class="p-2.5 bg-white"
+          class="p-2 text-sm bg-white text-for-white-bg-font"
         >
           <slot />
         </div>