@mixd-id/web-scaffold 0.1.230406077 → 0.1.230406078

package/package.json

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

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

@@ -22,6 +22,8 @@ export default{
 
 	props: {
 
+		class: String,
+
 		variant: {
 			type: [ String, Number ],
 			default: "primary" // primary|secondary|outline, default:primary
@@ -46,9 +48,11 @@ export default{
 
 			return [
 				this.$style.button,
-				'button-' + this.variant,
+				this.$style['button-' + this.variant],
+				this.class ?? '',
 				parseInt(this.computedState) === 2 ? this.$style.loading : '',
 			]
+				.filter(_ => _)
 				.join(' ')
 		},
 
@@ -65,7 +69,7 @@ export default{
 		},
 
 		widths(){
-			if(!Array.isArray(this.width)) return []
+			if(!Array.isArray(this.width)) return [ '', '' ]
 
 			return [
 				this.width[0] ?? '',
@@ -107,10 +111,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 +252,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 +281,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/widgets/CarouselSetting.vue

@@ -58,11 +58,7 @@
 					<label class="text-text-400">Autoplay</label>
 					<Dropdown v-model="item.props.autoPlay" class="mt-1" @change="$emit('change')">
 						<option value="0">None</option>
-						<option value="1000">1 seconds</option>
-						<option value="4000">4 seconds</option>
-						<option value="6000">6 seconds</option>
-						<option value="8000">8 seconds</option>
-						<option value="10000">10 seconds</option>
+						<option v-for="i in 10" :value="i * 1000">{{ i }} seconds</option>
 					</Dropdown>
 				</div>
 

package/src/widgets/WebPageBuilder.vue

@@ -98,6 +98,12 @@
 					</div>
 				</div>
 
+				<div v-if="store.layoutMode && layout && useStyle" class="flex flex-row gap-2">
+					<label class="flex-1 text-text-400">{{ $t('Style')}}</label>
+					<button type="button" class="text-primary"
+									@click="store.selectedComponent = [ 'style' ]">Edit Style</button>
+				</div>
+
 				<div v-if="store.layoutMode && layout">
 					<div class="flex flex-row gap-2">
 						<label class="flex-1 text-text-400">{{ $t('Header')}}</label>
@@ -398,7 +404,9 @@ export default{
 		excludeComponents: {
 			type: Array,
 			default: []
-		}
+		},
+
+		useStyle: Boolean
 
 	},