@antify/ui 2.1.0 → 2.2.0

package/README.md

@@ -8,6 +8,19 @@ The antify ui is a vue component library for applications based on tailwindcss.
 pnpm i && pnpm dev
 ```
 
+## Component Hierarchy
+Certain components, such as modals and toasts, need to be displayed on top of other elements to remain visible at all times. As a result, they require a higher z-index. The following hierarchy defines the rendering order for components with this property.
+
+| Component   | z-index |
+|-------------|---------|
+| AntDropdown | 50      |
+| AntModal    | 80      |
+| AntPopover  | 90      |
+| AntToaster  | 100     |
+
+
+
+
 ## Useful links:
 
 - Chromatic docu: https://www.chromatic.com/docs/

package/dist/components/AntDropdown.vue

@@ -34,7 +34,7 @@ const {floatingStyles} = useFloating(reference, floating, {
 });
 
 const _dropdownClasses = computed(() => ({
-  'min-w-[10rem] z-[90]': true,
+  'min-w-[10rem] z-[50]': true,
   ...classesToObjectSyntax(props.dropdownClasses)
 }));
 

package/dist/components/AntModal.vue

@@ -47,7 +47,7 @@ function closeModal() {
   <Transition name="fade">
     <div
       v-if="openBackground"
-      class="absolute inset-0 flex items-center justify-center z-50 cursor-pointer overflow-hidden"
+      class="absolute inset-0 flex items-center justify-center z-[80] cursor-pointer overflow-hidden"
       :class="{'bg-black/50 backdrop-blur-sm': !fullscreen}"
       @click.self="closeModal"
     >

package/dist/components/AntToaster.vue

@@ -23,7 +23,7 @@ const classes = computed(() => ({
 
 <template>
   <div
-    class="absolute flex flex-col space-y-2.5 p-2.5"
+    class="absolute flex flex-col space-y-2.5 p-2.5 z-[100]"
     :class="classes"
     data-e2e="toaster"
   >

package/dist/components/buttons/AntButton.vue

@@ -108,7 +108,6 @@ const classes = computed(() => {
 
   return {
     'transition-all inline-flex items-center justify-center relative font-medium': true,
-    'focus:z-10': true,
     'active:shadow-[inset_0_4px_4px_rgba(0,0,0,0.25)]': !hasInputState.value,
     'p-1 text-xs gap-1': props.size === Size.xs2,
     'p-1.5 text-xs gap-1.5': props.size === Size.xs,

package/dist/components/inputs/AntNumberInput.vue

@@ -10,11 +10,17 @@ import {handleEnumValidation} from '../../handler';
 import {useVModel} from '@vueuse/core';
 import {Grouped} from '../../enums/Grouped.enum';
 import {BaseInputType} from './Elements/__types';
+import Big from 'big.js';
+Big.RM = Big.roundHalfEven;
 
 defineOptions({inheritAttrs: false});
 
+/**
+ * We use a string as the modelValue to ensure that numbers are correctly padded with a trailing 0 instead of cut off (e.g. 0.10 would be converted to 0.1).
+ * Additionally, the initial value (if none is given) gets set to "0" with the same amount of decimals as used in the steps.
+ */
 const props = withDefaults(defineProps<{
-  modelValue: number | null;
+  modelValue: string | null;
   label?: string;
   placeholder?: string;
   description?: string;
@@ -42,6 +48,7 @@ const props = withDefaults(defineProps<{
 });
 const emit = defineEmits(['update:modelValue', 'validate']);
 const _modelValue = useVModel(props, 'modelValue', emit);
+
 const isPrevButtonDisabled = computed(() => {
   if (props.disabled) {
     return true;
@@ -51,7 +58,7 @@ const isPrevButtonDisabled = computed(() => {
     return false;
   }
 
-  return props.min !== undefined ? _modelValue.value <= props.min : false;
+  return props.min !== undefined ? Number(_modelValue.value) <= props.min : false;
 });
 const isNextButtonDisabled = computed(() => {
   if (props.disabled) {
@@ -62,7 +69,7 @@ const isNextButtonDisabled = computed(() => {
     return false;
   }
 
-  return props.max !== undefined ? _modelValue.value >= props.max : false;
+  return props.max !== undefined ? Number(_modelValue.value) >= props.max : false;
 });
 
 onMounted(() => {
@@ -70,23 +77,44 @@ onMounted(() => {
   handleEnumValidation(props.state, InputState, 'state');
 });
 
+/**
+ * Returns the amount of decimal places of the given value.
+ * @param value Number to get decimal places from.
+ */
+function getDecimalPlaces(value: number | string) {
+  const strValue = String(value);
+  const decimalIndex = strValue.indexOf('.');
+
+  if (decimalIndex === -1) return 0;
+
+  return strValue.length - decimalIndex - 1;
+}
+
 function subtract() {
+  const modelDecimalPlaces = getDecimalPlaces(_modelValue.value || 0);
+  const stepDecimalPlaces = getDecimalPlaces(props.steps);
+  const decimalPlaces = Math.max(modelDecimalPlaces, stepDecimalPlaces);
+
   if (_modelValue.value === null) {
-    _modelValue.value = props.max || 0;
-  } else if (props.max !== undefined && _modelValue.value - props.steps > props.max) {
-    _modelValue.value = props.max;
+    _modelValue.value = String(props.max || new Big(0).toFixed(decimalPlaces));
+  } else if (props.max !== undefined && Number(_modelValue.value) - props.steps > props.max) {
+    _modelValue.value = String(props.max);
   } else {
-    _modelValue.value -= props.steps;
+    _modelValue.value = new Big(_modelValue.value).sub(props.steps).toFixed(decimalPlaces);
   }
 }
 
 function add() {
+  const modelDecimalPlaces = getDecimalPlaces(_modelValue.value || 0);
+  const stepDecimalPlaces = getDecimalPlaces(props.steps);
+  const decimalPlaces = Math.max(modelDecimalPlaces, stepDecimalPlaces);
+
   if (_modelValue.value === null) {
-    return _modelValue.value = props.min || 0;
-  } else if (props.min !== undefined && _modelValue.value + props.steps < props.min) {
-    return _modelValue.value = props.min;
+    return _modelValue.value = String(props.min || new Big(0).toFixed(decimalPlaces));
+  } else if (props.min !== undefined && Number(_modelValue.value) + props.steps < props.min) {
+    return _modelValue.value = String(props.min);
   } else {
-    _modelValue.value += props.steps;
+    _modelValue.value = new Big(_modelValue.value).add(props.steps).toFixed(decimalPlaces);
   }
 }
 
@@ -103,7 +131,7 @@ function onButtonBlur() {
     :description="description"
     :state="state"
     :limiter-max-value="limiter && max !== undefined ? max : undefined"
-    :limiter-value="limiter && _modelValue !== undefined && _modelValue !== null ? _modelValue : undefined"
+    :limiter-value="limiter && _modelValue !== undefined && _modelValue !== null ? Number(_modelValue) : undefined"
     :messages="messages"
   >
     <div

package/dist/components/inputs/AntRangeSlider.vue

@@ -38,7 +38,7 @@ const inputClasses = computed(() => {
   };
 
   return {
-    'ant-range-slider transition-colors relative border-none w-full focus:z-10 h-2 bg-base-300 rounded-md outline-none': true,
+    'ant-range-slider transition-colors relative border-none w-full h-2 bg-base-300 rounded-md outline-none': true,
     'disabled:opacity-50 disabled:cursor-not-allowed': props.disabled,
     'invisible': props.skeleton,
     [variants[props.state]]: true

package/dist/components/inputs/AntSelect.vue

@@ -79,7 +79,7 @@ const inputClasses = computed(() => {
   };
 
   return {
-    'flex items-center transition-colors border-none outline relative focus:z-10': true,
+    'flex items-center transition-colors border-none outline relative': true,
     'outline-offset-[-1px] outline-1 focus:outline-offset-[-1px] focus:outline-1': true,
     [variants[props.state]]: true,
     // Skeleton
@@ -315,6 +315,7 @@ function onClickRemoveButton() {
         :grouped="[Grouped.left, Grouped.center].some(item => item === grouped) ? Grouped.center : Grouped.right"
         :size="size"
         :skeleton="skeleton"
+        :disabled="disabled"
         @click="onClickRemoveButton"
       />
     </div>

package/dist/components/inputs/AntTextarea.vue

@@ -70,7 +70,7 @@ const inputClasses = computed(() => {
   };
 
   return {
-    'block transition-colors relative border-none outline w-full focus:z-10 h-full text-black': true,
+    'block transition-colors relative border-none outline w-full h-full text-black': true,
     'outline-offset-[-1px] outline-1 focus:outline-offset-[-1px] focus:outline-1': true,
     'disabled:opacity-50 disabled:cursor-not-allowed': props.disabled,
     [variants[props.state]]: true,

package/dist/components/inputs/Elements/AntBaseInput.vue

@@ -68,7 +68,7 @@ const inputClasses = computed(() => {
   };
 
   return {
-    'block transition-colors relative border-none outline w-full focus:z-10 text-black font-regular': true,
+    'block transition-colors relative border-none outline w-full text-black font-regular': true,
     'outline-offset-[-1px] outline-1 focus:outline-offset-[-1px] focus:outline-1': true,
     'disabled:opacity-50 disabled:cursor-not-allowed': props.disabled,
     'text-right': props.type === BaseInputType.number,
@@ -228,6 +228,7 @@ function onClickClearIcon() {
       :disabled="disabled || skeleton"
       :readonly="readonly"
       :tabindex="hasInputState ? -1 : 0"
+      title=""
       v-bind="$attrs"
       @blur="onBlur"
     >

package/dist/components/inputs/__stories/AntNumberInput.stories.js

@@ -81,7 +81,27 @@ const Docs = exports.Docs = {
   }
 };
 const WithIndicators = exports.WithIndicators = {
-  render: Docs.render,
+  render: args => ({
+    components: {
+      AntNumberInput: _AntNumberInput.default,
+      AntFormGroup: _AntFormGroup.default,
+      AntFormGroupLabel: _AntFormGroupLabel.default
+    },
+    setup() {
+      return {
+        args
+      };
+    },
+    template: `
+      <AntFormGroup>
+        <AntFormGroup direction="column">
+          <AntNumberInput v-bind="args" v-model="args.modelValue" label="Label"
+                          description="Lorem ipsum dolor sit amet"/>
+          <AntNumberInput v-bind="args" v-model="args.modelValue" label="Label"
+                          description="Lorem ipsum dolor sit amet" :steps="0.0001"/>
+        </AntFormGroup>
+      </AntFormGroup>`
+  }),
   args: {
     ...Docs.args,
     indicators: true

package/dist/components/inputs/__stories/AntNumberInput.stories.mjs

@@ -48,7 +48,21 @@ export const Docs = {
   }
 };
 export const WithIndicators = {
-  render: Docs.render,
+  render: (args) => ({
+    components: { AntNumberInput, AntFormGroup, AntFormGroupLabel },
+    setup() {
+      return { args };
+    },
+    template: `
+      <AntFormGroup>
+        <AntFormGroup direction="column">
+          <AntNumberInput v-bind="args" v-model="args.modelValue" label="Label"
+                          description="Lorem ipsum dolor sit amet"/>
+          <AntNumberInput v-bind="args" v-model="args.modelValue" label="Label"
+                          description="Lorem ipsum dolor sit amet" :steps="0.0001"/>
+        </AntFormGroup>
+      </AntFormGroup>`
+  }),
   args: {
     ...Docs.args,
     indicators: true

package/dist/components/inputs/__stories/AntSelect.stories.js

@@ -143,9 +143,23 @@ const skeleton = exports.skeleton = {
   }
 };
 const disabled = exports.disabled = {
-  render: Docs.render,
+  render: (args, ctx) => ({
+    // @ts-ignore
+    components: Docs.render(args, ctx).components,
+    // @ts-ignore
+    setup: Docs.render(args, ctx).setup,
+    template: `
+      <div ref="scrollContainer" class="overflow-y-auto h-[100vh] p-2.5 dashed">
+        <div class="flex flex-col gap-4 justify-center h-[200vh]">
+          <AntSelect v-bind="args" v-model="modelValue"/>
+          <AntSelect v-bind="args" v-model="modelValue" nullable/>
+        </div>
+      </div>
+    `
+  }),
   args: {
     ...Docs.args,
+    modelValue: "1",
     disabled: true
   }
 };
@@ -242,6 +256,13 @@ const summary = exports.summary = {
           <AntSelect v-bind="args" value="1" size="sm" state="warning" disabled/>
           <AntSelect v-bind="args" value="1" size="sm" state="danger" disabled/>
         </div>
+        <div class="flex gap-2.5">
+          <AntSelect v-bind="args" :value="1" v-model="modelValue" size="sm" state="base" disabled nullable/>
+          <AntSelect v-bind="args" :value="1" v-model="modelValue" size="sm" state="info" disabled nullable/>
+          <AntSelect v-bind="args" :value="1" v-model="modelValue" size="sm" state="success" disabled nullable/>
+          <AntSelect v-bind="args" :value="1" v-model="modelValue" size="sm" state="warning" disabled nullable/>
+          <AntSelect v-bind="args" :value="1" v-model="modelValue" size="sm" state="danger" disabled nullable/>
+        </div>
         <div class="flex gap-2.5">
           <AntSelect v-bind="args" :value="null" grouped="none"/>
           <AntSelect v-bind="args" :value="null" grouped="right"/>

package/dist/components/inputs/__stories/AntSelect.stories.mjs

@@ -114,9 +114,23 @@ export const skeleton = {
   }
 };
 export const disabled = {
-  render: Docs.render,
+  render: (args, ctx) => ({
+    // @ts-ignore
+    components: Docs.render(args, ctx).components,
+    // @ts-ignore
+    setup: Docs.render(args, ctx).setup,
+    template: `
+      <div ref="scrollContainer" class="overflow-y-auto h-[100vh] p-2.5 dashed">
+        <div class="flex flex-col gap-4 justify-center h-[200vh]">
+          <AntSelect v-bind="args" v-model="modelValue"/>
+          <AntSelect v-bind="args" v-model="modelValue" nullable/>
+        </div>
+      </div>
+    `
+  }),
   args: {
     ...Docs.args,
+    modelValue: "1",
     disabled: true
   }
 };
@@ -206,6 +220,13 @@ export const summary = {
           <AntSelect v-bind="args" value="1" size="sm" state="warning" disabled/>
           <AntSelect v-bind="args" value="1" size="sm" state="danger" disabled/>
         </div>
+        <div class="flex gap-2.5">
+          <AntSelect v-bind="args" :value="1" v-model="modelValue" size="sm" state="base" disabled nullable/>
+          <AntSelect v-bind="args" :value="1" v-model="modelValue" size="sm" state="info" disabled nullable/>
+          <AntSelect v-bind="args" :value="1" v-model="modelValue" size="sm" state="success" disabled nullable/>
+          <AntSelect v-bind="args" :value="1" v-model="modelValue" size="sm" state="warning" disabled nullable/>
+          <AntSelect v-bind="args" :value="1" v-model="modelValue" size="sm" state="danger" disabled nullable/>
+        </div>
         <div class="flex gap-2.5">
           <AntSelect v-bind="args" :value="null" grouped="none"/>
           <AntSelect v-bind="args" :value="null" grouped="right"/>

package/dist/components/table/AntCollapsibleTableRowContent.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import {computed} from "vue";
+
+const props = withDefaults(defineProps<{
+  isOpen: boolean;
+  skeleton?: boolean;
+}>(), {
+  skeleton: false,
+});
+
+const rowContentClasses = computed(() => ({
+  "grid transition-all duration-300 delay-0 ease-in-out": true,
+  "grid-rows-[0fr]": !props.isOpen,
+  "grid-rows-[1fr]": props.isOpen,
+}));
+
+</script>
+
+<template>
+  <div :class="rowContentClasses">
+    <div class="overflow-hidden">
+      <slot/>
+    </div>
+  </div>
+</template>

package/dist/components/table/AntTable.vue

@@ -2,11 +2,17 @@
 import {AntTableSize, AntTableSortDirection, type TableHeader} from './__types/TableHeader.types';
 import {computed, ref, type Ref, watch} from 'vue';
 import {useVModel} from '@vueuse/core';
-import {State} from '../../enums';
+import {Size, State} from '../../enums';
 import AntTh from './AntTh.vue';
 import AntTd from './AntTd.vue';
 import AntSpinner from '../AntSpinner.vue';
 import AntSkeleton from '../AntSkeleton.vue';
+import {hasSlotContent} from "@/utils";
+import AntCollapsibleTableRowContent from "./AntCollapsibleTableRowContent.vue";
+import {CollapseStrategy} from "@/components/table/__types";
+import {faAngleDown, faAngleUp} from "@fortawesome/free-solid-svg-icons";
+import AntButton from "../buttons/AntButton.vue";
+import AntIcon from "../AntIcon.vue";
 
 defineOptions({inheritAttrs: false});
 
@@ -30,6 +36,8 @@ const props = withDefaults(
     size?: AntTableSize;
     headerColor?: string;
     emptyStateText?: string;
+    collapseStrategy?: CollapseStrategy;
+    rowsCollapsed?: boolean;
   }>(), {
     rowKey: 'id',
     loading: false,
@@ -38,8 +46,12 @@ const props = withDefaults(
     size: AntTableSize.md,
     headerColor: 'bg-base-200',
     emptyStateText: 'We couldn\'t find any entry',
+    collapseStrategy: CollapseStrategy.single,
+    rowsCollapsed: true,
   });
+const slots = defineSlots();
 
+const openItems = ref<number[]>([]);
 const selected: Ref<Record<string, unknown> | undefined> = useVModel(props, 'selectedRow', emits);
 const _loading: Ref<boolean> = useVModel(props, 'loading', emits);
 const _showLightVersion = ref(props.showLightVersion);
@@ -53,6 +65,8 @@ const _headers = computed(() => {
   return props.headers;
 });
 
+const maxColSpan = computed(() => _headers.value.length + (hasSlotContent(slots['rowFirstCell']) ? 1 : 0) + (hasSlotContent(slots['rowLastCell']) ? 1 : 0))
+
 watch(() => props.showLightVersion, (val) => {
   setTimeout(() => _showLightVersion.value = val, val ? 200 : 400);
 });
@@ -82,11 +96,32 @@ function sortTable(header: TableHeader, newDirection: AntTableSortDirection) {
   emits('updateSort', header, newDirection);
 }
 
-function rowClick(elem: Record<string, unknown>): void {
+function rowClick(e: MouseEvent, elem: Record<string, unknown>): void {
+  e.preventDefault();
+
   selected.value = elem;
 
   emits('rowClick', elem);
 }
+
+function toggleRowContent(index: number) {
+  const isOpen = openItems.value.includes(index);
+
+  if (isOpen) {
+    openItems.value = props.collapseStrategy === CollapseStrategy.single && props.rowsCollapsed
+      ? []
+      : openItems.value.filter(item => item !== index);
+  } else {
+    openItems.value = props.collapseStrategy === CollapseStrategy.single
+      ? [index]
+      : [...openItems.value, index];
+  }
+}
+
+// Open all row contents by default
+if (!props.rowsCollapsed) {
+  props.data.map((_, index) => openItems.value.push(index));
+}
 </script>
 
 <template>
@@ -121,67 +156,93 @@ function rowClick(elem: Record<string, unknown>): void {
             </AntTh>
           </template>
 
+          <template v-if="!!$slots.afterRowContent">
+            <td/>
+          </template>
+
           <slot name="headerLastCell"></slot>
         </tr>
         </thead>
 
         <tbody class="bg-white relative">
         <!-- TODO:: Add some kind of virtual list for very large tree data (or required pagination??) -->
-        <tr
-          v-for="(elem, rowIndex) in data"
-          :id="elem[rowKey] as string"
-          :key="`table-row-${elem[rowKey]}-${rowIndex}`"
-          :class="{
+        <template
+          v-for="(elem, rowIndex) in data" :key="`table-row-${elem[rowKey]}-${rowIndex}`"
+        >
+          <tr
+            :id="elem[rowKey] as string"
+            :class="{
               'bg-primary-200 text-primary-200-font transition-colors': elem === selected,
               'bg-white text-for-white-bg-font': elem !== selected && rowIndex % 2 === 0,
               'bg-base-100 text-base-100-font': elem !== selected && rowIndex % 2 !== 0,
               'cursor-pointer': selectableRows,
               'hover:bg-base-200': selectableRows && elem !== selected,
             }"
-        >
-          <slot
-            name="rowFirstCell"
-            v-bind="{ elem }"
-          />
+          >
+            <slot
+              name="rowFirstCell"
+              v-bind="{ elem }"
+            />
 
-          <template v-for="(header, colIndex) in _headers">
-            <AntTd
-              v-if="!_showLightVersion || (_showLightVersion && header.lightVersion)"
-              :key="`table-cell-${header.identifier}-${colIndex}`"
-              :header="header"
-              :element="elem"
-              :align="header.align"
-              :size="size"
-              @click="rowClick(elem)"
-            >
-              <template #beforeCellContent="props">
-                <slot
-                  name="beforeCellContent"
-                  v-bind="{...props, colIndex, rowIndex}"
-                />
-              </template>
+            <template v-for="(header, colIndex) in _headers">
+              <AntTd
+                v-if="!_showLightVersion || (_showLightVersion && header.lightVersion)"
+                :key="`table-cell-${header.identifier}-${colIndex}`"
+                :header="header"
+                :element="elem"
+                :align="header.align"
+                :size="size"
+                @click="(e) => rowClick(e, elem)"
+              >
+                <template #beforeCellContent="props">
+                  <slot
+                    name="beforeCellContent"
+                    v-bind="{...props, colIndex, rowIndex}"
+                  />
+                </template>
 
-              <template #cellContent="props">
-                <slot
-                  name="cellContent"
-                  v-bind="{...props, colIndex, rowIndex}"
-                />
-              </template>
+                <template #cellContent="props">
+                  <slot
+                    name="cellContent"
+                    v-bind="{...props, colIndex, rowIndex}"
+                  />
+                </template>
 
-              <template #afterCellContent="props">
-                <slot
-                  name="afterCellContent"
-                  v-bind="{...props, colIndex, rowIndex}"
-                />
-              </template>
-            </AntTd>
-          </template>
+                <template #afterCellContent="props">
+                  <slot
+                    name="afterCellContent"
+                    v-bind="{...props, colIndex, rowIndex}"
+                  />
+                </template>
+              </AntTd>
+            </template>
 
-          <slot
-            name="rowLastCell"
-            v-bind="{ elem }"
-          />
-        </tr>
+            <template v-if="!!$slots.afterRowContent">
+              <td class="whitespace-nowrap text-sm font-medium relative px-2 py-0 h-9 text-right"
+                  @click="(e) => rowClick(e, elem)">
+                <AntButton @click="toggleRowContent(rowIndex)" :size="Size.xs2">
+                  <AntIcon :icon="openItems.includes(rowIndex) ? faAngleUp : faAngleDown"/>
+                </AntButton>
+              </td>
+            </template>
+
+            <slot
+              name="rowLastCell"
+              v-bind="{ elem }"
+            />
+          </tr>
+
+          <template v-if="!!$slots.afterRowContent">
+            <tr>
+              <td :colspan="maxColSpan + 1" class="p-0">
+                <AntCollapsibleTableRowContent :is-open="openItems.includes(rowIndex)"
+                >
+                  <slot name="afterRowContent" v-bind="{ element: elem, rowIndex }"/>
+                </AntCollapsibleTableRowContent>
+              </td>
+            </tr>
+          </template>
+        </template>
 
         <tr v-if="data.length <= 0 && !_loading">
           <td

package/dist/components/table/AntTd.vue

@@ -74,7 +74,3 @@ const cellClasses = computed(() => ({
     />
   </td>
 </template>
-
-<style scoped>
-
-</style>

package/dist/components/table/__stories/AntTable.stories.d.ts

@@ -7,3 +7,6 @@ export declare const Docs: Story;
 export declare const Empty: Story;
 export declare const Skeleton: Story;
 export declare const Loading: Story;
+export declare const Collapsible: Story;
+export declare const MultipleCollapseStrategy: Story;
+export declare const DefaultCollapseOpen: Story;

package/dist/components/table/__stories/AntTable.stories.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-module.exports = exports.Skeleton = exports.Loading = exports.Empty = exports.Docs = void 0;
+module.exports = exports.Skeleton = exports.MultipleCollapseStrategy = exports.Loading = exports.Empty = exports.Docs = exports.DefaultCollapseOpen = exports.Collapsible = void 0;
 var _AntTable = _interopRequireDefault(require("../AntTable.vue"));
 var _TableHeader = require("../__types/TableHeader.types");
 var _vue = require("vue");
@@ -169,8 +169,8 @@ const Docs = exports.Docs = {
       <div class="h-96 border border-dashed border-base-300">
         <AntTable v-bind="args" v-model="selected" :selected-row="selected" @row-click="(val) => selected = val">
           <template #cellContent="{element: entry, header}">
-            <div v-if="header.identifier === 'employeed'">
-              <AntSwitch v-model="entry.employeed"/>
+            <div v-if="header.identifier === 'employed'">
+              <AntSwitch v-model="entry.employed"/>
             </div>
           </template>
         </AntTable>
@@ -196,8 +196,8 @@ const Docs = exports.Docs = {
       rowClassList: "",
       type: _TableHeader.AntTableRowTypes.text
     }, {
-      title: "Employeed",
-      identifier: "employeed",
+      title: "Employed",
+      identifier: "employed",
       rowClassList: "",
       type: _TableHeader.AntTableRowTypes.slot
     }],
@@ -222,8 +222,8 @@ const Empty = exports.Empty = {
         <div class="h-96 border border-dashed border-base-300">
           <AntTable v-bind="args" v-model="selected" :selected-row="selected" @row-click="(val) => selected = val">
             <template #cellContent="{element: entry, header}">
-              <div v-if="header.identifier === 'employeed'">
-                <AntSwitch v-model="entry.employeed"/>
+              <div v-if="header.identifier === 'employed'">
+                <AntSwitch v-model="entry.employed"/>
               </div>
             </template>
           </AntTable>
@@ -232,14 +232,13 @@ const Empty = exports.Empty = {
           <div class="h-96 border border-dashed border-base-300">
             <AntTable v-bind="args" v-model="selected" :selected-row="selected" @row-click="(val) => selected = val" empty-state-text="Custom Empty State Text">
               <template #cellContent="{element: entry, header}">
-                <div v-if="header.identifier === 'employeed'">
-                  <AntSwitch v-model="entry.employeed"/>
+                <div v-if="header.identifier === 'employed'">
+                  <AntSwitch v-model="entry.employed"/>
                 </div>
               </template>
             </AntTable>
           </div>
         </div>
-      </div>
     `
   }),
   args: {
@@ -334,4 +333,109 @@ const Loading = exports.Loading = {
     }],
     data: testData.value
   }
+};
+const Collapsible = exports.Collapsible = {
+  render: args => ({
+    components: {
+      AntTable: _AntTable.default,
+      AntSwitch: _AntSwitch.default
+    },
+    setup() {
+      const selected = (0, _vue.ref)();
+      return {
+        args,
+        selected
+      };
+    },
+    template: `
+      <div class="h-96 border border-dashed border-base-300">
+        <AntTable v-bind="args" v-model="selected" :selected-row="selected" @row-click="(val) => selected = val">
+          <template #cellContent="{element: entry, header}">
+            <div v-if="header.identifier === 'employed'">
+              <AntSwitch v-model="entry.employed"/>
+            </div>
+          </template>
+
+          <template #afterRowContent="{element, rowIndex}">
+            <div class="p-4">
+              <pre>
+                {{element}}
+              </pre>
+            </div>
+          </template>
+        </AntTable>
+      </div>
+    `
+  }),
+  args: Docs.args
+};
+const MultipleCollapseStrategy = exports.MultipleCollapseStrategy = {
+  render: args => ({
+    components: {
+      AntTable: _AntTable.default,
+      AntSwitch: _AntSwitch.default
+    },
+    setup() {
+      const selected = (0, _vue.ref)();
+      return {
+        args,
+        selected
+      };
+    },
+    template: `
+      <div class="h-96 border border-dashed border-base-300">
+        <AntTable v-bind="args" v-model="selected" :selected-row="selected" @row-click="(val) => selected = val" collapse-strategy="multiple">
+          <template #cellContent="{element: entry, header}">
+            <div v-if="header.identifier === 'employed'">
+              <AntSwitch v-model="entry.employed"/>
+            </div>
+          </template>
+
+          <template #afterRowContent="{element, rowIndex}">
+            <div class="p-4">
+              <pre>
+                {{JSON.stringify(element, null, 2)}}
+              </pre>
+            </div>
+          </template>
+        </AntTable>
+      </div>
+    `
+  }),
+  args: Docs.args
+};
+const DefaultCollapseOpen = exports.DefaultCollapseOpen = {
+  render: args => ({
+    components: {
+      AntTable: _AntTable.default,
+      AntSwitch: _AntSwitch.default
+    },
+    setup() {
+      const selected = (0, _vue.ref)();
+      return {
+        args,
+        selected
+      };
+    },
+    template: `
+      <div class="h-96 border border-dashed border-base-300">
+        <AntTable v-bind="args" v-model="selected" :selected-row="selected" @row-click="(val) => selected = val" :rows-collapsed="false">
+          <template #cellContent="{element: entry, header}">
+            <div v-if="header.identifier === 'employed'">
+              <AntSwitch v-model="entry.employed"/>
+            </div>
+          </template>
+
+          <template #afterRowContent="{element, rowIndex}">
+            <div class="p-4">
+              <pre>
+                {{JSON.stringify(element, null, 2)}}
+              </pre>
+            </div>
+          </template>
+        </AntTable>
+      </div>
+    `
+  }),
+  args: Docs.args
 };

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

@@ -113,8 +113,8 @@ export const Docs = {
       <div class="h-96 border border-dashed border-base-300">
         <AntTable v-bind="args" v-model="selected" :selected-row="selected" @row-click="(val) => selected = val">
           <template #cellContent="{element: entry, header}">
-            <div v-if="header.identifier === 'employeed'">
-              <AntSwitch v-model="entry.employeed"/>
+            <div v-if="header.identifier === 'employed'">
+              <AntSwitch v-model="entry.employed"/>
             </div>
           </template>
         </AntTable>
@@ -144,8 +144,8 @@ export const Docs = {
         type: AntTableRowTypes.text
       },
       {
-        title: "Employeed",
-        identifier: "employeed",
+        title: "Employed",
+        identifier: "employed",
         rowClassList: "",
         type: AntTableRowTypes.slot
       }
@@ -165,8 +165,8 @@ export const Empty = {
         <div class="h-96 border border-dashed border-base-300">
           <AntTable v-bind="args" v-model="selected" :selected-row="selected" @row-click="(val) => selected = val">
             <template #cellContent="{element: entry, header}">
-              <div v-if="header.identifier === 'employeed'">
-                <AntSwitch v-model="entry.employeed"/>
+              <div v-if="header.identifier === 'employed'">
+                <AntSwitch v-model="entry.employed"/>
               </div>
             </template>
           </AntTable>
@@ -175,14 +175,13 @@ export const Empty = {
           <div class="h-96 border border-dashed border-base-300">
             <AntTable v-bind="args" v-model="selected" :selected-row="selected" @row-click="(val) => selected = val" empty-state-text="Custom Empty State Text">
               <template #cellContent="{element: entry, header}">
-                <div v-if="header.identifier === 'employeed'">
-                  <AntSwitch v-model="entry.employeed"/>
+                <div v-if="header.identifier === 'employed'">
+                  <AntSwitch v-model="entry.employed"/>
                 </div>
               </template>
             </AntTable>
           </div>
         </div>
-      </div>
     `
   }),
   args: {
@@ -293,3 +292,90 @@ export const Loading = {
     data: testData.value
   }
 };
+export const Collapsible = {
+  render: (args) => ({
+    components: { AntTable, AntSwitch },
+    setup() {
+      const selected = ref();
+      return { args, selected };
+    },
+    template: `
+      <div class="h-96 border border-dashed border-base-300">
+        <AntTable v-bind="args" v-model="selected" :selected-row="selected" @row-click="(val) => selected = val">
+          <template #cellContent="{element: entry, header}">
+            <div v-if="header.identifier === 'employed'">
+              <AntSwitch v-model="entry.employed"/>
+            </div>
+          </template>
+
+          <template #afterRowContent="{element, rowIndex}">
+            <div class="p-4">
+              <pre>
+                {{element}}
+              </pre>
+            </div>
+          </template>
+        </AntTable>
+      </div>
+    `
+  }),
+  args: Docs.args
+};
+export const MultipleCollapseStrategy = {
+  render: (args) => ({
+    components: { AntTable, AntSwitch },
+    setup() {
+      const selected = ref();
+      return { args, selected };
+    },
+    template: `
+      <div class="h-96 border border-dashed border-base-300">
+        <AntTable v-bind="args" v-model="selected" :selected-row="selected" @row-click="(val) => selected = val" collapse-strategy="multiple">
+          <template #cellContent="{element: entry, header}">
+            <div v-if="header.identifier === 'employed'">
+              <AntSwitch v-model="entry.employed"/>
+            </div>
+          </template>
+
+          <template #afterRowContent="{element, rowIndex}">
+            <div class="p-4">
+              <pre>
+                {{JSON.stringify(element, null, 2)}}
+              </pre>
+            </div>
+          </template>
+        </AntTable>
+      </div>
+    `
+  }),
+  args: Docs.args
+};
+export const DefaultCollapseOpen = {
+  render: (args) => ({
+    components: { AntTable, AntSwitch },
+    setup() {
+      const selected = ref();
+      return { args, selected };
+    },
+    template: `
+      <div class="h-96 border border-dashed border-base-300">
+        <AntTable v-bind="args" v-model="selected" :selected-row="selected" @row-click="(val) => selected = val" :rows-collapsed="false">
+          <template #cellContent="{element: entry, header}">
+            <div v-if="header.identifier === 'employed'">
+              <AntSwitch v-model="entry.employed"/>
+            </div>
+          </template>
+
+          <template #afterRowContent="{element, rowIndex}">
+            <div class="p-4">
+              <pre>
+                {{JSON.stringify(element, null, 2)}}
+              </pre>
+            </div>
+          </template>
+        </AntTable>
+      </div>
+    `
+  }),
+  args: Docs.args
+};

package/dist/components/table/__types/AntCollapsibleTable.types.d.ts

@@ -0,0 +1,4 @@
+export declare enum CollapseStrategy {
+    single = "single",
+    multiple = "multiple"
+}

package/dist/components/table/__types/AntCollapsibleTable.types.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CollapseStrategy = void 0;
+var CollapseStrategy = exports.CollapseStrategy = /* @__PURE__ */(CollapseStrategy2 => {
+  CollapseStrategy2["single"] = "single";
+  CollapseStrategy2["multiple"] = "multiple";
+  return CollapseStrategy2;
+})(CollapseStrategy || {});

package/dist/components/table/__types/AntCollapsibleTable.types.mjs

@@ -0,0 +1,5 @@
+export var CollapseStrategy = /* @__PURE__ */ ((CollapseStrategy2) => {
+  CollapseStrategy2["single"] = "single";
+  CollapseStrategy2["multiple"] = "multiple";
+  return CollapseStrategy2;
+})(CollapseStrategy || {});

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

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

package/dist/components/table/__types/index.js

@@ -13,4 +13,15 @@ Object.keys(_TableHeader).forEach(function (key) {
       return _TableHeader[key];
     }
   });
+});
+var _AntCollapsibleTable = require("./AntCollapsibleTable.types");
+Object.keys(_AntCollapsibleTable).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _AntCollapsibleTable[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _AntCollapsibleTable[key];
+    }
+  });
 });

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

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

package/dist/tailwind.config.d.ts

@@ -1,2 +1,3 @@
-declare const _default: import("tailwindcss/types/config").Config;
+import { type Config } from 'tailwindcss';
+declare const _default: Config;
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antify/ui",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "private": false,
   "type": "module",
   "exports": {
@@ -58,7 +58,8 @@
     "@vuepic/vue-datepicker": "^6.1.0",
     "@vueuse/components": "^10.7.2",
     "@vueuse/core": "^10.7.2",
-    "@vueuse/router": "^10.7.2"
+    "@vueuse/router": "^10.7.2",
+    "big.js": "^6.2.2"
   },
   "devDependencies": {
     "@antify/validate": "^1.14.0",
@@ -73,6 +74,7 @@
     "@storybook/vue3": "^8.2.9",
     "@storybook/vue3-vite": "^8.2.9",
     "@tsconfig/node20": "^20.1.4",
+    "@types/big.js": "^6.2.2",
     "@types/jsdom": "^21.1.7",
     "@types/node": "^20.14.5",
     "@vitejs/plugin-vue": "^5.0.5",
@@ -84,7 +86,7 @@
     "standard-version": "^9.5.0",
     "storybook": "^8.2.9",
     "storybook-vue3-router": "^5.0.0",
-    "typescript": "~5.4.0",
+    "typescript": "~5.5.0",
     "unbuild": "^2.0.0",
     "vite": "^5.3.1",
     "vitest": "^1.6.0",