native-document 1.0.138 → 1.0.140

package/src/components/alert/Alert.js

@@ -1,27 +1,32 @@
 import BaseComponent from "../BaseComponent";
 import HasEventEmitter from "../../core/utils/HasEventEmitter";
+import DebugManager from "../../core/utils/debug-manager";
 
 /**
  * Component for displaying alert messages with various styles and variants
- * @param {ValidChildren} message - The alert message content
+ * @param {ValidChildren} content - The alert message content
  * @param {{ title?: ValidChildren, content?: ValidChildren, outline?: boolean, style?: string, variant?: string, closable?: boolean, autoDismiss?: number, icon?: ValidChildren, showIcon?: boolean }} config - Configuration object
  * @class
  */
-export default function Alert(message, config = {}) {
+export default function Alert(content, props = {}) {
     if(!(this instanceof Alert)) {
-        return new Alert(message, config);
+        return new Alert(content, props);
     }
+
+    BaseComponent.call(this, props);
+
     this.$description = {
         title: null,
-        content: message,
+        content,
         outline: null,
-        style: null,
+        appearance: null,
         variant: 'info',
         closable: false,
         autoDismiss: null,
         icon: null,
         showIcon: true,
-        ...config
+        actions: [],
+        props,
     };
 }
 
@@ -38,6 +43,20 @@ Alert.use = function(template) {
 BaseComponent.extends(Alert);
 BaseComponent.use(Alert, HasEventEmitter);
 
+Alert.preset = function(name, callback) {
+    if (Alert.prototype[name] || Alert[name]) {
+        DebugManager.warn(`Warning: the ${name} method already exist in Alert.`);
+        return;
+    }
+    Alert[name] = (content, props) => callback(new Alert(content, props));
+};
+
+Alert.presets = function(presets) {
+    for (const name in presets) {
+        Alert.preset(name, presets[name]);
+    }
+};
+
 /**
  * Sets the variant style for the alert
  * @param {string} variant - The variant name (info, success, warning, error, danger)
@@ -89,38 +108,38 @@ Alert.prototype.danger = function() {
 };
 
 /**
- * Sets the style type for the alert
- * @param {string} style - The style name (filled, bordered, outline)
+ * Sets the appearance type for the alert
+ * @param {string} appearance - The style name (filled, bordered, outline)
  * @returns {Alert}
  */
-Alert.prototype.style = function(style) {
-    this.$description.style = style;
+Alert.prototype.appearance = function(appearance) {
+    this.$description.appearance = appearance;
     return this;
 };
 
 /**
- * Sets the alert style to 'filled'
+ * Sets the alert appearance to 'filled'
  * @returns {Alert}
  */
 Alert.prototype.filled = function() {
-    return this.style('filled');
+    return this.appearance('filled');
 };
 
 /**
- * Sets the alert style to 'bordered'
+ * Sets the alert appearance to 'bordered'
  * @returns {Alert}
  */
 Alert.prototype.bordered = function() {
-    return this.style('bordered');
+    return this.appearance('bordered');
 };
 
 /**
- * Sets the alert style to 'outline'
+ * Sets the alert appearance to 'outline'
  * @param {boolean} [outline=true] - Whether to use outline style
  * @returns {Alert}
  */
 Alert.prototype.outline = function(outline = true) {
-    return this.style('outline');
+    return this.appearance('outline');
 };
 
 /**
@@ -187,10 +206,12 @@ Alert.prototype.clearActions = function(label, handler) {
  * Adds an action button to the alert
  * @param {string} label - The button label
  * @param {Function} handler - The click handler
+ * @param {?string} variant - The button variant style
  * @returns {Alert}
  */
-Alert.prototype.action = function(label, handler) {
-    this.$description.actions.push({label, handler});
+Alert.prototype.action = function(label, handler, variant = null) {
+    handler = handler || ((_, instance) => instance.hide());
+    this.$description.actions.push({ label, handler, variant });
     return this;
 };
 
@@ -229,7 +250,10 @@ Alert.prototype.showIcon = function(show = true) {
  * @returns {Alert}
  */
 Alert.prototype.closable = function(closable = true) {
-    this.$description.closable = closable;
+    this.$description.closable = !!closable;
+    if(closable) {
+        this.showIf(closable);
+    }
     return this;
 };
 
@@ -256,22 +280,22 @@ Alert.prototype.autoDismiss = function(delay) {
  * Closes the alert
  */
 Alert.prototype.close = function() {
-
+    this.$description.showIf?.set(false);
+    this.emit('hide');
 };
 
 /**
  * Shows the alert
  */
 Alert.prototype.show = function() {
-
+    this.$description.showIf?.set(true);
+    this.emit('show');
 };
 
 /**
  * Hides the alert
  */
-Alert.prototype.hide = function() {
-
-};
+Alert.prototype.hide = Alert.prototype.close;
 
 /**
  * Registers a handler for the close event
@@ -292,19 +316,3 @@ Alert.prototype.onShow = function(handler) {
     this.on('show', handler);
     return this;
 };
-
-/**
- * Sets the render function for the entire alert
- * @param {(alert: Alert, sections: {title: ValidChildren, content: ValidChildren, footer: ValidChildren, icon: ValidChildren}) => ValidChildren} renderFn - Function to render the alert
- * @returns {Alert}
- */
-Alert.prototype.render = function(renderFn) {
-    this.$description.render = renderFn;
-    return this;
-};
-
-Alert.prototype.$build = function() {
-
-};
-
-Alert.prototype.toNdElement = function() {};

package/src/components/avatar/Avatar.js

@@ -1,6 +1,7 @@
 import {Validator} from "../../../index";
 import BaseComponent from "../BaseComponent";
 import Button from "../button/Button";
+import DebugManager from "../../core/utils/debug-manager";
 
 /**
  * Component for displaying user avatars with images, initials, or icons
@@ -14,7 +15,7 @@ export default function Avatar(source, props = {}) {
     }
 
     this.$description = {
-        src: BaseComponent.obs(source),
+        src: source ? BaseComponent.obs(source) : null,
         alt: null,
         name: null,
         initials: null,
@@ -44,7 +45,7 @@ Avatar.use = function(template) {
 
 Avatar.preset = function(name, callback) {
     if (Avatar.prototype[name] || Avatar[name]) {
-        console.warn(`Warning: the ${name} method already exists in Avatar.`);
+        DebugManager.warn(`Warning: the ${name} method already exists in Avatar.`);
         return;
     }
     Avatar[name] = (label, props) => callback(new Avatar(label, props));
@@ -285,7 +286,7 @@ Avatar.prototype.textColor = function(color) {
  * @returns {Avatar}
  */
 Avatar.prototype.status = function(status) {
-    this.$description.status = status;
+    this.$description.status = BaseComponent.obs(status);
     return this;
 };
 

package/src/components/avatar/AvatarGroup.js

@@ -10,6 +10,7 @@ export default function AvatarGroup(props = {}) {
         items: [],
         overlap: 0,
         max: 0,
+        onMoreClick: null,
         props,
     };
 
@@ -22,8 +23,8 @@ AvatarGroup.use = function(template) {
     AvatarGroup.defaultTemplate = template;
 };
 
-AvatarGroup.prototype.items = function() {
-    this.$description.items = Array.from(arguments);
+AvatarGroup.prototype.items = function(items) {
+    this.$description.items = items;
     return this;
 };
 
@@ -40,4 +41,9 @@ AvatarGroup.prototype.overlap = function(value) {
 AvatarGroup.prototype.max = function(max) {
     this.$description.max = max;
     return this;
+};
+
+AvatarGroup.prototype.onMoreClick = function(handler) {
+    this.$description.onMoreClick = handler;
+    return this;
 };

package/src/components/badge/Badge.js

@@ -4,13 +4,13 @@ import DebugManager from "../../core/utils/debug-manager";
 
 export default function Badge(content, props = {}) {
     if(!(this instanceof Badge)) {
-        return new Badge(props);
+        return new Badge(content, props);
     }
 
     BaseComponent.call(this, props);
 
     this.$description = {
-        style: 'filled',
+        appearance: 'filled',
         borderRadiusType: 'pill',
         variant: 'primary',
         size: 'medium',
@@ -97,20 +97,20 @@ Badge.prototype.circle = function() {
     return this;
 };
 
-Badge.prototype.style = function(style) {
-    this.$description.style = style;
+Badge.prototype.appearance = function(appearance) {
+    this.$description.appearance = appearance;
     return this;
 };
 Badge.prototype.outline = function() {
-    this.$description.style = 'outline';
+    this.$description.appearance = 'outline';
     return this;
 };
 Badge.prototype.filled = function() {
-    this.$description.style = 'filled';
+    this.$description.appearance = 'filled';
     return this;
 };
 Badge.prototype.bordered = function() {
-    this.$description.style = 'bordered';
+    this.$description.appearance = 'bordered';
     return this;
 };
 

package/src/components/breadcrumb/BreadCrumb.js

@@ -1,17 +1,19 @@
 import BaseComponent from "../BaseComponent";
 import HasEventEmitter from "../../core/utils/HasEventEmitter";
+import { $ } from "../../../index";
+import DebugManager from "../../core/utils/debug-manager";
 
-export default function Breadcrumb(config = {}) {
+export default function Breadcrumb(props = {}) {
     if (!(this instanceof Breadcrumb)) {
-        return new Breadcrumb(config);
+        return new Breadcrumb(props);
     }
 
     this.$description = {
         separator: null,
-        items: [],
+        items: $.array([]),
         renderSeparator: null,
         renderItem: null,
-        ...config,
+        props,
     };
 }
 
@@ -23,21 +25,37 @@ Breadcrumb.use = function(template) {
     Breadcrumb.defaultTemplate = template;
 };
 
-Breadcrumb.prototype.item = function(label, href) {
-    this.$description.items.push({ label, href });
+Breadcrumb.preset = function(name, callback) {
+    if (Breadcrumb.prototype[name] || Breadcrumb[name]) {
+        DebugManager.warn(`Warning: the ${name} method already exist in Breadcrumb.`);
+        return;
+    }
+    Breadcrumb[name] = (props) => callback(new Breadcrumb(props));
+};
+
+Breadcrumb.presets = function(presets) {
+    for (const name in presets) {
+        Breadcrumb.preset(name, presets[name]);
+    }
+};
+
+Breadcrumb.prototype.bind = function(source) {
+    this.$description.items = source.__$Observable ? source : $.array(source);
+    return this;
+};
+
+Breadcrumb.prototype.item = function(label, href, value) {
+    this.$description.items.push({ label, href, value: value || href });
     return this;
 };
 Breadcrumb.prototype.items = function(items) {
     this.$description.items = [];
     for(const item of items) {
-        this.addItem(item.label, item.href);
+        this.item(item.label, item.href, item.value);
     }
     return this;
 };
-Breadcrumb.prototype.addItem = function(label, href) {
-    this.$description.items.push({ label, href });
-    return this;
-};
+
 Breadcrumb.prototype.removeItem = function(index) {
     this.$description.items.splice(index, 1);
 };
@@ -61,13 +79,4 @@ Breadcrumb.prototype.renderSeparator = function(renderFn) {
 Breadcrumb.prototype.renderItem = function(renderFn) {
     this.$description.renderItem = renderFn;
     return this;
-};
-Breadcrumb.prototype.render = function(renderFn) {
-    this.$description.render = renderFn;
-    return this;
-};
-
-Breadcrumb.prototype.$build = function() {
-
-};
-Breadcrumb.prototype.toNdElement = function() {};
+};

package/src/components/button/Button.js

@@ -1,4 +1,5 @@
 import BaseComponent from "../BaseComponent";
+import DebugManager from "../../core/utils/debug-manager";
 
 export default function Button(label, props = {}) {
     if(!(this instanceof Button)) {
@@ -36,7 +37,7 @@ BaseComponent.extends(Button);
 
 Button.preset = function(name, callback) {
     if (Button.prototype[name] || Button[name]) {
-        console.warn(`Warning: the ${name} method already exist in Button.`);
+        DebugManager.warn(`Warning: the ${name} method already exist in Button.`);
         return;
     }
     Button[name] = (label, props) => callback(new Button(label, props));
@@ -132,15 +133,11 @@ Button.prototype.loading = function(loading = true) {
     return this;
 }
 
-Button.prototype.disable = function(disabled = true) {
+Button.prototype.disabled = function(disabled = true) {
     this.$description.disabled = BaseComponent.obs(disabled);
     return this;
 };
 
-Button.prototype.enable = function() {
-    return this.disable(false);
-};
-
 Button.prototype.render = function(renderFunction) {
     this.$description.render = renderFunction;
     return this;
@@ -166,11 +163,3 @@ Button.prototype.block = function() {
     this.$description.block = true;
     return this;
 };
-
-Button.prototype.node = function() {
-    return this.$build();
-};
-
-Button.prototype.toNdElement = function() {
-    return this.$build();
-};

package/src/components/context-menu/ContextMenu.js

@@ -1,60 +1,83 @@
 import Menu from "../menu/Menu";
 import BaseComponent from "../BaseComponent";
+import {NDElement} from "../../core/wrappers/NDElement";
+import { $ } from '../../../index';
 
-export default function ContextMenu(config = {}) {
+export default function ContextMenu(props = {}) {
     if(!(this instanceof ContextMenu)) {
-        return new ContextMenu(config);
+        return new ContextMenu(props);
     }
-    Menu.call(this, config);
+    BaseComponent.call(this, props);
 
     Object.assign(this.$description, {
         positionX: $(0),
         positionY: $(0),
-        target: null,
+        isOpen: $(false),
+        menu: null,
+        contextContainer: null,
+        trigger: null,
         data: null,
-        visibility: $(false)
     });
-
-    this.onItemClick( () => this.hide());
 }
 
-ContextMenu.defaultTemplate = null;
-BaseComponent.extends(ContextMenu, Menu);
+BaseComponent.extends(ContextMenu);
 
 ContextMenu.defaultTemplate = null;
+ContextMenu.defaultHandler = null;
 
-ContextMenu.use = function(template) {
-    ContextMenu.defaultTemplate = template.contextMenu;
-};
+ContextMenu.use = function(template, handler) {
+    ContextMenu.defaultTemplate = template;
+    if(!handler) {
+        return;
+    }
+    if(ContextMenu.defaultHandler === handler) {
+        return
+    };
+    ContextMenu.defaultHandler = handler;
 
-ContextMenu.prototype.attachTo = function(target, data) {
-    this.$description.target = target;
-    target.addEventListener('contextmenu', (e) => {
-        e.preventDefault();
-        this.data(data);
-        this.position(e.clientX, e.clientY).show();
-    });
-    return this;
+    if(!NDElement.prototype.contextMenu) {
+        NDElement.prototype.contextMenu = function(contextMenu, data = null) {
+            ContextMenu.defaultHandler(this, contextMenu, data);
+            return this;
+        };
+    }
+    if(!BaseComponent.prototype.contextMenu) {
+        BaseComponent.prototype.contextMenu = function(contextMenu, data = null) {
+            this.postBuild(() => {
+                ContextMenu.defaultHandler(this, contextMenu, data);
+            });
+            return this;
+        };
+    }
 };
 
-
 ContextMenu.prototype.position = function(x, y) {
     this.$description.positionX.set(x);
     this.$description.positionY.set(y);
     return this;
+};
+
+ContextMenu.prototype.trigger = function(trigger) {
+    this.$description.trigger = trigger;
+    return this;
 }
 
-ContextMenu.prototype.show = function() {
-    this.$description.visibility.set(true);
+ContextMenu.prototype.menu = function(callback, props = {}) {
+    const menu = new Menu(props);
+    menu.dataResolver(() => this.$description.data);
+    callback && callback(menu);
+    menu.vertical().onHovered();
+
+    this.$description.menu = menu;
     return this;
 };
 
 ContextMenu.prototype.hide = function() {
-    this.$description.visibility.set(false);
+    this.$description.isOpen.set(false);
     return this;
 };
 
-ContextMenu.prototype.data = function(data) {
-    this.$description.data = data;
+ContextMenu.prototype.show = function() {
+    this.$description.isOpen.set(true);
     return this;
 };