glib-web 3.0.5 → 3.0.6

package/templates/thumbnail.vue

@@ -1,15 +1,254 @@
 <template>
-  <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>
+  <component :is="componentName" :href="$href()" 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" :key="index">
+          <common-button
+            :spec="buttonSpec(item)"
+            :disabled="$isBusy"
+          />
+        </template>
+      </div> -->
+
+      <v-list-item
+        v-longclick="$onLongPress"
+        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"
+        />
+
+        <template v-slot:prepend>
+          <div style="display: flex">
+            <div v-if="spec.leftButtons">
+              <template v-for="(item, index) in spec.leftButtons" :key="index">
+                <glib-button
+                  :spec="buttonSpec(item)"
+                  :disabled="$isBusy"
+                />
+              </template>
+            </div>
+
+            <common-icon v-if="spec.icon" :spec="spec.icon" />
+          </div>
+        </template>
+
+        <!-- <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> -->
+
+        <div>
+          <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 v-if="hasChips" class="chips">
+            <template v-for="(item, index) in chips" :key="index">
+              <common-chip :spec="item" />
+            </template>
+          </div>
+
+          <panels-responsive v-if="spec.body" :spec="spec.body" />
+        </div>
+
+        <template v-slot:append>
+          <template v-for="(item, index) in spec.rightButtons" :key="index">
+            <glib-button
+              :spec="buttonSpec(item)"
+              :disabled="$isBusy"
+            />
+          </template>
+        </template>
+
+        <!-- Deprecated -->
+        <!-- <templates-menu :edit-buttons="editButtons" /> -->
+      </v-list-item>
+      <panels-responsive :spec="spec.right" />
+    </div>
+    <panels-responsive :spec="spec.footer" />
+  </component>
 </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 {
+      // editButtons: []
+    };
+  },
+  computed: {
+    componentName() {
+      // Use `a` to enable "open in new tab".
+      return this.clickCondition ? "a" : "div";
+      // return "div"
+    },
+    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;
+    },
+    hasChips() {
+      return this.spec.chips && this.spec.chips.length > 0;
+    },
+    // 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.editButtons = this.spec.editButtons || [];
+    },
+    buttonSpec(item) {
+      // Classes should be coming from the backend
+      // const styleClasses = ["text", "x-small"]
+      // if (!item.text) {
+      //   styleClasses.push("icon")
+      // }
+
+      return Object.assign({}, item, {
+        view: "button"
+      });
+    },
+    columnStyles() {
+      if (this.responsiveCols) {
+        return `width: ${100 / this.responsiveCols}%; float: left;`;
+      }
     }
   }
+};
+</script>
+
+<style lang="scss">
+.chips > * {
+  margin-right: 10px;
+}
+
+.v-list-item__content {
+  width: 100%;
+}
+
+.thumbnail {
+  // Override this when using the `right` property.
+  .item-content {
+    width: 100%;
+  }
+}
+</style>
+
+<style lang="scss" scoped>
+a.thumbnail {
+  color: inherit;
+  text-decoration: inherit;
+  display: block;
+}
+
+.item-content {
+  display: flex;
+
+  &.v-list-item--density-default:not(.v-list-item--nav).v-list-item--one-line {
+    padding-inline-start: 0;
+    padding-inline-end: 0;
+  }
+}
+
+@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;
+  // }
 }
-</script>
+</style>

package/utils/constant.js

@@ -1,4 +1,47 @@
 const colors = ['primary', 'secondary', 'success', 'warning', 'info', 'error']
 const variants = ['text', 'flat', 'elevated', 'outlined', 'plain', 'tonal']
+const densities = ['comfortable', 'compact']
+const sizes = ['x-small', 'small', 'large', 'x-large']
+
+function determineColor(styleClasses, defaultColor) {
+  const classes = styleClasses || []
+  for (const value of colors) {
+    if (classes.includes(value)) {
+      return value;
+    }
+  }
+  return defaultColor
+}
+
+function determineVariant(styleClasses, defaultVariant) {
+  const classes = styleClasses || []
+  for (const value of variants) {
+    if (classes.includes(value)) {
+      return value;
+    }
+  }
+  return defaultVariant
+}
+
+function determineDensity(styleClasses, defaultDensity) {
+  const classes = styleClasses || []
+  for (const value of densities) {
+    if (classes.includes(value)) {
+      return value;
+    }
+  }
+  return defaultDensity
+}
+
+function determineSize(styleClasses, defaultSize) {
+  const classes = styleClasses || []
+  for (const value of sizes) {
+    if (classes.includes(value)) {
+      return value;
+    }
+  }
+  return defaultSize
+}
+
+export { colors, variants, determineColor, determineVariant, determineDensity, determineSize }
 
-export { colors, variants }

package/utils/http.js

@@ -1,6 +1,5 @@
 import Type from "./type";
 import Action from "../action";
-import eventBus from "./eventBus";
 import { nextTick } from 'vue'
 import { vueApp } from "../store";
 

package/utils/launch.js

@@ -39,17 +39,27 @@ class LaunchPopover {
 
     if (component) {
       const placeholder = document.createElement('div')
-      component.$el.parentElement.appendChild(placeholder)
+
+      // component.$el.parentElement.appendChild(placeholder)
+
+      // Attach the popover to the document body to prevent clipping caused by the parent's `overflow` property.
+      // See https://stackoverflow.com/questions/51393427/z-index-to-ignore-max-height-and-always-come-on-top
+      document.body.appendChild(placeholder);
+
       instance.mount(placeholder);
 
       const reference = component.$el instanceof HTMLElement ? component.$el : component.$el.nextElementSibling
 
       const floating = placeholder
-      const placement = properties.location || 'right'
+      const placement = properties.placement || 'right'
       const offsetSize = properties.offset || 8
+
+      // These properties need to be set to get an accurate calculation. See https://floating-ui.com/docs/computeposition
+      Object.assign(placeholder.style, { position: 'absolute', display: 'block', top: 0, left: 0 });
+
       computePosition(reference, floating, { placement: placement, middleware: [shift(), offset(offsetSize)] })
         .then(({ x, y }) => {
-          Object.assign(placeholder.style, { top: `${y}px`, left: `${x}px`, position: 'absolute', zIndex: 1000, display: 'block' })
+          Object.assign(placeholder.style, { top: `${y}px`, left: `${x}px`, zIndex: 1200 });
         })
     } else {
       console.error("A popover has to be displayed in a component");

package/templates/thumbnail-old.vue

@@ -1,188 +0,0 @@
-<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>