@live-change/image-frontend 0.9.32 → 0.9.34

package/front/src/EditorTest.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="w-full">
-    <div class="w-full surface-0">
-      <h2 class="p-4">Editor:</h2>
+    <div class="w-full bg-surface-0 dark:bg-surface-900">
+      <h2 class="p-6">Editor:</h2>
       <ImageEditor v-model="image" />
 <!--      :source-image="'[Wc6P55MDs.0@1V6ZJBwyF_1I98X_]'"-->
     </div>

package/front/src/ImageCrop.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="w-full relative surface-400 overflow-hidden" ref="dragArea"
+  <div class="w-full relative bg-surface-400 dark:bg-surface-400 overflow-hidden" ref="dragArea"
        @mousedown="handleEditorMouseDown"
        @mouseup="handleEditorMouseUp"
        @mouseout="handleEditorMouseOut"
@@ -9,13 +9,14 @@
        @touchcancel="handleEditorTouchCancel"
        @touchmove="handleEditorTouchMove"
        @wheel="handleEditorWheel">
-    <div class="p-4 md:p-5 lg:p-6 flex flex-row justify-content-center align-items-center">
+    <div class="p-6 md:p-8 lg:p-12 flex flex-row justify-center items-center">
       <div class="w-full relative"
            :style="`aspect-ratio: ${aspectRatio}; max-width: 40vh;`"
            ref="cropArea">
-        <div class="absolute left-50 top-50 w-0 h-0">
+        <div class="absolute left-1/2 top-1/2">
           <Image :image="sourceImage"
                  :style="{ width: `${rectSize?.x}px`, transform: imageTransform }"
+                 class="max-w-none"
                  @size="handleImageSize" />
         </div>
       </div>

package/front/src/ImageEditor.vue

@@ -9,12 +9,12 @@
                :type="type"
                v-model:ready="cropReady"
                ref="imageCrop" style="max-height: 60vh" />
-    <div class="flex p-3 pb-2 flex-wrap">
-      <div class="flex-grow-1 flex justify-content-center">
+    <div class="flex p-4 pb-2 flex-wrap">
+      <div class="grow flex justify-center">
         <Button type="button" label="Upload" icon="pi pi-upload" class="p-button-primary mb-2"
                 @click="() => state = 'upload' "/>
       </div>
-      <div class="flex flex-grow-1 justify-content-center">
+      <div class="flex grow justify-center">
         <Button type="button" label="Save" icon="pi pi-save" class="p-button-warning ml-2 mb-2"
                 :disabled="!cropReady" @click="saveImage" />
         <Button type="button" label="Remove" icon="pi pi-times" class="p-button-danger ml-2 mb-2"
@@ -22,17 +22,17 @@
       </div>
     </div>
   </div>
-  <div v-else-if="state === 'upload'" class="flex flex-column align-items-center">
-    <DropZone class="flex-grow-1 w-full relative p-4 md:p-5 lg:p-6 pt-2 md:pt-3 lg:pt-4 surface-section"
+  <div v-else-if="state === 'upload'" class="flex flex-col items-center">
+    <DropZone class="grow w-full relative p-6 md:p-8 lg:p-12 pt-2 md:pt-4 lg:pt-6 bg-surface-0 dark:bg-surface-950"
               :accept="acceptList" @input="handleFile">
-      <div class="w-auto flex flex-row align-items-center justify-content-center">
-        <div class="w-full border-dashed border-primary-500 flex align-items-center justify-content-center"
+      <div class="w-auto flex flex-row items-center justify-center">
+        <div class="w-full border-2 border-dashed border-primary-500 flex items-center justify-center"
              :style="`aspect-ratio: ${aspectRatio}; max-width: 50vh`">
           <p class="text-primary text-xl">Drop image here!</p>
         </div>
       </div>
     </DropZone>
-    <div class="w-full flex justify-content-center px-4 pt-3 pb-3 flex-grow-0">
+    <div class="w-full flex justify-center px-6 pt-4 pb-4 grow-0">
       <FileInput :accept="acceptList" @input="handleFile" class="block">
         <Button type="button" label="Upload Image" icon="pi pi-upload" class="p-button-primary" />
       </FileInput>
@@ -191,9 +191,9 @@
       )
       const originalImage = imageData.value.originalImage
       console.log("IM DATA", imageData, originalImage)
-      imageName.value = originalImage.name
-      const splitName = originalImage.name.split('.')
-      const extension = splitName[splitName.length - 1].toLowerCase()
+      imageName.value = originalImage?.name ?? imageData.value.name
+      const extension = (imageData.value.extension ?? originalImage?.extension) ||
+        (originalImage?.name && originalImage.name.split('.').pop())
       switch(extension) {
         case 'jpg':
         case 'jpeg':
@@ -208,7 +208,7 @@
           break
       }
       cropData.value = imageData.value.crop
-      sourceImage.value = originalImage.id
+      sourceImage.value = originalImage?.id ?? imageData.value.id
       console.log("IMAGE", imageName.value, imageType.value)
     })())
   }

package/front/src/ImageInput.vue

@@ -1,20 +1,20 @@
 <template>
   <div>
-    <div v-if="modelValue" class="flex flex-column align-items-center">
+    <div v-if="modelValue" class="flex flex-col items-center">
       <Image :image="modelValue" :key="modelValue"
              :width="definition?.width ?? 400" :height="definition?.height ?? 400"
              style="max-width: 100%" />
-      <div class="w-full mt-2 flex flex-row flex-wrap justify-content-around align-items-center">
+      <div class="w-full mt-2 flex flex-row flex-wrap justify-around items-center">
         <Button @click="cropImage" type="button" label="Crop Image"
-                icon="pi pi-pencil" class="p-button-secondary w-12rem" />
+                icon="pi pi-pencil" class="p-button-secondary w-48" />
         <Button @click="deleteImage" type="button" label="Remove Image"
-                icon="pi pi-trash" class="p-button-danger w-12rem" />
+                icon="pi pi-trash" class="p-button-danger w-48" />
       </div>
     </div>
     <div v-else>
-      <DropZone class="w-full relative p-2 flex justify-content-center align-items-center"
+      <DropZone class="w-full relative p-2 flex justify-center items-center"
                 :accept="acceptList" @input="handleFile">
-        <div class="w-auto border-dashed border-primary-500 flex align-items-center justify-content-center p-2"
+        <div class="w-auto border-dashed border-primary-500 flex items-center justify-center p-2"
              :style="dropZoneStyle">
           <p class="text-primary text-xl">Drop image here!</p>
         </div>

package/front/src/NavBar.vue

@@ -2,49 +2,49 @@
   <div class="surface-overlay py-3 px-6 shadow-2 flex align-items-center justify-content-between
               relative md:sticky top-0 z-5"
        style="min-height: 80px" key="navbar">
-    <img src="/images/logo.svg" alt="Image" height="40" class="mr-0 lg:mr-6">
-    <a v-ripple class="cursor-pointer block lg:hidden text-700 p-ripple"
-       v-styleclass="{ selector: '@next', enterClass: 'hidden', leaveToClass: 'hidden', hideOnOutsideClick: true }">
+    <img src="/images/logo.svg" alt="Image" height="40" class="mr-0 lg:mr-12">
+    <a v-ripple class="cursor-pointer block lg:hidden text-surface-700 dark:text-surface-100 p-ripple"
+       v-styleclass="{ selector: '@next', enterFromClass: 'hidden', leaveToClass: 'hidden', hideOnOutsideClick: true }">
       <i class="pi pi-bars text-4xl"></i>
     </a>
-    <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">
-      <ul class="list-none p-0 m-0 flex lg:align-items-center select-none flex-column lg:flex-row">
+    <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">
+      <ul class="list-none p-0 m-0 flex lg:items-center select-none flex-col lg:flex-row">
         <li>
-          <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">
+          <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">
             <i class="pi pi-home mr-2"></i>
             <span>Home</span>
           </a>
         </li>
         <li class="lg:relative">
-          <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"
-             v-styleclass="{ selector: '@next', enterClass: 'hidden', enterActiveClass: 'scalein', leaveToClass: 'hidden', leaveActiveClass: 'fadeout', hideOnOutsideClick: true }">
+          <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"
+             v-styleclass="{ selector: '@next', enterFromClass: 'hidden', enterActiveClass: 'scalein', leaveToClass: 'hidden', leaveActiveClass: 'fadeout', hideOnOutsideClick: true }">
             <i class="pi pi-users mr-2"></i>
             <span>Customers</span>
-            <i class="pi pi-angle-down ml-auto lg:ml-3"></i>
+            <i class="pi pi-angle-down ml-auto lg:ml-4"></i>
           </a>
-          <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">
+          <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">
             <li>
-              <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">
+              <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">
                 <i class="pi pi-user-plus mr-2"></i>
                 <span class="font-medium">Add New</span>
               </a>
             </li>
             <li class="relative">
-              <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"
-                 v-styleclass="{ selector: '@next', enterClass: 'hidden', enterActiveClass: 'scalein', leaveToClass: 'hidden', leaveActiveClass: 'fadeout', hideOnOutsideClick: true }">
+              <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"
+                 v-styleclass="{ selector: '@next', enterFromClass: 'hidden', enterActiveClass: 'scalein', leaveToClass: 'hidden', leaveActiveClass: 'fadeout', hideOnOutsideClick: true }">
                 <i class="pi pi-search mr-2"></i>
                 <span class="font-medium">Search</span>
                 <i class="pi pi-angle-down ml-auto lg:-rotate-90"></i>
               </a>
-              <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">
+              <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">
                 <li>
-                  <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">
+                  <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">
                     <i class="pi pi-shopping-cart mr-2"></i>
                     <span class="font-medium">Purchases</span>
                   </a>
                 </li>
                 <li class="relative">
-                  <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">
+                  <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">
                     <i class="pi pi-comments mr-2"></i>
                     <span class="font-medium">Messages</span>
                   </a>
@@ -54,21 +54,21 @@
           </ul>
         </li>
         <li>
-          <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">
+          <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">
             <i class="pi pi-calendar mr-2"></i>
             <span>Calendar</span>
           </a>
         </li>
         <li>
-          <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">
+          <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">
             <i class="pi pi-chart-line mr-2"></i>
             <span>Stats</span>
           </a>
         </li>
       </ul>
-      <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">
+      <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">
         <li>
-          <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">
+          <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">
             <i class="pi pi-inbox text-base lg:text-2xl mr-2 lg:mr-0"></i>
             <span class="block lg:hidden font-medium">Inbox</span>
           </a>
@@ -82,12 +82,12 @@
             <span class="block lg:hidden font-medium">Notifications</span>
           </a>
         </li>
-        <li class="border-top-1 surface-border lg:border-top-none">
-          <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">
-            <img src="/images/empty-user-photo.svg" class="mr-3 lg:mr-0 border-circle" style="width: 28px; height: 28px"/>
+        <li class="border-t border-surface lg:border-t-0">
+          <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">
+            <img src="/images/empty-user-photo.svg" class="mr-4 lg:mr-0 rounded-full" style="width: 28px; height: 28px"/>
             <div class="block lg:hidden">
-              <div class="text-900 font-medium">Josephine Lillard</div>
-              <span class="text-600 font-medium text-sm">Marketing Specialist</span>
+              <div class="text-surface-900 dark:text-surface-0 font-medium">Josephine Lillard</div>
+              <span class="text-surface-600 dark:text-surface-200 font-medium text-sm">Marketing Specialist</span>
             </div>
           </a>
         </li>

package/front/src/UploadTest.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="w-full sm:w-9 md:w-8 lg:w-6 surface-card p-4 shadow-2 border-round">
-    <div class="text-center mb-5">
-      <div class="text-900 text-3xl font-medium mb-3">
+  <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">
+    <div class="text-center mb-8">
+      <div class="text-surface-900 dark:text-surface-0 text-3xl font-medium mb-4">
         Upload Test
       </div>
     </div>
@@ -17,7 +17,7 @@
       <h2>Image: {{ image }}</h2>
       <Image :image="image" width="200" height="200" />
     </div>
-<!--    <UploadView v-if="upload" :upload="upload" cancelable class="surface-card shadow-2 border-round p-4 mt-3" />-->
+<!--    <UploadView v-if="upload" :upload="upload" cancelable class="bg-surface-0 dark:bg-surface-900 shadow rounded-border p-6 mt-4" />-->
   </div>
 </template>
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@live-change/image-frontend",
-  "version": "0.9.32",
+  "version": "0.9.34",
   "scripts": {
     "memDev": "node server/start.js memDev --enableSessions --initScript ./init.js --dbAccess",
     "localDevInit": "rm tmp.db; lcli localDev --enableSessions --initScript ./init.js",
@@ -22,15 +22,15 @@
   "type": "module",
   "dependencies": {
     "@fortawesome/fontawesome-free": "^6.7.2",
-    "@live-change/cli": "^0.9.32",
-    "@live-change/dao": "^0.9.32",
-    "@live-change/dao-vue3": "^0.9.32",
-    "@live-change/dao-websocket": "^0.9.32",
-    "@live-change/framework": "^0.9.32",
-    "@live-change/image-service": "^0.9.32",
-    "@live-change/session-service": "^0.9.32",
-    "@live-change/vue3-components": "^0.9.32",
-    "@live-change/vue3-ssr": "^0.9.32",
+    "@live-change/cli": "^0.9.34",
+    "@live-change/dao": "^0.9.34",
+    "@live-change/dao-vue3": "^0.9.34",
+    "@live-change/dao-websocket": "^0.9.34",
+    "@live-change/framework": "^0.9.34",
+    "@live-change/image-service": "^0.9.34",
+    "@live-change/session-service": "^0.9.34",
+    "@live-change/vue3-components": "^0.9.34",
+    "@live-change/vue3-ssr": "^0.9.34",
     "@vueuse/core": "^12.3.0",
     "codeceptjs-assert": "^0.0.5",
     "compression": "^1.7.5",
@@ -40,7 +40,7 @@
     "pretty-bytes": "^6.1.1",
     "primeflex": "^3.3.1",
     "primeicons": "^7.0.0",
-    "primevue": "^3.52.0",
+    "primevue": "^4.2.5",
     "rollup-plugin-node-builtins": "^2.1.2",
     "rollup-plugin-visualizer": "5.14.0",
     "serialize-javascript": "^6.0.2",
@@ -50,7 +50,7 @@
     "vue3-scroll-border": "0.1.6"
   },
   "devDependencies": {
-    "@live-change/codeceptjs-helper": "^0.9.32",
+    "@live-change/codeceptjs-helper": "^0.9.34",
     "codeceptjs": "^3.6.10",
     "generate-password": "1.7.1",
     "playwright": "1.49.1",
@@ -61,5 +61,5 @@
   "author": "Michał Łaszczewski <michal@laszczewski.pl>",
   "license": "BSD-3-Clause",
   "description": "",
-  "gitHead": "41022fc283020e2da3e82aa27274401052d2379a"
+  "gitHead": "e5f22de77fe6a3c0a0e1b91d17593e195aaae3b3"
 }