bt-core-app 1.1.8 → 1.2.0

package/src/components/BT-Json.vue

@@ -0,0 +1,67 @@
+<template>
+    <v-card max-height="350" class="overflow-y-auto">
+        <v-card-text>
+            <div v-for="(j, ind) in display" :key="ind">
+                <pre v-html="syntaxHighlight(j)"></pre>
+            </div>
+        </v-card-text>
+    </v-card>
+</template>
+
+<script setup lang="ts">
+    import { computed } from 'vue'
+    
+    const props = defineProps(['value'])
+
+    const display = computed(() => {
+        if (props.value == null) {
+            return []
+        }
+
+        if (Array.isArray(props.value))
+            return props.value
+
+        return [props.value]
+    })
+
+    function syntaxHighlight(json: any) {
+        if (typeof json != 'string') {
+            json = JSON.stringify(json, undefined, 2); //Object.keys(json).sort(), 2);
+        }
+        json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+
+        const e = json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match: any) {
+            var cls = 'number';
+            if (/^"/.test(match)) {
+                if (/:$/.test(match)) {
+                    cls = 'key';
+                } else {
+                    cls = 'string';
+                }
+            } else if (/true|false/.test(match)) {
+                cls = 'boolean';
+            } else if (/null/.test(match)) {
+                cls = 'null';
+            }
+            return '<span class="' + cls + '">' + match + '</span>';
+        });
+
+        return e
+    }
+
+</script>
+
+<style>
+    pre {
+        outline: 1px solid #ccc; 
+        padding: 5px; 
+        margin: 5px; }
+
+    pre .string { 
+        color: green; 
+    }
+    pre .number { color: darkorange; }
+    pre .boolean { color: rgb(191, 255, 0); }
+    pre .null { color: magenta; }
+    pre .key { color: rgb(141, 141, 141); }
+</style>

package/src/components/BT-Select-List-Box.vue

@@ -0,0 +1,258 @@
+<template>
+    <v-col
+        :class="colClass"
+        :lg="mLg"
+        :md="mMd"
+        :sm="mSm"
+        :cols="cols">
+        <v-list-item v-if="!alwaysOpen && mIsSelecting" @click="mIsSelecting = false"
+            :subtitle="label">
+            <template #append>
+                <v-row class="ma-0 pa-0">
+                    <slot name="actions" />
+                    <v-icon>mdi-chevron-up</v-icon>
+                    <slot name="actionsRight" />
+                    <v-menu 
+                        v-if="showSettings"
+                        offset-y 
+                        :close-on-content-click="false">
+                        <template v-slot:activator="{ props }">
+                            <v-btn 
+                                icon="mdi-cog"
+                                :size="mSize"
+                                title="Settings"
+                                v-bind="props" />
+                        </template>
+                        <v-list>
+                            <slot name="settings" />
+                        </v-list>
+                    </v-menu>
+                </v-row>
+            </template>
+        </v-list-item>
+        <v-slide-y-transition hide-on-leave group>
+            <v-text-field
+                v-if="(alwaysOpen || mIsSelecting) && showSearch !== false && isLengthyArray(searchProps)"
+                @click:prepend-inner="ui.searchString.value = undefined"
+                hide-details
+                key="1"
+                placeholder="Search"
+                :prepend-inner-icon="ui.searchString.value != null ? 'mdi-close' : undefined"
+                v-model="ui.searchString.value">
+                <template #append-inner>
+                    <v-btn
+                        v-if="canRefresh"
+                        @click="ui.refresh({ deepRefresh: true })"
+                        icon="mdi-refresh"
+                        :size="mSize"
+                        variant="text" />
+                </template>
+
+            </v-text-field>
+            <v-virtual-scroll
+                v-if="(alwaysOpen || mIsSelecting) && useVirtualScroller"
+                :height="height"
+                :items="ui.filteredItems.value"
+                key="2">
+                <template #default="{ item }">
+                    <slot name="item" v-bind:item="item" v-bind:selectItem="selectItem(item)" :active="isActive(item)">
+                        <v-list-item @click="selectItem(item)" :active="isActive(item)" color="primary">
+                            <slot v-bind:item="item">
+                                <v-list-item-title v-if="itemText != null || textFilter != null || textFunction != null">
+                                    {{ displayTitle(item) }}
+                                </v-list-item-title>
+                                <v-list-item-subtitle v-if="itemSubtext != null || subtextFilter != null || subtextFunction != null">
+                                    {{ displaySubtitle(item) }}
+                                </v-list-item-subtitle>
+                            </slot>
+
+                        </v-list-item>
+                    </slot>
+                </template>
+            </v-virtual-scroll>
+            <v-list
+                v-else-if="alwaysOpen || mIsSelecting"
+                :bg-color="transparent ? 'transparent' : undefined"
+                :height="height"
+                key="3">
+                <v-list-item
+                    v-if="canSelectNone"
+                    key="-1"
+                    density="compact"
+                    @click="selectItem(null)"
+                    subtitle="(Select None)" />
+                
+                <template v-for="(fItem, fInd) in ui.filteredItems.value">
+                    <slot name="item" :items="fItem" :index="fInd" :size="mSize">
+                        <v-list-item
+                            :active="isActive(fItem)"
+                            :key="fInd"
+                            :value="fItem"
+                            @click="selectItem(fItem)">
+                            <slot :item="fItem" :index="fInd" :size="mSize">
+                                <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>
+                    </slot>
+                </template>
+            </v-list>
+            <slot v-else name="selected" :item="selectedItem" :open="openList">
+                <v-list-item
+                    @click="openList"
+                    key="4"
+                    :title="label"
+                    :subtitle="displayTitle(selectedItem) ?? placeholder">
+                    <template #append>
+                        <v-row no-gutters>
+                            <slot name="actions" />
+                            <v-icon>mdi-chevron-down</v-icon>
+                            <slot name="actionsRight" />
+                            <v-menu
+                                v-if="showSettings"
+                                offset-y 
+                                :close-on-content-click="false">
+                                <template v-slot:activator="{ props }">
+                                    <v-btn 
+                                        icon
+                                        v-bind="props"
+                                        :size="mSize"
+                                        title="Settings" />
+                                </template>
+                                <v-list>
+                                    <slot name="settings" />
+                                </v-list>
+                            </v-menu>
+                        </v-row>
+                    </template>
+                </v-list-item>
+            </slot>
+            
+        </v-slide-y-transition>
+        
+        <v-overlay 
+            v-model="ui.isLoading.value"
+            class="align-center justify-center text-center"
+            contained
+            persistent>
+            <v-progress-circular indeterminate />
+            <p>{{ ui.loadingMsg.value }}</p>
+        </v-overlay>
+    </v-col>
+    
+</template>
+
+<script setup lang="ts">
+    import { type ListProps, useList } from '../composables/list'
+    import { computed, inject, ref } from 'vue'
+    import { useFilters } from '../composables/filters'
+    import { isLengthyArray, nestedValue } from '../composables/helpers'
+
+    defineOptions({
+        inheritAttrs: false
+    })
+
+    interface SelectProps extends ListProps {
+        alwaysOpen?: boolean
+        canRefresh?: boolean
+        canSearch?: boolean
+        canSelectNone?: boolean
+        colClass?: string
+        cols?: string | boolean
+        height?: string
+        isMobile?: boolean
+        isEditing?: boolean
+        isSelecting?: boolean
+        items?: [],
+        itemSubtext?: string
+        itemText?: string
+        itemValue?: string //inherited
+        label?: string
+        lg?: string | boolean
+        modelValue?: any
+        md?: string | boolean
+        nav?: string
+        placeholder?: string
+        showSettings?: boolean
+        sm?: string | boolean
+        subtextFilter?: string
+        subtextFunction?: Function
+        textFilter?: string
+        textFunction?: Function
+        transparent?: boolean
+        useVirtualScroller?: boolean
+    }
+
+    const emit = defineEmits(['update:modelValue', 'change'])
+
+    const props = withDefaults(defineProps<SelectProps>(), {
+        canRefresh: true,
+        height: '400',
+        isEditing: undefined,
+        sortOrder: 'Ascending',
+        cols: '12',
+        lg: false,
+        md: false,
+        sm: '6'
+    })
+
+    const mIsSelecting = ref(props.alwaysOpen ?? props.isSelecting ?? false)
+    const mSize = inject('size', () => ref('small'), true)
+    const mIsEditing = inject('isEditing', () => ref(false), true)
+    const cIsEditing = computed(() => props.isEditing ?? mIsEditing.value)
+
+    const ui = useList(props, undefined, {
+        useBladeSrc: false,
+        useRouteSrc: false
+    })
+
+    const filters = useFilters()
+
+    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 isActive = computed(() => (item: any) => {
+        return (props.itemValue ? item[props.itemValue] : item) == props.modelValue
+    })
+
+    function openList() {
+        if (cIsEditing.value)
+            mIsSelecting.value = true
+    }
+
+    function selectItem(item: any) {
+        mIsSelecting.value = false
+
+        if (item != null || props.canSelectNone) {
+            let v = item
+
+            if (item != null && props.itemValue != null)
+                v = item[props.itemValue]
+
+            emit('update:modelValue', v)
+            emit('change', v)
+        }
+    }
+
+    const selectedItem = computed(() => {
+        return props.modelValue != null ? ui.asyncItems.value.find((x: any) => (x.id == props.modelValue)) : null
+    })
+    
+    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-Select.vue

@@ -0,0 +1,46 @@
+<template>
+    <v-select
+        :append-icon="canRefresh ? 'mdi-refresh' : undefined"
+        :clearable="canSelectNone"
+        @click:append-icon="ui.refresh({ deepRefresh: true })"
+        hide-details
+        :items="ui.filteredItems.value"
+        :item-title="itemText"
+        :item-value="itemValue"
+        :variant="fieldVariant" />
+</template>
+
+<script setup lang="ts">
+    import { type ListProps, type ListEvents, useList } from '../composables/list';
+    import { type FieldVariant } from '../types'
+
+    interface SelectEvents extends ListEvents {
+
+    }
+
+    interface SelectProps extends ListProps {
+        additionalUrl?: string
+        canRefresh?: boolean
+        canSelectNone?: boolean
+        fieldVariant?: FieldVariant
+        items?: [],
+        itemText?: string
+        itemValue?: string //inherited
+        multiple?: boolean
+        nav?: string
+        onFilter?: Function
+        textFilter?: string
+    }
+
+    const emit = defineEmits<SelectEvents>()
+
+    const props = withDefaults(defineProps<SelectProps>(), {
+        sortOrder: 'Ascending'
+    })
+
+    const ui = useList(props, emit, {
+        useBladeSrc: false,
+        useRouteSrc: false
+    })
+
+</script>

package/src/components/BT-Snack.vue

@@ -0,0 +1,31 @@
+<template>
+    <v-snackbar
+        v-model="showSnack"
+        :timeout="cTimeout">
+        {{ modelValue }}
+    </v-snackbar>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+
+
+    interface SnackProps {
+        isTimed?: boolean
+        modelValue?: string
+        timeout?: string,
+        
+    }
+
+    const props = withDefaults(defineProps<SnackProps>(), {
+        isTimed: true,
+        timeout: '5000'
+    })
+
+    const cTimeout = computed(() => { return props.isTimed ? props.timeout : -1 })
+    const showSnack = ref(false)
+    watch(() => props.modelValue, () => {
+        showSnack.value = true
+    })
+
+</script>

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

@@ -40,7 +40,7 @@
     import { computed, onMounted, ref } from 'vue'
     import VueDatePicker from '@vuepic/vue-datepicker'
     import '@vuepic/vue-datepicker/dist/main.css'
-    import { useAuth } from '../useApi'
+    import { useAuth } from '../composables/auth'
     import { type SelectDateProps } from '../composables/dialogs'
 
     const props = withDefaults(defineProps<SelectDateProps>(), {

package/src/composables/actions.ts

@@ -1,5 +1,5 @@
 import type { BladeMode } from '../types'
-import { BTStore } from '../composables/stores'
+import { BTStoreDefinition } from '../composables/stores'
 import { BTApi, type PathOptions } from '../composables/api'
 import { useActionsTracker, type DoActionOptions } from '../composables/actions-tracker'
 import { ShallowRef, ComputedRef } from 'vue'
@@ -15,7 +15,7 @@ export interface GetOptions extends PathOptions, DoActionOptions {
     onGetAsync?: OnGetAsync
     /**called after get occurs successfully */
     onGetSuccessAsync?: OnGetSuccessAsync
-    store?: BTStore
+    store?: BTStoreDefinition
 }
 
 export interface DeleteOptions extends PathOptions, DoActionOptions {
@@ -25,7 +25,7 @@ export interface DeleteOptions extends PathOptions, DoActionOptions {
     onDeleteAsync?: OnDoAsync
     /**Will open a dialog box requesting user confirmation for delete action */
     onDeleteSuccessAsync?: OnDoAsync
-    store?: BTStore
+    store?: BTStoreDefinition
 }
 
 export interface RestoreOptions extends PathOptions, DoActionOptions {
@@ -35,7 +35,7 @@ export interface RestoreOptions extends PathOptions, DoActionOptions {
     onRestoreAsync?: OnDoSuccessAsync
     /**Called after restore succeeds */
     onRestoreSuccessAsync?: OnDoSuccessAsync
-    store?: BTStore
+    store?: BTStoreDefinition
 }
 
 export interface SaveOptions extends PathOptions, DoActionOptions {
@@ -52,7 +52,7 @@ export interface SaveOptions extends PathOptions, DoActionOptions {
     onSaveAsync?: OnDoSuccessAsync
     /**Called after save succeeds */
     onSaveSuccessAsync?: OnDoSuccessAsync
-    store?: BTStore
+    store?: BTStoreDefinition
 }
 
 export interface ApiActionOptions extends PathOptions, DoActionOptions {
@@ -63,7 +63,7 @@ export interface UseActionsOptions extends DoActionOptions {
     nav?: string
     proxyID?: string
     refresh?: boolean
-    store?: BTStore
+    store?: BTStoreDefinition
     throwError?: boolean
     url?: string
 }

package/src/composables/api.ts

@@ -91,6 +91,12 @@ export interface BTApi {
     patch: <T>(pathOptions: PathOptions) => Promise<T | undefined>
 }
 
+let current: BTApi
+
+export function useApi(): BTApi {
+    return current
+}
+
 export function createApi(options?: UseApiOptions): BTApi {
     const buildHeaders = options?.buildHeaders ?? defaultBuildHeaders
     const buildQuery = options?.buildQuery ?? defaultBuildQuery
@@ -458,7 +464,7 @@ export function createApi(options?: UseApiOptions): BTApi {
         }
     }
 
-    return {
+    current = {
         buildHeaders,
         buildQuery,
         buildUrl,
@@ -468,4 +474,6 @@ export function createApi(options?: UseApiOptions): BTApi {
         patch,
         post
     }
+
+    return current
 }

package/src/composables/auth.ts

@@ -31,11 +31,8 @@ export interface BaseAuthCredentials {
     userPermissions?: string[]
 }
 
-// const state = useStorage<BaseAuthCredentials>('auth-credentials', {})
-// let defaultsSet = false
 let defaultTimeZone = 'Australia/Melbourne'
 
-// export type FindAuthItem = (navName?: string | AuthItem) => AuthItem | undefined
 export type GetAuthUrl = (redirectPath?: string, state?: string) => string
 
 export interface CreateAuthOptions {
@@ -70,28 +67,17 @@ export interface BTAuth {
     tryLogin: () => boolean | undefined
 }
 
-// /**returns current timezone */
-// export function useTimeZone() {
-//     return state.value.timeZone ?? defaultTimeZone
-// }
+let current: BTAuth
 
-// export function useAuthData() {
-//     return state.value
-// }
+export function useAuth(): BTAuth {
+    return current
+}
 
 export function createAuth(options: CreateAuthOptions): BTAuth {
-    const router = useRouter()
     const expiryFormat = options.expiryTokenFormat ?? 'd/MM/yyyy h:mm:ss a'
     const authState = useStorage<string>('auth-credentials-state', (Math.random().toString(36).substring(4, 19) + Math.random().toString(12).substring(1, 11)))
     const state = useStorage<BaseAuthCredentials>('auth-credentials', {})
-    
-    // if (!defaultsSet) {
-    //     setDefaults()
-    //     defaultsSet = true
-    // }
 
-    // const { endDemo, isDemoing } = useDemo()
-    
     /**can edit if navName is undefined, isGlobalAdmin, not suspended, or user permissions allow editing of this navItem */
     function canEdit(navName?: string): boolean {
         if (navName == null) return true
@@ -286,6 +272,7 @@ export function createAuth(options: CreateAuthOptions): BTAuth {
 
         //maybe redirect
         if (navNameRedirect != null) {
+            const router = useRouter()
             if (router.currentRoute.value.name != navNameRedirect) {
                 router.push({ name: navNameRedirect })
             }
@@ -363,7 +350,7 @@ export function createAuth(options: CreateAuthOptions): BTAuth {
         return e1 <= e2
     }
 
-    return {
+    current = {
         authState: authState.value,
         canEdit,
         canEditPermit,
@@ -379,4 +366,6 @@ export function createAuth(options: CreateAuthOptions): BTAuth {
         setAuth,
         tryLogin
     }
+
+    return current
 }

package/src/composables/cosmetics.ts

@@ -1,4 +1,4 @@
-import { useStorage } from '@vueuse/core'
+import { RemovableRef, useStorage } from '@vueuse/core'
 import { useTheme } from 'vuetify';
 
 interface CosmeticData {
@@ -49,6 +49,7 @@ export interface UseCosmeticsOptions<T extends BaseCosmeticTheme> {
 
 export interface BTCosmetics {
     state: CosmeticData
+    initiate: () => void
     resetCosmetics: (toDefault: boolean) => void
     setTemporaryColor: (color: string) => void
     toggleDrawer: () => void
@@ -57,27 +58,14 @@ export interface BTCosmetics {
     undoTemporaryColor: () => void
 }
 
-export function createCosmetics<T extends BaseCosmeticTheme>(options: UseCosmeticsOptions<T>): BTCosmetics {
-    const themeManager = useTheme();
-    const state = useStorage<CosmeticData>('cosmetics', {
-        theme: options.defaultTheme ?? 'light',
-        light: options.defaultLightTheme ?? defaultLight,
-        dark: options.defaultDarkTheme ?? defaultDark,
-        drawer: options.defaultDrawer ?? true,
-        drawerStick: options.defaultDrawerStick ?? false
-    })
+let defaults: any = {}
+let state: RemovableRef<CosmeticData>
+
+export function useCosmetics(): BTCosmetics {
+    const themeManager = useTheme()
 
-    // if (!defaultsSet) {
-    //     state.value.theme ??= (options.defaultTheme ?? 'light')
-    //     state.value.light ??= (options.defaultLightTheme ?? defaultLight)
-    //     state.value.dark ??= (options.defaultDarkTheme ?? defaultDark)
-    //     state.value.drawer ??= (options.defaultDrawer ?? true)
-    //     state.value.drawerStick ??= (options.defaultDrawerStick ?? false)
-    //     defaultsSet = true
-    // }
-    
     /**used for initiating the themes and colors from storage when the web app is loaded */
-    // function loadCosmetics() {
+    function loadCosmetics() {
         themeManager.global.name.value = state.value.theme!
         
         //load dark colors
@@ -96,17 +84,16 @@ export function createCosmetics<T extends BaseCosmeticTheme>(options: UseCosmeti
             const lKey = lightKey as keyof typeof storedLightTheme
             lightColors[lKey] = storedLightTheme[lKey]
         })
-    // }
-
+    }
+    
     /**resets to the default colors or last saved colors of the current theme */
     function resetCosmetics(toDefault: boolean) {
-        
         themeManager.global.name.value = state.value.theme!
 
         if (themeManager.global.name.value == 'dark') {
             //dark
             if (toDefault)
-                state.value.dark = { ...(options.defaultDarkTheme ?? defaultDark) };
+                state.value.dark = { ...(defaults.defaultDarkTheme ?? defaultDark) };
 
             themeManager.themes.value.dark = {
                 ...themeManager.themes.value.dark,
@@ -119,7 +106,7 @@ export function createCosmetics<T extends BaseCosmeticTheme>(options: UseCosmeti
         else {
             //light
             if (toDefault)
-                state.value.light = { ...(options.defaultLightTheme ?? defaultLight) };
+                state.value.light = { ...(defaults.defaultLightTheme ?? defaultLight) };
 
             themeManager.themes.value.light = {
                 ...themeManager.themes.value.light,
@@ -159,15 +146,15 @@ export function createCosmetics<T extends BaseCosmeticTheme>(options: UseCosmeti
         const dark = themeManager.themes.value.dark
         const light = themeManager.themes.value.light
 
-        dark.colors.primary = (state.value.dark ?? options.defaultDarkTheme ?? defaultDark).primary
-        light.colors.primary = (state.value.light ?? options.defaultLightTheme ?? defaultLight).primary
+        dark.colors.primary = (state.value.dark ?? defaults.defaultDarkTheme ?? defaultDark).primary
+        light.colors.primary = (state.value.light ?? defaults.defaultLightTheme ?? defaultLight).primary
 
         document.querySelector('meta[name="theme-color"]')?.setAttribute("content", '')
     }
 
     return {
         state: state.value,
-        // loadCosmetics,
+        initiate: loadCosmetics,
         resetCosmetics,
         setTemporaryColor,
         toggleDrawer,
@@ -175,4 +162,16 @@ export function createCosmetics<T extends BaseCosmeticTheme>(options: UseCosmeti
         toggleLightDark,
         undoTemporaryColor
     }
+}
+
+export function createCosmetics<T extends BaseCosmeticTheme>(options: UseCosmeticsOptions<T>) {
+    state = useStorage<CosmeticData>('cosmetics', {
+        theme: options.defaultTheme ?? 'light',
+        light: options.defaultLightTheme ?? defaultLight,
+        dark: options.defaultDarkTheme ?? defaultDark,
+        drawer: options.defaultDrawer ?? true,
+        drawerStick: options.defaultDrawerStick ?? false
+    })
+
+    defaults = options
 }