@live-change/db-admin 0.9.36 → 0.9.37

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 (11) hide show
  1. package/front/src/App.vue +91 -11
  2. package/front/src/Database.vue +14 -14
  3. package/front/src/DatabaseAdmin.vue +49 -26
  4. package/front/src/Databases.vue +4 -4
  5. package/front/src/NavBar.vue +36 -93
  6. package/front/src/Page.vue +1 -1
  7. package/front/src/entry-client.js +1 -0
  8. package/front/src/main.js +14 -2
  9. package/front/src/router.js +4 -1
  10. package/front/vite.config.js +16 -4
  11. package/package.json +12 -12
package/front/src/App.vue CHANGED
@@ -35,9 +35,7 @@
35
35
  import ConfirmPopup from 'primevue/confirmpopup'
36
36
  import Toast from 'primevue/toast'
37
37
 
38
- import 'primevue/resources/primevue.min.css'
39
- import 'primevue/resources/themes/saga-blue/theme.css'
40
- import 'primeflex/primeflex.css'
38
+ import "@fortawesome/fontawesome-free/css/all.min.css"
41
39
  import 'primeicons/primeicons.css'
42
40
 
43
41
  import ProgressSpinner from 'primevue/progressspinner'
@@ -78,16 +76,98 @@
78
76
  </script>
79
77
 
80
78
  <style>
81
- body {
82
- margin: 0;
83
- height: 100%;
84
- overflow-x: hidden;
85
- overflow-y: auto;
86
- background-color: var(--surface-a);
87
- font-family: var(--font-family);
79
+
80
+ @import "tailwindcss";
81
+ @plugin "tailwindcss-primeui";
82
+
83
+ @custom-variant dark (&:where(.app-dark-mode, .app-dark-mode *));
84
+
85
+ :root {
86
+ --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
87
+ font-family: var(--font-sans)
88
+ }
89
+ /* @supports (font-variation-settings: normal) {
90
+ :root { font-family: 'Verdana var', sans-serif; }
91
+ } */
92
+ html,body
93
+ {
94
+ min-height: 100%;
95
+ font-family: var(--font-sans);
88
96
  font-weight: 400;
89
- color: var(--text-color);
90
97
  }
98
+
99
+ @layer base {
100
+ a {
101
+ color: var(--p-blue-700);
102
+ text-decoration: underline;
103
+ }
104
+ a:hover {
105
+ color: var(--p-blue-900);
106
+ text-decoration: none;
107
+ }
108
+ a:visited {
109
+ color: var(--p-purple-800);
110
+ }
111
+
112
+
113
+ h1, h2, h3, h4, h5, h6 {
114
+ page-break-after: avoid;
115
+ text-align: left;
116
+ }
117
+
118
+ h1 {
119
+ font-size: 2.0em;
120
+ margin-top: 1em;
121
+ margin-bottom: 0.5em;
122
+ font-weight: 500;
123
+ color: var(--p-surface-700);
124
+ }
125
+
126
+ h2 {
127
+ font-size: 1.75em;
128
+ margin-top: 1em;
129
+ margin-bottom: 0.5em;
130
+ color: var(--p-surface-700);
131
+ font-weight: 500;
132
+ }
133
+
134
+ h3 {
135
+ font-size: 1.5em;
136
+ margin-top: 1em;
137
+ margin-bottom: 0.5em;
138
+ color: var(--p-surface-800);
139
+ font-weight: 500;
140
+ }
141
+
142
+ h4 {
143
+ font-size: 1.23em;
144
+ margin-top: 1em;
145
+ margin-bottom: 0.5em;
146
+ font-weight: 500;
147
+ color: var(--p-surface-800);
148
+ }
149
+
150
+ p {
151
+ margin-top: 0.5em;
152
+ margin-bottom: 0.5em;
153
+ }
154
+
155
+ pre {
156
+ font-family: monospace;
157
+ }
158
+
159
+ ul {
160
+ list-style: disc;
161
+ }
162
+ ol {
163
+ list-style: decimal;
164
+ }
165
+ li {
166
+ margin-top: 0.23em;
167
+ margin-bottom: 0.23em;
168
+ }
169
+ }
170
+
91
171
  .working-blur {
92
172
  transition: filter 0.3s;
93
173
  }
package/front/src/Database.vue CHANGED
@@ -1,13 +1,13 @@
1
1
  <template>
2
- <div class="bg-surface-0 dark:bg-surface-900 p-6 shadow rounded-border w-full">
2
+ <div class="bg-surface-0 dark:bg-surface-900 p-12 shadow rounded-border w-full">
3
3
  <ConfirmPopup v-if="isMounted"></ConfirmPopup>
4
4
  <Toast v-if="isMounted"></Toast>
5
- <div class="text-center mb-4">
6
- <div class="text-surface-900 dark:text-surface-0 text-3xl font-medium mb-4">Database "{{ dbName }}" @ {{ dbApi }}</div>
5
+ <div class="text-center mb-6">
6
+ <div class="text-surface-900 dark:text-surface-0 text-3xl font-medium mb-6">Database "{{ dbName }}" @ {{ dbApi }}</div>
7
7
  </div>
8
- <div class="text-center mb-4">
9
- <div v-if="tables.length > 0" class="text-surface-900 dark:text-surface-0 text-2xl font-medium mb-4">Tables</div>
10
- <div v-else class="text-surface-600 dark:text-surface-200 text-xl font-medium mb-4">
8
+ <div class="text-center mb-6">
9
+ <div v-if="tables.length > 0" class="text-surface-900 dark:text-surface-0 text-2xl font-medium mb-6">Tables</div>
10
+ <div v-else class="text-surface-600 dark:text-surface-200 text-xl font-medium mb-6">
11
11
  There are no tables. Create first one.
12
12
  </div>
13
13
  </div>
@@ -39,15 +39,15 @@
39
39
  </Column>
40
40
  </DataTable>
41
41
 
42
- <form class="mt-6 flex flex-row justify-center" @submit="handleNewTableSubmit">
42
+ <form class="mt-12 flex flex-row justify-center" @submit="handleNewTableSubmit">
43
43
  <InputText v-model="newTableName" class="mr-2" placeholder="Table Name" />
44
44
  <Button type="submit" class="p-button-primary" icon="pi pi-plus" label="Create Table" />
45
45
  </form>
46
46
 
47
47
 
48
- <div class="text-center mb-4 mt-8">
49
- <div v-if="logs.length > 0" class="text-surface-900 dark:text-surface-0 text-2xl font-medium mb-4">Logs</div>
50
- <div v-else class="text-surface-600 dark:text-surface-200 text-xl font-medium mb-4">
48
+ <div class="text-center mb-6 mt-20">
49
+ <div v-if="logs.length > 0" class="text-surface-900 dark:text-surface-0 text-2xl font-medium mb-6">Logs</div>
50
+ <div v-else class="text-surface-600 dark:text-surface-200 text-xl font-medium mb-6">
51
51
  There are no logs. Create first one.
52
52
  </div>
53
53
  </div>
@@ -78,15 +78,15 @@
78
78
  </Column>
79
79
  </DataTable>
80
80
 
81
- <form class="mt-6 flex flex-row justify-center" @submit="handleNewLogSubmit">
81
+ <form class="mt-12 flex flex-row justify-center" @submit="handleNewLogSubmit">
82
82
  <InputText v-model="newLogName" class="mr-2" placeholder="Log Name" />
83
83
  <Button type="submit" class="p-button-primary" icon="pi pi-plus" label="Create Log" />
84
84
  </form>
85
85
 
86
86
 
87
- <div class="text-center mb-4 mt-8">
88
- <div v-if="indexes.length > 0" class="text-surface-900 dark:text-surface-0 text-2xl font-medium mb-4">Indexes</div>
89
- <div v-else class="text-surface-600 dark:text-surface-200 text-xl font-medium mb-4">
87
+ <div class="text-center mb-6 mt-20">
88
+ <div v-if="indexes.length > 0" class="text-surface-900 dark:text-surface-0 text-2xl font-medium mb-6">Indexes</div>
89
+ <div v-else class="text-surface-600 dark:text-surface-200 text-xl font-medium mb-6">
90
90
  There are no indexes.
91
91
  </div>
92
92
  </div>
package/front/src/DatabaseAdmin.vue CHANGED
@@ -1,15 +1,21 @@
1
1
  <template>
2
2
  <div class="min-h-screen flex relative lg:static bg-surface-50 dark:bg-surface-950 w-full">
3
- <div id="app-sidebar-1" class="surface-section h-screen hidden lg:block flex-shrink-0 absolute lg:static left-0
4
- top-0 z-1 border-right-1 surface-border select-none" style="width:280px">
3
+ <div id="app-sidebar-1" class="bg-surface-0 dark:bg-surface-900 h-screen hidden lg:block
4
+ flex-shrink-0 absolute lg:static left-0 top-0 z-1
5
+ border-r-1 border-surface-200 dark:border-surface-700
6
+ select-none" style="width:280px">
5
7
  <div class="flex flex-col h-full">
6
- <div class="flex items-center px-8 shrink-0" style="height:60px">
7
- <img src="/images/logo.svg" alt="Image" height="30">
8
+ <div class="flex items-center px-4 shrink-0 py-3">
9
+ <img src="/images/logo.svg" alt="Image" class="h-6">
10
+ <span class="text-secondary-400 text-surface-600 font-medium ml-2 text-2xl">
11
+ Databases:
12
+ </span>
8
13
  </div>
9
14
  <div class="overflow-y-auto">
10
- <ul class="list-none p-2 m-0">
15
+ <ul class="list-none p-2 m-0">
11
16
  <li v-for="database in databases">
12
- <div class="p-4 flex items-center justify-between text-surface-600 dark:text-surface-200 cursor-pointer p-ripple">
17
+ <div class="px-6 pb-2 flex items-center justify-between text-surface-600 dark:text-surface-200
18
+ cursor-pointer p-ripple">
13
19
  <router-link :to="{ name: 'db:database', params: { dbName: database.id } }"
14
20
  class="font-medium no-underline text-surface-600 dark:text-surface-200">
15
21
  {{ database.id }}
@@ -19,10 +25,12 @@
19
25
  enterActiveClass: 'animate-slidedown', leaveToClass: 'hidden',
20
26
  leaveActiveClass: 'animate-slideup' }" v-ripple/>
21
27
  </div>
22
- <ul class="list-none p-0 m-0 ml-4 overflow-hidden hidden" :id="`db-menu-${database.id}`">
28
+ <ul class="list-none p-0 m-0 ml-6 overflow-hidden hidden" :id="`db-menu-${database.id}`">
23
29
  <li>
24
- <a v-ripple class="flex align-items-center cursor-pointer p-3 border-round text-700
25
- hover:surface-100 transition-duration-150 transition-colors p-ripple"
30
+ <a v-ripple class="flex align-items-center cursor-pointer px-3 border-round
31
+ text-surface-700 dark:text-surface-200 no-underline
32
+ hover:text-surface-900 dark:hover:text-surface-100
33
+ transition-duration-150 transition-colors p-ripple"
26
34
  v-styleclass="{ selector: '@next', enterFromClass: 'hidden', enterActiveClass: 'animate-slidedown',
27
35
  leaveToClass: 'hidden', leaveActiveClass: 'animate-slideup' }">
28
36
  <i class="pi pi-table mr-2"></i>
@@ -34,16 +42,21 @@
34
42
  <li v-for="table in database?.tables">
35
43
  <router-link
36
44
  :to="tableLink(database.id, table)"
37
- v-ripple class="flex align-items-center cursor-pointer p-3 border-round text-700
38
- hover:surface-100 transition-duration-150 transition-colors p-ripple">
45
+ v-ripple class="flex align-items-center cursor-pointer px-3 border-round text-700
46
+ no-underline text-surface-700 dark:text-surface-200
47
+ hover:text-surface-900 dark:hover:text-surface-100
48
+ hover:surface-100 transition-duration-150 transition-colors p-ripple"
49
+ :title="table">
39
50
  <span class="font-medium">{{ table }}</span>
40
51
  </router-link>
41
52
  </li>
42
53
  </ul>
43
54
  </li>
44
55
  <li>
45
- <a v-ripple class="flex align-items-center cursor-pointer p-3 border-round text-700
46
- hover:surface-100 transition-duration-150 transition-colors p-ripple"
56
+ <a v-ripple class="flex align-items-center cursor-pointer px-3 border-round
57
+ text-surface-700 dark:text-surface-200 no-underline
58
+ hover:text-surface-900 dark:hover:text-surface-100
59
+ transition-duration-150 transition-colors p-ripple"
47
60
  v-styleclass="{ selector: '@next', enterFromClass: 'hidden', enterActiveClass: 'animate-slidedown',
48
61
  leaveToClass: 'hidden', leaveActiveClass: 'animate-slideup' }">
49
62
  <i class="pi pi-list mr-2"></i>
@@ -55,16 +68,21 @@
55
68
  <li v-for="log in database?.logs">
56
69
  <router-link
57
70
  :to="logLink(database.id, log)"
58
- v-ripple class="flex align-items-center cursor-pointer p-3 border-round text-700
59
- hover:surface-100 transition-duration-150 transition-colors p-ripple">
71
+ v-ripple class="flex align-items-center cursor-pointer px-3 border-round text-700
72
+ no-underline text-surface-700 dark:text-surface-200
73
+ hover:text-surface-900 dark:hover:text-surface-100
74
+ hover:surface-100 transition-duration-150 transition-colors p-ripple"
75
+ :title="log">
60
76
  <span class="font-medium">{{ log }}</span>
61
77
  </router-link>
62
78
  </li>
63
79
  </ul>
64
80
  </li>
65
81
  <li>
66
- <a v-ripple class="flex align-items-center cursor-pointer p-3 border-round text-700
67
- hover:surface-100 transition-duration-150 transition-colors p-ripple"
82
+ <a v-ripple class="flex align-items-center cursor-pointer px-3 border-round
83
+ text-surface-700 dark:text-surface-200 no-underline
84
+ hover:text-surface-900 dark:hover:text-surface-100
85
+ transition-duration-150 transition-colors p-ripple"
68
86
  v-styleclass="{ selector: '@next', enterFromClass: 'hidden', enterActiveClass: 'animate-slidedown',
69
87
  leaveToClass: 'hidden', leaveActiveClass: 'animate-slideup' }">
70
88
  <i class="pi pi-external-link mr-2"></i>
@@ -76,8 +94,11 @@
76
94
  <li v-for="index in database?.indexes">
77
95
  <router-link
78
96
  :to="indexLink(database.id, index)"
79
- v-ripple class="flex align-items-center cursor-pointer p-3 border-round text-700
80
- hover:surface-100 transition-duration-150 transition-colors p-ripple">
97
+ v-ripple class="flex align-items-center cursor-pointer px-3 border-round text-700
98
+ no-underline text-surface-700 dark:text-surface-200
99
+ hover:text-surface-900 dark:hover:text-surface-100
100
+ hover:surface-100 transition-duration-150 transition-colors p-ripple"
101
+ :title="index">
81
102
  <span class="font-medium">{{ index }}</span>
82
103
  </router-link>
83
104
  </li>
@@ -90,16 +111,16 @@
90
111
  </div>
91
112
  </div>
92
113
  <div class="min-h-screen flex flex-col relative flex-auto">
93
- <div class="flex justify-content-between align-items-center px-5 surface-0 border-bottom-1 surface-border
94
- relative lg:hidden" style="height:60px">
114
+ <div class="flex justify-content-between align-items-center surface-0 border-bottom-1 surface-border
115
+ lg:hidden fixed top-25 left-5">
95
116
  <div class="flex">
96
- <a v-ripple class="cursor-pointer block text-surface-700 dark:text-surface-100 mr-4 p-ripple"
97
- v-styleclass="{ selector: '#app-sidebar-1', enterFromClass: 'hidden', enterActiveClass: 'fadeinleft', leaveToClass: 'hidden', leaveActiveClass: 'fadeoutleft', hideOnOutsideClick: true }">
98
- <i class="pi pi-bars text-4xl"></i>
99
- </a>
117
+ <Button v-ripple
118
+ icon="pi pi-arrow-right"
119
+ v-styleclass="{ selector: '#app-sidebar-1', enterFromClass: 'hidden',
120
+ leaveToClass: 'hidden', hideOnOutsideClick: true }" />
100
121
  </div>
101
122
  </div>
102
- <div v-if="viewType == 'simple'" class="p-8 flex flex-col flex-auto items-center">
123
+ <div v-if="viewType == 'simple'" class="p-3 lg:p-20 flex flex-col flex-auto items-center">
103
124
  <router-view></router-view>
104
125
  </div>
105
126
  <template v-if="viewType == 'wide'">
@@ -110,6 +131,8 @@
110
131
  </template>
111
132
 
112
133
  <script setup>
134
+
135
+ import Button from 'primevue/button'
113
136
  import { tableLink, logLink, indexLink } from "./links.js"
114
137
 
115
138
  const { dbApi } = defineProps({
package/front/src/Databases.vue CHANGED
@@ -1,10 +1,10 @@
1
1
  <template>
2
- <div class="bg-surface-0 dark:bg-surface-900 p-6 shadow rounded-border w-full">
2
+ <div class="bg-surface-0 dark:bg-surface-900 p-12 shadow rounded-border w-full">
3
3
  <ConfirmPopup v-if="isMounted"></ConfirmPopup>
4
4
  <Toast v-if="isMounted"></Toast>
5
5
 
6
- <div class="text-center mb-8">
7
- <div class="text-surface-900 dark:text-surface-0 text-3xl font-medium mb-4">Databases @ {{ dbApi }}</div>
6
+ <div class="text-center mb-20">
7
+ <div class="text-surface-900 dark:text-surface-0 text-3xl font-medium mb-6">Databases @ {{ dbApi }}</div>
8
8
  </div>
9
9
 
10
10
  <DataTable :value="databases" responsiveLayout="scroll">
@@ -28,7 +28,7 @@
28
28
 
29
29
  <!-- <pre>{{ JSON.stringify(databases, null, ' ') }}</pre>-->
30
30
 
31
- <form class="mt-6 flex flex-row" @submit="handleNewDatabaseSubmit">
31
+ <form class="mt-12 flex flex-row" @submit="handleNewDatabaseSubmit">
32
32
  <InputText v-model="newDatabaseName" class="mr-2" placeholder="Database Name" />
33
33
  <Button type="submit" class="p-button-primary" icon="pi pi-plus" label="Create Database" />
34
34
  </form>
package/front/src/NavBar.vue CHANGED
@@ -1,105 +1,48 @@
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
- <img src="/images/logo.svg" alt="Image" height="40" class="mr-0 lg:mr-12">
6
- <a v-ripple class="cursor-pointer block lg:hidden text-surface-700 dark:text-surface-100 p-ripple"
7
- v-styleclass="{ selector: '@next', enterFromClass: 'hidden', leaveToClass: 'hidden', hideOnOutsideClick: true }">
5
+
6
+ <router-link :to="{ name: 'db:databases' }"
7
+ class="no-underline text-gray-700 text-2xl font-medium shrink-0">
8
+ <div class="flex items-center">
9
+ <img src="/images/logo.svg" class="w-14 mr-6">
10
+ <span>
11
+ Live
12
+ </span>
13
+ <span class="text-primary-400">
14
+ Change
15
+ </span>
16
+ <span class="ml-1">
17
+ Database
18
+ </span>
19
+ </div>
20
+ </router-link>
21
+
22
+ <div class="flex flex-grow"></div>
23
+
24
+
25
+ <!-- <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"
26
+ v-styleclass="{
27
+ selector: '.top-menu', enterClass: 'hidden', leaveToClass: 'hidden', hideOnOutsideClick: true
28
+ }">
8
29
  <i class="pi pi-bars text-4xl"></i>
9
- </a>
10
- <div class="items-center grow justify-between hidden lg:flex absolute lg:static w-full bg-surface-0 dark:bg-surface-900 left-0 top-full z-10 shadow lg:shadow-none">
11
- <ul class="list-none p-0 m-0 flex lg:items-center select-none flex-col lg:flex-row">
12
- <li>
13
- <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">
14
- <i class="pi pi-home mr-2"></i>
15
- <span>Home</span>
16
- </a>
17
- </li>
18
- <li class="lg:relative">
19
- <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"
20
- v-styleclass="{ selector: '@next', enterFromClass: 'hidden', enterActiveClass: 'scalein', leaveToClass: 'hidden', leaveActiveClass: 'fadeout', hideOnOutsideClick: true }">
21
- <i class="pi pi-users mr-2"></i>
22
- <span>Customers</span>
23
- <i class="pi pi-angle-down ml-auto lg:ml-4"></i>
24
- </a>
25
- <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">
26
- <li>
27
- <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">
28
- <i class="pi pi-user-plus mr-2"></i>
29
- <span class="font-medium">Add New</span>
30
- </a>
31
- </li>
32
- <li class="relative">
33
- <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"
34
- v-styleclass="{ selector: '@next', enterFromClass: 'hidden', enterActiveClass: 'scalein', leaveToClass: 'hidden', leaveActiveClass: 'fadeout', hideOnOutsideClick: true }">
35
- <i class="pi pi-search mr-2"></i>
36
- <span class="font-medium">Search</span>
37
- <i class="pi pi-angle-down ml-auto lg:-rotate-90"></i>
38
- </a>
39
- <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">
40
- <li>
41
- <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">
42
- <i class="pi pi-shopping-cart mr-2"></i>
43
- <span class="font-medium">Purchases</span>
44
- </a>
45
- </li>
46
- <li class="relative">
47
- <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">
48
- <i class="pi pi-comments mr-2"></i>
49
- <span class="font-medium">Messages</span>
50
- </a>
51
- </li>
52
- </ul>
53
- </li>
54
- </ul>
55
- </li>
56
- <li>
57
- <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">
58
- <i class="pi pi-calendar mr-2"></i>
59
- <span>Calendar</span>
60
- </a>
61
- </li>
62
- <li>
63
- <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">
64
- <i class="pi pi-chart-line mr-2"></i>
65
- <span>Stats</span>
66
- </a>
67
- </li>
68
- </ul>
69
- <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">
70
- <li>
71
- <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">
72
- <i class="pi pi-inbox text-base lg:text-2xl mr-2 lg:mr-0"></i>
73
- <span class="block lg:hidden font-medium">Inbox</span>
74
- </a>
75
- </li>
76
- <li>
77
- <a v-ripple class="flex px-6 p-3 lg:px-3 lg:py-3 align-items-center text-600 hover:text-900 hover:surface-100
78
- font-medium border-round cursor-pointer transition-colors transition-duration-150 p-ripple">
79
- <i class="pi pi-bell text-base lg:text-2xl mr-2 lg:mr-0 p-overlay-badge">
80
- <Badge value="2"></Badge>
81
- </i>
82
- <span class="block lg:hidden font-medium">Notifications</span>
83
- </a>
84
- </li>
85
- <li class="border-t border-surface lg:border-t-0">
86
- <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">
87
- <img src="/images/empty-user-photo.svg" class="mr-4 lg:mr-0 rounded-full" style="width: 28px; height: 28px"/>
88
- <div class="block lg:hidden">
89
- <div class="text-surface-900 dark:text-surface-0 font-medium">Josephine Lillard</div>
90
- <span class="text-surface-600 dark:text-surface-200 font-medium text-sm">Marketing Specialist</span>
91
- </div>
92
- </a>
93
- </li>
94
- </ul>
95
- </div>
30
+ </a> -->
31
+
96
32
  </div>
97
33
  </template>
98
34
 
99
35
  <script setup>
100
- import Badge from "primevue/badge"
36
+
37
+ // import { useApi } from "@live-change/vue3-ssr"
38
+ // import { computed } from "vue"
39
+
40
+ // const api = useApi()
41
+
42
+ //const isMember = computed(() => api.client.value.roles.includes('member'))
43
+
101
44
  </script>
102
45
 
103
46
  <style scoped>
104
47
 
105
- </style>
48
+ </style>
package/front/src/Page.vue CHANGED
@@ -5,7 +5,7 @@
5
5
  <div class="relative h-0 w-full">
6
6
  <ProgressBar v-if="loading || working" mode="indeterminate" class="absolute top-0 w-full" style="height: .2em" />
7
7
  </div>
8
- <div v-if="pageType == 'simple'" class="p-8 flex flex-col flex-auto items-center">
8
+ <div v-if="pageType == 'simple'" class="p-20 flex flex-col flex-auto items-center">
9
9
  <slot></slot>
10
10
  </div>
11
11
  <div v-if="pageType == 'wide'">
package/front/src/entry-client.js CHANGED
@@ -6,6 +6,7 @@ import {
6
6
  SharedElementRouteGuard
7
7
  } from 'v-shared-element'
8
8
 
9
+ console.info("DB ADMIN VERSION", ENV_VERSION)
9
10
 
10
11
  window.api = clientApi({
11
12
  use: [ ]
package/front/src/main.js CHANGED
@@ -12,7 +12,7 @@ import ToastService from 'primevue/toastservice'
12
12
  import StyleClass from 'primevue/styleclass'
13
13
  import Ripple from 'primevue/ripple'
14
14
  import BadgeDirective from 'primevue/badgedirective'
15
-
15
+ import Aura from '@primevue/themes/aura'
16
16
  import App from './App.vue'
17
17
  import Page from './Page.vue'
18
18
  import { createRouter } from './router'
@@ -33,7 +33,19 @@ export function createApp(api) {
33
33
  app.use(router)
34
34
 
35
35
  app.use(PrimeVue, {
36
- ripple: true
36
+ ripple: true,
37
+ theme: {
38
+ preset: Aura,
39
+ options: {
40
+ prefix: 'p',
41
+ darkModeSelector: '.app-dark-mode, .app-dark-mode *',
42
+ //cssLayer: false
43
+ cssLayer: {
44
+ name: "primevue",
45
+ order: "base, primevue",
46
+ },
47
+ }
48
+ },
37
49
  })
38
50
 
39
51
  app.use(ConfirmationService)
package/front/src/router.js CHANGED
@@ -18,7 +18,10 @@ export function routes(config = {}) {
18
18
  path: prefix,
19
19
  component: () => import("./DatabaseAdmin.vue"),
20
20
  props: { dbApi },
21
- meta: { pageType: 'wide', noNavBar: true },
21
+ meta: {
22
+ pageType: 'wide',
23
+ // noNavBar: true
24
+ },
22
25
  children: [
23
26
  ...dbAdminRoutes({ ...config, prefix: '' })
24
27
  ]
package/front/vite.config.js CHANGED
@@ -1,11 +1,21 @@
1
1
  import path from 'path'
2
- import { fileURLToPath } from 'url';
3
2
  import vuePlugin from '@vitejs/plugin-vue'
4
3
  import { defineConfig, searchForWorkspaceRoot } from 'vite'
5
4
  import findFreePorts from "find-free-ports"
6
5
  import { visualizer } from 'rollup-plugin-visualizer'
7
6
  import viteImages from 'vite-plugin-vue-images'
8
7
  import viteCompression from 'vite-plugin-compression'
8
+ import tailwindcss from '@tailwindcss/vite'
9
+ import { fileURLToPath } from 'url'
10
+ import { dirname, join } from 'path'
11
+ import { accessSync, readFileSync } from 'fs'
12
+
13
+ const packageJsonPath = dirname(fileURLToPath(import.meta.url))
14
+ .split('/').map((part, i, arr) =>
15
+ join(arr.slice(0, arr.length - i).join('/'), 'package.json')
16
+ ).find(p => { try { accessSync(p); return true } catch(e) { return false }})
17
+ const packageJson = packageJsonPath ? JSON.parse(readFileSync(packageJsonPath, 'utf-8')) : {}
18
+ const version = process.env.VERSION ?? packageJson.version ?? 'unknown'
9
19
 
10
20
  const ssrTransformCustomDir = () => {
11
21
  return {
@@ -17,7 +27,8 @@ const ssrTransformCustomDir = () => {
17
27
  export default defineConfig(async ({ command, mode }) => {
18
28
  //console.log("VITE CONFIG", command, mode)
19
29
  return {
20
- define: {
30
+ define: {
31
+ ENV_VERSION: JSON.stringify(version)
21
32
  },
22
33
  server: {
23
34
  hmr: {
@@ -40,11 +51,13 @@ export default defineConfig(async ({ command, mode }) => {
40
51
  'ripple': ssrTransformCustomDir,
41
52
  'styleclass': ssrTransformCustomDir,
42
53
  'badge': ssrTransformCustomDir,
43
- 'shared-element': ssrTransformCustomDir
54
+ 'shared-element': ssrTransformCustomDir,
55
+ 'lazy': ssrTransformCustomDir,
44
56
  }
45
57
  }
46
58
  },
47
59
  }),
60
+ tailwindcss(),
48
61
  viteImages({ extensions: ['jpg', 'jpeg', 'png', 'svg', 'webp'] }),
49
62
  viteCompression({ algorithm: 'brotliCompress', ext: '.br' }),
50
63
  viteCompression({ algorithm: 'gzip', ext: '.gz' }),
@@ -116,7 +129,6 @@ export default defineConfig(async ({ command, mode }) => {
116
129
 
117
130
  resolve: {
118
131
  alias: [
119
- { find: 'debug', replacement: 'debug/src/browser.js' },
120
132
  { find: 'universal-websocket-client', replacement: 'universal-websocket-client/browser.js' },
121
133
  { find: 'sockjs-client', replacement: 'sockjs-client/dist/sockjs.min.js' }
122
134
  ],
package/package.json CHANGED
@@ -1,11 +1,11 @@
1
1
  {
2
2
  "name": "@live-change/db-admin",
3
- "version": "0.9.36",
3
+ "version": "0.9.37",
4
4
  "scripts": {
5
5
  "memDev": "node server/start.js memDev --initScript ./init.js --dbAccess",
6
6
  "localDevInit": "rm tmp.db; lcli localDev --initScript ./init.js --dbAccess",
7
7
  "localDev": "node server/start.js localDev --dbAccess",
8
- "dev": "node server/start.js dev",
8
+ "dev": "node server/start.js dev --dbAccess",
9
9
  "ssrDev": "node server/start.js ssrDev --dbAccess",
10
10
  "serveAllMem": "cross-env NODE_ENV=production node server/start.js --withApi --withServices --updateServices --withDb --dbBackend mem --createDb --dbAccess",
11
11
  "serveAll": "cross-env NODE_ENV=production node server/start.js --withApi --withServices --updateServices --dbAccess",
@@ -19,14 +19,14 @@
19
19
  "type": "module",
20
20
  "dependencies": {
21
21
  "@fortawesome/fontawesome-free": "^6.7.2",
22
- "@live-change/dao": "^0.9.36",
23
- "@live-change/dao-message": "^0.9.36",
24
- "@live-change/dao-sockjs": "^0.9.36",
25
- "@live-change/dao-vue3": "^0.9.36",
26
- "@live-change/dao-websocket": "^0.9.36",
27
- "@live-change/framework": "^0.9.36",
28
- "@live-change/vue3-components": "^0.9.36",
29
- "@live-change/vue3-ssr": "^0.9.36",
22
+ "@live-change/dao": "^0.9.37",
23
+ "@live-change/dao-message": "^0.9.37",
24
+ "@live-change/dao-sockjs": "^0.9.37",
25
+ "@live-change/dao-vue3": "^0.9.37",
26
+ "@live-change/dao-websocket": "^0.9.37",
27
+ "@live-change/framework": "^0.9.37",
28
+ "@live-change/vue3-components": "^0.9.37",
29
+ "@live-change/vue3-ssr": "^0.9.37",
30
30
  "@vitejs/plugin-vue": "^5.0.5",
31
31
  "@vueuse/core": "^12.3.0",
32
32
  "@vueuse/head": "^2.0.0",
@@ -53,7 +53,7 @@
53
53
  "vue3-scroll-border": "0.1.6"
54
54
  },
55
55
  "devDependencies": {
56
- "@live-change/codeceptjs-helper": "^0.9.36",
56
+ "@live-change/codeceptjs-helper": "^0.9.37",
57
57
  "@wdio/selenium-standalone-service": "^8.15.0",
58
58
  "codeceptjs": "^3.6.10",
59
59
  "generate-password": "1.7.1",
@@ -66,5 +66,5 @@
66
66
  "author": "Michał Łaszczewski <michal@laszczewski.pl>",
67
67
  "license": "ISC",
68
68
  "description": "",
69
- "gitHead": "a10a79d5dcd3cd1780f7af76b3bcba4d78644b4d"
69
+ "gitHead": "b9c3b08a3e3b9d328d17f806d6a9f5684e63b878"
70
70
  }