diff --git a/src/app/package.json b/src/app/package.json
index 9a1bf0e..bb75465 100644
--- a/src/app/package.json
+++ b/src/app/package.json
@@ -13,6 +13,7 @@
"vue": "vue-cli-service build --modern && cd ../MyPrayerJournal.Api && dotnet run"
},
"dependencies": {
+ "@vue/composition-api": "^0.3.2",
"auth0-js": "^9.7.3",
"axios": "^0.19.0",
"core-js": "^3.3.2",
@@ -24,6 +25,7 @@
},
"devDependencies": {
"@types/auth0-js": "^9.10.6",
+ "@types/node": "^12.12.12",
"@typescript-eslint/eslint-plugin": "^2.8.0",
"@typescript-eslint/parser": "^2.8.0",
"@vue/cli-plugin-babel": "^4.0.5",
diff --git a/src/app/src/App.vue b/src/app/src/App.vue
index 9ebd92a..367f6b2 100644
--- a/src/app/src/App.vue
+++ b/src/app/src/App.vue
@@ -10,13 +10,13 @@
span(style='font-weight:700;') Journal
navigation
md-app-content
- md-progress-bar(v-if='progress.visible'
- :md-mode='progress.mode')
+ md-progress-bar(v-if='progress.visible.value'
+ :md-mode='progress.mode.value')
router-view
- md-snackbar(:md-active.sync='snackbar.visible'
+ md-snackbar(:md-active.sync='snackbar.visible.value'
md-position='center'
- :md-duration='snackbar.interval'
- ref='snackbar') {{ snackbar.message }}
+ :md-duration='snackbar.interval.value'
+ ref='snackbar') {{ snackbar.message.value }}
footer
p.mpj-muted-text.mpj-text-right
| myPrayerJournal v{{ version }}
@@ -28,82 +28,119 @@
#[a(href='https://bitbadger.solutions' target='_blank') Bit Badger Solutions]
-
diff --git a/src/app/src/components/common/DateFromNow.vue b/src/app/src/components/common/DateFromNow.vue
index 8f1de2b..b78ae9d 100644
--- a/src/app/src/components/common/DateFromNow.vue
+++ b/src/app/src/components/common/DateFromNow.vue
@@ -1,6 +1,5 @@
-
diff --git a/src/app/src/components/user/LogOn.vue b/src/app/src/components/user/LogOn.vue
index 6acabbd..4a4e583 100644
--- a/src/app/src/components/user/LogOn.vue
+++ b/src/app/src/components/user/LogOn.vue
@@ -4,20 +4,37 @@ article.mpj-main-content(role='main')
p Logging you on...
-
diff --git a/src/app/src/main.ts b/src/app/src/main.ts
index 395b4d7..365ae3c 100644
--- a/src/app/src/main.ts
+++ b/src/app/src/main.ts
@@ -1,34 +1,33 @@
-/* eslint-disable */
-
// Vue packages and components
import Vue from 'vue'
-import { MdApp,
- MdButton,
- MdCard,
- MdContent,
- MdDatepicker,
- MdDialog,
- MdEmptyState,
- MdField,
- MdIcon,
- MdLayout,
- MdProgress,
- MdRadio,
- MdSnackbar,
- MdTable,
- MdTabs,
- MdToolbar,
- MdTooltip } from 'vue-material/dist/components'
+import VueCompositionApi from '@vue/composition-api'
+import {
+ MdApp,
+ MdButton,
+ MdCard,
+ MdContent,
+ MdDatepicker,
+ MdDialog,
+ MdEmptyState,
+ MdField,
+ MdIcon,
+ MdLayout,
+ MdProgress,
+ MdRadio,
+ MdSnackbar,
+ MdTable,
+ MdTabs,
+ MdToolbar,
+ MdTooltip
+} from 'vue-material/dist/components'
// myPrayerJournal components
-import App from './App.vue'
-import router from './router'
-import store from './store'
+import App from './App.vue'
+import router from './router'
+import store from './store'
import DateFromNow from './components/common/DateFromNow.vue'
-import PageTitle from './components/common/PageTitle.vue'
-import AuthPlugin from './plugins/auth'
-
-/* eslint-enable */
+import PageTitle from './components/common/PageTitle.vue'
+import AuthPlugin from './plugins/auth'
// Styles
import 'vue-material/dist/vue-material.min.css'
@@ -54,6 +53,7 @@ Vue.use(MdTabs)
Vue.use(MdToolbar)
Vue.use(MdTooltip)
Vue.use(AuthPlugin)
+Vue.use(VueCompositionApi)
Vue.component('date-from-now', DateFromNow)
Vue.component('page-title', PageTitle)
diff --git a/src/app/src/plugins/auth.ts b/src/app/src/plugins/auth.ts
index b1e4feb..1435123 100644
--- a/src/app/src/plugins/auth.ts
+++ b/src/app/src/plugins/auth.ts
@@ -1,7 +1,8 @@
-import authService from '@/auth'
+import { inject, provide } from '@vue/composition-api'
+import authService, { AuthService } from '@/auth'
export default {
- install (Vue) {
+ install (Vue: any) {
Vue.prototype.$auth = authService
Vue.mixin({
@@ -18,3 +19,18 @@ export default {
})
}
}
+
+const AuthSymbol = Symbol('Auth service')
+
+export function provideAuth (auth: AuthService) {
+ provide(AuthSymbol, auth)
+}
+
+/** Use the auth service */
+export function useAuth (): AuthService {
+ const auth = inject(AuthSymbol)
+ if (!auth) {
+ throw new Error('Auth not configured!')
+ }
+ return auth as AuthService
+}
diff --git a/src/app/src/plugins/router.ts b/src/app/src/plugins/router.ts
new file mode 100644
index 0000000..67fc6b7
--- /dev/null
+++ b/src/app/src/plugins/router.ts
@@ -0,0 +1,16 @@
+import VueRouter from 'vue-router'
+import { inject, provide } from '@vue/composition-api'
+
+const RouterSymbol = Symbol('Vue router')
+
+export function provideRouter (router: VueRouter) {
+ provide(RouterSymbol, router)
+}
+
+export function useRouter (): VueRouter {
+ const router = inject(RouterSymbol)
+ if (!router) {
+ throw new Error('Router not configured!')
+ }
+ return router as VueRouter
+}
diff --git a/src/app/src/plugins/store.ts b/src/app/src/plugins/store.ts
new file mode 100644
index 0000000..aed6285
--- /dev/null
+++ b/src/app/src/plugins/store.ts
@@ -0,0 +1,20 @@
+import { provide, inject } from '@vue/composition-api'
+import { Store } from 'vuex'
+
+import { AppState } from '@/store/types'
+
+const StoreSymbol = Symbol('Vuex store')
+
+/** Configure the store provided by this plugin */
+export function provideStore (store: Store) {
+ provide(StoreSymbol, store)
+}
+
+/** Use the provided store */
+export function useStore (): Store {
+ const store = inject(StoreSymbol)
+ if (!store) {
+ throw new Error('No store configured!')
+ }
+ return store as Store
+}
diff --git a/src/app/src/untyped-modules.d.ts b/src/app/src/untyped-modules.d.ts
new file mode 100644
index 0000000..28d69f7
--- /dev/null
+++ b/src/app/src/untyped-modules.d.ts
@@ -0,0 +1 @@
+declare module 'vue-material/dist/components'
diff --git a/src/app/tsconfig.json b/src/app/tsconfig.json
index ff664e8..670418b 100644
--- a/src/app/tsconfig.json
+++ b/src/app/tsconfig.json
@@ -8,8 +8,8 @@
"moduleResolution": "node",
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
+ "resolveJsonModule": true,
"sourceMap": true,
- "noImplicitAny": false,
"baseUrl": ".",
"types": [
"webpack-env"
diff --git a/src/app/yarn.lock b/src/app/yarn.lock
index 9ccf633..8811e06 100644
--- a/src/app/yarn.lock
+++ b/src/app/yarn.lock
@@ -837,6 +837,11 @@
resolved "https://registry.yarnpkg.com/@types/node/-/node-12.12.11.tgz#bec2961975888d964196bf0016a2f984d793d3ce"
integrity sha512-O+x6uIpa6oMNTkPuHDa9MhMMehlxLAd5QcOvKRjAFsBVpeFWTOPnXbDvILvFgFFZfQ1xh1EZi1FbXxUix+zpsQ==
+"@types/node@^12.12.12":
+ version "12.12.12"
+ resolved "https://registry.yarnpkg.com/@types/node/-/node-12.12.12.tgz#529bc3e73dbb35dd9e90b0a1c83606a9d3264bdb"
+ integrity sha512-MGuvYJrPU0HUwqF7LqvIj50RZUX23Z+m583KBygKYUZLlZ88n6w28XRNJRJgsHukLEnLz6w6SvxZoLgbr5wLqQ==
+
"@types/normalize-package-data@^2.4.0":
version "2.4.0"
resolved "https://registry.yarnpkg.com/@types/normalize-package-data/-/normalize-package-data-2.4.0.tgz#e486d0d97396d79beedd0a6e33f4534ff6b4973e"
@@ -1129,6 +1134,13 @@
source-map "~0.6.1"
vue-template-es2015-compiler "^1.9.0"
+"@vue/composition-api@^0.3.2":
+ version "0.3.2"
+ resolved "https://registry.yarnpkg.com/@vue/composition-api/-/composition-api-0.3.2.tgz#2d797028e489bf7812f08c7bb33ffd03ef23c617"
+ integrity sha512-fD4dn9cJX62QSP2TMFLXCOQOa+Bu2o7kWDjrU/FNLkNqPPcCKBLxCH/Lc+gNCRBKdEUGyI3arjAw7j0Yz1hnvw==
+ dependencies:
+ tslib "^1.9.3"
+
"@vue/eslint-config-standard@^5.0.0":
version "5.0.0"
resolved "https://registry.yarnpkg.com/@vue/eslint-config-standard/-/eslint-config-standard-5.0.0.tgz#2ffabb4056205a86782cd5a641cdbcd330d905b4"
@@ -8789,7 +8801,7 @@ ts-loader@^6.2.0:
micromatch "^4.0.0"
semver "^6.0.0"
-tslib@^1.8.0, tslib@^1.8.1, tslib@^1.9.0:
+tslib@^1.8.0, tslib@^1.8.1, tslib@^1.9.0, tslib@^1.9.3:
version "1.10.0"
resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.10.0.tgz#c3c19f95973fb0a62973fb09d90d961ee43e5c8a"
integrity sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ==