sprintify-ui 0.10.80 → 0.10.83

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

@@ -4,11 +4,9 @@ type __VLS_Props = {
     modelValue: string | null | undefined;
     editor?: 'classic' | 'inline' | 'balloon';
     size?: Size;
-    toolbar?: ToolbarOption[];
+    toolbar?: ToolbarOption[] | string[];
     placeholder?: string;
     disabled?: boolean;
-    required?: boolean;
-    name?: string;
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {
     getEditorData(): string;
@@ -26,11 +24,9 @@ declare const _default: import("vue").DefineComponent<__VLS_Props, {
     onReady?: ((...args: any[]) => any) | undefined;
 }>, {
     size: Size;
-    required: boolean;
     disabled: boolean;
-    name: string;
     placeholder: string;
-    toolbar: ToolbarOption[];
+    toolbar: ToolbarOption[] | string[];
     editor: "classic" | "inline" | "balloon";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

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

@@ -187,12 +187,17 @@ declare const table: import("vue").Ref<({
             toggleDefault: boolean;
             width: number;
             class?: string | string[] | undefined;
+            headerClass?: string | string[] | undefined;
             to?: ((row: import("@/types").Row) => RouteLocationRaw) | undefined;
             href?: ((row: import("@/types").Row) => string) | undefined;
             target?: "_blank" | "_self" | "_parent" | "_top" | undefined;
             onClick?: ((row: import("@/types").Row, index: number, column: import("@/types").BaseTableColumnData, colIndex: number, event: MouseEvent) => void) | undefined;
             style: {
                 width: undefined | number;
+                maxWidth: undefined | number;
+                minWidth: undefined | number;
+                overflow: undefined | string;
+                padding: undefined | string;
             };
         }[]>;
         uncheckAll: () => void;
@@ -371,12 +376,17 @@ declare const table: import("vue").Ref<({
         toggleDefault: boolean;
         width: number;
         class?: string | string[] | undefined;
+        headerClass?: string | string[] | undefined;
         to?: ((row: import("@/types").Row) => RouteLocationRaw) | undefined;
         href?: ((row: import("@/types").Row) => string) | undefined;
         target?: "_blank" | "_self" | "_parent" | "_top" | undefined;
         onClick?: ((row: import("@/types").Row, index: number, column: import("@/types").BaseTableColumnData, colIndex: number, event: MouseEvent) => void) | undefined;
         style: {
             width: undefined | number;
+            maxWidth: undefined | number;
+            minWidth: undefined | number;
+            overflow: undefined | string;
+            padding: undefined | string;
         };
     }[]>;
     uncheckAll: () => void;
@@ -561,12 +571,17 @@ declare const table: import("vue").Ref<({
             toggleDefault: boolean;
             width: number;
             class?: string | string[] | undefined;
+            headerClass?: string | string[] | undefined;
             to?: ((row: import("@/types").Row) => RouteLocationRaw) | undefined;
             href?: ((row: import("@/types").Row) => string) | undefined;
             target?: "_blank" | "_self" | "_parent" | "_top" | undefined;
             onClick?: ((row: import("@/types").Row, index: number, column: import("@/types").BaseTableColumnData, colIndex: number, event: MouseEvent) => void) | undefined;
             style: {
                 width: undefined | number;
+                maxWidth: undefined | number;
+                minWidth: undefined | number;
+                overflow: undefined | string;
+                padding: undefined | string;
             };
         }[]>;
         uncheckAll: () => void;
@@ -745,12 +760,17 @@ declare const table: import("vue").Ref<({
         toggleDefault: boolean;
         width: number;
         class?: string | string[] | undefined;
+        headerClass?: string | string[] | undefined;
         to?: ((row: import("@/types").Row) => RouteLocationRaw) | undefined;
         href?: ((row: import("@/types").Row) => string) | undefined;
         target?: "_blank" | "_self" | "_parent" | "_top" | undefined;
         onClick?: ((row: import("@/types").Row, index: number, column: import("@/types").BaseTableColumnData, colIndex: number, event: MouseEvent) => void) | undefined;
         style: {
             width: undefined | number;
+            maxWidth: undefined | number;
+            minWidth: undefined | number;
+            overflow: undefined | string;
+            padding: undefined | string;
         };
     }[]>;
     uncheckAll: () => void;

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

@@ -26,12 +26,17 @@ declare const currentSortColumn: import("vue").Ref<{
     toggleDefault: boolean;
     width: number;
     class?: string | string[] | undefined;
+    headerClass?: string | string[] | undefined;
     to?: ((row: Row) => RouteLocationRaw) | undefined;
     href?: ((row: Row) => string) | undefined;
     target?: "_blank" | "_self" | "_parent" | "_top" | undefined;
     onClick?: ((row: Row, index: number, column: BaseTableColumnData, colIndex: number, event: MouseEvent) => void) | undefined;
     style: {
         width: undefined | number;
+        maxWidth: undefined | number;
+        minWidth: undefined | number;
+        overflow: undefined | string;
+        padding: undefined | string;
     };
 } | null, BaseTableColumnData | {
     id: string;
@@ -49,12 +54,17 @@ declare const currentSortColumn: import("vue").Ref<{
     toggleDefault: boolean;
     width: number;
     class?: string | string[] | undefined;
+    headerClass?: string | string[] | undefined;
     to?: ((row: Row) => RouteLocationRaw) | undefined;
     href?: ((row: Row) => string) | undefined;
     target?: "_blank" | "_self" | "_parent" | "_top" | undefined;
     onClick?: ((row: Row, index: number, column: BaseTableColumnData, colIndex: number, event: MouseEvent) => void) | undefined;
     style: {
         width: undefined | number;
+        maxWidth: undefined | number;
+        minWidth: undefined | number;
+        overflow: undefined | string;
+        padding: undefined | string;
     };
 } | null>;
 declare const isAsc: import("vue").Ref<boolean, boolean>;
@@ -75,12 +85,17 @@ declare const newColumns: import("vue").ComputedRef<{
     toggleDefault: boolean;
     width: number;
     class?: string | string[] | undefined;
+    headerClass?: string | string[] | undefined;
     to?: ((row: Row) => RouteLocationRaw) | undefined;
     href?: ((row: Row) => string) | undefined;
     target?: "_blank" | "_self" | "_parent" | "_top" | undefined;
     onClick?: ((row: Row, index: number, column: BaseTableColumnData, colIndex: number, event: MouseEvent) => void) | undefined;
     style: {
         width: undefined | number;
+        maxWidth: undefined | number;
+        minWidth: undefined | number;
+        overflow: undefined | string;
+        padding: undefined | string;
     };
 }[]>;
 declare const visibleColumnsInternal: import("vue").ComputedRef<{
@@ -99,12 +114,17 @@ declare const visibleColumnsInternal: import("vue").ComputedRef<{
     toggleDefault: boolean;
     width: number;
     class?: string | string[] | undefined;
+    headerClass?: string | string[] | undefined;
     to?: ((row: Row) => RouteLocationRaw) | undefined;
     href?: ((row: Row) => string) | undefined;
     target?: "_blank" | "_self" | "_parent" | "_top" | undefined;
     onClick?: ((row: Row, index: number, column: BaseTableColumnData, colIndex: number, event: MouseEvent) => void) | undefined;
     style: {
         width: undefined | number;
+        maxWidth: undefined | number;
+        minWidth: undefined | number;
+        overflow: undefined | string;
+        padding: undefined | string;
     };
 }[]>;
 /**
@@ -685,12 +705,17 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
         toggleDefault: boolean;
         width: number;
         class?: string | string[] | undefined;
+        headerClass?: string | string[] | undefined;
         to?: ((row: Row) => RouteLocationRaw) | undefined;
         href?: ((row: Row) => string) | undefined;
         target?: "_blank" | "_self" | "_parent" | "_top" | undefined;
         onClick?: ((row: Row, index: number, column: BaseTableColumnData, colIndex: number, event: MouseEvent) => void) | undefined;
         style: {
             width: undefined | number;
+            maxWidth: undefined | number;
+            minWidth: undefined | number;
+            overflow: undefined | string;
+            padding: undefined | string;
         };
     }[]>;
     uncheckAll: typeof uncheckAll;

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

@@ -71,7 +71,7 @@ declare const rowsInternal: import("vue").Ref<{
             minus: (duration: import("luxon").DurationLike) => import("luxon").DateTime<boolean>;
             startOf: (unit: import("luxon").DateTimeUnit, opts?: import("luxon").StartOfOptions) => import("luxon").DateTime<boolean>;
             endOf: (unit: import("luxon").DateTimeUnit, opts?: import("luxon").EndOfOptions) => import("luxon").DateTime<boolean>;
-            toFormat: (fmt: string, opts?: import("luxon").LocaleOptions) => string;
+            toFormat: (format: string, options?: import("luxon").LocaleOptions) => string;
             toLocaleString: (formatOpts?: import("luxon").DateTimeFormatOptions, opts?: import("luxon").LocaleOptions) => string;
             toLocaleParts: (opts?: import("luxon").DateTimeFormatOptions) => Intl.DateTimeFormatPart[];
             toISO: (opts?: import("luxon").ToISOTimeOptions) => string | null;
@@ -154,7 +154,7 @@ declare const rowsInternal: import("vue").Ref<{
             minus: (duration: import("luxon").DurationLike) => import("luxon").DateTime<boolean>;
             startOf: (unit: import("luxon").DateTimeUnit, opts?: import("luxon").StartOfOptions) => import("luxon").DateTime<boolean>;
             endOf: (unit: import("luxon").DateTimeUnit, opts?: import("luxon").EndOfOptions) => import("luxon").DateTime<boolean>;
-            toFormat: (fmt: string, opts?: import("luxon").LocaleOptions) => string;
+            toFormat: (format: string, options?: import("luxon").LocaleOptions) => string;
             toLocaleString: (formatOpts?: import("luxon").DateTimeFormatOptions, opts?: import("luxon").LocaleOptions) => string;
             toLocaleParts: (opts?: import("luxon").DateTimeFormatOptions) => Intl.DateTimeFormatPart[];
             toISO: (opts?: import("luxon").ToISOTimeOptions) => string | null;
@@ -252,7 +252,7 @@ declare const rowsInternal: import("vue").Ref<{
             minus: (duration: import("luxon").DurationLike) => import("luxon").DateTime<boolean>;
             startOf: (unit: import("luxon").DateTimeUnit, opts?: import("luxon").StartOfOptions) => import("luxon").DateTime<boolean>;
             endOf: (unit: import("luxon").DateTimeUnit, opts?: import("luxon").EndOfOptions) => import("luxon").DateTime<boolean>;
-            toFormat: (fmt: string, opts?: import("luxon").LocaleOptions) => string;
+            toFormat: (format: string, options?: import("luxon").LocaleOptions) => string;
             toLocaleString: (formatOpts?: import("luxon").DateTimeFormatOptions, opts?: import("luxon").LocaleOptions) => string;
             toLocaleParts: (opts?: import("luxon").DateTimeFormatOptions) => Intl.DateTimeFormatPart[];
             toISO: (opts?: import("luxon").ToISOTimeOptions) => string | null;
@@ -335,7 +335,7 @@ declare const rowsInternal: import("vue").Ref<{
             minus: (duration: import("luxon").DurationLike) => import("luxon").DateTime<boolean>;
             startOf: (unit: import("luxon").DateTimeUnit, opts?: import("luxon").StartOfOptions) => import("luxon").DateTime<boolean>;
             endOf: (unit: import("luxon").DateTimeUnit, opts?: import("luxon").EndOfOptions) => import("luxon").DateTime<boolean>;
-            toFormat: (fmt: string, opts?: import("luxon").LocaleOptions) => string;
+            toFormat: (format: string, options?: import("luxon").LocaleOptions) => string;
             toLocaleString: (formatOpts?: import("luxon").DateTimeFormatOptions, opts?: import("luxon").LocaleOptions) => string;
             toLocaleParts: (opts?: import("luxon").DateTimeFormatOptions) => Intl.DateTimeFormatPart[];
             toISO: (opts?: import("luxon").ToISOTimeOptions) => string | null;
@@ -429,7 +429,7 @@ declare const groups: import("vue").Ref<{
         minus: (duration: import("luxon").DurationLike) => import("luxon").DateTime<boolean>;
         startOf: (unit: import("luxon").DateTimeUnit, opts?: import("luxon").StartOfOptions) => import("luxon").DateTime<boolean>;
         endOf: (unit: import("luxon").DateTimeUnit, opts?: import("luxon").EndOfOptions) => import("luxon").DateTime<boolean>;
-        toFormat: (fmt: string, opts?: import("luxon").LocaleOptions) => string;
+        toFormat: (format: string, options?: import("luxon").LocaleOptions) => string;
         toLocaleString: (formatOpts?: import("luxon").DateTimeFormatOptions, opts?: import("luxon").LocaleOptions) => string;
         toLocaleParts: (opts?: import("luxon").DateTimeFormatOptions) => Intl.DateTimeFormatPart[];
         toISO: (opts?: import("luxon").ToISOTimeOptions) => string | null;
@@ -518,7 +518,7 @@ declare const groups: import("vue").Ref<{
         minus: (duration: import("luxon").DurationLike) => import("luxon").DateTime<boolean>;
         startOf: (unit: import("luxon").DateTimeUnit, opts?: import("luxon").StartOfOptions) => import("luxon").DateTime<boolean>;
         endOf: (unit: import("luxon").DateTimeUnit, opts?: import("luxon").EndOfOptions) => import("luxon").DateTime<boolean>;
-        toFormat: (fmt: string, opts?: import("luxon").LocaleOptions) => string;
+        toFormat: (format: string, options?: import("luxon").LocaleOptions) => string;
         toLocaleString: (formatOpts?: import("luxon").DateTimeFormatOptions, opts?: import("luxon").LocaleOptions) => string;
         toLocaleParts: (opts?: import("luxon").DateTimeFormatOptions) => Intl.DateTimeFormatPart[];
         toISO: (opts?: import("luxon").ToISOTimeOptions) => string | null;
@@ -608,7 +608,7 @@ declare const ticks: import("vue").Ref<{
         minus: (duration: import("luxon").DurationLike) => import("luxon").DateTime<boolean>;
         startOf: (unit: import("luxon").DateTimeUnit, opts?: import("luxon").StartOfOptions) => import("luxon").DateTime<boolean>;
         endOf: (unit: import("luxon").DateTimeUnit, opts?: import("luxon").EndOfOptions) => import("luxon").DateTime<boolean>;
-        toFormat: (fmt: string, opts?: import("luxon").LocaleOptions) => string;
+        toFormat: (format: string, options?: import("luxon").LocaleOptions) => string;
         toLocaleString: (formatOpts?: import("luxon").DateTimeFormatOptions, opts?: import("luxon").LocaleOptions) => string;
         toLocaleParts: (opts?: import("luxon").DateTimeFormatOptions) => Intl.DateTimeFormatPart[];
         toISO: (opts?: import("luxon").ToISOTimeOptions) => string | null;
@@ -697,7 +697,7 @@ declare const ticks: import("vue").Ref<{
         minus: (duration: import("luxon").DurationLike) => import("luxon").DateTime<boolean>;
         startOf: (unit: import("luxon").DateTimeUnit, opts?: import("luxon").StartOfOptions) => import("luxon").DateTime<boolean>;
         endOf: (unit: import("luxon").DateTimeUnit, opts?: import("luxon").EndOfOptions) => import("luxon").DateTime<boolean>;
-        toFormat: (fmt: string, opts?: import("luxon").LocaleOptions) => string;
+        toFormat: (format: string, options?: import("luxon").LocaleOptions) => string;
         toLocaleString: (formatOpts?: import("luxon").DateTimeFormatOptions, opts?: import("luxon").LocaleOptions) => string;
         toLocaleParts: (opts?: import("luxon").DateTimeFormatOptions) => Intl.DateTimeFormatPart[];
         toISO: (opts?: import("luxon").ToISOTimeOptions) => string | null;
@@ -802,7 +802,7 @@ declare var __VLS_1: {
                 minus: (duration: import("luxon").DurationLike) => import("luxon").DateTime<boolean>;
                 startOf: (unit: import("luxon").DateTimeUnit, opts?: import("luxon").StartOfOptions) => import("luxon").DateTime<boolean>;
                 endOf: (unit: import("luxon").DateTimeUnit, opts?: import("luxon").EndOfOptions) => import("luxon").DateTime<boolean>;
-                toFormat: (fmt: string, opts?: import("luxon").LocaleOptions) => string;
+                toFormat: (format: string, options?: import("luxon").LocaleOptions) => string;
                 toLocaleString: (formatOpts?: import("luxon").DateTimeFormatOptions, opts?: import("luxon").LocaleOptions) => string;
                 toLocaleParts: (opts?: import("luxon").DateTimeFormatOptions) => Intl.DateTimeFormatPart[];
                 toISO: (opts?: import("luxon").ToISOTimeOptions) => string | null;
@@ -885,7 +885,7 @@ declare var __VLS_1: {
                 minus: (duration: import("luxon").DurationLike) => import("luxon").DateTime<boolean>;
                 startOf: (unit: import("luxon").DateTimeUnit, opts?: import("luxon").StartOfOptions) => import("luxon").DateTime<boolean>;
                 endOf: (unit: import("luxon").DateTimeUnit, opts?: import("luxon").EndOfOptions) => import("luxon").DateTime<boolean>;
-                toFormat: (fmt: string, opts?: import("luxon").LocaleOptions) => string;
+                toFormat: (format: string, options?: import("luxon").LocaleOptions) => string;
                 toLocaleString: (formatOpts?: import("luxon").DateTimeFormatOptions, opts?: import("luxon").LocaleOptions) => string;
                 toLocaleParts: (opts?: import("luxon").DateTimeFormatOptions) => Intl.DateTimeFormatPart[];
                 toISO: (opts?: import("luxon").ToISOTimeOptions) => string | null;
@@ -981,7 +981,7 @@ declare var __VLS_1: {
             minus: (duration: import("luxon").DurationLike) => import("luxon").DateTime<boolean>;
             startOf: (unit: import("luxon").DateTimeUnit, opts?: import("luxon").StartOfOptions) => import("luxon").DateTime<boolean>;
             endOf: (unit: import("luxon").DateTimeUnit, opts?: import("luxon").EndOfOptions) => import("luxon").DateTime<boolean>;
-            toFormat: (fmt: string, opts?: import("luxon").LocaleOptions) => string;
+            toFormat: (format: string, options?: import("luxon").LocaleOptions) => string;
             toLocaleString: (formatOpts?: import("luxon").DateTimeFormatOptions, opts?: import("luxon").LocaleOptions) => string;
             toLocaleParts: (opts?: import("luxon").DateTimeFormatOptions) => Intl.DateTimeFormatPart[];
             toISO: (opts?: import("luxon").ToISOTimeOptions) => string | null;
@@ -1064,7 +1064,7 @@ declare var __VLS_1: {
             minus: (duration: import("luxon").DurationLike) => import("luxon").DateTime<boolean>;
             startOf: (unit: import("luxon").DateTimeUnit, opts?: import("luxon").StartOfOptions) => import("luxon").DateTime<boolean>;
             endOf: (unit: import("luxon").DateTimeUnit, opts?: import("luxon").EndOfOptions) => import("luxon").DateTime<boolean>;
-            toFormat: (fmt: string, opts?: import("luxon").LocaleOptions) => string;
+            toFormat: (format: string, options?: import("luxon").LocaleOptions) => string;
             toLocaleString: (formatOpts?: import("luxon").DateTimeFormatOptions, opts?: import("luxon").LocaleOptions) => string;
             toLocaleParts: (opts?: import("luxon").DateTimeFormatOptions) => Intl.DateTimeFormatPart[];
             toISO: (opts?: import("luxon").ToISOTimeOptions) => string | null;

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

@@ -2,9 +2,14 @@ import { Size } from '@/utils/sizes';
 import { ToolbarOption } from '@/types/ToolbarOption';
 type __VLS_Props = {
     modelValue: string | null | undefined;
+    driver?: 'ckeditor' | 'tiptap';
+    /**
+     * Defines the CKEditor layout style.
+     * Only applicable when `driver` is 'ckeditor'.
+     */
     editor?: 'classic' | 'inline' | 'balloon';
     size?: Size;
-    toolbar?: ToolbarOption[];
+    toolbar?: ToolbarOption[] | string[];
     placeholder?: string;
     disabled?: boolean;
     required?: boolean;
@@ -28,7 +33,8 @@ declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {
     name: string;
     placeholder: string;
     hasError: boolean;
-    toolbar: ToolbarOption[];
+    toolbar: ToolbarOption[] | string[];
     editor: "classic" | "inline" | "balloon";
+    driver: "ckeditor" | "tiptap";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

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

@@ -18,6 +18,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         default: string;
         type: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
     };
+    headerClass: {
+        default: string;
+        type: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
+    };
     field: {
         default: string;
         type: StringConstructor;
@@ -93,6 +97,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     newKey: string | undefined;
 }, {
     style(): {
+        overflow: string | undefined;
+        minWidth: string | undefined;
+        maxWidth: string | undefined;
         width: string | undefined;
         padding: string | undefined;
     };
@@ -113,6 +120,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         default: string;
         type: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
     };
+    headerClass: {
+        default: string;
+        type: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
+    };
     field: {
         default: string;
         type: StringConstructor;
@@ -195,6 +206,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     tooltip: string;
     align: "left" | "center" | "right";
     field: string;
+    headerClass: string | Record<string, any> | unknown[];
     searchable: boolean;
     customKey: string | number;
     numeric: boolean;

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

@@ -0,0 +1,14 @@
+type __VLS_Props = {
+    modelValue: string | null | undefined;
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    hasError?: boolean;
+    disabled?: boolean;
+    placeholder?: string;
+    toolbar?: string[];
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -90,12 +90,17 @@ export interface BaseTableColumnData {
     toggleDefault: boolean;
     width: number;
     class?: string | string[];
+    headerClass?: string | string[];
     to?: (row: Row) => RouteLocationRaw;
     href?: (row: Row) => string;
     target?: '_blank' | '_self' | '_parent' | '_top';
     onClick?: (row: Row, index: number, column: BaseTableColumnData, colIndex: number, event: MouseEvent) => void;
     style: {
         width: undefined | number;
+        maxWidth: undefined | number;
+        minWidth: undefined | number;
+        overflow: undefined | string;
+        padding: undefined | string;
     };
 }
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.10.80",
+  "version": "0.10.83",
   "type": "module",
   "scripts": {
     "build": "rimraf dist && vue-tsc && vite build",
@@ -21,7 +21,7 @@
     "@tailwindcss/typography": "^0.5.8",
     "@vueuse/core": "^10.0.0",
     "axios": "^0.26.1",
-    "ckeditor5": "^44.1.0",
+    "ckeditor5": "^47.3.0",
     "croppie": "^2.6.5",
     "flatpickr": "^4.6.13",
     "humanize-duration": "^3.0.0",
@@ -43,8 +43,8 @@
     "tailwind-merge": "^2.4.0"
   },
   "devDependencies": {
-    "@ckeditor/ckeditor5-vue": "^7.3.0",
     "@babel/core": "^7.24.0",
+    "@ckeditor/ckeditor5-vue": "^7.3.0",
     "@commitlint/cli": "^17.8.1",
     "@commitlint/config-conventional": "^17.8.1",
     "@iconify/vue": "^4.1.1",
@@ -57,6 +57,9 @@
     "@tailwindcss/aspect-ratio": "^0.4.2",
     "@tailwindcss/forms": "^0.5.7",
     "@tailwindcss/typography": "^0.5.10",
+    "@tiptap/pm": "^3.13.0",
+    "@tiptap/starter-kit": "^3.13.0",
+    "@tiptap/vue-3": "^3.13.0",
     "@types/croppie": "^2.6.4",
     "@types/google.maps": "^3.55.4",
     "@types/humanize-duration": "^3.27.4",
@@ -74,6 +77,7 @@
     "autoprefixer": "^10.4.18",
     "axios": "^0.26.1",
     "babel-loader": "^8.3.0",
+    "ckeditor5": "^47.3.0",
     "croppie": "^2.6.5",
     "cz-conventional-changelog": "^3.3.0",
     "eslint": "^8.57.0",
@@ -89,7 +93,6 @@
     "maska": "^3.0.4",
     "object-hash": "^3.0.0",
     "object-to-formdata": "^4.5.1",
-    "ckeditor5": "^44.1.0",
     "pinia": "^2.1.7",
     "postcss": "^8.4.36",
     "postcss-import": "^15.1.0",
@@ -102,6 +105,7 @@
     "standard-version": "^9.5.0",
     "storybook": "^8.3.0",
     "tailwindcss": "^3.4.1",
+    "tiptap-footnotes": "^3.0.1",
     "typescript": "^5.6.3",
     "unplugin-auto-import": "^0.12.2",
     "vite": "^5.4.5",

package/src/assets/base-rich-text.css

@@ -268,4 +268,35 @@ body {
       }
     }
   }
-}
+}
+
+/** TipTap */
+
+body .tiptap {
+
+    ol.footnotes {
+      margin-top: 20px;
+      padding: 20px 0;
+      list-style-type: decimal;
+      padding-left: 13px;
+      font-size: 0.8em;
+    }
+
+    ol.footnotes:has(li) {
+      @apply border-t border-slate-300;
+    }
+
+    ol.footnotes li p {
+      margin: 0px;
+      line-height: 0.9em;
+      @apply text-slate-500;
+    }
+
+    p.is-editor-empty:first-child::before {
+      @apply text-slate-400;
+      content: attr(data-placeholder);
+      float: left;
+      height: 0;
+      pointer-events: none;
+    }
+  }

package/src/components/BaseCkeditor.vue

@@ -4,7 +4,6 @@
     :editor="editorInternal"
     :config="config"
     :disabled="disabled"
-    :name="name"
     @update:model-value="emit('update:modelValue', $event)"
     @focus="emit('focus', $event)"
     @blur="emit('blur', $event)"
@@ -16,7 +15,6 @@
 <script lang="ts" setup>
 import { ClassicEditor, InlineEditor, BalloonEditor, Essentials, SourceEditing, MediaEmbed, Paragraph, Bold, Italic, List, Link, Autoformat, Heading, Underline, Code, CodeBlock, Table, TableToolbar, Image, ImageResize, ImageStyle, ImageToolbar, ImageInsert, AutoImage, Base64UploadAdapter, PasteFromOffice, BlockToolbar, Font, FindAndReplace, RemoveFormat } from 'ckeditor5';
 import { Ckeditor } from '@ckeditor/ckeditor5-vue';
-
 import { Size } from '@/utils/sizes';
 import { ToolbarOption } from '@/types/ToolbarOption';
 
@@ -24,21 +22,37 @@ const props = withDefaults(defineProps<{
   modelValue: string | null | undefined;
   editor?: 'classic' | 'inline' | 'balloon';
   size?: Size;
-  toolbar?: ToolbarOption[];
+  toolbar?: ToolbarOption[] | string[];
   placeholder?: string;
   disabled?: boolean;
-  required?: boolean;
-  name?: string;
 }>(), {
   editor: 'classic',
   size: 'md',
   toolbar() {
-    return ['undo', 'redo', '|', 'sourceEditing', 'heading', 'bold', 'italic', 'underline', '|', 'link', 'insertImage', '|', 'numberedList', 'bulletedList', '|', 'code', 'codeblock', '|', 'insertTable'] as ToolbarOption[];
+    return [
+      'undo',
+      'redo',
+      '|',
+      'sourceEditing',
+      'heading',
+      'bold',
+      'italic',
+      'underline',
+      '|',
+      'link',
+      'insertImage',
+      '|',
+      'numberedList',
+      'bulletedList',
+      '|',
+      'code',
+      'codeblock',
+      '|',
+      'insertTable'
+    ] as ToolbarOption[];
   },
   placeholder: '',
   disabled: false,
-  required: false,
-  name: '',
   hasError: false,
 });
 

package/src/components/BaseDataTableTemplate.vue

@@ -29,7 +29,7 @@
             :key="column.newKey + ':' + index + 'header'"
             :style="column.style"
             :tooltip="column.tooltip"
-            class="bg-slate-50"
+            :class="column.headerClass ? column.headerClass : 'bg-slate-50'"
           >
             <div class="flex gap-4">
               <template v-if="index == 0">

package/src/components/BaseRichText.stories.js

@@ -19,6 +19,10 @@ export default {
     placeholder: "This is a custom placeholder...",
   },
   argTypes: {
+    driver: {
+      control: { type: "select" },
+      options: ["ckeditor", "tiptap"],
+    },
     editor: {
       control: { type: "select" },
       options: ["classic", "inline", "balloon"],
@@ -42,6 +46,11 @@ const Template = (args) => ({
   `,
 });
 
+export const TipTapEditor = Template.bind({});
+TipTapEditor.args = {
+  driver: "tiptap",
+};
+
 export const ClassicEditor = Template.bind({});
 ClassicEditor.args = {
   editor: "classic",

package/src/components/BaseRichText.vue

@@ -1,5 +1,17 @@
 <template>
+  <div v-if="driver == 'tiptap'">
+    <BaseTipTap
+      :model-value="modelValue"
+      :size="sizeInternal"
+      :disabled="disabled"
+      :has-error="hasErrorInternal"
+      :placeholder="placeholder"
+      :toolbar="toolbar"
+      @update:model-value="emitUpdate"
+    />
+  </div>
   <div
+    v-else
     class="base-rich-text relative"
     :class="[
       hasErrorInternal ? 'error' : '',
@@ -18,8 +30,6 @@
       :toolbar="toolbar"
       :placeholder="placeholder"
       :disabled="disabled"
-      :required="requiredInternal"
-      :name="nameInternal"
       @update:model-value="emitUpdate"
       @focus="emit('focus', $event)"
       @blur="emit('blur', $event)"
@@ -32,25 +42,30 @@
 import { useField } from '@/composables/field';
 import { Size } from '@/utils/sizes';
 import { ToolbarOption } from '@/types/ToolbarOption';
+import BaseTipTap from './BaseTipTap.vue';
 
 const BaseCkeditor = defineAsyncComponent(() => import('./BaseCkeditor.vue'));
 
 const props = withDefaults(defineProps<{
   modelValue: string | null | undefined;
+  driver?: 'ckeditor' | 'tiptap';
+  /**
+   * Defines the CKEditor layout style. 
+   * Only applicable when `driver` is 'ckeditor'.
+   */
   editor?: 'classic' | 'inline' | 'balloon';
   size?: Size;
-  toolbar?: ToolbarOption[];
+  toolbar?: ToolbarOption[] | string[];
   placeholder?: string;
   disabled?: boolean;
   required?: boolean;
   name?: string;
   hasError?: boolean;
 }>(), {
+  driver: 'ckeditor',
   editor: 'classic',
   size: 'md',
-  toolbar() {
-    return ['undo', 'redo', '|', 'heading', 'bold', 'italic', 'underline', '|', 'link', 'insertImage', '|', 'numberedList', 'bulletedList', '|', 'code', 'codeblock', '|', 'insertTable'] as ToolbarOption[];
-  },
+  toolbar: undefined,
   placeholder: '',
   disabled: false,
   required: false,