@kizmann/nano-ui 1.0.15 → 1.1.2

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

@@ -1,59 +1,5 @@
 import { Obj, Arr, Str, Any, Dom } from "@kizmann/pico-js";
 
-window.resolveYoutube = function(url, fallback = null) {
-
-    if ( ! Any.isString(url) ) {
-        return fallback;
-    }
-
-    let host = url.match(/^https?:\/\/(www\.)?(youtube\.com|youtu\.be)/);
-
-    if ( ! host ) {
-        return fallback;
-    }
-
-    let id = url.match(/(\?v=.*?)(?=&|$)/);
-
-    if ( id && id.length === 2 ) {
-        return id[0].replace(/^\?v=/, '');
-    }
-
-    let path = url.match(/(\.be\/.*?)(?=\?|$)/);
-
-    if ( path && path.length === 2 ) {
-        return path[0].replace(/^\.be\//, '');
-    }
-
-    let frame = url.match(/(\/embed\/)(.*?$)/);
-
-    if ( frame && frame.length === 3 ) {
-        return frame[0].replace(/^\/embed\//, '');
-    }
-
-    return fallback;
-}
-
-window.resolveVimeo = function(url, fallback = null) {
-
-    if ( ! Any.isString(url) ) {
-        return fallback;
-    }
-
-    let host = url.match(/^https?:\/\/(www\.|player\.)?vimeo\.com/);
-
-    if ( ! host ) {
-        return fallback;
-    }
-
-    let path = url.match(/(\/[0-9]+)(&|$)/);
-
-    if ( path && path.length === 3 ) {
-        return path[0].replace(/(^\/|&$)/, '');
-    }
-
-    return fallback;
-}
-
 export default {
 
     name: 'NPreviewVideo',
@@ -117,7 +63,7 @@ export default {
 
         resolveYoutube()
         {
-            let youtube = window.resolveYoutube(this.src);
+            let youtube = this.PreviewHelper.getYoutubeKey(this.src);
 
             if ( ! youtube ) {
                 return false;
@@ -132,7 +78,7 @@ export default {
 
         resolveVimeo()
         {
-            let vimeo = window.resolveVimeo(this.src);
+            let vimeo = this.PreviewHelper.getVimeoKey(this.src);
 
             if ( ! vimeo ) {
                 return false;
@@ -173,12 +119,9 @@ export default {
     {
         let src = Obj.get(this.src, 'name', this.src);
 
-        let extension = src.replace(/^.*?\.([^.?]+)(\?.*?)?$/,
-            '$1');
-
         return (
             <video width="320" height="240" controls>
-                <source src={this.tempSrc || this.src} type={`video/${extension}`} />
+                <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)');
 }

package/src/radio/src/radio-group/radio-group.scss

@@ -1,5 +1,4 @@
-@use 'sass:map';
-@import "../../../root/vars";
+@use "../../../root/helpers" as *;
 
 .n-radio-group {
     display: flex;
@@ -21,35 +20,26 @@
     align-items: flex-start;
 }
 
-@each $suffix, $values in $form {
-
-    $-radio-group-font: map.get($values, 'font');
-    $-radio-group-size: map.get($values, 'size');
-    $-radio-group-radius: map.get($values, 'radius');
-    $-radio-group-ratio: map.get($values, 'ratio');
-
-    .n-radio-group--#{$suffix}.n-radio-group--horizontal .n-radio {
-        $min-height: 0;
-    }
-
-    .n-radio-group--#{$suffix}.n-radio-group--horizontal .n-radio:not(:first-child) {
-        margin-left: $-radio-group-size * $-radio-group-ratio;
-    }
+.n-radio-group.n-radio-group--horizontal .n-radio {
+    min-height: 0;
+}
 
-    .n-radio-group--#{$suffix}.n-radio-group--horizontal .n-radio:last-child {
-        padding-right: 0;
-    }
+.n-radio-group.n-radio-group--horizontal .n-radio:not(:first-child) {
+    margin-left: size('base-pad', 'calc($ * 1.2)');
+}
 
-    .n-radio-group--#{$suffix}.n-radio-group--vertical .n-radio {
-        min-height: 0;
-    }
+.n-radio-group.n-radio-group--horizontal .n-radio:last-child {
+    padding-right: 0;
+}
 
-    .n-radio-group--#{$suffix}.n-radio-group--vertical .n-radio:not(:first-child) {
-        margin-top: $-radio-group-size * $-radio-group-ratio * 0.5;
-    }
+.n-radio-group.n-radio-group--vertical .n-radio {
+    min-height: 0;
+}
 
-    .n-radio-group--#{$suffix}.n-radio-group--vertical .n-radio:last-child {
-        padding-bottom: 0;
-    }
+.n-radio-group.n-radio-group--vertical .n-radio:not(:first-child) {
+    margin-top: size('base-pad-vertical', 'calc($ * 0.7)');
+}
 
+.n-radio-group.n-radio-group--vertical .n-radio:last-child {
+    padding-bottom: 0;
 }

package/src/rating/index.scss

@@ -1 +1 @@
-@import "./src/rating/rating";
+@forward "./src/rating/rating";

package/src/rating/src/rating/rating.scss

@@ -1,5 +1,4 @@
-@use 'sass:map';
-@import "../../../root/vars";
+@use "../../../root/helpers" as *;
 
 .n-rating {
     overflow: hidden;
@@ -8,6 +7,7 @@
     flex-direction: row;
     align-items: center;
     justify-content: flex-start;
+    font-size: size('base-font');
 }
 
 .n-rating__stars {
@@ -22,6 +22,12 @@
     flex: 0 0 auto;
     position: relative;
     display: block;
+    width: size('base-hgt', 'calc($ * 0.45)');
+    height: size('base-hgt', 'calc($ * 0.45)');
+}
+
+.n-rating__stars span:not(:last-child) {
+    margin-right: size('base-pad', 'calc($ * 0.3)');
 }
 
 .n-rating__stars span:before,
@@ -65,35 +71,11 @@
     text-overflow: ellipsis;
 }
 
-@each $suffix, $values in $form {
-
-    $-rating-font: map.get($values, 'font');
-    $-rating-size: map.get($values, 'size');
-    $-rating-radius: map.get($values, 'radius');
-    $-rating-ratio: map.get($values, 'ratio');
-
-    $-rating-star: $-rating-size * $-rating-ratio * 1.2;
-
-    .n-rating--#{$suffix} {
-        font-size: $-rating-font;
-    }
-
-    .n-rating--#{$suffix} .n-rating__stars span {
-        width: $-rating-star;
-        height: $-rating-star;
-    }
-
-    .n-rating--#{$suffix} .n-rating__stars span:not(:last-child) {
-        margin-right: $-rating-star / 4;
-    }
-
-    .n-rating--#{$suffix} .n-rating__stars span:before,
-    .n-rating--#{$suffix} .n-rating__stars span:after {
-        background-size: $-rating-star $-rating-star;
-    }
-
-    .n-rating--#{$suffix} .n-rating__value {
-        margin-left: $-rating-star;
-    }
-
+.n-rating .n-rating__value {
+    margin-left: size('base-pad');
 }
+
+.n-rating .n-rating__value {
+    font-size: size('base-fnt');
+    margin-left: size('base-pad');
+}

package/src/resizer/index.js

@@ -1,5 +1,7 @@
 import Resizer from "./src/resizer/resizer.jsx";
+import ResizerNext from "./src/resizer/resizer-next.jsx";
 
 export default function (App) {
-    App.component(Resizer.name, Resizer);
+    // App.component(Resizer.name, Resizer);
+    App.component(ResizerNext.name, ResizerNext);
 }

package/src/resizer/index.scss

@@ -1 +1 @@
-@import "./src/resizer/resizer";
+@forward "./src/resizer/resizer";