quasar-ui-danx 0.4.9 → 0.4.10

package/package.json

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

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

@@ -1,27 +1,30 @@
 <template>
-  <span class="dx-field-label">
+  <div class="dx-field-label">
     <slot>
-      {{ labelText }}
-      <template v-if="showName">({{ field?.name }})</template>
+      <div class="dx-field-label-text">
+        <div class="dx-field-label-label">
+          {{ label }}
+        </div>
+        <div
+          v-if="name"
+          class="dx-field-label-name"
+        >
+          ({{ name }})
+        </div>
+      </div>
     </slot>
     <span
-      v-if="requiredLabel"
+      v-if="required"
       class="dx-field-required"
-    >{{ requiredLabel }}</span>
-  </span>
+    >{{ requiredLabel || "*" }}</span>
+  </div>
 </template>
 
 <script setup lang="ts">
-import { computed } from "vue";
-import { FormField } from "../../../../types";
-
-const props = defineProps<{
-	field?: FormField;
+defineProps<{
 	label?: string;
-	showName?: boolean;
+	name?: string;
 	required?: boolean;
+	requiredLabel?: string;
 }>();
-
-const labelText = computed(() => props.label || props.field?.label);
-const requiredLabel = computed(() => props.field?.required_group || (props.required || props.field?.required ? "*" : ""));
 </script>

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

@@ -1,22 +1,51 @@
 <template>
   <div>
-    <div class="text-xs font-bold">{{ label }}</div>
-    <div :class="{'mt-2': !dense, 'mt-1': dense, 'text-no-wrap': nowrap}">
-      <slot>{{ value || "-" }}</slot>
+    <div class="text-xs font-bold">
+      {{ label }}
+    </div>
+    <div :class="valueClass">
+      <a
+        v-if="url"
+        target="_blank"
+        :href="url"
+        :class="valueClass"
+      >
+        <slot>{{ formattedValue }}</slot>
+      </a>
+      <template v-else>
+        <slot>{{ formattedValue }}</slot>
+      </template>
     </div>
   </div>
 </template>
-<script setup>
-defineProps({
-  label: {
-    type: String,
-    required: true
-  },
-  value: {
-    type: [String, Number],
-    default: "-"
-  },
-  dense: Boolean,
-  nowrap: Boolean
+<script setup lang="ts">
+import { computed } from "vue";
+import { fBoolean, fNumber } from "../../../../helpers";
+
+export interface LabelValueBlockProps {
+	label: string;
+	value: string | number | boolean;
+	url?: string;
+	dense?: boolean;
+	nowrap?: boolean;
+}
+
+const props = withDefaults(defineProps<LabelValueBlockProps>(), {
+	value: "",
+	url: ""
+});
+
+const valueClass = computed(() => ({ "mt-2": !props.dense, "mt-1": props.dense, "text-no-wrap": props.nowrap }));
+const formattedValue = computed(() => {
+	switch (typeof props.value) {
+		case "boolean":
+			return fBoolean(props.value);
+
+		case "number":
+			return fNumber(props.value);
+
+		default:
+			return props.value || "-";
+	}
 });
 </script>

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

@@ -12,7 +12,6 @@
       :field="field"
       :no-label="!field.label"
       label-class="text-xs font-bold text-zinc-800"
-      parent-class="tight-label"
       input-class="!py-0"
       dense
       type="textarea"
@@ -29,29 +28,29 @@ import TextField from "./TextField";
 
 const emit = defineEmits(["update:model-value"]);
 const props = defineProps({
-  modelValue: {
-    type: [String, Number, Object],
-    default: ""
-  },
-  field: {
-    type: Object,
-    default: null
-  }
+	modelValue: {
+		type: [String, Number, Object],
+		default: ""
+	},
+	field: {
+		type: Object,
+		default: null
+	}
 });
 
 const selectedFieldName = ref(props.field.defaultOption);
 const searchList = computed(() => props.modelValue && props.modelValue[selectedFieldName.value]);
 const textInput = ref(formatModelValue());
 function onChange() {
-  textInput.value = textInput.value?.replace(/\n/g, ",").replace(/,{2,}/g, ",") || "";
-  emit("update:model-value", textInput.value ? { [selectedFieldName.value]: textInput.value.split(",") } : undefined);
+	textInput.value = textInput.value?.replace(/\n/g, ",").replace(/,{2,}/g, ",") || "";
+	emit("update:model-value", textInput.value ? { [selectedFieldName.value]: textInput.value.split(",") } : undefined);
 }
 
 function formatModelValue() {
-  return Array.isArray(searchList.value) ? searchList.value?.join(",") : "";
+	return Array.isArray(searchList.value) ? searchList.value?.join(",") : "";
 }
 
 watch(() => props.modelValue, () => {
-  textInput.value = formatModelValue();
+	textInput.value = formatModelValue();
 });
 </script>

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

@@ -1,72 +1,49 @@
 <template>
-  <QInput
-    class="dx-number-field max-w-full"
-    :class="{'dx-no-prepend-label': hidePrependLabel, 'dx-prepend-label': !hidePrependLabel}"
+  <TextField
+    class="dx-number-field"
+    v-bind="$props"
     :model-value="numberVal"
-    :data-testid="'number-field-' + fieldOptions.id"
-    :placeholder="fieldOptions.placeholder"
-    outlined
-    dense
-    inputmode="numeric"
-    :input-class="inputClass"
     @update:model-value="onInput"
-  >
-    <template #prepend>
-      <FieldLabel
-        :field="fieldOptions"
-        :show-name="showName"
-      />
-    </template>
-  </QInput>
+  />
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { useDebounceFn } from "@vueuse/core";
-import { computed, nextTick, ref, watch } from "vue";
+import { nextTick, ref, watch } from "vue";
 import { fNumber } from "../../../../helpers";
-import FieldLabel from "./FieldLabel";
+import { AnyObject, TextFieldProps } from "../../../../types";
+import TextField from "./TextField";
 
 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, Object],
-		default: ""
-	},
-	delay: {
-		type: Number,
-		default: 1000
-	},
-	hidePrependLabel: Boolean,
-	currency: Boolean,
-	showName: Boolean
+
+export interface NumberFieldProps extends TextFieldProps {
+	precision?: number;
+	delay?: number;
+	currency?: boolean;
+	min?: number;
+	max?: number;
+}
+
+const props = withDefaults(defineProps<NumberFieldProps>(), {
+	modelValue: "",
+	precision: 2,
+	label: undefined,
+	delay: 1000,
+	min: undefined,
+	max: undefined
 });
 
 const numberVal = ref(format(props.modelValue));
-watch(() => props.modelValue, () => numberVal.value = format(props.modelValue));
 
-const fieldOptions = computed(() => props.field || { label: props.label || "", placeholder: "", id: "" });
+watch(() => props.modelValue, () => numberVal.value = format(props.modelValue));
 
 function format(number) {
 	if (!number && number !== 0 && number !== "0") return number;
 
+	if (props.type === "number") return number;
+
 	const minimumFractionDigits = Math.min(props.precision, ("" + number).split(".")[1]?.length || 0);
-	let options = {
+	let options: AnyObject = {
 		minimumFractionDigits
 	};
 
@@ -80,14 +57,15 @@ function format(number) {
 	return fNumber(number, options);
 }
 
-const onUpdateDebounced = useDebounceFn((val) => emit("update", val), props.delay);
+const onUpdateDebounced = useDebounceFn((val: number | string | undefined) => emit("update", val), props.delay);
 
 function onInput(value) {
-	let number = "";
+	let number: number | undefined = undefined;
 
 	// 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);
@@ -95,11 +73,19 @@ function onInput(value) {
 
 	if (value !== "") {
 		value = value.replace(/[^\d.]/g, "");
-		number = Number(value);
+		number = +value;
+
+		if (props.min) {
+			number = Math.max(number, props.min);
+		}
+		if (props.max) {
+			number = Math.min(number, props.max);
+		}
+
+		console.log("formattinged", number, value);
 		numberVal.value = format(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

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

@@ -37,8 +37,8 @@
       <template #selected>
         <div
           v-if="$props.multiple"
-          class="flex gap-y-1 overflow-hidden"
-          :class="{'flex-nowrap gap-y-0': chipLimit === 1, [selectionClass]: true}"
+          class="flex gap-y-1 overflow-hidden dx-selected-label"
+          :class="{'flex-nowrap gap-y-0': chipLimit === 1, 'dx-selected-chips': chipOptions.length > 0, [selectionClass]: true}"
         >
           <template v-if="chipOptions.length > 0">
             <QChip
@@ -62,6 +62,7 @@
         <div
           v-else
           :class="selectionClass"
+          class="dx-selected-label"
         >
           {{ selectedLabel }}
         </div>
@@ -254,8 +255,8 @@ function onUpdate(value) {
 
 	value = value === "__null__" ? null : value;
 
-	emit("update", value);
 	emit("update:model-value", value);
+	emit("update", value);
 }
 
 /** XXX: This tells us when we should apply the filter. QSelect likes to trigger a new filter everytime you open the dropdown

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

@@ -1,15 +1,21 @@
 <template>
   <div>
     <FieldLabel
-      :field="field"
+      v-if="!prependLabel"
       :label="label"
-      :show-name="showName"
+      :required="required"
+      :required-label="requiredLabel"
       :class="labelClass"
-      :value="readonly ? modelValue : ''"
     />
-    <template v-if="!readonly">
+    <div
+      v-if="readonly"
+      class="dx-text-field-readonly-value"
+    >
+      {{ modelValue }}
+    </div>
+    <template v-else>
       <QInput
-        :placeholder="field?.placeholder"
+        :placeholder="placeholder || (placeholder === '' ? '' : `Enter ${label}`)"
         outlined
         dense
         :readonly="readonly"
@@ -17,18 +23,31 @@
         :disable="disabled"
         :label-slot="!noLabel"
         :input-class="inputClass"
-        :class="parentClass"
+        :class="{'dx-input-prepend-label': prependLabel}"
         stack-label
         :type="type"
         :model-value="modelValue"
-        :maxlength="allowOverMax ? undefined : field?.maxLength"
+        :maxlength="allowOverMax ? undefined : maxLength"
         :debounce="debounce"
         @keydown.enter="$emit('submit')"
         @update:model-value="$emit('update:model-value', $event)"
-      />
+      >
+        <template
+          v-if="prependLabel"
+          #prepend
+        >
+          <FieldLabel
+            class="dx-prepended-label"
+            :label="label"
+            :required="required"
+            :required-label="requiredLabel"
+            :class="labelClass"
+          />
+        </template>
+      </QInput>
       <MaxLengthCounter
-        :length="modelValue?.length || 0"
-        :max-length="field?.maxLength"
+        :length="(modelValue + '').length || 0"
+        :max-length="maxLength"
       />
     </template>
   </div>
@@ -46,9 +65,9 @@ withDefaults(defineProps<TextFieldProps>(), {
 	type: "text",
 	label: "",
 	labelClass: "",
-	parentClass: "",
 	inputClass: "",
 	maxLength: null,
-	debounce: 0
+	debounce: 0,
+	placeholder: null
 });
 </script>

package/src/helpers/formats.ts

@@ -29,10 +29,9 @@ export function remoteDateTime(dateTimeString: string) {
 }
 
 /**
- * @param {DateTime|String} dateTime
- * @returns {DateTime|*}
+ * Parses a date string into a Luxon DateTime object
  */
-export function parseDateTime(dateTime: string | DateTime) {
+export function parseDateTime(dateTime: string | DateTime | null): DateTime {
 	if (typeof dateTime === "string") {
 		dateTime = dateTime.replace("T", " ").replace(/\//g, "-");
 		return DateTime.fromSQL(dateTime);
@@ -91,8 +90,8 @@ export function fDateTime(
 		dateTime: string | DateTime | null = null,
 		{ format = "M/d/yy h:mma", empty = "- -" }: fDateOptions = {}
 ) {
-	const formatted = (dateTime ? parseDateTime(dateTime) : DateTime.now()).toFormat(format).toLowerCase();
-	return formatted === "invalid datetime" ? empty : formatted;
+	const formatted = parseDateTime(dateTime).toFormat(format).toLowerCase();
+	return ["Invalid DateTime", "invalid datetime"].includes(formatted) ? empty : formatted;
 }
 
 /**
@@ -151,16 +150,87 @@ export function fCurrency(amount: number, options?: object) {
 	}).format(amount);
 }
 
+/**
+ * Formats an amount into USD currency format without cents
+ */
+export function fCurrencyNoCents(amount: number, options?: object) {
+	return fCurrency(amount, {
+		maximumFractionDigits: 0,
+		...options
+	});
+}
+
 /**
  * Formats a number into a human-readable format
- * @param number
- * @param options
- * @returns {string}
  */
-export function fNumber(number: number, options = {}) {
+export function fNumber(number: number, options?: object) {
 	return new Intl.NumberFormat("en-US", options).format(number);
 }
 
+/**
+ * Formats a currency into a shorthand human-readable format (ie: $1.2M or $5K)
+ */
+export function fShortCurrency(value: string | number, options?: { round: boolean }) {
+	return "$" + fShortNumber(value, options);
+}
+
+/**
+ * Formats a number into a shorthand human-readable format (ie: 1.2M or 5K)
+ */
+export function fShortNumber(value: string | number, options?: { round: boolean }) {
+	const shorts = [
+		{ pow: 3, unit: "K" },
+		{ pow: 6, unit: "M" },
+		{ pow: 9, unit: "B" },
+		{ pow: 12, unit: "T" },
+		{ pow: 15, unit: "Q" }
+	];
+
+	let n = Math.round(+value);
+
+	const short = shorts.find(({ pow }) => Math.pow(10, pow) < n && Math.pow(10, pow + 3) > n) || null;
+
+	if (short) {
+		n = n / Math.pow(10, short.pow);
+		return options?.round
+				? n + short.unit
+				: n.toFixed(n > 100 ? 0 : 1) + short.unit;
+	}
+
+	return n;
+}
+
+/**
+ * Formats a number into a human-readable size format (ie: 1.2MB or 5KB)
+ */
+export function fShortSize(value: string | number) {
+	const powers = [
+		{ pow: 0, unit: "B" },
+		{ pow: 10, unit: "KB" },
+		{ pow: 20, unit: "MB" },
+		{ pow: 30, unit: "GB" },
+		{ pow: 40, unit: "TB" },
+		{ pow: 50, unit: "PB" },
+		{ pow: 60, unit: "EB" },
+		{ pow: 70, unit: "ZB" },
+		{ pow: 80, unit: "YB" }
+	];
+
+	const n = Math.round(+value);
+	const power = powers.find((p, i) => {
+		const nextPower = powers[i + 1];
+		return !nextPower || n < Math.pow(2, nextPower.pow + 10);
+	}) || powers[powers.length - 1];
+
+	const div = Math.pow(2, power.pow);
+
+	return Math.round(n / div) + " " + power.unit;
+}
+
+export function fBoolean(value: boolean) {
+	return value ? "Yes" : "No";
+}
+
 /**
  * Truncates the string by removing chars from the middle of the string
  * @param str

package/src/helpers/utils.ts

@@ -1,5 +1,7 @@
 import { Ref, watch } from "vue";
 
+export { useDebounceFn } from "@vueuse/core";
+
 /**
  * Sleep function to be used in conjunction with async await:
  *

package/src/styles/quasar-reset.scss

@@ -58,6 +58,8 @@
 		.q-field__marginal, .q-field__input, .q-field__label {
 			color: inherit;
 			height: auto;
+			min-height: 0;
+			line-height: inherit;
 		}
 	}
 }

package/src/styles/themes/danx/forms.scss

@@ -1,5 +1,5 @@
 .dx-field-label {
-	@apply text-xs block mb-1.5;
+	@apply text-xs mb-1.5 flex items-center space-x-1;
 
 	.dx-field-required {
 		@apply text-red-900 ml-0.5 bottom-1 relative;
@@ -10,22 +10,4 @@
 	.q-field__label {
 		@apply text-sm text-gray-700;
 	}
-
-	&.dx-number-field {
-		&.dx-prepend-label {
-			@apply text-xs text-black font-normal;
-		}
-
-		&.dx-no-prepend-label {
-			@apply w-32;
-
-			.q-field__native {
-				@apply bg-white text-right;
-			}
-
-			.q-field__prepend {
-				padding: 0;
-			}
-		}
-	}
 }

package/src/types/fields.d.ts

@@ -1,15 +1,16 @@
 import { QInputProps } from "quasar";
-import { FormField } from "./forms";
 
 export interface TextFieldProps {
-	modelValue?: string,
-	field?: FormField,
-	type?: QInputProps["type"],
-	label?: string,
-	labelClass?: string,
-	parentClass?: string,
-	inputClass?: string,
-	allowOverMax?: boolean,
+	modelValue?: string | number;
+	type?: QInputProps["type"];
+	label?: string;
+	required?: boolean;
+	requiredLabel?: string;
+	prependLabel?: boolean;
+	placeholder?: string;
+	labelClass?: string | object;
+	inputClass?: string | object;
+	allowOverMax?: boolean;
 	maxLength?: number;
 	autogrow?: boolean;
 	noLabel?: boolean;