glib-web 2.5.0 → 3.0.0-beta1

package/templates/comment.vue

@@ -1,25 +1,39 @@
 <template>
-  <div v-longclick="$onLongPress" class="outer-container">
+  <div
+    v-longclick="$onLongPress"
+    class="outer-container"
+  >
     <div :class="[spec.editButtons ? 'container-edit' : 'container']">
-      <v-card flat :class="mode" class="py-1">
-        <v-card-title v-if="mode === 'system'" class="caption">{{
+      <v-card
+        flat
+        :class="mode"
+        class="py-1"
+      >
+        <v-card-title
+          v-if="mode === 'system'"
+          class="caption"
+        >{{
           spec.subtitle
         }}</v-card-title>
-        <v-avatar v-if="spec.imageUrl" size="30px">
-          <img :src="spec.imageUrl" alt="avatar" />
+        <v-avatar
+          v-if="spec.imageUrl"
+          size="30px"
+        >
+          <img
+            :src="spec.imageUrl"
+            alt="avatar"
+          />
         </v-avatar>
         <v-card-title
           v-if="spec.title"
           class="font-weight-bold body-2 subtitle"
-          >{{ spec.title }}</v-card-title
-        >
+        >{{ spec.title }}</v-card-title>
         <!-- eslint-disable vue/no-v-html -->
         <div
           v-if="mode !== 'system'"
           class="comment-bubble pa-2"
           v-html="compiledText"
         >
-          {{ spec.subtitle }}
         </div>
         <!--eslint-enable-->
         <img
@@ -29,13 +43,22 @@
           :href="taHref(spec)"
           @click="taClick($event, spec)"
         />
-        <v-card-title v-if="spec.subsubtitle" class="subsubtitle caption">{{
+        <v-card-title
+          v-if="spec.subsubtitle"
+          class="subsubtitle caption"
+        >{{
           spec.subsubtitle
         }}</v-card-title>
 
         <div class="mt-1 chips">
-          <template v-for="(spec, index) in chips">
-            <v-chip :key="index" class="ma-1" :color="spec.color">
+          <template
+            v-for="(spec, index) in chips"
+            :key="index"
+          >
+            <v-chip
+              class="ma-1"
+              :color="spec.color"
+            >
               {{ spec.text }}
             </v-chip>
           </template>
@@ -48,28 +71,28 @@
 <script>
 export default {
   props: {
-    spec: { type: Object, required: true }
+    spec: { type: Object, required: true },
   },
-  data: function() {
+  data: function () {
     return {
       position: null,
       mode: null,
-      chips: []
+      chips: [],
     };
   },
   computed: {
     compiledText() {
       return Utils.format.markdown(this.spec.subtitle);
-    }
+    },
   },
   methods: {
     $ready() {
       const template = this.spec.template;
       this.mode = this.determineMode(template);
 
-      this.chips = (this.spec.chips || []).map(spec => {
+      this.chips = (this.spec.chips || []).map((spec) => {
         var color = null;
-        this.$type.ifArray(spec.styleClasses, classes => {
+        this.$type.ifArray(spec.styleClasses, (classes) => {
           for (const val of ["success", "info", "warning", "error"]) {
             if (classes.includes(val)) {
               color = val;
@@ -92,8 +115,8 @@ export default {
         case "systemComment":
           return "system";
       }
-    }
-  }
+    },
+  },
 };
 </script>
 

package/templates/featured.vue

@@ -3,15 +3,14 @@
     <v-img :src="spec.imageUrl" height="200" :style="genericStyles()" />
 
     <v-list-item v-if="spec.template != 'spacer'">
-      <v-list-item-content>
-        <v-list-item-title>{{ spec.title }}</v-list-item-title>
-        <v-list-item-subtitle v-if="spec.subtitle">{{
-          spec.subtitle
-        }}</v-list-item-subtitle>
-        <v-list-item-subtitle v-if="spec.subsubtitle">{{
-          spec.subsubtitle
-        }}</v-list-item-subtitle>
-      </v-list-item-content>
+
+      <v-list-item-title>{{ spec.title }}</v-list-item-title>
+      <v-list-item-subtitle v-if="spec.subtitle">{{
+        spec.subtitle
+      }}</v-list-item-subtitle>
+      <v-list-item-subtitle v-if="spec.subsubtitle">{{
+        spec.subsubtitle
+      }}</v-list-item-subtitle>
 
       <templates-menu :edit-buttons="editButtons" />
     </v-list-item>

package/templates/thumbnail-old.vue

@@ -0,0 +1,188 @@
+<template>
+  <div style="display:flex;" class="thumbnail" :class="cssClasses">
+    <div v-if="spec.leftOuterButtons" class="left-universal" style="display:flex; margin-top:10px;">
+      <template v-for="(item, index) in spec.leftOuterButtons" :key="index">
+        <common-button :spec="buttonSpec(item)" :disabled="$isBusy" />
+      </template>
+    </div>
+
+    <v-list-item v-longclick="$onLongPress" :href="$href()" class="item-content" :style="columnStyles()"
+      @[clickCondition]="$onClick()">
+      <!-- <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" />
+
+      <div v-if="spec.leftButtons" class="left-universal">
+        <template v-for="(item, index) in spec.leftButtons" :key="index">
+          <rich-button :spec="buttonSpec(item)" :disabled="$isBusy" />
+        </template>
+      </div>
+
+      <!-- <v-list-item-avatar v-if="$type.isString(spec.imageUrl)" :tile="!spec.avatar || null" style="display:flex;"
+        class="left-thumbnail" :size="spec.imageSize">
+        <img :src="spec.imageUrl" />
+      </v-list-item-avatar> -->
+      <!-- <v-list-item-avatar v-else-if="$type.isObject(spec.icon)">
+      <common-icon :spec="spec.icon" />
+    </v-list-item-avatar> -->
+      <div v-else class="left-icon" v-if="$type.isObject(spec.icon)">
+        <common-icon :spec="spec.icon" />
+      </div>
+
+      <div style="display:flex;width: 100%">
+        <v-text-field v-if="spec.fieldTitleName" :name="spec.fieldTitleName" :value="spec.title" />
+        <v-list-item-title v-else>{{ spec.title }}</v-list-item-title>
+
+        <v-list-item-subtitle v-if="spec.subtitle">{{
+          spec.subtitle
+        }}</v-list-item-subtitle>
+        <v-list-item-subtitle v-if="spec.subsubtitle">{{
+          spec.subsubtitle
+        }}</v-list-item-subtitle>
+
+        <div class="chips">
+          <template v-for="(item, index) in chips" :key="index">
+            <common-chip :spec="item" />
+          </template>
+        </div>
+
+        <!-- NOTE: Experimental -->
+        <panels-responsive :spec="spec.accessory" />
+      </div>
+
+      <template v-for="(item, index) in spec.rightButtons" :key="index">
+        <rich-button :spec="buttonSpec(item)" :disabled="$isBusy" />
+      </template>
+
+      <templates-menu :edit-buttons="editButtons" />
+    </v-list-item>
+  </div>
+</template>
+
+<script>
+import CheckField from "../components/fields/check.vue";
+
+export default {
+  components: {
+    "fields-check": CheckField,
+  },
+  props: {
+    spec: { type: Object, required: true },
+    responsiveCols: { type: Number, default: () => 0 },
+  },
+  data() {
+    return {
+      // 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
+        return "click";
+      }
+      return null;
+    },
+    // Implemented as computed so that it gets reflected when reordering
+    chips() {
+      return (this.spec.chips || []).map((item) => {
+        var color = null;
+        this.$type.ifArray(item.styleClasses, (classes) => {
+          for (const val of ["success", "info", "warning", "error"]) {
+            if (classes.includes(val)) {
+              color = val;
+            }
+          }
+        });
+        return Object.assign({}, item, { color: color, view: "chip" });
+      });
+    },
+    // Implemented as computed so that it gets reflected when navigating to another list containing check fields.
+    checkSpec() {
+      if (this.spec.fieldCheckName) {
+        return {
+          view: "fields/checkGroup",
+          name: this.spec.fieldCheckName,
+          checkValue: true,
+          valueIf: this.spec.fieldCheckValueIf,
+          padding: { left: 16 },
+        };
+      }
+      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.editButtons = this.spec.editButtons || [];
+    },
+    buttonSpec(item) {
+      return Object.assign({}, item, {
+        view: "button-v1",
+        styleClasses: item.text ? ["text"] : ["icon"],
+      });
+    },
+    columnStyles() {
+      if (this.responsiveCols) {
+        return `width: ${100 / this.responsiveCols}%; float: left;`;
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+.chips>* {
+  margin-right: 10px;
+}
+</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;
+    width: 60px;
+    height: 60px;
+  }
+
+  .left-icon {
+    // margin-left: 16px;
+    margin-left: 4px;
+  }
+
+  .left-universal {
+    padding-left: 16px;
+  }
+
+  // .handle {
+  //   // margin-left: 10px;
+  //   cursor: move;
+  // }
+}
+</style>

package/templates/thumbnail.vue

@@ -1,194 +1,11 @@
 <template>
-  <div style="display:flex;" class="thumbnail">
-    <div
-      v-if="spec.leftOuterButtons"
-      class="left-universal"
-      style="display:flex; margin-top: 10px;"
-    >
-      <template v-for="(item, index) in spec.leftOuterButtons">
-        <common-button
-          :key="index"
-          :spec="buttonSpec(item)"
-          :disabled="$isBusy"
-        />
-      </template>
-    </div>
-
-    <v-list-item
-      v-longclick="$onLongPress"
-      :href="$href()"
-      style="padding-left: 0;display:flex;"
-      :style="columnStyles()"
-      @[clickCondition]="$onClick()"
-    >
-      <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" />
-
-      <div v-if="spec.leftButtons" class="left-universal">
-        <template v-for="(item, index) in spec.leftButtons">
-          <rich-button
-            :key="index"
-            :spec="buttonSpec(item)"
-            :disabled="$isBusy"
-          />
-        </template>
-      </div>
-
-      <v-list-item-avatar
-        v-if="$type.isString(spec.imageUrl)"
-        :tile="!spec.avatar"
-        style="display:flex;"
-        class="left-thumbnail"
-        :size="spec.imageSize"
-      >
-        <img :src="spec.imageUrl" />
-      </v-list-item-avatar>
-      <!-- <v-list-item-avatar v-else-if="$type.isObject(spec.icon)">
-      <common-icon :spec="spec.icon" />
-    </v-list-item-avatar> -->
-      <div v-else class="left-icon">
-        <v-list-item-avatar v-if="$type.isObject(spec.icon)">
-          <common-icon :spec="spec.icon" />
-        </v-list-item-avatar>
-      </div>
-
-      <v-list-item-content style="display:flex;">
-        <v-text-field
-          v-if="spec.fieldTitleName"
-          :name="spec.fieldTitleName"
-          :value="spec.title"
-        />
-        <v-list-item-title v-else>{{ spec.title }}</v-list-item-title>
-
-        <v-list-item-subtitle v-if="spec.subtitle">{{
-          spec.subtitle
-        }}</v-list-item-subtitle>
-        <v-list-item-subtitle v-if="spec.subsubtitle">{{
-          spec.subsubtitle
-        }}</v-list-item-subtitle>
-
-        <div class="chips">
-          <template v-for="(item, index) in chips">
-            <common-chip :key="index" :spec="item" />
-          </template>
-        </div>
-
-        <!-- NOTE: Experimental -->
-        <panels-responsive :spec="accessory" />
-      </v-list-item-content>
-
-      <template v-for="(item, index) in spec.rightButtons">
-        <rich-button
-          :key="index"
-          :spec="buttonSpec(item)"
-          :disabled="$isBusy"
-        />
-      </template>
-
-      <templates-menu :edit-buttons="editButtons" />
-    </v-list-item>
-  </div>
+    <v-list-item :key="spec.title" :title="spec.title" :subtitle="spec.subtitle" :prepend-avatar="spec.imageUrl"
+        @click="$event => spec.onClick ? $onClick() : null"></v-list-item>
 </template>
-
 <script>
-import CheckField from "../components/fields/check";
-
 export default {
-  components: {
-    "fields-check": CheckField
-  },
-  props: {
-    spec: { type: Object, required: true },
-    responsiveCols: { type: Number, default: () => 0 }
-  },
-  data() {
-    return {
-      accessory: {},
-      editButtons: []
-      // checkSpec: null
-    };
-  },
-  computed: {
-    clickCondition() {
-      if (this.spec.onClick || this.spec.onLongPress) {
-        // This will show the clickable indication
-        return "click";
-      }
-      return null;
-    },
-    // Implemented as computed so that it gets reflected when reordering
-    chips() {
-      return (this.spec.chips || []).map(item => {
-        var color = null;
-        this.$type.ifArray(item.styleClasses, classes => {
-          for (const val of ["success", "info", "warning", "error"]) {
-            if (classes.includes(val)) {
-              color = val;
-            }
-          }
-        });
-        return Object.assign({}, item, { color: color, view: "chip" });
-      });
-    },
-    // Implemented as computed so that it gets reflected when navigating to another list containing check fields.
-    checkSpec() {
-      if (this.spec.fieldCheckName) {
-        return {
-          view: "fields/checkGroup",
-          name: this.spec.fieldCheckName,
-          checkValue: true,
-          valueIf: this.spec.fieldCheckValueIf,
-          padding: { left: 16 }
-        };
-      }
-      return null;
+    props: {
+        spec: { type: Object, required: true },
     }
-  },
-  methods: {
-    $ready() {
-      this.accessory = { childViews: this.spec.accessoryViews };
-      this.editButtons = this.spec.editButtons || [];
-    },
-    buttonSpec(item) {
-      return Object.assign({}, item, {
-        view: "button-v1",
-        styleClasses: item.text ? ["text"] : ["icon"]
-      });
-    },
-    columnStyles() {
-      if (this.responsiveCols) {
-        return `width: ${100 / this.responsiveCols}%; float: left;`;
-      }
-    }
-  }
-};
-</script>
-
-<style lang="scss">
-.chips > * {
-  margin-right: 10px;
-}
-</style>
-
-<style lang="scss" scoped>
-@media (min-width: 600px) {
-  .left-thumbnail.v-avatar.v-list-item__avatar {
-    margin: 6px 6px 6px 6px;
-    width: 60px;
-    height: 60px;
-  }
-  .left-icon {
-    // margin-left: 16px;
-    margin-left: 4px;
-  }
-  .left-universal {
-    padding-left: 16px;
-  }
-  .handle {
-    margin-left: 10px;
-    cursor: move;
-  }
 }
-</style>
+</script>

package/tsconfig.json

@@ -39,7 +39,7 @@
     // "noResolve": true,                                /* Disallow 'import's, 'require's or '<reference>'s from expanding the number of files TypeScript should add to a project. */
 
     /* JavaScript Support */
-    // "allowJs": true,                                  /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */
+    "allowJs": true,                                  /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */
     // "checkJs": true,                                  /* Enable error reporting in type-checked JavaScript files. */
     // "maxNodeModuleJsDepth": 1,                        /* Specify the maximum folder depth used for checking JavaScript files from 'node_modules'. Only applicable with 'allowJs'. */
 

package/utils/eventBus.js

@@ -1,2 +1,9 @@
-import Vue from "vue";
-export default new Vue();
+// eventBus.js
+import emitter from 'tiny-emitter/instance'
+
+export default {
+    $on: (...args) => emitter.on(...args),
+    $once: (...args) => emitter.once(...args),
+    $off: (...args) => emitter.off(...args),
+    $emit: (...args) => emitter.emit(...args)
+}

package/utils/history.js

@@ -1,4 +1,5 @@
-import Vue from "vue";
+import { nextTick } from "vue";
+import eventBus from "./eventBus";
 
 export default class {
   static saveInitialContent(content) {
@@ -20,7 +21,7 @@ export default class {
   }
 
   static _data(content) {
-    return { content: content, navigationCount: this.navigationCount };
+    return { content: JSON.parse(JSON.stringify(content)), navigationCount: this.navigationCount };
   }
 
   static pushPage(content, url) {
@@ -54,10 +55,12 @@ export default class {
 
       const data = event.state;
       data.content.__poppedState = true;
-      window.vueApp.page = data.content;
+      // 
+
+      eventBus.$emit('app/updatePage', data.content)
       vm.navigationCount = data.navigationCount;
 
-      Vue.nextTick(() => {
+      nextTick(() => {
         const scrollTop = this.bodyScrollTops[this.navigationCount];
         this._pageBody.scrollTop = scrollTop;
       });

package/utils/http.js

@@ -1,5 +1,6 @@
 import Type from "./type";
 import Action from "../action";
+import eventBus from "./eventBus";
 
 let loading = false;
 const dirtyPrompt = "Changes you made have not been saved. Are you sure?";
@@ -60,7 +61,10 @@ export default class {
 
         this.forceComponentUpdate(() => {
           Utils.history.resetScroll();
-          window.vueApp.page = data;
+          // window.vueApp.page = data;
+
+          eventBus.$emit('app/updatePage', data)
+
           Action.execute(properties["onOpen"], component);
         });
       });
@@ -113,7 +117,8 @@ export default class {
 
     Utils.http.execute(data, "GET", component, (page, response) => {
       Utils.http.forceComponentUpdate(() => {
-        window.vueApp.page = page;
+        // window.vueApp.page = page;
+        eventBus.$emit('app/updatePage', page)
         const redirectUrl = Utils.url.htmlUrl(response.url);
         Utils.history.updatePage(redirectUrl);