quasar-ui-sellmate-ui-kit 3.4.3 → 3.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quasar-ui-sellmate-ui-kit",
-  "version": "3.4.3",
+  "version": "3.5.0",
   "author": "Sellmate Dev Team <dev@sellmate.co.kr>",
   "description": "Sellmate UI Kit",
   "license": "MIT",
@@ -34,6 +34,7 @@
     "@quasar/extras": "^1.16.9",
     "@quasar/quasar-app-extension-testing-unit-vitest": "1.0.0",
     "@rollup/plugin-buble": "^0.21.3",
+    "@rollup/plugin-commonjs": "^21.1.0",
     "@rollup/plugin-json": "^4.0.0",
     "@rollup/plugin-node-resolve": "^11.2.1",
     "@rollup/plugin-replace": "^2.4.2",
@@ -55,6 +56,7 @@
     "eslint-plugin-vue": "^9.20.1",
     "fs-extra": "^8.1.0",
     "happy-dom": "^13.6.2",
+    "interactjs": "^1.10.27",
     "open": "^7.3.0",
     "postcss": "^8.1.9",
     "prettier": "^3.2.4",
@@ -86,6 +88,7 @@
     "last 4 iOS versions"
   ],
   "dependencies": {
+    "@interactjs/inertia": "^1.10.27",
     "material-icons": "^1.13.12",
     "sass": "^1.70.0"
   }

package/src/components/SEditor.vue

@@ -7,12 +7,13 @@
     }"
     :min-height="`${minHeight}px`"
     :max-height="maxHeight != null ? `${maxHeight}px` : null"
-    paragraph-tag="div"
+    paragraph-tag="p"
     v-bind="$attrs"
     :definitions="toolDefinitions"
     :toolbar="toolbarDefinitions"
     v-model="model"
     class="s-editor"
+    @update:model-value="updateModelValue"
     v-on="usePlaintextPasting ? { paste: onPaste } : {}"
   >
     <template #upload>
@@ -24,7 +25,7 @@
               <q-input
                 class="bg-white font-12-400"
                 style="width: 352px"
-                v-model="value"
+                v-model="imgValue"
                 dense
                 outlined
                 type="textarea"
@@ -50,7 +51,7 @@
 </template>
 
 <script>
-  import { defineComponent, ref, watch, computed } from 'vue';
+  import { defineComponent, ref, watch, computed, onMounted } from 'vue';
   import {
     extend,
     QCard,
@@ -62,6 +63,7 @@
     QBtn,
     useQuasar,
   } from 'quasar';
+  import resizeImage from '../composables/resizable';
 
   export default defineComponent({
     name: 'SEditor',
@@ -133,11 +135,77 @@
     },
     setup(props, { emit }) {
       const model = ref(props.modelValue);
+      const editorRef = ref(null);
+
+      // delete handler element
+      function unwrapImg() {
+        const contentEl = editorRef.value.getContentEl();
+        const resizeHandler = contentEl.querySelectorAll('.img-resize-handler');
+
+        resizeHandler.forEach(div => {
+          const img = div.querySelector('img');
+          const parentParagraph = div.parentNode;
+          parentParagraph.replaceChild(img, div);
+        });
+
+        model.value = contentEl.innerHTML;
+      }
+
+      // create handler element & resize event
+      function wrapImgWithDiv(targetImg) {
+        const newDiv = document.createElement('div');
+        newDiv.classList.add('img-resize-handler');
+        newDiv.style.height = `${targetImg.height}px`;
+        newDiv.style.width = `${targetImg.width}px`;
+
+        targetImg.parentNode.append(newDiv);
+        newDiv.append(targetImg);
+        resizeImage();
+      }
+
+      // add click event in contents
+      function addImageClickListener() {
+        if (!editorRef.value) {
+          return;
+        }
+        const contentEl = editorRef.value.getContentEl();
+
+        if (!contentEl) {
+          return;
+        }
+
+        contentEl.addEventListener('click', event => {
+          const images = contentEl.querySelectorAll('img');
+          if (!images.length) {
+            return;
+          }
+
+          // when clicked, check image document in contents
+          if (Array.from(images).some(el => el.contains(event.target))) {
+            wrapImgWithDiv(event.target);
+            return;
+          }
+
+          unwrapImg();
+        });
+      }
+
+      function updateModelValue(val) {
+        model.value = val;
+        emit('update:modelValue', val);
+      }
+
+      onMounted(() => {
+        const contentEl = editorRef.value.getContentEl();
+        if (contentEl) {
+          addImageClickListener();
+        }
+      });
+
       const $q = useQuasar();
 
       // Toolbar Begin
-      // const isOpened = ref(false);
-      const value = ref('');
+      const imgValue = ref('');
 
       function setFontSize(fontSize) {
         function isRootNode(node) {
@@ -410,13 +478,13 @@
       };
 
       function onOkClick() {
-        value.value.split('\n').forEach((el, idx) => {
+        imgValue.value.split('\n').forEach((el, idx) => {
           if (el === '') return;
-          model.value += `<p><img style="max-width:100%;" src=${el} :alt="image${idx}"/></p>`;
+          model.value += `<p><img style="max-width:100%;" src=${el} :alt="image${idx}" /></p>`;
         });
 
-        // isOpened.value = false;
-        value.value = '';
+        addImageClickListener();
+        imgValue.value = '';
       }
       // Toolbar End
 
@@ -427,15 +495,6 @@
         },
       );
 
-      watch(
-        () => model.value,
-        () => {
-          emit('update:modelValue', model.value);
-        },
-      );
-
-      const editorRef = ref(null);
-
       // https://quasar.dev/vue-components/editor#plaintext-pasting 참조
       function onPaste(event) {
         if (event.target.nodeName === 'INPUT') return;
@@ -464,12 +523,12 @@
           return bar.map(group => group.map(item => (item === 'fontSizes' ? fontSizes : item)));
         }),
         toolDefinitions,
-        // isOpened,
         model,
-        value,
+        imgValue,
         onOkClick,
         onPaste,
         editorRef,
+        updateModelValue,
       };
     },
   });
@@ -495,5 +554,30 @@
         }
       }
     }
+    .q-editor__content {
+      .img-resize-handler {
+        position: relative;
+        background-color: transparent;
+        display: inline-block;
+        resize: both;
+        overflow: hidden;
+        &:after {
+          content: '';
+          position: absolute;
+          border: 1px solid;
+          width: 100%;
+          height: 100%;
+          top: 0;
+          left: 0;
+        }
+
+        > img {
+          display: block;
+          object-fit: contain;
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
   }
 </style>

package/src/composables/resizable.js

@@ -0,0 +1,58 @@
+import interact from 'interactjs';
+
+function resizeImage() {
+
+  interact('.img-resize-handler')
+    .origin('self')
+    .resizable({
+      // resize from all edges and corners
+      edges: { left: true, right: true, bottom: true, top: true },
+
+      listeners: {
+        move(event) {
+          const { target } = event
+          let x = (parseFloat(target.getAttribute('data-x')) || 0)
+          let y = (parseFloat(target.getAttribute('data-y')) || 0)
+
+          // update the element's style
+          target.style.width = `${event.rect.width}px`
+          target.style.height = `${event.rect.height}px`
+
+          // translate when resizing from top or left edges
+          x += event.deltaRect.left
+          y += event.deltaRect.top
+
+          target.style.transform = `translate(${x}px,${y}px)`
+
+          target.setAttribute('data-x', x)
+          target.setAttribute('data-y', y)
+          const imgEl = target.querySelector('img')
+          imgEl.width = target.style.width.replace('px', '')
+          imgEl.height = target.style.height.replace('px', '')
+        }
+      },
+      modifiers: [
+        // keep the edges inside the parent
+        interact.modifiers.restrictEdges({
+          outer: 'parent'
+        }),
+
+        // // minimum size
+        // interact.modifiers.restrictSize({
+        //   min: { width: 100, height: 50 }
+        // })
+        interact.modifiers.aspectRatio({
+          // make sure the width is always double the height
+          ratio: 'preserve',
+          // also restrict the size by nesting another modifier
+          modifiers: [
+            interact.modifiers.restrictSize({ max: 'parent' }),
+          ],
+        }),
+      ],
+
+      inertia: true
+    })
+}
+
+export default resizeImage

package/vitest.config.ts

@@ -16,6 +16,9 @@ export default defineConfig({
       'test/vitest/__tests__/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}',
     ],
   },
+  rollupoptions: {
+    context: 'window',
+  },
   plugins: [
     vue({
       template: { transformAssetUrls },