@mixd-id/web-scaffold 0.1.240411014 → 0.1.240411016

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mixd-id/web-scaffold",
   "private": false,
-  "version": "0.1.240411014",
+  "version": "0.1.240411016",
   "scripts": {
     "dev": "vite serve",
     "build": "vite build",

package/src/components/Article.vue

@@ -1,19 +1,17 @@
 <template>
-	<div :class="$style.comp" :style="computedStyle">
-    <article ref="article" :class="$style.article"
-             v-html="computedHtml"
-             :contenteditable="editMode === 1"
-             @input="onInput"
-             @click="onClick"
-             @paste="onPaste"></article>
-  </div>
+  <article ref="article" :class="$style.article"
+           v-html="computedHtml"
+           :style="computedStyle"
+           :contenteditable="editMode === 1"
+           @input="onInput"
+           @click="onClick"
+           @paste="onPaste"></article>
 </template>
 
 <script>
 
 import { componentMixin } from '../mixin/component';
 import {getSelection, restoreSelection, saveSelection} from "../utils/selection";
-import {applyDatasourceReplacer} from "../utils/helpers.mjs";
 
 export default{
 
@@ -331,9 +329,7 @@ export default{
   computed: {
 
     computedHtml(){
-      if(this.editMode && this.editMode === 1)
-        return this.htmlText
-      return applyDatasourceReplacer(this.htmlText, this.pageData)
+      return this.htmlText
     },
 
   },
@@ -350,11 +346,8 @@ export default{
 
 <style module>
 
-.comp{
-  @apply relative;
-}
-
 .article{
+  @apply relative;
 }
 .article *{
 }

package/src/components/Carousel.vue

@@ -299,7 +299,6 @@ export default{
 <style module>
 
 .comp{
-	white-space: nowrap;
 	overflow: hidden;
 	position: relative;
 }
@@ -317,7 +316,6 @@ export default{
 }
 
 .inner{
-	white-space: nowrap;
 	will-change: transform;
 	@apply flex flex-row items-stretch;
 }

package/src/components/CodeEditor.vue

@@ -1,10 +1,9 @@
 <template>
 	<div :class="$style.comp">
-		<div class="flex flex-row bg-text-50 p-2">
-			<div class="flex-1">&nbsp;</div>
-		</div>
-		<code v-html="modelValue" contenteditable="true" spellcheck="false"
-					@paste="onPaste"></code>
+		<code contenteditable="true" spellcheck="false"
+					@paste="onPaste">
+      {{ modelValue }}
+    </code>
 	</div>
 </template>
 
@@ -20,19 +19,9 @@ export default{
 
 	methods: {
 
-		beautify(){
-			const html = JSON.parse(JSON.stringify(this.modelValue, null, 2))
-			this.$emit('update:modelValue', html)
-		},
-
 		onPaste(e) {
 			e.preventDefault()
-
 			let text = (e.clipboardData || window.clipboardData).getData("text");
-			const el = document.createElement('div')
-			el.innerHTML = text
-			text = el.innerText
-
 			this.$emit('update:modelValue', text)
 		}
 
@@ -45,7 +34,7 @@ export default{
 <style module>
 
 .comp{
-	@apply border-text-50 border-[1px] rounded-lg overflow-hidden flex flex-col;
+  @apply border-[1px] border-text-200 bg-base-300 rounded-lg flex flex-col overflow-hidden;
 }
 
 .comp code{

package/src/components/CollapsiblePanel.vue

@@ -0,0 +1,70 @@
+<template>
+  <div :class="$style.comp">
+
+    <div class="p-3 cursor-pointer flex flex-row" @click="expanded = !expanded">
+      <div class="flex-1">{{ text ?? 'Untitled' }}</div>
+      <button type="button">
+        <svg :class="expanded ? 'rotate-180' : ''" width="14" height="14" class="fill-text-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M224 416c-8.188 0-16.38-3.125-22.62-9.375l-192-192c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L224 338.8l169.4-169.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-192 192C240.4 412.9 232.2 416 224 416z"/></svg>
+      </button>
+    </div>
+
+    <div v-if="expanded || editMode === 1" class="px-3">
+      <component v-for="comp in items"
+                 :is="`${comp.type}`"
+                 :key="comp.uid"
+                 :="comp" />
+    </div>
+
+  </div>
+</template>
+
+<script>
+
+import {componentMixin} from "../mixin/component";
+
+export default{
+
+  mixins: [ componentMixin ],
+
+  props:{
+    items: Array,
+    text: String,
+  },
+
+  data(){
+    return {
+      expanded: false
+    }
+  },
+
+  provide(){
+    return {
+      parentData: this.data
+    }
+  }
+
+}
+
+</script>
+
+<style>
+
+.menuitem2-enter-active,
+.menuitem2-leave-active {
+  max-height: 100vh;
+  transition: all 300ms cubic-bezier(0.25, 1, 0.5, 1);
+}
+
+.menuitem2-enter-from,
+.menuitem2-leave-to{
+  max-height: 0;
+}
+
+</style>
+
+<style module>
+
+.comp {
+}
+
+</style>

package/src/components/ColorPicker2.vue

@@ -1,13 +1,16 @@
 <template>
 	<div :class="$style.comp">
 
-    <small class="text-text-400" v-if="title">{{ title }}</small>
+    <small class="text-text-400" v-if="title">
+      {{ title }}
+    </small>
 
     <div :class="circleClass" :style="circleStyle"
          @click="mode === 'hex' ? $refs.inputColor.click() : $refs.contextMenu.open($refs.btn)"
          ref="btn"></div>
+
     <input type="color" :class="$style.inputColor" ref="inputColor"
-           @change="select($refs.inputColor.value)"/>
+           @change="select($refs.inputColor.value)" />
 
     <ContextMenu ref="contextMenu" :dismiss="false">
       <div class="p-4 flex flex-col gap-4">
@@ -28,6 +31,7 @@
         </div>
       </div>
     </ContextMenu>
+
 	</div>
 </template>
 
@@ -37,8 +41,6 @@ import {hexToRgb, rgbToHex} from "../utils/helpers.mjs";
 
 export default{
 
-	emits: [ 'change', 'update:modelValue' ],
-
 	props: {
 
 		mode: {
@@ -76,30 +78,41 @@ export default{
 
 		customColor: undefined,
 
-		modelValue: String,
-
 		prefix: String,
 
     valueType: String,
 
+
+    name: String,
+
+    item: {
+      type: Object,
+      required: true
+    },
+
+    viewType: String,
+
+    viewIndex: Number,
+
+    viewTypes: Array,
+
 	},
 
 	methods: {
 
 		select(color){
 			if(this.mode === 'class'){
-				this.$emit('update:modelValue', color ? `${this.prefix}${this.keys[0][0]}` + color : '')
+        this.value[this.viewIndex] = `${this.viewType}${this.keys[0][0]}${color}`
 			}
 			else{
         if(this.valueType === 'rgb'){
           const hex = hexToRgb(color)
-          this.$emit('update:modelValue', `${hex.r},${hex.g},${hex.b}`)
+          this.value[this.viewIndex] = `${hex.r},${hex.g},${hex.b}`
         }
         else{
-          this.$emit('update:modelValue', color)
+          this.value[this.viewIndex] = color
         }
 			}
-			this.$emit('change')
 			this.$refs.contextMenu.close()
 		}
 
@@ -107,16 +120,20 @@ export default{
 
 	computed:{
 
-		customColorCount(){
-			const count = parseInt(this.customColor)
-			return isNaN(count) ? 0 : count
-		},
+    value(){
+      if(!Array.isArray(this.item.props[this.name]))
+        this.item.props[this.name] = []
+
+      return this.item.props[this.name]
+    },
 
 		circleClass(){
+      const value = this.value[this.viewIndex]
+
 			return [
 				this.$style.circle,
 				this.mode === 'class' ?
-					(this.modelValue ?? '').replace('text-', 'bg-').replace('border-', 'bg-') :
+					(value ?? '').replace('text-', 'bg-').replace('border-', 'bg-') :
 					''
 			]
 				.filter(_=>_)
@@ -126,9 +143,9 @@ export default{
 		circleStyle(){
 			if(this.mode !== 'class'){
 
-        let value = this.modelValue
+        let value = this.value[this.viewIndex]
         if(this.valueType === 'rgb'){
-          value = rgbToHex(...(this.modelValue ?? '').split(','))
+          value = rgbToHex(...(value ?? '').split(','))
         }
 
 				return {

package/src/components/ColorPicker3.vue

@@ -2,18 +2,21 @@
   <div :class="$style.comp">
 
     <Dropdown v-model="mode" @change="calculate">
+      <option value="none">None</option>
       <option value="solid">Solid</option>
       <option value="linear">Linear Gradient</option>
       <option value="radial">Radial Gradient</option>
     </Dropdown>
 
-    <div class="h-[8px]" :style="{ background:computedBackground }"></div>
+    <div v-if="computedBackground"
+         class="h-[8px] border-[1px] border-text-200 rounded-lg"
+         :style="{ background:computedBackground }"></div>
 
     <div v-if="mode === 'solid'">
       <input type="color" v-model="color1" @change="calculate" />
     </div>
 
-    <div v-else class="flex flex-row gap-3">
+    <div v-else-if="[ 'linear', 'radial' ].includes(mode)" class="flex flex-row gap-3">
       <input type="color" v-model="color1" @change="calculate" />
       <div class="flex-1"></div>
       <input type="color" v-model="color2" @change="calculate" />
@@ -64,8 +67,8 @@ export default {
   data() {
     return {
       mode: "solid", // solid, linear, radial
-      color1: "#ff0000",
-      color2: "#0000ff",
+      color1: "",
+      color2: "",
     };
   },
 
@@ -73,11 +76,16 @@ export default {
     computedBackground() {
       if (this.mode === "solid") {
         return this.color1;
-      } else if (this.mode === "linear") {
+      }
+      else if (this.mode === "linear") {
         return `linear-gradient(to right, ${this.color1}, ${this.color2})`;
-      } else {
+      }
+      else if (this.mode === "radial") {
         return `radial-gradient(circle, ${this.color1}, ${this.color2})`;
       }
+      else{
+        return null
+      }
     },
   },
 };

package/src/components/Image.vue

@@ -18,7 +18,7 @@
     </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">
       <div :class="$style.loading">
@@ -158,107 +158,48 @@ 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.startsWith('data:image/') || src.indexOf('<svg') >= 0);
+          else{
+            if(src.indexOf('://') < 0 && src.substring(0, 1) !== '/'){
+              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] ?? '').indexOf('://') < 0 ? import.meta.env.VITE_IMAGE_HOST + '/' : '') + this.src[0]
-				if(this.src[1]){
-					src['md'] = ((this.src[1] ?? '').indexOf('://') < 0 ? import.meta.env.VITE_IMAGE_HOST + '/' : '') + 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)){
+        const imgSrc = this.src[this.$device.mediaIndex]
+        setSrc(imgSrc)
+      }
+      else if(this.src){
+        setSrc(this.src)
+      }
       else{
         this.status = 0
       }
@@ -284,9 +225,12 @@ export default{
 
 	watch:{
 
-		src(to, from){
-      this.loadSrc()
-		},
+		src: {
+      handler(){
+        this.loadSrc()
+      },
+      deep: true
+    },
 
 	}
 }
@@ -296,15 +240,11 @@ export default{
 <style module>
 
 .comp{
-	@apply relative overflow-hidden;
+	@apply relative flex items-center justify-center overflow-hidden aspect-square;
 }
 
 .img{
-	@apply w-full h-full object-contain;
-}
-
-.editArea{
-	@apply absolute top-0 left-0 right-0 bottom-0;
+	@apply w-full h-full object-cover;
 }
 
 .loading{

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>