@mixd-id/web-scaffold 0.1.230406210 → 0.1.230406212

package/package.json

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

package/src/components/Carousel.vue

@@ -130,19 +130,15 @@ export default{
 
 			const index = this.index
 			let left = 0
+      const gapPx = parseInt(window.getComputedStyle(this.$refs.inner).getPropertyValue('column-gap'))
 			for(let curIndex = 0 ; curIndex < this.items.length ; curIndex++){
 				const item = this.$refs.inner.children[curIndex]
 				if(curIndex < index)
-					left += item.clientWidth
+					left += (item.clientWidth + gapPx)
 			}
 
-      const gapPx = parseInt(window.getComputedStyle(this.$refs.inner).getPropertyValue('column-gap'))
-      left += gapPx
-
 			left *= -1
 
-      console.log('left', left)
-
 			if(!noAnimation){
 				this.$el.firstElementChild.addEventListener('transitionend', function(){
 					this.classList.remove('transition-carousel')

package/src/components/Image.vue

@@ -26,6 +26,7 @@
 <script>
 
 import {componentMixin} from "../mixin/component";
+import {parseBoolean} from "../utils/helpers.mjs";
 
 const screens = {
 	0: 'all',
@@ -44,6 +45,11 @@ export default{
 
   props:{
 
+    eager: {
+      type: [ Boolean, String ],
+      default: false
+    },
+
 		editable:{
 			type: [ Boolean, String ],
 			default: false
@@ -93,12 +99,18 @@ export default{
   },
 
   mounted(){
-		this.$observe.once(this.$el, () => {
+		this.$resize(this.onResize)
+
+    if(parseBoolean(this.eager)){
       this.isVisible = true
       this.loadSrc()
-		})
-
-		this.$resize(this.onResize)
+    }
+    else{
+      this.$observe.once(this.$el, () => {
+        this.isVisible = true
+        this.loadSrc()
+      })
+    }
   },
 
 	unmounted() {

package/src/widgets/WebPageBuilder.vue

@@ -1205,7 +1205,23 @@ export default{
         'md:': '@media screen and (min-width: 640px)',
       }
 
+      const fontFamilies = {
+        '"Anton", sans-serif': `@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');`,
+        'Dosis, sans-serif': `@import url('https://fonts.googleapis.com/css2?family=Dosis:wght@400;700&display=swap');`,
+        'Lato, sans-serif': `@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap');`,
+        'Merriweather, sans-serif': `@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700&display=swap');`,
+        'Montserrat, sans-serif': `@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');`,
+        '"Noto Sans", sans-serif': `@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;800&display=swap');`,
+        'Oswald, sans-serif': `@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;700&display=swap');`,
+        'Poppins, sans-serif': `@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');`,
+        'Raleway, sans-serif': `@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&display=swap');`,
+        '"Roboto", sans-serif': `@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');`,
+        '"Roboto Slab", serif': `@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@400;800&display=swap');`,
+        '"Work Sans", serif': `@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;700&display=swap');`,
+      }
+
       let text = ''
+      const usedFonts = {}
       for(let mediaKey in styles.media){
         const css = styles.media[mediaKey]
 
@@ -1214,6 +1230,10 @@ export default{
           text += key + '{ '
           for(let selector in css[key]){
             text += selector + ':' + css[key][selector] + ';'
+
+            if(selector === 'font-family' && fontFamilies[css[key][selector]]){
+              usedFonts[css[key][selector]] = fontFamilies[css[key][selector]]
+            }
           }
           text += '}'
         }
@@ -1221,18 +1241,7 @@ export default{
       }
 
       return [
-        `@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');`,
-        `@import url('https://fonts.googleapis.com/css2?family=Dosis:wght@400;700&display=swap');`,
-        `@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap');`,
-        `@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700&display=swap');`,
-        `@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');`,
-        `@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;800&display=swap');`,
-        `@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;700&display=swap');`,
-        `@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');`,
-        `@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&display=swap');`,
-        `@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');`,
-        `@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@400;800&display=swap');`,
-        `@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;700&display=swap');`,
+        ...Object.values(usedFonts),
         text
       ]
         .join("\n")