@ldmjs/ui 2.1.14 → 2.1.16

package/dist/scss/_checkbox.scss

@@ -1,9 +1,27 @@
+@use "sass:list";
+
 :root {
   --checkbox-s: 16px;
   --checkbox-m: 20px;
   --checkbox-l: 24px;
 }
 
+$colors: (
+  "primary": (
+    // default color
+    var(--primary),
+    // hover color
+    var(--primary-d-1),
+    // active color
+    var(--primary-d-2)
+  ),
+  "error": (
+    var(--error),
+    var(--error-d-1),
+    var(--error-d-2),
+  ),
+);
+
 body {
   .ld-checkbox {
     position: relative;
@@ -146,74 +164,48 @@ body {
       border-color: $color;
     }
 
-    // ---------- primary
-
-    &.text-primary {
-      input[type='checkbox']:checked + .ld-checkbox-icon {
-        @include checkboxiconcolor(var(--primary));
-        &:hover {
-          @include checkboxiconcolor(var(--primary-d-1));
-        }
-      }
-
-      input[type='checkbox']:checked:focus + .ld-checkbox-icon {
-        @include checkboxiconcolor(var(--focus));
-      }
-
-      input[type='checkbox']:checked:active + .ld-checkbox-icon {
-        @include checkboxiconcolor(var(--primary-d-2));
-      }
-
-      &.ld-checkbox--hovered {
+    @each $color, $values in $colors {
+      $d: list.nth($values, 1);
+      $h: list.nth($values, 2);
+      $a: list.nth($values, 3);
+      &.text-#{$color} {
         input[type='checkbox']:checked + .ld-checkbox-icon {
-          @include checkboxiconcolor(var(--primary-d-1));
+          @include checkboxiconcolor($d);
         }
-      }
 
-      &.ld-checkbox--focused {
-        label {
-          &:after {
-            border: 2px solid var(--focus);
+        &:not(.ld-checkbox--readonly) {
+          input[type='checkbox']:checked + .ld-checkbox-icon {
+            &:hover {
+              @include checkboxiconcolor($h);
+            }
           }
-        }
-      }
-    }
 
-    // ---------- error
+          input[type='checkbox']:checked:focus + .ld-checkbox-icon {
+            @include checkboxiconcolor(var(--focus));
+          }
 
-    &.text-error {
-      input[type='checkbox']:checked + .ld-checkbox-icon {
-        @include checkboxiconcolor(var(--error));
-        &:hover {
-          @include checkboxiconcolor(var(--error-d-1));
+          input[type='checkbox']:checked:active + .ld-checkbox-icon {
+            @include checkboxiconcolor($a);
+          }
         }
-      }
-
-      input[type='checkbox']:checked:focus + .ld-checkbox-icon {
-        @include checkboxiconcolor(var(--focus));
-      }
-
-      input[type='checkbox']:checked:active + .ld-checkbox-icon {
-        @include checkboxiconcolor(var(--error-d-2));
-      }
 
-      &.ld-checkbox--hovered {
-        input[type='checkbox']:checked + .ld-checkbox-icon {
-          @include checkboxiconcolor(var(--error-d-1));
+        &.ld-checkbox--hovered {
+          input[type='checkbox']:checked + .ld-checkbox-icon {
+            @include checkboxiconcolor($h);
+          }
         }
-      }
 
-      &.ld-checkbox--focused {
-        label {
-          &:after {
-            border: 2px solid var(--focus);
+        &.ld-checkbox--focused {
+          label {
+            &:after {
+              border: 2px solid var(--focus);
+            }
           }
         }
       }
     }
 
-    &.ld-checkbox--disabled,
-    &.ld-checkbox--readonly {
+    &.ld-checkbox--disabled {
       input[type='checkbox'] + .ld-checkbox-icon {
         @include checkboxiconcolor(var(--grey-l-5));
         svg {
@@ -230,15 +222,15 @@ body {
       }
     }
 
-    &.ld-checkbox--disabled {
+    &.ld-checkbox--readonly {
       .ld-label-content {
-        color: var(--grey-l-2);
+        color: var(--grey-d-3);
       }
     }
 
-    &.ld-checkbox--readonly {
+    &.ld-checkbox--disabled {
       .ld-label-content {
-        color: var(--grey-d-3);
+        color: var(--grey-l-2);
       }
     }
   }

package/dist/scss/_chip.scss

@@ -253,11 +253,11 @@ body {
       // hover bg color
       var(--grey-l-6),
       // hover border color
-      var(--grey-l-5),
+      var(--grey-d-1),
       // active bg color
       var(--grey-l-4),
       // active border color
-      var(--grey-l-4),
+      var(--grey-d-2),
     );
 
     // -- tonal

package/dist/scss/_dialogs.scss

@@ -51,11 +51,6 @@ body {
       }
     }
 
-    &.ld-dialog--hidden {
-      visibility: hidden !important;
-      opacity: 0 !important;
-    }
-
     .ld-dialog-content.v-overlay__content {
       max-width: unset;
       max-height: unset;
@@ -134,9 +129,19 @@ body {
         }
       }
       &.ld-dialog-content--hidden {
-        visibility: hidden !important;
-        opacity: 0 !important;
+        position: absolute;
+        clip: rect(0 0 0 0);
+        width: 1px;
+        height: 1px;
+        margin: -1px;
       }
     }
   }
-}
+
+  .minimized-dialogs {
+    position: absolute;
+    right: 25px;
+    bottom: 17px;
+    z-index: 999;
+  }
+}

package/dist/scss/_inputs.scss

@@ -768,6 +768,8 @@ body {
         margin-inline-start: unset;
         padding-left: 8px;
         padding-right: 12px;
+        border-top-right-radius: var(--border-radius);
+        border-bottom-right-radius: var(--border-radius);
         background-color: var(--white);
 
         &:after {

package/dist/scss/_iterator.scss

@@ -4,54 +4,57 @@
   position: relative;
   height: 100%;
 
-  .iterator-list {
+
+
+  & > .iterator-list {
     height: 100%;
     overflow-y: auto;
     overflow-anchor: auto;
     contain: content;
-  }
 
-  .scroller {
-    position: relative;
-    transform: translateZ(0);
-    &.mobile {
-      scroll-snap-type: y mandatory;
-    }
-  }
+    & > .scroller {
+      position: relative;
+      transform: translateZ(0);
+      &.mobile {
+        scroll-snap-type: y mandatory;
+      }
 
-  .item {
-    position: absolute;
-    width: 100%;
-    &.mobile {
-      scroll-snap-align: start;
-    }
+      & > .item {
+        position: absolute;
+        width: 100%;
+        height: max-content;
+        &.mobile {
+          scroll-snap-align: start;
+        }
 
-    &.blink {
-      animation: blinker 0.5s linear;
-    }
+        &.blink {
+          animation: blinker 0.5s linear;
+        }
 
-    @keyframes blinker {
-      5% {
-        left: -5%;
-      }
-      15% {
-        left: -15%;
-      }
-      25% {
-        opacity: 75%;
-        left: -25%;
-      }
-      50% {
-        opacity: 50%;
-        left: -50%;
-      }
-      75% {
-        opacity: 25%;
-        left: -75%;
-      }
-      100% {
-        opacity: 0;
-        left: -100%;
+        @keyframes blinker {
+          5% {
+            left: -5%;
+          }
+          15% {
+            left: -15%;
+          }
+          25% {
+            opacity: 75%;
+            left: -25%;
+          }
+          50% {
+            opacity: 50%;
+            left: -50%;
+          }
+          75% {
+            opacity: 25%;
+            left: -75%;
+          }
+          100% {
+            opacity: 0;
+            left: -100%;
+          }
+        }
       }
     }
   }

package/dist/scss/_progress.scss

@@ -1,3 +1,5 @@
+@use "sass:list";
+
 body {
   .ld-progress {
 
@@ -22,11 +24,17 @@ body {
       &.ld-progress--no-label {
         display: flex;
         align-items: center;
+        gap: 16px;
+
+        &.ld-progress--reversed {
+          flex-direction: row-reverse;
+        }
       }
 
       .ld-progress-label {
         display: flex;
         align-items: center;
+        gap: 16px;
         height: 20px;
         margin-bottom: 8px;
       }
@@ -36,12 +44,21 @@ body {
         flex: 1 1 auto;
       }
 
+      &.ld-progress--reversed {
+        .ld-progress-label {
+          flex-direction: row-reverse;
+        }
+        .ld-progress-text {
+          display: flex;
+          justify-content: flex-end;
+        }
+      }
+
       .ld-progress-counter {
         font-size: var(--text-body-s);
         color: var(--grey-d-1);
         white-space: nowrap;
         font-weight: 500;
-        margin-left: 16px;
         flex-shrink: 0;
       }
 
@@ -49,7 +66,6 @@ body {
         flex: 1 1 auto;
         height: 4px;
         background-color: var(--grey-l-5);
-        border-radius: 6px;
 
         &:after {
           content: '';
@@ -57,7 +73,49 @@ body {
           height: 100%;
           width: calc(var(--n) * 1%);
           background-color: var(--primary);
-          border-radius: 6px;
+        }
+      }
+
+      $sizearray: (
+        'x-small': (
+          // height
+          4px,
+          // border radius
+          6px
+        ),
+        'small': (
+          8px,
+          var(--border-radius),
+        ),
+        'default': (
+          12px,
+          var(--border-radius),
+        ),
+        'large': (
+          16px,
+          var(--border-radius),
+        ),
+        'x-large': (
+          20px,
+          12px,
+        ),
+        'extra-large': (
+          24px,
+          12px,
+        ),
+      );
+
+      @each $size, $values in $sizearray {
+        $h: list.nth($values, 1);
+        $r: list.nth($values, 2);
+        &.ld-progress--#{$size} {
+          .ld-progress-bar {
+            height: $h;
+            border-radius: $r;
+            &:after {
+              border-radius: $r;
+            }
+          }
         }
       }
     }
@@ -279,4 +337,4 @@ body {
       }
     }
   }
-}
+}

package/dist/scss/_shadows.scss

@@ -1,5 +1,5 @@
 $shadow-xs: 0px 1px 4px 0px hsla(218, 87%, 6%, 0.05);
-$shadow-s: 0px 1px 4px 0px hsla(218, 87%, 6%, 0.1);
+$shadow-s: 0px 1px 4px 0px hsla(218, 87%, 6%, 0.16);
 $shadow-sm: 0px 4px 8px -2px hsla(218, 87%, 6%, 0.1);
 $shadow-m: 0px 12px 16px -4px hsla(218, 87%, 6%, 0.07);
 $shadow-l: 0px 20px 24px -4px hsla(218, 87%, 6%, 0.07);

package/dist/scss/_textviewer.scss

@@ -25,7 +25,6 @@ body {
         max-height: calc(var(--input-s) * 4);
 
         &.scrollable {
-          padding-top: 7px;
           overflow-y: auto;
         }
 

package/dist/scss/_toolbar.scss

@@ -42,7 +42,7 @@ body {
     &-title {
       display: grid;
       grid-template-rows: 100%;
-      padding: 0 8px;
+      padding: 0 0 0 8px;
     }
 
     &-inner {

package/dist/types/dialogs.d.ts

@@ -1,3 +1,5 @@
+import { ModalType } from '@/ld-dialog/dialog.manager';
+
 export interface IDialogProps {
   title: string;
   content?: string;
@@ -62,7 +64,6 @@ export interface IModalInfo {
    * ограничивая пользователя в действиях, пока окно не будет закрыто
    */
   noModal?: boolean;
-  darkTitle?: boolean;
   content?: string;
   loading?: boolean;
   component?: string;
@@ -106,6 +107,15 @@ export interface IModalInfo {
   isChanged?: () => boolean;
 }
 
+enum ModalType {
+  Alert,
+  Prompt,
+  Info,
+  Confirm,
+  Select,
+  CreateEdit,
+}
+
 export interface IModalWindow extends IModalInfo {
   id: number;
   type: ModalType;

package/dist/utils/validators.js

@@ -1 +1 @@
-(function webpackUniversalModuleDefinition(e,l){"object"===typeof exports&&"object"===typeof module?module.exports=l(require("@vuelidate/validators")):"function"===typeof define&&define.amd?define(["@vuelidate/validators"],l):"object"===typeof exports?exports["ldmui"]=l(require("@vuelidate/validators")):e["ldmui"]=l(e["@vuelidate/validators"])})(self,e=>(()=>{"use strict";var l={9347(e,l,u){Object.defineProperty(l,"__esModule",{value:!0}),l.validators=l.phoneRule=l.urlRule=l.numericRule=l.minValueRule=l.maxValueRule=l.macAddressRule=l.ipAddressRule=l.integerRule=l.emailRule=l.decimalRule=l.betweenRule=l.alphaNumRule=l.alphaRule=l.maxLengthRule=l.requiredRule=void 0;const n=u(887),requiredRule=(e,l)=>u=>{if(null==u||"string"===typeof u&&""===u)return e?`Поле ${e} обязательно`:l||"Это поле обязательно";const t=n.required.$validator(u,null,null);return!("boolean"!==typeof t||!t)||(e?`Поле ${e} обязательно`:l||"Это поле обязательно")};l.requiredRule=requiredRule;const maxLengthRule=e=>l=>{const u=(0,n.maxLength)(e).$validator(l,null,null);return!("boolean"!==typeof u||!u)||`Значение должно быть меньше ${e} символов`};l.maxLengthRule=maxLengthRule;const alphaRule=()=>e=>{const l=n.alpha.$validator(e,null,null);return!("boolean"!==typeof l||!l)||"Разрешены только латинские буквы"};l.alphaRule=alphaRule;const alphaNumRule=()=>e=>{const l=n.alphaNum.$validator(e,null,null);return!("boolean"!==typeof l||!l)||"Разрешены только латинские буквы и цифры"};l.alphaNumRule=alphaNumRule;const betweenRule=(e,l)=>u=>{const t=(0,n.between)(e,l).$validator(u,null,null);return!("boolean"!==typeof t||!t)||`Значение должно быть в диапазоне от ${e} до ${l}`};l.betweenRule=betweenRule;const decimalRule=()=>e=>{const l=n.decimal.$validator(e,null,null);return!("boolean"!==typeof l||!l)||"Значение должно быть целым или дробным числом"};l.decimalRule=decimalRule;const emailRule=()=>e=>{const l=n.email.$validator(e,null,null);return!("boolean"!==typeof l||!l)||"Неверный формат адреса эл.почты"};l.emailRule=emailRule;const integerRule=()=>e=>{const l=n.integer.$validator(e,null,null);return!("boolean"!==typeof l||!l)||"Значение должно быть целым числом"};l.integerRule=integerRule;const ipAddressRule=()=>e=>{const l=n.ipAddress.$validator(e,null,null);return!("boolean"!==typeof l||!l)||"Неправильный формат IP-адреса"};l.ipAddressRule=ipAddressRule;const macAddressRule=()=>e=>{const l=(0,n.macAddress)(":").$validator(e,null,null);return!("boolean"!==typeof l||!l)||"Неправильный формат mac-адреса"};l.macAddressRule=macAddressRule;const maxValueRule=e=>l=>{const u=(0,n.maxValue)(e).$validator(l,null,null);return!("boolean"!==typeof u||!u)||`Значение должно быть меньше ${e}`};l.maxValueRule=maxValueRule;const minValueRule=e=>l=>{const u=(0,n.minValue)(e).$validator(l,null,null);return!("boolean"!==typeof u||!u)||`Значение должно быть больше ${e}`};l.minValueRule=minValueRule;const numericRule=()=>e=>{const l=n.numeric.$validator(e,null,null);return!("boolean"!==typeof l||!l)||"Разрешены только цифры"};l.numericRule=numericRule;const urlRule=()=>e=>{const l=n.url.$validator(e,null,null);return!("boolean"!==typeof l||!l)||"Неправильный формат URI"};l.urlRule=urlRule;const phoneRule=()=>e=>{const l=/^[\d()+-]+$/;return l.test(e)||"Неправильный формат телефона"};l.phoneRule=phoneRule,l.validators={requiredRule:l.requiredRule,maxLengthRule:l.maxLengthRule,alphaRule:l.alphaRule,alphaNumRule:l.alphaNumRule,betweenRule:l.betweenRule,decimalRule:l.decimalRule,emailRule:l.emailRule,integerRule:l.integerRule,ipAddressRule:l.ipAddressRule,macAddressRule:l.macAddressRule,maxValueRule:l.maxValueRule,minValueRule:l.minValueRule,numericRule:l.numericRule,urlRule:l.urlRule,phoneRule:l.phoneRule},l["default"]={}},887(l){l.exports=e}},u={};function __webpack_require__(e){var n=u[e];if(void 0!==n)return n.exports;var t=u[e]={exports:{}};return l[e](t,t.exports,__webpack_require__),t.exports}var n=__webpack_require__(9347);return n})());
+(function webpackUniversalModuleDefinition(e,l){"object"===typeof exports&&"object"===typeof module?module.exports=l(require("@vuelidate/validators")):"function"===typeof define&&define.amd?define(["@vuelidate/validators"],l):"object"===typeof exports?exports["ldmui"]=l(require("@vuelidate/validators")):e["ldmui"]=l(e["@vuelidate/validators"])})(self,e=>(()=>{"use strict";var l={887(l){l.exports=e}},r={};function __webpack_require__(e){var u=r[e];if(void 0!==u)return u.exports;var t=r[e]={exports:{}};return l[e](t,t.exports,__webpack_require__),t.exports}(()=>{__webpack_require__.n=e=>{var l=e&&e.__esModule?()=>e["default"]:()=>e;return __webpack_require__.d(l,{a:l}),l}})(),(()=>{__webpack_require__.d=(e,l)=>{for(var r in l)__webpack_require__.o(l,r)&&!__webpack_require__.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:l[r]})}})(),(()=>{__webpack_require__.o=(e,l)=>Object.prototype.hasOwnProperty.call(e,l)})(),(()=>{__webpack_require__.r=e=>{"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}})();var u={};__webpack_require__.r(u),__webpack_require__.d(u,{alphaNumRule:()=>alphaNumRule,alphaRule:()=>alphaRule,betweenRule:()=>betweenRule,decimalRule:()=>decimalRule,default:()=>a,emailRule:()=>emailRule,integerRule:()=>integerRule,ipAddressRule:()=>ipAddressRule,macAddressRule:()=>macAddressRule,maxLengthRule:()=>maxLengthRule,maxValueRule:()=>maxValueRule,minValueRule:()=>minValueRule,numericRule:()=>numericRule,phoneRule:()=>phoneRule,requiredRule:()=>requiredRule,urlRule:()=>urlRule,validators:()=>o});var t=__webpack_require__(887);const requiredRule=(e,l)=>r=>{if(null==r||"string"===typeof r&&""===r)return e?`Поле ${e} обязательно`:l||"Это поле обязательно";const u=t.required.$validator(r,null,null);return!("boolean"!==typeof u||!u)||(e?`Поле ${e} обязательно`:l||"Это поле обязательно")},maxLengthRule=e=>l=>{const r=(0,t.maxLength)(e).$validator(l,null,null);return!("boolean"!==typeof r||!r)||`Значение должно быть меньше ${e} символов`},alphaRule=()=>e=>{const l=t.alpha.$validator(e,null,null);return!("boolean"!==typeof l||!l)||"Разрешены только латинские буквы"},alphaNumRule=()=>e=>{const l=t.alphaNum.$validator(e,null,null);return!("boolean"!==typeof l||!l)||"Разрешены только латинские буквы и цифры"},betweenRule=(e,l)=>r=>{const u=(0,t.between)(e,l).$validator(r,null,null);return!("boolean"!==typeof u||!u)||`Значение должно быть в диапазоне от ${e} до ${l}`},decimalRule=()=>e=>{const l=t.decimal.$validator(e,null,null);return!("boolean"!==typeof l||!l)||"Значение должно быть целым или дробным числом"},emailRule=()=>e=>{const l=t.email.$validator(e,null,null);return!("boolean"!==typeof l||!l)||"Неверный формат адреса эл.почты"},integerRule=()=>e=>{const l=t.integer.$validator(e,null,null);return!("boolean"!==typeof l||!l)||"Значение должно быть целым числом"},ipAddressRule=()=>e=>{const l=t.ipAddress.$validator(e,null,null);return!("boolean"!==typeof l||!l)||"Неправильный формат IP-адреса"},macAddressRule=()=>e=>{const l=(0,t.macAddress)(":").$validator(e,null,null);return!("boolean"!==typeof l||!l)||"Неправильный формат mac-адреса"},maxValueRule=e=>l=>{const r=(0,t.maxValue)(e).$validator(l,null,null);return!("boolean"!==typeof r||!r)||`Значение должно быть меньше ${e}`},minValueRule=e=>l=>{const r=(0,t.minValue)(e).$validator(l,null,null);return!("boolean"!==typeof r||!r)||`Значение должно быть больше ${e}`},numericRule=()=>e=>{const l=t.numeric.$validator(e,null,null);return!("boolean"!==typeof l||!l)||"Разрешены только цифры"},urlRule=()=>e=>{const l=t.url.$validator(e,null,null);return!("boolean"!==typeof l||!l)||"Неправильный формат URI"},phoneRule=()=>e=>{const l=/^[\d()+-]+$/;return l.test(e)||"Неправильный формат телефона"},o={requiredRule,maxLengthRule,alphaRule,alphaNumRule,betweenRule,decimalRule,emailRule,integerRule,ipAddressRule,macAddressRule,maxValueRule,minValueRule,numericRule,urlRule,phoneRule},a={};return u})());

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ldmjs/ui",
-  "version": "2.1.14",
+  "version": "2.1.16",
   "description": "ldm ui",
   "main": "dist/index.js",
   "engines": {