native-document 1.0.261 → 1.0.262

package/elements.d.ts

@@ -1,6 +1,7 @@
 // Main NativeDocument type definitions index
 export * from './types/observable';
 export * from './types/elements';
+export * from './types/slot';
 export * from './types/nd-element';
 export * from './types/forms';
 export * from './types/images';

package/elements.js

@@ -1,3 +1,4 @@
 export {default as Anchor, default as NativeDocumentFragment } from "./src/core/elements/anchor/anchor";
+export { default as Slot } from "./src/core/elements/anchor/Slot";
 export { createPortal } from "./src/core/elements/anchor/anchor";
 export * from './src/core/elements/index';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "native-document",
-  "version": "1.0.261",
+  "version": "1.0.262",
   "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/form/field/types/SelectField.js

@@ -53,6 +53,7 @@ export default function SelectField(name, props) {
         selectedLabelRender: false,
         renderItem: null,
         truncateMax: null,
+        optionsMapper: null,
     });
 }
 
@@ -83,7 +84,8 @@ SelectField.defaultTemplate = null;
  *     hasErrors: Observable<boolean>,
  *     errors: Observable<string[]>,
  *     showErrors: Observable<boolean>,
- *     props: GlobalAttributes
+ *     props: GlobalAttributes,
+ *     optionsMapper: (item) => {value: string|number, label: NdChild},
  * }, instance: SelectField) => NdChild} template
  */
 SelectField.use = function(template) {
@@ -95,10 +97,12 @@ SelectField.prototype.constructor = SelectField;
 
 /**
  * @param {Array<{ value: *, label: NdChild, props?: GlobalAttributes }>} opts
+ * @param {(item) => {value: string, label: string}} mapper
  * @returns {this}
  */
-SelectField.prototype.options = function(opts) {
+SelectField.prototype.options = function(opts, mapper) {
     this.$description.options = opts;
+    this.$description.optionsMapper = mapper;
     return this;
 };
 

package/src/core/elements/anchor/Slot.js

@@ -0,0 +1,30 @@
+import Anchor from './anchor';
+import {NDElement} from '../../wrappers/NDElement';
+
+
+export default function Slot(content) {
+    if(!(this instanceof Slot)) {
+        return new Slot(content);
+    }
+    this.$anchor = Anchor();
+
+    content && this.$anchor.setContent(content);
+}
+
+
+Slot.prototype.toNdElement = function() {
+    return this.$anchor;
+};
+
+Slot.prototype.set = function(value) {
+    this.$anchor.replaceContent(value);
+    return this;
+};
+
+Slot.prototype.clear = function() {
+    this.$anchor.clear();
+    return this;
+};
+
+Slot.prototype.refSelf = NDElement.prototype.refSelf;
+Slot.prototype.ref = NDElement.prototype.ref;

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

@@ -33,6 +33,26 @@ export default function SelectFieldRender($desc, instance) {
     return Div(instance.resolveProps(), content).nd.with({input: nativeSelect});
 }
 
+const getUsableOption = ($desc, option) => {
+    if(option == null) {
+        option = { value: null, label: null};
+    }
+    else if($desc.optionsMapper) {
+        option = $desc.optionsMapper(option);
+    }
+    if(typeof option === 'string' || typeof option === 'number') {
+        option = { value: option, label: option };
+    }
+    return option;
+};
+
+const findUsableOption = ($desc, options, val) => {
+    return options.filter((option) => {
+        const optionsSource = getUsableOption($desc, option);
+        return optionsSource.value.valueOf() === val;
+    }).map((option) => getUsableOption($desc, option)).at(0);
+};
+
 const buildLabel = ($desc) => {
     return Label({
         class: 'field-label',
@@ -91,7 +111,7 @@ const buildTagsDisplay = ($desc) => {
 
     return Div({class: 'select-field-tags'},
         ForEachArray($desc.value, (val) => {
-            const opt   = options.find(o => (o.value ?? o) === val);
+            const opt   = findUsableOption($desc, options, val);
             const label = opt?.label ?? opt ?? val;
 
             const tag = Span({class: 'select-field-tag'}, [
@@ -133,7 +153,7 @@ const buildSelectedLabel = ($desc) => {
         const options = $desc.options;
 
         if(!$desc.multiple || !Array.isArray(val)) {
-            const opt = options.find(o => (o.value ?? o) == val);
+            const opt = findUsableOption($desc, options, val);
             return opt?.label ?? opt ?? val;
         }
 
@@ -144,7 +164,7 @@ const buildSelectedLabel = ($desc) => {
         }
 
         const labels = val.map(v => {
-            const opt = options.find(o => (o.value ?? o) === v);
+            const opt = findUsableOption($desc, options, v);
             return opt?.label ?? opt ?? v;
         });
 
@@ -175,8 +195,9 @@ const buildNativeSelect = ($desc) => {
         multiple: $desc.multiple,
         style:    {display: 'none'},
     }, ForEachArray($options, (option) => {
-        const optValue = option.value ?? option;
-        const optLabel = option.label ?? option;
+        const optionSource = getUsableOption($desc, option);
+        const optValue = optionSource.value ?? option;
+        const optLabel = optionSource.label ?? option;
         const optProps = option.props ?? {};
         return Option({value: optValue, ...optProps}, optLabel);
     }));
@@ -224,8 +245,9 @@ const buildDropdown = ($desc, instance, trigger, nativeSelect) => {
     }
 
     return dropdown.bind($sourceItem, (option) => {
-        const optValue = option.value ?? option;
-        const optLabel = option.label ?? option;
+        const optionSource = getUsableOption($desc, option);
+        const optValue = optionSource.value ?? option;
+        const optLabel = optionSource.label ?? option;
 
         const $isSelected = $desc.value?.__$isObservable
             ? $desc.value.is(v => $desc.multiple

package/types/slot.ts

@@ -0,0 +1,75 @@
+import {AnchorDocumentFragment, ValidChild} from "./elements";
+
+
+/**
+ * A dynamic content slot backed by an Anchor.
+ * Allows replacing, clearing and referencing a zone of the DOM
+ * without re-rendering the surrounding structure.
+ *
+ * @example
+ * const slot = Slot(Div('Initial content'));
+ *
+ * // Replace content
+ * slot.set(Div('New content'));
+ *
+ * // Clear content
+ * slot.clear();
+ *
+ * // Store reference
+ * const refs = { content: null };
+ * slot.refSelf(refs, 'content');
+ * refs.content.set(Div('Updated'));
+ */
+export interface SlotInterface {
+    /** Internal anchor managing the DOM zone. */
+    readonly $anchor: AnchorDocumentFragment;
+
+    /**
+     * Replaces the current content of the slot.
+     *
+     * @param value - New content to display
+     */
+    set(value: ValidChild): this;
+
+    /**
+     * Clears the slot content.
+     */
+    clear(): this;
+
+    /**
+     * Stores the native DOM node reference in an object under the given key.
+     *
+     * @param target - Object to store the reference in
+     * @param key - Key to assign the reference to
+     */
+    ref<T extends object>(target: T, key: keyof T): this;
+
+    /**
+     * Stores the SlotInterface instance itself in an object under the given key.
+     *
+     * @param target - Object to store the reference in
+     * @param key - Key to assign the reference to
+     */
+    refSelf<T extends object>(target: T, key: keyof T): this;
+
+    /**
+     * Returns the underlying Anchor element for DOM insertion.
+     * Called automatically by NativeDocument when the Slot is used as a child.
+     */
+    toNdElement(): AnchorDocumentFragment;
+}
+
+/**
+ * Creates a dynamic content slot — a named zone of the DOM that can be
+ * replaced or cleared independently of its surroundings.
+ *
+ * @param content - Optional initial content
+ * @returns SlotInterface instance
+ *
+ * @example
+ * const $header = Slot(H1('Welcome'));
+ *
+ * // Later
+ * $header.set(H1('Dashboard'));
+ */
+export declare function Slot(content?: ValidChild): SlotInterface;