@mixd-id/web-scaffold 0.1.230406077 → 0.1.230406079

package/package.json

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

package/src/components/Block.vue

@@ -0,0 +1,59 @@
+<template>
+	<div :class="compClass">
+
+		<component v-for="item in computedItems"
+							 :is="item.type"
+							 :uid="item.uid"
+							 :items="item.items"
+							 :="item.props" />
+
+		Block
+
+	</div>
+</template>
+
+<script>
+
+import {classFromProps} from "../utils/helpers.mjs";
+
+export default{
+
+	props:{
+		class: String,
+		items: Array,
+		padding: Array,
+		margin: Array,
+		display: Array,
+		type: String,
+		enabled: undefined,
+		name: String
+	},
+
+	computed: {
+
+		computedItems() {
+			return this.items.filter((_) => _.props.enabled)
+		},
+
+		compClass(){
+			return [
+				this.$style.comp,
+				this.class ?? '',
+				classFromProps(this.$props)
+			]
+				.filter(_ => _)
+				.join(' ')
+		}
+
+	}
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+}
+
+</style>

package/src/components/Box.vue

@@ -1,6 +1,6 @@
 <template>
 	<div :class="computedClass">
-		<h1>{{ title }}</h1>
+		<Button class="p-1" @click="log('OK')">Box Button</Button>
 	</div>
 </template>
 
@@ -43,7 +43,7 @@ export default{
 <style module>
 
 .comp{
-	@apply border-[1px] border-text-200 flex items-center justify-center;
+	@apply flex items-center justify-center;
 	background-color: v-bind(bgColor[0]);
 	background-image: v-bind(bgImages[0]);
 	background-position: v-bind(bgPositions[0]);

package/src/components/Button.vue

@@ -15,6 +15,7 @@
 <script>
 
 import {componentMixin} from "../mixin/component";
+import {classFromProps} from "../utils/helpers.mjs";
 
 export default{
 
@@ -22,6 +23,8 @@ export default{
 
 	props: {
 
+		class: String,
+
 		variant: {
 			type: [ String, Number ],
 			default: "primary" // primary|secondary|outline, default:primary
@@ -46,9 +49,12 @@ export default{
 
 			return [
 				this.$style.button,
-				'button-' + this.variant,
+				this.$style['button-' + this.variant],
+				this.class ?? '',
 				parseInt(this.computedState) === 2 ? this.$style.loading : '',
+				classFromProps(this.$props)
 			]
+				.filter(_ => _)
 				.join(' ')
 		},
 
@@ -65,7 +71,7 @@ export default{
 		},
 
 		widths(){
-			if(!Array.isArray(this.width)) return []
+			if(!Array.isArray(this.width)) return [ '', '' ]
 
 			return [
 				this.width[0] ?? '',
@@ -107,10 +113,22 @@ export default{
 
 </script>
 
-<style>
+<style module>
 
 .button{
-	width: v-bind(widths[0])
+	@apply p-2 h-[var(--h-cp)];
+	@apply relative flex items-center justify-center;
+	@apply whitespace-nowrap text-ellipsis overflow-hidden;
+	@apply rounded-lg;
+}
+.button>*:first-child{
+	@apply flex items-center justify-center
+}
+.button:disabled{
+	@apply opacity-60;
+}
+.button:active{
+	@apply top-[1px] left-[1px] relative;
 }
 
 .button-primary{
@@ -236,26 +254,6 @@ export default{
 	fill-opacity: 75%;
 }
 
-</style>
-
-<style module>
-
-.button{
-	@apply h-[var(--h-cp)];
-	@apply relative flex items-center justify-center;
-	@apply whitespace-nowrap text-ellipsis overflow-hidden;
-	@apply rounded-lg;
-}
-.button>*:first-child{
-	@apply flex items-center justify-center
-}
-.button:disabled{
-	@apply opacity-60;
-}
-.button:active{
-	@apply top-[1px] left-[1px] relative;
-}
-
 .size-sm{
 	@apply h-[var(--h-cp-sm)];
 }
@@ -285,12 +283,4 @@ export default{
 	@apply animate-spin h-5 w-5;
 }
 
-@media screen and (min-width: 768px){
-
-	.button{
-		width: v-bind(widths[1])
-	}
-
-}
-
 </style>

package/src/components/Carousel.vue

@@ -32,7 +32,7 @@
 
 <script>
 
-import { parseBoolean } from "../utils/helpers.mjs";
+import {_applyClass, parseBoolean} from "../utils/helpers.mjs";
 import {componentMixin} from "../mixin/component";
 
 export default{
@@ -67,7 +67,8 @@ export default{
 
 		compClass(){
 			return [
-				this.$style.comp
+				this.$style.comp,
+				..._applyClass(this.$props)
 			]
 				.filter(_ => _)
 				.join(' ')
@@ -295,23 +296,7 @@ export default{
 	overflow: hidden;
 	position: relative;
 	touch-action: none;
-
-	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]);
-
-	border-left-width: v-bind(bdSizes[0][0]);
-	border-top-width: v-bind(bdSizes[0][1]);
-	border-right-width: v-bind(bdSizes[0][2]);
-	border-bottom-width: v-bind(bdSizes[0][3]);
-	border-color: v-bind(bdColors[0]);
-	border-top-left-radius: v-bind(bdRadiuses[0][0]);
-	border-top-right-radius: v-bind(bdRadiuses[0][1]);
-	border-bottom-right-radius: v-bind(bdRadiuses[0][2]);
-	border-bottom-left-radius: v-bind(bdRadiuses[0][3]);
-	border-style: v-bind(bdStyles[0]);
 }
 
 .carouselNext{
@@ -340,12 +325,12 @@ export default{
 }
 
 .legend{
-	@apply flex justify-center gap-2 py-2;
+	@apply flex justify-center gap-2 py-1;
 }
 .legend .legendItem{
 }
 .legend .legendItem>*{
-	@apply w-3 h-3 rounded-full bg-gray-100;
+	@apply w-2 h-2 rounded-full bg-gray-100;
 }
 .legend .legendItemActive>*{
 	@apply bg-primary;
@@ -353,22 +338,7 @@ export default{
 
 @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]);
-
-		border-left-width: v-bind(bdSizes[1][0]);
-		border-top-width: v-bind(bdSizes[1][1]);
-		border-right-width: v-bind(bdSizes[1][2]);
-		border-bottom-width: v-bind(bdSizes[1][3]);
-		border-color: v-bind(bdColors[1]);
-		border-top-left-radius: v-bind(bdRadiuses[1][0]);
-		border-top-right-radius: v-bind(bdRadiuses[1][1]);
-		border-bottom-right-radius: v-bind(bdRadiuses[1][2]);
-		border-bottom-left-radius: v-bind(bdRadiuses[1][3]);
-		border-style: v-bind(bdStyles[1]);
 	}
 }
 

package/src/components/ColorPicker.vue

@@ -1,16 +1,18 @@
 <template>
 	<div :class="$style.comp">
-		<div :class="$style.circle" @click="$refs.contextMenu.open($refs.btn)"
-				 ref="btn" :style="{ backgroundColor:this.modelValue }"></div>
+		<div :class="`${$style.circle} ${modelValue}`" @click="$refs.contextMenu.open($refs.btn)"
+				 ref="btn"></div>
 		<input type="color" :class="$style.inputColor" ref="inputColor"
 			@change="select($refs.inputColor.value)"/>
 
 		<ContextMenu ref="contextMenu" :dismiss="false">
 			<div class="p-4 flex flex-col gap-4">
-				<div class="grid grid-cols-6 gap-4">
-					<div v-for="color in colors">
-						<div :class="$style.circle" :style="{ backgroundColor:color }"
-						 	@click="select(color)"></div>
+				<div class="flex flex-col gap-4">
+					<div v-for="color in colors" class="grid gap-4" :class="`grid-cols-10`">
+						<div v-for="step in steps">
+							<div :class="`${$style.circle} bg-${color}-${step}`"
+									 @click="select(`${color}-${step}`)"></div>
+						</div>
 					</div>
 				</div>
 				<div class="grid grid-cols-2 gap-4">
@@ -34,18 +36,35 @@ export default{
 
 	props: {
 
-		colors: Array,
+		colors: {
+			type: Array,
+			default: [
+				'primary',
+				'gray',
+				'red',
+				'amber',
+				'lime',
+				'blue',
+			]
+		},
+
+		steps: {
+			type: Array,
+			default: [ 50, 100, 200, 300, 400, 500, 600, 700, 800, 900 ]
+		},
 
 		customColor: undefined,
 
-		modelValue: String
+		modelValue: String,
+
+		prefix: String
 
 	},
 
 	methods: {
 
 		select(color){
-			this.$emit('update:modelValue', color)
+			this.$emit('update:modelValue', this.prefix + color)
 			this.$emit('change')
 			this.$refs.contextMenu.close()
 		}
@@ -74,11 +93,11 @@ export default{
 <style module>
 
 .comp{
-	@apply p-[2px] border-[1px] border-text-200 rounded-full relative;
+	@apply relative;
 }
 
 .circle{
-	@apply w-[19px] h-[19px] rounded-full cursor-pointer;
+	@apply w-[24px] h-[24px] rounded-full cursor-pointer border-[2px] border-text-200;
 }
 
 .inputColor{

package/src/components/Flex.vue

@@ -6,14 +6,15 @@
 							 :uid="item.uid"
 							 :items="item.items"
 							 :="item.props"
-							 :class="classOf(item, idx)" />
+							 :class="itemClass(idx)" />
 
 	</div>
+
 </template>
 
 <script>
 
-import {_applyClass, mediaPrefixes} from "../utils/helpers.mjs";
+import {_applyClass, classFromProps, mediaPrefixes} from "../utils/helpers.mjs";
 import {componentMixin} from "../mixin/component";
 
 export default{
@@ -22,6 +23,7 @@ export default{
 
 	props:{
 		items: Array,
+		flexColumns: Array,
 		type: Array,
 		columnType: Array,
 		columns: Array,
@@ -60,26 +62,9 @@ export default{
 
 	methods: {
 
-		classOf(item, idx){
-
-			const classNames = []
-			for(let i in this.columns){
-				const column = this.columns[i][idx % this.columns.length]
-
-				if(!column) continue
-
-				if(column && column.width !== 'auto'){
-					classNames.push(`${mediaPrefixes[i]}w-[${column.width}]`)
-				}
-				else{
-					classNames.push(`${mediaPrefixes[i]}flex-1`)
-				}
-			}
-
-			classNames.push(..._applyClass(item.props))
-
-			return classNames.join(' ')
-		}
+		itemClass(idx){
+			return (this.flexColumns[idx] ?? []).join(' ')
+		},
 	},
 
 	data(){
@@ -95,47 +80,12 @@ export default{
 
 .comp{
 	@apply flex;
-
-	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]);
-
-	border-left-width: v-bind(bdSizes[0][0]);
-	border-top-width: v-bind(bdSizes[0][1]);
-	border-right-width: v-bind(bdSizes[0][2]);
-	border-bottom-width: v-bind(bdSizes[0][3]);
-	border-color: v-bind(bdColors[0]);
-	border-top-left-radius: v-bind(bdRadiuses[0][0]);
-	border-top-right-radius: v-bind(bdRadiuses[0][1]);
-	border-bottom-right-radius: v-bind(bdRadiuses[0][2]);
-	border-bottom-left-radius: v-bind(bdRadiuses[0][3]);
-	border-style: v-bind(bdStyles[0]);
-
-	max-width: v-bind(maxWidths[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]);
-
-		border-left-width: v-bind(bdSizes[1][0]);
-		border-top-width: v-bind(bdSizes[1][1]);
-		border-right-width: v-bind(bdSizes[1][2]);
-		border-bottom-width: v-bind(bdSizes[1][3]);
-		border-color: v-bind(bdColors[1]);
-		border-top-left-radius: v-bind(bdRadiuses[1][0]);
-		border-top-right-radius: v-bind(bdRadiuses[1][1]);
-		border-bottom-right-radius: v-bind(bdRadiuses[1][2]);
-		border-bottom-left-radius: v-bind(bdRadiuses[1][3]);
-		border-style: v-bind(bdStyles[1]);
-
-		max-width: v-bind(maxWidths[1]);
 	}
 }
 

package/src/components/Grid.vue

@@ -1,19 +1,18 @@
 <template>
-  <div :class="gridClass">
+  <div :class="compClass">
 
     <component v-for="item in computedItems"
 							 :is="item.type"
 							 :uid="item.uid"
 							 :items="item.items"
-							 :="item.props"
-							 :class="classOf(item)" />
+							 :="item.props" />
 
   </div>
 </template>
 
 <script>
 
-import {_applyClass, mediaPrefixes} from "../utils/helpers.mjs";
+import {_applyClass} from "../utils/helpers.mjs";
 import {componentMixin} from "../mixin/component";
 
 export default{
@@ -38,40 +37,18 @@ export default{
 			return this.items.filter((_) => _.props.enabled)
 		},
 
-    gridClass(){
-
-			const classNames = [
-				this.$style.comp
+    compClass(){
+			return [
+				this.$style.comp,
+				..._applyClass(this.$props)
 			]
-
-			if(Array.isArray(this.columns)){
-				for(let i in this.columns){
-					classNames.push(mediaPrefixes[i] + 'grid-cols-' + this.columns[i])
-				}
-			}
-
-			if(Array.isArray(this.gap)){
-				for(let i in this.gap){
-					classNames.push(mediaPrefixes[i] + 'gap-' + this.gap[i])
-				}
-			}
-
-			classNames.push(..._applyClass(this.$props))
-
-			return classNames.join(' ')
+				.join(' ')
     }
 
   },
 
 	methods: {
 
-		classOf(item){
-
-			return [
-				item.props.colSpan ? 'col-span-' + item.props.colSpan : ''
-			]
-				.join(' ')
-		}
 
 	}
 

package/src/components/Image.vue

@@ -261,25 +261,7 @@ export default{
 
 .comp{
 	@apply relative overflow-hidden;
-
-	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]);
-
-	border-left-width: v-bind(bdSizes[0][0]);
-	border-top-width: v-bind(bdSizes[0][1]);
-	border-right-width: v-bind(bdSizes[0][2]);
-	border-bottom-width: v-bind(bdSizes[0][3]);
-	border-color: v-bind(bdColors[0]);
-	border-top-left-radius: v-bind(bdRadiuses[0][0]);
-	border-top-right-radius: v-bind(bdRadiuses[0][1]);
-	border-bottom-right-radius: v-bind(bdRadiuses[0][2]);
-	border-bottom-left-radius: v-bind(bdRadiuses[0][3]);
-	border-style: v-bind(bdStyles[0]);
-
-	max-width: v-bind(maxWidths[0]);
 }
 
 .img{
@@ -301,24 +283,7 @@ export default{
 
 @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]);
-
-		border-left-width: v-bind(bdSizes[1][0]);
-		border-top-width: v-bind(bdSizes[1][1]);
-		border-right-width: v-bind(bdSizes[1][2]);
-		border-bottom-width: v-bind(bdSizes[1][3]);
-		border-color: v-bind(bdColors[1]);
-		border-top-left-radius: v-bind(bdRadiuses[1][0]);
-		border-top-right-radius: v-bind(bdRadiuses[1][1]);
-		border-bottom-right-radius: v-bind(bdRadiuses[1][2]);
-		border-bottom-left-radius: v-bind(bdRadiuses[1][3]);
-		border-style: v-bind(bdStyles[1]);
-
-		max-width: v-bind(maxWidths[1]);
 	}
 }
 

package/src/index.js

@@ -248,6 +248,7 @@ export default{
     app.config.globalProperties.info = consoleInfo
 
     app.component('Alert', defineAsyncComponent(() => import("./components/Alert.vue")))
+    app.component('Block', defineAsyncComponent(() => import("./components/Block.vue")))
     app.component('Button', defineAsyncComponent(() => import("./components/Button.vue")))
     app.component('Box', defineAsyncComponent(() => import("./components/Box.vue")))
     app.component('ColorPicker', defineAsyncComponent(() => import("./components/ColorPicker.vue")))
@@ -313,6 +314,8 @@ export default{
     app.component('Banner', defineAsyncComponent(() => import("./widgets/Banner.vue")))
     app.component('BannerItem', defineAsyncComponent(() => import("./widgets/BannerItem.vue")))
     app.component('BannerSetting', defineAsyncComponent(() => import("./widgets/BannerSetting.vue")))
+    app.component('BlockItem', defineAsyncComponent(() => import("./widgets/BlockItem.vue")))
+    app.component('BlockSetting', defineAsyncComponent(() => import("./widgets/BlockSetting.vue")))
     app.component('BoxItem', defineAsyncComponent(() => import("./widgets/BoxItem.vue")))
     app.component('BoxSetting', defineAsyncComponent(() => import("./widgets/BoxSetting.vue")))
     app.component('ButtonItem', defineAsyncComponent(() => import("./widgets/ButtonItem.vue")))
@@ -343,6 +346,8 @@ export default{
     app.component('IconListSetting', defineAsyncComponent(() => import("./widgets/IconListSetting.vue")))
     app.component('ImageItem', defineAsyncComponent(() => import("./widgets/ImageItem.vue")))
     app.component('ImageSetting', defineAsyncComponent(() => import("./widgets/ImageSetting.vue")))
+    app.component('MarginSetting', defineAsyncComponent(() => import("./widgets/MarginSetting.vue")))
+    app.component('PaddingSetting', defineAsyncComponent(() => import("./widgets/PaddingSetting.vue")))
     app.component('Share', defineAsyncComponent(() => import("./widgets/Share.vue")))
     app.component('ShareItem', defineAsyncComponent(() => import("./widgets/ShareItem.vue")))
     app.component('ShareSetting', defineAsyncComponent(() => import("./widgets/ShareSetting.vue")))

package/src/stores/WebPageBuilder.js

@@ -4,12 +4,12 @@ import {getQueryString} from "../utils/helpers.mjs";
 export const useWebPageBuilderStore = defineStore('webPageBuilder', {
 
   state: () =>({
-    version: '0.0.0',
+    version: '0.0.1',
 
     layoutMode: false,
     selectedComponent: null,
     tabIndex: 1,
-    viewType: 'mobile',
+    viewType: '',
     zoomLevel: 'fit'
   }),
 

package/src/utils/helpers.mjs

@@ -177,23 +177,25 @@ const _applyClass = function(props, defaultClass = {}){
 
   const arr = []
 
-  if(Array.isArray(props.padding) && props.padding.length > 0){
+  arr.push(classFromProps(props))
+
+  /*if(Array.isArray(props.padding) && props.padding.length > 0){
     for(let i in props.padding){
       const unit = calcUnit(mediaPrefixes[i], 'p', props.padding[i])
       if(unit){
         arr.push(unit)
       }
     }
-  }
+  }*/
 
-  if(Array.isArray(props.margin)){
+  /*if(Array.isArray(props.margin)){
     for(let i in props.margin){
       const unit = calcUnit(mediaPrefixes[i], 'm', props.margin[i])
       if(unit){
         arr.push(unit)
       }
     }
-  }
+  }*/
 
   if(Array.isArray(props.gap) && props.gap.length > 0){
     for(let i in props.gap){
@@ -215,6 +217,28 @@ const _applyClass = function(props, defaultClass = {}){
   return arr
 }
 
+const classFromProps = function(props){
+
+  return [
+    props.padding ? props.padding.join(' ') : '',
+    props.margin ? props.margin.join(' ') : '',
+    props.maxWidth ? props.maxWidth.join(' ') : '',
+    props.bgColors ? props.bgColors.join(' ') : '',
+    props.bgSize ? props.bgSize.join(' ') : '',
+    props.bgPosition ? props.bgPosition.join(' ') : '',
+    props.bgRepeat ? props.bgRepeat.join(' ') : '',
+    props.bdSize ? props.bdSize.join(' ') : '',
+    props.bdColor ? props.bdColor.join(' ') : '',
+    props.bdRadius ? props.bdRadius.join(' ') : '',
+    props.bdStyle ? props.bdStyle.join(' ') : '',
+    props.columns ? props.columns.join(' ') : '',
+    props.direction ? props.direction.join(' ') : '',
+    props.gap ? props.gap.join(' ') : '',
+  ]
+    .filter(_ => _)
+    .join(' ')
+}
+
 export {
   downsizeImage,
   uid,
@@ -225,7 +249,8 @@ export {
   getQueryString,
   accessNestedObject,
   mediaPrefixes,
-  _applyClass
+  _applyClass,
+  classFromProps
 }
 
 function observeInit(){