@kizmann/nano-ui 1.1.0 → 1.1.2

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

@@ -1,6 +1,4 @@
-import { UUID, Obj, Arr, Any, Event } from "@kizmann/pico-js";
-import { NPreviewHandler } from "../_tools/preview-handler.js"
-import { NPreviewHelper } from "../_tools/preview-helper.js"
+import { UUID, Obj, Arr, Any, Event, Locale } from "@kizmann/pico-js";
 
 export default {
 
@@ -22,6 +20,14 @@ export default {
             }
         },
 
+        title: {
+            default()
+            {
+                return null;
+            },
+            type: [String]
+        },
+
         index: {
             default()
             {
@@ -68,6 +74,22 @@ export default {
                 return true;
             },
             type: [Boolean]
+        },
+
+        buttonText: {
+            default()
+            {
+                return Locale.trans('Download file');
+            },
+            type: [String]
+        },
+
+        renderButton: {
+            default()
+            {
+                return true;
+            },
+            type: [Boolean]
         }
 
     },
@@ -84,16 +106,6 @@ export default {
             return this.thumb || this.file;
         },
 
-        fileMime()
-        {
-            return this.mime || NPreviewHelper.getMime(this.tempFile);
-        },
-
-        thumbMime()
-        {
-            return this.mime || NPreviewHelper.getMime(this.tempThumb);
-        },
-
     },
 
     provide()
@@ -115,18 +127,33 @@ export default {
 
     },
 
+    renderTitle()
+    {
+        if ( Any.isEmpty(this.title) ) {
+            return null;
+        }
+
+        return (
+            <div class="n-preview__title">
+                <span>{this.title}</span>
+            </div>
+        );
+    },
+
     renderPreview()
     {
         if ( ! this.preview ) {
             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.fileMime, showSrc: false,
+            showSrc: false, renderButton: false,
         };
 
         return (<NPreviewPlain src={this.tempThumb} {...props} />);
@@ -134,19 +161,21 @@ export default {
 
     renderFull()
     {
-        if ( this.fileMime === 'image' ) {
-            return (<NPreviewImage class={classList} src={this.tempFile} />);
+        let type = this.PreviewHelper.getType(this.tempFile);
+
+        if ( type === 'image' ) {
+            return (<NPreviewImage src={this.tempFile} />);
         }
 
-        if ( this.fileMime === 'video' ) {
-            return (<NPreviewVideo class={classList} src={this.tempFile} />);
+        if ( type === 'video' ) {
+            return (<NPreviewVideo src={this.tempFile} />);
         }
 
         let props = {
-            type: this.fileMime, showSrc: this.showSrc,
+            showSrc: this.showSrc, buttonText: this.buttonText, renderButton: this.renderButton
         };
 
-        return (<NPreviewPlain class={classList} src={this.tempFile} {...props} />);
+        return (<NPreviewPlain src={this.tempFile} {...props} />);
     },
 
     renderModal()
@@ -156,7 +185,7 @@ export default {
         }
 
         let modalProps = {
-            index: this.index, group: this.group, file: this.tempFile, showSrc: this.showSrc
+            index: this.index, group: this.group, file: this.tempFile
         };
 
         return (
@@ -175,8 +204,16 @@ 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 = {};
@@ -189,7 +226,7 @@ export default {
 
         return (
             <div key={key} class={classList} {...props}>
-                { [this.ctor('renderPreview')(), this.ctor('renderModal')()] }
+                { [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;
@@ -13,3 +13,29 @@
     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

@@ -1,6 +1,4 @@
-import { Any, Event, UUID } from "@kizmann/pico-js";
-import { NPreviewHandler } from "../_tools/preview-handler.js";
-import { NPreviewHelper } from "../_tools/preview-helper.js";
+import { Any, Event, Obj, UUID } from "@kizmann/pico-js";
 
 export default {
 
@@ -46,6 +44,14 @@ export default {
         return { uid: UUID(), visible: false };
     },
 
+    computed: {
+
+        tempFile() {
+            return Obj.get(this.file, 'name', this.file);
+        }
+
+    },
+
     watch: {
 
         visible: function (value) {
@@ -58,76 +64,40 @@ export default {
 
     mounted()
     {
-        NPreviewHandler.create()
+        this.PreviewHandler.create()
             .append(this.$el);
 
-        NPreviewHandler.append(this);
+        this.PreviewHandler.append(this);
     },
 
     beforeUnmount()
     {
         this.$el.remove();
 
-        NPreviewHandler.remove(this);
+        this.PreviewHandler.remove(this);
     },
 
     methods: {
 
         openBox()
         {
-            NPreviewHandler.open(this);
+            this.PreviewHandler.open(this);
         },
 
         closeBox()
         {
-            NPreviewHandler.close();
+            this.PreviewHandler.close();
         }
 
     },
 
-    renderPrev()
-    {
-        let prevProps = {
-            size: 'lg', square: true, icon: 'fa fa-angle-left'
-        };
-
-        prevProps['onClick'] = () => {
-            this.gotoPrev();
-        };
-
-        return (
-            <div class="n-preview__prev">
-                <NButton {...prevProps} />
-            </div>
-        );
-    },
-
-    renderNext()
-    {
-        let nextProps = {
-            size: 'lg', square: true, icon: 'fa fa-angle-right'
-        };
-
-        nextProps['onClick'] = () => {
-            this.gotoNext();
-        };
-
-        return (
-            <div class="n-preview__next">
-                <NButton {...nextProps} />
-            </div>
-        );
-    },
-
-
-
-    renderImage()
+    renderFull()
     {
         let classList = [
             'n-preview-frame'
         ];
 
-        let mime = NPreviewHelper.getMime(this.file);
+        let mime = this.PreviewHelper.getType(this.tempFile);
 
         if ( mime === 'image' ) {
             return (<NPreviewImage class={classList} src={this.file} />);
@@ -138,7 +108,7 @@ export default {
         }
 
         let props = {
-            type: mime, showSrc: this.showSrc,
+            showSrc: this.NPreview ? this.NPreview.showSrc : false,
         };
 
         return (<NPreviewPlain class={classList} src={this.file} {...props} />);
@@ -150,7 +120,7 @@ export default {
             return null;
         }
 
-        return this.ctor('renderImage')();
+        return this.ctor('renderFull')();
     },
 
 }

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

@@ -1,6 +1,7 @@
-@import "../../../root/vars";
+@use "../../../root/helpers" as *;
 
 .n-preview-modal {
+    z-index: 999999997;
     overflow: hidden;
     position: fixed;
     top: 0;
@@ -8,7 +9,11 @@
     bottom: 0;
     left: 0;
     display: flex;
-    padding: 40px 80px;
+    padding: size('base-hgt') size('base-hgt', 'calc($ * 2.4)');
+}
+
+.n-preview-modal i {
+    font-size: 1.2em;
 }
 
 .n-preview-modal:not(.n-ready) {
@@ -16,17 +21,22 @@
     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: 20px;
-    right: 20px;
+    top: size('base-hgt', 'calc($ * 0.5)');
+    right: size('base-hgt', 'calc($ * 0.5)');
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 40px;
-    height: 40px;
 }
 
 .n-preview-modal .n-preview-frame {
@@ -39,18 +49,21 @@
     z-index: 500;
     position: absolute;
     top: 50%;
-    display: flex;
+    display: none;
     align-items: center;
     justify-content: center;
-    width: 40px;
-    height: 40px;
     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: 20px;
+    left: size('base-hgt', 'calc($ * 0.5)');
 }
 
 .n-preview-modal__next {
-    right: 20px;
+    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');
 }

package/src/preview/src/preview-video/preview-video.jsx

@@ -1,5 +1,4 @@
 import { Obj, Arr, Str, Any, Dom } from "@kizmann/pico-js";
-import { NPreviewHelper } from "../_tools/preview-helper.js"
 
 export default {
 
@@ -64,7 +63,7 @@ export default {
 
         resolveYoutube()
         {
-            let youtube = NPreviewHelper.getYoutubeKey(this.src);
+            let youtube = this.PreviewHelper.getYoutubeKey(this.src);
 
             if ( ! youtube ) {
                 return false;
@@ -79,7 +78,7 @@ export default {
 
         resolveVimeo()
         {
-            let vimeo = NPreviewHelper.getVimeoKey(this.src);
+            let vimeo = this.PreviewHelper.getVimeoKey(this.src);
 
             if ( ! vimeo ) {
                 return false;
@@ -122,7 +121,7 @@ export default {
 
         return (
             <video width="320" height="240" controls>
-                <source src={this.tempSrc || this.src} type={NPreviewHelper.getFullMime(src)} />
+                <source src={this.tempSrc || this.src} type={this.PreviewHelper.getMime(src)} />
             </video>
         );
     },

package/src/preview/src/preview-video/preview-video.scss

@@ -1,9 +1,8 @@
-@import "../../../root/vars";
+@use "../../../root/helpers" as *;
 
 .n-preview-video {
     position: relative;
     width: 100%;
-    background: rgba($color-gray-50, 0.1);
 }
 
 .n-modal__frame > .n-preview-video {

package/src/radio/index.scss

@@ -1,2 +1,2 @@
-@import "./src/radio/radio";
-@import "./src/radio-group/radio-group";
+@forward "./src/radio/radio";
+@forward "./src/radio-group/radio-group";

package/src/radio/src/radio/radio.scss

@@ -1,5 +1,4 @@
-@use 'sass:map';
-@import "../../../root/vars";
+@use "../../../root/helpers" as *;
 
 .n-radio {
     cursor: default;
@@ -7,6 +6,8 @@
     display: inline-flex;
     align-items: center;
     justify-content: stretch;
+    min-height: size('base-hgt');
+    font-size: size('base-fnt');
 }
 
 .n-radio.n-disabled {
@@ -25,44 +26,24 @@
 }
 
 .n-radio__radio span {
-    position: absolute;
-    top: 50%;
-    left: 50%;
     opacity: 0;
     border-radius: 500px;
-    transform: translate(-50%, -50%);
 }
 
 .n-radio.n-checked .n-radio__radio span {
     opacity: 1;
 }
 
-@each $suffix, $values in $form {
-
-    $-radio-font: map.get($values, 'font');
-    $-radio-size: map.get($values, 'size');
-    $-radio-radius: map.get($values, 'radius');
-    $-radio-ratio: map.get($values, 'ratio');
-
-    .n-radio--#{$suffix} {
-        min-height: $-radio-size;
-        font-size: $-radio-font;
-    }
-
-    .n-radio--#{$suffix} .n-radio__radio {
-        width: $-radio-size - 16;
-        height: $-radio-size - 16;
-    }
-
-    .n-radio--#{$suffix} .n-radio__radio span {
-        width: $-radio-size - 26;
-        height: $-radio-size - 26;
-    }
-
-    $-radio-padding: $-radio-size * $-radio-ratio;
+.n-radio .n-radio__radio {
+    width: size('base-hgt-inline');
+    height: size('base-hgt-inline');
+}
 
-    .n-radio--#{$suffix} .n-radio__label {
-        padding: 0 0 0 $-radio-padding * 0.5;
-    }
+.n-radio .n-radio__radio span {
+    width: size('base-hgt-inline', 'calc($ - 10px)');
+    height: size('base-hgt-inline', 'calc($ - 10px)');
+}
 
+.n-radio .n-radio__label {
+    padding-left: size('base-pad', 'calc($ * 0.8)');
 }