@live-change/image-frontend 0.2.7 → 0.2.8

package/front/src/ImageEditor.vue

@@ -22,7 +22,7 @@
       </div>
     </div>
   </div>
-  <div v-else>
+  <div v-else-if="state == 'upload'">
     <DropZone class="w-full relative p-6 md:p-8 lg:p-8" :accept="acceptList" @input="handleFile">
       <div class="w-auto border-dashed border-primary-500 flex align-items-center justify-content-center"
                 :style="`aspect-ratio: ${aspectRatio}`">
@@ -37,6 +37,9 @@
       </div>
     </div>
   </div>
+  <div v-else>
+    <ProgressSpinner />
+  </div>
 </template>
 
 <script setup>
@@ -49,6 +52,7 @@
   import { FileInput, DropZone } from '@live-change/upload-frontend'
   import { uploadImage } from "./imageUploads.js"
   import Button from "primevue/button"
+  import ProgressSpinner from "primevue/progressspinner"
 
   import ImageCrop from "./ImageCrop.vue"
 
@@ -146,6 +150,7 @@
       const { crop, canvas } = await imageCrop.value.crop()
       console.log("CROP RESULT", crop, canvas)
 
+      state.value = 'uploading'
       upload.value = uploadImage(props.purpose, { canvas },
         { preparedPreview: true, appContext, generateId : true, crop,  })
       console.log("START PREPARE!")
@@ -163,6 +168,7 @@
       sourceUpload.value = uploadImage(props.purpose, { file },
         { preparedPreview: true, appContext, generateId : true, saveCanvas: true })
       console.log("START PREPARE!")
+      state.value = 'uploading'
       await sourceUpload.value.prepare()
       cropReady.value = false
       sourceImage.value = sourceUpload.value.id

package/front/src/ImageInput.vue

@@ -0,0 +1,123 @@
+<template>
+  <div>
+    <div v-if="modelValue">
+      <Image :image="modelValue" :key="modelValue"
+             :width="definition?.width ?? 400" :height="definition?.height ?? 400"
+             style="max-width: 100%" />
+      <div class="p-buttonset">
+        <Button @click="cropImage" type="button" label="Crop Image"
+                icon="pi pi-pencil" class="p-button-secondary" />
+        <Button @click="deleteImage" type="button" label="Remove Image"
+                icon="pi pi-trash" class="p-button-danger" />
+      </div>
+    </div>
+    <div v-else>
+      <DropZone class="w-full md:w-4 lg:w-1 relative p-2" :accept="acceptList" @input="handleFile">
+        <div class="w-auto border-dashed border-primary-500 flex align-items-center justify-content-center p-2"
+             :style="dropZoneStyle">
+          <p class="text-primary text-xl">Drop image here!</p>
+        </div>
+      </DropZone>
+      <FileInput :accept="acceptList" @input="handleFile" class="block">
+        <Button type="button" label="Upload Image" icon="pi pi-upload" class="p-button-primary" />
+      </FileInput>
+    </div>
+
+    <Dialog v-model:visible="editorVisible" header="Crop Image">
+      <ImageEditor :modelValue="modelValue" @update:modelValue="updateImage"
+                   :width="definition?.width ?? 400" :height="definition?.height ?? 400"
+                   :uploadedFile="uploadedFile" :purpose="definition?.purpose"
+                   @close="closeEditor" />
+    </Dialog>
+  </div>
+</template>
+
+<script setup>
+  import { FileInput, DropZone } from '@live-change/upload-frontend'
+  import Button from "primevue/button"
+  import Dialog from "primevue/dialog"
+  import Image from "./Image.vue"
+  import ImageEditor from "./ImageEditor.vue"
+
+  const props = defineProps({
+    modelValue: { // image
+      type: String,
+      default: null
+    },
+    definition: {
+      type: Object,
+      default: () => {}
+    }
+  })
+  const emit = defineEmits(['update:modelValue'])
+
+  import { computed, ref } from 'vue'
+  import { toRefs } from '@vueuse/core'
+
+  const { modelValue, definition } = toRefs(props)
+
+  const acceptList = 'image/jpeg, image/png, image/webp, .jpg, .png, .jpeg, .webp'
+  const aspectRatio = computed(() => {
+    if(definition.value?.aspectRatio) {
+      return definition.value.aspectRatio
+    } else if(definition.value?.width && definition?.value.height) {
+      return definition.value.width / definition.value.height
+    } else {
+      return 1
+    }
+  })
+
+  const dropZoneStyle = computed(() => ({
+    'aspect-ratio': `${aspectRatio.value}`,
+    'max-width': `${definition.value?.width ?? 250}px`,
+    'max-height': `${definition.value?.height ?? 250}px`
+  }))
+
+  import { useToast } from 'primevue/usetoast'
+  const toast = useToast()
+  import { useConfirm } from 'primevue/useconfirm'
+  const confirm = useConfirm()
+
+  const editorVisible = ref(false)
+  const uploadedFile = ref(null)
+
+  function handleFile(file) {
+    console.log("HANDLE FILE", file)
+    if(file) {
+      uploadedFile.value = file
+      editorVisible.value = true
+    }
+  }
+  function updateImage(value) {
+    emit('update:modelValue', value)
+  }
+  function closeEditor() {
+    editorVisible.value = false
+    uploadedFile.value = null
+  }
+  function cropImage() {
+    uploadedFile.value = null
+    editorVisible.value = true
+  }
+  function deleteImage() {
+    console.log("CONFIRM", confirm)
+    confirm.require({
+      target: event.currentTarget,
+      message: `Are you sure you want to delete this image?`,
+      icon: 'pi pi-info-circle',
+      acceptClass: 'p-button-danger',
+      accept: async () => {
+        emit('update:modelValue', null)
+        toast.add({ severity: 'info', summary: 'Image removed', life: 1500 })
+      },
+      reject: () => {
+        toast.add({ severity:'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 })
+      }
+    })
+  }
+
+</script>
+
+<style scoped>
+
+</style>

package/front/src/InputTest.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="w-full card">
+    <ImageInput v-model="image" />
+  </div>
+  <p>{{ image ?? 'none'}}</p>
+</template>
+
+<script setup>
+
+  import ImageInput from "./ImageInput.vue";
+
+  import { ref } from 'vue'
+
+  const image = ref()
+
+</script>
+
+<style scoped>
+
+</style>

package/front/src/router.js

@@ -21,6 +21,12 @@ export function wysiwygRoutes(config = {}) {
       props: {
       }
     }),
+    route({
+      name: 'input:test', path: prefix + 'input', meta: { },
+      component: () => import("./InputTest.vue"),
+      props: {
+      }
+    }),
 
     ...dbAdminRoutes({ prefix: '/_db', route: r => ({ ...r, meta: { ...r.meta, raw: true }}) })
   ]

package/index.js

@@ -1,7 +1,13 @@
 import ImageUpload from "./front/src/ImageUpload.js"
 import ImageEditor from "./front/src/ImageEditor.vue"
+import ImageInput from "./front/src/ImageInput.vue"
 import Image from "./front/src/Image.vue"
 import {uploadImage, imageUploads} from "./front/src/imageUploads.js";
 import preProcessImageFile from "./front/src/preprocessImageFile.js";
 
-export { ImageUpload, Image, uploadImage, preProcessImageFile, imageUploads, ImageEditor }
+export { ImageUpload, Image, uploadImage, preProcessImageFile, imageUploads, ImageEditor, ImageInput }
+
+import { inputConfig } from "@live-change/frontend-auto-form"
+inputConfig.types.Image = inputConfig.inputs.image = inputConfig.input(
+  () => import('./front/src/ImageInput.vue'))
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@live-change/image-frontend",
-  "version": "0.2.7",
+  "version": "0.2.8",
   "scripts": {
     "memDev": "lcli memDev --enableSessions --initScript ./init.js --dbAccess",
     "localDevInit": "rm tmp.db; lcli localDev --enableSessions --initScript ./init.js",
@@ -28,8 +28,8 @@
     "@live-change/framework": "0.7.4",
     "@live-change/image-service": "0.3.2",
     "@live-change/session-service": "0.3.2",
-    "@live-change/vue3-components": "0.2.15",
-    "@live-change/vue3-ssr": "0.2.15",
+    "@live-change/vue3-components": "0.2.16",
+    "@live-change/vue3-ssr": "0.2.16",
     "@tiptap/extension-highlight": "^2.0.0-beta.33",
     "@tiptap/extension-underline": "2.0.0-beta.23",
     "@tiptap/starter-kit": "^2.0.0-beta.185",
@@ -66,5 +66,5 @@
   "author": "",
   "license": "BSD-3-Clause",
   "description": "",
-  "gitHead": "ef577fb31dd857acb491bd7114e611638283fe6f"
+  "gitHead": "72bd46680370e7804b168fec5dde28de205487e0"
 }