ivue 0.0.32 → 0.1.0

package/src/App/Services/Navigation/Navigation.ts

@@ -0,0 +1,83 @@
+import TreeModel from 'tree-model'
+import { Router } from '../Routing/Router'
+import { Traits, UseCapsule, UseRoute, UseRouter, use } from '@/index'
+
+export class $Navigation {
+
+  get router () { return use(Router) }
+
+  get active () {
+    return this.tree().all((node) => node.model.id === this.router.active.name)[0]
+  }
+
+  constructor(self, arg1: string) {
+    console.log('arg1', arg1)
+  }
+
+  tree () {
+    const tree = new TreeModel()
+
+    const root = tree.parse({
+      id: 'home',
+      type: 'root',
+      text: 'Home',
+      children: [],
+    })
+
+    return root
+  }
+
+  back () {
+    this.router.push({ name: this.active.parent.model.id })
+  }
+}
+
+
+export class Navigation {
+
+  $!: $Navigation
+  constructor(arg1: string) {
+    this.$ = use($Navigation, this, ...arguments)
+  }
+
+  get menu () {
+
+    const v = {
+      showBack: false,
+      activeName: '',
+      backTarget: { visible: false, id: null },
+      items: [],
+    }
+
+    const active = this.$.active
+
+    if (active) {
+
+      v.activeName = this.activeName(active)
+
+      v.items = active.children.map((node: any) => {
+        return { id: node.model.id, activeName: node.model.text }
+      })
+
+      if (active.parent) {
+        v.backTarget = {
+          visible: true,
+          id: active.parent.model.id,
+        }
+        v.showBack = true
+      }
+    }
+
+    return v
+  }
+
+  private activeName (node: any) {
+    return node.model.text + ' > ' + node.model.id
+  }
+
+  back () {
+    this.$.back()
+  }
+}
+Traits(Navigation, [UseRoute, UseRouter])
+export interface Navigation extends UseRoute, UseRouter {}

package/src/App/Services/Navigation/Navigation.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+// import { withInjection } from '../Services/Providers/Injection'
+import Logout from '@/App/Auth/Logout.vue'
+import { Router } from '@/App/Services/Routing/Router'
+import { Navigation } from './Navigation'
+import { use } from '@/index'
+
+const v = use(Navigation, 'test')
+const router = use(Router)
+</script>
+<template>
+  <br />
+  Route:
+  {{ v.route?.name }}
+
+  <br />
+  Router:
+
+  {{ router.currentRoute.name }}
+  <br />
+  <button @click="router.push({ name: 'login' })">Login</button>
+  <br />
+  <button @click="router.push({ name: 'ivue', query:{test:1} })">ivue</button>
+
+<br />
+  <button @click="router.push({ name: 'use-test', query:{test:1} })">composable test</button>
+
+  <div class="navigation-container">
+    <div
+      class="navigation-item-header"
+      :style="{ backgroundColor: '#5BCA06' }"
+    >
+      {{ v.menu.activeName }}
+    </div>
+    <div
+      v-for="item in v.menu.items"
+      class="navigation-item"
+      :style="{
+        backgroundColor: '#3DE7CF',
+      }"
+      @click="() => router.push({ name: item.id })"
+    >
+      {{ item.activeName }}
+    </div>
+
+    <router-link to="/">Go Home</router-link>
+
+    <div
+      v-if="v.menu.showBack"
+      class="navigation-item"
+      @click="() => v.back()"
+      :style="{ backgroundColor: '#2e91fc' }"
+    >
+      <span>⬅ </span>Back
+    </div>
+
+    <Logout />
+  </div>
+</template>

package/src/App/Services/Routing/FakeRouter.ts

@@ -0,0 +1,7 @@
+export class FakeRouter {
+  register = async (routeConfig) => {}
+
+  unload = () => {}
+
+  go = async (name) => {}
+}

package/src/App/Services/Routing/NotFoundRoute.vue

@@ -0,0 +1,13 @@
+<template>
+<h3>404 - Not found</h3>
+</template>
+
+<script>
+export default {
+  name: "NotFoundRoute"
+}
+</script>
+
+<style scoped>
+
+</style>

package/src/App/Services/Routing/Router.ts

@@ -0,0 +1,262 @@
+import { unref } from 'vue';
+import { createRouter, createWebHistory } from 'vue-router'
+import { Traits, UseCapsule, use } from '@/index'
+import { $Message } from '../Message/Message'
+import { User } from '../../Auth/User'
+import type { RouteLocationNormalized } from 'vue-router';
+import type { Null, AnyObj, Params } from '@/types/core';
+import type { Router as VueRouter } from 'vue-router'
+
+const __$Router__ = ($ = $Router.prototype) => ([
+  // Other
+  $.user,
+  $.$message,
+  // Data
+  $.router,
+  $.active,
+  $.routes,
+  $.routeConfig,
+  // Methods
+  $.register,
+  $.flatten,
+  $.setup,
+  $.find,
+  // Router state change tracking
+  $.onRouteChanged,
+  $.beforeRoute,
+  $.afterRoute,
+  // Extensions upon Router
+  $.push,
+  $.replace,
+  $.forward,
+  $.back,
+  // Loaded state promise
+  $.isLoaded
+])
+
+export class $Router {
+
+  get user () { return use(User) }
+
+  get $message () { return use($Message) }
+
+  loading = false
+
+  router!: VueRouter
+
+  active = { name: null }
+
+  routes = []
+
+  routeConfig: any[] = []
+
+  /**
+   * Register routes with the router.
+   * 
+   * @param routes 
+   */
+  register (routes: any) {
+
+    this.routes = routes
+
+    this.flatRoutes = this.flatten(this.routes)
+    // console.log('this.flatRoutes', this.flatRoutes)
+
+    this.routeConfig = this.setup(this.routes)
+    console.log('routeConfig', this.routeConfig)
+
+    this.router = createRouter({ history: createWebHistory(), routes: this.routes })
+
+    this.router.beforeEach(async to => await this.beforeRoute(to))
+
+    this.router.afterEach(async (to, from, failure) => await this.afterRoute(/*to, from, failure*/))
+  }
+
+  private flatRoutes: AnyObj = {}
+
+  /**
+   * Flatten the routes into a flat array.
+   * 
+   * @param routes     routes to flaten
+   * @param flatRoutes recursion storage
+   * @returns flat array of routes
+   */
+  flatten (routes: any, flatRoutes: AnyObj = {}) {
+    routes.forEach((route: AnyObj) => {
+      flatRoutes[route.name] = route
+      if ('children' in route) {
+        this.flatten(route.children, flatRoutes)
+      }
+    })
+    return flatRoutes
+  }
+
+  setup (routes: any) {
+
+    const routeConfig: any[] = []
+
+    routes.forEach((routeArg: AnyObj) => {
+      // console.log('routeArg', routeArg)
+      const route = this.find(routeArg.name)
+
+      const routeDefinition: any = {
+        name: route.name,
+        path: route.path,
+        meta: { 
+          secure: route.secure 
+        },
+        component: route.component
+      }
+
+      if ('children' in route) {
+        routeDefinition.children = this.setup(route.children)
+      }
+
+      routeConfig.push(routeDefinition)
+    })
+
+    return routeConfig
+  }
+
+  find (name: Null<string | symbol | undefined>) {
+    return name && name in this.flatRoutes ? this.flatRoutes[name] : this.routes[this.routes.length - 1]
+  }
+
+  onRouteChanged () {
+    this.$message.appMessages = []
+  }
+
+  async beforeRoute (to: RouteLocationNormalized) {
+
+    this.loading = true
+
+    const old = this.find(this.active.name)
+    const fresh = this.find(to.name)
+
+    const routeChanged = old.name !== fresh.name
+    const token = !!this.user.token
+
+    const notAllowed = fresh.secure && !token || fresh.name === '*'
+    const allowed = fresh.secure && token || !fresh.secure
+
+    // console.log('fresh', fresh, 'old', old, 'routeChanged', routeChanged, 'notAllowed', notAllowed, 'allowed', allowed)
+
+    if (routeChanged) {
+
+      this.onRouteChanged()
+
+      if (notAllowed) {
+
+        await this.push({ name: 'login' })
+
+        return false
+
+      } else if (allowed) {
+
+        if (old.onLeave) old.onLeave()
+        if (fresh.onEnter) fresh.onEnter()
+
+        this.active = fresh
+        this.active.params = to.params
+        this.active.query = to.query
+
+        return true
+      }
+    }
+    return true
+  }
+
+  async afterRoute () {
+    this.loading = false
+  }
+
+  push (...args: Params<VueRouter['push']>) {
+    this.loading = true;
+    return run(this.router, this.router.push, arguments)
+  }
+
+  replace (...args: Params<VueRouter['replace']>) {
+    this.loading = true;
+    return run(this.router, this.router.replace, arguments)
+  }
+
+  back (...args: Params<VueRouter['back']>) {
+    this.loading = true;
+    return run(this.router, this.router.back, arguments)
+  }
+
+  forward (...args: Params<VueRouter['forward']>) {
+    this.loading = true;
+    return run(this.router, this.router.forward, arguments)
+  }
+
+  go (...args: Params<VueRouter['go']>) {
+    this.loading = true;
+    return run(this.router, this.router.go, arguments)
+  }
+
+  async isLoaded () {
+    return new Promise((resolve, reject) => {
+      let interval: string | number | NodeJS.Timeout | undefined;
+      if (this.loading) {
+        interval = setInterval(() => {
+          if (!this.loading) {
+            clearInterval(interval)
+            resolve(!this.loading)
+          }
+        }, 10)
+      } else {
+        resolve(!this.loading)
+      }
+    })
+  }
+}
+
+__$Router__
+
+function run<T extends Function> (bind: any, fn: T, args: any = []): T {
+  return fn.apply(bind, args)
+}
+
+export class Router {
+
+  capsule = $Router
+  constructor () {
+    this.useCapsule(arguments)
+  }
+
+  // Extended functions
+  get active () { return this.$.active }
+  async isLoaded () { return run(this.$, this.$.isLoaded) }
+
+  // Vue Router API
+  get currentRoute () { return unref(this.$.router.currentRoute) }
+  get options () { return this.$.router.options }
+
+  get listening () { return this.$.router.listening }
+  set listening (v: boolean) { this.$.router.listening = v }
+
+  addRoute (...args: Params<VueRouter['addRoute']>) { return run(this.$.router, this.$.router.addRoute, arguments) }
+  removeRoute (...args: Params<VueRouter['removeRoute']>) { return run(this.$.router, this.$.router.removeRoute, arguments) }
+  hasRoute (...args: Params<VueRouter['hasRoute']>) { return run(this.$.router, this.$.router.hasRoute, arguments) }
+  getRoutes (...args: Params<VueRouter['getRoutes']>) { return run(this.$.router, this.$.router.getRoutes) }
+  resolve (...args: Params<VueRouter['resolve']>) { return run(this.$.router, this.$.router.resolve, arguments) }
+
+  /* Extended functionality of these methods */
+  push (...args: Params<VueRouter['push']>) { return run(this.$, this.$.push, arguments) }
+  replace (...args: Params<VueRouter['replace']>) { return run(this.$, this.$.replace, arguments) }
+  back (...args: Params<VueRouter['back']>) { return run(this.$, this.$.back) }
+  forward (...args: Params<VueRouter['forward']>) { return run(this.$, this.$.forward) }
+  go (...args: Params<VueRouter['go']>) { return run(this.$, this.$.go, arguments) }
+  /* Extensions end */
+
+  beforeEach (...args: Params<VueRouter['beforeEach']>) { return run(this.$.router, this.$.router.beforeEach, arguments) }
+  beforeResolve (...args: Params<VueRouter['beforeResolve']>) { return run(this.$.router, this.$.router.beforeResolve, arguments) }
+  afterEach (...args: Params<VueRouter['afterEach']>) { return run(this.$.router, this.$.router.afterEach, arguments) }
+  onError (...args: Params<VueRouter['onError']>) { return run(this.$.router, this.$.router.onError, arguments) }
+  isReady (...args: Params<VueRouter['isReady']>) { return run(this.$.router, this.$.router.isReady) }
+  install (...args: Params<VueRouter['install']>) { return run(this.$.router, this.$.router.install, arguments) }
+}
+
+Traits(Router, [UseCapsule])
+export interface Router extends UseCapsule {}

package/src/App/Services/Routing/Routes.ts

@@ -0,0 +1,49 @@
+export default [
+  {
+    name: 'root',
+    path: '/',
+    secure: true,
+    component: () => import('@/App/Home/Home.vue'),
+  },
+  {
+    name: 'login',
+    path: '/app/login',
+    secure: false,
+    component: () => import('@/App/Auth/Auth.vue'),
+  },
+  {
+    name: 'home',
+    path: '/app/home',
+    secure: true,
+    component: () => import('@/App/Home/Home.vue'),
+  },
+  {
+    name: 'authorPolicy',
+    path: '/app/author-policy',
+    secure: false,
+    component: () => import('@/App/Home/Home.vue'),
+  },
+  {
+    path: '/ivue',
+    secure: false,
+    component: () => import('../../../../demo/components/IVueTest.vue'),
+    children: [{
+      name: 'ivue',
+      path: '',
+      secure: false,
+      component:() => import('../../../../demo/components/SubComponent2.vue'),
+    }]
+  },
+  {
+    path: '/use-test',
+    name: 'use-test',
+    secure: false,
+    component: () => import('../../../../demo/components/useIVueTest.vue'),
+  },
+  {
+    name: '*',
+    path: '/:catchAll(.*)*',
+    secure: true,
+    component: () => import('@/App/Services/Routing/NotFoundRoute.vue')
+  }
+]

package/src/App/Stubs/SingleBookResultStub.ts

@@ -0,0 +1,13 @@
+export function SingleBookResultStub(dynamicBookName) {
+  return {
+    success: true,
+    result: [
+      {
+        bookId: 1,
+        name: dynamicBookName !== undefined ? dynamicBookName : 'I, Robot',
+        emailOwnerId: 'g@b.com',
+        devOwnerId: 'pete+dnd@logicroom.co'
+      }
+    ]
+  }
+}

package/src/App/Traits/UseApp.ts

@@ -0,0 +1,6 @@
+import { use } from '@/index'
+import { App } from '@/App/App';
+
+export class UseApp {
+  get app () { return use(App) }
+}

package/src/App/Traits/UseQuasar.ts

@@ -0,0 +1,8 @@
+const $q = {
+  dialog: () => {},
+  notify: () => {}
+}
+
+export class UseQuasar {
+  public $q = $q
+}