@mixd-id/web-scaffold 0.1.230406196 → 0.1.230406198

package/package.json

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

package/src/components/Ahref.vue

@@ -1,5 +1,5 @@
 <template>
-	<a v-if="isExternalLink" :href="href" :target="target" :class="compClass">
+	<a v-if="isExternalLink" :href="href" :target="target" :class="compClass" :style="computedStyle">
 		<slot>{{ text }}</slot>
 	</a>
 	<router-link v-else :to="href" :target="target" :class="compClass">
@@ -59,7 +59,6 @@ export default {
 	@apply relative flex items-center justify-center;
 	@apply whitespace-nowrap text-ellipsis overflow-hidden;
 	@apply rounded-lg;
-	background-image: v-bind(bgImages[0]);
 }
 .button>*:first-child{
 	@apply flex items-center justify-center

package/src/components/Article.vue

@@ -1,5 +1,5 @@
 <template>
-	<div :class="$style.comp">
+	<div :class="$style.comp" :style="computedStyle">
     <article ref="article" :class="$style.article"
              v-html="computedHtml"
              :contenteditable="editMode === 1"
@@ -352,7 +352,6 @@ export default{
 
 .comp{
   @apply relative;
-  background-image: v-bind(bgImages[0]);
 }
 
 .article{
@@ -391,10 +390,4 @@ export default{
 	@apply break-words;
 }
 
-@media screen(md){
-	.comp{
-		background-image: v-bind(bgImages[1]);
-	}
-}
-
 </style>

package/src/components/Block.vue

@@ -1,5 +1,5 @@
 <template>
-	<div :class="$style.comp">
+	<div :class="$style.comp" :style="computedStyle">
 		<component v-for="item in items"
 							 :is="item.type"
 							 :="item" />
@@ -26,13 +26,6 @@ export default{
 
 .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

@@ -29,13 +29,6 @@ export default{
 
 .comp{
 	@apply flex items-center justify-center;
-	background-image: v-bind(bgImages[0]);
-}
-
-@media screen and (min-width: 768px){
-	.comp{
-		background-image: v-bind(bgImages[1]);
-	}
 }
 
 </style>

package/src/components/Button.vue

@@ -1,5 +1,5 @@
 <template>
-	<button :class="compClass" :disabled="isDisabled" @click="onClick">
+	<button :class="compClass" :disabled="isDisabled" @click="onClick" :style="computedStyle">
     <slot>{{ text }}</slot>
 		<div v-if="isLoading" :class="$style.loadingPane">
 			<svg :class="$style.spinner" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
@@ -88,7 +88,7 @@ export default{
 			this.$el.focus()
 		},
 
-		setState(state){
+		setState(state, percentage){
 			this._state = state
 		},
 
@@ -107,7 +107,12 @@ export default{
 						break
 
 					default:
-						this.$router.push(this.target)
+            if(this.target.indexOf('://') >= 0){
+              window.location = this.target
+            }
+            else{
+              this.$router.push(this.target)
+            }
 						break
 				}
 			}
@@ -136,7 +141,6 @@ export default{
 	@apply relative flex items-center justify-center;
 	@apply whitespace-nowrap text-ellipsis overflow-hidden;
 	@apply rounded-lg;
-	background-image: v-bind(bgImages[0]);
 }
 .button>*:first-child{
 	@apply flex items-center justify-center
@@ -279,6 +283,9 @@ export default{
 .loadingPane{
 	@apply absolute left-0 top-0 right-0 bottom-0 flex items-center justify-center pl-1;
 }
+.loading{
+  color: transparent;
+}
 .loading>*:first-child{
 	@apply opacity-0
 }
@@ -298,10 +305,4 @@ export default{
 	@apply animate-spin h-5 w-5;
 }
 
-@media screen(md){
-	.button{
-		background-image: v-bind(bgImages[1]);
-	}
-}
-
 </style>

package/src/components/Carousel.vue

@@ -1,5 +1,8 @@
 <template>
-  <div :class="$style.comp" @mousedown="mouseDown" @touchstart.passive="mouseDown">
+  <div :class="$style.comp"
+       @mousedown="mouseDown"
+       @touchstart.passive="mouseDown"
+       :style="computedStyle">
 
     <div ref="inner" :class="computedContainerClass">
 			<div v-for="item in items" :class="computedItemClass">
@@ -315,7 +318,6 @@ export default{
 	white-space: nowrap;
 	overflow: hidden;
 	position: relative;
-	background-image: v-bind(bgImages[0]);
 }
 
 .comp img{
@@ -375,10 +377,4 @@ export default{
   -webkit-overflow-scrolling: touch;
 }
 
-@media screen(md){
-	.comp{
-		background-image: v-bind(bgImages[1]);
-	}
-}
-
 </style>

package/src/components/Flex.vue

@@ -1,5 +1,5 @@
 <template>
-	<div :class="$style.Flex">
+	<div :class="$style.Flex" :style="computedStyle">
 
 		<component v-for="(item, idx) in items"
 							 :is="item.type"
@@ -23,10 +23,6 @@ export default{
 		columnType: Array,
 	},
 
-	methods: {
-
-	}
-
 }
 
 </script>
@@ -35,12 +31,5 @@ export default{
 
 .Flex{
 	@apply flex;
-	background-image: v-bind(bgImages[0]);
-}
-
-@media screen(md){
-	.Flex{
-		background-image: v-bind(bgImages[1]);
-	}
 }
 </style>

package/src/components/Grid.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="$style.comp">
+  <div :class="$style.comp" :style="computedStyle">
 
     <component v-for="item in items"
 							 :is="item.type"
@@ -28,13 +28,6 @@ export default{
 
 .comp{
 	@apply grid w-full;
-	background-image: v-bind(bgImages[0]);
-}
-
-@media screen(md){
-	.comp{
-		background-image: v-bind(bgImages[1]);
-	}
 }
 
 </style>

package/src/components/Image.vue

@@ -1,5 +1,9 @@
 <template>
-  <div :class="$style.comp" @click="onClick" @mousemove="onMouseMove" @mousedown="onMouseDown">
+  <div :class="$style.comp"
+       @click="onClick"
+       @mousemove="onMouseMove"
+       @mousedown="onMouseDown"
+       :style="computedStyle">
 
 		<slot v-if="status === 0" name="empty" :instance="this"></slot>
 
@@ -9,6 +13,7 @@
       </div>
     </slot>
 
+    <div v-else-if="status === 2 && actualSrc.indexOf('<svg') >= 0" v-html="actualSrc"></div>
     <img v-else-if="status === 2" :class="computedItemClass" :src="actualSrc" ref="img" />
 
 		<slot v-else-if="status === 3" name="error" :instance="this"></slot>
@@ -141,6 +146,10 @@ export default{
 					this.actualSrc = this.src
 					this.status = 2
 				}
+        else if(this.src.indexOf('<svg') >= 0){
+          this.actualSrc = this.src
+          this.status = 2
+        }
 				else{
 					const src = {}
 
@@ -227,6 +236,9 @@ export default{
 				reader.readAsDataURL(this.src)
 				this.status = 1
 			}
+      else{
+        this.status = 0
+      }
 		},
 
 		onClick(){
@@ -260,7 +272,6 @@ export default{
 
 .comp{
 	@apply relative overflow-hidden;
-	background-image: v-bind(bgImages[0]);
 }
 
 .img{
@@ -280,10 +291,4 @@ export default{
 	@apply bg-text-200 animate-pulse;
 }
 
-@media screen and (min-width: 768px){
-	.comp{
-		background-image: v-bind(bgImages[1]);
-	}
-}
-
 </style>

package/src/components/Link.vue

@@ -1,31 +1,31 @@
 <template>
   <a v-if="mode === 'download' && items.length > 0"
-     :href="download.url"
-     :download="download.as ?? (download.originalName ?? '')">
+     :href="(download ?? {}).url"
+     :download="download.as ?? ((download ?? {}).originalName ?? '')">
     <component v-for="(item, idx) in items"
                :is="item.type"
                :key="idx"
                :="item" />
   </a>
   <a v-else-if="mode === 'download'"
-     :href="download.url"
-     :download="download.as ?? (download.originalName ?? '')">
+     :href="(download ?? {}).url"
+     :download="(download ?? {}).as ?? ((download ?? {}).originalName ?? '')">
     {{ text }}
   </a>
-  <a v-else-if="isExternalLink && items.length > 0" :target="target">
+  <a v-else-if="mode === 'link' && items.length > 0" :target="target">
     <component v-for="(item, idx) in items"
                :is="item.type"
                :key="idx"
                :="item" />
   </a>
-  <a v-else-if="isExternalLink" :href="href" :target="target">{{ text }}</a>
-  <router-link v-else-if="items.length > 0" :to="href">
+  <a v-else-if="mode === 'link'" :href="href" :target="target">{{ text }}</a>
+  <router-link v-else-if="items.length > 0" :to="to">
     <component v-for="(item, idx) in items"
                :is="item.type"
                :key="idx"
                :="item" />
   </router-link>
-  <router-link v-else :to="href">{{ text }}</router-link>
+  <router-link v-else :to="to">{{ text }}</router-link>
 </template>
 
 <script>
@@ -42,6 +42,10 @@ export default{
       type: String,
       default: ''
     },
+    route: {
+      type: Object,
+      default: {}
+    },
     mode: String,
     target: String,
     text: String,
@@ -54,6 +58,18 @@ export default{
       return (this.href ?? '').indexOf('://') > -1;
     },
 
+    to(){
+      const obj = {}
+
+      if(this.route.hash)
+        obj.hash = '#' + this.route.hash
+
+      if(this.route.path)
+        obj.path = this.route.path
+
+      return obj
+    }
+
   }
 
 }

package/src/components/Modal.vue

@@ -10,7 +10,12 @@
              :class="computedClass"
              :style="computedStyle"
 						 :data-state="computedState ? 1 : 0">
-          <form v-if="useForm" @submit.prevent="$emit('submit')">
+          <component v-if="Array.isArray(items) && items.length > 0"
+                     v-for="(item, idx) in items"
+                     :is="item.type"
+                     :key="item.key"
+                     :="item" />
+          <form v-else-if="useForm" @submit.prevent="$emit('submit')">
             <div class="modal-head">
               <slot name="head" :context="context"></slot>
             </div>
@@ -91,6 +96,8 @@ export default{
 		},
 
     mode: 'v-if', // v-if or v-show
+
+    items: Array,
   },
 
 	methods: {

package/src/index.js

@@ -444,6 +444,8 @@ export default{
     app.component('Header1', defineAsyncComponent(() => import("./widgets/Header1.vue")))
     app.component('Header2', defineAsyncComponent(() => import("./widgets/Header2.vue")))
     app.component('HeaderSetting', defineAsyncComponent(() => import("./widgets/HeaderSetting.vue")))
+    app.component('Header1Setting', defineAsyncComponent(() => import("./widgets/Header1Setting.vue")))
+    app.component('Header2Setting', defineAsyncComponent(() => import("./widgets/Header2Setting.vue")))
     app.component('IconList', defineAsyncComponent(() => import("./widgets/IconList.vue")))
     app.component('IconListSetting', defineAsyncComponent(() => import("./widgets/IconListSetting.vue")))
     app.component('LinkSetting', defineAsyncComponent(() => import("./widgets/LinkSetting.vue")))
@@ -467,5 +469,6 @@ export default{
     app.component('WebPageSelector', defineAsyncComponent(() => import("./widgets/WebPageSelector.vue")))
     app.component('WebLayoutSelector', defineAsyncComponent(() => import("./widgets/WebLayoutSelector.vue")))
     app.component('WebTemplateCreator', defineAsyncComponent(() => import("./widgets/WebTemplateCreator.vue")))
+    app.component('ModalSetting', defineAsyncComponent(() => import("./widgets/ModalSetting.vue")))
   }
 }

package/src/mixin/component.js

@@ -87,6 +87,17 @@ export const componentMixin = {
       ]
     },
 
+    computedStyle(){
+
+      const obj = {}
+
+      if(this.bgImages && this.bgImages[0]){
+        obj['background-image'] = this.bgImages[0]
+      }
+
+      return obj
+    },
+
     pageData(){
       return (this.page ?? {}).data
     },

package/src/widgets/ComponentSetting.vue

@@ -1460,10 +1460,16 @@ export default{
         aspectRatio: [
           [ 'Square', 'aspect-square' ],
           [ '2/1', 'aspect-[2/1]' ],
+          [ '3/1', 'aspect-[3/1]' ],
           [ '4/1', 'aspect-[4/1]' ],
           [ '4/3', 'aspect-[4/3]' ],
+          [ '5/1', 'aspect-[5/1]' ],
+          [ '6/1', 'aspect-[6/1]' ],
+          [ '7/1', 'aspect-[7/1]' ],
+          [ '8/1', 'aspect-[8/1]' ],
           [ '8/3', 'aspect-[8/3]' ],
           [ '8/5.6', 'aspect-[8/5.6]' ],
+          [ '9/1', 'aspect-[9/1]' ],
           [ 'Video (16:9)', 'aspect-video' ],
           [ '1/2', 'aspect-[1/2]' ],
           [ '2/3', 'aspect-[2/3]' ],
@@ -1681,10 +1687,17 @@ export default{
           [ '6', 'h-6' ],
           [ '7', 'h-7' ],
           [ '8', 'h-8' ],
+          [ '9', 'h-9' ],
+          [ '10', 'h-10' ],
+          [ '11', 'h-11' ],
           [ '12', 'h-12' ],
+          [ '14', 'h-14' ],
           [ '16', 'h-16' ],
           [ '20', 'h-20' ],
-          [ '1/4', 'h-1/4' ],
+          [ '24', 'h-24' ],
+          [ '32', 'h-32' ],
+          [ '36', 'h-36' ],
+          [ '48', 'h-48' ],
           [ '10vh', 'h-10vh' ],
           [ '20vh', 'h-20vh' ],
           [ '30vh', 'h-30vh' ],
@@ -1937,6 +1950,11 @@ export default{
           [ '3', 'w-3' ],
           [ '4', 'w-4' ],
           [ '5', 'w-5' ],
+          [ '6', 'w-6' ],
+          [ '8', 'w-8' ],
+          [ '10', 'w-10' ],
+          [ '12', 'w-12' ],
+          [ '16', 'w-16' ],
           [ '20', 'w-20' ],
           [ '24', 'w-24' ],
           [ '28', 'w-28' ],

package/src/widgets/ContactForm.vue

@@ -1,11 +1,11 @@
 <template>
-	<div :class="$style.comp" v-if="state === 1">
+	<div :class="$style.comp" v-if="state === 1" :style="computedStyle">
 
-		<div class="flex flex-col gap-1">
-			<h2 v-if="title">{{ title }}</h2>
-			<p v-if="description" v-html="description"></p>
+    <div v-if="title || description" class="flex flex-col gap-1">
+      <h2 v-if="title">{{ title }}</h2>
+      <p v-if="description" v-html="description"></p>
       <CitySelector ref="citySelector" @change="setCity"/>
-		</div>
+    </div>
 
 		<div class="flex flex-col gap-4">
 			<div v-for="field in fields">
@@ -34,9 +34,11 @@
 			</div>
 		</div>
 
-		<Button ref="submitBtn" class="w-full" @click="submitForm" :state="!canSubmit ? -1 : 1">
-			<h5>Kirim</h5>
-		</Button>
+		<div>
+      <Button ref="submitBtn" class="w-full" @click="submitForm" :state="!canSubmit ? -1 : 1">
+        <h5>Kirim</h5>
+      </Button>
+    </div>
 
 	</div>
   <div :class="$style.comp" class="" v-else-if="state === 2">
@@ -152,16 +154,9 @@ export default{
 <style module>
 
 .comp{
-	@apply flex-1 w-full max-w-[480px] min-h-[480px] mx-auto rounded-lg overflow-hidden;
+	@apply flex-1 w-full max-w-[480px] mx-auto rounded-lg overflow-hidden;
   @apply border-text-200 border-[1px] p-6;
-	@apply flex flex-col justify-center gap-8 bg-base;
-	background-image: v-bind(bgImages[0]);
-}
-
-@media screen and (min-width: 768px){
-	.comp{
-		background-image: v-bind(bgImages[1]);
-	}
+	@apply flex flex-col gap-12 bg-base;
 }
 
 </style>

package/src/widgets/EmbeddedVideo.vue

@@ -1,5 +1,5 @@
 <template>
-	<div :class="$style.comp">
+	<div :class="$style.comp" :style="computedStyle">
 		<iframe :class="videoClass"
 						:src="computedSrc"
 						frameborder="0"
@@ -49,7 +49,6 @@ export default{
 
 .comp{
 	@apply flex flex-col;
-	background-image: v-bind(bgImages[0]);
 }
 
 .video{
@@ -58,10 +57,4 @@ export default{
 	width: 100%;
 }
 
-@media screen and (min-width: 768px){
-	.comp{
-		background-image: v-bind(bgImages[1]);
-	}
-}
-
 </style>

package/src/widgets/FAQ.vue

@@ -1,5 +1,5 @@
 <template>
-	<div :class="$style.comp">
+	<div :class="$style.comp" :style="computedStyle">
 		<h3>{{ title }}</h3>
 		<div :class="$style.items">
 			<div v-for="(item, idx) in items" :class="$style.item">
@@ -39,7 +39,6 @@ export default{
 
 .comp{
 	@apply w-full mx-auto max-w-screen-md;
-	background-image: v-bind(bgImages[0]);
 }
 
 .items{
@@ -77,10 +76,4 @@ export default{
 	@apply rotate-180
 }
 
-@media screen(md){
-	.comp{
-		background-image: v-bind(bgImages[1]);
-	}
-}
-
 </style>

package/src/widgets/FeatureList.vue

@@ -1,5 +1,7 @@
 <template>
-	<div :class="$style.comp" v-if="Array.isArray(items) && items.length > 0">
+	<div :class="$style.comp"
+       v-if="Array.isArray(items) && items.length > 0"
+       :style="computedStyle">
 		<div v-if="id" :id="id" :class="$style.anchor"></div>
 		<div class="mb-8">
 			<h3>{{ title ?? '' }}</h3>
@@ -82,7 +84,6 @@ export default{
 .comp{
 	@apply relative;
 	@apply w-full max-w-screen-xl mx-auto p-6;
-	background-image: v-bind(bgImages[0]);
 }
 
 .container{
@@ -97,12 +98,6 @@ export default{
 	@apply absolute top-[-80px];
 }
 
-@media screen(md){
-	.comp{
-		background-image: v-bind(bgImages[1]);
-	}
-}
-
 </style>
 
 <style>

package/src/widgets/Header1.vue

@@ -1,19 +1,9 @@
 <template>
 	<div :class="$style.comp">
-		<div class="w-[60px]">
-			<button class="p-4">
-				<svg width="28" height="28" viewBox="0 0 24 24" class="fill-text" 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 class="flex-1 flex justify-center items-center">
-			<Image :src="logoUrl" class="max-w-[35vw] h-[56px]"/>
-		</div>
-		<div class="w-[60px]">
-
-		</div>
+    <component v-for="(item, idx) in items"
+               :is="item.type"
+               :key="item.key"
+               :="item" />
 	</div>
 </template>
 
@@ -26,7 +16,8 @@ export default{
 	mixins: [ componentMixin ],
 
 	props: {
-		images: Object
+		images: Object,
+    items: Array,
 	},
 
 	computed: {