glib-web 3.0.8 → 3.0.10

package/actions/panels/scrollTo.js

@@ -8,14 +8,27 @@ export default class {
     console.debug("Scrolling to", selector);
     const element = pageBody.querySelector(selector);
 
-    this.scrollIfNeeded(element, spec, component);
+    let alignment = "center"
+    switch (spec.placement) {
+      case "top":
+        alignment = "start"
+        break;
+      case "bottom":
+        alignment = "end"
+        break;
+    }
+
+    // this.scrollIfNeeded(element, spec, component);
+    this.scrollIfNeeded(element, spec, component, alignment);
 
     element.classList.add("glib-scrollto");
     element.classList.add("glib-scrollto--highlighted");
   }
 
   // From https://gist.github.com/hsablonniere/2581101
-  scrollIfNeeded(element, spec, component, centerIfNeeded = true) {
+  // scrollIfNeeded(element, spec, component, centerIfNeeded = true) {
+
+  scrollIfNeeded(element, spec, component, alignment) {
     const vm = this;
     const observerOptions = {
       threshold: 1 // Trigger callback when 100% of the element becomes/unbecomes visible
@@ -23,11 +36,13 @@ export default class {
     new IntersectionObserver(function([entry]) {
       const ratio = entry.intersectionRatio;
       if (ratio < 1) {
-        const place = ratio <= 0 && centerIfNeeded ? "center" : "nearest";
+        // const place = ratio <= 0 && centerIfNeeded ? "center" : "nearest";
+        const place = ratio <= 0 ? alignment : "nearest";
         element.scrollIntoView({
           block: place,
           inline: place,
-          behavior: spec["animate"] ? "smooth" : "auto"
+          behavior: spec["animate"] ? "smooth" : "auto",
+
         });
       } else {
         vm.onScrollEnd(element, spec, component);

package/components/_internal_button.vue

@@ -6,6 +6,7 @@
     :rounded="$classes().includes('rounded') || null"
     :density="density"
     :size="size"
+    :color="color"
     :icon="$classes().includes('icon') ? $vuetify : null"
     @click.prevent="
       type == 'submit' ? $dispatchEvent('forms/submit') : $onClick()
@@ -18,7 +19,7 @@
 </template>
 
 <script>
-import { determineDensity, determineVariant, determineSize } from '../utils/constant'
+import { determineColor, determineDensity, determineVariant, determineSize } from '../utils/constant'
 
 export default {
   props: {
@@ -35,6 +36,9 @@ export default {
     };
   },
   computed: {
+    color() {
+      return determineColor(this.spec.styleClasses)
+    },
     density() {
       return determineDensity(this.spec.styleClasses)
     },

package/components/fields/_patternText.vue

@@ -5,7 +5,7 @@
       :readonly="spec.readOnly || false" :disabled="spec.readOnly" :min="$sanitizeValue(spec.min)"
       :max="$sanitizeValue(spec.max)" :pattern="pattern" :rules="$validation()" :style="$styles()"
       :density="$classes().includes('compact') ? 'compact' : 'default'"
-      clearable @input="onChange" :variant="variant" validate-on="blur"
+      clearable @change="onChange" :variant="variant" validate-on="blur"
       persistent-placeholder />
   </div>
 </template>

package/components/fields/_select.vue

@@ -3,8 +3,8 @@
     <v-autocomplete v-model="fieldModel" :label="spec.label" :items="options || []" :chips="spec.multiple"
       :multiple="spec.multiple" :disabled="spec.readOnly" :clearable="!spec.readOnly" :hint="spec.hint"
       :placeholder="spec.placeholder" :rules="rules" persistent-hint :class="$classes()" :append-icon="append.icon"
-      @change="onChange" validate-on="blur" item-title='text' :variant="variant" :closable-chips="spec.multiple"
-      :density="density" persistent-placeholder />
+      validate-on="blur" item-title='text' :variant="variant" :closable-chips="spec.multiple" :density="density"
+      persistent-placeholder @update:modelValue="onChange" />
 
     <input v-for="(item, index) in values" :key="index" type="hidden" :name="fieldName" :value="item" />
   </div>
@@ -20,7 +20,7 @@ export default {
     spec: { type: Object, required: true },
     defaultValue: { type: String, default: null }
   },
-  data() {
+  data () {
     return {
       options: null,
       append: {},
@@ -28,7 +28,7 @@ export default {
     };
   },
   computed: {
-    values() {
+    values () {
       // Depends on whether the field is single or multiple
       if (this.$type.isArray(this.fieldModel)) {
         return this.fieldModel.length > 0 ? this.fieldModel : this.emptyValue;
@@ -38,18 +38,18 @@ export default {
       // return this.emptyValue;
     },
     // To avoid empty param error
-    emptyValue() {
+    emptyValue () {
       return [null];
     },
-    density() {
+    density () {
       return determineDensity(this.spec.styleClasses)
     }
   },
   methods: {
-    $ready() {
+    $ready () {
       this.updateData(false);
     },
-    normalizedOptions() {
+    normalizedOptions () {
       return this.spec.options.map(i => {
         switch (i.type) {
           case "label":
@@ -61,13 +61,13 @@ export default {
         }
       });
     },
-    classes() {
+    classes () {
       return this.$classes().concat("g-text-field--hintless");
     },
-    onChange() {
+    onChange () {
       this.$executeOnChange();
     },
-    updateData(reinitValue) {
+    updateData (reinitValue) {
       this.options = this.normalizedOptions();
       this.append = this.spec.append || {};
       this.rules = this.$validation();
@@ -80,7 +80,7 @@ export default {
         this.fieldModel = this.defaultValue;
       }
     },
-    $registryEnabled() {
+    $registryEnabled () {
       return false;
     }
   }

package/components/mixins/list/autoload.js

@@ -19,17 +19,20 @@ export default {
   //   }
   // },
   methods: {
-    enableInfiniteScrollIfApplicable: function () {
+    async enableInfiniteScrollIfApplicable(spec) {
+      // Make sure `page_body` has been initialized.
+      await this.$nextTick()
+
       this.$removeViewportChangeListeners(this.topScrollHandler);
       this.$removeViewportChangeListeners(this.bottomScrollHandler);
 
-      const prevPage = this.spec.prevPage || {};
-      const nextPage = this.spec.nextPage || {};
+      const prevPage = spec.prevPage || {};
+      const nextPage = spec.nextPage || {};
 
       this.infiniteScroll =
         nextPage.autoload == "asNeeded" || prevPage.autoload == "asNeeded";
-      const onScrollToBottom = this.spec.onScrollToBottom;
-      const onScrollToTop = this.spec.onScrollToTop;
+      const onScrollToBottom = spec.onScrollToBottom;
+      const onScrollToTop = spec.onScrollToTop;
 
       // Reset state for reuse.
       this.nextPageUrl = null;

package/components/panels/horizontal.vue

@@ -1,50 +1,79 @@
 <template>
-  <!-- <component
-    :is="componentName"
-    :class="cssClasses"
-    :style="cssStyles"
-    :href="$href()"
-    @click="$onClick()"
-  >
-    <template
-      v-for="(item, index) in spec.childViews"
-      :key="index"
-    >
-      <glib-component :spec="item" />
-    </template>
-  </component> -->
   <component :is="componentName" :style="parentStyles" :class="parentClasses" :href="$href()" @click="$onClick()">
     <!-- <draggable :style="childStyles" :class="childClasses" ghost-class="ghost" -->
     <!-- :group="dragSupport ? dragSupport.groupId || 'common' : 'common'" :data-dragPanelId="spec.id"
     :disabled="!$type.isObject(spec.dragSupport)" @start="onDragStart" @end="onDragEnd"> -->
     <!-- Using `item.id` as key is important to make sure the item gets updated
            when dragging ends. -->
-    <div :style="childStyles" :class="childClasses">
+    <!-- <div :style="childStyles" :class="childClasses">
       <template v-for="(item, index) in spec.childViews" :key="item.id || index">
         <glib-component :spec="item" />
       </template>
-    </div>
+    </div> -->
     <!-- </draggable> -->
+
+
+      <!-- :disabled="!$type.isObject(dragSupport)" -->
+    <draggable
+      :style="childStyles"
+      :class="childClasses"
+      handle=".handle"
+      v-model="spec.childViews"
+      ghost-class="ghost"
+      :group="dragSupport ? dragSupport.groupId || 'common' : 'common'"
+      :data-dragPanelId="spec.id"
+      :disabled="!dragEnabled"
+      @start="onDragStart"
+      @end="onDragEnd"
+      item-key="id"
+    >
+      <!--
+        * Wrap `glib-component` with `div` to prevent errors when `glib-component` doesn't resolve to a
+          div (e.g. a button). See https://www.cnblogs.com/pphboy/p/17320226.html
+        * Use `data-dragItemId` instead of `id` because `id` is supposed to be unique and it might have
+          been taken by the wrapped component.
+      -->
+      <template #item="{element}">
+        <div :data-dragItemId="element.id">
+          <v-icon v-if="dragEnabled" class="handle">drag_handle</v-icon>
+          <!-- <v-icon v-if="dragEnabled" class="handle">drag_indicator</v-icon> -->
+          <!-- <v-icon class="handle">reorder</v-icon> -->
+          <glib-component :spec="element" />
+        </div>
+      </template>
+
+          <!-- <glib-component :spec="element" /> -->
+        <!-- <div :data-dragItemId="element.id">
+          <glib-component :spec="element" />
+        </div> -->
+    </draggable>
   </component>
 </template>
 
 <script>
-// import draggable from "vuedraggable";
+import { vueApp } from "../../store";
+import draggable from "vuedraggable";
 
 export default {
   components: {
-    // draggable
+    draggable
   },
   props: {
     spec: { type: Object, required: true },
   },
   data: function () {
     return {
-      dragSupport: null,
+      // dragSupport: null,
       // childViews: [],
     };
   },
   computed: {
+    dragEnabled() {
+      return this.$type.isObject(this.dragSupport)
+    },
+    dragSupport() {
+      return this.spec.dragSupport;
+    },
     parentClasses: function () {
       return this.$classes();
     },
@@ -103,10 +132,6 @@ export default {
     },
   },
   methods: {
-    $ready() {
-      this.dragSupport = this.spec.dragSupport;
-      // this.childViews = this.spec.childViews || [];
-    },
     $displayValue() {
       return "flex";
     },
@@ -124,7 +149,7 @@ export default {
       }
 
       // Ensure $ready() of its children gets called.
-      this.$recursiveUpdate();
+      // this.$recursiveUpdate();
 
       const itemId = event.clone.dataset.dragitemid; // The item that got dragged/dropped
       const oldPanelId = event.from.dataset.dragpanelid;
@@ -151,6 +176,10 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.handle {
+  cursor: move;
+}
+
 .layouts-horizontal {
   display: flex;
   /* overflow: hidden; */

package/components/panels/list.vue

@@ -14,19 +14,31 @@
           :group="dragSupport ? dragSupport.groupId || 'common' : 'common'" :data-dragListId="spec.id"
           :data-dragSectionIndex="sectionIndex" :disabled="!$type.isObject(dragSupport)" @start="onDragStart"
           @end="onDragEnd"> -->
-        <div v-for="(row, rowIndex) in section.rows" :key="`${sectionIndex}_${rowIndex}`"
-          :ref="`row_${sectionIndex}_${rowIndex}`" :data-dragRowId="row.id">
-          <!-- <v-divider v-if="!spec.responsiveCols && rowIndex == 0" /> -->
 
+        <draggable
+          v-model="section.rows"
+          ghost-class="ghost"
+          :group="dragSupport ? dragSupport.groupId || 'common' : 'common'"
+          :data-dragListId="spec.id"
+          :data-dragSectionIndex="sectionIndex"
+          :disabled="!$type.isObject(dragSupport)"
+          @start="onDragStart"
+          @end="onDragEnd"
+          item-key="id"
+        >
+          <template #item="{element}">
+            <component
+              :is="template(element)"
+              :spec="rowSpec(element)"
+              :responsive-cols="spec.responsiveCols"
+              :data-dragRowId="element.id" />
+          </template>
+        </draggable>
+
+        <!-- <div v-for="(row, rowIndex) in section.rows" :key="`${sectionIndex}_${rowIndex}`"
+          :ref="`row_${sectionIndex}_${rowIndex}`" :data-dragRowId="row.id">
           <component :is="template(row)" :spec="rowSpec(row)" :responsive-cols="spec.responsiveCols" :index="rowIndex" />
-          <!-- <v-divider
-              v-if="
-                !spec.responsiveCols &&
-                  (rowIndex != section.rows.length - 1 ||
-                    sectionIndex != sections.length - 1)
-              "
-            /> -->
-        </div>
+        </div> -->
         <!-- </draggable> -->
 
         <panels-responsive v-if="section.footer" :spec="section.footer" />
@@ -42,7 +54,8 @@
 </template>
 
 <script>
-// import draggable from "vuedraggable";
+import { vueApp } from "../../store";
+import draggable from "vuedraggable";
 import autoloadMixin from "../mixins/list/autoload.js";
 import ThumbnailTemplate from "../../templates/thumbnail.vue";
 import FeaturedTemplate from "../../templates/featured.vue";
@@ -51,7 +64,7 @@ import actionCableMixin from "../mixins/ws/actionCable.js";
 
 export default {
   components: {
-    // draggable,
+    draggable,
     "template-thumbnail": ThumbnailTemplate,
     "template-featured": FeaturedTemplate,
     "template-commentOutgoing": CommentTemplate,
@@ -63,28 +76,45 @@ export default {
   },
   data: function () {
     return {
-      // sections: [],
+      sections: [],
       dragSupport: null
     };
   },
-  computed: {
-    sections() {
-      return this.spec.sections || [];
+  // computed: {
+  //   sections() {
+  //     return this.spec.sections || [];
+  //   }
+  // },
+  watch: {
+    spec: {
+      handler(spec) {
+        this.sections = spec.sections || [];
+        this.dragSupport = spec.dragSupport;
+        this.autoloadAll(spec.nextPage);
+        this.enableInfiniteScrollIfApplicable(spec);
+        this.$wsSubscribeEvents(spec.phoenixSocket);
+        this.$wsInitActionCable(spec.actionCable);
+
+        for (const section of this.sections) {
+          section.rows = section.rows || [];
+        }
+      },
+      immediate: true
     }
   },
   methods: {
-    $ready() {
-      // this.sections = this.spec.sections || [];
-      this.dragSupport = this.spec.dragSupport;
-      this.autoloadAll(this.spec.nextPage);
-      this.enableInfiniteScrollIfApplicable();
-      this.$wsSubscribeEvents(this.spec.phoenixSocket);
-      this.$wsInitActionCable(this.spec.actionCable);
+    // $ready() {
+    //   // this.sections = this.spec.sections || [];
+    //   this.dragSupport = this.spec.dragSupport;
+    //   this.autoloadAll(this.spec.nextPage);
+    //   this.enableInfiniteScrollIfApplicable();
+    //   this.$wsSubscribeEvents(this.spec.phoenixSocket);
+    //   this.$wsInitActionCable(this.spec.actionCable);
 
-      for (const section of this.sections) {
-        section.rows = section.rows || [];
-      }
-    },
+    //   for (const section of this.sections) {
+    //     section.rows = section.rows || [];
+    //   }
+    // },
     rowSpec(row) {
       if (this.spec.fieldPrefix) {
         const prefix = `${this.spec.fieldPrefix}[${row.recordId}]`;
@@ -191,7 +221,7 @@ export default {
       }
 
       // Ensure $ready() of its children gets called.
-      this.$recursiveUpdate();
+      // this.$recursiveUpdate();
 
       const targetSectionIndex = this.getSectionIndex(event.to);
 

package/components/panels/timeline.vue

@@ -1,19 +1,19 @@
 <template>
   <!-- Paddings cannot be applied to v-timeline directly -->
   <div :style="$styles()" :class="$classes()">
-    <v-timeline v-if="events" :dense="true" align-top>
-      <v-timeline-item v-for="(item, index) in events" :key="index" :color="item.backgroundColor || 'white'"
-        :small="itemClasses(item).includes('small') || null" :large="itemClasses(item).includes('large')"
-        :hide-dot="item.hide_dot" fill-dot>
+    <v-timeline v-if="events" :density="density" :truncate-line="spec.truncateLine" align-top>
+      <!-- <v-timeline-item v-for="(item, index) in events" :key="index" :color="item.backgroundColor || 'white'" -->
+      <v-timeline-item v-for="(item, index) in events" :key="index"
+        :density="density" :size="itemSize(item)" :dot-color="item.backgroundColor || 'transparent'"
+        :hide-dot="item.hideDot" :fill-dot="item.fillDot">
         <template v-slot:icon>
-          <div :class="itemClasses(item).includes('outlined') ? 'outlined-dots' : ''
-            ">
+          <div :class="itemClasses(item).includes('outlined') ? 'outlined-dots' : ''">
             <div v-if="item.text" class="number-circle" :style="{ color: item.color }">
               {{ item.text }}
             </div>
             <div v-else class="icon">
               <common-icon :spec="{
-                material: { name: item.icon, size: iconSize(item) },
+                material: { name: item.icon },
                 color: item.color
               }" />
             </div>
@@ -26,10 +26,17 @@
 </template>
 
 <script>
+import { determineDensity, determineSize } from "../../utils/constant";
+
 export default {
   props: {
     spec: { type: Object, required: true }
   },
+  computed: {
+    density() {
+      return determineDensity(this.spec.styleClasses)
+    },
+  },
   data() {
     return {
       events: null,
@@ -41,6 +48,9 @@ export default {
       this.events = this.spec.events;
       this.childViews = this.spec.childViews;
     },
+    itemSize(itemSpec) {
+      return determineSize(itemSpec.styleClasses)
+    },
     iconSize(item) {
       return this.itemClasses(item).includes("small") ? 20 : 24;
     },

package/components/popover.vue

@@ -1,7 +1,21 @@
 <template>
-    <common-responsive :style="floatingStyles" v-if="toggle" :spec="spec" />
+  <!-- Placement options:
+    | 'top'
+    | 'top-start'
+    | 'top-end'
+    | 'right'
+    | 'right-start'
+    | 'right-end'
+    | 'bottom'
+    | 'bottom-start'
+    | 'bottom-end'
+    | 'left'
+    | 'left-start'
+    | 'left-end'
+  -->
+  <common-responsive :style="floatingStyles" v-if="toggle" :spec="spec" />
 </template>
-  
+
 <script>
 import bus from "../utils/eventBus";
 
@@ -34,6 +48,5 @@ export default {
     }
 };
 </script>
-  
+
 <style scoped></style>
-  

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "glib-web",
-  "version": "3.0.8",
+  "version": "3.0.10",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -19,6 +19,7 @@
     "json-logic-js": "^2.0.0",
     "lodash.merge": "^4.6.2",
     "marked": "^4.0.0",
+    "moment": "^2.29.4",
     "phoenix": "^1.5.3",
     "push.js": "^1.0.12",
     "quill-image-drop-and-paste": "^1.2.14",
@@ -30,6 +31,7 @@
     "vue-social-sharing": "^4.0.0-alpha4",
     "vue2-gmap-custom-marker": "^6.1.1",
     "vue2-google-maps": "^0.10.6",
+    "vuedraggable": "^4.1.0",
     "vuetify": "^3.3.2"
   },
   "devDependencies": {