@live-change/db-admin 0.9.32 → 0.9.34

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/front/src/App.vue CHANGED
@@ -7,7 +7,7 @@
7
7
  </template>
8
8
  <loading-zone v-else suspense @isLoading="l => loading = l">
9
9
  <template v-slot:loading>
10
- <div class="fixed w-full h-full flex align-items-center justify-content-center top-0 left-0">
10
+ <div class="fixed w-full h-full flex items-center justify-center top-0 left-0">
11
11
  <ProgressSpinner animationDuration=".5s"/>
12
12
  </div>
13
13
  </template>
@@ -15,7 +15,7 @@
15
15
  <page :loading="loading" :working="working">
16
16
  <working-zone @isWorking="w => working = w">
17
17
  <template v-slot:working>
18
- <div class="fixed w-full h-full flex align-items-center justify-content-center top-0 left-0">
18
+ <div class="fixed w-full h-full flex items-center justify-center top-0 left-0">
19
19
  <ProgressSpinner animationDuration=".5s"/>
20
20
  </div>
21
21
  </template>
@@ -4,7 +4,9 @@
4
4
  :style="{ height: (codeLines * 1.35) + 'em' }"
5
5
  v-model="code"
6
6
  :readonly="readOnly" :line-numbers="codeLines > 1" />
7
- <small v-if="editResult.error" class="p-error">{{ editResult.error }}</small>
7
+ <Message v-if="editResult.error" severity="error" variant="simple" size="small">
8
+ {{ editResult.error }}
9
+ </Message>
8
10
  </template>
9
11
 
10
12
  <script setup>
@@ -17,6 +19,8 @@
17
19
  import 'prismjs/components/prism-clike'
18
20
  import 'prismjs/components/prism-javascript'
19
21
 
22
+ import Message from "primevue/message"
23
+
20
24
  import { PrismEditor } from 'vue-prism-editor'
21
25
 
22
26
  import { ref, computed, watch, onMounted } from 'vue'
@@ -1,11 +1,11 @@
1
1
  <template>
2
2
  <div class="w-full">
3
- <div class="w-full flex flex-row justify-content-center">
3
+ <div class="w-full flex flex-row justify-center">
4
4
  <Button v-if="!editorVisible" @click="showNewObjectEditor"
5
5
  icon="pi pi-plus-circle" label="Create new object" class="p-button-rounded p-button-primary" />
6
6
  </div>
7
7
 
8
- <div class="surface-0 shadow-1 w-full">
8
+ <div class="bg-surface-0 dark:bg-surface-900 shadow-sm w-full">
9
9
  <object-editor v-if="editorVisible"
10
10
  :dbApi="props.dbApi"
11
11
  :currentData="JSON.stringify(newObjectData)"
@@ -6,7 +6,7 @@
6
6
  <div v-for="(bucket, bucketIndex) in dataBuckets.buckets" :key="bucket.id"
7
7
  class="w-full">
8
8
  <div v-for="(row, index) in bucket.data" :key="row.id" :ref="el => bucket.domElements[index] = el"
9
- class="surface-0 shadow-1 w-full">
9
+ class="bg-surface-0 dark:bg-surface-900 shadow-sm w-full">
10
10
  <!-- {{ JSON.stringify(row) }}-->
11
11
  <object-editor :currentData="JSON.stringify(row)"
12
12
  :write="props.write" :remove="props.remove"
@@ -1,7 +1,7 @@
1
1
  <template>
2
2
  <div class="rows w-full mt-2">
3
3
  <div v-for="(row, index) in dataRows" :key="row.id"
4
- class="surface-0 shadow-1 w-full">
4
+ class="bg-surface-0 dark:bg-surface-900 shadow-sm w-full">
5
5
  <!-- {{ JSON.stringify(row) }}-->
6
6
  <object-editor :currentData="JSON.stringify(row)"
7
7
  :write="props.write" :remove="props.remove"
@@ -1,13 +1,13 @@
1
1
  <template>
2
- <div class="surface-card p-4 shadow-2 border-round w-full">
2
+ <div class="bg-surface-0 dark:bg-surface-900 p-6 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-3">
6
- <div class="text-900 text-3xl font-medium mb-3">Database "{{ dbName }}" @ {{ dbApi }}</div>
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>
7
7
  </div>
8
- <div class="text-center mb-3">
9
- <div v-if="tables.length > 0" class="text-900 text-2xl font-medium mb-3">Tables</div>
10
- <div v-else class="text-600 text-xl font-medium mb-3">
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">
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-4 flex flex-row justify-content-center" @submit="handleNewTableSubmit">
42
+ <form class="mt-6 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-3 mt-5">
49
- <div v-if="logs.length > 0" class="text-900 text-2xl font-medium mb-3">Logs</div>
50
- <div v-else class="text-600 text-xl font-medium mb-3">
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">
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-4 flex flex-row justify-content-center" @submit="handleNewLogSubmit">
81
+ <form class="mt-6 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-3 mt-5">
88
- <div v-if="indexes.length > 0" class="text-900 text-2xl font-medium mb-3">Indexes</div>
89
- <div v-else class="text-600 text-xl font-medium mb-3">
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">
90
90
  There are no indexes.
91
91
  </div>
92
92
  </div>
@@ -1,30 +1,30 @@
1
1
  <template>
2
- <div class="min-h-screen flex relative lg:static surface-ground w-full">
2
+ <div class="min-h-screen flex relative lg:static bg-surface-50 dark:bg-surface-950 w-full">
3
3
  <div id="app-sidebar-1" class="surface-section h-screen hidden lg:block flex-shrink-0 absolute lg:static left-0
4
4
  top-0 z-1 border-right-1 surface-border select-none" style="width:280px">
5
- <div class="flex flex-column h-full">
6
- <div class="flex align-items-center px-5 flex-shrink-0" style="height:60px">
5
+ <div class="flex flex-col h-full">
6
+ <div class="flex items-center px-8 shrink-0" style="height:60px">
7
7
  <img src="/images/logo.svg" alt="Image" height="30">
8
8
  </div>
9
9
  <div class="overflow-y-auto">
10
10
  <ul class="list-none p-2 m-0">
11
11
  <li v-for="database in databases">
12
- <div class="p-3 flex align-items-center justify-content-between text-600 cursor-pointer p-ripple">
12
+ <div class="p-4 flex items-center justify-between text-surface-600 dark:text-surface-200 cursor-pointer p-ripple">
13
13
  <router-link :to="{ name: 'db:database', params: { dbName: database.id } }"
14
- class="font-medium no-underline text-600">
14
+ class="font-medium no-underline text-surface-600 dark:text-surface-200">
15
15
  {{ database.id }}
16
16
  </router-link>
17
17
  <i class="pi pi-chevron-down"
18
- v-styleclass="{ selector: `#db-menu-${database.id}`, enterClass: 'hidden',
19
- enterActiveClass: 'slidedown', leaveToClass: 'hidden',
20
- leaveActiveClass: 'slideup' }" v-ripple/>
18
+ v-styleclass="{ selector: `#db-menu-${database.id}`, enterFromClass: 'hidden',
19
+ enterActiveClass: 'animate-slidedown', leaveToClass: 'hidden',
20
+ leaveActiveClass: 'animate-slideup' }" v-ripple/>
21
21
  </div>
22
- <ul class="list-none p-0 m-0 ml-3 overflow-hidden hidden" :id="`db-menu-${database.id}`">
22
+ <ul class="list-none p-0 m-0 ml-4 overflow-hidden hidden" :id="`db-menu-${database.id}`">
23
23
  <li>
24
24
  <a v-ripple class="flex align-items-center cursor-pointer p-3 border-round text-700
25
25
  hover:surface-100 transition-duration-150 transition-colors p-ripple"
26
- v-styleclass="{ selector: '@next', enterClass: 'hidden', enterActiveClass: 'slidedown',
27
- leaveToClass: 'hidden', leaveActiveClass: 'slideup' }">
26
+ v-styleclass="{ selector: '@next', enterFromClass: 'hidden', enterActiveClass: 'animate-slidedown',
27
+ leaveToClass: 'hidden', leaveActiveClass: 'animate-slideup' }">
28
28
  <i class="pi pi-table mr-2"></i>
29
29
  <span class="font-medium">{{ database?.tables?.length }} TABLES</span>
30
30
  <i class="pi pi-chevron-down ml-auto"></i>
@@ -44,8 +44,8 @@
44
44
  <li>
45
45
  <a v-ripple class="flex align-items-center cursor-pointer p-3 border-round text-700
46
46
  hover:surface-100 transition-duration-150 transition-colors p-ripple"
47
- v-styleclass="{ selector: '@next', enterClass: 'hidden', enterActiveClass: 'slidedown',
48
- leaveToClass: 'hidden', leaveActiveClass: 'slideup' }">
47
+ v-styleclass="{ selector: '@next', enterFromClass: 'hidden', enterActiveClass: 'animate-slidedown',
48
+ leaveToClass: 'hidden', leaveActiveClass: 'animate-slideup' }">
49
49
  <i class="pi pi-list mr-2"></i>
50
50
  <span class="font-medium">{{ database?.logs?.length }} LOGS</span>
51
51
  <i class="pi pi-chevron-down ml-auto"></i>
@@ -65,8 +65,8 @@
65
65
  <li>
66
66
  <a v-ripple class="flex align-items-center cursor-pointer p-3 border-round text-700
67
67
  hover:surface-100 transition-duration-150 transition-colors p-ripple"
68
- v-styleclass="{ selector: '@next', enterClass: 'hidden', enterActiveClass: 'slidedown',
69
- leaveToClass: 'hidden', leaveActiveClass: 'slideup' }">
68
+ v-styleclass="{ selector: '@next', enterFromClass: 'hidden', enterActiveClass: 'animate-slidedown',
69
+ leaveToClass: 'hidden', leaveActiveClass: 'animate-slideup' }">
70
70
  <i class="pi pi-external-link mr-2"></i>
71
71
  <span class="font-medium">{{ database?.indexes?.length }} INDEXES</span>
72
72
  <i class="pi pi-chevron-down ml-auto"></i>
@@ -89,17 +89,17 @@
89
89
  </div>
90
90
  </div>
91
91
  </div>
92
- <div class="min-h-screen flex flex-column relative flex-auto">
92
+ <div class="min-h-screen flex flex-col relative flex-auto">
93
93
  <div class="flex justify-content-between align-items-center px-5 surface-0 border-bottom-1 surface-border
94
94
  relative lg:hidden" style="height:60px">
95
95
  <div class="flex">
96
- <a v-ripple class="cursor-pointer block text-700 mr-3 p-ripple"
97
- v-styleclass="{ selector: '#app-sidebar-1', enterClass: 'hidden', enterActiveClass: 'fadeinleft', leaveToClass: 'hidden', leaveActiveClass: 'fadeoutleft', hideOnOutsideClick: true }">
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
98
  <i class="pi pi-bars text-4xl"></i>
99
99
  </a>
100
100
  </div>
101
101
  </div>
102
- <div v-if="viewType == 'simple'" class="p-5 flex flex-column flex-auto align-items-center">
102
+ <div v-if="viewType == 'simple'" class="p-8 flex flex-col flex-auto items-center">
103
103
  <router-view></router-view>
104
104
  </div>
105
105
  <template v-if="viewType == 'wide'">
@@ -1,10 +1,10 @@
1
1
  <template>
2
- <div class="surface-card p-4 shadow-2 border-round w-full">
2
+ <div class="bg-surface-0 dark:bg-surface-900 p-6 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-5">
7
- <div class="text-900 text-3xl font-medium mb-3">Databases @ {{ dbApi }}</div>
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>
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-4 flex flex-row" @submit="handleNewDatabaseSubmit">
31
+ <form class="mt-6 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>
@@ -2,49 +2,49 @@
2
2
  <div class="surface-overlay py-3 px-6 shadow-2 flex align-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-6">
6
- <a v-ripple class="cursor-pointer block lg:hidden text-700 p-ripple"
7
- v-styleclass="{ selector: '@next', enterClass: 'hidden', leaveToClass: 'hidden', hideOnOutsideClick: true }">
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 }">
8
8
  <i class="pi pi-bars text-4xl"></i>
9
9
  </a>
10
- <div class="align-items-center flex-grow-1 justify-content-between hidden lg:flex absolute lg:static w-full surface-overlay left-0 top-100 z-1 shadow-2 lg:shadow-none">
11
- <ul class="list-none p-0 m-0 flex lg:align-items-center select-none flex-column lg:flex-row">
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
12
  <li>
13
- <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">
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
14
  <i class="pi pi-home mr-2"></i>
15
15
  <span>Home</span>
16
16
  </a>
17
17
  </li>
18
18
  <li class="lg:relative">
19
- <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"
20
- v-styleclass="{ selector: '@next', enterClass: 'hidden', enterActiveClass: 'scalein', leaveToClass: 'hidden', leaveActiveClass: 'fadeout', hideOnOutsideClick: true }">
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
21
  <i class="pi pi-users mr-2"></i>
22
22
  <span>Customers</span>
23
- <i class="pi pi-angle-down ml-auto lg:ml-3"></i>
23
+ <i class="pi pi-angle-down ml-auto lg:ml-4"></i>
24
24
  </a>
25
- <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">
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
26
  <li>
27
- <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">
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
28
  <i class="pi pi-user-plus mr-2"></i>
29
29
  <span class="font-medium">Add New</span>
30
30
  </a>
31
31
  </li>
32
32
  <li class="relative">
33
- <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"
34
- v-styleclass="{ selector: '@next', enterClass: 'hidden', enterActiveClass: 'scalein', leaveToClass: 'hidden', leaveActiveClass: 'fadeout', hideOnOutsideClick: true }">
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
35
  <i class="pi pi-search mr-2"></i>
36
36
  <span class="font-medium">Search</span>
37
37
  <i class="pi pi-angle-down ml-auto lg:-rotate-90"></i>
38
38
  </a>
39
- <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">
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
40
  <li>
41
- <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">
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
42
  <i class="pi pi-shopping-cart mr-2"></i>
43
43
  <span class="font-medium">Purchases</span>
44
44
  </a>
45
45
  </li>
46
46
  <li class="relative">
47
- <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">
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
48
  <i class="pi pi-comments mr-2"></i>
49
49
  <span class="font-medium">Messages</span>
50
50
  </a>
@@ -54,21 +54,21 @@
54
54
  </ul>
55
55
  </li>
56
56
  <li>
57
- <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">
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
58
  <i class="pi pi-calendar mr-2"></i>
59
59
  <span>Calendar</span>
60
60
  </a>
61
61
  </li>
62
62
  <li>
63
- <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">
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
64
  <i class="pi pi-chart-line mr-2"></i>
65
65
  <span>Stats</span>
66
66
  </a>
67
67
  </li>
68
68
  </ul>
69
- <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">
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
70
  <li>
71
- <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">
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
72
  <i class="pi pi-inbox text-base lg:text-2xl mr-2 lg:mr-0"></i>
73
73
  <span class="block lg:hidden font-medium">Inbox</span>
74
74
  </a>
@@ -82,12 +82,12 @@
82
82
  <span class="block lg:hidden font-medium">Notifications</span>
83
83
  </a>
84
84
  </li>
85
- <li class="border-top-1 surface-border lg:border-top-none">
86
- <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">
87
- <img src="/images/empty-user-photo.svg" class="mr-3 lg:mr-0 border-circle" style="width: 28px; height: 28px"/>
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
88
  <div class="block lg:hidden">
89
- <div class="text-900 font-medium">Josephine Lillard</div>
90
- <span class="text-600 font-medium text-sm">Marketing Specialist</span>
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
91
  </div>
92
92
  </a>
93
93
  </li>
@@ -1,11 +1,11 @@
1
1
  <template>
2
2
  <div class="flex flex-row">
3
3
 
4
- <div class="flex-grow-1 pt-1 pb-1 w-10rem">
4
+ <div class="grow pt-1 pb-1 w-40">
5
5
  <CodeEditor :readOnly="readOnly || !write" :initialData="initialData" @result="result => handleEditResult(result)"
6
6
  :ref="el => editorElementFound(el)" />
7
7
  </div>
8
- <div class="flex flex-column justify-content-end align-items-center">
8
+ <div class="flex flex-col justify-end items-center">
9
9
  <Button v-if="edited" @click="ev => resetObject(ev)"
10
10
  icon="pi pi-refresh" class="p-button-rounded p-button-warning m-1 mr-2 mt-2" />
11
11
  <Button v-if="edited" @click="ev => updateObject(ev)"
@@ -1,11 +1,11 @@
1
1
  <template>
2
- <div class="min-h-screen flex flex-column surface-ground">
2
+ <div class="min-h-screen flex flex-col bg-surface-50 dark:bg-surface-950">
3
3
  <NavBar v-if="!navBarHidden"></NavBar>
4
4
 
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-5 flex flex-column flex-auto align-items-center">
8
+ <div v-if="pageType == 'simple'" class="p-8 flex flex-col flex-auto items-center">
9
9
  <slot></slot>
10
10
  </div>
11
11
  <div v-if="pageType == 'wide'">
@@ -1,49 +1,55 @@
1
1
  <template>
2
- <div class="surface-0 shadow-1 w-full p-2">
2
+ <div class="bg-surface-0 dark:bg-surface-900 shadow-sm w-full p-2">
3
3
  <div class="flex flex-row flex-wrap w-full">
4
- <div class="col-2 text-right p-1">read:</div>
5
- <div class="col-10 p-1">
4
+ <div class="col-span-2 text-right p-1">read:</div>
5
+ <div class="col-span-10 p-1">
6
6
  <CodeEditor :initialCode="path.read"
7
7
  @result="result => handleReadChange(result)" :env="env" :dbSugar="dbViewSugar" />
8
8
  </div>
9
9
  </div>
10
10
  <div class="flex flex-row flex-wrap w-full">
11
- <div class="col-2 text-right p-1">write:</div>
12
- <div class="col-10 p-1">
11
+ <div class="col-span-2 text-right p-1">write:</div>
12
+ <div class="col-span-10 p-1">
13
13
  <CodeEditor :initialCode="path.write"
14
14
  @result="result => handleWriteChange(result)" :env="env" :dbSugar="dbRequestSugar" />
15
15
  </div>
16
16
  </div>
17
17
  <div class="flex flex-row flex-wrap w-full">
18
- <div class="col-2 text-right p-1">remove:</div>
19
- <div class="col-10 p-1">
18
+ <div class="col-span-2 text-right p-1">remove:</div>
19
+ <div class="col-span-10 p-1">
20
20
  <CodeEditor :initialCode="path.remove"
21
21
  @result="result => handleRemoveChange(result)" :env="env" :dbSugar="dbRequestSugar" />
22
22
  </div>
23
23
  </div>
24
24
  <div v-for="field in path.params" class="flex flex-row flex-wrap w-full">
25
- <div class="col-2 text-right p-1">{{ field[0] }} = </div>
26
- <div class="col-10 p-1">
25
+ <div class="col-span-2 text-right p-1">{{ field[0] }} = </div>
26
+ <div class="col-span-10 p-1">
27
27
  <CodeEditor :initialCode="field[1]"
28
28
  @result="result => handleParamChange(field[0], result)" />
29
29
  </div>
30
30
  </div>
31
31
  </div>
32
- <div v-if="false" class="surface-0 shadow-1 w-full">
32
+ <div v-if="false" class="bg-surface-0 dark:bg-surface-900 shadow-sm w-full">
33
33
  <div class="flex flex-row flex-wrap w-full" >
34
- <div class="col-2 text-right">Compiled:</div>
35
- <div class="col-10" v-if="!readCompiled.error" v-html="highlightedObject(readCompiled.example)" />
36
- <div class="col-10 p-error" v-else>{{ readCompiled.error }}</div>
34
+ <div class="col-span-2 text-right">Compiled:</div>
35
+ <div class="col-span-10" v-if="!readCompiled.error" v-html="highlightedObject(readCompiled.example)" />
36
+ <Message v-if="readCompiled.error" severity="error" variant="simple" size="small" class="col-span-10">
37
+ {{ readCompiled.error }}
38
+ </Message>
37
39
  </div>
38
40
  <div class="flex flex-row flex-wrap w-full">
39
- <div class="col-2 text-right"></div>
40
- <div class="col-10" v-if="!writeCompiled.error" v-html="highlightedObject(writeCompiled.example)" />
41
- <div class="col-10 p-error" v-else>{{ writeCompiled.error }}</div>
41
+ <div class="col-span-2 text-right"></div>
42
+ <div class="col-span-10" v-if="!writeCompiled.error" v-html="highlightedObject(writeCompiled.example)" />
43
+ <Message v-if="writeCompiled.error" severity="error" variant="simple" size="small" class="col-span-10">
44
+ {{ writeCompiled.error }}
45
+ </Message>
42
46
  </div>
43
47
  <div class="flex flex-row flex-wrap w-full">
44
- <div class="col-2 text-right"></div>
45
- <div class="col-10" v-if="!removeCompiled.error" v-html="highlightedObject(removeCompiled.example)" />
46
- <div class="col-10 p-error" v-else>{{ removeCompiled.error }}</div>
48
+ <div class="col-span-2 text-right"></div>
49
+ <div class="col-span-10" v-if="!removeCompiled.error" v-html="highlightedObject(removeCompiled.example)" />
50
+ <Message v-if="removeCompiled.error" severity="error" variant="simple" size="small" class="col-span-10">
51
+ {{ removeCompiled.error }}
52
+ </Message>
47
53
  </div>
48
54
  </div>
49
55
  </template>
@@ -55,6 +61,8 @@
55
61
  import { stringify } from "javascript-stringify"
56
62
  import * as Prism from 'prismjs/components/prism-core'
57
63
 
64
+ import Message from "primevue/message"
65
+
58
66
  function highlightedObject(obj) {
59
67
  const code = stringify(obj)
60
68
  return Prism.highlight(code, Prism.languages.js, "js")
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@live-change/db-admin",
3
- "version": "0.9.32",
3
+ "version": "0.9.34",
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",
@@ -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.32",
23
- "@live-change/dao-message": "^0.9.32",
24
- "@live-change/dao-sockjs": "^0.9.32",
25
- "@live-change/dao-vue3": "^0.9.32",
26
- "@live-change/dao-websocket": "^0.9.32",
27
- "@live-change/framework": "^0.9.32",
28
- "@live-change/vue3-components": "^0.9.32",
29
- "@live-change/vue3-ssr": "^0.9.32",
22
+ "@live-change/dao": "^0.9.34",
23
+ "@live-change/dao-message": "^0.9.34",
24
+ "@live-change/dao-sockjs": "^0.9.34",
25
+ "@live-change/dao-vue3": "^0.9.34",
26
+ "@live-change/dao-websocket": "^0.9.34",
27
+ "@live-change/framework": "^0.9.34",
28
+ "@live-change/vue3-components": "^0.9.34",
29
+ "@live-change/vue3-ssr": "^0.9.34",
30
30
  "@vitejs/plugin-vue": "^5.0.5",
31
31
  "@vueuse/core": "^12.3.0",
32
32
  "@vueuse/head": "^2.0.0",
@@ -37,7 +37,7 @@
37
37
  "javascript-stringify": "^2.1.0",
38
38
  "primeflex": "^3.3.1",
39
39
  "primeicons": "^7.0.0",
40
- "primevue": "^3.52.0",
40
+ "primevue": "^4.2.5",
41
41
  "prism-es6": "^1.2.0",
42
42
  "prismjs": "^1.29.0",
43
43
  "rollup-plugin-node-builtins": "^2.1.2",
@@ -53,18 +53,18 @@
53
53
  "vue3-scroll-border": "0.1.6"
54
54
  },
55
55
  "devDependencies": {
56
- "@live-change/codeceptjs-helper": "^0.9.32",
56
+ "@live-change/codeceptjs-helper": "^0.9.34",
57
57
  "@wdio/selenium-standalone-service": "^8.15.0",
58
58
  "codeceptjs": "^3.6.10",
59
59
  "generate-password": "1.7.1",
60
60
  "playwright": "1.49.1",
61
61
  "random-profile-generator": "^2.3.0",
62
62
  "txtgen": "^3.0.7",
63
- "vite": "^5.1.1",
63
+ "vite": "^6.1.0",
64
64
  "webdriverio": "^9.5.1"
65
65
  },
66
66
  "author": "Michał Łaszczewski <michal@laszczewski.pl>",
67
67
  "license": "ISC",
68
68
  "description": "",
69
- "gitHead": "41022fc283020e2da3e82aa27274401052d2379a"
69
+ "gitHead": "e5f22de77fe6a3c0a0e1b91d17593e195aaae3b3"
70
70
  }