npm - bt-core-app - Versions diffs - 0.0.0 - Mend

bt-core-app 0.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (53) hide show

package/.vscode/extensions.json +3 -0
package/README.md +45 -0
package/index.html +13 -0
package/package.json +39 -0
package/public/vite.svg +1 -0
package/src/assets/vue.svg +1 -0
package/src/components/BT-Btn.vue +40 -0
package/src/components/BT-Col.vue +36 -0
package/src/components/BT-Span.vue +21 -0
package/src/components/Dialog-Confirm.vue +47 -0
package/src/components/Dialog-Select-Date.vue +89 -0
package/src/components/Dialog-Select.vue +140 -0
package/src/components/Dialog-Text.vue +59 -0
package/src/composables/actions-tracker.ts +99 -0
package/src/composables/actions.ts +354 -0
package/src/composables/api.ts +471 -0
package/src/composables/auth.ts +382 -0
package/src/composables/cosmetics.ts +178 -0
package/src/composables/csv.ts +198 -0
package/src/composables/dates.ts +79 -0
package/src/composables/demo.ts +25 -0
package/src/composables/dialogs.ts +115 -0
package/src/composables/document-meta.ts +40 -0
package/src/composables/draggable.ts +189 -0
package/src/composables/filters.ts +256 -0
package/src/composables/forage.ts +49 -0
package/src/composables/helpers.ts +694 -0
package/src/composables/id.ts +20 -0
package/src/composables/list.ts +601 -0
package/src/composables/navigation.ts +214 -0
package/src/composables/presets.ts +20 -0
package/src/composables/pwa.ts +89 -0
package/src/composables/resizable.ts +382 -0
package/src/composables/rules.ts +40 -0
package/src/composables/stores.ts +797 -0
package/src/composables/track.ts +55 -0
package/src/composables/urls.ts +11 -0
package/src/core.ts +92 -0
package/src/index.ts +16 -0
package/src/types.ts +13 -0
package/src/useApi.ts +68 -0
package/src/vite-env.d.ts +1 -0
package/test/api.test.ts +84 -0
package/test/forage.test.ts +31 -0
package/test/helpers.test.ts +231 -0
package/test/navigation.test.ts +99 -0
package/test/stores-last-update.test.ts +138 -0
package/test/stores-session.test.ts +118 -0
package/test/track.test.ts +29 -0
package/test/utils.ts +15 -0
package/tsconfig.json +33 -0
package/tsconfig.node.json +11 -0
package/vite.config.ts +19 -0

package/.vscode/extensions.json ADDED Viewed

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
+}

package/README.md ADDED Viewed

@@ -0,0 +1,45 @@
+## Vue 3 + TypeScript + Vite
+This template should help get you started developing with Vue 3 and TypeScript in Vite.  It includes a number of helpful components and composables.
+The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+## Recommended IDE Setup
+- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
+## Environment modes - production, staging, development
+Control what mode you are in by adding environment files to your project root folder with these variables:
+```
+VITE_BASE_AUTH_URL=[https://auth...]
+VITE_BASE_DATA_URL=[https://data...]
+VITE_WEB_APP_URL=[https://webapp...]
+VITE_[MICROSERVICE]=[https://microservice...]
+VITE_LOCAL_DB_NAME=[btweb]
+```
+The VITE_[MICROSERVICE] variable can include any number of variables like this:
+```
+VITE_auth=[https://data_auth...]
+VITE_ordering=[https://data_ordering...]
+VITE_courier-invoicing=[https://data_courier-invoicing...]
+```
+## Auth modes
+Auth credentials are stored locally using @vueuse/core's useStorage composable.  You can change the storage key by setting an environment variable:
+```
+VITE_AUTH_STORAGE_TOKEN=[string]
+```
+Permissions take the format [permission].[access].  For instance:
+```
+customers.view
+customers.edit
+```
+If the navigation item requires a permission of 'customers', then it will allow viewing and also editing.

package/index.html ADDED Viewed

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + Vue + TS</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package/package.json ADDED Viewed

@@ -0,0 +1,39 @@
+{
+  "name": "bt-core-app",
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc && vite build",
+    "preview": "vite preview",
+    "test": "vitest",
+    "test live": "vitest watch"
+  },
+  "dependencies": {
+    "@vuepic/vue-datepicker": "^8.3.1",
+    "localforage": "^1.10.0",
+    "luxon": "^3.4.4",
+    "thenby": "^1.3.4",
+    "vuejs-confirm-dialog": "^0.5.1"
+  },
+  "peerDependencies": {
+    "@vueuse/core": "^10.4.1",
+    "pinia": "^2.0.24",
+    "vue": "^3.4.21",
+    "vue-router": "^4.0.0",
+    "vuetify": "^3.4.10"
+  },
+  "devDependencies": {
+    "@testing-library/vue": "^8.0.3",
+    "@types/luxon": "^3.4.2",
+    "@vitejs/plugin-vue": "^5.0.4",
+    "@vitest/ui": "^1.4.0",
+    "happy-dom": "^14.3.6",
+    "msw": "^2.2.10",
+    "typescript": "^5.2.2",
+    "vite": "^5.1.6",
+    "vitest": "^1.4.0",
+    "vue": "^3.4.21",
+    "vue-tsc": "^1.8.27"
+  }
+}

package/public/vite.svg ADDED Viewed

@@ -0,0 +1 @@

+ <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/src/assets/vue.svg ADDED Viewed

@@ -0,0 +1 @@

+ <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>

package/src/components/BT-Btn.vue ADDED Viewed

@@ -0,0 +1,40 @@
+<template>
+    <v-btn
+        v-bind="$attrs"
+        :disabled="!mIsEditing"
+        :icon="mIcon"
+        :size="mSize"
+        :variant="mVariant" />
+</template>
+<script setup lang="ts">
+    import { computed, inject, ref } from 'vue'
+    import { usePresets } from '../useApi'
+    interface BtnProps {
+        icon?: string
+        isEditing?: boolean
+        preset?: string
+        size?: string,
+        variant?: 'flat' | 'text' | 'elevated' | 'tonal' | 'outlined' | 'plain'
+    }
+    const props = withDefaults(defineProps<BtnProps>(), {
+        icon: undefined,
+        isEditing: true,
+        size: undefined,
+        variant: 'text'
+    })
+    const presets = usePresets(props.preset)
+    const mIcon = computed(() => props.icon ?? presets.icon)
+    const iIsEditing = inject('isEditing', () => ref(false), true)
+    const mIsEditing = computed(() => props.isEditing ?? presets.isEditing ?? iIsEditing.value)
+    const iSize = inject('size', () => ref(props.size ?? 'small'), true)
+    const mSize = computed(() => props.size ?? presets.size ?? iSize.value)
+    const mVariant = computed(() => props.variant ?? presets.variant)
+</script>

package/src/components/BT-Col.vue ADDED Viewed

@@ -0,0 +1,36 @@
+<template>
+    <v-col
+        :lg="mLg"
+        :md="mMd"
+        :sm="mSm"
+        :cols="cols"
+        :class="noGutters ? 'px-0' : ''">
+        <slot></slot>
+    </v-col>
+</template>
+<script setup lang="ts">
+    import { computed, inject, ref } from 'vue'
+    interface ColProps {
+        cols?: string | boolean
+        isMobile?: boolean
+        lg?: string | boolean
+        md?: string | boolean
+        sm?: string | boolean
+        noGutters?: boolean
+    }
+    const props = withDefaults(defineProps<ColProps>(), {
+        cols: '12',
+        lg: false,
+        md: false,
+        sm: '6'
+    })
+    const mIsMobile = inject('isMobile', () => ref(false), true)
+    const mLg = computed(() => (props.isMobile ?? mIsMobile.value) ? false : props.lg)
+    const mMd = computed(() => (props.isMobile ?? mIsMobile.value) ? false : props.md)
+    const mSm = computed(() => (props.isMobile ?? mIsMobile.value) ? false : props.sm)
+</script>

package/src/components/BT-Span.vue ADDED Viewed

@@ -0,0 +1,21 @@
+<template>
+    <span>{{ prefix }}{{ displayText }}{{ suffix }}</span>
+</template>
+<script setup lang="ts">
+    import { useFilters } from '../index'
+    import { computed } from 'vue'
+    interface Props {
+        filter: string
+        prefix?: string
+        suffix?: string
+        value: any
+    }
+    const props = defineProps<Props>()
+    const { findFilter } = useFilters()
+    const displayText = computed(() => {
+        return props.filter ? findFilter(props.filter)(props.value) : props.value
+    })
+</script>

package/src/components/Dialog-Confirm.vue ADDED Viewed

@@ -0,0 +1,47 @@
+<template>
+    <v-dialog v-model="show">
+        <div>
+            <v-card :max-width="maxWidth ?? '400'" :min-width="minWidth" :title="title" class="mx-auto">
+                <v-card-text>
+                    <div class="text-h6">{{ msg }}</div>
+                </v-card-text>
+                <v-card-actions>
+                    <v-btn @click="cancel">{{ cancelText ?? 'No' }}</v-btn>
+                    <v-btn @click="confirm">{{ confirmText ?? 'Yes' }}</v-btn>
+                </v-card-actions>
+            </v-card>
+        </div>
+    </v-dialog>
+</template>
+<script setup lang="ts">
+    import { onMounted } from 'vue';
+    import { type ConfirmDialogProps } from '../composables/dialogs'
+    const props = withDefaults(defineProps<ConfirmDialogProps>(), {
+        cancelValue: false,
+        confirmValue: true,
+        startIncludeDetails: false
+    })
+    // const props = defineProps(['cancelText', 'confirmText', 'msg', 'minWidth', 'title'])
+    const emit = defineEmits(['confirm', 'cancel'])
+    let show = false
+    function cancel() {
+        show = false
+        emit('cancel', props.cancelValue)
+    }
+    function confirm() {
+        show = false
+        emit('confirm', props.confirmValue)
+    }
+    onMounted(() => {
+        show = true
+    })
+</script>

package/src/components/Dialog-Select-Date.vue ADDED Viewed

@@ -0,0 +1,89 @@
+<template>
+    <v-dialog v-model="show">
+        <div>
+            <v-card
+                :max-width="maxWidth ?? '400'"
+                :min-width="minWidth"
+                class="mx-auto"
+                :title="title">
+                <v-card-text class="pa-0">
+                    <VueDatePicker
+                        auto-apply
+                        dark
+                        :enable-time-picker="useTime"
+                        inline
+                        :is-24="false"
+                        :model-auto="range"
+                        :range="range"
+                        :time-picker-inline="!range && useTime"
+                        :timezone="credentials.timeZone"
+                        utc
+                        v-bind="$attrs"
+                        v-model="date" />
+                </v-card-text>
+                <v-card-actions>
+                    <v-row no-gutters>
+                        <v-col cols="6">
+                            <v-btn v-if="required !== true" block @click="cancel">{{ cancelText ?? 'Cancel' }}</v-btn>
+                        </v-col>
+                        <v-col cols="6">
+                            <v-btn block @click="accept" :disabled="!canAccept">{{ confirmText ?? 'OK' }}</v-btn>
+                        </v-col>
+                    </v-row>
+                </v-card-actions>
+            </v-card>
+        </div>
+    </v-dialog>
+</template>
+<script setup lang="ts">
+    import { computed, onMounted, ref } from 'vue'
+    import VueDatePicker from '@vuepic/vue-datepicker'
+    import '@vuepic/vue-datepicker/dist/main.css'
+    import { useAuth } from '../useApi'
+    import { type SelectDateProps } from '../composables/dialogs'
+    const props = withDefaults(defineProps<SelectDateProps>(), {
+        cancelValue: false,
+        height: '400'
+    })
+    const emit = defineEmits(['confirm', 'cancel'])
+    const date = ref()
+    const { credentials } = useAuth()
+    const canAccept = computed(() => {
+        return !props.required || date.value
+    })
+    let show = false
+    function accept() {
+        if (props.required && !date.value) {
+            //required
+            return
+        }
+        show = false
+        emit('confirm', date.value)
+    }
+    // function maybeAccept(items: any) {
+    //     if (!props.multiple) {
+    //         if (isArrayOfLength(items, 1) || (props.canUnselect && !isLengthyArray(items))) {
+    //             show = false
+    //             emit('confirm', getSelectedValues(items))
+    //         }
+    //     }
+    // }
+    function cancel() {
+        show = false
+        emit('cancel', undefined)
+    }
+    onMounted(() => {
+        show = true
+    })
+</script>

package/src/components/Dialog-Select.vue ADDED Viewed

@@ -0,0 +1,140 @@
+<template>
+    <v-dialog v-model="show">
+        <div>
+            <v-card
+                :max-width="maxWidth ?? '400'"
+                :min-width="minWidth"
+                class="mx-auto"
+                :title="title">
+                <!-- <v-card-title v-if="title != null">{{ title }}</v-card-title> -->
+                <v-card-text class="pa-0">
+                    <v-text-field
+                        v-if="ui.showSearch.value"
+                        append-inner-icon="mdi-magnify"
+                        density="compact"
+                        hide-details
+                        placeholder="Search"
+                        v-model="ui.searchString.value" />
+                    <!-- <div v-if="multiple" @click="selectAll" class="text-center my-1">
+                        <v-btn>Select All</v-btn>
+                    </div> -->
+                    <v-list v-if="isLengthyArray(ui.filteredItems.value)"
+                        class="overflow-y-auto"
+                        v-model:selected="selection"
+                        :height="height"
+                        :select-strategy="multiple ? 'independent' : 'single-independent'"
+                        @update:selected="maybeAccept">
+                        <template v-for="(fItem) in ui.filteredItems.value" :key="index">
+                            <v-list-item :value="fItem">
+                                <slot v-bind:item="fItem">
+                                    <v-list-item-title v-if="itemText != null || textFilter != null || textFunction != null">
+                                        {{ displayTitle(fItem) }}
+                                    </v-list-item-title>
+                                    <v-list-item-subtitle v-if="itemSubtext != null || subtextFilter != null || subtextFunction != null">
+                                        {{ displaySubtitle(fItem) }}
+                                    </v-list-item-subtitle>
+                                </slot>
+                            </v-list-item>
+                            </template>
+                    </v-list>
+                </v-card-text>
+                <v-card-actions>
+                    <v-row no-gutters>
+                        <v-col :cols="multiple ? 6 : 12">
+                            <v-btn v-if="required !== true" block @click="cancel">{{ cancelText ?? 'Cancel' }}</v-btn>
+                        </v-col>
+                        <v-col v-if="multiple == true" cols="6">
+                            <v-btn block @click="accept" :disabled="!canAccept">{{ confirmText ?? 'OK' }}</v-btn>
+                        </v-col>
+                    </v-row>
+                </v-card-actions>
+                <v-overlay
+                    v-model="ui.isLoading.value"
+                    class="align-center justify-center text-center"
+                    contained
+                    persistent>
+                    <v-progress-circular indeterminate />
+                    <p>{{ ui.loadingMsg }}</p>
+                </v-overlay>
+            </v-card>
+        </div>
+    </v-dialog>
+</template>
+<script setup lang="ts">
+    import { computed, onMounted, ref } from 'vue';
+    import { isLengthyArray, isArrayOfLength, nestedValue } from '../composables/helpers'
+    import { useFilters } from '../index'
+    import { useList } from '../composables/list';
+    import { type SelectDialogProps } from '../composables/dialogs'
+    const props = withDefaults(defineProps<SelectDialogProps>(), {
+        cancelValue: false,
+        height: '400',
+        showSearch: true
+    })
+    const emit = defineEmits(['confirm', 'cancel'])
+    const ui = useList(props)
+    const filters = useFilters()
+    const selection = ref([])
+    const displaySubtitle = computed(() => (item: any) => {
+        let v = props.subtextFunction != null ? props.subtextFunction(item) : item
+        v = props.itemSubtext != null ? nestedValue(v, props.itemSubtext) : v
+        return props.subtextFilter != null ? filters.findFilter(props.subtextFilter)(v) : v
+    })
+    const displayTitle = computed(() => (item: any) => {
+        let v = props.textFunction != null ? props.textFunction(item) : item
+        v = props.itemText != null ? nestedValue(v, props.itemText) : v
+        return props.textFilter != null ? filters.findFilter(props.textFilter)(v) : v
+    })
+    const canAccept = computed(() => {
+        return !props.required || isLengthyArray(selection.value)
+    })
+    let show = false
+    function getSelectedValues(items: any) {
+        const res = props.itemValue != null ? items.map((x: any) => nestedValue(x, props.itemValue)) : items
+        if (props.multiple) {
+            return res
+        }
+        else {
+            return res.length > 0 ? res[0] : null
+        }
+    }
+    function accept() {
+        if (props.required && !isLengthyArray(selection.value)) {
+            //required
+            return
+        }
+        show = false
+        emit('confirm', getSelectedValues(selection.value))
+    }
+    function maybeAccept(items: any) {
+        if (!props.multiple) {
+            if (isArrayOfLength(items, 1) || (props.canUnselect && !isLengthyArray(items))) {
+                show = false
+                emit('confirm', getSelectedValues(items))
+            }
+        }
+    }
+    function cancel() {
+        show = false
+        emit('cancel', undefined)
+    }
+    onMounted(() => {
+        show = true
+    })
+</script>

package/src/components/Dialog-Text.vue ADDED Viewed

@@ -0,0 +1,59 @@
+<template>
+    <v-dialog v-model="show">
+        <div>
+            <v-card :max-width="maxWidth ?? '400'" :min-width="minWidth" :title="title" class="mx-auto">
+                <v-card-text>
+                    <v-text-field
+                        :label="label"
+                        v-model="mVal" />
+                    <div class="text-h6">{{ msg }}</div>
+                </v-card-text>
+                <v-card-actions>
+                    <v-btn @click="cancel">{{ cancelText ?? 'Cancel' }}</v-btn>
+                    <v-btn @click="confirm" :disabled="!canAccept">{{ confirmText ?? 'Done' }}</v-btn>
+                </v-card-actions>
+            </v-card>
+        </div>
+    </v-dialog>
+</template>
+<script setup lang="ts">
+    import { computed, onMounted, ref } from 'vue';
+    import { type TextDialogProps } from '../composables/dialogs'
+    const props = withDefaults(defineProps<TextDialogProps>(), {
+        height: '400'
+    })
+    const emit = defineEmits(['confirm', 'cancel'])
+    const canAccept = computed(() => {
+        return !props.required || mVal.value != null
+    })
+    let show = false
+    const mVal = ref(props.value)
+    function confirm() {
+        if (props.required && mVal.value == null) {
+            //required
+            return
+        }
+        show = false
+        emit('confirm', mVal.value)
+    }
+    function cancel() {
+        show = false
+        emit('cancel', undefined)
+    }
+    onMounted(() => {
+        show = true
+    })
+</script>

package/src/composables/actions-tracker.ts ADDED Viewed

@@ -0,0 +1,99 @@
+import { computed, ref, shallowRef } from 'vue'
+import type { ShallowRef, Ref } from 'vue'
+import { useConfirmAsync } from '@/composables/dialogs'
+import { watchArray } from '@vueuse/core'
+import { useId } from '@/composables/id'
+interface LoadingMsg {
+    id: string,
+    msg: string
+}
+export interface DoActionOptions {
+    completionMsg?: string
+    confirmationMsg?: string
+    errorMsg?: string
+    loadingMsg?: string
+    requireConfirmation?: boolean,
+    throwError?: boolean
+}
+export function useActionsTracker(useOptions?: DoActionOptions) {
+    const loadingMsgs: Ref<LoadingMsg[]> = ref([])
+    const mLoadingMsg: ShallowRef<string | undefined> = shallowRef()
+    const mErrorMsg: ShallowRef<string | undefined> = shallowRef()
+    const mCompletionMsg: ShallowRef<string | undefined> = shallowRef()
+    const isLoading = computed(() => mLoadingMsg.value != null)
+    function endLoading(id: string) {
+        loadingMsgs.value = loadingMsgs.value.filter(x => x.id != id)
+    }
+    function startLoading(msg?: string): string {
+        const e = {
+            id: useId(),
+            msg: msg ?? 'Loading'
+        }
+        loadingMsgs.value.push(e)
+        return e.id
+    }
+    function logError(err?: string | Error) {
+        if (err != null)
+            mErrorMsg.value = err.toString()
+    }
+    function clearErrors() {
+        mErrorMsg.value = undefined
+    }
+    async function doAction(action: any, options?: DoActionOptions) {
+        const opt = { ...options }
+        opt.completionMsg ??= useOptions?.completionMsg
+        opt.confirmationMsg ??= useOptions?.confirmationMsg
+        opt.errorMsg ??= useOptions?.errorMsg
+        opt.loadingMsg ??= useOptions?.loadingMsg ?? 'Loading'
+        opt.requireConfirmation ??= useOptions?.requireConfirmation
+        const id = startLoading(opt.loadingMsg)
+        let res: any = null
+        try {
+            if (opt.requireConfirmation || opt.confirmationMsg) {
+                if (!await useConfirmAsync(opt.confirmationMsg ?? 'Are you sure?'))
+                    return
+            }
+            res = await action()
+            if (opt.completionMsg != null) {
+                mCompletionMsg.value = opt.completionMsg
+            }
+            return res
+        }
+        catch (err) {
+            if (opt.throwError == true)
+                return res
+            else
+                logError(opt.errorMsg ?? (err as string) ?? 'error')
+        }
+        finally {
+            endLoading(id)
+        }
+    }
+    watchArray(loadingMsgs, (newList: LoadingMsg[]) => {
+        mLoadingMsg.value = newList.length > 0 ? newList[0].msg : undefined
+    }, { deep: true })
+    return {
+        actionErrorMsg: mErrorMsg,
+        actionLoadingMsg: mLoadingMsg,
+        actionCompleteMsg: mCompletionMsg,
+        clearErrors,
+        doAction,
+        isLoading,
+        logError
+    }
+}