sprintify-ui 0.10.79 → 0.10.82

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/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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.10.79",
+  "version": "0.10.82",
   "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/BasePanel.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     class="md:grid md:grid-cols-3 md:gap-8"
-    :class="[bordered ? 'mb-8 border-b border-slate-300' : '']"
+    :class="[bordered ? 'mb-8 pb-8 border-b border-slate-300' : '']"
   >
     <div class="md:col-span-1">
       <h3 class="text-base font-semibold leading-6 text-slate-900">

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,