@live-change/frontend-base 0.9.40 → 0.9.41

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.
Files changed (2) hide show
  1. package/NavBar.vue +68 -103
  2. package/package.json +18 -18
package/NavBar.vue CHANGED
@@ -1,126 +1,91 @@
1
1
  <template>
2
- <div class="surface-overlay py-3 px-6 shadow-2 flex align-items-center justify-content-between
2
+ <div class="bg-surface-0 dark:bg-surface-900 py-1 px-6 shadow flex items-center justify-content-between
3
3
  relative md:sticky top-0 z-5"
4
4
  style="min-height: 80px" key="navbar">
5
5
 
6
- <router-link to="/">
7
- <img src="/images/logo.svg" alt="Image" height="40" class="mr-0 lg:mr-12">
6
+ <router-link to="/" class="no-underline mr-0 lg:mr-12">
7
+ <div class="flex items-center text-2xl text-surface-800 dark:text-surface-50 font-medium">
8
+ <img src="/images/logo.svg" alt="Logo" class="w-12 mr-3">
9
+ <span class="hidden md:block">
10
+ Live
11
+ </span>
12
+ <span class="hidden md:block text-primary-400">
13
+ Change
14
+ </span>
15
+ <span class="hidden md:block ml-2">
16
+ App
17
+ </span>
18
+ </div>
8
19
  </router-link>
9
- <div class="hidden lg:flex">
10
- <!-- place for desktop menu -->
11
- </div>
12
- <div class="flex grow"></div>
13
- <UserIcon />
14
20
 
15
- <div class="static w-auto w-full bg-surface-0 dark:bg-surface-900 left-0 top-full z-10 shadow-none hidden">
16
- <ul class="list-none p-0 m-0 flex items-center select-none flex-row border-t-0">
17
- <li>
18
- <a v-ripple class="flex p-3 px-3 align-items-center text-600 hover:text-900 hover:surface-100
19
- font-medium border-round cursor-pointer transition-colors transition-duration-150 p-ripple">
20
- <i class="pi pi-inbox text-base text-2xl mr-0"></i>
21
- </a>
21
+ <div class="align-items-center flex-grow-1 justify-content-between hidden lg:block lg:ml-6 absolute lg:static w-full
22
+ bg-surface-0 dark:bg-surface-900 left-0 top-1/1 z-1 shadow lg:shadow-none top-menu
23
+ dark:border-t-1 dark:border-surface-700 md:dark:border-t-0">
24
+ <ul class="list-none p-0 m-0 flex items-end lg:items-center select-none flex-col lg:flex-row justify-end">
25
+ <li class="w-1/1 lg:w-auto">
26
+ <router-link
27
+ :to="'/'" v-ripple
28
+ class="flex justify-end px-6 p-3 lg:px-3 lg:py-2 items-center
29
+ text-surface-600 hover:text-900 hover:bg-surface-100
30
+ dark:text-primary-400 dark:hover:text-primary-100 dark:hover:bg-surface-800
31
+ font-medium text-2xl md:text-xl border-round cursor-pointer transition-colors
32
+ transition-duration-150 p-ripple no-underline">
33
+ <!-- <i class="pi pi-home mr-2"></i>-->
34
+ <span>Home</span>
35
+ </router-link>
22
36
  </li>
23
- <li>
24
- <a v-ripple class="flex p-3 px-3 align-items-center text-600 hover:text-900 hover:surface-100 font-medium
25
- border-round cursor-pointer transition-colors transition-duration-150 p-ripple">
26
- <i class="pi pi-bell text-base lg:text-2xl mr-2 lg:mr-0" v-badge.danger></i>
27
- </a>
37
+ <li class="w-1/1 lg:w-auto">
38
+ <router-link
39
+ :to="{ name: 'user:signInEmail' }" v-ripple
40
+ class="flex justify-end px-6 p-3 lg:px-3 lg:py-2 align-items-center
41
+ text-surface-600 hover:text-900 hover:bg-surface-100
42
+ dark:text-primary-400 dark:hover:text-primary-100 dark:hover:bg-surface-800
43
+ font-medium text-2xl md:text-xl border-round cursor-pointer transition-colors
44
+ transition-duration-150 p-ripple no-underline">
45
+ <!-- <i class="pi pi-home mr-2"></i>-->
46
+ <span>Sign in</span>
47
+ </router-link>
48
+ </li>
49
+ <li v-if="!client.user" class="w-1/1 lg:w-auto">
50
+ <router-link
51
+ :to="{ name: 'user:signUpEmail' }" v-ripple
52
+ class="flex justify-end px-6 p-3 lg:px-3 lg:py-2 align-items-center
53
+ text-surface-600 hover:text-900 hover:bg-surface-100
54
+ dark:text-primary-400 dark:hover:text-primary-100 dark:hover:bg-surface-800
55
+ font-medium text-2xl md:text-xl border-round cursor-pointer transition-colors
56
+ transition-duration-150 p-ripple no-underline">
57
+ <!-- <i class="pi pi-home mr-2"></i>-->
58
+ <span>Sign up</span>
59
+ </router-link>
28
60
  </li>
29
61
  </ul>
30
62
  </div>
31
63
 
32
- <a v-ripple class="cursor-pointer block lg:hidden text-surface-700 dark:text-surface-100 p-ripple ml-2 hover:bg-surface-100 dark:hover:bg-surface-700 p-2"
33
- v-styleclass="{ selector: '@next', enterFromClass: 'hidden', leaveToClass: 'hidden', hideOnOutsideClick: true }">
34
- <i class="pi pi-bars text-4xl"></i>
64
+ <div class="flex grow"></div>
65
+
66
+ <NotificationsIcon v-if="client.user" />
67
+
68
+ <UserIcon v-if="client.user" />
69
+
70
+ <a v-ripple class="cursor-pointer flex items-center justify-content-center no-underline lg:hidden text-surface-700 dark:text-surface-100 p-ripple
71
+ ml-2 hover:bg-surface-100 dark:hover:bg-surface-700 p-2"
72
+ v-styleclass="{
73
+ selector: '.top-menu', enterFromClass: 'hidden', leaveToClass: 'hidden', hideOnOutsideClick: true
74
+ }">
75
+ <i class="pi pi-bars" style="font-size: 2.46rem;"></i>
35
76
  </a>
36
77
 
37
- <div class="items-center grow justify-between hidden absolute lg:static w-full bg-surface-0 dark:bg-surface-900 left-0 top-full z-10 shadow lg:shadow-none">
38
- <ul class="list-none p-0 m-0 flex lg:items-center select-none flex-col lg:flex-row">
39
- <li>
40
- <a v-ripple class="flex px-12 p-4 lg:px-4 lg:py-2 items-center text-surface-600 dark:text-surface-200 hover:text-surface-900 dark:hover:text-surface-0 hover:bg-surface-100 dark:hover:bg-surface-700 font-medium rounded-border cursor-pointer transition-colors duration-150 p-ripple">
41
- <i class="pi pi-home mr-2"></i>
42
- <span>Home</span>
43
- </a>
44
- </li>
45
- <li class="lg:relative">
46
- <a v-ripple class="flex px-12 p-4 lg:px-4 lg:py-2 items-center text-surface-600 dark:text-surface-200 hover:text-surface-900 dark:hover:text-surface-0 hover:bg-surface-100 dark:hover:bg-surface-700 font-medium rounded-border cursor-pointer transition-colors duration-150 p-ripple"
47
- v-styleclass="{ selector: '@next', enterFromClass: 'hidden', enterActiveClass: 'scalein', leaveToClass: 'hidden', leaveActiveClass: 'fadeout', hideOnOutsideClick: true }">
48
- <i class="pi pi-users mr-2"></i>
49
- <span>Customers</span>
50
- <i class="pi pi-angle-down ml-auto lg:ml-4"></i>
51
- </a>
52
- <ul class="list-none py-4 px-12 m-0 lg:px-0 lg:py-0 rounded-border shadow-0 lg:shadow lg:border border-surface-50 dark:border-surface-800 lg:absolute bg-surface-0 dark:bg-surface-900 hidden origin-top w-full lg:w-60 cursor-pointer">
53
- <li>
54
- <a v-ripple class="flex p-4 items-center text-surface-600 dark:text-surface-200 hover:text-surface-900 dark:hover:text-surface-0 hover:bg-surface-100 dark:hover:bg-surface-700 transition-colors duration-150 p-ripple">
55
- <i class="pi pi-user-plus mr-2"></i>
56
- <span class="font-medium">Add New</span>
57
- </a>
58
- </li>
59
- <li class="relative">
60
- <a v-ripple class="flex p-4 items-center text-surface-600 dark:text-surface-200 hover:text-surface-900 dark:hover:text-surface-0 hover:bg-surface-100 dark:hover:bg-surface-700 transition-colors duration-150 p-ripple"
61
- v-styleclass="{ selector: '@next', enterFromClass: 'hidden', enterActiveClass: 'scalein', leaveToClass: 'hidden', leaveActiveClass: 'fadeout', hideOnOutsideClick: true }">
62
- <i class="pi pi-search mr-2"></i>
63
- <span class="font-medium">Search</span>
64
- <i class="pi pi-angle-down ml-auto lg:-rotate-90"></i>
65
- </a>
66
- <ul class="list-none py-4 pl-4 m-0 lg:px-0 lg:py-0 rounded-border shadow-0 lg:shadow lg:border border-surface-50 dark:border-surface-800 lg:absolute bg-surface-0 dark:bg-surface-900 hidden origin-top w-full lg:w-60 cursor-pointer left-full top-0">
67
- <li>
68
- <a v-ripple class="flex p-4 items-center text-surface-600 dark:text-surface-200 hover:text-surface-900 dark:hover:text-surface-0 hover:bg-surface-100 dark:hover:bg-surface-700 transition-colors duration-150 p-ripple">
69
- <i class="pi pi-shopping-cart mr-2"></i>
70
- <span class="font-medium">Purchases</span>
71
- </a>
72
- </li>
73
- <li class="relative">
74
- <a v-ripple class="flex p-4 items-center text-surface-600 dark:text-surface-200 hover:text-surface-900 dark:hover:text-surface-0 hover:bg-surface-100 dark:hover:bg-surface-700 transition-colors duration-150 p-ripple">
75
- <i class="pi pi-comments mr-2"></i>
76
- <span class="font-medium">Messages</span>
77
- </a>
78
- </li>
79
- </ul>
80
- </li>
81
- </ul>
82
- </li>
83
- <li>
84
- <a v-ripple class="flex px-12 p-4 lg:px-4 lg:py-2 items-center text-surface-600 dark:text-surface-200 hover:text-surface-900 dark:hover:text-surface-0 hover:bg-surface-100 dark:hover:bg-surface-700 font-medium rounded-border cursor-pointer transition-colors duration-150 p-ripple">
85
- <i class="pi pi-calendar mr-2"></i>
86
- <span>Calendar</span>
87
- </a>
88
- </li>
89
- <li>
90
- <a v-ripple class="flex px-12 p-4 lg:px-4 lg:py-2 items-center text-surface-600 dark:text-surface-200 hover:text-surface-900 dark:hover:text-surface-0 hover:bg-surface-100 dark:hover:bg-surface-700 font-medium rounded-border cursor-pointer transition-colors duration-150 p-ripple">
91
- <i class="pi pi-chart-line mr-2"></i>
92
- <span>Stats</span>
93
- </a>
94
- </li>
95
- </ul>
96
- <ul class="list-none p-0 m-0 flex lg:items-center select-none flex-col lg:flex-row border-t border-surface lg:border-t-0">
97
- <li>
98
- <a v-ripple class="flex px-12 p-4 lg:px-4 lg:py-2 items-center text-surface-600 dark:text-surface-200 hover:text-surface-900 dark:hover:text-surface-0 hover:bg-surface-100 dark:hover:bg-surface-700 font-medium rounded-border cursor-pointer transition-colors duration-150 p-ripple">
99
- <i class="pi pi-inbox text-base lg:text-2xl mr-2 lg:mr-0"></i>
100
- <span class="block lg:hidden font-medium">Inbox</span>
101
- </a>
102
- </li>
103
- <li class="border-t border-surface lg:border-t-0">
104
- <a v-ripple class="flex px-12 p-4 lg:px-4 lg:py-2 items-center hover:bg-surface-100 dark:hover:bg-surface-700 font-medium rounded-border cursor-pointer transition-colors duration-150 p-ripple">
105
- <img src="/images/empty-user-photo.svg" class="mr-4 lg:mr-0 rounded-full" style="width: 28px; height: 28px"/>
106
- <div class="block lg:hidden">
107
- <div class="text-surface-900 dark:text-surface-0 font-medium">Josephine Lillard</div>
108
- <span class="text-surface-600 dark:text-surface-200 font-medium text-sm">Marketing Specialist</span>
109
- </div>
110
- </a>
111
- </li>
112
- </ul>
113
- </div>
114
78
 
115
79
  </div>
116
80
  </template>
117
81
 
118
82
  <script setup>
119
83
 
120
- import { NotificationsIcon } from "@live-change/user-frontend"
121
-
122
- import { UserIcon } from "@live-change/user-frontend"
84
+ import { NotificationsIcon } from "@live-change/user-frontend"
123
85
 
86
+ import { UserIcon } from "@live-change/user-frontend"
87
+ import { client as useClient, useApi } from '@live-change/vue3-ssr'
88
+ const client = useClient()
124
89
 
125
90
 
126
91
  </script>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@live-change/frontend-base",
3
- "version": "0.9.40",
3
+ "version": "0.9.41",
4
4
  "scripts": {
5
5
  "memDev": "node server/start.js memDev --enableSessions --initScript ./init.js --templatePath ../../base-frontend/index.html",
6
6
  "localDevInit": "rm tmp.db; lcli localDev --enableSessions --initScript ./init.js",
@@ -35,21 +35,21 @@
35
35
  "@lezer/rust": "=1.0.1",
36
36
  "@lezer/sass": "=1.0.3",
37
37
  "@lezer/xml": "=1.0.2",
38
- "@live-change/cli": "^0.9.40",
39
- "@live-change/dao": "^0.9.40",
40
- "@live-change/dao-message": "^0.9.40",
41
- "@live-change/dao-sockjs": "^0.9.40",
42
- "@live-change/dao-vue3": "^0.9.40",
43
- "@live-change/dao-websocket": "^0.9.40",
44
- "@live-change/email-service": "^0.9.40",
45
- "@live-change/password-authentication-service": "^0.9.40",
46
- "@live-change/secret-code-service": "^0.9.40",
47
- "@live-change/secret-link-service": "^0.9.40",
48
- "@live-change/security-frontend": "^0.9.40",
49
- "@live-change/session-service": "^0.9.40",
50
- "@live-change/user-service": "^0.9.40",
51
- "@live-change/vue3-components": "^0.9.40",
52
- "@live-change/vue3-ssr": "^0.9.40",
38
+ "@live-change/cli": "^0.9.41",
39
+ "@live-change/dao": "^0.9.41",
40
+ "@live-change/dao-message": "^0.9.41",
41
+ "@live-change/dao-sockjs": "^0.9.41",
42
+ "@live-change/dao-vue3": "^0.9.41",
43
+ "@live-change/dao-websocket": "^0.9.41",
44
+ "@live-change/email-service": "^0.9.41",
45
+ "@live-change/password-authentication-service": "^0.9.41",
46
+ "@live-change/secret-code-service": "^0.9.41",
47
+ "@live-change/secret-link-service": "^0.9.41",
48
+ "@live-change/security-frontend": "^0.9.41",
49
+ "@live-change/session-service": "^0.9.41",
50
+ "@live-change/user-service": "^0.9.41",
51
+ "@live-change/vue3-components": "^0.9.41",
52
+ "@live-change/vue3-ssr": "^0.9.41",
53
53
  "@primevue/themes": "^4.2.5",
54
54
  "@tailwindcss/vite": "4.0.6",
55
55
  "@unhead/ssr": "^1.6.2",
@@ -105,7 +105,7 @@
105
105
  "vue3-scroll-border": "0.1.6"
106
106
  },
107
107
  "devDependencies": {
108
- "@live-change/codeceptjs-helper": "^0.9.40",
108
+ "@live-change/codeceptjs-helper": "^0.9.41",
109
109
  "codeceptjs": "^3.6.10",
110
110
  "generate-password": "1.7.1",
111
111
  "playwright": "1.49.1",
@@ -119,5 +119,5 @@
119
119
  "author": "Michał Łaszczewski <michal@laszczewski.pl>",
120
120
  "license": "BSD-3-Clause",
121
121
  "description": "",
122
- "gitHead": "d25366854a7a30557fd8f8e428a2e02cabb5b323"
122
+ "gitHead": "88ccfef9ea84e2de85935f771d2b03dabfa8d845"
123
123
  }