@mixd-id/web-scaffold 0.1.230406071 → 0.1.230406074

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mixd-id/web-scaffold",
   "private": false,
-  "version": "0.1.230406071",
+  "version": "0.1.230406074",
   "scripts": {
     "dev": "vite serve",
     "build": "vite build",
@@ -11,6 +11,7 @@
   "exports": {
     ".": "./src/index.js",
     "./themes/default": "./src/themes/default/index.js",
+    "./mixin/component": "./src/mixin/component.js",
     "./helpers": {
       "require": "./src/utils/helpers.js",
       "import": "./src/utils/helpers.mjs"

package/src/components/Box.vue

@@ -6,14 +6,25 @@
 
 <script>
 
-import {_applyClass, mediaPrefixes} from "../utils/helpers.mjs";
+import {_applyClass} from "../utils/helpers.mjs";
+import { componentMixin } from '../mixin/component';
 
 export default{
 
+	mixins: [ componentMixin ],
+
+	props: {
+
+		title: {
+			type: String,
+			default: 'Box'
+		}
+
+	},
+
 	computed: {
 
 		computedClass(){
-
 			const classNames = [
 				this.$style.comp
 			]
@@ -21,23 +32,8 @@ export default{
 			classNames.push(..._applyClass(this.$props, { display:'flex' }))
 
 			return classNames.join(' ')
-		}
-
-	},
-
-  props: {
-
-    title: {
-			type: String,
-			default: 'Box'
 		},
 
-		margin: Array,
-
-		padding: Array,
-
-		display: Array
-
 	}
 
 }
@@ -48,6 +44,21 @@ export default{
 
 .comp{
 	@apply border-[1px] border-text-200 flex items-center justify-center;
+	background-color: v-bind(bgColor[0]);
+	background-image: v-bind(bgImages[0]);
+	background-position: v-bind(bgPositions[0]);
+	background-size: v-bind(bgSizes[0]);
+	background-repeat: v-bind(bgRepeats[0]);
+}
+
+@media screen and (min-width: 768px){
+	.comp{
+		background-color: v-bind(bgColor[1]);
+		background-image: v-bind(bgImages[1]);
+		background-position: v-bind(bgPositions[1]);
+		background-size: v-bind(bgSizes[1]);
+		background-repeat: v-bind(bgRepeats[1]);
+	}
 }
 
 </style>

package/src/components/ColorPicker.vue

@@ -13,9 +13,13 @@
 						 	@click="select(color)"></div>
 					</div>
 				</div>
-				<button type="button" v-if="Boolean(customColor)"
-								class="w-full p-1 border-text-100 border-[1px] rounded-lg"
-								@click="$refs.inputColor.click()">Custom</button>
+				<div class="grid grid-cols-2 gap-4">
+					<button type="button" @click="select('')"
+									class="w-full p-1 border-text-100 border-[1px] rounded-lg">None</button>
+					<button type="button" v-if="Boolean(customColor)"
+									class="w-full p-1 border-text-100 border-[1px] rounded-lg"
+									@click="$refs.inputColor.click()">Custom</button>
+				</div>
 			</div>
 		</ContextMenu>
 

package/src/components/ListView.vue

@@ -355,7 +355,7 @@ export default{
 
     onHooks(model, event, items){
 
-			if(model === this.subscriptionObj.model){
+			if(model === this.subscriptionObj.model && Array.isArray(items)){
         switch(event){
 
           case 'create':

package/src/components/PaddingBox.vue

@@ -0,0 +1,114 @@
+<template>
+	<div :class="$style.comp">
+		<div class="flex flex-row gap-1">
+			<button type="button" @click="setType(1)">
+				<svg width="12" height="12" class="fill-text" :class="{ 'fill-primary-500':type === 1 }" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm16 400c0 8.8-7.2 16-16 16H48c-8.8 0-16-7.2-16-16V80c0-8.8 7.2-16 16-16h352c8.8 0 16 7.2 16 16v352z"/></svg>
+			</button>
+			<button type="button" @click="setType(2)">
+				<svg width="12" height="12" class="fill-text" :class="{ 'fill-primary-500':type === 2 }" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M120 32H48A48 48 0 0 0 0 80v352a48 48 0 0 0 48 48h72a8 8 0 0 0 8-8v-16a8 8 0 0 0-8-8H48a16 16 0 0 1-16-16V80a16 16 0 0 1 16-16h72a8 8 0 0 0 8-8V40a8 8 0 0 0-8-8zm280 0h-72a8 8 0 0 0-8 8v16a8 8 0 0 0 8 8h72a16 16 0 0 1 16 16v352a16 16 0 0 1-16 16h-72a8 8 0 0 0-8 8v16a8 8 0 0 0 8 8h72a48 48 0 0 0 48-48V80a48 48 0 0 0-48-48z"/></svg>
+			</button>
+			<button type="button" @click="setType(4)">
+				<svg width="12" height="12" class="fill-text" :class="{ 'fill-primary-500':type === 4 }" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M0 80v352c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V80c0-26.51-21.49-48-48-48H48C21.49 32 0 53.49 0 80zm240-16v176H32V80c0-8.837 7.163-16 16-16h192zM32 432V272h208v176H48c-8.837 0-16-7.163-16-16zm240 16V272h208v160c0 8.837-7.163 16-16 16H272zm208-208H272V64h192c8.837 0 16 7.163 16 16v160z"/></svg>
+			</button>
+		</div>
+		<div class="grid grid-cols-4 gap-1">
+			<select v-if="type >= 1" :value="values[0]"
+							@change="(e) => setValue(0, e.target.value)">
+				<option v-for="i in 9" :value="i - 1">{{ i - 1}}</option>
+			</select>
+			<select v-if="type >= 2" :value="values[1]"
+							@change="(e) => setValue(1, e.target.value)">
+				<option v-for="i in 9" :value="i - 1">{{ i - 1}}</option>
+			</select>
+			<select v-if="type >= 4" :value="values[2]"
+							@change="(e) => setValue(2, e.target.value)">
+				<option v-for="i in 9" :value="i - 1">{{ i - 1}}</option>
+			</select>
+			<select v-if="type >= 4" :value="values[3]"
+							@change="(e) => setValue(3, e.target.value)">
+				<option v-for="i in 9" :value="i - 1">{{ i - 1}}</option>
+			</select>
+		</div>
+	</div>
+</template>
+
+<script>
+
+export default{
+
+	emits: [ 'change', 'update:modelValue' ],
+
+	props: {
+
+		modelValue: String
+
+	},
+
+	methods: {
+
+		setType(type){
+			let v
+			switch(type){
+				case 1:
+					v = [ this.values[0] ]
+					break
+				case 2:
+					v = [ this.values[0], this.values[1] ?? '0' ]
+					break
+				case 4:
+					v = [
+						this.values[0],
+						this.values[1] ?? '0',
+						this.values[2] ?? '0',
+						this.values[3] ?? '0'
+					]
+					break
+			}
+
+			if(Array.isArray(v)){
+				this.$emit('update:modelValue', v.join(','))
+				this.$emit('change')
+			}
+		},
+
+		setValue(idx, value){
+			const v = [ ...this.values ]
+			v[idx] = value
+			this.$emit('update:modelValue', v.join(','))
+			this.$emit('change')
+		}
+
+	},
+
+	computed: {
+
+		type(){
+			return (this.modelValue ?? '').split(',').length
+		},
+
+		values(){
+			return (this.modelValue ?? '').split(',')
+		}
+
+	}
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+	@apply flex flex-col gap-1;
+}
+
+.comp button{
+	@apply border-[1px] border-text-200 bg-text-100 rounded-lg p-1 px-3;
+}
+
+.comp select{
+	@apply appearance-none outline-none p-1 text-center bg-transparent cursor-pointer w-full;
+	@apply border-[1px] border-text-200 rounded-lg;
+}
+
+</style>

package/src/components/Textarea.vue

@@ -2,8 +2,8 @@
 	<div :class="computedClass">
 		<slot name="start"></slot>
 		<textarea
-			:placeholder="placeholder" :rows="rows" ref="input" @blur="onBlur" @input="onInput"
-			:value="modelValue" />
+			:placeholder="placeholder" :rows="rows" ref="input" @focus="isActive = true" @blur="onBlur" @input="onInput"
+			:value="modelValue" :readonly="Boolean(readonly)" />
 		<div v-if="state === -2 && !!(errors)">
 			<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
 				<path fill-rule="evenodd" clip-rule="evenodd" d="M12 13.75C12.4142 13.75 12.75 13.4142 12.75 13V8.00001C12.75 7.5858 12.4142 7.25001 12 7.25001C11.5858 7.25001 11.25 7.5858 11.25 8.00001V13C11.25 13.4142 11.5858 13.75 12 13.75Z"/>
@@ -53,6 +53,8 @@ export default{
 
 		placeholder: String,
 
+		readonly: undefined,
+
 		rows: String,
 
 	},
@@ -89,6 +91,7 @@ export default{
 				this.$style['state-' + this.computedState],
 				this.isActive ? this.$style.active : '',
 				this.align ? this.$style['align-' + this.align] : '',
+				this.readonly ? this.$style.readonly : '',
 				this.size ? this.$style['size-' + this.size] : ''
 			].join(' ')
 		},
@@ -133,7 +136,7 @@ export default{
 
 .textarea{
 	@apply min-h-[var(--h-cp)];
-	@apply flex items-start border-[1px] border-text-100 bg-base-50 rounded-lg overflow-hidden;
+	@apply flex items-start border-[1px] border-text-200 bg-base-50 rounded-lg overflow-hidden;
 	@apply !max-h-[200px];
 }
 .textarea textarea{
@@ -147,6 +150,9 @@ export default{
 .textarea>textarea::placeholder{
 	@apply text-text-200;
 }
+.textarea.readonly{
+	@apply bg-text-50;
+}
 
 .size-sm{ @apply min-h-[var(--h-cp-sm)]; }
 .size-sm textarea{ @apply text-sm; }
@@ -173,4 +179,4 @@ export default{
 	@apply text-right
 }
 
-</style>
+</style>

package/src/index.js

@@ -307,6 +307,7 @@ export default{
     app.component('SplitPane', defineAsyncComponent(() => import("./components/SplitPane.vue")))
     app.component('TabView', defineAsyncComponent(() => import("./components/TabView.vue")))
     app.component('TextEditor', defineAsyncComponent(() => import("./components/TextEditor.vue")))
+    app.component('PaddingBox', defineAsyncComponent(() => import("./components/PaddingBox.vue")))
 
 
   }

package/src/mixin/component.js

@@ -0,0 +1,153 @@
+// mixin/component.js
+export const componentMixin = {
+
+  props: {
+
+    bgColors: Array,
+    bgImage: Array,
+    bgPosition: Array,
+    bgSize: Array,
+    bgRepeat: Array,
+
+    bdColor: Array,
+    bdSize: Array,
+    bdStyle: Array,
+    bdRadius: Array,
+
+    maxWidth: Array,
+
+    enabled: Boolean,
+    name: String,
+    margin: Array,
+    padding: Array,
+    display: Array,
+    uid: String
+
+  },
+
+  computed: {
+
+    bgImages(){
+      return [
+        this.bgImage && this.bgImage[0] && this.bgImage[0].imageUrl ?
+            `url('${import.meta.env.VITE_IMAGE_HOST + '/' + this.bgImage[0].imageUrl}')` : '',
+        this.bgImage && this.bgImage[1] && this.bgImage[1].imageUrl ?
+            `url('${import.meta.env.VITE_IMAGE_HOST + '/' + this.bgImage[1].imageUrl}')` :
+            (this.bgImage && this.bgImage[0] && this.bgImage[0].imageUrl ?
+                `url('${import.meta.env.VITE_IMAGE_HOST + '/' + this.bgImage[0].imageUrl}')` : '')
+      ]
+    },
+
+    bgPositions(){
+      return [
+        this.bgPosition && this.bgPosition[0] ? this.bgPosition[0] : '',
+        this.bgPosition && this.bgPosition[1] ? this.bgPosition[1] :
+            (this.bgPosition && this.bgPosition[0] ? this.bgPosition[0] : '')
+      ]
+    },
+
+    bgSizes(){
+      return [
+        this.bgSize && this.bgSize[0] ? this.bgSize[0] : '',
+        this.bgSize && this.bgSize[1] ? this.bgSize[1] :
+            (this.bgSize && this.bgSize[0] ? this.bgSize[0] : '')
+      ]
+    },
+
+    bgRepeats(){
+      return [
+        this.bgRepeat && this.bgRepeat[0] ? this.bgRepeat[0] : '',
+        this.bgRepeat && this.bgRepeat[1] ? this.bgRepeat[1] :
+            (this.bgRepeat && this.bgRepeat[0] ? this.bgRepeat[0] : '')
+      ]
+    },
+
+    bgColor(){
+      return [
+        this.bgColors && this.bgColors[0] ? this.bgColors[0] : '',
+        this.bgColors && this.bgColors[1] ? this.bgColors[1] :
+            (this.bgColors && this.bgColors[0] ? this.bgColors[0] : '')
+      ]
+    },
+
+    bdColors(){
+      return [
+        this.bdColor && this.bdColor[0] ? this.bdColor[0] : '',
+        this.bdColor && this.bdColor[1] ? this.bdColor[1] :
+            (this.bdColor && this.bdColor[0] ? this.bdColor[0] : '')
+      ]
+    },
+
+    bdSizes(){
+      if(!this.bdSize) return [[], []]
+
+      const bdSize0 = (this.bdSize[0] ?? '').split(',')
+      const bdSize1 = this.bdSize[1] ? this.bdSize[1].split(',') : bdSize0
+
+      return [
+        [
+          bdSize0.length === 1 ? bdSize0[0] + 'px' : bdSize0[0] + 'px',
+          bdSize0.length === 1 ? bdSize0[0] + 'px' : bdSize0[1] + 'px',
+          bdSize0.length === 1 ? bdSize0[0] + 'px' : bdSize0[2] + 'px',
+          bdSize0.length === 1 ? bdSize0[0] + 'px' : bdSize0[3] + 'px',
+        ],
+        [
+          bdSize1.length === 1 ? bdSize1[0] + 'px' : bdSize1[0] + 'px',
+          bdSize1.length === 1 ? bdSize1[0] + 'px' : bdSize1[1] + 'px',
+          bdSize1.length === 1 ? bdSize1[0] + 'px' : bdSize1[2] + 'px',
+          bdSize1.length === 1 ? bdSize1[0] + 'px' : bdSize1[3] + 'px',
+        ]
+      ]
+    },
+
+    bdRadiuses(){
+      if(!this.bdRadius) return [[], []]
+
+      const bdRadius0 = (this.bdRadius[0] ?? '').split(',')
+      const bdRadius1 = this.bdRadius[1] ? this.bdRadius[1].split(',') : bdRadius0
+
+      return [
+        [
+          bdRadius0.length === 1 ? bdRadius0[0] + 'px' : bdRadius0[0] + 'px',
+          bdRadius0.length === 1 ? bdRadius0[0] + 'px' : bdRadius0[1] + 'px',
+          bdRadius0.length === 1 ? bdRadius0[0] + 'px' : bdRadius0[2] + 'px',
+          bdRadius0.length === 1 ? bdRadius0[0] + 'px' : bdRadius0[3] + 'px',
+        ],
+        [
+          bdRadius1.length === 1 ? bdRadius1[0] + 'px' : bdRadius1[0] + 'px',
+          bdRadius1.length === 1 ? bdRadius1[0] + 'px' : bdRadius1[1] + 'px',
+          bdRadius1.length === 1 ? bdRadius1[0] + 'px' : bdRadius1[2] + 'px',
+          bdRadius1.length === 1 ? bdRadius1[0] + 'px' : bdRadius1[3] + 'px',
+        ]
+      ]
+    },
+
+    bdStyles(){
+      if(!this.bdStyle) return []
+
+      return [
+        this.bdStyle[0] ? this.bdStyle[0] : '',
+        this.bdStyle[1] ? this.bdStyle[1] : (this.bdStyle[0] ? this.bdStyle[0] : '')
+      ]
+    },
+
+    maxWidths(){
+
+      return [
+        this.maxWidth && this.maxWidth[0] ? this.maxWidth[0] : '',
+        this.maxWidth && this.maxWidth[1] ? this.maxWidth[1] :
+            (this.maxWidth && this.maxWidth[0] ? this.maxWidth[0] : '')
+      ]
+    },
+
+    margins(){
+      if(!this.maxWidth) return []
+
+      return [
+        '0 auto',
+        '0 auto',
+      ]
+    }
+
+  }
+};

package/src/utils/helpers.mjs

@@ -147,19 +147,47 @@ const mediaPrefixes = [
   '',
   'md:'
 ]
+const calcUnit = (prefix, midfix, value) => {
+
+  const values = (value ?? '').split(',')
+
+  if(values.length === 1){
+    return prefix + midfix + '-' + values[0]
+  }
+  else if(values.length === 2){
+    return prefix + midfix + 'x-' + values[0] +
+      ' ' +
+        prefix + midfix + 'y-' + values[1]
+  }
+  else if(values.length === 4){
+    return prefix + midfix + 'l-' + values[0] +
+      ' ' +
+        prefix + midfix + 't-' + values[1] +
+      ' ' +
+        prefix + midfix + 'r-' + values[2] +
+      ' ' +
+        prefix + midfix + 'b-' + values[3]
+  }
+}
 const _applyClass = function(props, defaultClass = {}){
 
   const arr = []
 
   if(Array.isArray(props.padding) && props.padding.length > 0){
     for(let i in props.padding){
-      arr.push(mediaPrefixes[i] + 'p-' + props.padding[i])
+      const unit = calcUnit(mediaPrefixes[i], 'p', props.padding[i])
+      if(unit){
+        arr.push(unit)
+      }
     }
   }
 
   if(Array.isArray(props.margin)){
     for(let i in props.margin){
-      arr.push(mediaPrefixes[i] + 'm-' + props.margin[i])
+      const unit = calcUnit(mediaPrefixes[i], 'm', props.margin[i])
+      if(unit){
+        arr.push(unit)
+      }
     }
   }