prlg-ui 1.8.315 → 1.8.317

package/dist/prlg-ui.es.js

@@ -1096,7 +1096,7 @@ const rl = { class: "sleed-deal" }, il = ["onClick"], ul = { class: "sleed-deal-
       w.error && w.errorText ? (d(), m("small", na, H(w.errorText), 1)) : P("", !0)
     ], 2));
   }
-}), ra = /* @__PURE__ */ re(sa, [["__scopeId", "data-v-5f002cbf"]]), ia = {
+}), ra = /* @__PURE__ */ re(sa, [["__scopeId", "data-v-a265108f"]]), ia = {
   key: 0,
   class: "paginator"
 }, ua = ["disabled"], da = { class: "paginator__pages" }, ca = ["onClick"], va = ["disabled"], fa = {
@@ -2113,7 +2113,7 @@ const rl = { class: "sleed-deal" }, il = ["onClick"], ul = { class: "sleed-deal-
       C.error && C.errorText ? (d(), m("div", to, H(C.errorText), 1)) : P("", !0)
     ], 2));
   }
-}), qs = /* @__PURE__ */ re(lo, [["__scopeId", "data-v-20620bb3"]]), ao = ["for"], oo = { key: 0 }, no = { class: "input__wrapper" }, so = ["id", "placeholder", "name", "disabled", "type", "required", "readonly", "maxlength"], ro = { class: "input__actions" }, io = {
+}), qs = /* @__PURE__ */ re(lo, [["__scopeId", "data-v-2043281f"]]), ao = ["for"], oo = { key: 0 }, no = { class: "input__wrapper" }, so = ["id", "placeholder", "name", "disabled", "type", "required", "readonly", "maxlength"], ro = { class: "input__actions" }, io = {
   key: 1,
   class: "input__count-char"
 }, uo = {
@@ -5220,7 +5220,7 @@ const lr = {
       }, 8, ["show"])
     ], 2));
   }
-}), ct = /* @__PURE__ */ re(vs, [["__scopeId", "data-v-afa908ce"]]), fs = { class: "shedule-time-pick" }, ms = { class: "shedule-time-pick__inputs" }, ps = {
+}), ct = /* @__PURE__ */ re(vs, [["__scopeId", "data-v-95a9b2af"]]), fs = { class: "shedule-time-pick" }, ms = { class: "shedule-time-pick__inputs" }, ps = {
   key: 0,
   class: "shedule-time-pick__error"
 }, gs = /* @__PURE__ */ K({
@@ -5494,7 +5494,7 @@ const lr = {
       c.error && c.errorText ? (d(), m("div", Vs, H(c.errorText), 1)) : P("", !0)
     ], 2));
   }
-}), Vr = /* @__PURE__ */ re(Is, [["__scopeId", "data-v-0a294d1b"]]);
+}), Vr = /* @__PURE__ */ re(Is, [["__scopeId", "data-v-babac8de"]]);
 export {
   mr as Accordion,
   pr as AccordionContent,

package/dist/scss/animations.scss

@@ -1,3 +1,154 @@
+// Classes animation vue (https://vuejs.org/guide/built-ins/transition#css-based-transitions)
+// 1. v-enter-from
+// 2. v-enter-active
+// 3. v-enter-to
+// 4. v-leave-from
+// 5. v-leave-active
+// 6. v-leave-to
+
+//FADE
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity var(--animation-duration) ease-in-out;
+}
+
+//FADE-IN
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.fadeIn-enter-from,
+.fadeIn-leave-to {
+  opacity: 0;
+}
+
+.fadeIn-enter-to,
+.fadeIn-leave-from {
+  opacity: 1;
+}
+
+.fadeIn-enter-active,
+.fadeIn-leave-active {
+  transition: opacity var(--animation-duration) ease-in-out;
+}
+
+//FADE-OUT
+@keyframes fadeOut {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+.fadeOut-enter-from,
+.fadeOut-leave-to {
+  opacity: 1;
+}
+
+.fadeOut-enter-to,
+.fadeOut-leave-from {
+  opacity: 0;
+}
+
+.fadeOut-enter-active,
+.fadeOut-leave-active {
+  transition: opacity var(--animation-duration) ease-in-out;
+}
+
+//SLIDE-RIGHT-IN
+@keyframes slideRightIn {
+  from {
+    transform: translateX(200%);
+  }
+
+  to {
+    transform: translateX(0%);
+  }
+}
+
+@keyframes slideRightOut {
+  from {
+    transform: translateX(0%);
+  }
+
+  to {
+    transform: translateX(200%);
+  }
+}
+
+@keyframes slideTopIn {
+  from {
+    transform: translateY(-200%);
+  }
+
+  to {
+    transform: translateY(0%);
+  }
+}
+
+@keyframes slideTopOut {
+  from {
+    transform: translateY(0%);
+  }
+
+  to {
+    transform: translateY(-200%);
+  }
+}
+
+@keyframes slideLeftIn {
+  from {
+    transform: translateX(-200%);
+  }
+
+  to {
+    transform: translateX(0%);
+  }
+}
+
+@keyframes slideLeftOut {
+  from {
+    transform: translateX(0%);
+  }
+
+  to {
+    transform: translateX(-200%);
+  }
+}
+
+@keyframes slideBottomIn {
+  from {
+    transform: translateY(200%);
+  }
+
+  to {
+    transform: translateY(0%);
+  }
+}
+
+@keyframes slideBottomOut {
+  from {
+    transform: translateY(0%);
+  }
+
+  to {
+    transform: translateY(200%);
+  }
+}
+
+//Удалить после перехода на reka-ui
 .slide-fade-smooth-enter-active,
 .slide-fade-smooth-leave-active {
   transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
@@ -27,4 +178,4 @@
 .slide-fade-vertical-leave-to {
   transform: translateY(20px);
   opacity: 0;
-}
+}

package/dist/scss/colors.scss

@@ -1,7 +1,6 @@
 //GLOBAL
 :root {
   --theme-color-m: #e3e9ed;
-  --animate-duration: 0.3s;
 }
 
 //NEUTRAL
@@ -16,7 +15,6 @@
   --theme-neutral-400: #bfbfbf;
   --theme-neutral-400_40: #bfbfbf66;
   --theme-neutral-500: #a1a1a1; //use btn icon
-  --theme-neutral-550: #7b7b7b;
   --theme-neutral-600: #525252;
   --theme-neutral-700: #3d3d3d;
   --theme-neutral-800: #292929;
@@ -40,7 +38,7 @@
   --theme-neutral-icon-primary: #90a4ae;
   --theme-neutral-icon-secondary: var(--theme-neutral-400);
   --theme-neutral-icon-caption: var(--theme-neutral-500);
-  --theme-neutral-icon-disabled: #b5b5b5;
+  --theme-neutral-icon-disabled: var(--theme-neutral-300);
   --theme-neutral-icon-negative: var(--theme-neutral-0);
 
   --theme-neutral-border-default: var(--theme-neutral-300);
@@ -105,7 +103,6 @@
 
 //WARN
 :root {
-  --theme-warn-50: #faf4ee; //use fill
   --theme-warn-100: #fdf4ea; //use fill
   --theme-warn-200: #fadfc1; //use stroke
   --theme-warn-300: #f4c083; //hover

package/dist/scss/global.scss

@@ -0,0 +1,53 @@
+@use "./mixins.scss" as *;
+
+.overlay {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+
+  width: 100dvw;
+  height: 100dvh;
+
+  background-color: rgba(#000, 0.3);
+  z-index: 1000;
+
+  &[data-state="open"] {
+    animation: fadeIn var(--animation-duration) ease-in-out;
+  }
+
+  &[data-state="closed"] {
+    animation: fadeOut var(--animation-duration) ease-in-out;
+  }
+}
+
+.container {
+  width: 100%;
+  margin: 0 auto;
+  padding: 0 10px;
+  max-width: 768px; // Базовая ширина для мобильных
+
+  @include respond(lg) {
+    max-width: 991px;
+  }
+
+  @include respond(xl) {
+    max-width: 1200px;
+  }
+
+  @include respond(xxl) {
+    max-width: 1400px;
+  }
+
+  @include respond(xxxl) {
+    max-width: 1600px;
+  }
+}
+
+.page-title {
+  font-weight: 600;
+  font-size: 24px;
+  line-height: 120%;
+  color: var(--theme-neutral-text-title);
+}

package/dist/scss/main.scss

@@ -1,35 +1,9 @@
-@use "./reset.scss";
+@use "./vars.scss";
 @use "./colors.scss";
-@use "./root-vars.scss";
-@use "./mixins.scss" as *;
+@use "./animations.scss";
+@use "./mixins.scss";
 @use "./fonts.scss";
+@use "./reset.scss";
+@use "./typography.scss";
 
-.container {
-  width: 100%;
-  margin: 0 auto;
-  padding: 0 10px;
-  max-width: 768px; // Базовая ширина для мобильных
-
-  @include respond(lg) {
-    max-width: 991px;
-  }
-
-  @include respond(xl) {
-    max-width: 1200px;
-  }
-
-  @include respond(xxl) {
-    max-width: 1400px;
-  }
-
-  @include respond(xxxl) {
-    max-width: 1600px;
-  }
-}
-
-.page-title {
-  font-weight: 600;
-  font-size: 24px;
-  line-height: 120%;
-  color: var(--theme-neutral-text-title);
-}
+@use "./global.scss";

package/dist/scss/mixins.scss

@@ -19,48 +19,49 @@
 @mixin font-face($font-family, $weights) {
   @each $weight in $weights {
     $weight-name: if(
-                    $weight == 100,
-                    "Thin",
-                    if(
-                                    $weight == 200,
-                                    "ExtraLight",
-                                    if(
-                                                    $weight == 300,
-                                                    "Light",
-                                                    if(
-                                                                    $weight == 400,
-                                                                    "Regular",
-                                                                    if(
-                                                                                    $weight == 500,
-                                                                                    "Medium",
-                                                                                    if(
-                                                                                                    $weight == 600,
-                                                                                                    "SemiBold",
-                                                                                                    if(
-                                                                                                                    $weight == 700,
-                                                                                                                    "Bold",
-                                                                                                                    if(
-                                                                                                                                    $weight == 800,
-                                                                                                                                    "ExtraBold",
-                                                                                                                                    if($weight == 900, "Black", $weight)
-                                                                                                                    )
-                                                                                                    )
-                                                                                    )
-                                                                    )
-                                                    )
-                                    )
-                    )
+      $weight == 100,
+      "Thin",
+      if(
+        $weight == 200,
+        "ExtraLight",
+        if(
+          $weight == 300,
+          "Light",
+          if(
+            $weight == 400,
+            "Regular",
+            if(
+              $weight == 500,
+              "Medium",
+              if(
+                $weight == 600,
+                "SemiBold",
+                if(
+                  $weight == 700,
+                  "Bold",
+                  if(
+                    $weight == 800,
+                    "ExtraBold",
+                    if($weight == 900, "Black", $weight)
+                  )
+                )
+              )
+            )
+          )
+        )
+      )
     );
     @font-face {
       font-family: "#{$font-family}";
       font-weight: #{$weight};
-      src: url("/fonts/#{$font-family}/#{$font-family}-#{$weight-name}.woff2") format("woff2"),
-      url("/fonts/#{$font-family}/#{$font-family}-#{$weight-name}.woff") format("woff");
+      src: url("/fonts/#{$font-family}/#{$font-family}-#{$weight-name}.woff2")
+          format("woff2"),
+        url("/fonts/#{$font-family}/#{$font-family}-#{$weight-name}.woff")
+          format("woff");
     }
   }
 }
 
-
 /**
  * Миксин для создания медиа-запросов с минимальной шириной
  * 
@@ -76,7 +77,6 @@
  * Применит стили для экранов шириной от 768px и больше
  */
 
-
 @mixin media-min-width($width) {
   @media screen and (min-width: $width) {
     @content;
@@ -119,7 +119,7 @@
   } @else if $breakpoint == xl {
     @media (min-width: 1220px) {
       @content;
-    } 
+    }
   } @else if $breakpoint == xxl {
     @media (min-width: 1420px) {
       @content;
@@ -164,14 +164,4 @@
   &::-webkit-scrollbar-corner {
     background: transparent;
   }
-
-  // Add paddings depending on direction
-  // @if $direction == "right" {
-  //   padding-right: 10px;
-  // } @else if $direction == "bottom" {
-  //   padding-bottom: 10px;
-  // } @else if $direction == "both" {
-  //   padding-right: 10px;
-  //   padding-bottom: 10px;
-  // }
-}
+}

package/dist/scss/reset.scss

@@ -1,53 +1,55 @@
 * {
-	margin: 0;
-	padding: 0;
-	box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
 }
 
 html,
 body {
-	height: 100%;
-	width: 100%;
+  height: 100%;
+  width: 100%;
+
+  font-size: var(--font-size);
+  line-height: 1.5;
 }
 
 body {
-	font-family: 'Inter', sans-serif;
-	-webkit-font-smoothing: antialiased;
-	-moz-osx-font-smoothing: grayscale;
-	font-size: 16px;
-	line-height: 1.5;
-	color: #333;
+  font-family: "Inter", sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  color: var(--theme-neutral-950);
 }
 
 a {
-	text-decoration: none;
-	color: inherit;
+  text-decoration: none;
+  color: inherit;
 }
 
 button {
-	border: none;
-	background: none;
-	cursor: pointer;
-	font: inherit;
+  border: none;
+  background: none;
+  cursor: pointer;
+  font: inherit;
 }
 
 ul,
 ol {
-	list-style: none;
+  list-style: none;
 }
 
 img {
-	max-width: 100%;
-	height: auto;
-	display: block;
+  max-width: 100%;
+  height: auto;
+  display: block;
 }
 
 input,
 textarea,
 select {
-	font: inherit;
-	border: none;
-	outline: none;
+  font: inherit;
+  border: none;
+  outline: none;
 }
 
 h1,
@@ -56,5 +58,5 @@ h3,
 h4,
 h5,
 h6 {
-	font-weight: normal;
+  font-weight: normal;
 }

package/dist/scss/typography.scss

@@ -0,0 +1,41 @@
+h1 {
+  font-size: 1.5rem;
+  line-height: 120%;
+  color: var(--theme-neutral-text-title);
+}
+
+h2 {
+  font-size: 1.25rem;
+  line-height: 120%;
+  color: var(--theme-neutral-text-title);
+}
+
+h3 {
+  font-size: 1.1875rem;
+  line-height: 120%;
+  color: var(--theme-neutral-text-title);
+}
+
+h4 {
+  font-size: 1rem;
+  line-height: 120%;
+  color: var(--theme-neutral-text-title);
+}
+
+h5 {
+  font-size: 0.9375rem;
+  line-height: 120%;
+  color: var(--theme-neutral-text-title);
+}
+
+h6 {
+  font-size: 0.8125rem;
+  line-height: 120%;
+  color: var(--theme-neutral-text-title);
+}
+
+p {
+  font-size: 1rem;
+  line-height: 160%;
+  color: var(--theme-neutral-text-body);
+}

package/dist/scss/vars.scss

@@ -0,0 +1,31 @@
+@use "./mixins.scss" as *;
+
+//1rem = 16px
+
+:root {
+  //GLOBAL
+  --animation-duration: 0.3s;
+  --font-size: 14px;
+
+  --card-border-box-shadow: 1px 0px 0px 0px #74889c33 inset,
+    -1px 0px 0px 0px #74889c33 inset, 0px 1px 0px 0px #74889c33 inset,
+    0px -1px 0px 0px #74889c33 inset;
+}
+
+@include respond(md) {
+  :root {
+    --font-size: 16px;
+  }
+}
+
+//Удалить после перехода на reka-ui
+:root {
+  --modal-z-index: 1000;
+  --drawer-z-index: 1000;
+  --confirm-z-index: 1008;
+  --toast-z-index: 1009;
+
+  //BOX-SHADOW
+  --dropdown-shadow: -1px 1px 10px 0 #8d8f9340;
+  --popover-shadow: 0 12px 25px 0 #0000001a, 0 0 8px 0 #0000001a;
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "prlg-ui",
   "private": false,
-  "version": "1.8.315",
+  "version": "1.8.317",
   "type": "module",
   "main": "dist/prlg-ui.umd.js",
   "module": "dist/prlg-ui.es.js",

package/dist/scss/root-vars.scss

@@ -1,12 +0,0 @@
-//MODAL
-:root {
-  --modal-z-index: 1000;
-  --drawer-z-index: 1000;
-  --confirm-z-index: 1008;
-  --toast-z-index: 1009;
-
-  //BOX-SHADOW
-  --dropdown-shadow: -1px 1px 10px 0 #8D8F9340;
-  --popover-shadow: 0 12px 25px 0 #0000001A, 0 0 8px 0 #0000001A;
-  
-}