npm - @dooboostore/dom-render - Versions diffs - 1.0.100 → 1.0.103 - Mend

@dooboostore/dom-render 1.0.100 → 1.0.103

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.

Files changed (57) hide show

package/DomRender.d.ts +21 -6
package/DomRender.js +54 -23
package/DomRenderProxy.d.ts +7 -3
package/DomRenderProxy.js +120 -49
package/README.MD +469 -112
package/components/ComponentBase.d.ts +12 -10
package/components/ComponentBase.js +92 -46
package/components/ComponentSet.d.ts +2 -2
package/components/appender/Appender.d.ts +2 -2
package/components/checkbox/CheckBox.d.ts +4 -4
package/components/choose/Choose.d.ts +4 -4
package/components/choose/Choose.js +0 -16
package/components/details/Details.d.ts +5 -5
package/components/forOf/ForOf.d.ts +2 -2
package/components/if/If.d.ts +2 -2
package/components/index.d.ts +26 -24
package/components/index.js +2 -1
package/components/input/Input.d.ts +2 -2
package/components/input/Input.js +27 -24
package/components/promise/PromiseSwitch.d.ts +6 -6
package/components/promise/PromiseSwitch.js +15 -0
package/components/radio/Radio.d.ts +4 -4
package/components/router/Route.d.ts +32 -0
package/components/router/Route.js +116 -0
package/components/select/Select.d.ts +3 -3
package/components/select/Select.js +2 -2
package/components/this/This.d.ts +9 -2
package/components/this/This.js +24 -2
package/components/timer/Timer.d.ts +2 -2
package/configs/Config.d.ts +6 -1
package/decorators/DomRenderNoProxy.d.ts +2 -0
package/decorators/DomRenderNoProxy.js +15 -0
package/dist/bundle.js +2 -0
package/events/EventManager.d.ts +16 -4
package/events/EventManager.js +320 -140
package/index.d.ts +48 -1
package/index.js +40 -0
package/lifecycle/OnDestroyRender.d.ts +1 -1
package/lifecycle/OnProxyDomRender.d.ts +1 -0
package/lifecycle/OnProxyDomRender.js +1 -1
package/operators/DrForOf.js +2 -1
package/operators/DrIf.js +3 -2
package/operators/DrTargetElement.js +2 -1
package/operators/DrTargetElementIsElement.d.ts +0 -5
package/operators/DrTargetElementIsElement.js +2 -1
package/operators/DrThis.js +40 -11
package/operators/OperatorExecuter.js +3 -1
package/package.json +5 -4
package/rawsets/Attrs.d.ts +2 -0
package/rawsets/RawSet.d.ts +2 -2
package/rawsets/RawSet.js +48 -33
package/routers/HashRouter.d.ts +5 -4
package/routers/HashRouter.js +8 -5
package/routers/PathRouter.d.ts +5 -4
package/routers/PathRouter.js +6 -4
package/routers/Router.d.ts +22 -8
package/routers/Router.js +44 -24

package/README.MD CHANGED Viewed

@@ -1,30 +1,30 @@
 DOM-RENDER
 ===
-[![typescript](https://img.shields.io/badge/-npm-black?logo=npm)](https://www.npmjs.com/package/dom-render) [![license](https://img.shields.io/badge/license-MIT-green)](LICENSE.md)
+[![typescript](https://img.shields.io/badge/-npm-black?logo=npm)](https://www.npmjs.com/package/@dooboostore/dom-render) [![license](https://img.shields.io/badge/license-MIT-green)](LICENSE.md)
 * view template engine
 * Dom control and reorder and render
 * all internal variables are managed by proxy. (DomRenderProxy)
 # 🚀 Quick start
-```html
-<script src="https://cdn.jsdelivr.net/npm/dom-render@1.0.91/dist/bundle.js"></script>
+```typescript
+import { DomRender } from '@dooboostore/dom-render';
+class AppData {
+  name: string = 'my name is dom-render';
+}
+const data = new AppData();
+DomRender.run(data, document.querySelector('#app')!);
 ```
 ```html
 <!DOCTYPE html>
 <html lang="en">
-<head``>
+<head>
   <meta charset="UTF-8">
   <title>Title</title>
 </head>
 <body id="app">
 ${this.name}$
-<script src="https://cdn.jsdelivr.net/npm/dom-render@1.0.86/dist/bundle.js"></script>
-<script>
-  let data = {
-    name: 'my name is dom-render'
-  };
-  data = DomRender.run(data , document.querySelector('#app'));
-</script>
 </body>
 </html>
 ```
@@ -42,14 +42,18 @@ ${this.name}$
 <body id="app">
 ${this.name}$  <!-- outout: <i>my name is dom-render</i> -->
 #{this.name}# <!-- outout text is italic: my name is dom-render -->
-<script>
-  let data = {
-    name: '<i>my name is dom-render</i>'
-  };
-  data = DomRender.run(data , document.querySelector('#app'));
-</script>
 </body>
 ```
+```typescript
+import { DomRender } from '@dooboostore/dom-render';
+class AppData {
+  name: string = '<i>my name is dom-render</i>';
+}
+const data = new AppData();
+DomRender.run(data, document.querySelector('#app')!);
+```
 </details>
 # dom-render attributes
@@ -107,7 +111,7 @@ export class IndexComponent implements OnInitRender, OnDestroyRender, OnInit, On
 ```
 ```css
 .#uuid# {
-color:${@this@.color}$;
+color:${@this@.color}$ ;
 }
 ```
 ```css
@@ -141,14 +145,18 @@ uuid: rawSetUUID
 <body id="app">
   <div dr-if="true">true</div>  <!-- render -->
   <div dr-if="this.gender === 'M'">gender: M</div> <!-- No Render -->
-<script>
-  let data = {
-    gender: 'F',
-  };
-  data = DomRender.run(data , document.querySelector('#app'));
-</script>
 </body>
 ```
+```typescript
+import { DomRender } from '@dooboostore/dom-render';
+class AppData {
+  gender: string = 'F';
+}
+const data = new AppData();
+DomRender.run(data, document.querySelector('#app')!);
+```
 </details>
@@ -386,6 +394,40 @@ export class MyComponent extends ComponentBase<{ 'title': string, 'show-icon': s
 ```
 When attributes change, the `converter` function will be executed before the value is assigned to the property. For `showIcon`, the string `"true"` or `"false"` will be converted to a boolean. For `createdAt`, the date string will be converted to a `Date` object.
+### Binding to Methods
+The `@attribute` decorator can also be applied to methods. When the corresponding HTML attribute changes, the decorated method will be invoked with the new attribute value as its argument. This allows you to execute custom logic directly in response to attribute changes.
+**Component (`MyComponent.ts`) - Method Example**
+```typescript
+import { ComponentBase, attribute } from '@dooboostore/dom-render';
+export class MyComponent extends ComponentBase<{ 'data-value': string }> {
+    public receivedData: string = '';
+    @attribute({ name: 'data-value' })
+    onDataValueChange(newValue: string): void {
+        this.receivedData = `Method received: ${newValue}`;
+        console.log(this.receivedData);
+    }
+}
+```
+**Template (`index.html`) - Method Example**
+```html
+<my-component data-value="initial"></my-component>
+<p>${@this@.receivedData}$</p>
+<script>
+    setTimeout(() => {
+        const comp = document.querySelector('my-component');
+        comp.setAttribute('data-value', 'updated value');
+    }, 1000);
+</script>
+```
+When `data-value` attribute changes, the `onDataValueChange` method will be called with the new value.
 </details>
 ## Element Query with `@query` decorator
@@ -396,6 +438,7 @@ You can get a reference to DOM elements within your component's template using t
 - If the decorated property is **not an array type**, it returns the **first** matching element (like `querySelector`).
 - If the decorated property **is an array type** (e.g., `HTMLElement[]`), it returns **all** matching elements as an array (like `querySelectorAll`).
+- When applied to a **method**, the method will be called with the queried element(s) as arguments after the component has been rendered. If the method expects a single element, the first match is passed. If it expects an array, all matches are passed.
 This is useful for directly accessing and manipulating elements you need to interact with from your component's logic.
@@ -428,6 +471,22 @@ export class MyComponent extends ComponentBase<{}> {
             });
         }
     }
+    // Method query: This method will be called with the first element matching '.my-button'
+    @query('.my-button')
+    private setupButton(button: HTMLButtonElement) {
+        if (button) {
+            button.addEventListener('click', () => alert('Button clicked from method query!'));
+        }
+    }
+    // Method query: This method will be called with an array of all elements matching 'span.item'
+    @query('span.item')
+    private processItems(spans: HTMLSpanElement[]) {
+        spans.forEach(span => {
+            span.style.fontWeight = 'bold';
+        });
+    }
 }
 ```
@@ -441,9 +500,11 @@ export class MyComponent extends ComponentBase<{}> {
         <li>Item 2</li>
         <li>Item 3</li>
     </ul>
+    <button class="my-button">Click Me</button>
+    <p><span class="item">First Span</span> <span class="item">Second Span</span></p>
 </div>
 ```
-The `@query` decorator will assign the corresponding element(s) to the decorated property. The property will be `null`/`undefined` (for single query) or an empty array (for multiple query) if no elements are found or before the component is rendered.
+The `@query` decorator will assign the corresponding element(s) to the decorated property or pass them to the decorated method. The property will be `null`/`undefined` (for single query) or an empty array (for multiple query) if no elements are found or before the component is rendered. For methods, they will only be called if matching elements are found.
 </details>
@@ -531,6 +592,49 @@ dr-value-link: <input type="text" dr-value-link="@this@.office.addr.street"> <br
 ```
 </details>
+## Element State Attributes
+<details>
+  <summary>dr-checked, dr-selected, dr-readonly, dr-disabled<strong>🔻(click)</strong></summary>
+These attributes allow you to bind boolean values directly to the `checked`, `selected`, `readonly`, and `disabled` properties of HTML elements.
+*   `dr-checked`: Binds the `checked` attribute of an input (checkbox/radio) to a boolean value.
+*   `dr-selected`: Binds the `selected` attribute of an option to a boolean value.
+*   `dr-readonly`: Binds the `readonly` attribute of an input to a boolean value.
+*   `dr-disabled`: Binds the `disabled` attribute of an input/button/etc. to a boolean value.
+### Example
+```html
+<!-- Example for dr-checked -->
+<input type="checkbox" dr-checked="@this@.isChecked">
+<p>Checkbox is: ${@this@.isChecked}$</p>
+<!-- Example for dr-selected -->
+<select>
+  <option value="apple" dr-selected="@this@.isAppleSelected">Apple</option>
+  <option value="banana" dr-selected="@this@.isBananaSelected">Banana</option>
+</select>
+<!-- Example for dr-readonly -->
+<input type="text" dr-readonly="@this@.isReadOnly" value="Some text">
+<!-- Example for dr-disabled -->
+<button dr-disabled="@this@.isDisabled">Click Me</button>
+<input type="text" dr-disabled="@this@.isDisabled" value="Disabled input">
+```
+```typescript
+class Data {
+  isChecked = true;
+  isAppleSelected = false;
+  isBananaSelected = true;
+  isReadOnly = false;
+  isDisabled = true;
+}
+// ... DomRender.run(new Data(), ...)
+```
+</details>
 ## dr-on-rendered-init
 - rendered call
@@ -560,7 +664,7 @@ dr-value-link: <input type="text" dr-value-link="@this@.office.addr.street"> <br
   <summary>dr-style<strong>🔻(click)</strong></summary>
 ```html
-<div dr-style="{'background-image': 'url(\''+@this@.my?.image+'\')'}" >aa</div>
+<div dr-style="{'background-image': 'url(\' '+@this@.my?.image+'\')'}" >aa</div>
 <div dr-style="{fontSize: @this@.age + 'px'}"> style </div>
 <div dr-style="{'font-size': '20px'}"> style</div>
 <div dr-style="'font-size: ' + @this@.age +'px; margin: ' + @this@.age + 'px'"> style </div>
@@ -637,19 +741,24 @@ dr-value-link: <input type="text" dr-value-link="@this@.office.addr.street"> <br
   age: <input name="age">
   <button type="submit">submit</button>
 </form>
-<script>
-  let data = {
-    form: {},
-    submit() {
-      console.log(this.form);
-    }
-  };
-  data = DomRender.run(data , document.querySelector('#app'));
-</script>
 </body>
+```
+```typescript
+import { DomRender } from '@dooboostore/dom-render';
+class FormData {
+  form: any = {};
+  submit() {
+    console.log(this.form);
+  }
+}
+const data = new FormData();
+DomRender.run(data, document.querySelector('#app')!);
+```
 <!-- 💥 submit call -->
 <!-- console: {name: 'name data', age: 'age data'}  -->
-```
 </details>
 <details>
@@ -662,24 +771,32 @@ dr-value-link: <input type="text" dr-value-link="@this@.office.addr.street"> <br
     age: <input name="age">
     <button type="submit">submit</button>
 </form>
-<script>
-    const form = new FormValidator();
-    form.name = new NotEmptyValidator();
-    form.age = new NotEmptyValidator();
-    let data = {
-        form,
-        submit() {
-            if (this.form.valid()){
-                console.log('valid');
-            } else {
-                console.log('inValid');
-            }
-        }
-    };
-    data = DomRender.run(data , document.querySelector('#app'));
-</script>
 </body>
 ```
+```typescript
+import { DomRender } from '@dooboostore/dom-render';
+import { FormValidator, NotEmptyValidator } from '@dooboostore/dom-render/validator';
+class FormDataWithValidator {
+    form: FormValidator = new FormValidator();
+    constructor() {
+        this.form.name = new NotEmptyValidator();
+        this.form.age = new NotEmptyValidator();
+    }
+    submit() {
+        if (this.form.valid()){
+            console.log('valid');
+        } else {
+            console.log('inValid');
+        }
+    }
+}
+const data = new FormDataWithValidator();
+DomRender.run(data, document.querySelector('#app')!);
+```
 validator
 - Validator (abstract)
 - ValidatorArray (abstract)
@@ -720,88 +837,328 @@ validator
 ## Route
 <details>
-  <summary>Route<strong>🔻(click)</strong></summary>
+  <summary><strong>Route (click)</strong></summary>
+Declarative routing is supported using the `dr-route-match` and `dr-route-regexp` components. This allows you to conditionally render parts of your UI based on the current URL path.
+- [Example](./examples/route)
-- [examples](./examples/router)
+### 1. Configuration
+To enable routing, you must set the `routerType` in your `DomRender` configuration.
+- `routerType`: Can be `'hash'`, `'path'`, or `'none'` (default).
-* config routerType: 'hash' | 'path' | 'none'  (default: 'none')
 ```typescript
-// Config
-const config: Config = {
-  window
+// In your main setup file (e.g., index.ts)
+import { DomRender, DomRenderRunConfig } from '@dooboostore/dom-render';
+// ... your root object class (e.g., Index)
+const config: DomRenderRunConfig<Index> = {
+  window: window,
+  routerType: 'path' // or 'hash'
 };
-config.targetElements = [
-  DomRender.createComponent({type: Main, tagName: 'page-main', template: MainTemplate}),
-  DomRender.createComponent({type: Second, tagName: 'page-second', template: SecondTemplate}),
-  DomRender.createComponent({type: Detail, tagName: 'page-detail', template: DetailTemplate})
-]
-config.routerType = 'hash'; // 'hash' | 'path' | 'none';
-const data = DomRender.run(new Data(), document.querySelector('#app')!, config);
+const domRender = new DomRender({
+  rootObject: new Index(),
+  target:  document.querySelector('#app')!,
+  config: config
+}, {autoGo: '/'}); // autoGo navigates to the initial path
 ```
+### 2. Template Usage
+Use the `<dr-route-match>` and `<dr-route-regexp>` components in your HTML template to define which content appears for which route.
+- **`<dr-route-match>`**: Renders its content when the path matches the `value` attribute. It supports simple paths and path parameters (e.g., `/{id}`).
+- **`<dr-route-regexp>`**: Renders its content when the path matches the regular expression in the `value` attribute.
 ```html
+<!-- index.html -->
 <header>
-  <h1>examples header</h1>
-  <h2>${@this@.name}$</h2>
-  <div>
-    <div><button dr-event-click="$router.go('/')">main</button></div>
-    <div>
-      <button dr-event-click="$router.go('/second', {secondata: 555})">second</button>
-      <button dr-event-click="$router.go('/second/5')">second/1</button>
-      <button dr-event-click="$router.go('/second/wow')">second/2</button>
-    </div>
-    <div><button dr-event-click="$router.go('/detail/25?name=zzz')">detail</button></div>
-  </div>
+    <!-- Navigation buttons -->
+    <button dr-event-click="$router?.go({path:'/'})">Main</button>
+    <button dr-event-click="$router?.go({path:'/second'})">Second</button>
+    <button dr-event-click="$router?.go({path:'/detail/42'})">Detail 42</button>
 </header>
-<hr>
 <main>
-  <page-main dr-if="$router.test('/')"></page-main>
-  <page-second dr-if="$router.test('/second')">1</page-second>
-  <page-second dr-if="$router.testRegexp('/second/[0-9]?$')">2</page-second>
-  <page-second dr-if="$router.testRegexp('/second/wow$')">wow</page-second>
-  <page-detail url='/detail/{id:[0-9]+}' dr-if="$router.test($attribute.url)" dr-on-create:callback="$component.routerData($router.getRouteData($attribute.url))" ></page-detail>
-  <div>
-    <button dr-event-click="@this@.plusCount()">${@this@.count}$ count  pluse++</button>
-  </div>
+    <!-- Content for the root path -->
+    <dr-route-match value="/">
+        <h1>Main Page</h1>
+    </dr-route-match>
+    <!-- Content for the /second path -->
+    <dr-route-match value="/second">
+        <h1>Second Page</h1>
+    </dr-route-match>
+    <!-- Content for a path with a numeric parameter -->
+    <dr-route-match value="/detail/{id:[0-9]+}">
+        <h1>Detail Page</h1>
+        <p>The router's pathData will contain the matched 'id'.</p>
+    </dr-route-match>
+    <!-- Content using a regular expression -->
+    <dr-route-regexp value="/second/[0-9]?$">
+        <p>This content appears for paths like /second/1, /second/2, etc.</p>
+    </dr-route-regexp>
 </main>
-<hr>
-<footer>footer</footer>
 ```
+The `$router` object is automatically available in your templates for navigation (`$router.go(...)`) and testing (`$router.test(...)`).
+</details>
+## Accessing the Root Object Proxy
+After initializing `DomRender`, you can get a proxied reference to your `rootObject`. Any changes made to this proxy will be automatically detected and reflected in the DOM. This is useful for updating state from outside your component's methods, such as in `setTimeout` or in response to external events.
 ```typescript
-export class Second implements OnCreateRender {
-    name = 'Second'
+import { DomRender } from '@dooboostore/dom-render';
+class App {
+  message = 'Hello, World!';
+}
+// 1. Initialize DomRender
+const domRender = new DomRender({
+  rootObject: new App(),
+  target: document.querySelector('#app')!
+});
+// 2. Get the proxy to the rootObject
+const data = domRender.rootObject;
+// 3. Now you can modify the state from anywhere
+setTimeout(() => {
+  // This change will automatically update the UI
+  data.message = 'Hello, DomRender!';
+}, 2000);
+```
+```html
+<!-- index.html -->
+<div id="app">
+  ${@this@.message}$
+</div>
+```
+## Core Components
+This section describes the built-in components provided by `dom-render`.
+<details>
+  <summary><strong>ComponentBase & Decorators (<code>@attribute</code>, <code>@query</code>, <code>@event</code>)</strong>🔻(click)</summary>
+`ComponentBase` is the foundation for creating custom components that can interact with the `dom-render` lifecycle and attributes. When you extend `ComponentBase`, you gain access to powerful decorators for linking your class to the template.
+- **`@attribute`**: Binds a class property to an HTML attribute. It can automatically convert values and even bind to methods.
+- **`@query`**: Injects DOM elements from your component's template into class properties or method arguments.
+- **`@event`**: Binds a class method to a DOM event on an element within the template, handling listener cleanup automatically.
-    onCreateRender(data: CreatorMetaData): void {
-        console.log('----->', data.router)
+*For detailed examples of these decorators, please see their dedicated sections above in the documentation.*
+</details>
+<details>
+  <summary><strong>ComponentSet</strong>🔻(click)</summary>
+`ComponentSet` is a wrapper class that pairs a component instance with its own template and styles. It's the primary mechanism for dynamically rendering and swapping components within a `dr-this` block.
+### Usage
+```typescript
+import { ComponentSet } from '@dooboostore/dom-render';
+// Define two simple components
+class ComponentA { message = 'This is Component A'; }
+class ComponentB { message = 'Now you see Component B'; }
+class App {
+    // Create ComponentSet instances for each component
+    componentA = new ComponentSet(new ComponentA(), { template: '<h1>${@this@.message}$</h1>' });
+    componentB = new ComponentSet(new ComponentB(), { template: '<h2>${@this@.message}$</h2>' });
+    // This property will hold the currently active component
+    activeComponent: ComponentSet;
+    constructor() {
+        this.activeComponent = this.componentA;
     }
+    showA() { this.activeComponent = this.componentA; }
+    showB() { this.activeComponent = this.componentB; }
+}
+```
+```html
+<!-- This div will dynamically render the component held by 'activeComponent' -->
+<div dr-this="@this@.activeComponent"></div>
+<button dr-event-click="@this@.showA()">Show Component A</button>
+<button dr-event-click="@this@.showB()">Show Component B</button>
+```
+</details>
+<details>
+  <summary><strong><code>dr-this</code></strong>🔻(click)</summary>
+The `dr-this` component is the target for rendering a `ComponentSet`. It dynamically renders the component instance and template defined in the `ComponentSet` object it's bound to.
+See the `ComponentSet` example above for a practical demonstration.
+</details>
+<details>
+  <summary><strong><code>dr-choose</code> / <code>dr-choose-when</code> / <code>dr-choose-other-wise</code></strong>🔻(click)</summary>
+Provides a "switch-case" control flow for rendering blocks of HTML. It evaluates a data object and renders the first `dr-choose-when` block whose `test` condition returns true. If no `when` blocks match, the `dr-choose-other-wise` block is rendered.
+### Usage
+```typescript
+class App {
+    status: 'loading' | 'success' | 'error' = 'loading';
 }
 ```
+```html
+<dr-choose data="${@this@.status}$">
+    <dr-choose-when test="(status) => status === 'loading'">
+        <p>Loading...</p>
+    </dr-choose-when>
+    <dr-choose-when test="(status) => status === 'success'">
+        <p>Data loaded successfully!</p>
+    </dr-choose-when>
+    <dr-choose-other-wise>
+        <p>An unknown error occurred.</p>
+    </dr-choose-other-wise>
+</dr-choose>
+```
+</details>
+<details>
+  <summary><strong><code>dr-promise-switch</code></strong>🔻(click)</summary>
+Declaratively handles the different states of a JavaScript `Promise`. It provides child components to render content for `pending`, `fulfilled`, and `rejected` states.
+### Child Components
+- `<dr-promise-switch-pending>`: Shown while the promise is in flight.
+- `<dr-promise-switch-fulfilled>`: Shown when the promise resolves successfully. The resolved data is available inside via `#component#.data`.
+- `<dr-promise-switch-rejected>`: Shown when the promise is rejected. The error is available inside via `#component#.data`.
+- `<dr-promise-switch-default>`: Shown before the promise is triggered.
+### Usage
 ```typescript
-import {RouteData} from 'dom-render/routers/Router';
-import {OnCreateRender} from 'dom-render/lifecycle/OnCreateRender';
+class App {
+    userPromise = null;
-export class Detail implements OnCreateRender {
-  name = 'Detail';
+    fetchUser() {
+        this.userPromise = fetch('/api/user').then(res => res.json());
+    }
+}
+```
+```html
+<button dr-event-click="@this@.fetchUser()">Fetch User</button>
+<dr-promise-switch data="${@this@.userPromise}$">
+    <dr-promise-switch-pending>
+        <p>Fetching user data...</p>
+    </dr-promise-switch-pending>
+    <dr-promise-switch-fulfilled>
+        <p>Welcome, ${#component#.data.name}$!</p>
+    </dr-promise-switch-fulfilled>
+    <dr-promise-switch-rejected>
+        <p>Failed to fetch user: ${#component#.data.message}$</p>
+    </dr-promise-switch-rejected>
+</dr-promise-switch>
+```
+</details>
-  onCreateRender(data: CreatorMetaData) {
-    console.log('routeData->', data);
-  }
+<details>
+  <summary><strong><code>dr-checkbox</code></strong>🔻(click)</summary>
-  routerData(routeData: RouteData) {
-    console.log('--------', routeData);
-  }
+A wrapper for creating a custom, stylable checkbox. It uses child components to define the appearance for checked and unchecked states.
+### Child Components
+- `<dr-checkbox-checked>`: Content to show when the box is checked.
+- `<dr-checkbox-unchecked>`: Content to show when the box is unchecked.
+### Usage
+```typescript
+class App {
+    agreed = false;
 }
 ```
+```html
+<dr-checkbox name="terms" checked="${@this@.agreed}$" change="${(checked) => @this@.agreed = checked}$">
+    <dr-checkbox-checked>
+        <!-- Using FontAwesome icons as an example -->
+        <i class="fas fa-check-square"></i> I agree to the terms.
+    </dr-checkbox-checked>
+    <dr-checkbox-unchecked>
+        <i class="far fa-square"></i> I agree to the terms.
+    </dr-checkbox-unchecked>
+</dr-checkbox>
+<p>Agreed: ${@this@.agreed}$</p>
+```
+</details>
+<details>
+  <summary><strong><code>dr-details</code></strong>🔻(click)</summary>
+An enhanced version of the native `<details>` element. It provides child components for the summary and body, and includes extra functionality like closing when the user clicks outside of it.
+### Child Components
+- `<dr-details-summary>`: The clickable header of the details element.
+- `<dr-details-body>`: The collapsible content.
+- `<dr-details-form>`: A special body that is a form, with features like automatic reset on toggle.
+### Usage
+```html
+<dr-details>
+    <dr-details-summary>
+        <h3>More Information</h3>
+    </dr-details-summary>
+    <dr-details-body>
+        <p>Here is the hidden content that appears on click.</p>
+    </dr-details-body>
+</dr-details>
+```
+</details>
+<details>
+  <summary><strong><code>dr-input</code></strong>🔻(click)</summary>
+A custom input component that enhances a standard `<input>` with powerful features like debouncing and distinct value change detection. This is useful for performance-intensive tasks like live search.
+### Attributes
+- `debounceTime`: (Optional) The time in milliseconds to wait after the user stops typing before firing the `input` event.
+- `distinct`: (Optional) If set to `true`, the `input` event will only fire if the new value is different from the previous one.
+- `input`: A callback function that receives the debounced/distinct value.
+### Usage
 ```typescript
-// RouteData type
-type RouteData = {
-  path: string;
-  url: string;
-  data?: any;
-  searchParams: URLSearchParams;
-  pathData?: any;
+class App {
+    searchQuery = '';
+    handleSearch(query: string) {
+        console.log('Searching for:', query);
+        this.searchQuery = query;
+    }
 }
 ```
+```html
+<label>Search:</label>
+<dr-input
+    type="text"
+    class="search-input"
+    debounceTime="300"
+    distinct="true"
+    input="${(value) => @this@.handleSearch(value)}$"
+></dr-input>
+<p>Current query: ${@this@.searchQuery}$</p>
+```
 </details>
 ## Messenger (Data transmission)
@@ -866,7 +1223,7 @@ const rangeArray = new Range(100,55, 10).toArray();
 const appender = new Appender<number>([1, 2]);
 appender.push(3, 4)
 for (const data of appender) {
-    console.log('----appender item--->', data);
+    console.log('----appender item---', data);
 }
 ```
 </details>
@@ -880,10 +1237,10 @@ for (const data of appender) {
 {
     name: 'dom-render'
     onBeforeReturnSet: (name: string, value: any, fullpath: string[]) => {
-        console.log('set name-->', name, value, fullpath);
+        console.log('set name--', name, value, fullpath);
     }
     onBeforeReturnGet: (name: string, value: any, fullpath: string[]) => {
-        console.log('get name-->', name, value, fullpath);
+        console.log('get name--', name, value, fullpath);
     }
 }
 ```
@@ -1107,4 +1464,4 @@ lazy loading rollup config
 # License
 * MIT
-* visualkhh@gmail.com
+* visualkhh@gmail.com