@kizmann/nano-ui 1.1.0 → 1.1.2

package/src/confirm/src/confirm/confirm-handler.mjs

@@ -0,0 +1,226 @@
+import { Any, Arr, Dom, Locale, Obj, UUID } from "@kizmann/pico-js";
+
+export class ConfirmHandler
+{
+    static alias = 'Confirm';
+
+    modal = null;
+
+    options = {
+        text: '', size: 'md', type: 'primary', confirmText: '', cancelText: ''
+    };
+
+    static make(options = {}, cb = () => false)
+    {
+        return new ConfirmHandler(options).promise(cb);
+    }
+
+    constructor(options = {})
+    {
+        this.options = Obj.assign(this.options, options, {
+            uid: UUID()
+        });
+    }
+
+    close(next)
+    {
+        this.unbindEvents();
+        this.modal.remove();
+
+        Dom.find(document.body).css({
+            'overflow': 'undefined'
+        });
+
+        next();
+    }
+
+    promise(cb = () => false)
+    {
+        return new Promise((confirm, cancel) => {
+
+            if ( cb.apply({}) ) {
+                return confirm();
+            }
+
+            let args = [
+                () => this.close(confirm),
+                () => this.close(cancel),
+            ];
+
+            this.render(...args);
+        });
+    }
+
+    renderIcon(el)
+    {
+        let icon = Obj.get(window.ConfirmIcons, this.options.type, 'fa fa-ghost');
+
+        let child = Dom.make('div', {
+            classList: 'n-confirm__icon', innerHTML: `<i class="n-icon ${icon}"></i>`
+        });
+
+        child.appendTo(el);
+    }
+
+    renderText(el)
+    {
+        let child = Dom.make('div', {
+            classList: 'n-confirm__text', innerHTML: `<p>${this.options.text}</p>`
+        });
+
+        child.appendTo(el);
+    }
+
+    renderConfirm(el, next)
+    {
+        let classList = [
+            'n-button',
+            'n-button--auto',
+            'n-button--' + this.options.size,
+        ];
+
+        let text = Obj.get(this.options, 'confirmText');
+
+        if ( Any.isEmpty(text) ) {
+            text = Locale.trans('Okay');
+        }
+
+        let confirm = Dom.make('button', {
+            classList: classList.join(' '), innerHTML: `<span>${text}</span>`
+        });
+
+        confirm.on('click', () => {
+            next();
+        });
+
+        confirm.appendTo(el);
+    }
+
+    renderCancel(el, next)
+    {
+        let classList = [
+            'n-button',
+            'n-button--glass',
+            'n-button--neutral',
+            'n-button--' + this.options.size,
+        ];
+
+        let text = Obj.get(this.options, 'cancelText');
+
+        if ( Any.isEmpty(text) ) {
+            text = Locale.trans('Cancel');
+        }
+
+        let confirm = Dom.make('button', {
+            classList: classList.join(' '), innerHTML: `<span>${text}</span>`
+        });
+
+        confirm.on('click', () => {
+            next();
+        });
+
+        confirm.appendTo(el);
+    }
+
+    bindEvents(confirm, cancel)
+    {
+        let { uid } = this.options;
+
+        Dom.find(window).on('keydown', (e) => {
+            if ( e.keyCode === 27 ) {
+                e.stopPropagation(); cancel();
+            }
+            if ( e.keyCode === 13 ) {
+                e.preventDefault(); confirm();
+            }
+        }, { uid });
+
+        Dom.find(this.modal).on('click', (e) => {
+            if ( ! Dom.find(e.target).inside('.n-confirm-frame') ) {
+               cancel();
+            }
+        }, { uid });
+
+        Any.delay(() => {
+            Dom.find(this.modal).addClass('n-ready');
+        });
+    }
+
+    unbindEvents()
+    {
+        let { uid } = this.options;
+
+        Dom.find(window).off('keydown', null, {
+            uid
+        });
+
+        Dom.find(this.modal).off('click', null, {
+            uid
+        });
+    }
+
+    render(confirm, cancel)
+    {
+        let cls = Obj.get(this.options, 'class', []);
+
+        if ( Any.isString(cls) ) {
+            cls = cls.split(' ');
+        }
+
+        let classList = [
+            'n-confirm',
+            'n-confirm--' + this.options.size,
+            'n-confirm--' + this.options.type,
+        ];
+
+        classList.push('n-theme--dark');
+
+        if ( window.WIN ) {
+            classList.push('n-reverse');
+        }
+
+        let modal = Dom.make('div', {
+            classList: Arr.merge(classList, cls).join(' ')
+        });
+
+        modal.attr('data-confirm', this.options.uid);
+
+        let frame = Dom.make('div', {
+            classList: ['n-confirm-frame']
+        });
+
+        frame.appendTo(modal);
+
+        let body = Dom.make('div', {
+            classList: ['n-confirm__body']
+        });
+
+        body.appendTo(frame);
+
+        this.renderIcon(body);
+        this.renderText(body);
+
+        let action = Dom.make('div', {
+            classList: ['n-confirm__action']
+        });
+
+        action.appendTo(frame);
+
+        this.renderCancel(action, cancel);
+        this.renderConfirm(action, confirm);
+
+        Dom.find(document.body).css({
+            'overflow': 'hidden'
+        });
+
+        modal.appendTo(document.body);
+
+        requestAnimationFrame(() => {
+            this.bindEvents(confirm, cancel);
+        });
+
+        this.modal = modal.get(0);
+    }
+}
+
+export default ConfirmHandler;

package/src/confirm/src/confirm/confirm.jsx

@@ -1,4 +1,4 @@
-import { Obj, Locale } from "@kizmann/pico-js";
+import { Obj, Locale, Dom, Arr, Any } from "@kizmann/pico-js";
 
 export default {
 
@@ -6,7 +6,7 @@ export default {
 
     props: {
 
-        visible: {
+        modelValue: {
             default()
             {
                 return false;
@@ -14,15 +14,15 @@ export default {
             type: [Boolean]
         },
 
-        listen: {
+        disabled: {
             default()
             {
-                return true;
+                return false;
             },
             type: [Boolean]
         },
 
-        update: {
+        listen: {
             default()
             {
                 return true;
@@ -53,50 +53,18 @@ export default {
             type: [String]
         },
 
-        width: {
-            default()
-            {
-                return 'auto';
-            },
-            type: [String]
-        },
-
-        position: {
-            default()
-            {
-                return 'center-center';
-            },
-            type: [String]
-        },
-
-        closable: {
-            default()
-            {
-                return true;
-            },
-            type: [Boolean]
-        },
-
         confirmText: {
             default()
             {
-                return Locale.trans('Confirm');
+                return Locale.trans('Okay');
             },
             type: [String]
         },
 
-        abortText: {
+        cancelText: {
             default()
             {
-                return Locale.trans('Abort');
-            },
-            type: [String]
-        },
-
-        buttonSize: {
-            default()
-            {
-                return 'md';
+                return Locale.trans('Cancel');
             },
             type: [String]
         },
@@ -105,10 +73,10 @@ export default {
 
     watch: {
 
-        visible()
+        modelValue()
         {
-            if ( this.visible !== this.tempVisible ) {
-                this.tempVisible = this.visible;
+            if ( this.modelValue !== this.tempValue ) {
+                this.tempValue = this.modelValue;
             }
         }
 
@@ -117,111 +85,129 @@ export default {
     data()
     {
         return {
-            tempVisible: this.visible
+            tempValue: this.modelValue, activeState: false,
         };
     },
 
+    mounted()
+    {
+        this.$watch('tempValue', () => {
+            this.changeVisible();
+        });
+
+        this.$nextTick(() => {
+            this.changeVisible();
+        });
+
+        this.target = Dom.find(this.selector || this.$el)
+            .previous().get(0);
+
+        Dom.find(document.body).on('mousedown',
+            this.eventClick, this._.uid);
+
+        Dom.find(document.body).append(this.$el);
+    },
+
+    unmounted()
+    {
+        Dom.find(document.body).off('mousedown',
+            null, this._.uid);
+    },
+
     methods: {
 
-        abort(event)
+        extractText(fallback)
+        {
+            if ( !this.$slots.default ) {
+                return fallback;
+            }
+
+            let nodes = this.$slots.default();
+
+            if ( Any.isEmpty(nodes) ) {
+                return fallback;
+            }
+
+            let html = [];
+
+            nodes.map((el) => {
+
+                if ( !Any.isString(el.children) ) {
+                    return;
+                }
+
+                html.push(el.children);
+            });
+
+            return html.join(' ');
+        },
+
+        changeVisible()
+        {
+            if ( !this.tempValue || this.activeState ) {
+                return;
+            }
+
+            let text = this.trans('Are you sure?');
+
+            if ( this.$slots.default ) {
+                text = this.$el.innerHTML;
+            }
+
+            let options = Obj.only(this.$props, ['size', 'type', 'confirmText', 'cancelText'], {
+                text
+            });
+
+            this.Confirm.make(options)
+                .then(() => {
+                    this.activeState = false;
+                    this.confirm();
+                })
+                .catch(() => {
+                    this.activeState = false;
+                    this.abort();
+                });
+
+            this.activeState = true;
+        },
+
+        abort()
         {
-            this.$refs.modal.closeModal(true, 'self');
+            this.$emit('update:modelValue', this.tempValue = false);
             this.$emit('abort');
         },
 
-        confirm(event)
+        confirm()
         {
-            this.$refs.modal.closeModal(true, 'self');
+            this.$emit('update:modelValue', this.tempValue = false);
             this.$emit('confirm');
         },
 
-        eventInput(value, source)
+        eventClick(event, el)
         {
-            if ( ! value && source !== 'self' ) {
-                this.$emit('abort');
+            if ( !this.listen || this.disabled || event.which !== 1 ) {
+                return;
             }
 
-            this.$emit('update:visible', this.tempVisible = value);
-        }
-
-    },
+            let result = !!Dom.find(el).closest(this.target);
 
-    renderIcon()
-    {
-        return (
-            <div class="n-confirm__icon">
-                <span class={nano.Icons[this.type]}></span>
-            </div>
-        );
-    },
-
-    renderBody()
-    {
-        return (
-            <div class="n-confirm__body">
-                { this.$slots.default && this.$slots.default() || this.trans('Are you sure?') }
-            </div>
-        );
-    },
+            if ( result === this.tempValue ) {
+                return;
+            }
 
-    renderAction()
-    {
-        let classList = [
-            'n-confirm__action'
-        ];
+            event.preventDefault();
 
-        if ( window.WIN ) {
-            classList.push('n-reverse');
-        }
+            this.$emit('update:modelValue', this.tempValue = true);
+        },
 
-        return (
-            <div class={classList}>
-                <NButton size={this.buttonSize} type={this.type} link={true} onClick={this.abort}>
-                    { this.abortText }
-                </NButton>
-                <NButton size={this.buttonSize} type={this.type} link={false} onClick={this.confirm}>
-                    { this.confirmText }
-                </NButton>
-            </div>
-        );
     },
 
     render()
     {
-        let classList = [
-            'n-confirm',
-            'n-confirm--' + this.type,
-            'n-confirm--' + this.size
-        ];
-
-        let props = {
-            type: 'default',
-            selector: this.selector,
-            listen: this.listen,
-            update: this.update,
-            width: this.width,
-            position: this.position,
-            closable: this.closable,
-            modelValue: this.tempVisible,
-        };
-
-        // Override input listener
-        props['onUpdate:modelValue'] = this.eventInput;
-
-        let innerHtml = {
-            raw: () => (
-                <div class={classList}>
-                    { this.ctor('renderIcon')() }
-                    { this.ctor('renderBody')() }
-                    { this.ctor('renderAction')() }
-                </div>
-            )
-        };
-
         return (
-            <NModal ref="modal" {...props}>
-                { innerHtml }
-            </NModal>
+            <div data-confirm="text" style="display: none !important;">
+                {this.$slots.default && this.$slots.default()}
+            </div>
         );
     }
 

package/src/confirm/src/confirm/confirm.scss

@@ -1,74 +1,82 @@
-@use 'sass:map';
-@import "../../../root/vars";
+@use "../../../root/helpers" as *;
 
 .n-confirm {
-    overflow: hidden;
+    z-index: 90000;
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
     display: flex;
-    flex-direction: column;
     align-items: center;
-    max-width: 420px;
+    justify-content: center;
 }
 
-.n-confirm__icon {
+.n-confirm-frame {
+    overflow: hidden;
     display: flex;
-    justify-content: center;
-    align-items: center;
+    flex-direction: column;
+    max-width: 100%;
+    max-height: 100%;
 }
 
 .n-confirm__body {
-    width: 100%;
-    text-align: center;
-}
-
-.n-confirm__actions {
     display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-    width: 100%;
+    flex-direction: column;
+    align-items: stretch;
 }
 
-.n-confirm__actions.n-reverse {
-    flex-direction: row-reverse;
+.n-confirm__icon {
+    z-index: 0;
+    position: relative;
+    text-align: center;
 }
 
-@each $suffix, $values in $form {
+.n-confirm__icon i {
+    z-index: 10;
+    position: relative;
+    font-size: 2em;
+}
 
-    $-confirm-font: map.get($values, 'font');
-    $-confirm-size: map.get($values, 'size');
-    $-confirm-radius: map.get($values, 'radius');
-    $-confirm-ratio: map.get($values, 'ratio');
+.n-confirm__text {
+    z-index: 10;
+    position: relative;
+    text-align: center;
+}
 
-    .n-confirm--#{$suffix} {
-        font-size: $-confirm-font;
-        border-radius: $-confirm-radius + 2;
-    }
+.n-confirm__text p {
+    font-size: 1em;
+}
 
-    $-confirm-padding: $-confirm-size * $-confirm-ratio;
+.n-confirm__action {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+}
 
-    .n-confirm--#{$suffix} .n-confirm__icon {
-        font-size: $-confirm-font + 4;
-        padding: $-confirm-padding * 1.2 $-confirm-padding * 2;
-    }
+.n-confirm {
+    font-size: size('base-fnt');
+    padding: size('base-pad', 'calc($ * 3)');
+}
 
-    .n-confirm--#{$suffix} .n-confirm__body {
-        padding: 0 $-confirm-padding * 2;
-    }
-    
-    .n-confirm--#{$suffix} .n-confirm__action {
-        padding: $-confirm-padding * 1.2 $-confirm-padding * 2;
-    }
+.n-confirm-frame {
+    width: size('base-hgt', 'calc($ * 12)');
+    padding: size('base-pad-vertical', 'calc($ * 3)') size('base-pad', 'calc($ * 3)');
+    border-radius: size('base-rad-window');
+}
 
-    .n-confirm--#{$suffix} .n-confirm__action > button {
-        margin: 0 $-confirm-padding;
-    }
+.n-confirm.n-reverse .n-confirm__action {
+    flex-direction: row-reverse;
+}
 
-    .n-confirm--#{$suffix} .n-confirm__action > button:first-child {
-        margin-left: 0;
-    }
+.n-confirm__body:not(:empty) {
+    margin-bottom: size('base-pad-vertical', 'calc($ * 2)');
+}
 
-    .n-confirm--#{$suffix} .n-confirm__action > button:last-child {
-        margin-right: 0;
-    }
+.n-confirm__icon {
+    margin-bottom: size('base-pad-vertical', 'calc($ * 1.5)');
+}
 
+.n-confirm__action > *:not(:last-child) {
+    margin-right: size('base-pad', 'calc($ * 1.5)');
 }

package/src/datepicker/index.scss

@@ -1,2 +1,2 @@
-@import "./src/datepicker-panel/datepicker-panel";
-@import "./src/datepicker/datepicker";
+@forward "./src/datepicker-panel/datepicker-panel";
+@forward "./src/datepicker/datepicker";