@kizmann/nano-ui 1.0.15 → 1.1.2

package/src/preview/src/preview/preview.jsx

@@ -1,22 +1,4 @@
-import { Obj, Arr, Any, Dom } from "@kizmann/pico-js";
-
-const fileMap = {
-    image: [
-        'jpg', 'jpeg', 'gif', 'svg', 'png'
-    ],
-    video: [
-        'mp4', 'webm', 'mov'
-    ],
-    font: [
-        'woff', 'ttf', 'otf'
-    ],
-    text: [
-        'csv', 'txt', 'html'
-    ],
-    application: [
-        'pdf', 'doc', 'xls'
-    ]
-}
+import { UUID, Obj, Arr, Any, Event, Locale } from "@kizmann/pico-js";
 
 export default {
 
@@ -38,6 +20,30 @@ export default {
             }
         },
 
+        title: {
+            default()
+            {
+                return null;
+            },
+            type: [String]
+        },
+
+        index: {
+            default()
+            {
+                return 0;
+            },
+            type: [Number, String]
+        },
+
+        group: {
+            default()
+            {
+                return UUID();
+            },
+            type: [String]
+        },
+
         fit: {
             default()
             {
@@ -51,7 +57,7 @@ export default {
             {
                 return null;
             },
-            typre: [String]
+            type: [String]
         },
 
         preview: {
@@ -59,7 +65,7 @@ export default {
             {
                 return true;
             },
-            typre: [Boolean]
+            type: [Boolean]
         },
 
         showSrc: {
@@ -67,15 +73,23 @@ export default {
             {
                 return true;
             },
-            typre: [Boolean]
+            type: [Boolean]
         },
 
-        map: {
+        buttonText: {
             default()
             {
-                return fileMap;
+                return Locale.trans('Download file');
             },
-            type: [Object]
+            type: [String]
+        },
+
+        renderButton: {
+            default()
+            {
+                return true;
+            },
+            type: [Boolean]
         }
 
     },
@@ -92,86 +106,38 @@ export default {
             return this.thumb || this.file;
         },
 
-        fileMime()
-        {
-            return this.getFileMime();
-        },
-
-        thumbMime()
-        {
-            return this.getThumbMime();
-        },
-
     },
 
-    data()
+    provide()
     {
-        return {
-            lightbox: false, load: false
-        };
+        return { NPreview: this };
     },
 
     methods: {
 
-        getFileMime(fallback = null)
+        openBox()
         {
-            let file = Obj.get(this.tempFile, 'name',
-                this.tempFile);
-
-            if ( Any.isEmpty(file) ) {
-                return fallback;
-            }
-
-            let extension = file.replace(/^.*?\.([^.?]+)(\?.*?)?$/,
-                '$1');
-
-            Obj.each(this.map, (exts, key) => {
-                if ( Arr.has(exts, extension) ) fallback = key;
-            });
-
-            if ( window.resolveVimeo(file) ) {
-                fallback = 'video';
-            }
-
-            if ( window.resolveYoutube(file) ) {
-                fallback = 'video';
-            }
-
-            if ( Any.isString(this.mime) ) {
-                fallback = this.mime;
-            }
-
-            return fallback;
+            this.$refs.modal.openBox();
         },
 
-        getThumbMime(fallback = null)
+        closeBox()
         {
-            if ( Any.isString(this.mime) ) {
-                return this.mime;
-            }
-
-            let file = Obj.get(this.tempThumb, 'name',
-                this.tempThumb);
-
-            if ( Any.isEmpty(file) ) {
-                return fallback;
-            }
-
-            let extension = file.replace(/^.*?\.([^.?]+)(\?.*?)?$/,
-                '$1');
-
-            Obj.each(this.map, (exts, key) => {
-                if ( Arr.has(exts, extension) ) fallback = key;
-            });
-
-            return fallback;
+            this.$refs.modal.closeBox();
         },
 
-        showLightbox()
-        {
-            this.lightbox = true;
-        },
+    },
 
+    renderTitle()
+    {
+        if ( Any.isEmpty(this.title) ) {
+            return null;
+        }
+
+        return (
+            <div class="n-preview__title">
+                <span>{this.title}</span>
+            </div>
+        );
     },
 
     renderPreview()
@@ -180,55 +146,51 @@ export default {
             return this.ctor('renderFull')();
         }
 
-        if ( this.thumbMime === 'image' ) {
+        let type = this.PreviewHelper.getType(this.tempThumb);
+
+        if ( type === 'image' ) {
             return (<NPreviewImage src={this.tempThumb} />);
         }
 
         let props = {
-            type: this.thumbMime,
-            showSrc: false,
-        }
+            showSrc: false, renderButton: false,
+        };
 
         return (<NPreviewPlain src={this.tempThumb} {...props} />);
     },
 
     renderFull()
     {
-        let isObject = Any.isObject(this.tempFile);
+        let type = this.PreviewHelper.getType(this.tempFile);
 
-        if ( this.fileMime === 'image' ) {
+        if ( type === 'image' ) {
             return (<NPreviewImage src={this.tempFile} />);
         }
 
-        if ( this.fileMime === 'video' && ! isObject ) {
+        if ( type === 'video' ) {
             return (<NPreviewVideo src={this.tempFile} />);
         }
 
         let props = {
-            type: this.thumbMime,
-            showSrc: this.showSrc,
-        }
+            showSrc: this.showSrc, buttonText: this.buttonText, renderButton: this.renderButton
+        };
 
         return (<NPreviewPlain src={this.tempFile} {...props} />);
     },
 
-    renderLightbox()
+    renderModal()
     {
-        if ( ! this.lightbox || ! this.preview ) {
+        if ( ! this.preview ) {
             return null;
         }
 
-        let slots = {
-            raw: this.ctor('renderFull')
-        }
-
-        let props = {
-            type: 'preview',
-            width: '80%',
-            height: '90%',
-        }
+        let modalProps = {
+            index: this.index, group: this.group, file: this.tempFile
+        };
 
-        return (<NModal vModel={this.lightbox} {...props} v-slots={slots} />);
+        return (
+            <NPreviewModal ref="modal" {...modalProps} />
+        );
     },
 
     render()
@@ -242,21 +204,29 @@ export default {
             classList.push('n-clickable');
         }
 
-        if ( this.fileMime ) {
-            classList.push('n-mime-' + this.fileMime);
+        let type = this.PreviewHelper.getType(this.tempFile);
+
+        if ( type ) {
+            classList.push('n-mime-' + type);
+        }
+
+        let thumb = this.PreviewHelper.getType(this.tempThumb);
+
+        if ( thumb ) {
+            classList.push('n-mime-preview-' + thumb);
         }
 
         let props = {};
 
         if ( this.preview ) {
-            props.onClick = this.showLightbox;
+            props.onClick = () => this.openBox();
         }
 
         let key = btoa(this.tempThumb);
 
         return (
             <div key={key} class={classList} {...props}>
-                { [this.ctor('renderPreview')(), this.ctor('renderLightbox')()] }
+                { [this.ctor('renderPreview')(), this.ctor('renderTitle')(), this.ctor('renderModal')()] }
             </div>
         );
     }

package/src/preview/src/preview/preview.scss

@@ -1,4 +1,4 @@
-@import "../../../root/vars";
+@use "../../../root/helpers" as *;
 
 .n-preview {
     position: relative;
@@ -11,4 +11,31 @@
 
 .n-preview--contain img {
     object-fit: contain !important;
-}
+}
+
+.n-preview__title {
+    z-index: 10;
+    pointer-events: none;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    padding: size('default-md-pad', 'calc($ * 0.5)') size('default-md-pad');
+}
+
+.n-preview__title span {
+    overflow: hidden;
+    display: block;
+    text-align: center;
+    width: 100%;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: size('base-fnt');
+    color: color('white', 0.7);
+}
+
+.n-preview.n-mime-preview-image .n-preview__title span {
+    color: color('white');
+    text-shadow: 0 0 6px color('shadow', 0.7);
+}
+

package/src/preview/src/preview-image/preview-image.scss

@@ -1,9 +1,8 @@
-@import "../../../root/vars";
+@use "../../../root/helpers" as *;
 
 .n-preview-image {
     position: relative;
     width: 100%;
-    background: rgba($color-gray-50, 0.1);
 }
 
 .n-modal__frame > .n-preview-image {
@@ -34,7 +33,6 @@
     height: 20px;
     margin: -10px 0 0 -10px;
     border-radius: 500px;
-    border: 2px solid rgba($color-gray-50, 0.2);
     border-top-color: transparent;
     animation: NImage 1s linear infinite;
 }

package/src/preview/src/preview-modal/preview-modal.jsx

@@ -0,0 +1,126 @@
+import { Any, Event, Obj, UUID } from "@kizmann/pico-js";
+
+export default {
+
+    name: 'NPreviewModal',
+
+    inject: {
+
+        NPreview: {
+            default: undefined
+        }
+
+    },
+
+    props: {
+
+        file: {
+            default()
+            {
+                return null;
+            }
+        },
+
+        index: {
+            default()
+            {
+                return 0;
+            },
+            type: [Number, String]
+        },
+
+        group: {
+            default()
+            {
+                return UUID();
+            },
+            type: [String]
+        },
+
+    },
+
+    data()
+    {
+        return { uid: UUID(), visible: false };
+    },
+
+    computed: {
+
+        tempFile() {
+            return Obj.get(this.file, 'name', this.file);
+        }
+
+    },
+
+    watch: {
+
+        visible: function (value) {
+            if ( value ) {
+                this.NPreview.$emit('slide');
+            }
+        }
+
+    },
+
+    mounted()
+    {
+        this.PreviewHandler.create()
+            .append(this.$el);
+
+        this.PreviewHandler.append(this);
+    },
+
+    beforeUnmount()
+    {
+        this.$el.remove();
+
+        this.PreviewHandler.remove(this);
+    },
+
+    methods: {
+
+        openBox()
+        {
+            this.PreviewHandler.open(this);
+        },
+
+        closeBox()
+        {
+            this.PreviewHandler.close();
+        }
+
+    },
+
+    renderFull()
+    {
+        let classList = [
+            'n-preview-frame'
+        ];
+
+        let mime = this.PreviewHelper.getType(this.tempFile);
+
+        if ( mime === 'image' ) {
+            return (<NPreviewImage class={classList} src={this.file} />);
+        }
+
+        if ( mime === 'video' ) {
+            return (<NPreviewVideo class={classList} src={this.file} />);
+        }
+
+        let props = {
+            showSrc: this.NPreview ? this.NPreview.showSrc : false,
+        };
+
+        return (<NPreviewPlain class={classList} src={this.file} {...props} />);
+    },
+
+    render()
+    {
+        if ( ! this.visible ) {
+            return null;
+        }
+
+        return this.ctor('renderFull')();
+    },
+
+}

package/src/preview/src/preview-modal/preview-modal.scss

@@ -0,0 +1,69 @@
+@use "../../../root/helpers" as *;
+
+.n-preview-modal {
+    z-index: 999999997;
+    overflow: hidden;
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    display: flex;
+    padding: size('base-hgt') size('base-hgt', 'calc($ * 2.4)');
+}
+
+.n-preview-modal i {
+    font-size: 1.2em;
+}
+
+.n-preview-modal:not(.n-ready) {
+    pointer-events: none;
+    opacity: 0;
+}
+
+.n-preview-modal__close,
+.n-preview-modal__prev,
+.n-preview-modal__next {
+    width: size('base-hgt', 'calc($ * 1.2)');
+    height: size('base-hgt', 'calc($ * 1.2)');
+}
+
+.n-preview-modal__close {
+    cursor: pointer;
+    z-index: 100;
+    position: absolute;
+    top: size('base-hgt', 'calc($ * 0.5)');
+    right: size('base-hgt', 'calc($ * 0.5)');
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.n-preview-modal .n-preview-frame {
+    background: transparent !important;
+}
+
+.n-preview-modal__prev,
+.n-preview-modal__next {
+    cursor: pointer;
+    z-index: 500;
+    position: absolute;
+    top: 50%;
+    display: none;
+    align-items: center;
+    justify-content: center;
+    transform: translateY(-50%);
+}
+
+.n-preview-modal.n-multi .n-preview-modal__prev,
+.n-preview-modal.n-multi .n-preview-modal__next {
+    display: flex;
+}
+
+.n-preview-modal__prev {
+    left: size('base-hgt', 'calc($ * 0.5)');
+}
+
+.n-preview-modal__next {
+    right: size('base-hgt', 'calc($ * 0.5)');
+}

package/src/preview/src/preview-plain/preview-plain.jsx

@@ -13,38 +13,36 @@ export default {
             }
         },
 
-        type: {
+        showSrc: {
             default()
             {
-                return null;
-            }
+                return true;
+            },
+            type:  [Boolean]
         },
 
-        showSrc: {
+        buttonText: {
+            default()
+            {
+                return Locale.trans('Download file');
+            },
+            type: [String]
+        },
+
+        renderButton: {
             default()
             {
                 return true;
-            }
+            },
+            type:  [Boolean]
         }
 
     },
 
     computed: {
 
-        tempSrc()
-        {
+        file() {
             return Obj.get(this.src, 'name', this.src);
-        },
-
-        tempExt()
-        {
-            let regex = /^.*?\.([^.?]+)(\?.*?)?$/;
-
-            if ( Any.isEmpty(this.tempSrc) ) {
-                return null;
-            }
-
-            return this.tempSrc.replace(regex, '$1');
         }
 
     },
@@ -58,11 +56,25 @@ export default {
         let slots = [];
 
         slots[0] = (
-            <li>{ this.type || Locale.trans('plain') }/{ this.tempExt || Locale.trans('none') }</li>
+            <li>{ this.PreviewHelper.getMime(this.file) }</li>
         );
 
         if ( this.showSrc ) {
-            slots[1] = (<li>{ this.tempSrc }</li>);
+            slots.push(<li class="np-file">{ this.file }</li>);
+        }
+
+        let buttonProps = {
+            nativeType: 'a', href: this.file, target: '_blank'
+        };
+
+        let buttonHtml = (
+            <li class="np-button">
+                <NButton {...buttonProps}>{ this.buttonText }</NButton>
+            </li>
+        );
+
+        if ( this.renderButton ) {
+            slots.push(buttonHtml);
         }
 
         return (

package/src/preview/src/preview-plain/preview-plain.scss

@@ -1,9 +1,8 @@
-@import "../../../root/vars";
+@use "../../../root/helpers" as *;
 
 .n-preview-plain {
     position: relative;
     width: 100%;
-    background: rgba($color-gray-50, 0.1);
 }
 
 .n-modal__frame > .n-preview-plain {
@@ -38,5 +37,8 @@
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    color: rgba($color-gray-50, 0.6);
+}
+
+.n-preview-plain .np-button {
+    margin-top: size('base-pad');
 }