fmihel-windeco-components 2.0.0-beta.6 → 2.0.0-beta.61

package/style/theme-default.scss

@@ -0,0 +1,191 @@
+@use "sass:map";
+@use 'sass:meta';
+@use "sass:color";
+@use "sass:list";
+@use './define/defineThemeVars.scss';
+
+
+
+$defaults:(
+    'primary':#0D6EFD,
+    'secondary':#868e94,
+    'success':#008b14,
+    'danger':#C32F3D,
+    'warning':#FF8A00,
+    'info':#2C7BE5,
+    'light':#EDF2F9,
+    'dark':#0B1727,
+
+    'red':#ff0000,
+    'green':#008b14,
+    'blue':#0D6EFD,
+    'white':#FFFFFF,
+    'black':#000000,
+    'gray':#808080,
+    'orange':#FF8A00,
+
+    'bg':#F5F7FA,
+    'color':#5E6E82,
+    'color-high':#282f38,
+    'color-down':#e8edf3,
+
+    'size':32px,
+    'gap':5px,
+    'margin':2px,
+    'padding':2px,
+    'radius':0.25rem,
+    'font-size':14px,
+    'font-family':font-family('verdana'),
+    'outline-width':2px,
+
+    'hovering':0.95,
+
+    'highlight':#2C7BE5,
+    'high':#fdfdfd,
+    'label':#5E6E82,
+    'border':#CBD0DD,
+    'outline':#CADEF8,
+    'hover':#d9e0eb,
+    'hover-color':#73777e,
+    'select':#2C7BE5,
+    'select-color':#FFFFFF,
+    'header':#dee5ef,
+    'deep':#FFFFFF,
+    'transparent':rgba(0, 0, 0, 0),
+    //'block':#F5F7FA,
+    'block':#FDFDFD,
+
+    'alert':#ff0000,
+    'url':#2C7BE5,
+    
+    'toggle':#e9edf1,    
+    'group':#F5F7FA,
+
+    'colors-to-rgb':(
+        'primary',
+        'secondary',
+        'success',
+        'danger',
+        'warning',
+        'info',
+        'light',
+        'dark',
+    
+        'red',
+        'green',
+        'blue',
+        'white',
+        'black',
+        'gray',
+        'orange',
+        'color',
+        'bg',
+        'border'
+    )
+);
+
+$wd-default-theme:'light';
+$global-themes-vars:();
+
+
+@mixin defineThemeVars($maps:(),$theme:$wd-default-theme){
+    $themeVars:();
+    //@debug $theme , $wd-default-theme;
+    @each $varName,$defaultValue in $defaults{
+    
+        @if ($varName != 'colors-to-rgb'){
+            $value:if(map.has-key($map: $maps, $key: $varName),#{map.get($map: $maps, $key:$varName )},#{$defaultValue});
+        
+            @if($theme == $wd-default-theme or #{$value} != #{$defaultValue}){
+                //@debug $varName, $value, $defaultValue, $theme == $wd-default-theme ,'or', $value != $defaultValue;
+                --v2-wd-#{$varName}:#{$value};
+            }
+            $themeVars:map.merge($themeVars,(#{$varName}:$value));
+        };
+    };
+
+ 
+
+    $colors:();
+    // @if (map-has-key($map: $defaults, $key:'colors-to-rgb' )){
+    @if (map.has-key($map: $defaults, $key:'colors-to-rgb' )){
+        $colors:list.join($colors,map.get($map:$defaults,$key:'colors-to-rgb'));
+    }
+
+    @if (map.has-key($map: $maps, $key:'colors-to-rgb' )){
+        $colors:list.join($colors,map-get($map:$maps,$key:'colors-to-rgb'));
+    }
+
+    //@debug $colors;
+
+    @each $varName in $colors{
+        $acolor:map.get($map:$defaults, $key:$varName );
+        @if (map.has-key($map:$maps,$key:$varName)){
+            $acolor:map.get($map:$maps, $key:$varName );
+        }
+        
+        
+        $r:color.channel($acolor, "red", $space: rgb);
+        $g:color.channel($acolor, "green", $space: rgb);
+        $b:color.channel($acolor, "blue", $space: rgb);
+        // $r:color.red($acolor);
+        // $g:color.green($acolor);
+        // $b:color.blue($acolor);
+        //--wd-#{$key}:#{meta.inspect($acolor)};
+        --v2-wd-#{$varName}-rgb:#{meta.inspect($r)},#{meta.inspect($g)},#{meta.inspect($b)} ;
+    }
+
+    $global-themes-vars:map.merge($global-themes-vars,(#{$theme}:$themeVars)) !global;
+}
+
+
+// define default theme 
+:root { 
+    @include defineThemeVars();
+    
+    --v2-wd-tick:url(#{'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAATklEQVR4nO3OMQoAIAwEwXtn/uV7tVFIocRCI8JOHbInAQDwkSrJNu6s3x41nkYjdu+ujLgajyIp8VUsNT4bkR4fiouX7Lgf8SwOADiiAWpFIUWn1ypTAAAAAElFTkSuQmCC'});
+    --v2-wd-cross:url(#{'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR0IArs4c6QAAAx1JREFUaEPtmctqFUEQhk8UQXQrBNyoSNDHSOIyCzXeYjAG4y0ggs/hQgkR7xBwkbhQokZ0Iah5Cm8bXai4NLt4Af9fpg+dTt+qpjsQcaBIONNd9X9T1T01Mz2ddX70rHP9nX8eYC8y9ADWCzsLe7RGGRtHnKuwN7AjsC+huLEM7MGkl7DtzeTf+DsGm6sMMQH/d2Abmjgf8HcA9tkXNwTgijdza0OcRqDblngTNwjhAwiJrw0REh+FcAFS4mtBpMQHIVyA9xjZl1njPzHuOOxh5vjQsHM4cROWuyMuYmy/cWZP2ogfv8O2CgS1hZCKp7SPsF0+AP52EjbjWUQxJi2ERjxjHYIthAD4+ynYXSGEdHc6A/+3hDEo/hhs3r6aobqrCVFMPEFiC6cGhFb8UWj1dgGplV8Sorj4VAZMqZWAqCI+F4Dj3P4kZ6flwr4P2wI7kChX19+PZsEmm8dUCdmONZnIAXXHcLcJ1rw7WAKg3WIlECLxkhJai0yIxWsBamQiu+bbllCNTKjFt8mAAeHuxLZDupbMfJYNHxkfSxaKPVYb2PbBrW6/UgD7oUnl3L/TSgA8hZ8hpQhmjy8L1EdbgAuIfE0dvdP5hbkjMPVDURsATT/vY5W24it8aAFKiTdi1BAagNLiW0FIAWqJV0NIAM4jyo1CO1ds3YvKKRfgIiJOCcXzJnUPxnaaz7LmVWHOpsW5ozC+l40eOQCaK8/2gHfYJ010TSvOTPAtyWyMIAVQQryJXwUiBsBb/HVh2bhX3r14xSFCAJcQ+Uph8VUy4QPQij8Mhd03Zom1VywTLgB7m2nhlV/G+GHYs9SO4ZzXvChg78TNofuwbwNswokl2GaBEIo/CHsumGMP1UB8goOdxombAX6T4nexnKOteBNDCsHPXvtCACR7ZRMGSLjbSGo+dUFy18Q7OBqEdT/6+RZxCqK0eAOXglglnhND2+gOnHvtyUQt8SkIih+AfXVTGbuRuRC1xYcg3jZls0p8LAPG2W78w15kG4x35hepYi50/gT8XIZxU2FT9y3kN9ULFdJTz81/gHrXNs/zH1jFyDG0YnaaAAAAAElFTkSuQmCC'});
+    --v2-wd-cross-hover:url(#{'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAB40lEQVR4nO2ZsU7DMBCGPxATK0gIBpBYkGBn6gJCAjGx0gfsgBBLFzaEVNE3AHVApCy8BgN2ZdI4se/slND+m93m7v+U2D7bsNJKKq3V/XjcmwCcAjvA8HV01IYnm/cGeAMmdXm9ACbIJbDldA9yQ5i8fafrExj58lYCeMxbZYOoMG/lhZgDaDBvlRyixrxVJcQvgEDzVskgAsxbzUGsl/7QI8w8QN8kVinCPMA+cOh2zABMoL3I/CqISPNWB25jBmBey53AhwhCaB7gyW34BrEkcPCYSJmjbhrNApE6dtNClhQiR8yQUiJJwlxvtRYgVeKcn2QjgNLAPbAJXAueDZoUggBABSFR8IwWDACtQUSVKFEAkB0iur6KBoBsEKLiUAQAySHEla0YAJJBqMrycjkdJZP4URFCvadQARhtJIghlgrAfEIXihDqTdFyDuJOT6OdXsg6XUr81WIuaBbS1PPAg+C54Nnpf29oOr2l7PSmvtPHKp0+2GrDfOpc5cPdW23AUJlnBoJ8526jfLhbRAZT1fNCiHe3UV7IxsBXYKAkFxyREAUwdTt8g/gM2K0JtIgrpgJ4iTmd9kEs4pKvoMI8NC9kZYhFXLN+AGPN6fQJsA08t3zRfcXPRfe0rbwrLaW+Ab09DMLFyhacAAAAAElFTkSuQmCC'});
+    
+    
+    &.mobile{
+        --v2-wd-size:8.5vmin;
+        --v2-wd-font-size:4vmin;
+        --v2-wd-gap:1vmin;
+        --v2-wd-margin:calc(1vmin*0.5);
+        --v2-wd-padding:calc(1vmin*0.5);
+    }
+
+}
+
+$wd-bootstrap-maps:(
+    'primary',
+    'danger',
+    'secondary',
+    'success',
+    'warning',
+    'info',
+    'light',
+    'dark',
+);
+
+@each $key in $wd-bootstrap-maps{
+    .wd-#{$key}{
+        background-color: var(--v2-wd-#{$key});
+        @if (#{$key} !='light'){
+            color: var(--v2-wd-color-down);
+        }
+        &.wd-flat{
+            background-color:rgba(0,0,0,0);
+            //border: 1px solid  var(--v2-wd-#{$key}) !important;
+            color: var(--v2-wd-#{$key});
+        }
+        &.only-text{
+            color: var(--v2-wd-#{$key});
+        }
+    }
+    .wd-#{$key}-color{
+        color: var(--v2-wd-#{$key});
+    }
+    
+}

package/style/utils/font-family.scss

@@ -0,0 +1,37 @@
+@use 'sass:map';
+
+$wd-fonts-family:(
+    'arial':'Arial, sans-serif',
+    'arial-black':'Arial Black, sans-serif',
+    'comic':'Comic Sans MS, cursive',
+    'courier':'Courier New, monospace',
+    'franklin':'Franklin Gothic Medium, sans-serif',
+    'gothic':'Franklin Gothic Medium, sans-serif',
+    'georgia':'Georgia, serif',
+    'impact':'Impact, sans-serif',
+    'lucida':'Lucida Console, monospace',
+    'console':'Lucida Console, monospace',
+    'ms':'Microsoft Sans Serif, sans-serif',
+    'palatino':'Palatino Linotype, serif',
+    'sylfaen':'Sylfaen, serif',
+    'tahoma':'Tahoma, sans-serif',
+    'times':'Times New Roman, serif',
+    'trebuchet':'Trebuchet MS, sans-serif',
+    'verdana':'Verdana, sans-serif',
+    'roboto':'Roboto, sans-serif'
+);
+
+//@include font-family('arial');
+@function font-family($name:'roboto'){
+
+    @if map.has_key($wd-fonts-family,$name) {
+        @return #{map.get($wd-fonts-family, $name)};
+    }@else{
+        @debug --------------------------------------;
+        @warn 'font not exists ' $name ' set roboto';
+        @debug --------------------------------------;
+        @return #{map.get($wd-fonts-family, 'roboto')};
+        
+    }
+
+}

package/style/utils/getThemingRootClass.scss

@@ -0,0 +1,3 @@
+@function getThemingRootClass($theme){
+    @return if($theme!=$wd-default-theme,':root.'+$theme,':root');
+}

package/style/utils/h.scss

@@ -0,0 +1,34 @@
+
+[h1],h1,.h1{
+    font-size:1.6rem;
+}
+
+[h2],h2,.h2{
+    font-size: 1.5rem;
+}
+
+[h3],h3,.h3{
+    font-size: 1.2rem;
+}
+
+[h4],h4,.h4{
+    font-size: 1rem;
+}
+
+[h5],h5,.h5{
+    font-size: 0.8rem;
+}
+
+[h6],h6,.h6{
+    font-size: 0.7rem;
+}
+
+[h1],[h2],[h3],[h4],[h5],[h6],
+h1,h2,h3,h4,h5,h6,
+.h1,.h2,.h3,.h4,.h5,.h6{
+    padding: 0px;
+    margin: 0px;
+    text-shadow: 0px 0px 1px var(--v2-wd-color-high);
+    font-weight: normal;
+    color:var(--v2-wd-color-high);
+}

package/style/utils/margin.scss

@@ -0,0 +1,33 @@
+[mg],.mg{
+    margin:var(--v2-wd-gap);
+}
+
+[mg0],.mg0{
+    margin:0px;
+}
+
+[mgl],.mgl{
+    margin-left:var(--v2-wd-gap);
+}
+
+[mgr],.mgr{
+    margin-right:var(--v2-wd-gap);
+}
+
+[mglr],.mglr{
+    margin-left:var(--v2-wd-gap);
+    margin-right:var(--v2-wd-gap);
+}
+
+[mgt],.mgt{
+    margin-top:var(--v2-wd-gap);
+}
+
+[mgb],.mgb{
+    margin-bottom:var(--v2-wd-gap);
+}
+
+[mgtb],.mgtb{
+    margin-top:var(--v2-wd-gap);
+    margin-bottom:var(--v2-wd-gap);
+}

package/style/utils/no-border.scss

@@ -0,0 +1,10 @@
+@mixin no-border{
+    border-color: rgba(0,0,0,0);
+}
+
+.no-border{
+    @include no-border;
+    &.wd-flat{
+        @include no-border;
+    }
+}

package/style/utils/padding.scss

@@ -0,0 +1,33 @@
+[pd],.pd{
+    padding:var(--v2-wd-gap);
+}
+
+[pd0],.pd0{
+    padding:0px;
+}
+
+[pdl],.pdl{
+    padding-left:var(--v2-wd-gap);
+}
+
+[pdr],.pdr{
+    padding-right:var(--v2-wd-gap);
+}
+
+[pdlr],.pdlr{
+    padding-left:var(--v2-wd-gap);
+    padding-right:var(--v2-wd-gap);
+}
+
+[pdt],.pdt{
+    padding-top:var(--v2-wd-gap);
+}
+
+[pdb],.pdb{
+    padding-bottom:var(--v2-wd-gap);
+}
+
+[pdtb],.pdtb{
+    padding-top:var(--v2-wd-gap);
+    padding-bottom:var(--v2-wd-gap);
+}

package/style/utils/panel.scss

@@ -0,0 +1,36 @@
+.wd-panel{
+    overflow: hidden;
+    min-height: calc(var(--v2-wd-size) + 4px);
+
+    display: -webkit-flex;
+    display: flex;
+    -webkit-flex-direction: row;
+    flex-direction: row;
+    -webkit-flex-wrap: nowrap;
+    flex-wrap: nowrap;
+    -webkit-justify-content: flex-start;
+    justify-content: flex-start;
+    -webkit-align-content: center;
+    align-content: center;
+    -webkit-align-items: center;
+    align-items: center;
+    
+    &[filled]{
+        -webkit-justify-content: flex-start;
+        justify-content: flex-start;
+        -webkit-align-content: stretch;
+        align-content: stretch;
+        -webkit-align-items: stretch;
+        align-items: stretch;        
+    }
+    &[center]{
+        -webkit-justify-content: center;
+        justify-content: center;        
+    }
+    &[right]{
+        -webkit-justify-content: flex-end;
+        justify-content: flex-end;
+    }
+}
+
+

package/style/utils/screen.scss

@@ -0,0 +1,139 @@
+$wd-large-width:900px;
+$wd-middle-width:700px;
+$wd-small-width:500px;
+
+$wd-xs: 0;
+$wd-sm: 576px;//mobile
+$wd-md: 768px;
+$wd-lg: 992px;//compact
+$wd-xl: 1200px;
+$wd-xxl: 1400px;
+
+$wd-widths:('small':$wd-small-width,'middle':$wd-middle-width,'large':$wd-small-width);
+
+
+@mixin less-large{ 
+    @media screen and (width <= $wd-large-width) {
+        @content;
+    }
+}
+
+@mixin less-middle{
+    @media screen and ( width <= $wd-middle-width) {
+        @content;
+    }
+}
+
+@mixin less-small{
+    @media screen and ( width <= $wd-small-width) {
+        @content;
+    }
+}
+
+
+@mixin more-large{
+    @media screen and (width > $wd-large-width) {
+        @content;
+    }
+}
+
+@mixin more-middle{
+    @media screen and ( width > $wd-middle-width) {
+        @content;
+    }
+}
+
+@mixin more-small{
+    @media screen and ( width > $wd-small-width) {
+        @content;
+    }
+}
+
+
+.hide-less-large{
+    @include less-large{
+        display: none !important;
+    }
+}
+
+.hide-less-middle{
+    @include less-middle{
+        display: none !important;
+    }
+}
+
+.hide-less-small{
+    @include less-small{
+        display: none !important;
+    }
+}
+
+
+.hide-more-large{
+    @include more-large{
+        display: none !important;
+    }
+}
+
+.hide-more-middle{
+    @include more-middle{
+        display: none !important;
+    }
+}
+
+.hide-more-small{
+    @include more-small{
+        display: none !important;
+    }
+}
+
+
+@mixin less-than($name){
+    
+    @if ($name == 'large'){
+        @include less-large{
+            @content;
+        }
+    }@else if($name == 'middle'){
+        @include less-middle{
+            @content;
+        }
+    }@else if($name == 'small'){
+        @include less-small{
+            @content;
+        }
+    }@else{
+        @error 'not define code for width'+$name; 
+    }
+}
+
+@mixin more-than($name){
+    @if ($name == 'large'){
+        @include more-large{
+            @content;
+        }
+    }@else if($name == 'middle'){
+        @include more-middle{
+            @content;
+        }
+    }@else if($name == 'small'){
+        @include more-small{
+            @content;
+        }
+    }@else{
+        @error 'not define code for width'+$name; 
+    }
+}
+
+
+@mixin less($width){
+    @media (min-width:0px) and (max-width:$width){
+        @content;
+    }
+}
+
+@mixin more($width){
+    @media (min-width:$width){
+        @content;
+    }
+}

package/style/utils/stretch.scss

@@ -0,0 +1,3 @@
+.stretch,[stretch]{
+    flex:1 1 auto;
+}

package/style/utils/text-style.scss

@@ -0,0 +1,32 @@
+//---------------------------------------------------------
+@mixin bold($color:var(--v2-wd-color)){
+    text-shadow: 0px 0px 1px $color;
+}
+[bold],.bold{
+    @include bold();
+}
+
+@mixin no-bold(){
+    text-shadow: none;
+}
+
+
+[no-bold],.no-bold{
+    @include no-bold();
+}
+
+//---------------------------------------------------------
+[align-center],.align-center{
+    text-align: center;    
+}
+[align-left],.align-left{
+    text-align: left;
+}
+[align-right],.align-right{
+    text-align: right;
+}
+
+//---------------------------------------------------------
+[italic],.italic{
+    font-style: italic;
+}

package/style/utils/transition.scss

@@ -0,0 +1,9 @@
+//@include transition(margin 0.2s);
+@mixin transition($x...){
+    -webkit-transition: $x;
+    -moz-transition: $x;
+    -ms-transition: $x;
+    -o-transition: $x;
+    transition: $x;
+}
+

package/{jsx/Utils → utils}/abs.js

@@ -1,8 +1,8 @@
 export default function abs(dom) {
     const rect = dom.getBoundingClientRect();
     return {
-        x: rect.left + window.pageXOffset,
-        y: rect.top + window.pageYOffset,
+        x: rect.left + window.scrollX,
+        y: rect.top + window.scrollY,
         w: rect.width,
         h: rect.height,
     };

package/{jsx/Collapse → utils}/collapse.js

@@ -1,6 +1,6 @@
 /* eslint-disable no-param-reassign */
-import getsize from '../Utils/size';
-import timer from '../Utils/timer';
+import getsize from './size';
+import timer from './timer';
 
 function collapse({
     dom,

package/utils/css.js

@@ -0,0 +1,56 @@
+/* eslint-disable no-param-reassign */
+
+class Css {
+    /** добавить несколько классов в DOM */
+    addClass(dom, ...classNames) {
+        let all = dom.className.trim();
+        const classes = all.split(' ');
+        // eslint-disable-next-line array-callback-return
+        classNames.map((cls) => {
+            if (classes.indexOf(cls) === -1) {
+                all = `${all} ${cls}`;
+                classes.push(cls);
+            }
+        });
+        dom.className = all.trim();
+    }
+
+    /** удалить класс DOM */
+    removeClass(dom, ...classNames) {
+        dom.className = dom.className.split(' ').filter((it) => (classNames.indexOf(it) === -1)).join(' ').trim();
+    }
+
+    /** признак, что клас установлен */
+    haveClass(dom, className) {
+        return dom.className.split(' ').indexOf(className) >= 0;
+    }
+
+    /** добавляет если нет и удаляет если есть */
+    toggleClass(dom, className) {
+        if (this.haveClass(dom, className)) {
+            this.removeClass(dom, className);
+        } else {
+            this.addClass(dom, className);
+        }
+    }
+
+    /** если bool == true добаляет список классов classesOnTrue и удаляет classesOnFalse
+     *  если bool == false добаляет список классов classesOnFalse и удаляет classesOnTrue
+     */
+    switchClass(dom, bool, classesOnTrue, classesOnFalse = []) {
+        if (bool) {
+            this.removeClass(dom, ...classesOnFalse);
+            this.addClass(dom, ...classesOnTrue);
+        } else {
+            this.removeClass(dom, ...classesOnTrue);
+            this.addClass(dom, ...classesOnFalse);
+        }
+    }
+
+    /** список классов как массив */
+    classes(dom) {
+        return dom.className.split(' ');
+    }
+}
+
+export default new Css();

package/utils/display.js

@@ -0,0 +1,2 @@
+/** возвращает свойство display только в с */
+export default (need) => (need ? {} : { display: 'none' });

package/utils/get.js

@@ -0,0 +1,24 @@
+export default function get(data, arrayOfName, defalt = false) {
+    let obj = data;
+
+    if (obj === undefined) {
+        return defalt;
+    }
+
+    try {
+        let nameOrIndex;
+        if (arrayOfName.length) {
+            for (let i = 0; i < arrayOfName.length; i++) {
+                nameOrIndex = obj[arrayOfName[i]];
+                if (nameOrIndex === undefined) {
+                    return defalt;
+                }
+                obj = nameOrIndex;
+            }
+            return obj;
+        }
+    } catch (e) {
+        return defalt;
+    }
+    return defalt;
+}

package/{jsx/Utils → utils}/isCompact.js

@@ -1,4 +1,4 @@
 import screen from './screen';
-import global from '../global';
+import global from '../jsx/global';
 
 export default () => screen().width <= global.wd_middle_width;