pukaad-ui-lib 1.42.0 → 1.44.0

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "pukaad-ui-lib",
   "configKey": "pukaadUI",
-  "version": "1.42.0",
+  "version": "1.44.0",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/module.mjs

@@ -93,6 +93,9 @@ const module$1 = defineNuxtModule({
     _nuxt.options.css.push(resolver.resolve("./runtime/assets/css/main.css"));
     _nuxt.hook("vite:extendConfig", (config) => {
       config.plugins.push(tailwindcss());
+      config.optimizeDeps = config.optimizeDeps || {};
+      config.optimizeDeps.include = config.optimizeDeps.include || [];
+      config.optimizeDeps.include.push("quill", "quill-delta");
     });
     _nuxt.options.runtimeConfig.public.BASE_URL_API = process.env.BASE_URL_API ?? "";
     _nuxt.options.runtimeConfig.public.RECAPTCHA_KEY = process.env.RECAPTCHA_KEY ?? "";

package/dist/runtime/components/input/input-autocomplete.d.vue.ts

@@ -37,8 +37,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     name: string;
     placeholder: string;
     description: string;
-    limit: number;
     options: AutocompleteOption[] | string[] | number[];
+    limit: number;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;
     showCounter: boolean;

package/dist/runtime/components/input/input-autocomplete.vue.d.ts

@@ -37,8 +37,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     name: string;
     placeholder: string;
     description: string;
-    limit: number;
     options: AutocompleteOption[] | string[] | number[];
+    limit: number;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;
     showCounter: boolean;

package/dist/runtime/components/input/input-content.d.vue.ts

@@ -2,6 +2,7 @@ export interface InputContentProps {
     height?: string | number;
     placeholder?: string;
     disabledBorder?: boolean;
+    disableMedia?: boolean;
 }
 type __VLS_Props = InputContentProps;
 type __VLS_ModelProps = {
@@ -14,6 +15,7 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     "onUpdate:modelValue"?: ((value: any) => any) | undefined;
 }>, {
     height: string | number;
+    disableMedia: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/input/input-content.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="quill-wrapper">
+    <div class="quill-wrapper" :class="{ 'drag-not-allowed': isDraggingMedia }">
       <div ref="contentRef" :style="{ '--height': `${props.height}px` }" />
     </div>
   </div>
@@ -15,9 +15,11 @@ let quillEditor = null;
 const props = defineProps({
   height: { type: [String, Number], required: false, default: 288 },
   placeholder: { type: String, required: false },
-  disabledBorder: { type: Boolean, required: false }
+  disabledBorder: { type: Boolean, required: false },
+  disableMedia: { type: Boolean, required: false, default: false }
 });
 const modelValue = defineModel();
+const isDraggingMedia = ref(false);
 onMounted(() => {
   if (contentRef.value) {
     const toolbarOptions = [
@@ -28,15 +30,43 @@ onMounted(() => {
       [{ indent: "-1" }, { indent: "+1" }],
       [{ color: [] }, { background: [] }],
       [{ align: [] }],
-      ["link", "image", "video"]
+      props.disableMedia ? ["link"] : ["link", "image", "video"]
     ];
+    const modules = {
+      toolbar: toolbarOptions
+    };
+    if (props.disableMedia) {
+      modules.clipboard = {
+        matchers: [
+          [
+            "IMG",
+            () => {
+              return { ops: [] };
+            }
+          ],
+          [
+            "VIDEO",
+            () => {
+              return { ops: [] };
+            }
+          ]
+        ]
+      };
+    }
     quillEditor = new $quill(contentRef.value, {
       theme: "snow",
       placeholder: props.placeholder,
-      modules: {
-        toolbar: toolbarOptions
-      }
+      modules
     });
+    if (props.disableMedia) {
+      const toolbar = quillEditor.getModule("toolbar");
+      if (toolbar && toolbar.addHandler) {
+        toolbar.addHandler("image", () => {
+        });
+        toolbar.addHandler("video", () => {
+        });
+      }
+    }
     if (modelValue.value) {
       quillEditor.setContents(modelValue.value);
     }
@@ -44,14 +74,72 @@ onMounted(() => {
       if (source === "user") {
         if (!quillEditor) return;
         const currentDeltaJson = quillEditor.getContents();
-        modelValue.value = currentDeltaJson;
+        if (props.disableMedia && currentDeltaJson.ops) {
+          const filteredOps = currentDeltaJson.ops.filter((op) => {
+            if (op.insert && typeof op.insert === "object") {
+              return !op.insert.image && !op.insert.video;
+            }
+            return true;
+          });
+          if (filteredOps.length !== currentDeltaJson.ops.length) {
+            quillEditor.setContents({ ops: filteredOps });
+          }
+          modelValue.value = { ops: filteredOps };
+        } else {
+          modelValue.value = currentDeltaJson;
+        }
       }
     });
+    if (props.disableMedia) {
+      const editorRoot = quillEditor.root;
+      editorRoot.addEventListener("dragenter", handleDragEnter);
+      editorRoot.addEventListener("dragover", handleDragOver);
+      editorRoot.addEventListener("dragleave", handleDragLeave);
+      editorRoot.addEventListener("drop", handleDrop);
+    }
   }
 });
+const hasMediaFiles = (dataTransfer) => {
+  if (!dataTransfer) return false;
+  return Array.from(dataTransfer.items).some(
+    (item) => item.type.startsWith("image/") || item.type.startsWith("video/")
+  );
+};
+const handleDragEnter = (e) => {
+  if (hasMediaFiles(e.dataTransfer)) {
+    isDraggingMedia.value = true;
+  }
+};
+const handleDragOver = (e) => {
+  if (hasMediaFiles(e.dataTransfer)) {
+    e.preventDefault();
+    e.dataTransfer.dropEffect = "none";
+    isDraggingMedia.value = true;
+  }
+};
+const handleDragLeave = (e) => {
+  const relatedTarget = e.relatedTarget;
+  if (!relatedTarget || !quillEditor?.root.contains(relatedTarget)) {
+    isDraggingMedia.value = false;
+  }
+};
+const handleDrop = (e) => {
+  isDraggingMedia.value = false;
+  if (hasMediaFiles(e.dataTransfer)) {
+    e.preventDefault();
+    e.stopPropagation();
+  }
+};
 onUnmounted(() => {
   if (quillEditor && contentRef.value) {
     quillEditor.off("text-change");
+    if (props.disableMedia) {
+      const editorRoot = quillEditor.root;
+      editorRoot.removeEventListener("dragenter", handleDragEnter);
+      editorRoot.removeEventListener("dragover", handleDragOver);
+      editorRoot.removeEventListener("dragleave", handleDragLeave);
+      editorRoot.removeEventListener("drop", handleDrop);
+    }
     const toolbar = contentRef.value.previousElementSibling;
     if (toolbar && toolbar.classList.contains("ql-toolbar")) {
       toolbar.remove();
@@ -63,5 +151,5 @@ onUnmounted(() => {
 </script>
 
 <style scoped>
-.quill-wrapper :deep(.ql-toolbar.ql-snow){background-color:#fafafa;border:none;border-radius:8px}.quill-wrapper :deep(.ql-container.ql-snow){border:none;border-bottom-left-radius:8px;border-bottom-right-radius:8px;overflow:hidden}.quill-wrapper :deep(.ql-editor){font-family:Sarabun-Regular;font-size:16px;margin-top:8px;min-height:var(--height)!important;padding:4px 12px}.quill-wrapper :deep(.ql-editor.ql-blank:before){color:#c4c4c4;content:attr(data-placeholder);font-size:16px;font-style:normal}
+.quill-wrapper :deep(.ql-toolbar.ql-snow){background-color:#fafafa;border:none;border-radius:8px}.quill-wrapper :deep(.ql-container.ql-snow){border:none;border-bottom-left-radius:8px;border-bottom-right-radius:8px;overflow:hidden}.quill-wrapper :deep(.ql-editor){font-family:Sarabun-Regular;font-size:16px;margin-top:8px;min-height:var(--height)!important;padding:4px 12px}.quill-wrapper :deep(.ql-editor.ql-blank:before){color:#c4c4c4;content:attr(data-placeholder);font-size:16px;font-style:normal}.quill-wrapper.drag-not-allowed :deep(.ql-editor){background-color:#fef2f2;border:2px dashed #ef4444;cursor:not-allowed}
 </style>

package/dist/runtime/components/input/input-content.vue.d.ts

@@ -2,6 +2,7 @@ export interface InputContentProps {
     height?: string | number;
     placeholder?: string;
     disabledBorder?: boolean;
+    disableMedia?: boolean;
 }
 type __VLS_Props = InputContentProps;
 type __VLS_ModelProps = {
@@ -14,6 +15,7 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     "onUpdate:modelValue"?: ((value: any) => any) | undefined;
 }>, {
     height: string | number;
+    disableMedia: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pukaad-ui-lib",
-  "version": "1.42.0",
+  "version": "1.44.0",
   "description": "pukaad-ui for MeMSG",
   "repository": {
     "type": "git",