@mixd-id/web-scaffold 0.1.230406001

package/src/components/ContextMenu.vue

@@ -0,0 +1,261 @@
+<template>
+	<Teleport to=".Y29u">
+		<div v-if="!!(computedState)" :class="$style.contextMenu" :style="computedStyle" ref="contextMenu">
+			<div :class="bodyClass">
+				<slot name="default" :context="context"></slot>
+			</div>
+		</div>
+	</Teleport>
+</template>
+
+<script>
+
+export default {
+
+  props:{
+
+    state: {
+      type: Boolean,
+      default: false
+    },
+
+    caller:{
+      type: Object
+    },
+
+		class: String,
+
+		position: {
+			type: String,
+			default: "auto" // bottom-left, bottom-right, top-left, top-right, bottom-center, top-center   default: bottom-left
+		},
+
+		bodyClass: String,
+
+		dismiss: {
+			type: Boolean,
+			default: true
+		}
+
+  },
+
+	emits: [
+		'dismiss',
+		'open'
+	],
+
+	computed:{
+
+		computedState(){
+			return this.state || this.isOpen
+		}
+
+	},
+
+	data(){
+		return {
+			computedStyle: null,
+			isOpen: false,
+			context: null,
+			closing: false
+		}
+	},
+
+	watch: {
+
+		state(to){
+			if(to){
+				this.open()
+			}
+			else{
+				window.removeEventListener('click', this.onDismiss)
+				window.removeEventListener('scroll', this.onDismiss)
+			}
+		}
+
+	},
+
+  methods: {
+
+		onOpen(){
+			if(typeof window === 'undefined') return
+
+			const transitionEnd = () => {
+				window.addEventListener('click', this.onDismiss)
+				window.addEventListener('scroll', this.onDismiss)
+				this.$refs.contextMenu.removeEventListener('transitionend', transitionEnd)
+				this.$emit('open')
+			}
+
+			this.$refs.contextMenu.removeEventListener('transitionend', transitionEnd)
+			this.$refs.contextMenu.addEventListener('transitionend', transitionEnd)
+			this.$nextTick(() => {
+				this.$refs.contextMenu.classList.add(this.$style.active)
+			})
+		},
+
+		onDismiss(e){
+			if(typeof window === 'undefined') return
+			if(!this.$refs.contextMenu) return
+
+			if(e.target.closest('.' + this.$style.contextMenu) && !this.dismiss)
+				return
+
+			this.close()
+		},
+
+		open(caller, context){
+
+			if(this.isOpen){
+				return this.close(() => {
+					window.setTimeout(() => {
+						this.open(caller, context)
+					}, 30)
+				})
+			}
+
+			if(caller){
+				this.isOpen = true
+			}
+
+			caller = caller ?? this.caller
+
+			if(caller){
+
+				caller = caller.$el ? caller.$el :
+					caller instanceof HTMLElement ? caller : null
+
+				this.context = context
+
+				if(caller){
+
+					this.$nextTick(() => {
+						const rect = caller.getBoundingClientRect()
+
+						let maxHeight
+						let top, right, bottom, left
+						let transformOrigin
+
+						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
+
+							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(transformOrigin === 'top left'){
+									transformOrigin = 'bottom left'
+								}
+								else if(transformOrigin === 'top right'){
+									transformOrigin = 'bottom right'
+								}
+							}
+
+							if(top < 0){
+								top = 0
+							}
+						}
+
+						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.onOpen()
+					})
+
+				}
+				else{
+					console.error('Undefined caller for context menu')
+				}
+			}
+			else{
+				console.warn('Invalid context menu caller', this.caller)
+			}
+		},
+
+		close(fn){
+			const transitionEnd = () => {
+				window.removeEventListener('click', this.onDismiss)
+				window.removeEventListener('scroll', this.onDismiss)
+				if(this.$refs.contextMenu){
+					this.$refs.contextMenu.removeEventListener('transitionend', transitionEnd)
+					this.computedStyle = {}
+				}
+				this.computedStyle = null
+				this.isOpen = false
+				this.$emit('dismiss')
+				if(fn) fn()
+			}
+			this.$refs.contextMenu.removeEventListener('transitionend', transitionEnd)
+			this.$refs.contextMenu.addEventListener('transitionend', transitionEnd)
+			this.$refs.contextMenu.classList.remove(this.$style.active)
+		}
+
+  }
+
+}
+
+</script>
+
+<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;
+	transition: all 150ms cubic-bezier(0.25, 1, 0.5, 1);
+	opacity: 0;
+	transform: scale(.3);
+}
+
+.active{
+	opacity: 1;
+	transform: scale(1);
+}
+
+</style>

package/src/components/CopyToClipboard.vue

@@ -0,0 +1,59 @@
+<template>
+	<button @click="copyToClipboard">
+		<slot></slot>
+	</button>
+</template>
+
+<script>
+
+export default{
+
+	emits: [ 'copied', 'error' ],
+
+	props: {
+		value: {
+			type: undefined,
+			required: true
+		}
+	},
+
+	methods: {
+
+		fallbackCopyTextToClipboard(text){
+			var textArea = document.createElement("textarea");
+			textArea.value = this.value;
+			textArea.style.top = "0";
+			textArea.style.left = "0";
+			textArea.style.position = "fixed";
+			document.body.appendChild(textArea);
+			textArea.focus();
+			textArea.select();
+
+			try {
+				document.execCommand('copy')
+				this.$emit('copied')
+			} catch (err) {
+				this.$emit('error')
+			}
+
+			document.body.removeChild(textArea);
+		},
+
+		copyToClipboard(){
+
+			if (!navigator.clipboard) {
+				this.fallbackCopyTextToClipboard(this.value);
+				return;
+			}
+			navigator.clipboard.writeText(this.value).then(() => {
+				this.$emit('copied')
+			}, (err) => {
+				this.$emit('error')
+			});
+		}
+
+	}
+
+}
+
+</script>

package/src/components/Countdown.vue

@@ -0,0 +1,213 @@
+<template>
+	<div :class="$style.comp">
+
+		<slot v-if="display >= 4 && $slots.day" name="day" :day="day"></slot>
+		<div ref="day" v-else-if="display >= 4" :class="$style.lap">
+			<div></div>
+			<div></div>
+		</div>
+
+		<slot v-if="display >= 3 && $slots.hour" name="hour" :hour="hour"></slot>
+		<div ref="hour" v-else-if="display >= 3" :class="$style.lap">
+			<div></div>
+			<div></div>
+		</div>
+
+		<div>:</div>
+
+		<slot v-if="display >= 2 && $slots.minute" name="minute" :minute="minute"></slot>
+		<div ref="minute" v-else-if="display >= 2" :class="$style.lap">
+			<div></div>
+			<div></div>
+		</div>
+
+		<div>:</div>
+
+		<slot v-if="display >= 1 && $slots.second" name="second" :second="second"></slot>
+		<div ref="second" v-else-if="display >= 1" :class="$style.lap">
+			<div></div>
+			<div></div>
+		</div>
+
+	</div>
+</template>
+
+<script>
+
+import debounce from "lodash/debounce";
+
+export default{
+
+	props: {
+
+		display: {
+			type: [ String, Number ], // default: 3
+			default: 3
+		},
+
+		value: [ String, Number ] // value in second
+
+	},
+
+	computed:{
+
+		day(){
+			return Math.floor(this.timer / 86400).toString().padStart(2, '0')
+		},
+
+		hour(){
+			return (Math.floor(this.timer / 3600) % 24).toString().padStart(2, '0')
+		},
+
+		minute(){
+			return (Math.floor(this.timer / 60) % 60).toString().padStart(2, '0')
+		},
+
+		second(){
+			return (this.timer % 60).toString().padStart(2, '0')
+		}
+
+	},
+
+	data(){
+		return {
+			timer: null,
+			timeoutId: null,
+			beforeSecond: null,
+			afterSecond: null,
+			tick: false
+		}
+	},
+
+	mounted() {
+		this.start()
+
+		if(this.$refs.second) this.$refs.second.addEventListener('transitionend', this.onSecondEnd)
+		if(this.$refs.minute) this.$refs.minute.addEventListener('transitionend', this.onMinuteEnd)
+		if(this.$refs.hour) this.$refs.hour.addEventListener('transitionend', this.onHourEnd)
+		if(this.$refs.day) this.$refs.day.addEventListener('transitionend', this.onDayEnd)
+	},
+
+	methods: {
+
+		onSecondEnd: debounce(function (e){
+			this.$refs.second.insertBefore(this.$refs.second.childNodes[1], this.$refs.second.childNodes[0])
+			this.$refs.second.classList.remove(this.$style.tick)
+			this.$refs.second.childNodes[0].innerHTML = ''
+		}, 100),
+
+		onMinuteEnd: debounce(function (e){
+			this.$refs.minute.insertBefore(this.$refs.minute.childNodes[1], this.$refs.minute.childNodes[0])
+			this.$refs.minute.classList.remove(this.$style.tick)
+			this.$refs.minute.childNodes[0].innerHTML = ''
+		}, 100),
+
+		onHourEnd: debounce(function (e){
+			this.$refs.hour.insertBefore(this.$refs.hour.childNodes[1], this.$refs.hour.childNodes[0])
+			this.$refs.hour.classList.remove(this.$style.tick)
+			this.$refs.hour.childNodes[0].innerHTML = ''
+		}, 100),
+
+		onDayEnd: debounce(function (e){
+			this.$refs.day.insertBefore(this.$refs.day.childNodes[1], this.$refs.day.childNodes[0])
+			this.$refs.day.classList.remove(this.$style.tick)
+			this.$refs.day.childNodes[0].innerHTML = ''
+		}, 100),
+
+		setInitial(){
+			if(this.$refs.day) this.$refs.day.lastElementChild.innerHTML = '1 hari'
+			if(this.$refs.hour) this.$refs.hour.lastElementChild.innerHTML =  (Math.floor(this.timer / 3600) % 24).toString().padStart(2, '0')
+			if(this.$refs.minute) this.$refs.minute.lastElementChild.innerHTML = (Math.floor(this.timer / 60) % 60).toString().padStart(2, '0')
+			if(this.$refs.second) this.$refs.second.lastElementChild.innerHTML = (this.timer % 60).toString().padStart(2, '0')
+		},
+
+		start(){
+
+			this.timer = this.value
+
+			this.setInitial()
+
+			this.timeoutId = window.setInterval(() => {
+				this.timer--
+				this.tick = true
+
+				if(this.timer <= 0){
+					window.clearTimeout(this.timeoutId)
+				}
+			}, 1000)
+		}
+
+	},
+
+	watch: {
+
+		value(to){
+			this.start()
+		},
+
+		day(to, from){
+			if(!this.tick || !this.$refs.day) return
+			this.$refs.day.firstElementChild.innerHTML = to > 0 ? to + ' hari' : ''
+			this.$refs.day.lastElementChild.innerHTML = from + ' hari'
+			this.$refs.day.classList.add(this.$style.tick)
+		},
+
+		hour(to, from){
+			if(!this.tick) return
+			this.$refs.hour.firstElementChild.innerHTML = to
+			this.$refs.hour.lastElementChild.innerHTML = from
+			this.$refs.hour.classList.add(this.$style.tick)
+		},
+
+		minute(to, from){
+			if(!this.tick) return
+			this.$refs.minute.firstElementChild.innerHTML = to
+			this.$refs.minute.lastElementChild.innerHTML = from
+			this.$refs.minute.classList.add(this.$style.tick)
+		},
+
+		second(to, from){
+			if(!this.tick) return
+			this.$refs.second.firstElementChild.innerHTML = to
+			this.$refs.second.lastElementChild.innerHTML = from
+			this.$refs.second.classList.add(this.$style.tick)
+		}
+	}
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+	@apply flex flex-row gap-2;
+}
+
+.lap{
+	@apply relative overflow-hidden bg-gray-200 min-w-[1.8rem] rounded-lg text-center;
+}
+.lap>*{
+	@apply whitespace-nowrap font-bold;
+}
+.lap>*:first-child{
+	@apply absolute top-0 left-0 right-0 text-center;
+	transform: translate3d(0, -1.3rem, 0);
+}
+.lap>*:last-child{
+	transform: translate3d(0, 0, 0);
+}
+
+.tick{
+}
+.tick>*{
+	transition: transform 300ms ease;
+}
+.tick>*:first-child{
+	transform: translate3d(0, 0, 0);
+}
+.tick>*:last-child{
+	transform: translate3d(0, 1.3rem, 0);
+}
+
+</style>