sprintify-ui 0.11.34 → 0.12.1

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

@@ -22,6 +22,10 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
         default: string;
         type: PropType<Placement>;
     };
+    twButton: {
+        default: string;
+        type: StringConstructor;
+    };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     animated: {
         default: boolean;
@@ -35,8 +39,13 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
         default: string;
         type: PropType<Placement>;
     };
+    twButton: {
+        default: string;
+        type: StringConstructor;
+    };
 }>> & Readonly<{}>, {
     placement: Placement;
+    twButton: string;
     animated: boolean;
     keepAlive: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

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/dist/types/index.d.ts

@@ -68,6 +68,7 @@ declare const messages: {
             page: string;
             pagination_detail_1: string;
             pagination_detail_2: string;
+            paste_link: string;
             postal_code_zip_code: string;
             previous: string;
             previous_month: string;
@@ -170,6 +171,7 @@ declare const messages: {
             page: string;
             pagination_detail_1: string;
             pagination_detail_2: string;
+            paste_link: string;
             postal_code_zip_code: string;
             previous: string;
             previous_month: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.11.34",
+  "version": "0.12.1",
   "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",
@@ -40,6 +38,8 @@
   "dependencies": {
     "@floating-ui/vue": "^1.0.6",
     "@headlessui/vue": "^1.7.19",
+    "@tiptap/extension-highlight": "^3.22.4",
+    "@tiptap/extension-image": "^3.22.4",
     "@tiptap/extension-subscript": "^3.20.4",
     "@tiptap/extension-superscript": "^3.20.4",
     "color2k": "^2.0.3",
@@ -47,7 +47,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 +76,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/BaseDropdown.vue

@@ -1,6 +1,8 @@
 <template>
   <Popover v-slot="{ open }">
-    <PopoverButton class="outline-none">
+    <PopoverButton
+      :class="twButtonInternal"
+    >
       <div ref="buttonRef">
         <slot name="button" />
       </div>
@@ -43,6 +45,7 @@
 import { autoUpdate, offset, flip, shift, useFloating, Placement } from '@floating-ui/vue';
 import { Popover, PopoverButton, PopoverPanel } from '@headlessui/vue';
 import { unrefElement } from '@vueuse/core';
+import { twMerge } from 'tailwind-merge';
 import { PropType } from 'vue';
 
 const buttonRef = ref<InstanceType<typeof PopoverButton> | null>(null);
@@ -62,7 +65,11 @@ const props = defineProps({
   placement: {
     default: 'bottom-end',
     type: String as PropType<Placement>,
-  }
+  },
+  twButton: {
+    default: 'outline-none',
+    type: String,
+  },
 });
 
 const { floatingStyles } = useFloating(buttonRefEl, dropdownRef, {
@@ -71,4 +78,11 @@ const { floatingStyles } = useFloating(buttonRefEl, dropdownRef, {
   whileElementsMounted: autoUpdate,
 });
 
+const twButtonInternal = computed(() => {
+  return twMerge(
+    'outline-none',
+    props.twButton,
+  );
+});
+
 </script>

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>