@mixd-id/web-scaffold 0.1.230406102 → 0.1.230406104

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mixd-id/web-scaffold",
   "private": false,
-  "version": "0.1.230406102",
+  "version": "0.1.230406104",
   "scripts": {
     "dev": "vite serve",
     "build": "vite build",
@@ -11,6 +11,8 @@
   "exports": {
     ".": "./src/index.js",
     "./themes/default": "./src/themes/default/index.js",
+    "./components/Modal2.vue": "./src/components/Modal2.vue",
+    "./components/Textbox.vue": "./src/components/Textbox.vue",
     "./mixin/component": "./src/mixin/component.js",
     "./mixin/edit-mode": "./src/mixin/edit-mode.js",
     "./helpers": {

package/src/components/Modal.vue

@@ -1,7 +1,10 @@
 <template>
   <div>
     <Teleport to=".bW9k">
-      <Transition :name="transition" @after-leave="onAfterLeave" @after-enter="$emit('show')">
+      <Transition :name="transition"
+									appear
+									@after-leave="onAfterLeave"
+									@after-enter="$emit('show')">
         <div v-if="computedState" :class="computedClass" ref="modal" :style="computedStyle"
 						 :data-state="computedState ? 1 : 0">
           <form v-if="useForm" @submit.prevent="$emit('submit')">
@@ -122,25 +125,18 @@ export default{
   watch:{
 
     computedState(to, from){
-
-      if(to){
-        let overlay = document.querySelector('.bW9k')
-        if(overlay){
-          overlay.classList.add('bW9l')
-        }
-
-				registerModal(this)
-      }
-			else{
-				unRegisterModal(this)
-			}
+			this.setState(to)
     }
 
   },
 
 	mounted() {
 		document.querySelector('.bW9k').addEventListener('click', this.onDismiss)
-		window,addEventListener('keydown', this.onKeyDown)
+		window.addEventListener('keydown', this.onKeyDown)
+
+		if(this.computedState){
+			this.setState(this.computedState)
+		}
 	},
 
 	methods: {
@@ -184,6 +180,20 @@ export default{
 			if(this.dismissable && this.$refs.modal && e.keyCode === 27){
 				this.$emit('dismiss')
 			}
+		},
+
+		setState(to){
+			if(to){
+				let overlay = document.querySelector('.bW9k')
+				if(overlay){
+					overlay.classList.add('bW9l')
+				}
+
+				registerModal(this)
+			}
+			else{
+				unRegisterModal(this)
+			}
 		}
   }
 

package/src/components/Modal2.vue

@@ -121,29 +121,18 @@ export default{
   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)
-				})
-			}
+      this.setState(to)
     }
 
   },
 
 	mounted() {
 		document.querySelector('.bW9k').addEventListener('click', this.onDismiss)
-		window,addEventListener('keydown', this.onKeyDown)
+		window.addEventListener('keydown', this.onKeyDown)
+
+		if(this.computedState){
+			this.setState(this.computedState)
+		}
 	},
 
 	methods: {
@@ -187,6 +176,24 @@ export default{
 			if(this.dismissable && this.$refs.modal && e.keyCode === 27){
 				this.$emit('dismiss')
 			}
+		},
+
+		setState(to){
+			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)
+				})
+			}
 		}
   }
 

package/src/components/Textbox.vue

@@ -187,7 +187,8 @@ export default{
 .size-lg{ @apply min-h-[var(--h-cp-lg)]; }
 
 .textbox>input{
-	@apply flex-1 outline-none p-2 bg-transparent
+	@apply flex-1 outline-none p-2 bg-transparent;
+	font-size: inherit;
 }
 
 .active{

package/src/widgets/IconList.vue

@@ -1,5 +1,5 @@
 <template>
-	<div :class="$style.comp">
+	<div class="grid">
 		<div v-for="(icon, index) in icons" :key="index" class="text-center p-3">
 			<router-link :to="icon.target ?? ''">
 				<Image :src="imageUrl(icon)" class="inline-block aspect-square w-[90%] md:w-[95%] max-w-[64px] rounded-xl"