glib-web 2.6.7 → 3.0.0

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,220 +1,15 @@
 <template>
-  <div class="thumbnail" :class="cssClasses" @[clickCondition]="$onClick()">
-    <panels-responsive :spec="spec.header" />
-    <div style="display:flex;">
-      <div v-if="spec.leftOuterButtons" 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()"
-        class="item-content"
-        :style="columnStyles()"
-      >
-        <!-- <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">
-          <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>
-
-        <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>
-
-          <panels-responsive :spec="spec.body" />
-        </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>
-    <panels-responsive :spec="spec.footer" />
-  </div>
+  <v-list-item :key="spec.title" :title="spec.title" :subtitle="spec.subtitle" :prepend-avatar="spec.imageUrl"
+    :prepend-icon="spec.icon?.material?.name" @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: {
-    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"]
-      // });
-      return Object.assign({}, item, {
-        view: "button-v1"
-      });
-    },
-    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>
+</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/component.js

@@ -1,25 +1,14 @@
-import Vue from "vue";
+import { nextTick } from "vue";
+import { vueApp } from "../store";
 
-export default class {
-  static get _registry() {
-    return window.vueApp.registeredComponents;
-  }
 
+export default class {
   static findById(id) {
-    return this._registry[id];
-    // const component = this._registry[id];
-    // if (component) {
-    //   return component;
-    // }
-    // console.error("Component not found: " + id);
+    return vueApp.registeredComponents[id];
   }
 
-  // static clearRegistry() {
-  //   window.vueApp.registeredComponents = {};
-  // }
-
   static register(id, component) {
-    if (this._registry[id]) {
+    if (this._registry[id];) {
       console.warn(
         "Duplicate component ID:",
         id,
@@ -38,7 +27,18 @@ export default class {
   }
 
   static vueName(component) {
-    return component.$options._componentTag;
+    // _componentTag not found
+    // return component.$options._componentTag;
+    if (!component.name && component.spec) {
+      if (component.spec.view == 'panels/fullPageForm') {
+        component.name = 'panels-form'
+      } else {
+        component.name = (component.spec.view || '').replace('/', '-').replace('-v1', '')
+      }
+    }
+
+
+    return component.name
   }
 
   static async preserveScroll(promise) {
@@ -48,7 +48,7 @@ export default class {
 
     await promise;
 
-    Vue.nextTick(() => {
+    nextTick(() => {
       pageBody.scrollTop = originalTop;
       pageBody.scrollLeft = originalLeft;
     });

package/utils/constant.js

@@ -0,0 +1,4 @@
+const colors = ['primary', 'secondary', 'success', 'warning', 'info', 'error']
+const variants = ['text', 'flat', 'elevated', 'outlined', 'plain', 'tonal']
+
+export { colors, variants }

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)
+}