sprintify-ui 0.11.33 → 0.12.0

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

@@ -25,6 +25,18 @@ interface Props {
      * Flatten the Gantt chart by removing the hierarchy of rows and displaying all items in a single list. This is useful when there's only one level of rows and you want to maximize the vertical space.
      */
     flatten?: boolean;
+    /**
+     * Start with every row collapsed (items hidden) by default.
+     */
+    rowsCollapsedByDefault?: boolean;
+    /**
+     * Show row bar labels rendered outside the bar.
+     */
+    showRowBarLabels?: boolean;
+    /**
+     * Show item bar labels rendered outside the bar.
+     */
+    showItemBarLabels?: boolean;
     /**
      * Relationships between items, drawn as arrows from one item to another.
      */
@@ -55,6 +67,9 @@ declare const __VLS_component: import("vue").DefineComponent<Props, {}, {}, {},
     sidebarWidth: number;
     rowHeight: number;
     includeToday: boolean;
+    rowsCollapsedByDefault: boolean;
+    showRowBarLabels: boolean;
+    showItemBarLabels: boolean;
     relationships: GanttRelationship[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;

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

@@ -2,12 +2,6 @@ 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[] | string[];
     placeholder?: string;
@@ -35,7 +29,5 @@ declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {
     name: string;
     hasError: boolean;
     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

@@ -4,7 +4,8 @@ type __VLS_Props = {
     hasError?: boolean;
     disabled?: boolean;
     placeholder?: string;
-    toolbar?: string[];
+    toolbar?: string[] | 'simple' | 'complete';
+    noMargin?: boolean;
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (...args: any[]) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.11.33",
+  "version": "0.12.0",
   "type": "module",
   "scripts": {
     "generate-llm-txt": "node scripts/generate-llm-txt.js",
@@ -16,13 +16,11 @@
     "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 || ^1.0.0",
-    "ckeditor5": "^47.3.0",
     "croppie": "^2.6.5",
     "flatpickr": "^4.6.13",
     "humanize-duration": "^3.0.0",
@@ -47,7 +45,6 @@
   },
   "devDependencies": {
     "@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",
@@ -77,7 +74,6 @@
     "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",

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

@@ -1,291 +1,4 @@
 body {
-  .base-rich-text {
-    
-    &.error {
-      .ck.ck-editor__top .ck-sticky-panel .ck-sticky-panel__content, .ck.ck-editor__main > .ck-editor__editable:not(.ck-focused) {
-        @apply border-red-500;
-      }
-    }
-  
-    /** Style Prose */
-    .ck-content {
-  
-      @apply p-3.5;
-
-      @apply leading-snug;
-  
-      h1, h2, h3, h4, h5, h6 {
-        @apply font-bold leading-snug tracking-normal;
-        margin-top: 0;
-        margin-bottom: 0.375em;
-      }
-  
-      h1 {
-        @apply text-4xl;
-      }
-  
-      h2 {
-        @apply text-3xl;
-      }
-  
-      h3 {
-        @apply text-2xl;
-      }
-  
-      h4 {
-        @apply text-xl;
-      }
-  
-      h5 {
-        @apply text-lg;
-      }
-  
-      h6 {
-        @apply text-base;
-      }
-  
-      p {
-        @apply text-base leading-snug;
-        margin: 1em 0;
-      }
-
-      h1,
-      h2,
-      h3,
-      h4,
-      h5,
-      h6,
-      p {
-        &:first-child {
-          margin-top: 0;
-        }
-      }
-  
-      ol,
-      ul {
-        @apply text-base leading-snug;
-        padding-left: 1.5em;
-        margin-bottom: 1em;
-  
-        li {
-          @apply leading-snug;
-          margin: 0.3em 0;
-  
-          &::before {
-            @apply text-slate-500;
-            width: 2em;
-            left: 3em;
-            text-align: left;
-            position: absolute;
-          }
-        }
-      }
-  
-      blockquote {
-        @apply text-base bg-slate-100;
-        margin: 1em 0;
-        padding: 1em;
-      }
-  
-      a {
-        @apply text-blue-600 underline;
-      }
-    }
-  }
-
-  /* Size: xs */
-  .base-rich-text-xs {
-    .ck-content {
-
-      @apply p-2.5;
-
-      h1 {
-        @apply text-2xl;
-      }
-
-      h2 {
-        @apply text-xl;
-      }
-
-      h3 {
-        @apply text-lg;
-      }
-
-      h4 {
-        @apply text-base;
-      }
-
-      p {
-        @apply text-xs;
-      }
-
-      ol,
-      ul {
-        li {
-          @apply text-xs;
-        }
-      }
-
-      blockquote {
-        @apply text-xs;
-      }
-
-      pre, .ql-syntax {
-        @apply text-xs;
-      }
-    }
-
-    
-  }
-
-  /* Size: sm */
-  .base-rich-text-sm {
-    .ck-content {
-
-      @apply p-3;
-
-      h1 {
-        @apply text-3xl;
-      }
-
-      h2 {
-        @apply text-2xl;
-      }
-
-      h3 {
-        @apply text-xl;
-      }
-
-      h4 {
-        @apply text-lg;
-      }
-
-      p {
-        @apply text-sm;
-      }
-
-      ol,
-      ul {
-        li {
-          @apply text-sm;
-        }
-      }
-
-      blockquote {
-        @apply text-sm;
-      }
-
-      pre, .ql-syntax {
-        @apply text-sm;
-      }
-    }
-  }
-
-  /* Size: md */
-  .base-rich-text-md {
-   
-  }
-
-  /* Size: lg */
-  .base-rich-text-lg {
-    .ck-content {
-
-      @apply p-5;
-
-      h1 {
-        @apply text-5xl;
-      }
-
-      h2 {
-        @apply text-4xl;
-      }
-
-      h3 {
-        @apply text-3xl;
-      }
-
-      h4 {
-        @apply text-2xl;
-      }
-
-      p {
-        @apply text-lg;
-      }
-
-      ol,
-      ul {
-        li {
-          @apply text-lg;
-        }
-      }
-
-      blockquote {
-        @apply text-lg;
-      }
-
-      pre, .ql-syntax {
-        @apply text-lg;
-      }
-    }
-  }
-
-  /* Size: xl */
-  .base-rich-text-xl {
-    .ck-content {
-
-      @apply p-6;
-
-      h1 {
-        @apply text-6xl;
-      }
-
-      h2 {
-        @apply text-5xl;
-      }
-
-      h3 {
-        @apply text-2xl;
-      }
-
-      h4 {
-        @apply text-xl;
-      }
-
-      p {
-        @apply text-xl;
-      }
-
-      ol,
-      ul {
-        li {
-          @apply text-xl;
-        }
-      }
-
-      blockquote {
-        @apply text-xl;
-      }
-
-      pre, .ql-syntax {
-        @apply text-xl;
-      }
-    }
-  }
-
-  .base-rich-text-no-margin {
-    .ck-content {
-      h1, h2, h3, h4, h5, h6, p, ol, ul {
-        margin: 0;
-      }
-
-      ol, ul {
-        li {
-          margin: 0;
-        }
-      }
-    }
-  }
-}
 
 /** TipTap */
 
@@ -317,3 +30,16 @@ body .tiptap {
       pointer-events: none;
     }
   }
+}
+
+body .tip-tap-no-margin .prose {
+  h1, h2, h3, h4, h5, h6, p, ol, ul {
+    margin: 0;
+  }
+
+  ol, ul {
+    li {
+      margin: 0;
+    }
+  }
+}

package/src/assets/main.css

@@ -11,9 +11,6 @@
 /** BaseCropper */
 @import "croppie/croppie.css";
 
-/** CK Editor */
-@import 'ckeditor5/ckeditor5.css';
-
 /** Global styles */
 
 @import "./flatpickr.css";

package/src/components/BaseGantt.stories.js

@@ -46,7 +46,6 @@ for (let i = 0; i < 10; i++) {
     id: i + 1,
     name: `Project sdf sdfg sdf gsdf gsdf gsdf g sdf sdf sdfg dsfg dsfg ${i + 1}`,
     items: items,
-    height: 30,
   });
 }
 
@@ -55,7 +54,7 @@ export default {
   component: BaseGantt,
   args: {
     rows,
-    maxHeight: 300,
+    maxHeight: 400,
   },
 };
 

package/src/components/BaseGantt.vue

@@ -62,7 +62,7 @@
                 :row="row"
               >
                 <div class="px-1 py-1 h-full flex items-center">
-                  <p class="font-semibold leading-tight truncate text-xs">
+                  <p class="font-medium leading-tight truncate text-[13px]">
                     {{ row.name }}
                   </p>
                 </div>
@@ -86,7 +86,7 @@
                 :item="item"
               >
                 <div class="pr-1 pl-4 py-1 h-full flex items-center">
-                  <p class="leading-tight truncate text-slate-600 text-xs">
+                  <p class="leading-tight truncate text-slate-600 text-[13px]">
                     {{ item.name }}
                   </p>
                 </div>
@@ -204,7 +204,7 @@
           >
             <button
               type="button"
-              class="absolute flex"
+              class="absolute flex overflow-visible"
               :style="{
                 transform: `translate(${row.x}px, ${row.y}px)`,
                 height: row.barHeight + 'px',
@@ -218,19 +218,19 @@
                 :row="row"
               >
                 <div
-                  :style="{
-                    backgroundColor: 'gray',
-                  }"
-                  class="flex w-full h-full items-center rounded hover:opacity-80 duration-200"
+                  class="relative w-full h-full hover:opacity-80 duration-200 text-slate-500"
                 >
-                  <p
-                    class="text-white text-xs px-2 py-1 truncate"
-                    style="text-shadow: 0.5px 0.5px rgba(0,0,0,0.1);"
-                  >
-                    {{ row.name }}
-                  </p>
+                  <div class="absolute left-0 right-0 top-1/2 -translate-y-1/2 border-t-2 border-current" />
+                  <div class="absolute left-0 top-1/2 -translate-y-1/2 h-3 border-l-2 border-current" />
+                  <div class="absolute right-0 top-1/2 -translate-y-1/2 h-3 border-r-2 border-current" />
                 </div>
               </slot>
+              <p
+                v-if="props.showRowBarLabels"
+                class="absolute left-full ml-2 top-1/2 -translate-y-1/2 text-[13px] leading-tight font-semibold text-slate-900 whitespace-nowrap max-w-[320px] truncate"
+              >
+                {{ row.name }}
+              </p>
             </button>
           </div>
           
@@ -245,7 +245,7 @@
             >
               <button
                 type="button"
-                class="absolute flex"
+                class="absolute flex overflow-visible"
                 :style="{
                   transform: `translate(${item.x}px, ${item.y}px)`,
                   height: item.barHeight + 'px',
@@ -263,15 +263,14 @@
                       backgroundColor: item.color,
                     }"
                     class="flex w-full h-full items-center rounded hover:opacity-80 duration-200"
-                  >
-                    <p
-                      class="text-white text-xs px-2 py-1 truncate"
-                      style="text-shadow: 0.5px 0.5px rgba(0,0,0,0.1);"
-                    >
-                      {{ item.name }}
-                    </p>
-                  </div>
+                  />
                 </slot>
+                <p
+                  v-if="props.showItemBarLabels"
+                  class="absolute left-full ml-2 top-1/2 -translate-y-1/2 text-[13px] leading-tight text-slate-700 whitespace-nowrap max-w-[320px] truncate"
+                >
+                  {{ item.name }}
+                </p>
               </button>
             </div>
           </div>
@@ -427,6 +426,18 @@ interface Props {
    * Flatten the Gantt chart by removing the hierarchy of rows and displaying all items in a single list. This is useful when there's only one level of rows and you want to maximize the vertical space.
    */
   flatten?: boolean;
+  /**
+   * Start with every row collapsed (items hidden) by default.
+   */
+  rowsCollapsedByDefault?: boolean;
+  /**
+   * Show row bar labels rendered outside the bar.
+   */
+  showRowBarLabels?: boolean;
+  /**
+   * Show item bar labels rendered outside the bar.
+   */
+  showItemBarLabels?: boolean;
   /**
    * Relationships between items, drawn as arrows from one item to another.
    */
@@ -438,6 +449,9 @@ const props = withDefaults(defineProps<Props>(), {
   rowHeight: 40,
   maxHeight: undefined,
   includeToday: true,
+  rowsCollapsedByDefault: false,
+  showRowBarLabels: true,
+  showItemBarLabels: true,
   relationships: () => [],
 });
 
@@ -494,7 +508,9 @@ function init() {
 
   nowLine.value = format.nowLine;
 
-  expandedRows.value = new Set(props.rows.map((r) => r.id));
+  expandedRows.value = props.rowsCollapsedByDefault
+    ? new Set<string | number>()
+    : new Set(props.rows.map((r) => r.id));
 
   // Scroll to now line
 

package/src/components/BaseRichText.stories.js

@@ -19,10 +19,6 @@ export default {
     placeholder: "This is a custom placeholder...",
   },
   argTypes: {
-    driver: {
-      control: { type: "select" },
-      options: ["ckeditor", "tiptap"],
-    },
     editor: {
       control: { type: "select" },
       options: ["classic", "inline", "balloon"],
@@ -47,35 +43,22 @@ const Template = (args) => ({
   `,
 });
 
-export const TipTapEditor = Template.bind({});
-TipTapEditor.args = {
-  driver: "tiptap",
-};
-
-export const ClassicEditor = Template.bind({});
-ClassicEditor.args = {
-  editor: "classic",
-};
-
-export const InlineEditor = Template.bind({});
-InlineEditor.args = {
-  editor: "inline",
+export const Demo = Template.bind({});
+Demo.args = {
 };
 
-export const BalloonEditor = Template.bind({});
-BalloonEditor.args = {
-  editor: "balloon",
+export const NoMargin = Template.bind({});
+NoMargin.args = {
+  noMargin: true,
 };
 
 export const CustomToolbar = Template.bind({});
 CustomToolbar.args = {
-  editor: "classic",
   toolbar: [
     "bold",
     "italic",
     "underline",
     "strikethrough",
-    "|",
     "undo",
     "redo",
   ]

package/src/components/BaseRichText.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="driver == 'tiptap'">
+  <div>
     <BaseTipTap
       :model-value="modelValue"
       :size="sizeInternal"
@@ -7,36 +7,10 @@
       :has-error="hasErrorInternal"
       :placeholder="placeholder"
       :toolbar="toolbar"
+      :no-margin="noMargin"
       @update:model-value="emitUpdate"
     />
   </div>
-  <div
-    v-else
-    class="base-rich-text relative"
-    :class="[
-      hasErrorInternal ? 'error' : '',
-      sizeInternal == 'xs' ? 'base-rich-text-xs' : '',
-      sizeInternal == 'sm' ? 'base-rich-text-sm' : '',
-      sizeInternal == 'md' ? 'base-rich-text-base' : '',
-      sizeInternal == 'lg' ? 'base-rich-text-lg' : '',
-      sizeInternal == 'xl' ? 'base-rich-text-xl' : '',
-      props.noMargin ? 'base-rich-text-no-margin' : '',
-    ]"
-  >
-    <BaseCkeditor
-      ref="baseCkeditorRef"
-      :model-value="modelValue"
-      :editor="editor"
-      :size="sizeInternal"
-      :toolbar="toolbar"
-      :placeholder="placeholder"
-      :disabled="disabled"
-      @update:model-value="emitUpdate"
-      @focus="emit('focus', $event)"
-      @blur="emit('blur', $event)"
-      @input="emit('input', $event)"
-    />
-  </div>
 </template>
 
 <script lang="ts" setup>
@@ -45,16 +19,8 @@ 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[] | string[];
   placeholder?: string;
@@ -64,7 +30,6 @@ const props = withDefaults(defineProps<{
   hasError?: boolean;
   noMargin?: boolean;
 }>(), {
-  driver: 'ckeditor',
   editor: 'classic',
   size: 'md',
   toolbar: undefined,
@@ -77,7 +42,7 @@ const props = withDefaults(defineProps<{
 
 const emit = defineEmits(['update:modelValue', 'focus', 'blur', 'input']);
 
-const { nameInternal, requiredInternal, hasErrorInternal, emitUpdate, sizeInternal, addBeforeSubmitListener } =
+const { hasErrorInternal, emitUpdate, sizeInternal } =
   useField({
     name: computed(() => props.name),
     required: computed(() => props.required),
@@ -86,19 +51,4 @@ const { nameInternal, requiredInternal, hasErrorInternal, emitUpdate, sizeIntern
     emit: emit,
   });
 
-const baseCkeditorRef = ref<InstanceType<typeof BaseCkeditor> | null>(null);
-
-// This make sure that the latest editor data is emitted when the form is submitted
-// If the user types really fast, then press submit really fast, the editor data might not be up to date
-// This is a workaround to make sure that the latest data is emitted
-addBeforeSubmitListener(() => {
-  if (!baseCkeditorRef.value) {
-    return;
-  }
-
-  const latestData = baseCkeditorRef.value.getEditorData();
-
-  emitUpdate(latestData);
-});
-
 </script>