glib-web 2.5.0 → 2.5.1

package/components/panels/horizontal.vue

@@ -1,5 +1,5 @@
 <template>
-  <component
+  <!-- <component
     :is="componentName"
     :class="cssClasses"
     :style="cssStyles"
@@ -9,17 +9,59 @@
     <template v-for="(item, index) in spec.childViews">
       <glib-component :key="index" :spec="item" />
     </template>
+  </component> -->
+  <component
+    :is="componentName"
+    :style="parentStyles"
+    :class="parentClasses"
+    :href="$href()"
+    @click="$onClick()"
+  >
+    <draggable
+      :style="childStyles"
+      :class="childClasses"
+      ghost-class="ghost"
+      :group="dragSupport ? dragSupport.groupId || 'common' : 'common'"
+      :data-dragPanelId="spec.id"
+      :disabled="!$type.isObject(spec.dragSupport)"
+      @start="onDragStart"
+      @end="onDragEnd"
+    >
+      <!-- Using `item.id` as key is important to make sure the item gets updated
+           when dragging ends. -->
+      <div
+        v-for="(item, index) in childViews"
+        :key="item.id || index"
+        :data-dragItemId="item.id"
+      >
+        <glib-component :spec="item" />
+      </div>
+    </draggable>
   </component>
 </template>
 
 <script>
+import draggable from "vuedraggable";
+
 export default {
+  components: {
+    draggable
+  },
   props: {
     spec: { type: Object, required: true }
   },
+  data: function() {
+    return {
+      dragSupport: null,
+      childViews: []
+    };
+  },
   computed: {
-    cssClasses: function() {
-      const classes = this.$classes().concat("layouts-horizontal");
+    parentClasses: function() {
+      return this.$classes();
+    },
+    childClasses() {
+      const classes = ["layouts-horizontal"];
       const distribution = this.spec.distribution;
       switch (distribution) {
         case "fillEqually":
@@ -31,7 +73,10 @@ export default {
         default:
           Utils.type.ifString(distribution, distribution => {
             // Uses Material Design spacings: https://vuetifyjs.com/en/styles/spacing/#how-it-works
-            if (distribution.startsWith("overlap")) {
+            if (
+              distribution.startsWith("overlap-") ||
+              distribution.startsWith("space-")
+            ) {
               classes.push(`layouts-horizontal--${distribution}`);
             }
           });
@@ -39,8 +84,16 @@ export default {
       }
       return classes;
     },
-    cssStyles: function() {
-      const styles = this.genericStyles();
+    parentStyles() {
+      const styles = this.$styles();
+      if (this.spec.width == "matchParent") {
+        styles["width"] = "100%";
+      }
+      return styles;
+    },
+    childStyles() {
+      const styles = {};
+
       switch (this.spec.align) {
         case "middle":
           styles["align-items"] = "center";
@@ -51,15 +104,55 @@ export default {
         default:
           styles["align-items"] = "flex-start";
       }
+
       return styles;
     },
     componentName() {
-      return this.$href() ? "a" : "div";
+      return this.spec.onClick ? "a" : "div";
     }
   },
   methods: {
+    $ready() {
+      this.dragSupport = this.spec.dragSupport;
+      this.childViews = this.spec.childViews;
+    },
     $displayValue() {
       return "flex";
+    },
+    onDragStart(event) {
+      // This allows custom components to detect if something is being dragged.
+      window.vueApp.draggedComponent = this;
+    },
+    onDragEnd(event) {
+      window.vueApp.draggedComponent = null;
+
+      const targetRowIndex = event.newIndex;
+      if (event.from == event.to && event.oldIndex == targetRowIndex) {
+        console.log("Reordering canceled");
+        return;
+      }
+
+      console.log("DRAG1", this.childViews);
+
+      const itemId = event.clone.dataset.dragitemid; // The item that got dragged/dropped
+      const oldPanelId = event.from.dataset.dragpanelid;
+      const newPanelId = event.to.dataset.dragpanelid;
+
+      const dragSpec = this.spec.dragSupport;
+      const mergedSpec = Object.assign(dragSpec.onDrop, {
+        [dragSpec.paramNameForFormData || "formData"]: {
+          [dragSpec.paramNameForNewAbsoluteIndex || "newIndex"]: targetRowIndex,
+          [dragSpec.paramNameForItemId || "itemId"]: itemId,
+          [dragSpec.paramNameForOldPanelId || "oldPanelId"]: oldPanelId,
+          [dragSpec.paramNameForNewPanelId || "newPanelId"]: newPanelId
+        }
+      });
+
+      console.log("DRAG2", mergedSpec, event.clone, event);
+
+      GLib.action.execute(mergedSpec, this);
+
+      console.log("DRAG3", this.childViews);
     }
   }
 };
@@ -122,4 +215,38 @@ a.panels-horizontal {
 .layouts-horizontal--overlap-5 > *:not(:first-child) {
   margin-left: -20px;
 }
+.layouts-horizontal--overlap-6 > *:not(:first-child) {
+  margin-left: -24px;
+}
+.layouts-horizontal--overlap-7 > *:not(:first-child) {
+  margin-left: -28px;
+}
+.layouts-horizontal--overlap-8 > *:not(:first-child) {
+  margin-left: -32px;
+}
+
+.layouts-horizontal--space-1 > *:not(:first-child) {
+  margin-left: 4px;
+}
+.layouts-horizontal--space-2 > *:not(:first-child) {
+  margin-left: 8px;
+}
+.layouts-horizontal--space-3 > *:not(:first-child) {
+  margin-left: 12px;
+}
+.layouts-horizontal--space-4 > *:not(:first-child) {
+  margin-left: 16px;
+}
+.layouts-horizontal--space-5 > *:not(:first-child) {
+  margin-left: 20px;
+}
+.layouts-horizontal--space-6 > *:not(:first-child) {
+  margin-left: 24px;
+}
+.layouts-horizontal--space-7 > *:not(:first-child) {
+  margin-left: 28px;
+}
+.layouts-horizontal--space-8 > *:not(:first-child) {
+  margin-left: 32px;
+}
 </style>

package/components/panels/list.vue

@@ -3,7 +3,8 @@
     :two-line="twoLine"
     :three-line="threeLine"
     class="py-0"
-    :style="genericStyles()"
+    :class="$classes()"
+    :style="$styles()"
   >
     <div ref="topAnchor">
       <div v-if="prevPageUrl" class="py-3 px-4">
@@ -18,16 +19,18 @@
         <draggable
           v-model="section.rows"
           ghost-class="ghost"
-          group="a"
-          handle=".handle"
-          :data-index="sectionIndex"
+          :group="dragSupport ? dragSupport.groupId || 'common' : 'common'"
+          :data-dragListId="spec.id"
+          :data-dragSectionIndex="sectionIndex"
+          :disabled="!$type.isObject(dragSupport)"
+          @start="onDragStart"
           @end="onDragEnd"
         >
           <div
             v-for="(row, rowIndex) in section.rows"
             :key="`${sectionIndex}_${rowIndex}`"
             :ref="`row_${sectionIndex}_${rowIndex}`"
-            :class="row.styleClasses"
+            :data-dragRowId="row.id"
           >
             <v-divider v-if="!spec.responsiveCols && rowIndex == 0" />
 
@@ -81,7 +84,8 @@ export default {
   },
   data: function() {
     return {
-      sections: []
+      sections: [],
+      dragSupport: null
     };
   },
   computed: {
@@ -111,6 +115,7 @@ export default {
   methods: {
     $ready() {
       this.sections = this.spec.sections || [];
+      this.dragSupport = this.spec.dragSupport;
       this.autoloadAll(this.spec.nextPage);
       this.enableInfiniteScrollIfApplicable();
       this.$wsSubscribeEvents(this.spec.phoenixSocket);
@@ -212,37 +217,48 @@ export default {
     serializedSpec(row) {
       return JSON.stringify(row);
     },
+    onDragStart(event) {
+      // This allows custom components to detect if something is being dragged.
+      window.vueApp.draggedComponent = this;
+    },
     onDragEnd(event) {
+      window.vueApp.draggedComponent = null;
+
       const targetSectionedRowIndex = event.newIndex;
+      // const sourceSectionedRowIndex = event.oldIndex;
       if (event.from == event.to && event.oldIndex == targetSectionedRowIndex) {
         console.log("Reordering canceled");
         return;
       }
-
       const targetSectionIndex = this.getSectionIndex(event.to);
-      const targetSection = this.getSection(targetSectionIndex);
-      // The dragged row is now on the new index
-      const draggedRow = targetSection.rows[targetSectionedRowIndex];
+      // const targetSection = this.getSection(targetSectionIndex);
 
       const targetAbsoluteIndex =
         this.previousSectionsRowCount(event.to) + targetSectionedRowIndex;
 
-      const mergedSpec = Object.assign(draggedRow.onReorder, {
-        [draggedRow.paramNameForFormData || "formData"]: {
-          [draggedRow.paramNameForNewIndex]: targetAbsoluteIndex, // Deprecated
-          [draggedRow.paramNameForNewAbsoluteIndex ||
+      const rowId = event.clone.dataset.dragrowid; // The item that got dragged/dropped
+      const oldListId = event.from.dataset.draglistid;
+      const newListId = event.to.dataset.draglistid;
+
+      const dragSpec = this.dragSupport;
+      const mergedSpec = Object.assign(dragSpec.onDrop, {
+        [dragSpec.paramNameForFormData || "formData"]: {
+          [dragSpec.paramNameForNewAbsoluteIndex ||
           "newAbsoluteIndex"]: targetAbsoluteIndex,
-          [draggedRow.paramNameForNewSectionIndex ||
+          [dragSpec.paramNameForNewSectionIndex ||
           "newSectionIndex"]: targetSectionIndex,
-          [draggedRow.paramNameForNewSectionedRowIndex ||
-          "newSectionedRowIndex"]: targetSectionedRowIndex
+          [dragSpec.paramNameForNewSectionedRowIndex ||
+          "newSectionedRowIndex"]: targetSectionedRowIndex,
+          [dragSpec.paramNameForRowId || "rowId"]: rowId,
+          [dragSpec.paramNameForOldListId || "oldListId"]: oldListId,
+          [dragSpec.paramNameForNewListId || "newListId"]: newListId
         }
       });
 
       GLib.action.execute(mergedSpec, this);
     },
     getSectionIndex(element) {
-      return element.dataset.index;
+      return element.dataset.dragsectionindex;
     },
     getSection(sectionIndex) {
       return this.sections[sectionIndex];

package/components/panels/responsive.vue

@@ -5,8 +5,8 @@
       v-if="hoverViewsSpec"
       :close-on-content-click="false"
       open-on-hover
-      offset-x
-      transition="scale-transition"
+      top
+      offset-y
       content-class="hover"
     >
       <template v-slot:activator="{ on, attrs }">
@@ -21,7 +21,6 @@
     <common-tooltip v-else :spec="spec">
       <template v-slot:activator="{ on }">
         <common-responsive :spec="spec" :event-handlers="on" />
-        <!-- <common-button :spec="spec" :disabled="$isBusy" :event-handlers="on" /> -->
       </template>
     </common-tooltip>
   </div>
@@ -40,13 +39,18 @@ export default {
   },
   data() {
     return {
-      hoverViewsSpec: this.spec.hoverViews
+      hoverViewsSpec: null
+    };
+  },
+  methods: {
+    $ready() {
+      this.hoverViewsSpec = this.spec.hoverViews
         ? {
             childViews: this.spec.hoverViews,
             align: this.spec.align
           }
-        : false
-    };
+        : null;
+    }
   }
 };
 </script>

package/components/panels/vertical.vue

@@ -50,7 +50,7 @@ export default {
       return styles;
     },
     componentName() {
-      return this.$href() ? "a" : "div";
+      return this.spec.onClick ? "a" : "div";
     }
   }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "glib-web",
-  "version": "2.5.0",
+  "version": "2.5.1",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -47,4 +47,4 @@
     "prettier": "^1.18.2",
     "typescript": "^4.9.5"
   }
-}
+}

package/plugins/updatableComponent.js

@@ -1,16 +1,10 @@
 export default {
   install: (Vue, options) => {
-    // Vue.prototype.updatables = {};
-
     Vue.mixin({
       created: function() {
         let spec = this.spec;
         if (spec && spec.id && this.$registryEnabled()) {
           GLib.component.register(spec.id, this);
-          // Object.assign(this.updatables, {
-          //   [spec.id]: this
-          // });
-          // console.log("U", this.updatables);
         }
       },
       methods: {

package/templates/thumbnail.vue

@@ -1,9 +1,9 @@
 <template>
-  <div style="display:flex;" class="thumbnail">
+  <div style="display:flex;" class="thumbnail" :class="cssClasses">
     <div
       v-if="spec.leftOuterButtons"
       class="left-universal"
-      style="display:flex; margin-top: 10px;"
+      style="display:flex; margin-top:10px;"
     >
       <template v-for="(item, index) in spec.leftOuterButtons">
         <common-button
@@ -17,11 +17,11 @@
     <v-list-item
       v-longclick="$onLongPress"
       :href="$href()"
-      style="padding-left: 0;display:flex;"
+      class="item-content"
       :style="columnStyles()"
       @[clickCondition]="$onClick()"
     >
-      <v-icon v-if="spec.onReorder" class="handle">drag_indicator</v-icon>
+      <!-- <v-icon v-if="spec.onReorder" class="handle">drag_indicator</v-icon> -->
 
       <!-- Specify a key to prevent reuse which causes an issue where the checkbox would use the previous name. -->
       <fields-check v-if="checkSpec" :key="checkSpec.name" :spec="checkSpec" />
@@ -76,7 +76,7 @@
         </div>
 
         <!-- NOTE: Experimental -->
-        <panels-responsive :spec="accessory" />
+        <panels-responsive :spec="spec.accessory" />
       </v-list-item-content>
 
       <template v-for="(item, index) in spec.rightButtons">
@@ -105,12 +105,15 @@ export default {
   },
   data() {
     return {
-      accessory: {},
+      // accessory: {},
       editButtons: []
       // checkSpec: null
     };
   },
   computed: {
+    cssClasses() {
+      return this.$classes(this.spec, "templates/thumbnail");
+    },
     clickCondition() {
       if (this.spec.onClick || this.spec.onLongPress) {
         // This will show the clickable indication
@@ -145,10 +148,24 @@ export default {
       }
       return null;
     }
+    // cssStyles() {
+    //   const styles = this.$styles();
+    //   // switch(this.spec.align) {
+    //   //   case 'middle':
+    //   //     styles['align-items'] = 'center'
+    //   //     break
+    //   //   case 'bottom':
+    //   //     styles['align-items'] = 'flex-end'
+    //   //     break
+    //   //   default:
+    //   //     styles['align-items'] = 'flex-start'
+    //   // }
+    //   return styles;
+    // },
   },
   methods: {
     $ready() {
-      this.accessory = { childViews: this.spec.accessoryViews };
+      // this.accessory = { childViews: this.spec.accessoryViews };
       this.editButtons = this.spec.editButtons || [];
     },
     buttonSpec(item) {
@@ -173,6 +190,12 @@ export default {
 </style>
 
 <style lang="scss" scoped>
+.item-content {
+  padding-left: 0;
+  padding-right: 0;
+  display: flex;
+}
+
 @media (min-width: 600px) {
   .left-thumbnail.v-avatar.v-list-item__avatar {
     margin: 6px 6px 6px 6px;
@@ -186,9 +209,9 @@ export default {
   .left-universal {
     padding-left: 16px;
   }
-  .handle {
-    margin-left: 10px;
-    cursor: move;
-  }
+  // .handle {
+  //   // margin-left: 10px;
+  //   cursor: move;
+  // }
 }
 </style>