glib-web 2.4.1 → 3.0.0-beta1

package/nav/snackbar.vue

@@ -1,21 +1,10 @@
 <template>
-  <v-snackbar
-    v-model="show"
-    :top="spec.verticalPosition == 'top'"
-    :bottom="spec.verticalPosition == 'bottom'"
-    :left="spec.horizontalPosition == 'left'"
-    :right="spec.horizontalPosition == 'right'"
-    :color="color"
-    :timeout="spec.timeout"
-  >
+  <v-snackbar v-model="show" :top="spec.verticalPosition == 'top'" :bottom="spec.verticalPosition == 'bottom'"
+    :left="spec.horizontalPosition == 'left'" :right="spec.horizontalPosition == 'right'" :color="color"
+    :timeout="spec.timeout">
     <common-message :spec="spec" />
 
-    <v-btn
-      v-for="(button, index) in spec.buttons"
-      :key="index"
-      text
-      @click="click(button, $event)"
-    >
+    <v-btn v-for="(button, index) in spec.buttons" :key="index" text @click="click(button, $event)">
       {{ button.text }}
     </v-btn>
 
@@ -34,32 +23,33 @@ export default {
     spec: { type: Object, required: true },
     vueApp: { type: Object, required: true }
   },
-  data: function() {
+  data: function () {
     return {
-      show: false,
+      show: true,
       color: null,
       indicator: false
     };
   },
-  watch: {
-    "vueApp.indicator": function(val, oldVal) {
-      if (this.indicator) {
-        this.show = val;
-      }
-    }
-  },
+  // watch: {
+  //   model: function (val, oldVal) {
+  //     if (!val) {
+  //       // this.$destroy();
+  //       this.$.appContext.app.unmount()
+  //     }
+  //   },
+  // },
   methods: {
     $ready() {
       const vm = this;
       this.$type.ifArray(this.spec.styleClasses, val => {
         ["success", "info", "error", "warning"].forEach(color => {
           if (val.includes(color)) {
-            vm.color = vm.$vuetify.theme.currentTheme[color];
+            vm.color = vm.$vuetify.theme.themes[color];
           }
         });
       });
     },
-    click: function(spec) {
+    click: function (spec) {
       const onClick = spec["onClick"];
       this.show = false;
       GLib.action.execute(onClick, this);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "glib-web",
-  "version": "2.4.1",
+  "version": "3.0.0-beta1",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -9,8 +9,6 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@fortawesome/fontawesome-free": "^5.0.0",
-    "@mdi/font": "^4.5.95",
     "@rails/actioncable": "^6.0.0",
     "@rails/activestorage": "^6.0.0-alpha",
     "awesome-phonenumber": "2.15.0",
@@ -22,29 +20,30 @@
     "phoenix": "^1.5.3",
     "push.js": "^1.0.12",
     "quill-image-drop-and-paste": "^1.2.14",
+    "tiny-emitter": "^2.1.0",
     "turndown": "^7.1.1",
     "turndown-plugin-gfm": "^1.0.2",
-    "vue": "2.6.14",
+    "vue": "3.2.47",
     "vue-chartkick": "^0.6.1",
-    "vue-gtag": "^1.1.2",
+    "vue-gtag": "^2.0.1",
     "vue-social-sharing": "^3.0.9",
     "vue-youtube": "^1.4.0",
     "vue2-editor": "^2.9.1",
     "vue2-gmap-custom-marker": "^6.1.1",
     "vue2-google-maps": "^0.10.6",
     "vuedraggable": "^2.24.1",
-    "vuetify": "2.3.9"
+    "vuetify": "3.1.10"
   },
   "devDependencies": {
     "@types/chart.js": "^2.9.34",
-    "babel-eslint": "^10.0.3",
-    "eslint": "^6.4.0",
+    "eslint": "^8.36.0",
     "eslint-config-prettier": "^6.3.0",
     "eslint-loader": "^3.0.0",
     "eslint-plugin-prettier": "^3.1.1",
-    "eslint-plugin-vue": "^5.2.3",
-    "eslint-plugin-vuetify": "^1.0.0-beta.3",
+    "eslint-plugin-vue": "^9.9.0",
+    "eslint-plugin-vuetify": "^2.0.0-beta.2",
+    "material-design-icons-iconfont": "^6.7.0",
     "prettier": "^1.18.2",
     "typescript": "^4.9.5"
   }
-}
+}

package/plugins/driverCustomBehavior.js

@@ -8,6 +8,6 @@ export default {
       element.addEventListener("focus", () => driver.moveNext());
     };
 
-    Vue.prototype.driverCustomBehavior = driverCustomBehavior;
+    Vue.config.globalProperties.driverCustomBehavior = driverCustomBehavior;
   }
 };

package/plugins/updatableComponent.js

@@ -1,16 +1,10 @@
 export default {
   install: (Vue, options) => {
-    // Vue.prototype.updatables = {};
-
     Vue.mixin({
-      created: function() {
+      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/plugins/vuetify.js

@@ -0,0 +1,27 @@
+import { createVuetify } from "vuetify";
+import 'material-design-icons-iconfont/dist/material-design-icons.css'
+import { aliases, md } from 'vuetify/iconsets/md'
+import 'vuetify/styles'
+import Utils from '../utils/helper'
+import * as components from 'vuetify/components'
+import * as directives from 'vuetify/directives'
+
+const opts = {
+    components,
+    directives,
+    icons: {
+        defaultSet: 'md',
+        aliases,
+        sets: {
+            md,
+        },
+    },
+    theme: {
+        themes: Utils.settings.themes
+    },
+    display: {
+        smAndDown: true
+    }
+}
+
+export default new createVuetify(opts)

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>