quasar-ui-danx 0.0.42 → 0.0.44

package/package.json

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

package/src/components/ActionTable/ActionTable.vue

@@ -48,44 +48,17 @@
       </q-th>
     </template>
     <template #body-cell="rowProps">
-      <q-td :key="rowProps.key" :props="rowProps">
-        <component
-            :is="rowProps.col.onClick ? 'a' : 'div'"
-            class="flex items-center flex-nowrap"
-            :class="{'justify-end': rowProps.col.align === 'right', 'justify-center': rowProps.col.align === 'center', 'justify-start': rowProps.col.align === 'left'}"
-            :style="getColumnStyle(rowProps.col)"
-            @click="() => rowProps.col.onClick && rowProps.col.onClick(rowProps.row)"
-        >
-          <RenderComponent
-              v-if="rowProps.col.component"
-              :params="[rowProps.row]"
-              :component="rowProps.col.component"
-              :text="rowProps.value"
-              @action="action => $emit('action', {action,target: rowProps.row})"
-          />
-          <div v-else-if="rowProps.col.fieldList">
-            <div v-for="field in rowProps.col.fieldList" :key="field">
-              {{ rowProps.row[field] }}
-            </div>
-          </div>
-          <div v-else>
-            <slot v-bind="{name: rowProps.col.name, row: rowProps.row, value: rowProps.value}">
-              {{ rowProps.value }}
-            </slot>
-          </div>
-          <div v-if="rowProps.col.actions" class="flex-grow flex justify-end pl-2">
-            <ActionMenu
-                :actions="rowProps.col.actions"
-                :target="rowProps.row"
-                :loading="isSavingRow(rowProps.row)"
-                @action="(action) => $emit('action', action, rowProps.row)"
-            />
-          </div>
-        </component>
-      </q-td>
+      <ActionTableColumn
+          :row-props="rowProps"
+          :settings="columnSettings[rowProps.col.name]"
+          :is-saving="isSavingRow(rowProps.row)"
+          @action="$emit('action', $event, rowProps.row)"
+      >
+        <slot />
+      </ActionTableColumn>
     </template>
     <template #bottom>
-      <ActionInputComponent />
+      <ActionVnode />
     </template>
   </q-table>
 </template>
@@ -95,10 +68,10 @@ import { ref } from 'vue';
 import { getItem, setItem } from '../../helpers';
 import { DragHandleIcon as RowResizeIcon } from '../../svg';
 import { HandleDraggable } from '../DragAndDrop';
-import { ActionInputComponent, mapSortBy, RenderComponent } from '../index';
-import { ActionMenu, EmptyTableState, registerStickyScrolling, TableSummaryRow } from './index';
+import { ActionVnode, mapSortBy } from '../index';
+import { ActionTableColumn, EmptyTableState, registerStickyScrolling, TableSummaryRow } from './index';
 
-defineEmits(['action', 'filter', 'update:quasar-pagination', 'update:selected-rows']);
+defineEmits(['action', 'update:quasar-pagination', 'update:selected-rows']);
 const props = defineProps({
   name: {
     type: String,
@@ -145,19 +118,14 @@ registerStickyScrolling(actionTable);
 const COLUMN_SETTINGS_KEY = `column-settings-${props.name}`;
 const columnSettings = ref(getItem(COLUMN_SETTINGS_KEY) || {});
 function onResizeColumn(column, val) {
-  columnSettings.value[column.name] = Math.max(Math.min(val.distance + val.startDropZoneSize, column.maxWidth || 500), column.minWidth || 80);
+  columnSettings.value = {
+    ...columnSettings.value,
+    [column.name]: {
+      width: Math.max(Math.min(val.distance + val.startDropZoneSize, column.maxWidth || 500), column.minWidth || 80)
+    }
+  };
   setItem(COLUMN_SETTINGS_KEY, columnSettings.value);
 }
-function getColumnStyle(column) {
-  const width = columnSettings.value[column.name] || column.width;
-
-  if (width) {
-    return {
-      width: `${width}px`
-    };
-  }
-  return null;
-}
 
 function isSavingRow(row) {
   if (!props.isSavingTarget) return false;

package/src/components/ActionTable/ActionTableColumn.vue

@@ -0,0 +1,72 @@
+<template>
+  <q-td :key="rowProps.key" :props="rowProps" :style="columnStyle">
+    <div
+        class="flex items-center flex-nowrap"
+        :class="columnClass"
+    >
+      <a
+          v-if="column.onClick"
+          class="flex-grow"
+          @click="column.onClick(row)"
+      >
+        <RenderVnode
+            v-if="column.vnode"
+            :vnode="column.vnode(row)"
+        />
+        <slot v-else v-bind="{name: column.name, row, value}">
+          {{ value }}
+        </slot>
+      </a>
+      <div v-else class="flex-grow">
+        <RenderVnode
+            v-if="column.vnode"
+            :vnode="column.vnode(row)"
+        />
+        <slot v-else v-bind="{name: column.name, row, value}">
+          {{ value }}
+        </slot>
+      </div>
+      <div v-if="column.actions" class="flex flex-shrink-0 pl-2">
+        <ActionMenu
+            :actions="column.actions"
+            :target="row"
+            :loading="isSaving"
+            @action="$emit('action', $event)"
+        />
+      </div>
+    </div>
+  </q-td>
+</template>
+<script setup>
+import { computed } from 'vue';
+import { RenderVnode } from '../Utility';
+import { ActionMenu } from './index';
+
+defineEmits(['action']);
+const props = defineProps({
+  rowProps: {
+    type: Object,
+    required: true
+  },
+  settings: {
+    type: Object,
+    default: null
+  },
+  isSaving: Boolean
+});
+
+const row = computed(() => props.rowProps.row);
+const column = computed(() => props.rowProps.col);
+const value = computed(() => props.rowProps.value);
+
+const columnStyle = computed(() => {
+  const width = props.settings?.width || column.value.width;
+  return width ? { width: `${width}px` } : null;
+});
+
+const columnClass = computed(() => ({
+  'justify-end': column.value.align === 'right',
+  'justify-center': column.value.align === 'center',
+  'justify-start': column.value.align === 'left'
+}));
+</script>

package/src/components/ActionTable/index.ts

@@ -6,5 +6,6 @@ export * from "./listHelpers";
 export * from "./tableColumns";
 export { default as ActionMenu } from "./ActionMenu.vue";
 export { default as ActionTable } from "./ActionTable.vue";
+export { default as ActionTableColumn } from "./ActionTableColumn.vue";
 export { default as EmptyTableState } from "./EmptyTableState.vue";
 export { default as TableSummaryRow } from "./TableSummaryRow.vue";

package/src/components/ActionTable/listControls.ts

@@ -259,11 +259,11 @@ export function useListControls(name: string, {
      * Opens the item's form with the given item and tab
      *
      * @param item
-     * @param tab
+     * @param panel
      */
-    function openItemForm(item, tab) {
+    function activatePanel(item, panel) {
         activeItem.value = item;
-        activePanel.value = tab;
+        activePanel.value = panel;
     }
 
     /**
@@ -336,7 +336,7 @@ export function useListControls(name: string, {
         loadMore,
         refreshAll,
         getNextItem,
-        openItemForm,
+        activatePanel,
         applyFilterFromUrl,
         setItemInPagedList
     };

package/src/components/Utility/Formats/IconWithTextFormat.vue

@@ -2,7 +2,7 @@
   <div class="flex items-center">
     <component :is="icon" :class="iconClass" />
     <div :class="textClass">
-      <slot />
+      <slot>{{ text }}</slot>
     </div>
   </div>
 </template>
@@ -14,11 +14,15 @@ defineProps({
   },
   iconClass: {
     type: String,
-    default: "w-6"
+    default: 'w-6'
+  },
+  text: {
+    type: String,
+    default: null
   },
   textClass: {
     type: String,
-    default: "ml-2"
+    default: 'ml-2'
   }
 });
 </script>

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

@@ -0,0 +1,23 @@
+<template>
+  <div>
+    <RenderVnode
+        v-if="activeActionVnode"
+        :vnode="activeActionVnode.vnode"
+        :is-saving="isSaving"
+        @confirm="onConfirm"
+        @close="activeActionVnode.cancel"
+    />
+  </div>
+</template>
+<script setup>
+import { ref } from 'vue';
+import { activeActionVnode } from '../../../helpers';
+import { RenderVnode } from './index';
+
+const isSaving = ref(false);
+async function onConfirm(input) {
+  isSaving.value = true;
+  await activeActionVnode.value.confirm(input);
+  isSaving.value = false;
+}
+</script>

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

@@ -25,17 +25,13 @@ const props = defineProps({
     type: Array,
     default: () => []
   },
-  text: {
-    type: String,
-    default: undefined
-  },
   overrideProps: {
     type: Object,
     default: () => ({})
   }
 });
 
-const content = computed(() => resolvedComponent.value?.value || resolvedComponent.value?.props?.text || props.text);
+const content = computed(() => resolvedComponent.value?.value || resolvedComponent.value?.props?.text);
 const resolvedComponent = computed(() => {
   if (typeof props.component === 'function') {
     return props.component(...props.params);

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

@@ -0,0 +1,5 @@
+<script>
+const RenderVnode = (props) => props.vnode;
+RenderVnode.props = { vnode: { type: Object, required: true } };
+export default RenderVnode;
+</script>

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

@@ -1,2 +1,3 @@
-export { default as ActionInputComponent } from "./ActionInputComponent.vue";
+export { default as ActionVnode } from "./ActionVnode.vue";
 export { default as RenderComponent } from "./RenderComponent.vue";
+export { default as RenderVnode } from "./RenderVnode.vue";

package/src/helpers/actions.ts

@@ -1,4 +1,4 @@
-import { shallowRef } from "vue";
+import { shallowRef, VNode } from "vue";
 import { FlashMessages } from "./index";
 
 interface ActionOptions {
@@ -8,7 +8,7 @@ interface ActionOptions {
     batch?: boolean;
     category?: string;
     class?: string;
-    inputComponent?: (target: object[] | object) => any;
+    vnode?: (target: object[] | object) => VNode;
     enabled?: (target: object) => boolean;
     batchEnabled?: (targets: object[]) => boolean;
     onAction?: (action: string | null, target: object, input: any) => Promise<any>;
@@ -18,7 +18,7 @@ interface ActionOptions {
     onFinish?: (action: string | null, targets: object, input: any) => any;
 }
 
-export const activeActionInput = shallowRef(null);
+export const activeActionVnode = shallowRef(null);
 
 /**
  * Hook to perform an action on a set of targets
@@ -98,25 +98,25 @@ export function useActions(actions: ActionOptions[], globalOptions: ActionOption
          */
         async performAction(name: string | object, target: object[] | object, input: any = null) {
             const action = resolveAction(name);
-            const component = action.inputComponent && action.inputComponent(target);
+            const vnode = action.vnode && action.vnode(target);
             let result = null;
 
             isSavingTarget.value = target;
 
-            // If no component input is required, we can directly perform the action
-            if (component) {
-                // If the action requires an input, we set the activeActionInput to the input component.
-                // This will tell the ActionInputComponent to render the input component, and confirm or cancel the
+            // If additional input is required, first render the vnode and wait for the confirm or cancel action
+            if (vnode) {
+                // If the action requires an input, we set the activeActionVnode to the input component.
+                // This will tell the ActionVnode to render the input component, and confirm or cancel the
                 // action The confirm function has the input from the component passed and will resolve the promise
                 // with the result of the action
                 result = await new Promise((resolve, reject) => {
-                    activeActionInput.value = {
-                        component,
+                    activeActionVnode.value = {
+                        vnode,
                         confirm: async input => {
                             const result = await onConfirmAction(action, target, input);
 
                             // Only resolve when we have a non-error response, so we can show the error message w/o
-                            // hiding the dialog / inputComponent
+                            // hiding the dialog / vnode
                             if (result === undefined || result === true || result?.success) {
                                 resolve(result);
                             }
@@ -125,7 +125,7 @@ export function useActions(actions: ActionOptions[], globalOptions: ActionOption
                     };
                 });
 
-                activeActionInput.value = null;
+                activeActionVnode.value = null;
             } else {
                 result = await onConfirmAction(action, target, input);
             }
@@ -183,6 +183,5 @@ async function onConfirmAction(action: ActionOptions, target: object[] | object,
         action.onFinish(result, target, input);
     }
 
-    console.log("onConrirm result", result);
     return result;
 }

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

@@ -1,23 +0,0 @@
-<template>
-  <div>
-    <RenderComponent
-        v-if="activeActionInput"
-        :component="activeActionInput.component"
-        :is-saving="isSaving"
-        @confirm="onConfirm"
-        @close="activeActionInput.cancel"
-    />
-  </div>
-</template>
-<script setup>
-import { ref } from 'vue';
-import { activeActionInput } from '../../../helpers';
-import RenderComponent from './RenderComponent';
-
-const isSaving = ref(false);
-async function onConfirm(input) {
-  isSaving.value = true;
-  await activeActionInput.value.confirm(input);
-  isSaving.value = false;
-}
-</script>