native-document 1.0.76 → 1.0.77

package/src/components/BaseComponent.js

@@ -0,0 +1,70 @@
+
+export default function BaseComponent() {
+
+}
+
+Object.defineProperty( BaseComponent.prototype, 'nd', {
+    get: function() {
+        if(this.$element) {
+            return this.$element.nd;
+        }
+        this.$storeElement(this.node());
+        return this.$element?.nd;
+    }
+});
+
+
+BaseComponent.extends = function(Component, ...parents) {
+    Component.prototype = Object.create(BaseComponent.prototype);
+
+    if(parents.length > 0) {
+        for(const parent of parents) {
+            Object.assign(Component.prototype, parent.prototype);
+        }
+    }
+    Component.prototype.constructor = Component;
+};
+
+BaseComponent.prototype.$storeElement = function(element) {
+    this.$element = element;
+    return this;
+};
+
+BaseComponent.prototype.refSelf = function(target, name) {
+    target[name] = this;
+    return this;
+};
+
+BaseComponent.prototype.$build = function() {
+    const ComponentClass = this.constructor;
+    const renderer = this.$description.render || ComponentClass.defaultTemplate;
+
+    if (!renderer) {
+        throw new Error(`No renderer for ${ComponentClass.name}`);
+    }
+
+    return renderer(this.$description, this);
+};
+
+BaseComponent.prototype.toNdElement = function() {
+    if (this.$element) {
+        return this.$element;
+    }
+    this.$element = this.$build();
+    return this.$element;
+};
+
+BaseComponent.prototype.toJSON = function() {
+    if(!this.$description) {
+        return {};
+    }
+    return { ...this.$description };
+};
+
+BaseComponent.prototype.render = function(renderFn) {
+    if (typeof renderFn !== 'function') {
+        throw new Error('Custom renderer must be a function');
+    }
+    this.$description.render = renderFn;
+    return this;
+};

package/src/components/accordion/Accordion.js

@@ -0,0 +1,133 @@
+import BaseComponent from "@components/BaseComponent";
+import EventEmitter from "@src/core/utils/EventEmitter";
+
+export default function Accordion(config = {}) {
+    if (!(this instanceof Accordion)) {
+        return new Accordion(config);
+    }
+
+    this.$description = {
+        items: [],
+        multiple: null,
+        variant: null,
+        renderContent: null,
+        ...config
+    };
+}
+
+BaseComponent.extends(Accordion, EventEmitter);
+
+Accordion.defaultTemplate = null;
+
+Accordion.use = function(template) {};
+
+Accordion.prototype.item = function(accordionItem) {
+    this.$description.items.push(accordionItem);
+    return this;
+};
+
+Accordion.prototype.items = function(items) {
+    this.$description.items = items;
+    return this;
+};
+
+Accordion.prototype.addItem = Accordion.prototype.item;
+
+Accordion.prototype.removeItemById = function(id) {
+    if (this.$description.items) {
+        this.$description.items = this.$description.items.filter(item => item.id !== id);
+    }
+    return this;
+};
+
+Accordion.prototype.removeItem = function(item) {
+    if (this.$description.items) {
+        this.$description.items = this.$description.items.filter(item);
+    }
+    return this;
+};
+
+
+Accordion.prototype.multiple = function(enabled = true) {
+    this.$description.multiple = enabled;
+    return this;
+};
+
+Accordion.prototype.variant = function(name) {
+    this.$description.variant = name;
+    return this;
+};
+
+Accordion.prototype.bordered = function() {
+    return this.variant('bordered');
+};
+
+Accordion.prototype.separated = function() {
+    return this.variant('separated');
+};
+
+Accordion.prototype.flush = function() {
+    return this.variant('flush');
+};
+
+Accordion.prototype.getByKey = function(key) {
+    return this.$description.items.find(item => item.key === key);
+};
+
+Accordion.prototype.expanded = function(key, state = true) {
+    const item = this.getByKey(key);
+    if(item) {
+        if (state && !this.$description.multiple) {
+            this.collapseAll();
+        }
+        item.expanded(state);
+        this.emit(state ? 'expand' : 'collapse', key, state);
+    }
+    return this;
+};
+
+Accordion.prototype.expandAll = function() {
+    this.$description.items.forEach(item => item.expanded(true));
+    return this;
+};
+
+Accordion.prototype.collapseAll = function() {
+    this.$description.items.forEach(item => item.expanded(false));
+    return this;
+};
+
+Accordion.prototype.isExpanded = function(key) {
+    return this.getByKey(key)?.isExpanded?.();
+};
+
+Accordion.prototype.onExpand = function(handler) {
+    this.on('expand', handler);
+    return this;
+};
+
+Accordion.prototype.onCollapse = function(handler) {
+    this.on('collapse', handler);
+    return this;
+};
+
+Accordion.prototype.renderContent = function(renderFn) {
+    this.$description.renderContent = renderFn;
+    return this;
+};
+
+Accordion.prototype.$build = function() {
+    // TODO: Implementation
+    // this.$description.items.forEach(item => {
+    //     item.onExpand(() => {
+    //         if (!this.$description.multiple) {
+    //             this.$description.items
+    //                 .filter(i => i !== item)
+    //                 .forEach(i => i.expanded(false));
+    //         }
+    //     });
+    // });
+};
+
+Accordion.prototype.toNdElement = function() {
+    return this.$build();
+};

package/src/components/accordion/AccordionItem.js

@@ -0,0 +1,119 @@
+import { $ } from '@core';
+import BaseComponent from "@components/BaseComponent";
+
+export default function AccordionItem(config = {}) {
+    if(!(this instanceof AccordionItem)){
+        return new AccordionItem()
+    }
+
+    this.$description = {
+        id: null,
+        title: null,
+        icon: null,
+        collapsible: true,
+        content: null,
+        renderHeader: null,
+        renderContent: null,
+        render: null,
+        expanded: $(false),
+        disabled: false,
+        ...config
+    };
+}
+
+BaseComponent.extends(AccordionItem);
+
+Object.defineProperty(AccordionItem.prototype, 'id', {
+    get() {
+        this.$description.id;
+    }
+});
+
+AccordionItem.prototype.identifyBy = function(id) {
+    this.$description.id = id;
+    return this;
+};
+
+AccordionItem.prototype.content = function(content) {
+    this.$description.content = content;
+    return this;
+};
+
+AccordionItem.prototype.title = function(title) {
+    this.$description.title = title;
+    return this;
+};
+
+AccordionItem.prototype.icon = function(icon) {
+    this.$description.icon = icon;
+    return this;
+};
+
+AccordionItem.prototype.showIndicator = function(show = true) {
+    this.$description.showIndicator = show;
+    return this;
+}
+
+AccordionItem.prototype.collapsible = function(collapsible = true) {
+    this.$description.collapsible = collapsible;
+    return this;
+};
+
+AccordionItem.prototype.expanded = function(expanded = true) {
+    this.$description.expanded.set(expanded);
+    if (this.$description.expanded.val()) {
+        this.emit('expand');
+    } else {
+        this.emit('collapse');
+    }
+    return this;
+};
+
+AccordionItem.prototype.toggle = function() {
+    return this.expanded(!this.$description.expanded.val());
+};
+
+AccordionItem.prototype.disabled = function(disabled = true) {
+    this.$description.disabled = disabled;
+    return this;
+};
+
+AccordionItem.prototype.isExpanded = function() {
+    return this.$description.expanded.val();
+};
+AccordionItem.prototype.onExpand = function(handler) {
+    this.on('expand', handler );
+    return this;
+};
+
+AccordionItem.prototype.onCollapse = function(handler) {
+    this.on('collapse', handler);
+    return this;
+};
+
+AccordionItem.prototype.renderHeader = function(renderFn) {
+    this.$description.renderHeader = renderFn;
+    return this;
+};
+
+AccordionItem.prototype.renderContent = function(renderFn) {
+    this.$description.renderContent = renderFn;
+};
+
+AccordionItem.prototype.renderIndicator = function(renderFn) {
+    this.$description.renderIndicator = renderFn;
+    return this;
+};
+
+AccordionItem.prototype.render = function(renderFn) {
+    this.$description.render = renderFn;
+    return this;
+}
+
+AccordionItem.prototype.$build = function() {
+
+};
+
+AccordionItem.prototype.toNdElement = function() {
+
+}

package/src/components/accordion/index.js

@@ -0,0 +1,7 @@
+import Accordion from './Accordion';
+import AccordionItem from './AccordionItem';
+
+export {
+    Accordion,
+    AccordionItem
+}

package/src/components/alert/Alert.js

@@ -0,0 +1,155 @@
+import BaseComponent from "@components/BaseComponent";
+import EventEmitter from "@src/core/utils/EventEmitter";
+
+export default function Alert(message, config = {}) {
+    if(!(this instanceof Alert)) {
+        return new Alert(message, config);
+    }
+    this.$description = {
+        title: null,
+        content: null,
+        outline: null,
+        style: null,
+        variant: 'info',
+        closable: false,
+        autoDismiss: null,
+        icon: null,
+        showIcon: true,
+        ...config
+    };
+}
+
+Alert.defaultTemplate = null;
+Alert.defaultTitleTemplate = null;
+Alert.defaultButtonsTemplate = null;
+Alert.defaultContentTemplate = null;
+
+Alert.use = function(template) {};
+
+BaseComponent.extends(Alert, EventEmitter);
+
+Alert.prototype.variant = function(variant) {
+    this.$description.variant = variant;
+    return this;
+};
+
+Alert.prototype.info = function() {
+    return this.variant('info');
+};
+Alert.prototype.success = function() {
+    return this.variant('success');
+};
+Alert.prototype.warning = function() {
+    return this.variant('warning');
+};
+Alert.prototype.error = function() {
+    return this.variant('error');
+};
+Alert.prototype.danger = function() {
+    return this.variant('danger');
+};
+
+Alert.prototype.style = function(style) {
+    this.$description.style = style;
+    return this;
+};
+Alert.prototype.filled = function() {
+    return this.style('filled');
+};
+Alert.prototype.bordered = function() {
+    return this.style('bordered');
+};
+Alert.prototype.outline = function(outline = true) {
+    return this.style('outline');
+};
+
+Alert.prototype.title = function(title) {
+    this.$description.title = title;
+    return this;
+};
+Alert.prototype.content = function(content) {
+    this.$description.content = content;
+    return this;
+};
+
+Alert.prototype.renderTitle = function(callback) {
+    this.$description.renderTitle = callback;
+    return this;
+};
+Alert.prototype.renderContent = function(callback) {
+    this.$description.renderContent = callback;
+    return this;
+};
+Alert.prototype.renderFooter = function(callback) {
+    this.$description.renderFooter = callback;
+    return this;
+};
+
+Alert.prototype.clearActions = function(label, handler) {
+    this.$description.actions = [];
+    return this;
+};
+
+Alert.prototype.action = function(label, handler) {
+    this.$description.actions.push({label, handler});
+    return this;
+};
+
+Alert.prototype.layout = function(layoutFn) {
+    this.$description.layout = layoutFn;
+    return this;
+};
+
+Alert.prototype.icon = function(icon) {
+    this.$description.icon = icon;
+    return this;
+};
+
+Alert.prototype.showIcon = function(show = true) {
+    this.$description.showIcon = show;
+};
+
+Alert.prototype.closable = function(closable = true) {
+    this.$description.closable = closable;
+    return this;
+};
+
+Alert.prototype.dismissible = function(dismissible = true) {
+    return this.closable(dismissible);
+};
+Alert.prototype.autoDismiss = function(delay) {
+    this.$description.autoDismiss = delay;
+    return this;
+};
+
+
+
+Alert.prototype.close = function() {
+
+};
+
+Alert.prototype.show = function() {
+
+};
+
+Alert.prototype.hide = function() {
+
+};
+
+Alert.prototype.onClose = function(handler) {
+    this.on('close', handler);
+    return this;
+};
+Alert.prototype.onShow = function(handler) {
+    this.on('show', handler);
+    return this;
+};
+
+Alert.prototype.render = function(renderFn) {
+    this.$description.render = renderFn;
+    return this;
+};
+Alert.prototype.$build = function() {
+
+};
+Alert.prototype.toNdElement = function() {};

package/src/components/alert/index.js

@@ -0,0 +1,6 @@
+import Alert from './Alert';
+
+
+export {
+    Alert
+}

package/src/components/avatar/Avatar.js

@@ -0,0 +1,178 @@
+import {Validator} from "@core";
+import BaseComponent from "@components/BaseComponent";
+
+export default function Avatar(source, config = {}) {
+    if (!(this instanceof Avatar)) {
+        return new Avatar(config);
+    }
+
+    this.$description = {
+        src: Validator.isObservable(source) ? source : $(null),
+        alt: null,
+        name: null,
+        initials: null,
+        icon: null,
+        size: 'medium',
+        shape: 'circle',
+        variant: null,
+        color: null,
+        textColor: null,
+        status: null,
+        render: null,
+        ...config
+    };
+}
+
+BaseComponent.extends(Avatar);
+
+Avatar.defaultTemplate = null;
+Avatar.use = function(template) {};
+
+Avatar.prototype.onError = function(handler) {};
+
+Avatar.prototype.src = function(src) {
+    this.$description.src.set(src);
+    return this;
+};
+Avatar.prototype.alt = function(alt) {
+    this.$description.alt = alt;
+    return this;
+};
+Avatar.prototype.name = function(name) {
+    this.$description.name = name;
+    return this;
+};
+Avatar.prototype.initials = function(initials) {
+    this.$description.initials = initials;
+    return this;
+};
+Avatar.prototype.icon = function(icon) {
+    this.$description.icon = icon;
+    return this;
+};
+
+/**
+ * @param {string|int} size
+ * @returns {Avatar}
+ */
+Avatar.prototype.size = function(size) {
+    this.$description.size = size;
+    return this;
+};
+Avatar.prototype.extraSmall = function() {
+    return this.size('extra-small');
+};
+Avatar.prototype.small = function() {
+    return this.size('small');
+};
+Avatar.prototype.medium = function() {
+    return this.size('medium');
+};
+Avatar.prototype.large = function() {
+    return this.size('large');
+};
+Avatar.prototype.extraLarge = function() {
+    return this.size('extra-large');
+};
+
+Avatar.prototype.shape = function(shape) {
+    this.$description.shape = shape;
+    return this;
+};
+Avatar.prototype.circle = function() {
+    return this.shape('circle');
+};
+Avatar.prototype.square = function() {
+    return this.shape('square');
+};
+Avatar.prototype.rounded = function() {
+    return this.shape('rounded');
+};
+
+Avatar.prototype.variant = function(variant) {
+    this.$description.variant = variant;
+}; // 'primary' | 'secondary' | 'success' | etc.
+Avatar.prototype.primary = function() {
+    return this.variant('primary');
+};
+Avatar.prototype.secondary = function() {
+    return this.variant('secondary');
+};
+Avatar.prototype.success = function() {
+    return this.variant('success');
+};
+Avatar.prototype.danger = function() {
+    return this.variant('danger');
+};
+Avatar.prototype.warning = function() {
+    return this.variant('warning');
+};
+Avatar.prototype.info = function() {
+    return this.variant('info');
+}
+Avatar.prototype.color = function(color) {
+    this.$description.color = color;
+    return this;
+};
+Avatar.prototype.textColor = function(color) {
+    this.$description.textColor = color;
+    return this;
+};
+
+Avatar.prototype.status = function(status) {
+    this.$description.status = status;
+    return this;
+};
+Avatar.prototype.statusPosition = function(position) {
+    this.$description.statusPosition = position;
+}; // 'top-right' | 'bottom-right' | etc.
+Avatar.prototype.statusAtTopEnd = function() {
+    return this.statusPosition('top-end');
+};
+Avatar.prototype.statusAtBottomEnd = function() {
+    return this.statusPosition('bottom-end');
+};
+Avatar.prototype.statusAtTopStart = function() {
+    return this.statusPosition('top-start');
+};
+Avatar.prototype.statusAtBottomStart = function() {
+    return this.statusPosition('bottom-start');
+};
+
+Avatar.prototype.showStatus = function(show = true) {
+    this.$description.showStatus = show;
+    return this;
+};
+
+// Badge
+Avatar.prototype.badge = function(content) {
+    this.$description.badge = content;
+    return this;
+};
+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');
+};
+Avatar.prototype.badgeAtTopStart = function() {
+    return this.badgePosition('top-start');
+};
+Avatar.prototype.badgeAtBottomStart = function() {
+    return this.badgePosition('bottom-start');
+};
+
+
+Avatar.prototype.render = function(renderFn) {
+    this.$description.render = renderFn;
+    return this;
+};
+
+Avatar.prototype.$build = function() {
+
+};
+Avatar.prototype.toNdElement = function() {};

package/src/components/avatar/index.js

@@ -0,0 +1,5 @@
+import Avatar from './Avatar';
+
+export {
+    Avatar
+}