jaky-kit/index.html at master · Jaky-gh/jaky-kit · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JakyUI – Web Components Playground</title>
</head>
<body>

    <h1>JakyKit – x-button</h1>
    <p class="subtitle">
        A tiny design system built with Web Components (custom elements + shadow DOM).
    </p>

    <!-- Test button -->
    <x-button>Click me</x-button>
    <x-button disabled>Disabled</x-button>
    <x-button type="submit">Submit</x-button>

    <!-- Test input -->
    <h2>x-input</h2>
    <x-input
            label="Email address"
            placeholder="you@example.com"
            type="email"
            value="default@value.com">
    </x-input>
    <x-input label="Disabled field" placeholder="Dummy content" disabled></x-input>
    <x-input label="Password" type="password"></x-input>

    <!-- Import components -->
    <script type="module" src="components/index.js"></script>

    <!-- Listeners (Note: need to be after the component import) -->
    <script type="module">
        document.querySelectorAll('x-input').forEach(input => {
            // Will log when pressing enter
            input.addEventListener('change', () => {
                console.log('x-input value:', input.value);
            });

            // Will log on change
            // input.addEventListener('input', () => {
            //     console.log(input.value);
            // });
        });

    </script>

    <script type="module">
        document.querySelectorAll('x-button').forEach(button => {
            button.addEventListener('click', () => {
                console.log('Button click');
            });
        });
    </script>
</body>
</html>