trustcaptcha-svelte 0.0.8 → 0.1.0
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/README.md +17 -0
- package/dist/captcha.svelte +3 -0
- package/dist/index.d.ts +3 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -65,6 +65,7 @@ yarn add trustcaptcha-svelte
|
|
|
65
65
|
| `customTranslations` | `string \| CustomTranslation[]` | - | Custom text translations |
|
|
66
66
|
| `customDesign` | `string \| CustomDesign` | - | Custom design configuration (requires license) |
|
|
67
67
|
| `privacyUrl` | `string` | - | Link to your privacy policy (requires license) |
|
|
68
|
+
| `children` | `Snippet` | - | Optional loading placeholder content |
|
|
68
69
|
|
|
69
70
|
## Events
|
|
70
71
|
|
|
@@ -105,6 +106,22 @@ You can call these methods using a component reference:
|
|
|
105
106
|
- `startVerification()` - Manually start the CAPTCHA verification
|
|
106
107
|
- `reset()` - Reset the CAPTCHA to initial state
|
|
107
108
|
|
|
109
|
+
## Loading Placeholder
|
|
110
|
+
|
|
111
|
+
You can provide custom loading UI that displays while the CAPTCHA script is loading:
|
|
112
|
+
|
|
113
|
+
```svelte
|
|
114
|
+
<script lang="ts">
|
|
115
|
+
import { TrustCaptcha } from 'trustcaptcha-svelte';
|
|
116
|
+
</script>
|
|
117
|
+
|
|
118
|
+
<TrustCaptcha sitekey="your_site_key_here">
|
|
119
|
+
<div>Loading CAPTCHA...</div>
|
|
120
|
+
</TrustCaptcha>
|
|
121
|
+
```
|
|
122
|
+
|
|
123
|
+
The loading placeholder will be displayed until the TrustCaptcha script is fully loaded and the component is mounted. If no children are provided, nothing will render during the loading phase.
|
|
124
|
+
|
|
108
125
|
## TypeScript Support
|
|
109
126
|
|
|
110
127
|
Full TypeScript definitions are included:
|
package/dist/captcha.svelte
CHANGED
|
@@ -16,6 +16,7 @@
|
|
|
16
16
|
oncaptchaSolved,
|
|
17
17
|
oncaptchaFailed,
|
|
18
18
|
oncaptchaReset,
|
|
19
|
+
children,
|
|
19
20
|
...rest
|
|
20
21
|
}: TrustCaptchaProps = $props();
|
|
21
22
|
|
|
@@ -102,4 +103,6 @@
|
|
|
102
103
|
privacy-url={privacyUrl}
|
|
103
104
|
{...rest}
|
|
104
105
|
></trustcaptcha-component>
|
|
106
|
+
{:else}
|
|
107
|
+
{@render children?.()}
|
|
105
108
|
{/if}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
export { default as TrustCaptcha } from './captcha.svelte';
|
|
2
|
+
import type { Snippet } from 'svelte';
|
|
2
3
|
export interface TrustCaptchaProps {
|
|
3
4
|
/** Sitekey of the TrustCaptcha. You can find this on the administration page of your TrustCaptcha. */
|
|
4
5
|
sitekey: string;
|
|
@@ -40,6 +41,8 @@ export interface TrustCaptchaProps {
|
|
|
40
41
|
oncaptchaReset?: (event: CustomEvent) => void;
|
|
41
42
|
/** Custom CSS class for the TrustCaptcha component. */
|
|
42
43
|
class?: string;
|
|
44
|
+
/** Optional loading placeholder content shown while the CAPTCHA script is loading. */
|
|
45
|
+
children?: Snippet;
|
|
43
46
|
}
|
|
44
47
|
export interface CaptchaError {
|
|
45
48
|
errorCode: ErrorCode;
|
package/package.json
CHANGED