@mixd-id/web-scaffold 0.1.230406080 → 0.1.230406082

package/package.json

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

package/src/components/Ahref.vue

@@ -12,11 +12,8 @@
 export default {
 
 	props: {
-
 		href: String,
-
 		target: String
-
 	},
 
 	computed: {
@@ -31,4 +28,4 @@ export default {
 <style module>
 
 
-</style>
+</style>

package/src/components/Block.vue

@@ -7,26 +7,21 @@
 							 :items="item.items"
 							 :="item.props" />
 
-		Block
-
 	</div>
 </template>
 
 <script>
 
-import {classFromProps} from "../utils/helpers.mjs";
+import {componentMixin} from "../mixin/component";
 
 export default{
 
+	mixins: [ componentMixin ],
+
 	props:{
 		class: String,
 		items: Array,
-		padding: Array,
-		margin: Array,
-		display: Array,
 		type: String,
-		enabled: undefined,
-		name: String
 	},
 
 	computed: {
@@ -38,8 +33,8 @@ export default{
 		compClass(){
 			return [
 				this.$style.comp,
-				this.class ?? '',
-				classFromProps(this.$props)
+				this.extClass,
+				this.class ?? ''
 			]
 				.filter(_ => _)
 				.join(' ')
@@ -54,6 +49,14 @@ export default{
 <style module>
 
 .comp{
+	@apply block;
+	background-image: v-bind(bgImages[0]);
+}
+
+@media screen(md){
+	.comp{
+		background-image: v-bind(bgImages[1]);
+	}
 }
 
 </style>

package/src/components/Box.vue

@@ -1,12 +1,12 @@
 <template>
-	<div :class="computedClass">
-		<Button class="p-1" @click="log('OK')">Box Button</Button>
+	<div :class="compClass">
+		<br />
+		<br />
 	</div>
 </template>
 
 <script>
 
-import {_applyClass} from "../utils/helpers.mjs";
 import { componentMixin } from '../mixin/component';
 
 export default{
@@ -24,14 +24,12 @@ export default{
 
 	computed: {
 
-		computedClass(){
-			const classNames = [
-				this.$style.comp
+		compClass(){
+			return [
+				this.$style.comp,
+				this.extClass
 			]
-
-			classNames.push(..._applyClass(this.$props, { display:'flex' }))
-
-			return classNames.join(' ')
+				.join(' ')
 		},
 
 	}
@@ -44,20 +42,12 @@ export default{
 
 .comp{
 	@apply 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]);
 	}
 }
 

package/src/components/Button.vue

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

package/src/components/Carousel.vue

@@ -32,7 +32,7 @@
 
 <script>
 
-import {_applyClass, parseBoolean} from "../utils/helpers.mjs";
+import {parseBoolean} from "../utils/helpers.mjs";
 import {componentMixin} from "../mixin/component";
 
 export default{
@@ -68,7 +68,7 @@ export default{
 		compClass(){
 			return [
 				this.$style.comp,
-				..._applyClass(this.$props)
+				this.extClass
 			]
 				.filter(_ => _)
 				.join(' ')
@@ -336,7 +336,7 @@ export default{
 	@apply bg-primary;
 }
 
-@media screen and (min-width: 768px){
+@media screen(md){
 	.comp{
 		background-image: v-bind(bgImages[1]);
 	}

package/src/components/ColorPicker.vue

@@ -1,24 +1,23 @@
 <template>
 	<div :class="$style.comp">
-		<div :class="`${$style.circle} ${modelValue}`" @click="$refs.contextMenu.open($refs.btn)"
+		<div :class="circleClass" :style="circleStyle"
+				 @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="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 class="grid grid-cols-10 gap-4">
+					<div v-for="color in colors">
+						<div v-if="mode === 'class'" :class="`${$style.circle} bg-${color}`"
+								 @click="select(`${color}`)"></div>
 					</div>
 				</div>
 				<div class="grid grid-cols-2 gap-4">
 					<button type="button" @click="select('transparent')"
 									class="w-full p-1 border-text-100 border-[1px] rounded-lg">None</button>
-					<button type="button" v-if="Boolean(customColor)"
+					<button type="button" v-if="mode !== 'class' && Boolean(customColor)"
 									class="w-full p-1 border-text-100 border-[1px] rounded-lg"
 									@click="$refs.inputColor.click()">Custom</button>
 				</div>
@@ -36,23 +35,30 @@ export default{
 
 	props: {
 
+		mode: {
+			type: String,
+			default: 'class' // class|hex
+		},
+
 		colors: {
 			type: Array,
 			default: [
-				'primary',
-				'gray',
-				'red',
-				'amber',
-				'lime',
-				'blue',
+				'primary-50', 'primary-100', 'primary-200', 'primary-300', 'primary-400', 'primary-500',
+				'primary-600', 'primary-700', 'primary-800', 'primary-900',
+				'gray-50', 'gray-100', 'gray-200', 'gray-300', 'gray-400', 'gray-500', 'gray-600', 'gray-700',
+				'gray-800', 'gray-900',
+				'red-50', 'red-100', 'red-200', 'red-300', 'red-400', 'red-500', 'red-600', 'red-700',
+				'red-800', 'red-900',
+				'amber-50', 'amber-100', 'amber-200', 'amber-300', 'amber-400', 'amber-500', 'amber-600',
+				'amber-700', 'amber-800', 'amber-900',
+				'lime-50', 'lime-100', 'lime-200','lime-300', 'lime-400', 'lime-500', 'lime-600', 'lime-700',
+				'lime-800', 'lime-900',
+				'blue-50', 'blue-100', 'blue-200', 'blue-300', 'blue-400', 'blue-500', 'blue-600', 'blue-700',
+				'blue-800', 'blue-900',
+				'black', 'white', 'transparent',
 			]
 		},
 
-		steps: {
-			type: Array,
-			default: [ 50, 100, 200, 300, 400, 500, 600, 700, 800, 900 ]
-		},
-
 		customColor: undefined,
 
 		modelValue: String,
@@ -64,7 +70,12 @@ export default{
 	methods: {
 
 		select(color){
-			this.$emit('update:modelValue', this.prefix + color)
+			if(this.mode === 'class'){
+				this.$emit('update:modelValue', this.prefix + color)
+			}
+			else{
+				this.$emit('update:modelValue', color)
+			}
 			this.$emit('change')
 			this.$refs.contextMenu.close()
 		}
@@ -76,6 +87,25 @@ export default{
 		customColorCount(){
 			const count = parseInt(this.customColor)
 			return isNaN(count) ? 0 : count
+		},
+
+		circleClass(){
+			return [
+				this.$style.circle,
+				this.mode === 'class' ?
+					(this.modelValue ?? '').replace('text-', 'bg-').replace('border-', 'bg-') :
+					''
+			]
+				.filter(_=>_)
+				.join(' ')
+		},
+
+		circleStyle(){
+			if(this.mode !== 'class'){
+				return {
+					'background-color': this.modelValue ?? ''
+				}
+			}
 		}
 
 	},

package/src/components/ContextMenu.vue

@@ -259,6 +259,8 @@ export default {
 		},
 
 		close(fn){
+			if(!this.$refs.contextMenu) return
+
 			const transitionEnd = () => {
 				window.removeEventListener('click', this.onDismiss)
 				window.removeEventListener('scroll', this.onDismiss)

package/src/components/Flex.vue

@@ -1,11 +1,12 @@
 <template>
-	<div :class="computedClass">
+	<div :class="computedClass" :style="computedStyle">
 
 		<component v-for="(item, idx) in computedItems"
 							 :is="item.type"
 							 :uid="item.uid"
 							 :items="item.items"
 							 :="item.props"
+							 :ext-class="item.extClass"
 							 :class="itemClass(idx)" />
 
 	</div>
@@ -14,7 +15,6 @@
 
 <script>
 
-import {_applyClass, classFromProps, mediaPrefixes} from "../utils/helpers.mjs";
 import {componentMixin} from "../mixin/component";
 
 export default{
@@ -24,15 +24,7 @@ export default{
 	props:{
 		items: Array,
 		flexColumns: Array,
-		type: Array,
 		columnType: Array,
-		columns: Array,
-		gap: Array,
-		padding: Array,
-		margin: Array,
-		display: Array,
-		enabled: undefined,
-		name: String
 	},
 
 	computed: {
@@ -44,17 +36,10 @@ export default{
 		computedClass(){
 
 			const classNames = [
-				this.$style.comp
+				this.$style.comp,
+				this.extClass
 			]
 
-			if(Array.isArray(this.type)){
-				for(let i in this.type){
-					classNames.push(mediaPrefixes[i] + 'flex-' + this.type[i])
-				}
-			}
-
-			classNames.push(..._applyClass(this.$props))
-
 			return classNames.join(' ')
 		}
 
@@ -65,11 +50,6 @@ export default{
 		itemClass(idx){
 			return (this.flexColumns[idx] ?? []).join(' ')
 		},
-	},
-
-	data(){
-		return {
-		}
 	}
 
 }
@@ -80,13 +60,6 @@ export default{
 
 .comp{
 	@apply flex;
-	background-image: v-bind(bgImages[0]);
-}
-
-@media screen and (min-width: 768px){
-	.comp{
-		background-image: v-bind(bgImages[1]);
-	}
 }
 
 </style>

package/src/components/Grid.vue

@@ -5,14 +5,14 @@
 							 :is="item.type"
 							 :uid="item.uid"
 							 :items="item.items"
-							 :="item.props" />
+							 :="item.props"
+							 :ext-class="item.extClass" />
 
   </div>
 </template>
 
 <script>
 
-import {_applyClass} from "../utils/helpers.mjs";
 import {componentMixin} from "../mixin/component";
 
 export default{
@@ -20,15 +20,7 @@ export default{
 	mixins: [ componentMixin ],
 
 	props:{
-		items: Array,
-		columns: Array,
-		gap: Array,
-		padding: Array,
-		margin: Array,
-		display: Array,
-		type: String,
-		enabled: undefined,
-		name: String
+		items: Array
 	},
 
   computed:{
@@ -40,8 +32,9 @@ export default{
     compClass(){
 			return [
 				this.$style.comp,
-				..._applyClass(this.$props)
+				this.extClass
 			]
+				.filter(_=>_)
 				.join(' ')
     }
 
@@ -59,47 +52,12 @@ export default{
 
 .comp{
 	@apply grid w-full;
-
-	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){
+@media screen(md){
 	.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/HTMLEditor.vue

@@ -441,6 +441,7 @@ export default{
 			//html = html.replaceAll("<a ", "<Ahref ").replaceAll("</a>", "</Ahref>")
 
 			this.$emit('update:modelValue', html)
+			this.$emit('change')
 		}
 
 	}

package/src/components/Image.vue

@@ -19,7 +19,6 @@
 <script>
 
 import {componentMixin} from "../mixin/component";
-import {_applyClass} from "../utils/helpers.mjs";
 
 const screens = {
 	0: 'all',
@@ -69,16 +68,15 @@ export default{
   computed:{
 
 		compClass(){
-			const classNames = [
+			return [
 				this.$style.comp,
-				this.class,
 				this.status === 1 && this.spinnerType === 'shimmer' && !this.$slots['loading'] ?
-					this.$style.shimmer : ''
+					this.$style.shimmer : '',
+				this.extClass,
+				this.class ?? ''
 			]
-
-			classNames.push(..._applyClass(this.$props))
-
-			return classNames.join(' ')
+				.filter(_=>_)
+				.join(' ')
 		},
 
 		imgClass(){

package/src/components/Paragraph.vue

@@ -0,0 +1,51 @@
+<template>
+	<div :class="compClass" v-html="htmlText"></div>
+</template>
+
+<script>
+
+import { componentMixin } from '../mixin/component';
+
+export default{
+
+	mixins: [ componentMixin ],
+
+	props: {
+
+		htmlText: String
+
+	},
+
+	computed: {
+
+		compClass(){
+			return [
+				this.$style.comp,
+				this.extClass,
+				'text-xl'
+			]
+				.join(' ')
+		},
+
+	}
+
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+	background-image: v-bind(bgImages[0]);
+}
+.comp *{
+}
+
+@media screen(md){
+	.comp{
+		background-image: v-bind(bgImages[1]);
+	}
+}
+
+</style>

package/src/components/TextBlock.vue

@@ -0,0 +1,44 @@
+<template>
+	<span :class="compClass">
+		{{ text }}
+	</span>
+</template>
+
+<script>
+
+import {componentMixin} from "../mixin/component";
+
+export default{
+
+	mixins: [ componentMixin ],
+
+	props: {
+
+		text: String
+
+	},
+
+	computed: {
+
+		compClass(){
+			return [
+				this.$style.comp,
+				this.extClass
+			]
+				.filter(_=>_)
+				.join()
+		}
+
+	}
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+
+}
+
+</style>

package/src/components/TreeViewItem.vue

@@ -14,10 +14,10 @@
 				</button>
 			</div>
 			<slot :item="item"></slot>
-			<button type="button" class="py-3" @click="$emit('remove')">
+			<button type="button" class="py-2" @click="$emit('remove')">
 				<svg width="16" height="16" class="fill-text-300 hover:fill-red-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M193.94 256L296.5 153.44l21.15-21.15c3.12-3.12 3.12-8.19 0-11.31l-22.63-22.63c-3.12-3.12-8.19-3.12-11.31 0L160 222.06 36.29 98.34c-3.12-3.12-8.19-3.12-11.31 0L2.34 120.97c-3.12 3.12-3.12 8.19 0 11.31L126.06 256 2.34 379.71c-3.12 3.12-3.12 8.19 0 11.31l22.63 22.63c3.12 3.12 8.19 3.12 11.31 0L160 289.94 262.56 392.5l21.15 21.15c3.12 3.12 8.19 3.12 11.31 0l22.63-22.63c3.12-3.12 3.12-8.19 0-11.31L193.94 256z"/></svg>
 			</button>
-			<button type="button" class="py-3" v-if="Array.isArray((item ?? {}).items) && item.items.length > 0"
+			<button type="button" class="py-2" v-if="Array.isArray((item ?? {}).items) && item.items.length > 0"
 				@click="childCollapsed = !childCollapsed">
 				<svg v-if="!childCollapsed" width="16" height="16" class="fill-text-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"/></svg>
 				<svg v-else width="16" height="16" class="fill-text-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192 512"><path d="M0 384.662V127.338c0-17.818 21.543-26.741 34.142-14.142l128.662 128.662c7.81 7.81 7.81 20.474 0 28.284L34.142 398.804C21.543 411.404 0 402.48 0 384.662z"/></svg>