native-document 1.0.186 → 1.0.188

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "native-document",
-  "version": "1.0.186",
+  "version": "1.0.188",
   "description": "A reactive JavaScript framework that preserves native DOM simplicity without sacrificing modern features",
   "author": "AfroCodeur <https://github.com/afrocodeur>",
   "license": "MIT",

package/router.js

@@ -7,5 +7,5 @@ import { Link } from './src/router/link.js';
 export {
     RouteParamPatterns,
     Router,
-    Link
-}
+    Link,
+};

package/src/components/avatar/Avatar.js

@@ -123,13 +123,18 @@ Avatar.prototype.alt = function(alt) {
 
 /**
  * Sets the name associated with the avatar
- * @param {string} name - The name
+ * @param {string|Observable} name - The name
  * @returns {Avatar}
  */
 Avatar.prototype.name = function(name) {
     this.$description.name = name;
     if(!this.$description.initials) {
-        this.$description.initials = name.split(' ').map(n => n[0]).join('');
+        if(name.__$Observable) {
+            this.$description.initials = name.format((value) => value.split(' ').map(n => n[0]).join(''));
+        }
+        else {
+            this.$description.initials = name.split(' ').map(n => n[0]).join('');
+        }
     }
     return this;
 };

package/src/components/button/CopyButton.js

@@ -0,0 +1,37 @@
+import BaseComponent from '../BaseComponent';
+import Button from './Button';
+
+
+export default function CopyButton(content, props){
+
+    if(!(this instanceof CopyButton)) {
+        return new CopyButton(content, props);
+    }
+
+    Button.call(this, content, props);
+
+    Object.assign(this.$description, {
+        target: null,
+        content,
+        props,
+    });
+
+};
+
+BaseComponent.extends(CopyButton, Button);
+
+CopyButton.defaultTemplate = null;
+CopyButton.use = function (render){
+    CopyButton.defaultTemplate = render;
+};
+
+/**
+ *
+ * @param {Observable} $observable
+ * @returns {CopyButton}
+ */
+CopyButton.prototype.from = function($observable) {
+    this.$description.target = $observable;
+    return this;
+};
+

package/src/components/button/PasteButton.js

@@ -0,0 +1,32 @@
+import Button from './Button';
+import BaseComponent from '../BaseComponent';
+
+
+export default function PasteButton(content, props) {
+
+    if(!(this instanceof PasteButton)) {
+        return new PasteButton(content, props);
+    }
+
+    Button.call(this, content, props);
+
+    Object.assign(this.$description, {
+        content,
+        props,
+        target: null,
+    });
+}
+
+BaseComponent.extends(PasteButton, Button);
+
+
+PasteButton.defaultTemplate = null;
+PasteButton.use = function (render){
+    PasteButton.defaultTemplate = render;
+};
+
+
+PasteButton.prototype.into = function($observable) {
+    this.$description.target = $observable;
+    return this;
+};

package/src/components/button/ResetButton.js

@@ -0,0 +1,5 @@
+import Button from './Button';
+
+export default function ResetButton(content, props) {
+    return Button(content, props).type('reset');
+}

package/src/components/button/SubmitButton.js

@@ -0,0 +1,5 @@
+import Button from './Button';
+
+export default function SubmitButton(content, props){
+    return Button(content, props).type('submit');
+}

package/src/components/button/index.js

@@ -1,5 +1,13 @@
 import Button from './Button';
+import SubmitButton from './SubmitButton';
+import ResetButton from './ResetButton';
+import PasteButton from './PasteButton';
+import CopyButton from './CopyButton';
 
 export {
     Button,
+    SubmitButton,
+    ResetButton,
+    PasteButton,
+    CopyButton,
 };

package/src/components/button/types/Button.d.ts

@@ -53,10 +53,8 @@ export interface ButtonInterface extends BaseComponent {
 export declare function Button(label: ValidChild, props?: Record<string, unknown>): ButtonInterface;
 export declare namespace Button {
 
-
     function use(template: (description: ButtonDescription, instance: ButtonInterface) => ValidChild): void;
     function preset(name: string, callback: (instance: ButtonInterface) => ButtonInterface): void;
     function presets(presets: Record<string, (instance: ButtonInterface) => ButtonInterface>): void;
 
-
 }

package/src/components/button/types/CopyButton.d.ts

@@ -0,0 +1,16 @@
+import {ButtonInterface} from "./Button";
+import {ObservableItem} from "../../../../types/observable";
+import {ValidChild} from "../../../../types/elements";
+
+
+export interface CopyButtonInterface extends ButtonInterface{
+
+    from($observable: ObservableItem): this;
+
+}
+export declare function CopyButton(label: ValidChild, props?: Record<string, unknown>): CopyButtonInterface;
+export declare namespace CopyButton {
+
+    function use(template: (description: ButtonInterface, instance: ButtonInterface) => ValidChild): void;
+
+}

package/src/components/button/types/PasteButton.d.ts

@@ -0,0 +1,16 @@
+import {ButtonDescription, ButtonInterface} from "./Button";
+import {ObservableItem} from "../../../../types/observable";
+import type {ValidChild} from "../../../../types/elements";
+
+
+export interface PasteButtonInterface extends ButtonInterface{
+
+    into($observable: ObservableItem): this;
+
+}
+export declare function PasteButton(label: ValidChild, props?: Record<string, unknown>): PasteButtonInterface;
+export declare namespace PasteButton {
+
+    function use(template: (description: ButtonDescription, instance: ButtonInterface) => ValidChild): void;
+
+}

package/src/components/button/types/ResetButton.d.ts

@@ -0,0 +1,6 @@
+import {ButtonInterface} from "./Button";
+
+
+export interface ResetButton extends ButtonInterface {
+
+}

package/src/components/button/types/SubmitButton.d.ts

@@ -0,0 +1,6 @@
+import {ButtonInterface} from "./Button";
+
+
+export interface SubmitButton extends ButtonInterface {
+
+}

package/src/components/dropdown/Dropdown.js

@@ -308,7 +308,7 @@ Dropdown.prototype.trigger = function(trigger, includeTriggerIntoGhost = true) {
  * @returns {this}
  */
 Dropdown.prototype.add = function(item, props = {}) {
-    this.$description.items.push(normalizeDropdownItem(item, null, props));
+    this.$description.items.push(normalizeDropdownItem(item, props));
     return this;
 };
 

package/src/components/dropdown/DropdownItem.js

@@ -36,6 +36,7 @@ export default function DropdownItem(props = {}) {
         data: null,
         render: null,
         renderContent: null,
+        action: null,
         props,
     };
     this.aria = { 'role': 'option', 'tabindex': '-1' };
@@ -115,6 +116,14 @@ DropdownItem.prototype.content = function(content) {
     this.$description.content = content;
     return this;
 };
+/**
+ * @param {Function} action
+ * @returns {this}
+ */
+DropdownItem.prototype.action = function(action) {
+    this.$description.action = action;
+    return this;
+};
 
 /**
  * @param {*} data

package/src/components/dropdown/helpers.js

@@ -18,6 +18,12 @@ export const normalizeDropdownItem = (raw, mapper = null, props = {}) => {
         return raw;
     }
 
+    if(typeof raw === 'function') {
+        const item = new DropdownItem({});
+        raw(item);
+        return item;
+    }
+
     let config;
 
     if(typeof mapper === 'function') {

package/src/components/dropdown/types/DropdownItem.d.ts

@@ -25,6 +25,7 @@ export interface DropdownItemInterface extends BaseComponent {
     content(content: ValidChild): this;
     data(data: unknown): this;
     getData(): unknown;
+    action(action: Function): this;
     shortcut(shortcut: ValidChild): this;
     render(template: (description: DropdownItemDescription, instance: DropdownItemInterface) => ValidChild): this;
     renderContent(callback: (item: DropdownItemInterface) => ValidChild): this;

package/src/components/form/field/types/RadioField.js

@@ -39,6 +39,7 @@ export default function RadioField(name, props = {}) {
         options: [],
         layout: 'vertical',
         checked: false,
+        renderItem: null,
     });
 }
 
@@ -142,4 +143,13 @@ RadioField.prototype.vertical = function() {
 RadioField.prototype.grid = function() {
     this.$description.layout = 'grid';
     return this;
+};
+
+/**
+ * @param {Function} renderFn
+ * @returns {RadioField}
+ */
+RadioField.prototype.renderItem = function(renderFn) {
+    this.$description.renderItem = renderFn;
+    return this;
 };

package/src/components/form/types/fields/RadioField.d.ts

@@ -2,6 +2,7 @@ import type { ValidChild } from '../../../../../types/elements';
 import type { ObservableItem } from '../../../../../types/observable';
 import type { GlobalAttributes } from '../../../../../types/globals';
 import type { FieldInterface } from '../Field';
+import {HTMLInputElement} from "happy-dom";
 
 interface RadioOption {
     value: unknown;
@@ -35,6 +36,7 @@ export interface RadioFieldInterface extends Omit<FieldInterface, 'render' | 'mo
     horizontal(): this;
     vertical(): this;
     grid(): this;
+    renderItem(item: (input: HTMLInputElement, data: RadioOption) => ValidChild): this;
 }
 
 

package/src/components/index.d.ts

@@ -31,6 +31,10 @@ export type { BreadCrumb, BreadCrumbInterface, BreadCrumbDescription } from './b
 
 // --- Button ------------------------------------------------------------------
 export type { Button, ButtonInterface, ButtonDescription } from './button/types/Button';
+export type { CopyButton } from './button/types/CopyButton';
+export type { PasteButton } from './button/types/PasteButton';
+export type { SubmitButton } from './button/types/SubmitButton';
+export type { ResetButton } from './button/types/ResetButton';
 
 // --- Card --------------------------------------------------------------------
 export type { Card, CardInterface, CardDescription } from './card/types/Card';

package/src/components/table/DataTable.js

@@ -363,20 +363,24 @@ DataTable.prototype.onSort = function(handler) {
 // ---------------------------------------------
 
 /**
- * @param {*} [enabled]
+ * @param {boolean} [enabled]
+ * @param {Observable} [model]
  * @returns {this}
  */
-DataTable.prototype.searchable = function(enabled = true) {
+DataTable.prototype.searchable = function(enabled = true, model = null) {
     this.$description.searchable = enabled;
+    this.$description.$search = model;
     return this;
 };
 
 /**
- * @param {*} [enabled]
+ * @param {boolean} [enabled]
+ * @param {Record<string, *>?} filters
  * @returns {this}
  */
-DataTable.prototype.filterable = function(enabled = true) {
+DataTable.prototype.filterable = function(enabled = true, filters = null) {
     this.$description.filterable = enabled;
+    this.$description.defaultFilter = filters;
     return this;
 };
 

package/src/core/data/ObservableArray.js

@@ -278,6 +278,7 @@ ObservableArray.prototype.populateAndRender = function(iteration, callback) {
  * The filtered array updates automatically when source data or predicates change.
  *
  * @param {Object} predicates - Object mapping property names to filter conditions or functions
+ * @param {Observable[]?} dependencies - dependencies list when predicates is a function
  * @returns {ObservableArray} A new observable array containing filtered items
  * @example
  * const users = Observable.array([
@@ -287,9 +288,9 @@ ObservableArray.prototype.populateAndRender = function(iteration, callback) {
  *
  * const adults = users.where({ age: (val) => val >= 18 });
  */
-ObservableArray.prototype.where = function(predicates) {
+ObservableArray.prototype.where = function(predicates, dependencies = null) {
     if(typeof predicates === 'function') {
-        predicates = { _: predicates };
+        predicates = { _: predicates, dependencies };
     }
     const sourceArray = this;
     const observableDependencies = [sourceArray];
@@ -322,7 +323,10 @@ ObservableArray.prototype.where = function(predicates) {
                 if(key === '_') {
                     if (!callback(item)) return false;
                 } else {
-                    if (!callback(item[key])) return false;
+                    const valueSource = item[key];
+                    if (!callback(valueSource?.__$Observable ? valueSource.val() : valueSource)) {
+                        return false;
+                    }
                 }
             }
             return true;

package/src/core/data/ObservableItem.js

@@ -174,7 +174,12 @@ ObservableItem.prototype.triggerWatchersAndFirstListener = function(operations)
 ObservableItem.prototype.$runAssocTrigger = function() {
     this.$firstListener = null;
     if(this.$watchers?.size && this.$listeners?.length) {
-        this.$trigger = (this.$listeners.length === 1) ? this.triggerWatchersAndFirstListener : this.triggerAll;
+        if(this.$listeners.length === 1) {
+            this.$firstListener = this.$listeners[0];
+            this.$trigger = this.triggerWatchersAndFirstListener;
+        } else {
+            this.$trigger =  this.triggerAll;
+        }
         return;
     }
     if(this.$listeners?.length) {

package/src/core/wrappers/AttributesWrapper.js

@@ -171,10 +171,10 @@ const AttributesWrapper = (element, attributes = {}) => {
             element.setAttribute(attributeName, value);
             continue;
         }
-        if(value.$hydrate) {
-            value.$hydrate(element,  attributeName, 'attribute');
-            continue;
-        }
+        // if(value.$hydrate) {
+        //     value.$hydrate(element,  attributeName, 'attribute');
+        //     continue;
+        // }
         // const attributeName = originalAttributeName.toLowerCase();
         if(value.__$Observable) {
             if(BOOLEAN_ATTRIBUTES.has(attributeName)) {
@@ -199,9 +199,9 @@ const AttributesWrapper = (element, attributes = {}) => {
             continue;
         }
 
-        // if(value.__$isTemplateBinding) {
-        //     // value.$hydrate(element, attributeName, 'attribute');
-        // }
+        if(value.__$isTemplateBinding) {
+            value.$hydrate(element, attributeName, 'attribute');
+        }
 
         element.setAttribute(attributeName, value);
     }

package/src/core/wrappers/template-cloner/NodeCloner.js

@@ -65,18 +65,15 @@ const getPropertyValue = (callbackOrProperty, data) => {
 };
 
 
-const $nodeClonedCallbackData = new WeakMap();
-
-const $nodeClonerCallbackCaller = (callback, event) => {
-    const data = $nodeClonedCallbackData.get(event.target);
-    callback.apply(event.target, [...data, event]);
+const $nodeClonerCallbackCaller = function(callback, event) {
+    const data = event.currentTarget.$ndScopeData;
+    callback.apply(event.currentTarget, [...data, event]);
 };
 
 NodeCloner.prototype.resolveMethods = function() {
     for(const methodName in this.$ndMethods) {
         const callback = this.$ndMethods[methodName];
-        const uniqueCallback = $nodeClonerCallbackCaller.bind(null, callback);
-        this.$uniqueCallbacks.set(methodName, uniqueCallback);
+        this.$ndMethods[methodName] = $nodeClonerCallbackCaller.bind($nodeClonerCallbackCaller, callback);
     }
 };
 /**
@@ -85,95 +82,108 @@ NodeCloner.prototype.resolveMethods = function() {
  *
  * @internal
  */
-NodeCloner.prototype.resolve = function() {
-    if(this.$content) {
-        return;
-    }
-    this.resolveMethods();
-    const steps = [];
-    if(this.$ndMethods) {
-        const methods = Object.keys(this.$ndMethods);
-        if(methods.length === 1) {
-            const methodName = methods[0];
-            steps.push((clonedNode) => {
-                const uniqueCallback = this.$uniqueCallbacks.get(methodName);
-                clonedNode.nd[methodName](uniqueCallback);
-            });
+NodeCloner.prototype.$cleanResolve = function() {
+    const fns = [];
+    const fnsParamNames = [];
+    const fnsParams = [];
+
+    const $element = this.$element;
+
+    if(this.$ndMethods !== null) {
+        const methodNames = Object.keys(this.$ndMethods);
+        if(methodNames.length === 1) {
+            const methodName = methodNames[0];
+            const callback = this.$ndMethods[methodName];
+            if($element[methodName]) {
+                fns.push(`clonedNode.${methodName}(callback)`);
+            } else {
+                fns.push(`clonedNode.nd.${methodName}(callback)`);
+            }
+            fnsParamNames.push('callback');
+            fnsParams.push(callback);
         } else {
-            steps.push((clonedNode) => {
-                const nd = clonedNode.nd;
-                for(const methodName in this.$ndMethods) {
-                    const uniqueCallback = this.$uniqueCallbacks.get(methodName);
 
-                    // callback.length === 0 ? callback : this.$ndMethods[methodName].bind(clonedNode, ...data)
-                    nd[methodName](uniqueCallback);
+            for(const methodName in this.$ndMethods) {
+                const callbackName = methodName+'Callback';
+                const callback = this.$ndMethods[methodName];
+                if($element[methodName]) {
+                    fns.push(`clonedNode.${methodName}(${callbackName})`);
+                } else {
+                    fns.push(`clonedNode.nd.${methodName}(${callbackName})`);
                 }
-            });
+                fnsParamNames.push(callbackName);
+                fnsParams.push(callback);
+            }
         }
     }
-    if(this.$classes) {
+    if(this.$classes !== null) {
         const cache = {};
         const keys = Object.keys(this.$classes);
 
         if(keys.length === 1) {
             const key = keys[0];
             const callback = this.$classes[key];
-            steps.push((clonedNode, data) => {
-                cache[key] = getPropertyValue(callback, data);
-                ElementCreator.processClassAttribute(clonedNode, cache);
-            });
+            fns.push(`ElementCreator.processClassAttribute(clonedNode, { ${key}: getPropertyValue(getPropertyValueCallback, data) })`);
+            fnsParamNames.push('getPropertyValueCallback');
+            fnsParams.push(callback);
         } else {
-            steps.push((clonedNode, data) => {
-                ElementCreator.processClassAttribute(clonedNode, buildProperties(cache, this.$classes, data));
-            });
+            fns.push(`const classesCache = {}`);
+            fns.push(`ElementCreator.processClassAttribute(clonedNode, buildProperties(classesCache, $classes, data))`);
+            fnsParamNames.push('$classes');
+            fnsParams.push(this.$classes);
         }
     }
-    if(this.$styles) {
+    if(this.$styles !== null) {
         const cache = {};
         const keys = Object.keys(this.$styles);
 
         if(keys.length === 1) {
             const key = keys[0];
             const callback = this.$styles[key];
-            steps.push((clonedNode, data) => {
-                cache[key] = getPropertyValue(callback, data);
-                ElementCreator.processStyleAttribute(clonedNode, cache);
-            });
+            fns.push(`ElementCreator.processStyleAttribute(clonedNode, { ${key}: getPropertyValue(getStyleValueCallback, data) } )`);
+            fnsParamNames.push('getStyleValueCallback');
+            fnsParams.push(callback);
         } else {
-            steps.push((clonedNode, data) => {
-                ElementCreator.processStyleAttribute(clonedNode, buildProperties(cache, this.$styles, data));
-            });
+            fns.push(`const stylesCache = {}`);
+            fns.push(`ElementCreator.processStyleAttribute(clonedNode, buildProperties(stylesCache, $styles, data))`);
+            fnsParamNames.push('$styles');
+            fnsParams.push(this.$styles);
         }
     }
-    if(this.$attrs) {
+    if(this.$attrs !== null) {
         const cache = {};
         const keys = Object.keys(this.$attrs);
 
         if(keys.length === 1) {
             const key = keys[0];
             const callback = this.$attrs[key];
-            steps.push((clonedNode, data) => {
-                cache[key] = getPropertyValue(callback, data);
-                ElementCreator.processAttributes(clonedNode, cache);
-            });
+            fns.push(`ElementCreator.processAttributes(clonedNode, { ${key}: getPropertyValue(getAttrValueCallback, data) } )`);
+            fnsParamNames.push('getAttrValueCallback');
+            fnsParams.push(callback);
         } else {
-            steps.push((clonedNode, data) => {
-                ElementCreator.processAttributes(clonedNode, buildProperties(cache, this.$attrs, data));
-            });
+            fns.push(`const attrsCache = {}`);
+            fns.push(`ElementCreator.processAttributes(clonedNode, buildProperties(attrsCache, this.$attrs, data))`);
+            fnsParamNames.push('$attrs');
+            fnsParams.push(this.$attrs);
         }
     }
 
-    const stepsCount = steps.length;
-    const $element = this.$element;
+    fnsParamNames.push('ElementCreator', 'buildProperties', 'getPropertyValue', '$element', 'data');
+    fnsParams.push(ElementCreator, buildProperties, getPropertyValue, $element);
+    fns.unshift('const clonedNode = $element.cloneNode(false)', 'clonedNode.$ndScopeData = data');
+    fns.push('return clonedNode');
 
-    this.cloneNode = (data) => {
-        const clonedNode = $element.cloneNode(false);
-        $nodeClonedCallbackData.set(clonedNode, data);
-        for(let i = 0; i < stepsCount; i++) {
-            steps[i](clonedNode, data);
-        }
-        return clonedNode;
-    };
+    this.cloneNode = (new Function(fnsParamNames, fns.join(';'))).bind(null, ...fnsParams);
+};
+
+NodeCloner.prototype.resolve = function() {
+    if(this.$content) {
+        return;
+    }
+    this.resolveMethods();
+    this.$cleanResolve();
+    this.resolve = this.$cleanResolve();
+    return this;
 };
 
 /**

package/src/router/Route.js

@@ -1,4 +1,5 @@
 import {trim} from '../core/utils/helpers.js';
+import {Observable} from '../core/data/Observable';
 
 export const RouteParamPatterns = {
     id:       '[0-9]+',
@@ -112,16 +113,26 @@ export function Route($path, $component, $options = {}) {
     /**
      * @param {{params: ?Object, query: ?Object, basePath: ?string}} configs
      */
-    this.url = function(configs) {
+    this.url = function(configs = {}) {
         const path = $path.replace(/\{(.*?)}/ig, (block, definition) => {
             const description = paramsExtractor(definition);
             if(configs.params && configs.params[description.name]) {
-                return configs.params[description.name];
+                const value =  configs.params[description.name];
+                return value?.__$Observable ? value.val() : value;
             }
             throw new Error(`Missing parameter '${description.name}'`);
         });
 
-        const queryString = (typeof configs.query === 'object') ? (new URLSearchParams(configs.query)).toString() : null;
+        let queries = null;
+        if(typeof configs.query === 'object') {
+            queries = {};
+            for(const property in configs.query) {
+                const value = configs.query[property];
+                queries[property] = value?.__$Observable ? value.val() : value;
+            }
+        }
+
+        const queryString = (queries) ? (new URLSearchParams(queries)).toString() : null;
         return (configs.basePath ? configs.basePath : '') + (queryString ? `${path}?${queryString}` : path);
     };
 }

package/src/ui/components/button/CopyButtonRender.js

@@ -0,0 +1,13 @@
+import ButtonRender from './ButtonRender';
+
+
+export default function CopyButtonRender($desc, instance) {
+
+    return ButtonRender($desc, instance).onClick(() => {
+        if(!$desc.target) {
+            return;
+        }
+
+        navigator.clipboard.writeText($desc.target.val());
+    });
+}

package/src/ui/components/button/PasteButtonRender.js

@@ -0,0 +1,14 @@
+import {ButtonRender} from '../../index';
+
+
+export default function PasteButtonRender($desc, instance) {
+
+    return ButtonRender($desc, instance).onClick(() => {
+        if(!$desc.target) {
+            return;
+        }
+        navigator.clipboard.readText().then(text => {
+            $desc.target.set(text);
+        });
+    });
+}

package/src/ui/components/form/fields/FieldRender.js

@@ -1,5 +1,6 @@
 import {Div, Label, Input, Span, ShowIf, ForEachArray} from '../../../../../elements';
 import {buildInputWithSlots} from '../helpers';
+import {Observable} from '../../../../core/data/Observable';
 
 import './field.css';
 
@@ -106,13 +107,14 @@ const setupEvents = (input, $desc, instance) => {
 };
 
 const buildErrors = ($desc) => {
-    return ShowIf($desc.showErrors, () => {
-        return ShowIf($desc.hasErrors,
-            () => Div({class: 'field-errors', ...($desc.elementsProps.error || {})},
-                ForEachArray($desc.errors, (error) =>
-                    Span({class: 'field-error'}, (typeof error === 'string' ? error.toNdChildren() : error)),
-                ),
+    const $shouldShowErrors = Observable.computed((showErrors, hasErrors) => {
+        return showErrors && hasErrors;
+    }, [$desc.showErrors, $desc.hasErrors]);
+    return ShowIf($shouldShowErrors,
+        () => Div({class: 'field-errors', ...($desc.elementsProps.error || {})},
+            ForEachArray($desc.errors, (error) =>
+                Span({class: 'field-error'}, (typeof error === 'string' ? error.toNdChildren() : error)),
             ),
-        );
-    });
+        ),
+    );
 };

package/src/ui/components/form/fields/RadioFieldRender.js

@@ -47,7 +47,7 @@ const buildOptions = ($desc, instance) => {
         instance.validate();
     };
 
-    const buildOption = (option) => {
+    const buildOption = ($desc, option) => {
         const optValue = option.value ?? option;
         const optLabel = option.label ?? option;
         const optId    = ($desc.id || $desc.name) + '-' + optValue;
@@ -64,6 +64,10 @@ const buildOptions = ($desc, instance) => {
 
         input.nd.onChange(() => onSelect(optValue));
 
+        if($desc.renderItem) {
+            return Div({class: 'field-radio-wrapper'}, $desc.renderItem(input, option));
+        }
+
         return Div({class: 'field-radio-wrapper'}, [
             input,
             Label({class: 'field-radio-label', for: optId}, optLabel),
@@ -71,11 +75,12 @@ const buildOptions = ($desc, instance) => {
     };
 
     const isRequired = $desc.rules?.some(rule => rule.fn?.name === 'required');
+    const optionBuilder = buildOption.bind(null, $desc);
     return Div({
         class: 'field-radio-group is-' + ($desc.layout || 'vertical'),
         // [a11y] role=radiogroup, aria-required
         role: 'radiogroup',
         ...( isRequired ? { 'aria-required': 'true' } : {} ),
         ...($desc.elementsProps.wrapper || {}),
-    }, ForEachArray($options, buildOption));
+    }, ForEachArray($options, optionBuilder));
 };

package/src/ui/components/popover/PopoverRender.js

@@ -61,6 +61,7 @@ export default function PopoverRender($desc, instance, classPrefix = 'popover')
 
 
     let position;
+    const isSupportsPopover = supportsPopover();
     const updatePosition = (state) => {
         if(!state) {
             return;
@@ -79,7 +80,7 @@ export default function PopoverRender($desc, instance, classPrefix = 'popover')
             if($desc.showIf && $desc.showIf.val() === false) {
                 return;
             }
-            if(supportsPopover()) {
+            if(isSupportsPopover) {
                 popover.showPopover();
             }
 

package/src/ui/index.js

@@ -6,6 +6,8 @@ export { default as DividerRender } from './components/divider/DividerRender';
 export { default as SkeletonRender } from './components/skeleton/SkeletonRender';
 export { default as ProgressRender } from './components/progress/ProgressRender';
 export { default as ButtonRender } from './components/button/ButtonRender';
+export { default as CopyButtonRender } from './components/button/CopyButtonRender';
+export { default as PasteButtonRender } from './components/button/PasteButtonRender';
 export { default as AlertRender } from './components/alert/AlertRender';
 export { default as ToastRender } from './components/toast/ToastRender';
 export { default as PopoverRender } from './components/popover/PopoverRender';