@mixd-id/web-scaffold 0.1.230406165 → 0.1.230406167

package/package.json

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

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/Image.vue

@@ -1,18 +1,17 @@
 <template>
-  <div :class="compClass" @click="onClick" @mousemove="onMouseMove" @mousedown="onMouseDown">
+  <div :class="$style.comp" @click="onClick" @mousemove="onMouseMove" @mousedown="onMouseDown">
 
-		<slot v-if="$slots['empty'] && status === 0" name="empty" :instance="this"></slot>
+		<slot v-if="status === 0" name="empty" :instance="this"></slot>
 
-    <slot v-else-if="$slots['loading'] && status === 1" name="loading" :instance="this"></slot>
-		<div v-else-if="!$slots['loading'] && status === 1 && spinnerType === 'spinner'" :class="$style.loading">
-			<svg class="animate-spin aspect-square w-[15%] min-w-[14px] text-primary" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
-		</div>
+    <slot v-else-if="status === 1" name="loading">
+      <div :class="$style.loading + (spinnerType === 'shimmer' ? ' ' + $style.shimmer : '')">
+        <svg v-if="spinnerType !== 'shimmer'" class="animate-spin aspect-square w-[15%] min-w-[14px] text-primary" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
+      </div>
+    </slot>
 
-		<slot v-else-if="$slots['error'] && status === 3" name="error" :instance="this"></slot>
+    <img v-else-if="status === 2" :class="computedItemClass" :src="actualSrc" ref="img" />
 
-		<img v-else :class="computedItemClass" :src="actualSrc" ref="img" />
-
-		<slot></slot>
+		<slot v-else-if="status === 3" name="error" :instance="this"></slot>
 
 		<input v-if="Boolean(editable)" class="hidden" type="file" accept="image/*" ref="file" @change="onChange"/>
 
@@ -68,22 +67,6 @@ export default{
 
   computed:{
 
-		actualSrc(){
-			if(typeof window !== 'undefined'){
-				return this.mediaSrc[this.$screenPrefix.value]
-			}
-		},
-
-		compClass(){
-			return [
-				this.$style.comp,
-				this.status === 1 && this.spinnerType === 'shimmer' && !this.$slots['loading'] ?
-					this.$style.shimmer : ''
-			]
-				.filter(_=>_)
-				.join(' ')
-		},
-
 		computedItemClass(){
 			return [
 				this.$style.img,
@@ -99,14 +82,14 @@ export default{
     return {
 			status: 0, // 0:empty, 1:loading, 2:image, 3:error
 			moved: false,
-			mediaSrc: {},
-			visibled: false
+			isVisible: false,
+      actualSrc: null,
     }
   },
 
   mounted(){
 		this.$observe.once(this.$el, () => {
-			this.visibled = true
+			this.isVisible = true
 			this.loadSrc()
 		})
 
@@ -126,10 +109,6 @@ export default{
       this.$emit('change', null, null)
     },
 
-		onResize(){
-			this.loadSrc()
-		},
-
 		onChange(e){
 			if(e.target.files.length > 0){
 				var reader = new FileReader();
@@ -140,6 +119,10 @@ export default{
 			}
 		},
 
+    onResize(){
+      this.loadSrc()
+    },
+
 		edit(){
 			if(this.$refs.file){
 				this.$refs.file.click()
@@ -148,19 +131,14 @@ export default{
 
 		async loadSrc(){
 
-			// src: String | Array | File
-			if(!this.visibled){
-				return
-			}
-
-			if(this.$screenPrefix.value in this.mediaSrc){
+			if(!this.isVisible){
 				return
 			}
 
 			if(typeof this.src === 'string') {
 
 				if (this.src.startsWith('data:image')) {
-					this.mediaSrc[this.$screenPrefix.value] = this.src
+					this.actualSrc = this.src
 					this.status = 2
 				}
 				else{
@@ -191,12 +169,12 @@ export default{
 						img.addEventListener('load', () => {
 							if(img.getAttribute('data-src') !== this.src) return
 							this.status = 2
-							this.mediaSrc[this.$screenPrefix.value] = img.src
+							this.actualSrc = img.src
 						})
 						img.addEventListener('error', (err) => {
 							if(img.getAttribute('data-src') !== this.src) return
 							this.status = 3
-							this.mediaSrc[this.$screenPrefix.value] = this.defaultSrc
+							this.actualSrc = this.defaultSrc
 						})
 						img.src = imgSrc
 						img.setAttribute('data-src', this.src)
@@ -223,11 +201,11 @@ export default{
 					var img = new Image()
 					img.addEventListener('load', () => {
 						this.status = 2
-						this.mediaSrc[this.$screenPrefix.value] = img.src
+						this.actualSrc = img.src
 					})
 					img.addEventListener('error', (err) => {
 						this.status = 3
-						this.mediaSrc[this.$screenPrefix.value] = this.defaultSrc
+						this.actualSrc = this.defaultSrc
 					})
 					img.src = imgSrc
 					this.status = 1
@@ -238,12 +216,12 @@ export default{
 
 				reader.addEventListener('load', () => {
 					this.status = 2
-					this.mediaSrc[this.$screenPrefix.value] = reader.result
+					this.actualSrc = reader.result
 				}, false)
 
 				reader.addEventListener('error', () => {
 					this.status = 3
-					this.mediaSrc[this.$screenPrefix.value] = this.defaultSrc
+					this.actualSrc = this.defaultSrc
 				})
 
 				reader.readAsDataURL(this.src)
@@ -269,15 +247,10 @@ export default{
 
 	watch:{
 
-		src(to){
-			this.mediaSrc = {}
+		src(){
 			this.loadSrc()
 		},
 
-		"isMobile.value"(to){
-			this.loadSrc()
-		}
-
 	}
 }
 

package/src/components/ListView.vue

@@ -409,6 +409,9 @@ export default{
     onHooks(model, event, items){
 
 			if(model === this.subscriptionObj.model && Array.isArray(items)){
+        if(this.$isDebugMode)
+          console.log('onHooks', model, event, items)
+
         switch(event){
 
           case 'create':

package/src/index.js

@@ -321,6 +321,8 @@ export default{
       })
     })
 
+    const privateVars = {}
+
     app.config.globalProperties.uniqid = uniqid
     app.config.globalProperties.$download = download
     app.config.globalProperties.$preload = preload
@@ -332,6 +334,15 @@ export default{
     app.config.globalProperties.warn = consoleWarn
     app.config.globalProperties.info = consoleInfo
 
+    app.config.globalProperties.$isDev = () => import.meta.env.DEV
+
+    app.config.globalProperties.$isDebugMode = () => {
+      if(!('isDebugMode' in privateVars)){
+        privateVars.isDebugMode = location.search.indexOf('debug-mode') >= 0 || import.meta.env.DEV
+      }
+      return privateVars.isDebugMode
+    }
+
     app.component('Ahref', defineAsyncComponent(() => import("./components/Ahref.vue")))
     app.component('Alert', defineAsyncComponent(() => import("./components/Alert.vue")))
     app.component('Article', defineAsyncComponent(() => import("./components/Article.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/widgets/ComponentSetting.vue

@@ -3,7 +3,8 @@
 
     <div>
       <strong class="text-text-400">Layout</strong>
-      <div class="grid grid-cols-4 gap-4 mt-4">
+      <div class="h-[1px] bg-text-100 mt-2 mb-4"></div>
+      <div class="grid grid-cols-4 gap-4">
 
         <div class="col-span-2">
           <label :class="$style.label">Aspect Ratio</label>
@@ -156,12 +157,11 @@
       </div>
     </div>
 
-    <div class="h-[1px] bg-text-100 my-4"></div>
-
     <div v-for="(_, idx) in viewTypes"
          v-show="viewType === _.value">
       <strong class="text-text-400">Spacing</strong>
-      <div class="grid grid-cols-2 gap-4 mt-4">
+      <div class="h-[1px] bg-text-100 mt-2 mb-4"></div>
+      <div class="grid grid-cols-2 gap-4">
         <div>
           <label :class="$style.label">Padding</label>
           <PaddingSetting v-model="padding[idx]"
@@ -179,13 +179,11 @@
       </div>
     </div>
 
-    <div class="h-[1px] bg-text-100 my-4"></div>
-
     <div>
       <strong class="text-text-400">Sizing</strong>
+      <div class="h-[1px] bg-text-100 mt-2 mb-4"></div>
       <div v-for="(_, idx) in viewTypes"
-           v-show="viewType === _.value"
-           class="mt-4">
+           v-show="viewType === _.value">
         <div class="grid grid-cols-2 gap-4">
 
           <div class="col-span-2 mt-1 grid grid-cols-3 gap-4">
@@ -338,11 +336,10 @@
       </div>
     </div>
 
-    <div class="h-[1px] bg-text-100 my-4"></div>
-
     <div>
       <strong class="text-text-400">Grid</strong>
-      <div class="grid grid-cols-2 gap-4 mt-4">
+      <div class="h-[1px] bg-text-100 mt-2 mb-4"></div>
+      <div class="grid grid-cols-2 gap-4">
         <div>
           <label class="flex-1 text-text-400">Column Span</label>
           <Dropdown v-for="(_viewType, index) in viewTypes"
@@ -367,11 +364,12 @@
       </div>
     </div>
 
-    <div class="h-[1px] bg-text-100 my-4"></div>
-
 		<div class="flex flex-col gap-4">
 
-			<strong class="flex-1 text-text-400 mb-4">Background</strong>
+			<div>
+        <strong class="flex-1 text-text-400">Background</strong>
+        <div class="h-[1px] bg-text-100 mt-2"></div>
+      </div>
 
 			<div class="flex flex-row gap-4">
 				<label class="flex-1 text-text-400">Color</label>
@@ -458,11 +456,12 @@
 
 		</div>
 
-    <div class="h-[1px] bg-text-100 my-4"></div>
-
 		<div class="flex flex-col gap-4">
 
-			<strong class="flex-1 text-text-400 mb-4">Border</strong>
+			<div>
+        <strong class="flex-1 text-text-400 mb-4">Border</strong>
+        <div class="h-[1px] bg-text-100 mt-2"></div>
+      </div>
 
 			<div class="flex flex-row items-center gap-4">
 				<label class="flex-1 text-text-400">Width</label>
@@ -527,12 +526,10 @@
 
 		</div>
 
-    <div class="h-[1px] bg-text-100 my-4"></div>
-
 		<div>
-			<strong class="flex-1 text-text-400">Effects</strong>
-
-      <div class="grid grid-cols-2 gap-4 mt-4">
+      <strong class="flex-1 text-text-400">Effects</strong>
+      <div class="h-[1px] bg-text-100 mt-2 mb-4"></div>
+      <div class="grid grid-cols-2 gap-4">
 
         <div>
           <label :class="$style.label">Opacity</label>
@@ -821,7 +818,7 @@ export default{
 <style module>
 
 .comp{
-	@apply flex flex-col gap-4;
+	@apply flex flex-col gap-6;
 }
 
 .label{

package/src/widgets/HeaderSetting.vue

@@ -1,18 +1,31 @@
 <template>
-	<div :class="$style.comp">
-
-		<div>
-			<div class="flex flex-row gap-2">
-				<label class="text-text-400 flex-1">Logo</label>
-				<button type="button" class="text-primary" @click="$refs.image.edit()">Change</button>
-			</div>
-			<div class="mt-1">
-				<div :class="$style.imageBg">
-					<Image ref="image" :src="logoSrc" class="w-[100px] min-h-[48px]" :editable="true" @click="$refs.image.edit()"
-								 @change="setImage" />
-				</div>
-			</div>
-		</div>
+	<div class="flex flex-col gap-6">
+
+		<div v-if="viewType === ''" class="flex flex-col gap-4">
+
+      <div class="flex flex-col gap-1">
+        <label class="flex-1 text-text-400">Model</label>
+        <Dropdown v-model="item.props.variant"
+                  @change="$emit('change')">
+          <option value="Header1">Model 1</option>
+          <option value="Header2">Model 2</option>
+        </Dropdown>
+      </div>
+
+      <div>
+        <div class="flex flex-row gap-2">
+          <label class="text-text-400 flex-1">Logo</label>
+          <button type="button" class="text-primary" @click="$refs.image.edit()">Change</button>
+        </div>
+        <div class="mt-1">
+          <div :class="$style.imageBg">
+            <Image ref="image" :src="logoSrc" class="w-[100px] min-h-[48px]" :editable="true" @click="$refs.image.edit()"
+                   @change="setImage" />
+          </div>
+        </div>
+      </div>
+
+    </div>
 
 		<ComponentSetting :item="item"
 											:view-type="viewType"
@@ -70,10 +83,6 @@ export default{
 
 <style module>
 
-.comp{
-
-}
-
 .imageBg{
 	@apply p-2 bg-white;
 	background-image: radial-gradient(rgba(var(--primary-500)) 1px, transparent 1px);