quasar-ui-danx 0.0.27 → 0.0.28

package/package.json

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

package/src/components/ActionTable/ActionMenu.vue

@@ -5,19 +5,11 @@
         :items="items"
         @action-item="onAction"
     />
-    <Component
-        v-if="confirmDialog"
-        :is="confirmDialog.is"
-        v-bind="confirmDialog.props"
-        :is-saving="isSaving"
-        @close="onCancel"
-        @confirm="onConfirmAction"
-    />
   </div>
 </template>
 <script setup>
 import { ref, shallowRef } from 'vue';
-import { FlashMessages } from '../../helpers';
+import { FlashMessages, performAction } from '../../helpers';
 import { PopoverMenu } from '../Utility';
 
 const emit = defineEmits(['action']);
@@ -40,13 +32,7 @@ const isSaving = ref(false);
 function onAction(item) {
   emit('action', item);
 
-  activeAction.value = item;
-
-  if (item.confirmDialog) {
-    confirmDialog.value = typeof item.confirmDialog === 'function' ? item.confirmDialog(props.rows) : item.confirmDialog;
-  } else {
-    console.log('handle default action');
-  }
+  performAction(item, props.rows);
 }
 
 function onCancel() {

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

@@ -1,6 +1,6 @@
 export {
     default as CollapsableFiltersSidebar
 } from "./CollapsableFiltersSidebar.vue";
-export { default as FilterFieldList } from "src/components/ActionTable/Filters/FilterFieldList.vue";
+export { default as FilterFieldList } from "./FilterFieldList.vue";
 export { default as FilterListToggle } from "./FilterListToggle.vue";
 export { default as FilterToolbarLayout } from "./FilterToolbarLayout.vue";

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

@@ -0,0 +1,15 @@
+<template>
+  <div class="flex flex-grow flex-col flex-nowrap overflow-hidden h-full bg-white">
+    <slot name="top" />
+    <slot name="toolbar" />
+    <div class="flex flex-nowrap flex-grow overflow-hidden w-full">
+      <slot name="filters" />
+      <slot />
+    </div>
+    <ActionPerformerTool v-if="activeAction" :targets="actionTargets" :action="activeAction" />
+  </div>
+</template>
+<script setup>
+import { actionTargets, activeAction } from '../../../helpers';
+import { ActionPerformerTool } from '../../Utility';
+</script>

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

@@ -0,0 +1 @@
+export { default as ActionTableLayout } from "./ActionTableLayout.vue";

package/src/components/ActionTable/index.ts

@@ -1,5 +1,6 @@
 export * from "./Filters";
 export * from "./Form";
+export * from "./Layouts";
 export * from "./listActions";
 export * from "./listHelpers";
 export * from "./tableColumns";

package/src/components/Utility/Tools/ActionPerformerTool.vue

@@ -0,0 +1,42 @@
+<template>
+  <div>
+    <Component v-if="confirmDialog" :is="confirmDialog" :is-saving="isSaving" @confirm="onConfirmAction" />
+  </div>
+</template>
+<script setup>
+import { onMounted, ref, shallowRef } from 'vue';
+
+const props = defineProps({
+  action: {
+    type: Object,
+    required: true
+  },
+  targets: {
+    type: Array,
+    required: true
+  }
+});
+
+const confirmDialog = shallowRef(props.action.confirmDialog ? props.action.confirmDialog(props.targets) : null);
+const isSaving = ref(null);
+
+onMounted(async () => {
+  console.log('mounting action', props.action, props.targets);
+  // If there is no dialog, we auto-confirm the action
+  if (!confirmDialog.value) {
+    onConfirmAction();
+  }
+});
+
+function onConfirmAction(input) {
+  console.log('action confirmed', input);
+  if (!props.action.onAction) {
+    throw new Error('No onAction handler found for the selected action:' + props.action.name);
+  }
+
+  isSaving.value = true;
+  props.action.onAction().then(() => {
+    isSaving.value = false;
+  });
+}
+</script>

package/src/components/Utility/Tools/index.ts

@@ -0,0 +1 @@
+export { default as ActionPerformerTool } from "./ActionPerformerTool.vue";

package/src/components/Utility/index.ts

@@ -4,4 +4,5 @@ export * from "./Files";
 export * from "./Formats";
 export * from "./Layouts";
 export * from "./Popovers";
+export * from "./Tools";
 export * from "./Transitions";

package/src/helpers/index.ts

@@ -9,6 +9,7 @@ export * from "./FlashMessages";
 export * from "./formats";
 export * from "./http";
 export * from "./multiFileUpload";
+export * from "./performAction";
 export * from "./singleFileUpload";
 export * from "./storage";
 export * from "./utils";

package/src/helpers/performAction.ts

@@ -0,0 +1,10 @@
+import { ref } from "vue";
+
+export const activeAction = ref(null);
+export const actionTargets = ref([]);
+
+export async function performAction(action, targets) {
+    console.log("performing action", action, targets);
+    activeAction.value = action;
+    actionTargets.value = targets;
+}