sprintify-ui 0.8.2 → 0.8.4

package/dist/types/components/BaseCollapse.vue.d.ts

@@ -0,0 +1,86 @@
+declare function toggle(): void;
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<{
+    defaultOpen?: boolean | undefined;
+    icon?: string | undefined;
+    iconPosition?: "right" | "left" | undefined;
+    isOpenIconClass?: string | undefined;
+    isCloseIconClass?: string | undefined;
+    twIcon?: string | string[] | null | undefined;
+    twHeader?: string | string[] | null | undefined;
+    twTitle?: string | string[] | null | undefined;
+    twContent?: string | string[] | null | undefined;
+}>, {
+    defaultOpen: boolean;
+    icon: string;
+    iconPosition: string;
+    twIcon: null;
+    twHeader: null;
+    twTitle: null;
+    twContent: null;
+    isOpenIconClass: string;
+    isCloseIconClass: string;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<{
+    defaultOpen?: boolean | undefined;
+    icon?: string | undefined;
+    iconPosition?: "right" | "left" | undefined;
+    isOpenIconClass?: string | undefined;
+    isCloseIconClass?: string | undefined;
+    twIcon?: string | string[] | null | undefined;
+    twHeader?: string | string[] | null | undefined;
+    twTitle?: string | string[] | null | undefined;
+    twContent?: string | string[] | null | undefined;
+}>, {
+    defaultOpen: boolean;
+    icon: string;
+    iconPosition: string;
+    twIcon: null;
+    twHeader: null;
+    twTitle: null;
+    twContent: null;
+    isOpenIconClass: string;
+    isCloseIconClass: string;
+}>>>, {
+    icon: string;
+    iconPosition: "right" | "left";
+    defaultOpen: boolean;
+    isOpenIconClass: string;
+    isCloseIconClass: string;
+    twIcon: string | string[] | null;
+    twHeader: string | string[] | null;
+    twTitle: string | string[] | null;
+    twContent: string | string[] | null;
+}, {}>, {
+    header?(_: {
+        open: boolean;
+        toggle: typeof toggle;
+    }): any;
+    title?(_: {
+        open: boolean;
+    }): any;
+    content?(_: {
+        open: boolean;
+    }): any;
+}>;
+export default _default;
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToOption<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};

package/dist/types/components/BaseDataIteratorSectionColumns.vue.d.ts

@@ -220,7 +220,7 @@ declare const _default: import("vue").DefineComponent<{
                     meta: Record<string, any> | undefined;
                     newKey: string;
                     numeric: boolean;
-                    position: "right" | "left";
+                    align: "right" | "left" | "center";
                     searchable: boolean;
                     sortable: boolean;
                     ignoreRowInteractions: boolean;
@@ -235,8 +235,6 @@ declare const _default: import("vue").DefineComponent<{
                     style: {
                         width: number | undefined;
                     };
-                    thAttrs: (column: import("@/index.js").BaseTableColumnData) => Record<string, any>;
-                    tdAttrs: (row: import("@/index.js").Row, column: import("@/index.js").BaseTableColumnData) => Record<string, any>;
                 }[]>;
                 uncheckAll: () => void;
                 scrollTop: () => void;
@@ -370,7 +368,7 @@ declare const _default: import("vue").DefineComponent<{
                 meta: Record<string, any> | undefined;
                 newKey: string;
                 numeric: boolean;
-                position: "right" | "left";
+                align: "right" | "left" | "center";
                 searchable: boolean;
                 sortable: boolean;
                 ignoreRowInteractions: boolean;
@@ -385,8 +383,6 @@ declare const _default: import("vue").DefineComponent<{
                 style: {
                     width: number | undefined;
                 };
-                thAttrs: (column: import("@/index.js").BaseTableColumnData) => Record<string, any>;
-                tdAttrs: (row: import("@/index.js").Row, column: import("@/index.js").BaseTableColumnData) => Record<string, any>;
             }[]>;
             uncheckAll: () => void;
             scrollTop: () => void;
@@ -628,7 +624,7 @@ declare const _default: import("vue").DefineComponent<{
                     meta: Record<string, any> | undefined;
                     newKey: string;
                     numeric: boolean;
-                    position: "right" | "left";
+                    align: "right" | "left" | "center";
                     searchable: boolean;
                     sortable: boolean;
                     ignoreRowInteractions: boolean;
@@ -643,8 +639,6 @@ declare const _default: import("vue").DefineComponent<{
                     style: {
                         width: number | undefined;
                     };
-                    thAttrs: (column: import("@/index.js").BaseTableColumnData) => Record<string, any>;
-                    tdAttrs: (row: import("@/index.js").Row, column: import("@/index.js").BaseTableColumnData) => Record<string, any>;
                 }[]>;
                 uncheckAll: () => void;
                 scrollTop: () => void;
@@ -778,7 +772,7 @@ declare const _default: import("vue").DefineComponent<{
                 meta: Record<string, any> | undefined;
                 newKey: string;
                 numeric: boolean;
-                position: "right" | "left";
+                align: "right" | "left" | "center";
                 searchable: boolean;
                 sortable: boolean;
                 ignoreRowInteractions: boolean;
@@ -793,8 +787,6 @@ declare const _default: import("vue").DefineComponent<{
                 style: {
                     width: number | undefined;
                 };
-                thAttrs: (column: import("@/index.js").BaseTableColumnData) => Record<string, any>;
-                tdAttrs: (row: import("@/index.js").Row, column: import("@/index.js").BaseTableColumnData) => Record<string, any>;
             }[]>;
             uncheckAll: () => void;
             scrollTop: () => void;

package/dist/types/components/BaseDataTableTemplate.vue.d.ts

@@ -90,7 +90,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         meta: Record<string, any> | undefined;
         newKey: string;
         numeric: boolean;
-        position: "right" | "left";
+        align: "right" | "left" | "center";
         searchable: boolean;
         sortable: boolean;
         ignoreRowInteractions: boolean;
@@ -105,8 +105,6 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         style: {
             width: number | undefined;
         };
-        thAttrs: (column: BaseTableColumnData) => Record<string, any>;
-        tdAttrs: (row: Row, column: BaseTableColumnData) => Record<string, any>;
     }[]>;
     uncheckAll: typeof uncheckAll;
     scrollTop: () => void;

package/dist/types/components/BaseLoadingCover.vue.d.ts

@@ -88,8 +88,8 @@ declare const _default: import("vue").DefineComponent<{
 }>>, {
     modelValue: boolean;
     size: "sm" | "lg";
-    twBackdrop: string;
     twIcon: string;
+    twBackdrop: string;
     duration: string;
     delay: number;
 }, {}>;

package/dist/types/components/BaseTableCell.vue.d.ts

@@ -51,10 +51,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     title: string;
     to: RouteLocationRaw;
     href: string;
+    align: "right" | "left" | "center";
     ignoreRowInteractions: boolean;
     target: "_blank" | "_self" | "_parent" | "_top";
     style: string | false | import("vue").CSSProperties | StyleValue[] | null;
-    align: "right" | "left" | "center";
     colspan: string | number;
 }, {}>, {
     default?(_: {

package/dist/types/components/BaseTableColumn.vue.d.ts

@@ -34,7 +34,7 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
         type: BooleanConstructor;
     };
-    position: {
+    align: {
         default: string;
         type: PropType<"right" | "left" | "center">;
     };
@@ -82,16 +82,6 @@ declare const _default: import("vue").DefineComponent<{
         default: undefined;
         type: PropType<(row: CollectionItem, index: number, column: BaseTableColumnData, colIndex: number, event: MouseEvent) => void>;
     };
-    /** Adds native attributes to th :th-attrs="(column)" => ({})" */
-    thAttrs: {
-        type: FunctionConstructor;
-        default: () => {};
-    };
-    /** Adds native attributes to td :td-attrs="(row, column)" => ({})" */
-    tdAttrs: {
-        type: FunctionConstructor;
-        default: () => {};
-    };
 }, {
     nextSequence: any;
     addColumn: any;
@@ -136,7 +126,7 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
         type: BooleanConstructor;
     };
-    position: {
+    align: {
         default: string;
         type: PropType<"right" | "left" | "center">;
     };
@@ -184,16 +174,6 @@ declare const _default: import("vue").DefineComponent<{
         default: undefined;
         type: PropType<(row: CollectionItem, index: number, column: BaseTableColumnData, colIndex: number, event: MouseEvent) => void>;
     };
-    /** Adds native attributes to th :th-attrs="(column)" => ({})" */
-    thAttrs: {
-        type: FunctionConstructor;
-        default: () => {};
-    };
-    /** Adds native attributes to td :td-attrs="(row, column)" => ({})" */
-    tdAttrs: {
-        type: FunctionConstructor;
-        default: () => {};
-    };
 }>>, {
     class: string | unknown[] | Record<string, any>;
     onClick: (row: CollectionItem, index: number, column: BaseTableColumnData, colIndex: number, event: MouseEvent) => void;
@@ -207,7 +187,7 @@ declare const _default: import("vue").DefineComponent<{
     customKey: string | number;
     padding: string;
     numeric: boolean;
-    position: "right" | "left" | "center";
+    align: "right" | "left" | "center";
     sortable: boolean;
     ignoreRowInteractions: boolean;
     toggle: boolean;
@@ -215,7 +195,5 @@ declare const _default: import("vue").DefineComponent<{
     customSort: Function;
     customSearch: Function;
     target: "_blank" | "_self" | "_parent" | "_top";
-    thAttrs: Function;
-    tdAttrs: Function;
 }, {}>;
 export default _default;

package/dist/types/components/BaseTableHeader.vue.d.ts

@@ -26,8 +26,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     onClick?: ((...args: any[]) => any) | undefined;
 }, {
     class: string | false | 0 | ClassNameValue[] | null;
-    style: string | false | import("vue").CSSProperties | StyleValue[] | null;
     align: "right" | "left" | "center";
+    style: string | false | import("vue").CSSProperties | StyleValue[] | null;
     colspan: number;
 }, {}>, {
     default?(_: {}): any;

package/dist/types/components/index.d.ts

@@ -20,6 +20,7 @@ import BaseCardRow from './BaseCardRow.vue';
 import BaseCharacterCounter from './BaseCharacterCounter.vue';
 import BaseClipboard from './BaseClipboard.vue';
 import BaseCalendar from './BaseCalendar.vue';
+import BaseCollapse from './BaseCollapse.vue';
 import BaseColor from './BaseColor.vue';
 import BaseContainer from './BaseContainer.vue';
 import BaseCounter from './BaseCounter.vue';
@@ -102,4 +103,4 @@ import BaseLayoutStacked from './BaseLayoutStacked.vue';
 import BaseLayoutStackedConfigurable from './BaseLayoutStackedConfigurable.vue';
 import BaseLayoutSidebar from './BaseLayoutSidebar.vue';
 import BaseLayoutSidebarConfigurable from './BaseLayoutSidebarConfigurable.vue';
-export { BaseActionItem, BaseAddressForm, BaseAlert, BaseApp, BaseAppDialogs, BaseAppSnackbars, BaseAutocomplete, BaseAutocompleteFetch, BaseAvatar, BaseAvatarGroup, BaseBadge, BaseBelongsTo, BaseBelongsToFetch, BaseBoolean, BaseBreadcrumbs, BaseButton, BaseButtonGroup, BaseCard, BaseCardRow, BaseCharacterCounter, BaseClipboard, BaseCalendar, BaseColor, BaseContainer, BaseCounter, BaseCropper, BaseCropperModal, BaseDataIterator, BaseDataTable, BaseDatePicker, BaseTimePicker, BaseDateSelect, BaseDescriptionList, BaseDescriptionListItem, BaseDialog, BaseDisplayRelativeTime, BaseDropdown, BaseDropdownAutocomplete, BaseEmptyState, BaseField, BaseFieldI18n, BaseFilePicker, BaseFilePickerCrop, BaseFileUploader, BaseForm, BaseGantt, BaseHasMany, BaseHeader, BaseIcon, BaseIconPicker, BaseInput, BaseInputLabel, BaseInputPercent, BaseJsonReader, BaseLoadingCover, BaseMediaItem, BaseMediaLibrary, BaseMediaPreview, BaseMenu, BaseMenuItem, BaseModalCenter, BaseModalSide, BaseNavbar, BaseNavbarItem, BaseNavbarItemContent, BaseNavbarSideItem, BasePagination, BasePanel, BasePassword, BaseProgressCircle, BaseRadioGroup, BaseReadMore, BaseRichText, BaseSelect, BaseShortcut, BaseSideNavigation, BaseSideNavigationItem, BaseSkeleton, BaseStatistic, BaseStepper, BaseStepperItem, BaseSwitch, BaseSystemAlert, BaseTable, BaseTableBody, BaseTableCell, BaseTableHead, BaseTableHeader, BaseTableRow, BaseTabs, BaseTabItem, BaseTagAutocomplete, BaseTagAutocompleteFetch, BaseTableColumn, BaseTextarea, BaseTextareaAutoresize, BaseTimeline, BaseTimelineItem, BaseTooltip, BaseUniqueCode, BaseLayoutStacked, BaseLayoutStackedConfigurable, BaseLayoutSidebar, BaseLayoutSidebarConfigurable, };
+export { BaseActionItem, BaseAddressForm, BaseAlert, BaseApp, BaseAppDialogs, BaseAppSnackbars, BaseAutocomplete, BaseAutocompleteFetch, BaseAvatar, BaseAvatarGroup, BaseBadge, BaseBelongsTo, BaseBelongsToFetch, BaseBoolean, BaseBreadcrumbs, BaseButton, BaseButtonGroup, BaseCard, BaseCardRow, BaseCharacterCounter, BaseClipboard, BaseCalendar, BaseCollapse, BaseColor, BaseContainer, BaseCounter, BaseCropper, BaseCropperModal, BaseDataIterator, BaseDataTable, BaseDatePicker, BaseDateSelect, BaseDescriptionList, BaseDescriptionListItem, BaseDialog, BaseDisplayRelativeTime, BaseDropdown, BaseDropdownAutocomplete, BaseEmptyState, BaseField, BaseFieldI18n, BaseFilePicker, BaseFilePickerCrop, BaseFileUploader, BaseForm, BaseGantt, BaseHasMany, BaseHeader, BaseIcon, BaseIconPicker, BaseInput, BaseInputLabel, BaseInputPercent, BaseJsonReader, BaseLoadingCover, BaseMediaItem, BaseMediaLibrary, BaseMediaPreview, BaseMenu, BaseMenuItem, BaseModalCenter, BaseModalSide, BaseNavbar, BaseNavbarItem, BaseNavbarItemContent, BaseNavbarSideItem, BasePagination, BasePanel, BasePassword, BaseProgressCircle, BaseRadioGroup, BaseReadMore, BaseRichText, BaseSelect, BaseShortcut, BaseSideNavigation, BaseSideNavigationItem, BaseSkeleton, BaseStatistic, BaseStepper, BaseStepperItem, BaseSwitch, BaseSystemAlert, BaseTable, BaseTableBody, BaseTableCell, BaseTableHead, BaseTableHeader, BaseTableRow, BaseTabs, BaseTabItem, BaseTagAutocomplete, BaseTagAutocompleteFetch, BaseTableColumn, BaseTextarea, BaseTextareaAutoresize, BaseTimeline, BaseTimelineItem, BaseTimePicker, BaseTooltip, BaseUniqueCode, BaseLayoutStacked, BaseLayoutStackedConfigurable, BaseLayoutSidebar, BaseLayoutSidebarConfigurable, };

package/dist/types/types/index.d.ts

@@ -78,7 +78,7 @@ export interface BaseTableColumnData {
     meta: undefined | Record<string, any>;
     newKey: string;
     numeric: boolean;
-    position: 'left' | 'right';
+    align: 'left' | 'center' | 'right';
     searchable: boolean;
     sortable: boolean;
     ignoreRowInteractions: boolean;
@@ -93,8 +93,6 @@ export interface BaseTableColumnData {
     style: {
         width: undefined | number;
     };
-    thAttrs: (column: BaseTableColumnData) => Record<string, any>;
-    tdAttrs: (row: Row, column: BaseTableColumnData) => Record<string, any>;
 }
 /**
  * System alert

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.8.2",
+  "version": "0.8.4",
   "scripts": {
     "build": "rimraf dist && vue-tsc && vite build",
     "build-fast": "rimraf dist && vite build",

package/src/components/BaseCollapse.stories.js

@@ -0,0 +1,169 @@
+import { method } from 'lodash';
+import BaseCollapse from './BaseCollapse.vue';
+
+export default {
+    title: 'Components/BaseCollapse',
+    component: BaseCollapse,
+    args: {},
+    argTypes: {
+        defaultOpen: {
+            control: { type: 'boolean' },
+        },
+        icon: {
+            control: { type: 'text' },
+        },
+        isOpenIconClass: {
+            control: { type: 'text' },
+        },
+        isCloseIconClass: {
+            control: { type: 'text' },
+        },
+        twIcon: {
+            control: { type: 'text' },
+        },
+        twHeader: {
+            control: { type: 'text' },
+        },
+        twContent: {
+            control: { type: 'text' },
+        },
+        twTitle: {
+            control: { type: 'text' },
+        },
+        iconPosition: {
+            control: { type: 'select' },
+            options: ['left', 'right'],
+        },
+    },
+};
+
+const Template = (args) => ({
+    components: { BaseCollapse },
+    setup() {
+        return { args };
+    },
+    template: `
+    <BaseCollapse v-bind="args" class="mb-1">
+        <template #title>
+            <h6 class="font-semibold"> Qu'est-ce que le Lorem Ipsum? </h6>
+        </template>
+        <template #content={isOpen}>
+            <p class="p-3">
+                Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte.
+            </p>
+        </template>
+    </BaseCollapse> 
+
+    <BaseCollapse v-bind="args" class="mb-1">
+        <template #title>
+            <h6 class="font-semibold"> Qu'est-ce que le Lorem Ipsum? </h6>
+        </template>
+        <template #content>
+            <p class="p-3">
+                Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte.
+            </p>
+        </template>
+    </BaseCollapse> 
+
+    <BaseCollapse v-bind="args" class="mb-1">
+        <template #title>
+            <h6 class="font-semibold"> Qu'est-ce que le Lorem Ipsum? </h6>
+        </template>
+        <template #content>
+            <p class="p-3">
+                Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte.
+            </p>
+        </template>
+    </BaseCollapse>
+    
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {
+    defaultOpen: false,
+};
+
+
+const CustomHeaderTemplate = (args) => ({
+    components: { BaseCollapse },
+    setup() {
+        return { args };
+    },
+    method: {
+        toggle() {
+            this.defaultOpen = !this.defaultOpen;
+        },
+    },
+    template: `
+    
+    <BaseCollapse v-bind="args" class="mb-3">
+        <template #header={toggle}>
+            <h6 class="cursor-pointer hover:text-slate-400" @click="toggle()"> Qu'est-ce que le Lorem Ipsum? </h6>
+        </template>
+        <template #content>
+            <p class="p-3">
+                Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte.
+            </p>
+        </template>
+    </BaseCollapse>
+
+    <BaseCollapse v-bind="args" class="mb-3">
+        <template #header={toggle}>
+            <h6 class="cursor-pointer hover:text-slate-400" @click="toggle()"> Qu'est-ce que le Lorem Ipsum? </h6>
+        </template>
+        <template #content>
+            <p class="p-3">
+                Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte.
+            </p>
+        </template>
+    </BaseCollapse>
+
+    <BaseCollapse v-bind="args" class="mb-3">
+        <template #header={toggle}>
+            <h6 class="cursor-pointer hover:text-slate-400" @click="toggle()"> Qu'est-ce que le Lorem Ipsum? </h6>
+        </template>
+        <template #content>
+            <p class="p-3">
+                Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte.
+            </p>
+        </template>
+    </BaseCollapse>
+
+    `,
+    argTypes: {
+        defaultOpen: {
+            control: { type: 'boolean' },
+        },
+        icon: {
+            control: { type: 'text' },
+        },
+        isOpenIconClass: {
+            control: { type: 'text' },
+        },
+        isCloseIconClass: {
+            control: { type: 'text' },
+        },
+        twIcon: {
+            control: { type: 'text' },
+        },
+        twHeader: {
+            control: { type: 'text' },
+        },
+        twContent: {
+            control: { type: 'text' },
+        },
+        twTitle: {
+            control: { type: 'text' },
+        },
+        iconPosition: {
+            control: { type: 'select' },
+            options: ['left', 'right'],
+        },
+    }
+});
+export const CustomHeader = CustomHeaderTemplate.bind({});
+
+CustomHeader.args = {
+    defaultOpen: false,
+};

package/src/components/BaseCollapse.vue

@@ -0,0 +1,98 @@
+<template>
+  <div>
+    <div>
+      <slot
+        name="header"
+        :open="isOpen"
+        :toggle="toggle"
+      >
+        <button
+          :class="headerClass"
+          type="button"
+          @click="toggle()"
+        >
+          <BaseIcon
+            v-if="iconPosition === 'left'"
+            :class="internalIconClass"
+            :icon="icon"
+          />
+        
+          <div :class="internalTitleClass">
+            <slot
+              name="title"
+              :open="isOpen"
+            />
+          </div>
+          <BaseIcon
+            v-if="iconPosition === 'right'"
+            :class="internalIconClass"
+            :icon="icon"
+          />
+        </button>
+      </slot>
+    </div>
+  
+    <div
+      v-show="isOpen"
+      :class="internalContentClass"
+    >
+      <slot
+        name="content"
+        :open="isOpen"
+      />
+    </div>
+  </div>
+</template>
+  
+<script lang="ts" setup>
+
+import { twMerge } from 'tailwind-merge';
+
+const internalIconClass = computed(() => {
+  const base = "w-6 h-6 flex items-center justify-center transition duration-300 ease-in-out transform cursor-pointer";
+
+  return twMerge(base, props.twIcon, isOpen.value ? props.isOpenIconClass : props.isCloseIconClass,);
+});
+
+const headerClass = computed(() => {
+  return twMerge('flex items-center w-full space-x-1', props.twHeader);
+});
+
+const internalContentClass = computed(() => {
+  return twMerge('transition duration-300 ease-in-out transform', props.twContent);
+});
+
+const internalTitleClass = computed(() => {
+  return twMerge(props.twTitle, '');
+});
+
+function toggle() {
+  isOpen.value = !isOpen.value;
+}
+
+
+const props = withDefaults(defineProps<{
+  defaultOpen?: boolean;
+  icon?: string;
+  iconPosition?: 'left' | 'right';
+  isOpenIconClass?: string;
+  isCloseIconClass?: string;
+  twIcon?: string | string[] | null;
+  twHeader?: string | string[] | null;
+  twTitle?: string | string[] | null;
+  twContent?: string | string[] | null;
+}>(), {
+  defaultOpen: true,
+  icon: 'heroicons:chevron-down-16-solid',
+  iconPosition: 'left',
+  twIcon: null,
+  twHeader: null,
+  twTitle: null,
+  twContent: null,
+  isOpenIconClass: '-rotate-0',
+  isCloseIconClass: '-rotate-90',
+});
+
+const isOpen = ref(props.defaultOpen as boolean);
+
+</script>

package/src/components/BaseDataTable.stories.js

@@ -261,6 +261,7 @@ const LocalTemplate = (args) => ({
     sortable
     field="label"
     :toggle="false"
+    align="right"
   >
     <div class="max-w-sm">
       <div class="font-medium text-slate-900">
@@ -272,6 +273,17 @@ const LocalTemplate = (args) => ({
     </div>
   </BaseTableColumn>
 
+  <BaseTableColumn
+    v-slot="{ row }"
+    label="Size"
+    field="size"
+    sortable
+    numeric
+    align="right"
+  >
+    <p>{{ row.size }}</p>
+  </BaseTableColumn>
+
   <BaseTableColumn
     v-slot="{ row }"
     label="Value"
@@ -324,4 +336,5 @@ const localProps = cloneDeep(componentProps);
 localProps.url = null;
 localProps.perPage = 4;
 localProps.rowTo = undefined;
+localProps.maxHeight = undefined;
 Local.args = localProps;

package/src/components/BaseDataTableTemplate.vue

@@ -1,6 +1,9 @@
 <template>
   <div
     class="relative w-full overflow-hidden"
+    :style="{
+      minHeight: maxHeight ? maxHeight + 'px' : '200px',
+    }"
   >
     <div
       ref="slot"
@@ -23,7 +26,6 @@
           <BaseTableHeader
             v-for="(column, index) in visibleColumns"
             :key="column.newKey + ':' + index + 'header'"
-            v-bind="column.thAttrs && column.thAttrs(column)"
             :style="column.style"
             class="bg-slate-50"
           >
@@ -52,9 +54,10 @@
               <button
                 type="button"
                 class="flex gap-1 w-full items-center bg-transparent text-left text-sm font-medium leading-tight text-slate-900"
-                :class="{
-                  'cursor-pointer': column.sortable,
-                }"
+                :class="[
+                  column.sortable ? 'cursor-pointer' : '',
+                  column.align == 'right' ? 'justify-start flex-row-reverse' : ''
+                ]"
                 @click="sort(column, undefined, $event as any)"
               >
                 <span
@@ -108,8 +111,8 @@
             <BaseTableCell
               v-for="(column, columnIndex) in visibleColumns"
               :key="column.newKey + index + ':' + columnIndex"
-              v-bind="column.tdAttrs && column.tdAttrs(row, column)"
-              :class="column.class"
+              :class="[column.class, column.numeric ? 'tabular-nums' : '']"
+              :align="column.align"
               :style="column.style"
               :to="column.to ? column.to(row) : undefined"
               :href="column.href ? column.href(row) : undefined"
@@ -155,7 +158,7 @@
                   scoped
                   name="default"
                   tag="div"
-                  class="text-sm"
+                  class="text-sm grow"
                   :data-label="column.label"
                   :props="{ row, column, index, columnIndex, toggleDetails }"
                 />