sprintify-ui 0.10.13 → 0.10.15

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

@@ -125,5 +125,5 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     maxHeight: number;
     submitOnEnter: boolean;
     twTextarea: string | string[];
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, HTMLDivElement>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

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

@@ -10,5 +10,5 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         required: true;
         type: PropType<TimelineItem[]>;
     };
-}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, HTMLDivElement>;
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

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

@@ -10,5 +10,5 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         required: true;
         type: PropType<TimelineItem>;
     };
-}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, HTMLDivElement>;
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

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

@@ -2,5 +2,5 @@ type __VLS_Props = {
     text: string;
     color: string;
 };
-declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, HTMLDivElement>;
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

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

@@ -13,19 +13,45 @@ type __VLS_Props = {
     dark?: boolean;
     offset?: number;
 };
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: {
-        default?(_: {}): any;
-        tooltip?(_: {}): any;
-    };
-    refs: {
-        targetRef: HTMLDivElement;
-        tooltipRef: HTMLDivElement;
-    };
-    rootEl: any;
-};
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const targetRef: import("vue").Ref<HTMLElement | null, HTMLElement | null>;
+declare const tooltipRef: import("vue").Ref<HTMLElement | null, HTMLElement | null>;
+declare const floatingStyles: Readonly<import("vue").Ref<{
+    position: import("@floating-ui/utils").Strategy;
+    top: string;
+    left: string;
+    transform?: string;
+    willChange?: string;
+}, {
+    position: import("@floating-ui/utils").Strategy;
+    top: string;
+    left: string;
+    transform?: string;
+    willChange?: string;
+}>>, showTooltip: import("vue").Ref<boolean, boolean>;
+declare const classInternal: import("vue").ComputedRef<(string | string[] | null)[]>;
+declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
+declare var __VLS_1: {}, __VLS_11: {};
+type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
+    default?: (props: typeof __VLS_1) => any;
+} & {
+    tooltip?: (props: typeof __VLS_11) => any;
+}>;
+declare const __VLS_self: import("vue").DefineComponent<__VLS_Props, {
+    targetRef: typeof targetRef;
+    tooltipRef: typeof tooltipRef;
+    floatingStyles: typeof floatingStyles;
+    showTooltip: typeof showTooltip;
+    classInternal: typeof classInternal;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    dark: boolean;
+    class: string | string[] | null;
+    text: string | null;
+    visible: boolean;
+    floatingOptions: UseFloatingOptions;
+    interactive: boolean;
+    delay: number;
+    offset: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     dark: boolean;
     class: string | string[] | null;
@@ -36,9 +62,9 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}
     delay: number;
     offset: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & {
+type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;
     };

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

@@ -31,5 +31,5 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }>, {
     type: "numeric" | "alphanumeric";
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, HTMLDivElement>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/dist/types/stories/PageInputSizes.vue.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, HTMLDivElement>;
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/dist/types/stories/PageShow.vue.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, HTMLDivElement>;
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/dist/types/svg/BaseEmptyState.vue.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, SVGSVGElement>;
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/dist/types/svg/BaseSpinnerSmall.vue.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, SVGSVGElement>;
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.10.13",
+  "version": "0.10.15",
   "type": "module",
   "scripts": {
     "build": "rimraf dist && vue-tsc && vite build",
@@ -15,11 +15,13 @@
     "vue-tsc": "vue-tsc"
   },
   "peerDependencies": {
+    "@ckeditor/ckeditor5-vue": "^7.3.0",
     "@tailwindcss/aspect-ratio": "^0.4.2",
     "@tailwindcss/forms": "^0.5.3",
     "@tailwindcss/typography": "^0.5.8",
     "@vueuse/core": "^10.0.0",
     "axios": "^0.26.1",
+    "ckeditor5": "^44.1.0",
     "croppie": "^2.6.5",
     "flatpickr": "^4.6.13",
     "humanize-duration": "^3.0.0",
@@ -35,11 +37,8 @@
     "vue-router": "^4.0.0"
   },
   "dependencies": {
-    "@ckeditor/ckeditor5-image": "^44.1.0",
-    "@ckeditor/ckeditor5-vue": "^7.3.0",
     "@floating-ui/vue": "^1.0.6",
     "@headlessui/vue": "^1.7.19",
-    "ckeditor5": "^44.1.0",
     "color2k": "^2.0.3",
     "tailwind-merge": "^2.4.0"
   },

package/src/components/BaseCkeditor.vue

@@ -0,0 +1,137 @@
+<template>
+  <ckeditor
+    :model-value="modelValueInternal"
+    :editor="editorInternal"
+    :config="config"
+    :disabled="disabled"
+    :name="name"
+    @update:model-value="emit('update:modelValue', $event)"
+    @focus="emit('focus', $event)"
+    @blur="emit('blur', $event)"
+    @input="emit('input', $event)"
+  />
+</template>
+
+<script lang="ts" setup>
+import { ClassicEditor, InlineEditor, BalloonEditor, Essentials, 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';
+
+const props = withDefaults(defineProps<{
+  modelValue: string | null | undefined;
+  editor?: 'classic' | 'inline' | 'balloon';
+  size?: Size;
+  toolbar?: ToolbarOption[];
+  placeholder?: string;
+  disabled?: boolean;
+  required?: boolean;
+  name?: string;
+}>(), {
+  editor: 'classic',
+  size: 'md',
+  toolbar() {
+    return ['undo', 'redo', '|', 'heading', 'bold', 'italic', 'underline', '|', 'link', 'insertImage', '|', 'numberedList', 'bulletedList', '|', 'code', 'codeblock', '|', 'insertTable'] as ToolbarOption[];
+  },
+  placeholder: '',
+  disabled: false,
+  required: false,
+  name: '',
+  hasError: false,
+});
+
+const emit = defineEmits(['update:modelValue', 'focus', 'blur', 'input']);
+
+const editorInternal = computed(() => {
+  switch (props.editor) {
+    case 'inline':
+      return InlineEditor;
+    case 'balloon':
+      return BalloonEditor;
+    default:
+      return ClassicEditor;
+  }
+});
+
+const modelValueInternal = computed(() => {
+  if (props.modelValue === null) {
+    return '';
+  }
+
+  return props.modelValue;
+});
+
+const config = computed(() => {
+  return {
+    licenseKey: 'GPL',
+    plugins: [
+      Essentials,
+      Paragraph,
+      Bold,
+      Italic,
+      Underline,
+      Code,
+      CodeBlock,
+      List,
+      Link,
+      Autoformat,
+      Heading,
+      Image,
+      AutoImage,
+      ImageStyle,
+      ImageResize,
+      ImageToolbar,
+      ImageInsert,
+      Base64UploadAdapter,
+      Table,
+      TableToolbar,
+      MediaEmbed,
+      PasteFromOffice,
+      BlockToolbar,
+      Font,
+      FindAndReplace,
+      RemoveFormat,
+    ],
+    toolbar: {
+      items: props.toolbar,
+      shouldNotGroupWhenFull: true,
+    },
+    table: {
+      contentToolbar: ['tableColumn', 'tableRow']
+    },
+    image: {
+      resizeOptions: [
+        {
+          name: 'resizeImage:original',
+          label: 'Default image width',
+          value: null
+        },
+        {
+          name: 'resizeImage:50',
+          label: '50% page width',
+          value: '50'
+        },
+        {
+          name: 'resizeImage:75',
+          label: '75% page width',
+          value: '75'
+        },
+        {
+          name: 'resizeImage:100',
+          label: '100% page width',
+          value: '100'
+        }
+      ],
+      toolbar: [
+        'imageStyle:alignBlockLeft',
+        'imageStyle:block',
+        'imageStyle:alignBlockRight',
+        'resizeImage'
+      ]
+    },
+    placeholder: props.placeholder,
+  };
+});
+
+</script>

package/src/components/BaseRichText.vue

@@ -10,11 +10,14 @@
       sizeInternal == 'xl' ? 'base-rich-text-xl' : '',
     ]"
   >
-    <ckeditor
-      :model-value="modelValueInternal"
-      :editor="editorInternal"
-      :config="config"
-      :disabled="props.disabled"
+    <BaseCkeditor
+      :model-value="modelValue"
+      :editor="editor"
+      :size="sizeInternal"
+      :toolbar="toolbar"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      :required="requiredInternal"
       :name="nameInternal"
       @update:model-value="emitUpdate"
       @focus="emit('focus', $event)"
@@ -26,13 +29,11 @@
 
 <script lang="ts" setup>
 import { useField } from '@/composables/field';
-
-import { ClassicEditor, InlineEditor, BalloonEditor, Essentials, 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';
 
+const BaseCkeditor = defineAsyncComponent(() => import('./BaseCkeditor.vue'));
+
 const props = withDefaults(defineProps<{
   modelValue: string | null | undefined;
   editor?: 'classic' | 'inline' | 'balloon';
@@ -58,25 +59,6 @@ const props = withDefaults(defineProps<{
 
 const emit = defineEmits(['update:modelValue', 'focus', 'blur', 'input']);
 
-const editorInternal = computed(() => {
-  switch (props.editor) {
-    case 'inline':
-      return InlineEditor;
-    case 'balloon':
-      return BalloonEditor;
-    default:
-      return ClassicEditor;
-  }
-});
-
-const modelValueInternal = computed(() => {
-  if (props.modelValue === null) {
-    return '';
-  }
-
-  return props.modelValue;
-});
-
 const { nameInternal, requiredInternal, hasErrorInternal, emitUpdate, sizeInternal } =
   useField({
     name: computed(() => props.name),
@@ -86,76 +68,4 @@ const { nameInternal, requiredInternal, hasErrorInternal, emitUpdate, sizeIntern
     emit: emit,
   });
 
-const config = computed(() => {
-  return {
-    licenseKey: 'GPL',
-    plugins: [
-      Essentials,
-      Paragraph,
-      Bold,
-      Italic,
-      Underline,
-      Code,
-      CodeBlock,
-      List,
-      Link,
-      Autoformat,
-      Heading,
-      Image,
-      AutoImage,
-      ImageStyle,
-      ImageResize,
-      ImageToolbar,
-      ImageInsert,
-      Base64UploadAdapter,
-      Table,
-      TableToolbar,
-      MediaEmbed,
-      PasteFromOffice,
-      BlockToolbar,
-      Font,
-      FindAndReplace,
-      RemoveFormat,
-    ],
-    toolbar: {
-      items: props.toolbar,
-      shouldNotGroupWhenFull: true,
-    },
-    table: {
-      contentToolbar: ['tableColumn', 'tableRow']
-    },
-    image: {
-      resizeOptions: [
-        {
-          name: 'resizeImage:original',
-          label: 'Default image width',
-          value: null
-        },
-        {
-          name: 'resizeImage:50',
-          label: '50% page width',
-          value: '50'
-        },
-        {
-          name: 'resizeImage:75',
-          label: '75% page width',
-          value: '75'
-        },
-        {
-          name: 'resizeImage:100',
-          label: '100% page width',
-          value: '100'
-        }
-      ],
-      toolbar: [
-        'imageStyle:alignBlockLeft',
-        'imageStyle:block',
-        'imageStyle:alignBlockRight',
-        'resizeImage'
-      ]
-    },
-    placeholder: props.placeholder,
-  };
-});
-
 </script>