glib-web 3.4.1 → 3.4.3

package/components/_dropdownMenu.vue

@@ -1,7 +1,7 @@
 <template>
   <v-menu left bottom>
     <template v-slot:activator="{ props }">
-      <v-btn :icon="iconStyling" :text="textStyling || null" v-bind="props" style="color: inherit;"
+      <v-btn :size="size" :variant="variant" :icon="iconStyling" :text="textStyling || null" v-bind="props" style="color: inherit;"
         @click.stop.prevent="">
         <span v-if="spec.icon" :class="[textStyling ? 'padder' : '']"><common-icon :spec="spec.icon || {}" /></span>
         {{ spec.text }}
@@ -17,6 +17,8 @@
 </template>
 
 <script>
+import { determineColor, determineDensity, determineVariant, determineSize } from '../utils/constant'
+
 export default {
   props: {
     spec: { type: Object, required: true }
@@ -27,6 +29,14 @@ export default {
       textStyling: false
     };
   },
+  computed: {
+    size() {
+      return determineSize(this.spec.styleClasses)
+    },
+    variant() {
+      return determineVariant(this.spec.styleClasses, 'elevated')
+    }
+  },
   methods: {
     $ready() {
       if (this.spec.text) {

package/components/fields/_select.vue

@@ -2,9 +2,9 @@
   <div :style="$styles()" :class="classes()">
     <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"
-      validate-on="blur" item-title='text' :variant="variant" :closable-chips="spec.multiple" :density="density"
-      persistent-placeholder @update:modelValue="onChange" />
+      :placeholder="spec.placeholder" :rules="rules" persistent-hint :append-icon="append.icon" 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>
@@ -42,7 +42,7 @@ export default {
       return [null];
     },
     density() {
-      return determineDensity(this.spec.styleClasses)
+      return determineDensity(this.spec.styleClasses);
     }
   },
   methods: {
@@ -74,7 +74,8 @@ export default {
 
       if (reinitValue) {
         this.fieldModel = this.spec.value || this.defaultValue;
-      } else if (this.defaultValue) {
+      }
+      else if (this.defaultValue) {
         // Don't execute if null because that will trigger an unnecessary update which will break
         // select fields with `unspecified` value. See `/glib/json_ui_garage?path=forms%2Fselects`.
         this.fieldModel = this.defaultValue;

package/components/fields/autocomplete.vue

@@ -1,7 +1,7 @@
 <!-- TODO: Remove (deprecated) -->
 <template>
   <div :style="genericStyles()">
-    <v-combobox v-model="fieldModel" :label="spec.label" :items="options" :chips="spec.multiple"
+    <v-combobox v-model="fieldModel" :label="spec.label" :items="options || []" :chips="spec.multiple"
       :deletable-chips="spec.multiple" :multiple="spec.multiple" :readonly="spec.readOnly" :disabled="spec.readOnly"
       :hint="spec.hint" :placeholder="spec.placeholder" :outlined="$classes().includes('outlined') || null"
       :append-icon="append.icon" validate-on="blur" :variant="variant" persistent-placeholder />

package/components/mixins/styles.js

@@ -27,7 +27,7 @@ export default {
       handler(spec, oldSpec) {
         if (spec) {
           let valueChanged = true;
-          if (oldSpec && oldSpec.value === spec.value) {
+          if (oldSpec && oldSpec.value === spec.value && oldSpec.name === spec.name) {
             valueChanged = false;
           }
           this._linkFieldModels(valueChanged);

package/components/panels/table.vue

@@ -51,7 +51,8 @@
                 :style="colStyles(row, cellIndex)">
                 <!-- Prevent double links -->
                 <glib-component v-if="$href(cell)" :spec="cell" />
-                <a v-else :href="$href(row)" @click="$onClick($event, row)">
+                <!-- without "|| null" the browser will reload strangely -->
+                <a v-else :href="$href(row) || null" @click="$onClick($event, row)">
                   <glib-component :spec="cell" />
                 </a>
               </td>

package/nav/drawer.vue

@@ -134,11 +134,25 @@ export default {
 
 <style lang="scss">
 // Move the padding to the badge to ensure that the item is middle-aligned.
-.v-list--dense .nav-item .v-list-item .v-list-item__content {
-  padding: 0;
+// .v-list--dense .nav-item .v-list-item .v-list-item__content {
+//   padding: 0;
 
-  .v-badge {
-    margin: 8px 0;
-  }
+//   // Prevent item badge from getting truncated.
+//   overflow: inherit;
+
+//   .v-badge {
+//     margin: 8px 0;
+//   }
+// }
+
+.v-list .nav-item .v-list-item .v-list-item__content {
+  // padding: 0;
+
+  // Prevent item badge from getting truncated.
+  overflow: inherit;
+
+  // .v-badge {
+  //   margin: 8px 0;
+  // }
 }
 </style>

package/nav/drawerButton.vue

@@ -1,14 +1,20 @@
 <template>
-  <v-list-item :href="$href(spec)" @click="performAction($event)">
-    <v-list-item-action v-if="spec.icon">
-      <common-icon :spec="spec.icon" />
-    </v-list-item-action>
+  <!-- <v-list-item class="popover-menu-item"> -->
+
+  <v-list-item class="drawer-button">
 
+  <!-- <v-list-item :href="$href(spec)" @click="performAction($event)" class="popover-menu-item"> -->
+  <!-- <v-list-item :href="$href(spec)" @click="performAction($event)"> -->
+    <!-- <v-list-item-action v-if="spec.icon">
+      <common-icon :spec="spec.icon" />
+    </v-list-item-action> -->
+<!--
     <v-list-item-title>
-      <!-- <common-badge :spec="spec"> -->
-      {{ spec.text }}
-      <!-- </common-badge> -->
-    </v-list-item-title>
+      <common-badge :spec="spec">
+        {{ spec.text }}
+      </common-badge>
+    </v-list-item-title> -->
+    <common-button :spec="buttonSpec(spec)" />
   </v-list-item>
 </template>
 
@@ -22,9 +28,37 @@ export default {
       // this.$el.dispatchEvent(new Event("drawers/clickButton", { bubbles: true }))
       this.$dispatchEvent("drawers/clickButton", {});
       this.$onClick(event);
+    },
+    buttonSpec(item) {
+      return Object.assign({}, item, {
+        view: "button-v1",
+        // width: "matchParent",
+        styleClasses: ["text"]
+      });
     }
   }
 };
 </script>
 
-<style scoped></style>
+<style lang="scss" scoped>
+</style>
+
+<style lang="scss">
+// .drawer-button {
+//   .v-list-item__content {
+//     text-align: left;
+
+//     .v-badge {
+//       width: 100%;
+
+//       .v-badge__wrapper {
+//         width: 100%;
+//       }
+//     }
+
+//     .views-button {
+//       width: 100%;
+//     }
+//   }
+// }
+</style>

package/package.json

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

package/templates/_menu.vue

@@ -16,6 +16,8 @@ export default {
     editMenu() {
       if (this.editButtons.length > 0) {
         return {
+          view: "button-v1",
+          styleClasses: ["text", "small"],
           icon: { material: { name: "more_vert" } },
           childButtons: this.editButtons
         };
@@ -24,14 +26,14 @@ export default {
       }
     }
   },
-  methods: {
-    buttonSpec(item) {
-      return Object.assign({}, item, {
-        view: "button-v1",
-        styleClasses: ["text"]
-      });
-    }
-  }
+  // methods: {
+  //   buttonSpec(item) {
+  //     return Object.assign({}, item, {
+  //       view: "button-v1",
+  //       styleClasses: ["text"]
+  //     });
+  //   }
+  // }
 };
 </script>