@antify/ui 2.0.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/AntTooltip.vue

@@ -9,10 +9,12 @@ const props = withDefaults(defineProps<{
   state?: InputState,
   delay?: number,
   tooltipClasses?: string | Record<string, boolean>
+  disabled?: boolean;
 }>(), {
   state: InputState.base,
   delay: 600,
   tooltipClasses: '',
+  disabled: false,
 });
 
 const floatOpen = ref<boolean>(false)
@@ -157,7 +159,7 @@ function onClick() {
 
     <teleport to="body">
       <div
-        v-if="floatOpen && hasSlotContent($slots.content)"
+        v-if="floatOpen && hasSlotContent($slots.content) && !disabled"
         :class="_tooltipClasses"
         ref="floating"
         :style="{

package/dist/components/__stories/AntTooltip.stories.d.ts

@@ -4,3 +4,4 @@ declare const meta: Meta<typeof AntTooltip>;
 export default meta;
 type Story = StoryObj<typeof AntTooltip>;
 export declare const Docs: Story;
+export declare const disabled: Story;

package/dist/components/__stories/AntTooltip.stories.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-module.exports = exports.Docs = void 0;
+exports.disabled = exports.default = exports.Docs = void 0;
 var _AntTooltip = _interopRequireDefault(require("../AntTooltip.vue"));
 var _enums = require("../../enums");
 var _AntButton = _interopRequireDefault(require("../buttons/AntButton.vue"));
@@ -102,4 +102,11 @@ const Docs = exports.Docs = {
     });
   },
   args: {}
+};
+const disabled = exports.disabled = {
+  render: Docs.render,
+  args: {
+    ...Docs.args,
+    disabled: true
+  }
 };

package/dist/components/__stories/AntTooltip.stories.mjs

@@ -75,3 +75,10 @@ export const Docs = {
   },
   args: {}
 };
+export const disabled = {
+  render: Docs.render,
+  args: {
+    ...Docs.args,
+    disabled: true
+  }
+};

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/crud/AntCrudTableFilter.vue

@@ -81,27 +81,25 @@ watch(() => props.fullWidth, (val) => {
         v-model:show-dropdown="showDropdown"
         :position="Position.left"
       >
-        <template #reference>
-          <div class="flex">
-            <AntButton
-              :state="hasFilter ? State.info : State.base"
-              :grouped="hasFilter ? Grouped.left : Grouped.none"
-              :skeleton="skeleton"
-              :icon-left="faFilter"
-              @click="() => showDropdown = !showDropdown"
-            />
+        <div class="flex">
+          <AntButton
+            :state="hasFilter ? State.info : State.base"
+            :grouped="hasFilter ? Grouped.left : Grouped.none"
+            :skeleton="skeleton"
+            :icon-left="faFilter"
+            @click="() => showDropdown = !showDropdown"
+          />
 
-            <AntButton
-              v-if="hasFilter"
-              :state="State.info"
-              :grouped="Grouped.right"
-              :skeleton="skeleton"
-              :icon-left="faMultiply"
-              filled
-              @click="$emit('removeFilter')"
-            />
-          </div>
-        </template>
+          <AntButton
+            v-if="hasFilter"
+            :state="State.info"
+            :grouped="Grouped.right"
+            :skeleton="skeleton"
+            :icon-left="faMultiply"
+            filled
+            @click="$emit('removeFilter')"
+          />
+        </div>
 
         <template #content>
           <slot name="dropdownContent"/>

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/Elements/AntSelectMenu.vue

@@ -12,7 +12,6 @@ import type {SelectOption} from '../__types';
 import {useElementSize, useVModel, onClickOutside} from '@vueuse/core';
 import type {Validator} from '@antify/validate';
 import {autoUpdate, flip, offset, useFloating} from "@floating-ui/vue";
-import {vOnClickOutside} from '@vueuse/components';
 
 const emit = defineEmits(['update:open', 'update:modelValue', 'update:focused', 'selectElement']);
 const props = withDefaults(defineProps<{
@@ -35,7 +34,7 @@ const props = withDefaults(defineProps<{
   closeOnSelectItem: true,
 });
 const reference = ref<HTMLElement | null | undefined>(props.inputRef)
-const width = useElementSize(reference);
+const elementSize = useElementSize(reference);
 const floating = ref<HTMLElement | null>(null)
 const {floatingStyles, middlewareData, placement} = useFloating(reference, floating, {
   placement: 'bottom',
@@ -69,7 +68,7 @@ const dropdownClasses = computed(() => {
   };
 
   return {
-    'w-full border flex flex-col gap-px outline-none -mt-px overflow-hidden shadow-md z-[90]': true,
+    'w-full border flex flex-col gap-px outline-none -mt-px overflow-y-auto shadow-md z-[90] max-h-[250px]': true,
     'rounded-md': true,
     [variants[props.state]]: true,
   };
@@ -84,7 +83,7 @@ const dropDownItemClasses = computed(() => {
   };
 
   return {
-    'select-none text-ellipsis overflow-hidden whitespace-nowrap': true,
+    'select-none text-ellipsis overflow-hidden whitespace-nowrap min-h-fit': true,
     [variants[props.state]]: true,
     // Size
     'p-1 text-xs': props.size === Size.xs2,
@@ -203,31 +202,31 @@ watch(_modelValue, (val) => {
     <slot/>
 
     <teleport to="body">
-      <div
-        v-if="isOpen"
-        :class="dropdownClasses"
-        ref="floating"
-        :style="{width: `${width.width.value}px!important`, ...floatingStyles}"
-      >
         <div
-          v-for="(option, index) in options"
-          :key="`option-${index}`"
-          :class="{...dropDownItemClasses, ...getActiveDropDownItemClasses(option)}"
-          @mousedown="(e) => onClickDropDownItem(e, option.value)"
-          @mouseover="() => focusedDropDownItem = option.value"
+          v-if="isOpen"
+          :class="dropdownClasses"
+          ref="floating"
+          :style="{width: `${elementSize.width.value}px!important`, ...floatingStyles}"
         >
-          {{ option.label }}
+          <div
+            v-for="(option, index) in options"
+            :key="`option-${index}`"
+            :class="{...dropDownItemClasses, ...getActiveDropDownItemClasses(option)}"
+            @mousedown="(e) => onClickDropDownItem(e, option.value)"
+            @mouseover="() => focusedDropDownItem = option.value"
+          >
+            {{ option.label }}
+          </div>
+
+          <div
+            v-if="options.length === 0"
+            :class="{...dropDownItemClasses}"
+          >
+            <slot name="empty">
+              No options available
+            </slot>
+          </div>
         </div>
-
-        <div
-          v-if="options.length === 0"
-          :class="{...dropDownItemClasses}"
-        >
-          <slot name="empty">
-            No options available
-          </slot>
-        </div>
-      </div>
     </teleport>
   </div>
 </template>

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

@@ -4,6 +4,7 @@ declare const meta: Meta<typeof AntSelect>;
 export default meta;
 type Story = StoryObj<typeof AntSelect>;
 export declare const Docs: Story;
+export declare const manyOptions: Story;
 export declare const nullable: Story;
 export declare const skeleton: Story;
 export declare const disabled: Story;

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.withPlaceholder = exports.summary = exports.skeleton = exports.nullable = exports.ellipsisText = exports.disabled = exports.default = exports.Docs = void 0;
+exports.withPlaceholder = exports.summary = exports.skeleton = exports.nullable = exports.manyOptions = exports.ellipsisText = exports.disabled = exports.default = exports.Docs = void 0;
 var _Size = require("../../../enums/Size.enum");
 var _AntSelect = _interopRequireDefault(require("../AntSelect.vue"));
 var _AntSelectMenu = _interopRequireDefault(require("../Elements/AntSelectMenu.vue"));
@@ -75,6 +75,10 @@ const options = [{
   label: "Option 4",
   value: "4"
 }];
+const manySelectOptions = [...Array(24).keys()].map(key => ({
+  label: `Option ${Number(key) + 1}`,
+  value: Number(key) + 1
+}));
 const Docs = exports.Docs = {
   render: args => ({
     components: {
@@ -115,6 +119,13 @@ const Docs = exports.Docs = {
     description: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
   }
 };
+const manyOptions = exports.manyOptions = {
+  render: Docs.render,
+  args: {
+    ...Docs.args,
+    options: manySelectOptions
+  }
+};
 const nullable = exports.nullable = {
   render: Docs.render,
   args: {
@@ -132,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
   }
 };
@@ -185,7 +210,8 @@ const summary = exports.summary = {
     },
     setup() {
       return {
-        args
+        args,
+        manySelectOptions
       };
     },
     template: `
@@ -230,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

@@ -53,6 +53,10 @@ const options = [
     value: "4"
   }
 ];
+const manySelectOptions = [...Array(24).keys()].map((key) => ({
+  label: `Option ${Number(key) + 1}`,
+  value: Number(key) + 1
+}));
 export const Docs = {
   render: (args) => ({
     components: { AntSelect, AntDropdown },
@@ -86,6 +90,13 @@ export const Docs = {
     description: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
   }
 };
+export const manyOptions = {
+  render: Docs.render,
+  args: {
+    ...Docs.args,
+    options: manySelectOptions
+  }
+};
 export const nullable = {
   render: Docs.render,
   args: {
@@ -103,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
   }
 };
@@ -151,7 +176,7 @@ export const summary = {
   render: (args) => ({
     components: { AntSelect },
     setup() {
-      return { args };
+      return { args, manySelectOptions };
     },
     template: `
       <div class="p-4 flex flex-col gap-2.5">
@@ -195,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>