@mixd-id/web-scaffold 0.1.240411018 → 0.1.240411019

package/package.json

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

package/src/components/Article.vue

@@ -10,7 +10,7 @@
 
 <script>
 
-import { componentMixin } from '../mixin/component';
+import {componentMixin} from '../mixin/component';
 import {getSelection, restoreSelection, saveSelection} from "../utils/selection";
 
 export default{

package/src/components/Link.vue

@@ -37,8 +37,8 @@
 
 <script>
 
-import { componentMixin } from "../mixin/component";
-import { applyDatasourceReplacer } from "../utils/helpers";
+import {componentMixin} from "../mixin/component";
+import {applyDatasourceReplacer} from "../utils/helpers";
 
 export default{
 

package/src/components/MenuItem1.vue

@@ -10,7 +10,7 @@
 
 <script setup>
 
-import { defineComponent } from "vue";
+import {defineComponent} from "vue";
 import {componentMixin} from "../mixin/component";
 
 defineComponent({

package/src/components/TreeView.vue

@@ -22,7 +22,6 @@
 <script>
 
 import TreeViewItem from "./TreeViewItem.vue";
-import {copyToClipboard, getClipboardData} from "../utils/helpers.mjs";
 
 export default{
 

package/src/mixin/component.js

@@ -1,7 +1,27 @@
 import {inject} from 'vue'
-import {parseBoolean} from "../utils/helpers.mjs";
 
-let guide
+let guide, guide2
+let selectedUid
+
+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'
+    });
+  }
+}
+
 
 export const componentMixin = {
 
@@ -165,7 +185,10 @@ export const componentMixin = {
       e.stopPropagation()
       e.preventDefault()
 
+      selectedUid = this.uid
+
       this.editModeClick ? this.editModeClick(this.uid) : null
+      this.select2()
     },
 
     componentMouseOver(e){
@@ -174,15 +197,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){
@@ -193,22 +223,55 @@ 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"
       }
 
       return guide
     },
 
+    getGuide2(){
+      if(!guide2){
+        console.log('create')
+        guide2 = document.createElement('div')
+        guide2.className = "absolute border-[2px] border-blue-600 pointer-events-none"
+      }
+
+      return guide2
+    },
+
     select(){
+      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: {}
-    }
   },
 
   mounted(){

package/src/widgets/ComponentSetting2.vue

@@ -287,6 +287,15 @@ export default{
                 [ 'overflow-y-scroll', 'Y Scroll' ],
               ]},
 
+            { text:'Z Index', key:'zIndex', values: [
+                [ 'z-0', '0' ],
+                [ 'z-10', '10' ],
+                [ 'z-20', '20' ],
+                [ 'z-30', '30' ],
+                [ 'z-40', '40' ],
+                [ 'z-50', '50' ],
+              ]},
+
         ]},
 
         { text:'Flexbox & Grid', items: [

package/src/widgets/Share.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="$style.comp">
+  <div :class="$style.comp" :data-uid="uid">
     <strong v-if="title" class="mr-6">{{ title }}</strong>
 
     <div v-if="direction === 'vertical'" class="flex-1 flex flex-col divide-y divide-text-100 self-stretch">
@@ -110,7 +110,6 @@ export default{
     },
 
     waShareUrl(){
-      if(typeof window === 'undefined') return
       return `https://wa.me/send?text=` + encodeURIComponent(this.currentUrl)
     },
 

package/src/widgets/WebPageBuilder.vue

@@ -558,7 +558,7 @@
 
 import throttle from "lodash/throttle";
 import md5 from "md5";
-import {copyToClipboard, createFormData, invokeAfterIdle} from "../utils/helpers.mjs";
+import {createFormData, invokeAfterIdle} from "../utils/helpers.mjs";
 import {ref} from 'vue'
 import {useManualRefHistory} from "@vueuse/core";
 import axios from "axios";