native-document 1.0.187 → 1.0.188

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "native-document",
-  "version": "1.0.187",
+  "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/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/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/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/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/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';