@kizmann/nano-ui 1.1.0 → 1.1.2

package/src/popover/src/popover/popover.scss

@@ -1,14 +1,148 @@
-@use 'sass:map';
-@import "../../../root/vars";
+@use "../../../root/helpers" as *;
 
 .n-popover {
     position: absolute;
     display: inline-flex;
     flex-direction: column;
-    transition: opacity 0.1s ease-out;
+    transition: opacity 0.1s;
+    font-size: size('base-fnt');
 }
 
-.n-popover:not(.n-ready) {
+.n-popover:before,
+.n-popover:after {
+    content: '\00a0';
+    position: absolute;
+    display: none;
+}
+
+.n-popover:before {
+    z-index: 220;
+}
+
+.n-popover:after {
+    z-index: 210;
+}
+
+.n-popover:not([data-position="auto"]):before,
+.n-popover:not([data-position="auto"]):after {
+    display: block;
+}
+
+.n-popover[data-position^="top-"]:before,
+.n-popover[data-position^="top-"]:after,
+.n-popover[data-position^="bottom-"]:before,
+.n-popover[data-position^="bottom-"]:after {
+    left: 0;
+    width: 16px;
+    height: 6px;
+}
+
+.n-popover[data-position^="top-"]:before,
+.n-popover[data-position^="top-"]:after,
+.n-popover[data-position^="bottom-"]:before,
+.n-popover[data-position^="bottom-"]:after {
+    width: var(--n-parent-width, 16px);
+    max-width: var(--n-node-width, 100%);
+}
+
+.n-popover[data-position="top-start"]:before,
+.n-popover[data-position="top-start"]:after,
+.n-popover[data-position="bottom-start"]:before,
+.n-popover[data-position="bottom-start"]:after {
+    left: 0;
+}
+
+.n-popover[data-position="top-end"]:before,
+.n-popover[data-position="top-end"]:after,
+.n-popover[data-position="bottom-end"]:before,
+.n-popover[data-position="bottom-end"]:after {
+    right: 0;
+}
+
+.n-popover[data-position="top-center"]:before,
+.n-popover[data-position="top-center"]:after,
+.n-popover[data-position="bottom-center"]:before,
+.n-popover[data-position="bottom-center"]:after {
+    left: 50%;
+    transform: translateX(-50%);
+}
+
+.n-popover[data-position^="top-"] {
+    padding-bottom: 6px;
+}
+
+.n-popover[data-position^="bottom-"] {
+    padding-top: 6px;
+}
+
+.n-popover[data-position^="top-"]:before,
+.n-popover[data-position^="top-"]:after {
+    bottom: 0;
+}
+
+.n-popover[data-position^="bottom-"]:before,
+.n-popover[data-position^="bottom-"]:after {
+    top: 0;
+}
+
+.n-popover[data-position^="left-"]:before,
+.n-popover[data-position^="left-"]:after,
+.n-popover[data-position^="right-"]:before,
+.n-popover[data-position^="right-"]:after {
+    width: 6px;
+    height: 16px;
+}
+
+.n-popover[data-position^="left-"]:before,
+.n-popover[data-position^="left-"]:after,
+.n-popover[data-position^="right-"]:before,
+.n-popover[data-position^="right-"]:after {
+    height: var(--n-parent-height, 16px);
+    max-height: var(--n-node-height, 100%);
+}
+
+.n-popover[data-position="left-start"]:before,
+.n-popover[data-position="left-start"]:after,
+.n-popover[data-position="right-start"]:before,
+.n-popover[data-position="right-start"]:after {
+    top: 0;
+}
+
+.n-popover[data-position="left-end"]:before,
+.n-popover[data-position="left-end"]:after,
+.n-popover[data-position="right-end"]:before,
+.n-popover[data-position="right-end"]:after {
+    bottom: 0;
+}
+
+.n-popover[data-position="left-center"]:before,
+.n-popover[data-position="left-center"]:after,
+.n-popover[data-position="right-center"]:before,
+.n-popover[data-position="right-center"]:after {
+    top: 50%;
+    transform: translateY(-50%);
+}
+
+.n-popover[data-position^="left-"] {
+    padding-right: 6px;
+}
+
+.n-popover[data-position^="right-"] {
+    padding-left: 6px;
+}
+
+.n-popover[data-position^="left-"]:before,
+.n-popover[data-position^="left-"]:after {
+    right: 0;
+}
+
+.n-popover[data-position^="right-"]:before,
+.n-popover[data-position^="right-"]:after {
+    left: 0;
+}
+
+
+.n-popover:not([data-ready]) {
     opacity: 0;
 }
 
@@ -22,6 +156,7 @@
 
 .n-popover__frame {
     overflow: hidden;
+    border-radius: size('base-rad');
 }
 
 .n-popover__header {
@@ -43,14 +178,18 @@
     flex-direction: row;
     align-items: center;
     justify-content: stretch;
-    text-decoration: none
+    text-decoration: none;
+    padding: size('base-pad', 'calc($ - 2px)') size('base-pad');
+    font-size: size('base-fnt');
 }
 
 .n-popover-group {
+    font-size: 0.8em;
     font-weight: bold;
 }
 
 .n-popover-option {
+    font-size: 1em;
     width: 100%;
 }
 
@@ -88,7 +227,9 @@
 
 .n-popover-option .n-icon {
     flex: 0 0 auto;
+    font-size: size('base-fnt-icon');
     text-align: center;
+    width: size('base-pad', 'calc($ * 2)');
 }
 
 .n-popover-option .n-icon--before {
@@ -99,78 +240,45 @@
     order: 3;
 }
 
-@each $suffix, $values in $form {
-
-    $-popover-font: map.get($values, 'font');
-    $-popover-size: map.get($values, 'size');
-    $-popover-radius: map.get($values, 'radius');
-    $-popover-ratio: map.get($values, 'ratio');
-
-    .n-popover--#{$suffix} {
-        font-size: $-popover-font;
-    }
-
-    .n-popover--#{$suffix} .n-popover__frame {
-        border-radius: $-popover-radius;
-    }
-
-    $-popover-padding: $-popover-size * $-popover-ratio;
-
-    .n-popover--#{$suffix} .n-popover__header {
-        padding: $-popover-padding $-popover-padding * 1.2;
-    }
-    
-    .n-popover--#{$suffix} .n-popover__body {
-        padding: $-popover-padding $-popover-padding * 1.2;
-    }
-    
-    .n-popover--#{$suffix} .n-popover__footer {
-        padding: $-popover-padding $-popover-padding * 1.2;
-    }
-
-    .n-popover-group.n-popover-group--#{$suffix} {
-        font-size: $-popover-font - 2;
-        padding: $-popover-padding * 0.8 $-popover-padding * 1.2 $-popover-padding * 0.4;
-    }
-
-    .n-popover-option.n-popover-option--#{$suffix} {
-        padding: $-popover-padding * 0.6 $-popover-padding * 1.2;
-    }
-
-    .n-popover--#{$suffix} .n-popover__body .n-popover-group,
-    .n-popover--#{$suffix} .n-popover__body .n-popover-option {
-        width: calc(100% + #{$-popover-padding * 2.4});
-        margin: 0 -#{$-popover-padding * 1.2};
-    }
-
-    .n-popover--#{$suffix} .n-popover__body .n-popover-group:first-child,
-    .n-popover--#{$suffix} .n-popover__body .n-popover-option:first-child {
-        margin-top: -#{$-popover-padding};
-    }
-
-    .n-popover--#{$suffix}  .n-popover__body .n-popover-group:last-child,
-    .n-popover--#{$suffix}  .n-popover__body .n-popover-option:last-child {
-        margin-bottom: -#{$-popover-padding};
-    }
-
-    .n-popover-option--#{$suffix} .n-image {
-        width: $-popover-font + 10;
-        height: $-popover-font + 10;
-    }
-
-    .n-popover-option--#{$suffix} .n-icon {
-        width: $-popover-font;
-        font-size: $-popover-font - 4;
-    }
-
-    .n-popover-option--#{$suffix} .n-image--before,
-    .n-popover-option--#{$suffix} .n-icon--before {
-        margin-right: $-popover-padding;
-    }
-
-    .n-popover-option--#{$suffix} .n-image--after,
-    .n-popover-option--#{$suffix} .n-icon--after {
-        margin-left: $-popover-padding;
-    }
+.n-popover .n-popover__header {
+    padding: size('base-pad-vertical') size('base-pad');
+}
+
+.n-popover .n-popover__body {
+    padding: size('base-pad-vertical') size('base-pad');
+}
+
+.n-popover .n-popover__footer {
+    padding: size('base-pad-vertical') size('base-pad');
+}
+
+.n-popover .n-popover__body .n-popover-group:first-child,
+.n-popover .n-popover__body .n-popover-option:first-child {
+    margin-top: size('base-pad-vertical', 'calc($ * -1)');
+}
+
+.n-popover  .n-popover__body .n-popover-group:last-child,
+.n-popover  .n-popover__body .n-popover-option:last-child {
+    margin-bottom: size('base-pad-vertical', 'calc($ * -1)');
+}
+
+.n-popover .n-popover__body .n-popover-group,
+.n-popover .n-popover__body .n-popover-option {
+    width: size('base-pad', 'calc(100% + ($ * 2))');
+    margin: 0 size('base-pad', 'calc($ * -1)');
+}
+
+.n-popover-option .n-image {
+    width: size('base-pad', 'calc($ * 2)');
+    height: size('base-pad', 'calc($ * 2)');
+}
 
+.n-popover-option .n-image--before,
+.n-popover-option .n-icon--before {
+    margin-right: size('base-pad');
+}
+
+.n-popover-option .n-image--after,
+.n-popover-option .n-icon--after {
+    margin-left: size('base-pad');
 }

package/src/preview/index.js

@@ -4,11 +4,51 @@ import PreviewImage from "./src/preview-image/preview-image.jsx";
 import PreviewVideo from "./src/preview-video/preview-video.jsx";
 import PreviewModal from "./src/preview-modal/preview-modal.jsx";
 
+import PreviewHelper from "./src/preview/preview-helper.mjs";
+import PreviewHandler from "./src/preview/preview-handler.mjs";
+
+window.DefaultPreviewMimes = {
+    image: [
+        'jpg', 'jpeg', 'gif', 'svg', 'png', 'bmp'
+    ],
+    video: [
+        'mp4', 'webm', 'mov'
+    ],
+    audio: [
+        'mp3', 'aac',
+    ],
+    font: [
+        'woff', 'ttf', 'otf'
+    ],
+    text: [
+        'csv', 'txt', 'html'
+    ],
+    application: [
+        'pdf', 'doc', 'xls'
+    ]
+};
+
 export default function (App) {
-    App.component(Preview.name, Preview);
-    App.component(PreviewModal.name, PreviewModal);
-    App.component(PreviewPlain.name, PreviewPlain);
-    App.component(PreviewImage.name, PreviewImage);
-    App.component(PreviewVideo.name, PreviewVideo);
+
+    if ( ! window.PreviewMimes ) {
+        window.PreviewMimes = pi.Obj.assign(window.DefaultPreviewMimes, window.PreviewMimes);
+    }
+
+    let directives = [
+        PreviewHelper, PreviewHandler
+    ];
+
+    pi.Arr.each(directives, (glob) => {
+        App.config.globalProperties[glob.alias] = glob;
+    });
+
+    let components = [
+        Preview, PreviewModal, PreviewPlain, PreviewImage, PreviewVideo
+    ];
+
+    pi.Arr.each(components, (comp) => {
+        App.component(comp.name, comp);
+    });
+
 }
 

package/src/preview/index.scss

@@ -1,5 +1,5 @@
-@import "./src/preview/preview";
-@import "./src/preview-modal/preview-modal";
-@import "./src/preview-plain/preview-plain";
-@import "./src/preview-image/preview-image";
-@import "./src/preview-video/preview-video";
+@forward "./src/preview/preview";
+@forward "./src/preview-modal/preview-modal";
+@forward "./src/preview-plain/preview-plain";
+@forward "./src/preview-image/preview-image";
+@forward "./src/preview-video/preview-video";

package/src/preview/src/{_tools/preview-handler.js → preview/preview-handler.mjs}

@@ -1,32 +1,34 @@
 import { Any, Arr, Obj, Dom } from "@kizmann/pico-js";
 
-window.NPreviewCacheGroups = {};
+window.PreviewGroups = {};
 
-export class NPreviewHandler
+export class PreviewHandler
 {
-    current = null;
+    static alias = 'PreviewHandler';
+
+    static current = null;
 
     static append(item)
     {
-        if ( !window.NPreviewCacheGroups[item.group] ) {
-            window.NPreviewCacheGroups[item.group] = {};
+        if ( !window.PreviewGroups[item.group] ) {
+            window.PreviewGroups[item.group] = {};
         }
 
-        window.NPreviewCacheGroups[item.group][item.uid] = item;
+        window.PreviewGroups[item.group][item.uid] = item;
     }
 
     static remove(item)
     {
-        delete window.NPreviewCacheGroups[item.group][item.uid];
+        delete window.PreviewGroups[item.group][item.uid];
     }
 
     static get(group)
     {
-        if ( !window.NPreviewCacheGroups[group] ) {
-            window.NPreviewCacheGroups[group] = {};
+        if ( !window.PreviewGroups[group] ) {
+            window.PreviewGroups[group] = {};
         }
 
-        return Arr.sort(window.NPreviewCacheGroups[group], 'index');
+        return Arr.sort(window.PreviewGroups[group], 'index');
     }
 
     static next()
@@ -35,7 +37,7 @@ export class NPreviewHandler
             return null;
         }
 
-        let items = NPreviewHandler.get(this.current.group);
+        let items = this.get(this.current.group);
 
         let index = Arr.findIndex(items, {
             uid: this.current.uid
@@ -47,7 +49,7 @@ export class NPreviewHandler
             next = Arr.get(items, index + 1);
         }
 
-        return NPreviewHandler.switch(next);
+        return this.switch(next);
     }
 
     static prev()
@@ -56,7 +58,7 @@ export class NPreviewHandler
             return null;
         }
 
-        let items = NPreviewHandler.get(this.current.group);
+        let items = this.get(this.current.group);
 
         let index = Arr.findIndex(items, {
             uid: this.current.uid
@@ -68,7 +70,7 @@ export class NPreviewHandler
             prev = Arr.get(items, index - 1);
         }
 
-        return NPreviewHandler.switch(prev);
+        return this.switch(prev);
     }
 
     static create()
@@ -79,8 +81,15 @@ export class NPreviewHandler
             return el;
         }
 
+        let classList = [
+            'n-preview-modal',
+            'n-preview-modal--md',
+            'n-preview-modal--primary',
+            'n-theme--dark'
+        ];
+
         let el = Dom.make('div', {
-            classList: 'n-preview-modal'
+            classList: classList.join(' ')
         });
 
         el.attr('data-preview', 'nano');
@@ -91,7 +100,7 @@ export class NPreviewHandler
         });
 
         close.on('click', () => {
-            NPreviewHandler.close()
+            this.close()
         });
 
         close.appendTo(el);
@@ -102,7 +111,7 @@ export class NPreviewHandler
         });
 
         prev.on('click', () => {
-            NPreviewHandler.prev()
+            this.prev()
         });
 
         prev.appendTo(el);
@@ -113,7 +122,7 @@ export class NPreviewHandler
         });
 
         next.on('click', () => {
-            NPreviewHandler.next()
+            this.next()
         });
 
         next.appendTo(el);
@@ -125,24 +134,23 @@ export class NPreviewHandler
 
     static open(item)
     {
-        let el = NPreviewHandler.create();
-
-        el.css({
-            'z-index': window.zIndex++
-        });
+        let el = this.create();
 
         let keydownFn = (e) => {
 
             if ( e.keyCode === 27 ) {
-                return NPreviewHandler.close();
+                e.stopPropagation();
+                return this.close();
             }
 
             if ( e.keyCode === 37 ) {
-                return NPreviewHandler.prev();
+                e.stopPropagation();
+                return this.prev();
             }
 
             if ( e.keyCode === 39 ) {
-                return NPreviewHandler.next();
+                e.stopPropagation();
+                return this.next();
             }
 
         }
@@ -151,22 +159,26 @@ export class NPreviewHandler
             uid: 'n-preview-modal'
         });
 
-        NPreviewHandler.switch(item);
+        this.switch(item);
+
+        if ( this.get(item.group).length > 1 ) {
+            el.addClass('n-multi');
+        }
 
         el.addClass('n-ready');
     }
 
     static close()
     {
-        let el = NPreviewHandler.create();
+        let el = this.create();
 
         Dom.find(window).off('keydown', null, {
             uid: 'n-preview-modal'
         });
 
-        NPreviewHandler.switch(null);
+        this.switch(null);
 
-        el.removeClass('n-ready');
+        el.removeClass(['n-ready', 'n-multi']);
     }
 
     static switch(item)
@@ -186,8 +198,8 @@ export class NPreviewHandler
 
 }
 
-export default { NPreviewHandler }
+if ( ! window.PreviewHandler ) {
+    window.PreviewHandler = PreviewHandler;
+}
 
-if ( ! window.NPreviewHandler ) {
-    window.NPreviewHandler = NPreviewHandler;
-}
+export default PreviewHandler;

package/src/preview/src/{_tools/preview-helper.js → preview/preview-helper.mjs}

@@ -1,41 +1,25 @@
 import { Any, Arr, Dom, Obj } from "@kizmann/pico-js";
 
-window.NPreviewMimes = {
-    image: [
-        'jpg', 'jpeg', 'gif', 'svg', 'png', 'bmp'
-    ],
-    video: [
-        'mp4', 'webm', 'mov'
-    ],
-    audio: [
-        'mp3', 'aac',
-    ],
-    font: [
-        'woff', 'ttf', 'otf'
-    ],
-    text: [
-        'csv', 'txt', 'html'
-    ],
-    application: [
-        'pdf', 'doc', 'xls'
-    ]
-};
-
-export class NPreviewHelper
+export class PreviewHelper
 {
-    static getExtension(source, fallback = 'plain')
+    static alias = 'PreviewHelper';
+
+    static getExt(source, fallback = 'plain')
     {
-        let extension = source.replace(/^.*?\.([^.?]+)(\?.*?)?$/,
-            '$1');
+        let match = source.match(/\.([^.?]+)(\?.*?)?$/);
 
-        if ( Any.isEmpty(extension) ) {
+        if ( ! match ) {
             return fallback;
         }
 
-        return extension;
+        if ( Any.isEmpty(match[1]) ) {
+            return fallback;
+        }
+
+        return match[1];
     }
 
-    static getMime(source, fallback = 'text')
+    static getType(source, fallback = 'text')
     {
         let file = Obj.get(source, 'name', source);
 
@@ -43,24 +27,24 @@ export class NPreviewHelper
             return fallback;
         }
 
-        let extension = NPreviewHelper.getExtension(file);
+        let extension = PreviewHelper.getExt(file);
 
-        if ( NPreviewHelper.getYoutubeKey(file) ) {
+        if ( PreviewHelper.getYoutubeKey(file) ) {
             return 'video';
         }
 
-        if ( NPreviewHelper.getVimeoKey(file) ) {
+        if ( PreviewHelper.getVimeoKey(file) ) {
             return 'video';
         }
 
-        Obj.each(window.NPreviewMimes, (exts, key) => {
+        Obj.each(window.PreviewMimes, (exts, key) => {
             if ( Arr.has(exts, extension) ) fallback = key;
         });
 
         return fallback;
     }
 
-    static getFullMime(source, fallback = 'text/plain')
+    static getMime(source, fallback = 'text/plain')
     {
         let file = Obj.get(source, 'name', source);
 
@@ -68,15 +52,15 @@ export class NPreviewHelper
             return fallback;
         }
 
-        if ( NPreviewHelper.getYoutubeKey(source) ) {
+        if ( PreviewHelper.getYoutubeKey(source) ) {
             return 'video/youtube';
         }
 
-        if ( NPreviewHelper.getVimeoKey(source) ) {
+        if ( PreviewHelper.getVimeoKey(source) ) {
             return 'video/vimeo';
         }
 
-        return NPreviewHelper.getMime(file) + '/' + NPreviewHelper.getExtension(file);
+        return PreviewHelper.getType(file) + '/' + PreviewHelper.getExt(file);
     }
 
     static getVimeoKey(source, fallback = null)
@@ -135,8 +119,8 @@ export class NPreviewHelper
 
 }
 
-export default { NPreviewHelper }
+if ( ! window[PreviewHelper.alias] ) {
+    window[PreviewHelper.alias] = PreviewHelper;
+}
 
-if ( ! window.NPreviewHelper ) {
-    window.NPreviewHelper = NPreviewHelper;
-}
+export default PreviewHelper;