glib-web 2.6.7 → 3.0.0

package/components/_chip.vue

@@ -1,34 +1,27 @@
 <template>
-  <common-tooltip :spec="spec">
-    <template v-slot:activator="{ on }">
-      <common-badge :spec="spec">
-        <v-chip
-          v-if="spec.onClick"
-          :style="genericStyles()"
-          :class="$classes()"
-          :href="$href()"
-          :small="$classes().includes('small')"
-          @click="$onClick()"
-          v-on="on"
-        >
-          {{ spec.text }}
-        </v-chip>
-        <v-chip
-          v-else
-          :style="genericStyles()"
-          :class="$classes()"
-          :small="$classes().includes('small')"
-          v-on="on"
-        >
-          {{ spec.text }}
-        </v-chip>
-      </common-badge>
-    </template>
-  </common-tooltip>
+  <common-badge :spec="spec">
+    <div>
+      <v-chip v-if="spec.onClick" :style="genericStyles()" :color="color" :class="$classes()" :href="$href()"
+        @click="$onClick()" :variant="variant">
+        {{ spec.text }}
+      </v-chip>
+      <v-chip v-else :style="genericStyles()" :color="color" :class="$classes()" :variant="variant">
+        {{ spec.text }}
+      </v-chip>
+    </div>
+  </common-badge>
 </template>
 
 <script>
+import { colors, variants } from '../utils/constant'
+
 export default {
+  data: function () {
+    return {
+      color: '',
+      variant: 'tonal'
+    }
+  },
   props: {
     spec: { type: Object, required: true }
   },
@@ -38,9 +31,14 @@ export default {
   //   };
   // },
   methods: {
-    // $ready() {
-    //   this.tooltip = this.spec.tooltip || {};
-    // },
+    $ready() {
+      colors.forEach((value) => {
+        if (this.$classes().includes(value)) this.color = value;
+      })
+      variants.forEach((value) => {
+        if (this.$classes().includes(value)) this.variant = value;
+      })
+    },
     $registryEnabled() {
       return false;
     }

package/components/_dropdownMenu.vue

@@ -1,30 +1,16 @@
 <template>
   <v-menu left bottom>
-    <template v-slot:activator="{ on, attrs }">
-      <v-btn
-        :icon="iconStyling"
-        :text="textStyling"
-        v-bind="attrs"
-        style="color: inherit;"
-        v-on="on"
-        @click.stop.prevent=""
-      >
-        <span v-if="spec.icon" :class="[textStyling ? 'padder' : '']"
-          ><common-icon :spec="spec.icon || {}"
-        /></span>
+    <template v-slot:activator="{ props }">
+      <v-btn :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 }}
       </v-btn>
     </template>
 
     <v-list>
-      <v-list-item
-        v-for="(childItem, childIndex) in spec.childButtons"
-        :key="childIndex"
-      >
-        <common-button
-          :spec="buttonSpec(childItem)"
-          :disabled="childItem.disabled || $isBusy"
-        />
+      <v-list-item v-for="(childItem, childIndex) in spec.childButtons" :key="childIndex">
+        <common-button :spec="buttonSpec(childItem)" :disabled="childItem.disabled || $isBusy" />
       </v-list-item>
     </v-list>
   </v-menu>
@@ -35,7 +21,7 @@ export default {
   props: {
     spec: { type: Object, required: true }
   },
-  data: function() {
+  data: function () {
     return {
       iconStyling: false,
       textStyling: false
@@ -63,13 +49,14 @@ export default {
 .v-list-item {
   padding: 0 8px 0 8px;
 
-  > a,
-  > button {
+  >a,
+  >button {
     width: 100%;
     min-height: 48px;
     justify-content: flex-start;
   }
 }
+
 .padder {
   margin-right: 8px;
 }

package/components/_icon.vue

@@ -1,9 +1,9 @@
 <template>
-  <common-badge :spec="spec">
-    <v-icon :style="genericStyles()" :size="size" :color="color">{{
-      value
-    }}</v-icon>
-  </common-badge>
+  <!-- <common-badge :spec="spec"> -->
+  <v-icon :style="genericStyles()" :size="size" :color="color">{{
+    value
+  }}</v-icon>
+  <!-- </common-badge> -->
 </template>
 
 <script>

package/components/_responsive.vue

@@ -1,25 +1,9 @@
 <template>
-  <component
-    :is="componentName"
-    :class="cssClasses"
-    :style="$styles()"
-    :href="$href()"
-    @click="$onClick()"
-    v-on="eventHandlers"
-  >
+  <component :is="componentName" :class="cssClasses" :style="$styles()" :href="$href()" @click="$onClick()">
     <v-row no-gutters class="full-height">
       <template v-for="(item, index) in spec.childViews">
-        <glib-component
-          v-if="isColumn(item)"
-          :key="viewKey(item, index)"
-          :spec="item"
-        />
-        <div
-          v-else
-          :key="viewKey(item, index)"
-          class="full-width"
-          :style="innerStyles"
-        >
+        <glib-component v-if="isColumn(item)" :key="viewKey(item, index)" :spec="item" />
+        <div v-else :key="'else-' + viewKey(item, index)" class="full-width" :style="innerStyles">
           <glib-component :spec="item" />
         </div>
       </template>
@@ -28,7 +12,6 @@
 </template>
 
 <script>
-import Vue from "vue";
 
 export default {
   props: {
@@ -62,7 +45,7 @@ export default {
         default:
           align = "flex-start";
       }
-      Vue.set(this.innerStyles, "align-items", align);
+      Object.assign(this.innerStyles, { 'align-items': align, height: 'auto' })
     },
     isColumn(item) {
       return item.view == "panels/column-v1";
@@ -80,16 +63,19 @@ export default {
   margin-left: 0;
   margin-right: 0;
 }
+
 .full-width {
   width: 100%;
   flex: 0 0 100%;
   display: flex;
   flex-direction: column;
 }
+
 // Needed to ensure that split's sub panels have the same height
 .full-height {
   height: 100%;
 }
+
 a.panels-responsive {
   color: inherit;
   text-decoration: inherit;

package/components/avatar.vue

@@ -1,19 +1,15 @@
 <template>
-  <common-tooltip :spec="spec">
-    <template v-slot:activator="{ on }">
-      <common-badge :spec="spec">
-        <v-avatar :size="spec.size">
-          <!-- Use `img` instead of `v-img` otherwise the rounded border will not work. -->
-          <img
-            :style="$styles()"
-            :src="spec.url || spec.base64Data"
-            @click="$onClick()"
-            v-on="on"
-          />
-        </v-avatar>
-      </common-badge>
-    </template>
-  </common-tooltip>
+  <!-- <common-tooltip :spec="spec"> -->
+  <!-- <template v-slot:activator="{ on }"> -->
+  <!-- <common-badge :spec="spec"> -->
+  <v-avatar :size="spec.size">
+    <!-- Use `img` instead of `v-img` otherwise the rounded border will not work. -->
+    <img :style="$styles()" :src="spec.url || spec.base64Data" @click="$onClick()" />
+  </v-avatar>
+  <!-- </common-badge> -->
+  <!-- </template> -->
+  <!-- </common-tooltip>
+   -->
 </template>
 
 <script>

package/components/banners/alert.vue

@@ -1,11 +1,6 @@
 <template>
-  <v-alert
-    :style="genericStyles()"
-    :class="$classes()"
-    :value="true"
-    :color="color"
-    :outlined="!$classes().includes('frameless')"
-  >
+  <v-alert :style="genericStyles()" :class="$classes()" :value="true" :color="color"
+    :outlined="!$classes().includes('frameless') || null">
     <!-- <span class="padder" v-if="spec.icon"><common-icon :spec="spec.icon || {}" /></span> -->
     <!-- <common-icon :spec="spec.icon || {}" /> -->
     <common-message :spec="spec" />

package/components/banners/select.vue

@@ -1,34 +1,21 @@
 <template>
-  <v-banner
-    :style="genericStyles()"
-    :class="$classes()"
-    :color="spec.color || color"
-    :dark="dark"
-    single-line
-    :outlined="!$classes().includes('frameless')"
-  >
-    <common-icon v-if="spec.icon" slot="icon" :spec="spec.icon" />
+  <div :style="genericStyles()" :class="$classes()" :color="spec.color || color">
+    <v-banner>
 
-    <common-message :spec="spec" />
-
-    <template v-slot:actions>
-      <template v-for="(item, index) in spec.buttons">
-        <common-dropdownMenu
-          v-if="item.childButtons"
-          :key="index"
-          :spec="item"
-          :disabled="$isBusy"
-        />
-        <common-button
-          v-else
-          :key="index"
-          :spec="buttonSpec(item)"
-          :disabled="$isBusy"
-          :hide-text-on-xs="true"
-        />
+      <template v-if="spec.icon" v-slot:prepend>
+        <common-icon slot="icon" :spec="spec.icon" />
       </template>
-    </template>
-  </v-banner>
+
+      <v-banner-text>{{ spec.message }}</v-banner-text>
+
+      <v-banner-actions>
+        <template v-for="(item, index) in spec.buttons">
+          <common-dropdownMenu v-if="item.childButtons" :key="'left-' + index" :spec="item" :disabled="$isBusy" />
+          <common-button v-else :key="index" :spec="buttonSpec(item)" :disabled="$isBusy" :hide-text-on-xs="true" />
+        </template>
+      </v-banner-actions>
+    </v-banner>
+  </div>
 </template>
 
 <script>
@@ -68,11 +55,12 @@ export default {
 .frameless {
   padding: 0;
 }
+
 .v-list-item {
   padding: 0 8px 0 8px;
 
-  > a,
-  > button {
+  >a,
+  >button {
     width: 100%;
     min-height: 48px;
     justify-content: flex-start;

package/components/button.vue

@@ -1,9 +1,8 @@
 <template>
-  <common-tooltip ref="tooltip" :spec="spec">
-    <template v-slot:activator="{ on }">
-      <common-button :spec="spec" :disabled="$isBusy" :event-handlers="on" />
-    </template>
-  </common-tooltip>
+  <common-badge v-if="spec.badge" :spec="spec">
+    <common-button :spec="spec" :disabled="$isBusy" />
+  </common-badge>
+  <common-button v-else :spec="spec" :disable="$isBusy" />
 </template>
 
 <script>

package/components/component.vue

@@ -1,34 +1,9 @@
 <template>
-  <fields-text
-    v-if="name == 'fields-text'"
-    ref="delegate"
-    :spec="spec"
-    type="text"
-  />
-  <fields-text
-    v-else-if="name == 'fields-number'"
-    ref="delegate"
-    :spec="spec"
-    type="number"
-  />
-  <fields-text
-    v-else-if="name == 'fields-email'"
-    ref="delegate"
-    :spec="spec"
-    type="email"
-  />
-  <fields-text
-    v-else-if="name == 'fields-url'"
-    ref="delegate"
-    :spec="spec"
-    type="url"
-  />
-  <fields-text
-    v-else-if="name == 'fields-password'"
-    ref="delegate"
-    :spec="spec"
-    type="password"
-  />
+  <fields-text v-if="name == 'fields-text'" :spec="spec" type="text" />
+  <fields-text v-else-if="name == 'fields-number'" :spec="spec" type="number" />
+  <fields-text v-else-if="name == 'fields-email'" :spec="spec" type="email" />
+  <fields-text v-else-if="name == 'fields-url'" :spec="spec" type="url" />
+  <fields-text v-else-if="name == 'fields-password'" :spec="spec" type="password" />
   <!-- <fields-textarea v-else-if="spec.view == 'fields/textarea-v1'" :spec="spec" />
   <fields-richText v-else-if="spec.view == 'fields/richText-v1'" :spec="spec" /> -->
   <!-- <fields-file v-else-if="spec.view == 'fields/file-v1'" :spec="spec" />
@@ -40,113 +15,106 @@
   <!-- <fields-country v-else-if="spec.view == 'fields/country-v1'" :spec="spec" /> -->
 
   <!-- <fields-latLong v-else-if="spec.view == 'fields/latLong-v1'" :spec="spec" /> -->
-  <fields-googlePlace
-    v-else-if="spec.view == 'fields/googlePlace-v1'"
-    ref="delegate"
-    :spec="spec"
-  />
+  <fields-googlePlace v-else-if="spec.view == 'fields/googlePlace-v1'" :spec="spec" />
 
   <!-- <panels-responsive v-else-if="spec.view == 'panels/scroll-v1'" :spec="spec" /> -->
 
-  <component
-    :is="name"
-    v-else-if="name"
-    :id="spec.id"
-    ref="delegate"
-    :spec="spec"
-  />
-
+  <component v-else-if="name" :is="name" :id="spec.id" ref="delegate" :spec="spec"
+    @[menter]="handlePopover(spec.onMouseEnter)" @[mleave]="handlePopover(spec.onMouseLeave)" />
   <div v-else>Unsupported view: {{ spec.view }}</div>
 </template>
 
 <script>
-import H1 from "./h1";
-import H2 from "./h2";
-import H3 from "./h3";
-import H4 from "./h4";
-import H5 from "./h5";
-import H6 from "./h6";
-import Label from "./label";
-import P from "./p";
-import Markdown from "./markdown";
-import Html from "./html";
-import Chip from "./chip";
-import Datetime from "./datetime";
-
-import ProgressBar from "./progressbar";
+import H1 from "./h1.vue";
+import H2 from "./h2.vue";
+import H3 from "./h3.vue";
+import H4 from "./h4.vue";
+import H5 from "./h5.vue";
+import H6 from "./h6.vue";
+import Label from "./label.vue";
+import P from "./p.vue";
+import Markdown from "./markdown.vue";
+import Html from "./html.vue";
+import Chip from "./chip.vue";
+import Datetime from "./datetime.vue";
+
+import ProgressBar from "./progressbar.vue";
 import ProgressCircle from "./progressCircle.vue";
 
-import Image from "./image";
-import Avatar from "./avatar";
-import Icon from "./icon";
-
-import Button from "./button";
-import Fab from "./fab";
-import Switch from "./switch";
-
-import Hr from "./hr";
-import Spacer from "./spacer";
-
-import Map from "./map";
-import TabBar from "./tabBar";
-import Calendar from "./calendar";
-
-import HiddenField from "./fields/hidden";
-import TextField from "./fields/text";
-import SubmitField from "./fields/submit";
-import TextAreaField from "./fields/textarea";
-import RichTextField from "./fields/richText";
-import NewRichTextField from "./fields/newRichText";
-import FileField from "./fields/file";
-import AutocompleteField from "./fields/autocomplete";
-import SelectField from "./fields/select";
-import TimeZoneField from "./fields/timeZone";
-import DynamicSelectField from "./fields/dynamicSelect";
-import CountryField from "./fields/country/field";
-import RadioGroupField from "./fields/radioGroup";
-import RadioField from "./fields/radio";
-import CheckGroupField from "./fields/checkGroup";
-import CheckField from "./fields/check";
-import DateField from "./fields/date";
-import DateTimeField from "./fields/datetime";
-import LocationField from "./fields/location";
-import GooglePlaceField from "./fields/googlePlace";
-import DynamicGroupField from "./fields/dynamicGroup";
-import StripeTokenField from "./fields/stripeToken";
-import StripeExternalAccount from "./fields/stripeExternalAccount";
-import CreditCardField from "./fields/creditCard";
-import RatingField from "./fields/rating";
-import PhoneField from "./fields/phone/field";
-import TimerField from "./fields/timer";
-import OtpField from "./fields/otpField";
-
-import ScrollPanel from "./panels/scroll";
-import VerticalPanel from "./panels/vertical";
-import HorizontalPanel from "./panels/horizontal";
-import FlowPanel from "./panels/flow";
-import SplitPanel from "./panels/split";
-import FormPanel from "./panels/form";
-import ListPanel from "./panels/list";
-import CarouselPanel from "./panels/carousel";
-import TablePanel from "./panels/table";
-import CustomPanel from "./panels/custom";
-import ColumnPanel from "./panels/column";
-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";
-
-import AlertBanner from "./banners/alert";
-import SelectBanner from "./banners/select";
-
-import LineChart from "./charts/line";
-import ColumnChart from "./charts/column";
-import PieChart from "./charts/pie";
-
-import ShareButton from "./shareButton";
+import Image from "./image.vue";
+import Avatar from "./avatar.vue";
+import Icon from "./icon.vue";
+
+import Button from "./button.vue";
+import Fab from "./fab.vue";
+import Switch from "./switch.vue";
+
+import Hr from "./hr.vue";
+import Spacer from "./spacer.vue";
+
+// import Map from "./map.vue";
+import TabBar from "./tabBar.vue";
+import Calendar from "./calendar.vue";
+
+import HiddenField from "./fields/hidden.vue";
+import TextField from "./fields/text.vue";
+import SubmitField from "./fields/submit.vue";
+import TextAreaField from "./fields/textarea.vue";
+import RichTextField from "./fields/richText.vue";
+// import NewRichTextField from "./fields/newRichText.vue";
+import FileField from "./fields/file.vue";
+import AutocompleteField from "./fields/autocomplete.vue";
+import SelectField from "./fields/select.vue";
+import TimeZoneField from "./fields/timeZone.vue";
+import DynamicSelectField from "./fields/dynamicSelect.vue";
+import CountryField from "./fields/country/field.vue";
+import RadioGroupField from "./fields/radioGroup.vue";
+import RadioField from "./fields/radio.vue";
+import CheckGroupField from "./fields/checkGroup.vue";
+import CheckField from "./fields/check.vue";
+import DateField from "./fields/date.vue";
+import DateTimeField from "./fields/datetime.vue";
+import LocationField from "./fields/location.vue";
+import GooglePlaceField from "./fields/googlePlace.vue";
+import DynamicGroupField from "./fields/dynamicGroup.vue";
+import StripeTokenField from "./fields/stripeToken.vue";
+import StripeExternalAccount from "./fields/stripeExternalAccount.vue";
+import CreditCardField from "./fields/creditCard.vue";
+import RatingField from "./fields/rating.vue";
+import PhoneField from "./fields/phone/field.vue";
+import TimerField from "./fields/timer.vue";
+import OtpField from "./fields/otpField.vue";
+
+import ScrollPanel from "./panels/scroll.vue";
+import VerticalPanel from "./panels/vertical.vue";
+import HorizontalPanel from "./panels/horizontal.vue";
+import FlowPanel from "./panels/flow.vue";
+import SplitPanel from "./panels/split.vue";
+import FormPanel from "./panels/form.vue";
+import ListPanel from "./panels/list.vue";
+import CarouselPanel from "./panels/carousel.vue";
+import TablePanel from "./panels/table.vue";
+import CustomPanel from "./panels/custom.vue";
+import ColumnPanel from "./panels/column.vue";
+import ResponsivePanel from "./panels/responsive.vue";
+import UlPanel from "./panels/ul.vue";
+import WebPanel from "./panels/web.vue";
+import GridPanel from "./panels/grid.vue";
+import TimelinePanel from "./panels/timeline.vue";
+
+import MultimediaVideo from "./multimedia/video.vue";
+
+import AlertBanner from "./banners/alert.vue";
+import SelectBanner from "./banners/select.vue";
+
+import LineChart from "./charts/line.vue";
+import ColumnChart from "./charts/column.vue";
+import PieChart from "./charts/pie.vue";
+
+import ShareButton from "./shareButton.vue";
+import Action from "../action";
+
+import { getCurrentInstance } from 'vue';
 
 export default {
   components: {
@@ -186,7 +154,7 @@ export default {
     "fields-submit": SubmitField,
     "fields-textarea": TextAreaField,
     "fields-richText": RichTextField,
-    "fields-newRichText": NewRichTextField,
+    // "fields-newRichText": NewRichTextField,
     "fields-file": FileField,
     "fields-autocomplete": AutocompleteField,
     "fields-select": SelectField,
@@ -234,16 +202,24 @@ export default {
 
     "charts-line": LineChart,
     "charts-column": ColumnChart,
-    "charts-pie": PieChart
+    "charts-pie": PieChart,
   },
   props: {
-    spec: { type: Object, required: true }
+    spec: { type: Object, required: true },
   },
   data() {
     return {
       name: null
     };
   },
+  computed: {
+    menter() {
+      return this.spec.onMouseEnter ? 'mouseenter' : null
+    },
+    mleave() {
+      return this.spec.onMouseLeave ? 'mouseleave' : null
+    }
+  },
   // beforeUpdate() {
   //   // NOTE: Not sure what this is for
   //   // Make sure vuejs will not attempt to render old data.
@@ -258,7 +234,7 @@ export default {
       if (strict) {
         this.name = name;
       } else {
-        if (this.$options.components[name]) {
+        if (getCurrentInstance().appContext.app.components[name]) {
           this.name = name;
         }
       }
@@ -268,8 +244,11 @@ export default {
     },
     $registryEnabled() {
       return false;
+    },
+    handlePopover(spec) {
+      GLib.action.execute(spec, this)
     }
-  }
+  },
 };
 </script>
 

package/components/datetime.vue

@@ -34,8 +34,10 @@ export default {
       }
     },
     $tearDown() {
+      console.log("TimeTicker destroyed");
       if (this.timer != null) {
         clearInterval(this.timer);
+        console.log(`Timer stopped: ${this.timer}`);
       }
     },
     tick() {