@mixd-id/web-scaffold 0.1.2301231369 → 0.2.240702

package/src/components/Confirm.vue

@@ -0,0 +1,178 @@
+<template>
+	<Teleport to=".YWxl">
+		<Transition name="confirm-outer">
+			<div v-if="isOpen" :class="$style.confirm" ref="confirm">
+				<Transition name="confirm" @after-appear="onAfterAppear" appear>
+					<div :class="$style.cont1">
+
+						<slot v-if="$slots['icon']" name="icon"></slot>
+						<svg width="100" height="100" class="fill-text-300" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+							<path fill-rule="evenodd" clip-rule="evenodd" d="M12 13.75C12.4142 13.75 12.75 13.4142 12.75 13V8.00001C12.75 7.5858 12.4142 7.25001 12 7.25001C11.5858 7.25001 11.25 7.5858 11.25 8.00001V13C11.25 13.4142 11.5858 13.75 12 13.75Z"/>
+							<path d="M13 16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16C11 15.4477 11.4477 15 12 15C12.5523 15 13 15.4477 13 16Z"/>
+							<path fill-rule="evenodd" clip-rule="evenodd" d="M12 20.5C16.6944 20.5 20.5 16.6944 20.5 12C20.5 7.30558 16.6944 3.5 12 3.5C7.30558 3.5 3.5 7.30558 3.5 12C3.5 16.6944 7.30558 20.5 12 20.5ZM12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"/>
+						</svg>
+
+						<div :class="$style.cont2">
+							<h5 :class="$style.title">{{ title }}</h5>
+							<p :class="$style.description">{{ message }}</p>
+						</div>
+
+						<div class="mt-4 flex flex-row gap-2">
+							<Button ref="btnOK" @click="onConfirm" class="min-w-[88px]" tabindex="0">
+								<strong class="px-4">
+									{{ buttonText[0] }}
+								</strong>
+							</Button>
+							<Button variant="minimal" @click="onDismiss" class="min-w-[88px] px-4 hover:text-primary">
+								{{ buttonText[1] }}
+							</Button>
+						</div>
+
+					</div>
+				</Transition>
+			</div>
+		</Transition>
+	</Teleport>
+</template>
+
+<script>
+
+export default{
+
+	methods: {
+
+		/**
+		 * @param {object} obj - The confirm object
+		 * @param {string} [obj.title] - The title of the confirm
+		 * @param {string} obj.message - The message of the confirm
+		 * @param {string[]} [obj.buttonText] - The text of the buttons
+		 * @param {function} [obj.onConfirm] - The callback function when the confirm button is clicked
+		 * @param {function} [obj.onDismiss] - The callback function when the dismiss button is clicked
+		 */
+		open(obj){
+			this.confirm = obj
+			this.isOpen = true
+		},
+
+		close(){
+			this.isOpen = false
+		},
+
+		onAfterAppear(){
+			this.$refs.btnOK.focus()
+			this.$emit('appear')
+		},
+
+		onConfirm(){
+			if(typeof this.confirm.onConfirm === 'function'){
+				this.confirm.onConfirm()
+			}
+			this.close()
+		},
+
+		onDismiss(){
+			if(typeof this.confirm.onDismiss === 'function'){
+				this.confirm.onDismiss()
+			}
+			this.close()
+		},
+
+	},
+
+	computed: {
+
+		buttonText(){
+			return Array.isArray(this.confirm.buttonText) && this.confirm.buttonText.length === 2 ?
+				this.confirm.buttonText :
+				[ 'OK', 'Cancel' ]
+		},
+
+		title(){
+			return this.confirm.title ?? this.$t('Confirm')
+		},
+
+		message(){
+			return this.confirm.message ?? ''
+		},
+
+	},
+
+	data(){
+		return {
+			confirm: {},
+			isOpen: false
+		}
+	}
+
+}
+
+</script>
+
+<style module>
+
+.confirm{
+	@apply fixed top-0 left-0 flex w-screen h-screen px-8;
+	@apply items-center justify-center bg-white/50 backdrop-blur-md;
+	z-index: 60;
+}
+[data-theme="dark"] .confirm{
+  @apply bg-black/50;
+}
+
+.confirm>*{
+	@apply max-h-[60vh] overflow-y-auto bg-base-500 rounded-xl;
+	@apply border-[1px] border-text-50;
+	@apply min-w-[280px] max-w-[80vw] md:max-w-[480px];
+}
+
+.cont1{
+	@apply p-4 flex flex-col items-center leading-6;
+}
+
+.cont2{
+	@apply my-4 text-center flex-1 overflow-y-auto;
+}
+
+.title{
+	@apply my-1 break-words whitespace-pre-line;
+}
+
+.description{
+	@apply overflow-y-auto whitespace-pre-line text-center;
+	overflow-wrap: break-word;
+	word-wrap: break-word;
+	-ms-word-break: break-all;
+	word-break: break-word;
+	-ms-hyphens: auto;
+	-moz-hyphens: auto;
+	-webkit-hyphens: auto;
+	hyphens: auto;
+}
+
+</style>
+
+<style>
+
+.confirm-outer-enter-active,
+.confirm-outer-leave-active {
+	transition: opacity 100ms cubic-bezier(0.25, 1, 0.5, 1);
+}
+
+.confirm-outer-enter-from,
+.confirm-outer-leave-to {
+	opacity: 0;
+}
+
+.confirm-enter-active,
+.confirm-leave-active {
+	transition: all 300ms cubic-bezier(0.25, 1, 0.5, 1);
+	transform: translate3d(0, 0, 0);
+}
+
+.confirm-enter-from,
+.confirm-leave-to {
+	transform: translate3d(0, 20px, 0);
+	opacity: 0;
+}
+
+</style>

package/src/components/ContextMenu.vue

@@ -1,6 +1,6 @@
 <template>
 	<Teleport to=".Y29u">
-		<div v-if="!!(computedState)" :class="$style.contextMenu" :style="computedStyle" ref="contextMenu">
+		<div v-if="!!(computedState)" :class="computedClass" :style="computedStyle" ref="contextMenu">
 			<div :class="bodyClass">
 				<slot name="default" :context="context"></slot>
 			</div>
@@ -35,7 +35,9 @@ export default {
 		dismiss: {
 			type: Boolean,
 			default: true
-		}
+		},
+
+    width: String,
 
   },
 
@@ -46,6 +48,14 @@ export default {
 
 	computed:{
 
+		computedClass(){
+			return [
+				this.$style.contextMenu,
+				this.class
+			]
+				.join(' ')
+		},
+
 		computedState(){
 			return this.state || this.isOpen
 		}
@@ -57,7 +67,8 @@ export default {
 			computedStyle: null,
 			isOpen: false,
 			context: null,
-			closing: false
+			closing: false,
+      currentCaller: null
 		}
 	},
 
@@ -83,7 +94,8 @@ export default {
 			const transitionEnd = () => {
 				window.addEventListener('click', this.onDismiss)
 				window.addEventListener('scroll', this.onDismiss)
-				this.$refs.contextMenu.removeEventListener('transitionend', transitionEnd)
+        if(this.$refs.contextMenu)
+				  this.$refs.contextMenu.removeEventListener('transitionend', transitionEnd)
 				this.$emit('open')
 			}
 
@@ -106,11 +118,12 @@ export default {
 
 		open(caller, context){
 
-			if(this.isOpen){
+      const originalCaller = caller
+			if(this.isOpen && this.currentCaller !== caller){
 				return this.close(() => {
 					window.setTimeout(() => {
 						this.open(caller, context)
-					}, 30)
+					}, 66)
 				})
 			}
 
@@ -118,7 +131,7 @@ export default {
 				this.isOpen = true
 			}
 
-			caller = caller ?? this.caller
+      caller = caller ?? this.caller
 
 			if(caller){
 
@@ -129,86 +142,129 @@ export default {
 
 				if(caller){
 
-					this.$nextTick(() => {
-						const rect = caller.getBoundingClientRect()
+					const media = this.$util.calculateMediaPrefix(window.innerWidth)
+					let maxHeight, transformOrigin, transform
+					let top, right, bottom, left
+					if([ '*', 'sm' ].includes(media)){
+						this.$nextTick(() => {
+							const rect = caller.getBoundingClientRect()
 
-						let maxHeight
-						let top, right, bottom, left
-						let transformOrigin
+							top = Math.round(rect.y + rect.height)
+							transformOrigin = 'top left'
 
-						switch(this.position){
+							if(top > (window.innerHeight / 2)){
+								top = undefined
+								bottom = Math.round(window.innerHeight - rect.y)
+								transformOrigin = 'bottom left'
+								transform = 'translate3d(0, -10px, 0)'
+							}
+							else{
+								transform = 'translate3d(0, 10px, 0)'
+								maxHeight = window.innerHeight - top - 36
+							}
 
-							case 'bottom-right':
-								right = window.innerWidth - (Math.round(rect.x) + rect.width)
-								top = Math.round(rect.y + rect.height + 8)
-								maxHeight = window.innerHeight - Math.round(rect.y + rect.height + 16)
-								transformOrigin = 'top right'
-								break
+							this.computedStyle = {
+								left: '10px',
+								right: '10px',
+								top: top ? top +  'px' : top,
+								bottom: bottom ? bottom + 'px' : bottom,
+								maxHeight: maxHeight ? maxHeight + 'px' : maxHeight,
+								transformOrigin: transformOrigin,
+								transform
+							}
 
-							case 'top-left':
-								maxHeight = Math.round(rect.top - 16)
-								bottom = window.innerHeight - rect.top + 8
-								left = Math.round(rect.x)
-								transformOrigin = 'bottom left'
-								break
-
-							case 'top-right':
-								maxHeight = Math.round(rect.top - 16)
-								bottom = window.innerHeight - rect.top + 8
-								right = window.innerWidth - (Math.round(rect.x) + rect.width)
-								transformOrigin = 'bottom right'
-								break
-
-							default:
-								left = Math.round(rect.x)
-								top = Math.round(rect.y + rect.height + 8)
-								//maxHeight = window.innerHeight - Math.round(rect.y + rect.height + 16)
-								transformOrigin = 'top left'
-								break
-						}
-
-						if(left){
-							if(left + this.$refs.contextMenu.clientWidth >= (window.innerWidth - 16)){
-								left = window.innerWidth - (this.$refs.contextMenu.clientWidth + 16)
-
-								if(transformOrigin === 'top left'){
+							this.onOpen()
+						})
+					}
+					else{
+						this.$nextTick(() => {
+							const rect = caller.getBoundingClientRect()
+
+							switch(this.position){
+
+								case 'bottom-right':
+									right = window.innerWidth - (Math.round(rect.x) + rect.width)
+									top = Math.round(rect.y + rect.height + 8)
+									maxHeight = window.innerHeight - Math.round(rect.y + rect.height + 16)
 									transformOrigin = 'top right'
+									break
+
+								case 'top-left':
+									maxHeight = Math.round(rect.top - 16)
+									bottom = window.innerHeight - rect.top + 8
+									left = Math.round(rect.x)
+									transformOrigin = 'bottom left'
+									break
+
+								case 'top-right':
+									maxHeight = Math.round(rect.top - 16)
+									bottom = window.innerHeight - rect.top + 8
+									right = window.innerWidth - (Math.round(rect.x) + rect.width)
+									transformOrigin = 'bottom right'
+									break
+
+                case 'right':
+                  left = Math.round(rect.x + rect.width)
+                  top = Math.round(rect.y - 1)
+                  transformOrigin = 'top left'
+                  break
+
+								default:
+									left = Math.round(rect.x)
+									top = Math.round(rect.y + rect.height + 8)
+									//maxHeight = window.innerHeight - Math.round(rect.y + rect.height + 16)
+									transformOrigin = 'top left'
+									break
+							}
+
+							if(left){
+								if(left + this.$refs.contextMenu.clientWidth >= (window.innerWidth - 16)){
+									left = window.innerWidth - (this.$refs.contextMenu.clientWidth + 16)
+
+									if(transformOrigin === 'top left'){
+										transformOrigin = 'top right'
+									}
 								}
 							}
-						}
 
-						if(top){
-							if(top + this.$refs.contextMenu.clientHeight >= (window.innerHeight - 16)){
-								top = window.innerHeight - (this.$refs.contextMenu.clientHeight + 16)
+							if(top){
+								if(top + this.$refs.contextMenu.clientHeight >= (window.innerHeight - 16)){
+									top = window.innerHeight - (this.$refs.contextMenu.clientHeight + 16)
 
-								if(transformOrigin === 'top left'){
-									transformOrigin = 'bottom left'
+									if(transformOrigin === 'top left'){
+										transformOrigin = 'bottom left'
+									}
+									else if(transformOrigin === 'top right'){
+										transformOrigin = 'bottom right'
+									}
 								}
-								else if(transformOrigin === 'top right'){
-									transformOrigin = 'bottom right'
+
+								if(top < 0){
+									top = 0
 								}
 							}
 
-							if(top < 0){
-								top = 0
-							}
-						}
+							maxHeight = this.$refs.contextMenu.clientHeight > window.innerHeight * .8 ?
+								Math.round(window.innerHeight * .8) : this.$refs.contextMenu.clientHeight + 24
 
-						maxHeight = this.$refs.contextMenu.clientHeight > window.innerHeight * .8 ?
-							Math.round(window.innerHeight * .8) : this.$refs.contextMenu.clientHeight + 24
+							this.computedStyle = {
+								left: left ? left + 'px' : left,
+								right: right ? right + 'px' : right,
+								top: top ? top +  'px' : top,
+								bottom: bottom ? bottom +  'px' : bottom,
+								maxHeight: maxHeight ? maxHeight + 'px' : maxHeight,
+								transformOrigin: transformOrigin
+							}
 
-						this.computedStyle = {
-							left: left ? left + 'px' : left,
-							right: right ? right + 'px' : right,
-							top: top ? top +  'px' : top,
-							bottom: bottom ? bottom +  'px' : bottom,
-							maxHeight: maxHeight ? maxHeight + 'px' : maxHeight,
-							transformOrigin: transformOrigin
-						}
+              if(this.width === 'parent'){
+                this.computedStyle.width = parseInt(rect.width) + 'px'
+              }
 
-						this.onOpen()
-					})
+							this.onOpen()
+						})
+					}
 
+          this.currentCaller = originalCaller
 				}
 				else{
 					console.error('Undefined caller for context menu')
@@ -220,6 +276,8 @@ export default {
 		},
 
 		close(fn){
+			if(!this.$refs.contextMenu) return
+
 			const transitionEnd = () => {
 				window.removeEventListener('click', this.onDismiss)
 				window.removeEventListener('scroll', this.onDismiss)
@@ -230,11 +288,25 @@ export default {
 				this.computedStyle = null
 				this.isOpen = false
 				this.$emit('dismiss')
-				if(fn) fn()
+				if(typeof fn === 'function') fn()
 			}
 			this.$refs.contextMenu.removeEventListener('transitionend', transitionEnd)
 			this.$refs.contextMenu.addEventListener('transitionend', transitionEnd)
 			this.$refs.contextMenu.classList.remove(this.$style.active)
+		},
+
+		toggle(caller, context){
+
+			if(this.isOpen){
+				this.close()
+			}
+			else{
+				this.open(caller, context)
+			}
+		},
+
+		opened(){
+			return this.isOpen
 		}
 
   }
@@ -246,16 +318,32 @@ export default {
 <style module>
 
 .contextMenu{
-	@apply fixed z-20 bg-base-50 backdrop-blur-md min-w-[150px] overflow-y-auto rounded-lg;
-	@apply border-[1px] border-text-50 shadow-2xl whitespace-nowrap;
+	@apply fixed z-20 panel-500 min-w-[150px] overflow-y-auto rounded-xl;
+	@apply border-[2px] border-text-200 shadow-2xl whitespace-nowrap;
 	transition: all 150ms cubic-bezier(0.25, 1, 0.5, 1);
 	opacity: 0;
-	transform: scale(.3);
 }
 
 .active{
 	opacity: 1;
-	transform: scale(1);
+	transform: translate3d(0, 0, 0);
+}
+
+@media screen(md){
+
+	.contextMenu{
+		@apply fixed z-20 panel-500 min-w-[150px] overflow-y-auto rounded-lg;
+		@apply border-[1px] border-text-50 shadow-2xl whitespace-nowrap;
+		transition: all 150ms cubic-bezier(0.25, 1, 0.5, 1);
+		opacity: 0;
+		transform: scale(.1);
+	}
+
+	.active{
+		opacity: 1;
+		transform: scale(1);
+	}
+
 }
 
-</style>
+</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>