glib-web 0.5.98 → 0.6.2

package/components/fields/_patternText.vue

@@ -1,65 +1,65 @@
-<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"
-      :outlined="$classes().includes('outlined')"
-      :style="$styles()"
-      clearable
-    />
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    spec: { type: Object, required: true },
-    type: { type: String, required: true },
-    pattern: { type: String, required: true }
-  },
-  methods: {
-    $internalizeValue(val) {
-      if (Utils.type.isString(val)) {
-        return new Date(val).getTime() / 1000;
-      }
-      return null;
-    },
-    $externalizeValue(val) {
-      if (Utils.type.isNumber(val)) {
-        const date = new Date(val * 1000);
-        return Utils.format.local_iso8601(date);
-      }
-      return null;
-    },
-    $sanitizeValue(val) {
-      if (val) {
-        switch (this.type) {
-          case "date":
-            return val.slice(0, 10);
-          case "month":
-            return val.slice(0, 7);
-          case "datetime-local":
-            return val.slice(0, 16);
-          default:
-            return val;
-        }
-      }
-    },
-    classes() {
-      return this.$classes().concat("g-text-field--hintless");
-    }
-  }
-};
-</script>
-
-<style scoped></style>
+<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"
+      :outlined="$classes().includes('outlined')"
+      :style="$styles()"
+      clearable
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    spec: { type: Object, required: true },
+    type: { type: String, required: true },
+    pattern: { type: String, required: true }
+  },
+  methods: {
+    $internalizeValue(val) {
+      if (Utils.type.isString(val)) {
+        return new Date(val).getTime() / 1000;
+      }
+      return null;
+    },
+    $externalizeValue(val) {
+      if (Utils.type.isNumber(val)) {
+        const date = new Date(val * 1000);
+        return Utils.format.local_iso8601(date);
+      }
+      return null;
+    },
+    $sanitizeValue(val) {
+      if (val) {
+        switch (this.type) {
+          case "date":
+            return val.slice(0, 10);
+          case "month":
+            return val.slice(0, 7);
+          case "datetime-local":
+            return val.slice(0, 16);
+          default:
+            return val;
+        }
+      }
+    },
+    classes() {
+      return this.$classes().concat("g-text-field--hintless");
+    }
+  }
+};
+</script>
+
+<style scoped></style>

package/components/fields/_select.vue

@@ -1,86 +1,86 @@
-<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()"
-      :outlined="$classes().includes('outlined')"
-      :append-icon="append.icon"
-    />
-
-    <input
-      v-for="(item, index) in values"
-      :key="index"
-      type="hidden"
-      :name="fieldName"
-      :value="item"
-    />
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    spec: { type: Object, required: true },
-    defaultValue: { type: String, default: null }
-  },
-  data() {
-    return {
-      options: null,
-      append: {},
-      rules: []
-    };
-  },
-  computed: {
-    values() {
-      // Depends on whether the field is single or multiple
-      if (this.$type.isArray(this.fieldModel)) {
-        return this.fieldModel.length > 0 ? this.fieldModel : this.emptyValue;
-      } else {
-        return [this.fieldModel];
-      }
-      // return this.emptyValue;
-    },
-    // To avoid empty param error
-    emptyValue() {
-      return [null];
-    }
-  },
-  methods: {
-    $ready() {
-      this.options = this.normalizedOptions();
-      this.append = this.spec.append || {};
-      this.rules = this.$validation();
-      if (this.defaultValue) {
-        this.fieldModel = this.defaultValue;
-      }
-    },
-    normalizedOptions() {
-      return this.spec.options.map(i => {
-        switch (i.type) {
-          case "label":
-            return { header: i.text };
-          case "divider":
-            return { divider: true };
-          default:
-            return i;
-        }
-      });
-    },
-    classes() {
-      return this.$classes().concat("g-text-field--hintless");
-    }
-  }
-};
-</script>
+<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()"
+      :outlined="$classes().includes('outlined')"
+      :append-icon="append.icon"
+    />
+
+    <input
+      v-for="(item, index) in values"
+      :key="index"
+      type="hidden"
+      :name="fieldName"
+      :value="item"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    spec: { type: Object, required: true },
+    defaultValue: { type: String, default: null }
+  },
+  data() {
+    return {
+      options: null,
+      append: {},
+      rules: []
+    };
+  },
+  computed: {
+    values() {
+      // Depends on whether the field is single or multiple
+      if (this.$type.isArray(this.fieldModel)) {
+        return this.fieldModel.length > 0 ? this.fieldModel : this.emptyValue;
+      } else {
+        return [this.fieldModel];
+      }
+      // return this.emptyValue;
+    },
+    // To avoid empty param error
+    emptyValue() {
+      return [null];
+    }
+  },
+  methods: {
+    $ready() {
+      this.options = this.normalizedOptions();
+      this.append = this.spec.append || {};
+      this.rules = this.$validation();
+      if (this.defaultValue) {
+        this.fieldModel = this.defaultValue;
+      }
+    },
+    normalizedOptions() {
+      return this.spec.options.map(i => {
+        switch (i.type) {
+          case "label":
+            return { header: i.text };
+          case "divider":
+            return { divider: true };
+          default:
+            return i;
+        }
+      });
+    },
+    classes() {
+      return this.$classes().concat("g-text-field--hintless");
+    }
+  }
+};
+</script>

package/components/fields/autocomplete.vue

@@ -1,73 +1,73 @@
-<!-- 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"
-    />
-
-    <input
-      v-for="(item, index) in values"
-      :key="index"
-      type="hidden"
-      :name="fieldName"
-      :value="item"
-    />
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    spec: { type: Object, required: true }
-  },
-  data() {
-    return {
-      options: null,
-      append: {}
-    };
-  },
-  computed: {
-    values() {
-      // Depends on whether the field is single or multiple
-      if (this.$type.isArray(this.fieldModel)) {
-        return this.fieldModel.length > 0 ? this.fieldModel : this.emptyValue;
-      } else {
-        return [this.fieldModel];
-      }
-      return this.emptyValue;
-    },
-    // To avoid empty param error
-    emptyValue() {
-      return [null];
-    }
-  },
-  methods: {
-    $ready() {
-      const spec = this.spec;
-      const options = spec.options;
-
-      if (Utils.type.isArray(options)) {
-        // It can be really confusing if the options are not strings (e.g. value-text pair)
-        this.options = options.map(i =>
-          Utils.type.isString(i)
-            ? i
-            : console.warn("Option needs to be a string", i)
-        );
-      }
-
-      this.append = spec.append || {};
-    }
-  }
-};
-</script>
+<!-- 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"
+    />
+
+    <input
+      v-for="(item, index) in values"
+      :key="index"
+      type="hidden"
+      :name="fieldName"
+      :value="item"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    spec: { type: Object, required: true }
+  },
+  data() {
+    return {
+      options: null,
+      append: {}
+    };
+  },
+  computed: {
+    values() {
+      // Depends on whether the field is single or multiple
+      if (this.$type.isArray(this.fieldModel)) {
+        return this.fieldModel.length > 0 ? this.fieldModel : this.emptyValue;
+      } else {
+        return [this.fieldModel];
+      }
+      return this.emptyValue;
+    },
+    // To avoid empty param error
+    emptyValue() {
+      return [null];
+    }
+  },
+  methods: {
+    $ready() {
+      const spec = this.spec;
+      const options = spec.options;
+
+      if (Utils.type.isArray(options)) {
+        // It can be really confusing if the options are not strings (e.g. value-text pair)
+        this.options = options.map(i =>
+          Utils.type.isString(i)
+            ? i
+            : console.warn("Option needs to be a string", i)
+        );
+      }
+
+      this.append = spec.append || {};
+    }
+  }
+};
+</script>

package/components/fields/check.vue

@@ -1,81 +1,91 @@
-<template>
-  <div :class="$classes()" :style="$styles()">
-    <fields-hidden v-if="uncheckSpec" :spec="uncheckSpec" />
-    <v-checkbox
-      v-model="fieldModel"
-      :name="fieldName"
-      :value="spec.checkValue"
-      :label="fieldModel ? spec.onLabel || spec.label : spec.label"
-      :on-icon="spec.onIcon"
-      :off-icon="spec.offIcon"
-      hide-details
-      @change="changed"
-    ></v-checkbox>
-  </div>
-</template>
-
-<script>
-import HiddenField from "./hidden";
-
-export default {
-  components: {
-    "fields-hidden": HiddenField
-  },
-  props: {
-    spec: { type: Object, required: true }
-  },
-  data() {
-    return {
-      groupName: null,
-      fieldType: null,
-      uncheckSpec: null
-    };
-  },
-  methods: {
-    $ready() {
-      this.groupElement = this.$el.closest("[data-component=checkGroup]");
-
-      let groupName = null;
-      this.$type.ifObject(
-        this.groupElement,
-        val => (groupName = val.getAttribute("name"))
-      );
-
-      this.fieldName = this.spec.name || groupName;
-      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";
-        }
-      });
-
-      Utils.type.ifNotNull(this.spec.uncheckValue, value => {
-        this.uncheckSpec = { name: this.spec.name, value: value };
-      });
-    },
-    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);
-
-      if (this.spec.submitOnChange) {
-        setTimeout(() => {
-          this.$dispatchEvent("forms/submit");
-        }, 200);
-      }
-    }
-  }
-};
-</script>
-
-<style scoped>
-.v-input--selection-controls {
-  margin-top: 0;
-}
-</style>
+<template>
+  <div :class="$classes()" :style="$styles()">
+    <!-- <fields-hidden v-if="uncheckSpec" :spec="uncheckSpec" /> -->
+    <!-- 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" />
+    <v-checkbox
+      v-model="fieldModel"
+      :name="fieldName"
+      :value="spec.checkValue"
+      :label="fieldModel ? spec.onLabel || spec.label : spec.label"
+      :on-icon="spec.onIcon"
+      :off-icon="spec.offIcon"
+      hide-details
+      @change="changed"
+    ></v-checkbox>
+  </div>
+</template>
+
+<script>
+// import HiddenField from "./hidden";
+
+export default {
+  // components: {
+  //   "fields-hidden": HiddenField
+  // },
+  props: {
+    spec: { type: Object, required: true }
+  },
+  data() {
+    return {
+      groupName: null,
+      fieldType: null
+      // uncheckSpec: null
+    };
+  },
+  methods: {
+    $ready() {
+      this.groupElement = this.$el.closest("[data-component=checkGroup]");
+
+      let groupName = null;
+      this.$type.ifObject(
+        this.groupElement,
+        val => (groupName = val.getAttribute("name"))
+      );
+
+      this.fieldName = this.spec.name || groupName;
+
+      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";
+        }
+      });
+
+      // Utils.type.ifNotNull(this.spec.uncheckValue, value => {
+      //   this.uncheckSpec = { name: this.spec.name, value: value };
+      // });
+    },
+    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);
+
+      if (this.spec.submitOnChange) {
+        setTimeout(() => {
+          this.$dispatchEvent("forms/submit");
+        }, 200);
+      }
+    },
+    $internalizeValue(val) {
+      if (val == this.spec.checkValue) {
+        return val;
+      }
+      return this.spec.uncheckValue;
+    }
+  }
+};
+</script>
+
+<style scoped>
+.v-input--selection-controls {
+  margin-top: 0;
+}
+</style>