pukaad-ui-lib 1.43.0 → 1.45.0

package/dist/module.json

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

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,7 +1,12 @@
 <template>
   <div>
-    <div class="quill-wrapper">
-      <div ref="contentRef" :style="{ '--height': `${props.height}px` }" />
+    <div class="quill-wrapper" :class="{ 'drag-not-allowed': isDraggingMedia }">
+      <div
+        ref="contentRef"
+        :style="{
+  '--height': `${props.height}px`
+}"
+      />
     </div>
   </div>
 </template>
@@ -15,9 +20,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 +35,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 +79,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 +156,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{border-bottom:1px solid #e8e8e8}.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.43.0",
+  "version": "1.45.0",
   "description": "pukaad-ui for MeMSG",
   "repository": {
     "type": "git",