@mixd-id/web-scaffold 0.1.240411010 → 0.1.240411012

package/package.json

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

package/src/components/ColorPicker2.vue

@@ -1,5 +1,8 @@
 <template>
 	<div :class="$style.comp">
+
+    <small class="text-text-400" v-if="title">{{ title }}</small>
+
     <div :class="circleClass" :style="circleStyle"
          @click="mode === 'hex' ? $refs.inputColor.click() : $refs.contextMenu.open($refs.btn)"
          ref="btn"></div>
@@ -50,6 +53,8 @@ export default{
       ]
     },
 
+    title: String,
+
 		values: {
 			type: Array,
 			default: [

package/src/components/ColorPicker3.vue

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

package/src/index.js

@@ -11,7 +11,6 @@ const uniqid = (additionalKey = '') => {
 const mediaBreakpoints = [
   [ 640, 'sm:' ],
   [ 768, 'md:' ],
-  [ 1024, 'lg:' ],
   [ 1280, 'xl:' ],
   [ 1536, '2xl:' ],
 ]

package/src/mixin/component.js

@@ -90,13 +90,29 @@ export const componentMixin = {
         let background = []
 
         if(Array.isArray(this.style.bgImages)){
-          let imageUrl = this.style.bgImages[this.$device.mediaIndex] ?? ''
-          imageUrl = imageUrl.indexOf('://') < 0 ? import.meta.env.VITE_IMAGE_HOST + '/' + imageUrl : imageUrl
-          background.push(`url('${imageUrl}')`)
+          let currentUrl = ''
+          for(let i = this.$device.mediaIndex ; i >= 0 ; i--){
+            if(this.style.bgImages[i]){
+              currentUrl = this.style.bgImages[i]
+              break
+            }
+          }
+
+          if(currentUrl){
+            currentUrl = currentUrl.indexOf('://') < 0 ? import.meta.env.VITE_IMAGE_HOST + '/' + currentUrl : currentUrl
+            background.push(`url('${currentUrl}')`)
+          }
         }
 
         if(Array.isArray(this.style.bgColors)){
-          const bgColors = this.style.bgColors[this.$device.mediaIndex] ?? ''
+          let bgColor = ''
+          for(let i = this.$device.mediaIndex ; i >= 0 ; i--){
+            if(this.style.bgColors[i]){
+              bgColor = this.style.bgColors[i]
+              break
+            }
+          }
+          const bgColors = bgColor
 
           if(bgColors.startsWith('#')){
             background.push(`linear-gradient(${bgColors}, ${bgColors})`)
@@ -106,7 +122,7 @@ export const componentMixin = {
           }
         }
 
-        if(background)
+        if(background.length > 0)
           obj['background-image'] = background.join(', ')
       }
 

package/src/widgets/ComponentSetting2.vue

@@ -73,7 +73,7 @@
         <div class="relative p-6 flex flex-col gap-4">
           <h3>Add Property</h3>
           <div class="absolute top-0 right-0 p-2">
-            <button type="button" class="p-2" @click="$router.replace({ hash:'' })">
+            <button type="button" class="p-2" @click="$router.replace({ hash:$route.hash.replace('#select-property', '') })">
               <svg width="24" height="24" viewBox="0 0 24 24" class="fill-text-300 hover:fill-red-500" xmlns="http://www.w3.org/2000/svg">
                 <path d="M6.53034 5.46965C6.23745 5.17676 5.76257 5.17676 5.46968 5.46965C5.17679 5.76255 5.17679 6.23742 5.46968 6.53031L10.9393 12L5.46967 17.4697C5.17678 17.7626 5.17678 18.2374 5.46967 18.5303C5.76256 18.8232 6.23744 18.8232 6.53033 18.5303L12 13.0606L17.4697 18.5303C17.7626 18.8232 18.2375 18.8232 18.5303 18.5303C18.8232 18.2374 18.8232 17.7626 18.5303 17.4697L13.0607 12L18.5303 6.53032C18.8232 6.23743 18.8232 5.76256 18.5303 5.46966C18.2374 5.17677 17.7626 5.17677 17.4697 5.46966L12 10.9393L6.53034 5.46965Z"/>
               </svg>
@@ -146,7 +146,7 @@ export default{
 
       this.item.props[item.key].push('')
 
-      this.$router.replace({ hash:'' })
+      this.$router.replace({ hash:this.$route.hash.replace('#select-property', '') })
     },
 
     select(){
@@ -786,6 +786,12 @@ export default{
                 [ 'text-end', 'End' ],
               ]},
 
+            { text:'Text Color', key:'textColor', values:{
+                type:'ColorPicker2',
+                keys: [ ['text-']],
+                title: "Text Color"
+              }},
+
             { text:'Text Decoration', key:'textDecoration', values: [
                 [ 'underline', 'Underline' ],
                 [ 'overline', 'Overline' ],

package/src/widgets/WebPageBuilder.vue

@@ -936,6 +936,8 @@ export default{
       if (!Array.isArray(bgColors)) return
 
       for(let i = 0 ; i < bgColors.length ; i++){
+
+        let value = bgColors[i]
         if(bgColors[i].startsWith('bg-')){
 
           const el = document.createElement('div')
@@ -947,17 +949,17 @@ export default{
           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) +
+            value = `#${((1 << 24) + (parseInt(rgb[1]) << 16) +
                 (parseInt(rgb[2]) << 8) +
                 parseInt(rgb[3])).toString(16).slice(1)}`
           }
 
           document.body.removeChild(el)
-
-          bgColors[i] = hex
         }
+
+        console.log(`bgColors[${i}]`, bgColors[i], value)
+        bgColors[i] = value
       }
     },