@live-change/upload-frontend 0.9.31 → 0.9.33

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 (5) hide show
  1. package/front/src/DropZone.vue +1 -1
  2. package/front/src/NavBar.vue +25 -25
  3. package/front/src/UploadTest.vue +4 -4
  4. package/front/src/UploadView.vue +3 -3
  5. package/package.json +17 -17
package/front/src/DropZone.vue CHANGED
@@ -27,7 +27,7 @@
27
27
  },
28
28
  acceptedClass: {
29
29
  type: String,
30
- default: 'surface-500'
30
+ default: 'bg-surface-500 dark:bg-surface-300'
31
31
  },
32
32
  wrongClass: {
33
33
  type: String,
package/front/src/NavBar.vue CHANGED
@@ -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>
package/front/src/UploadTest.vue CHANGED
@@ -1,7 +1,7 @@
1
1
  <template>
2
- <div class="w-full sm:w-9 md:w-8 lg:w-6 surface-card p-4 shadow-2 border-round">
3
- <div class="text-center mb-5">
4
- <div class="text-900 text-3xl font-medium mb-3">
2
+ <div class="w-full sm:w-9/12 md:w-8/12 lg:w-6/12 bg-surface-0 dark:bg-surface-900 p-6 shadow rounded-border">
3
+ <div class="text-center mb-8">
4
+ <div class="text-surface-900 dark:text-surface-0 text-3xl font-medium mb-4">
5
5
  Upload Test
6
6
  </div>
7
7
  </div>
@@ -10,7 +10,7 @@
10
10
  <Button label="Upload File" icon="pi pi-upload"></Button>
11
11
  </FileInput>
12
12
 
13
- <UploadView v-if="upload" :upload="upload" cancelable class="surface-card shadow-2 border-round p-4 mt-3" />
13
+ <UploadView v-if="upload" :upload="upload" cancelable class="bg-surface-0 dark:bg-surface-900 shadow rounded-border p-6 mt-4" />
14
14
  </div>
15
15
  </template>
16
16
 
package/front/src/UploadView.vue CHANGED
@@ -1,10 +1,10 @@
1
1
  <template>
2
2
  <!-- <pre>{{ JSON.stringify(uploadProgress, null, ' ') }}</pre>-->
3
- <div class="surface-card" v-if="uploadProgress">
3
+ <div class="bg-surface-0 dark:bg-surface-900" v-if="uploadProgress">
4
4
  <ProgressBar :value="uploadProgress.percentage.toFixed()" />
5
5
  <div v-if="uploadProgress.state != 'done'" class="flex mt-2">
6
6
  {{ uploadProgress.state}}
7
- <div class="flex-grow-1">
7
+ <div class="grow">
8
8
  {{ prettyBytes(uploadProgress.transferred) }}
9
9
  /
10
10
  {{ prettyBytes(uploadProgress.length) }}
@@ -13,7 +13,7 @@
13
13
  eta: {{ Duration.fromMillis(uploadProgress.eta).toHuman({ unitDisplay: "short" }) }}
14
14
  </div>
15
15
  </div>
16
- <div v-else class="flex flex-row justify-content-center">
16
+ <div v-else class="flex flex-row justify-center">
17
17
  <div class="mr-1">Uploaded</div>
18
18
  <div v-if="upload.serverUpload" class="mr-1 font-semibold">{{ upload.serverUpload.fileName }}</div>
19
19
  <div>{{ prettyBytes(uploadProgress.length) }}</div>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@live-change/upload-frontend",
3
- "version": "0.9.31",
3
+ "version": "0.9.33",
4
4
  "scripts": {
5
5
  "memDev": "node server/start.js memDev --enableSessions --initScript ./init.js --dbAccess",
6
6
  "localDevInit": "rm tmp.db; lcli localDev --enableSessions --initScript ./init.js",
@@ -22,19 +22,19 @@
22
22
  "type": "module",
23
23
  "dependencies": {
24
24
  "@fortawesome/fontawesome-free": "^6.7.2",
25
- "@live-change/cli": "^0.9.31",
26
- "@live-change/dao": "^0.9.31",
27
- "@live-change/dao-vue3": "^0.9.31",
28
- "@live-change/dao-websocket": "^0.9.31",
29
- "@live-change/framework": "^0.9.31",
30
- "@live-change/password-authentication-service": "^0.9.31",
31
- "@live-change/secret-code-service": "^0.9.31",
32
- "@live-change/secret-link-service": "^0.9.31",
33
- "@live-change/security-frontend": "^0.9.31",
34
- "@live-change/session-service": "^0.9.31",
35
- "@live-change/user-service": "^0.9.31",
36
- "@live-change/vue3-components": "^0.9.31",
37
- "@live-change/vue3-ssr": "^0.9.31",
25
+ "@live-change/cli": "^0.9.33",
26
+ "@live-change/dao": "^0.9.33",
27
+ "@live-change/dao-vue3": "^0.9.33",
28
+ "@live-change/dao-websocket": "^0.9.33",
29
+ "@live-change/framework": "^0.9.33",
30
+ "@live-change/password-authentication-service": "^0.9.33",
31
+ "@live-change/secret-code-service": "^0.9.33",
32
+ "@live-change/secret-link-service": "^0.9.33",
33
+ "@live-change/security-frontend": "^0.9.33",
34
+ "@live-change/session-service": "^0.9.33",
35
+ "@live-change/user-service": "^0.9.33",
36
+ "@live-change/vue3-components": "^0.9.33",
37
+ "@live-change/vue3-ssr": "^0.9.33",
38
38
  "@vueuse/core": "^12.3.0",
39
39
  "codeceptjs-assert": "^0.0.5",
40
40
  "compression": "^1.7.5",
@@ -43,7 +43,7 @@
43
43
  "pretty-bytes": "^6.1.1",
44
44
  "primeflex": "^3.3.1",
45
45
  "primeicons": "^7.0.0",
46
- "primevue": "^3.52.0",
46
+ "primevue": "^4.2.5",
47
47
  "rollup-plugin-node-builtins": "^2.1.2",
48
48
  "rollup-plugin-visualizer": "5.14.0",
49
49
  "serialize-javascript": "^6.0.2",
@@ -53,7 +53,7 @@
53
53
  "vue3-scroll-border": "0.1.6"
54
54
  },
55
55
  "devDependencies": {
56
- "@live-change/codeceptjs-helper": "^0.9.31",
56
+ "@live-change/codeceptjs-helper": "^0.9.33",
57
57
  "codeceptjs": "^3.6.10",
58
58
  "generate-password": "1.7.1",
59
59
  "playwright": "1.49.1",
@@ -64,5 +64,5 @@
64
64
  "author": "Michał Łaszczewski <michal@laszczewski.pl>",
65
65
  "license": "BSD-3-Clause",
66
66
  "description": "",
67
- "gitHead": "4e12be9d3f339492bb9ddc3c6c77581e52d1ba60"
67
+ "gitHead": "c6eaa7764dc12b9489b74386b1227b71d0640e09"
68
68
  }