quasar-ui-danx 0.0.46 → 0.0.48

package/package.json

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

package/src/components/ActionTable/ActionMenu.vue

@@ -4,16 +4,15 @@
       :items="activeActions"
       :disabled="!hasTarget"
       :tooltip="!hasTarget ? tooltip : null"
-      :loading="loading"
+      :loading="isSaving || loading"
       :loading-component="loadingComponent"
-      @action-item="$emit('action', $event)"
+      @action-item="onAction"
   />
 </template>
 <script setup>
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
 import { PopoverMenu } from '../Utility';
 
-const emit = defineEmits(['action']);
 const props = defineProps({
   actions: {
     type: Array,
@@ -43,4 +42,14 @@ const activeActions = computed(() => props.actions.filter(action => {
 
   return action.enabled ? action.enabled(props.target) : true;
 }));
+
+const isSaving = ref(false);
+async function onAction(action) {
+  if (!action.trigger) {
+    throw new Error('Action must have a trigger function! Make sure you are using useActions() or implement your own trigger function.');
+  }
+  isSaving.value = true;
+  await action.trigger(props.target);
+  isSaving.value = false;
+}
 </script>

package/src/components/ActionTable/ActionTable.vue

@@ -51,10 +51,8 @@
       <ActionTableColumn
           :row-props="rowProps"
           :settings="columnSettings[rowProps.col.name]"
-          :is-saving="isSavingRow(rowProps.row)"
-          @action="$emit('action', $event, rowProps.row)"
       >
-        <slot />
+        <slot :column-name="rowProps.col.name" :row="rowProps.row" :value="rowProps.value" />
       </ActionTableColumn>
     </template>
     <template #bottom>
@@ -71,7 +69,7 @@ import { HandleDraggable } from '../DragAndDrop';
 import { ActionVnode, mapSortBy } from '../index';
 import { ActionTableColumn, EmptyTableState, registerStickyScrolling, TableSummaryRow } from './index';
 
-defineEmits(['action', 'update:quasar-pagination', 'update:selected-rows']);
+defineEmits(['update:quasar-pagination', 'update:selected-rows']);
 const props = defineProps({
   name: {
     type: String,
@@ -89,10 +87,6 @@ const props = defineProps({
     type: Object,
     required: true
   },
-  isSavingTarget: {
-    type: Object,
-    default: null
-  },
   isLoadingList: Boolean,
   pagedItems: {
     type: Object,
@@ -126,15 +120,6 @@ function onResizeColumn(column, val) {
   };
   setItem(COLUMN_SETTINGS_KEY, columnSettings.value);
 }
-
-function isSavingRow(row) {
-  if (!props.isSavingTarget) return false;
-
-  if (Array.isArray(props.isSavingTarget)) {
-    return !!props.isSavingTarget.find(t => t.id === row.id);
-  }
-  return props.isSavingTarget.id === row.id;
-}
 </script>
 
 <style lang="scss" scoped>

package/src/components/ActionTable/ActionTableColumn.vue

@@ -9,29 +9,18 @@
           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>
+        <RenderVnode v-if="column.vnode" :vnode="column.vnode(row)" />
+        <slot v-else>{{ 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>
+        <RenderVnode v-if="column.vnode" :vnode="column.vnode(row)" />
+        <slot v-else>{{ value }}</slot>
       </div>
-      <div v-if="column.actions" class="flex flex-shrink-0 pl-2">
+      <div v-if="column.actionMenu" class="flex flex-shrink-0 pl-2">
         <ActionMenu
-            :actions="column.actions"
+            :actions="column.actionMenu"
             :target="row"
             :loading="isSaving"
-            @action="$emit('action', $event)"
         />
       </div>
     </div>
@@ -42,7 +31,6 @@ import { computed } from 'vue';
 import { RenderVnode } from '../Utility';
 import { ActionMenu } from './index';
 
-defineEmits(['action']);
 const props = defineProps({
   rowProps: {
     type: Object,
@@ -51,13 +39,13 @@ const props = defineProps({
   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 isSaving = computed(() => column.value.isSaving && column.value.isSaving(row.value));
 
 const columnStyle = computed(() => {
   const width = props.settings?.width || column.value.width;
@@ -65,6 +53,7 @@ const columnStyle = computed(() => {
 });
 
 const columnClass = computed(() => ({
+  'is-saving': isSaving.value,
   'justify-end': column.value.align === 'right',
   'justify-center': column.value.align === 'center',
   'justify-start': column.value.align === 'left'

package/src/components/ActionTable/Columns/ColumnListItem.vue

@@ -0,0 +1,39 @@
+<template>
+  <div
+    class="flex items-center w-full"
+    :class="{'cursor-not-allowed': locked}"
+  >
+    <a v-if="locked" class="text-neutral-on-plus-3 cursor-not-allowed">
+      <LockedIcon class="w-4" />
+    </a>
+    <div class="font-semibold text-sm ml-5 py-3 flex-grow">{{ column.label }}</div>
+    <div v-if="!locked" class="flex items-center">
+      <a class="py-2 px-1" @click="$emit('visible', !visible)">
+        <VisibleIcon v-if="visible" class="w-4" />
+        <HiddenIcon v-else class="w-4 text-neutral-on-plus-3" />
+      </a>
+      <a class="py-2 px-1" @click="$emit('is-title', !isTitle)">
+        <IsTitleIcon class="w-4" :class="isTitle ? '' : 'text-neutral-plus-3'" />
+        <QTooltip>
+          <template v-if="!isTitle">Add to priority list</template>
+          <template v-else>Remove from priority list</template>
+        </QTooltip>
+      </a>
+    </div>
+  </div>
+</template>
+<script setup>
+import { EyeIcon as VisibleIcon, EyeOffIcon as HiddenIcon, LockClosedIcon as LockedIcon } from "@heroicons/vue/outline";
+import { StarIcon as IsTitleIcon } from "@heroicons/vue/solid";
+
+defineEmits(["visible", "is-title"]);
+defineProps({
+  locked: Boolean,
+  visible: Boolean,
+  isTitle: Boolean,
+  column: {
+    type: Object,
+    required: true
+  }
+});
+</script>

package/src/components/ActionTable/Columns/ColumnSettingsDialog.vue

@@ -0,0 +1,102 @@
+<template>
+  <InfoDialog
+      title="Column Settings"
+      @close="$emit('close')"
+  >
+    <div class="mb-4 text-sm">
+      Customize columns by visibility, order, or priority (maximum 3 additional).
+    </div>
+    <ColumnListItem
+        v-for="column in lockedColumns" :key="column.name" locked visible :column="column"
+        class="px-2.5 border border-neutral-plus-5 bg-white rounded-t-lg"
+    />
+    <ListTransition
+        name="fade-down-list"
+        data-drop-zone="column-list"
+    >
+      <ListItemDraggable
+          v-for="(column, index) in sortableColumns"
+          :key="column.name"
+          :list-items="sortableColumns"
+          drop-zone="column-list"
+          class="px-2 border border-neutral-plus-5 bg-white"
+          :class="{'rounded-b-lg': index === sortableColumns.length - 1}"
+          show-handle
+          @update:list-items="$emit('update:sortable-columns', $event)"
+      >
+        <ColumnListItem
+            :column="column"
+            :visible="isVisible(column)"
+            :is-title="isTitleColumn(column)"
+            @visible="onVisibilityChange(column, $event)"
+            @is-title="onTitleColumnChange(column, $event)"
+        />
+      </ListItemDraggable>
+    </ListTransition>
+  </InfoDialog>
+</template>
+<script setup>
+import { computed } from 'vue';
+import { FlashMessages, remove } from '../../../helpers';
+import { ListItemDraggable } from '../../DragAndDrop';
+import { InfoDialog, ListTransition } from '../../Utility';
+import { ColumnListItem } from './index';
+
+const emit = defineEmits(['close', 'update:hidden-column-names', 'update:title-column-names', 'update:sortable-columns']);
+const props = defineProps({
+  hiddenColumnNames: {
+    type: Array,
+    required: true
+  },
+  titleColumnNames: {
+    type: Array,
+    required: true
+  },
+  lockedColumns: {
+    type: Array,
+    required: true
+  },
+  sortableColumns: {
+    type: Array,
+    required: true
+  },
+  titleColumnLimit: {
+    type: Number,
+    default: 3
+  }
+});
+
+const allowMoreTitleColumns = computed(() => {
+  return props.titleColumnNames.length < props.titleColumnLimit;
+});
+function isVisible(column) {
+  return !props.hiddenColumnNames.includes(column.name);
+}
+function onVisibilityChange(column, visible) {
+  let hiddenColumnNames = [...props.hiddenColumnNames];
+
+  if (visible && hiddenColumnNames.includes(column.name)) {
+    hiddenColumnNames = remove(hiddenColumnNames, column.name);
+  } else {
+    hiddenColumnNames.push(column.name);
+  }
+  emit('update:hidden-column-names', [...new Set(hiddenColumnNames)]);
+}
+
+function isTitleColumn(column) {
+  return props.titleColumnNames.includes(column.name);
+}
+function onTitleColumnChange(column, isTitle) {
+  let titleColumnNames = [...props.titleColumnNames];
+  if (isTitle && !titleColumnNames.includes(column.name)) {
+    if (!allowMoreTitleColumns.value) {
+      FlashMessages.warning(`You can only have ${props.titleColumnLimit} priority columns.`);
+      return;
+    }
+    titleColumnNames.push(column.name);
+  } else {
+    titleColumnNames = remove(titleColumnNames, column.name);
+  }
+  emit('update:title-column-names', [...new Set(titleColumnNames)]);
+}
+</script>

package/src/components/ActionTable/Columns/TItleColumnFormat.vue

@@ -0,0 +1,28 @@
+<template>
+  <div>
+    <div
+        v-for="column in columns" :key="column.name"
+        class="overflow-hidden overflow-ellipsis text-xs text-gray-base"
+    >{{ format(row[column.name], column.format) }}
+    </div>
+  </div>
+</template>
+<script setup>
+defineProps({
+  row: {
+    type: Object,
+    required: true
+  },
+  columns: {
+    type: Array,
+    required: true
+  }
+});
+
+function format(value, format) {
+  if (typeof format === 'function') {
+    return format(value);
+  }
+  return value;
+}
+</script>

package/src/components/ActionTable/Columns/VisibleColumnsToggleButtons.vue

@@ -0,0 +1,156 @@
+<template>
+  <div class="flex items-center flex-nowrap">
+    <div
+        v-for="category in categories"
+        :key="category"
+        class="category-toggle"
+        :class="{'has-visible-columns': categoryHasVisibleColumns(category)}"
+    >
+      <QCheckbox
+          toggle-indeterminate
+          size="20px"
+          :model-value="getCategoryCheckboxState(category)"
+          class="mr-2 cb-white-border"
+          @click="toggleColumns(columnsInCategory(category), !categoryHasVisibleColumns(category))"
+      />
+      <div>
+        {{ category }}
+      </div>
+      <CaretDownIcon
+          class="ml-2 w-5 transition-all"
+          :class="{'rotate-180' : isShowingColumnToggle === category}"
+      />
+      <QMenu
+          @update:model-value="isShowingColumnToggle = $event ? category : ''"
+      >
+        <QList>
+          <div
+              v-for="column in columnsInCategory(category)"
+              :key="column"
+              class="flex items-center flex-nowrap px-2 py-3 cursor-pointer"
+              @click="toggleColumn(column.name)"
+          >
+            <QCheckbox
+                :model-value="!hiddenColumnNames.includes(column.name)"
+                class="mr-3 cb-white-border"
+                size="20px"
+                :color="column.required ? 'gray-base': 'blue-base'"
+                :disable="column.required"
+                @click="toggleColumn(column.name)"
+            />
+            <div class="text-xs">{{ column.label }}</div>
+          </div>
+        </QList>
+      </QMenu>
+    </div>
+  </div>
+</template>
+<script setup>
+import { computed, ref } from 'vue';
+import { remove } from '../../../helpers';
+import { CaretDownIcon } from '../../../svg';
+
+const emit = defineEmits(['update:hidden-column-names']);
+const props = defineProps({
+  columns: {
+    type: Array,
+    required: true
+  },
+  hiddenColumnNames: {
+    type: Array,
+    required: true
+  }
+});
+
+const isShowingColumnToggle = ref('');
+const categories = computed(() => [...new Set(props.columns.map(c => c.category)).values()]);
+
+/**
+ * Return a list of column names that belong to the category
+ * @param category
+ * @returns {(string|*)[]}
+ */
+function columnsInCategory(category) {
+  return props.columns.filter(c => c.category === category);
+}
+
+/**
+ * Return true if any columns in the category are visible
+ * @param category
+ * @returns {boolean}
+ */
+function categoryHasVisibleColumns(category) {
+  // If there are any columns in the category that are not hidden, then the category has visible columns
+  return columnsInCategory(category).filter(c => !c.required).map(c => c.name).some(c => !props.hiddenColumnNames.includes(c));
+}
+
+/**
+ * Determines the state of the checkbox as either true, false or null (for the indeterminate state)
+ * @param category
+ * @returns {boolean|null}
+ */
+function getCategoryCheckboxState(category) {
+  let categoryColumns = columnsInCategory(category).filter(c => !c.required);
+  const visibleColumns = categoryColumns.filter(c => !props.hiddenColumnNames.includes(c.name));
+  if (visibleColumns.length === 0) {
+    return false;
+  } else if (visibleColumns.length === categoryColumns.length) {
+    return true;
+  }
+  return null;
+}
+/**
+ * Toggle all columns in a category
+ * @param columns
+ * @param showColumns
+ */
+function toggleColumns(columns, showColumns) {
+  // Ignore required columns
+  columns = columns.filter(c => !c.required);
+
+  let hiddenColumnNames = [...props.hiddenColumnNames];
+  if (showColumns) {
+    hiddenColumnNames = hiddenColumnNames.filter(c => !columns.map(c => c.name).includes(c));
+  } else {
+    hiddenColumnNames = [...new Set([...hiddenColumnNames, ...columns.map(c => c.name)])];
+  }
+  emit('update:hidden-column-names', hiddenColumnNames);
+}
+
+/**
+ * Toggle a single column
+ * @param columnName
+ * @param showColumn
+ */
+function toggleColumn(columnName, showColumn) {
+  // Do not allow toggling required columns
+  if (props.columns.find(c => c.name === columnName).required) return;
+
+  // Determine weather to add (hide) or remove (show) the column
+  showColumn = showColumn ?? props.hiddenColumnNames.includes(columnName);
+
+  let hiddenColumnNames = [...props.hiddenColumnNames];
+
+  // Add or remove the column from the hiddenColumnNames array
+  if (showColumn) {
+    hiddenColumnNames = remove(hiddenColumnNames, columnName);
+  } else {
+    hiddenColumnNames.push(columnName);
+    hiddenColumnNames = [...new Set(hiddenColumnNames)];
+  }
+
+  emit('update:hidden-column-names', hiddenColumnNames);
+}
+</script>
+<style
+    lang="scss"
+    scoped
+>
+.category-toggle {
+  @apply text-xs font-bold rounded-lg border border-solid border-neutral-plus-5 px-2 py-1 mx-1 cursor-pointer flex items-center;
+
+  &.has-visible-columns {
+    @apply text-white bg-blue-base;
+  }
+}
+</style>

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

@@ -0,0 +1,4 @@
+export { default as ColumnListItem } from "./ColumnListItem.vue";
+export { default as ColumnSettingsDialog } from "./ColumnSettingsDialog.vue";
+export { default as TitleColumnFormat } from "./TItleColumnFormat.vue";
+export { default as VisibleColumnsToggleButtons } from "./VisibleColumnsToggleButtons.vue";

package/src/components/ActionTable/Form/Fields/NumberField.vue

@@ -20,11 +20,12 @@
 </template>
 
 <script setup>
+import { useDebounceFn } from '@vueuse/core';
 import { computed, nextTick, ref, watch } from 'vue';
 import { fNumber } from '../../../../helpers';
 import FieldLabel from './FieldLabel';
 
-const emit = defineEmits(['update:model-value']);
+const emit = defineEmits(['update:model-value', 'update']);
 const props = defineProps({
   modelValue: {
     type: [String, Number],
@@ -46,6 +47,10 @@ const props = defineProps({
     type: String,
     default: ''
   },
+  delay: {
+    type: Number,
+    default: 1000
+  },
   hidePrependLabel: Boolean,
   currency: Boolean,
   showName: Boolean
@@ -73,6 +78,9 @@ function format(number) {
   }
   return fNumber(number, options);
 }
+
+const onUpdateDebounced = useDebounceFn((val) => emit('update', val), props.delay);
+
 function onInput(value) {
   let number = '';
 
@@ -89,6 +97,11 @@ function onInput(value) {
     number = Number(value);
     numberVal.value = format(number);
   }
-  emit('update:model-value', number === '' ? undefined : number);
+
+  number = number === '' ? undefined : number;
+  emit('update:model-value', number);
+
+  // Delay the change event, so we only see the value after the user has finished
+  onUpdateDebounced(number);
 }
 </script>

package/src/components/ActionTable/Form/Fields/SelectField.vue

@@ -41,13 +41,13 @@
                 :key="'selected-' + chipOption.label"
                 class="!mr-1"
             >{{ chipOption.label }}
-              </q-chip>
-              <q-chip
-                  v-if="selectedOptions.length > chipOptions.length"
-                  class="!mr-1"
-              >
-                +{{ selectedOptions.length - chipOptions.length }}
-                </q-chip>
+            </q-chip>
+            <q-chip
+                v-if="selectedOptions.length > chipOptions.length"
+                class="!mr-1"
+            >
+              +{{ selectedOptions.length - chipOptions.length }}
+            </q-chip>
           </template>
           <template v-else>
             {{ placeholder }}
@@ -59,7 +59,7 @@
         >{{ selectedLabel }}
         </div>
       </template>
-      </q-select>
+    </q-select>
   </div>
 </template>
 <script setup>
@@ -257,7 +257,11 @@ function onUpdate(value) {
   if (Array.isArray(value)) {
     value = value.map((v) => v === '__null__' ? null : v);
   }
-  emit('update:model-value', value === '__null__' ? null : value);
+
+  value = value === '__null__' ? null : value;
+
+  emit('change', value);
+  emit('update:model-value', value);
 }
 
 /** XXX: This tells us when we should apply the filter. QSelect likes to trigger a new filter everytime you open the dropdown
@@ -292,6 +296,7 @@ async function onFilter(val, update) {
  */
 function onClear() {
   emit('update:model-value', undefined);
+  emit('change', undefined);
 }
 
 /**

package/src/components/ActionTable/index.ts

@@ -1,3 +1,4 @@
+export * from "./Columns";
 export * from "./Filters";
 export * from "./Form";
 export * from "./Layouts";

package/src/components/ActionTable/listControls.ts

@@ -147,6 +147,11 @@ export function useListControls(name: string, {
     function setItemInPagedList(updatedItem) {
         const data = pagedItems.value?.data?.map(item => (item.id === updatedItem.id && (item.updated_at === null || item.updated_at <= updatedItem.updated_at)) ? updatedItem : item);
         pagedItems.value = { ...pagedItems.value, data };
+
+        // Update the active item as well if it is set
+        if (activeItem.value?.id === updatedItem.id) {
+            activeItem.value = { ...activeItem.value, ...updatedItem };
+        }
     }
 
     /**

package/src/components/PanelsDrawer/PanelsDrawerPanels.vue

@@ -1,16 +1,19 @@
 <template>
   <QTabPanels
-    :model-value="activePanel"
-    class="overflow-y-auto bg-neutral-plus-7 h-full transition-all"
+      :model-value="activePanel"
+      class="overflow-y-auto bg-neutral-plus-7 h-full transition-all"
   >
     <QTabPanel v-for="panel in panels" :key="panel.name" :name="panel.name">
-      <RenderVnode v-if="panel.vnode" :vnode="panel.vnode" />
+      <RenderVnode
+          v-if="panel.vnode"
+          :vnode="panel.vnode"
+      />
     </QTabPanel>
   </QTabPanels>
 </template>
 
 <script setup>
-import { RenderVnode } from "quasar-ui-danx";
+import { RenderVnode } from '../Utility';
 
 defineProps({
   activePanel: {

package/src/helpers/actions.ts

@@ -1,4 +1,4 @@
-import { shallowRef, VNode } from "vue";
+import { ref, shallowRef, VNode } from "vue";
 import { FlashMessages } from "./index";
 
 interface ActionOptions {
@@ -8,11 +8,15 @@ interface ActionOptions {
     batch?: boolean;
     category?: string;
     class?: string;
+    trigger?: (target: object[] | object, input: any) => Promise<any>;
+    activeTarget?: any;
     vnode?: (target: object[] | object) => VNode;
     enabled?: (target: object) => boolean;
     batchEnabled?: (targets: object[]) => boolean;
+    optimistic?: (action: ActionOptions, target: object, input: any) => void;
     onAction?: (action: string | null, target: object, input: any) => Promise<any>;
     onBatchAction?: (action: string | null, targets: object[], input: any) => Promise<any>;
+    onStart?: (action: ActionOptions | null, targets: object, input: any) => boolean;
     onSuccess?: (action: string | null, targets: object, input: any) => any;
     onError?: (action: string | null, targets: object, input: any) => any;
     onFinish?: (action: string | null, targets: object, input: any) => any;
@@ -28,111 +32,113 @@ export const activeActionVnode = shallowRef(null);
  * @param {ActionOptions} globalOptions
  */
 export function useActions(actions: ActionOptions[], globalOptions: ActionOptions = null) {
-    const isSavingTarget = shallowRef(null);
+    const mappedActions = actions.map(action => {
+        const mappedAction = { ...globalOptions, ...action };
+        if (!mappedAction.trigger) {
+            mappedAction.trigger = (target, input) => performAction(mappedAction, target, input);
+            mappedAction.activeTarget = ref(null);
+        }
+        return mappedAction;
+    });
 
     /**
-     * Resolves an action by name or object, adds globalOptions and overrides any passes options
+     * Check if the provided target is currently being saved by any of the actions
+     */
+    function isSavingTarget(target: any): boolean {
+        if (!target) return false;
+
+        for (const action of mappedActions) {
+            const activeTargets = (Array.isArray(action.activeTarget.value) ? action.activeTarget.value : [action.activeTarget.value]).filter(t => t);
+            if (activeTargets.length === 0) continue;
+
+            for (const activeTarget of activeTargets) {
+                if (activeTarget === target || (activeTarget.id && activeTarget.id === target.id)) {
+                    return true;
+                }
+            }
+        }
+
+        return false;
+    }
+
+    /**
+     * Perform an action on a set of targets
      *
-     * @param name
-     * @param {any} options
-     * @returns {any}
+     * @param {string} name - can either be a string or an action object
+     * @param {object[]|object} target - an array of targets or a single target object
+     * @param {any} input - The input data to pass to the action handler
      */
-    function resolveAction(name, options = null) {
-        const action = typeof name === "string" ? actions.find(a => a.name === name) : name;
+    async function performAction(name: string | object, target: object[] | object, input: any = null) {
+        const action: ActionOptions = typeof name === "string" ? mappedActions.find(a => a.name === name) : name;
         if (!action) {
             throw new Error(`Unknown action: ${name}`);
         }
 
-        return { ...globalOptions, ...action, ...options };
-    }
+        const vnode = action.vnode && action.vnode(target);
+        let result: any;
 
-    return {
-        actions,
-        isSavingTarget,
-        resolveAction,
-
-        /**
-         * Filter the list of actions based on the provided filters in key-value pairs
-         * You can filter on any ActionOptions property by matching the value exactly or by providing an array of values
-         *
-         * @param filters
-         * @returns {ActionOptions[]}
-         */
-        filterActions(filters: object) {
-            let filteredActions = [...actions];
-
-            for (const filter of Object.keys(filters)) {
-                const filterValue = filters[filter];
-                filteredActions = filteredActions.filter(a => a[filter] === filterValue || (Array.isArray(filterValue) && filterValue.includes(a[filter])));
-            }
-            return filteredActions;
-        },
-
-        /**
-         * TODO: HOW TO INTEGRATE optimistic updates and single item updates?
-         */
-        async applyAction(item, input, itemData = {}) {
-            setItemInPagedList({ ...item, ...input, ...itemData });
-            const result = await applyActionRoute(item, input);
-            if (result.success) {
-                // Only render the most recent campaign changes
-                if (resultNumber !== actionResultCount) return;
-
-                // Update the updated item in the previously loaded list if it exists
-                setItemInPagedList(result.item);
-
-                // Update the active item if it is the same as the updated item
-                if (activeItem.value?.id === result.item.id) {
-                    activeItem.value = { ...activeItem.value, ...result.item };
-                }
-            }
-            return result;
-        },
-
-        /**
-         * Perform an action on a set of targets
-         *
-         * @param {string} name - can either be a string or an action object
-         * @param {object[]|object} target - an array of targets or a single target object
-         * @param {any} input
-         */
-        async performAction(name: string | object, target: object[] | object, input: any = null) {
-            const action = resolveAction(name);
-            const vnode = action.vnode && action.vnode(target);
-            let result = null;
-
-            isSavingTarget.value = target;
-
-            // 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) => {
-                    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 / vnode
-                            if (result === undefined || result === true || result?.success) {
-                                resolve(result);
-                            }
-                        },
-                        cancel: resolve
-                    };
-                });
-
-                activeActionVnode.value = null;
-            } else {
-                result = await onConfirmAction(action, target, input);
+        action.activeTarget.value = target;
+
+        // Run the onStart handler if it exists and quit the operation if it returns false
+        if (action.onStart) {
+            if (action.onStart(action, target, input) === false) {
+                return;
             }
+        }
 
-            isSavingTarget.value = null;
-            return result;
+        // 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) => {
+                activeActionVnode.value = {
+                    vnode,
+                    confirm: async (confirmInput: any) => {
+                        const result = await onConfirmAction(action, target, { ...input, ...confirmInput });
+
+                        // Only resolve when we have a non-error response, so we can show the error message w/o
+                        // hiding the dialog / vnode
+                        if (result === undefined || result === true || result?.success) {
+                            resolve(result);
+                        }
+                    },
+                    cancel: resolve
+                };
+            });
+
+            activeActionVnode.value = null;
+        } else {
+            result = await onConfirmAction(action, target, input);
         }
+
+        action.activeTarget.value = null;
+        return result;
+    }
+
+    /**
+     * Filter the list of actions based on the provided filters in key-value pairs
+     * You can filter on any ActionOptions property by matching the value exactly or by providing an array of values
+     *
+     * @param filters
+     * @returns {ActionOptions[]}
+     */
+    function filterActions(filters: object): ActionOptions[] {
+        let filteredActions = [...mappedActions];
+
+        for (const filter of Object.keys(filters)) {
+            const filterValue = filters[filter];
+            filteredActions = filteredActions.filter(a => a[filter] === filterValue || (Array.isArray(filterValue) && filterValue.includes(a[filter])));
+        }
+        return filteredActions;
+    }
+
+    return {
+        actions: mappedActions,
+        isSavingTarget,
+        filterActions,
+        performAction
     };
 }
 
@@ -146,6 +152,12 @@ async function onConfirmAction(action: ActionOptions, target: object[] | object,
         if (Array.isArray(target)) {
             result = await action.onBatchAction(action.name, target, input);
         } else {
+            // If the action has an optimistic callback, we call it before the actual action to immediately
+            // update the UI
+            if (action.optimistic) {
+                action.optimistic(action, target, input);
+            }
+
             result = await action.onAction(action.name, target, input);
         }
     } catch (e) {

package/src/svg/CaretDownIcon.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+  <path d="M10 12L6 8H14L10 12Z" fill="currentColor"/>
+</svg>

package/src/svg/index.ts

@@ -1,3 +1,4 @@
+export { default as CaretDownIcon } from "./CaretDownIcon.svg";
 export { default as DragHandleDotsIcon } from "./DragHandleDotsIcon.svg";
 export { default as DragHandleIcon } from "./DragHandleIcon.svg";
 export { default as FilterIcon } from "./FilterIcon.svg";