glib-web 4.0.0 → 4.1.1

package/README.md

@@ -61,6 +61,7 @@ view.chipGroup styleClasses: ['custom']
 ## Prepare for publishing
 
 - Create a PR to the `master` branch
+- Make sure test pass `yarn run test`
 - After approval, merge the PR.
 
 ## Publish package to npm

package/action.js

@@ -228,7 +228,7 @@ export default class Action {
 
     if (response.header || response.body || response.footer) {
       Utils.http.forceComponentUpdate(() => {
-        const dialog = dialogs.last();
+        const dialog = dialogs.value.last();
         const updateDialog = windowMode ? false : Utils.type.isObject(dialog);
         if (updateDialog) {
           dialog.updateContent(response);

package/actions/components/replace.js

@@ -5,7 +5,7 @@ export default class {
   execute(spec, component) {
     const target = GLib.component.findById(spec.targetId) || component;
     if (target) {
-      Object.assign(target.spec, spec.newView);
+      target.action_merge(spec.newView);
     }
 
     Action.execute(spec.onReplace, target);

package/actions/components/set.js

@@ -1,6 +1,6 @@
-const setFileModel = (component, value) => {
-  component.fieldModel = component.$sanitizeValue(component.$externalizeValue(value));
-};
+// const setFileModel = (component, value) => {
+//   component.fieldModel = component.$sanitizeValue(component.$externalizeValue(value));
+// };
 
 
 export default class {
@@ -13,7 +13,7 @@ export default class {
 
     Utils.type.ifObject(spec.data, (data) => {
       targetComponent.action_merge(data);
-      if (data.value) setFileModel(targetComponent, data.value);
+      // if (data.value) setFileModel(targetComponent, data.value);
     });
 
     GLib.action.execute(spec.onSet, targetComponent);

package/actions/dialogs/open.js

@@ -2,7 +2,7 @@ import { dialogs } from "../../store";
 
 export default class {
   execute(spec, component) {
-    const dialog = dialogs.last();
+    const dialog = dialogs.value.last();
     if (spec.updateExisting && dialog) {
       dialog.reload(spec);
 

package/actions/dialogs/show.js

@@ -2,7 +2,7 @@ import { dialogs } from "../../store";
 
 export default class {
   execute(spec, component) {
-    const dialog = dialogs.last();
+    const dialog = dialogs.value.last();
     if (spec.updateExisting && dialog) {
       dialog.updateContent(spec);
       return;

package/app.vue

@@ -1,7 +1,7 @@
 <template>
   <v-app :class="page.styleClasses">
     <component :is="containerComponent" :spec="formSpec" :style="'height: 100%;'">
-      <nav-layout ref="navBar" :page="page" />
+      <nav-layout ref="navBar" @mounted="updateMainHeight()" :page="page" />
 
       <v-progress-linear color="primary" v-if="vueApp.indicator" :indeterminate="true" height="5"
         style="position: fixed; z-index: 4">
@@ -50,6 +50,7 @@ import { watchGlibEvent } from "./store";
 
 
 export default {
+  expose: ['updateMainHeight'],
   setup(props) {
     const filePaster = computed(() => props.page.filePaster);
     usePasteable(filePaster);
@@ -183,9 +184,9 @@ export default {
       }
 
       // Use nextTick() to allow time for the navBar to complete initialization.
-      this.$nextTick(() => {
-        this.updateMainHeight();
-      });
+      // this.$nextTick(() => {
+      //   this.updateMainHeight();
+      // });
 
       const hash = window.location.hash.substring(1);
       if (hash) {

package/components/composable/upload.js

@@ -54,7 +54,8 @@ function uploadOneFile({ files, key, spec, container, onAfterUploaded }) {
     directUploadUrl,
     files.value[key].progress,
     spec.storagePrefix,
-    spec.metadata
+    spec.metadata,
+    spec.tagging
   );
 
   // track progress

package/components/fields/_select.vue

@@ -49,7 +49,7 @@ export default {
     return {
       options: null,
       append: {},
-      rules: [],
+      rules: this.$validation(),
       focused: false
     };
   },

package/components/fields/check.vue

@@ -6,63 +6,27 @@
     <v-checkbox :color="gcolor" v-model="fieldModel" :name="fieldName" :readonly="spec.readOnly"
       :disabled="inputDisabled" :label="fieldModel ? spec.onLabel || spec.label : spec.label" :true-icon="spec.onIcon"
       :false-icon="spec.offIcon" :value="spec.value" :true-value="spec.checkValue" :false-value="uncheckValue"
-      hide-details @change="changed"></v-checkbox>
+      hide-details @change="onChange()" :rules="$validation()" :multiple="false"></v-checkbox>
   </div>
 </template>
 
 <script>
 export default {
+  emits: ['oncheck'],
   props: {
     spec: { type: Object, required: true }
   },
   data() {
     return {
-      groupName: null,
-      fieldType: null,
       uncheckValue: this.spec.uncheckValue
     };
   },
-  computed: {
-    fieldName() {
-      return this.spec.name || this.spec.parentName;
-    }
-  },
   methods: {
-    $ready() {
-      this.updateData();
-    },
-    changed(event) {
-      // Execute later to ensure the checkbox's checked state has been updated.
-      setTimeout(() => {
-        this.$type.ifObject(this.groupElement, val =>
-          val.dispatchEvent(new Event("change"))
-        );
-      }, 100);
-
-      // setTimeout(() => {
+    onChange() {
+      const checked = this.spec.checkValue == this.fieldModel ? true : false;
+      this.$emit("oncheck", { checked, value: this.spec.checkValue });
       this.$executeOnChange();
-      // }, 500);
-    },
-    updateData() {
-      this.groupElement = this.$el.closest("[data-component=checkGroup]");
-
-      // this.fieldModel = this.spec.checked
-      //   ? this.spec.checkValue
-      //   : this.spec.value;
-
-      Utils.type.ifArray(this.spec.styleClasses, classes => {
-        if (classes.remove("switch")) {
-          this.fieldType = "switch";
-        }
-      });
-      // this.fieldModel = this.spec.value;
     }
   }
 };
 </script>
-
-<style scoped>
-.v-input--selection-controls {
-  margin-top: 0;
-}
-</style>

package/components/fields/checkGroup.vue

@@ -1,101 +1,54 @@
 <template>
-  <div ref="checkGroup" class="checkgroup" data-component="checkGroup" :name="spec.name">
-    <!-- <fields-hidden v-if="!anyChecked" :spec="uncheckSpec" /> -->
-
-    <div v-for="(item, index) in spec.childViews" :key="index">
-      <glib-component :spec="childSpec(item)" />
-    </div>
-
-    <v-text-field class="checkgroup__uncheckvalue" :disabled="anyChecked" :name="spec.name" :value="spec.uncheckValue"
-      :rules="rules" />
+  <div :style="$styles()" :class="$classes()">
+    <fields-check v-for="(childView, index) in childViews" :spec="childView" :key="index"
+      @oncheck="updateFieldModel"></fields-check>
+    <v-input ref="validator" :model-value="fieldModel" :rules="$validation()" :name="fieldName" validate-on="input"
+      :disabled="inputDisabled"></v-input>
+
+    <template v-if="values.length > 0">
+      <input type="hidden" v-for="(value, index) in values" :value="value" :key="index" :name="fieldName" />
+    </template>
+    <input v-else type="hidden" :name="fieldName" :value="null" />
   </div>
 </template>
 
 <script>
-// import HiddenField from "./hidden";
+import { defineComponent } from "vue";
+import FieldCheck from './check.vue';
 
-export default {
-  // components: {
-  //   "fields-hidden": HiddenField
-  // },
+export default defineComponent({
+  components: {
+    'fields-check': FieldCheck
+  },
   props: {
-    spec: { type: Object, required: true },
+    spec: { type: Object, required: true }
   },
-  data() {
-    return {
-      anyChecked: false,
-      errorMessage: null,
-      rules: [
-        (_v) => {
-          return this.anyChecked || this.errorMessage || true;
-        },
-      ],
-    };
+  computed: {
+    values() {
+      return this.fieldModel || [];
+    },
+    childViews() {
+      return this.spec.childViews.map((childView) => {
+        const { readOnly, disabled } = this.spec;
+        const parentName = this.spec.name;
+        return Object.assign({}, { readOnly, disabled, parentName }, childView);
+      });
+    }
   },
-  // computed: {
-  //   uncheckSpec() {
-  //     return { name: this.spec.name, value: this.spec.uncheckValue };
-  //   }
-  // },
   methods: {
-    $ready() {
-      const validation = this.spec.validation || {};
-
-      Utils.type.ifObject(validation.required, (required) => {
-        this.errorMessage = required.message;
-      });
-
-      this.detectChecked();
-      const vm = this;
-      this.$el.addEventListener(
-        "change",
-        function (e) {
-          vm.detectChecked();
-        },
-        false
-      );
-    },
-    detectChecked() {
-      this.anyChecked = false;
-      const vm = this;
-      this.$el
-        .querySelectorAll("input[type=checkbox]")
-        .forEach(function (checkbox) {
-          if (checkbox.checked) {
-            vm.anyChecked = true;
-            return;
-          }
-        });
-    },
-    childSpec(item) {
-      if (this.spec.readOnly) {
-        return Object.assign(item, {
-          parentName: this.spec.name,
-          readOnly: this.spec.readOnly,
-          onChange: this.spec.onChange,
-        });
+    updateFieldModel(obj) {
+      let newValue = this.fieldModel || [];
+      const { checked, value } = obj;
+      if (checked) {
+        newValue.push(value);
+      } else {
+        newValue = newValue.filter((v) => v != value);
       }
 
-      return Object.assign(item, { onChange: this.spec.onChange, parentName: this.spec.name });
-    },
-  },
-};
-</script>
-
-<style lang="scss">
-// Hide the uncheck field, but continue to show the validation div.
-.checkgroup__uncheckvalue {
-  padding-top: 0px;
-
-  .v-input__slot {
-    display: none;
+      // empty array still count as has value
+      this.fieldModel = newValue.length <= 0 ? null : newValue;
+      this.$executeOnChange();
+    }
   }
-
-  // Hide the entire component unless there is a validation message.
-  display: none;
-
-  &.error--text {
-    display: block;
-  }
-}
-</style>
+});
+</script>

package/components/fields/chipGroup.vue

@@ -13,7 +13,6 @@
 import { defineComponent } from "vue";
 import inputVariant from "../mixins/inputVariant";
 import { triggerOnInput } from "../composable/form";
-import { fieldModels } from "../composable/conditional";
 
 export default defineComponent({
   mixins: [inputVariant],

package/components/fields/dynamicGroup.vue

@@ -3,9 +3,11 @@
     <div v-for="(group, groupIndex) in groupSpecs" :key="`group${groupIndex}`">
       <input v-if="isDeleted(groupIndex)" type="hidden" :name="`${spec.name}[${groupIndex}][_destroy]`" value="1" />
       <div :style="{ display: isDeleted(groupIndex) ? 'none' : 'block' }">
-        <v-icon class="float-left mr-2" color="error" @click="removeGroup(groupIndex)">remove_circle</v-icon>
-        <h4 v-if="spec.titlePrefix">{{ spec.titlePrefix }}{{ group.actualIndex }}</h4>
-        <panels-responsive :spec="group" />
+        <div class="group-wrapper">
+          <v-icon class="float-left mr-2" color="error" @click="removeGroup(groupIndex)">remove_circle</v-icon>
+          <h4 v-if="spec.titlePrefix">{{ spec.titlePrefix }}{{ group.actualIndex }}</h4>
+          <panels-responsive :spec="group" />
+        </div>
       </div>
     </div>
 

package/components/fields/phone.vue

@@ -1,31 +1,47 @@
 <template>
   <div :style="$styles()" :class="$classes()">
-    <v-phone-input :guessCountry="guessCountry" displayFormat="e164" :defaultCountry="spec.defaultCountry"
-      :color="gcolor" v-model="fieldModel" :label="spec.label" :name="fieldName" :hint="spec.hint"
-      :placeholder="spec.placeholder" :maxlength="spec.maxLength || 255" :readonly="spec.readOnly"
-      :rules="$validation()" :outlined="$classes().includes('outlined')" :disabled="inputDisabled" validate-on="blur"
-      :variant="variant" @update:modelValue="onChange()" persistent-placeholder></v-phone-input>
+    <v-phone-input :guessCountry="guessCountry" displayFormat="e164" :defaultCountry="defaultCountry" :color="gcolor"
+      v-model="fieldModel" :label="spec.label" :name="fieldName" :hint="spec.hint" :placeholder="spec.placeholder"
+      :maxlength="spec.maxLength || 255" :readonly="spec.readOnly" :rules="$validation()"
+      :outlined="$classes().includes('outlined')" :disabled="inputDisabled" validate-on="blur" :variant="variant"
+      @update:modelValue="onChange()" persistent-placeholder></v-phone-input>
   </div>
 </template>
 
 <script>
 import eventFiltering from "../../utils/eventFiltering";
 import inputVariant from "../mixins/inputVariant";
+import countries from "moment-timezone/data/meta/latest.json";
 
 export default {
   mixins: [inputVariant],
   props: {
-    spec: { type: Object, required: true },
+    spec: {
+      type: Object,
+      required: true,
+    },
   },
+
   methods: {
     onChange: eventFiltering.debounce(function () {
       this.$executeOnChange();
     }, 300),
   },
+
   computed: {
     guessCountry() {
-      return !this.spec.disableAutoDetect && !this.spec.defaultCountry;
-    }
-  }
+      return !this.spec.disableAutoDetect && !this.defaultCountry;
+    },
+
+    defaultCountry() {
+      return this.spec.defaultCountry || this.getCountry;
+    },
+
+    getCountry() {
+      const timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+      const countriesWithTimeZone = Object.values(countries.countries).filter((country) => country.zones.includes(timeZone));
+      return countriesWithTimeZone.length === 1 ? countriesWithTimeZone[0].abbr : null;
+    },
+  },
 };
 </script>

package/components/fields/radio.vue

@@ -1,9 +1,20 @@
 <template>
   <div :class="$classes()" :style="$styles()">
-    <v-radio :label="spec.label" :value="spec.value.presence() || vuetifyEmptyString" :readonly="spec.readOnly"
-      :on-icon="spec.onIcon" :off-icon="spec.offIcon" @click="$onClick()" :color="gcolor" />
+    <v-radio :label="spec.label" :value="(spec.value || '').presence() || vuetifyEmptyString" :readonly="spec.readOnly"
+      :on-icon="spec.onIcon" :off-icon="spec.offIcon" @click="$onClick()" :color="gcolor"
+      :class="spec.imageUrl || spec.icon ? 'custom-radio' : ''">
+      <template v-slot:label v-if="spec.imageUrl || spec.icon">
+        <div class="custom-radio-content">
+          <img v-if="spec.imageUrl" :src="spec.imageUrl" alt="icon" class="custom-radio-icon" />
+          <v-icon v-if="spec.icon" class="aligner" :color="spec.iconColor" :size="spec.iconSize">
+            {{ spec.icon }}
+          </v-icon>
+          <div class="custom-radio-label">{{ spec.label }}</div>
+        </div>
+      </template>
+    </v-radio>
     <div v-if="spec.childViews" class="radio-childviews">
-      <div v-for="(item, i) in spec.childViews" :key="i">
+      <div v-for="( item, i ) in spec.childViews " :key="i">
         <glib-component :spec="item" />
       </div>
     </div>
@@ -18,3 +29,99 @@ export default {
   }
 };
 </script>
+
+<style scoped>
+.custom-radio {
+  /* styles for custom-radio class */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 240px;
+  height: 254px;
+  transition: border-color 0.3s, box-shadow 0.3s, color 0.3s;
+  text-align: center;
+  cursor: pointer;
+  padding: 16px;
+  position: relative;
+  border: 1px solid #E6E6E6;
+  border-radius: 24px;
+}
+
+.custom-radio:hover {
+  border: 2px solid;
+  border-radius: 24px;
+  border-color: #0A2A9E;
+}
+
+.custom-radio:hover .custom-radio-label {
+  font-size: 22px;
+  color: #0A2A9E;
+}
+
+.custom-radio .custom-radio-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  margin-right: 30px;
+}
+
+.custom-radio .custom-radio-icon {
+  width: 80px;
+  height: 80px;
+  margin-bottom: 8px;
+}
+
+.custom-radio .custom-radio-label {
+  font-size: 22px;
+  color: inherit;
+  margin-top: 16px;
+}
+
+.custom-radio ::v-deep .v-selection-control__input {
+  width: 240px;
+  height: 254px;
+  background-color: transparent;
+  left: 50%;
+
+  >.v-icon {
+    opacity: 0;
+  }
+
+}
+
+.custom-radio ::v-deep .v-selection-control__input::before {
+  background-color: transparent
+}
+
+.custom-radio ::v-deep .v-ripple__container {
+  display: none;
+}
+
+
+.custom-radio .v-ripple__container {
+  display: none;
+}
+
+.radio--active .custom-radio {
+  border: 2px solid;
+  border-radius: 24px;
+  border-color: #0A2A9E;
+}
+
+.radio--active .custom-radio-label {
+  color: #0A2A9E;
+  font-weight: 700;
+  font-size: 22px;
+}
+
+.radio--active .v-icon {
+  color: #0A2A9E;
+}
+
+.radio-childviews {
+  margin-top: 16px;
+}
+</style>

package/components/fields/radioGroup.vue

@@ -4,12 +4,11 @@
        validation error on page load.
     -->
   <v-radio-group v-model="fieldModel" :name="fieldName" :readonly="spec.readOnly" :disabled="inputDisabled"
-    :rules="$validation()" :row="spec.row" validate-on="blur" @change="onChange" :class="$classes()" :style="$styles()">
+    :rules="$validation()" :inline="spec.row" validate-on="blur" @change="$executeOnChange()" :class="$classes()"
+    :style="$styles()">
     <div v-for="(childView, index) in spec.childViews" :key="index" style="width: 100%;">
       <glib-component :spec="childSpec(childView)" />
     </div>
-
-    <!-- <input v-if="spec.readOnly" type="hidden" :name="fieldName" :value="fieldModel" /> -->
   </v-radio-group>
 </template>
 
@@ -19,11 +18,6 @@ export default {
     spec: { type: Object, required: true },
   },
   methods: {
-    onChange() {
-      setTimeout(() => {
-        this.$executeOnChange();
-      }, 500);
-    },
     updateValue(variable) {
       if (variable.value) {
         this.fieldModel = variable.value;

package/components/fields/submit.vue

@@ -1,5 +1,5 @@
 <template>
-  <common-button :spec="spec" type="submit" :disabled="spec.disabled || $isBusy" />
+  <common-button :spec="spec" type="submit" :disabled="disabled" />
 </template>
 
 <script>
@@ -9,11 +9,18 @@ export default {
   props: {
     spec: { type: Object, required: true }
   },
+  inject: ['formCtx'],
   data: function () {
     return {
       data: this.$data
     };
   },
+  computed: {
+    disabled() {
+      const disableIfFormInvalid = this.spec.disableIfFormInvalid && this.formCtx.form && !this.formCtx.form.isValid;
+      return disableIfFormInvalid || this.spec.disabled || this.$isBusy;
+    }
+  },
   methods: {
     $mounted() {
       nextTick(() => this.$dispatchEvent("forms/addSubmit", this.$data));