@desource/phone-mask-vue 0.2.2 → 0.2.3

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @desource/phone-mask-vue
 
+## 0.2.3
+
+### Patch Changes
+
+- Vue: Improve country dropdown scroll
+
+- Updated dependencies []:
+  - @desource/phone-mask@0.2.3
+
 ## 0.2.2
 
 ### Patch Changes

package/dist/index.cjs

@@ -153,7 +153,7 @@ function useCountrySelector(usedLocale) {
     dropdownOpened.value = !dropdownOpened.value;
     if (!dropdownOpened.value) return;
     await vue.nextTick();
-    searchRef.value?.focus();
+    searchRef.value?.focus({ preventScroll: true });
     focusedIndex.value = 0;
   };
   const closeDropdown = () => {
@@ -807,7 +807,19 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       await vue.nextTick();
       const list = dropdownRef.value?.lastElementChild;
       if (!list) return;
-      list.children[focusedIndex.value]?.scrollIntoView?.({ block: "nearest" });
+      const option = list.children[focusedIndex.value];
+      if (!option) return;
+      const listRect = list.getBoundingClientRect();
+      const optionRect = option.getBoundingClientRect();
+      let scrollAmount = 0;
+      if (optionRect.top < listRect.top) {
+        scrollAmount = list.scrollTop - (listRect.top - optionRect.top);
+      } else if (optionRect.bottom > listRect.bottom) {
+        scrollAmount = list.scrollTop + (optionRect.bottom - listRect.bottom);
+      } else {
+        return;
+      }
+      list.scrollTo({ top: scrollAmount, behavior: "smooth" });
     };
     const onDocClick = (ev) => {
       const dropdown = dropdownRef.value;
@@ -1106,7 +1118,7 @@ const _export_sfc = (sfc, props) => {
   }
   return target;
 };
-const PhoneInput = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-a8e96716"]]);
+const PhoneInput = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-95467f81"]]);
 function getNavigatorLang() {
   if (typeof navigator !== "undefined") {
     return navigator.language || "";

package/dist/index.js

@@ -152,7 +152,7 @@ var lib = (function(exports, vue) {
       dropdownOpened.value = !dropdownOpened.value;
       if (!dropdownOpened.value) return;
       await vue.nextTick();
-      searchRef.value?.focus();
+      searchRef.value?.focus({ preventScroll: true });
       focusedIndex.value = 0;
     };
     const closeDropdown = () => {
@@ -806,7 +806,19 @@ var lib = (function(exports, vue) {
         await vue.nextTick();
         const list = dropdownRef.value?.lastElementChild;
         if (!list) return;
-        list.children[focusedIndex.value]?.scrollIntoView?.({ block: "nearest" });
+        const option = list.children[focusedIndex.value];
+        if (!option) return;
+        const listRect = list.getBoundingClientRect();
+        const optionRect = option.getBoundingClientRect();
+        let scrollAmount = 0;
+        if (optionRect.top < listRect.top) {
+          scrollAmount = list.scrollTop - (listRect.top - optionRect.top);
+        } else if (optionRect.bottom > listRect.bottom) {
+          scrollAmount = list.scrollTop + (optionRect.bottom - listRect.bottom);
+        } else {
+          return;
+        }
+        list.scrollTo({ top: scrollAmount, behavior: "smooth" });
       };
       const onDocClick = (ev) => {
         const dropdown = dropdownRef.value;
@@ -1105,7 +1117,7 @@ var lib = (function(exports, vue) {
     }
     return target;
   };
-  const PhoneInput = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-a8e96716"]]);
+  const PhoneInput = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-95467f81"]]);
   function getNavigatorLang() {
     if (typeof navigator !== "undefined") {
       return navigator.language || "";

package/dist/index.mjs

@@ -151,7 +151,7 @@ function useCountrySelector(usedLocale) {
     dropdownOpened.value = !dropdownOpened.value;
     if (!dropdownOpened.value) return;
     await nextTick();
-    searchRef.value?.focus();
+    searchRef.value?.focus({ preventScroll: true });
     focusedIndex.value = 0;
   };
   const closeDropdown = () => {
@@ -805,7 +805,19 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       await nextTick();
       const list = dropdownRef.value?.lastElementChild;
       if (!list) return;
-      list.children[focusedIndex.value]?.scrollIntoView?.({ block: "nearest" });
+      const option = list.children[focusedIndex.value];
+      if (!option) return;
+      const listRect = list.getBoundingClientRect();
+      const optionRect = option.getBoundingClientRect();
+      let scrollAmount = 0;
+      if (optionRect.top < listRect.top) {
+        scrollAmount = list.scrollTop - (listRect.top - optionRect.top);
+      } else if (optionRect.bottom > listRect.bottom) {
+        scrollAmount = list.scrollTop + (optionRect.bottom - listRect.bottom);
+      } else {
+        return;
+      }
+      list.scrollTo({ top: scrollAmount, behavior: "smooth" });
     };
     const onDocClick = (ev) => {
       const dropdown = dropdownRef.value;
@@ -1104,7 +1116,7 @@ const _export_sfc = (sfc, props) => {
   }
   return target;
 };
-const PhoneInput = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-a8e96716"]]);
+const PhoneInput = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-95467f81"]]);
 function getNavigatorLang() {
   if (typeof navigator !== "undefined") {
     return navigator.language || "";

package/dist/phone-mask-vue.css

@@ -77,62 +77,62 @@
 .phone-input input:disabled,
 .phone-dropdown input:disabled {
   cursor: not-allowed;
-}.phone-input[data-v-a8e96716],
-.phone-dropdown[data-v-a8e96716] {
+}.phone-input[data-v-95467f81],
+.phone-dropdown[data-v-95467f81] {
   font-size: var(--pi-font-size);
   background: var(--pi-bg);
   color: var(--pi-fg);
   border-radius: var(--pi-radius);
   border: 1px solid var(--pi-border);
 }
-.phone-input[data-v-a8e96716] {
+.phone-input[data-v-95467f81] {
   position: relative;
   display: flex;
   align-items: stretch;
   width: 100%;
 }
-.phone-input[data-v-a8e96716]:focus-within {
+.phone-input[data-v-95467f81]:focus-within {
   outline: var(--pi-focus-ring);
 }
-.phone-input.is-incomplete[data-v-a8e96716] {
+.phone-input.is-incomplete[data-v-95467f81] {
   border-color: var(--pi-warning);
 }
-.phone-input.is-incomplete[data-v-a8e96716]:focus-within {
+.phone-input.is-incomplete[data-v-95467f81]:focus-within {
   outline: var(--pi-focus-ring-warning);
 }
-.phone-input.is-complete[data-v-a8e96716] {
+.phone-input.is-complete[data-v-95467f81] {
   border-color: var(--pi-success);
 }
-.phone-input.is-complete[data-v-a8e96716]:focus-within {
+.phone-input.is-complete[data-v-95467f81]:focus-within {
   outline: var(--pi-focus-ring-success);
 }
-.phone-input.is-disabled[data-v-a8e96716] {
+.phone-input.is-disabled[data-v-95467f81] {
   background: var(--pi-disabled-bg);
   color: var(--pi-disabled-fg);
 }
-.phone-input.is-readonly[data-v-a8e96716] {
+.phone-input.is-readonly[data-v-95467f81] {
   cursor: default;
 }
-.phone-input.size-compact[data-v-a8e96716] {
+.phone-input.size-compact[data-v-95467f81] {
   --pi-font-size: 14px;
   --pi-height: 36px;
   --pi-padding: 10px;
   --pi-actions-size: 24px;
 }
-.phone-input.size-large[data-v-a8e96716] {
+.phone-input.size-large[data-v-95467f81] {
   --pi-font-size: 18px;
   --pi-height: 52px;
   --pi-padding: 16px;
   --pi-actions-size: 32px;
 }
-.phone-input.is-unstyled[data-v-a8e96716] {
+.phone-input.is-unstyled[data-v-95467f81] {
   all: initial;
   display: block;
 }
-.pi-selector[data-v-a8e96716] {
+.pi-selector[data-v-95467f81] {
   flex-shrink: 0;
 }
-.pi-selector-btn[data-v-a8e96716] {
+.pi-selector-btn[data-v-95467f81] {
   display: flex;
   align-items: center;
   gap: 6px;
@@ -143,36 +143,36 @@
   border-radius: var(--pi-radius) 0 0 var(--pi-radius);
   transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
 }
-.pi-selector-btn.no-dropdown[data-v-a8e96716] {
+.pi-selector-btn.no-dropdown[data-v-95467f81] {
   cursor: default;
 }
-.pi-selector-btn[data-v-a8e96716]:focus-visible {
+.pi-selector-btn[data-v-95467f81]:focus-visible {
   border-color: var(--pi-border-focus);
   outline: none;
 }
-.pi-selector-btn:disabled > .pi-flag[data-v-a8e96716] {
+.pi-selector-btn:disabled > .pi-flag[data-v-95467f81] {
   opacity: 0.5;
 }
-.pi-flag[data-v-a8e96716] {
+.pi-flag[data-v-95467f81] {
   font-size: 1.25em;
   line-height: 1;
   display: inline-flex;
 }
-.pi-chevron[data-v-a8e96716] {
+.pi-chevron[data-v-95467f81] {
   margin-left: 2px;
   color: var(--pi-muted);
   transition: transform 200ms ease;
 }
-.pi-chevron.is-open[data-v-a8e96716] {
+.pi-chevron.is-open[data-v-95467f81] {
   transform: rotate(180deg);
 }
-.pi-input-wrap[data-v-a8e96716] {
+.pi-input-wrap[data-v-95467f81] {
   flex: 1;
   position: relative;
   display: flex;
   align-items: center;
 }
-.pi-input[data-v-a8e96716] {
+.pi-input[data-v-95467f81] {
   flex: 1;
   width: 100%;
   padding-left: var(--pi-padding);
@@ -181,14 +181,14 @@
   border-radius: 0 var(--pi-radius) var(--pi-radius) 0;
   transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
 }
-.pi-input[data-v-a8e96716]:hover:not(:disabled):not(:read-only) {
+.pi-input[data-v-95467f81]:hover:not(:disabled):not(:read-only) {
   border-color: var(--pi-border-hover);
 }
-.pi-input[data-v-a8e96716]:focus {
+.pi-input[data-v-95467f81]:focus {
   border-color: var(--pi-border-focus);
   position: relative;
 }
-.pi-actions[data-v-a8e96716] {
+.pi-actions[data-v-95467f81] {
   position: absolute;
   right: 2px;
   top: 50%;
@@ -197,7 +197,7 @@
   align-items: center;
   gap: 2px;
 }
-.pi-btn[data-v-a8e96716] {
+.pi-btn[data-v-95467f81] {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -209,36 +209,36 @@
   border-radius: 9999px;
   transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
 }
-.pi-btn[data-v-a8e96716]:hover {
+.pi-btn[data-v-95467f81]:hover {
   background: var(--pi-disabled-bg);
   color: var(--pi-fg);
 }
-.pi-btn[data-v-a8e96716]:active:not(:disabled) {
+.pi-btn[data-v-95467f81]:active:not(:disabled) {
   transform: scale(0.95);
 }
-.pi-btn[data-v-a8e96716]:focus {
+.pi-btn[data-v-95467f81]:focus {
   outline: 1px solid var(--pi-border-focus);
   outline-offset: -1px;
 }
-.pi-btn.is-copied[data-v-a8e96716] {
+.pi-btn.is-copied[data-v-95467f81] {
   color: var(--pi-success);
   border-color: var(--pi-success);
 }
-.pi-btn svg[data-v-a8e96716] {
+.pi-btn svg[data-v-95467f81] {
   flex-shrink: 0;
 }
-.phone-dropdown[data-v-a8e96716] {
+.phone-dropdown[data-v-95467f81] {
   position: absolute;
   z-index: 9999;
   max-width: 400px;
   box-shadow: var(--pi-shadow-lg);
   overflow: hidden;
 }
-.pi-search-wrap[data-v-a8e96716] {
+.pi-search-wrap[data-v-95467f81] {
   padding: 8px;
   border-bottom: 1px solid var(--pi-border);
 }
-.pi-search[data-v-a8e96716] {
+.pi-search[data-v-95467f81] {
   width: 100%;
   padding: 8px 12px;
   font-size: 0.875em;
@@ -247,30 +247,30 @@
   background: var(--pi-bg);
   transition: border-color 150ms ease;
 }
-.pi-search[data-v-a8e96716]:focus {
+.pi-search[data-v-95467f81]:focus {
   border-color: var(--pi-border-focus);
 }
-.pi-options[data-v-a8e96716] {
+.pi-options[data-v-95467f81] {
   max-height: 300px;
   overflow-y: auto;
   padding: 4px 0;
   margin: 0;
   list-style: none;
 }
-.pi-options[data-v-a8e96716]::-webkit-scrollbar {
+.pi-options[data-v-95467f81]::-webkit-scrollbar {
   width: 8px;
 }
-.pi-options[data-v-a8e96716]::-webkit-scrollbar-track {
+.pi-options[data-v-95467f81]::-webkit-scrollbar-track {
   background: transparent;
 }
-.pi-options[data-v-a8e96716]::-webkit-scrollbar-thumb {
+.pi-options[data-v-95467f81]::-webkit-scrollbar-thumb {
   background: var(--pi-border);
   border-radius: 4px;
 }
-.pi-options[data-v-a8e96716]::-webkit-scrollbar-thumb:hover {
+.pi-options[data-v-95467f81]::-webkit-scrollbar-thumb:hover {
   background: var(--pi-border-hover);
 }
-.pi-option[data-v-a8e96716] {
+.pi-option[data-v-95467f81] {
   display: flex;
   align-items: center;
   gap: 8px;
@@ -278,57 +278,57 @@
   cursor: pointer;
   transition: background-color 100ms ease;
 }
-.pi-option[data-v-a8e96716]:hover, .pi-option.is-focused[data-v-a8e96716] {
+.pi-option[data-v-95467f81]:hover, .pi-option.is-focused[data-v-95467f81] {
   background: var(--pi-disabled-bg);
 }
-.pi-option.is-selected[data-v-a8e96716] {
+.pi-option.is-selected[data-v-95467f81] {
   background: var(--pi-border);
   font-weight: 500;
 }
-.pi-opt-name[data-v-a8e96716] {
+.pi-opt-name[data-v-95467f81] {
   flex: 1;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.pi-opt-code[data-v-a8e96716] {
+.pi-opt-code[data-v-95467f81] {
   color: var(--pi-muted);
   font-size: 0.875em;
 }
-.pi-empty[data-v-a8e96716] {
+.pi-empty[data-v-95467f81] {
   padding: 12px;
   text-align: center;
   color: var(--pi-muted);
   font-size: 0.875em;
 }
-.fade-enter-active[data-v-a8e96716],
-.fade-leave-active[data-v-a8e96716] {
+.fade-enter-active[data-v-95467f81],
+.fade-leave-active[data-v-95467f81] {
   transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1), transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
 }
-.fade-enter-from[data-v-a8e96716],
-.fade-leave-to[data-v-a8e96716] {
+.fade-enter-from[data-v-95467f81],
+.fade-leave-to[data-v-95467f81] {
   opacity: 0;
   transform: translateY(-50%) translateX(8px);
 }
-.fade-scale-enter-active[data-v-a8e96716],
-.fade-scale-leave-active[data-v-a8e96716] {
+.fade-scale-enter-active[data-v-95467f81],
+.fade-scale-leave-active[data-v-95467f81] {
   transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1), transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
 }
-.fade-scale-enter-from[data-v-a8e96716],
-.fade-scale-leave-to[data-v-a8e96716] {
+.fade-scale-enter-from[data-v-95467f81],
+.fade-scale-leave-to[data-v-95467f81] {
   opacity: 0;
   transform: scale(0.8);
 }
-.dropdown-enter-active[data-v-a8e96716],
-.dropdown-leave-active[data-v-a8e96716] {
+.dropdown-enter-active[data-v-95467f81],
+.dropdown-leave-active[data-v-95467f81] {
   transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1), transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
 }
-.dropdown-enter-from[data-v-a8e96716],
-.dropdown-leave-to[data-v-a8e96716] {
+.dropdown-enter-from[data-v-95467f81],
+.dropdown-leave-to[data-v-95467f81] {
   opacity: 0;
   transform: translateY(-8px);
 }
-.sr-only[data-v-a8e96716] {
+.sr-only[data-v-95467f81] {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -340,21 +340,21 @@
   border: 0;
 }
 @media (max-width: 480px) {
-.phone-input[data-v-a8e96716] {
+.phone-input[data-v-95467f81] {
     --pi-padding: 8px;
     --pi-actions-size: 24px;
 }
-.size-compact[data-v-a8e96716] {
+.size-compact[data-v-95467f81] {
     --pi-actions-size: 20px;
 }
-.phone-dropdown[data-v-a8e96716] {
+.phone-dropdown[data-v-95467f81] {
     left: 0;
     right: 0;
     max-width: none;
 }
 }
 @media (prefers-reduced-motion: reduce) {
-[data-v-a8e96716] {
+[data-v-95467f81] {
     animation-duration: 0.01ms !important;
     animation-iteration-count: 1 !important;
     transition-duration: 0.01ms !important;

package/dist/types/components/PhoneInput.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PhoneInput.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PhoneInput.vue"],"names":[],"mappings":"AAk5BA,OAAO,KAAK,EAAmB,iBAAiB,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAErG,KAAK,WAAW,GAAG,eAAe,CAAC;AAgBnC,KAAK,WAAW,GAAG,eAAe,CAAC;AAwQnC,KAAK,gBAAgB,GAAG;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAmBF,KAAK,iBAAiB,GAAG,WAAW,GAAG,gBAAgB,CAAC;AAucxD,QAAA,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;6EAKd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AAWzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
+{"version":3,"file":"PhoneInput.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PhoneInput.vue"],"names":[],"mappings":"AAo6BA,OAAO,KAAK,EAAmB,iBAAiB,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAErG,KAAK,WAAW,GAAG,eAAe,CAAC;AAgBnC,KAAK,WAAW,GAAG,eAAe,CAAC;AA0RnC,KAAK,gBAAgB,GAAG;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAmBF,KAAK,iBAAiB,GAAG,WAAW,GAAG,gBAAgB,CAAC;AAucxD,QAAA,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;6EAKd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AAWzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@desource/phone-mask-vue",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "description": "🔌 Vue 3 component & directive for international phone number masking. Powered by @desource/phone-mask with Google libphonenumber sync.",
   "keywords": [
     "vue",
@@ -53,11 +53,11 @@
     "README.md"
   ],
   "dependencies": {
-    "@desource/phone-mask": "0.2.2"
+    "@desource/phone-mask": "0.2.3"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^6.0.3",
-    "vue-tsc": "^3.2.3",
+    "@vitejs/plugin-vue": "^6.0.4",
+    "vue-tsc": "^3.2.4",
     "vue": "^3.5.27"
   },
   "peerDependencies": {