@antify/ui 2.1.0 → 2.2.1

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/AntCheckbox.vue

@@ -140,6 +140,7 @@ onMounted(() => {
 
 <template>
   <AntField
+    data-e2e="checkbox"
     :label="label"
     :description="description"
     :skeleton="skeleton"

package/dist/components/inputs/AntCheckboxGroup.vue

@@ -86,6 +86,7 @@ onMounted(() => {
 
 <template>
   <AntField
+    data-e2e="checkbox-group"
     :label="label"
     :description="description"
     :skeleton="skeleton"

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/AntSwitch.vue

@@ -130,6 +130,7 @@ function onBlur(e: FocusEvent) {
 
 <template>
   <AntField
+    data-e2e="switch"
     :label="label"
     :size="size"
     :description="description"

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

@@ -1,12 +1,18 @@
 <script lang="ts" setup>
 import {AntTableSize, AntTableSortDirection, type TableHeader} from './__types/TableHeader.types';
-import {computed, ref, type Ref, watch} from 'vue';
+import {computed, onMounted, 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 "../../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);
 });
@@ -87,6 +101,42 @@ function rowClick(elem: Record<string, unknown>): void {
 
   emits('rowClick', elem);
 }
+
+function toggleRowContent(index: number) {
+  const isOpen = openItems.value.includes(index);
+
+  if (isOpen) {
+    openItems.value = props.collapseStrategy === CollapseStrategy.single
+      ? []
+      : openItems.value.filter(item => item !== index);
+  } else {
+    openItems.value = props.collapseStrategy === CollapseStrategy.single
+      ? [index]
+      : [...openItems.value, index];
+  }
+}
+
+function openRowsByDefault() {
+  if (!props.rowsCollapsed && props.data.length > 0) {
+    openItems.value = props.data.map((_, index) => index);
+  }
+}
+
+watch(() => props.data, (currVal, prevVal) => {
+  if (currVal.length > prevVal.length) {
+    // Add newest element to the list of open items so it is open by default
+    // Necessary when table content is changed dynamically
+    if (props.collapseStrategy === CollapseStrategy.single) {
+      openItems.value = [currVal.length - 1];
+    } else {
+      openItems.value = [...openItems.value, currVal.length - 1];
+    }
+  }
+})
+
+onMounted(() => {
+  openRowsByDefault();
+});
 </script>
 
 <template>
@@ -121,67 +171,95 @@ 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
+            data-e2e="table-row"
+            :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}-${rowIndex}-${colIndex}`"
+                :data-e2e="`table-cell-${header.identifier}`"
+                :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 #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="rowClick(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 data-e2e="table-after-row-content">
+              <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;