quasar-ui-danx 0.4.27 → 0.4.28

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 { ActionController, ListController } 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: ListController & ActionController;
 	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

@@ -3,10 +3,10 @@ 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,
@@ -14,7 +14,7 @@ import {
 } from "../../types";
 import { getFilterFromUrl } from "./listHelpers";
 
-export function useListControls(name: string, options: ListControlsOptions): ActionController {
+export function useListControls(name: string, options: ListControlsOptions): ListController {
 	let isInitialized = false;
 	const PAGE_SETTINGS_KEY = `dx-${name}-pager`;
 	const pagedItems = shallowRef<PagedItems | null>(null);
@@ -490,7 +490,7 @@ export function useListControls(name: string, options: ListControlsOptions): Act
 		activeItem,
 		activePanel,
 
-		// Actions
+		// List controls
 		initialize,
 		resetPaging,
 		setPagination,

package/src/components/DragAndDrop/ListItemDraggable.vue

@@ -6,7 +6,10 @@
     @dragend="dragAndDrop.dragEnd"
   >
     <div class="flex items-center">
-      <div v-if="showHandle">
+      <div
+        v-if="showHandle"
+        :class="handleClass"
+      >
         <SvgImg
           :svg="DragHandleIcon"
           class="w-4 h-4"
@@ -19,39 +22,46 @@
     </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;
+	handleClass?: string | object;
+	listItems?: any[];
+}>(), {
+	direction: "vertical",
+	handleClass: "",
+	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, 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>