quasar-ui-sellmate-ui-kit 3.2.21 → 3.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quasar-ui-sellmate-ui-kit",
-  "version": "3.2.21",
+  "version": "3.3.1",
   "author": "Sellmate Dev Team <dev@sellmate.co.kr>",
   "description": "Sellmate UI Kit",
   "license": "MIT",

package/src/components/SEditor.vue

@@ -24,7 +24,7 @@
           v-model="value"
           dense
           outlined
-          :placeholder="placeholder"
+          :placeholder="imgInputPlaceholder"
           autogrow
           autofocus
         />
@@ -43,7 +43,7 @@
 </template>
 
 <script>
-  import { defineComponent, ref, watch } from 'vue';
+  import { defineComponent, ref, watch, computed } from 'vue';
   import { extend, QCard, QCardSection, QDialog, QEditor, QInput, useQuasar } from 'quasar';
 
   export default defineComponent({
@@ -60,17 +60,15 @@
       toolbar: {
         type: Array,
         validator: v => v.length === 0 || v.every(group => group.length),
-        default() {
-          return [
-            ['left', 'center', 'right', 'justify'],
-            ['bold', 'italic', 'underline', 'strike'],
-            ['link', 'hr'],
-            ['fontSizes', 'removeFormat'],
-            ['unordered', 'ordered', 'outdent', 'indent'],
-            ['undo', 'redo'],
-            ['viewsource'],
-          ];
-        },
+        default: () => [
+          ['left', 'center', 'right', 'justify'],
+          ['bold', 'italic', 'underline', 'strike'],
+          ['link', 'hr'],
+          ['fontSizes', 'removeFormat'],
+          ['unordered', 'ordered', 'outdent', 'indent'],
+          ['undo', 'redo'],
+          ['viewsource'],
+        ],
       },
       defaultFontSize: {
         type: Number,
@@ -96,19 +94,15 @@
         type: String,
         required: true,
       },
-      useImageUpload: {
+      useImgUpload: {
         type: Boolean,
-        default: true,
+        default: false,
       },
       imgInputPlaceholder: {
         type: String,
         default:
           '이미지 파일 경로를 엔터키로 구분하여 여러개 입력할 수 있습니다.\n예시)\nhttps://www.sellmate.co.kr/img/new/logo01.png\nhttps://www.sellmate.co.kr/img/new/logo02.png\nhttps://www.sellmate.co.kr/img/new/logo03.png',
       },
-      useListOpts: {
-        type: Boolean,
-        default: false,
-      },
       usePlaintextPasting: {
         type: Boolean,
         default: false,
@@ -119,7 +113,6 @@
       const $q = useQuasar();
 
       // Toolbar Begin
-      const placeholder = ref(props.imgInputPlaceholder);
       const isOpened = ref(false);
       const value = ref('');
 
@@ -130,9 +123,9 @@
       function setFontSize(fontSize) {
         function isRootNode(node) {
           return (
-            node.nodeType !== Node.TEXT_NODE
-            && (node.className.indexOf('q-editor__content') >= 0
-              || node.hasAttribute('contenteditable'))
+            node.nodeType !== Node.TEXT_NODE &&
+            (node.className.indexOf('q-editor__content') >= 0 ||
+              node.hasAttribute('contenteditable'))
           );
         }
 
@@ -163,9 +156,9 @@
         function getNonTextNode(top, node) {
           const parent = node.parentNode;
           if (
-            top !== parent
-            && Array.from(parent.childNodes).length === 1
-            && parent.childNodes[0] === node
+            top !== parent &&
+            Array.from(parent.childNodes).length === 1 &&
+            parent.childNodes[0] === node
           ) {
             return parent;
           }
@@ -246,9 +239,8 @@
             const wrapperNode = wrapAndReplaceRange(range);
             wrapperNode.style.fontSize = fontSizeStyle;
           } else {
-            const targetNode = topNode.nodeType === Node.TEXT_NODE
-              ? wrapAndReplaceTextNodeRange(topNode)
-              : topNode;
+            const targetNode =
+              topNode.nodeType === Node.TEXT_NODE ? wrapAndReplaceTextNodeRange(topNode) : topNode;
             targetNode.style.fontSize = fontSizeStyle;
             selection.extend(targetNode.childNodes[0], targetNode.textContent.length);
           }
@@ -273,9 +265,8 @@
             // selection.extend(end, range.endOffset);
             applyStyleForward(fontSizeStyle, topNode, startWrapper);
           } else {
-            const firstNode = start.nodeType === Node.TEXT_NODE
-              ? getNonTextNode(topNode, start)
-              : start;
+            const firstNode =
+              start.nodeType === Node.TEXT_NODE ? getNonTextNode(topNode, start) : start;
             firstNode.style.fontSize = fontSizeStyle;
             if (start !== startNode) applyStyleForward(fontSizeStyle, topNode, firstNode);
           }
@@ -400,8 +391,6 @@
         options: ['size1', 'size2', 'size3', 'size4', 'size5', 'size6'],
       };
 
-      const toolbarDefinitions = props.toolbar.map(group => group.map(item => (item === 'fontSizes' ? fontSizes : item)));
-
       function onOkClick() {
         value.value.split('\n').forEach((el, idx) => {
           if (el === '') return;
@@ -451,12 +440,14 @@
       }
 
       return {
-        toolbarDefinitions,
+        toolbarDefinitions: computed(() => {
+          const bar = props.useImgUpload ? [...props.toolbar, ['upload']] : props.toolbar;
+          return bar.map(group => group.map(item => (item === 'fontSizes' ? fontSizes : item)));
+        }),
         toolDefinitions,
         isOpened,
         model,
         value,
-        placeholder,
         uploadImage,
         onOkClick,
         onPaste,