@kizmann/nano-ui 0.9.10 → 1.0.0

package/src/drawer/src/drawer/drawer.js

@@ -0,0 +1,431 @@
+import { UUID, Num, Arr, Obj, Any, Dom, Locale } from "@kizmann/pico-js";
+
+export default {
+
+    name: 'NDrawer',
+
+    inject: {
+
+        NScrollbar: {
+            default: undefined
+        }
+
+    },
+
+    props: {
+
+        modelValue: {
+            default()
+            {
+                return false;
+            },
+            type: [Boolean]
+        },
+
+        listen: {
+            default()
+            {
+                return true;
+            },
+            type: [Boolean]
+        },
+
+        update: {
+            default()
+            {
+                return true;
+            },
+            type: [Boolean]
+        },
+
+        selector: {
+            default()
+            {
+                return null;
+            },
+        },
+
+        disabled: {
+            default()
+            {
+                return false;
+            },
+            type: [Boolean]
+        },
+
+        width: {
+            default()
+            {
+                return '30%';
+            },
+            type: [String]
+        },
+
+        title: {
+            default()
+            {
+                return '';
+            },
+            type: [String]
+        },
+
+        type: {
+            default()
+            {
+                return 'default';
+            },
+            type: [String]
+        },
+
+        size: {
+            default()
+            {
+                return 'md';
+            },
+            type: [String]
+        },
+
+        position: {
+            default()
+            {
+                return 'right';
+            },
+            type: [String]
+        },
+
+        closable: {
+            default()
+            {
+                return true;
+            },
+            type: [Boolean]
+        },
+
+        renderClose: {
+            default()
+            {
+                return true;
+            },
+            type: [Boolean]
+        }
+
+    },
+
+    watch: {
+
+        modelValue(value)
+        {
+            if ( value !== this.tempValue ) {
+                this.tempValue = value;
+            }
+        },
+
+        tempValue()
+        {
+            this.startRefreshTimeout();
+        }
+
+    },
+
+    provide()
+    {
+        return {
+            NDrawer: this
+        };
+    },
+
+    data()
+    {
+        return {
+            target: null, tempValue: false
+        };
+    },
+
+    mounted()
+    {
+        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).on('keydown',
+            this.eventKeydown, this._.uid);
+
+        let showDrawer = () => {
+            this.tempValue = true;
+        };
+
+        if ( this.modelValue ) {
+            Any.delay(showDrawer, 100);
+        }
+
+        Dom.find(document.body).append(this.$el);
+    },
+
+    beforeUnmount()
+    {
+        this.$el.remove();
+    },
+
+    unmounted()
+    {
+        Dom.find(document.body).off('mousedown',
+            null, this._.uid);
+
+        Dom.find(document.body).off('keydown',
+            null, this._.uid);
+    },
+
+    methods: {
+
+        openModal(force = false, source = null)
+        {
+            if ( this.tempValue ) {
+                return;
+            }
+
+            if ( this.closable || force ) {
+                this.tempValue = true;
+            }
+
+            this.$emit('update:modelValue', true, source);
+        },
+
+        closeModal(force = false, source = null)
+        {
+            if ( ! this.tempValue ) {
+                return;
+            }
+
+            if ( ! this.update ) {
+                return this.$emit('close', source);
+            }
+
+            if ( this.closable || force ) {
+                this.tempValue = false;
+            }
+
+            this.$emit('update:modelValue', false, source);
+        },
+
+        stopRefreshTimeout()
+        {
+            clearTimeout(this.refresh);
+
+            Dom.find(this.$el).removeClass('n-ready');
+        },
+
+        startRefreshTimeout()
+        {
+            if ( ! this.tempValue ) {
+                return this.stopRefreshTimeout();
+            }
+
+            window.zIndex += 1;
+
+            Dom.find(this.$el).attr('data-drawer',
+                window.zIndex);
+
+            Dom.find(this.$el).css({
+                'z-index': window.zIndex
+            });
+
+            this.queueRefreshTimeout();
+        },
+
+        queueRefreshTimeout()
+        {
+            if ( ! this.tempValue ) {
+                return this.stopRefreshTimeout();
+            }
+
+            this.refresh = setTimeout(() => {
+                Dom.find(this.$el).addClass('n-ready');
+            }, 100);
+        },
+
+        eventClick(event, el)
+        {
+            if ( this.disabled || event.which !== 1 ) {
+                return;
+            }
+
+            let result = !! Dom.find(el).closest(this.target);
+
+            if ( ! result && ! this.tempValue ) {
+                return;
+            }
+
+            if ( this.tempValue && this.closable ) {
+                result = ! Dom.find(el).closest(this.$refs.backdrop);
+            }
+
+            if ( result === this.tempValue ) {
+                return;
+            }
+
+            if ( ! result ) {
+                return this.closeModal(false, 'escape');
+            }
+
+            if ( this.listen ) {
+                this.openModal(true, 'selector');
+            }
+        },
+
+        eventKeydown(event, el)
+        {
+            if ( ! this.tempValue || event.which !== 27 ) {
+                return;
+            }
+
+            let extractIndex = (modal) => {
+                return Dom.find(modal).attr('data-drawer');
+            };
+
+            let indexes = Dom.find('.n-drawer:not(.n-hidden)')
+                .each(extractIndex);
+
+            let index = Dom.find(this.$el).attr('data-drawer');
+
+            if ( Arr.last(indexes.sort()) !== index ) {
+                return;
+            }
+
+            this.closeModal(false, 'escape');
+        },
+
+    },
+
+    renderClose()
+    {
+        if ( ! this.renderClose || ! this.closable ) {
+            return null;
+        }
+
+        let props = {
+            onClick: () => this.closeModal(false, 'escape')
+        };
+
+        return (
+            <div class="n-drawer__close" {...props}>
+                <span class={nano.Icons.times}></span>
+            </div>
+        );
+    },
+
+    renderHeader()
+    {
+        if ( ! this.$slots.header && ! this.title ) {
+            return null;
+        }
+
+        return (
+            <div class="n-drawer__header">
+                { [this.$slots.header && this.$slots.header({ closeModal: this.closeModal }) || this.title, this.ctor('renderClose')()] }
+            </div>
+        );
+    },
+
+    renderFooter()
+    {
+        if ( ! this.$slots.footer ) {
+            return null;
+        }
+
+        return (
+            <div class="n-drawer__footer">
+                { this.$slots.footer({ closeModal: this.closeModal }) }
+            </div>
+        );
+    },
+
+    renderBody()
+    {
+        let bodyHtml = (
+            <NScrollbar ref="scrollbar" relative={true} wrapClass="n-drawer__wrap">
+                { this.$slots.default && this.$slots.default({ closeModal: this.closeModal }) }
+            </NScrollbar>
+        );
+
+        if ( this.$slots.body ) {
+            bodyHtml = this.$slots.body({ closeModal: this.closeModal });
+        }
+
+        return (
+            <div class="n-drawer__body">
+                { bodyHtml }
+            </div>
+        );
+    },
+
+    renderFrame()
+    {
+        if ( ! this.tempValue ) {
+            return null;
+        }
+
+        let style = {
+            width: this.width
+        };
+
+        let innerHtml = [
+            this.ctor('renderHeader')(),
+            this.ctor('renderBody')(),
+            this.ctor('renderFooter')(),
+        ]
+
+        return (
+            <div class="n-drawer__frame" style={style}>
+                { this.$slots.raw ? this.$slots.raw() : innerHtml }
+            </div>
+        );
+    },
+
+    renderBackdrop()
+    {
+        return (
+            <div ref="backdrop" class="n-drawer__backdrop"></div>
+        );
+    },
+
+    render()
+    {
+        if ( ! window.zIndex ) {
+            window.zIndex = 9000;
+        }
+
+        let classList = [
+            'n-drawer',
+            'n-drawer--' + this.size,
+            'n-drawer--' + this.type,
+            'n-drawer--' + this.position
+        ];
+
+        if ( this.tempValue ) {
+            this.queueRefreshTimeout();
+        }
+
+        if ( this.renderClose ) {
+            classList.push('n-closable');
+        }
+
+        if ( ! this.tempValue ) {
+            classList.push('n-hidden');
+        }
+
+        let innerHtml = null;
+
+        if ( this.tempValue ) {
+            innerHtml = this.ctor('renderFrame')();
+        }
+
+        return (
+            <div class={classList}>
+                { [innerHtml, this.ctor('renderBackdrop')()] }
+            </div>
+        );
+    }
+
+}

package/src/drawer/src/drawer/drawer.scss

@@ -0,0 +1,136 @@
+@use 'sass:map';
+@import "../../../root/vars";
+
+.n-drawer {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+.n-drawer.n-hidden {
+    display: none;
+}
+
+.n-drawer__backdrop {
+    z-index: 10;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    transition: opacity 0.5s ease-in-out;
+}
+
+.n-drawer:not(.n-ready) .n-drawer__backdrop {
+    opacity: 0;
+}
+
+.n-drawer__frame {
+    z-index: 20;
+    overflow: hidden;
+    position: relative;
+    flex: 0 1 auto;
+    display: flex;
+    flex-direction: column;
+    min-width: 300px;
+    max-width: 100%;
+    min-height: 0;
+    max-height: 100%;
+    margin: auto;
+    transform: translateX(0);
+    transition: opacity 0.2s 0.1s ease-out, transform 0.2s 0.1s ease-out;
+}
+
+.n-drawer:not(.n-ready) .n-drawer__frame {
+    opacity: 0;
+    transform: translateX(20px);
+}
+
+.n-drawer--right > .n-drawer__frame {
+    margin: 0 0 0 auto;
+}
+
+.n-drawer--left > .n-drawer__frame {
+    margin: 0 auto 0 0;
+}
+
+.n-drawer__header {
+    position: relative;
+    flex: 0 0 auto;
+}
+
+.n-drawer__body {
+    overflow: hidden;
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    justify-content: stretch;
+}
+
+.n-drawer .n-drawer__wrap {
+    flex: 1 1 auto;
+}
+
+.n-drawer__footer {
+    flex: 0 0 auto;
+}
+
+.n-drawer__close {
+    cursor: default;
+    position: absolute;
+    top: 50%;
+    right: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transform: translateY(-50%);
+    opacity: 0.3;
+    transition: opacity 0.15s;
+}
+
+.n-drawer__close:hover {
+    opacity: 0.6;
+}
+
+@each $suffix, $values in $form {
+
+    $-drawer-font: map.get($values, 'font');
+    $-drawer-size: map.get($values, 'size');
+    $-drawer-radius: map.get($values, 'radius');
+    $-drawer-ratio: map.get($values, 'ratio');
+
+    .n-drawer--#{$suffix} {
+        font-size: $-drawer-font;
+    }
+
+    $-drawer-padding: $-drawer-size * $-drawer-ratio;
+
+    .n-drawer--#{$suffix} .n-drawer__header {
+        padding: $-drawer-padding * 1.5 $-drawer-padding * 2;
+    }
+
+    .n-drawer--#{$suffix}.n-closable .n-drawer__header {
+        padding-right: $-drawer-size + ($-drawer-padding * 2);
+    }
+    
+    .n-drawer--#{$suffix}:not(.n-raw) .n-drawer__wrap {
+        padding: $-drawer-padding * 1.5 $-drawer-padding * 2;
+    }
+    
+    .n-drawer--#{$suffix} .n-drawer__footer {
+        padding: $-drawer-padding * 1.5 $-drawer-padding * 2;
+    }
+
+    .n-drawer__close {
+        width: $-drawer-size;
+        height: $-drawer-size;
+        right: $-drawer-padding * 0.8;
+    }
+
+}

package/src/durationpicker/src/durationpicker/durationpicker.scss

@@ -1,3 +1,4 @@
+@use 'sass:map';
 @import "../../../root/vars";
 
 .n-durationpicker {
@@ -112,10 +113,10 @@
 
 @each $suffix, $values in $form {
 
-    $-duration-font: map-get($values, 'font');
-    $-duration-size: map-get($values, 'size');
-    $-duration-radius: map-get($values, 'radius');
-    $-duration-ratio: map-get($values, 'ratio');
+    $-duration-font: map.get($values, 'font');
+    $-duration-size: map.get($values, 'size');
+    $-duration-radius: map.get($values, 'radius');
+    $-duration-ratio: map.get($values, 'ratio');
 
     .n-durationpicker--#{$suffix} {
         min-height: $-duration-size;

package/src/empty/src/empty-icon/empty-icon.scss

@@ -1,3 +1,4 @@
+@use 'sass:map';
 @import "../../../root/vars";
 
 .n-empty-icon {
@@ -42,10 +43,10 @@
 
 @each $suffix, $values in $form {
 
-    $-empty-icon-font: map-get($values, 'font');
-    $-empty-icon-size: map-get($values, 'size');
-    $-empty-icon-radius: map-get($values, 'radius');
-    $-empty-icon-ratio: map-get($values, 'ratio');
+    $-empty-icon-font: map.get($values, 'font');
+    $-empty-icon-size: map.get($values, 'size');
+    $-empty-icon-radius: map.get($values, 'radius');
+    $-empty-icon-ratio: map.get($values, 'ratio');
 
     .n-empty-icon--#{$suffix} {
         font-size: $-empty-icon-font;

package/src/form/index.js

@@ -1,9 +1,15 @@
 import Form from './src/form/form';
 import FormGroup from './src/form-group/form-group';
 import FormItem from './src/form-item/form-item';
+import FormMenu from './src/form-menu/form-menu';
+import FormFrame from './src/form-frame/form-frame';
+import FormFrameItem from './src/form-frame-item/form-frame-item';
 
 export default function (App) {
     App.component(Form.name, Form);
     App.component(FormGroup.name, FormGroup);
     App.component(FormItem.name, FormItem);
+    App.component(FormFrame.name, FormFrame);
+    App.component(FormFrameItem.name, FormFrameItem);
+    App.component(FormMenu.name, FormMenu);
 }

package/src/form/index.scss

@@ -1,3 +1,5 @@
 @import "./src/form/form";
 @import "./src/form-group/form-group";
 @import "./src/form-item/form-item";
+@import "./src/form-menu/form-menu";
+@import "./src/form-frame/form-frame";

package/src/form/src/form/form.js

@@ -104,7 +104,7 @@ export default {
     data()
     {
         return {
-            uid: UUID(), elements: [], blocked: true,
+            uid: UUID(), elements: [], groups: {}, blocked: true,
         };
     },
 
@@ -130,6 +130,16 @@ export default {
 
     methods: {
 
+        registerGroup(group)
+        {
+            this.groups[group.key] = group;
+        },
+
+        unregisterGroup(group)
+        {
+            delete this.groups[group.key];
+        },
+
         onSubmit(event)
         {
             if ( this.prevent ) {

package/src/form/src/form-frame/form-frame.js

@@ -0,0 +1,42 @@
+import { Arr, Obj, Any, Dom, UUID, Locale } from "@kizmann/pico-js";
+
+export default {
+
+    name: 'NFrame',
+
+    provide()
+    {
+        return { NFrame: this };
+    },
+
+    props: {
+
+        resize: {
+            default() {
+                return false;
+            },
+            type: [Boolean]
+        },
+
+        scrollbar: {
+            default() {
+                return false;
+            },
+            type: [Boolean]
+        }
+
+    },
+
+    render()
+    {
+        let classList = [
+            'n-frame'
+        ];
+
+        return (
+            <div class={classList}>
+                {this.$slots.default && this.$slots.default()}
+            </div>
+        );
+    }
+}