glib-web 2.4.1 → 3.0.0-beta1

package/components/component.vue

@@ -3,11 +3,7 @@
   <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-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" />
@@ -19,10 +15,7 @@
   <!-- <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'"
-    :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" /> -->
 
@@ -32,92 +25,95 @@
 </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 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 { getCurrentInstance } from 'vue';
 
 export default {
   components: {
@@ -157,7 +153,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,
@@ -179,6 +175,7 @@ export default {
     "fields-rating": RatingField,
     "fields-phone": PhoneField,
     "fields-timer": TimerField,
+    "fields-otp": OtpField,
 
     "panels-scroll": ScrollPanel,
     "panels-vertical": VerticalPanel,
@@ -204,14 +201,14 @@ 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
+      name: null,
     };
   },
   beforeUpdate() {
@@ -228,15 +225,15 @@ export default {
       if (strict) {
         this.name = name;
       } else {
-        if (this.$options.components[name]) {
+        if (getCurrentInstance().appContext.app.components[name]) {
           this.name = name;
         }
       }
     },
     $registryEnabled() {
       return false;
-    }
-  }
+    },
+  },
 };
 </script>
 

package/components/fields/_patternText.vue

@@ -1,25 +1,11 @@
 <template>
   <div :style="$styles()" :class="classes()">
     <!-- See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date for why we need to use `pattern` -->
-    <v-text-field
-      v-model="fieldModel"
-      :name="fieldName"
-      :label="spec.label"
-      :value="spec.value"
-      :hint="spec.hint"
-      :type="type"
-      :readonly="spec.readOnly || false"
-      :disabled="spec.readOnly"
-      :min="$sanitizeValue(spec.min)"
-      :max="$sanitizeValue(spec.max)"
-      :pattern="pattern"
-      :rules="$validation()"
-      :outlined="$classes().includes('outlined')"
-      :style="$styles()"
-      :dense="$classes().includes('dense')"
-      clearable
-      @input="onChange"
-    />
+    <v-text-field v-model="fieldModel" :name="fieldName" :label="spec.label" :value="spec.value" :hint="spec.hint"
+      :type="type" :readonly="spec.readOnly || false" :disabled="spec.readOnly" :min="$sanitizeValue(spec.min)"
+      :max="$sanitizeValue(spec.max)" :pattern="pattern" :rules="$validation()"
+      :outlined="$classes().includes('outlined') || null" :style="$styles()" :dense="$classes().includes('dense') || null"
+      clearable @input="onChange" />
   </div>
 </template>
 

package/components/fields/_select.vue

@@ -1,33 +1,12 @@
 <template>
   <div :style="$styles()" :class="classes()">
-    <v-autocomplete
-      v-model="fieldModel"
-      :label="spec.label"
-      :items="options"
-      :chips="spec.multiple"
-      :deletable-chips="spec.multiple"
-      :multiple="spec.multiple"
-      :disabled="spec.readOnly"
-      :clearable="!spec.readOnly"
-      :hint="spec.hint"
-      :placeholder="spec.placeholder"
-      :rules="rules"
-      validate-on-blur
-      persistent-hint
-      :class="$classes()"
-      :dense="$classes().includes('dense')"
-      :outlined="$classes().includes('outlined')"
-      :append-icon="append.icon"
-      @change="onChange"
-    />
+    <v-autocomplete v-model="fieldModel" :label="spec.label" :items="options || []" :chips="spec.multiple"
+      :deletable-chips="spec.multiple" :multiple="spec.multiple" :disabled="spec.readOnly" :clearable="!spec.readOnly"
+      :hint="spec.hint" :placeholder="spec.placeholder" :rules="rules" validate-on-blur persistent-hint
+      :class="$classes()" :dense="$classes().includes('dense') || null"
+      :outlined="$classes().includes('outlined') || null" :append-icon="append.icon" @change="onChange" />
 
-    <input
-      v-for="(item, index) in values"
-      :key="index"
-      type="hidden"
-      :name="fieldName"
-      :value="item"
-    />
+    <input v-for="(item, index) in values" :key="index" type="hidden" :name="fieldName" :value="item" />
   </div>
 </template>
 
@@ -71,7 +50,7 @@ export default {
           case "divider":
             return { divider: true };
           default:
-            return i;
+            return { 'title': i.text, 'value': i.value };
         }
       });
     },

package/components/fields/autocomplete.vue

@@ -1,28 +1,12 @@
 <!-- TODO: Remove (deprecated) -->
 <template>
   <div :style="genericStyles()">
-    <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')"
-      :append-icon="append.icon"
-    />
+    <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" />
 
-    <input
-      v-for="(item, index) in values"
-      :key="index"
-      type="hidden"
-      :name="fieldName"
-      :value="item"
-    />
+    <input v-for="(item, index) in values" :key="index" type="hidden" :name="fieldName" :value="item" />
   </div>
 </template>
 

package/components/fields/check.vue

@@ -1,13 +1,19 @@
 <template>
-  <div :class="$classes()" :style="$styles()">
+  <div
+    :class="$classes()"
+    :style="$styles()"
+  >
     <!-- This hidden field should always be there to make sure the submitted param is not empty,
          which could cause "Not accessible" error on the server. -->
-    <input type="hidden" :name="fieldName" :value="spec.uncheckValue" />
+    <input
+      v-model="uncheckValue"
+      type="hidden"
+      :name="fieldName"
+    />
     <v-checkbox
       v-model="fieldModel"
       :name="fieldName"
       :disabled="spec.readOnly"
-      :value="spec.checkValue"
       :label="fieldModel ? spec.onLabel || spec.label : spec.label"
       :on-icon="spec.onIcon"
       :off-icon="spec.offIcon"
@@ -20,22 +26,24 @@
 <script>
 export default {
   props: {
-    spec: { type: Object, required: true }
+    spec: { type: Object, required: true },
   },
   data() {
     return {
       groupName: null,
-      fieldType: null
+      fieldType: null,
     };
   },
   methods: {
     $ready() {
+      this.fieldModel = this.checkValue;
+      this.uncheckValue = this.spec.uncheckValue;
       this.groupElement = this.$el.closest("[data-component=checkGroup]");
 
       let groupName = null;
       this.$type.ifObject(
         this.groupElement,
-        val => (groupName = val.getAttribute("name"))
+        (val) => (groupName = val.getAttribute("name"))
       );
 
       this.fieldName = this.spec.name || groupName;
@@ -44,7 +52,7 @@ export default {
         ? this.spec.checkValue
         : this.spec.value;
 
-      Utils.type.ifArray(this.spec.styleClasses, classes => {
+      Utils.type.ifArray(this.spec.styleClasses, (classes) => {
         if (classes.remove("switch")) {
           this.fieldType = "switch";
         }
@@ -53,7 +61,7 @@ export default {
     changed(event) {
       // Execute later to ensure the checkbox's checked state has been updated.
       setTimeout(() => {
-        this.$type.ifObject(this.groupElement, val =>
+        this.$type.ifObject(this.groupElement, (val) =>
           val.dispatchEvent(new Event("change"))
         );
       }, 100);
@@ -64,7 +72,7 @@ export default {
       //   }, 200);
       // }
 
-      Utils.type.ifObject(this.spec.onChange, onChange => {
+      Utils.type.ifObject(this.spec.onChange, (onChange) => {
         this.$nextTick(() => {
           GLib.action.execute(onChange, this);
         });
@@ -75,8 +83,8 @@ export default {
         return val;
       }
       return this.spec.uncheckValue;
-    }
-  }
+    },
+  },
 };
 </script>
 

package/components/fields/country/field.vue

@@ -19,32 +19,14 @@
     :value="regionField.value"
     />-->
 
-    <v-autocomplete
-      v-model="country"
-      :label="spec.label"
-      :name="spec.name"
-      :items="countryOptions"
-      :readonly="spec.readOnly"
-      :disabled="spec.readOnly"
-      :clearable="!spec.readOnly"
-      :hint="spec.hint"
-      persistent-hint
-      :outlined="$classes().includes('outlined')"
-    />
+    <v-autocomplete v-model="country" :label="spec.label" :name="spec.name" :items="countryOptions"
+      :readonly="spec.readOnly" :disabled="spec.readOnly" :clearable="!spec.readOnly" :hint="spec.hint" persistent-hint
+      :outlined="$classes().includes('outlined') || null" />
 
-    <v-autocomplete
-      v-if="regionField && regionOptions"
-      :label="regionField.label"
-      :name="regionField.name"
-      :value="regionField.value"
-      :items="regionOptions"
-      :readonly="regionField.readOnly"
-      :disabled="regionField.readOnly"
-      :clearable="!regionField.readOnly"
-      :hint="regionField.hint"
-      persistent-hint
-      :outlined="$classes().includes('outlined')"
-    />
+    <v-autocomplete v-if="regionField && regionOptions" :label="regionField.label" :name="regionField.name"
+      :value="regionField.value" :items="regionOptions" :readonly="regionField.readOnly" :disabled="regionField.readOnly"
+      :clearable="!regionField.readOnly" :hint="regionField.hint" persistent-hint
+      :outlined="$classes().includes('outlined') || null" />
   </div>
 </template>
 
@@ -63,10 +45,10 @@ export default {
     };
   },
   computed: {
-    regionField: function() {
+    regionField: function () {
       return this.spec.region;
     },
-    regionOptions: function() {
+    regionOptions: function () {
       return regions[this.country];
     }
   },

package/components/fields/date.vue

@@ -9,22 +9,22 @@
 </template>
 
 <script>
-import PatternTextField from "./_patternText";
+import PatternTextField from "./_patternText.vue";
 
 export default {
   components: {
     // Need to start with `fields-` to enable jsonlogic in `styles.js#_linkFieldModels`
-    "fields-patternText": PatternTextField
+    "fields-patternText": PatternTextField,
   },
   props: {
-    spec: { type: Object, required: true }
+    spec: { type: Object, required: true },
   },
   methods: {
     action_merge(mergedSpec) {
       Object.assign(this.spec, mergedSpec);
       this.$refs.delegate.updateData();
-    }
-  }
+    },
+  },
 };
 </script>
 

package/components/fields/datetime.vue

@@ -22,21 +22,21 @@
 </template>
 
 <script>
-import PatternTextField from "./_patternText";
+import PatternTextField from "./_patternText.vue";
 
 export default {
   components: {
     // Need to start with `fields-` to enable jsonlogic in `styles.js#_linkFieldModels`
-    "fields-patternText": PatternTextField
+    "fields-patternText": PatternTextField,
   },
   props: {
-    spec: { type: Object, required: true }
+    spec: { type: Object, required: true },
   },
   data() {
     return {
-      value: null
+      value: null,
     };
-  }
+  },
   // methods: {
   //   $ready() {
   //     this.value = this.spec.value.slice(0, 16);

package/components/fields/dynamicSelect.vue

@@ -1,42 +1,20 @@
 <template>
   <div :style="genericStyles()">
-    <v-autocomplete
-      ref="autocomplete"
-      v-model="model"
-      :items="allItems"
-      :loading="$isBusy"
-      :search-input.sync="search"
-      :label="spec.label"
-      hide-no-data
-      hide-selected
-      no-filter
-      return-object
-      :chips="true"
-      :deletable-chips="true"
-      :multiple="spec.multiple"
-    >
+    <v-autocomplete ref="autocomplete" v-model="model" :items="allItems" :loading="$isBusy" :v-model:search-input="search"
+      :label="spec.label" hide-no-data hide-selected no-filter return-object :chips="true" :deletable-chips="true"
+      :multiple="spec.multiple">
       <template v-slot:item="data">
         {{ data.item.title }} - {{ data.item.subtitle }}
       </template>
 
-      <v-list-item
-        v-if="!$isBusy && nextPageUrl"
-        slot="append-item"
-        class="load-more"
-      >
+      <!-- <v-list-item v-if="!$isBusy && nextPageUrl" slot="append-item" class="load-more">
         <v-list-item-content class="text-content" @click="loadMore">
           <v-list-item-title>Load More</v-list-item-title>
         </v-list-item-content>
-      </v-list-item>
+      </v-list-item> -->
     </v-autocomplete>
 
-    <input
-      v-for="(item, index) in values"
-      :key="index"
-      type="hidden"
-      :name="spec.name"
-      :value="item.value"
-    />
+    <input v-for="(item, index) in values" :key="index" type="hidden" :name="spec.name" :value="item.value" />
   </div>
 </template>
 
@@ -155,7 +133,7 @@ export default {
       return data.rows.map(row => {
         const extra = row.extra;
         row.value = extra.value;
-        row.text = extra.text;
+        row.title = extra.text;
         return row;
       });
     }
@@ -167,6 +145,7 @@ export default {
 .load-more {
   cursor: pointer;
 }
+
 .load-more:hover {
   background-color: lightgray;
 }