@mixd-id/web-scaffold 0.1.230406219 → 0.1.230406221

package/package.json

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

package/src/components/ColorPicker2.vue

@@ -0,0 +1,164 @@
+<template>
+	<div :class="$style.comp">
+    <div :class="circleClass" :style="circleStyle"
+         @click="mode === 'hex' ? $refs.inputColor.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="grid grid-cols-10 gap-4">
+          <div v-for="color in values">
+            <div v-if="mode === 'class'" :class="`${$style.circle} bg-${color}`"
+                 @click="select(`${color}`)"></div>
+            <div v-else :class="`${$style.circle}`" :style="{ backgroundColor: color }"
+                 @click="select(`${color}`)"></div>
+          </div>
+        </div>
+        <div class="grid grid-cols-2 gap-4">
+          <button type="button" @click="select('')"
+                  class="w-full p-1 border-text-100 border-[1px] rounded-lg">None</button>
+          <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>
+      </div>
+    </ContextMenu>
+	</div>
+</template>
+
+<script>
+
+import {hexToRgb, rgbToHex} from "../utils/helpers.mjs";
+
+export default{
+
+	emits: [ 'change', 'update:modelValue' ],
+
+	props: {
+
+		mode: {
+			type: String,
+			default: 'class' // class|hex
+		},
+
+    keys: {
+      type: Array,
+      default: [
+        [ 'bg-' ],
+      ]
+    },
+
+		values: {
+			type: Array,
+			default: [
+				'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',
+			]
+		},
+
+		customColor: undefined,
+
+		modelValue: String,
+
+		prefix: String,
+
+    valueType: String,
+
+	},
+
+	methods: {
+
+		select(color){
+			if(this.mode === 'class'){
+				this.$emit('update:modelValue', color ? this.keys[0][0] + color : '')
+			}
+			else{
+        if(this.valueType === 'rgb'){
+          const hex = hexToRgb(color)
+          this.$emit('update:modelValue', `${hex.r},${hex.g},${hex.b}`)
+        }
+        else{
+          this.$emit('update:modelValue', color)
+        }
+			}
+			this.$emit('change')
+			this.$refs.contextMenu.close()
+		}
+
+	},
+
+	computed:{
+
+		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'){
+
+        let value = this.modelValue
+        if(this.valueType === 'rgb'){
+          value = rgbToHex(...(this.modelValue ?? '').split(','))
+        }
+
+				return {
+					'background-color': value ?? ''
+				}
+			}
+		}
+
+	},
+
+	data(){
+		return {
+			customColors: []
+		}
+	}
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+	@apply relative;
+}
+
+.circle{
+	@apply w-[24px] h-[24px] rounded-full cursor-pointer border-[2px] border-text-200;
+}
+
+.inputColor{
+	@apply absolute top-0 left-0;
+	width: 0;
+	height: 0;
+	opacity: 0;
+}
+
+</style>

package/src/components/ConversationBuilder.vue

@@ -0,0 +1,161 @@
+<template>
+	<div :class="$style.comp">
+
+    <div class="flex-1 p-4 overflow-y-auto">
+
+      <div class="flex flex-col gap-2 mx-auto max-w-[540px]">
+
+        <div v-for="(sequence, index) in conversation.sequences">
+
+          <div v-if="index < 1" class="py-3">
+            <div class="bg-green-100 p-2 rounded-lg text-black max-w-[60%]">
+              [NSC-KPG]
+            </div>
+          </div>
+          <div v-else class="py-3">
+            <div class="bg-green-100 p-2 rounded-lg text-black max-w-[60%] h-[36px]"></div>
+          </div>
+
+          <div class="border-t-[1px] border-dashed border-text-300"></div>
+
+          <div>
+            <div v-for="out in sequence.out">
+              <pre>{{ out }}</pre>
+            </div>
+
+            <button type="button" @click="sequence.out.push({})">Add Out</button>
+          </div>
+
+          <div class="border-t-[1px] border-dashed border-text-300"></div>
+
+          <div v-if="index > 0">
+            <div v-for="fallback in sequence.fallback">
+              <pre>{{ fallback }}</pre>
+            </div>
+
+            <button type="button" @click="sequence.fallback.push({})">Add Fallback</button>
+          </div>
+
+        </div>
+
+        <button @click="conversation.sequences.push({ in:{}, out:[], fallback:[] })">Add Sequence</button>
+
+      </div>
+
+    </div>
+
+    <div class="w-[400px] bg-base-400 p-6">
+
+      <div class="flex flex-col gap-6">
+        <div>
+          <label class="text-text-400">Type</label>
+          <Dropdown class="mt-1">
+            <option>Whatsapp</option>
+            <option>Livechat</option>
+          </Dropdown>
+        </div>
+
+        <div>
+          <div class="flex flex-row gap-2">
+            <label class="text-text-400">Criteria</label>
+            <button type="button" class="text-primary" @click="">Add Criteria</button>
+          </div>
+          <div class="mt-1">
+            <div class="flex flex-row gap-2">
+              <Dropdown class="w-[100px]">
+                <option>Text</option>
+              </Dropdown>
+              <Dropdown class="w-[100px]">
+                <option>Starts with</option>
+              </Dropdown>
+              <Textbox />
+            </div>
+          </div>
+        </div>
+      </div>
+
+    </div>
+
+	</div>
+</template>
+
+<script>
+
+export default{
+
+  data(){
+    return {
+      conversation: {
+        isActive: 1,
+        name: 'Conversation 1',
+        description: 'Conversation 1 Description',
+        startDate: '2023-01-01',
+        endDate: '2023-01-01',
+        sequences: [
+
+          /*{
+            id: 1,
+            in: {
+              type: 'whatsapp',
+              filters: [
+                { key:'text', operator:'contains', value:'halo' }
+              ]
+            },
+            out: [
+              {
+                type: 'whatsapp',
+                text: 'Halo, selamat datang di NSC-PNK, silahkan masukkan nama dan alamat anda'
+              },
+              {
+                type: 'whatsapp',
+                text: 'Nama:<br/>Alamat:<br/>Propinsi:<br/>Kota:'
+              }
+            ]
+          },
+
+          {
+            id: 2,
+            in: {
+              type: 'whatsapp',
+              filters: [
+                { key:'text', operator:'contains', value:'nama:' },
+              ]
+            },
+            out: [
+              {
+                type: 'whatsapp',
+                text: 'Terima kasih, kami akan segera menghubungi anda'
+              },
+              {
+                type: 'send-api',
+                text: 'Send API'
+              },
+              {
+                type: 'leave-chat',
+                text: 'Leave Chat'
+              }
+            ],
+            fallback: [
+              {
+                type: 'whatsapp',
+                text: 'Maaf, kami tidak mengerti'
+              }
+            ]
+          }*/
+
+        ]
+      },
+    }
+  }
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+  @apply flex flex-row;
+}
+
+</style>

package/src/components/Modal.vue

@@ -45,6 +45,8 @@
 
 <script>
 
+import {componentMixin} from "../mixin/component";
+
 let modals = []
 
 const registerModal = (modal) => {
@@ -66,7 +68,9 @@ const unRegisterModal = (modal) => {
 
 export default{
 
-	emits: [ 'submit', 'dismiss', 'show', 'hide' ],
+  mixins: [ componentMixin ],
+
+	emits: [ 'submit', 'apply', 'dismiss', 'show', 'hide' ],
 
   props:{
     class:{ type: String, default: '' },
@@ -95,6 +99,8 @@ export default{
 			default: false
 		},
 
+    debugState: undefined,
+
     mode: 'v-if', // v-if or v-show
 
     items: Array,
@@ -111,6 +117,15 @@ export default{
 			this._state = false
 		},
 
+    dismiss(){
+      if(this.hash){
+        this.$router.push({ hash: this.$route.hash.replace(this.hash, '') })
+      }
+      else{
+        this.$emit('dismiss')
+      }
+    },
+
 		onAfterLeave(){
 			let overlay = document.querySelector('.bW9k')
 			if(overlay){
@@ -128,18 +143,19 @@ export default{
 
 		onDismiss(e){
 			if(this.computedState && this.dismissable && this.$refs.modal && e.target.classList.contains('bW9k')){
-				this.$emit('dismiss')
+				this.dismiss()
 			}
 		},
 
 		onKeyDown(e){
 			if(this.dismissable && this.$refs.modal && e.keyCode === 27){
-				this.$emit('dismiss')
+        this.dismiss()
 			}
 		},
 
 		setState(to){
 			if(to){
+        this.isDisabled = 0
 				let overlay = document.querySelector('.bW9k')
 				if(overlay){
 					overlay.classList.add('bW9l')
@@ -206,7 +222,8 @@ export default{
     },
 
 		computedState(){
-      return this.state ? Boolean(this.state) : this._state
+      return (this.debugState && this.editMode) ? Boolean(this.debugState) :
+          (this.state ? Boolean(this.state) : this._state)
 		},
 
     currentState(){
@@ -245,7 +262,9 @@ export default{
   },
 
 	mounted() {
-		document.querySelector('.bW9k').addEventListener('click', this.onDismiss)
+    if(document.querySelector('.bW9k')){
+      document.querySelector('.bW9k').addEventListener('click', this.onDismiss)
+    }
 		window.addEventListener('keydown', this.onKeyDown)
 
 		this.$nextTick(() => {

package/src/components/Svg.vue

@@ -0,0 +1,33 @@
+<template>
+	<svg xmlns="http://www.w3.org/2000/svg" :viewBox="viewBox" :width="svgWidth" :height="svgHeight" v-html="html" />
+</template>
+
+<script>
+
+import {componentMixin} from "../mixin/component";
+
+export default {
+
+	mixins: [ componentMixin ],
+
+	props: {
+
+		html: {
+			type: String,
+			default: ''
+		},
+
+    viewBox: String,
+
+    svgWidth: [ String, Number ],
+
+    svgHeight: [ String, Number ],
+
+	},
+}
+</script>
+
+<style module>
+
+
+</style>

package/src/components/YoutubeVideo.vue

@@ -19,11 +19,19 @@
 <script>
 
 import { componentMixin } from '../mixin/component'
+import {parseBoolean} from "../utils/helpers.mjs";
 
 const callbacks = []
+const t0 = new Date().getTime()
 const initScript = (callback, id) => {
+  if(callback){
+    callbacks.push([ callback, id ])
+  }
 
-  callbacks.push([ callback, id ])
+  if((new Date().getTime() - t0) < 1200){
+    window.setTimeout(() => initScript(), 1000)
+    return
+  }
 
   let script = document.getElementById('youtube-iframe-api')
   if(!script){
@@ -65,6 +73,11 @@ export default{
       default: 0
     },
 
+    autoplay: {
+      type: [ Number, String, Boolean ],
+      default: 0
+    }
+
   },
 
   computed: {
@@ -87,6 +100,10 @@ export default{
       ]
           .filter(_ => _)
           .join(' ')
+    },
+
+    isAutoplay(){
+      return parseBoolean(this.autoplay) ? 1 : 0
     }
 
   },
@@ -129,7 +146,7 @@ export default{
             width: '100%',
             videoId: this.videoId,
             playerVars: {
-              autoplay: 1,
+              autoplay: this.isAutoplay,
               controls: 1,
             },
             events: {

package/src/index.js

@@ -280,9 +280,9 @@ export default{
         app.config.globalProperties.$observe = observeInit()
       }
 
-      app.config.globalProperties.$screenPrefix = ref(util.calculateMediaPrefix(window.innerWidth))
+      app.config.globalProperties.$screenPrefix = ref(util.calculateMediaPrefix(document.documentElement.clientWidth))
       const onWindowResize = throttle(() => {
-        app.config.globalProperties.$screenPrefix.value = util.calculateMediaPrefix(window.innerWidth)
+        app.config.globalProperties.$screenPrefix.value = util.calculateMediaPrefix(document.documentElement.clientWidth)
         resizeEvents.forEach((fn) => fn())
       }, 1000, { leading:true })
 
@@ -364,6 +364,7 @@ export default{
     app.component('Box', defineAsyncComponent(() => import("./components/Box.vue")))
     app.component('ChartBar', defineAsyncComponent(() => import("./components/ChartBar.vue")))
     app.component('ColorPicker', defineAsyncComponent(() => import("./components/ColorPicker.vue")))
+    app.component('ColorPicker2', defineAsyncComponent(() => import("./components/ColorPicker2.vue")))
     app.component('Confirm', defineAsyncComponent(() => import("./components/Confirm.vue")))
     app.component('SearchButton', defineAsyncComponent(() => import("./components/SearchButton.vue")))
     app.component('ChatTyping', defineAsyncComponent(() => import("./components/ChatTyping.vue")))
@@ -429,6 +430,8 @@ export default{
     app.component('TextEditor', defineAsyncComponent(() => import("./components/TextEditor.vue")))
     app.component('DataList', defineAsyncComponent(() => import("./components/DataList.vue")))
     app.component('YoutubeVideo', defineAsyncComponent(() => import("./components/YoutubeVideo.vue")))
+    app.component('Svg', defineAsyncComponent(() => import("./components/Svg.vue")))
+    app.component('ConversationBuilder', defineAsyncComponent(() => import("./components/ConversationBuilder.vue")))
 
     app.component('AhrefSetting', defineAsyncComponent(() => import("./widgets/AhrefSetting.vue")))
     app.component('ArticleSetting', defineAsyncComponent(() => import("./widgets/ArticleSetting.vue")))
@@ -438,6 +441,7 @@ export default{
     app.component('CarouselSetting', defineAsyncComponent(() => import("./widgets/CarouselSetting.vue")))
     app.component('CountdownSetting', defineAsyncComponent(() => import("./widgets/CountdownSetting.vue")))
     app.component('ComponentSetting', defineAsyncComponent(() => import("./widgets/ComponentSetting.vue")))
+    app.component('ComponentSetting2', defineAsyncComponent(() => import("./widgets/ComponentSetting2.vue")))
     app.component('ContactForm', defineAsyncComponent(() => import("./widgets/ContactForm.vue")))
     app.component('ContactFormSetting', defineAsyncComponent(() => import("./widgets/ContactFormSetting.vue")))
     app.component('EmbeddedVideo', defineAsyncComponent(() => import("./widgets/EmbeddedVideo.vue")))
@@ -459,6 +463,7 @@ export default{
     app.component('ImageSetting', defineAsyncComponent(() => import("./widgets/ImageSetting.vue")))
     app.component('MarginSetting', defineAsyncComponent(() => import("./widgets/MarginSetting.vue")))
     app.component('MultiValueSetting', defineAsyncComponent(() => import("./widgets/MultiValueSetting.vue")))
+    app.component('MultiValueSetting2', defineAsyncComponent(() => import("./widgets/MultiValueSetting2.vue")))
     app.component('PaddingSetting', defineAsyncComponent(() => import("./widgets/PaddingSetting.vue")))
     app.component('ParagraphSetting', defineAsyncComponent(() => import("./widgets/ParagraphSetting.vue")))
     app.component('Review', defineAsyncComponent(() => import("./widgets/Review.vue")))
@@ -479,5 +484,6 @@ export default{
     app.component('ModalSetting', defineAsyncComponent(() => import("./widgets/ModalSetting.vue")))
     app.component('DataListSetting', defineAsyncComponent(() => import("./widgets/DataListSetting.vue")))
     app.component('YoutubeVideoSetting', defineAsyncComponent(() => import("./widgets/YoutubeVideoSetting.vue")))
+    app.component('SvgSetting', defineAsyncComponent(() => import("./widgets/SvgSetting.vue")))
   }
 }

package/src/themes/default/index.js

@@ -52,7 +52,10 @@ const plugin = Plugin(function({ addBase, config, theme }) {
       "--secondary-600": '99, 100, 101',
       "--secondary-700": '77, 78, 78',
       "--secondary-800": '55, 56, 56',
-      "--secondary-900": '33, 33, 34'
+      "--secondary-900": '33, 33, 34',
+
+      '--whatsapp-100': '179, 206, 201',
+      '--whatsapp-500': '0, 93, 75',
 
     },
 
@@ -273,7 +276,12 @@ const plugin = Plugin(function({ addBase, config, theme }) {
           800: "rgba(var(--text-800), <alpha-value>)",
           900: "rgba(var(--text-900), <alpha-value>)",
           DEFAULT: "rgba(var(--text), 1)"
-        }
+        },
+        whatsapp: {
+          100: "rgba(var(--whatsapp-100), <alpha-value>)",
+          500: "rgba(var(--whatsapp-500), <alpha-value>)",
+          DEFAULT: "rgba(var(--whatsapp), <alpha-value>)"
+        },
       }
     }
   }

package/src/widgets/AhrefSetting.vue

@@ -37,7 +37,7 @@
       </div>
     </div>
 
-		<ComponentSetting :item="item"
+		<ComponentSetting2 :item="item"
 											:view-type="viewType"
 											:view-types="viewTypes"
 											defaultDisplay="flex"

package/src/widgets/ArticleSetting.vue

@@ -240,7 +240,7 @@
 
     </div>
 
-		<ComponentSetting :item="item"
+		<ComponentSetting2 :item="item"
 											:view-type="viewType"
 											:view-types="viewTypes"
 											defaultDisplay="block"

package/src/widgets/BlockSetting.vue

@@ -1,7 +1,7 @@
 <template>
 	<div>
 
-		<ComponentSetting :item="item"
+		<ComponentSetting2 :item="item"
 											:view-type="viewType"
 											:view-types="viewTypes"
 											defaultDisplay="flex"

package/src/widgets/BoxSetting.vue

@@ -5,7 +5,7 @@
 			<Textbox v-model="item.props.title" />
 		</div>
 
-		<ComponentSetting :item="item"
+		<ComponentSetting2 :item="item"
 											:view-type="viewType"
 											:view-types="viewTypes"
 											default-display="block"

package/src/widgets/ButtonSetting.vue

@@ -48,7 +48,7 @@
       </div>
     </div>
 
-		<ComponentSetting :item="item"
+		<ComponentSetting2 :item="item"
 											:view-type="viewType"
 											:view-types="viewTypes"
 											defaultDisplay="flex"

package/src/widgets/CarouselSetting.vue

@@ -51,7 +51,7 @@
       </div>
 		</div>
 
-		<ComponentSetting :item="item"
+		<ComponentSetting2 :item="item"
 											:view-type="viewType"
 											:view-types="viewTypes"
 											defaultDisplay="flex"
@@ -88,7 +88,7 @@
 			<template #default="{ context }">
 				<div class="flex-1 p-5 flex flex-col gap-4">
 					<ImageSetting :item="context.item" :view-types="viewTypes" :view-type="context.viewType" />
-					<ComponentSetting :item="context.item" :view-types="viewTypes" :view-type="context.viewType" />
+					<ComponentSetting2 :item="context.item" :view-types="viewTypes" :view-type="context.viewType" />
 				</div>
 			</template>
 		</Modal>