glib-web 0.11.11 → 0.11.14

package/components/_chip.vue

@@ -0,0 +1,56 @@
+<template>
+  <v-tooltip
+    :disabled="!spec.tooltip"
+    :top="tooltipPositionMatches('top')"
+    :right="tooltipPositionMatches('right')"
+    :bottom="tooltipPositionMatches('bottom')"
+    :left="tooltipPositionMatches('left')"
+  >
+    <template v-slot:activator="{ on }">
+      <span v-on="on">
+        <v-chip
+          v-if="spec.onClick"
+          :style="genericStyles()"
+          :class="$classes()"
+          :href="$href()"
+          @click="$onClick()"
+        >
+          {{ spec.text }}
+          <common-badge :spec="spec" />
+        </v-chip>
+        <v-chip v-else :style="genericStyles()" :class="$classes()">
+          {{ spec.text }}
+          <common-badge :spec="spec" />
+        </v-chip>
+      </span>
+    </template>
+    <span>{{ tooltip.text }}</span>
+  </v-tooltip>
+</template>
+
+<script>
+import TooltipMixins from "./mixins/tooltip";
+export default {
+  mixins: [TooltipMixins],
+  props: {
+    spec: { type: Object, required: true }
+  },
+  data: function() {
+    return {
+      tooltip: {}
+    };
+  },
+  methods: {
+    $ready() {
+      this.tooltip = this.spec.tooltip || {};
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+// Prevent hover effect if the chip is not clickable.
+span.theme--light.v-chip:hover:before {
+  opacity: 0;
+}
+</style>

package/components/chip.vue

@@ -1,31 +1,5 @@
 <template>
-  <v-tooltip
-    :disabled="!spec.tooltip"
-    :top="tooltipPositionMatches('top')"
-    :right="tooltipPositionMatches('right')"
-    :bottom="tooltipPositionMatches('bottom')"
-    :left="tooltipPositionMatches('left')"
-  >
-    <template v-slot:activator="{ on }">
-      <div v-on="on">
-        <v-chip
-          v-if="spec.onClick"
-          :style="genericStyles()"
-          :class="$classes()"
-          :href="$href()"
-          @click="$onClick()"
-        >
-          {{ spec.text }}
-          <common-badge :spec="spec" />
-        </v-chip>
-        <v-chip v-else :style="genericStyles()" :class="$classes()">
-          {{ spec.text }}
-          <common-badge :spec="spec" />
-        </v-chip>
-      </div>
-    </template>
-    <span>{{ tooltip.text }}</span>
-  </v-tooltip>
+  <common-chip :spec="spec" />
 </template>
 
 <script>
@@ -48,4 +22,9 @@ export default {
 };
 </script>
 
-<style scoped></style>
+<style lang="scss" scoped>
+// Prevent hover effect if the chip is not clickable.
+span.theme--light.v-chip:hover:before {
+  opacity: 0;
+}
+</style>

package/components/fields/radio.vue

@@ -1,26 +1,31 @@
 <template>
-  <v-tooltip
-    :disabled="tooltip.disabled"
-    :top="tooltipPositionMatches('top')"
-    :right="tooltipPositionMatches('right')"
-    :bottom="tooltipPositionMatches('bottom')"
-    :left="tooltipPositionMatches('left')"
-  >
-    <template v-slot:activator="{ on }">
-      <v-radio
-        :label="spec.label"
-        :value="spec.value.presence() || vuetifyEmptyString"
-        :class="$classes()"
-        :disabled="spec.readOnly"
-        :on-icon="spec.onIcon"
-        :off-icon="spec.offIcon"
-        v-on="on"
-        @click="$onClick()"
-      >
-      </v-radio>
-    </template>
-    <span>{{ tooltip.text }}</span>
-  </v-tooltip>
+  <div :class="$classes()">
+    <v-tooltip
+      :disabled="tooltip.disabled"
+      :top="tooltipPositionMatches('top')"
+      :right="tooltipPositionMatches('right')"
+      :bottom="tooltipPositionMatches('bottom')"
+      :left="tooltipPositionMatches('left')"
+    >
+      <template v-slot:activator="{ on }">
+        <v-radio
+          :label="spec.label"
+          :value="spec.value.presence() || vuetifyEmptyString"
+          :disabled="spec.readOnly"
+          :on-icon="spec.onIcon"
+          :off-icon="spec.offIcon"
+          v-on="on"
+          @click="$onClick()"
+        />
+        <div v-if="spec.childViews" class="radio-childviews">
+          <div v-for="(item, i) in spec.childViews" :key="i">
+            <glib-component :spec="item" />
+          </div>
+        </div>
+      </template>
+      <span>{{ tooltip.text }}</span>
+    </v-tooltip>
+  </div>
 </template>
 
 <script>

package/components/fields/radioGroup.vue

@@ -8,7 +8,9 @@
     @change="onChange"
   >
     <div v-for="(item, index) in spec.childViews" :key="index">
-      <ui-component :spec="item" />
+      <div @click="updateValue(item)">
+        <glib-component :spec="item" />
+      </div>
     </div>
 
     <input
@@ -32,6 +34,11 @@ export default {
           GLib.action.execute(onChange, this);
         });
       });
+    },
+    updateValue(variable) {
+      if (variable.value) {
+        this.fieldModel = variable.value;
+      }
     }
   }
 };

package/components/fields/textarea.vue

@@ -13,6 +13,7 @@
       :rules="$validation()"
       counter
       :outlined="$classes().includes('outlined')"
+      :no-resize="$classes().includes('no-resize')"
       validate-on-blur
       @keyup="$onTyping"
     ></v-textarea>

package/index.js

@@ -51,6 +51,7 @@ import Component from "./components/component";
 import CommonIcon from "./components/_icon";
 import CommonBadge from "./components/_badge";
 import CommonButton from "./components/_button";
+import CommonChip from "./components/_chip";
 import CommonMessage from "./components/_message";
 import CommonDropdownMenu from "./components/_dropdownMenu";
 import CommonResponsive from "./components/_responsive";
@@ -60,6 +61,7 @@ Vue.component("panels-responsive", ResponsivePanel);
 Vue.component("common-button", CommonButton);
 Vue.component("common-icon", CommonIcon);
 Vue.component("common-badge", CommonBadge);
+Vue.component("common-chip", CommonChip);
 Vue.component("common-message", CommonMessage);
 Vue.component("common-dropdownMenu", CommonDropdownMenu);
 Vue.component("common-responsive", CommonResponsive);

package/package.json

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

package/templates/featured.vue

@@ -13,20 +13,25 @@
         }}</v-list-item-subtitle>
       </v-list-item-content>
 
-      <template-menu :edit-buttons="spec.editButtons || []" />
+      <templates-menu :edit-buttons="editButtons" />
     </v-list-item>
   </v-card>
 </template>
 
 <script>
-// import Menu from "./menu";
-
 export default {
-  // components: {
-  //   "template-menu": Menu
-  // },
   props: {
     spec: { type: Object, required: true }
+  },
+  data() {
+    return {
+      editButtons: []
+    };
+  },
+  methods: {
+    $ready() {
+      this.editButtons = this.spec.editButtons || [];
+    }
   }
 };
 </script>

package/templates/thumbnail.vue

@@ -1,5 +1,5 @@
 <template>
-  <div style="display:flex;">
+  <div style="display:flex;" class="thumbnail">
     <div
       v-if="spec.leftOuterButtons"
       class="left-universal"
@@ -72,13 +72,9 @@
           spec.subsubtitle
         }}</v-list-item-subtitle>
 
-        <div>
+        <div class="chips">
           <template v-for="(item, index) in chips">
-            <v-chip :key="index" class="ma-1" :color="item.color" small>
-              <div>
-                {{ item.text }}
-              </div>
-            </v-chip>
+            <common-chip :key="index" :spec="item" />
           </template>
         </div>
 
@@ -131,7 +127,7 @@ export default {
             }
           }
         });
-        return Object.assign({}, item, { color: color });
+        return Object.assign({}, item, { color: color, view: "chip" });
       });
     }
   },
@@ -155,6 +151,12 @@ export default {
 };
 </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 {