quasar-ui-danx 0.3.0 → 0.3.1

package/package.json

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

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

@@ -21,7 +21,7 @@
       <a
           v-if="uploadedFiles.length > 0"
           class="ml-3 text-red-900"
-          @click="onClear"
+          @click="clearUploadedFiles"
       >Clear</a>
       <input
           ref="file"
@@ -81,7 +81,7 @@ const props = defineProps({
   readonly: Boolean
 });
 
-const { onComplete, onDrop, onFilesSelected, uploadedFiles, onClear, onRemove } = useMultiFileUpload();
+const { onComplete, onDrop, onFilesSelected, uploadedFiles, clearUploadedFiles, onRemove } = useMultiFileUpload();
 onMounted(() => {
   if (props.modelValue) {
     uploadedFiles.value = props.modelValue;

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

@@ -234,7 +234,7 @@ function resolveSelectionLabel(option) {
  * @returns {string|*|string}
  */
 function resolveValue(option) {
-  if (typeof option === "string") {
+  if (!option || typeof option === "string") {
     return option;
   }
   let value = option.value;

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

@@ -21,7 +21,7 @@
       <a
           v-if="uploadedFile"
           class="ml-3 text-red-900"
-          @click="onClear"
+          @click="clearUploadedFile"
       >Clear</a>
       <input
           ref="file"
@@ -67,7 +67,7 @@ const props = defineProps({
   disable: Boolean,
   readonly: Boolean
 });
-const { onComplete, onDrop, onFileSelected, uploadedFile, onClear } = useSingleFileUpload();
+const { onComplete, onDrop, onFileSelected, uploadedFile, clearUploadedFile } = useSingleFileUpload();
 onComplete(() => emit("update:model-value", uploadedFile.value));
 
 onMounted(() => {

package/src/components/ActionTable/Form/RenderedForm.vue

@@ -9,7 +9,7 @@
             class="p-0"
         >
           <div class="flex flex-nowrap items-center text-sm">
-            <div>{{ name }}</div>
+            <div>{{ name || "(Default)" }}</div>
             <template v-if="!disable && !readonly">
               <a
                   @click="() => (variationToEdit = name) && (newVariationName = name)"
@@ -60,10 +60,10 @@
       />
     </div>
     <ConfirmDialog
-        v-if="variationToEdit"
+        v-if="variationToEdit !== false"
         title="Change variation name"
         @confirm="onChangeVariationName"
-        @close="variationToEdit = null"
+        @close="variationToEdit = false"
     >
       <TextField
           v-model="newVariationName"
@@ -141,9 +141,9 @@ const variationNames = computed(() => {
   return [...new Set(props.values.map(v => v.variation))].sort();
 });
 
-const currentVariation = ref(variationNames.value[0] || "default");
+const currentVariation = ref(variationNames.value[0] || "");
 const newVariationName = ref("");
-const variationToEdit = ref("");
+const variationToEdit = ref(false);
 const variationToDelete = ref("");
 const canAddVariation = computed(() => variationNames.value.length < props.form.variations && !props.readonly && !props.disable);
 
@@ -158,7 +158,7 @@ function onInput(name, value) {
   const fieldResponse = getFieldResponse(name);
   const newFieldResponse = {
     name,
-    variation: currentVariation.value,
+    variation: currentVariation.value || "",
     value
   };
   const newValues = replace(props.values, fieldResponse, newFieldResponse, true);
@@ -169,7 +169,7 @@ function onAddVariation() {
   if (props.saving) return;
 
   const previousName = variationNames.value[variationNames.value.length - 1];
-  const newName = incrementName(previousName === "default" ? "Variation" : previousName);
+  const newName = incrementName(!previousName ? "Variation 1" : previousName);
 
   const newVariation = props.form.fields.map((field) => ({
     variation: newName,
@@ -196,11 +196,13 @@ function onChangeVariationName() {
   emit("update:values", newValues);
 
   currentVariation.value = newVariationName.value;
-  variationToEdit.value = "";
+  variationToEdit.value = false;
   newVariationName.value = "";
 }
 
 function onRemoveVariation(name) {
+  if (!name) return;
+
   const newValues = props.values.filter((v) => v.variation !== name);
   emit("update:values", newValues);
 

package/src/components/Utility/Tools/RenderVnode.vue

@@ -1,10 +1,12 @@
 <script>
+import { isRef, isVNode } from "vue";
+
 const RenderVnode = (props) => {
-  if (props.vnode.__v_isVNode) {
+  if (isVNode(props.vnode)) {
     return props.vnode;
   }
 
-  if (props.vnode.__v_isRef) {
+  if (isRef(props.vnode)) {
     return props.vnode.value;
   }
 

package/src/config/index.ts

@@ -1,13 +1,8 @@
 import { QNotifyCreateOptions } from "quasar";
-
-export interface DanxFileUploadOptions {
-    directory?: string;
-    presignedUploadUrl?: Function | null;
-    uploadCompletedUrl?: Function | null;
-}
+import { FileUploadOptions } from "../helpers";
 
 export interface DanxOptions {
-    fileUpload: DanxFileUploadOptions;
+    fileUpload: FileUploadOptions;
     flashMessages: {
         default: QNotifyCreateOptions;
         success: QNotifyCreateOptions;

package/src/helpers/FileUpload.ts

@@ -5,8 +5,8 @@ import { FlashMessages } from "./FlashMessages";
 
 export type FileUploadOptions = {
     directory?: string,
-    presignedUploadUrl?: (...params: any) => "",
-    uploadCompletedUrl?: (...params: any) => "",
+    presignedUploadUrl?: Function | null;
+    uploadCompletedUrl?: Function | null;
 };
 
 export type UploadedFile = {
@@ -16,23 +16,21 @@ export type UploadedFile = {
     type: string,
     progress: number,
     location: string,
-    blobUrl: string
+    blobUrl: string,
+    url: string,
 }
 
 export class FileUpload {
     files: UploadedFile[] = [];
-    fileUploads = [];
-    onErrorCb = null;
-    onProgressCb = null;
-    onCompleteCb = null;
-    onAllCompleteCb = null;
-    options: FileUploadOptions = {};
-
-    constructor(files: UploadedFile[] | UploadedFile, options: FileUploadOptions = {}) {
-        if (!Array.isArray(files) && !(files instanceof FileList)) {
-            files = [files];
-        }
-        this.files = files;
+    fileUploads: UploadedFile[] = [];
+    onErrorCb: Function | null = null;
+    onProgressCb: Function | null = null;
+    onCompleteCb: Function | null = null;
+    onAllCompleteCb: Function | null = null;
+    options: FileUploadOptions | null = {};
+
+    constructor(files: UploadedFile[] | UploadedFile, options: FileUploadOptions | null = {}) {
+        this.files = !Array.isArray(files) && !(files instanceof FileList) ? [files] : files;
         this.fileUploads = [];
         this.onErrorCb = null;
         this.onProgressCb = null;
@@ -81,7 +79,7 @@ export class FileUpload {
     /**
      * Callback for when all files have been uploaded
      */
-    onAllComplete(cb) {
+    onAllComplete(cb: Function) {
         this.onAllCompleteCb = cb;
         return this;
     }
@@ -91,7 +89,7 @@ export class FileUpload {
      * @param cb
      * @returns {FileUpload}
      */
-    onComplete(cb) {
+    onComplete(cb: Function) {
         this.onCompleteCb = cb;
         return this;
     }
@@ -101,7 +99,7 @@ export class FileUpload {
      * @param cb
      * @returns {FileUpload}
      */
-    onProgress(cb) {
+    onProgress(cb: Function) {
         this.onProgressCb = cb;
         return this;
     }
@@ -111,7 +109,7 @@ export class FileUpload {
      * @param cb
      * @returns {FileUpload}
      */
-    onError(cb) {
+    onError(cb: Function) {
         this.onErrorCb = cb;
         return this;
     }
@@ -122,7 +120,7 @@ export class FileUpload {
      * @param file
      * @param error
      */
-    errorHandler(e, file, error = null) {
+    errorHandler(e: InputEvent, file: UploadedFile, error = null) {
         if (this.onErrorCb) {
             this.onErrorCb({ e, file, error });
         }

package/src/helpers/multiFileUpload.ts

@@ -1,17 +1,17 @@
-import { ref } from "vue";
-import { FileUpload, FileUploadOptions } from "./FileUpload";
+import { Ref, ref } from "vue";
+import { FileUpload, FileUploadOptions, UploadedFile } from "./FileUpload";
 
 export function useMultiFileUpload(options: FileUploadOptions) {
-    const uploadedFiles = ref([]);
-    const onCompleteCb = ref(null);
-    const onFilesChangeCb = ref(null);
-    const onFilesSelected = (e) => {
+    const uploadedFiles: Ref<UploadedFile[]> = ref([]);
+    const onCompleteCb: Ref<Function | null> = ref(null);
+    const onFilesChangeCb: Ref<Function | null> = ref(null);
+    const onFilesSelected = (e: any) => {
         uploadedFiles.value = [...uploadedFiles.value, ...e.target.files];
         new FileUpload(e.target.files, options)
-            .onProgress(({ file }) => {
+            .onProgress(({ file }: { file: UploadedFile }) => {
                 updateFileInList(file);
             })
-            .onComplete(({ file, uploadedFile }) => {
+            .onComplete(({ file, uploadedFile }: { file: UploadedFile, uploadedFile: UploadedFile }) => {
                 updateFileInList(file, uploadedFile);
             })
             .onAllComplete(() => {
@@ -21,7 +21,7 @@ export function useMultiFileUpload(options: FileUploadOptions) {
             .upload();
     };
 
-    function updateFileInList(file, replace = null) {
+    function updateFileInList(file: UploadedFile, replace: UploadedFile | null = null) {
         const index = uploadedFiles.value.findIndex(f => f.id === file.id);
         if (index !== -1) {
             uploadedFiles.value.splice(index, 1, replace || file);
@@ -29,25 +29,25 @@ export function useMultiFileUpload(options: FileUploadOptions) {
         onFilesChangeCb.value && onFilesChangeCb.value(uploadedFiles.value);
     }
 
-    const onDrop = (e) => {
-        onFilesSelected({ target: { files: e.dataTransfer.files } });
+    const onDrop = (e: InputEvent) => {
+        onFilesSelected({ target: { files: e.dataTransfer?.files } });
     };
 
-    const onFilesChange = (cb) => {
+    const onFilesChange = (cb: Function) => {
         onFilesChangeCb.value = cb;
     };
 
-    const onComplete = (cb) => {
+    const onComplete = (cb: Function) => {
         onCompleteCb.value = cb;
     };
 
-    const onClear = () => {
+    const clearUploadedFiles = () => {
         uploadedFiles.value = [];
         onFilesChangeCb.value && onFilesChangeCb.value(uploadedFiles.value);
         onCompleteCb.value && onCompleteCb.value();
     };
 
-    const onRemove = (file) => {
+    const onRemove = (file: UploadedFile) => {
         const index = uploadedFiles.value.findIndex(f => f.id === file.id);
         if (index !== -1) {
             uploadedFiles.value.splice(index, 1);
@@ -57,7 +57,7 @@ export function useMultiFileUpload(options: FileUploadOptions) {
     };
 
     return {
-        onClear,
+        clearUploadedFiles,
         onRemove,
         onComplete,
         onFilesChange,

package/src/helpers/singleFileUpload.ts

@@ -1,19 +1,24 @@
-import { computed, ref } from "vue";
-import { FileUpload, FileUploadOptions } from "./FileUpload";
+import { computed, Ref, ref } from "vue";
+import { FileUpload, FileUploadOptions, UploadedFile } from "./FileUpload";
 
-export function useSingleFileUpload(options: FileUploadOptions = null) {
-    const uploadedFile = ref(null);
-    const onCompleteCb = ref(null);
-    const onFileChangeCb = ref(null);
+interface FileUploadCallbackParams {
+    file: UploadedFile;
+    uploadedFile: UploadedFile;
+}
+
+export function useSingleFileUpload(options: FileUploadOptions | null = null) {
+    const uploadedFile: Ref<UploadedFile | null> = ref(null);
+    const onCompleteCb: Ref<Function | null> = ref(null);
+    const onFileChangeCb: Ref<Function | null> = ref(null);
 
-    const onFileSelected = (e) => {
+    const onFileSelected = (e: any) => {
         uploadedFile.value = null;
-        new FileUpload(e.target.files[0], options)
-            .onProgress(({ file }) => {
+        new FileUpload(e.target?.files[0], options)
+            .onProgress(({ file }: FileUploadCallbackParams) => {
                 uploadedFile.value = file;
                 onFileChangeCb.value && onFileChangeCb.value(uploadedFile.value);
             })
-            .onComplete(({ uploadedFile: completedFile }) => {
+            .onComplete(({ uploadedFile: completedFile }: FileUploadCallbackParams) => {
                 uploadedFile.value = completedFile;
                 onCompleteCb.value && onCompleteCb.value(uploadedFile.value);
                 onFileChangeCb.value && onFileChangeCb.value(uploadedFile.value);
@@ -21,30 +26,31 @@ export function useSingleFileUpload(options: FileUploadOptions = null) {
             .upload();
     };
 
-    const onDrop = (e) => {
-        onFileSelected({ target: { files: e.dataTransfer.files } });
+    const onDrop = (e: InputEvent) => {
+        onFileSelected({ target: { files: e.dataTransfer?.files } });
     };
 
     const isFileUploaded = computed(() => {
         return uploadedFile.value && uploadedFile.value.url;
     });
 
-    const onFileChange = (cb) => {
+    const onFileChange = (cb: Function) => {
         onFileChangeCb.value = cb;
     };
 
-    const onComplete = (cb) => {
+    const onComplete = (cb: Function) => {
         onCompleteCb.value = cb;
     };
 
-    const onClear = () => {
+    const clearUploadedFile = () => {
         uploadedFile.value = null;
         onFileChangeCb.value && onFileChangeCb.value(uploadedFile.value);
+        onCompleteCb.value && onCompleteCb.value(uploadedFile.value);
     };
 
     return {
         isFileUploaded,
-        onClear,
+        clearUploadedFile,
         onComplete,
         onFileChange,
         onDrop,