glib-web 0.9.0 → 0.10.2

package/components/fields/creditCard.vue

@@ -84,13 +84,6 @@ export default {
       stripe.createPaymentMethod("card", card).then(function(result) {
         if (result.error) {
           vm._displayError(result.error.message);
-
-          // // Show error in payment form
-          // vm.displayError.textContent = result.error.message;
-          // vm.clearData();
-          // setTimeout(function() {
-          //   vm.retrieveToken.status = "complete";
-          // }, 50);
         } else {
           vm._displayError("");
 

package/components/fields/timer.vue

@@ -1,6 +1,29 @@
 <template>
   <div :style="$styles()" :class="classes()">
+    <div v-if="days_mode">
+      <div align="center">
+        <v-row align="center" justify="center">
+          <div class="day mx-2">
+            <div class="number">{{ displayDays }}</div>
+            <div class="format">Days</div>
+          </div>
+          <div class="hour mx-2">
+            <div class="number">{{ displayHours }}</div>
+            <div class="format">Hours</div>
+          </div>
+          <div class="min mx-2">
+            <div class="number">{{ displayMinutes }}</div>
+            <div class="format">Mins</div>
+          </div>
+          <div class="sec mx-2">
+            <div class="number">{{ displaySeconds }}</div>
+            <div class="format">Secs</div>
+          </div>
+        </v-row>
+      </div>
+    </div>
     <v-text-field
+      v-else
       v-model="fieldModel"
       :label="spec.label"
       :name="fieldName"
@@ -25,11 +48,35 @@ export default {
     return {
       timer: null,
       minValue: -1000000,
-      maxValue: 1000000
+      maxValue: 1000000,
+      days_mode: null,
+      displayDays: 0,
+      displayHours: 0,
+      displayMinutes: 0,
+      displaySeconds: 0
     };
   },
+  computed: {
+    _seconds: () => 1000,
+    _minutes() {
+      return this._seconds * 60;
+    },
+    _hours() {
+      return this._minutes * 60;
+    },
+    _days() {
+      return this._hours * 24;
+    },
+    end() {
+      return new Date(this.spec.value);
+    }
+  },
   methods: {
     $ready() {
+      if ((this.days_mode = this.$classes().includes("days"))) {
+        this.showRemaining();
+      }
+
       this.$wsInitActionCable(this.spec.actionCable);
 
       Utils.type.ifNumber(this.spec.min, value => {
@@ -75,6 +122,32 @@ export default {
     },
     classes() {
       return this.$classes().concat("g-text-field--hintless");
+    },
+    // days_mode methods
+    formatNum: num => (num < 10 ? "0" + num : num),
+    showRemaining() {
+      setInterval(() => {
+        this.now = new Date();
+        this.fieldModel = this.end.getTime() - this.now.getTime();
+
+        if (this.fieldModel < 0) {
+          clearInterval(this.timer);
+          return;
+        }
+
+        const days = Math.floor(this.fieldModel / this._days);
+        const hours = Math.floor((this.fieldModel % this._days) / this._hours);
+        const minutes = Math.floor(
+          (this.fieldModel % this._hours) / this._minutes
+        );
+        const seconds = Math.floor(
+          (this.fieldModel % this._minutes) / this._seconds
+        );
+        this.displayMinutes = this.formatNum(minutes);
+        this.displaySeconds = this.formatNum(seconds);
+        this.displayHours = this.formatNum(hours);
+        this.displayDays = this.formatNum(days);
+      });
     }
   }
 };

package/components/mixins/events.js

@@ -125,10 +125,7 @@ export default {
 
       // Make sure events are dispatched after $ready(). Dispatching them during $ready() causes errors.
       for (const event of this.$data._events) {
-        // Execute later to ensure the parent has registered its event listener
-        // setTimeout(() => {
         this.$el.dispatchEvent(event);
-        // }, 100)
       }
       this.$data._events = null;
     },

package/components/mixins/list/autoload.js

@@ -29,6 +29,9 @@ export default {
       const onScrollToBottom = this.spec.onScrollToBottom;
       const onScrollToTop = this.spec.onScrollToTop;
 
+      // Reset state for reuse.
+      this.nextPageUrl = null;
+      this.prevPageUrl = null;
       if (this.infiniteScroll) {
         this.nextPageUrl = nextPage.url;
         this.prevPageUrl = prevPage.url;
@@ -71,6 +74,8 @@ export default {
               this.prevPageUrl = null;
             }
 
+            var previousFirstRowIndex = null;
+
             for (const [
               index,
               prependedSection
@@ -78,13 +83,17 @@ export default {
               const section = this.sections[index];
 
               Utils.type.ifArray(prependedSection.rows, rows => {
+                // Get the number of rows prepended to the top section
+                if (index == 0) {
+                  previousFirstRowIndex = rows.length;
+                }
+
                 for (const row of rows) {
                   section.rows.unshift(row);
                 }
               });
 
-              // TODO: scroll back to where the position was before the prepending.
-              // https://stackoverflow.com/questions/54765451/preserve-scroll-position-on-dom-update-in-vue-js
+              this._updateScrollAfterPrepending(previousFirstRowIndex);
             }
             Utils.history.updatePage();
           }
@@ -93,6 +102,28 @@ export default {
 
       GLib.action.execute(onScrollToTop, this);
     },
+    _updateScrollAfterPrepending(previousFirstRowIndex) {
+      // Scroll back to where the position was before the prepending.
+      if (previousFirstRowIndex) {
+        // Pre-record the height to get an accurate value
+        const anchorHeight = this.$refs.topAnchor.clientHeight;
+
+        this.$nextTick(() => {
+          const prependedBottomElement = this.$refs[
+            `row_0_${previousFirstRowIndex - 1}`
+          ][0];
+
+          const top =
+            prependedBottomElement.offsetTop +
+            prependedBottomElement.clientHeight -
+            anchorHeight;
+
+          const pageBody = Utils.history._pageBody;
+
+          pageBody.scrollTop = top;
+        });
+      }
+    },
     _registerBottomScroll(onScrollToBottom) {
       this.bottomScrollHandler = this.$onVisibilityChange(
         this.$refs.bottomAnchor,

package/components/mixins/styles.js

@@ -46,11 +46,12 @@ export default {
         this.$internalizeValue(val)
       );
 
+      const dirtyCheckEnabled = !this.spec.disableDirtyCheck;
       // Make sure value has changed and make sure that it is different from the original value.
       // Be strict with this so it doesn't execute when the component is just initializing (e.g value changing
       // from `null` to `this.spec.value`).
       if (
-        !window.vueApp.page.disableDirtyPrompt &&
+        dirtyCheckEnabled &&
         !window.vueApp.isFormDirty &&
         val != oldVal &&
         val != this.spec.value

package/components/panels/horizontal.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="cssClasses" :style="cssStyles">
+  <div :class="cssClasses" :style="cssStyles" @click="$onClick()">
     <template v-for="(item, index) in spec.childViews">
       <ui-component :key="index" :spec="item" />
     </template>

package/components/panels/list.vue

@@ -26,6 +26,7 @@
           <div
             v-for="(row, rowIndex) in section.rows"
             :key="`${sectionIndex}_${rowIndex}`"
+            :ref="`row_${sectionIndex}_${rowIndex}`"
             :class="row.styleClasses"
           >
             <v-divider v-if="!spec.responsiveCols && rowIndex == 0" />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "glib-web",
-  "version": "0.9.0",
+  "version": "0.10.2",
   "description": "",
   "main": "index.js",
   "scripts": {

package/templates/comment.vue

@@ -5,7 +5,7 @@
         <v-card-title v-if="mode === 'system'" class="caption">{{
           spec.subtitle
         }}</v-card-title>
-        <v-avatar v-if="spec.imageUrl" class="avatar" size="30px">
+        <v-avatar v-if="spec.imageUrl" size="30px">
           <img :src="spec.imageUrl" alt="avatar" />
         </v-avatar>
         <v-card-title
@@ -164,11 +164,14 @@ export default {
     align-self: start;
   }
 
-  > .avatar {
+  > .v-avatar {
     grid-row: 1/2;
     grid-column: 1/2;
     padding: 0;
     justify-self: center;
+    > img {
+      border-radius: 50%;
+    }
   }
 
   > .subtitle {
@@ -217,11 +220,14 @@ export default {
     align-self: start;
   }
 
-  > .avatar {
+  > .v-avatar {
     grid-row: 1/2;
     grid-column: 3/4;
     padding: 0;
     justify-self: end;
+    > img {
+      border-radius: 50%;
+    }
   }
 
   > .subtitle {