quasar-ui-danx 0.3.10 → 0.3.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quasar-ui-danx",
-  "version": "0.3.10",
+  "version": "0.3.11",
   "author": "Dan <dan@flytedesk.com>",
   "description": "DanX Vue / Quasar component library",
   "license": "MIT",

package/src/components/ActionTable/Form/Fields/WysiwygField.vue

@@ -1,31 +1,31 @@
 <template>
   <div>
     <FieldLabel
-        v-if="!noLabel"
-        :field="field"
-        :show-name="showName"
-        class="text-sm font-semibold text-gray-700 block mb-2"
+      v-if="!noLabel"
+      :field="field"
+      :show-name="showName"
+      class="text-sm font-semibold text-gray-700 block mb-2"
     />
     <template v-if="readonly">
       <div
-          class="border border-gray-300 rounded-md p-2 bg-gray-100"
-          v-html="modelValue"
+        class="border border-gray-300 rounded-md p-2 bg-gray-100"
+        v-html="modelValue"
       />
     </template>
     <TinyMceEditor
-        v-else
-        class="mt-2"
-        :api-key="apiKey"
-        :disabled="disable"
-        :model-value="modelValue"
-        @update:model-value="$emit('update:model-value', $event)"
+      v-else
+      class="mt-2"
+      :api-key="danxOptions.tinyMceApiKey"
+      :disabled="disable"
+      :model-value="modelValue"
+      @update:model-value="$emit('update:model-value', $event)"
     />
   </div>
 </template>
 
 <script setup>
 import { default as TinyMceEditor } from "@tinymce/tinymce-vue";
-import { apiKey } from "../../../../vendor/tinymce-config";
+import { danxOptions } from "../../../../config";
 import FieldLabel from "./FieldLabel";
 
 defineEmits(["update:model-value"]);

package/src/config/index.ts

@@ -1,7 +1,9 @@
 import { QNotifyCreateOptions } from "quasar";
+import { Ref, shallowRef } from "vue";
 import { FileUploadOptions } from "../helpers";
 
 export interface DanxOptions {
+    tinyMceApiKey: string;
     fileUpload: FileUploadOptions;
     flashMessages: {
         default: QNotifyCreateOptions;
@@ -11,7 +13,8 @@ export interface DanxOptions {
     };
 }
 
-export let danxOptions: DanxOptions = {
+export const danxOptions: Ref<DanxOptions> = shallowRef({
+    tinyMceApiKey: "set-api-key-in-danx-options",
     fileUpload: {
         directory: "file-upload",
         presignedUploadUrl: null,
@@ -23,11 +26,11 @@ export let danxOptions: DanxOptions = {
         warning: {},
         error: {}
     }
-};
+});
 
 export function configure(options: DanxOptions) {
-    danxOptions = {
-        ...danxOptions,
+    danxOptions.value = {
+        ...danxOptions.value,
         ...options
     };
 }

package/src/helpers/FileUpload.ts

@@ -38,7 +38,7 @@ export class FileUpload {
         this.onAllCompleteCb = null;
 
         this.options = {
-            ...danxOptions.fileUpload,
+            ...danxOptions.value.fileUpload,
             ...options
         };
 

package/src/helpers/FlashMessages.ts

@@ -37,7 +37,7 @@ export class FlashMessages {
                 classes: "bg-gray-500 text-white",
                 position: "top",
                 closeBtn: "X",
-                ...danxOptions.flashMessages.default,
+                ...danxOptions.value.flashMessages.default,
                 ...options
             });
         }
@@ -48,7 +48,7 @@ export class FlashMessages {
             classes: "bg-green-300 !text-green-900",
             icon: "check",
             ...options,
-            ...danxOptions.flashMessages.success
+            ...danxOptions.value.flashMessages.success
         });
     }
 
@@ -57,7 +57,7 @@ export class FlashMessages {
             classes: "bg-red-300 !text-red-900",
             icon: "error",
             ...options,
-            ...danxOptions.flashMessages.error
+            ...danxOptions.value.flashMessages.error
         });
     }
 
@@ -66,12 +66,12 @@ export class FlashMessages {
             classes: "bg-yellow-300 !text-yellow-900",
             icon: "warning",
             ...options,
-            ...danxOptions.flashMessages.warning
+            ...danxOptions.value.flashMessages.warning
         });
     }
 
     static combine(type: string, messages: string[] | { message: string, Message: string }[], options = {}) {
-        // @ts-ignore
+        // @ts-expect-error - type is a string
         const messageType = FlashMessages[type];
 
         if (typeof messageType !== "function") {

package/src/vendor/tinymce-config.ts

@@ -1 +0,0 @@
-export const apiKey = "YOUR_API_KEY";