@mrgnw/anahtar 0.0.26 → 0.0.28
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.
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import { guessDeviceName } from '../device.js';
|
|
3
3
|
import { resolveMessages, detectLocaleClient, type AuthMessages } from '../i18n/index.js';
|
|
4
4
|
import PasskeyPrompt from './PasskeyPrompt.svelte';
|
|
5
|
-
import { onMount } from 'svelte';
|
|
5
|
+
import { onMount, type Snippet } from 'svelte';
|
|
6
6
|
import { slide } from 'svelte/transition';
|
|
7
7
|
|
|
8
8
|
interface PasskeyInfo {
|
|
@@ -23,6 +23,10 @@ interface Props {
|
|
|
23
23
|
onPasskeysChange?: () => void | Promise<void>;
|
|
24
24
|
getPasskeys?: () => Promise<PasskeyInfo[]>;
|
|
25
25
|
onStepChange?: (step: 'email' | 'otp' | 'authenticated') => void;
|
|
26
|
+
/** Extra inline icons rendered before the sign-out button when authenticated. */
|
|
27
|
+
actions?: Snippet;
|
|
28
|
+
/** Show `·` dot separators between pill segments. Defaults to false (flex gap only). */
|
|
29
|
+
separators?: boolean;
|
|
26
30
|
}
|
|
27
31
|
|
|
28
32
|
let {
|
|
@@ -36,6 +40,8 @@ let {
|
|
|
36
40
|
onPasskeysChange,
|
|
37
41
|
getPasskeys,
|
|
38
42
|
onStepChange,
|
|
43
|
+
actions,
|
|
44
|
+
separators = false,
|
|
39
45
|
}: Props = $props();
|
|
40
46
|
|
|
41
47
|
let expanded = $state(false);
|
|
@@ -345,7 +351,7 @@ async function removePasskey(id: string) {
|
|
|
345
351
|
</button>
|
|
346
352
|
{:else if isAuthenticated}
|
|
347
353
|
<span class="anahtar-pill-email">{user?.email}</span>
|
|
348
|
-
<span class="anahtar-pill-sep">·</span>
|
|
354
|
+
{#if separators}<span class="anahtar-pill-sep">·</span>{/if}
|
|
349
355
|
{#if getPasskeys}
|
|
350
356
|
<button
|
|
351
357
|
class="anahtar-pill-icon"
|
|
@@ -358,7 +364,11 @@ async function removePasskey(id: string) {
|
|
|
358
364
|
<circle cx="7.5" cy="15.5" r="5.5"/><path d="m11.5 12 4-4"/><path d="m15 7 2 2"/><path d="m17.5 4.5 2 2"/>
|
|
359
365
|
</svg>
|
|
360
366
|
</button>
|
|
361
|
-
<span class="anahtar-pill-sep">·</span>
|
|
367
|
+
{#if separators}<span class="anahtar-pill-sep">·</span>{/if}
|
|
368
|
+
{/if}
|
|
369
|
+
{#if actions}
|
|
370
|
+
{@render actions()}
|
|
371
|
+
{#if separators}<span class="anahtar-pill-sep">·</span>{/if}
|
|
362
372
|
{/if}
|
|
363
373
|
<button class="anahtar-pill-icon anahtar-pill-signout" onclick={handleSignOut} title="Sign out" disabled={loading}>
|
|
364
374
|
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
@@ -366,7 +376,7 @@ async function removePasskey(id: string) {
|
|
|
366
376
|
</svg>
|
|
367
377
|
</button>
|
|
368
378
|
{#if compact}
|
|
369
|
-
<span class="anahtar-pill-sep">·</span>
|
|
379
|
+
{#if separators}<span class="anahtar-pill-sep">·</span>{/if}
|
|
370
380
|
<button class="anahtar-pill-icon" onclick={() => { expanded = false; showPasskeys = false; }} title="Collapse">
|
|
371
381
|
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
372
382
|
<line x1="18" x2="6" y1="6" y2="18"/><line x1="6" x2="18" y1="6" y2="18"/>
|
|
@@ -376,7 +386,7 @@ async function removePasskey(id: string) {
|
|
|
376
386
|
|
|
377
387
|
{:else if otpStep}
|
|
378
388
|
<span class="anahtar-pill-otp-label">{email}</span>
|
|
379
|
-
<span class="anahtar-pill-sep">·</span>
|
|
389
|
+
{#if separators}<span class="anahtar-pill-sep">·</span>{/if}
|
|
380
390
|
<div class="anahtar-pill-otp-boxes">
|
|
381
391
|
{#each otpDigits as _, i}
|
|
382
392
|
<input
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { type AuthMessages } from '../i18n/index.js';
|
|
2
|
+
import { type Snippet } from 'svelte';
|
|
2
3
|
interface PasskeyInfo {
|
|
3
4
|
id: string;
|
|
4
5
|
credentialId?: string;
|
|
@@ -18,6 +19,10 @@ interface Props {
|
|
|
18
19
|
onPasskeysChange?: () => void | Promise<void>;
|
|
19
20
|
getPasskeys?: () => Promise<PasskeyInfo[]>;
|
|
20
21
|
onStepChange?: (step: 'email' | 'otp' | 'authenticated') => void;
|
|
22
|
+
/** Extra inline icons rendered before the sign-out button when authenticated. */
|
|
23
|
+
actions?: Snippet;
|
|
24
|
+
/** Show `·` dot separators between pill segments. Defaults to false (flex gap only). */
|
|
25
|
+
separators?: boolean;
|
|
21
26
|
}
|
|
22
27
|
declare const AuthPill: import("svelte").Component<Props, {}, "">;
|
|
23
28
|
type AuthPill = ReturnType<typeof AuthPill>;
|