native-document 1.0.92 → 1.0.93

package/src/components/alert/Alert.js

@@ -1,13 +1,19 @@
 import BaseComponent from "../BaseComponent";
 import EventEmitter from "../../../src/core/utils/EventEmitter";
 
+/**
+ * Component for displaying alert messages with various styles and variants
+ * @param {ValidChildren} message - 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 = {}) {
     if(!(this instanceof Alert)) {
         return new Alert(message, config);
     }
     this.$description = {
         title: null,
-        content: null,
+        content: message,
         outline: null,
         style: null,
         variant: 'info',
@@ -24,132 +30,286 @@ Alert.defaultTitleTemplate = null;
 Alert.defaultButtonsTemplate = null;
 Alert.defaultContentTemplate = null;
 
-Alert.use = function(template) {};
+/**
+ * Sets the default template for all Alert instances
+ * @param {{alert: (alert: Alert) => ValidChildren, alertContent: (alert: Alert) => ValidChildren, alertButtons: (alert: Alert) => ValidChildren, alertTitle: (alert: Alert) => ValidChildren}} template - Template object containing alert factory function
+ */
+Alert.use = function(template) {
+    Alert.defaultTemplate = template.alert;
+    Alert.defaultTitleTemplate = template.alertTitle;
+    Alert.defaultButtonsTemplate = template.alertButtons;
+    Alert.defaultContentTemplate = template.alertContent;
+};
 
 BaseComponent.extends(Alert, EventEmitter);
 
+/**
+ * Sets the variant style for the alert
+ * @param {string} variant - The variant name (info, success, warning, error, danger)
+ * @returns {Alert}
+ */
 Alert.prototype.variant = function(variant) {
     this.$description.variant = variant;
     return this;
 };
 
+/**
+ * Sets the alert variant to 'info'
+ * @returns {Alert}
+ */
 Alert.prototype.info = function() {
     return this.variant('info');
 };
+
+/**
+ * Sets the alert variant to 'success'
+ * @returns {Alert}
+ */
 Alert.prototype.success = function() {
     return this.variant('success');
 };
+
+/**
+ * Sets the alert variant to 'warning'
+ * @returns {Alert}
+ */
 Alert.prototype.warning = function() {
     return this.variant('warning');
 };
+
+/**
+ * Sets the alert variant to 'error'
+ * @returns {Alert}
+ */
 Alert.prototype.error = function() {
     return this.variant('error');
 };
+
+/**
+ * Sets the alert variant to 'danger'
+ * @returns {Alert}
+ */
 Alert.prototype.danger = function() {
     return this.variant('danger');
 };
 
+/**
+ * Sets the style type for the alert
+ * @param {string} style - The style name (filled, bordered, outline)
+ * @returns {Alert}
+ */
 Alert.prototype.style = function(style) {
     this.$description.style = style;
     return this;
 };
+
+/**
+ * Sets the alert style to 'filled'
+ * @returns {Alert}
+ */
 Alert.prototype.filled = function() {
     return this.style('filled');
 };
+
+/**
+ * Sets the alert style to 'bordered'
+ * @returns {Alert}
+ */
 Alert.prototype.bordered = function() {
     return this.style('bordered');
 };
+
+/**
+ * Sets the alert style to 'outline'
+ * @param {boolean} [outline=true] - Whether to use outline style
+ * @returns {Alert}
+ */
 Alert.prototype.outline = function(outline = true) {
     return this.style('outline');
 };
 
+/**
+ * Sets the title of the alert
+ * @param {ValidChildren} title - The title content
+ * @returns {Alert}
+ */
 Alert.prototype.title = function(title) {
     this.$description.title = title;
     return this;
 };
+
+/**
+ * Sets the content of the alert
+ * @param {ValidChildren} content - The content to display
+ * @returns {Alert}
+ */
 Alert.prototype.content = function(content) {
     this.$description.content = content;
     return this;
 };
 
+/**
+ * Sets the title render function
+ * @param {Function} callback - Function to render the title
+ * @returns {Alert}
+ */
 Alert.prototype.renderTitle = function(callback) {
     this.$description.renderTitle = callback;
     return this;
 };
+
+/**
+ * Sets the content render function
+ * @param {Function} callback - Function to render the content
+ * @returns {Alert}
+ */
 Alert.prototype.renderContent = function(callback) {
     this.$description.renderContent = callback;
     return this;
 };
+
+/**
+ * Clears all actions from the alert
+ * @returns {Alert}
+ */
 Alert.prototype.renderFooter = function(callback) {
     this.$description.renderFooter = callback;
     return this;
 };
 
+/**
+ * Adds an action button to the alert
+ * @param {string} label - The button label
+ * @param {Function} handler - The click handler
+ * @returns {Alert}
+ */
 Alert.prototype.clearActions = function(label, handler) {
     this.$description.actions = [];
     return this;
 };
 
+/**
+ * Adds an action button to the alert
+ * @param {string} label - The button label
+ * @param {Function} handler - The click handler
+ * @returns {Alert}
+ */
 Alert.prototype.action = function(label, handler) {
     this.$description.actions.push({label, handler});
     return this;
 };
 
+/**
+ * Sets the layout function for the alert
+ * @param {Function} layoutFn - Function to layout the alert
+ * @returns {Alert}
+ */
 Alert.prototype.layout = function(layoutFn) {
     this.$description.layout = layoutFn;
     return this;
 };
 
+/**
+ * Sets the icon for the alert
+ * @param {ValidChildren} icon - The icon to display
+ * @returns {Alert}
+ */
 Alert.prototype.icon = function(icon) {
     this.$description.icon = icon;
     return this;
 };
 
+/**
+ * Shows or hides the icon
+ * @param {boolean} [show=true] - Whether to show the icon
+ * @returns {Alert}
+ */
 Alert.prototype.showIcon = function(show = true) {
     this.$description.showIcon = show;
 };
 
+/**
+ * Sets whether the alert can be closed
+ * @param {boolean} [closable=true] - Whether the alert is closable
+ * @returns {Alert}
+ */
 Alert.prototype.closable = function(closable = true) {
     this.$description.closable = closable;
     return this;
 };
 
+/**
+ * Sets whether the alert is dismissible (alias for closable)
+ * @param {boolean} [dismissible=true] - Whether the alert is dismissible
+ * @returns {Alert}
+ */
 Alert.prototype.dismissible = function(dismissible = true) {
     return this.closable(dismissible);
 };
+
+/**
+ * Sets auto-dismiss delay for the alert
+ * @param {number} delay - Delay in milliseconds before auto-dismissing
+ * @returns {Alert}
+ */
 Alert.prototype.autoDismiss = function(delay) {
     this.$description.autoDismiss = delay;
     return this;
 };
 
-
-
+/**
+ * Closes the alert
+ */
 Alert.prototype.close = function() {
 
 };
 
+/**
+ * Shows the alert
+ */
 Alert.prototype.show = function() {
 
 };
 
+/**
+ * Hides the alert
+ */
 Alert.prototype.hide = function() {
 
 };
 
+/**
+ * Registers a handler for the close event
+ * @param {(element: Alert) => void} handler - The event handler
+ * @returns {Alert}
+ */
 Alert.prototype.onClose = function(handler) {
     this.on('close', handler);
     return this;
 };
+
+/**
+ * Registers a handler for the show event
+ * @param {(element: Alert) => void} handler - The event handler
+ * @returns {Alert}
+ */
 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,9 +1,15 @@
 import {Validator} from "../../../index";
 import BaseComponent from "../BaseComponent";
 
+/**
+ * Component for displaying user avatars with images, initials, or icons
+ * @param {Observable<string>|string} source - The avatar source (image URL or observable)
+ * @param {{ src?: Observable<string>|string, alt?: string, name?: string, initials?: string, icon?: ValidChildren, size?: string|number, shape?: string, variant?: string, color?: string, textColor?: string, status?: string, render?: Function }} config - Configuration object
+ * @class
+ */
 export default function Avatar(source, config = {}) {
     if (!(this instanceof Avatar)) {
-        return new Avatar(config);
+        return new Avatar(source, config);
     }
 
     this.$description = {
@@ -26,153 +32,361 @@ export default function Avatar(source, config = {}) {
 BaseComponent.extends(Avatar);
 
 Avatar.defaultTemplate = null;
-Avatar.use = function(template) {};
 
+/**
+ * Sets the default template for all Avatar instances
+ * @param {{avatar: (avatar: Avatar) => ValidChildren}} template - Template object containing avatar factory function
+ */
+Avatar.use = function(template) {
+    Avatar.defaultTemplate = template.avatar;
+};
+
+/**
+ * Registers a handler for the error event
+ * @param {(error: Error, avatar: Avatar) => void} handler - The event handler
+ * @returns {Avatar}
+ */
 Avatar.prototype.onError = function(handler) {};
 
+/**
+ * Sets the source URL for the avatar image
+ * @param {string} src - The image source URL
+ * @returns {Avatar}
+ */
 Avatar.prototype.src = function(src) {
     this.$description.src.set(src);
     return this;
 };
+
+/**
+ * Sets the alt text for the avatar image
+ * @param {string} alt - The alt text
+ * @returns {Avatar}
+ */
 Avatar.prototype.alt = function(alt) {
     this.$description.alt = alt;
     return this;
 };
+
+/**
+ * Sets the name associated with the avatar
+ * @param {string} name - The name
+ * @returns {Avatar}
+ */
 Avatar.prototype.name = function(name) {
     this.$description.name = name;
     return this;
 };
+
+/**
+ * Sets the initials to display
+ * @param {string} initials - The initials text
+ * @returns {Avatar}
+ */
 Avatar.prototype.initials = function(initials) {
     this.$description.initials = initials;
     return this;
 };
+
+/**
+ * Sets the icon for the avatar
+ * @param {ValidChildren} icon - The icon to display
+ * @returns {Avatar}
+ */
 Avatar.prototype.icon = function(icon) {
     this.$description.icon = icon;
     return this;
 };
 
 /**
- * @param {string|int} size
+ * Sets the size of the avatar
+ * @param {string|number} size - The size value (preset name or custom value)
  * @returns {Avatar}
  */
 Avatar.prototype.size = function(size) {
     this.$description.size = size;
     return this;
 };
+
+/**
+ * Sets the avatar size to 'extra-small'
+ * @returns {Avatar}
+ */
 Avatar.prototype.extraSmall = function() {
     return this.size('extra-small');
 };
+
+/**
+ * Sets the avatar size to 'small'
+ * @returns {Avatar}
+ */
 Avatar.prototype.small = function() {
     return this.size('small');
 };
+
+/**
+ * Sets the avatar size to 'medium'
+ * @returns {Avatar}
+ */
 Avatar.prototype.medium = function() {
     return this.size('medium');
 };
+
+/**
+ * Sets the avatar size to 'large'
+ * @returns {Avatar}
+ */
 Avatar.prototype.large = function() {
     return this.size('large');
 };
+
+/**
+ * Sets the avatar size to 'extra-large'
+ * @returns {Avatar}
+ */
 Avatar.prototype.extraLarge = function() {
     return this.size('extra-large');
 };
 
+/**
+ * Sets the shape of the avatar
+ * @param {string} shape - The shape name (circle, square, rounded)
+ * @returns {Avatar}
+ */
 Avatar.prototype.shape = function(shape) {
     this.$description.shape = shape;
     return this;
 };
+
+/**
+ * Sets the avatar shape to 'circle'
+ * @returns {Avatar}
+ */
 Avatar.prototype.circle = function() {
     return this.shape('circle');
 };
+
+/**
+ * Sets the avatar shape to 'square'
+ * @returns {Avatar}
+ */
 Avatar.prototype.square = function() {
     return this.shape('square');
 };
+
+/**
+ * Sets the avatar shape to 'rounded'
+ * @returns {Avatar}
+ */
 Avatar.prototype.rounded = function() {
     return this.shape('rounded');
 };
 
+/**
+ * Sets the variant style for the avatar
+ * @param {string} variant - The variant name (primary, secondary, success, danger, warning, info)
+ * @returns {Avatar}
+ */
 Avatar.prototype.variant = function(variant) {
     this.$description.variant = variant;
 }; // 'primary' | 'secondary' | 'success' | etc.
+
+/**
+ * Sets the avatar variant to 'primary'
+ * @returns {Avatar}
+ */
 Avatar.prototype.primary = function() {
     return this.variant('primary');
 };
+
+/**
+ * Sets the avatar variant to 'secondary'
+ * @returns {Avatar}
+ */
 Avatar.prototype.secondary = function() {
     return this.variant('secondary');
 };
+
+/**
+ * Sets the avatar variant to 'success'
+ * @returns {Avatar}
+ */
 Avatar.prototype.success = function() {
     return this.variant('success');
 };
+
+/**
+ * Sets the avatar variant to 'danger'
+ * @returns {Avatar}
+ */
 Avatar.prototype.danger = function() {
     return this.variant('danger');
 };
+
+/**
+ * Sets the avatar variant to 'warning'
+ * @returns {Avatar}
+ */
 Avatar.prototype.warning = function() {
     return this.variant('warning');
 };
+
+/**
+ * Sets the avatar variant to 'info'
+ * @returns {Avatar}
+ */
 Avatar.prototype.info = function() {
     return this.variant('info');
 }
+
+/**
+ * Sets the background color of the avatar
+ * @param {string} color - The color value
+ * @returns {Avatar}
+ */
 Avatar.prototype.color = function(color) {
     this.$description.color = color;
     return this;
 };
+
+/**
+ * Sets the text color of the avatar
+ * @param {string} color - The color value
+ * @returns {Avatar}
+ */
 Avatar.prototype.textColor = function(color) {
     this.$description.textColor = color;
     return this;
 };
 
+/**
+ * Sets the status indicator for the avatar
+ * @param {string} status - The status value
+ * @returns {Avatar}
+ */
 Avatar.prototype.status = function(status) {
     this.$description.status = status;
     return this;
 };
+
+/**
+ * Sets the position of the status indicator
+ * @param {string} position - The position (top-right, bottom-right, top-left, bottom-left)
+ * @returns {Avatar}
+ */
 Avatar.prototype.statusPosition = function(position) {
     this.$description.statusPosition = position;
 }; // 'top-right' | 'bottom-right' | etc.
-Avatar.prototype.statusAtTopEnd = function() {
-    return this.statusPosition('top-end');
+
+/**
+ * Positions the status indicator at top-leading
+ * @returns {Avatar}
+ */
+Avatar.prototype.statusAtTopLeading = function() {
+    return this.statusPosition('top-leading');
 };
-Avatar.prototype.statusAtBottomEnd = function() {
-    return this.statusPosition('bottom-end');
+
+/**
+ * Positions the status indicator at bottom-leading
+ * @returns {Avatar}
+ */
+Avatar.prototype.statusAtBottomLeading = function() {
+    return this.statusPosition('bottom-leading');
 };
-Avatar.prototype.statusAtTopStart = function() {
-    return this.statusPosition('top-start');
+
+/**
+ * Positions the status indicator at top-trailing
+ * @returns {Avatar}
+ */
+Avatar.prototype.statusAtTopTrailing = function() {
+    return this.statusPosition('top-trailing');
 };
-Avatar.prototype.statusAtBottomStart = function() {
-    return this.statusPosition('bottom-start');
+
+/**
+ * Positions the status indicator at bottom-trailing
+ * @returns {Avatar}
+ */
+Avatar.prototype.statusAtBottomTrailing = function() {
+    return this.statusPosition('bottom-trailing');
 };
 
+/**
+ * Shows or hides the status indicator
+ * @param {boolean} [show=true] - Whether to show the status
+ * @returns {Avatar}
+ */
 Avatar.prototype.showStatus = function(show = true) {
     this.$description.showStatus = show;
     return this;
 };
 
-// Badge
+/**
+ * Sets the badge content for the avatar
+ * @param {ValidChildren} content - The badge content
+ * @returns {Avatar}
+ */
 Avatar.prototype.badge = function(content) {
     this.$description.badge = content;
     return this;
 };
+
+/**
+ * Sets the position of the badge
+ * @param {string} position - The position (top-leading, bottom-leading, top-trailing, bottom-trailing)
+ * @returns {Avatar}
+ */
 Avatar.prototype.badgePosition = function(position) {
     this.$description.badgePosition = position;
     return this;
 };
-Avatar.prototype.badgeAtTopEnd = function() {
-    return this.badgePosition('top-end');
-};
-Avatar.prototype.badgeAtBottomEnd = function() {
-    return this.badgePosition('bottom-end');
+
+/**
+ * Positions the badge at top-leading
+ * @returns {Avatar}
+ */
+Avatar.prototype.badgeAtTopLeading = function() {
+    return this.badgePosition('top-leading');
 };
-Avatar.prototype.badgeAtTopStart = function() {
-    return this.badgePosition('top-start');
+
+/**
+ * Positions the badge at bottom-leading
+ * @returns {Avatar}
+ */
+Avatar.prototype.badgeAtBottomLeading = function() {
+    return this.badgePosition('bottom-leading');
 };
-Avatar.prototype.badgeAtBottomStart = function() {
-    return this.badgePosition('bottom-start');
+
+/**
+ * Positions the badge at top-trailing
+ * @returns {Avatar}
+ */
+Avatar.prototype.badgeAtTopTrailing = function() {
+    return this.badgePosition('top-trailing');
 };
 
+/**
+ * Positions the badge at bottom-trailing
+ * @returns {Avatar}
+ */
+Avatar.prototype.badgeAtBottomTrailing = function() {
+    return this.badgePosition('bottom-trailing');
+};
 
+/**
+ * Sets the render function for the entire avatar
+ * @param {(avatar: Avatar, sections: {image: ValidChildren, initials: ValidChildren, icon: ValidChildren, status: ValidChildren, badge: ValidChildren}) => ValidChildren} renderFn - Function to render the avatar
+ * @returns {Avatar}
+ */
 Avatar.prototype.render = function(renderFn) {
     this.$description.render = renderFn;
     return this;
 };
 
+/**
+ * Builds the avatar component
+ * @private
+ */
 Avatar.prototype.$build = function() {
 
 };
-Avatar.prototype.toNdElement = function() {};
+

package/src/components/menu/index.js

@@ -8,6 +8,5 @@ export {
     Menu,
     MenuItem,
     MenuGroup,
-    MenuDivider,
-    MenuInterface
+    MenuDivider
 };