glib-web 0.5.98 → 0.6.2

package/components/panels/carousel.vue

@@ -1,55 +1,55 @@
-<template>
-  <v-card flat tile :style="$styles()">
-    <v-window v-model="selectedIndex">
-      <v-window-item v-for="(item, index) in spec.childViews" :key="index">
-        <ui-component :spec="item" />
-      </v-window-item>
-    </v-window>
-
-    <v-card-actions class="justify-space-between">
-      <v-btn text @click="prev">
-        <v-icon>chevron_left</v-icon>
-      </v-btn>
-      <v-item-group v-model="selectedIndex" class="text-center" mandatory>
-        <v-item v-for="(item, index) in spec.childViews" :key="index">
-          <v-btn
-            slot-scope="{ active, toggle }"
-            :input-value="active"
-            icon
-            @click="toggle"
-          >
-            <v-icon size="8">lens</v-icon>
-          </v-btn>
-        </v-item>
-      </v-item-group>
-      <v-btn text @click="next">
-        <v-icon>chevron_right</v-icon>
-      </v-btn>
-    </v-card-actions>
-  </v-card>
-</template>
-
-<script>
-export default {
-  props: {
-    spec: { type: Object, required: true }
-  },
-  data: () => ({
-    selectedIndex: 0
-  }),
-  methods: {
-    next() {
-      const length = this.spec.childViews.length;
-      this.selectedIndex =
-        this.selectedIndex + 1 === length ? 0 : this.selectedIndex + 1;
-    },
-    prev() {
-      const length = this.spec.childViews.length;
-      this.selectedIndex =
-        this.selectedIndex - 1 < 0 ? length - 1 : this.selectedIndex - 1;
-    }
-  }
-};
-</script>
-
-<style scoped></style>
+<template>
+  <v-card flat tile :style="$styles()">
+    <v-window v-model="selectedIndex">
+      <v-window-item v-for="(item, index) in spec.childViews" :key="index">
+        <ui-component :spec="item" />
+      </v-window-item>
+    </v-window>
+
+    <v-card-actions class="justify-space-between">
+      <v-btn text @click="prev">
+        <v-icon>chevron_left</v-icon>
+      </v-btn>
+      <v-item-group v-model="selectedIndex" class="text-center" mandatory>
+        <v-item v-for="(item, index) in spec.childViews" :key="index">
+          <v-btn
+            slot-scope="{ active, toggle }"
+            :input-value="active"
+            icon
+            @click="toggle"
+          >
+            <v-icon size="8">lens</v-icon>
+          </v-btn>
+        </v-item>
+      </v-item-group>
+      <v-btn text @click="next">
+        <v-icon>chevron_right</v-icon>
+      </v-btn>
+    </v-card-actions>
+  </v-card>
+</template>
+
+<script>
+export default {
+  props: {
+    spec: { type: Object, required: true }
+  },
+  data: () => ({
+    selectedIndex: 0
+  }),
+  methods: {
+    next() {
+      const length = this.spec.childViews.length;
+      this.selectedIndex =
+        this.selectedIndex + 1 === length ? 0 : this.selectedIndex + 1;
+    },
+    prev() {
+      const length = this.spec.childViews.length;
+      this.selectedIndex =
+        this.selectedIndex - 1 < 0 ? length - 1 : this.selectedIndex - 1;
+    }
+  }
+};
+</script>
+
+<style scoped></style>

package/components/panels/flow.vue

@@ -1,81 +1,81 @@
-<template>
-  <div :class="cssClasses" :style="cssStyles">
-    <template v-for="(item, index) in spec.childViews">
-      <!--
-        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">
-        <ui-component :spec="item" />
-      </div>
-    </template>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    spec: { type: Object, required: true }
-  },
-  computed: {
-    cssClasses: function() {
-      const classes = this.$classes().concat("layouts-flow");
-      // switch(this.spec.distribution) {
-      //   case 'fillEqually':
-      //     classes.push('layouts-horizontal--fill-equally')
-      //     break
-      //   case 'spaceEqually':
-      //     classes.push('layouts-horizontal--space-equally')
-      //     break
-      // }
-      return classes;
-    },
-    cssStyles: function() {
-      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;
-    },
-    innerStyles() {
-      const styles = {};
-      Utils.type.ifObject(this.spec.innerPadding, padding => {
-        Utils.type.ifNumber(
-          padding.top,
-          top => (styles["padding-top"] = `${top}px`)
-        );
-        Utils.type.ifNumber(
-          padding.bottom,
-          bottom => (styles["padding-bottom"] = `${bottom}px`)
-        );
-        Utils.type.ifNumber(
-          padding.left,
-          left => (styles["padding-left"] = `${left}px`)
-        );
-        Utils.type.ifNumber(
-          padding.right,
-          right => (styles["padding-right"] = `${right}px`)
-        );
-      });
-      return styles;
-    }
-  }
-};
-</script>
-
-<style lang="scss" scoped>
-.layouts-flow {
-  display: flex;
-  flex-wrap: wrap;
-}
-/* .layouts-horizontal > div {
-  display: inline-block;
-} */
-</style>
+<template>
+  <div :class="cssClasses" :style="cssStyles">
+    <template v-for="(item, index) in spec.childViews">
+      <!--
+        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">
+        <ui-component :spec="item" />
+      </div>
+    </template>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    spec: { type: Object, required: true }
+  },
+  computed: {
+    cssClasses: function() {
+      const classes = this.$classes().concat("layouts-flow");
+      // switch(this.spec.distribution) {
+      //   case 'fillEqually':
+      //     classes.push('layouts-horizontal--fill-equally')
+      //     break
+      //   case 'spaceEqually':
+      //     classes.push('layouts-horizontal--space-equally')
+      //     break
+      // }
+      return classes;
+    },
+    cssStyles: function() {
+      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;
+    },
+    innerStyles() {
+      const styles = {};
+      Utils.type.ifObject(this.spec.innerPadding, padding => {
+        Utils.type.ifNumber(
+          padding.top,
+          top => (styles["padding-top"] = `${top}px`)
+        );
+        Utils.type.ifNumber(
+          padding.bottom,
+          bottom => (styles["padding-bottom"] = `${bottom}px`)
+        );
+        Utils.type.ifNumber(
+          padding.left,
+          left => (styles["padding-left"] = `${left}px`)
+        );
+        Utils.type.ifNumber(
+          padding.right,
+          right => (styles["padding-right"] = `${right}px`)
+        );
+      });
+      return styles;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.layouts-flow {
+  display: flex;
+  flex-wrap: wrap;
+}
+/* .layouts-horizontal > div {
+  display: inline-block;
+} */
+</style>

package/components/panels/form.vue

@@ -1,130 +1,130 @@
-<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"
-      />
-    </template>
-
-    <panels-responsive :spec="modifiedSpec" />
-  </v-form>
-</template>
-
-<script>
-// import ActionsFormsSubmit from "../../actions/forms/submit";
-
-export default {
-  props: {
-    spec: { type: Object, required: true }
-  },
-  data: () => ({
-    url: null,
-    params: null,
-    parentStyles: {},
-    formElement: null,
-    submitButtons: [],
-    modifiedSpec: {}
-  }),
-  watch: {
-    $isBusy: function(val, oldVal) {
-      for (const button of this.submitButtons) {
-        button._isBusy = val;
-      }
-    }
-  },
-  methods: {
-    $ready: function() {
-      this.$onEvent("forms/addSubmit", e => {
-        this.submitButtons.push(e.data);
-      });
-
-      this.$onEvent("forms/setBusy", e => {
-        if (e.data.value) {
-          Utils.http.startIndicator(this);
-        } else {
-          Utils.http.stopIndicator(this);
-        }
-      });
-
-      this.$onEvent("forms/submit", e => {
-        this.submit();
-      });
-
-      this.formElement = this.$refs.form.$el;
-      this.parentStyles = this.genericStyles({ width: this.spec.width });
-
-      const { url: url, params: params } = Utils.url.extractFormActionData(
-        this.spec.url,
-        this.spec.local
-      );
-      this.url = url;
-      this.params = params;
-
-      let firstAutoFocus = false;
-      this.modifiedSpec = this.spec;
-      this.modifiedSpec.childViews.map(childView => {
-        if (
-          childView.view.startsWith("fields/") &&
-          childView.view !== "fields/hidden-v1" &&
-          !firstAutoFocus
-        ) {
-          childView.autoFocus = true;
-          firstAutoFocus = true;
-        }
-
-        return childView;
-      });
-    },
-    onSubmit(event) {
-      event.preventDefault();
-      event.stopPropagation();
-
-      this.submit();
-    },
-    submit() {
-      if (this.$refs.form.validate()) {
-        // Remove focus from current input field to avoid double submit if the user presses ENTER again.
-        document.activeElement.blur();
-
-        Utils.type.ifObject(
-          this.spec.onSubmit,
-          onSubmit => {
-            const formData = Utils.url.toMap(new FormData(this.formElement));
-            const params = {
-              [this.spec.paramNameForFormData || "formData"]: formData
-            };
-            const data = Object.assign({}, onSubmit, params);
-            GLib.action.execute(data, null, this);
-          },
-          () => {
-            GLib.form.submitData(this.formElement, this);
-          }
-        );
-      } else {
-        Utils.launch.alert("Make sure all fields are valid");
-      }
-    },
-    action_clear() {
-      this.formElement.reset();
-    }
-  }
-};
-</script>
-
-<style scoped>
-/* .panels-form {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-} */
-</style>
+<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"
+      />
+    </template>
+
+    <panels-responsive :spec="modifiedSpec" />
+  </v-form>
+</template>
+
+<script>
+// import ActionsFormsSubmit from "../../actions/forms/submit";
+
+export default {
+  props: {
+    spec: { type: Object, required: true }
+  },
+  data: () => ({
+    url: null,
+    params: null,
+    parentStyles: {},
+    formElement: null,
+    submitButtons: [],
+    modifiedSpec: {}
+  }),
+  watch: {
+    $isBusy: function(val, oldVal) {
+      for (const button of this.submitButtons) {
+        button._isBusy = val;
+      }
+    }
+  },
+  methods: {
+    $ready: function() {
+      this.$onEvent("forms/addSubmit", e => {
+        this.submitButtons.push(e.data);
+      });
+
+      this.$onEvent("forms/setBusy", e => {
+        if (e.data.value) {
+          Utils.http.startIndicator(this);
+        } else {
+          Utils.http.stopIndicator(this);
+        }
+      });
+
+      this.$onEvent("forms/submit", e => {
+        this.submit();
+      });
+
+      this.formElement = this.$refs.form.$el;
+      this.parentStyles = this.genericStyles({ width: this.spec.width });
+
+      const { url: url, params: params } = Utils.url.extractFormActionData(
+        this.spec.url,
+        this.spec.local
+      );
+      this.url = url;
+      this.params = params;
+
+      let firstAutoFocus = false;
+      this.modifiedSpec = this.spec;
+      this.modifiedSpec.childViews.map(childView => {
+        if (
+          childView.view.startsWith("fields/") &&
+          childView.view !== "fields/hidden-v1" &&
+          !firstAutoFocus
+        ) {
+          childView.autoFocus = true;
+          firstAutoFocus = true;
+        }
+
+        return childView;
+      });
+    },
+    onSubmit(event) {
+      event.preventDefault();
+      event.stopPropagation();
+
+      this.submit();
+    },
+    submit() {
+      if (this.$refs.form.validate()) {
+        // Remove focus from current input field to avoid double submit if the user presses ENTER again.
+        document.activeElement.blur();
+
+        Utils.type.ifObject(
+          this.spec.onSubmit,
+          onSubmit => {
+            const formData = Utils.url.toMap(new FormData(this.formElement));
+            const params = {
+              [this.spec.paramNameForFormData || "formData"]: formData
+            };
+            const data = Object.assign({}, onSubmit, params);
+            GLib.action.execute(data, null, this);
+          },
+          () => {
+            GLib.form.submitData(this.formElement, this);
+          }
+        );
+      } else {
+        Utils.launch.alert("Make sure all fields are valid");
+      }
+    },
+    action_clear() {
+      this.formElement.reset();
+    }
+  }
+};
+</script>
+
+<style scoped>
+/* .panels-form {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+} */
+</style>