glib-web 0.5.77

package/components/fields/_patternText.vue

@@ -0,0 +1,61 @@
+<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="spec.min"
+      :max="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) {
+      switch (this.type) {
+        case "date":
+          return val.slice(0, 10);
+        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

@@ -0,0 +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>

package/components/fields/autocomplete.vue

@@ -0,0 +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>

package/components/fields/check.vue

@@ -0,0 +1,104 @@
+<template>
+  <div :class="$classes()">
+    <fields-hidden v-if="uncheckSpec" :spec="uncheckSpec" />
+    <v-checkbox
+      v-model="fieldModel"
+      :name="fieldName"
+      :value="spec.checkValue"
+      :label="spec.label"
+      hide-details
+      @change="changed"
+    ></v-checkbox>
+    <!-- <v-switch
+      v-if="fieldType == 'switch'"
+      v-model="fieldModel"
+      :name="fieldName"
+      :value="spec.checkValue"
+      :label="spec.label"
+      hide-details
+      @change="changed"
+    >
+    </v-switch>
+    <v-checkbox
+      v-else
+      v-model="fieldModel"
+      :name="fieldName"
+      :value="spec.checkValue"
+      :label="spec.label"
+      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 {
+      groupElement: null,
+      groupName: null,
+      fieldType: null,
+      uncheckSpec: null
+    };
+  },
+  // computed: {
+  //   uncheckSpec() {
+  //     // const cloneSpec = Object.assign({}, this.spec)
+  //     // return Object.assign(cloneSpec, { value: 0 })
+  //     return { name: this.spec.name, value: this.spec.uncheckValue };
+  //   }
+  // },
+  mounted() {
+    // TODO: probably need fixing
+    this.groupElement = this.$el.closest("[data-component=checkGroup]");
+    this.$type.ifObject(
+      this.groupElement,
+      val => (this.groupName = val.getAttribute("name"))
+    );
+    // if (this.groupElement) {
+    //   this.groupName = this.groupElement.getAttribute('name')
+    // }
+  },
+  methods: {
+    $ready() {
+      this.fieldName = this.spec.name || this.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.
+      const vm = this;
+      setTimeout(function() {
+        vm.$type.ifObject(vm.groupElement, val =>
+          val.dispatchEvent(new Event("change"))
+        );
+      }, 100);
+    }
+  }
+};
+</script>
+
+<style scoped>
+.v-input--selection-controls {
+  margin-top: 0;
+}
+</style>

package/components/fields/checkGroup.vue

@@ -0,0 +1,51 @@
+<template>
+  <div ref="checkGroup" data-component="checkGroup" :name="spec.name">
+    <fields-hidden :spec="uncheckSpec" v-if="!anyChecked" />
+
+    <div v-for="(item, index) in spec.childViews" :key="index">
+      <ui-component :spec="item" />
+    </div>
+  </div>
+</template>
+
+<script>
+import HiddenField from './hidden'
+
+export default {
+  props: ['spec'],
+  data() {
+    return {
+      anyChecked: false
+    }
+  },
+  components: {
+    'fields-hidden': HiddenField,
+  },
+  computed: {
+    uncheckSpec() {
+      // const cloneSpec = Object.assign({}, this.spec)
+      // return Object.assign(cloneSpec, { value: 0 })
+      return { name: this.spec.name, value: this.spec.uncheckValue }
+    },
+  },
+  methods: {
+    detectChecked() {
+      this.anyChecked = false
+      const vm = this
+      this.$el.querySelectorAll('input[type=checkbox]').forEach(function(checkbox) {
+        if (checkbox.checked) {
+          vm.anyChecked = true
+        }
+      })
+    }
+  },
+  mounted() {
+    this.detectChecked()
+    const vm = this
+    this.$el.addEventListener('change', function (e) { vm.detectChecked() }, false);
+  }
+}
+</script>
+
+<style scoped>
+</style>

package/components/fields/country/countries.js

@@ -0,0 +1,251 @@
+export default [
+  "Afghanistan",
+  "Albania",
+  "Algeria",
+  "American Samoa",
+  "Andorra",
+  "Angola",
+  "Anguilla",
+  "Antarctica",
+  "Antigua and Barbuda",
+  "Argentina",
+  "Armenia",
+  "Aruba",
+  "Australia",
+  "Austria",
+  "Azerbaijan",
+  "Bahamas",
+  "Bahrain",
+  "Bangladesh",
+  "Barbados",
+  "Belarus",
+  "Belgium",
+  "Belize",
+  "Benin",
+  "Bermuda",
+  "Bhutan",
+  "Bolivia, Plurinational State of",
+  "Bonaire, Sint Eustatius and Saba",
+  "Bosnia and Herzegovina",
+  "Botswana",
+  "Bouvet Island",
+  "Brazil",
+  "British Indian Ocean Territory",
+  "Brunei Darussalam",
+  "Bulgaria",
+  "Burkina Faso",
+  "Burundi",
+  "Cambodia",
+  "Cameroon",
+  "Canada",
+  "Cape Verde",
+  "Cayman Islands",
+  "Central African Republic",
+  "Chad",
+  "Chile",
+  "China",
+  "Christmas Island",
+  "Cocos (Keeling) Islands",
+  "Colombia",
+  "Comoros",
+  "Congo",
+  "Congo, The Democratic Republic of the",
+  "Cook Islands",
+  "Costa Rica",
+  "Croatia",
+  "Cuba",
+  "Curaçao",
+  "Cyprus",
+  "Czech Republic",
+  "Côte d'Ivoire",
+  "Denmark",
+  "Djibouti",
+  "Dominica",
+  "Dominican Republic",
+  "Ecuador",
+  "Egypt",
+  "El Salvador",
+  "Equatorial Guinea",
+  "Eritrea",
+  "Estonia",
+  "Ethiopia",
+  "Falkland Islands (Malvinas)",
+  "Faroe Islands",
+  "Fiji",
+  "Finland",
+  "France",
+  "French Guiana",
+  "French Polynesia",
+  "French Southern Territories",
+  "Gabon",
+  "Gambia",
+  "Georgia",
+  "Germany",
+  "Ghana",
+  "Gibraltar",
+  "Greece",
+  "Greenland",
+  "Grenada",
+  "Guadeloupe",
+  "Guam",
+  "Guatemala",
+  "Guernsey",
+  "Guinea",
+  "Guinea-Bissau",
+  "Guyana",
+  "Haiti",
+  "Heard Island and McDonald Islands",
+  "Holy See (Vatican City State)",
+  "Honduras",
+  "Hong Kong",
+  "Hungary",
+  "Iceland",
+  "India",
+  "Indonesia",
+  "Iran, Islamic Republic of",
+  "Iraq",
+  "Ireland",
+  "Ireland",
+  "Isle of Man",
+  "Israel",
+  "Italy",
+  "Jamaica",
+  "Japan",
+  "Jersey",
+  "Jordan",
+  "Kazakhstan",
+  "Kenya",
+  "Kiribati",
+  "Korea, Democratic People's Republic of",
+  "Korea, Republic of",
+  "Kuwait",
+  "Kyrgyzstan",
+  "Lao People's Democratic Republic",
+  "Latvia",
+  "Lebanon",
+  "Lesotho",
+  "Liberia",
+  "Libya",
+  "Liechtenstein",
+  "Lithuania",
+  "Luxembourg",
+  "Macao",
+  "Macedonia, Republic of",
+  "Madagascar",
+  "Malawi",
+  "Malaysia",
+  "Maldives",
+  "Mali",
+  "Malta",
+  "Marshall Islands",
+  "Martinique",
+  "Mauritania",
+  "Mauritius",
+  "Mayotte",
+  "Mexico",
+  "Micronesia, Federated States of",
+  "Moldova, Republic of",
+  "Monaco",
+  "Mongolia",
+  "Montenegro",
+  "Montserrat",
+  "Morocco",
+  "Mozambique",
+  "Myanmar",
+  "Namibia",
+  "Nauru",
+  "Nepal",
+  "Netherlands",
+  "New Caledonia",
+  "New Zealand",
+  "Nicaragua",
+  "Niger",
+  "Nigeria",
+  "Niue",
+  "Norfolk Island",
+  "Northern Mariana Islands",
+  "Norway",
+  "Oman",
+  "Pakistan",
+  "Palau",
+  "Palestinian Territory, Occupied",
+  "Panama",
+  "Papua New Guinea",
+  "Paraguay",
+  "Peru",
+  "Philippines",
+  "Pitcairn",
+  "Poland",
+  "Portugal",
+  "Qatar",
+  "Romania",
+  "Russian Federation",
+  "Rwanda",
+  "Réunion",
+  "Saint Barthélemy",
+  "Saint Helena, Ascension and Tristan da Cunha",
+  "Saint Kitts and Nevis",
+  "Saint Lucia",
+  "Saint Martin (French part)",
+  "Saint Pierre and Miquelon",
+  "Saint Vincent and the Grenadines",
+  "Samoa",
+  "San Marino",
+  "Sao Tome and Principe",
+  "Saudi Arabia",
+  "Senegal",
+  "Serbia",
+  "Seychelles",
+  "Sierra Leone",
+  "Singapore",
+  "Sint Maarten (Dutch part)",
+  "Slovakia",
+  "Slovenia",
+  "Solomon Islands",
+  "Somalia",
+  "South Africa",
+  "South Georgia and the South Sandwich Islands",
+  "South Sudan",
+  "Spain",
+  "Sri Lanka",
+  "Sudan",
+  "Suriname",
+  "Svalbard and Jan Mayen",
+  "Swaziland",
+  "Sweden",
+  "Switzerland",
+  "Syrian Arab Republic",
+  "Taiwan",
+  "Tajikistan",
+  "Tanzania, United Republic of",
+  "Thailand",
+  "Timor-Leste",
+  "Togo",
+  "Tokelau",
+  "Tonga",
+  "Trinidad and Tobago",
+  "Tunisia",
+  "Turkey",
+  "Turkmenistan",
+  "Turks and Caicos Islands",
+  "Tuvalu",
+  "Uganda",
+  "Ukraine",
+  "United Arab Emirates",
+  "United Kingdom",
+  "United States",
+  "United States Minor Outlying Islands",
+  "Uruguay",
+  "Uzbekistan",
+  "Vanuatu",
+  "Venezuela, Bolivarian Republic of",
+  "Viet Nam",
+  "Virgin Islands, British",
+  "Virgin Islands, U.S.",
+  "Wallis and Futuna",
+  "Western Sahara",
+  "Yemen",
+  "Zambia",
+  "Zimbabwe",
+  "Åland Islands"
+]

package/components/fields/country/field.vue

@@ -0,0 +1,81 @@
+<template>
+  <div :style="genericStyles()" :class="classes()">
+    <!-- <v-select
+    clearable
+    :autocomplete="true"
+    :label="spec.label"
+    :name="spec.name"
+    :value="spec.value"
+    :items="countryOptions"
+    v-model="country"
+    />
+
+    <v-select v-if="regionField && regionOptions"
+    clearable
+    :autocomplete="true"
+    :label="regionField.label"
+    :items="regionOptions"
+    :name="regionField.name"
+    :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-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')"
+    />
+  </div>
+</template>
+
+<script>
+import countries from "./countries";
+import regions from "./regions";
+
+export default {
+  props: {
+    spec: { type: Object, required: true }
+  },
+  data() {
+    return {
+      countryOptions: countries,
+      country: this.spec.value
+    };
+  },
+  computed: {
+    regionField: function() {
+      return this.spec.region;
+    },
+    regionOptions: function() {
+      return regions[this.country];
+    }
+  },
+  methods: {
+    classes() {
+      return this.$classes().concat("g-text-field--hintless");
+    }
+  }
+};
+</script>
+
+<style scoped></style>