@juit/vue-z 0.0.62 → 0.0.63

package/dist/index.css

@@ -32,7 +32,7 @@
 
 /* Suffix behind the input */
 .z-suffix {
-&[data-v-659f41b5] {
+&[data-v-6b64624e] {
   user-select: none;
   position: absolute;
   top: 0;
@@ -42,9 +42,9 @@
   overflow: hidden;
   font-weight: 500
 }
-.z-suffix-hidden[data-v-659f41b5] { color: transparent
+.z-suffix-hidden[data-v-6b64624e] { color: transparent
 }
-.z-suffix-visible[data-v-659f41b5] { opacity: 0.5
+.z-suffix-visible[data-v-6b64624e] { opacity: 0.5
 }
 }
 
@@ -68,13 +68,13 @@
 }
 }
 
-.autocomplete-match[data-v-d0db92ea] {
+.autocomplete-match[data-v-039ff3b5] {
   font-weight: 700;
 }
-.autocomplete-miss[data-v-d0db92ea] {
+.autocomplete-miss[data-v-039ff3b5] {
   font-weight: 400;
 }
-.autocomplete-secondary[data-v-d0db92ea] {
+.autocomplete-secondary[data-v-039ff3b5] {
   font-size: 0.75em;
 }
 

package/dist/index.d.ts

@@ -317,6 +317,12 @@ type: PropType<ZValidator<number>[]>;
 required: false;
 default: () => never[];
 };
+/** Indicates that the field can be cleared */
+clearable: {
+type: BooleanConstructor;
+required: false;
+default: boolean;
+};
 modelValue: {
 type: PropType<number>;
 };
@@ -418,6 +424,12 @@ type: PropType<ZValidator<number>[]>;
 required: false;
 default: () => never[];
 };
+/** Indicates that the field can be cleared */
+clearable: {
+type: BooleanConstructor;
+required: false;
+default: boolean;
+};
 modelValue: {
 type: PropType<number>;
 };
@@ -436,6 +448,7 @@ placeholder: string;
 hint: string | undefined;
 suffix: string;
 rules: ZValidator<number>[];
+clearable: boolean;
 minimum: number | undefined;
 maximum: number | undefined;
 }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
@@ -1570,6 +1583,12 @@ type: PropType<ValidationRule<string>[]>;
 required: false;
 default: () => never[];
 };
+/** Indicates that the field can be cleared */
+clearable: {
+type: BooleanConstructor;
+required: false;
+default: boolean;
+};
 /** Used as `@click="..."` in a template, when clicking on text field */
 onClick: {
 type: PropType<((event: PointerEvent) => any) | undefined>;
@@ -1734,6 +1753,12 @@ type: PropType<ValidationRule<string>[]>;
 required: false;
 default: () => never[];
 };
+/** Indicates that the field can be cleared */
+clearable: {
+type: BooleanConstructor;
+required: false;
+default: boolean;
+};
 /** Used as `@click="..."` in a template, when clicking on text field */
 onClick: {
 type: PropType<((event: PointerEvent) => any) | undefined>;
@@ -1784,6 +1809,7 @@ prefix: string;
 raw: boolean;
 maxLength: number;
 rules: ValidationRule<string>[];
+clearable: boolean;
 onClickIcon: ((event: PointerEvent) => any) | undefined;
 onClear: (() => any) | undefined;
 }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
@@ -3886,6 +3912,12 @@ type: PropType<ZValidator<string>[]>;
 required: false;
 default: () => never[];
 };
+/** Indicates that the field can be cleared */
+clearable: {
+type: BooleanConstructor;
+required: false;
+default: boolean;
+};
 modelValue: {
 type: PropType<string>;
 };
@@ -3962,6 +3994,12 @@ type: PropType<ZValidator<string>[]>;
 required: false;
 default: () => never[];
 };
+/** Indicates that the field can be cleared */
+clearable: {
+type: BooleanConstructor;
+required: false;
+default: boolean;
+};
 modelValue: {
 type: PropType<string>;
 };
@@ -3978,6 +4016,7 @@ readonly: boolean | undefined;
 placeholder: string;
 hint: string | undefined;
 rules: ZValidator<string>[];
+clearable: boolean;
 minLength: number;
 }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
 
@@ -4051,6 +4090,12 @@ type: BooleanConstructor;
 required: false;
 default: boolean;
 };
+/** Indicates that the field can be cleared */
+clearable: {
+type: BooleanConstructor;
+required: false;
+default: boolean;
+};
 modelValue: {
 type: PropType<string[]>;
 };
@@ -4121,6 +4166,12 @@ type: BooleanConstructor;
 required: false;
 default: boolean;
 };
+/** Indicates that the field can be cleared */
+clearable: {
+type: BooleanConstructor;
+required: false;
+default: boolean;
+};
 modelValue: {
 type: PropType<string[]>;
 };
@@ -4136,6 +4187,7 @@ bottomSlots: boolean | undefined;
 readonly: boolean | undefined;
 placeholder: string;
 hint: string | undefined;
+clearable: boolean;
 tags: string[];
 noNewValues: boolean;
 }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
@@ -4209,6 +4261,12 @@ type: PropType<ZValidator<string>[]>;
 required: false;
 default: () => never[];
 };
+/** Indicates that the field can be cleared */
+clearable: {
+type: BooleanConstructor;
+required: false;
+default: boolean;
+};
 modelValue: {
 type: PropType<string>;
 };
@@ -4290,6 +4348,12 @@ type: PropType<ZValidator<string>[]>;
 required: false;
 default: () => never[];
 };
+/** Indicates that the field can be cleared */
+clearable: {
+type: BooleanConstructor;
+required: false;
+default: boolean;
+};
 modelValue: {
 type: PropType<string>;
 };
@@ -4306,6 +4370,7 @@ readonly: boolean | undefined;
 placeholder: string;
 hint: string | undefined;
 rules: ZValidator<string>[];
+clearable: boolean;
 country: string;
 }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
 

package/dist/index.js

@@ -962,6 +962,13 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
       required: false,
       default: () => []
     },
+    /* ===== UTILITY PROPS ==================================================== */
+    /** Indicates that the field can be cleared */
+    clearable: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     /* ===== EMITS AS PROPS =================================================== */
     /** Used as `@click="..."` in a template, when clicking on text field */
     onClick: {
@@ -1164,7 +1171,7 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
                     key: 1,
                     name: unref(icons).required,
                     class: "z-icon"
-                  }, null, 8, ["name"])) : _onClear.value ? (openBlock(), createBlock(unref(QIcon), {
+                  }, null, 8, ["name"])) : __props.clearable && _onClear.value ? (openBlock(), createBlock(unref(QIcon), {
                     key: 2,
                     name: unref(icons).cancel,
                     class: "z-icon z-icon-clickable",
@@ -1229,7 +1236,7 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const ZText = /* @__PURE__ */ _export_sfc(_sfc_main$y, [["__scopeId", "data-v-659f41b5"]]);
+const ZText = /* @__PURE__ */ _export_sfc(_sfc_main$y, [["__scopeId", "data-v-6b64624e"]]);
 const _sfc_main$x = /* @__PURE__ */ defineComponent({
   ...{ name: "ZString" },
   __name: "string",
@@ -2255,42 +2262,39 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
       /** Focus on this control */
       focus: () => _zautocomplete.value?.focus()
     });
-    let _googleService = void 0;
     async function _predictAddress(value) {
-      if (!_googleService) {
-        if (!globalThis.google?.maps?.places?.AutocompleteService) {
-          throw new Error("Google Maps AutocompleteService not available");
-        }
-        _googleService = new google.maps.places.AutocompleteService();
+      if (!globalThis.google?.maps?.places?.AutocompleteSuggestion) {
+        throw new Error("Google Maps AutocompleteSuggestion not available");
       }
       if (!value) return [];
+      const { AutocompleteSuggestion: _AutocompleteSuggestion } = await google.maps.importLibrary("places");
       const request = {
         input: value,
-        types: ["address"],
-        region: _props.region,
-        language: locale.toString()
+        language: locale.toString(),
+        // restrict autocomplete to generic address-like results, excluding POIs
+        includedPrimaryTypes: ["street_address", "route", "premise", "subpremise"],
+        // restrict results to the current country or specified region
+        region: _props.region || void 0
       };
-      const response = await _googleService.getPlacePredictions(request);
+      const response = await _AutocompleteSuggestion.fetchAutocompleteSuggestions(request);
       const predictions = [];
-      for (const prediction of response.predictions) {
+      for (const suggestion of response.suggestions) {
+        const prediction = suggestion.placePrediction;
+        if (!prediction) continue;
+        if (prediction.types.includes("establishment") || prediction.types.includes("point_of_interest")) continue;
+        const placeId = prediction.placeId;
+        if (!placeId) continue;
+        const mainText = prediction.mainText?.toString() || prediction.text?.toString() || "";
+        const secondary = prediction.secondaryText?.toString() || "";
         const current = {
-          value: prediction.place_id,
-          label: prediction.description,
+          value: placeId,
+          label: prediction.text?.toString() || "",
           tokens: []
         };
-        let pos = 0;
-        for (const subs of prediction.structured_formatting.main_text_matched_substrings) {
-          const off = subs.offset;
-          const end = subs.offset + subs.length;
-          const miss2 = prediction.structured_formatting.main_text.slice(pos, off);
-          const match = prediction.structured_formatting.main_text.slice(off, end);
-          if (miss2) current.tokens.push({ value: miss2, type: "miss" });
-          if (match) current.tokens.push({ value: match, type: "match" });
-          pos = end;
+        if (mainText) {
+          current.tokens.push({ value: mainText.slice(0, value.length), type: "match" });
+          current.tokens.push({ value: mainText.slice(value.length), type: "miss" });
         }
-        const miss = prediction.structured_formatting.main_text.slice(pos);
-        const secondary = prediction.structured_formatting.secondary_text;
-        if (miss) current.tokens.push({ value: miss, type: "miss" });
         if (secondary) current.tokens.push({ value: ` - ${secondary}`, type: "secondary" });
         predictions.push(current);
       }
@@ -2376,7 +2380,7 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const ZAddress = /* @__PURE__ */ _export_sfc(_sfc_main$o, [["__scopeId", "data-v-d0db92ea"]]);
+const ZAddress = /* @__PURE__ */ _export_sfc(_sfc_main$o, [["__scopeId", "data-v-039ff3b5"]]);
 const _hoisted_1$8 = { class: "z-input" };
 const _sfc_main$n = /* @__PURE__ */ defineComponent({
   ...{ name: "ZSelect" },
@@ -2842,6 +2846,7 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
         editable: _ctx.editable,
         disabled: _ctx.disabled,
         readonly: _ctx.readonly,
+        clearable: !!__props.clearable,
         required: __props.required,
         "on-clear": _onClear.value,
         onClick: _onClick
@@ -2879,7 +2884,7 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
           }, null, 8, ["name"]))
         ]),
         _: 1
-      }, 16, ["model-value", "label", "placeholder", "hint", "bottom-slots", "editable", "disabled", "readonly", "required", "on-clear"]);
+      }, 16, ["model-value", "label", "placeholder", "hint", "bottom-slots", "editable", "disabled", "readonly", "clearable", "required", "on-clear"]);
     };
   }
 });
@@ -3002,6 +3007,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
         editable: _ctx.editable,
         disabled: _ctx.disabled,
         readonly: _ctx.readonly,
+        clearable: !!__props.clearable,
         required: __props.required,
         "on-clear": _onClear.value,
         onClick: _onClick
@@ -3038,7 +3044,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
           }, null, 8, ["name"]))
         ]),
         _: 1
-      }, 16, ["model-value", "label", "placeholder", "hint", "bottom-slots", "editable", "disabled", "readonly", "required", "on-clear"]);
+      }, 16, ["model-value", "label", "placeholder", "hint", "bottom-slots", "editable", "disabled", "readonly", "clearable", "required", "on-clear"]);
     };
   }
 });
@@ -3257,6 +3263,13 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
       required: false,
       default: () => []
     },
+    /* ===== UTILITY PROPS ==================================================== */
+    /** Indicates that the field can be cleared */
+    clearable: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     ...componentFormProps
   }, {
     "modelValue": {
@@ -3394,6 +3407,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
         editable: _ctx.editable,
         disabled: _ctx.disabled,
         readonly: _ctx.readonly,
+        clearable: __props.clearable,
         suffix: __props.suffix,
         required: __props.required,
         rules: _rules.value,
@@ -3408,7 +3422,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
           ]),
           key: "0"
         } : void 0
-      ]), 1040, ["modelValue", "mode", "label", "placeholder", "hint", "icon", "bottom-slots", "editable", "disabled", "readonly", "suffix", "required", "rules", "lazy-rules", "on-clear"]);
+      ]), 1040, ["modelValue", "mode", "label", "placeholder", "hint", "icon", "bottom-slots", "editable", "disabled", "readonly", "clearable", "suffix", "required", "rules", "lazy-rules", "on-clear"]);
     };
   }
 });
@@ -3915,6 +3929,13 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
       required: false,
       default: () => []
     },
+    /* ===== UTILITY PROPS ==================================================== */
+    /** Indicates that the field can be cleared */
+    clearable: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     ...componentFormProps
   }, {
     "modelValue": {
@@ -3970,6 +3991,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
         editable: _ctx.editable,
         disabled: _ctx.disabled,
         readonly: _ctx.readonly,
+        clearable: __props.clearable,
         required: __props.required,
         rules: _rules.value,
         "lazy-rules": _ctx.lazyRules,
@@ -3983,7 +4005,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
           }, null, 8, ["name"])
         ]),
         _: 1
-      }, 16, ["modelValue", "type", "label", "placeholder", "hint", "bottom-slots", "editable", "disabled", "readonly", "required", "rules", "lazy-rules"]);
+      }, 16, ["modelValue", "type", "label", "placeholder", "hint", "bottom-slots", "editable", "disabled", "readonly", "clearable", "required", "rules", "lazy-rules"]);
     };
   }
 });
@@ -4243,6 +4265,13 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
       required: false,
       default: false
     },
+    /* ===== UTILITY PROPS ==================================================== */
+    /** Indicates that the field can be cleared */
+    clearable: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     ...componentFormProps
   }, {
     "modelValue": {
@@ -4322,7 +4351,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
               ref_key: "_qselect",
               ref: _qselect,
               modelValue: _value.value,
-              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _value.value = $event),
+              "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => _value.value = $event),
               dense: "",
               outlined: "",
               "stack-label": "",
@@ -4349,6 +4378,12 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
               onKeydown: _onKeydown
             }, {
               append: withCtx(() => [
+                __props.clearable ? (openBlock(), createBlock(unref(QIcon), {
+                  key: 0,
+                  name: unref(icons).cancel,
+                  class: "z-icon z-icon-clickable",
+                  onClick: _cache[0] || (_cache[0] = ($event) => _value.value = [])
+                }, null, 8, ["name"])) : createCommentVNode("", true),
                 createVNode(unref(QIcon), {
                   name: __props.icon,
                   class: "z-icon"
@@ -4692,6 +4727,13 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
       required: false,
       default: () => []
     },
+    /* ===== UTILITY PROPS ==================================================== */
+    /** Indicates that the field can be cleared */
+    clearable: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     ...componentFormProps
   }, {
     "modelValue": {
@@ -4841,12 +4883,13 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
         editable: _ctx.editable,
         disabled: _ctx.disabled,
         readonly: _ctx.readonly,
+        clearable: __props.clearable,
         rules: _rules,
         "lazy-rules": _ctx.lazyRules,
         prefix: _flag.value,
         onBeforeinput: _onBeforeinput,
         onClear: _cache[1] || (_cache[1] = () => _value.value = "")
-      }), null, 16, ["modelValue", "label", "placeholder", "hint", "icon", "bottom-slots", "editable", "disabled", "readonly", "lazy-rules", "prefix"]);
+      }), null, 16, ["modelValue", "label", "placeholder", "hint", "icon", "bottom-slots", "editable", "disabled", "readonly", "clearable", "lazy-rules", "prefix"]);
     };
   }
 });