@live-change/frontend-base 0.1.6 → 0.2.2
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.
- package/NavBar.vue +127 -0
- package/Page.vue +2 -2
- package/client-entry.js +3 -1
- package/host.js +8 -0
- package/index.js +9 -1
- package/main.js +3 -7
- package/package.json +16 -16
- package/server-entry.js +3 -2
package/NavBar.vue
ADDED
|
@@ -0,0 +1,127 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="surface-overlay py-3 px-6 shadow-2 flex align-items-center justify-content-between
|
|
3
|
+
relative md:sticky top-0 z-5"
|
|
4
|
+
style="min-height: 80px" key="navbar">
|
|
5
|
+
<img src="/images/logo.svg" alt="Image" height="40" class="mr-0 lg:mr-6">
|
|
6
|
+
<div class="hidden lg:flex">
|
|
7
|
+
<!-- place for desktop menu -->
|
|
8
|
+
</div>
|
|
9
|
+
<div class="flex flex-grow-1"></div>
|
|
10
|
+
<UserIcon />
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
<div class="static w-auto w-full surface-overlay left-0 top-100 z-1 shadow-none hidden">
|
|
14
|
+
<ul class="list-none p-0 m-0 flex align-items-center select-none flex-row border-top-none">
|
|
15
|
+
<li>
|
|
16
|
+
<a v-ripple class="flex p-3 px-3 align-items-center text-600 hover:text-900 hover:surface-100
|
|
17
|
+
font-medium border-round cursor-pointer transition-colors transition-duration-150 p-ripple">
|
|
18
|
+
<i class="pi pi-inbox text-base text-2xl mr-0"></i>
|
|
19
|
+
</a>
|
|
20
|
+
</li>
|
|
21
|
+
<li>
|
|
22
|
+
<a v-ripple class="flex p-3 px-3 align-items-center text-600 hover:text-900 hover:surface-100 font-medium
|
|
23
|
+
border-round cursor-pointer transition-colors transition-duration-150 p-ripple">
|
|
24
|
+
<i class="pi pi-bell text-base lg:text-2xl mr-2 lg:mr-0" v-badge.danger></i>
|
|
25
|
+
</a>
|
|
26
|
+
</li>
|
|
27
|
+
</ul>
|
|
28
|
+
</div>
|
|
29
|
+
|
|
30
|
+
|
|
31
|
+
<a v-ripple class="cursor-pointer block lg:hidden text-700 p-ripple ml-2 hover:surface-100 p-2"
|
|
32
|
+
v-styleclass="{ selector: '@next', enterClass: 'hidden', leaveToClass: 'hidden', hideOnOutsideClick: true }">
|
|
33
|
+
<i class="pi pi-bars text-4xl"></i>
|
|
34
|
+
</a>
|
|
35
|
+
<div class="align-items-center flex-grow-1 justify-content-between hidden absolute lg:static w-full surface-overlay left-0 top-100 z-1 shadow-2 lg:shadow-none">
|
|
36
|
+
<ul class="list-none p-0 m-0 flex lg:align-items-center select-none flex-column lg:flex-row">
|
|
37
|
+
<li>
|
|
38
|
+
<a v-ripple class="flex px-6 p-3 lg:px-3 lg:py-2 align-items-center text-600 hover:text-900 hover:surface-100 font-medium border-round cursor-pointer transition-colors transition-duration-150 p-ripple">
|
|
39
|
+
<i class="pi pi-home mr-2"></i>
|
|
40
|
+
<span>Home</span>
|
|
41
|
+
</a>
|
|
42
|
+
</li>
|
|
43
|
+
<li class="lg:relative">
|
|
44
|
+
<a v-ripple class="flex px-6 p-3 lg:px-3 lg:py-2 align-items-center text-600 hover:text-900 hover:surface-100 font-medium border-round cursor-pointer transition-colors transition-duration-150 p-ripple"
|
|
45
|
+
v-styleclass="{ selector: '@next', enterClass: 'hidden', enterActiveClass: 'scalein', leaveToClass: 'hidden', leaveActiveClass: 'fadeout', hideOnOutsideClick: true }">
|
|
46
|
+
<i class="pi pi-users mr-2"></i>
|
|
47
|
+
<span>Customers</span>
|
|
48
|
+
<i class="pi pi-angle-down ml-auto lg:ml-3"></i>
|
|
49
|
+
</a>
|
|
50
|
+
<ul class="list-none py-3 px-6 m-0 lg:px-0 lg:py-0 border-round shadow-0 lg:shadow-2 lg:border-1 border-50 lg:absolute surface-overlay hidden origin-top w-full lg:w-15rem cursor-pointer">
|
|
51
|
+
<li>
|
|
52
|
+
<a v-ripple class="flex p-3 align-items-center text-600 hover:text-900 hover:surface-100 transition-colors transition-duration-150 p-ripple">
|
|
53
|
+
<i class="pi pi-user-plus mr-2"></i>
|
|
54
|
+
<span class="font-medium">Add New</span>
|
|
55
|
+
</a>
|
|
56
|
+
</li>
|
|
57
|
+
<li class="relative">
|
|
58
|
+
<a v-ripple class="flex p-3 align-items-center text-600 hover:text-900 hover:surface-100 transition-colors transition-duration-150 p-ripple"
|
|
59
|
+
v-styleclass="{ selector: '@next', enterClass: 'hidden', enterActiveClass: 'scalein', leaveToClass: 'hidden', leaveActiveClass: 'fadeout', hideOnOutsideClick: true }">
|
|
60
|
+
<i class="pi pi-search mr-2"></i>
|
|
61
|
+
<span class="font-medium">Search</span>
|
|
62
|
+
<i class="pi pi-angle-down ml-auto lg:-rotate-90"></i>
|
|
63
|
+
</a>
|
|
64
|
+
<ul class="list-none py-3 pl-3 m-0 lg:px-0 lg:py-0 border-round shadow-0 lg:shadow-2 lg:border-1 border-50 lg:absolute surface-overlay hidden origin-top w-full lg:w-15rem cursor-pointer left-100 top-0">
|
|
65
|
+
<li>
|
|
66
|
+
<a v-ripple class="flex p-3 align-items-center text-600 hover:text-900 hover:surface-100 transition-colors transition-duration-150 p-ripple">
|
|
67
|
+
<i class="pi pi-shopping-cart mr-2"></i>
|
|
68
|
+
<span class="font-medium">Purchases</span>
|
|
69
|
+
</a>
|
|
70
|
+
</li>
|
|
71
|
+
<li class="relative">
|
|
72
|
+
<a v-ripple class="flex p-3 align-items-center text-600 hover:text-900 hover:surface-100 transition-colors transition-duration-150 p-ripple">
|
|
73
|
+
<i class="pi pi-comments mr-2"></i>
|
|
74
|
+
<span class="font-medium">Messages</span>
|
|
75
|
+
</a>
|
|
76
|
+
</li>
|
|
77
|
+
</ul>
|
|
78
|
+
</li>
|
|
79
|
+
</ul>
|
|
80
|
+
</li>
|
|
81
|
+
<li>
|
|
82
|
+
<a v-ripple class="flex px-6 p-3 lg:px-3 lg:py-2 align-items-center text-600 hover:text-900 hover:surface-100 font-medium border-round cursor-pointer transition-colors transition-duration-150 p-ripple">
|
|
83
|
+
<i class="pi pi-calendar mr-2"></i>
|
|
84
|
+
<span>Calendar</span>
|
|
85
|
+
</a>
|
|
86
|
+
</li>
|
|
87
|
+
<li>
|
|
88
|
+
<a v-ripple class="flex px-6 p-3 lg:px-3 lg:py-2 align-items-center text-600 hover:text-900 hover:surface-100 font-medium border-round cursor-pointer transition-colors transition-duration-150 p-ripple">
|
|
89
|
+
<i class="pi pi-chart-line mr-2"></i>
|
|
90
|
+
<span>Stats</span>
|
|
91
|
+
</a>
|
|
92
|
+
</li>
|
|
93
|
+
</ul>
|
|
94
|
+
<ul class="list-none p-0 m-0 flex lg:align-items-center select-none flex-column lg:flex-row border-top-1 surface-border lg:border-top-none">
|
|
95
|
+
<li>
|
|
96
|
+
<a v-ripple class="flex px-6 p-3 lg:px-3 lg:py-2 align-items-center text-600 hover:text-900 hover:surface-100 font-medium border-round cursor-pointer transition-colors transition-duration-150 p-ripple">
|
|
97
|
+
<i class="pi pi-inbox text-base lg:text-2xl mr-2 lg:mr-0"></i>
|
|
98
|
+
<span class="block lg:hidden font-medium">Inbox</span>
|
|
99
|
+
</a>
|
|
100
|
+
</li>
|
|
101
|
+
<li class="border-top-1 surface-border lg:border-top-none">
|
|
102
|
+
<a v-ripple class="flex px-6 p-3 lg:px-3 lg:py-2 align-items-center hover:surface-100 font-medium border-round cursor-pointer transition-colors transition-duration-150 p-ripple">
|
|
103
|
+
<img src="/images/empty-user-photo.svg" class="mr-3 lg:mr-0 border-circle" style="width: 28px; height: 28px"/>
|
|
104
|
+
<div class="block lg:hidden">
|
|
105
|
+
<div class="text-900 font-medium">Josephine Lillard</div>
|
|
106
|
+
<span class="text-600 font-medium text-sm">Marketing Specialist</span>
|
|
107
|
+
</div>
|
|
108
|
+
</a>
|
|
109
|
+
</li>
|
|
110
|
+
</ul>
|
|
111
|
+
</div>
|
|
112
|
+
</div>
|
|
113
|
+
</template>
|
|
114
|
+
|
|
115
|
+
<script setup>
|
|
116
|
+
|
|
117
|
+
import { NotificationsIcon } from "@live-change/user-frontend"
|
|
118
|
+
|
|
119
|
+
import { UserIcon } from "@live-change/user-frontend"
|
|
120
|
+
|
|
121
|
+
|
|
122
|
+
|
|
123
|
+
</script>
|
|
124
|
+
|
|
125
|
+
<style scoped>
|
|
126
|
+
|
|
127
|
+
</style>
|
package/Page.vue
CHANGED
|
@@ -8,10 +8,10 @@
|
|
|
8
8
|
<div class="relative h-0 w-full">
|
|
9
9
|
<ProgressBar v-if="loading || working" mode="indeterminate" class="absolute w-full" style="height: .2em" />
|
|
10
10
|
</div>
|
|
11
|
-
<div v-if="pageType == 'simple'" class="p-5 flex flex-column flex-auto align-items-center">
|
|
11
|
+
<div v-if="pageType == 'simple'" class="p-5 flex flex-column flex-auto align-items-center relative">
|
|
12
12
|
<slot></slot>
|
|
13
13
|
</div>
|
|
14
|
-
<div v-if="pageType == 'wide'">
|
|
14
|
+
<div v-if="pageType == 'wide'" class="relative">
|
|
15
15
|
<slot></slot>
|
|
16
16
|
</div>
|
|
17
17
|
</div>
|
package/client-entry.js
CHANGED
|
@@ -17,7 +17,9 @@ export function clientEntry(App, createRouter) {
|
|
|
17
17
|
windowId
|
|
18
18
|
})
|
|
19
19
|
|
|
20
|
-
const
|
|
20
|
+
const host = document.location.host
|
|
21
|
+
|
|
22
|
+
const { app, router } = createApp(api, App, createRouter, host)
|
|
21
23
|
|
|
22
24
|
app.use(createSharedElementDirective())
|
|
23
25
|
router.beforeEach(SharedElementRouteGuard)
|
package/host.js
ADDED
package/index.js
CHANGED
|
@@ -1,3 +1,11 @@
|
|
|
1
1
|
import ComponentDialog from "./ComponentDialog.vue"
|
|
2
|
-
|
|
3
2
|
export { ComponentDialog }
|
|
3
|
+
|
|
4
|
+
import ViewRoot from "./ViewRoot.vue"
|
|
5
|
+
import Page from "./Page.vue"
|
|
6
|
+
import NavBar from "./NavBar.vue"
|
|
7
|
+
|
|
8
|
+
export { ViewRoot, Page, NavBar }
|
|
9
|
+
|
|
10
|
+
import { useHost } from "./host.js"
|
|
11
|
+
export { useHost }
|
package/main.js
CHANGED
|
@@ -15,19 +15,15 @@ import StyleClass from 'primevue/styleclass'
|
|
|
15
15
|
import Ripple from 'primevue/ripple'
|
|
16
16
|
import BadgeDirective from 'primevue/badgedirective'
|
|
17
17
|
|
|
18
|
-
import emailValidator from "@live-change/email-service/clientEmailValidator.js"
|
|
19
|
-
import passwordValidator from "@live-change/password-authentication-service/clientPasswordValidator.js"
|
|
20
|
-
|
|
21
18
|
// SSR requires a fresh app instance per request, therefore we export a function
|
|
22
19
|
// that creates a fresh app instance. If using Vuex, we'd also be creating a
|
|
23
20
|
// fresh store here.
|
|
24
|
-
export function createApp(api, App, createRouter) {
|
|
25
|
-
api.validators.email = emailValidator
|
|
26
|
-
api.validators.password = passwordValidator
|
|
27
|
-
|
|
21
|
+
export function createApp(api, App, createRouter, host) {
|
|
28
22
|
const app = createSSRApp(App)
|
|
29
23
|
app.config.devtools = true
|
|
30
24
|
|
|
25
|
+
app.config.globalProperties.$host = host
|
|
26
|
+
|
|
31
27
|
api.installInstanceProperties(app.config.globalProperties)
|
|
32
28
|
|
|
33
29
|
registerComponents(app)
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@live-change/frontend-base",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.2.2",
|
|
4
4
|
"scripts": {
|
|
5
5
|
"memDev": "lcli memDev --enableSessions --initScript ./init.js --templatePath ../../base-frontend/index.html",
|
|
6
6
|
"localDevInit": "rm tmp.db; lcli localDev --enableSessions --initScript ./init.js",
|
|
@@ -20,19 +20,19 @@
|
|
|
20
20
|
"debug": "node --inspect-brk server"
|
|
21
21
|
},
|
|
22
22
|
"dependencies": {
|
|
23
|
-
"@live-change/cli": "0.6.
|
|
24
|
-
"@live-change/dao": "0.5.
|
|
25
|
-
"@live-change/dao-vue3": "0.5.
|
|
26
|
-
"@live-change/dao-websocket": "0.5.
|
|
27
|
-
"@live-change/email-service": "0.2.
|
|
28
|
-
"@live-change/password-authentication-service": "0.2.
|
|
29
|
-
"@live-change/secret-code-service": "0.2.
|
|
30
|
-
"@live-change/secret-link-service": "0.2.
|
|
31
|
-
"@live-change/security-frontend": "^0.
|
|
32
|
-
"@live-change/session-service": "0.2.
|
|
33
|
-
"@live-change/user-service": "0.2.
|
|
34
|
-
"@live-change/vue3-components": "0.2.
|
|
35
|
-
"@live-change/vue3-ssr": "0.2.
|
|
23
|
+
"@live-change/cli": "0.6.14",
|
|
24
|
+
"@live-change/dao": "0.5.6",
|
|
25
|
+
"@live-change/dao-vue3": "0.5.6",
|
|
26
|
+
"@live-change/dao-websocket": "0.5.6",
|
|
27
|
+
"@live-change/email-service": "0.2.51",
|
|
28
|
+
"@live-change/password-authentication-service": "0.2.51",
|
|
29
|
+
"@live-change/secret-code-service": "0.2.51",
|
|
30
|
+
"@live-change/secret-link-service": "0.2.51",
|
|
31
|
+
"@live-change/security-frontend": "^0.2.2",
|
|
32
|
+
"@live-change/session-service": "0.2.51",
|
|
33
|
+
"@live-change/user-service": "0.2.51",
|
|
34
|
+
"@live-change/vue3-components": "0.2.15",
|
|
35
|
+
"@live-change/vue3-ssr": "0.2.15",
|
|
36
36
|
"@vitejs/plugin-vue": "^2.3.1",
|
|
37
37
|
"@vitejs/plugin-vue-jsx": "^1.3.10",
|
|
38
38
|
"@vue/compiler-sfc": "^3.2.37",
|
|
@@ -56,7 +56,7 @@
|
|
|
56
56
|
"vue3-scroll-border": "0.1.2"
|
|
57
57
|
},
|
|
58
58
|
"devDependencies": {
|
|
59
|
-
"@live-change/codeceptjs-helper": "0.6.
|
|
59
|
+
"@live-change/codeceptjs-helper": "0.6.14",
|
|
60
60
|
"@wdio/selenium-standalone-service": "^7.20.8",
|
|
61
61
|
"codeceptjs": "^3.3.4",
|
|
62
62
|
"generate-password": "1.7.0",
|
|
@@ -68,5 +68,5 @@
|
|
|
68
68
|
"author": "",
|
|
69
69
|
"license": "BSD-3-Clause",
|
|
70
70
|
"description": "",
|
|
71
|
-
"gitHead": "
|
|
71
|
+
"gitHead": "f7abc1d907b85c321e629086c162e4b622eee91b"
|
|
72
72
|
}
|
package/server-entry.js
CHANGED
|
@@ -15,13 +15,14 @@ function escapeHtml(unsafe) {
|
|
|
15
15
|
}
|
|
16
16
|
|
|
17
17
|
export function serverEntry(App, createRouter) {
|
|
18
|
-
return async function({ url, dao, windowId }) {
|
|
18
|
+
return async function({ url, host, dao, windowId }) {
|
|
19
|
+
console.error('URL', host, url)
|
|
19
20
|
const api = await serverApi(dao, {
|
|
20
21
|
use: [],
|
|
21
22
|
windowId
|
|
22
23
|
})
|
|
23
24
|
|
|
24
|
-
const { app, router } = createApp(api, App, createRouter)
|
|
25
|
+
const { app, router } = createApp(api, App, createRouter, host)
|
|
25
26
|
|
|
26
27
|
app.directive('shared-element', {})
|
|
27
28
|
|