quasar-ui-sellmate-ui-kit 3.2.20 → 3.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quasar-ui-sellmate-ui-kit",
-  "version": "3.2.20",
+  "version": "3.3.0",
   "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
         />
@@ -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,7 +391,11 @@
         options: ['size1', 'size2', 'size3', 'size4', 'size5', 'size6'],
       };
 
-      const toolbarDefinitions = props.toolbar.map(group => group.map(item => (item === 'fontSizes' ? fontSizes : item)));
+      const toolbarDefinitions = props.useImgUpload
+        ? [...props.toolbar, ['upload']]
+        : [...props.toolbar].map(group =>
+            group.map(item => (item === 'fontSizes' ? fontSizes : item)),
+          );
 
       function onOkClick() {
         value.value.split('\n').forEach((el, idx) => {
@@ -456,7 +451,6 @@
         isOpened,
         model,
         value,
-        placeholder,
         uploadImage,
         onOkClick,
         onPaste,

package/src/components/STable.vue

@@ -267,15 +267,21 @@
               white-space: nowrap;
 
               .sort-icon {
+                color: $Grey_Lighten-1;
+                font-size: 16px;
+                opacity: 1;
                 &.desc-sort {
                   transform: rotate(180deg);
                 }
                 transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
               }
 
+              // NOTE: 해당 sortable은 퀘이사에서 기본적으로 사용하는 기능
+              // 차후 slot 방식으로 사용할경우 해당 방식으로 사용 X
+              // slot 방식으로 사용할 경우 .sort-icon으로만 사용 예정
               &.sortable {
-                display: none;
                 > .q-table__sort-icon {
+                  //display: none;
                   color: $Grey_Lighten-1;
                   font-size: 16px;
                   opacity: 1;