quasar-ui-danx 0.4.27 → 0.4.29

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

@@ -23,6 +23,7 @@
         :disable="disabled"
         :label-slot="!noLabel"
         :input-class="inputClass"
+        :rows="rows"
         :class="{'dx-input-prepend-label': prependLabel}"
         stack-label
         :type="type"
@@ -71,6 +72,7 @@ withDefaults(defineProps<TextFieldProps>(), {
 	labelClass: "",
 	inputClass: "",
 	maxLength: null,
+	rows: 3,
 	debounce: 0,
 	placeholder: null
 });

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

@@ -19,6 +19,7 @@ export { default as NumberField } from "./NumberField.vue";
 export { default as NumberRangeField } from "./NumberRangeField.vue";
 export { default as SelectDrawer } from "./SelectDrawer.vue";
 export { default as SelectField } from "./SelectField.vue";
+export { default as SelectOrCreateField } from "./SelectOrCreateField.vue";
 export { default as SelectWithChildrenField } from "./SelectWithChildrenField.vue";
 export { default as SingleFileField } from "./SingleFileField.vue";
 export { default as SliderNumberField } from "./SliderNumberField.vue";

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

@@ -93,25 +93,11 @@
       </div>
     </template>
     <slot />
-    <div
-      v-if="savedAt"
-      :class="savingClass"
-      class="dx-saving-indicator flex items-center flex-nowrap"
-    >
-      <slot
-        v-if="saving"
-        name="saving"
-      >
-        Saving...
-        <QSpinnerPie class="ml-2" />
-      </slot>
-      <slot
-        v-else
-        name="saved"
-      >
-        Saved at {{ fDateTime(savedAt, { format: "M/d/yy h:mm:ssa" }) }}
-      </slot>
-    </div>
+    <SaveStateIndicator
+      :saving="saving"
+      :saved-at="savedAt"
+      :saving-class="savingClass"
+    />
     <ConfirmDialog
       v-if="variationToEdit !== false"
       title="Change variation name"
@@ -139,7 +125,7 @@
 <script setup lang="ts">
 import { ExclamationCircleIcon as MissingIcon, PencilIcon as EditIcon } from "@heroicons/vue/solid";
 import { computed, onBeforeUnmount, onMounted, ref } from "vue";
-import { fDateTime, FlashMessages, incrementName, replace } from "../../../helpers";
+import { FlashMessages, incrementName, replace } from "../../../helpers";
 import { TrashIcon as RemoveIcon } from "../../../svg";
 import { AnyObject, FormFieldValue, RenderedFormProps } from "../../../types";
 import { ConfirmDialog, RenderVnode } from "../../Utility";
@@ -154,6 +140,7 @@ import {
 	TextField,
 	WysiwygField
 } from "./Fields";
+import SaveStateIndicator from "./Utilities/SaveStateIndicator";
 
 const props = withDefaults(defineProps<RenderedFormProps>(), {
 	values: null,

package/src/components/ActionTable/Form/Utilities/MaxLengthCounter.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="maxLength"
-    class="danx-input-chars mt-1"
+    class="danx-input-chars"
     :class="{'danx-input-chars--error': length > maxLength}"
   >
     {{ fNumber(length) }} / {{ fNumber(maxLength) }} characters

package/src/components/ActionTable/Form/Utilities/SaveStateIndicator.vue

@@ -0,0 +1,37 @@
+<template>
+  <div
+    :class="savingClass"
+    class="dx-saving-indicator flex items-center flex-nowrap"
+  >
+    <slot
+      v-if="saving"
+      name="saving"
+    >
+      Saving...
+      <QSpinnerPie class="ml-2" />
+    </slot>
+    <slot
+      v-else
+      name="saved"
+    >
+      <template v-if="savedAt">
+        Saved at {{ fDateTime(savedAt, { format: "M/d/yy h:mm:ssa" }) }}
+      </template>
+      <template v-else>
+        Not saved
+      </template>
+    </slot>
+  </div>
+</template>
+<script setup lang="ts">
+import { fDateTime } from "../../../../helpers";
+
+withDefaults(defineProps<{
+	saving?: boolean;
+	savedAt?: string;
+	savingClass?: string;
+}>(), {
+	savingClass: "text-sm text-slate-500",
+	savedAt: ""
+});
+</script>

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

@@ -1 +1,2 @@
 export { default as MaxLengthCounter } from "./MaxLengthCounter.vue";
+export { default as SaveStateIndicator } from "./SaveStateIndicator.vue";

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

@@ -6,11 +6,13 @@
         v-if="!hideToolbar"
         :title="title"
         :refresh-button="refreshButton"
-        :actions="actions?.filter(a => a.batch)"
+        :create-button="createButton"
+        :actions="controller.batchActions"
         :action-target="controller.selectedRows.value"
         :exporter="controller.exportList"
         :loading="controller.isLoadingList.value || controller.isLoadingSummary.value"
         @refresh="controller.refreshAll"
+        @create="controller.action && controller.action('create')"
       >
         <template #default>
           <slot name="action-toolbar" />
@@ -23,7 +25,7 @@
           v-if="activeFilter"
           :name="controller.name"
           :show-filters="showFilters"
-          :filters="filters"
+          :filters="controller.filters?.value"
           :active-filter="activeFilter"
           class="dx-action-table-filters"
           @update:active-filter="controller.setActiveFilter"
@@ -37,11 +39,12 @@
           :label="controller.label"
           :name="controller.name"
           :class="tableClass"
+          :menu-actions="controller.menuActions"
           :summary="controller.summary.value"
           :loading-list="controller.isLoadingList.value"
           :loading-summary="controller.isLoadingSummary.value"
           :paged-items="controller.pagedItems.value"
-          :columns="columns"
+          :columns="controller.columns || []"
           :selection="selection"
           @update:selected-rows="controller.setSelectedRows"
           @update:pagination="controller.setPagination"
@@ -49,11 +52,11 @@
       </slot>
       <slot name="panels">
         <PanelsDrawer
-          v-if="activeItem && panels"
+          v-if="activeItem && controller.panels"
           :title="panelTitle"
           :model-value="activePanel"
-          :active-item="activeItem"
-          :panels="panels"
+          :target="activeItem"
+          :panels="controller.panels"
           @update:model-value="panel => controller.activatePanel(activeItem, panel)"
           @close="controller.setActiveItem(null)"
         >
@@ -70,7 +73,7 @@
 </template>
 <script setup lang="ts">
 import { computed } from "vue";
-import { ActionController, ActionPanel, FilterGroup, ResourceAction, TableColumn } from "../../../types";
+import { DanxController } from "../../../types";
 import { PanelsDrawer } from "../../PanelsDrawer";
 import { PreviousNextControls } from "../../Utility";
 import ActionTable from "../ActionTable.vue";
@@ -78,30 +81,24 @@ import { CollapsableFiltersSidebar } from "../Filters";
 import { ActionToolbar } from "../Toolbars";
 
 export interface ActionTableLayoutProps {
-	title?: string;
-	controller: ActionController;
-	columns: TableColumn[];
-	filters?: FilterGroup[];
-	panels?: ActionPanel[];
-	actions?: ResourceAction[];
+	controller: DanxController;
 	exporter?: () => Promise<void>;
+	hideToolbar?: boolean;
 	panelTitleField?: string;
-	tableClass?: string;
 	refreshButton?: boolean;
-	showFilters?: boolean;
-	hideToolbar?: boolean;
+	createButton?: boolean;
 	selection?: "multiple" | "single";
+	showFilters?: boolean;
+	tableClass?: string;
+	title?: string;
 }
 
 const props = withDefaults(defineProps<ActionTableLayoutProps>(), {
-	title: "",
-	tableClass: "",
-	selection: "multiple",
-	filters: undefined,
-	panels: undefined,
-	actions: undefined,
 	exporter: undefined,
-	panelTitleField: ""
+	panelTitleField: "",
+	selection: "multiple",
+	tableClass: "",
+	title: ""
 });
 
 const activeFilter = computed(() => props.controller.activeFilter.value);

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

@@ -1,46 +1,54 @@
 <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 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 />
+      <QBtn
+        v-if="createButton"
+        class="bg-green-900 mr-4 px-4"
+        @click="$emit('create')"
+      >
+        Create
+      </QBtn>
+      <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";
 import { ExportButton, RefreshButton } from "../../Utility";
 import ActionMenu from "../ActionMenu";
 
-defineEmits(["refresh"]);
+defineEmits(["refresh", "create"]);
 defineProps<{
-	title?: string,
-	actions?: ResourceAction[],
-	actionTarget?: ActionTargetItem[],
-	refreshButton?: boolean,
-	loading?: boolean,
-	exporter?: (filter?: AnyObject) => void | Promise<void>
+	title?: string;
+	actions?: ResourceAction[];
+	actionTarget?: ActionTargetItem[];
+	createButton?: boolean;
+	refreshButton?: boolean;
+	loading?: boolean;
+	exporter?: (filter?: AnyObject) => void | Promise<void>;
 }>();
 </script>

package/src/components/ActionTable/{listControls.ts → controls.ts}

@@ -1,20 +1,21 @@
-import { computed, Ref, ref, shallowRef, watch } from "vue";
+import { computed, ref, shallowRef, watch } from "vue";
 import { RouteParams, Router } from "vue-router";
 import { danxOptions } from "../../config";
 import { getItem, latestCallOnly, setItem, storeObject, waitForRef } from "../../helpers";
 import {
-	ActionController,
 	ActionTargetItem,
 	AnyObject,
 	FilterGroup,
+	ListController,
 	ListControlsFilter,
 	ListControlsOptions,
 	ListControlsPagination,
-	PagedItems
+	PagedItems,
+	Ref
 } from "../../types";
 import { getFilterFromUrl } from "./listHelpers";
 
-export function useListControls(name: string, options: ListControlsOptions): ActionController {
+export function useControls(name: string, options: ListControlsOptions): ListController {
 	let isInitialized = false;
 	const PAGE_SETTINGS_KEY = `dx-${name}-pager`;
 	const pagedItems = shallowRef<PagedItems | null>(null);
@@ -72,12 +73,13 @@ export function useListControls(name: string, options: ListControlsOptions): Act
 
 	async function loadList() {
 		if (!isInitialized) return;
-		isLoadingList.value = true;
+		// isLoadingList.value = true;
 		try {
 			setPagedItems(await options.routes.list(pager.value));
-			isLoadingList.value = false;
 		} catch (e) {
 			// Fail silently
+		} finally {
+			isLoadingList.value = false;
 		}
 	}
 
@@ -91,9 +93,10 @@ export function useListControls(name: string, options: ListControlsOptions): Act
 		}
 		try {
 			summary.value = await options.routes.summary(summaryFilter);
-			isLoadingSummary.value = false;
 		} catch (e) {
 			// Fail silently
+		} finally {
+			isLoadingSummary.value = false;
 		}
 	}
 
@@ -116,9 +119,10 @@ export function useListControls(name: string, options: ListControlsOptions): Act
 		isLoadingFilters.value = true;
 		try {
 			fieldOptions.value = await options.routes.fieldOptions(activeFilter.value) || {};
-			isLoadingFilters.value = false;
 		} catch (e) {
 			// Fail silently
+		} finally {
+			isLoadingFilters.value = false;
 		}
 	}
 
@@ -490,7 +494,7 @@ export function useListControls(name: string, options: ListControlsOptions): Act
 		activeItem,
 		activePanel,
 
-		// Actions
+		// List controls
 		initialize,
 		resetPaging,
 		setPagination,

package/src/components/ActionTable/index.ts

@@ -1,8 +1,8 @@
 export * from "./Columns";
+export * from "./controls";
 export * from "./Filters";
 export * from "./Form";
 export * from "./Layouts";
-export * from "./listControls";
 export * from "./listHelpers";
 export * from "./tableColumns";
 export * from "./Toolbars";

package/src/components/DragAndDrop/ListItemDraggable.vue

@@ -1,12 +1,16 @@
 <template>
   <div
-    class="cursor-move"
+    :class="{'cursor-move': !showHandle}"
     draggable="true"
-    @dragstart="dragAndDrop.dragStart"
+    @dragstart.stop="dragAndDrop.dragStart"
     @dragend="dragAndDrop.dragEnd"
   >
-    <div class="flex items-center">
-      <div v-if="showHandle">
+    <div :class="contentClass">
+      <div
+        v-if="showHandle"
+        class="cursor-move"
+        :class="handleClass"
+      >
         <SvgImg
           :svg="DragHandleIcon"
           class="w-4 h-4"
@@ -19,39 +23,49 @@
     </div>
   </div>
 </template>
-<script setup>
+<script setup lang="ts">
 import { DragHandleDotsIcon as DragHandleIcon } from "../../svg";
 import { SvgImg } from "../Utility";
 import { ListDragAndDrop } from "./listDragAndDrop";
 
-const emit = defineEmits(["position", "update:list-items"]);
-const props = defineProps({
-  dropZone: {
-    type: [Function, String],
-    required: true
-  },
-  direction: {
-    type: String,
-    default: "vertical",
-    validator: (value) => ["vertical", "horizontal"].includes(value)
-  },
-  showHandle: Boolean,
-  listItems: {
-    type: Array,
-    default: null
-  }
+const emit = defineEmits(["position", "update:list-items", "drop-zone"]);
+const dragging = defineModel<boolean>();
+const props = withDefaults(defineProps<{
+	dropZone: string | (() => string);
+	direction?: "vertical" | "horizontal";
+	showHandle?: boolean;
+	changeDropZone?: boolean;
+	contentClass?: string | object;
+	handleClass?: string | object;
+	listItems?: any[];
+}>(), {
+	direction: "vertical",
+	handleClass: "",
+	contentClass: "flex flex-nowrap items-center",
+	listItems: () => []
 });
 
 const dragAndDrop = new ListDragAndDrop()
-  .setDropZone(props.dropZone)
-  .setOptions({ showPlaceholder: true, direction: props.direction })
-  .onPositionChange((newPosition, oldPosition) => {
-    emit("position", newPosition);
+	.setDropZone(props.dropZone)
+	.setOptions({ showPlaceholder: true, allowDropZoneChange: props.changeDropZone, direction: props.direction })
+	.onStart(() => dragging.value = true)
+	.onEnd(() => dragging.value = false)
+	.onDropZoneChange((target, dropZone, newPosition, oldPosition, data) => {
+		let item = null;
+		let items = [];
+		if (props.listItems) {
+			items = [...props.listItems];
+			item = items.splice(oldPosition, 1)[0];
+		}
 
-    if (props.listItems) {
-      const items = [...props.listItems];
-      items.splice(newPosition, 0, items.splice(oldPosition, 1)[0]);
-      emit("update:list-items", items);
-    }
-  });
+		emit("drop-zone", { target, item, items, dropZone, oldPosition, newPosition, data });
+	})
+	.onPositionChange((newPosition, oldPosition) => {
+		emit("position", newPosition);
+		if (props.listItems) {
+			const items = [...props.listItems];
+			items.splice(newPosition, 0, items.splice(oldPosition, 1)[0]);
+			emit("update:list-items", items);
+		}
+	});
 </script>