bt-core-app 0.0.0

package/src/composables/navigation.ts

@@ -0,0 +1,214 @@
+//nav item needs to have a 'ignore Suspension' prop
+import { useUrl } from '@/composables/urls'
+import { appendUrl, deepSelect } from '@/composables/helpers'
+import { ref, type Ref } from 'vue'
+import { type AuthItem } from './auth'
+
+export interface ExternalParty {
+    party?: string
+    property?: string
+}
+
+export interface ExternalNavigation {
+    canPull?: boolean
+    canPush?: boolean
+    convertFunc?: Function
+    name?: string
+    localNavigation?: string
+    localDisplayPath?: string
+    localComparePath?: string
+    syncComparePath?: string
+    syncDisplayPath?: string
+    syncIDPath?: string
+}
+
+export interface NavigationItem extends AuthItem {
+    /**aliases are other names that could use this navigation item's set of permissions, etc.*/
+    aliases?: string[]
+    /**potentially the nav that leads to the archive */
+    archiveName?: string
+    /**the name of the background img to show when the route opens this nav */
+    background?: string
+    /**how long until locally cached data is refreshed */
+    cacheExpiryHours?: number
+    /**any children of this nav item */
+    children?: NavigationItem[]
+    /**the name that will be displayed in the navigation menu */
+    displayName?: string
+    /**where credentials can be found for external parties*/
+    externalPartyCredentialNavigation?: string
+    /**possible external parties to connect to and sync with */
+    externalParties?: ExternalParty[]
+    /**possible external party navigation items and how to connect/sync */
+    externalNavigations?: ExternalNavigation[]
+    /**will hide app bar if set to true when the route opens this nav */
+    hideAppBar?: boolean
+    /**will hide the nav sidebar if set to true when the route opens this nav */
+    hideNavigation?: boolean
+    /**will open a dialog box to confirm navigating away from this route */
+    hesitate?: boolean
+    /**the mdi icon that goes with this nav item.  Will show in places like the nav menu */
+    icon?: string
+    /**default to false. True will mean that even is account is suspended, this will still allow navigation */
+    ignoreSuspension?: boolean
+    /**default to true.  When false will hide from nav menu */
+    isInNavMenu?: boolean
+    /**the microservice the leads to the default url to obtain data from.  Defaults to 'default'. */
+    microservice?: string
+    /**the name of this nav item. */
+    name?: string
+    /**the url path on top of the base microservice url */
+    path?: string
+    /**permissions that are required for this navItem.  All these permissions must be met. */
+    permissions?: string[]
+    /**default to true.  When false will allow universal access regardless of permission */
+    requiresAuth?: boolean
+    /**the name of the route to access individual items */
+    singleName?: string
+    /**this nav item is restricted to these subscriptions.  So the user needs to have at least one of these subscription codes. */
+    subscriptions?: string[]
+    /**this nav item is preferred in this subscription codes. */
+    subFilters?: string[]
+}
+
+const appBar = ref(true)
+const appNavigation = ref(false)
+const backgroundName: Ref<string | undefined> = ref()
+const hesitate = ref(false)
+let removeHesitateListener: any = null
+
+export interface BTNavigation {
+    showAppBar: Ref<boolean>
+    showAppNavigation: Ref<boolean>
+    backgroundName: Ref<string | undefined>
+    hesitate: Ref<boolean>
+    navigationItems: NavigationItem[],
+    findArchiveName: (navName?: string) => string | undefined
+    findCacheHours: (navName?: string) => number
+    findDisplay: (navName?: string) => string | undefined
+    findIcon: (navName?: string) => string | undefined
+    findItem: (navName?: string | NavigationItem) => NavigationItem | null
+    findStoreName: (navName?: string) => string
+    findPath: (navName?: string) => string | undefined
+    findSingleDisplay: (navName?: string) => string | undefined
+    updateNavigationProperties: (navName?: string | NavigationItem) => void
+}
+
+interface UseNavigationOptions {
+    defaultCacheExpiryHours?: number
+    navItems?: NavigationItem[]
+}
+
+export function createNavigation(options: UseNavigationOptions): BTNavigation {
+    const cacheExpiryHours = options.defaultCacheExpiryHours ?? 7
+    const navigationList = options.navItems ?? []
+
+    function findArchiveName(navName?: string): string | undefined {
+        return findItem(navName)?.archiveName
+    }
+
+    function findCacheHours(navName?: string): number {
+        return findItem(navName)?.cacheExpiryHours ?? cacheExpiryHours
+    }
+
+    function findDisplay(navName?: string): string | undefined {
+        return findItem(navName)?.displayName
+    }
+
+    function findIcon(navName?: string): string | undefined {
+        return findItem(navName)?.icon
+    }
+
+    function findItem(navName?: string | NavigationItem) {
+        if (navName == null) return null
+        if (typeof navName != 'string') return navName
+
+        const items = deepSelect(navigationList, (x: NavigationItem) => x.children) as NavigationItem[]
+
+        return items.find(navItem => navItem.name == navName ||
+            navItem.singleName == navName ||
+            navItem.aliases?.some(y => y == navName)) ?? null
+    }
+
+    /**defaults to microservice of default */
+    function findPath(navName?: string) {
+        const navItem = findItem(navName)
+        if (navItem == null) return undefined
+
+        let vPath = useUrl(navItem.microservice ?? 'default') ?? ''
+
+        if (navItem.path != null)
+            vPath = appendUrl(vPath, navItem.path)
+
+        if (vPath?.endsWith('/'))
+            vPath = vPath.slice(0, vPath.length - 1)
+
+        return vPath
+    }
+
+    /**finds display name and attempts to remove plural suffixes */
+    function findSingleDisplay(navName?: string): string | undefined {
+        const item = findItem(navName)
+
+        if (item?.singleName != null)
+            return item.singleName
+
+        const displayName = item?.displayName
+
+        if (displayName == null) return undefined
+
+        if (displayName.endsWith('ies'))
+            return displayName.slice(0, displayName.length - 3)
+
+        if (displayName.endsWith('es'))
+            return displayName.slice(0, displayName.length - 2)
+
+        if (displayName.endsWith('s'))
+            return displayName.slice(0, displayName.length - 1)
+
+        return displayName
+    }
+
+    function findStoreName(navName?: string) {
+        const navItem = findItem(navName)
+        return navItem?.name ?? navItem?.singleName ?? 'store'
+    }
+
+    /**updates background, navigation sidebar, and app bar settings */
+    function updateNavigationProperties(navName?: string | NavigationItem) {
+        if (navName == null) return
+
+        const item = typeof navName == 'string' ? findItem(navName) : navName
+
+        backgroundName.value = item?.background
+        appNavigation.value = item?.hideNavigation !== true
+        appBar.value = item?.hideAppBar !== true
+
+        if (removeHesitateListener != null)
+            removeHesitateListener()
+
+        hesitate.value = item?.hesitate === true
+
+        if (hesitate.value)
+            removeHesitateListener = window.addEventListener('beforeunload', e => {
+                e.preventDefault()
+            })
+    }
+
+    return {
+        showAppBar: appBar,
+        showAppNavigation: appNavigation,
+        backgroundName,
+        hesitate,
+        navigationItems: navigationList,
+        findArchiveName,
+        findCacheHours,
+        findDisplay,
+        findIcon,
+        findItem,
+        findStoreName,
+        findPath,
+        findSingleDisplay,
+        updateNavigationProperties
+    }
+}

package/src/composables/presets.ts

@@ -0,0 +1,20 @@
+export interface BTPresets {
+    usePresets(preset?: string): any
+}
+
+export interface CreatePresetsOptions {
+    presets: any
+}
+
+export function createPresets(options: CreatePresetsOptions): BTPresets {
+    
+    function usePresets(preset?: string): any {
+        if (!preset) return {}
+        let mPreset = preset as keyof typeof options.presets
+        return options.presets[mPreset] ?? {}
+    }
+
+    return {
+        usePresets
+    }
+}

package/src/composables/pwa.ts

@@ -0,0 +1,89 @@
+import { tryOnMounted } from '@vueuse/core'
+import { ref, type Ref } from 'vue'
+
+export interface SWEvent extends Event {
+    detail: any
+}
+
+let updateListener: void | undefined 
+let controllerChangeListener: void | undefined
+let promptListener: void | undefined
+let isUpdating = false
+
+const canInstallApp = ref(false)
+const canUpdateApp = ref(false)
+const prompt: Ref<any> = ref()
+const sWorker: Ref<any> = ref()
+
+export interface BTPWA {
+    canInstallApp: Ref<boolean>
+    canUpdateApp: Ref<boolean>
+    installApp: () => void
+    isInstalled: () => boolean
+    updateApp: () => void
+}
+
+export function createPWA(): BTPWA {
+
+    function notifyUpdateAvailable(e: any) {
+        sWorker.value = e.detail
+        canUpdateApp.value = true
+    }
+
+    function controllerChanged() {
+        if (isUpdating) return
+        isUpdating = true
+        window.location.reload()
+    }
+
+    function installApp() {
+        prompt.value?.prompt()
+        canInstallApp.value = false
+    }
+
+    function isInstalled() {
+        // For iOS
+        // if (window.navigator.standalone) return true
+
+        // For Android
+        if (window.matchMedia('(display-mode: standalone)').matches) return true
+
+        // If neither is true, it's not installed
+        return false
+    }
+
+    function storePrompt(e: Event) {
+        e.preventDefault()
+        canInstallApp.value = true
+        prompt.value = e
+    }
+
+    function updateApp() {
+        canUpdateApp.value = false
+
+        if (!sWorker.value || !sWorker.value.waiting)
+            return
+
+        sWorker.value.waiting.postMessage({ type: 'SKIP_WAITING' })
+    }
+
+    tryOnMounted(() => {
+        if (updateListener == null) {
+            updateListener = document.addEventListener('swUpdated', notifyUpdateAvailable, { once: true })
+        }
+
+        if (controllerChangeListener == null)
+            controllerChangeListener = navigator.serviceWorker.addEventListener('controllerchange', controllerChanged)
+    
+        if (promptListener == null)
+            promptListener = window.addEventListener('beforeinstallprompt', storePrompt)
+    })
+
+    return {
+        canInstallApp,
+        canUpdateApp,
+        installApp,
+        isInstalled,
+        updateApp
+    }
+}

package/src/composables/resizable.ts

@@ -0,0 +1,382 @@
+import { toValue, useEventListener, useParentElement } from "@vueuse/core"
+import { type ComponentPublicInstance, type Ref, ref } from 'vue'
+import type { Position, MaybeRefOrGetter } from "@vueuse/core"
+import { copyDeep } from "@/composables/helpers"
+import { type BladeVariant } from "@/types"
+
+export type ResizeHandle = 't' | 'r' | 'b' | 'l' | 'tr' | 'br' | 'bl' | 'tl'
+
+export interface PointerOrTouchEvent extends PointerEvent, TouchEvent { }
+
+const allHandles: ResizeHandle[] = ['t', 'r', 'b', 'l', 'tr', 'br', 'bl', 'tl']
+
+export interface UseResizeOptions {
+    preventDefault?: MaybeRefOrGetter<boolean>
+    stopPropagation?: MaybeRefOrGetter<boolean>
+    // pointerTypes?: PointerType[]
+    handles?: ResizeHandle[]
+
+    /**
+     * Callback when the dragging starts. Return `false` to prevent dragging.
+     */
+    onStart?: (position: Position, event: PointerEvent) => void | false
+
+    /**
+     * Callback during dragging.
+     */
+    onMove?: (position: Position, event: PointerEvent) => void
+
+    /**
+     * Callback when dragging end.
+     */
+    onEnd?: (position: Position, event: PointerEvent) => void
+
+    minWidth?: number
+    maxWidth?: number
+    minHeight?: number
+    maxHeight?: number
+    handleWidth?: number
+    handleZIndex?: number
+}
+
+interface ElementPosition {
+    left?: number,
+    top?: number,
+    height?: number,
+    width?: number,
+    position?: string
+}
+
+export function useResizable(
+    target: MaybeRefOrGetter<ComponentPublicInstance | null>,
+    options: UseResizeOptions = {}) {
+    let currentVariant: string | undefined = undefined
+    let handleWidth = options.handleWidth ?? 12
+    let handleZIndex = options.handleZIndex ?? 100
+    let minWidth = options.minWidth ?? 0
+    let maxWidth = options.maxWidth ?? Number.MAX_SAFE_INTEGER
+    let minHeight = options.minHeight ?? 0
+    let maxHeight = options.maxHeight ?? Number.MAX_SAFE_INTEGER
+    let preventDefault = options.preventDefault ?? false
+    let stopPropagation = options.stopPropagation ?? false
+
+    let activeHandle: any
+    let handleEls: HTMLDivElement[] = []
+    const isAutoResizing = ref(false)
+    let listeners: Function[] = []
+    let moveListeners: Function[] = []
+    const resizingIsOn: Ref<boolean> = ref(false)
+    const startingPointerPosition: Ref<Position> = ref<Position>({ x: 0, y: 0 })
+    let startingElementPosition: ElementPosition = { left: 0, top: 0, height: 0, width: 0, position: 'absolute' }
+    let currentElementPosition: ElementPosition = { }
+    // let variantMemory: any = {}
+
+    function handleEvent(e: PointerOrTouchEvent) {
+        if (toValue(preventDefault))
+            e.preventDefault()
+        if (toValue(stopPropagation))
+            e.stopPropagation()
+    }
+
+    function addHandles(el: ComponentPublicInstance, handles: ResizeHandle[]) {
+        handleEls = handles.map(createHandleEl)
+        handleEls.forEach(handleEl => el.$el.appendChild(handleEl))
+    }
+
+    function removeHandles(el: ComponentPublicInstance) {
+        handleEls.forEach(handleEl => el.$el.removeChild(handleEl))
+    }
+
+    function createHandleEl(handle: string): HTMLDivElement { //ComponentPublicInstance {
+        const handleWidthPx = handleWidth + 'px'
+        const handleOffsetPx = -handleWidth / 2 + 'px'
+        const handleCornerZIndex = handleZIndex + 1
+
+        const handleEl = document.createElement('div')
+        handleEl.dataset.handle = handle
+        handleEl.style.position = 'absolute'
+        handleEl.style.touchAction = 'none'
+        handleEl.style.userSelect = 'none'
+        handleEl.style.zIndex = (handle.length === 1 ? handleZIndex : handleCornerZIndex).toString()
+        handleEl.style.cursor = getCursor(handle)
+
+        if (handle.includes('t')) {
+            handleEl.style.top = handleOffsetPx
+            handleEl.style.height = handleWidthPx
+            if (handle === 't') {
+                handleEl.style.left = '0'
+                handleEl.style.width = '100%'
+            }
+        }
+        if (handle.includes('b')) {
+            handleEl.style.bottom = handleOffsetPx
+            handleEl.style.height = handleWidthPx
+            if (handle === 'b') {
+                handleEl.style.left = '0'
+                handleEl.style.width = '100%'
+            }
+        }
+        if (handle.includes('r')) {
+            handleEl.style.right = handleOffsetPx
+            handleEl.style.width = handleWidthPx
+            if (handle === 'r') {
+                handleEl.style.top = '0'
+                handleEl.style.height = '100%'
+            }
+        }
+        if (handle.includes('l')) {
+            handleEl.style.left = handleOffsetPx
+            handleEl.style.width = handleWidthPx
+            if (handle === 'l') {
+                handleEl.style.top = '0'
+                handleEl.style.height = '100%'
+            }
+        }
+        return handleEl
+    }
+
+    function start(e: PointerOrTouchEvent) {
+        if (!handleEls.some(x => x == e.target)) return
+        const t = toValue(target)
+        if (!t) return
+        const el = t.$el
+        const isTouch = e.type === 'touchstart' && e.touches.length > 0
+        const evtData = isTouch ? e.touches[0] : e
+
+        startingPointerPosition.value.x = evtData.clientX
+        startingPointerPosition.value.y = evtData.clientY
+
+        startingElementPosition = {
+            left: el.offsetLeft,
+            top: el.offsetTop,
+            height: parseInt(window.getComputedStyle(el).getPropertyValue('height')),
+            width: parseInt(window.getComputedStyle(el).getPropertyValue('width'))
+        }
+        
+        currentElementPosition = copyDeep(startingElementPosition)
+
+        if (options.onStart?.(startingPointerPosition.value, e) === false) return
+
+        let handle = e.target as HTMLElement
+        
+        document.documentElement.style.cursor = getCursor(handle.dataset.handle as string)
+        activeHandle = handle.dataset.handle as string
+
+        moveListeners.push(useEventListener('mousemove', move))
+        moveListeners.push(useEventListener('mouseup', end))
+        moveListeners.push(useEventListener('touchmove', move))
+        moveListeners.push(useEventListener('touchend', end))
+        
+        handleEvent(e)
+    }
+
+    function move(e: any) {
+        const t = toValue(target)
+        if (!t) return
+        const el = t.$el
+
+        const isTouch = e.type === 'touchmove' && e.touches.length > 0
+        const evtData = isTouch ? e.touches[0] : e
+        let dx = evtData.clientX - startingPointerPosition.value.x
+        let dy = evtData.clientY - startingPointerPosition.value.y
+        const start = toValue(startingElementPosition)
+
+        if (activeHandle.includes('t')) {
+            const newHeight = Math.min(maxHeight, Math.max(minHeight, (start.height ?? 0) - dy))
+            currentElementPosition.height = newHeight
+            currentElementPosition.top = (start.top ?? 0) + dy
+        }
+        if (activeHandle.includes('b')) {
+            const newHeight = Math.min(maxHeight, Math.max(minHeight, (start.height ?? 0) + dy))
+            currentElementPosition.height = newHeight
+        }
+        if (activeHandle.includes('l')) {
+            const newWidth = Math.min(maxWidth, Math.max(minWidth, (start.width ?? 0) - dx))
+            currentElementPosition.width = newWidth
+            currentElementPosition.left = (start.left ?? 0) + dx
+        }
+        if (activeHandle.includes('r')) {
+            const newWidth = Math.min(maxWidth, Math.max(minWidth, (start.width ?? 0) + dx))
+            currentElementPosition.width = newWidth
+        }
+    
+        el.dispatchEvent(new CustomEvent('resize'))
+        handleEvent(e)
+
+        applyToElementStyle(currentElementPosition)
+    }
+
+    function end() {
+        document.documentElement.style.cursor = ''
+        activeHandle = null
+        moveListeners.forEach(l => { l() })
+        moveListeners.length = 0
+    }
+
+    function getCursor(handle: string) {
+        const cursorDirection: any = {
+            t: 'n',
+            r: 'e',
+            b: 's',
+            l: 'w'
+        }
+        return (handle.split('').map(l => cursorDirection[l]).join('') + '-resize')
+    }
+
+    function restoreSize(variant?: BladeVariant | undefined) {
+        const t = toValue(target)
+        if (!t) return
+        const el = t.$el as HTMLElement
+        console.log(currentVariant)
+      
+        if (currentVariant !== 'page' && variant == 'page') {
+            //moving back to default page settings
+            const parent = useParentElement(el)
+            const p = (toValue(parent) ?? null) as any
+            let aimWidth = 0
+            if (p != null) {
+                const c = window.getComputedStyle(p)
+                aimWidth = parseInt(c.getPropertyValue('width')) - p.offsetLeft
+            }
+            
+            el.style.transition = 'width 0.5s, height 0.5s, top 0.5s, left 0.5s'
+            el.offsetHeight
+            isAutoResizing.value = true
+            
+            applyToElementStyle({
+                height: undefined,
+                width: aimWidth,
+                top: 0,
+                left: 0,
+                position: undefined
+            })
+            
+            useEventListener(el, 'transitionend', () => {
+                el.style.width = 'auto'
+                el.style.top = ''
+                el.style.left = ''
+                el.style.position = ''
+                el.style.transition = ''
+                isAutoResizing.value = false
+            }, { once: true })
+        }
+        else if ((currentVariant == 'page' || t.$el.style.position !== 'absolute') && variant !== 'page') {
+            //move to freestyle or blade
+            el.style.transition = 'width 0.5s, height 0.5s, top 0.5s, left 0.5s'
+            isAutoResizing.value = true
+
+            startingElementPosition = {
+                height: parseInt(window.getComputedStyle(el).getPropertyValue('height')),
+                width: parseInt(window.getComputedStyle(el).getPropertyValue('width')),
+                top: el.offsetTop,
+                left: el.offsetLeft,
+                position: 'absolute'
+            }
+
+            applyToElementStyle(startingElementPosition)
+            el.offsetHeight
+            const s = startingElementPosition
+
+            if (variant == 'freestyle') {
+                //half the size to indicate non-page variant
+                currentElementPosition = {
+                    height: s.height,
+                    width: (s.width ?? 100) / 2,
+                    top: (s.top ?? 0) + 2,
+                    left: (s.left ?? 0) + 2,
+                    position: 'absolute'
+                }
+            }
+            else if (variant == 'blade') {
+                currentElementPosition = {
+                    height: s.height,
+                    width: (s.width ?? 100) / 2,
+                    top: (s.top ?? 0) + 2,
+                    left: (s.left ?? 0) + 2,
+                    position: 'absolute'
+                }
+
+                //flex column?
+            }
+
+            applyToElementStyle(currentElementPosition)
+
+            useEventListener(el, 'transitionend', () => {
+                el.style.transition = ''
+                isAutoResizing.value = false
+            }, { once: true })
+        }
+    }
+
+    function applyToElementStyle(s: ElementPosition) {
+        const t = toValue(target)
+        if (!t) return
+        const el = t.$el
+
+        if (s.top) {
+            el.style.top = `${s.top}px`
+        }
+        else {
+            el.style.top = undefined
+        }
+
+        if (s.left) {
+            el.style.left = `${s.left}px`
+        }
+        else {
+            el.style.left = undefined
+        }
+
+        if (s.height) {
+            el.style.height = `${s.height}px`
+        }
+        else {
+            el.style.height = undefined
+        }
+
+        if (s.width) {
+            el.style.width = `${s.width}px`
+        }
+        else {
+            el.style.width = undefined
+        }
+
+        if (s.position) {
+            el.style.position = `${s.position}`
+        }
+        else {
+            el.style.position = undefined
+        }
+
+        console.log(el.style.position)
+    }
+
+    function turnResizingOn(handles?: ResizeHandle[], variant?: BladeVariant) {
+        if (resizingIsOn.value) return
+        const t = toValue(target)
+        if (!t) return
+        addHandles(t, handles ?? allHandles)
+        restoreSize(variant)
+        listeners.push(useEventListener(t.$el, 'mousedown', start))
+        listeners.push(useEventListener(t.$el, 'touchstart', start))
+        resizingIsOn.value = true
+        currentVariant = variant
+    }
+
+    function turnResizingOff(variant?: BladeVariant | undefined) {
+        if (!resizingIsOn.value) return
+        const t = toValue(target)
+        if (!t) return
+        removeHandles(t)
+        restoreSize(variant)
+        listeners.forEach(l => { l() })
+        listeners.length = 0
+        resizingIsOn.value = false
+    }
+
+    return {
+        resizingIsOn,
+        turnResizingOn,
+        turnResizingOff
+    }
+}