quasar-ui-danx 0.0.36 → 0.0.38

package/package.json

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

package/src/components/ActionTable/ActionMenu.vue

@@ -1,21 +1,22 @@
 <template>
   <PopoverMenu
       class="px-2 flex action-button"
-      :items="activeItems"
+      :items="activeActions"
       :disabled="targets.length === 0"
+      :tooltip="targets.length === 0 ? tooltip : null"
+      :loading="loading || isSaving"
+      :loading-component="loadingComponent"
       @action-item="onAction"
-  >
-    <q-tooltip v-if="targets.length === 0">{{ tooltip }}</q-tooltip>
-  </PopoverMenu>
+  />
 </template>
 <script setup>
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
 import { performAction } from '../../helpers';
 import { PopoverMenu } from '../Utility';
 
 const emit = defineEmits(['action']);
 const props = defineProps({
-  items: {
+  actions: {
     type: Array,
     required: true
   },
@@ -26,16 +27,24 @@ const props = defineProps({
   tooltip: {
     type: String,
     default: 'First select records to perform a batch action'
+  },
+  loading: Boolean,
+  loadingComponent: {
+    type: [Function, Object],
+    default: undefined
   }
 });
 
-const activeItems = computed(() => props.items.filter(item => {
-  if (item.enabled === undefined) return true;
-  return typeof item.enabled === 'function' ? !!item.enabled(props.targets?.[0] ?? null, props.targets) : !!item.enabled;
+const activeActions = computed(() => props.actions.filter(action => {
+  if (action.enabled === undefined) return true;
+  return typeof action.enabled === 'function' ? !!action.enabled(props.targets?.[0] ?? null, props.targets) : !!action.enabled;
 }));
 
-function onAction(item) {
-  emit('action', item);
-  performAction(item, props.targets);
+const isSaving = ref(false);
+async function onAction(action) {
+  emit('action', action);
+  isSaving.value = true;
+  await performAction(action, props.targets);
+  isSaving.value = false;
 }
 </script>

package/src/components/ActionTable/ActionTable.vue

@@ -41,7 +41,7 @@
             v-if="rowProps.col.resizeable"
             :drop-zone="`resize-column-` + rowProps.col.name"
             class="resize-handle"
-            @resize="rowProps.col.onResize"
+            @resize="onResizeColumn(rowProps.col, $event)"
         >
           <RowResizeIcon class="w-4 text-neutral-base" />
         </HandleDraggable>
@@ -53,6 +53,7 @@
             :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
@@ -74,8 +75,9 @@
           </div>
           <div v-if="rowProps.col.actions" class="flex-grow flex justify-end pl-2">
             <ActionMenu
-                :items="rowProps.col.actions"
+                :actions="rowProps.col.actions"
                 :targets="[rowProps.row]"
+                :loading="isSavingItem?.id === rowProps.row.id"
                 @action="(action) => $emit('action', {action: action, row: rowProps.row})"
             />
           </div>
@@ -87,19 +89,18 @@
 
 <script setup>
 import { ref } from 'vue';
+import { getItem, setItem } from '../../helpers';
 import { DragHandleIcon as RowResizeIcon } from '../../svg';
 import { HandleDraggable } from '../DragAndDrop';
-import {
-  ActionMenu,
-  EmptyTableState,
-  mapSortBy,
-  registerStickyScrolling,
-  RenderComponent,
-  TableSummaryRow
-} from './index';
+import { mapSortBy, RenderComponent } from '../index';
+import { ActionMenu, EmptyTableState, registerStickyScrolling, TableSummaryRow } from './index';
 
 defineEmits(['action', 'filter', 'update:quasar-pagination', 'update:selected-rows']);
-defineProps({
+const props = defineProps({
+  name: {
+    type: String,
+    required: true
+  },
   label: {
     type: String,
     required: true
@@ -112,6 +113,10 @@ defineProps({
     type: Object,
     required: true
   },
+  isSavingItem: {
+    type: Object,
+    default: null
+  },
   isLoadingList: Boolean,
   pagedItems: {
     type: Object,
@@ -133,6 +138,23 @@ defineProps({
 });
 const actionTable = ref(null);
 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);
+  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;
+}
 </script>
 
 <style lang="scss" scoped>

package/src/components/ActionTable/index.ts

@@ -7,5 +7,4 @@ export * from "./tableColumns";
 export { default as ActionMenu } from "./ActionMenu.vue";
 export { default as ActionTable } from "./ActionTable.vue";
 export { default as EmptyTableState } from "./EmptyTableState.vue";
-export { default as RenderComponent } from "./RenderComponent.vue";
 export { default as TableSummaryRow } from "./TableSummaryRow.vue";

package/src/components/ActionTable/listActions.ts

@@ -228,11 +228,11 @@ export function useListActions(name: string, {
     /**
      * Applies an action to an item.
      */
-    const isApplyingActionToItem = ref(null);
+    const isSavingItem = ref(null);
     let actionResultCount = 0;
 
     async function applyAction(item, input, itemData = {}) {
-        isApplyingActionToItem.value = item;
+        isSavingItem.value = item;
         const resultNumber = ++actionResultCount;
         setItemInPagedList({ ...item, ...input, ...itemData });
         const result = await applyActionRoute(item, input);
@@ -248,7 +248,7 @@ export function useListActions(name: string, {
                 activeItem.value = { ...activeItem.value, ...result.item };
             }
         }
-        isApplyingActionToItem.value = null;
+        isSavingItem.value = null;
         return result;
     }
 
@@ -355,7 +355,7 @@ export function useListActions(name: string, {
         isLoadingSummary,
         pager,
         quasarPagination,
-        isApplyingActionToItem,
+        isSavingItem,
         activeItem,
         activePanel,
 

package/src/components/ActionTable/tableColumns.ts

@@ -1,11 +1,10 @@
 import { computed, ref, watch } from "vue";
 import { getItem, setItem } from "../../helpers";
 
-export function useTableColumns(name, columns, options = { titleMinWidth: 120, titleMaxWidth: 200 }) {
+export function useTableColumns(name, columns) {
     const COLUMN_ORDER_KEY = `${name}-column-order`;
     const VISIBLE_COLUMNS_KEY = `${name}-visible-columns`;
     const TITLE_COLUMNS_KEY = `${name}-title-columns`;
-    const TITLE_WIDTH_KEY = `${name}-title-width`;
 
     // The list that defines the order the columns should appear in
     const columnOrder = ref(getItem(COLUMN_ORDER_KEY) || []);
@@ -16,17 +15,6 @@ export function useTableColumns(name, columns, options = { titleMinWidth: 120, t
     // Title columns will have their name appear on the first column of the table as part of the records' title
     const titleColumnNames = ref(getItem(TITLE_COLUMNS_KEY, []));
 
-    // The width of the title column
-    const titleWidth = ref(getItem(TITLE_WIDTH_KEY, options.titleMinWidth));
-
-    /**
-     * When the title column is resized, update the titleWidth
-     * @param val
-     */
-    function onResizeTitleColumn(val) {
-        titleWidth.value = Math.max(Math.min(val.distance + val.startDropZoneSize, options.titleMaxWidth), options.titleMinWidth);
-    }
-
     // Columns that should be locked to the left side of the table
     const lockedColumns = computed(() => orderedColumns.value.slice(0, 1));
 
@@ -57,7 +45,6 @@ export function useTableColumns(name, columns, options = { titleMinWidth: 120, t
     // Save changes to the list of hidden columns in localStorage
     watch(() => hiddenColumnNames.value, () => setItem(VISIBLE_COLUMNS_KEY, hiddenColumnNames.value));
     watch(() => titleColumnNames.value, () => setItem(TITLE_COLUMNS_KEY, titleColumnNames.value));
-    watch(() => titleWidth.value, () => setItem(TITLE_WIDTH_KEY, titleWidth.value));
 
     return {
         sortableColumns,
@@ -65,8 +52,6 @@ export function useTableColumns(name, columns, options = { titleMinWidth: 120, t
         visibleColumns,
         hiddenColumnNames,
         titleColumnNames,
-        titleWidth,
-        orderedTitleColumns,
-        onResizeTitleColumn
+        orderedTitleColumns
     };
 }

package/src/components/Utility/Popovers/PopoverMenu.vue

@@ -3,14 +3,16 @@
       class="p-3 actionable"
       :class="{'opacity-50 cursor-not-allowed': disabled}"
   >
-    <slot />
+    <q-tooltip v-if="$slots.tooltip || tooltip">
+      <slot name="tooltip">{{ tooltip }}</slot>
+    </q-tooltip>
     <Transition
         mode="out-in"
         :duration="150"
     >
-      <q-spinner
+      <RenderComponent
           v-if="loading"
-          class="w-4 h-4 text-black"
+          :component="loadingComponent"
       />
       <MenuIcon
           v-else
@@ -49,6 +51,8 @@
 </template>
 <script setup>
 import { DotsVerticalIcon as MenuIcon } from '@heroicons/vue/outline';
+import { QSpinner } from 'quasar';
+import { RenderComponent } from '../index';
 
 const emit = defineEmits(['action', 'action-item']);
 defineProps({
@@ -56,11 +60,22 @@ defineProps({
     type: Array,
     required: true,
     validator(items) {
-      return items.every((item) => item.label && (item.url || item.action || item.name));
+      return items.every((item) => item.url || item.action || item.name);
     }
   },
+  tooltip: {
+    type: String,
+    default: null
+  },
   disabled: Boolean,
-  loading: Boolean
+  loading: Boolean,
+  loadingComponent: {
+    type: [Function, Object],
+    default: () => ({
+      is: QSpinner,
+      props: { class: 'w-4 h-4 text-black' }
+    })
+  }
 });
 
 function onAction(item) {

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

@@ -42,11 +42,22 @@ async function onConfirmAction(input) {
   }
 
   isSaving.value = true;
-  const result = await props.action.onAction(props.targets, input);
+  let result;
+  try {
+    result = await props.action.onAction(props.targets, input);
+  } catch (e) {
+    console.error(e);
+    result = { error: `An error occurred while performing the action ${props.action.label}. Please try again later.` };
+  }
+
   isSaving.value = false;
 
-  if (result.success) {
-    FlashMessages.success(`The update was successful`);
+  // If there is no return value or the result marks it as successful, we show a success message
+  if (result === undefined || result?.success) {
+
+    if (result?.success) {
+      FlashMessages.success(`The update was successful`);
+    }
 
     if (props.action.onSuccess) {
       await props.action.onSuccess(result, props.targets, input);
@@ -58,7 +69,7 @@ async function onConfirmAction(input) {
     if (result.errors) {
       errors.push(...result.errors);
     } else if (result.error) {
-      errors.push(result.error.message);
+      errors.push(typeof result.error === 'string' ? result.error : result.error.message);
     } else {
       errors.push('An unknown error occurred. Please try again later.');
     }

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

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

package/tsconfig.json

@@ -25,9 +25,6 @@
     "paths": {
       "@/*": [
         "./dev/src/*"
-      ],
-      "ui": [
-        "./src/index.esm.js"
       ]
     }
   },