@mixd-id/web-scaffold 0.2.240706 → 0.2.250801010

package/src/mixin/component.js

@@ -1,21 +1,40 @@
-// mixin/component.js
-import { inject } from 'vue'
-import {parseBoolean} from "../utils/helpers.mjs";
-import {eventBus} from "../events/event";
+import {inject} from 'vue'
 
 let guide, guide2
+let selectedUid
 
-export const componentMixin = {
+function scrollIntoViewIfNeededWithOffset(elem, offset = 100) {
+  const rect = elem.getBoundingClientRect();
+
+  const isVisible = (
+    rect.top >= 0 &&
+    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight)
+  );
+
+  if (!isVisible) {
+    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+    const targetScroll = rect.top + scrollTop - offset;
+
+    window.scrollTo({
+      top: targetScroll,
+      behavior: 'smooth'
+    });
+  }
+}
 
-  inject: [ 'getPage' ],
+
+export const componentMixin = {
 
   props: {
     enabled: Boolean,
     name: String,
     uid: String,
-    id: String,
     type: String,
 
+    style: Object,
+    background: undefined,
+    bgImages: undefined,
+
     padding: Array,
     margin: Array,
     maxWidth: Array,
@@ -58,6 +77,10 @@ export const componentMixin = {
     textColor: Array,
     lineHeight: Array,
 
+    objectFit: Array,
+    objectPosition: Array,
+    backdropBlur: Array,
+
     boxShadow: Array,
     opacity: Array,
     itemRatio: Array,
@@ -75,59 +98,101 @@ export const componentMixin = {
       type: undefined,
       default: true
     },
+
+    debugId: String,
   },
 
   computed: {
 
-    bgImages(){
-      if(!Array.isArray(this.bgImage))
-        return [{},{}]
-
-      return [
-        this.bgImage && this.bgImage[0] && this.bgImage[0].imageUrl ?
-            `url('${import.meta.env.VITE_IMAGE_HOST + '/' + this.bgImage[0].imageUrl}')` : '',
-        this.bgImage && this.bgImage[1] && this.bgImage[1].imageUrl ?
-            `url('${import.meta.env.VITE_IMAGE_HOST + '/' + this.bgImage[1].imageUrl}')` :
-            (this.bgImage && this.bgImage[0] && this.bgImage[0].imageUrl ?
-                `url('${import.meta.env.VITE_IMAGE_HOST + '/' + this.bgImage[0].imageUrl}')` : '')
-      ]
-    },
-
     computedStyle(){
 
       const obj = {}
 
-      if(this.bgImages && this.bgImages[0]){
-        obj['background-image'] = this.bgImages[0]
+      if(this.style){
+
+        let background = []
+
+        if(Array.isArray(this.style.bgImages)){
+          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)){
+          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})`)
+          }
+          else{
+            background.push(bgColors)
+          }
+        }
+
+        background = background.filter(_ => _)
+
+        if(background.length > 0)
+          obj['background-image'] = background.join(', ')
+
+
+        if(Array.isArray(this.style.bdColor)){
+          let bdColor = ''
+          for(let i = this.$device.mediaIndex ; i >= 0 ; i--){
+            if(this.style.bdColor[i]){
+              bdColor = this.style.bdColor[i]
+              break
+            }
+          }
+
+          if(bdColor){
+            obj['border-color'] = bdColor
+          }
+        }
       }
 
       return obj
     },
 
-    pageData(){
-      return (this.page ?? {}).data
+    editMode(){
+      return this.$editMode.value
     },
 
-    editMode(){
-      return (this.page ?? {}).editMode
+    page(){
+      return this.getPage()
     }
 
   },
 
-  methods: {
+  inject: [ 'getPage' ],
 
-    imageSrc(src){
-      return typeof src === 'string' ?
-          import.meta.env.VITE_IMAGE_HOST + '/' + src : src
-    },
+  methods: {
 
     componentClick(e){
-      if(!this.editMode) return
+      if(this.editMode !== 1) return
 
       e.stopPropagation()
       e.preventDefault()
 
+      selectedUid = this.uid
+
       this.editModeClick ? this.editModeClick(this.uid) : null
+      this.select2()
     },
 
     componentMouseOver(e){
@@ -136,15 +201,22 @@ export const componentMixin = {
       e.stopPropagation()
       e.preventDefault()
 
-      this.lastStyle.position = this.$el.style.position
-      this.$el.style.position = 'relative'
+      const offset = this.$el.getBoundingClientRect()
+      const top = offset.top + window.scrollY + 1
+      const left = offset.left + window.scrollX + 1
+      const width = offset.width - 2
+      const height = offset.height - 2
 
-      this.$el.appendChild(this.getGuide())
+      const guide = this.getGuide()
+      guide.style.top = `${top}px`
+      guide.style.left = `${left}px`
+      guide.style.width = `${width}px`
+      guide.style.height = `${height}px`
+      document.body.appendChild(guide)
     },
 
     componentMouseOut(){
       if(this.editMode !== 1) return
-      this.$el.style.position = this.lastStyle.position
 
       const guide = this.getGuide()
       if(guide.parentNode){
@@ -155,7 +227,7 @@ export const componentMixin = {
     getGuide(){
       if(!guide){
         guide = document.createElement('div')
-        guide.className = "absolute top-0 left-0 right-0 bottom-0 border-[3px] border-blue-600" +
+        guide.className = "absolute border-[2px] border-blue-600" +
           " pointer-events-none"
       }
 
@@ -165,58 +237,70 @@ export const componentMixin = {
     getGuide2(){
       if(!guide2){
         guide2 = document.createElement('div')
-        guide2.className = "absolute top-0 left-0 right-0 bottom-0 border-[3px] border-blue-600" +
-          " pointer-events-none"
+        guide2.className = "absolute border-[2px] border-blue-600 pointer-events-none"
       }
 
       return guide2
     },
 
     select(){
-      if(!this.$el || this.$el.nodeType !== 1) return
-
-      //this.$el.appendChild(this.getGuide2())
+      const offset = this.$el.getBoundingClientRect()
+      const top = offset.top + window.scrollY + 1
+      const left = offset.left + window.scrollX + 1
+      const width = offset.width - 2
+      const height = offset.height - 2
+
+      const guide = this.getGuide2()
+      guide.style.top = `${top}px`
+      guide.style.left = `${left}px`
+      guide.style.width = `${width}px`
+      guide.style.height = `${height}px`
+      document.body.appendChild(guide)
+
+      scrollIntoViewIfNeededWithOffset(this.$el, 100)
     },
 
-  },
+    select2(){
+      const offset = this.$el.getBoundingClientRect()
+      const top = offset.top + window.scrollY + 1
+      const left = offset.left + window.scrollX + 1
+      const width = offset.width - 2
+      const height = offset.height - 2
+
+      const guide = this.getGuide2()
+      guide.style.top = `${top}px`
+      guide.style.left = `${left}px`
+      guide.style.width = `${width}px`
+      guide.style.height = `${height}px`
+      document.body.appendChild(guide)
+    },
 
-  data(){
-    return {
-      lastStyle: {},
-      page: null,
+    imageSrc(url){
+      if(typeof url === 'string'){
+        if(url.indexOf('://') < 0 && url.substring(0, 1) !== '/'){
+          url = ((import.meta.env.VITE_IMAGE_HOST ?? '') + '/' + url)
+        }
+      }
+      return url
     }
+
   },
 
   mounted(){
-    if(typeof this.getPage === 'function'){
-      this.page = this.getPage()
-    }
-
     if(this.editMode){
       this.editModeClick = inject('editModeClick', () => {})
       this.editRegisterComponent = inject('editRegisterComponent', () => {})
 
-      if(parseBoolean(this.editSelectable)){
-        this.$el.addEventListener('click', this.componentClick)
-        this.$el.addEventListener('mouseover', this.componentMouseOver)
-        this.$el.addEventListener('mouseout', this.componentMouseOut)
-      }
+      this.$el.addEventListener('click', this.componentClick)
+      this.$el.addEventListener('mouseover', this.componentMouseOver)
+      this.$el.addEventListener('mouseout', this.componentMouseOut)
 
       this.editRegisterComponent(this.uid, this)
     }
-
-    if(this.id){
-      eventBus.on(this.id, (action) => {
-        const { type } = action
-        typeof this[type] === 'function' ?
-          this[type]() :
-          this.log(`${this.name} Method ${type} not found`)
-      })
-    }
   },
 
   unmounted(){
     this.$el.removeEventListener('click', this.componentClick)
-  },
+  }
 
 };

package/src/themes/default/index.js

@@ -4,116 +4,49 @@ const plugin = Plugin(function({ addBase, addUtilities, config, theme }) {
 
   addBase({
 
+    ':root': {
+      '--space-1': '0.25rem',
+      '--space-2': '0.5rem',
+      '--space-3': '0.75rem',
+      '--space-4': '1rem',
+      '--space-5': '1.25rem',
+      '--space-6': '1.5rem',
+      '--space-7': '1.75rem',
+      '--space-8': '2rem',
+      '--space-9': '2.25rem',
+      '--space-10': '2.5rem',
+      '--space-11': '2.75rem',
+      '--space-12': '3rem'
+    },
+
     '*': {
       'color': theme('colors.text.DEFAULT'),
       'fontFamily': 'ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,apple color emoji,segoe ui emoji,Segoe UI Symbol,noto color emoji',
-      'fontSize': '13px'
+      //'fontSize': '13px'
     },
 
     'html, .html': {
 
-      "--h-cp-sm": '2rem',
       "--h-cp": '2.7rem',
       "--h-cp-lg": '3.6rem',
 
-      '--base-50': '235, 237, 240',
-      '--base-300': '235, 237, 240',
-      '--base-400': '245, 247, 250',
-      '--base-500': '255, 255, 255',
-      '--base': '255, 255, 255',
-
-      "--text-50": '224, 224, 224',
-      "--text-100": '218, 218, 218',
-      "--text-200": '212, 212, 212',
-      "--text-300": '191, 191, 191',
-      "--text-400": '116, 116, 116',
-      "--text-500": '86, 86, 86',
-      "--text": '31, 41, 55',
-
-      "--primary": '81, 131, 240',
-      "--primary-50": '244, 248, 255',
-      "--primary-100": '230, 239, 255',
-      "--primary-200": '216, 230, 255',
-      "--primary-300": '116, 156, 243',
-      "--primary-400": '98, 143, 242',
-      "--primary-500": '81, 131, 240',
-      "--primary-600": '73, 118, 216',
-      "--primary-700": '65, 105, 192',
-      "--primary-800": '57, 92, 168',
-      "--primary-900": '49, 79, 144',
-
-      "--secondary": '110, 111, 112',
-      "--secondary-50": '241, 241, 241',
-      "--secondary-100": '226, 226, 226',
-      "--secondary-200": '197, 197, 198',
-      "--secondary-300": '168, 169, 169',
-      "--secondary-400": '139, 140, 141',
-      "--secondary-500": '110, 111, 112',
-      "--secondary-600": '99, 100, 101',
-      "--secondary-700": '77, 78, 78',
-      "--secondary-800": '55, 56, 56',
-      "--secondary-900": '33, 33, 34',
-
-      '--whatsapp-100': '179, 206, 201',
-      '--whatsapp-500': '0, 93, 75',
-
-      '--facebook-100': '205, 215, 231',
-      '--facebook-500': '8, 102, 255',
-
-      '--panel-none': 'transparent',
-      '--panel-300': 'rgb(235, 237, 240)',
-      '--panel-400': 'rgb(245, 247, 250)',
-      '--panel-500': 'rgb(255, 255, 255)',
-    },
-
-    'html[data-theme="dark"], .html[data-theme="dark"]': {
-
-      "--base-50": '22, 26, 33',
-      "--base-300": '0, 0, 0',
-      "--base-400": '17, 21, 28',
-      "--base-500": '22, 26, 33',
-      "--base": '22, 26, 33',
-
-      "--text-50": '33, 39, 46',
-      "--text-100": '48, 54, 61',
-      "--text-200": '53, 59, 66',
-      "--text-300": '77, 77, 77',
-      "--text-400": '191, 193, 197',
-      "--text-500": '191, 193, 197',
-      "--text": '234, 234, 236',
-
-      "--primary-50": '24, 34, 51',
-      "--primary-100": '28, 38, 59',
-      "--primary-200": '27, 44, 74',
-      "--primary-300": '32, 49, 79',
-
-      "--secondary": '55, 59, 65',
-      "--secondary-50": '16, 18, 19',
-      "--secondary-100": '22, 24, 26',
-      "--secondary-200": '28, 30, 33',
-      "--secondary-300": '39, 41, 46',
-      "--secondary-400": '50, 53, 59',
-      "--secondary-500": '55, 59, 65',
-      "--secondary-600": '75, 79, 84',
-      "--secondary-700": '95, 98, 103',
-      "--secondary-800": '115, 118, 122',
-      "--secondary-900": '135, 137, 141',
-
-      "--panel-300": 'rgb(0, 0, 0)',
-      "--panel-400": 'rgb(17, 21, 28)',
-      "--panel-500": 'rgb(27, 31, 38)',
+      '--whatsapp-100': 'rgb(179, 206, 201)',
+      '--whatsapp-500': 'rgb(0, 93, 75)',
+
+      '--facebook-100': 'rgb(205, 215, 231)',
+      '--facebook-500': 'rgb(8, 102, 255)'
     },
 
     'body': {
       '-webkit-font-smoothing': 'antialiased',
       '-moz-osx-font-smoothing': 'grayscale',
       'text-rendering': 'optimizeLegibility',
-      'fontSize': '15px',
+      //'fontSize': '15px',
       'touchAction': "pan-x pan-y",
-      'backgroundColor': 'rgb(var(--base-300))'
+      'backgroundColor': 'var(--base-300)'
     },
 
-    '@media screen and (orientation: portrait)': {
+    /*'@media screen and (orientation: portrait)': {
       '*': {
         'fontSize': '14px',
       },
@@ -123,11 +56,11 @@ const plugin = Plugin(function({ addBase, addUtilities, config, theme }) {
       },
 
       "input, input[type='text'], input[type='number'], textarea, select, option": {fontSize: "16px !important"}
-    },
+    },*/
 
     '::-webkit-scrollbar': {
-      'height': '5px',
-      'width': '5px',
+      'height': '8px',
+      'width': '8px',
       'background': 'transparent'
     },
 
@@ -135,6 +68,10 @@ const plugin = Plugin(function({ addBase, addUtilities, config, theme }) {
       'backgroundColor': 'rgba(var(--text-50), 100)'
     },
 
+    '.no-scrollbar::-webkit-scrollbar': {
+      display: 'none'
+    },
+
     'h1': {
       fontSize: config('theme.fontSize.4xl')[0],
       ...config('theme.fontSize.4xl')[1],
@@ -184,6 +121,20 @@ const plugin = Plugin(function({ addBase, addUtilities, config, theme }) {
       transform: 'scale(1)',
     },
 
+    '.menu-item': {
+    },
+
+    '.menu-item:hover': {
+      background: 'var(--primary-500)',
+      fill: '#fff',
+      color: '#fff'
+    },
+
+    '.menu-item:hover *': {
+      fill: '#fff',
+      color: '#fff'
+    }
+
   })
 
   addUtilities({
@@ -208,6 +159,17 @@ const plugin = Plugin(function({ addBase, addUtilities, config, theme }) {
       transform: 'translate3d(0, 10px, 0)'
     },
 
+    '.popout-enter-active, .popout-leave-active': {
+      transition: 'all 300ms cubic-bezier(0.25, 1, 0.5, 1)',
+      transform: 'scale(1)',
+      opacity: '1'
+    },
+
+    '.popout-enter-from, .popout-leave-to': {
+      transform: 'scale(0)',
+      opacity: '0'
+    },
+
     '.slideleft-enter-active, .slideleft-leave-active': {
       transition: 'all 300ms cubic-bezier(0.25, 1, 0.5, 1)',
       transform: 'translate3d(0, 0, 0)'
@@ -253,28 +215,10 @@ const plugin = Plugin(function({ addBase, addUtilities, config, theme }) {
       width: '100%'
     },
 
-    '.panel-none': {
-      '--webkit-backdrop-filter': 'var(--panel-none-backdrop-filter)',
-      'backdrop-filter': 'var(--panel-none-backdrop-filter)',
-      'background-color': 'var(--panel-none)',
-    },
-
-    '.panel-300': {
-      '--webkit-backdrop-filter': 'var(--panel-300-backdrop-filter)',
-      'backdrop-filter': 'var(--panel-300-backdrop-filter)',
-      'background-color': 'var(--panel-300)',
-    },
-
-    '.panel-400': {
-      '--webkit-backdrop-filter': 'var(--panel-400-backdrop-filter)',
-      'backdrop-filter': 'var(--panel-400-backdrop-filter)',
-      'background-color': 'var(--panel-400)',
-    },
-
-    '.panel-500': {
-      '--webkit-backdrop-filter': 'var(--panel-500-backdrop-filter)',
-      'backdrop-filter': 'var(--panel-500-backdrop-filter)',
-      'background-color': 'var(--panel-500)',
+    '.text-ellipsis-nowrap': {
+      'white-space': 'nowrap',
+      'overflow': 'hidden',
+      'text-overflow': 'ellipsis',
     },
 
   })
@@ -284,58 +228,73 @@ const plugin = Plugin(function({ addBase, addUtilities, config, theme }) {
     extend:{
       colors: {
         primary: {
-          50: "rgba(var(--primary-50), <alpha-value>)",
-          100: "rgba(var(--primary-100), <alpha-value>)",
-          200: "rgba(var(--primary-200), <alpha-value>)",
-          300: "rgba(var(--primary-300), <alpha-value>)",
-          400: "rgba(var(--primary-400), <alpha-value>)",
-          500: "rgba(var(--primary-500), <alpha-value>)",
-          600: "rgba(var(--primary-600), <alpha-value>)",
-          700: "rgba(var(--primary-700), <alpha-value>)",
-          800: "rgba(var(--primary-800), <alpha-value>)",
-          900: "rgba(var(--primary-900), <alpha-value>)",
-          DEFAULT: "rgba(var(--primary), <alpha-value>)"
+          50: "var(--primary-50)",
+          100: "var(--primary-100)",
+          200: "var(--primary-200)",
+          300: "var(--primary-300)",
+          400: "var(--primary-400)",
+          500: "var(--primary-500)",
+          600: "var(--primary-600)",
+          700: "var(--primary-700)",
+          800: "var(--primary-800)",
+          900: "var(--primary-900)",
+          DEFAULT: "var(--primary-500)"
         },
         secondary: {
-          50: "rgba(var(--secondary-50), <alpha-value>)",
-          100: "rgba(var(--secondary-100), <alpha-value>)",
-          200: "rgba(var(--secondary-200), <alpha-value>)",
-          300: "rgba(var(--secondary-300), <alpha-value>)",
-          400: "rgba(var(--secondary-400), <alpha-value>)",
-          500: "rgba(var(--secondary-500), <alpha-value>)",
-          600: "rgba(var(--secondary-600), <alpha-value>)",
-          700: "rgba(var(--secondary-700), <alpha-value>)",
-          800: "rgba(var(--secondary-800), <alpha-value>)",
-          900: "rgba(var(--secondary-900), <alpha-value>)",
-          DEFAULT: "rgba(var(--secondary), <alpha-value>)"
+          50: "var(--secondary-50)",
+          100: "var(--secondary-100)",
+          200: "var(--secondary-200)",
+          300: "var(--secondary-300)",
+          400: "var(--secondary-400)",
+          500: "var(--secondary-500)",
+          600: "var(--secondary-600)",
+          700: "var(--secondary-700)",
+          800: "var(--secondary-800)",
+          900: "var(--secondary-900)",
+          DEFAULT: "var(--secondary-500)"
         },
         base: {
-          50: "rgba(var(--base-50), <alpha-value>)",
-          100: "rgba(var(--base-100), <alpha-value>)",
-          200: "rgba(var(--base-200), <alpha-value>)",
-          300: "rgba(var(--base-300), <alpha-value>)",
-          400: "rgba(var(--base-400), <alpha-value>)",
-          500: "rgba(var(--base-500), <alpha-value>)",
-          600: "rgba(var(--base-600), <alpha-value>)",
-          700: "rgba(var(--base-700), <alpha-value>)",
-          800: "rgba(var(--base-800), <alpha-value>)",
-          900: "rgba(var(--base-900), <alpha-value>)",
-          DEFAULT: "rgba(var(--base), <alpha-value>)"
+          300: "var(--base-300)",
+          400: "var(--base-400)",
+          500: "var(--base-500)",
+          DEFAULT: "var(--base-500)"
+        },
+        border: {
+          50: "var(--border-50)",
+          100: "var(--border-100)",
+          200: "var(--border-200)",
+          300: "var(--border-300)",
         },
         text: {
-          50: "rgba(var(--text-50), <alpha-value>)",
-          100: "rgba(var(--text-100), <alpha-value>)",
-          200: "rgba(var(--text-200), <alpha-value>)",
-          300: "rgba(var(--text-300), <alpha-value>)",
-          400: "rgba(var(--text-400), <alpha-value>)",
-          500: "rgba(var(--text-500), <alpha-value>)",
-          DEFAULT: "rgba(var(--text), 1)"
+          50: "var(--text-50)",
+          100: "var(--text-100)",
+          200: "var(--text-200)",
+          300: "var(--text-300)",
+          400: "var(--text-400)",
+          500: "var(--text-500)",
+          DEFAULT: "var(--text-500)"
         },
         whatsapp: {
-          100: "rgba(var(--whatsapp-100), <alpha-value>)",
-          500: "rgba(var(--whatsapp-500), <alpha-value>)",
-          DEFAULT: "rgba(var(--whatsapp), <alpha-value>)"
+          100: "var(--whatsapp-100)",
+          500: "var(--whatsapp-500)",
+          DEFAULT: "var(--whatsapp)"
         },
+      },
+
+      spacing: {
+        0: '0',
+        1: 'var(--space-1)',
+        2: 'var(--space-2)',
+        3: 'var(--space-3)',
+        4: 'var(--space-4)',
+        5: 'var(--space-5)',
+        6: 'var(--space-6)',
+        7: 'var(--space-7)',
+        8: 'var(--space-8)',
+        9: 'var(--space-9)',
+        10: 'var(--space-10)',
+        11: 'var(--space-11)',
+        12: 'var(--space-12)',
       }
     }
   }