atoms-element v5.0.0

#js

git clone https://git.pyrossh.dev/atoms-element

A simple web component library for defining your custom elements. It works on both client and server.

a4427c2 — Peter John 2026-08-08T10:39:39+05:30 
update README
Files changed (1) hide show
  1. readme.md +46 -13
readme.md CHANGED
@@ -26,29 +26,62 @@ State lives directly in attributes rather than a separate reducer/store: `prop(n
26
26
  ## Example
27
27
 
28
28
  ```js
29
- import { createElement, html, renderHtml } from 'atoms-element/index.js';
29
+ import { classMap, createElement, css, html, renderHtml } from 'atoms-element/index.js';
30
30
 
31
31
  const Counter = ({ name, count }) => {
32
32
  const increment = () => { count.value += 1; };
33
33
  const decrement = () => { count.value -= 1; };
34
- const warningClass = count.value > 10 ? 'text-red-500' : '';
34
+
35
35
  return html`
36
+ <p>Counter: ${name}</p>
36
- <div class="mt-10">
37
+ <div class="controls">
37
- <div class="mb-2">
38
- Counter: ${name}
39
- </div>
40
- <div class="flex flex-1 flex-row items-center text-gray-700">
41
- <button class="bg-gray-300 text-gray-700 rounded hover:bg-gray-200 px-4 py-2 text-3xl focus:outline-none" @click=${decrement}>-</button>
38
+ <button type="button" aria-label="Decrement" @click=${decrement}>-</button>
42
- <div class="mx-20">
43
- <h1 class="text-3xl font-mono ${warningClass}">${count.value}</h1>
39
+ <output class=${classMap({ warning: count.value > 10 })}>${count.value}</output>
44
- </div>
45
- <button class="bg-gray-300 text-gray-700 rounded hover:bg-gray-200 px-4 py-2 text-3xl focus:outline-none" @click=${increment}>+</button>
40
+ <button type="button" aria-label="Increment" @click=${increment}>+</button>
46
- </div>
47
41
  </div>
48
42
  `;
49
43
  };
50
44
  Counter.attrs = { count: Number };
51
45
 
46
+ Counter.styles = css`
47
+ :scope {
48
+ display: block;
49
+ margin-top: 2.5rem;
50
+ color: rgb(55 65 81);
51
+ --color-danger: rgb(239 68 68);
52
+ --color-button-bg: rgb(209 213 219);
53
+ --color-button-bg-hover: rgb(229 231 235);
54
+ }
55
+ p {
56
+ margin: 0 0 0.5rem;
57
+ }
58
+ .controls {
59
+ display: flex;
60
+ align-items: center;
61
+ }
62
+ output {
63
+ margin: 0 5rem;
64
+ font-size: 1.875rem;
65
+ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
66
+ }
67
+ output.warning {
68
+ color: var(--color-danger);
69
+ }
70
+ button {
71
+ background-color: var(--color-button-bg);
72
+ color: inherit;
73
+ border-radius: 0.25rem;
74
+ padding: 0.5rem 1rem;
75
+ font-size: 1.875rem;
76
+ }
77
+ button:hover {
78
+ background-color: var(--color-button-bg-hover);
79
+ }
80
+ button:focus {
81
+ outline: none;
82
+ }
83
+ `;
84
+
52
85
  createElement({ url: 'app-counter.js' }, Counter);
53
86
 
54
87
  console.log(renderHtml(html`<app-counter name="1" count="0"></app-counter>`));