native-document 1.0.76 → 1.0.77

package/src/components/popover/Popover.js

@@ -0,0 +1,185 @@
+import BaseComponent from "@components/BaseComponent";
+import EventEmitter from "@src/core/utils/EventEmitter";
+
+export default function Popover(config = {}) {
+    if (!(this instanceof Popover)) {
+        return new Popover(config);
+    }
+
+    this.$description = {
+        trigger: null,
+        content: null,
+        header: null,
+        footer: null,
+        isOpen: $(false),
+        defaultOpen: false,
+        modal: false,
+        closeOnEscape: true,
+        closeOnClickOutside: true,
+        focusTrap: true,
+        returnFocus: true,
+        position: 'bottom',
+        offset: [0, 8],
+        data: null,
+        renderContent: null,
+        renderHeader: null,
+        renderFooter: null,
+        render: null,
+        ...config,
+    };
+
+    this.$element = null;
+
+    if (this.$description.defaultOpen) {
+        this.$description.isOpen.set(true);
+    }
+}
+
+BaseComponent.extends(Popover, EventEmitter);
+
+Popover.defaultTemplate = null;
+
+Popover.use = function(template) {
+    Popover.defaultTemplate = template.popover;
+};
+
+Popover.prototype.trigger = function(trigger) {
+    if (trigger instanceof PopoverTrigger) {
+        this.$description.trigger = trigger.toJSON();
+    } else {
+        this.$description.trigger = trigger;
+    }
+    return this;
+};
+
+Popover.prototype.content = function(content) {
+    this.$description.content = content;
+    return this;
+};
+
+Popover.prototype.header = function(header) {
+    this.$description.header = header;
+    return this;
+};
+
+Popover.prototype.footer = function(footer) {
+    this.$description.footer = footer;
+    return this;
+};
+
+Popover.prototype.closeOnEscape = function(closeOnEscape = true) {
+    this.$description.closeOnEscape = closeOnEscape;
+    return this;
+};
+
+Popover.prototype.closeOnClickOutside = function(closeOnClickOutside = true) {
+    this.$description.closeOnClickOutside = closeOnClickOutside;
+    return this;
+};
+
+Popover.prototype.focusTrap = function(trap = true) {
+    this.$description.focusTrap = trap;
+    return this;
+};
+
+Popover.prototype.returnFocus = function(returnFocus = true) {
+    this.$description.returnFocus = returnFocus;
+    return this;
+};
+
+Popover.prototype.position = function(position) {
+    this.$description.position = position;
+    return this;
+};
+
+Popover.prototype.atTop = function() {
+    return this.position('top');
+};
+Popover.prototype.atBottom = function() {
+    return this.position('bottom');
+};
+Popover.prototype.atLeft = function() {
+    return this.position('left');
+};
+Popover.prototype.atRight = function() {
+    return this.position('right');
+};
+Popover.prototype.atTopStart = function() {
+    return this.position('top-start');
+};
+Popover.prototype.atTopEnd = function() {
+    return this.position('top-end');
+};
+Popover.prototype.atBottomStart = function() {
+    return this.position('bottom-start');
+};
+Popover.prototype.atBottomEnd = function() {
+    return this.position('bottom-end');
+};
+
+Popover.prototype.offset = function(skidding, distance) {
+    this.$description.offset = [skidding, distance];
+    return this;
+};
+
+Popover.prototype.bindOpen = function(observable) {
+    this.$description.isOpen = observable;
+    return this;
+};
+
+Popover.prototype.data = function(data) {
+    this.$description.data = data;
+    return this;
+};
+
+Popover.prototype.open = function() {
+    this.$description.isOpen.set(true);
+    this.emit('open');
+    return this;
+};
+
+Popover.prototype.close = function() {
+    this.$description.isOpen.set(false);
+    this.emit('close');
+    return this;
+};
+
+Popover.prototype.toggle = function() {
+    this.$description.isOpen.val() ? this.close() : this.open();
+    return this;
+};
+
+Popover.prototype.onOpen = function(handler) {
+    this.on('open', handler);
+    return this;
+};
+
+Popover.prototype.onClose = function(handler) {
+    this.on('close', handler);
+    return this;
+};
+
+Popover.prototype.renderTrigger = function(renderFn) {
+    this.$description.renderTrigger = renderFn;
+    return this;
+};
+
+Popover.prototype.renderContent = function(renderFn) {
+    this.$description.renderContent = renderFn;
+    return this;
+};
+
+Popover.prototype.renderHeader = function(renderFn) {
+    this.$description.renderHeader = renderFn;
+    return this;
+};
+
+Popover.prototype.renderFooter = function(renderFn) {
+    this.$description.renderFooter = renderFn;
+    return this;
+};
+
+Popover.prototype.render = function(renderFn) {
+    this.$description.render = renderFn;
+    return this;
+};

package/src/components/popover/PopoverFooter.js

@@ -0,0 +1,37 @@
+import BaseComponent from "@components/BaseComponent";
+
+export default function PopoverFooter(content, config = {}) {
+    if(!(this instanceof PopoverFooter)) {
+        return new PopoverFooter(content, config);
+    }
+
+    this.$description = {
+        content: content || null,
+        data: null,
+        render: null,
+        ...config
+    };
+}
+
+BaseComponent.extends(PopoverFooter);
+
+PopoverFooter.defaultTemplate = null;
+
+PopoverFooter.use = function(template) {
+    PopoverFooter.defaultTemplate = template.popoverFooter;
+};
+
+PopoverFooter.prototype.content = function(content) {
+    this.$description.content = content;
+    return this;
+};
+
+PopoverFooter.prototype.data = function(data) {
+    this.$description.data = data;
+    return this;
+};
+
+PopoverFooter.prototype.render = function(renderFn) {
+    this.$description.render = renderFn;
+    return this;
+};

package/src/components/popover/PopoverHeader.js

@@ -0,0 +1,43 @@
+import BaseComponent from "@components/BaseComponent";
+
+export default function PopoverHeader(content, config = {}) {
+    if(!(this instanceof PopoverHeader)) {
+        return new PopoverHeader(content, config);
+    }
+
+    this.$description = {
+        content: content || null,
+        showClose: false,
+        data: null,
+        render: null,
+        ...config
+    };
+}
+
+BaseComponent.extends(PopoverHeader);
+
+PopoverHeader.defaultTemplate = null;
+
+PopoverHeader.use = function(template) {
+    PopoverHeader.defaultTemplate = template.popoverHeader;
+};
+
+PopoverHeader.prototype.content = function(content) {
+    this.$description.content = content;
+    return this;
+};
+
+PopoverHeader.prototype.showClose = function(show = true) {
+    this.$description.showClose = show;
+    return this;
+};
+
+PopoverHeader.prototype.data = function(data) {
+    this.$description.data = data;
+    return this;
+};
+
+PopoverHeader.prototype.render = function(renderFn) {
+    this.$description.render = renderFn;
+    return this;
+};

package/src/components/popover/index.js

@@ -0,0 +1,10 @@
+import Popover from "./Popover";
+import PopoverHeader from "./PopoverHeader";
+import PopoverFooter from "./PopoverFooter";
+
+
+export {
+    Popover,
+    PopoverHeader,
+    PopoverFooter
+};

package/src/components/progress/Progress.js

@@ -0,0 +1,220 @@
+import BaseComponent from "@components/BaseComponent";
+import EventEmitter from "@src/core/utils/EventEmitter";
+import {Validator} from "@core";
+
+export default function Progress(config = {}) {
+    if (!(this instanceof Progress)) {
+        return new Progress(config);
+    }
+
+    this.$description = {
+        value: null,
+        type: null,
+        variant: null,
+        max: 100,
+        size: null,
+        height: null,
+        showValue: null,
+        showPercentage: null,
+        label: null,
+        format: null,
+        indeterminate: null,
+        striped: null,
+        animated: null,
+        render: null,
+        ...config
+    };
+}
+
+BaseComponent.extends(Progress, EventEmitter);
+
+Progress.defaultTemplate = null;
+
+Progress.use = function(template) {};
+
+Progress.prototype.model = function(observable) {
+    this.$description.value = observable;
+    return this;
+};
+
+Progress.prototype.setCurrentStep = function(step) {
+    this.$description.value?.set(step);
+    this.emit('change', step);
+};
+
+Progress.prototype.value = function() {
+    const value = this.$description.value;
+    if(Validator.isObservable(value)) {
+        return value.val();
+    }
+    return value;
+};
+
+Progress.prototype.setValue = function(newValue) {
+    const value = this.$description.value;
+    if(Validator.isObservable(value)) {
+        value.set(newValue);
+        return this;
+    }
+    this.$description.value = newValue;
+    return this;
+};
+
+Progress.prototype.max = function(max) {
+    this.$description.max = max;
+    return this;
+};
+
+Progress.prototype.type = function(type) {
+    this.$description.type = type;
+    return this;
+};
+
+Progress.prototype.bar = function() {
+    return this.type('bar');
+};
+
+Progress.prototype.circle = function() {
+    return this.type('circle');
+};
+
+Progress.prototype.line = function() {
+    return this.type('line');
+};
+
+// Variant
+Progress.prototype.variant = function(name) {
+    this.$description.variant = name;
+    return this;
+};
+
+Progress.prototype.primary = function() {
+    return this.variant('primary');
+};
+
+Progress.prototype.secondary = function() {
+    return this.variant('secondary');
+};
+
+Progress.prototype.success = function() {
+    return this.variant('success');
+};
+
+Progress.prototype.warning = function() {
+    return this.variant('warning');
+};
+
+Progress.prototype.danger = function() {
+    return this.variant('danger');
+};
+
+Progress.prototype.info = function() {
+    return this.variant('info');
+};
+
+
+Progress.prototype.size = function(size) {
+    this.$description.size = size;
+    return this;
+};
+
+Progress.prototype.small = function() {
+    return this.size('small');
+};
+
+Progress.prototype.medium = function() {
+    return this.size('medium');
+};
+
+Progress.prototype.large = function() {
+    return this.size('large');
+};
+
+Progress.prototype.height = function(height) {
+    this.$description.height = height;
+    return this;
+};
+
+
+Progress.prototype.showValue = function(enabled = true) {
+    this.$description.showValue = enabled;
+    return this;
+};
+
+Progress.prototype.label = function(text) {
+    this.$description.label = text;
+    return this;
+};
+
+Progress.prototype.format = function(formatFn) {
+    this.$description.format = formatFn;
+    return this;
+};
+
+Progress.prototype.indeterminate = function(enabled = true) {
+    this.$description.indeterminate = enabled;
+    return this;
+};
+
+Progress.prototype.striped = function(enabled = true) {
+    this.$description.striped = enabled;
+    return this;
+};
+
+Progress.prototype.animated = function(enabled = true) {
+    this.$description.animated = enabled;
+    return this;
+};
+
+
+Progress.prototype.start = function() {
+    // TODO: Implementation
+};
+
+Progress.prototype.complete = function() {
+    this.setCurrentStep(100);
+    this.emit('complete');
+};
+
+Progress.prototype.increment = function(step) {
+    const current = this.value() || 0;
+    this.setCurrentStep(Math.min(this.$description.max, current + step));
+    return this;
+};
+
+Progress.prototype.reset = function() {
+    this.setCurrentStep(0);
+    this.emit('reset');
+    return this;
+};
+
+// Events
+Progress.prototype.onChange = function(handler) {
+    this.on('change', handler);
+    return this;
+};
+
+Progress.prototype.onComplete = function(handler) {
+    this.on('complete', handler);
+    return this;
+};
+
+Progress.prototype.onReset = function(handler) {
+    this.on('reset', handler);
+    return this;
+};
+
+
+Progress.prototype.render = function(renderFn) {
+    this.$description.render = renderFn;
+    return this;
+};
+
+// Build & Render
+Progress.prototype.$build = function() {
+    // TODO: Implementation
+};
+
+Progress.prototype.toNdElement = function() {
+    return this.$build();
+};

package/src/components/progress/index.js

@@ -0,0 +1,6 @@
+import Progress from "./Progress";
+
+
+export {
+    Progress
+}

package/src/components/skeleton/Skeleton.js

@@ -0,0 +1,98 @@
+
+export default function Skeleton(type = 'rect', config = {}) {
+    if (!(this instanceof Skeleton)) {
+        return new Skeleton(config);
+    }
+    this.$description = {
+        type,
+        lines: null,
+        width: null,
+        height: null,
+        loading: null,
+        repeat: null,
+        ...config
+    };
+}
+
+Skeleton.defaultTemplate = null;
+
+Skeleton.use = function(template) {};
+
+Skeleton.prototype.type = function(type) {
+    this.$description.type = type;
+    return this;
+};
+Skeleton.prototype.text = function(lines = 1) {
+    this.$description.lines = lines;
+    return this.type('text');
+};
+Skeleton.prototype.circle = function() {
+    return this.type('circle');
+};
+Skeleton.prototype.rect = function() {
+    return this.type('rect');
+};
+Skeleton.prototype.avatar = function() {
+    return this.type('avatar');
+};
+Skeleton.prototype.image = function() {
+    return this.type('image');
+};
+
+Skeleton.prototype.width = function(width) {
+    this.$description.width = width;
+    return this;
+};
+Skeleton.prototype.height = function(height) {
+    this.$description.height = height;
+    return this;
+};
+Skeleton.prototype.size = function(width, height) {
+    this.width(width);
+    this.height(height);
+    return this;
+};
+
+Skeleton.prototype.variant = function(name) {
+    this.$description.variant = name;
+    return this;
+};
+Skeleton.prototype.wave = function() {
+    return this.variant('wave');
+};
+Skeleton.prototype.pulse = function() {
+    return this.variant('pulse');
+};
+Skeleton.prototype.rounded = function() {};
+
+Skeleton.prototype.loading = function(isLoading) {
+    this.$description.loading = isLoading;
+    return this;
+};
+Skeleton.prototype.show = function() {};
+Skeleton.prototype.hide = function() {};
+
+Skeleton.prototype.repeat = function(times) {
+    this.$description.repeat = times;
+    return this;
+};
+
+
+Skeleton.prototype.render = function(renderFn) {
+    this.$description.render = renderFn;
+    return this;
+};
+
+
+Skeleton.prototype.$build = function() {
+
+};
+Skeleton.prototype.toNdElement = function() {
+    return this.$build();
+};
+
+// Presets
+Skeleton.card = function() {}; // Preset pour card
+Skeleton.list = function(items = 3) {}; // Preset pour liste
+Skeleton.table = function(rows = 5, cols = 4) {}; // Preset pour tableau
+Skeleton.paragraph = function(lines = 3) {}; // Preset pour paragraphe

package/src/components/skeleton/index.js

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