quasar-ui-danx 0.3.25 → 0.3.27

package/package.json

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

package/src/components/ActionTable/Form/RenderedForm.vue

@@ -1,109 +1,109 @@
 <template>
-  <div class="rendered-form">
-    <div
-      v-if="form.variations > 1"
-      class="mb-4"
-    >
-      <QTabs
-        v-model="currentVariation"
-        class="text-xs"
-      >
-        <QTab
-          v-for="(name, index) in variationNames"
-          :key="name"
-          :name="name"
-          class="p-0"
-          content-class="w-full"
-        >
-          <div class="flex flex-nowrap items-center text-sm w-full">
-            <div
-              v-if="!isVariationFormComplete(name)"
-              class="variation-missing-icon pl-1"
-            >
-              <MissingIcon class="text-red-400 w-4" />
-              <QTooltip>Creative Form Incomplete</QTooltip>
-            </div>
-            <div class="flex-grow">
-              {{ name || "1" }}
-            </div>
-            <div
-              v-if="!disable && !readonly && canModifyVariations"
-              class="flex flex-nowrap items-center mr-2"
-            >
-              <a
-                class="ml-1 p-1 hover:opacity-100 opacity-20 hover:bg-blue-200 rounded"
-                @click="() => (variationToEdit = name) && (newVariationName = name)"
-              >
-                <EditIcon class="w-3 text-blue-900" />
-              </a>
-              <a
-                v-if="index > 0"
-                class="ml-1 p-1 hover:opacity-100 opacity-20 hover:bg-red-200 rounded"
-                @click="variationToDelete = name"
-              >
-                <RemoveIcon class="w-3 text-red-900" />
-              </a>
-            </div>
-          </div>
-        </QTab>
-        <QTab
-          v-if="canAddVariation"
-          key="add-new-variation"
-          name="add"
-          class="bg-blue-600 rounded-t-lg !text-white"
-          @click="onAddVariation"
-        >
-          <template v-if="saving">
-            <QSpinnerBall class="w-4" />
-          </template>
-          <template v-else>
-            + Add Variation
-          </template>
-        </QTab>
-      </QTabs>
-    </div>
-    <div
-      v-for="(field, index) in mappedFields"
-      :key="field.id"
-      :class="{ 'mt-4': index > 0 }"
-    >
-      <Component
-        :is="field.component"
-        :key="field.name + '-' + currentVariation"
-        :model-value="getFieldValue(field.name)"
-        :field="field"
-        :label="field.label || undefined"
-        :no-label="noLabel"
-        :show-name="showName"
-        :clearable="field.clearable || clearable"
-        :disable="disable"
-        :readonly="readonly"
-        @update:model-value="onInput(field.name, $event)"
-      />
-    </div>
-    <ConfirmDialog
-      v-if="variationToEdit !== false"
-      title="Change variation name"
-      @confirm="onChangeVariationName"
-      @close="variationToEdit = false"
-    >
-      <TextField
-        v-model="newVariationName"
-        label="Enter name"
-        placeholder="Variation Name"
-        input-class="bg-white"
-      />
-    </ConfirmDialog>
-    <ConfirmDialog
-      v-if="variationToDelete"
-      :title="`Remove variation ${variationToDelete}?`"
-      content="You cannot undo this action. If there was any analytics collected for this variation, it will still be attributed to the ad."
-      confirm-class="bg-red-900 text-white"
-      content-class="w-96"
-      @confirm="onRemoveVariation(variationToDelete)"
-      @close="variationToDelete = ''"
-    />
-  </div>
+	<div class="rendered-form">
+		<div
+			v-if="form.variations > 1"
+			class="mb-4"
+		>
+			<QTabs
+				v-model="currentVariation"
+				class="text-xs"
+			>
+				<QTab
+					v-for="(name, index) in variationNames"
+					:key="name"
+					:name="name"
+					class="p-0"
+					content-class="w-full"
+				>
+					<div class="flex flex-nowrap items-center text-sm w-full">
+						<div
+							v-if="!isVariationFormComplete(name)"
+							class="variation-missing-icon pl-1"
+						>
+							<MissingIcon class="text-red-400 w-4" />
+							<QTooltip>Creative Form Incomplete</QTooltip>
+						</div>
+						<div class="flex-grow">
+							{{ name || "1" }}
+						</div>
+						<div
+							v-if="!disable && !readonly && canModifyVariations"
+							class="flex flex-nowrap items-center mr-2"
+						>
+							<a
+								class="ml-1 p-1 hover:opacity-100 opacity-20 hover:bg-blue-200 rounded"
+								@click="() => (variationToEdit = name) && (newVariationName = name)"
+							>
+								<EditIcon class="w-3 text-blue-900" />
+							</a>
+							<a
+								v-if="index > 0"
+								class="ml-1 p-1 hover:opacity-100 opacity-20 hover:bg-red-200 rounded"
+								@click="variationToDelete = name"
+							>
+								<RemoveIcon class="w-3 text-red-900" />
+							</a>
+						</div>
+					</div>
+				</QTab>
+				<QTab
+					v-if="canAddVariation"
+					key="add-new-variation"
+					name="add"
+					class="bg-blue-600 rounded-t-lg !text-white"
+					@click="onAddVariation"
+				>
+					<template v-if="saving">
+						<QSpinnerBall class="w-4" />
+					</template>
+					<template v-else>
+						+ Add Variation
+					</template>
+				</QTab>
+			</QTabs>
+		</div>
+		<div
+			v-for="(field, index) in mappedFields"
+			:key="field.id"
+			:class="{ 'mt-4': index > 0 }"
+		>
+			<Component
+				:is="field.component"
+				:key="field.name + '-' + currentVariation"
+				:model-value="getFieldValue(field.name)"
+				:field="field"
+				:label="field.label || undefined"
+				:no-label="noLabel"
+				:show-name="showName"
+				:clearable="field.clearable || clearable"
+				:disable="disable"
+				:readonly="readonly"
+				@update:model-value="onInput(field.name, $event)"
+			/>
+		</div>
+		<ConfirmDialog
+			v-if="variationToEdit !== false"
+			title="Change variation name"
+			@confirm="onChangeVariationName"
+			@close="variationToEdit = false"
+		>
+			<TextField
+				v-model="newVariationName"
+				label="Enter name"
+				placeholder="Variation Name"
+				input-class="bg-white"
+			/>
+		</ConfirmDialog>
+		<ConfirmDialog
+			v-if="variationToDelete"
+			:title="`Remove variation ${variationToDelete}?`"
+			content="You cannot undo this action. If there was any analytics collected for this variation, it will still be attributed to the ad."
+			confirm-class="bg-red-900 text-white"
+			content-class="w-96"
+			@confirm="onRemoveVariation(variationToDelete)"
+			@close="variationToDelete = ''"
+		/>
+	</div>
 </template>
 <script setup>
 import { ExclamationCircleIcon as MissingIcon, PencilIcon as EditIcon } from "@heroicons/vue/solid";
@@ -161,8 +161,7 @@ const FORM_FIELD_MAP = {
 const mappedFields = props.form.fields.map((field) => ({
 	placeholder: `Enter ${field.label}`,
 	...field,
-	component: FORM_FIELD_MAP[field.type],
-	default: field.type === "BOOLEAN" ? false : ""
+	component: FORM_FIELD_MAP[field.type]
 }));
 
 const variationNames = computed(() => {
@@ -202,7 +201,7 @@ function createVariation(variation) {
 	return props.form.fields.map((field) => ({
 		variation,
 		name: field.name,
-		value: field.type === "BOOLEAN" ? false : null
+		value: field.default_value === undefined ? null : field.default_value
 	}));
 }
 

package/src/components/ActionTable/tableColumns.ts

@@ -2,81 +2,82 @@ import { computed, ref, watch } from "vue";
 import { getItem, setItem } from "../../helpers";
 
 export interface TableColumn {
-    actionMenu?: object,
-    align?: string,
-    category?: string,
-    class?: string | object,
-    field: string,
-    format?: Function,
-    innerClass?: string | object,
-    style?: string | object,
-    headerStyle?: string | object,
-    isSavingRow?: boolean | Function,
-    label: string,
-    maxWidth?: number,
-    minWidth?: number,
-    name: string,
-    onClick?: Function,
-    required?: boolean,
-    resizeable?: boolean,
-    sortable?: boolean,
-    sortBy?: string,
-    sortByExpression?: string,
-    titleColumns?: Function,
-    vnode?: Function,
+	actionMenu?: object,
+	align?: string,
+	category?: string,
+	class?: string | object,
+	field: string,
+	format?: Function,
+	innerClass?: string | object,
+	style?: string | object,
+	headerStyle?: string | object,
+	isSavingRow?: boolean | Function,
+	label: string,
+	maxWidth?: number,
+	minWidth?: number,
+	name: string,
+	onClick?: Function,
+	required?: boolean,
+	resizeable?: boolean,
+	sortable?: boolean,
+	sortBy?: string,
+	sortByExpression?: string,
+	titleColumns?: Function,
+	vnode?: Function,
 }
 
 export function useTableColumns(name: string, columns: TableColumn[]) {
-    const COLUMN_ORDER_KEY = `${name}-column-order`;
-    const VISIBLE_COLUMNS_KEY = `${name}-visible-columns`;
-    const TITLE_COLUMNS_KEY = `${name}-title-columns`;
+	const COLUMN_ORDER_KEY = `${name}-column-order`;
+	const VISIBLE_COLUMNS_KEY = `${name}-visible-columns`;
+	const TITLE_COLUMNS_KEY = `${name}-title-columns`;
 
-    // The list that defines the order the columns should appear in
-    const columnOrder = ref(getItem(COLUMN_ORDER_KEY) || []);
+	// The list that defines the order the columns should appear in
+	const columnOrder = ref(getItem(COLUMN_ORDER_KEY) || []);
 
-    // Manages visible columns on the table
-    const hiddenColumnNames = ref(getItem(VISIBLE_COLUMNS_KEY, []));
+	// Manages visible columns on the table
+	const hiddenColumnNames = ref(getItem(VISIBLE_COLUMNS_KEY, []));
 
-    // Title columns will have their name appear on the first column of the table as part of the records' title
-    const titleColumnNames = ref(getItem(TITLE_COLUMNS_KEY, []));
+	// Title columns will have their name appear on the first column of the table as part of the records' title
+	const titleColumnNames = ref(getItem(TITLE_COLUMNS_KEY, []));
 
-    // Columns that should be locked to the left side of the table
-    const lockedColumns = computed(() => orderedColumns.value.slice(0, 1));
+	// Columns that should be locked to the left side of the table
+	const lockedColumns = computed(() => orderedColumns.value.slice(0, 1));
 
-    // The resolved list of columns in the order they should appear in
-    const orderedColumns = computed(() => [...columns].sort((a, b) => {
-        const aIndex = columnOrder.value.indexOf(a.name);
-        const bIndex = columnOrder.value.indexOf(b.name);
-        return aIndex === -1 ? 1 : bIndex === -1 ? -1 : aIndex - bIndex;
-    }));
+	// The resolved list of columns in the order they should appear in
+	const orderedColumns = computed(() => [...columns].sort((a, b) => {
+		const aIndex = columnOrder.value.indexOf(a.name);
+		const bIndex = columnOrder.value.indexOf(b.name);
+		return aIndex === -1 ? 1 : bIndex === -1 ? -1 : aIndex - bIndex;
+	}));
 
-    // The ordered list of columns. The ordering of this list is editable and will be stored in localStorage
-    const sortableColumns = computed({
-        get() {
-            return orderedColumns.value.slice(1);
-        },
-        set(newColumns) {
-            columnOrder.value = [...lockedColumns.value.map(c => c.name), ...newColumns.map(c => c.name)];
-            setItem(COLUMN_ORDER_KEY, columnOrder.value);
-        }
-    });
+	// The ordered list of columns. The ordering of this list is editable and will be stored in localStorage
+	const sortableColumns = computed({
+		get() {
+			return orderedColumns.value.slice(1);
+		},
+		set(newColumns) {
+			columnOrder.value = [...lockedColumns.value.map(c => c.name), ...newColumns.map(c => c.name)];
+			setItem(COLUMN_ORDER_KEY, columnOrder.value);
+		}
+	});
 
-    // The list of columns that are visible. To edit the visible columns, edit the hiddenColumnNames list
-    const visibleColumns = computed(() => orderedColumns.value.filter(c => !hiddenColumnNames.value.includes(c.name)));
+	// The list of columns that are visible. To edit the visible columns, edit the hiddenColumnNames list
+	const visibleColumns = computed(() => orderedColumns.value.filter(c => !hiddenColumnNames.value.includes(c.name)));
 
-    // The list of columns that should be included in the title of a row
-    const orderedTitleColumns = computed(() => orderedColumns.value.filter(c => titleColumnNames.value.includes(c.name)));
+	// The list of columns that should be included in the title of a row
+	const orderedTitleColumns = computed(() => orderedColumns.value.filter(c => titleColumnNames.value.includes(c.name)));
 
-    // Save changes to the list of hidden columns in localStorage
-    watch(() => hiddenColumnNames.value, () => setItem(VISIBLE_COLUMNS_KEY, hiddenColumnNames.value));
-    watch(() => titleColumnNames.value, () => setItem(TITLE_COLUMNS_KEY, titleColumnNames.value));
+	// Save changes to the list of hidden columns in localStorage
+	watch(() => hiddenColumnNames.value, () => setItem(VISIBLE_COLUMNS_KEY, hiddenColumnNames.value));
+	watch(() => titleColumnNames.value, () => setItem(TITLE_COLUMNS_KEY, titleColumnNames.value));
 
-    return {
-        sortableColumns,
-        lockedColumns,
-        visibleColumns,
-        hiddenColumnNames,
-        titleColumnNames,
-        orderedTitleColumns
-    };
+	return {
+		sortableColumns,
+		lockedColumns,
+		visibleColumns,
+		hiddenColumnNames,
+		columnOrder,
+		titleColumnNames,
+		orderedTitleColumns
+	};
 }