sprintify-ui 0.11.33 → 0.12.0

package/src/components/BaseTipTap.vue

@@ -3,6 +3,7 @@
     class="border rounded-md overflow-hidden bg-white || tiptap"
     :class="[
       hasError ? 'border-red-500' : 'border-slate-300',
+      noMargin ? 'tip-tap-no-margin' : ''
     ]"
   >
     <div class="divide-x px-1 py-1 border-b flex">
@@ -23,7 +24,7 @@
 
     <div
       class="bg-white p-5"
-      :class="[disabled ? 'cursor-not-allowed' : '']"
+      :class="[disabled ? 'cursor-not-allowed opacity-80' : '']"
     >
       <editor-content
         v-if="editor"
@@ -39,6 +40,7 @@ import Document from '@tiptap/extension-document';
 import Link from '@tiptap/extension-link';
 import Superscript from '@tiptap/extension-superscript';
 import Subscript from '@tiptap/extension-subscript';
+import Strike from '@tiptap/extension-strike'
 import { Placeholder } from '@tiptap/extensions'
 import { Footnotes, FootnoteReference, Footnote } from "tiptap-footnotes";
 import StarterKit from '@tiptap/starter-kit';
@@ -51,7 +53,8 @@ const props = defineProps<{
   hasError?: boolean;
   disabled?: boolean;
   placeholder?: string;
-  toolbar?: string[];
+  toolbar?: string[] | 'simple' | 'complete';
+  noMargin?: boolean;
 }>();
 
 const editor = new Editor({
@@ -72,6 +75,7 @@ const editor = new Editor({
     Placeholder.configure({
       placeholder: props.placeholder || 'Start typing here...',
     }),
+    Strike,
     Superscript,
     Subscript,
     Footnotes,
@@ -223,6 +227,11 @@ const actions = computed<Action[]>(() => {
       icon: 'material-symbols:format-underlined',
       command: () => editor.chain().focus().toggleUnderline().run(),
     },
+    {
+      name: 'strikethrough',
+      icon: 'material-symbols:strikethrough-s',
+      command: () => editor.chain().focus().toggleStrike().run(),
+    },
     {
       name: 'superscript',
       icon: 'material-symbols:superscript',
@@ -267,12 +276,38 @@ const actions = computed<Action[]>(() => {
   ];
 });
 
+const toolbarTemplates: Record<string, string[]> = {
+  simple: ['bold', 'italic', 'underline', 'link'],
+  complete: [
+    'undo',
+    'redo',
+    'paragraph',
+    'heading-2',
+    'heading-3',
+    'bold',
+    'italic',
+    'underline',
+    'superscript',
+    'subscript',
+    'link',
+    'unlink',
+    'bulletList',
+    'orderedList',
+    'footnote',
+    'nonBreakingSpace',
+  ],
+};
+
 const filteredActions = computed(() => {
   if (!props.toolbar || props.toolbar.length === 0) {
     return actions.value;
   }
 
-  return actions.value.filter(action => props.toolbar?.includes(action.name));
+  const toolbar = typeof props.toolbar === 'string'
+    ? toolbarTemplates[props.toolbar] ?? []
+    : props.toolbar;
+
+  return actions.value.filter(action => toolbar.includes(action.name));
 });
 
 </script>

package/src/services/gantt/format.ts

@@ -4,6 +4,7 @@ import { Timescale } from "./timescale";
 import { sum } from "lodash";
 
 const PADDING_Y_ROW = 4;
+const ITEM_LABEL_TIMELINE_PADDING_X = 800;
 
 export class Format {
 
@@ -23,8 +24,18 @@ export class Format {
         // Get min and max
         let { min, max } = this.getMinMax(rowsFormatted);
 
-        // Get timescale
-        const timescale = (new Timescale(this.config.minWidth, min, max)).handle();
+        // Get baseline timescale before expanding the visible range for outside item labels.
+        const baselineTimescale = (new Timescale(this.config.minWidth, min, max)).handle();
+
+        const timelinePaddingMilliseconds = baselineTimescale.millisecondToPixel > 0
+            ? ITEM_LABEL_TIMELINE_PADDING_X / baselineTimescale.millisecondToPixel
+            : 0;
+
+        const paddedMin = baselineTimescale.min.minus({ milliseconds: timelinePaddingMilliseconds });
+        const paddedMax = baselineTimescale.max.plus({ milliseconds: timelinePaddingMilliseconds });
+
+        // Rebuild timescale with left/right timeline padding so labels can render outside bars by default.
+        const timescale = (new Timescale(this.config.minWidth, paddedMin, paddedMax)).handle();
 
         // Padded min and max
         min = timescale.min;

package/dist/BaseCkeditor-D39KO4I5.js

@@ -1,143 +0,0 @@
-import { defineComponent as c, computed as i, openBlock as f, createBlock as I, unref as n } from "vue";
-import { ClassicEditor as B, BalloonEditor as k, InlineEditor as y, Essentials as h, SourceEditing as z, Paragraph as C, Bold as S, Italic as v, Underline as E, Strikethrough as T, Subscript as V, Superscript as w, Code as F, CodeBlock as L, List as R, Indent as A, IndentBlock as x, Link as D, Autoformat as P, Heading as U, Image as G, AutoImage as O, ImageStyle as H, ImageResize as K, ImageToolbar as M, ImageInsert as N, Base64UploadAdapter as W, Table as j, TableToolbar as q, MediaEmbed as J, PasteFromOffice as Q, BlockToolbar as X, Font as Y, FindAndReplace as Z, RemoveFormat as $ } from "ckeditor5";
-import { Ckeditor as _ } from "@ckeditor/ckeditor5-vue";
-const te = /* @__PURE__ */ c({
-  __name: "BaseCkeditor",
-  props: {
-    modelValue: {},
-    editor: { default: "classic" },
-    size: { default: "md" },
-    toolbar: { default() {
-      return [
-        "undo",
-        "redo",
-        "|",
-        "heading",
-        "bold",
-        "italic",
-        "underline",
-        "fontBackgroundColor",
-        "|",
-        "link",
-        "insertImage",
-        "|",
-        "numberedList",
-        "bulletedList",
-        "|",
-        "insertTable"
-      ];
-    } },
-    placeholder: { default: "" },
-    disabled: { type: Boolean, default: !1 }
-  },
-  emits: ["update:modelValue", "focus", "blur", "input", "ready"],
-  setup(d, { expose: u, emit: s }) {
-    const o = d, t = s;
-    let a = null;
-    function m(r) {
-      a = r, t("ready", r);
-    }
-    const g = i(() => {
-      switch (o.editor) {
-        case "inline":
-          return y;
-        case "balloon":
-          return k;
-        default:
-          return B;
-      }
-    }), p = i(() => o.modelValue === null ? "" : o.modelValue), b = i(() => ({
-      licenseKey: "GPL",
-      plugins: [
-        h,
-        z,
-        C,
-        S,
-        v,
-        E,
-        T,
-        V,
-        w,
-        F,
-        L,
-        R,
-        A,
-        x,
-        D,
-        P,
-        U,
-        G,
-        O,
-        H,
-        K,
-        M,
-        N,
-        W,
-        j,
-        q,
-        J,
-        Q,
-        X,
-        Y,
-        Z,
-        $
-      ],
-      toolbar: {
-        items: o.toolbar,
-        shouldNotGroupWhenFull: !0
-      },
-      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: o.placeholder
-    }));
-    return u({
-      getEditorData() {
-        return (a == null ? void 0 : a.getData()) || "";
-      }
-    }), (r, e) => (f(), I(n(_), {
-      "model-value": n(p),
-      editor: n(g),
-      config: n(b),
-      disabled: d.disabled,
-      "onUpdate:modelValue": e[0] || (e[0] = (l) => t("update:modelValue", l)),
-      onFocus: e[1] || (e[1] = (l) => t("focus", l)),
-      onBlur: e[2] || (e[2] = (l) => t("blur", l)),
-      onInput: e[3] || (e[3] = (l) => t("input", l)),
-      onReady: m
-    }, null, 8, ["model-value", "editor", "config", "disabled"]));
-  }
-});
-export {
-  te as default
-};

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

@@ -1,32 +0,0 @@
-import { Size } from '@/utils/sizes';
-import { ToolbarOption } from '@/types/ToolbarOption';
-type __VLS_Props = {
-    modelValue: string | null | undefined;
-    editor?: 'classic' | 'inline' | 'balloon';
-    size?: Size;
-    toolbar?: ToolbarOption[] | string[];
-    placeholder?: string;
-    disabled?: boolean;
-};
-declare const _default: import("vue").DefineComponent<__VLS_Props, {
-    getEditorData(): string;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    blur: (...args: any[]) => void;
-    focus: (...args: any[]) => void;
-    input: (...args: any[]) => void;
-    "update:modelValue": (...args: any[]) => void;
-    ready: (...args: any[]) => void;
-}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onBlur?: ((...args: any[]) => any) | undefined;
-    onFocus?: ((...args: any[]) => any) | undefined;
-    onInput?: ((...args: any[]) => any) | undefined;
-    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
-    onReady?: ((...args: any[]) => any) | undefined;
-}>, {
-    placeholder: string;
-    size: Size;
-    disabled: boolean;
-    toolbar: ToolbarOption[] | string[];
-    editor: "classic" | "inline" | "balloon";
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-export default _default;

package/src/components/BaseCkeditor.vue

@@ -1,170 +0,0 @@
-<template>
-  <ckeditor
-    :model-value="modelValueInternal"
-    :editor="editorInternal"
-    :config="config"
-    :disabled="disabled"
-    @update:model-value="emit('update:modelValue', $event)"
-    @focus="emit('focus', $event)"
-    @blur="emit('blur', $event)"
-    @input="emit('input', $event)"
-    @ready="onReady"
-  />
-</template>
-
-<script lang="ts" setup>
-import { ClassicEditor, InlineEditor, BalloonEditor, Essentials, SourceEditing, MediaEmbed, Paragraph, Bold, Italic, Strikethrough, Subscript, Superscript, List, Link, Autoformat, Heading, Underline, Code, CodeBlock, Indent, IndentBlock, 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[] | string[];
-  placeholder?: string;
-  disabled?: boolean;
-}>(), {
-  editor: 'classic',
-  size: 'md',
-  toolbar() {
-    return [
-      'undo',
-      'redo',
-      '|',
-      'heading',
-      'bold',
-      'italic',
-      'underline',
-      'fontBackgroundColor',
-      '|',
-      'link',
-      'insertImage',
-      '|',
-      'numberedList',
-      'bulletedList',
-      '|',
-      'insertTable'
-    ] as ToolbarOption[];
-  },
-  placeholder: '',
-  disabled: false,
-  hasError: false,
-});
-
-const emit = defineEmits(['update:modelValue', 'focus', 'blur', 'input', 'ready']);
-
-type Editor = InlineEditor | BalloonEditor | ClassicEditor;
-
-let ckeditorInstance = null as Editor | null;
-
-function onReady(editor: Editor | null) {
-  ckeditorInstance = editor;
-  emit('ready', editor);
-}
-
-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,
-      SourceEditing,
-      Paragraph,
-      Bold,
-      Italic,
-      Underline,
-      Strikethrough,
-      Subscript,
-      Superscript,
-      Code,
-      CodeBlock,
-      List,
-      Indent,
-      IndentBlock,
-      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,
-  };
-});
-
-defineExpose({
-  getEditorData() {
-    return ckeditorInstance?.getData() || '';
-  },
-});
-
-</script>