glib-web 2.6.7 → 3.0.0

package/components/panels/custom.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :style="genericStyles()">
+  <div :style="genericStyles()" :class="$classes()">
     <!--
       NOTE: To make sure that the custom component gets updated, in the custom component,
       make sure to use one of the `spec` attributes directly or through a computed method.
@@ -11,20 +11,15 @@
       This should not be needed if a component (custom or not) uses $styles() or other mixin
       methods because those methods use `spec` attributes, which will force $ready() to be called.
     -->
-    <component
-      ref="ccomp"
-      :is="template"
-      v-if="customData"
-      :name="spec.template"
-      :spec="customData"
-    />
+    <component ref="ccomp" :is="template" v-if="customData" :name="spec.template" :spec="customData" />
   </div>
 </template>
 
 <script>
-import UnsupportedTemplate from "../../templates/unsupported";
-import ThumbnailTemplate from "../../templates/thumbnail";
-import FeaturedTemplate from "../../templates/featured";
+import UnsupportedTemplate from "../../templates/unsupported.vue";
+import ThumbnailTemplate from "../../templates/thumbnail.vue";
+import FeaturedTemplate from "../../templates/featured.vue";
+import { getCurrentInstance } from 'vue';
 
 export default {
   components: {
@@ -42,12 +37,13 @@ export default {
   },
   computed: {
     template() {
+
       const name = `template-${this.spec.template.replace("/", "-")}`;
-      const strict = false;
+      const strict = true;
       if (strict) {
         return name;
       } else {
-        if (this.$options.components[name]) {
+        if (getCurrentInstance().appContext.components[name]) {
           return name;
         }
         return "template-unsupported";

package/components/panels/flow.vue

@@ -1,11 +1,17 @@
 <template>
-  <div :class="cssClasses" :style="cssStyles">
-    <template v-for="(item, index) in spec.childViews">
+  <div
+    :class="cssClasses"
+    :style="cssStyles"
+  >
+    <template
+      v-for="(item, index) in spec.childViews"
+      :key="index"
+    >
       <!--
         The wrapper prevents its content (e.g. image component) from getting stretched to fill
         remaining space on the new line.
       -->
-      <div :key="index" :style="innerStyles">
+      <div :style="innerStyles">
         <glib-component :spec="item" />
       </div>
     </template>
@@ -15,10 +21,10 @@
 <script>
 export default {
   props: {
-    spec: { type: Object, required: true }
+    spec: { type: Object, required: true },
   },
   computed: {
-    cssClasses: function() {
+    cssClasses: function () {
       const classes = this.$classes().concat("layouts-flow");
       // switch(this.spec.distribution) {
       //   case 'fillEqually':
@@ -30,7 +36,7 @@ export default {
       // }
       return classes;
     },
-    cssStyles: function() {
+    cssStyles: function () {
       const styles = this.$styles();
       // switch(this.spec.align) {
       //   case 'middle':
@@ -46,27 +52,27 @@ export default {
     },
     innerStyles() {
       const styles = {};
-      Utils.type.ifObject(this.spec.innerPadding, padding => {
+      Utils.type.ifObject(this.spec.innerPadding, (padding) => {
         Utils.type.ifNumber(
           padding.top,
-          top => (styles["padding-top"] = `${top}px`)
+          (top) => (styles["padding-top"] = `${top}px`)
         );
         Utils.type.ifNumber(
           padding.bottom,
-          bottom => (styles["padding-bottom"] = `${bottom}px`)
+          (bottom) => (styles["padding-bottom"] = `${bottom}px`)
         );
         Utils.type.ifNumber(
           padding.left,
-          left => (styles["padding-left"] = `${left}px`)
+          (left) => (styles["padding-left"] = `${left}px`)
         );
         Utils.type.ifNumber(
           padding.right,
-          right => (styles["padding-right"] = `${right}px`)
+          (right) => (styles["padding-right"] = `${right}px`)
         );
       });
       return styles;
-    }
-  }
+    },
+  },
 };
 </script>
 

package/components/panels/form.vue

@@ -1,19 +1,8 @@
 <template>
-  <v-form
-    ref="form"
-    :style="parentStyles"
-    :action="url"
-    :method="spec.method"
-    :data-local="spec.local"
-    @submit="onSubmit"
-  >
-    <template v-for="(value, key, index) in params">
-      <input
-        :key="`hidden_${index}`"
-        type="hidden"
-        :name="key"
-        :value="value"
-      />
+  <v-form ref="form" :style="parentStyles" :action="url" :method="spec.method" :data-local="spec.local"
+    @submit="onSubmit">
+    <template v-for="(value, key, index) in params" :key="`hidden_${index}`">
+      <input type="hidden" :name="key" :value="value" />
     </template>
 
     <panels-responsive :spec="modifiedSpec" />
@@ -28,7 +17,7 @@
 
 export default {
   props: {
-    spec: { type: Object, required: true }
+    spec: { type: Object, required: true },
   },
   data: () => ({
     url: null,
@@ -36,22 +25,22 @@ export default {
     parentStyles: {},
     formElement: null,
     submitButtons: [],
-    modifiedSpec: {}
+    modifiedSpec: {},
   }),
   watch: {
-    $isBusy: function(val, oldVal) {
+    $isBusy: function (val, oldVal) {
       for (const button of this.submitButtons) {
         button._isBusy = val;
       }
-    }
+    },
   },
   methods: {
     $mounted() {
-      this.$onEvent("forms/addSubmit", e => {
+      this.$onEvent("forms/addSubmit", (e) => {
         this.submitButtons.push(e.data);
       });
 
-      this.$onEvent("forms/setBusy", e => {
+      this.$onEvent("forms/setBusy", (e) => {
         if (e.data.value) {
           Utils.http.startIndicator(this);
         } else {
@@ -59,11 +48,11 @@ export default {
         }
       });
 
-      this.$onEvent("forms/submit", e => {
+      this.$onEvent("forms/submit", (e) => {
         this.submit();
       });
 
-      this.$onEvent("forms/directSubmit", e => {
+      this.$onEvent("forms/directSubmit", (e) => {
         this.directSubmit(e.data.url);
       });
     },
@@ -104,10 +93,10 @@ export default {
       this.validate(() => {
         Utils.type.ifObject(
           this.spec.onSubmit,
-          onSubmit => {
+          (onSubmit) => {
             const formData = Utils.url.toMap(new FormData(this.formElement));
             const params = {
-              [this.spec.paramNameForFormData || "formData"]: formData
+              [this.spec.paramNameForFormData || "formData"]: formData,
             };
             const data = Object.assign({}, onSubmit, params);
             GLib.action.execute(data, this);
@@ -128,22 +117,25 @@ export default {
       }
     },
     validate(onPassed) {
-      if (this.$refs.form.validate()) {
-        // Remove focus from current input field to avoid double submit if the user presses ENTER again.
-        document.activeElement.blur();
+      this.$refs.form.validate()
+        .then(({ valid, errors }) => {
+          if (valid && errors.length <= 0) {
+            // Remove focus from current input field to avoid double submit if the user presses ENTER again.
+            document.activeElement.blur();
 
-        onPassed();
-      } else {
-        Utils.launch.dialog.alert("Make sure all fields are valid", this);
-      }
+            onPassed();
+          } else {
+            Utils.launch.dialog.alert("Make sure all fields are valid", this);
+          }
+        })
     },
     action_clear() {
       this.formElement.reset();
-    }
+    },
     // $dialogContainer() {
     //   return this.formElement;
     // }
-  }
+  },
 };
 </script>
 

package/components/panels/grid.vue

@@ -1,7 +1,13 @@
 <template>
-  <div :class="$classes()" :style="cssStyles">
-    <template v-for="(item, index) in spec.childViews">
-      <div :key="index">
+  <div
+    :class="$classes()"
+    :style="cssStyles"
+  >
+    <template
+      v-for="(item, index) in spec.childViews"
+      :key="index"
+    >
+      <div>
         <glib-component :spec="item" />
       </div>
     </template>
@@ -11,20 +17,20 @@
 <script>
 export default {
   props: {
-    spec: { type: Object, required: true }
+    spec: { type: Object, required: true },
   },
   computed: {
-    cssStyles: function() {
+    cssStyles: function () {
       const styles = this.$styles();
 
       styles["display"] = "grid";
       Utils.type.ifNumber(
         this.spec.columnGap,
-        columnGap => (styles["columnGap"] = `${columnGap}px`)
+        (columnGap) => (styles["columnGap"] = `${columnGap}px`)
       );
       Utils.type.ifNumber(
         this.spec.rowGap,
-        rowGap => (styles["rowGap"] = `${rowGap}px`)
+        (rowGap) => (styles["rowGap"] = `${rowGap}px`)
       );
       const boxMaxWidth = this.spec.boxMaxWidth
         ? `${this.spec.boxMaxWidth}px`
@@ -35,8 +41,8 @@ export default {
       ] = `repeat(auto-fit, minmax(${this.spec.boxMinWidth}px, ${boxMaxWidth}))`;
 
       return styles;
-    }
-  }
+    },
+  },
 };
 </script>
 

package/components/panels/horizontal.vue

@@ -6,58 +6,46 @@
     :href="$href()"
     @click="$onClick()"
   >
-    <template v-for="(item, index) in spec.childViews">
-      <glib-component :key="index" :spec="item" />
+    <template
+      v-for="(item, index) in spec.childViews"
+      :key="index"
+    >
+      <glib-component :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
+  <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"
-      >
+    <div :style="childStyles" :class="childClasses">
+      <template v-for="(item, index) in childViews" :key="item.id || index">
         <glib-component :spec="item" />
-      </div>
-    </draggable>
+      </template>
+    </div>
+    <!-- </draggable> -->
   </component>
 </template>
 
 <script>
-import draggable from "vuedraggable";
+// import draggable from "vuedraggable";
 
 export default {
   components: {
-    draggable
+    // draggable
   },
   props: {
-    spec: { type: Object, required: true }
+    spec: { type: Object, required: true },
   },
-  data: function() {
+  data: function () {
     return {
       dragSupport: null,
       childViews: []
     };
   },
   computed: {
-    parentClasses: function() {
+    parentClasses: function () {
       return this.$classes();
     },
     childClasses() {
@@ -71,7 +59,7 @@ export default {
           classes.push("layouts-horizontal--space-equally");
           break;
         default:
-          Utils.type.ifString(distribution, distribution => {
+          Utils.type.ifString(distribution, (distribution) => {
             // Uses Material Design spacings: https://vuetifyjs.com/en/styles/spacing/#how-it-works
             if (
               distribution.startsWith("overlap-") ||
@@ -124,14 +112,14 @@ export default {
     },
     onDragStart(event) {
       // This allows custom components to detect if something is being dragged.
-      window.vueApp.draggedComponent = this;
+      vueApp.draggedComponent = this;
     },
     onDragEnd(event) {
-      window.vueApp.draggedComponent = null;
+      vueApp.draggedComponent = null;
 
       const targetRowIndex = event.newIndex;
       if (event.from == event.to && event.oldIndex == targetRowIndex) {
-        console.debug("Reordering canceled");
+        console.log("Reordering canceled");
         return;
       }
 
@@ -197,60 +185,76 @@ a.panels-horizontal {
 </style>
 
 <style>
-.layouts-horizontal--fill-equally > * {
+.layouts-horizontal--fill-equally>* {
   flex: initial;
   width: 100%;
 }
-.layouts-horizontal--space-equally > * {
+
+.layouts-horizontal--space-equally>* {
   flex: initial;
 }
-.layouts-horizontal--overlap-1 > *:not(:first-child) {
+
+.layouts-horizontal--overlap-1>*:not(:first-child) {
   margin-left: -4px;
 }
-.layouts-horizontal--overlap-2 > *:not(:first-child) {
+
+.layouts-horizontal--overlap-2>*:not(:first-child) {
   margin-left: -8px;
 }
-.layouts-horizontal--overlap-3 > *:not(:first-child) {
+
+.layouts-horizontal--overlap-3>*:not(:first-child) {
   margin-left: -12px;
 }
-.layouts-horizontal--overlap-4 > *:not(:first-child) {
+
+.layouts-horizontal--overlap-4>*:not(:first-child) {
   margin-left: -16px;
 }
-.layouts-horizontal--overlap-5 > *:not(:first-child) {
+
+.layouts-horizontal--overlap-5>*:not(:first-child) {
   margin-left: -20px;
 }
-.layouts-horizontal--overlap-6 > *:not(:first-child) {
+
+.layouts-horizontal--overlap-6>*:not(:first-child) {
   margin-left: -24px;
 }
-.layouts-horizontal--overlap-7 > *:not(:first-child) {
+
+.layouts-horizontal--overlap-7>*:not(:first-child) {
   margin-left: -28px;
 }
-.layouts-horizontal--overlap-8 > *:not(:first-child) {
+
+.layouts-horizontal--overlap-8>*:not(:first-child) {
   margin-left: -32px;
 }
 
-.layouts-horizontal--space-1 > *:not(:first-child) {
+.layouts-horizontal--space-1>*:not(:first-child) {
   margin-left: 4px;
 }
-.layouts-horizontal--space-2 > *:not(:first-child) {
+
+.layouts-horizontal--space-2>*:not(:first-child) {
   margin-left: 8px;
 }
-.layouts-horizontal--space-3 > *:not(:first-child) {
+
+.layouts-horizontal--space-3>*:not(:first-child) {
   margin-left: 12px;
 }
-.layouts-horizontal--space-4 > *:not(:first-child) {
+
+.layouts-horizontal--space-4>*:not(:first-child) {
   margin-left: 16px;
 }
-.layouts-horizontal--space-5 > *:not(:first-child) {
+
+.layouts-horizontal--space-5>*:not(:first-child) {
   margin-left: 20px;
 }
-.layouts-horizontal--space-6 > *:not(:first-child) {
+
+.layouts-horizontal--space-6>*:not(:first-child) {
   margin-left: 24px;
 }
-.layouts-horizontal--space-7 > *:not(:first-child) {
+
+.layouts-horizontal--space-7>*:not(:first-child) {
   margin-left: 28px;
 }
-.layouts-horizontal--space-8 > *:not(:first-child) {
+
+.layouts-horizontal--space-8>*:not(:first-child) {
   margin-left: 32px;
 }
 </style>