@mixd-id/web-scaffold 0.1.240411008 → 0.1.240411010

package/package.json

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

package/src/components/ColorPicker3.vue

@@ -41,11 +41,9 @@ export default {
   },
 
   mounted() {
-    console.log(this.modelValue)
-
     if(`${this.modelValue ?? ''}`.substring(0, 1) === '#'){
       this.color1 = this.modelValue
-      this.mode = 'solid'
+      this.mode = 'solid'p
     }
     else if(`${this.modelValue ?? ''}`.indexOf('linear-') >= 0){
       const match = this.modelValue.match(/linear-gradient\(([^,]+),([^,]+),([^)]+)\)/)

package/src/widgets/BackgroundColorSetting.vue

@@ -7,7 +7,11 @@
     </div>
 
     <div>
-      <small class="text-text-400">Background Image</small>
+      <div class="flex flex-row">
+        <small class="flex-1 text-text-400">Background Image</small>
+        <button v-if="bgImages[viewIndex]" type="button" class="text-primary text-sm"
+                @click="delete bgImages[viewIndex]">Remove</button>
+      </div>
       <Image :src="imageSrc(bgImages[viewIndex])"
              :editable="true"
              item-class="object-contain"
@@ -78,6 +82,7 @@ export default{
     bgColors(){
       if(!Array.isArray(this.item.props.bgColors))
         this.item.props.bgColors = []
+
       return this.item.props.bgColors
     },
 

package/src/widgets/ComponentSetting2.vue

@@ -387,7 +387,7 @@ export default{
 
         { text:'Backgrounds', items: [
 
-            { text:'Background', key:'background', values:{ type:'BackgroundColorSetting' }},
+            { text:'Background', key:'bgColors', values:{ type:'BackgroundColorSetting' }},
 
           ]},
 

package/src/widgets/WebPageBuilder.vue

@@ -14,7 +14,7 @@
             <svg class="fill-text-300 hover:fill-red-500" width="18" height="18" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z"/></svg>
           </button>
 
-          <h4 class="mr-5 w-[200px] text-ellipsis whitespace-nowrap overflow-hidden">
+          <h4 class="mr-5 w-[200px] text-ellipsis whitespace-nowrap overflow-hidden" @click.meta="log(page)">
             {{ page.title }}
           </h4>
 
@@ -520,7 +520,7 @@
                                       ref="templateCreator"
                                       @save="templateCreatorAfterSave" />
                 </div>
-              </div>
+              </div>p
 
             </div>
           </div>
@@ -932,9 +932,56 @@ export default{
           .catch((err) => this.toast(err))
     },
 
+    patchBgColors(bgColors){
+      if (!Array.isArray(bgColors)) return
+
+      for(let i = 0 ; i < bgColors.length ; i++){
+        if(bgColors[i].startsWith('bg-')){
+
+          const el = document.createElement('div')
+          el.classList.add(bgColors[i])
+          el.style.position = 'fixed'
+          el.style.top = '-100000px'
+          document.body.appendChild(el)
+
+          const rgbText = window.getComputedStyle(el)['background-color']
+
+          const rgb = rgbText.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*\d+)?\)/)
+          let hex
+          if(rgb){
+            hex = `#${((1 << 24) + (parseInt(rgb[1]) << 16) +
+                (parseInt(rgb[2]) << 8) +
+                parseInt(rgb[3])).toString(16).slice(1)}`
+          }
+
+          document.body.removeChild(el)
+
+          bgColors[i] = hex
+        }
+      }
+    },
+
+    patchPage(page){
+
+      const recursePatch = (components) => {
+        for(let component of components){
+          this.patchBgColors(component.props.bgColors)
+
+          if(Array.isArray(component.items)){
+            recursePatch(component.items)
+          }
+        }
+      }
+
+      recursePatch(page.components)
+    },
+
     async load(){
       return this.socket.send(`${this.controller}.open`, { uid:this.$route.params.uid })
           .then(({ page, host, previewHost }) => {
+
+            this.patchPage(page)
+
             if(page) this.page = page
             if(host) this.host = host
             if(previewHost) this.previewHost = previewHost
@@ -1524,7 +1571,7 @@ export default{
     },
 
     computedIframeSrc(){
-      return (this.host ?? this.iframeSrc).substring(0, this.iframeSrc.indexOf('?'))
+      return `${this.iframeSrc}`.substring(0, `${this.iframeSrc}`.indexOf('?'))
     },
 
     currentItem(){