glib-web 0.10.8 → 0.11.1

package/components/_responsive.vue

@@ -1,5 +1,6 @@
 <template>
-  <div
+  <component
+    :is="componentName"
     :id="spec.id"
     :class="cssClasses"
     :style="$styles()"
@@ -23,7 +24,7 @@
         </div>
       </template>
     </v-row>
-  </div>
+  </component>
 </template>
 
 <script>
@@ -49,6 +50,9 @@ export default {
       // This panel will be nameless when used in predefined layout (e.g. page.body, list.header, etc.)
       this.spec.view = this.spec.view || "panels/responsive";
       return this.$classes();
+    },
+    componentName() {
+      return this.$href() ? "a" : "div";
     }
   },
   methods: {
@@ -92,4 +96,8 @@ export default {
 .full-height {
   height: 100%;
 }
+.v-application a {
+  color: inherit;
+  text-decoration: inherit;
+}
 </style>

package/components/button.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <v-tooltip
-      v-if="spec.tooltip"
+      :disabled="tooltip.disabled"
       :top="tooltipPositionMatches('top')"
       :right="tooltipPositionMatches('right')"
       :bottom="tooltipPositionMatches('bottom')"
@@ -12,11 +12,8 @@
           <common-button :spec="spec" :disabled="$isBusy" />
         </div>
       </template>
-      <span> {{ spec.tooltip.text }} </span>
+      <span> {{ tooltip.text }} </span>
     </v-tooltip>
-    <div v-else>
-      <common-button :spec="spec" :disabled="$isBusy" />
-    </div>
   </div>
 </template>
 
@@ -29,9 +26,15 @@ export default {
   props: {
     spec: { type: Object, required: true }
   },
+  data() {
+    return {
+      tooltip: {}
+    };
+  },
   methods: {
     $ready() {
       this.registerTour();
+      this.tooltip = this.spec.tooltip || { disabled: true };
     }
   }
 };

package/components/component.vue

@@ -105,6 +105,7 @@ import ResponsivePanel from "./panels/responsive";
 import UlPanel from "./panels/ul";
 import WebPanel from "./panels/web";
 import GridPanel from "./panels/grid";
+import TimelinePanel from "./panels/timeline";
 
 import MultimediaVideo from "./multimedia/video";
 
@@ -191,6 +192,7 @@ export default {
     "panels-ul": UlPanel,
     "panels-web": WebPanel,
     "panels-grid": GridPanel,
+    "panels-timeline": TimelinePanel,
 
     "multimedia-video": MultimediaVideo,
 

package/components/fields/radio.vue

@@ -1,16 +1,45 @@
 <template>
-  <v-radio
-    :label="spec.label"
-    :value="spec.value.presence() || vuetifyEmptyString"
-    :class="$classes()"
-    :disabled="spec.readOnly"
-  ></v-radio>
+  <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>
 </template>
 
 <script>
+import TooltipMixins from "../mixins/tooltip";
+
 export default {
+  mixins: [TooltipMixins],
   props: {
     spec: { type: Object, required: true }
+  },
+  data() {
+    return {
+      tooltip: {}
+    };
+  },
+  methods: {
+    $ready() {
+      this.tooltip = this.spec.tooltip || { disabled: true };
+    }
   }
 };
 </script>

package/components/fields/radioGroup.vue

@@ -4,6 +4,7 @@
     :name="fieldName"
     :disabled="spec.readOnly"
     :rules="$validation()"
+    :row="spec.row"
   >
     <div v-for="(item, index) in spec.childViews" :key="index">
       <ui-component :spec="item" />

package/components/mixins/events.js

@@ -44,7 +44,7 @@ export default {
     }
   },
   methods: {
-    $href: function(spec) {
+    $href(spec) {
       const properties = spec || this.spec;
       const onClick = properties.onClick;
       if (TypeUtils.isObject(onClick)) {

package/components/panels/horizontal.vue

@@ -1,9 +1,15 @@
 <template>
-  <div :class="cssClasses" :style="cssStyles" @click="$onClick()">
+  <component
+    :is="componentName"
+    :class="cssClasses"
+    :style="cssStyles"
+    :href="$href()"
+    @click="$onClick()"
+  >
     <template v-for="(item, index) in spec.childViews">
       <ui-component :key="index" :spec="item" />
     </template>
-  </div>
+  </component>
 </template>
 
 <script>
@@ -46,6 +52,9 @@ export default {
           styles["align-items"] = "flex-start";
       }
       return styles;
+    },
+    componentName() {
+      return this.$href() ? "a" : "div";
     }
   },
   methods: {

package/components/panels/timeline.vue

@@ -0,0 +1,114 @@
+<template>
+  <v-container :class="$classes()">
+    <v-timeline v-if="items" dense align-top>
+      <v-timeline-item
+        v-for="(item, item_key) in items"
+        :key="item_key"
+        color="white"
+        fill-dot
+        :small="$classes().includes('small')"
+        :large="$classes().includes('large')"
+        :class="timelineItemClasses(item)"
+        :hide-dot="item.hide_dot"
+      >
+        <template v-slot:icon>
+          <div
+            :class="$classes().includes('outlined') ? 'outlined-dots' : ''"
+            :style="`border-color: ${dotColor(item)};`"
+          >
+            <div v-if="item.left_label" class="number-circle">
+              {{ item.left_label }}
+            </div>
+            <!-- TODO: Use common-icon -->
+            <v-icon v-else size="24" :color="dotColor(item)">
+              {{ dotIcon(item) }}
+            </v-icon>
+          </div>
+        </template>
+
+        <div :class="item.subtitle ? 'mt-5' : 'mt-2'" class="content">
+          <div
+            :class="item.active ? 'font-weight-bold' : 'font-weight-regular'"
+          >
+            {{ item.label }}
+          </div>
+          <div class="font-weight-regular">
+            {{ item.subtitle }}
+          </div>
+          <panels-responsive v-if="item.active" :spec="spec" />
+        </div>
+      </v-timeline-item>
+    </v-timeline>
+  </v-container>
+</template>
+
+<script>
+export default {
+  props: {
+    spec: { type: Object, required: true }
+  },
+  data() {
+    return {
+      items: this.spec.items,
+      uncompletedIcon: this.spec.uncompletedIcon || "check_circle",
+      completedIcon: this.spec.completedIcon || "radio_button_unchecked",
+      completedColor: this.spec.completedColor || "blue",
+      uncompletedColor: this.spec.uncompletedColor || "grey"
+    };
+  },
+  methods: {
+    timelineItemClasses(item) {
+      let classes = !item.completed && !item.active ? "uncompleted" : "";
+
+      if (!this.$classes().includes("small")) {
+        classes += " my-6";
+      }
+
+      return classes;
+    },
+    dotColor(item) {
+      return !item.completed && !item.active
+        ? this.uncompletedColor
+        : this.completedColor;
+    },
+    dotIcon(item) {
+      return item.active || item.completed
+        ? item.uncompletedIcon || this.uncompletedIcon
+        : item.completedIcon || this.completedIcon
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.v-timeline {
+  padding-top: 0px;
+}
+
+.v-timeline-item {
+  padding-bottom: 0px !important;
+}
+.container {
+  padding-top: 0px;
+}
+.small {
+  > .number-circle {
+    font-size: 14px;
+  }
+}
+.outlined-dots {
+  border-radius: 50%;
+  width: 100%;
+  height: 100%;
+  border: 1px solid;
+  margin: auto;
+  text-align: center;
+  font-weight: bold;
+  font-size: 22px;
+}
+.outlined .v-timeline-item {
+  ::v-deep .v-timeline-item__dot {
+    box-shadow: none;
+  }
+}
+</style>

package/components/panels/vertical.vue

@@ -1,10 +1,16 @@
 <template>
-  <div :class="cssClasses" :style="cssStyles" @click="$onClick()">
+  <component
+    :is="componentName"
+    :class="cssClasses"
+    :style="cssStyles"
+    :href="$href()"
+    @click="$onClick()"
+  >
     <template v-for="(item, index) in spec.childViews">
       <!-- Use view name for key to avoid component reuse issue -->
       <ui-component :key="`${index}_${item.view}`" :spec="item" />
     </template>
-  </div>
+  </component>
 </template>
 
 <script>
@@ -42,6 +48,9 @@ export default {
           styles["align-items"] = "flex-start";
       }
       return styles;
+    },
+    componentName() {
+      return this.$href() ? "a" : "div";
     }
   }
 };

package/package.json

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