@antify/ui-module 1.6.0 → 1.7.2

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, 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, 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.6.0",
+  "version": "1.7.2",
   "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>

package/src/runtime/components/AntAlert.vue

@@ -12,14 +12,14 @@ import {
 import AntIcon from './AntIcon.vue';
 import AntTooltip from './AntTooltip.vue';
 import AntSkeleton from './AntSkeleton.vue';
-import {InputColorType, Position} from '../enums';
+import {InputState, Position} from '../enums';
 import {IconSize} from './__types';
 
 defineEmits(['close']);
 
 const props = withDefaults(defineProps<{
   title?: string | null,
-  colorType?: InputColorType,
+  state?: InputState,
   icon?: boolean,
   expanded?: boolean,
   questionMarkText?: string | null,
@@ -27,7 +27,7 @@ const props = withDefaults(defineProps<{
   dismissBtn?: boolean,
 }>(), {
 	title: null,
-  colorType: InputColorType.base,
+  state: InputState.base,
   icon: true,
   expanded: false,
 	questionMarkText: null,
@@ -36,45 +36,45 @@ const props = withDefaults(defineProps<{
 });
 
 const icons = {
-  [InputColorType.base]: faInfoCircle,
-  [InputColorType.info]: faInfoCircle,
-  [InputColorType.danger]: faExclamationCircle,
-  [InputColorType.warning]: faExclamationTriangle,
-  [InputColorType.success]: faCheckCircle,
+  [InputState.base]: faInfoCircle,
+  [InputState.info]: faInfoCircle,
+  [InputState.danger]: faExclamationCircle,
+  [InputState.warning]: faExclamationTriangle,
+  [InputState.success]: faCheckCircle,
 };
 
-const _icon = computed(() => icons[props.colorType]);
+const _icon = computed(() => icons[props.state]);
 const classes = computed(() => {
-  const variants: Record<InputColorType, string> = {
-    [InputColorType.danger]: 'bg-danger-100 text-danger-500',
-    [InputColorType.info]: 'bg-info-100 text-info-500',
-    [InputColorType.base]: 'bg-neutral-100 text-neutral-500',
-    [InputColorType.success]: 'bg-success-100 text-success-500',
-    [InputColorType.warning]: 'bg-warning-100 text-warning-500',
+  const variants: Record<InputState, string> = {
+    [InputState.danger]: 'bg-danger-100 text-danger-700',
+    [InputState.info]: 'bg-info-100 text-info-700',
+    [InputState.base]: 'bg-neutral-100 text-neutral-100-font',
+    [InputState.success]: 'bg-success-100 text-success-700',
+    [InputState.warning]: 'bg-warning-100 text-warning-700',
   };
 
   return {
-    'inline-flex flex-col gap-2.5 rounded-md p-2.5 transition-colors text-sm relative': true,
+    'inline-flex flex-col gap-2 rounded-md p-2 transition-colors text-sm relative': true,
     'w-full': props.expanded,
-    [variants[props.colorType]]: true,
+    [variants[props.state]]: true,
   };
 });
 const hasDefaultSlot = computed(() => useSlots()['default'] || false);
 const hasQuestionMark = computed(() => (useSlots()['question-mark-text'] || false) || props.questionMarkText);
 const iconColor = computed(() => {
   const variants = {
-    [InputColorType.base]: 'text-neutral-100-font',
-    [InputColorType.danger]: 'text-danger-500',
-    [InputColorType.info]: 'text-info-500',
-    [InputColorType.success]: 'text-success-500',
-    [InputColorType.warning]: 'text-warning-500',
+    [InputState.base]: 'text-neutral-100-font',
+    [InputState.danger]: 'text-danger-700',
+    [InputState.info]: 'text-info-700',
+    [InputState.success]: 'text-success-700',
+    [InputState.warning]: 'text-warning-700',
   };
 
-  return variants[props.colorType];
+  return variants[props.state];
 });
 
 onMounted(() => {
-  handleEnumValidation(props.colorType, InputColorType, 'colorType');
+  handleEnumValidation(props.state, InputState, 'state');
 });
 </script>
 
@@ -91,10 +91,10 @@ onMounted(() => {
 
     <div
       v-if="icon || hasQuestionMark || dismissBtn || title"
-      class="inline-flex items-center justify-between w-content gap-2.5"
+      class="inline-flex items-center justify-between w-content gap-2"
       :class="{'invisible': skeleton}"
     >
-      <div class="inline-flex items-center gap-2.5">
+      <div class="inline-flex items-center gap-2">
         <AntIcon
           v-if="icon"
           :icon="_icon"
@@ -111,7 +111,7 @@ onMounted(() => {
         </div>
       </div>
 
-      <div class="flex gap-2.5">
+      <div class="flex gap-2">
         <div v-if="hasQuestionMark">
           <slot name="questionMarkText">
             <AntTooltip :position="Position.bottom">

package/src/runtime/components/AntCard.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import {computed} from 'vue';
+import {Size} from '../enums/Size.enum';
+
+const props = withDefaults(defineProps<{
+  size?: Size;
+  padding?: boolean;
+  expanded?: boolean;
+}>(), {
+  size: Size.md,
+  padding: true,
+  expanded: false
+});
+
+const cardClass = computed(() => ({
+    'inline-block': true,
+    'w-full': props.expanded,
+    'p-0': !props.padding,
+    'p-2.5': props.size === Size.lg && props.padding,
+    'p-2': props.size === Size.md && props.padding,
+    'p-1.5': props.size === Size.sm || props.size === Size.xs && props.padding,
+    'p-1': props.size === Size.xs2 && props.padding,
+  })
+);
+</script>
+
+<template>
+  <div
+    :class="cardClass"
+    class="bg-white border border-neutral-300 rounded-md"
+  >
+    <slot />
+  </div>
+</template>

package/src/runtime/components/AntDropdown.vue

@@ -36,7 +36,7 @@ const _dropdownClasses = computed(() => ({
 }));
 
 onMounted(() => {
-  handleEnumValidation(props.position, Position, 'Position')
+  handleEnumValidation(props.position, Position, 'Position');
 });
 onKeyStroke('Escape', (e: KeyboardEvent) => {
   if (props.showDropdown) {
@@ -65,7 +65,7 @@ function onClickOutside() {
       >
         <div
           class="shadow-lg border border-neutral-300 rounded-md text-sm relative inline-flex flex-col relative bg-white text-for-white-bg-font w-full"
-          :class="{'p-2.5': contentPadding}"
+          :class="{'p-2': contentPadding}"
         >
           <slot name="content" />
         </div>

package/src/runtime/components/AntIcon.vue

@@ -13,24 +13,29 @@ const props = withDefaults(defineProps<{
    */
   color?: string;
 }>(), {
-  size: IconSize.md,
+  size: IconSize.sm,
   color: 'text-for-white-bg-font'
 });
 
 const containerClasses = computed(() => ({
-  'inline-flex items-center justify-center': true,
-  'w-4 h-4': props.size === IconSize.sm,
-  'w-5 h-5': props.size === IconSize.md,
-  'w-9 h-9': props.size === IconSize.xl3,
-  [props.color]: true,
+	'inline-flex items-center justify-center': true,
+	'w-3 h-3': props.size === IconSize.xs2,
+	'w-4 h-4': props.size === IconSize.xs,
+	'w-5 h-5': props.size === IconSize.sm,
+	'w-6 h-6': props.size === IconSize.md,
+	'w-7 h-7': props.size === IconSize.lg,
+	'w-9 h-9': props.size === IconSize.xl3,
+	[props.color]: true,
 }));
 
-// TODO:: replace with/height with font-size
 const iconClasses = computed(() => ({
-  'transition-colors': true,
-  'h-3 w-3': props.size === IconSize.sm,
-  'h-4 w-4': props.size === IconSize.md,
-  'text-3xl': props.size === IconSize.xl3,
+	'transition-colors': true,
+	'text-2xs': props.size === IconSize.xs2,
+	'text-xs': props.size === IconSize.xs,
+	'text-sm': props.size === IconSize.sm,
+	'text-md': props.size === IconSize.md,
+	'text-lg': props.size === IconSize.lg,
+	'text-3xl': props.size === IconSize.xl3,
 }));
 
 onMounted(() => {
@@ -40,12 +45,12 @@ onMounted(() => {
 
 <template>
   <span
-      v-if="icon"
-      :class="containerClasses"
+    v-if="icon"
+    :class="containerClasses"
   >
-    <fa-icon
-        :icon="icon"
-        :class="iconClasses"
+    <FaIcon
+      :icon="icon"
+      :class="iconClasses"
     />
   </span>
 </template>

package/src/runtime/components/AntKeycap.vue

@@ -3,22 +3,43 @@
 import AntIcon from './AntIcon.vue';
 import {type IconDefinition} from '@fortawesome/free-solid-svg-icons';
 import {IconSize} from './__types';
+import {AntKeycapSize} from './__types/AntKeycap.types';
+import {computed} from 'vue';
 
-defineProps<{
+const props = withDefaults(defineProps<{
   icon?: IconDefinition
-}>();
+  size: AntKeycapSize
+
+}>(),{
+  size: AntKeycapSize.sm
+});
+
+const classes = computed(() => {
+  return {
+    'text-sm px-px min-w-5': props.size === AntKeycapSize.sm,
+    'text-2xs px-px py-0.5 min-w-[18px]': props.size === AntKeycapSize.xs,
+  };
+});
+const iconClasses = computed(() => {
+  if(props.size === AntKeycapSize.sm) {
+    return IconSize.sm;
+  } else {
+    return IconSize.xs2;
+  }
+});
 </script>
 
 <template>
   <span
-    class="inline-block py-0.5 px-1.5 bg-neutral-300 rounded-md text-sm min-w-[1.5rem] text-center text-neutral-500-font font-medium"
+    class="inline-block bg-neutral-300 rounded-md text-center text-neutral-500-font font-medium"
+    :class="classes"
   >
     <AntIcon
       v-if="icon"
       :icon="icon"
-      :size="IconSize.sm"
+      :size="iconClasses"
     />
 
-    <slot v-else/>
+    <slot v-else />
   </span>
 </template>