@mixd-id/web-scaffold 0.1.230406136 → 0.1.230406138

package/package.json

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

package/src/components/Image.vue

@@ -66,7 +66,9 @@ export default{
   computed:{
 
 		actualSrc(){
-			return this.mediaSrc[this.$screenPrefix]
+			if(typeof window !== 'undefined'){
+				return this.mediaSrc[this.$screenPrefix]
+			}
 		},
 
 		compClass(){
@@ -109,6 +111,7 @@ export default{
   },
 
 	unmounted() {
+		this.$observe.unregister(this.$el)
 		this.$unresize(this.onResize)
 	},
 
@@ -259,6 +262,7 @@ export default{
 	watch:{
 
 		src(to){
+			this.mediaSrc = {}
 			this.loadSrc()
 		},
 

package/src/index.js

@@ -1,5 +1,5 @@
-import {defineAsyncComponent, reactive, ref} from "vue"
-import {accessNestedObject, observeInit} from './utils/helpers.mjs'
+import {defineAsyncComponent, reactive} from "vue"
+import {observeInit} from './utils/helpers.mjs'
 import throttle from "lodash/throttle"
 
 let _UNIQID = 0
@@ -252,7 +252,7 @@ const util = {
     let prefix = ''
     for(let breakpoint in mediaBreakpoints){
       if(width > breakpoint){
-        prefix = mediaBreakpoints[breakpoint]
+        prefix = mediaBreakpoints[breakpoint] ?? prefix
       }
     }
 
@@ -273,12 +273,11 @@ export default{
         app.config.globalProperties.$observe = observeInit()
       }
 
-      app.config.globalProperties.$screenPrefix = reactive(util.calculateMediaPrefix(window.innerWidth))
+      app.config.globalProperties.$screenPrefix = util.calculateMediaPrefix(window.innerWidth)
       const onWindowResize = throttle(() => {
         app.config.globalProperties.$screenPrefix = util.calculateMediaPrefix(window.innerWidth)
         resizeEvents.forEach((fn) => fn())
-        console.log('1')
-      }, 500, { leading:true })
+      }, 1000, { leading:true })
 
       window.addEventListener('resize', onWindowResize)
     }
@@ -348,7 +347,6 @@ export default{
     app.component('Countdown', defineAsyncComponent(() => import("./components/Countdown.vue")))
     app.component('Datepicker', defineAsyncComponent(() => import("./components/Datepicker.vue")))
     app.component('Dropdown', defineAsyncComponent(() => import("./components/Dropdown.vue")))
-    app.component('DynamicTemplate', defineAsyncComponent(() => import("./components/DynamicTemplate.vue")))
     app.component('ErrorText', defineAsyncComponent(() => import("./components/ErrorText.vue")))
     app.component('Feed', defineAsyncComponent(() => import("./components/Feed.vue")))
     app.component('Gmaps', defineAsyncComponent(() => import("./components/Gmaps.vue")))

package/src/utils/helpers.mjs

@@ -281,8 +281,7 @@ function observeInit(){
 
   const observeCols = {}
 
-  const once = function(el, callback)
-  {
+  const once = function(el, callback){
     if(typeof el.__observeKey !== 'undefined') return
 
     intersectionObserver.observe(el)
@@ -292,8 +291,7 @@ function observeInit(){
     el.__observeKey = key
   }
 
-  const always = function(el, callback)
-  {
+  const always = function(el, callback){
     if(typeof el.__observeKey !== 'undefined') return
 
     intersectionObserver.observe(el)

package/src/widgets/WebPageBuilder.vue

@@ -33,8 +33,12 @@
 
 					<div class="flex flex-row gap-4" v-if="!page.isSystem">
 						<div class="flex flex-col gap-1">
-							<label class="text-text-400 w-[40px]">{{ $t('Active')}}</label>
-							<Switch v-model="page.isActive" @change="save"/>
+							<label class="text-text-400 w-[40px]">{{ $t('Status') }}</label>
+							<Dropdown v-model="page.status" @change="save">
+								<option :value="-1">{{ $t('Disabled') }}</option>
+								<option :value="0">{{ $t('Draft') }}</option>
+								<option :value="1">{{ $t('Active') }}</option>
+							</Dropdown>
 						</div>
 
 						<div class="flex-1">

package/src/components/DynamicTemplate.vue

@@ -1,44 +0,0 @@
-<template>
-	<div :class="$style.comp">
-		<component :is="components"></component>
-	</div>
-</template>
-
-<script>
-
-import * as Vue from "vue/dist/vue.esm-bundler";
-
-export default{
-
-	props: [ 'template' ],
-
-	data(){
-		return {
-			components: null
-		}
-	},
-
-	watch: {
-
-		template: {
-			immediate: true,
-			handler(to){
-				this.components = Vue.compile(to)
-			}
-		}
-
-	}
-
-
-
-}
-
-</script>
-
-<style module>
-
-.comp{
-
-}
-
-</style>