quasar-ui-danx 0.4.1 → 0.4.2

package/package.json

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

package/src/components/ActionTable/ActionTable.vue

@@ -8,7 +8,7 @@
       ref="actionTable"
       :selected="selectedRows"
       :pagination="pagination"
-      :columns="columns"
+      :columns="tableColumns"
       :loading="loadingList"
       :rows="pagedItems?.data || []"
       :binary-state-sort="false"
@@ -18,7 +18,7 @@
       :color="color"
       @update:selected="$emit('update:selected-rows', $event)"
       @update:pagination="() => {}"
-      @request="(e) => $emit('update:pagination', {...e.pagination, __sort: mapSortBy(e.pagination, columns)})"
+      @request="(e) => $emit('update:pagination', {...e.pagination, __sort: mapSortBy(e.pagination, tableColumns)})"
     >
       <template #no-data>
         <slot name="empty">
@@ -33,7 +33,7 @@
           :selected-count="selectedRows.length"
           :loading="loadingSummary"
           :summary="summary"
-          :columns="columns"
+          :columns="tableColumns"
           @clear="$emit('update:selected-rows', [])"
         />
       </template>
@@ -116,6 +116,7 @@ const props = defineProps({
 const actionTable = ref(null);
 registerStickyScrolling(actionTable);
 
+const tableColumns = computed(() => props.columns.map((column) => ({ ...column, field: column.field || column.name })));
 const hasData = computed(() => props.pagedItems?.data?.length);
 const COLUMN_SETTINGS_KEY = `column-settings-${props.name}`;
 const columnSettings = ref(getItem(COLUMN_SETTINGS_KEY) || {});

package/src/components/ActionTable/Filters/CollapsableFiltersSidebar.vue

@@ -1,5 +1,6 @@
 <template>
   <CollapsableSidebar
+    class="dx-collapsable-filters-sidebar"
     :collapse="!showFilters"
     disabled
     :min-width="minWidth"
@@ -22,17 +23,17 @@ import { CollapsableSidebar } from "../../Utility";
 defineEmits(["update:active-filter", "update:show-filters"]);
 
 export interface Props {
-  name: string,
-  showFilters?: boolean,
-  activeFilter: ListControlsFilter,
-  minWidth?: string,
-  maxWidth?: string,
-  filters?: FilterField[]
+	name: string,
+	showFilters?: boolean,
+	activeFilter: ListControlsFilter,
+	minWidth?: string,
+	maxWidth?: string,
+	filters?: FilterField[]
 }
 
 withDefaults(defineProps<Props>(), {
-  minWidth: "5rem",
-  maxWidth: "18rem",
-  filters: () => []
+	minWidth: "5rem",
+	maxWidth: "18rem",
+	filters: () => []
 });
 </script>

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

@@ -12,8 +12,8 @@
       ref="fileUpload"
       data-testid="file-upload"
       type="file"
-      :accept="geolocation ? 'image/*;capture=camera' : undefined"
-      :capture="geolocation ? 'environment' : undefined"
+      :accept="(geolocation && cameraOnly) ? 'image/*;capture=camera' : undefined"
+      :capture="(geolocation && cameraOnly) ? 'environment' : undefined"
       class="hidden"
       multiple
       @change="onAttachFiles"
@@ -28,28 +28,29 @@ import { FileUpload } from "../../../../helpers";
 
 defineExpose({ upload });
 const emit = defineEmits([
-  "uploading",
-  "file-progress",
-  "file-complete",
-  "complete"
+	"uploading",
+	"file-progress",
+	"file-complete",
+	"complete"
 ]);
 const props = defineProps({
-  ...QBtn.props,
-  text: {
-    type: String,
-    default: "Add File"
-  },
-  locationWaitMessage: {
-    type: String,
-    default: "Waiting for location..."
-  },
-  geolocation: Boolean
+	...QBtn.props,
+	text: {
+		type: String,
+		default: "Add File"
+	},
+	locationWaitMessage: {
+		type: String,
+		default: "Waiting for location..."
+	},
+	cameraOnly: Boolean,
+	geolocation: Boolean
 });
 
 const fileUpload = ref(null);
 
 function upload() {
-  fileUpload.value.click();
+	fileUpload.value.click();
 }
 
 /**
@@ -59,23 +60,23 @@ function upload() {
  * @returns {Promise<void>}
  */
 async function onAttachFiles({ target: { files } }) {
-  emit("uploading", files);
-  let fileUpload = new FileUpload(files)
-    .onProgress(({ file, progress }) => {
-      file.progress = progress;
-      emit("file-progress", file);
-    })
-    .onComplete(({ file, uploadedFile }) => {
-      emit("file-complete", { file, uploadedFile });
-    })
-    .onAllComplete(() => {
-      emit("complete", fileUpload.files);
-    });
+	emit("uploading", files);
+	let fileUpload = new FileUpload(files)
+		.onProgress(({ file, progress }) => {
+			file.progress = progress;
+			emit("file-progress", file);
+		})
+		.onComplete(({ file, uploadedFile }) => {
+			emit("file-complete", { file, uploadedFile });
+		})
+		.onAllComplete(() => {
+			emit("complete", fileUpload.files);
+		});
 
-  if (props.geolocation) {
-    await fileUpload.resolveLocation(props.locationWaitMessage);
-  }
+	if (props.geolocation) {
+		await fileUpload.resolveLocation(props.locationWaitMessage);
+	}
 
-  fileUpload.upload();
+	fileUpload.upload();
 }
 </script>

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

@@ -1,13 +1,14 @@
 <template>
   <QInput
+    class="dx-number-field max-w-full"
+    :class="{'dx-no-prepend-label': hidePrependLabel, 'dx-prepend-label': !hidePrependLabel}"
     :model-value="numberVal"
     :data-testid="'number-field-' + fieldOptions.id"
     :placeholder="fieldOptions.placeholder"
     outlined
     dense
     inputmode="numeric"
-    :input-class="{[inputClass]: true, 'text-right bg-white': !hidePrependLabel, 'text-right !text-xs text-black font-normal': hidePrependLabel}"
-    :class="{'no-prepend-icon w-32 max-w-full': hidePrependLabel, 'prepend-label': !hidePrependLabel}"
+    :input-class="inputClass"
     @update:model-value="onInput"
   >
     <template #prepend>
@@ -27,33 +28,33 @@ import FieldLabel from "./FieldLabel";
 
 const emit = defineEmits(["update:model-value", "update"]);
 const props = defineProps({
-  modelValue: {
-    type: [String, Number],
-    default: ""
-  },
-  precision: {
-    type: Number,
-    default: 2
-  },
-  label: {
-    type: String,
-    default: undefined
-  },
-  field: {
-    type: Object,
-    default: null
-  },
-  inputClass: {
-    type: String,
-    default: ""
-  },
-  delay: {
-    type: Number,
-    default: 1000
-  },
-  hidePrependLabel: Boolean,
-  currency: Boolean,
-  showName: Boolean
+	modelValue: {
+		type: [String, Number],
+		default: ""
+	},
+	precision: {
+		type: Number,
+		default: 2
+	},
+	label: {
+		type: String,
+		default: undefined
+	},
+	field: {
+		type: Object,
+		default: null
+	},
+	inputClass: {
+		type: [String, Object],
+		default: ""
+	},
+	delay: {
+		type: Number,
+		default: 1000
+	},
+	hidePrependLabel: Boolean,
+	currency: Boolean,
+	showName: Boolean
 });
 
 const numberVal = ref(format(props.modelValue));
@@ -62,46 +63,46 @@ watch(() => props.modelValue, () => numberVal.value = format(props.modelValue));
 const fieldOptions = computed(() => props.field || { label: props.label || "", placeholder: "", id: "" });
 
 function format(number) {
-  if (!number && number !== 0 && number !== "0") return number;
+	if (!number && number !== 0 && number !== "0") return number;
 
-  const minimumFractionDigits = Math.min(props.precision, ("" + number).split(".")[1]?.length || 0);
-  let options = {
-    minimumFractionDigits
-  };
+	const minimumFractionDigits = Math.min(props.precision, ("" + number).split(".")[1]?.length || 0);
+	let options = {
+		minimumFractionDigits
+	};
 
-  if (props.currency) {
-    options = {
-      style: "currency",
-      currency: "USD",
-      minimumFractionDigits
-    };
-  }
-  return fNumber(number, options);
+	if (props.currency) {
+		options = {
+			style: "currency",
+			currency: "USD",
+			minimumFractionDigits
+		};
+	}
+	return fNumber(number, options);
 }
 
 const onUpdateDebounced = useDebounceFn((val) => emit("update", val), props.delay);
 
 function onInput(value) {
-  let number = "";
+	let number = "";
 
-  // Prevent invalid characters
-  if (value.match(/[^\d.,$]/)) {
-    const oldVal = numberVal.value;
-    // XXX: To get QInput to show only the value we want
-    numberVal.value += " ";
-    return nextTick(() => numberVal.value = oldVal);
-  }
+	// Prevent invalid characters
+	if (value.match(/[^\d.,$]/)) {
+		const oldVal = numberVal.value;
+		// XXX: To get QInput to show only the value we want
+		numberVal.value += " ";
+		return nextTick(() => numberVal.value = oldVal);
+	}
 
-  if (value !== "") {
-    value = value.replace(/[^\d.]/g, "");
-    number = Number(value);
-    numberVal.value = format(number);
-  }
+	if (value !== "") {
+		value = value.replace(/[^\d.]/g, "");
+		number = Number(value);
+		numberVal.value = format(number);
+	}
 
-  number = number === "" ? undefined : number;
-  emit("update:model-value", number);
+	number = number === "" ? undefined : number;
+	emit("update:model-value", number);
 
-  // Delay the change event, so we only see the value after the user has finished
-  onUpdateDebounced(number);
+	// Delay the change event, so we only see the value after the user has finished
+	onUpdateDebounced(number);
 }
 </script>