native-document 1.0.205 → 1.0.206

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "native-document",
-  "version": "1.0.205",
+  "version": "1.0.206",
   "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/BaseComponent.d.ts

@@ -2,6 +2,7 @@ import type { ValidChild, GlobalAttributes, NdStyleMap } from '../../types/eleme
 import type { ObservableItem } from '../../types/observable';
 import type { CssPropertyAccumulator, ClassPropertyAccumulator } from '../../types/property-accumulator';
 import {BaseComponentEvents} from "./BaseComponentEvents";
+import {RefItem} from "../../types/ref";
 
 export type EditableProps = Omit<GlobalAttributes, 'class' | 'style'> & {
     class: ClassPropertyAccumulator;
@@ -11,7 +12,8 @@ export type EditableProps = Omit<GlobalAttributes, 'class' | 'style'> & {
 export interface BaseComponent extends BaseComponentEvents {
     setDescription(description: Record<string, unknown>): this;
     postBuild(callback: (element: HTMLElement) => void): this;
-    refSelf(target: Record<string, unknown>, name: string): this;
+    refSelf(target: RefItem | Record<string, unknown>, name: string): this;
+    ref(target: RefItem | Record<string, unknown>, name: string): this;
     toNdElement(): HTMLElement | DocumentFragment;
     node(): HTMLElement | DocumentFragment;
     toJSON(): Record<string, unknown>;

package/src/components/form/field/FieldCollection.js

@@ -42,7 +42,9 @@ export default function FieldCollection(name, props = {}) {
         fieldBuilder: null,
         renderItem: null,
         renderAdd: null,
+        layout: null,
         transition: null,
+        label: null,
         props,
     };
 
@@ -109,6 +111,18 @@ FieldCollection.prototype.renderItem = function(fn) {
     return this;
 };
 
+/**
+ *
+ * @param {NdChild} label
+ * @return {this}
+ */
+FieldCollection.prototype.label = function(label) {
+    this.$description.label = label;
+    return this;
+};
+
+FieldCollection.prototype.title = FieldCollection.prototype.label;
+
 /**
  * @param {() => NdChild} fn
  * @returns {this}
@@ -268,6 +282,16 @@ FieldCollection.prototype.max = function(maxCount, message) {
     );
 };
 
+/**
+ *
+ * @param {({ button: NdChild, rows: NdChild, label: NdChild})} layoutFn
+ * @return {this}
+ */
+FieldCollection.prototype.layout = function(layoutFn) {
+    this.$description.layout = layoutFn;
+    return this;
+};
+
 // Override validate
 /**
  * @param {*} [allValues]

package/src/components/form/types/FieldCollection.d.ts

@@ -20,7 +20,7 @@ export type FieldCollectionDescription = {
         props: GlobalAttributes;
     };
 
-export interface FieldCollectionInterface extends BaseComponent, HasValidation {
+export interface FieldCollectionInterface extends Omit<BaseComponent, 'onChange'> , HasValidation {
     fields(fieldBuilder: (fields: FieldCollectionInterface, index: number) => ValidChild): this;
     data(defaultItem: unknown): this;
     renderItem(fn: (item: unknown, index: number) => ValidChild): this;
@@ -40,6 +40,9 @@ export interface FieldCollectionInterface extends BaseComponent, HasValidation {
     min(minCount: number, message?: string): this;
     max(maxCount: number, message?: string): this;
     render(template: (description: FieldCollectionDescription, instance: FieldCollectionInterface) => ValidChild): this;
+    label(label: ValidChild): this;
+    title(title: ValidChild): this;
+    layout(slots: { button: ValidChild, rows: ValidChild, label: ValidChild }): this;
 }
 
 

package/src/ui/components/form/FieldCollectionRender.js

@@ -1,6 +1,7 @@
 import {Div, ForEachArray} from '../../../../elements';
 import {Button} from '../../../components/button';
 import { $ } from '../../../core/data/Observable';
+import {H2} from '../../../core/elements';
 
 import './field-collection.css';
 
@@ -106,10 +107,23 @@ export default function FieldCollectionRender($desc, instance) {
         );
     };
 
-    return Div(instance.resolveProps(), [
-        Div({class: 'field-collection-list'},
-            ForEachArray($items, buildItem),
-        ),
-        buildAddButton(),
-    ]);
-}
+    const layout = $desc.layout ?? defaultLayout;
+
+    const button = buildAddButton();
+    const rows = ForEachArray($items, buildItem);
+    const label = $desc.label ? H2($desc.label) : null;
+
+    return Div(instance.resolveProps(), layout({ button, rows, label }));
+}
+
+
+const defaultLayout = ({ label, button, rows }) => {
+
+    return [
+        Div({ class: 'field-collection-header' }, [
+            label,
+            button
+        ]),
+        Div({class: 'field-collection-list'}, rows),
+    ];
+};

package/src/ui/components/form/field-collection.css

@@ -4,6 +4,11 @@
     gap: var(--space-comfortable);
 }
 
+.field-collection-header {
+    display: flex;
+    justify-content: space-between;
+}
+
 .field-collection-list {
     display: flex;
     flex-direction: column;
@@ -12,7 +17,8 @@
 
 .field-collection-item {
     display: flex;
-    align-items: flex-start;
+    justify-content: space-between;
+    align-items: center;
     gap: var(--space-cozy);
     padding: var(--space-comfortable);
     border: 1px solid var(--field-input-border);

package/types/nd-element.d.ts

@@ -1,4 +1,5 @@
 import {BindingHydrator} from "./template-cloner";
+import {RefItem} from "./ref";
 
 type ShadowMode = 'open' | 'closed';
 
@@ -18,8 +19,8 @@ export interface NDElement {
     readonly $observer: any;
     readonly nd: this;
 
-    ref(target: any, name: string): this;
-    refSelf(target: any, name: string): this;
+    ref(target: RefItem | Record<string, unknown>, name: string): this;
+    refSelf(target: RefItem | Record<string, unknown>, name: string): this;
     with<T extends MethodsObject>(methods: T): this & ExtractMethods<T>;
     extend(methods: MethodsObject): NDElement;
     extend<T extends MethodsObject>(