@mixd-id/web-scaffold 0.2.240706 → 0.2.250801010

package/src/widgets/Header2.vue

@@ -1,66 +1,42 @@
 <template>
-	<div :class="$style.comp">
-    <div class="flex-1 flex md:max-w-[200px]">
-      <Image :src="logoUrl" class="h-[48px]"/>
-      <Modal ref="mobileMenu" dismissable="true" position="right" @dismiss="$refs.mobileMenu.close()"
-             class="w-full max-w-[80vw] h-screen max-h-[100vh] rounded-none">
-        <template v-slot:head>
-          <div class="p-5 pb-0">
-            <div class="flex flex-row gap-3 items-center p-3">
-              <h5 class="flex-1"></h5>
-              <button type="button" @click="$refs.mobileMenu.close()">
-                <svg width="21" height="21" class="fill-text" 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>
-            </div>
-          </div>
-        </template>
-        <template #foot>
-          <div class="p-5 flex flex-col gap-4">
-            <p class="leading-relaxed" v-html="loginHtml"></p>
-            <div class="flex flex-row gap-2">
-              <Button class="px-5">{{ registerText ?? $t('Register') }}</Button>
-              <Button class="px-5" variant="outline">{{ loginText ?? $t('Sign In')}}</Button>
-            </div>
-            <br />
-          </div>
-        </template>
-        <div class="flex-1 p-5 flex flex-col gap-6">
+	<div :class="$style.comp"
+       :style="computedStyle">
+    <div class="flex flex-row items-center md:hidden">
+      <slot name="mobileMenu">
+        <component v-for="comp in slots.mobileMenu"
+                   :is="`${comp.type}`"
+                   :key="comp.uid"
+                   :="comp" />
+      </slot>
+    </div>
 
-          <div>
-            <div v-for="item in menu" class="flex flex-col">
-              <div class="flex flex-row gap-3 items-center p-3">
-                <h5 class="flex-1">{{ item.text }}</h5>
-                <svg width="16" height="16" class="fill-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512"><path d="M17.525 36.465l-7.071 7.07c-4.686 4.686-4.686 12.284 0 16.971L205.947 256 10.454 451.494c-4.686 4.686-4.686 12.284 0 16.971l7.071 7.07c4.686 4.686 12.284 4.686 16.97 0l211.051-211.05c4.686-4.686 4.686-12.284 0-16.971L34.495 36.465c-4.686-4.687-12.284-4.687-16.97 0z"/></svg>
-              </div>
-              <div v-if="item.items" class="ml-4">
-                <div v-for="item in item.items" class="flex flex-row gap-3 items-center p-3">
-                  <h5 class="flex-1">{{ item.text }}</h5>
-                </div>
-              </div>
-            </div>
-          </div>
+    <div class="flex flex-1 md:flex-none">
+      <slot name="left">
+        <component v-for="comp in slots.left"
+                   :is="`${comp.type}`"
+                   :key="comp.uid"
+                   :="comp" />
+      </slot>
+    </div>
 
-        </div>
-      </Modal>
+    <div class="hidden flex-1 md:flex flex-row justify-center">
+      <slot name="mid">
+        <component v-for="comp in slots.mid"
+                   :is="`${comp.type}`"
+                   :key="comp.uid"
+                   :="comp" />
+      </slot>
     </div>
 
-    <div class="hidden flex-1 md:flex flex-row gap-4">
-      <div v-for="item in menu" class="px-3">
-        <h5>{{ item.text }}</h5>
-      </div>
+    <div>
+      <slot name="right">
+        <component v-for="comp in slots.right"
+                   :is="`${comp.type}`"
+                   :key="comp.uid"
+                   :="comp" />
+      </slot>
     </div>
 
-		<div class="flex flex-row items-center">
-      <button type="button" v-for="icon in icons" class="p-2">
-        <Image :src="imageSrc(icon.imageUrl)" class="w-[28px] aspect-square" :edit-selectable="false" />
-      </button>
-			<button class="p-4" @click="$refs.mobileMenu.open()">
-				<svg width="28" height="28" class="fill-text" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-					<path fill-rule="evenodd" clip-rule="evenodd" d="M4.25 16C4.25 15.5858 4.58579 15.25 5 15.25H19C19.4142 15.25 19.75 15.5858 19.75 16C19.75 16.4142 19.4142 16.75 19 16.75H5C4.58579 16.75 4.25 16.4142 4.25 16Z"/>
-					<path fill-rule="evenodd" clip-rule="evenodd" d="M4.25 8C4.25 7.58579 4.58579 7.25 5 7.25H19C19.4142 7.25 19.75 7.58579 19.75 8C19.75 8.41421 19.4142 8.75 19 8.75H5C4.58579 8.75 4.25 8.41421 4.25 8Z"/>
-				</svg>
-			</button>
-		</div>
 	</div>
 </template>
 
@@ -73,20 +49,7 @@ export default{
 	mixins: [ componentMixin ],
 
 	props: {
-		images: Object,
-    menu: Array,
-    icons: Array,
-    loginHtml: String,
-    loginText: String,
-    registerText: String,
-	},
-
-	computed: {
-
-		logoUrl(){
-			return import.meta.env.VITE_IMAGE_HOST + '/' + (this.images ?? {}).logo
-		}
-
+    slots: Object,
 	}
 
 }
@@ -96,7 +59,7 @@ export default{
 <style module>
 
 .comp{
-	@apply bg-white flex flex-row items-center;
+	@apply flex flex-row items-center p-4 md:px-8;
 }
 
 </style>

package/src/widgets/Header2Setting.vue

@@ -1,218 +1,108 @@
 <template>
-	<div class="flex flex-col gap-6">
+  <div :class="$style.comp">
 
-		<div class="flex flex-col gap-6">
+    <div class="p-6 flex flex-col gap-6">
 
       <div>
-        <div class="flex flex-row gap-2">
-          <label class="text-text-400 flex-1">Logo</label>
-          <button type="button" class="text-primary" @click="$refs.image.edit()">Change</button>
-        </div>
-        <div class="mt-1">
-          <div :class="$style.imageBg">
-            <Image ref="image" :src="logoSrc"
-                   class="w-[100px] min-h-[48px]"
-                   :editable="true"
-                   @click="$refs.image.edit()"
-                   @change="(base64, file) => { uploadImage(file).then((res) => item.props.images.logo = res.name); $emit('change') }" />
+        <div class="flex flex-row items-start">
+          <div>
+            <label class="text-text-400 flex-1">Left Area</label>
+            <p class="text-sm text-text-400">Container for left area of header, usually for logo image</p>
           </div>
+          <button type="button"
+                  class="text-primary text-sm"
+                  @click="openComponentSelector({ callback:(component) => item.slots.left.push(component) })">
+            Add
+          </button>
         </div>
+        <TreeView class="mt-2"
+                  v-model="item.slots.left"
+                  @add="(items) => openComponentSelector({ callback:(component) => items.push(component) })"
+                  @duplicate="duplicate">
+          <template #default="{ item }">
+            <div class="flex-1 text-ellipsis whitespace-nowrap overflow-hidden"
+                 :class="!item.props.enabled ? 'line-through' : ''"
+                 @click="openRightPane2(item)">
+              {{ item.name ?? item.type }}
+            </div>
+          </template>
+        </TreeView>
       </div>
 
       <div>
-        <div class="flex flex-row gap-2 items-center">
-          <label class="text-text-400 flex-1">Menu</label>
+        <div class="flex flex-row items-start">
+          <div>
+            <label class="text-text-400 flex-1">Mid Area</label>
+            <p class="text-sm text-text-400">Container for mid area, not displayed in mobile view, usually for main menu</p>
+          </div>
           <button type="button"
-                  class="text-primary flex flex-row gap-1 px-1"
-                  @click="$refs.menuEdit.open({ target:menu, item:{ items:[] } })">
-            <svg width="16" height="16" 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>
+                  class="text-primary text-sm"
+                  @click="openComponentSelector({ callback:(component) => item.slots.mid.push(component) })">
             Add
           </button>
         </div>
         <TreeView class="mt-2"
-                  v-model="menu"
-                  @add="(items) => $refs.menuEdit.open({ target:items, item:{} })"
-                  @change="$emit('change')">
-          <template #default="{ item, parent }">
-            <div class="flex-1 flex flex-row gap-2"
-                 @click="$refs.menuEdit.open({ target:parent, item, index:parent.indexOf(item) })">
-              <div class="flex-1">
-                {{ item.text }}
-              </div>
+                  v-model="item.slots.mid"
+                  @add="(items) => openComponentSelector({ callback:(component) => items.push(component) })"
+                  @duplicate="duplicate">
+          <template #default="{ item }">
+            <div class="flex-1 text-ellipsis whitespace-nowrap overflow-hidden"
+                 :class="!item.props.enabled ? 'line-through' : ''"
+                 @click="openRightPane2(item)">
+              {{ item.name ?? item.type }}
             </div>
           </template>
         </TreeView>
-
-        <Modal ref="menuEdit" class="w-[360px] h-[360px]">
-          <template v-slot:head>
-            <div class="relative p-5">
-              <h3>Menu Setting</h3>
-              <div class="absolute top-0 right-0 p-2">
-                <button type="button" class="p-2" @click="$refs.menuEdit.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">
-                    <path d="M6.53034 5.46965C6.23745 5.17676 5.76257 5.17676 5.46968 5.46965C5.17679 5.76255 5.17679 6.23742 5.46968 6.53031L10.9393 12L5.46967 17.4697C5.17678 17.7626 5.17678 18.2374 5.46967 18.5303C5.76256 18.8232 6.23744 18.8232 6.53033 18.5303L12 13.0606L17.4697 18.5303C17.7626 18.8232 18.2375 18.8232 18.5303 18.5303C18.8232 18.2374 18.8232 17.7626 18.5303 17.4697L13.0607 12L18.5303 6.53032C18.8232 6.23743 18.8232 5.76256 18.5303 5.46966C18.2374 5.17677 17.7626 5.17677 17.4697 5.46966L12 10.9393L6.53034 5.46965Z"/>
-                  </svg>
-                </button>
-              </div>
-            </div>
-          </template>
-          <template #foot="{ context }">
-            <div class="p-5">
-              <Button class="w-[120px]"
-                      @click="'index' in context ?
-                      Object.assign(context.target[context.index], context.item) :
-                      context.target.push(context.item);
-                      $refs.menuEdit.close();
-                      $emit('change')">
-                Add
-              </Button>
-            </div>
-          </template>
-          <template #default="{ context }">
-            <div class="flex-1 p-5 flex flex-col gap-6">
-
-              <div>
-                <label class="text-text-400">Text</label>
-                <Textbox v-model="context.item.text" />
-              </div>
-
-              <div>
-                <label class="text-text-400">Target</label>
-                <Textbox v-model="context.item.target" />
-              </div>
-
-            </div>
-          </template>
-        </Modal>
       </div>
 
-      <div class="flex flex-col gap-2">
-        <div class="flex flex-row gap-2">
-          <label class="flex-1 text-text-400 flex-1">Icons</label>
+      <div>
+        <div class="flex flex-row items-start">
+          <div>
+            <label class="text-text-400 flex-1">Right Area</label>
+            <p class="text-sm text-text-400">Container for right area, usually for icon-type menu</p>
+          </div>
           <button type="button"
-                  class="text-primary flex flex-row gap-1 px-1"
-                  @click="$refs.iconModal.open({ item:{} })">
-            <svg width="16" height="16" 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>
+                  class="text-primary text-sm"
+                  @click="openComponentSelector({ callback:(component) => item.slots.right.push(component) })">
             Add
           </button>
         </div>
-        <div v-if="icons.length < 1" class="bg-text-50 text-center p-3 text-text-400">
-          {{ $t('No Icons') }}
-        </div>
-        <div v-else>
-          <TreeView v-model="icons"
-                    @change="$emit('change')">
-            <template #default="{ item, parent }">
-              <div class="flex-1 flex flex-row gap-2 items-center"
-                   @click="$refs.iconModal.open({ item, index:parent.indexOf(item) })">
-                <div>
-                  <Image :src="imageSrc(item.imageUrl)" class="w-[26px] aspect-square bg-text-50 rounded-lg" />
-                </div>
-                <div class="flex-1">
-                  {{ item.type }}
-                </div>
-              </div>
-            </template>
-          </TreeView>
-        </div>
-
-        <Modal ref="iconModal" class="w-[400px] h-[300px]">
-          <template v-slot:head>
-            <div class="relative p-5">
-              <h3>Add Icon</h3>
-              <div class="absolute top-0 right-0 p-2">
-                <button type="button" class="p-2" @click="$refs.iconModal.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">
-                    <path d="M6.53034 5.46965C6.23745 5.17676 5.76257 5.17676 5.46968 5.46965C5.17679 5.76255 5.17679 6.23742 5.46968 6.53031L10.9393 12L5.46967 17.4697C5.17678 17.7626 5.17678 18.2374 5.46967 18.5303C5.76256 18.8232 6.23744 18.8232 6.53033 18.5303L12 13.0606L17.4697 18.5303C17.7626 18.8232 18.2375 18.8232 18.5303 18.5303C18.8232 18.2374 18.8232 17.7626 18.5303 17.4697L13.0607 12L18.5303 6.53032C18.8232 6.23743 18.8232 5.76256 18.5303 5.46966C18.2374 5.17677 17.7626 5.17677 17.4697 5.46966L12 10.9393L6.53034 5.46965Z"/>
-                  </svg>
-                </button>
-              </div>
-            </div>
-          </template>
-          <template v-slot:foot="{ context }">
-            <div class="p-5">
-              <Button class="w-[150px]"
-                      :state="context.item.imageUrl && context.item.type ? 1 : -1"
-                      @click="'index' in context ?
-                        Object.assign(icons[context.index], context.item) :
-                        icons.push(context.item);
-                        $refs.iconModal.close();
-                        $emit('change')">
-                Add Icon
-              </Button>
-            </div>
-          </template>
-          <template #default="{ context }">
-            <div class="flex-1 p-5 flex flex-row gap-6">
-
-              <div>
-                <div class="flex flex-row gap-2 mb-1">
-                  <label class="flex-1 text-text-400">Icon</label>
-                  <button type="button" @click="$refs.iconModalImage.edit()">
-                    <svg width="14" height="14" class="fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M528 288H384v-32h64c42.6 0 64.2-51.7 33.9-81.9l-160-160c-18.8-18.8-49.1-18.7-67.9 0l-160 160c-30.1 30.1-8.7 81.9 34 81.9h64v32H48c-26.5 0-48 21.5-48 48v128c0 26.5 21.5 48 48 48h480c26.5 0 48-21.5 48-48V336c0-26.5-21.5-48-48-48zm-400-80L288 48l160 160H336v160h-96V208H128zm400 256H48V336h144v32c0 26.5 21.5 48 48 48h96c26.5 0 48-21.5 48-48v-32h144v128zm-40-64c0 13.3-10.7 24-24 24s-24-10.7-24-24 10.7-24 24-24 24 10.7 24 24z"/></svg>
-                  </button>
-                </div>
-                <Image ref="iconModalImage"
-                       :src="imageSrc(context.item.imageUrl)"
-                       @click="$refs.iconModalImage.edit()"
-                       :editable="true"
-                       @change="(_, file) => context.item.imageUrl = file"
-                       class="w-[90px] aspect-square bg-text-50 rounded-lg" />
-              </div>
-
-              <div class="flex-1 flex flex-col gap-4">
-
-                <div>
-                  <label class="text-text-400 block mb-1">Type</label>
-                  <Dropdown v-model="context.item.type">
-                    <option disabled selected>{{ $t('Choose Type')}}</option>
-                    <option value="account">Account</option>
-                    <option value="cart">Cart</option>
-                    <option value="search">Search</option>
-                    <option value="custom">Custom</option>
-                  </Dropdown>
-                </div>
-
-                <div v-if="context.item.type === 'custom'">
-                  <label class="text-text-400 block mb-1">Target</label>
-                  <Textbox v-model="context.item.target"  />
-                </div>
-
-              </div>
-
+        <TreeView class="mt-2"
+                  v-model="item.slots.right"
+                  @add="(items) => openComponentSelector({ callback:(component) => items.push(component) })"
+                  @duplicate="duplicate">
+          <template #default="{ item }">
+            <div class="flex-1 text-ellipsis whitespace-nowrap overflow-hidden"
+                 :class="!item.props.enabled ? 'line-through' : ''"
+                 @click="openRightPane2(item)">
+              {{ item.name ?? item.type }}
             </div>
           </template>
-        </Modal>
-      </div>
-
-      <div class="flex flex-col gap-2">
-        <label class="text-text-400 flex-1">Login Area</label>
-        <HTMLEditor v-model="item.props.loginHtml"
-                    @change="$emit('change')" />
-        <div class="grid grid-cols-2 gap-2">
-          <Textbox v-model="item.props.registerText"
-                   placeholder="Register"
-                   @keyup.enter="$emit('change')"
-                   @blur="$emit('change')" />
-          <Textbox v-model="item.props.loginText"
-                   placeholder="Login"
-                   @keyup.enter="$emit('change')"
-                   @blur="$emit('change')" />
-        </div>
+        </TreeView>
       </div>
 
     </div>
 
+    <ComponentSetting2 :item="item"
+                       :view-type="viewType"
+                       :view-types="viewTypes"
+                       :view-index="viewIndex"
+                       defaultDisplay="block"
+                       @change="$emit('change')" />
+
 	</div>
 </template>
 
 <script>
 
+import Image from "../components/Image.vue";
+
 export default{
+  components: {Image},
 
 	emits: [ 'change' ],
 
-	inject: [ 'alert', 'imageSrc', 'uploadImage' ],
+	inject: [ 'alert', 'duplicate', 'imageSrc', 'uploadImage', 'openComponentSelector', 'openRightPane2' ],
 
 	props: {
 
@@ -223,18 +113,35 @@ export default{
 
 		viewType: String,
 
+		viewIndex: Number,
+
 		viewTypes: Array,
 
 	},
 
 	computed: {
 
+    slotHeaders(){
+      return this.item.slots.headers
+    },
+
+    logo(){
+      if(!this.item.props.images){
+        this.item.props.images = {}
+      }
+      if(!Array.isArray(this.item.props.images.logo)){
+        this.item.props.images.logo = []
+      }
+
+      return this.item.props.images.logo
+    },
+
 		logoSrc(){
 			if(!this.item.props.images){
 				this.item.props.images = {}
 			}
 
-			return typeof this.item.props.images .logo === 'string' ?
+			return typeof this.item.props.images.logo === 'string' ?
 				import.meta.env.VITE_IMAGE_HOST + '/' + this.item.props.images.logo :
 				this.item.props.images.logo
 		},
@@ -259,8 +166,13 @@ export default{
 
 	methods: {
 
+	},
 
-	}
+  data(){
+    return {
+      value: null
+    }
+  }
 
 }
 
@@ -268,6 +180,10 @@ export default{
 
 <style module>
 
+.comp{
+  @apply flex flex-col divide-y divide-border-50;
+}
+
 .imageBg{
 	@apply p-2 bg-white;
 	background-image: radial-gradient(rgba(var(--primary-500)) 1px, transparent 1px);

package/src/widgets/HeaderSetting.vue

@@ -1,15 +1,10 @@
 <template>
-	<div class="flex flex-col gap-10">
+  <div :class="$style.comp">
 
-		<div class="flex flex-col gap-6">
-
-      <div>
-        <strong class="text-text-400">Header</strong>
-        <div class="h-[1px] bg-text-100 mt-2"></div>
-      </div>
+		<div class="flex flex-col gap-6 p-6">
 
       <div class="flex flex-col gap-1">
-        <label class="flex-1 text-text-400">Model</label>
+        <small class="flex-1 text-text-400">Model</small>
         <Dropdown v-model="item.props.variant"
                   @change="$emit('change')">
           <option value="Header1">Model 1</option>
@@ -21,14 +16,17 @@
                  :item="item"
                  :view-type="viewType"
                  :view-types="viewTypes"
+                 :view-index="viewIndex"
                  @change="$emit('change')" />
 
     </div>
 
-		<ComponentSetting2 :item="item"
-											:view-type="viewType"
-											:view-types="viewTypes"
-											@change="$emit('change')" />
+    <ComponentSetting2 :item="item"
+                       :view-type="viewType"
+                       :view-types="viewTypes"
+                       :view-index="viewIndex"
+                       defaultDisplay="block"
+                       @change="$emit('change')" />
 
 	</div>
 </template>
@@ -48,9 +46,11 @@ export default{
 			required: true
 		},
 
-		viewType: String,
+    viewType: String,
+
+    viewIndex: Number,
 
-		viewTypes: Array,
+    viewTypes: Array,
 
 	},
 
@@ -95,10 +95,8 @@ export default{
 
 <style module>
 
-.imageBg{
-	@apply p-2 bg-white;
-	background-image: radial-gradient(rgba(var(--primary-500)) 1px, transparent 1px);
-	background-size: calc(10 * 1px) calc(10 * 1px);
+.comp{
+  @apply flex flex-col divide-y divide-border-50;
 }
 
 </style>