quasar-ui-sellmate-ui-kit 3.3.0 → 3.3.2

package/package.json

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

package/src/components/SEditor.vue

@@ -14,46 +14,54 @@
     v-model="model"
     class="s-editor"
     v-on="usePlaintextPasting ? { paste: onPaste } : {}"
-  />
-  <q-dialog v-model="isOpened" @keyup.esc="isOpened = false">
-    <q-card class="q-pa-sm bg-Grey_Lighten-5">
-      <q-card-section class="q-pa-none">
-        <q-input
-          class="bg-white"
-          style="width: 348px; font-size: 12px"
-          v-model="value"
-          dense
-          outlined
-          :placeholder="imgInputPlaceholder"
-          autogrow
-          autofocus
-        />
-        <div class="row reverse q-mt-sm">
-          <s-button
-            outline
-            label="삽입"
-            @click="onOkClick"
-            color="Blue_B_Default"
-            class="bg-white"
-          />
-        </div>
-      </q-card-section>
-    </q-card>
-  </q-dialog>
+  >
+    <template #upload>
+      <q-btn flat dense :ripple="false" size="sm">
+        <q-icon name="image" />
+        <q-menu>
+          <q-card class="q-pa-sm bg-Grey_Lighten-5">
+            <q-card-section class="q-pa-none">
+              <q-input
+                class="bg-white font-12-400"
+                style="width: 348px"
+                v-model="value"
+                dense
+                outlined
+                type="textarea"
+                :placeholder="imgInputPlaceholder"
+                autofocus
+              />
+              <div class="row reverse q-mt-sm">
+                <s-button
+                  outline
+                  :label="imgUploadBtnLabel"
+                  @click="onOkClick"
+                  v-close-popup
+                  color="Blue_B_Default"
+                  class="bg-white"
+                />
+              </div>
+            </q-card-section>
+          </q-card>
+        </q-menu>
+      </q-btn>
+    </template>
+  </q-editor>
 </template>
 
 <script>
-  import { defineComponent, ref, watch } from 'vue';
-  import { extend, QCard, QCardSection, QDialog, QEditor, QInput, useQuasar } from 'quasar';
+  import { defineComponent, ref, watch, computed } from 'vue';
+  import { extend, QCard, QCardSection, QMenu, QEditor, QInput, QBtn, useQuasar } from 'quasar';
 
   export default defineComponent({
     name: 'SEditor',
     components: {
       QEditor,
-      QDialog,
+      QMenu,
       QCard,
       QCardSection,
       QInput,
+      QBtn,
     },
     props: {
       definitions: Object,
@@ -98,6 +106,10 @@
         type: Boolean,
         default: false,
       },
+      imgUploadBtnLabel: {
+        type: String,
+        default: '삽입',
+      },
       imgInputPlaceholder: {
         type: String,
         default:
@@ -113,13 +125,9 @@
       const $q = useQuasar();
 
       // Toolbar Begin
-      const isOpened = ref(false);
+      // const isOpened = ref(false);
       const value = ref('');
 
-      function uploadImage() {
-        isOpened.value = true;
-      }
-
       function setFontSize(fontSize) {
         function isRootNode(node) {
           return (
@@ -333,11 +341,10 @@
       );
 
       const toolDefinitions = extend(true, {}, props.definitions || {}, {
-        upload: {
-          tip: 'Upload Image',
-          icon: 'image',
-          handler: uploadImage,
-        },
+        // upload: {
+        //   icon: 'image',
+        //   handler: () => isOpened.value = true,
+        // },
         size1: {
           tip: sizeDefinitions.size1.label,
           htmlTip: sizeDefinitions.adjustLabelSize
@@ -391,18 +398,13 @@
         options: ['size1', 'size2', 'size3', 'size4', 'size5', 'size6'],
       };
 
-      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) => {
           if (el === '') return;
           model.value += `<p><img style="max-width:100%;" src=${el} :alt="image${idx}"/></p>`;
         });
-        isOpened.value = false;
+
+        // isOpened.value = false;
         value.value = '';
       }
       // Toolbar End
@@ -446,12 +448,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,
+        // isOpened,
         model,
         value,
-        uploadImage,
         onOkClick,
         onPaste,
         editorRef,