quasar-ui-danx 0.4.1 → 0.4.3

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

@@ -1,55 +1,62 @@
 <template>
   <div
     class="max-w-full relative overflow-auto"
-    :class="{'p-4 border rounded border-gray-300': !readonly}"
+    :class="{'p-2': !readonly}"
     @dragover.prevent
     @drop.prevent="onDrop"
   >
     <FieldLabel
       :field="field"
+      :label="label"
       :show-name="showName"
       class="text-sm font-semibold"
     />
-    <div
+
+    <input
       v-if="!disable && !readonly"
-      class="text-sm my-2"
+      ref="file"
+      class="hidden"
+      type="file"
+      multiple
+      @change="onFilesSelected"
     >
-      <a
-        class="text-blue-600"
-        @click="$refs.file.click()"
-      >Upload</a>
-      <a
-        v-if="uploadedFiles.length > 0"
-        class="ml-3 text-red-900"
-        @click="clearUploadedFiles"
-      >Clear</a>
-      <input
-        ref="file"
-        class="hidden"
-        type="file"
-        multiple
-        @change="onFilesSelected"
-      >
-    </div>
 
     <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"
+        :file="file"
         :related-files="uploadedFiles"
         downloadable
         :removable="!readonly && !disable"
         @remove="onRemove(file)"
       />
-      <FilePreview
+      <div
         v-if="!disable && !readonly"
-        class="w-32 m-2 cursor-pointer border border-dashed border-blue-600"
-        disabled
-        @click="$refs.file.click()"
-      />
+        class="dx-add-remove-files w-32 h-32 m-2 rounded-2xl flex flex-col flex-nowrap items-center overflow-hidden cursor-pointer"
+      >
+        <div
+          class="dx-add-file flex-grow p-1 pt-3 flex justify-center items-center bg-green-200 text-green-700 w-full hover:bg-green-100"
+          @click="$refs.file.click()"
+        >
+          <div>
+            <AddFileIcon class="w-10 m-auto" />
+            <div class="mt-1 text-center">
+              Add
+            </div>
+          </div>
+        </div>
+        <div
+          v-if="uploadedFiles.length > 0"
+          class="dx-remove-file flex items-center flex-nowrap p-2 bg-red-200 text-red-800 hover:bg-red-100 w-full justify-center text-xs"
+          @click="clearUploadedFiles"
+        >
+          <RemoveFileIcon class="mr-2 w-3" />
+          Remove All
+        </div>
+      </div>
       <div
         v-if="readonly && uploadedFiles.length === 0"
         class="p-1"
@@ -60,32 +67,29 @@
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { onMounted } from "vue";
 import { useMultiFileUpload } from "../../../../helpers";
+import { ImageIcon as AddFileIcon, TrashIcon as RemoveFileIcon } from "../../../../svg";
+import { FormField, UploadedFile } from "../../../../types";
 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
-});
+const props = defineProps<{
+	modelValue?: UploadedFile[];
+	field?: FormField;
+	label?: string;
+	showName?: boolean;
+	disable?: boolean;
+	readonly?: boolean;
+}>();
 
 const { onComplete, onDrop, onFilesSelected, uploadedFiles, clearUploadedFiles, onRemove } = useMultiFileUpload();
 onMounted(() => {
-  if (props.modelValue) {
-    uploadedFiles.value = props.modelValue;
-  }
+	if (props.modelValue) {
+		uploadedFiles.value = props.modelValue;
+	}
 });
 onComplete(() => emit("update:model-value", uploadedFiles.value));
 </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>

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

@@ -16,7 +16,7 @@
       option-value="value"
       placeholder=""
       :input-class="{'is-hidden': !isShowing, [inputClass]: true}"
-      class="max-w-full"
+      class="max-w-full dx-select-field"
       @filter="onFilter"
       @clear="onClear"
       @popup-show="onShow"
@@ -64,47 +64,33 @@
     </QSelect>
   </div>
 </template>
-<script setup>
+<script setup lang="ts">
 import { ChevronDownIcon as DropDownIcon } from "@heroicons/vue/outline";
-import { QSelect } from "quasar";
+import { QSelect, QSelectProps } from "quasar";
 import { computed, isRef, nextTick, ref } from "vue";
 
+export interface Props extends QSelectProps {
+	modelValue?: any;
+	placeholder?: string;
+	selectionLabel?: string | ((option) => string);
+	chipLimit?: number;
+	inputClass?: string;
+	selectionClass?: string;
+	options?: unknown[];
+	filterable?: boolean;
+	filterFn?: (val: string) => void;
+}
+
 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
-  }
+const props = withDefaults(defineProps<Props>(), {
+	modelValue: undefined,
+	placeholder: "",
+	selectionLabel: null,
+	chipLimit: 3,
+	inputClass: "",
+	selectionClass: "",
+	options: () => [],
+	filterFn: null
 });
 
 const selectField = ref(null);
@@ -119,27 +105,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 +133,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 +148,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 +163,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 +176,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 +185,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 +204,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 +222,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 +242,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 +263,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 +283,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>