@mixd-id/web-scaffold 0.1.230406103 → 0.1.230406106

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mixd-id/web-scaffold",
   "private": false,
-  "version": "0.1.230406103",
+  "version": "0.1.230406106",
   "scripts": {
     "dev": "vite serve",
     "build": "vite build",
@@ -11,6 +11,9 @@
   "exports": {
     ".": "./src/index.js",
     "./themes/default": "./src/themes/default/index.js",
+    "./components/Modal.vue": "./src/components/Modal.vue",
+    "./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/ListView.vue

@@ -359,7 +359,7 @@ export default{
 
           case 'create':
           case 'update':
-						if(Object.keys(items[0]).length <= 1 && Object.keys(items[0])[0] === 'uid'){
+						if(items[0] && Object.keys(items[0]).length <= 1 && Object.keys(items[0])[0] === 'uid'){
 							this.socketEmit2(this.src, {
 								columns:this.config.columns,
 								preset:{

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')">
@@ -39,6 +42,7 @@
 let modals = []
 
 const registerModal = (modal) => {
+	if(modals.includes(modal)) return
 
 	modals.forEach((_) => {
 		_.isDisabled = 1
@@ -48,7 +52,6 @@ const registerModal = (modal) => {
 }
 
 const unRegisterModal = (modal) => {
-
 	modals = modals.filter((_) => _ !== modal)
 
 	if(modals.length > 0)
@@ -122,25 +125,20 @@ 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)
+
+		this.$nextTick(() => {
+			if(this.computedState){
+				this.setState(this.computedState)
+			}
+		})
 	},
 
 	methods: {
@@ -184,6 +182,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)
+			}
 		}
   }
 
@@ -210,7 +222,6 @@ export default{
 	@apply bg-base-400;
 	@apply border-[1px] border-text-50 z-20 flex max-h-[90vh];
 	@apply rounded-xl overflow-hidden;
-	transition:  all 300ms cubic-bezier(0.25, 1, 0.5, 1);
 }
 
 .modal form{

package/src/components/Modal2.vue

@@ -2,7 +2,7 @@
   <div>
     <Teleport to=".bW9k">
 			<div :class="computedClass" ref="modal" :style="computedStyle"
-					 :data-state="computedState ? 1 : 0">
+					 :data-state="!!computedState ? 1 : 0">
 				<form v-if="useForm" @submit.prevent="$emit('submit')">
 					<div class="modal-head">
 						<slot name="head" :context="context"></slot>
@@ -37,6 +37,7 @@
 let modals = []
 
 const registerModal = (modal) => {
+	if(modals.includes(modal)) return
 
 	modals.forEach((_) => {
 		_.isDisabled = 1
@@ -66,7 +67,10 @@ export default{
 			type: String,
 			default: 'bottom'
 		},
-		state: [ Number, Boolean, String ],
+		state: {
+			type: [ Number, Boolean, String ],
+			default: true
+		},
 		transition: { type: String, default: 'slideup' },
 		width: String,
 		useForm: {
@@ -121,29 +125,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 +180,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/Slider.vue

@@ -259,7 +259,7 @@ export default{
   }
 
   .slider>div:nth-child(1){
-    @apply absolute bg-base-300 rounded-lg;
+    @apply absolute bg-text-50 rounded-lg;
     height: .5rem;
     top: 50%;
     left: .75rem;
@@ -282,4 +282,4 @@ export default{
     touch-action: none;
   }
 
-</style>
+</style>

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{