@mixd-id/web-scaffold 0.2.240705 → 0.2.250801009

package/src/components/Image.vue

@@ -5,7 +5,11 @@
        @mousedown="onMouseDown"
        :style="computedStyle">
 
-		<slot v-if="status === 0" name="empty" :instance="this"></slot>
+		<slot v-if="status === 0" name="empty" :instance="this">
+      <div :class="$style.loading">
+        <svg width="50%" height="50%" class="fill-text-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M447.1 32h-384C28.64 32-.0091 60.65-.0091 96v320c0 35.35 28.65 64 63.1 64h384c35.35 0 64-28.65 64-64V96C511.1 60.65 483.3 32 447.1 32zM111.1 96c26.51 0 48 21.49 48 48S138.5 192 111.1 192s-48-21.49-48-48S85.48 96 111.1 96zM446.1 407.6C443.3 412.8 437.9 416 432 416H82.01c-6.021 0-11.53-3.379-14.26-8.75c-2.73-5.367-2.215-11.81 1.334-16.68l70-96C142.1 290.4 146.9 288 152 288s9.916 2.441 12.93 6.574l32.46 44.51l93.3-139.1C293.7 194.7 298.7 192 304 192s10.35 2.672 13.31 7.125l128 192C448.6 396 448.9 402.3 446.1 407.6z"/></svg>
+      </div>
+    </slot>
 
     <slot v-else-if="status === 1" name="loading">
       <div :class="$style.loading + (spinnerType === 'shimmer' ? ' ' + $style.shimmer : '')">
@@ -14,9 +18,13 @@
     </slot>
 
     <div v-else-if="status === 2 && actualSrc.indexOf('<svg') >= 0" v-html="actualSrc"></div>
-    <img v-else-if="status === 2" :class="computedItemClass" :src="actualSrc" ref="img" :alt="alt" />
+    <img v-else-if="status === 2" :class="computedItemClass" :src="actualSrc" ref="img" :alt="alt" @error="status = 3" />
 
-		<slot v-else-if="status === 3" name="error" :instance="this"></slot>
+		<slot v-else-if="status === 3" name="error" :instance="this">
+      <div :class="$style.loading">
+        <svg width="50%" height="50%" class="fill-text-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M630.8 469.1l-55.95-43.85C575.3 422.2 575.1 419.2 575.1 416l.0034-320c0-35.35-28.65-64-64-64H127.1C113.6 32 100.4 36.98 89.78 45.06L38.81 5.113C28.34-3.058 13.31-1.246 5.109 9.192C-3.063 19.63-1.235 34.72 9.187 42.89L601.2 506.9C605.6 510.3 610.8 512 615.1 512c7.125 0 14.17-3.156 18.91-9.188C643.1 492.4 641.2 477.3 630.8 469.1zM223.1 149.6l-64.29-50.39C164.2 97.15 169.9 96 175.1 96c26.51 0 48 21.49 48 48C223.1 145.9 223.4 147.7 223.1 149.6zM331.2 234.3l23.45-35.18C357.7 194.7 362.7 192 368 192s10.35 2.672 13.31 7.125l103.9 155.9L331.2 234.3zM145.1 416c-6.021 0-11.53-3.379-14.26-8.75c-2.73-5.367-2.215-11.81 1.334-16.68l70-96C206.1 290.4 210.9 288 216 288s9.916 2.441 12.93 6.574l32.46 44.51l16.43-24.65L63.99 146.8L63.99 416c0 35.35 28.65 64 64 64h361.1l-81.66-64H145.1z"/></svg>
+      </div>
+    </slot>
 
 		<input v-if="Boolean(editable)" class="hidden" type="file" accept="image/*" ref="file" @change="onChange"/>
 
@@ -41,7 +49,7 @@ export default{
 
 	mixins: [ componentMixin ],
 
-	emits: [ 'change' ],
+	emits: [ 'click', 'change' ],
 
   props:{
 
@@ -150,116 +158,63 @@ export default{
 		},
 
 		async loadSrc(){
+			if(!this.isVisible) return
 
-			if(!this.isVisible){
-				return
-			}
+      const setSrc = (src) => {
+        let reader
 
-			if(typeof this.src === 'string') {
+        if(typeof src === 'string') {
+          if(src.indexOf('://') < 0 && src.substring(0, 1) !== '/' &&
+              src.indexOf('<svg') < 0 && src.indexOf(';base64') < 0){
+            src = ((import.meta.env.VITE_IMAGE_HOST ?? '') + '/' + src)
+          }
 
-				if (this.src.startsWith('data:image')) {
-					this.actualSrc = this.src
-					this.status = 2
-				}
-        else if(this.src.indexOf('<svg') >= 0){
-          this.actualSrc = this.src
+          this.actualSrc = src
           this.status = 2
         }
-				else{
-					const src = {}
-
-					if(typeof this.src === 'string'){
-						this.src.split(',').forEach((text) => {
-							let [ prefix, ...args ] = text.split(':')
-
-							if(args.length > 0 && args[0].substring(0, 2) !== '//'){
-								src[prefix.trim()] = args.join(':').trim()
-							}
-							else{
-								src['all'] = text
-							}
-						})
-					}
-
-					let imgSrc
-					for(const b in screens){
-						if(document.documentElement.clientWidth > b && screens[b] in src){
-							imgSrc = src[screens[b]]
-						}
-					}
-
-					if(imgSrc !== this.actualSrc){
-						var img = new Image()
-						img.addEventListener('load', () => {
-							if(img.getAttribute('data-src') !== this.src) return
-							this.status = 2
-							this.actualSrc = img.src
-						})
-						img.addEventListener('error', (err) => {
-							if(img.getAttribute('data-src') !== this.src) return
-							this.status = 3
-							this.actualSrc = this.defaultSrc
-						})
-						img.src = imgSrc
-						img.setAttribute('data-src', this.src)
-						this.status = 1
-					}
-				}
-			}
-			else if(Array.isArray(this.src)){
-
-				const src = {}
-				src['all'] = this.src[0]
-				if(this.src[1]){
-					src['md'] = this.src[1]
-				}
-
-				let imgSrc
-				for(const b in screens){
-					if(document.documentElement.clientWidth > b && screens[b] in src){
-						imgSrc = src[screens[b]]
-					}
-				}
-
-				if(imgSrc !== this.actualSrc){
-					var img = new Image()
-					img.addEventListener('load', () => {
-						this.status = 2
-						this.actualSrc = img.src
-					})
-					img.addEventListener('error', (err) => {
-						this.status = 3
-						this.actualSrc = this.defaultSrc
-					})
-					img.src = imgSrc
-					this.status = 1
-				}
-			}
-			else if(this.src instanceof File){
-				var reader = new FileReader();
 
-				reader.addEventListener('load', () => {
-					this.status = 2
-					this.actualSrc = reader.result
-				}, false)
+        else if(src instanceof File){
+          reader = new FileReader();
 
-				reader.addEventListener('error', () => {
-					this.status = 3
-					this.actualSrc = this.defaultSrc
-				})
+          reader.addEventListener('load', () => {
+            this.status = 2
+            this.actualSrc = reader.result
+          }, false)
 
-				reader.readAsDataURL(this.src)
-				this.status = 1
-			}
+          reader.addEventListener('error', () => {
+            this.status = 3
+            this.actualSrc = this.defaultSrc
+          })
+
+          reader.readAsDataURL(src)
+          this.status = 1
+        }
+      }
+
+      if(Array.isArray(this.src)){
+        let imgSrc
+        for(let i = this.$device.mediaIndex ; i >= 0 ; i--){
+          if(this.src[i]){
+            imgSrc = this.src[i]
+            break
+          }
+        }
+        setSrc(imgSrc)
+      }
+      else if(this.src){
+        setSrc(this.src)
+      }
       else{
         this.status = 0
       }
 		},
 
-		onClick(){
+		onClick(e){
 			if(!this.moved && this.target){
 				this.$router.push(this.target)
 			}
+
+      this.$emit('click', e, this)
 		},
 
 		onMouseDown(){
@@ -274,9 +229,12 @@ export default{
 
 	watch:{
 
-		src(to, from){
-      this.loadSrc()
-		},
+		src: {
+      handler(){
+        this.loadSrc()
+      },
+      deep: true
+    },
 
 	}
 }
@@ -286,15 +244,11 @@ export default{
 <style module>
 
 .comp{
-	@apply relative overflow-hidden;
+	@apply relative flex items-center justify-center overflow-hidden;
 }
 
 .img{
-	@apply w-full h-full;
-}
-
-.editArea{
-	@apply absolute top-0 left-0 right-0 bottom-0;
+	@apply w-full h-full object-contain;
 }
 
 .loading{
@@ -303,7 +257,7 @@ export default{
 }
 
 .shimmer{
-	@apply bg-text-200 animate-pulse;
+	@apply bg-text-300 animate-pulse;
 }
 
 </style>

package/src/components/ImagePreview.vue

@@ -3,7 +3,7 @@
 		<div class="flex-1 flex flex-col gap-3">
 			<div class="flex flex-row gap-4 justify-end items-center p-3 pr-6">
         <slot name="moreButtons"></slot>
-				<a v-if="download" :href="imageUrl" target="_blank" download>
+				<a v-if="canDownload" :href="imageUrl" target="_blank" download>
           <svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" class="fill-text" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M480 352h-133.5l-45.25 45.25C289.2 409.3 273.1 416 256 416s-33.16-6.656-45.25-18.75L165.5 352H32c-17.67 0-32 14.33-32 32v96c0 17.67 14.33 32 32 32h448c17.67 0 32-14.33 32-32v-96C512 366.3 497.7 352 480 352zM432 456c-13.2 0-24-10.8-24-24c0-13.2 10.8-24 24-24s24 10.8 24 24C456 445.2 445.2 456 432 456zM233.4 374.6C239.6 380.9 247.8 384 256 384s16.38-3.125 22.62-9.375l128-128c12.49-12.5 12.49-32.75 0-45.25c-12.5-12.5-32.76-12.5-45.25 0L288 274.8V32c0-17.67-14.33-32-32-32C238.3 0 224 14.33 224 32v242.8L150.6 201.4c-12.49-12.5-32.75-12.5-45.25 0c-12.49 12.5-12.49 32.75 0 45.25L233.4 374.6z"/></svg>
         </a>
 				<button @click="close">
@@ -24,7 +24,7 @@ export default{
 	props: {
 
 		download: {
-			type: Boolean,
+			type: [ Boolean, String ],
 			default: false
 		},
 
@@ -32,8 +32,17 @@ export default{
 
 	},
 
+  computed: {
+
+    canDownload(){
+      return this.download || this.downloadable
+    }
+
+  },
+
 	data(){
 		return {
+      downloadable: false,
 			isOpen: false,
 			imageUrl: null
 		}
@@ -41,9 +50,10 @@ export default{
 
 	methods: {
 
-		open(imageUrl){
+		open(imageUrl, opt = {}){
 			this.imageUrl = imageUrl
 			this.isOpen = true
+      this.downloadable = opt.download || this.downloadable
 			window.addEventListener('keyup', this.onKeyUp)
 		},
 
@@ -75,7 +85,7 @@ export default{
 
 .previewModal{
 	@apply !w-screen !h-screen !bg-base-300 !rounded-none top-0;
-	z-index: 21 !important;
+	z-index: 121 !important;
 	max-width: unset !important;
 	max-height: unset !important;
 }

package/src/components/ImageUploader.vue

@@ -0,0 +1,114 @@
+<template>
+  <button ref="btn"
+          type="button"
+          class="text-primary text-sm"
+          @click="$refs.contextMenu.open($refs.btn)">
+    <slot>Upload</slot>
+  </button>
+
+  <input type="file" class="hidden" ref="file" accept="image/*" @change="onFileUpload" />
+
+  <ContextMenu ref="contextMenu" position="bottom-right">
+    <div class="flex flex-col min-w-[200px]">
+
+      <button class="menu-item w-full p-3 text-left flex flex-row"
+              @click="$refs.file.click()">
+        Upload Image File...
+      </button>
+
+      <button class="menu-item w-full p-3 text-left flex flex-row"
+              @click="$refs.modal.open()">
+        SVG Text
+      </button>
+    </div>
+  </ContextMenu>
+
+  <Modal ref="modal" width="480" height="480">
+    <template v-slot:head>
+      <div class="relative p-5">
+        <h3>Add SVG Text</h3>
+        <div class="absolute top-0 right-0 p-2">
+          <button type="button" class="p-2" @click="$refs.modal.close()">
+            <svg width="24" height="24" viewBox="0 0 24 24" class="fill-text-300 hover:fill-red-500" xmlns="http://www.w3.org/2000/svg">
+              <path d="M6.53034 5.46965C6.23745 5.17676 5.76257 5.17676 5.46968 5.46965C5.17679 5.76255 5.17679 6.23742 5.46968 6.53031L10.9393 12L5.46967 17.4697C5.17678 17.7626 5.17678 18.2374 5.46967 18.5303C5.76256 18.8232 6.23744 18.8232 6.53033 18.5303L12 13.0606L17.4697 18.5303C17.7626 18.8232 18.2375 18.8232 18.5303 18.5303C18.8232 18.2374 18.8232 17.7626 18.5303 17.4697L13.0607 12L18.5303 6.53032C18.8232 6.23743 18.8232 5.76256 18.5303 5.46966C18.2374 5.17677 17.7626 5.17677 17.4697 5.46966L12 10.9393L6.53034 5.46965Z"/>
+            </svg>
+          </button>
+        </div>
+      </div>
+    </template>
+    <template v-slot:foot="{ context }">
+      <div class="p-5">
+        <Button class="w-[90px]"
+                :state="`${context.value}`.length > 0 ? 1 : -1"
+                @click="addSvg(context)">
+          Add
+        </Button>
+      </div>
+    </template>
+
+    <template #default="{ context }">
+      <div class="flex-1 p-5 flex flex-col gap-3">
+
+        <div>
+          <SvgEditor v-model="context.value" class="" />
+        </div>
+
+      </div>
+    </template>
+  </Modal>
+</template>
+
+<script setup>
+
+import {useTemplateRef} from "vue";
+import ContextMenu from "./ContextMenu.vue";
+import SvgEditor from "./SvgEditor.vue";
+
+const { uploadFn } = defineProps({
+  uploadFn: Function
+})
+
+const file = useTemplateRef('file')
+const modal = useTemplateRef('modal')
+const emits = defineEmits([ 'change' ])
+
+function onFileUpload(e){
+  if(typeof uploadFn === 'function'){
+    uploadFn(e.target.files[0])
+      .then(res => {
+        emits('change', res.name)
+        file.value.value = null
+      })
+      .catch(e => {
+        console.error(e)
+      })
+  }
+  else{
+    emits('change', e.target.files[0])
+    file.value.value = null
+  }
+}
+
+function addSvg(obj){
+  emits('change', obj.value)
+  modal.value.close()
+}
+
+function edit(value){
+  if(`${value}`.indexOf('<svg') >= 0){
+    modal.value.open({ value })
+  }
+}
+
+defineExpose({
+  edit
+})
+
+</script>
+
+<style module>
+
+.comp {
+}
+
+</style>

package/src/components/ImportModal.vue

@@ -26,7 +26,7 @@
 		</template>
 
 		<div class="flex-1 p-5 flex flex-col items-center justify-center" v-if="step === 1">
-			<button type="button" @click="$refs.uploader.click()" class="rounded-3xl w-[160px] bg-base-300 px-6 aspect-square flex items-center justify-center text-center border-dashed border-[3px] border-text-100">
+			<button type="button" @click="$refs.uploader.click()" class="rounded-3xl w-[160px] bg-base-300 px-6 aspect-square flex items-center justify-center text-center border-dashed border-[3px] border-border-100">
 				<div class="text-xl" v-if="!isLoading">
 					Click to <br />
 					<span class="text-primary text-lg">Upload</span>
@@ -174,7 +174,7 @@ export default{
 
 			this.isLoading = true
 			axios({
-				url: import.meta.env.VITE_API_HOST + this.urlAnalyse,
+				url: this.urlAnalyse,
 				method: 'POST',
 				data
 			})
@@ -224,7 +224,7 @@ export default{
 
 			this.isLoading = true
 			axios({
-				url: import.meta.env.VITE_API_HOST + this.urlImport,
+				url: this.urlImport,
 				method: 'POST',
 				data: this.importData
 			})

package/src/components/Link.vue

@@ -1,29 +1,85 @@
 <template>
-  <router-link :to="target">
+  <router-link v-if="mode === 'route' && (items ?? []).length <= 0" :to="route">
     {{ text }}
   </router-link>
+  <router-link v-else-if="mode === 'route' && (items ?? []).length > 0" :to="route">
+    <component v-for="(item, idx) in items"
+               :is="item.type"
+               :key="idx"
+               :="item" />
+  </router-link>
+
+  <a v-else-if="mode === 'link' && (items ?? []).length <= 0" :href="link.href" :target="link.target">
+    {{ text }}
+  </a>
+  <a v-else-if="mode === 'link' && (items ?? []).length > 0" :href="link.href" :target="link.target">
+    <component v-for="(item, idx) in items"
+               :is="item.type"
+               :key="idx"
+               :="item" />
+  </a>
+
+  <a v-else-if="mode === 'download' && (items ?? []).length <= 0"
+     :download="download.originalName ?? download.name"
+     :href="download.url">
+    {{ text }}
+  </a>
+  <a v-else-if="mode === 'download' && (items ?? []).length > 0"
+     :download="download.originalName ?? download.name"
+     :href="download.url">
+    <component v-for="(item, idx) in items"
+               :is="item.type"
+               :key="idx"
+               :="item" />
+  </a>
+
 </template>
 
 <script>
 
-import { componentMixin } from "../mixin/component";
+import {componentMixin} from "../mixin/component";
+import {applyDatasourceReplacer} from "../utils/helpers";
 
 export default{
 
   mixins: [ componentMixin ],
 
   props: {
+    text: String,
+    items: Array,
 
-    target: String,
-
-    text: String
-
+    mode: String,
+    route: Object,
+    link: Object,
+    download: Object,
   },
 
   computed: {
 
+    isExternalLink(){
+      return (this.href ?? '').indexOf('://') > -1;
+    },
+
+    to(){
+      const obj = {}
+
+      if(this.route.hash)
+        obj.hash = '#' + (this.editMode === 1 ? this.route.hash :
+            applyDatasourceReplacer(this.route.hash, this.data))
 
+      if(this.route.path)
+        obj.path = this.editMode === 1 ? this.route.path :
+            applyDatasourceReplacer(this.route.path, this.data)
+
+      return obj
+    }
+
+  },
 
+  provide(){
+    return {
+      parentData: this.data
+    }
   }
 
 }