quasar-ui-danx 0.3.0 → 0.3.2

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

@@ -7,10 +7,11 @@
             :key="name"
             :name="name"
             class="p-0"
+            content-class="w-full"
         >
-          <div class="flex flex-nowrap items-center text-sm">
-            <div>{{ name }}</div>
-            <template v-if="!disable && !readonly">
+          <div class="flex flex-nowrap items-center text-sm w-full">
+            <div class="flex-grow">{{ name || "1" }}</div>
+            <div v-if="!disable && !readonly && canModifyVariations" class="flex flex-nowrap items-center mr-2">
               <a
                   @click="() => (variationToEdit = name) && (newVariationName = name)"
                   class="ml-1 p-1 hover:opacity-100 opacity-20 hover:bg-blue-200 rounded"
@@ -24,7 +25,7 @@
               >
                 <RemoveIcon class="w-3 text-red-900" />
               </a>
-            </template>
+            </div>
           </div>
         </QTab>
         <QTab
@@ -60,10 +61,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"
@@ -115,7 +116,8 @@ const props = defineProps({
   showName: Boolean,
   disable: Boolean,
   readonly: Boolean,
-  saving: Boolean
+  saving: Boolean,
+  canModifyVariations: Boolean
 });
 
 const FORM_FIELD_MAP = {
@@ -138,14 +140,19 @@ const mappedFields = props.form.fields.map((field) => ({
 }));
 
 const variationNames = computed(() => {
-  return [...new Set(props.values.map(v => v.variation))].sort();
+  const names = [...new Set(props.values.map(v => v.variation))].sort();
+  // Always guarantee that we show the default variation
+  if (names.length === 0) {
+    names.push("");
+  }
+  return names;
 });
 
-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);
+const canAddVariation = computed(() => props.canModifyVariations && !props.readonly && !props.disable && variationNames.value.length < props.form.variations);
 
 function getFieldResponse(name) {
   if (!props.values) return undefined;
@@ -158,26 +165,32 @@ 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);
   emit("update:values", newValues);
 }
 
+function createVariation(variation) {
+  return props.form.fields.map((field) => ({
+    variation,
+    name: field.name,
+    value: field.type === "BOOLEAN" ? false : null
+  }));
+}
+
 function onAddVariation() {
   if (props.saving) return;
+  let newValues = [...props.values];
 
+  if (newValues.length === 0) {
+    newValues = createVariation("");
+  }
   const previousName = variationNames.value[variationNames.value.length - 1];
-  const newName = incrementName(previousName === "default" ? "Variation" : previousName);
-
-  const newVariation = props.form.fields.map((field) => ({
-    variation: newName,
-    name: field.name,
-    value: field.type === "BOOLEAN" ? false : null
-  }));
-  const newValues = [...props.values, ...newVariation];
-  emit("update:values", newValues);
+  const newName = incrementName(!previousName ? "1" : previousName);
+  const newVariation = createVariation(newName);
+  emit("update:values", [...newValues, ...newVariation]);
   currentVariation.value = newName;
 }
 
@@ -196,11 +209,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,