glib-web 2.4.1 → 3.0.0-beta1

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);
 

package/utils/launch.js

@@ -1,8 +1,8 @@
-import Vue from "vue";
-import Dialog from "../nav/dialog";
-import Sheet from "../nav/sheet";
-import Snackbar from "../nav/snackbar";
-import Vuetify from "vuetify";
+import { Vue } from "../index";
+import Dialog from "../nav/dialog.vue";
+import Sheet from "../nav/sheet.vue";
+import Snackbar from "../nav/snackbar.vue";
+import { createApp, h } from "vue";
 
 export default class {
   static get dialog() {
@@ -36,30 +36,27 @@ class LaunchDialog {
       this.stack = [];
     }
 
+
     // https://css-tricks.com/creating-vue-js-component-instances-programmatically/
-    const DialogClass = Vue.extend(Dialog);
-    const instance = new DialogClass({
-      vuetify: new Vuetify({
-        theme: {
-          themes: Utils.settings.themes
+    const props = {
+      spec: properties,
+      stack: this.stack,
+      vueApp: window.vueApp
+    }
+
+    const instance = createApp(
+      {
+        render: function () {
+          return h(Dialog, props)
         }
-      }),
-      propsData: {
-        spec: properties,
-        stack: this.stack,
-        vueApp: window.vueApp
       }
-    });
+    )
+    Object.assign(instance._context, Vue._context)
 
     if (component) {
-      // const placeholder = component
-      //   .$dialogContainer()
-      //   .appendChild(document.createElement("div"));
-
-      const placeholder = component.$el.appendChild(
-        document.createElement("div")
-      );
-      instance.$mount(placeholder);
+      const placeholder = document.createElement('div')
+      document.body.appendChild(placeholder)
+      instance.mount(placeholder);
     } else {
       console.error("A dialog has to be displayed in a component");
     }
@@ -108,21 +105,19 @@ class LaunchDialog {
 
 class LaunchSheet {
   static open(properties, component) {
-    const SheetClass = Vue.extend(Sheet);
-    const instance = new SheetClass({
-      vuetify: new Vuetify({
-        theme: {
-          themes: Utils.settings.themes
+    const instance = createApp(
+      {
+        render: function () {
+          return h(Sheet, { spec: properties })
         }
-      }),
-      propsData: { spec: properties }
-    });
+      }
+    )
+    Object.assign(instance._context, Vue._context)
 
     if (component) {
-      const placeholder = component.$el.appendChild(
-        document.createElement("div")
-      );
-      instance.$mount(placeholder);
+      const placeholder = document.createElement('div')
+      document.body.appendChild(placeholder)
+      instance.mount(placeholder);
     } else {
       console.error("A sheet has to be displayed in a component");
     }
@@ -150,25 +145,22 @@ class LaunchSheet {
 
 class LaunchSnackbar {
   static open(properties, component) {
-    const SnackbarClass = Vue.extend(Snackbar);
-    const instance = new SnackbarClass({
-      vuetify: window.vueApp.vuetify,
-      propsData: { spec: properties, vueApp: window.vueApp }
-    });
+    const instance = createApp(
+      {
+        render: function () {
+          return h(Snackbar, { spec: properties, vueApp: window.vueApp })
+        }
+      }
+    )
+    Object.assign(instance._context, Vue._context)
 
     if (component) {
-      // This doesn't seem to work when it is triggered from a list row's menu.
-      // const placeholder = component.$el.appendChild(
-      //   document.createElement("div")
-      // );
-
-      const placeholder = document.body.appendChild(
-        document.createElement("div")
-      );
-      instance.$mount(placeholder);
+      const placeholder = document.createElement('div')
+      document.body.appendChild(placeholder)
+      instance.mount(placeholder);
       instance.show = true;
     } else {
-      console.error("A snackbar has to be displayed in a component");
+      console.error("A Snackbar has to be displayed in a component");
     }
 
     return instance;

package/utils/public.js

@@ -5,6 +5,9 @@ import Type from "./type";
 import Form from "./form";
 import Component from "./component";
 import Hash from "./hash";
+import Queue from "./queue";
+
+const _queue = new Queue();
 
 export default class {
   static get action() {
@@ -28,4 +31,7 @@ export default class {
   static get Hash() {
     return Hash;
   }
+  static get queue() {
+    return _queue;
+  }
 }

package/utils/queue.js

@@ -0,0 +1,110 @@
+// From https://stackoverflow.com/questions/47157428/how-to-implement-a-pseudo-blocking-async-queue-in-js-ts
+
+// const jobQueue = [];
+export default class {
+  constructor() {
+    // invariant: at least one of the arrays is empty
+    this.resolvers = [];
+    this.promises = [];
+  }
+  _add() {
+    this.promises.push(
+      new Promise(resolve => {
+        this.resolvers.push(resolve);
+      })
+    );
+  }
+  enqueue(t) {
+    // if (this.resolvers.length) this.resolvers.shift()(t);
+    // else this.promises.push(Promise.resolve(t));
+    if (!this.resolvers.length) this._add();
+    this.resolvers.shift()(t);
+  }
+  dequeue() {
+    if (!this.promises.length) this._add();
+    return this.promises.shift();
+  }
+  // now some utilities:
+  isEmpty() {
+    // there are no values available
+    return !this.promises.length; // this.length <= 0
+  }
+  isBlocked() {
+    // it's waiting for values
+    return !!this.resolvers.length; // this.length < 0
+  }
+  get length() {
+    return this.promises.length - this.resolvers.length;
+  }
+  sleep(ms) {
+    return new Promise(resolve => setTimeout(resolve, ms));
+  }
+  async start() {
+    // TODO: This is experimental
+    const delayBetweenJobs = 2000;
+
+    for await (const job of this) {
+      console.log("Executing job...");
+      job();
+      if (delayBetweenJobs) {
+        console.log("Waiting for next job1...");
+        await this.sleep(delayBetweenJobs);
+        console.log("Waiting for next job2...");
+      }
+    }
+    // console.log("JOB1");
+    // const job = this.dequeue();
+    // console.log("JOB2", job);
+    // job();
+    // Vue.nextTick(() => {
+    //   this.start();
+    // });
+    // await this.next();
+  }
+  [Symbol.asyncIterator]() {
+    // Todo: Use AsyncIterator.from()
+    return {
+      next: () => this.dequeue().then(value => ({ done: false, value })),
+      [Symbol.asyncIterator]() {
+        return this;
+      }
+    };
+  }
+}
+
+// export default class {
+//   constructor() {
+//     this.jobQueue = [];
+//     this.timerHandle = null;
+//   }
+//   // static get csrfElement() {
+//   //   return document.querySelector(`meta[name="csrf-token"]`);
+//   // }
+
+//   // static getCsrf() {
+//   //   return this.csrfElement.getAttribute("content");
+//   // }
+
+//   // static setCsrf(value) {
+//   //   return this.csrfElement.setAttribute("content", value);
+//   // }
+
+//   start(interval) {
+//     this.timerHandle = setInterval(() => {
+//       console.log("DEQUQE1");
+//       const oldestJob = this.jobQueue.shift();
+//       if (oldestJob) {
+//         console.log("DEQUQE2");
+//         oldestJob();
+//       }
+//     }, interval);
+//   }
+
+//   stop() {
+//     clearInterval(this.timerHandle);
+//   }
+
+//   enqueue(job) {
+//     this.jobQueue.push(job);
+//   }
+// }

package/utils/settings.js

@@ -1,3 +1,5 @@
+import config from '../package.json';
+
 class MutableSettings {
   constructor() {
     this.reactive = true;
@@ -22,7 +24,7 @@ export default class ImmutableSettings {
   }
 
   static get appVersion() {
-    return require("../package.json").version;
+    return config.version;
   }
 
   // static get build() {