@mixd-id/web-scaffold 0.1.230406078 → 0.1.230406080

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mixd-id/web-scaffold",
   "private": false,
-  "version": "0.1.230406078",
+  "version": "0.1.230406080",
   "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/Button.vue

@@ -15,6 +15,7 @@
 <script>
 
 import {componentMixin} from "../mixin/component";
+import {classFromProps} from "../utils/helpers.mjs";
 
 export default{
 
@@ -51,6 +52,7 @@ export default{
 				this.$style['button-' + this.variant],
 				this.class ?? '',
 				parseInt(this.computedState) === 2 ? this.$style.loading : '',
+				classFromProps(this.$props)
 			]
 				.filter(_ => _)
 				.join(' ')

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/Datepicker.vue

@@ -1,6 +1,6 @@
 <template>
 
-  <div :class="className">
+  <div :class="compClass">
 
     <div v-if="mode === '' || mode === 'simple'">
 			<select v-model="DD">
@@ -17,10 +17,11 @@
 			</select>
     </div>
 
-		<div v-else-if="mode === 'popup'" ref="popup" @click="contextMenu = { caller:$refs.popup, value:this.modelValue }"
+		<div v-else-if="mode === 'popup'" ref="popup"
+				 @click="!readonly ? contextMenu = { caller:$refs.popup, value:this.modelValue } : null"
 				 class="flex-1">
 			<input class="flex-1" type="text" readonly :value="DMMMYYYY"/>
-			<div :class="$style.arrow">
+			<div :class="$style.arrow" v-if="!readonly">
 				<svg width="16" height="16" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
 					<path fill-rule="evenodd" clip-rule="evenodd" d="M4.96967 8.71967C5.26256 8.42678 5.73744 8.42678 6.03033 8.71967L11.8232 14.5126C11.9209 14.6102 12.0791 14.6102 12.1768 14.5126L17.9697 8.71967C18.2626 8.42677 18.7374 8.42677 19.0303 8.71967C19.3232 9.01256 19.3232 9.48743 19.0303 9.78033L13.2374 15.5732C12.554 16.2566 11.446 16.2566 10.7626 15.5732L4.96967 9.78033C4.67678 9.48744 4.67678 9.01256 4.96967 8.71967Z"/>
 				</svg>
@@ -133,7 +134,9 @@ export default{
       default: ''
     },
 
-    modelValue:String
+    modelValue:String,
+
+		readonly: undefined,
 
   },
 
@@ -147,13 +150,14 @@ export default{
 			return dayjs(this.contextMenu.value).format('YYYY-MM')
 		},
 
-    className(){
+    compClass(){
       return [
         this.$style.datepicker,
-        this.$style['mode-' + this.mode]
+        this.$style['mode-' + this.mode],
+				this.readonly ? this.$style.readonly : ''
       ]
-      .join(' ')
-      .trim()
+				.filter(_ => _)
+				.join(' ')
     },
 
 		contextMenuTitle(){
@@ -261,7 +265,10 @@ export default{
 	@apply h-[var(--h-cp)];
 	@apply flex items-center rounded-lg overflow-hidden cursor-pointer relative;
 	@apply border-[1px] border-text-200 bg-base-50;
-	@apply hover:border-text-300 cursor-pointer;
+	@apply cursor-pointer;
+}
+.datepicker:not(.readonly){
+	@apply hover:border-text-300
 }
 .datepicker select{
 	@apply appearance-none p-2 bg-transparent text-center w-full outline-none;

package/src/components/Dropdown.vue

@@ -2,15 +2,15 @@
 
 	<div :class="computedClass">
 
-		<select v-if="[ 1 ].includes(mode)" class="flex-1" ref="select" @change="onChanged" :disabled="disabled"
+		<select v-if="[ 1 ].includes(mode)" class="flex-1" ref="select" @change="onChanged" :disabled="isDisabled"
 						:value="modelValue" @input="$emit('update:modelValue', $event.target.value)">
 			<slot></slot>
 		</select>
 
-		<input v-else-if="[ 2, 'custom' ].includes(mode)" type="text" class="flex-1" readonly :disabled="disabled"
+		<input v-else-if="[ 2, 'custom' ].includes(mode)" type="text" class="flex-1" readonly :disabled="isDisabled"
 					 @click="openContextMenu" ref="input"
 					 :value="modelValue ?? value" @input="$emit('update:modelValue', $event.target.value)" />
-		<div :class="$style.arrow">
+		<div :class="$style.arrow" v-if="!isDisabled">
 			<svg width="16" height="16" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
 				<path fill-rule="evenodd" clip-rule="evenodd" d="M4.96967 8.71967C5.26256 8.42678 5.73744 8.42678 6.03033 8.71967L11.8232 14.5126C11.9209 14.6102 12.0791 14.6102 12.1768 14.5126L17.9697 8.71967C18.2626 8.42677 18.7374 8.42677 19.0303 8.71967C19.3232 9.01256 19.3232 9.48743 19.0303 9.78033L13.2374 15.5732C12.554 16.2566 11.446 16.2566 10.7626 15.5732L4.96967 9.78033C4.67678 9.48744 4.67678 9.01256 4.96967 8.71967Z"/>
 			</svg>
@@ -40,6 +40,8 @@ export default {
 
 		disabled: undefined,
 
+		readonly: undefined,
+
 		modelValue: undefined,
 
 		variant: String,
@@ -82,8 +84,14 @@ export default {
 				this.$style['state-' + this.computedState],
 				this.$style['variant-' + this.variant],
 				this.$style['size-' + this.size],
+				this.isDisabled ? this.$style.readonly : ''
 			]
+				.filter(_=>_)
 				.join(' ')
+		},
+
+		isDisabled(){
+			return this.disabled || this.readonly
 		}
 
 	},
@@ -152,7 +160,10 @@ export default {
 .dropdown{
 	@apply min-h-[var(--h-cp)];
 	@apply flex items-center rounded-lg overflow-hidden cursor-pointer relative;
-	@apply border-[1px] border-text-200 bg-base-50 hover:border-text-300;
+	@apply border-[1px] border-text-200 bg-base-50;
+}
+.dropdown:not(.readonly){
+	@apply hover:border-text-300;
 }
 
 .dropdown select,

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/components/Timepicker.vue

@@ -4,7 +4,7 @@
       <slot></slot>
     </div>
     <div class="flex-1">
-      <select @change="onChanged" ref="hour">
+      <select @change="onChanged" ref="hour" :disabled="readonly">
         <option v-for="_hour in 24" :value="(_hour - 1).toString().padStart(2, '0')"
           :selected="(_hour - 1) === computedHour">
           {{ (_hour - 1).toString().padStart(2, '0') }}
@@ -15,7 +15,7 @@
       <label>:</label>
     </div>
     <div class="flex-1">
-      <select @change="onChanged" ref="minute">
+      <select @change="onChanged" ref="minute" :disabled="readonly">
         <option v-for="_minute in 60" :value="(_minute - 1).toString().padStart(2, '0')"
           :selected="(_minute - 1) === computedMinute">
           {{ (_minute - 1).toString().padStart(2, '0') }}
@@ -34,6 +34,8 @@ export default{
       default: '00:00'
     },
 
+		readonly: undefined,
+
     size:{
       type: String,
       default: ''
@@ -45,10 +47,12 @@ export default{
 
     computedClass(){
       return [
-        'timepicker',
-        this.size !== '' ? 'timepicker-' + this.size : ''
+        this.$style.timepicker,
+        this.size !== '' ? 'timepicker-' + this.$style.size : '',
+				this.readonly ? this.$style.readonly : ''
       ]
-        .join(' ').trim()
+				.filter(_=>_)
+        .join(' ')
     },
 
     computedHour(){
@@ -75,7 +79,7 @@ export default{
 }
 </script>
 
-<style>
+<style module>
 
 .timepicker{
   @apply inline-flex flex-row items-center bg-base-50;
@@ -87,9 +91,12 @@ export default{
 
 .timepicker select{
   @apply w-full p-2 appearance-none bg-transparent outline-none;
-	@apply border-[1px] border-text-200 hover:border-text-300 rounded-lg;
+	@apply border-[1px] border-text-200 rounded-lg;
 	@apply text-center;
 }
+.timepicker:not(.readonly) select{
+	@apply hover:border-text-300;
+}
 
 .timepicker.timepicker-sm select{
   @apply text-sm p-1;
@@ -105,4 +112,4 @@ export default{
   @apply text-lg p-3;
 }
 
-</style>
+</style>

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")))