glib-web 3.24.0 → 3.24.2

package/components/treeView.vue

@@ -2,7 +2,7 @@
   <div :class="cls()" :style="$styles()">
 
     <template v-for="(item, index) in items" :key="'parent' + index">
-      <div :class="`parent ${item._selected ? 'active' : ''}`" @dragenter="(event) => handleDragEnter(event, item)"
+      <div :class="`parent ${item._selected ? 'active' : ''} ${item._dragover ? 'hover' : ''}`"
         @dragleave="(event) => handleDragLeave(event, item)" @drop="(event) => handleDrop(event, item)"
         @dragover="(event) => handleDragOver(event, item)" @click="handleAction(item)">
         <div class="label">
@@ -15,9 +15,9 @@
         <v-icon v-else icon="expand_more" @click.stop="item._open = true"></v-icon>
       </div>
       <template v-if="item.children && item._open">
-        <div :class="`child ${citem._selected ? 'active' : ''}`" v-for="(citem, cindex) in item.children"
-          :key="'child' + cindex" @drop="(event) => handleDrop(event, citem)" @click="handleAction(citem)"
-          @dragenter="(event) => handleDragEnter(event, citem)" @dragleave="(event) => handleDragLeave(event, citem)"
+        <div :class="`child ${citem._selected ? 'active' : ''} ${citem._dragover ? 'hover' : ''}`"
+          v-for="(citem, cindex) in item.children" :key="'child' + cindex" @drop="(event) => handleDrop(event, citem)"
+          @click="handleAction(citem)" @dragleave="(event) => handleDragLeave(event, citem)"
           @dragover="(event) => handleDragOver(event, citem)">
           <v-icon size="8" :color="citem.color || '#A7ADB5'" icon="fiber_manual_record"></v-icon>
           <label>{{ citem.label }}</label>
@@ -80,6 +80,12 @@
   margin-bottom: 2px;
   cursor: pointer;
 }
+
+/* disable drag event on child element */
+.gtreeview .parent *:not(.v-icon),
+.gtreeview .child *:not(.v-icon) {
+  pointer-events: none;
+}
 </style>
 
 <script>
@@ -112,6 +118,7 @@ export default defineComponent({
 
     setBusyWhenUploading({ files });
 
+    // if all file uploaded send http post
     watch(uploaded, (val) => {
       if (val) {
         GLib.action.execute({
@@ -141,16 +148,23 @@ export default defineComponent({
     }));
     const items = ref(makeItems());
 
+    // update items when selected item is changed
     watch(selected, () => items.value = makeItems());
 
-    let dragEl = null;
-    const handleDragEnter = (event, item) => {
-      dragEl = event.target;
-      item._open = true;
-      item._dragover = true;
-    };
+    const lastDragItem = ref(undefined);
+    watch(lastDragItem, (item, oldItem) => {
+      if (oldItem) oldItem._dragover = false;
+
+      if (item) {
+        if (item.children) item._open = true;
+        item._dragover = true;
+      }
+    });
+
     const handleDragLeave = (event, item) => {
-      if (event.target == dragEl) item._dragover = false;
+      if (!event.target || !event.relatedTarget) return false;
+      if (event.target.contains(event.relatedTarget) || event.relatedTarget.contains(event.target)) return false;
+      lastDragItem.value = null;
     };
     const handleAction = (context) => {
       GLib.action.execute(context.onClick, ctx);
@@ -160,6 +174,9 @@ export default defineComponent({
       dropData = item.dropData;
       event.preventDefault();
 
+      // there is two kind of drop:
+      // 1. files
+      // 2. other components
       if (event.dataTransfer.files.length > 0) {
         uploadFiles({
           droppedFiles: event.dataTransfer.files,
@@ -178,12 +195,14 @@ export default defineComponent({
         dropData = null;
       }
     };
-
     const handleDragOver = (event, item) => {
-      if (item.dropData) event.preventDefault();
+      if (item.dropData) {
+        event.preventDefault();
+        lastDragItem.value = item;
+      }
     };
 
-    return { selected, handleDragOver, handleDragEnter, handleDragLeave, handleAction, handleDrop, items };
+    return { selected, handleDragOver, handleDragLeave, handleAction, handleDrop, items };
   },
   methods: {
     cls() {

package/nav/sheet.vue

@@ -48,3 +48,8 @@ export default {
   }
 };
 </script>
+<style>
+.v-bottom-sheet .v-list-subheader__text {
+  white-space: unset;
+}
+</style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "glib-web",
-  "version": "3.24.0",
+  "version": "3.24.2",
   "description": "",
   "main": "index.js",
   "scripts": {

package/utils/http.js

@@ -232,12 +232,13 @@ export default class {
 
   static startIndicator(component) {
     this._showIndicator();
-    component.$data._isBusy = true;
+    // TODO: this code from vue2, it is deprecated or still related?
+    if (component.$data) component.$data._isBusy = true;
   }
 
   static stopIndicator(component) {
     this._hideIndicator();
-    component.$data._isBusy = false;
+    if (component.$data) component.$data._isBusy = false;
   }
 
   static _showIndicator() {