@cal.macconnachie/web-components 0.0.7 → 0.0.9
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 +13 -13
- package/dist/components/{cals-auth.js → auth.js} +197 -166
- package/dist/components/index.d.ts +17 -0
- package/dist/components/theme-toggle.js +756 -0
- package/dist/index.d.ts +17 -0
- package/dist/index.js +726 -477
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -18,7 +18,7 @@ Load only the components you need:
|
|
|
18
18
|
|
|
19
19
|
```html
|
|
20
20
|
<!-- Load just the auth component -->
|
|
21
|
-
<script type="module" src="https://cdn.cals-api.com/components/
|
|
21
|
+
<script type="module" src="https://cdn.cals-api.com/components/auth.js"></script>
|
|
22
22
|
```
|
|
23
23
|
|
|
24
24
|
### Option 3: Using with Vue, React, or other frameworks
|
|
@@ -27,13 +27,13 @@ For framework projects (Vue, React, etc.), load the component via script tag in
|
|
|
27
27
|
|
|
28
28
|
```html
|
|
29
29
|
<!-- index.html -->
|
|
30
|
-
<script type="module" src="https://cdn.cals-api.com/components/
|
|
30
|
+
<script type="module" src="https://cdn.cals-api.com/components/auth.js"></script>
|
|
31
31
|
```
|
|
32
32
|
|
|
33
33
|
Then create a type declaration file for TypeScript support:
|
|
34
34
|
|
|
35
35
|
```typescript
|
|
36
|
-
// src/types/
|
|
36
|
+
// src/types/auth.d.ts
|
|
37
37
|
export interface CalsAuth extends HTMLElement {
|
|
38
38
|
openModal(): void;
|
|
39
39
|
logout(): void;
|
|
@@ -41,7 +41,7 @@ export interface CalsAuth extends HTMLElement {
|
|
|
41
41
|
|
|
42
42
|
declare global {
|
|
43
43
|
interface HTMLElementTagNameMap {
|
|
44
|
-
'
|
|
44
|
+
'auth': CalsAuth;
|
|
45
45
|
}
|
|
46
46
|
}
|
|
47
47
|
```
|
|
@@ -51,13 +51,13 @@ Now you can use it with full type safety in your components:
|
|
|
51
51
|
**Vue:**
|
|
52
52
|
```vue
|
|
53
53
|
<template>
|
|
54
|
-
<
|
|
54
|
+
<auth ref="authRef" app-name="Marketplace"></auth>
|
|
55
55
|
<button @click="openAuth">Login / Sign up</button>
|
|
56
56
|
</template>
|
|
57
57
|
|
|
58
58
|
<script setup lang="ts">
|
|
59
59
|
import { ref } from 'vue';
|
|
60
|
-
import type { CalsAuth } from '@/types/
|
|
60
|
+
import type { CalsAuth } from '@/types/auth';
|
|
61
61
|
|
|
62
62
|
const authRef = ref<CalsAuth>();
|
|
63
63
|
|
|
@@ -70,14 +70,14 @@ const openAuth = () => {
|
|
|
70
70
|
**React:**
|
|
71
71
|
```tsx
|
|
72
72
|
import { useRef } from 'react';
|
|
73
|
-
import type { CalsAuth } from '@/types/
|
|
73
|
+
import type { CalsAuth } from '@/types/auth';
|
|
74
74
|
|
|
75
75
|
function App() {
|
|
76
76
|
const authRef = useRef<CalsAuth>(null);
|
|
77
77
|
|
|
78
78
|
return (
|
|
79
79
|
<>
|
|
80
|
-
<
|
|
80
|
+
<auth ref={authRef} app-name="Marketplace"></auth>
|
|
81
81
|
<button onClick={() => authRef.current?.openModal()}>
|
|
82
82
|
Login / Sign up
|
|
83
83
|
</button>
|
|
@@ -91,7 +91,7 @@ function App() {
|
|
|
91
91
|
HTML:
|
|
92
92
|
|
|
93
93
|
```html
|
|
94
|
-
<
|
|
94
|
+
<auth id="auth" app-name="Marketplace"></auth>
|
|
95
95
|
|
|
96
96
|
<button id="open-auth">Login / Sign up</button>
|
|
97
97
|
<button id="logout-auth">Logout</button>
|
|
@@ -99,7 +99,7 @@ HTML:
|
|
|
99
99
|
|
|
100
100
|
JavaScript:
|
|
101
101
|
```js
|
|
102
|
-
const auth = document.querySelector('
|
|
102
|
+
const auth = document.querySelector('auth');
|
|
103
103
|
|
|
104
104
|
document.getElementById('open-auth')?.addEventListener('click', () => {
|
|
105
105
|
auth?.openModal();
|
|
@@ -112,9 +112,9 @@ document.getElementById('logout-auth')?.addEventListener('click', () => {
|
|
|
112
112
|
|
|
113
113
|
TypeScript:
|
|
114
114
|
```typescript
|
|
115
|
-
import type { CalsAuth } from 'https://cdn.cals-api.com/components/
|
|
115
|
+
import type { CalsAuth } from 'https://cdn.cals-api.com/components/auth.js';
|
|
116
116
|
|
|
117
|
-
const auth = document.querySelector<CalsAuth>('
|
|
117
|
+
const auth = document.querySelector<CalsAuth>('auth');
|
|
118
118
|
|
|
119
119
|
document.getElementById('open-auth')?.addEventListener('click', () => {
|
|
120
120
|
auth?.openModal();
|
|
@@ -127,7 +127,7 @@ document.getElementById('logout-auth')?.addEventListener('click', () => {
|
|
|
127
127
|
|
|
128
128
|
## Available Components
|
|
129
129
|
|
|
130
|
-
- `
|
|
130
|
+
- `auth` - Authentication component with sign in, sign up, and password reset
|
|
131
131
|
|
|
132
132
|
## Project Structure
|
|
133
133
|
|