quasar-ui-danx 0.3.47 → 0.3.49

package/package.json

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

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

@@ -11,7 +11,7 @@
       class="text-sm font-semibold"
     />
     <div
-      v-if="!disable && !readonly"
+      v-if="!disable && !readonly && !hideControls"
       class="text-sm my-2"
     >
       <a
@@ -23,20 +23,21 @@
         class="ml-3 text-red-900"
         @click="clearUploadedFiles"
       >Clear</a>
-      <input
-        ref="file"
-        class="hidden"
-        type="file"
-        multiple
-        @change="onFilesSelected"
-      >
     </div>
 
+    <input
+      ref="file"
+      class="hidden"
+      type="file"
+      multiple
+      @change="onFilesSelected"
+    >
+
     <div class="max-w-[50em] flex items-stretch justify-start">
       <FilePreview
         v-for="file in uploadedFiles"
         :key="'file-upload-' + file.id"
-        class="w-32 m-2 cursor-pointer bg-gray-200"
+        class="w-32 h-32 m-2 cursor-pointer bg-gray-200"
         :class="{'border border-dashed border-blue-600': !uploadedFiles.length}"
         :image="file"
         :related-files="uploadedFiles"
@@ -46,7 +47,7 @@
       />
       <FilePreview
         v-if="!disable && !readonly"
-        class="w-32 m-2 cursor-pointer border border-dashed border-blue-600"
+        class="w-32 h-32 m-2 cursor-pointer border border-dashed border-blue-600"
         disabled
         @click="$refs.file.click()"
       />
@@ -61,31 +62,33 @@
 </template>
 
 <script setup>
-import { onMounted } from "vue";
+import { onMounted, watch } from "vue";
 import { useMultiFileUpload } from "../../../../helpers";
 import { FilePreview } from "../../../Utility";
 import FieldLabel from "./FieldLabel";
 
 const emit = defineEmits(["update:model-value"]);
 const props = defineProps({
-  modelValue: {
-    type: [Object, String],
-    default: null
-  },
-  field: {
-    type: Object,
-    required: true
-  },
-  showName: Boolean,
-  disable: Boolean,
-  readonly: Boolean
+	modelValue: {
+		type: [Object, String],
+		default: null
+	},
+	field: {
+		type: Object,
+		required: true
+	},
+	showName: Boolean,
+	disable: Boolean,
+	readonly: Boolean,
+	hideControls: Boolean
 });
 
 const { onComplete, onDrop, onFilesSelected, uploadedFiles, clearUploadedFiles, onRemove } = useMultiFileUpload();
 onMounted(() => {
-  if (props.modelValue) {
-    uploadedFiles.value = props.modelValue;
-  }
+	if (props.modelValue) {
+		uploadedFiles.value = props.modelValue;
+	}
 });
+watch(() => props.modelValue, () => uploadedFiles.value = props.modelValue);
 onComplete(() => emit("update:model-value", uploadedFiles.value));
 </script>

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

@@ -24,10 +24,12 @@
       @update:model-value="onUpdate"
     >
       <template #append>
-        <DropDownIcon
-          class="w-4 transition"
-          :class="isShowing ? 'rotate-180' : ''"
-        />
+        <slot name="append">
+          <DropDownIcon
+            class="w-4 transition"
+            :class="isShowing ? 'rotate-180' : ''"
+          />
+        </slot>
       </template>
       <template #selected>
         <div
@@ -71,40 +73,40 @@ import { computed, isRef, nextTick, ref } from "vue";
 
 const emit = defineEmits(["update:model-value", "search", "update"]);
 const props = defineProps({
-  ...QSelect.props,
-  modelValue: {
-    type: [Array, String, Number, Object],
-    default: undefined
-  },
-  placeholder: {
-    type: String,
-    default: ""
-  },
-  selectionLabel: {
-    type: String,
-    default: null
-  },
-  chipLimit: {
-    type: Number,
-    default: 3
-  },
-  inputClass: {
-    type: String,
-    default: ""
-  },
-  selectionClass: {
-    type: String,
-    default: ""
-  },
-  options: {
-    type: Array,
-    default: () => []
-  },
-  filterable: Boolean,
-  filterFn: {
-    type: Function,
-    default: null
-  }
+	...QSelect.props,
+	modelValue: {
+		type: [Array, String, Number, Object],
+		default: undefined
+	},
+	placeholder: {
+		type: String,
+		default: ""
+	},
+	selectionLabel: {
+		type: String,
+		default: null
+	},
+	chipLimit: {
+		type: Number,
+		default: 3
+	},
+	inputClass: {
+		type: String,
+		default: ""
+	},
+	selectionClass: {
+		type: String,
+		default: ""
+	},
+	options: {
+		type: Array,
+		default: () => []
+	},
+	filterable: Boolean,
+	filterFn: {
+		type: Function,
+		default: null
+	}
 });
 
 const selectField = ref(null);
@@ -119,27 +121,27 @@ const isShowing = ref(false);
  * @type {ComputedRef<{selectionLabel: string, label: string, value: string|*}[]>}
  */
 const computedOptions = computed(() => {
-  let options = props.options;
-  if (props.placeholder && !props.multiple && !props.filterable) {
-    options = [{ label: props.placeholder, value: null }, ...props.options];
-  }
-  options = options.map((o) => {
-    let opt = isRef(o) ? o.value : o;
-    return {
-      label: resolveLabel(opt),
-      value: resolveValue(opt),
-      selectionLabel: resolveSelectionLabel(opt)
-    };
-  });
-  return options;
+	let options = props.options;
+	if (props.placeholder && !props.multiple && !props.filterable) {
+		options = [{ label: props.placeholder, value: null }, ...props.options];
+	}
+	options = options.map((o) => {
+		let opt = isRef(o) ? o.value : o;
+		return {
+			label: resolveLabel(opt),
+			value: resolveValue(opt),
+			selectionLabel: resolveSelectionLabel(opt)
+		};
+	});
+	return options;
 });
 
 const filteredOptions = computed(() => {
-  if (filter.value && !props.filterFn) {
-    return computedOptions.value.filter(o => o.label.toLocaleLowerCase().indexOf(filter.value.toLowerCase()) > -1);
-  } else {
-    return computedOptions.value;
-  }
+	if (filter.value && !props.filterFn) {
+		return computedOptions.value.filter(o => o.label.toLocaleLowerCase().indexOf(filter.value.toLowerCase()) > -1);
+	} else {
+		return computedOptions.value;
+	}
 });
 
 /**
@@ -147,14 +149,14 @@ const filteredOptions = computed(() => {
  * @type {ComputedRef<unknown>}
  */
 const selectedValue = computed(() => {
-  if (props.multiple) {
-    const arrVal = Array.isArray(props.modelValue) ? props.modelValue : [];
-    return arrVal.map((v) => {
-      return v === null ? "__null__" : v;
-    }) || [];
-  } else {
-    return props.modelValue === null ? "__null__" : props.modelValue;
-  }
+	if (props.multiple) {
+		const arrVal = Array.isArray(props.modelValue) ? props.modelValue : [];
+		return arrVal.map((v) => {
+			return v === null ? "__null__" : v;
+		}) || [];
+	} else {
+		return props.modelValue === null ? "__null__" : props.modelValue;
+	}
 });
 
 /**
@@ -162,13 +164,13 @@ const selectedValue = computed(() => {
  * @type {ComputedRef<*>}
  */
 const selectedOptions = computed(() => {
-  let values = selectedValue.value;
-  if (!props.multiple) {
-    values = (values || values === 0) ? [values] : [];
-  }
-  return computedOptions.value.filter((o) => {
-    return values.includes(o.value) || values.map(v => typeof v === "object" && v.id).includes(o.value?.id);
-  });
+	let values = selectedValue.value;
+	if (!props.multiple) {
+		values = (values || values === 0) ? [values] : [];
+	}
+	return computedOptions.value.filter((o) => {
+		return values.includes(o.value) || values.map(v => typeof v === "object" && v.id).includes(o.value?.id);
+	});
 });
 
 /**
@@ -177,12 +179,12 @@ const selectedOptions = computed(() => {
  * @type {ComputedRef<unknown>}
  */
 const selectedLabel = computed(() => {
-  if (props.filterable && isShowing.value) return "";
+	if (props.filterable && isShowing.value) return "";
 
-  if (!selectedOptions.value || selectedOptions.value.length === 0) {
-    return props.placeholder || "(Select Option)";
-  }
-  return selectedOptions.value[0].selectionLabel;
+	if (!selectedOptions.value || selectedOptions.value.length === 0) {
+		return props.placeholder || "(Select Option)";
+	}
+	return selectedOptions.value[0].selectionLabel;
 });
 
 /**
@@ -190,7 +192,7 @@ const selectedLabel = computed(() => {
  * @type {ComputedRef<*>}
  */
 const chipOptions = computed(() => {
-  return selectedOptions.value.slice(0, props.chipLimit);
+	return selectedOptions.value.slice(0, props.chipLimit);
 });
 
 /**
@@ -199,16 +201,16 @@ const chipOptions = computed(() => {
  * @returns {*|string}
  */
 function resolveLabel(option) {
-  if (typeof option === "string") {
-    return option;
-  }
-  if (typeof props.optionLabel === "string") {
-    return option[props.optionLabel];
-  }
-  if (typeof props.optionLabel === "function") {
-    return props.optionLabel(option);
-  }
-  return option?.label;
+	if (typeof option === "string") {
+		return option;
+	}
+	if (typeof props.optionLabel === "string") {
+		return option[props.optionLabel];
+	}
+	if (typeof props.optionLabel === "function") {
+		return props.optionLabel(option);
+	}
+	return option?.label;
 }
 
 /**
@@ -218,16 +220,16 @@ function resolveLabel(option) {
  * @returns {*|{default: null, type: String | StringConstructor}|string}
  */
 function resolveSelectionLabel(option) {
-  if (typeof option === "string") {
-    return option;
-  }
-  if (typeof props.selectionLabel === "string") {
-    return option[props.selectionLabel];
-  }
-  if (typeof props.selectionLabel === "function") {
-    return props.selectionLabel(option);
-  }
-  return option?.selectionLabel || option?.label;
+	if (typeof option === "string") {
+		return option;
+	}
+	if (typeof props.selectionLabel === "string") {
+		return option[props.selectionLabel];
+	}
+	if (typeof props.selectionLabel === "function") {
+		return props.selectionLabel(option);
+	}
+	return option?.selectionLabel || option?.label;
 }
 
 /**
@@ -236,17 +238,17 @@ function resolveSelectionLabel(option) {
  * @returns {string|*|string}
  */
 function resolveValue(option) {
-  if (!option || typeof option === "string") {
-    return option;
-  }
-  let value = option.value;
-  if (typeof props.optionValue === "string") {
-    value = option[props.optionValue];
-  } else if (typeof props.optionValue === "function") {
-    value = props.optionValue(option);
-  }
-  // Note the __null__ special case here. See the onUpdate function for more details
-  return value === null ? "__null__" : value;
+	if (!option || typeof option === "string") {
+		return option;
+	}
+	let value = option.value;
+	if (typeof props.optionValue === "string") {
+		value = option[props.optionValue];
+	} else if (typeof props.optionValue === "function") {
+		value = props.optionValue(option);
+	}
+	// Note the __null__ special case here. See the onUpdate function for more details
+	return value === null ? "__null__" : value;
 }
 
 /**
@@ -256,14 +258,14 @@ function resolveValue(option) {
  * @param value
  */
 function onUpdate(value) {
-  if (Array.isArray(value)) {
-    value = value.map((v) => v === "__null__" ? null : v);
-  }
+	if (Array.isArray(value)) {
+		value = value.map((v) => v === "__null__" ? null : v);
+	}
 
-  value = value === "__null__" ? null : value;
+	value = value === "__null__" ? null : value;
 
-  emit("update", value);
-  emit("update:model-value", value);
+	emit("update", value);
+	emit("update:model-value", value);
 }
 
 /** XXX: This tells us when we should apply the filter. QSelect likes to trigger a new filter everytime you open the dropdown
@@ -277,19 +279,19 @@ const shouldFilter = ref(false);
  * @param update
  */
 async function onFilter(val, update) {
-  if (!props.filterFn) {
-    filter.value = val;
-    await nextTick(update);
-  } else {
-    update();
-    if (shouldFilter.value === false) return;
-    if (val !== null && val !== filter.value) {
-      filter.value = val;
-      if (props.filterFn) {
-        await props.filterFn(val);
-      }
-    }
-  }
+	if (!props.filterFn) {
+		filter.value = val;
+		await nextTick(update);
+	} else {
+		update();
+		if (shouldFilter.value === false) return;
+		if (val !== null && val !== filter.value) {
+			filter.value = val;
+			if (props.filterFn) {
+				await props.filterFn(val);
+			}
+		}
+	}
 }
 
 /**
@@ -297,29 +299,29 @@ async function onFilter(val, update) {
  * See the onUpdate function for more details
  */
 function onClear() {
-  emit("update:model-value", undefined);
-  emit("update", undefined);
+	emit("update:model-value", undefined);
+	emit("update", undefined);
 }
 
 /**
  * Handle behavior when showing the dropdown
  */
 function onShow() {
-  isShowing.value = true;
+	isShowing.value = true;
 
-  // XXX: See description on shouldFilter declaration. Only allow filtering after dropdown is ALREADY opened
-  shouldFilter.value = false;
-  nextTick(() => {
-    shouldFilter.value = true;
-    selectField.value.focus();
-  });
+	// XXX: See description on shouldFilter declaration. Only allow filtering after dropdown is ALREADY opened
+	shouldFilter.value = false;
+	nextTick(() => {
+		shouldFilter.value = true;
+		selectField.value.focus();
+	});
 }
 
 /**
  * Handle behavior when hiding the dropdown
  */
 function onHide() {
-  isShowing.value = false;
-  shouldFilter.value = false;
+	isShowing.value = false;
+	shouldFilter.value = false;
 }
 </script>

package/src/components/ActionTable/listControls.ts

@@ -156,7 +156,7 @@ export function useListControls({
 		}
 
 		// Add a reactive isSaving property to each item (for performance reasons in checking saving state)
-		data = data.map((item: any) => {
+		data = data?.map((item: any) => {
 			// We want to keep the isSaving state if it is already set, as optimizations prevent reloading the
 			// components, and therefore reactivity is not responding to the new isSaving state
 			const oldItem = pagedItems.value?.data?.find(i => i.id === item.id);
@@ -182,7 +182,7 @@ export function useListControls({
 		const data = pagedItems.value?.data?.map(item => (item.id === updatedItem.id && (item.updated_at === null || item.updated_at <= updatedItem.updated_at)) ? updatedItem : item);
 		setPagedItems({
 			data,
-			meta: { total: pagedItems.value.meta.total }
+			meta: { total: pagedItems.value?.meta?.total || 0 }
 		});
 
 		// Update the active item as well if it is set
@@ -205,8 +205,8 @@ export function useListControls({
 
 		if (newItems && newItems.length > 0) {
 			setPagedItems({
-				data: [...pagedItems.value.data, ...newItems],
-				meta: { total: pagedItems.value.meta.total }
+				data: [...pagedItems.value?.data || [], ...newItems],
+				meta: { total: pagedItems.value?.meta?.total || 0 }
 			});
 			return true;
 		}

package/src/components/Utility/Dialogs/InfoDialog.vue

@@ -34,6 +34,7 @@
         <slot>{{ content }}</slot>
       </QCardSection>
       <div
+        v-if="!hideButtons"
         class="flex items-center justify-center px-6 py-4 border-t border-gray-300"
       >
         <div class="flex-grow text-right">
@@ -61,35 +62,36 @@ import { XIcon as CloseIcon } from "@heroicons/vue/outline";
 
 const emit = defineEmits(["update:model-value", "close"]);
 defineProps({
-  modelValue: { type: [Boolean, Object], default: true },
-  title: {
-    type: String,
-    default: ""
-  },
-  titleClass: {
-    type: String,
-    default: ""
-  },
-  subtitle: {
-    type: String,
-    default: ""
-  },
-  content: {
-    type: String,
-    default: ""
-  },
-  backdropDismiss: Boolean,
-  maximized: Boolean,
-  fullWidth: Boolean,
-  fullHeight: Boolean,
-  doneText: {
-    type: String,
-    default: "Done"
-  }
+	modelValue: { type: [Boolean, Object], default: true },
+	title: {
+		type: String,
+		default: ""
+	},
+	titleClass: {
+		type: String,
+		default: ""
+	},
+	subtitle: {
+		type: String,
+		default: ""
+	},
+	content: {
+		type: String,
+		default: ""
+	},
+	backdropDismiss: Boolean,
+	hideButtons: Boolean,
+	maximized: Boolean,
+	fullWidth: Boolean,
+	fullHeight: Boolean,
+	doneText: {
+		type: String,
+		default: "Done"
+	}
 });
 
 function onClose() {
-  emit("update:model-value", false);
-  emit("close");
+	emit("update:model-value", false);
+	emit("close");
 }
 </script>