@mixd-id/web-scaffold 0.2.240705 → 0.2.250801009

package/src/widgets/WebComponentSelector.vue

@@ -69,13 +69,11 @@
 
 <script>
 
-import groupBy from "lodash/groupBy";
+import {groupBy} from "../utils/helpers.mjs";
 
 export default{
 
-  inject: [ 'confirm', 'imageSrc', 'socketEmit2' ],
-
-	emits: [ 'apply' ],
+  inject: [ 'confirm', 'imageSrc', 'socket', 'setUid' ],
 
 	props: {
 
@@ -88,10 +86,16 @@ export default{
 	methods: {
 
     apply(){
-			this.$emit('apply', {
-				...(this.params ?? {}),
-        component: JSON.parse(JSON.stringify(this.component))
-			})
+
+      const component = JSON.parse(JSON.stringify(this.component))
+      Object.assign(component.props, {
+        enabled: true
+      })
+      this.setUid(component)
+
+      if(typeof this.params?.callback === 'function')
+        this.params.callback(component)
+
 			this.close()
 		},
 
@@ -109,7 +113,7 @@ export default{
     load(){
       if(!this.componentSrc) return
 
-      this.socketEmit2(this.componentSrc, { type: 2 })
+      this.socket.send(this.componentSrc, { type: 2 })
         .then((res) => {
           const { items } = res ?? {}
 
@@ -128,7 +132,7 @@ export default{
     remove(template){
       this.confirm('Remove this template?', {
         onConfirm: () => {
-          this.socketEmit2('template.remove', template)
+          this.socket.send('template.remove', template)
               .then(_ => this.load())
               .catch(err => this.alert(err))
         }
@@ -171,7 +175,7 @@ export default{
 	data(){
 		return {
 			isOpen: false,
-			params: null,
+      params: null,
       types: 'All',
       search: '',
       component: null,

package/src/widgets/WebLayoutSelector.vue

@@ -1,8 +1,8 @@
 <template>
-	<Modal :state="isOpen" :width="computedWidth" height="600">
+	<Modal ref="modal" width="420" height="480">
 		<template v-slot:head>
 			<div class="relative p-6">
-				<h3>{{ $t('Choose Layout') }}</h3>
+				<h3>{{ $t('Create Layout') }}</h3>
 				<div class="absolute top-0 right-0 p-2">
 					<button type="button" class="p-2" @click="close">
 						<svg width="24" height="24" viewBox="0 0 24 24" class="fill-text-300 hover:fill-red-500" xmlns="http://www.w3.org/2000/svg">
@@ -12,51 +12,35 @@
 				</div>
 			</div>
 		</template>
-		<template v-slot:foot>
-			<div class="p-5 flex justify-end" v-if="viewMode === 2">
-				<Button class="w-[100px]"
-								ref="applyBtn"
-								:state="!canAdd ? -1 : 1"
-								@click="save">{{ $t('Apply') }}</Button>
-			</div>
-		</template>
-		<template #default>
-			<div v-if="viewMode === 1" class="flex-1 flex flex-col gap-4 p-6">
-
-				<div class="flex flex-col">
-					<div v-for="layout in layouts"
-							 :class="$style.layoutItem + (this.layoutId === layout.id ? ' ' + $style.active : '')">
-						<div class="flex-1" @click="apply(layout)">
-							{{ layout.name }}
-						</div>
-						<button type="button" class="px-2 bg-red-100" @click="remove(layout)">
-							<svg width="14" height="14" class="fill-text-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><g class="nc-icon-wrapper"><path d="M268 416h24a12 12 0 0 0 12-12V188a12 12 0 0 0-12-12h-24a12 12 0 0 0-12 12v216a12 12 0 0 0 12 12zM432 80h-82.41l-34-56.7A48 48 0 0 0 274.41 0H173.59a48 48 0 0 0-41.16 23.3L98.41 80H16A16 16 0 0 0 0 96v16a16 16 0 0 0 16 16h16v336a48 48 0 0 0 48 48h288a48 48 0 0 0 48-48V128h16a16 16 0 0 0 16-16V96a16 16 0 0 0-16-16zM171.84 50.91A6 6 0 0 1 177 48h94a6 6 0 0 1 5.15 2.91L293.61 80H154.39zM368 464H80V128h288zm-212-48h24a12 12 0 0 0 12-12V188a12 12 0 0 0-12-12h-24a12 12 0 0 0-12 12v216a12 12 0 0 0 12 12z"></path></g></svg>
-						</button>
-					</div>
-				</div>
 
-				<button type="button" class="w-full text-primary p-3 flex flex-row items-center justify-center gap-1"
-					@click="create">
-					<svg width="14" height="14" class="fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M376 232H216V72c0-4.42-3.58-8-8-8h-32c-4.42 0-8 3.58-8 8v160H8c-4.42 0-8 3.58-8 8v32c0 4.42 3.58 8 8 8h160v160c0 4.42 3.58 8 8 8h32c4.42 0 8-3.58 8-8V280h160c4.42 0 8-3.58 8-8v-32c0-4.42-3.58-8-8-8z"/></svg>
-					Create New
-				</button>
-
-			</div>
-			<div v-else-if="viewMode === 2" class="flex-1 flex flex-row">
-
-				<div class="flex-1 flex flex-col p-6">
-					<div class="grid grid-cols-4 gap-2">
-						<div v-for="template in _templates"
-								 :class="$style.templateItem + (selectedTemplate === template ? ' ' + $style.active : '')"
-								 @click="selectedTemplate = template">
-							<Image :src="template.imageUrl" class="aspect-[1/2]"/>
-							<label>{{ template.layout.name }} </label>
-						</div>
-					</div>
-				</div>
+		<template #default>
+			<div class="flex-1 p-6 flex flex-col gap-6">
+
+        <div>
+          <label class="text-text-400">Name</label>
+          <Textbox v-model="instance.title" />
+        </div>
+
+        <div>
+          <label class="text-text-400">Layouts</label>
+          <div class="grid grid-cols-4 gap-2 mt-3">
+            <Radio v-for="(template, index) in templates" v-model="instance.templateIndex" :value="index">
+              {{ template.layout.name }}
+            </Radio>
+          </div>
+        </div>
 
 			</div>
 		</template>
+
+    <template v-slot:foot>
+      <div class="p-5 flex">
+        <Button class="w-[100px]"
+                ref="applyBtn"
+                :state="canApply ? 1 : -1"
+                @click="apply">{{ $t('Create') }}</Button>
+      </div>
+    </template>
 	</Modal>
 </template>
 
@@ -66,12 +50,10 @@ export default{
 
 	emits: [ 'apply' ],
 
-	inject: [ 'alert', 'confirm', 'socketEmit2' ],
+	inject: [ 'alert', 'confirm' ],
 
 	props: {
 
-		layouts: Array,
-
 		templates: {
 			type: Array,
 			default: [
@@ -83,182 +65,6 @@ export default{
 						footers: []
 					}
 				},
-				{
-					imageUrl: '/assets/templates/layout1.png',
-					layout: {
-						name: 'Nike',
-						headers: [
-							{
-								"type": "Flex",
-								"name": "Flex",
-								"group": "Layouts",
-								"items": [
-									{
-										"type": "Image",
-										"name": "Image",
-										"group": "Components",
-										"props": {
-											"src": [
-												"66aafad893b123b69dfcf4ef0f850537.png"
-											],
-											"enabled": true,
-											"aspectRatio": [],
-											"display": [],
-											"opacity": [],
-											"padding": [],
-											"margin": [],
-											"width": [],
-											"minWidth": [],
-											"maxWidth": [],
-											"height": [
-												"h-10vh"
-											],
-											"minHeight": [],
-											"maxHeight": [],
-											"overflow": [],
-											"colSpan": [],
-											"bgColors": [],
-											"bgImage": [
-												{},
-												{}
-											],
-											"bgSize": [],
-											"bgPosition": [],
-											"bgRepeat": [],
-											"bdSize": [],
-											"bdColor": [],
-											"bdRadius": [],
-											"bdStyle": [],
-											"boxShadow": []
-										},
-										"uid": "e9431764daac79e6d12eaaffb6db048b",
-										"instance": {
-											"type": "Image",
-											"uid": "e9431764daac79e6d12eaaffb6db048b",
-											"class": "h-10vh",
-											"src": [
-												"66aafad893b123b69dfcf4ef0f850537.png"
-											],
-											"bgImage": [
-												{},
-												{}
-											]
-										}
-									}
-								],
-								"props": {
-									"flexColumns": [],
-									"direction": [
-										"flex-col"
-									],
-									"gap": [],
-									"enabled": true,
-									"display": [],
-									"opacity": [],
-									"padding": [],
-									"margin": [],
-									"width": [],
-									"minWidth": [],
-									"maxWidth": [],
-									"height": [],
-									"minHeight": [],
-									"maxHeight": [],
-									"overflow": [],
-									"colSpan": [],
-									"bgColors": [
-										"bg-white"
-									],
-									"bgImage": [
-										{},
-										{}
-									],
-									"bgSize": [],
-									"bgPosition": [],
-									"bgRepeat": [],
-									"bdSize": [],
-									"bdColor": [],
-									"bdRadius": [],
-									"bdStyle": [],
-									"boxShadow": []
-								},
-								"uid": "f121447f5dbb20f624b2cc1c45508005",
-								"instance": {
-									"type": "Flex",
-									"uid": "f121447f5dbb20f624b2cc1c45508005",
-									"class": "bg-white flex-col",
-									"flexColumns": [],
-									"bgImage": [
-										{},
-										{}
-									],
-									"items": [
-										{
-											"type": "Image",
-											"name": "Image",
-											"group": "Components",
-											"props": {
-												"src": [
-													"66aafad893b123b69dfcf4ef0f850537.png"
-												],
-												"enabled": true,
-												"aspectRatio": [],
-												"display": [],
-												"opacity": [],
-												"padding": [],
-												"margin": [],
-												"width": [],
-												"minWidth": [],
-												"maxWidth": [],
-												"height": [
-													"h-10vh"
-												],
-												"minHeight": [],
-												"maxHeight": [],
-												"overflow": [],
-												"colSpan": [],
-												"bgColors": [],
-												"bgImage": [
-													{},
-													{}
-												],
-												"bgSize": [],
-												"bgPosition": [],
-												"bgRepeat": [],
-												"bdSize": [],
-												"bdColor": [],
-												"bdRadius": [],
-												"bdStyle": [],
-												"boxShadow": []
-											},
-											"uid": "e9431764daac79e6d12eaaffb6db048b",
-											"instance": {
-												"type": "Image",
-												"uid": "e9431764daac79e6d12eaaffb6db048b",
-												"class": "h-10vh",
-												"src": [
-													"66aafad893b123b69dfcf4ef0f850537.png"
-												],
-												"bgImage": [
-													{},
-													{}
-												]
-											}
-										}
-									]
-								}
-							}
-						],
-						footers: []
-					}
-				},
-				{
-					imageUrl: '/assets/templates/layout2.png',
-					layout: {
-						name: 'Apple',
-						headers: [],
-						footers: []
-					}
-				},
 			]
 		}
 
@@ -266,73 +72,38 @@ export default{
 
 	data(){
 		return {
-			isOpen: false,
-			selectedTemplate: null,
-			_templates: null,
-			viewMode: 1,
-			layoutId: null
+			instance: null,
 		}
 	},
 
 	methods: {
 
-		create(){
-			this.viewMode = 2
-			this.isOpen = true
-		},
-
-		open(layoutId){
-			this.viewMode = 1
-			this.isOpen = true
-			this.layoutId = layoutId
-		},
-
-		remove(layout){
-			this.confirm(this.$t('Remove this?'), {
-				onConfirm: () => {
-					this.socketEmit2('layout.remove', { id: layout.id })
-						.then(() => {
-							this.layouts.splice(this.layouts.indexOf(layout), 1)
-						})
-						.catch(err => this.alert(err))
-				}
-			})
+		create(obj = {}){
+      this.instance = obj
+      this.$refs.modal.open()
 		},
 
 		close(){
-			this.isOpen = false
-		},
-
-		resetState(){
-			if(this.$refs.applyBtn)
-				this.$refs.applyBtn.resetState()
-		},
-
-		apply(layout){
-			this.$emit('apply', layout)
-			this.close()
+      this.$refs.modal.close()
 		},
 
-		save(){
-			this.$refs.applyBtn.setState(2)
-			this.socketEmit2('layout.create', this.selectedTemplate.layout)
-				.then(({ layout }) => {
-					this.layouts.push(layout)
-					this.apply(layout)
-				})
-				.catch(err => this.alert(err))
+		apply(){
+			this.$emit('apply', {
+        title: this.instance.title,
+        ...(this.templates[this.instance.templateIndex].layout)
+      })
 		}
 
 	},
 
 	computed: {
 
-		canAdd(){
-			return this.selectedTemplate
+		canApply(){
+			return this.instance
 		},
 
 		computedWidth(){
-			return this.viewMode === 1 ? '480' : '800';
+			return 520;
 		}
 
 	},