quasar-ui-danx 0.4.9 → 0.4.12

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,18 @@ 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);
+		}
+
 		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/components/ActionTable/Form/RenderedForm.vue

@@ -136,7 +136,7 @@ import { ExclamationCircleIcon as MissingIcon, PencilIcon as EditIcon } from "@h
 import { computed, ref } from "vue";
 import { fDateTime, FlashMessages, incrementName, replace } from "../../../helpers";
 import { TrashIcon as RemoveIcon } from "../../../svg";
-import { Form, FormFieldValue } from "../../../types";
+import { AnyObject, Form, FormFieldValue } from "../../../types";
 import { ConfirmDialog, RenderVnode } from "../../Utility";
 import {
 	BooleanField,
@@ -151,7 +151,7 @@ import {
 } from "./Fields";
 
 export interface RenderedFormProps {
-	values?: FormFieldValue[] | object;
+	values?: FormFieldValue[] | object | null;
 	form: Form;
 	noLabel?: boolean;
 	showName?: boolean;
@@ -171,7 +171,7 @@ const props = withDefaults(defineProps<RenderedFormProps>(), {
 	emptyValue: undefined,
 	fieldClass: "",
 	savingClass: "text-sm text-slate-500 justify-end mt-4",
-	savedAt: null
+	savedAt: undefined
 });
 
 const emit = defineEmits(["update:values"]);
@@ -226,16 +226,16 @@ const currentVariation = ref(variationNames.value[0] || "");
 const newVariationName = ref("");
 const variationToEdit = ref<boolean | string>(false);
 const variationToDelete = ref("");
-const canAddVariation = computed(() => props.canModifyVariations && !props.readonly && !props.disable && variationNames.value.length < props.form.variations);
+const canAddVariation = computed(() => props.canModifyVariations && !props.readonly && !props.disable && variationNames.value.length < (props.form.variations || 0));
 
-function getFieldResponse(name, variation: string = undefined) {
+function getFieldResponse(name: string, variation?: string) {
 	if (!fieldResponses.value) return undefined;
 	return fieldResponses.value.find((fr: FormFieldValue) => fr.variation === (variation !== undefined ? variation : currentVariation.value) && fr.name === name);
 }
-function getFieldValue(name) {
+function getFieldValue(name: string) {
 	return getFieldResponse(name)?.value;
 }
-function onInput(name, value) {
+function onInput(name: string, value: any) {
 	const fieldResponse = getFieldResponse(name);
 	const newFieldResponse = {
 		name,
@@ -291,11 +291,12 @@ function updateValues(values: FormFieldValue[]) {
 	let updatedValues: FormFieldValue[] | object = values;
 
 	if (!Array.isArray(props.values)) {
-		updatedValues = values.reduce((acc, v) => {
+		updatedValues = values.reduce((acc: AnyObject, v) => {
 			acc[v.name] = v.value;
 			return acc;
 		}, {});
 	}
+
 	emit("update:values", updatedValues);
 }
 
@@ -311,8 +312,8 @@ function onRemoveVariation(name: string) {
 	variationToDelete.value = "";
 }
 
-function isVariationFormComplete(variation) {
-	const requiredGroups = {};
+function isVariationFormComplete(variation: string) {
+	const requiredGroups: AnyObject = {};
 	return props.form.fields.filter(r => r.required || r.required_group).every((field) => {
 		const fieldResponse = getFieldResponse(field.name, variation);
 		const hasValue = !!fieldResponse && fieldResponse.value !== null;

package/src/components/ActionTable/Form/index.ts

@@ -1,3 +1,4 @@
 export * from "./Fields";
 export * from "./Utilities";
+export { default as ActionForm } from "./ActionForm.vue";
 export { default as RenderedForm } from "./RenderedForm.vue";

package/src/components/ActionTable/Layouts/ActionTableLayout.vue

@@ -68,10 +68,10 @@
 </template>
 <script setup lang="ts">
 import { computed } from "vue";
-import { ActionController, ActionOptions, ActionPanel, FilterGroup, TableColumn } from "../../../types";
+import { ActionController, ActionPanel, FilterGroup, ResourceAction, TableColumn } from "../../../types";
 import { PanelsDrawer } from "../../PanelsDrawer";
 import { PreviousNextControls } from "../../Utility";
-import ActionTable from "../ActionTable";
+import ActionTable from "../ActionTable.vue";
 import { CollapsableFiltersSidebar } from "../Filters";
 import { ActionToolbar } from "../Toolbars";
 
@@ -83,7 +83,7 @@ const props = defineProps<{
 	columns: TableColumn[];
 	filters?: FilterGroup[];
 	panels?: ActionPanel[];
-	actions?: ActionOptions[];
+	actions?: ResourceAction[];
 	exporter?: () => Promise<void>;
 	panelTitleField?: string;
 	tableClass?: string;

package/src/components/ActionTable/TableSummaryRow.vue

@@ -4,8 +4,8 @@
     :class="{'has-selection': selectedCount, 'is-loading': loading}"
   >
     <QTd
-      :colspan="stickyColspan"
-      class="dx-table-summary-td transition-all"
+      :colspan="colspan"
+      class="dx-table-summary-td dx-table-summary-count transition-all"
       :class="{'has-selection': selectedCount}"
     >
       <div class="flex flex-nowrap items-center">
@@ -36,60 +36,71 @@
     <QTd
       v-for="column in summaryColumns"
       :key="column.name"
-      :align="column.align || 'left'"
+      :align="column.align || 'right'"
+      :class="column.summaryClass"
+      class="dx-table-summary-fd"
     >
-      <template v-if="summary">
+      <div
+        v-if="summary"
+        :class="{'dx-summary-column-link': column.onClick}"
+      >
         {{ formatValue(column) }}
-      </template>
+      </div>
     </QTd>
   </QTr>
 </template>
-<script setup>
+<script setup lang="ts">
 import { XCircleIcon as ClearIcon } from "@heroicons/vue/solid";
 import { QSpinner, QTd, QTr } from "quasar";
 import { computed } from "vue";
 import { fNumber } from "../../helpers";
+import { TableColumn } from "../../types";
+
+interface TableSummaryRowProps {
+	loading: boolean;
+	label?: string;
+	selectedLabel?: string;
+	selectedCount?: number;
+	itemCount?: number;
+	summary?: Record<string, any> | null;
+	columns: TableColumn[];
+	stickyColspan?: number;
+}
 
 defineEmits(["clear"]);
-const props = defineProps({
-	loading: Boolean,
-	label: {
-		type: String,
-		default: "Rows"
-	},
-	selectedLabel: {
-		type: String,
-		default: "Selected"
-	},
-	selectedCount: {
-		type: Number,
-		default: 0
-	},
-	itemCount: {
-		type: Number,
-		default: 0
-	},
-	summary: {
-		type: Object,
-		default: null
-	},
-	columns: {
-		type: Array,
-		required: true
-	},
-	stickyColspan: {
-		type: Number,
-		default: 2
+const props = withDefaults(defineProps<TableSummaryRowProps>(), {
+	label: "Rows",
+	selectedLabel: "Selected",
+	selectedCount: 0,
+	itemCount: 0,
+	summary: null,
+	stickyColspan: null
+});
+
+// Allow the colspan for the first summary column w/ count + label to extend out to the first column with summary data
+// (ie: take up as much room as possible without affecting the summary columns)
+const colspan = computed(() => {
+	if (props.stickyColspan) return props.stickyColspan;
+
+	if (props.summary) {
+		for (let i = 0; i < props.columns.length; i++) {
+			const fieldName = props.columns[i].field || props.columns[i].name;
+			if (props.summary[fieldName]) {
+				return i + 1;
+			}
+		}
 	}
+
+	return props.columns.length + 1;
 });
 
 const summaryColumns = computed(() => {
 	// The sticky columns are where we display the selection count and should not be included in the summary columns
-	return props.columns.slice(props.stickyColspan - 1);
+	return props.columns.slice(colspan.value - 1);
 });
 
 function formatValue(column) {
-	const value = props.summary[column.name];
+	const value = props.summary && props.summary[column.name];
 	if (value === undefined) return "";
 
 	if (column.format) {

package/src/components/ActionTable/Toolbars/ActionToolbar.vue

@@ -30,14 +30,14 @@
   </div>
 </template>
 <script setup lang="ts">
-import { ActionOptions, ActionTargetItem, AnyObject } from "../../../types";
+import { ActionTargetItem, AnyObject, ResourceAction } from "../../../types";
 import { ExportButton, RefreshButton } from "../../Utility";
 import ActionMenu from "../ActionMenu";
 
 defineEmits(["refresh"]);
 defineProps<{
 	title?: string,
-	actions?: ActionOptions[],
+	actions?: ResourceAction[],
 	actionTarget?: ActionTargetItem[],
 	refreshButton?: boolean,
 	loading?: boolean,

package/src/components/ActionTable/listControls.ts

@@ -317,7 +317,8 @@ export function useListControls(name: string, options: ListControlsOptions): Act
 	// (ie: tasks, verifications, creatives, etc.)
 	if (options.routes.details) {
 		watch(() => activeItem.value, async (newItem, oldItem) => {
-			if (newItem && oldItem?.id !== newItem.id) {
+			// Note we want a loose comparison in case it's a string vs int for the ID
+			if (newItem?.id && oldItem?.id != newItem.id) {
 				await getActiveItemDetails();
 			}
 		});
@@ -328,7 +329,7 @@ export function useListControls(name: string, options: ListControlsOptions): Act
 	 */
 	function activatePanel(item: ActionTargetItem | null, panel: string = "") {
 		// If we're already on the correct item and panel, don't do anything
-		if (item?.id === activeItem.value?.id && panel === activePanel.value) return;
+		if (item?.id == activeItem.value?.id && panel === activePanel.value) return;
 
 		setActiveItem(item);
 		activePanel.value = panel;

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

@@ -37,17 +37,37 @@
               </video>
             </template>
             <img
-              v-else
+              v-else-if="getPreviewUrl(file)"
               :alt="file.filename"
               :src="getPreviewUrl(file)"
             >
+            <div v-else>
+              <h3 class="text-center mb-4">
+                No Preview Available
+              </h3>
+              <a
+                :href="file.url"
+                target="_blank"
+                class="text-base"
+              >
+                {{ file.url }}
+              </a>
+            </div>
+          </div>
+
+          <div class="text-base text-center py-5 bg-slate-800 opacity-70 text-slate-300 absolute-top hover:opacity-20 transition-all">
+            {{ file.filename || file.name }}
           </div>
         </QCarouselSlide>
       </QCarousel>
-      <CloseIcon
-        class="absolute top-4 right-4 cursor-pointer text-white w-8 h-8"
+      <a
+        class="absolute top-0 right-0 text-white flex items-center justify-center w-16 h-16 hover:bg-slate-600 transition-all"
         @click="$emit('close')"
-      />
+      >
+        <CloseIcon
+          class="w-8 h-8"
+        />
+      </a>
     </div>
   </QDialog>
 </template>
@@ -73,8 +93,13 @@ function isVideo(file) {
 	return file.mime?.startsWith("video");
 }
 
+function isImage(file) {
+	return file.mime?.startsWith("image");
+}
+
 function getPreviewUrl(file) {
-	return file.optimized?.url || file.blobUrl || file.url;
+	// Use the optimized URL first if available. If not, use the URL directly if its an image, otherwise use the thumb URL
+	return file.optimized?.url || (isImage(file) ? (file.blobUrl || file.url) : file.thumb?.url);
 }
 
 function getThumbUrl(file) {