quasar-ui-danx 0.4.86 → 0.4.88

package/package.json

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

package/src/components/ActionTable/ActionTable.vue

@@ -5,7 +5,7 @@
   >
     <QTable
       ref="actionTable"
-      :selected="selectedRows"
+      :selected="selectedRows || []"
       :pagination="pagination"
       :columns="tableColumns"
       :loading="loadingList || loadingSummary"
@@ -29,7 +29,7 @@
           v-if="hasData"
           :label="label"
           :item-count="summary?.count || 0"
-          :selected-count="selectedRows.length"
+          :selected-count="selectedRows?.length"
           :sticky-colspan="summaryColSpan"
           :loading="loadingSummary"
           :summary="summary"
@@ -75,77 +75,78 @@ import TableSummaryRow from "./TableSummaryRow.vue";
 defineEmits(["update:selected-rows", "update:pagination"]);
 
 export interface Props {
-	name: string;
-	label: string;
-	color?: string;
-	selectedRows: ActionTargetItem[];
-	pagination: ListControlsPagination;
-	loadingList?: boolean;
-	loadingSummary?: boolean;
-	pagedItems?: any;
-	summary: any;
-	menuActions?: ResourceAction[];
-	columns: TableColumn[];
-	rowsPerPageOptions?: number[];
-	summaryColSpan?: number;
-	selection: "multiple" | "single";
+  name: string;
+  label: string;
+  color?: string;
+  selectedRows?: ActionTargetItem[];
+  pagination: ListControlsPagination;
+  loadingList?: boolean;
+  loadingSummary?: boolean;
+  pagedItems?: any;
+  summary: any;
+  menuActions?: ResourceAction[];
+  columns: TableColumn[];
+  rowsPerPageOptions?: number[];
+  summaryColSpan?: number;
+  selection?: "multiple" | "single";
 }
 
 const props = withDefaults(defineProps<Props>(), {
-	color: "",
-	pagedItems: null,
-	summary: null,
-	loadingSummary: false,
-	rowsPerPageOptions: () => [10, 25, 50, 100],
-	summaryColSpan: null,
-	selection: "multiple"
+  color: "",
+  pagedItems: null,
+  summary: null,
+  loadingSummary: false,
+  rowsPerPageOptions: () => [10, 25, 50, 100],
+  summaryColSpan: null,
+  selection: undefined
 });
 
 const actionTable = ref(null);
 registerStickyScrolling(actionTable);
 
 const tableColumns = computed<TableColumn[]>(() => {
-	const columns = [...props.columns].map((column: TableColumn) => ({
-		...column,
-		field: column.field || column.name
-	}));
+  const columns = [...props.columns].map((column: TableColumn) => ({
+    ...column,
+    field: column.field || column.name
+  }));
 
-	// Inject the Action Menu column if there are menu actions
-	if (props.menuActions?.length) {
-		const menuColumn = columns.find((column) => column.name === "menu");
-		const menuColumnOptions: TableColumn = {
-			name: "menu",
-			label: "",
-			required: true,
-			hideContent: true,
-			shrink: true,
-			actionMenu: props.menuActions
-		};
+  // Inject the Action Menu column if there are menu actions
+  if (props.menuActions?.length) {
+    const menuColumn = columns.find((column) => column.name === "menu");
+    const menuColumnOptions: TableColumn = {
+      name: "menu",
+      label: "",
+      required: true,
+      hideContent: true,
+      shrink: true,
+      actionMenu: props.menuActions
+    };
 
-		if (menuColumn) {
-			Object.assign(menuColumn, menuColumnOptions);
-		} else {
-			columns.unshift(menuColumnOptions);
-		}
-	}
+    if (menuColumn) {
+      Object.assign(menuColumn, menuColumnOptions);
+    } else {
+      columns.unshift(menuColumnOptions);
+    }
+  }
 
-	return columns;
+  return columns;
 });
 const hasData = computed(() => props.pagedItems?.data?.length);
 const COLUMN_SETTINGS_KEY = `column-settings-${props.name}`;
 const columnSettings = ref(getItem(COLUMN_SETTINGS_KEY) || {});
+
 function onUpdateColumnSettings() {
-	setItem(COLUMN_SETTINGS_KEY, columnSettings.value);
+  setItem(COLUMN_SETTINGS_KEY, columnSettings.value);
 }
 </script>
 
 <style scoped lang="scss">
 .dx-action-table {
-	&.dx-no-data {
-		:deep(.q-table__middle) {
-			flex-grow: 0;
-			flex-shrink: 1;
-		}
-	}
+  &.dx-no-data {
+    :deep(.q-table__middle) {
+      flex-grow: 0;
+      flex-shrink: 1;
+    }
+  }
 }
 </style>

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

@@ -125,6 +125,8 @@ onFilesChange(() => {
   if (uploadedFiles.value.some(file => file.progress < 1)) {
     emit("uploading");
   }
+
+  emit("update:model-value", uploadedFiles.value);
 });
 onComplete(() => {
   emit("update:model-value", uploadedFiles.value);

package/src/helpers/multiFileUpload.ts

@@ -15,34 +15,40 @@ export function useMultiFileUpload(options?: FileUploadOptions) {
 	const onFilesChangeCb: Ref<OnFilesChangeCallback | null> = ref(null);
 	const onFilesSelected = (e: any) => {
 		uploadedFiles.value = [...uploadedFiles.value, ...e.target.files];
+		triggerFilesChange();
+
 		new FileUpload(e.target.files, options)
-				.prepare()
-				.onProgress(({ file }) => {
-					file && updateFileInList(file);
-				})
-				.onComplete(({ file, uploadedFile }) => {
-					file && updateFileInList(file, uploadedFile);
-				})
-				.onError(({ file, error }) => {
-					console.error("Failed to upload", file, error);
-					FlashMessages.error(`Failed to upload ${file.name}: ${error}`);
-				})
-				.onAllComplete(() => {
-					onCompleteCb.value && onCompleteCb.value({
-						file: uploadedFiles.value[0],
-						uploadedFile: uploadedFiles.value[0]
-					});
-					onFilesChangeCb.value && onFilesChangeCb.value(uploadedFiles.value);
-				})
-				.upload();
+			.prepare()
+			.onProgress(({ file }) => {
+				file && updateFileInList(file);
+			})
+			.onComplete(({ file, uploadedFile }) => {
+				file && updateFileInList(file, uploadedFile);
+			})
+			.onError(({ file, error }) => {
+				console.error("Failed to upload", file, error);
+				FlashMessages.error(`Failed to upload ${file.name}: ${error}`);
+			})
+			.onAllComplete(() => {
+				onCompleteCb.value && onCompleteCb.value({
+					file: uploadedFiles.value[0],
+					uploadedFile: uploadedFiles.value[0]
+				});
+				triggerFilesChange();
+			})
+			.upload();
 	};
 
+	function triggerFilesChange() {
+		onFilesChangeCb.value && onFilesChangeCb.value(uploadedFiles.value);
+	}
+
 	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);
 		}
-		onFilesChangeCb.value && onFilesChangeCb.value(uploadedFiles.value);
+		triggerFilesChange();
 	}
 
 	const onDrop = (e: InputEvent) => {
@@ -59,7 +65,7 @@ export function useMultiFileUpload(options?: FileUploadOptions) {
 
 	const clearUploadedFiles = () => {
 		uploadedFiles.value = [];
-		onFilesChangeCb.value && onFilesChangeCb.value(uploadedFiles.value);
+		triggerFilesChange();
 		onCompleteCb.value && onCompleteCb.value({ file: null, uploadedFile: null });
 	};
 
@@ -68,7 +74,7 @@ export function useMultiFileUpload(options?: FileUploadOptions) {
 		if (index !== -1) {
 			uploadedFiles.value.splice(index, 1);
 		}
-		onFilesChangeCb.value && onFilesChangeCb.value(uploadedFiles.value);
+		triggerFilesChange();
 		onCompleteCb.value && onCompleteCb.value({ file, uploadedFile: file });
 	};