@vcita/design-system 1.1.0 → 1.1.1

package/CHANGELOG.MD

@@ -5,6 +5,7 @@ Format based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ### Unreleased changes
+- VcTextField - add google address autocomplete
 
 ### 1.1.0 (2022-08-08)
 - VcDocItem - implemented uploaded and corrupted states

package/config/locales/ds.de.yml

@@ -6,11 +6,29 @@ de:
       next: Weiter
     modal:
       cancel: Abbrechen
-      ok: OK
+      ok: Ok
       done: Fertig
     progress_circular:
       next: 'Weiter:'
     listbox:
       add: Neuen Kontakt hinzufügen
+      empty_list: Keine Ergebnisse gefunden
     dropzone:
-      default_title: 
+      default_title: Absenden
+    search_bar:
+      label: Suchen
+    time_since:
+      years: Vor {years} Jahren
+      months: Vor {months} Monaten
+      days: Vor {days} Tagen
+      yesterday: Gestern
+      hours: Vor {hours} Stunden
+      minutes: Vor {minutes} Minuten
+      now: Jetzt
+    document:
+      signature: 
+      corrupted: Dateityp wird nicht unterstützt und konnte nicht hochgeladen werden
+    multi_select:
+      no_data: Keine Daten verfügbar.
+      placeholder: 
+      error_label: Bitte eine Dienstleistung auswählen

package/config/locales/ds.en.yml

@@ -18,17 +18,17 @@ en:
     search_bar:
       label: Search
     time_since:
-      years: '{years} years ago'
-      months: '{months} months ago'
-      days: '{days} days ago'
-      yesterday: 'Yesterday'
-      hours: '{hours} hours ago'
-      minutes: '{minutes} minutes ago'
-      now: 'Just now'
+      years: "{years} years ago"
+      months: "{months} months ago"
+      days: "{days} days ago"
+      yesterday: Yesterday
+      hours: "{hours} hours ago"
+      minutes: "{minutes} minutes ago"
+      now: Just now
     document:
       signature: E-Signature
       corrupted: File type not supported and could not be uploaded
     multi_select:
       no_data: No data available
       placeholder: Select items
-      error_label: Please select an item
+      error_label: Please select an item

package/config/locales/ds.es.yml

@@ -12,5 +12,23 @@ es:
       next: 'Siguiente:'
     listbox:
       add: Agregar nuevo contacto
+      empty_list: No se encontró ningún resultado
     dropzone:
-      default_title: 
+      default_title: Enviar
+    search_bar:
+      label: Buscar
+    time_since:
+      years: Hace {years} años
+      months: Hace {months} meses
+      days: Hace {days} días
+      yesterday: Ayer
+      hours: Hace {hours} horas
+      minutes: Hace {minutes} minutos
+      now: Justo ahora
+    document:
+      signature: 
+      corrupted: El tipo de archivo no es compatible y no se pudo subir
+    multi_select:
+      no_data: No hay datos disponibles
+      placeholder: 
+      error_label: Por favor seleccione un producto

package/config/locales/ds.fr.yml

@@ -12,5 +12,23 @@ fr:
       next: 'Suivant :'
     listbox:
       add: Ajouter nouveau contact
+      empty_list: Aucun résultat à afficher
     dropzone:
-      default_title: 
+      default_title: Envoyer
+    search_bar:
+      label: Lancer une recherche
+    time_since:
+      years: il y a {years} années
+      months: il y a {months} mois
+      days: il y a {days} jours
+      yesterday: Hier
+      hours: il y a {hours} heures
+      minutes: il y a {minutes} minutes
+      now: A l'instant
+    document:
+      signature: 
+      corrupted: Ce type de fichier n'est pas pris en charge et n'a pas pu être chargé
+    multi_select:
+      no_data: Aucune donnée à afficher
+      placeholder: 
+      error_label: Veuillez sélectionner un article

package/config/locales/ds.he.yml

@@ -12,5 +12,23 @@ he:
       next: "הבא:"
     listbox:
       add: "הוספה של איש קשר חדש"
+      empty_list: "לא נמצאו תוצאות"
     dropzone:
-      default_title: 
+      default_title: "שלח"
+    search_bar:
+      label: "חיפוש"
+    time_since:
+      years: "לפני {years} שנים"
+      months: "לפני {months} חודשים"
+      days: "לפני {days} ימים"
+      yesterday: "אתמול"
+      hours: "לפני {hours} שעות"
+      minutes: "לפני {minutes} דקות"
+      now: "הרגע"
+    document:
+      signature: 
+      corrupted: "אין אפשרות להעלות את הקובץ מאחר וסוג קובץ זה לא נתמך"
+    multi_select:
+      no_data: "לא קיימים נתונים שאפשר להציג"
+      placeholder: 
+      error_label: "בחרו פריט מהרשימה"

package/config/locales/ds.it.yml

@@ -12,5 +12,23 @@ it:
       next: 'Avanti:'
     listbox:
       add: Aggiungi nuovo contatto
+      empty_list: Nessun risultato trovato
     dropzone:
-      default_title: 
+      default_title: Invia
+    search_bar:
+      label: Cerca
+    time_since:
+      years: "{years} anni fa"
+      months: "{months} mesi fa"
+      days: "{days} anni fa"
+      yesterday: Ieri
+      hours: "{hours} anni fa"
+      minutes: "{minutes} minuti fa"
+      now: Adesso
+    document:
+      signature: 
+      corrupted: Tipo di file non supportato e non può essere caricato
+    multi_select:
+      no_data: Nessun dato disponibile
+      placeholder: 
+      error_label: Per favore seleziona una voce

package/config/locales/ds.keys.yml

@@ -12,5 +12,23 @@ keys:
       next: ds.progress_circular.next
     listbox:
       add: ds.listbox.add
+      empty_list: ds.listbox.empty_list
     dropzone:
       default_title: ds.dropzone.default_title
+    search_bar:
+      label: ds.search_bar.label
+    time_since:
+      years: ds.time_since.years
+      months: ds.time_since.months
+      days: ds.time_since.days
+      yesterday: ds.time_since.yesterday
+      hours: ds.time_since.hours
+      minutes: ds.time_since.minutes
+      now: ds.time_since.now
+    document:
+      signature: ds.document.signature
+      corrupted: ds.document.corrupted
+    multi_select:
+      no_data: ds.multi_select.no_data
+      placeholder: ds.multi_select.placeholder
+      error_label: ds.multi_select.error_label

package/config/locales/ds.nl.yml

@@ -12,5 +12,23 @@ nl:
       next: 'Volgende:'
     listbox:
       add: Nieuw contact toevoegen
+      empty_list: Geen resultaat gevonden
     dropzone:
-      default_title: 
+      default_title: Opslaan
+    search_bar:
+      label: Zoek
+    time_since:
+      years: "{years} jaar geleden"
+      months: "{months} maanden geleden"
+      days: "{days} dagen geleden"
+      yesterday: Gisteren
+      hours: "{hours} uur geleden"
+      minutes: "{minutes} minuten geleden"
+      now: Precies nu
+    document:
+      signature: 
+      corrupted: Bestandstype niet ondersteund en kon niet worden geüpload
+    multi_select:
+      no_data: Geen data beschikbaar
+      placeholder: 
+      error_label: Selecteer een item

package/config/locales/ds.pl.yml

@@ -6,11 +6,29 @@ pl:
       next: Dalej
     modal:
       cancel: Anuluj
-      ok: Ok
+      ok: OK
       done: Gotowe
     progress_circular:
       next: 'Dalej:'
     listbox:
       add: Dodaj nowy kontakt
+      empty_list: Brak wyników
     dropzone:
-      default_title: 
+      default_title: Wyślij
+    search_bar:
+      label: Szukaj
+    time_since:
+      years: "{years} lat(a) temu"
+      months: "{months} miesiące(-y) temu"
+      days: "{days} dni temu"
+      yesterday: Wczoraj
+      hours: "{hours} godz. temu"
+      minutes: "{minutes} min temu"
+      now: Teraz
+    document:
+      signature: 
+      corrupted: Typ pliku jest nieobsługiwany i nie można go wgrać
+    multi_select:
+      no_data: Brak danych
+      placeholder: 
+      error_label: Wybierz element

package/config/locales/ds.pseudo.yml

@@ -12,5 +12,23 @@ pseudo:
       next: 'Néxt: Néx'
     listbox:
       add: "Ädd néw çontåçt Ädd néw"
+      empty_list: No réšult found No réšu
     dropzone:
       default_title: Submit Sub
+    search_bar:
+      label: Séårçh Séå
+    time_since:
+      years: "{yéårš} yéårš ågo {yéårš} "
+      months: "{monthš} monthš ågo {monthš} "
+      days: "{dåyš} dåyš ågo {dåyš} "
+      yesterday: Yéštérdåy Yéšté
+      hours: "{hourš} hourš ågo {hourš} "
+      minutes: "{minutéš} minutéš ågo {minutéš}"
+      now: Jušt now Jušt
+    document:
+      signature: "Ę-Signåturé Ę-Sig"
+      corrupted: Filé typé not šupportéd ånd çould not bé uploådéd Filé typé not šupport
+    multi_select:
+      no_data: 'No dåtå åvåilåblé No dåtå '
+      placeholder: Séléçt itémš Séléçt
+      error_label: Pléåšé šéléçt ån itém Pléåšé šé

package/config/locales/ds.pt.yml

@@ -12,5 +12,23 @@ pt:
       next: Próximo;
     listbox:
       add: Adicionar contato novo
+      empty_list: Nenhum resultado encontrado
     dropzone:
-      default_title: 
+      default_title: Enviar
+    search_bar:
+      label: Procurar
+    time_since:
+      years: Há {years} anos
+      months: Há {months} meses
+      days: Há {days} dias
+      yesterday: Ontem
+      hours: Há {hours} horas
+      minutes: Há {minutes} minutos
+      now: Agora mesmo
+    document:
+      signature: 
+      corrupted: O tipo de arquivo não é suportado e não pode ser carregado
+    multi_select:
+      no_data: Sem data disponível
+      placeholder: 
+      error_label: Selecionar um item

package/dist/@vcita/design-system.esm.js

@@ -3601,7 +3601,107 @@ var script$A = {
     singleLine: {
       type: Boolean,
       default: false
+    },
+    googleAddressAutoComplete: {
+      type: Boolean,
+      default: false
+    },
+    googleAddressCountryOptions: {
+      type: Array,
+      default: () => []
+    }
+  },
+
+  mounted() {
+    if (this.googleAddressAutoComplete) {
+      var _window$google;
+
+      const googleAddressScriptId = 'googleAddressScript';
+      const existingScript = document.getElementById(googleAddressScriptId);
+      const autoCompleteClass = (_window$google = window.google) === null || _window$google === void 0 ? void 0 : _window$google.maps.places.Autocomplete; // Script loading completed
+
+      if (existingScript && autoCompleteClass) {
+        this.initAutoComplete();
+      } else {
+        let googleAutocompleteScript = existingScript;
+
+        if (!googleAutocompleteScript) {
+          googleAutocompleteScript = document.createElement('script');
+          googleAutocompleteScript.setAttribute('id', googleAddressScriptId);
+          googleAutocompleteScript.setAttribute('src', `https://maps.googleapis.com/maps/api/js?key=${this.$ds.googleAppKey}&channel=1&libraries=places`);
+        }
+
+        googleAutocompleteScript.addEventListener('load', this.initAutoComplete);
+        document.body.appendChild(googleAutocompleteScript);
+      }
+    }
+  },
+
+  methods: {
+    initAutoComplete() {
+      let options = {
+        fields: ['name', 'address_component'],
+        types: ['address']
+      };
+
+      if (this.googleAddressCountryOptions.length > 0) {
+        options['componentRestrictions'] = {
+          country: this.googleAddressCountryOptions
+        };
+      }
+
+      const input = this.$children[0].$el.getElementsByClassName('v-text-field__slot')[0].getElementsByTagName("input")[0]; // this deny google default placeholder to be added, and doesn't overrides placeholder prop.
+
+      input.placeholder = '';
+      this.autocomplete = new window.google.maps.places.Autocomplete(input, options);
+      this.autocomplete.addListener('place_changed', this.emitGoogleSelectedPlace);
+    },
+
+    emitGoogleSelectedPlace() {
+      let googlePlace = this.autocomplete.getPlace();
+      let selectedPlace = {};
+      selectedPlace['address'] = googlePlace.name;
+
+      for (const component of googlePlace.address_components) {
+        const componentType = component.types[0];
+
+        switch (componentType) {
+          case "postal_code":
+            {
+              selectedPlace['postcode'] = component.long_name;
+              break;
+            }
+
+          case "administrative_area_level_1":
+            {
+              selectedPlace['state'] = component.long_name;
+              selectedPlace['stateCode'] = component.short_name;
+              break;
+            }
+
+          case "country":
+            selectedPlace['country'] = component.long_name;
+            selectedPlace['countryCode'] = component.short_name;
+            break;
+
+          case "locality":
+            selectedPlace['city'] = component.long_name;
+            break;
+
+          case "sublocality_level_1":
+            if (!selectedPlace['city']) {
+              selectedPlace['city'] = component.long_name;
+            }
+
+            break;
+        }
+      }
+
+      this.$emit('onPlaceSelected', { ...selectedPlace,
+        googlePlace
+      });
     }
+
   }
 };
 
@@ -3672,8 +3772,8 @@ var __vue_staticRenderFns__$A = [];
 
 const __vue_inject_styles__$A = function (inject) {
   if (!inject) return;
-  inject("data-v-cd22b9c2_0", {
-    source: ".VcTextInput.v-text-field[data-v-cd22b9c2]{font-family:var(--primary-font-family)}.VcTextInput.v-text-field[data-v-cd22b9c2] .v-input__slot{padding:0 var(--size-value3);height:var(--size-value13);background:#fff;border:1px solid var(--gray-lighten-1);box-sizing:border-box;border-radius:6px}.VcTextInput.v-text-field[data-v-cd22b9c2] .v-input__slot label{font-size:var(--font-size-small2);line-height:var(--size-value5);color:var(--gray-darken-3);font-weight:var(--font-weight-medium)}.VcTextInput.v-text-field[data-v-cd22b9c2] .v-input__slot .v-text-field__prefix{color:var(--gray-darken-5)}.VcTextInput.v-text-field[data-v-cd22b9c2] .v-input__slot input{font-weight:var(--font-weight-medium2);font-size:var(--font-size-small2);line-height:var(--size-value5);color:var(--gray-darken-5);caret-color:var(--gray-darken-3)}.VcTextInput.v-text-field[data-v-cd22b9c2] .v-input__slot input::placeholder{font-weight:var(--font-weight-medium)}.VcTextInput.v-text-field[data-v-cd22b9c2] .v-input__slot:after,.VcTextInput.v-text-field[data-v-cd22b9c2] .v-input__slot:before{display:none}.VcTextInput.v-text-field[data-v-cd22b9c2] .v-input__slot:hover{border-color:var(--gray-darken-3)}.VcTextInput.v-text-field[data-v-cd22b9c2] .v-input__slot:active,.VcTextInput.v-text-field[data-v-cd22b9c2] .v-input__slot:focus,.VcTextInput.v-text-field[data-v-cd22b9c2] .v-input__slot:focus-within{border:1px solid var(--v-secondary-base);box-shadow:0 0 0 3px var(--v-secondary-lighten1)}.VcTextInput.v-text-field[data-v-cd22b9c2] .v-input__slot:active input,.VcTextInput.v-text-field[data-v-cd22b9c2] .v-input__slot:focus input,.VcTextInput.v-text-field[data-v-cd22b9c2] .v-input__slot:focus-within input{color:var(--gray-darken-3)}.VcTextInput.v-text-field[data-v-cd22b9c2].error--text .v-input__slot{border-color:var(--red);color:unset;box-shadow:unset;font-size:var(--font-size-xx-small);line-height:var(--size-value4)}.VcTextInput.v-text-field[data-v-cd22b9c2].v-input--is-focused label,.VcTextInput.v-text-field[data-v-cd22b9c2].v-input--is-label-active label{font-size:var(--font-size-small);line-height:1.17;letter-spacing:-.3px;color:var(--gray-darken-4)!important;transform:translateY(-100%) scale(.85);top:var(--size-value2)}.VcTextInput.v-text-field[data-v-cd22b9c2].v-input--is-focused .v-text-field__slot,.VcTextInput.v-text-field[data-v-cd22b9c2].v-input--is-label-active .v-text-field__slot{margin-bottom:-14px}.VcTextInput.v-text-field[data-v-cd22b9c2].v-input--is-disabled .v-input__slot{background:var(--gray-lighten-3);border:1px solid var(--gray-lighten-1)}.VcTextInput.v-text-field[data-v-cd22b9c2].v-input--is-disabled .v-input__slot input,.VcTextInput.v-text-field[data-v-cd22b9c2].v-input--is-disabled .v-input__slot label{color:var(--gray-darken-2)}.VcTextInput.v-text-field[data-v-cd22b9c2]:not(.v-input--is-label-active):not(.v-input--is-focused) input{padding:var(--size-value2) 0}.VcTextInput.v-text-field[data-v-cd22b9c2] .v-messages__message{line-height:var(--size-value4)}.VcTextInput.v-text-field[data-v-cd22b9c2] .v-input__append-inner{align-self:center;fill:var(--gray-darken-3)}.VcTextInput.v-text-field[data-v-cd22b9c2].v-input--dense:not(.v-text-field--outlined) input{padding-block:var(--size-value2)}",
+  inject("data-v-347e8306_0", {
+    source: ".VcTextInput.v-text-field[data-v-347e8306]{font-family:var(--primary-font-family)}.VcTextInput.v-text-field[data-v-347e8306] .v-input__slot{padding:0 var(--size-value3);height:var(--size-value13);background:#fff;border:1px solid var(--gray-lighten-1);box-sizing:border-box;border-radius:6px}.VcTextInput.v-text-field[data-v-347e8306] .v-input__slot label{font-size:var(--font-size-small2);line-height:var(--size-value5);color:var(--gray-darken-3);font-weight:var(--font-weight-medium)}.VcTextInput.v-text-field[data-v-347e8306] .v-input__slot .v-text-field__prefix{color:var(--gray-darken-5)}.VcTextInput.v-text-field[data-v-347e8306] .v-input__slot input{font-weight:var(--font-weight-medium2);font-size:var(--font-size-small2);line-height:var(--size-value5);color:var(--gray-darken-5);caret-color:var(--gray-darken-3)}.VcTextInput.v-text-field[data-v-347e8306] .v-input__slot input::placeholder{font-weight:var(--font-weight-medium)}.VcTextInput.v-text-field[data-v-347e8306] .v-input__slot:after,.VcTextInput.v-text-field[data-v-347e8306] .v-input__slot:before{display:none}.VcTextInput.v-text-field[data-v-347e8306] .v-input__slot:hover{border-color:var(--gray-darken-3)}.VcTextInput.v-text-field[data-v-347e8306] .v-input__slot:active,.VcTextInput.v-text-field[data-v-347e8306] .v-input__slot:focus,.VcTextInput.v-text-field[data-v-347e8306] .v-input__slot:focus-within{border:1px solid var(--v-secondary-base);box-shadow:0 0 0 3px var(--v-secondary-lighten1)}.VcTextInput.v-text-field[data-v-347e8306] .v-input__slot:active input,.VcTextInput.v-text-field[data-v-347e8306] .v-input__slot:focus input,.VcTextInput.v-text-field[data-v-347e8306] .v-input__slot:focus-within input{color:var(--gray-darken-3)}.VcTextInput.v-text-field[data-v-347e8306].error--text .v-input__slot{border-color:var(--red);color:unset;box-shadow:unset;font-size:var(--font-size-xx-small);line-height:var(--size-value4)}.VcTextInput.v-text-field[data-v-347e8306].v-input--is-focused label,.VcTextInput.v-text-field[data-v-347e8306].v-input--is-label-active label{font-size:var(--font-size-small);line-height:1.17;letter-spacing:-.3px;color:var(--gray-darken-4)!important;transform:translateY(-100%) scale(.85);top:var(--size-value2)}.VcTextInput.v-text-field[data-v-347e8306].v-input--is-focused .v-text-field__slot,.VcTextInput.v-text-field[data-v-347e8306].v-input--is-label-active .v-text-field__slot{margin-bottom:-14px}.VcTextInput.v-text-field[data-v-347e8306].v-input--is-disabled .v-input__slot{background:var(--gray-lighten-3);border:1px solid var(--gray-lighten-1)}.VcTextInput.v-text-field[data-v-347e8306].v-input--is-disabled .v-input__slot input,.VcTextInput.v-text-field[data-v-347e8306].v-input--is-disabled .v-input__slot label{color:var(--gray-darken-2)}.VcTextInput.v-text-field[data-v-347e8306]:not(.v-input--is-label-active):not(.v-input--is-focused) input{padding:var(--size-value2) 0}.VcTextInput.v-text-field[data-v-347e8306] .v-messages__message{line-height:var(--size-value4)}.VcTextInput.v-text-field[data-v-347e8306] .v-input__append-inner{align-self:center;fill:var(--gray-darken-3)}.VcTextInput.v-text-field[data-v-347e8306].v-input--dense:not(.v-text-field--outlined) input{padding-block:var(--size-value2)}",
     map: undefined,
     media: undefined
   });
@@ -3681,7 +3781,7 @@ const __vue_inject_styles__$A = function (inject) {
 /* scoped */
 
 
-const __vue_scope_id__$A = "data-v-cd22b9c2";
+const __vue_scope_id__$A = "data-v-347e8306";
 /* module identifier */
 
 const __vue_module_identifier__$A = undefined;