quasar-ui-danx 0.0.36 → 0.0.37

package/package.json

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

package/src/components/ActionTable/ActionMenu.vue

@@ -3,13 +3,14 @@
       class="px-2 flex action-button"
       :items="activeItems"
       :disabled="targets.length === 0"
+      :tooltip="targets.length === 0 ? tooltip : null"
+      :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';
 
@@ -26,6 +27,10 @@ const props = defineProps({
   tooltip: {
     type: String,
     default: 'First select records to perform a batch action'
+  },
+  loadingComponent: {
+    type: [Function, Object],
+    default: undefined
   }
 });
 
@@ -34,8 +39,11 @@ const activeItems = computed(() => props.items.filter(item => {
   return typeof item.enabled === 'function' ? !!item.enabled(props.targets?.[0] ?? null, props.targets) : !!item.enabled;
 }));
 
-function onAction(item) {
+const isSaving = ref(false);
+async function onAction(item) {
   emit('action', item);
-  performAction(item, props.targets);
+  isSaving.value = true;
+  await performAction(item, 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
@@ -87,19 +88,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
@@ -133,6 +133,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/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"
       ]
     }
   },