@mixd-id/web-scaffold 0.1.230406166 → 0.1.230406168

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mixd-id/web-scaffold",
   "private": false,
-  "version": "0.1.230406166",
+  "version": "0.1.230406168",
   "scripts": {
     "dev": "vite serve",
     "build": "vite build",
@@ -12,7 +12,6 @@
     ".": "./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",

package/src/components/Alert.vue

@@ -16,7 +16,7 @@
 						</div>
 
 						<div :class="$style.details" v-if="message">
-							<p class="text-center break-all whitespace-pre-line">{{ message }}</p>
+							<p class="text-center break-words">{{ message }}</p>
 						</div>
 
 						<div :class="$style.details" v-if="details">

package/src/components/Modal.vue

@@ -5,7 +5,10 @@
 									appear
 									@after-leave="onAfterLeave"
 									@after-enter="$emit('show')">
-        <div v-if="computedState" :class="computedClass" ref="modal" :style="computedStyle"
+        <div v-if="currentState"
+             ref="modal"
+             :class="computedClass"
+             :style="computedStyle"
 						 :data-state="computedState ? 1 : 0">
           <form v-if="useForm" @submit.prevent="$emit('submit')">
             <div class="modal-head">
@@ -44,9 +47,9 @@ let modals = []
 const registerModal = (modal) => {
 	if(modals.includes(modal)) return
 
-	/*modals.forEach((_) => {
+	modals.forEach((_) => {
 		_.isDisabled = 1
-	})*/
+	})
 
 	modals.push(modal)
 }
@@ -54,8 +57,8 @@ const registerModal = (modal) => {
 const unRegisterModal = (modal) => {
 	modals = modals.filter((_) => _ !== modal)
 
-	/*if(modals.length > 0)
-		modals[modals.length - 1].isDisabled = 0*/
+	if(modals.length > 0)
+		modals[modals.length - 1].isDisabled = 0
 }
 
 export default{
@@ -77,7 +80,8 @@ export default{
 		useForm: {
 			type: Boolean,
 			default: false
-		}
+		},
+    mode: 'v-if', // v-if or v-show
   },
 
 	methods: {
@@ -130,9 +134,16 @@ export default{
 					overlay.classList.add('bW9l')
 				}
 
+        this.$emit('show')
+
 				registerModal(this)
 			}
 			else{
+        this.$emit('hide')
+
+        if(this.mode === 'v-show')
+          this.$nextTick(() => this.onAfterLeave())
+
 				unRegisterModal(this)
 			}
 		}
@@ -153,7 +164,9 @@ export default{
       return [
         this.$style.modal,
 				this.$style['modal-' + this.position],
-        this.class
+        this.class,
+        this.mode === 'v-show' ? this.$style['v-show'] : '',
+        this.computedState ? this.$style.open : ''
       ]
         .join(' ')
         .trim()
@@ -167,8 +180,13 @@ export default{
     },
 
 		computedState(){
-			return this.state ? Boolean(this.state) : this._state
-		}
+      return this.state ? Boolean(this.state) : this._state
+		},
+
+    currentState(){
+      return this.mode === 'v-show' ? true :
+          this.computedState
+    },
 
   },
 
@@ -186,14 +204,6 @@ export default{
 			this.setState(to)
     },
 
-		$route(to, from){
-			if(from.path !== to.path && !to.hash){
-				let overlay = document.querySelector('.bW9k')
-				if(overlay && overlay.classList.contains('bW9l'))
-					overlay.classList.remove('bW9l')
-			}
-		},
-
   },
 
 	mounted() {
@@ -234,6 +244,13 @@ export default{
 	@apply rounded-xl overflow-hidden;
 }
 
+.modal.v-show{
+  transform: scale(0);
+}
+.modal.v-show.open{
+  transform: scale(1);
+}
+
 .modal form{
 	@apply flex-1 min-h-0 flex flex-col relative;
 }

package/src/index.js

@@ -388,8 +388,6 @@ 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('MonacoEditor', defineAsyncComponent(() => import("./components/MonacoEditor.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")))

package/src/utils/helpers.js

@@ -366,6 +366,24 @@ const createComponentInstance = function(component){
   return component
 }
 
+const deepObjectContainsObject = (outerObject, innerObject) => {
+  for (const key in innerObject) {
+    if (innerObject.hasOwnProperty(key)) {
+      if (typeof innerObject[key] === 'object' && typeof outerObject[key] === 'object') {
+        // If both properties are objects, recursively check them
+        if (!deepObjectContainsObject(outerObject[key], innerObject[key])) {
+          return false; // Nested objects do not match
+        }
+      } else {
+        if (outerObject[key] !== innerObject[key]) {
+          return false; // Property in innerObject doesn't exist in outerObject or values don't match
+        }
+      }
+    }
+  }
+  return true; // All properties and values in innerObject exist in outerObject
+}
+
 
 module.exports = {
   ceil,
@@ -389,4 +407,5 @@ module.exports = {
   generateStylesheet,
   hexToRgb,
   createComponentInstance,
+  deepObjectContainsObject,
 }

package/src/components/Modal2.vue

@@ -1,300 +0,0 @@
-<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) => {
-	if(modals.includes(modal)) return
-
-	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: {
-			type: [ Number, Boolean, String ],
-			default: true
-		},
-		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){
-      this.setState(to)
-    },
-
-    $route(to, from){
-      if(from.path !== to.path && !to.hash){
-        let overlay = document.querySelector('.bW9k')
-        if(overlay && overlay.classList.contains('bW9l'))
-          overlay.classList.remove('bW9l')
-      }
-    },
-
-  },
-
-	mounted() {
-		document.querySelector('.bW9k').addEventListener('click', this.onDismiss)
-		window.addEventListener('keydown', this.onKeyDown)
-
-		if(this.computedState){
-			this.setState(this.computedState)
-		}
-	},
-
-	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')
-			}
-		},
-
-		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)
-				})
-			}
-		}
-  }
-
-}
-
-</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/MonacoEditor.vue

@@ -1,136 +0,0 @@
-<template>
-	<div :class="$style.comp">
-		<div class="flex flex-row p-2">
-			<code>{{ language }}</code>
-			<div class="flex-1"></div>
-			<button type="button" class="text-primary" @click="reformat">Beautify</button>
-		</div>
-		<div ref="editorContainer" :class="$style['monaco-editor-container']"></div>
-	</div>
-</template>
-
-<script>
-import * as monaco from 'monaco-editor'
-import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
-import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker'
-import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker'
-import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker'
-import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker'
-
-self.MonacoEnvironment = {
-	getWorker(_, label) {
-		if (label === 'json') {
-			return new jsonWorker()
-		}
-		if (label === 'css' || label === 'scss' || label === 'less') {
-			return new cssWorker()
-		}
-		if (label === 'html' || label === 'handlebars' || label === 'razor') {
-			return new htmlWorker()
-		}
-		if (label === 'typescript' || label === 'javascript') {
-			return new tsWorker()
-		}
-		return new editorWorker()
-	}
-}
-
-export default {
-
-	props: {
-
-		language: {
-			type: String,
-			default: 'json'
-		},
-
-		theme: {
-			type: String,
-			default: 'vs-dark'
-		},
-
-		lineNumbers: {
-			type: String,
-			default: "off"
-		},
-
-		modelValue: String
-
-	},
-
-	methods: {
-
-		createEditor() {
-			this.editor = monaco.editor.create(this.$refs.editorContainer, {
-				value: this.modelValue,
-				language: this.language,
-				lineNumbers: this.lineNumbers,
-				minimap: {
-					enabled: false
-				},
-				theme: this.theme
-			});
-
-			this.editor.onDidChangeModelContent(event => {
-				const updatedCode = this.editor.getValue();
-				this.$emit('update:modelValue', updatedCode)
-			});
-		},
-
-		getErrors(){
-			const markers = monaco.editor.getModelMarkers({ owner: this.editor.getModel() });
-
-			let errors = []
-			if (markers.length >= 0) {
-				markers.forEach(marker => {
-					errors.push({
-						message: marker.message,
-						line: marker.startLineNumber,
-						column: marker.startColumn
-					})
-				});
-			}
-
-			return errors.length > 0 ? errors : null
-		},
-
-		reformat(){
-			const formatAction = this.editor.getAction('editor.action.formatDocument');
-			formatAction.run();
-		}
-
-	},
-
-	beforeDestroy() {
-		this.editor.dispose();
-	},
-
-	mounted() {
-		this.createEditor();
-	}
-
-};
-</script>
-
-<style module>
-
-.comp{
-	@apply flex-1 flex flex-col;
-}
-
-.monaco-editor-container {
-	width: 100%;
-	height: 300px;
-}
-
-.monaco-editor-container *{
-	font-family: Menlo, Monaco, "Courier New", monospace;
-	--vscode-editor-background: rgb(var(--base-300));
-	--vscode-editorGutter-background: rgb(var(--base-400));
-}
-
-.monaco-editor-container .margin-view-overlays .line-numbers {
-	font-family: 'Menlo', monospace;
-}
-
-</style>