quasar-ui-danx 0.4.12 → 0.4.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quasar-ui-danx",
-  "version": "0.4.12",
+  "version": "0.4.14",
   "author": "Dan <dan@flytedesk.com>",
   "description": "DanX Vue / Quasar component library",
   "license": "MIT",
@@ -57,7 +57,8 @@
     "danx-icon": "^1.0.2",
     "exifreader": "^4.21.1",
     "gsap": "^3.12.5",
-    "luxon": "^3.4.4"
+    "luxon": "^3.4.4",
+    "yaml": "^2.4.5"
   },
   "browserslist": [
     "last 4 Chrome versions",

package/src/components/ActionTable/ActionTable.vue

@@ -1,66 +1,66 @@
 <template>
-  <div
-    class="dx-action-table overflow-hidden"
-    :class="{'dx-no-data': !hasData, 'dx-is-loading': loadingList || loadingSummary, 'dx-is-loading-list': loadingList}"
-  >
-    <ActionVnode />
-    <QTable
-      ref="actionTable"
-      :selected="selectedRows"
-      :pagination="pagination"
-      :columns="tableColumns"
-      :loading="loadingList || loadingSummary"
-      :rows="pagedItems?.data || []"
-      :binary-state-sort="false"
-      selection="multiple"
-      :rows-per-page-options="rowsPerPageOptions"
-      class="sticky-column sticky-header w-full h-full !border-0"
-      :color="color"
-      @update:selected="$emit('update:selected-rows', $event)"
-      @update:pagination="() => {}"
-      @request="(e) => $emit('update:pagination', {...e.pagination, __sort: mapSortBy(e.pagination, tableColumns)})"
-    >
-      <template #no-data>
-        <slot name="empty">
-          <EmptyTableState :text="`There are no ${label.toLowerCase()} matching the applied filter`" />
-        </slot>
-      </template>
-      <template #top-row>
-        <TableSummaryRow
-          v-if="hasData"
-          :label="label"
-          :item-count="summary?.count || 0"
-          :selected-count="selectedRows.length"
-          :sticky-colspan="summaryColSpan"
-          :loading="loadingSummary"
-          :summary="summary"
-          :columns="tableColumns"
-          @clear="$emit('update:selected-rows', [])"
-        />
-      </template>
-      <template #header-cell="rowProps">
-        <ActionTableHeaderColumn
-          v-model="columnSettings"
-          :row-props="rowProps"
-          :name="name"
-          @update:model-value="onUpdateColumnSettings"
-        />
-      </template>
-      <template #body-cell="rowProps">
-        <ActionTableColumn
-          :key="rowProps.key"
-          :row-props="rowProps"
-          :settings="columnSettings[rowProps.col.name]"
-        >
-          <slot
-            :column-name="rowProps.col.name"
-            :row="rowProps.row"
-            :value="rowProps.value"
-          />
-        </ActionTableColumn>
-      </template>
-    </QTable>
-  </div>
+	<div
+		class="dx-action-table overflow-hidden"
+		:class="{'dx-no-data': !hasData, 'dx-is-loading': loadingList || loadingSummary, 'dx-is-loading-list': loadingList}"
+	>
+		<ActionVnode />
+		<QTable
+			ref="actionTable"
+			:selected="selectedRows"
+			:pagination="pagination"
+			:columns="tableColumns"
+			:loading="loadingList || loadingSummary"
+			:rows="pagedItems?.data || []"
+			:binary-state-sort="false"
+			:selection="selection"
+			:rows-per-page-options="rowsPerPageOptions"
+			class="sticky-column sticky-header w-full h-full !border-0"
+			:color="color"
+			@update:selected="$emit('update:selected-rows', $event)"
+			@update:pagination="() => {}"
+			@request="(e) => $emit('update:pagination', {...e.pagination, __sort: mapSortBy(e.pagination, tableColumns)})"
+		>
+			<template #no-data>
+				<slot name="empty">
+					<EmptyTableState :text="`There are no ${label.toLowerCase()} matching the applied filter`" />
+				</slot>
+			</template>
+			<template #top-row>
+				<TableSummaryRow
+					v-if="hasData"
+					:label="label"
+					:item-count="summary?.count || 0"
+					:selected-count="selectedRows.length"
+					:sticky-colspan="summaryColSpan"
+					:loading="loadingSummary"
+					:summary="summary"
+					:columns="tableColumns"
+					@clear="$emit('update:selected-rows', [])"
+				/>
+			</template>
+			<template #header-cell="rowProps">
+				<ActionTableHeaderColumn
+					v-model="columnSettings"
+					:row-props="rowProps"
+					:name="name"
+					@update:model-value="onUpdateColumnSettings"
+				/>
+			</template>
+			<template #body-cell="rowProps">
+				<ActionTableColumn
+					:key="rowProps.key"
+					:row-props="rowProps"
+					:settings="columnSettings[rowProps.col.name]"
+				>
+					<slot
+						:column-name="rowProps.col.name"
+						:row="rowProps.row"
+						:value="rowProps.value"
+					/>
+				</ActionTableColumn>
+			</template>
+		</QTable>
+	</div>
 </template>
 
 <script setup lang="ts">
@@ -89,6 +89,7 @@ export interface Props {
 	columns: TableColumn[];
 	rowsPerPageOptions?: number[];
 	summaryColSpan?: number;
+	selection: "multiple" | "single";
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -97,7 +98,8 @@ const props = withDefaults(defineProps<Props>(), {
 	summary: null,
 	loadingSummary: false,
 	rowsPerPageOptions: () => [10, 25, 50, 100],
-	summaryColSpan: null
+	summaryColSpan: null,
+	selection: "multiple"
 });
 
 const actionTable = ref(null);

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

@@ -1,16 +1,19 @@
 <template>
-  <div>
-    <RenderedForm
-      v-bind="renderedFormProps"
-      v-model:values="input"
-      empty-value=""
-      :saving="action.isApplying"
-      @update:values="action.trigger(target, input)"
-    />
-  </div>
+	<div>
+		<RenderedForm
+			v-bind="renderedFormProps"
+			v-model:values="input"
+			empty-value=""
+			:saved-at="target.updated_at"
+			:saving="action.isApplying"
+			@update:values="action.trigger(target, input)"
+		>
+			<slot />
+		</RenderedForm>
+	</div>
 </template>
 <script setup lang="ts">
-import { ref, watch } from "vue";
+import { Ref, ref, watch } from "vue";
 import { ActionTargetItem, AnyObject, Form, ResourceAction } from "../../../types";
 import RenderedForm from "./RenderedForm.vue";
 
@@ -27,7 +30,10 @@ interface ActionFormProps {
 	savingClass?: string;
 }
 
-const props = defineProps<ActionFormProps>();
+const props = withDefaults(defineProps<ActionFormProps>(), {
+	fieldClass: "",
+	savingClass: undefined
+});
 const renderedFormProps = {
 	form: props.form,
 	noLabel: props.noLabel,
@@ -39,7 +45,7 @@ const renderedFormProps = {
 	savingClass: props.savingClass
 };
 
-const input: AnyObject = ref({ ...props.target });
+const input: Ref<AnyObject> = ref({ ...props.target });
 const fieldStatus: AnyObject = {};
 
 // Only update field values from target changes when the field is not already being saved

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

@@ -62,32 +62,37 @@
         </QTab>
       </QTabs>
     </div>
-    <div
+    <template
       v-for="(field, index) in mappedFields"
       :key="field.id"
-      :class="{ 'mt-4': index > 0, [fieldClass]: true }"
     >
-      <RenderVnode
-        v-if="field.vnode"
-        :vnode="field.vnode"
-        :field="field"
-        :props="getVnodeProps(field)"
-        @update:model-value="onInput(field.name, $event)"
-      />
-      <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>
+      <div
+        v-show="isFieldEnabled(field)"
+        :class="{ 'mt-4': index > 0, [fieldClass]: true }"
+      >
+        <RenderVnode
+          v-if="field.vnode"
+          :vnode="field.vnode"
+          :props="getVnodeProps(field)"
+          :params="fieldInputs"
+          @update:model-value="onInput(field.name, $event)"
+        />
+        <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>
+    </template>
+    <slot />
     <div
       v-if="savedAt"
       :class="savingClass"
@@ -133,10 +138,10 @@
 </template>
 <script setup lang="ts">
 import { ExclamationCircleIcon as MissingIcon, PencilIcon as EditIcon } from "@heroicons/vue/solid";
-import { computed, ref } from "vue";
+import { computed, onBeforeUnmount, onMounted, ref } from "vue";
 import { fDateTime, FlashMessages, incrementName, replace } from "../../../helpers";
 import { TrashIcon as RemoveIcon } from "../../../svg";
-import { AnyObject, Form, FormFieldValue } from "../../../types";
+import { AnyObject, FormFieldValue, RenderedFormProps } from "../../../types";
 import { ConfirmDialog, RenderVnode } from "../../Utility";
 import {
 	BooleanField,
@@ -150,22 +155,6 @@ import {
 	WysiwygField
 } from "./Fields";
 
-export interface RenderedFormProps {
-	values?: FormFieldValue[] | object | null;
-	form: Form;
-	noLabel?: boolean;
-	showName?: boolean;
-	disable?: boolean;
-	readonly?: boolean;
-	saving?: boolean;
-	clearable?: boolean;
-	emptyValue?: string | number | boolean;
-	canModifyVariations?: boolean;
-	fieldClass?: string;
-	savingClass?: string;
-	savedAt?: string;
-}
-
 const props = withDefaults(defineProps<RenderedFormProps>(), {
 	values: null,
 	emptyValue: undefined,
@@ -191,16 +180,39 @@ const FORM_FIELD_MAP = {
 const mappedFields = props.form.fields.map((field) => ({
 	placeholder: `Enter ${field.label}`,
 	...field,
-	component: field.component || FORM_FIELD_MAP[field.type],
-	default: field.type === "BOOLEAN" ? false : ""
+	component: field.component || FORM_FIELD_MAP[field.type]
 }));
 
 const fieldResponses = computed(() => {
-	if (!props.values) return [];
-	if (Array.isArray(props.values)) return props.values;
-	return Object.entries(props.values).map(([name, value]) => ({ name, value, variation: "" }));
+	const values = props.values;
+	if (!values) return [];
+	if (Array.isArray(values)) return values;
+
+	return Object.entries(values).filter((entry) => mappedFields.find(mf => mf.name === entry[0])).map(([name, value]) => ({
+		name,
+		value,
+		variation: ""
+	}));
+});
+
+const fieldInputs = computed(() => {
+	const inputs: AnyObject = {};
+	for (const field of mappedFields) {
+		inputs[field.name] = getFieldValue(field.name);
+	}
+	return inputs;
 });
 
+function isFieldEnabled(field) {
+	if (field.enabled === undefined) return true;
+
+	if (typeof field.enabled === "function") {
+		return field.enabled(fieldInputs.value);
+	}
+
+	return field.enabled;
+}
+
 function getVnodeProps(field) {
 	return {
 		modelValue: getFieldValue(field.name),
@@ -246,11 +258,38 @@ function onInput(name: string, value: any) {
 	updateValues(newValues);
 }
 
+function updateValues(values: FormFieldValue[]) {
+	let updatedValues: FormFieldValue[] | object = values;
+
+	if (!Array.isArray(props.values)) {
+		updatedValues = values.reduce((acc: AnyObject, v) => {
+			acc[v.name] = v.value;
+			return acc;
+		}, {});
+	}
+
+	emit("update:values", updatedValues);
+}
+
+onMounted(() => {
+	window.addEventListener("beforeunload", handleBeforeUnload);
+});
+onBeforeUnmount(() => {
+	window.removeEventListener("beforeunload", handleBeforeUnload);
+});
+
+
+function handleBeforeUnload(event: BeforeUnloadEvent) {
+	if (props.saving) {
+		return event.returnValue = "Changes are currently being saved. If you leave now, you might lose unsaved changes.";
+	}
+}
+
 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
 	}));
 }
 
@@ -287,19 +326,6 @@ function onChangeVariationName() {
 	newVariationName.value = "";
 }
 
-function updateValues(values: FormFieldValue[]) {
-	let updatedValues: FormFieldValue[] | object = values;
-
-	if (!Array.isArray(props.values)) {
-		updatedValues = values.reduce((acc: AnyObject, v) => {
-			acc[v.name] = v.value;
-			return acc;
-		}, {});
-	}
-
-	emit("update:values", updatedValues);
-}
-
 function onRemoveVariation(name: string) {
 	if (!name) return;
 

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

@@ -1,70 +1,72 @@
 <template>
-  <div class="flex flex-grow flex-col flex-nowrap overflow-hidden h-full">
-    <slot name="top" />
-    <slot name="toolbar">
-      <ActionToolbar
-        :title="title"
-        :refresh-button="refreshButton"
-        :actions="actions?.filter(a => a.batch)"
-        :action-target="controller.selectedRows.value"
-        :exporter="controller.exportList"
-        :loading="controller.isLoadingList.value || controller.isLoadingSummary.value"
-        @refresh="controller.refreshAll"
-      >
-        <template #default>
-          <slot name="action-toolbar" />
-        </template>
-      </ActionToolbar>
-    </slot>
-    <div class="flex flex-nowrap flex-grow overflow-hidden w-full">
-      <slot name="filters">
-        <CollapsableFiltersSidebar
-          v-if="activeFilter"
-          :name="controller.name"
-          :show-filters="showFilters"
-          :filters="filters"
-          :active-filter="activeFilter"
-          class="dx-action-table-filters"
-          @update:active-filter="controller.setActiveFilter"
-        />
-      </slot>
-      <slot>
-        <ActionTable
-          class="flex-grow"
-          :pagination="controller.pagination.value"
-          :selected-rows="controller.selectedRows.value"
-          :label="controller.label"
-          :name="controller.name"
-          :class="tableClass"
-          :summary="controller.summary.value"
-          :loading-list="controller.isLoadingList.value"
-          :loading-summary="controller.isLoadingSummary.value"
-          :paged-items="controller.pagedItems.value"
-          :columns="columns"
-          @update:selected-rows="controller.setSelectedRows"
-          @update:pagination="controller.setPagination"
-        />
-      </slot>
-      <slot name="panels">
-        <PanelsDrawer
-          v-if="activeItem && panels"
-          :title="panelTitle"
-          :model-value="activePanel"
-          :active-item="activeItem"
-          :panels="panels"
-          @update:model-value="panel => controller.activatePanel(activeItem, panel)"
-          @close="controller.setActiveItem(null)"
-        >
-          <template #controls>
-            <PreviousNextControls
-              :is-loading="controller.isLoadingList.value"
-              @next="controller.getNextItem"
-            />
-          </template>
-        </PanelsDrawer>
-      </slot>
-    </div>
-  </div>
+	<div class="flex flex-grow flex-col flex-nowrap overflow-hidden h-full">
+		<slot name="top" />
+		<slot name="toolbar">
+			<ActionToolbar
+				v-if="!hideToolbar"
+				:title="title"
+				:refresh-button="refreshButton"
+				:actions="actions?.filter(a => a.batch)"
+				:action-target="controller.selectedRows.value"
+				:exporter="controller.exportList"
+				:loading="controller.isLoadingList.value || controller.isLoadingSummary.value"
+				@refresh="controller.refreshAll"
+			>
+				<template #default>
+					<slot name="action-toolbar" />
+				</template>
+			</ActionToolbar>
+		</slot>
+		<div class="flex flex-nowrap flex-grow overflow-hidden w-full">
+			<slot name="filters">
+				<CollapsableFiltersSidebar
+					v-if="activeFilter"
+					:name="controller.name"
+					:show-filters="showFilters"
+					:filters="filters"
+					:active-filter="activeFilter"
+					class="dx-action-table-filters"
+					@update:active-filter="controller.setActiveFilter"
+				/>
+			</slot>
+			<slot>
+				<ActionTable
+					class="flex-grow"
+					:pagination="controller.pagination.value"
+					:selected-rows="controller.selectedRows.value"
+					:label="controller.label"
+					:name="controller.name"
+					:class="tableClass"
+					:summary="controller.summary.value"
+					:loading-list="controller.isLoadingList.value"
+					:loading-summary="controller.isLoadingSummary.value"
+					:paged-items="controller.pagedItems.value"
+					:columns="columns"
+					:selection="selection"
+					@update:selected-rows="controller.setSelectedRows"
+					@update:pagination="controller.setPagination"
+				/>
+			</slot>
+			<slot name="panels">
+				<PanelsDrawer
+					v-if="activeItem && panels"
+					:title="panelTitle"
+					:model-value="activePanel"
+					:active-item="activeItem"
+					:panels="panels"
+					@update:model-value="panel => controller.activatePanel(activeItem, panel)"
+					@close="controller.setActiveItem(null)"
+				>
+					<template #controls>
+						<PreviousNextControls
+							:is-loading="controller.isLoadingList.value"
+							@next="controller.getNextItem"
+						/>
+					</template>
+				</PanelsDrawer>
+			</slot>
+		</div>
+	</div>
 </template>
 <script setup lang="ts">
 import { computed } from "vue";
@@ -75,10 +77,8 @@ import ActionTable from "../ActionTable.vue";
 import { CollapsableFiltersSidebar } from "../Filters";
 import { ActionToolbar } from "../Toolbars";
 
-const props = defineProps<{
+export interface ActionTableLayoutProps {
 	title?: string;
-	refreshButton: boolean;
-	showFilters: boolean;
 	controller: ActionController;
 	columns: TableColumn[];
 	filters?: FilterGroup[];
@@ -87,7 +87,17 @@ const props = defineProps<{
 	exporter?: () => Promise<void>;
 	panelTitleField?: string;
 	tableClass?: string;
-}>();
+	refreshButton?: boolean;
+	showFilters?: boolean;
+	hideToolbar?: boolean;
+	selection?: "multiple" | "single";
+}
+
+const props = withDefaults(defineProps<ActionTableLayoutProps>(), {
+	title: "",
+	tableClass: "",
+	selection: "multiple"
+});
 
 const activeFilter = computed(() => props.controller.activeFilter.value);
 const activeItem = computed(() => props.controller.activeItem.value);

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

@@ -1,33 +1,33 @@
 <template>
-  <div class="dx-action-toolbar flex items-center">
-    <div class="flex-grow px-6">
-      <slot name="title">
-        <h4 v-if="title">
-          {{ title }}
-        </h4>
-      </slot>
-    </div>
-    <div class="py-3 px-6 flex items-center flex-nowrap">
-      <slot />
-      <RefreshButton
-        v-if="refreshButton"
-        :loading="loading"
-        @click="$emit('refresh')"
-      />
-      <ExportButton
-        v-if="exporter"
-        :exporter="exporter"
-        class="ml-4"
-      />
-      <ActionMenu
-        v-if="actions && actions.length > 0"
-        class="ml-4 dx-batch-actions"
-        :target="actionTarget"
-        :actions="actions"
-      />
-      <slot name="after" />
-    </div>
-  </div>
+	<div class="dx-action-toolbar flex items-center">
+		<div class="flex-grow px-6">
+			<slot name="title">
+				<h4 v-if="title">
+					{{ title }}
+				</h4>
+			</slot>
+		</div>
+		<div class="py-3 flex items-center flex-nowrap">
+			<slot />
+			<RefreshButton
+				v-if="refreshButton"
+				:loading="loading"
+				@click="$emit('refresh')"
+			/>
+			<ExportButton
+				v-if="exporter"
+				:exporter="exporter"
+				class="ml-4"
+			/>
+			<ActionMenu
+				v-if="actions && actions.length > 0"
+				class="ml-4 dx-batch-actions"
+				:target="actionTarget"
+				:actions="actions"
+			/>
+			<slot name="after" />
+		</div>
+	</div>
 </template>
 <script setup lang="ts">
 import { ActionTargetItem, AnyObject, ResourceAction } from "../../../types";