@alikhalilll/a-tel-input 1.0.1 → 1.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +13331 -473
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +4 -4
- package/dist/index.d.ts +4 -4
- package/dist/index.js +13332 -474
- package/dist/index.js.map +1 -1
- package/dist/styles.css +1 -1
- package/package.json +9 -4
- package/src/components/ACountrySelect.vue +79 -1
- package/web-types.json +1 -1
package/dist/styles.css
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */
|
|
2
|
-
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-border-style:solid;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-
|
|
2
|
+
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-border-style:solid;--tw-outline-style:solid;--tw-ease:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial}}}:root,:host{--spacing:.25rem;--ease-in:cubic-bezier(.4, 0, 1, 1);--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1)}.collapse{visibility:collapse}.flex{display:flex}.inline{display:inline}.table{display:table}.flex-shrink{flex-shrink:1}.ps-1{padding-inline-start:calc(var(--spacing) * 1)}.accent-foreground{accent-color:hsl(var(--ak-ui-foreground))}.ring{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.blur{--tw-blur:blur(8px);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.visible{visibility:visible}.sticky{position:sticky}.block{display:block}.hidden{display:none}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.border{border-style:var(--tw-border-style);border-width:1px}.text-popover-foreground{color:hsl(var(--ak-ui-popover-foreground))}@property --tw-ease{syntax:"*";inherits:false}.a-popover__overlay{z-index:50;pointer-events:auto;background:#000000b3;position:fixed;inset:0}.a-popover__overlay[data-state=open]{animation:.15s ease-out a-popover-overlay-in}.a-popover__overlay[data-state=closed]{animation:.1s ease-in forwards a-popover-overlay-out}@keyframes a-popover-overlay-in{0%{opacity:0}to{opacity:1}}@keyframes a-popover-overlay-out{0%{opacity:1}to{opacity:0}}@media (prefers-reduced-motion:reduce){.a-popover__overlay[data-state=open],.a-popover__overlay[data-state=closed]{animation:none}}.a-popover__content{z-index:60;border-radius:calc(var(--ak-ui-radius) - 2px);border:1px solid hsl(var(--ak-ui-border) / .7);background:hsl(var(--ak-ui-popover));width:18rem;color:hsl(var(--ak-ui-popover-foreground));outline:none;padding:1rem;box-shadow:0 20px 25px -5px #00000026,0 8px 10px -6px #00000026}.a-popover__content[data-state=open]{animation:.15s ease-out a-popover-in}.a-popover__content[data-state=closed]{animation:.1s ease-in forwards a-popover-out}@keyframes a-popover-in{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}@keyframes a-popover-out{0%{opacity:1}to{opacity:0}}@media (prefers-reduced-motion:reduce){.a-popover__content[data-state=open],.a-popover__content[data-state=closed]{animation:none}}:root,.light{--ak-ui-background:0 0% 100%;--ak-ui-foreground:240 10% 3.9%;--ak-ui-card:0 0% 100%;--ak-ui-card-foreground:240 10% 3.9%;--ak-ui-popover:0 0% 100%;--ak-ui-popover-foreground:240 10% 3.9%;--ak-ui-primary:240 5.9% 10%;--ak-ui-primary-foreground:0 0% 98%;--ak-ui-secondary:240 4.8% 95.9%;--ak-ui-secondary-foreground:240 5.9% 10%;--ak-ui-muted:240 4.8% 95.9%;--ak-ui-muted-foreground:240 3.8% 46.1%;--ak-ui-accent:240 4.8% 95.9%;--ak-ui-accent-foreground:240 5.9% 10%;--ak-ui-destructive:0 84.2% 60.2%;--ak-ui-destructive-foreground:0 0% 98%;--ak-ui-border:240 5.9% 90%;--ak-ui-input:240 5.9% 90%;--ak-ui-ring:240 5.9% 10%;--ak-ui-radius:.5rem}.dark{--ak-ui-background:240 10% 3.9%;--ak-ui-foreground:0 0% 98%;--ak-ui-card:240 10% 3.9%;--ak-ui-card-foreground:0 0% 98%;--ak-ui-popover:240 10% 3.9%;--ak-ui-popover-foreground:0 0% 98%;--ak-ui-primary:0 0% 98%;--ak-ui-primary-foreground:240 5.9% 10%;--ak-ui-secondary:240 3.7% 15.9%;--ak-ui-secondary-foreground:0 0% 98%;--ak-ui-muted:240 3.7% 15.9%;--ak-ui-muted-foreground:240 5% 64.9%;--ak-ui-accent:240 3.7% 15.9%;--ak-ui-accent-foreground:0 0% 98%;--ak-ui-destructive:0 62.8% 30.6%;--ak-ui-destructive-foreground:0 0% 98%;--ak-ui-border:240 3.7% 15.9%;--ak-ui-input:240 3.7% 15.9%;--ak-ui-ring:240 4.9% 83.9%}:root,:host{--ease-in:cubic-bezier(.4, 0, 1, 1)}.text-foreground{color:hsl(var(--ak-ui-foreground))}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.ease-in{--tw-ease:var(--ease-in);transition-timing-function:var(--ease-in)}.a-drawer__overlay{z-index:40;background:#000000b3;position:fixed;inset:0}.a-drawer__overlay[data-state=open]{animation:.2s ease-out a-drawer-overlay-in}.a-drawer__overlay[data-state=closed]{animation:.15s ease-in forwards a-drawer-overlay-out}@keyframes a-drawer-overlay-in{0%{opacity:0}to{opacity:1}}@keyframes a-drawer-overlay-out{0%{opacity:1}to{opacity:0}}@media (prefers-reduced-motion:reduce){.a-drawer__overlay[data-state=open],.a-drawer__overlay[data-state=closed]{animation:none}}.a-drawer__content{z-index:50;background:hsl(var(--ak-ui-background));height:auto;color:hsl(var(--ak-ui-foreground));inset-inline:0;border-top-left-radius:10px;border-top-right-radius:10px;outline:none;flex-direction:column;margin-top:6rem;display:flex;position:fixed;bottom:0;box-shadow:0 25px 50px -12px #0000004d,0 12px 24px -8px #00000040}.a-drawer__handle{background:hsl(var(--ak-ui-muted));border-radius:999px;width:100px;height:.5rem;margin:1rem auto 0}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}
|
|
3
3
|
/* --- bundled SFC styles --- */
|
|
4
4
|
|
|
5
5
|
.a-country-flag[data-v-705c2224] {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@alikhalilll/a-tel-input",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.2",
|
|
4
4
|
"description": "Headless, shadcn-vue style Vue 3 international telephone input with country detection, validation, and a responsive country picker. Part of the @alikhalilll/a-* toolkit.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"author": "alikhalilll",
|
|
@@ -64,6 +64,11 @@
|
|
|
64
64
|
"./styles.css": "./dist/styles.css",
|
|
65
65
|
"./package.json": "./package.json"
|
|
66
66
|
},
|
|
67
|
+
"cssBundleRequires": [
|
|
68
|
+
"a-popover__content",
|
|
69
|
+
"a-drawer__content",
|
|
70
|
+
"a-tel-input"
|
|
71
|
+
],
|
|
67
72
|
"types": "./dist/index.d.ts",
|
|
68
73
|
"web-types": "./web-types.json",
|
|
69
74
|
"files": [
|
|
@@ -92,8 +97,7 @@
|
|
|
92
97
|
},
|
|
93
98
|
"dependencies": {
|
|
94
99
|
"class-variance-authority": "^0.7.1",
|
|
95
|
-
"libphonenumber-js": "^1.12.0"
|
|
96
|
-
"@alikhalilll/a-responsive-popover": "1.0.1"
|
|
100
|
+
"libphonenumber-js": "^1.12.0"
|
|
97
101
|
},
|
|
98
102
|
"devDependencies": {
|
|
99
103
|
"@nuxt/kit": "^4.4.2",
|
|
@@ -110,7 +114,8 @@
|
|
|
110
114
|
"unplugin-vue-components": "^32.1.0",
|
|
111
115
|
"vue": "^3.5.0",
|
|
112
116
|
"vue-tsc": "^3.2.4",
|
|
113
|
-
"@alikhalilll/a-ui-base": "1.0.0"
|
|
117
|
+
"@alikhalilll/a-ui-base": "1.0.0",
|
|
118
|
+
"@alikhalilll/a-responsive-popover": "1.0.1"
|
|
114
119
|
},
|
|
115
120
|
"scripts": {
|
|
116
121
|
"clean": "rimraf dist web-types.json",
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<script setup lang="ts">
|
|
2
|
-
import { computed, onMounted, ref, watch } from 'vue';
|
|
2
|
+
import { computed, onMounted, onBeforeUnmount, ref, watch } from 'vue';
|
|
3
3
|
import { cn } from '@alikhalilll/a-ui-base';
|
|
4
4
|
import {
|
|
5
5
|
AResponsivePopover,
|
|
@@ -188,6 +188,82 @@ watch(open, (isOpen) => {
|
|
|
188
188
|
if (!isOpen) search.value = '';
|
|
189
189
|
});
|
|
190
190
|
|
|
191
|
+
/* ---------------------------------------------------------------
|
|
192
|
+
* Theme inheritance for teleported content. AResponsivePopoverContent
|
|
193
|
+
* is portaled to <body>, so the CSS custom properties a caller set on a
|
|
194
|
+
* wrapper (e.g. `<div :style="{ '--ak-ui-popover': '...' }">`) don't
|
|
195
|
+
* reach the dropdown by inheritance. We snapshot the trigger's resolved
|
|
196
|
+
* tokens and apply them inline on the content. While the menu is open,
|
|
197
|
+
* an rAF loop keeps the values in sync so live theming demos (sliders
|
|
198
|
+
* that mutate the tokens) re-paint the dropdown in real time.
|
|
199
|
+
* ------------------------------------------------------------- */
|
|
200
|
+
const triggerEl = ref<HTMLElement | null>(null);
|
|
201
|
+
const themeStyle = ref<Record<string, string>>({});
|
|
202
|
+
|
|
203
|
+
const THEME_TOKENS = [
|
|
204
|
+
'background',
|
|
205
|
+
'foreground',
|
|
206
|
+
'card',
|
|
207
|
+
'card-foreground',
|
|
208
|
+
'popover',
|
|
209
|
+
'popover-foreground',
|
|
210
|
+
'primary',
|
|
211
|
+
'primary-foreground',
|
|
212
|
+
'secondary',
|
|
213
|
+
'secondary-foreground',
|
|
214
|
+
'muted',
|
|
215
|
+
'muted-foreground',
|
|
216
|
+
'accent',
|
|
217
|
+
'accent-foreground',
|
|
218
|
+
'destructive',
|
|
219
|
+
'destructive-foreground',
|
|
220
|
+
'border',
|
|
221
|
+
'input',
|
|
222
|
+
'ring',
|
|
223
|
+
'radius',
|
|
224
|
+
] as const;
|
|
225
|
+
|
|
226
|
+
function snapshotTheme() {
|
|
227
|
+
const el = triggerEl.value;
|
|
228
|
+
if (!el || typeof window === 'undefined') return;
|
|
229
|
+
const cs = window.getComputedStyle(el);
|
|
230
|
+
const next: Record<string, string> = {};
|
|
231
|
+
for (const t of THEME_TOKENS) {
|
|
232
|
+
const k = `--ak-ui-${t}`;
|
|
233
|
+
const v = cs.getPropertyValue(k);
|
|
234
|
+
if (v) next[k] = v.trim();
|
|
235
|
+
}
|
|
236
|
+
themeStyle.value = next;
|
|
237
|
+
}
|
|
238
|
+
|
|
239
|
+
let themeRafId = 0;
|
|
240
|
+
function stopThemeLoop() {
|
|
241
|
+
if (themeRafId) {
|
|
242
|
+
cancelAnimationFrame(themeRafId);
|
|
243
|
+
themeRafId = 0;
|
|
244
|
+
}
|
|
245
|
+
}
|
|
246
|
+
function startThemeLoop() {
|
|
247
|
+
stopThemeLoop();
|
|
248
|
+
const tick = () => {
|
|
249
|
+
snapshotTheme();
|
|
250
|
+
if (open.value) themeRafId = requestAnimationFrame(tick);
|
|
251
|
+
else themeRafId = 0;
|
|
252
|
+
};
|
|
253
|
+
themeRafId = requestAnimationFrame(tick);
|
|
254
|
+
}
|
|
255
|
+
|
|
256
|
+
watch(open, (isOpen) => {
|
|
257
|
+
if (isOpen) {
|
|
258
|
+
snapshotTheme();
|
|
259
|
+
startThemeLoop();
|
|
260
|
+
} else {
|
|
261
|
+
stopThemeLoop();
|
|
262
|
+
}
|
|
263
|
+
});
|
|
264
|
+
|
|
265
|
+
onBeforeUnmount(stopThemeLoop);
|
|
266
|
+
|
|
191
267
|
/** Trigger size — class is consumed by the scoped `<style>` block via `data-size`. The
|
|
192
268
|
* legacy `sizeClasses` slot prop is preserved for backwards compat but it's now an empty
|
|
193
269
|
* string (consumers should rely on `size` directly when overriding the trigger). */
|
|
@@ -215,6 +291,7 @@ defineExpose({
|
|
|
215
291
|
:size-classes="triggerSizeClasses"
|
|
216
292
|
>
|
|
217
293
|
<button
|
|
294
|
+
ref="triggerEl"
|
|
218
295
|
type="button"
|
|
219
296
|
:disabled="props.disabled"
|
|
220
297
|
data-slot="country-select-trigger"
|
|
@@ -247,6 +324,7 @@ defineExpose({
|
|
|
247
324
|
:class="cn('a-country-select__content', props.contentClass)"
|
|
248
325
|
:popover-class="cn('a-country-select__popover', props.popoverClass)"
|
|
249
326
|
:drawer-class="cn('a-country-select__drawer', props.drawerClass)"
|
|
327
|
+
:style="themeStyle"
|
|
250
328
|
>
|
|
251
329
|
<!-- Search header -->
|
|
252
330
|
<slot
|