@mixd-id/web-scaffold 0.1.230406098 → 0.1.230406100

package/package.json

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

package/src/components/Modal.vue

@@ -2,7 +2,8 @@
   <div>
     <Teleport to=".bW9k">
       <Transition :name="transition" @after-leave="onAfterLeave" @after-enter="$emit('show')">
-        <div v-if="computedState" :class="computedClass" ref="modal" :style="computedStyle">
+        <div v-if="computedState" :class="computedClass" ref="modal" :style="computedStyle"
+						 :data-state="computedState ? 1 : 0">
           <form v-if="useForm" @submit.prevent="$emit('submit')">
             <div class="modal-head">
               <slot name="head" :context="context"></slot>
@@ -160,7 +161,7 @@ export default{
 				let hasTrueState = false
 
 				for(let i = 0 ; i < overlay.children.length ; i++){
-					if(overlay.children[i].style.display !== 'none'){
+					if(overlay.children[i].getAttribute('data-state') === '1'){
 						hasTrueState = true
 					}
 				}
@@ -174,9 +175,8 @@ export default{
     },
 
 		onDismiss(e){
-			if(this.dismissable && this.$refs.modal && e.target.classList.contains('bW9k')){
+			if(this.computedState && this.dismissable && this.$refs.modal && e.target.classList.contains('bW9k')){
 				this.$emit('dismiss')
-				this.close()
 			}
 		},
 

package/src/components/Modal2.vue

@@ -0,0 +1,281 @@
+<template>
+  <div>
+    <Teleport to=".bW9k">
+			<div :class="computedClass" ref="modal" :style="computedStyle"
+					 :data-state="computedState ? 1 : 0">
+				<form v-if="useForm" @submit.prevent="$emit('submit')">
+					<div class="modal-head">
+						<slot name="head" :context="context"></slot>
+					</div>
+					<div :class="modalBodyClass">
+						<slot :context="context"></slot>
+					</div>
+					<div class="modal-foot">
+						<slot name="foot" :context="context"></slot>
+					</div>
+					<div v-if="isDisabled" :class="$style.overlay"></div>
+				</form>
+				<div v-else class="flex-1 min-h-0 flex flex-col relative">
+					<div class="modal-head">
+						<slot name="head" :context="context"></slot>
+					</div>
+					<div :class="modalBodyClass">
+						<slot :context="context"></slot>
+					</div>
+					<div class="modal-foot">
+						<slot name="foot" :context="context"></slot>
+					</div>
+					<div v-if="isDisabled" :class="$style.overlay"></div>
+				</div>
+			</div>
+    </Teleport>
+  </div>
+</template>
+
+<script>
+
+let modals = []
+
+const registerModal = (modal) => {
+
+	modals.forEach((_) => {
+		_.isDisabled = 1
+	})
+
+	modals.push(modal)
+}
+
+const unRegisterModal = (modal) => {
+
+	modals = modals.filter((_) => _ !== modal)
+
+	if(modals.length > 0)
+		modals[modals.length - 1].isDisabled = 0
+}
+
+export default{
+
+	emits: [ 'submit', 'dismiss', 'show', 'hide' ],
+
+  props:{
+		bodyClass:{ type: String, default: '' },
+    class:{ type: String, default: '' },
+		dismissable: undefined,
+		height: String,
+		position: {
+			type: String,
+			default: 'bottom'
+		},
+		state: [ Number, Boolean, String ],
+		transition: { type: String, default: 'slideup' },
+		width: String,
+		useForm: {
+			type: Boolean,
+			default: false
+		}
+  },
+
+  computed:{
+
+    modalBodyClass(){
+      return [
+        this.$style.modalBody,
+				this.bodyClass
+      ]
+        .join(' ')
+        .trim()
+    },
+
+    computedClass(){
+      return [
+        this.$style.modal,
+				this.$style['modal-' + this.position],
+        this.class,
+				this.computedState ? this.$style.open : ''
+      ]
+        .join(' ')
+        .trim()
+    },
+
+    computedStyle(){
+      return {
+        width: parseInt(this.width) + 'px',
+        height: parseInt(this.height) + 'px',
+      }
+    },
+
+		computedState(){
+			return this.state ? Boolean(this.state) : this._state
+		}
+
+  },
+
+	data(){
+		return {
+			isDisabled: 0,
+			_state: false,
+			context: null
+		}
+	},
+
+  watch:{
+
+    computedState(to, from){
+
+      if(to){
+        let overlay = document.querySelector('.bW9k')
+        if(overlay){
+          overlay.classList.add('bW9l')
+        }
+
+				this.$emit('show')
+				registerModal(this)
+      }
+			else{
+				this.$nextTick(() => {
+					this.onAfterLeave()
+					unRegisterModal(this)
+				})
+			}
+    }
+
+  },
+
+	mounted() {
+		document.querySelector('.bW9k').addEventListener('click', this.onDismiss)
+		window,addEventListener('keydown', this.onKeyDown)
+	},
+
+	methods: {
+
+		open(context = {}){
+			this.context = context
+			this._state = true
+		},
+
+		close(){
+			this._state = false
+		},
+
+    onAfterLeave(){
+      let overlay = document.querySelector('.bW9k')
+      if(overlay){
+
+				let hasTrueState = false
+
+				for(let i = 0 ; i < overlay.children.length ; i++){
+					if(overlay.children[i].getAttribute('data-state') === '1'){
+						hasTrueState = true
+					}
+				}
+
+        if(!hasTrueState){
+          overlay.classList.remove('bW9l')
+        }
+
+				this.$emit('hide')
+      }
+    },
+
+		onDismiss(e){
+			if(this.computedState && this.dismissable && this.$refs.modal && e.target.classList.contains('bW9k')){
+				this.$emit('dismiss')
+			}
+		},
+
+		onKeyDown(e){
+			if(this.dismissable && this.$refs.modal && e.keyCode === 27){
+				this.$emit('dismiss')
+			}
+		}
+  }
+
+}
+
+</script>
+
+<style>
+
+.bW9k{
+	@apply fixed z-20 top-0 left-0 bottom-0 right-0 hidden items-center justify-center;
+	@apply bg-black/50 backdrop-blur-md;
+}
+.bW9l{
+	@apply flex;
+}
+
+</style>
+
+<style module>
+
+.modal{
+	@apply fixed;
+	@apply bg-base-400;
+	@apply border-[1px] border-text-50 z-20 flex max-h-[90vh];
+	@apply rounded-xl overflow-hidden;
+	transform: scale(0);
+}
+.modal.open{
+	transform: scale(1);
+}
+
+.modal form{
+	@apply flex-1 min-h-0 flex flex-col relative;
+}
+
+.modalBody{
+	@apply flex-1 min-h-0 overflow-y-auto flex bg-base-400 dark:bg-base-300;
+}
+
+.overlay{
+	@apply absolute z-20 left-0 bottom-0 top-0 right-0 bg-white/50 backdrop-blur-sm;
+}
+html[data-theme='dark'] .overlay{
+	@apply bg-black/50;
+}
+
+@media screen and (max-width: 640px) {
+
+	.modal {
+		max-height: 90vh;
+		width: 100vw !important;
+	}
+
+	.modal-center{
+		align-self: center;
+	}
+
+	.modal-bottom{
+		align-self: end;
+	}
+
+}
+
+@media screen and (min-width: 640px) {
+
+	.modal {
+		max-width: 90vw;
+		width: 480px;
+	}
+
+}
+
+</style>
+
+<style>
+
+.slideup-enter-active,
+.slideup-leave-active {
+	transition: all 300ms cubic-bezier(0.25, 1, 0.5, 1);
+}
+.slideup-enter-active,
+.slideup-leave-active {
+	transform: translate3d(0, 0, 0);
+}
+.slideup-enter-from,
+.slideup-leave-to {
+	opacity: 0;
+	transform: translate3d(0, 10px, 0);
+}
+
+</style>

package/src/components/Textbox.vue

@@ -115,6 +115,10 @@ export default{
 
 	methods:{
 
+		focus(){
+			this.$refs.input.focus()
+		},
+
 		select(){
 			this.$refs.input.select()
 		},

package/src/index.js

@@ -320,6 +320,7 @@ export default{
     app.component('Flex', defineAsyncComponent(() => import("./components/Flex.vue")))
     app.component('Grid', defineAsyncComponent(() => import("./components/Grid.vue")))
     app.component('Modal', defineAsyncComponent(() => import("./components/Modal.vue")))
+    app.component('Modal2', defineAsyncComponent(() => import("./components/Modal2.vue")))
     app.component('OTPField', defineAsyncComponent(() => import("./components/OTPField.vue")))
     app.component('PageBuilder', defineAsyncComponent(() => import("./components/PageBuilder.vue")))
     app.component('Radio', defineAsyncComponent(() => import("./components/Radio.vue")))