prlg-ui 1.8.132 → 1.8.134

package/dist/scss/animations.scss

@@ -0,0 +1,30 @@
+.slide-fade-smooth-enter-active,
+.slide-fade-smooth-leave-active {
+  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+.slide-fade-smooth-enter-from {
+  transform: translateX(-30px);
+  opacity: 0;
+}
+
+.slide-fade-smooth-leave-to {
+  transform: translateX(30px);
+  opacity: 0;
+}
+
+// VERTICAL SLIDE FADE
+.slide-fade-vertical-enter-active,
+.slide-fade-vertical-leave-active {
+  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+.slide-fade-vertical-enter-from {
+  transform: translateY(-20px);
+  opacity: 0;
+}
+
+.slide-fade-vertical-leave-to {
+  transform: translateY(20px);
+  opacity: 0;
+}

package/dist/scss/colors.scss

@@ -0,0 +1,135 @@
+//GLOBAL
+:root {
+  --theme-color-m: #E3E9ED;
+  --animate-duration: 0.3s;
+}
+
+//NEUTRAL
+:root {
+  --theme-neutral-0: #ffffff;
+  --theme-neutral-100: #FDFDFD; //use bg main fill
+  --theme-neutral-200: #FAFAFA;
+  --theme-neutral-250: #EBEBEB;
+  --theme-neutral-250_40: #EBEBEB66; //use dissabled fill
+  --theme-neutral-300: #CECECE; //use border icon,text
+  --theme-neutral-300_40: #CECECE66; //use hover table fill
+  --theme-neutral-400: #BFBFBF;
+  --theme-neutral-400_40: #BFBFBF66;
+  --theme-neutral-500: #A1A1A1; //use btn icon
+  --theme-neutral-600: #525252;
+  --theme-neutral-700: #3D3D3D;
+  --theme-neutral-800: #292929;
+  --theme-neutral-850: #1F1F1F;
+  --theme-neutral-950: #0A0A0A;
+
+  --theme-neutral-surface-bg: var(--theme-neutral-100);
+  --theme-neutral-surface-default: var(--theme-neutral-0);
+  --theme-neutral-surface-subtitle: var(--theme-neutral-200);
+  --theme-neutral-surface-icon: #F1F4F5;
+  --theme-neutral-surface-disabled: var(--theme-neutral-250_40);
+
+  --theme-text-icon-body: #3B3B3B;
+  --theme-neutral-text-title: var(--theme-neutral-950);
+  --theme-neutral-text-subtitle: var(--theme-neutral-800);
+  --theme-neutral-text-body: var(--theme-neutral-700);
+  --theme-neutral-text-caption: var(--theme-neutral-500);
+  --theme-neutral-text-disabled: var(--theme-neutral-400_40);
+  --theme-neutral-text-negative: var(--theme-neutral-0);
+
+  --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-negative: var(--theme-neutral-0);
+
+  --theme-neutral-border-default: var(--theme-neutral-300);
+  --theme-neutral-border-darker: var(--theme-neutral-400);
+  --theme-neutral-border-divider: #E3E9ED;
+  --theme-neutral-border-disabled: var(--theme-neutral-400_40);
+
+  //BOX-SHADOW
+  --theme-main-interface-shadow: 0 2px 8.8px 2px #0000000D, 0 0 13.4px 0 #0000000A;
+  --theme-hover-interface-shadow: 0 2px 8.8px 2px #0000000D, 0 1px 1px 0 #0000000A;
+
+}
+
+//PRIMARY
+:root {
+  --theme-primary-50: #EAFEF0;
+  --theme-primary-50_40: #EAFEF066;
+  --theme-primary-75: #CAF3D5; //use hover fill
+  --theme-primary-100: #BFF7CD;
+  --theme-primary-200: #AAEEBC;
+  --theme-primary-200_15: #94E6AA; //use focussed stroke
+  --theme-primary-200_25: #94E6AA40; //use focussed stroke
+  --theme-primary-200_50: #94E6AA80; //use focussed stroke
+  --theme-primary-250: #CAF3D5; //use hover fill
+  --theme-primary-300: #7FDD98; //use hover fill
+  --theme-primary-400: #2ABC51; //use focussed fill
+  --theme-primary-500_5: #00AB2E0D; //use default fill
+  --theme-primary-500: #00AB2E; //use default fill
+  --theme-primary-600: #008925; //use pressed fill
+  --theme-primary-700: #00671C;
+  --theme-primary-800: #004412;
+  --theme-primary-900: #002209;
+
+  --theme-primary-surface-default: var(--theme-primary-500);
+  --theme-primary-surface-subtitle: var(--theme-primary-50);
+  --theme-primary-surface-darker: var(--theme-primary-600);
+  --theme-primary-surface-lighter: var(--theme-primary-200_25);
+  --theme-primary-surface-hover: var(--theme-primary-50_40);
+
+  --theme-primary-border-default: var(--theme-primary-700);
+  --theme-primary-border-subtitle: var(--theme-primary-600);
+  --theme-primary-border-darker: var(--theme-primary-800);
+  --theme-primary-border-lighter: var(--theme-primary-200);
+
+  --theme-primary-icon-default: var(--theme-primary-500);
+}
+
+//INFO
+:root {
+  --theme-info-100: #E3EEFA;
+  --theme-info-100_50: #E3EEFA80; //use fill
+  --theme-info-200: #C2D9F5; //use stroke
+  --theme-info-300: #6EA6E7; //hover
+  --theme-info-400: #2674CE; //use link (подчеркивание при наведении)
+  --theme-info-500: #235FA4; //use icon
+  --theme-info-600: #02538F;
+  --theme-info-700: #134A73;
+  --theme-info-800: #152D4F;
+  --theme-info-900: #161E33;
+}
+
+//WARN
+:root {
+  --theme-warn-100: #FDF4EA; //use fill
+  --theme-warn-200: #FADFC1; //use stroke
+  --theme-warn-300: #F4C083; //hover
+  --theme-warn-400: #F1AB5A;
+  --theme-warn-500: #ED9631; //use icon
+  --theme-warn-600: #D47D16;
+  --theme-warn-700: #AC6410;
+  --theme-warn-800: #814A09;
+  --theme-warn-900: #492C0A;
+}
+
+//ERROR
+:root {
+  --theme-error-100: #FCEAEA;
+  --theme-error-100_50: #FCEAEA80; //use fill
+  --theme-error-200_50: #FCEAEA; //use stroke
+  --theme-error-200: #FFD4D4; //use stroke
+  --theme-error-300: #F4A6A6; //hover
+  --theme-error-400: #DF575C;
+  --theme-error-500: #DE292F; //use icon
+  --theme-error-600: #BD2429;
+  --theme-error-700: #921D21;
+  --theme-error-800: #6E1820;
+  --theme-error-900: #4E1012;
+}
+
+//SHADOW
+:root {
+  --theme-shadow-button: 0px 2px 8.8px 2px #0000000D, 0px 1px 1px 0px #0000000A;
+}

package/dist/scss/fonts.scss

@@ -0,0 +1,3 @@
+@use "./mixins.scss" as mixins;
+
+@include mixins.font-face("Roboto", (100, 200, 300, 400, 500, 600, 700, 800, 900));

package/dist/scss/main.scss

@@ -0,0 +1,36 @@
+@use './reset.scss';
+@use './colors.scss';
+@use './root-vars.scss';
+@use './mixins.scss' as *;
+@use './fonts.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);
+  text-transform: uppercase;
+}

package/dist/scss/mixins.scss

@@ -0,0 +1,177 @@
+/**
+ * Миксин для подключения шрифтов
+ * @param {string} $font-family - Название семейства шрифтов
+ * @param {list} $weights - Список весов шрифта (100-900)
+ * 
+ * Пример использования:
+ * $weights: (100, 200, 300, 400, 500, 600, 700, 800, 900);
+ * $styles: (normal, italic);
+ * @include font-face('Roboto', $weights);
+ * 
+ * Структура файлов шрифтов должна быть следующей:
+ * fonts/
+ *   Roboto/
+ *     Roboto-Thin.woff2
+ *     Roboto-Thin.woff
+ *     ...
+ */
+
+@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)
+                                                                                                                    )
+                                                                                                    )
+                                                                                    )
+                                                                    )
+                                                    )
+                                    )
+                    )
+    );
+    @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");
+    }
+  }
+}
+
+
+/**
+ * Миксин для создания медиа-запросов с минимальной шириной
+ * 
+ * @param {number} $width - Минимальная ширина в пикселях
+ * 
+ * Пример использования:
+ * @include media-min-width(768px) {
+ *   .container {
+ *     padding: 20px;
+ *   }
+ * }
+ * 
+ * Применит стили для экранов шириной от 768px и больше
+ */
+
+
+@mixin media-min-width($width) {
+  @media screen and (min-width: $width) {
+    @content;
+  }
+}
+
+/// Миксин для обрезки многострочного текста с троеточием
+///
+/// @param {Number} $lines - Количество отображаемых строк (по умолчанию: 2)
+///
+/// Используется для ограничения текста по количеству строк с добавлением "..."
+/// Работает на основе -webkit-line-clamp и поддерживается в современных браузерах.
+///
+/// 🔁 Пример использования:
+/// .text {
+///   @include ellipsis-multiline(3);
+/// }
+@mixin ellipsis-multiline($lines: 2) {
+  display: -webkit-box;
+  -webkit-line-clamp: $lines;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+// 📱 Адаптив
+@mixin respond($breakpoint) {
+  @if $breakpoint == sm {
+    @media (min-width: 640px) {
+      @content;
+    }
+  } @else if $breakpoint == md {
+    @media (min-width: 768px) {
+      @content;
+    }
+  } @else if $breakpoint == lg {
+    @media (min-width: 1010px) {
+      @content;
+    }
+  } @else if $breakpoint == xl {
+    @media (min-width: 1220px) {
+      @content;
+    } 
+  } @else if $breakpoint == xxl {
+    @media (min-width: 1420px) {
+      @content;
+    }
+  } @else if $breakpoint == xxxl {
+    @media (min-width: 1620px) {
+      @content;
+    }
+  }
+}
+
+// ✨ Кастомный скроллбар
+@mixin custom-scrollbar($direction) {
+  box-sizing: content-box;
+
+  scrollbar-width: thin;
+  scrollbar-color: var(--theme-neutral-border-default) transparent;
+
+  // WebKit scrollbar
+  &::-webkit-scrollbar {
+    @if $direction == "right" {
+      width: 8px;
+      height: 0;
+    } @else if $direction == "bottom" {
+      width: 0;
+      height: 8px;
+    } @else if $direction == "both" {
+      width: 8px;
+      height: 8px;
+    }
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: var(--theme-neutral-border-default);
+    border-radius: 4px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  &::-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

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

package/dist/scss/root-vars.scss

@@ -0,0 +1,12 @@
+//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;
+  
+}

package/dist/types/index.cjs.js

@@ -0,0 +1 @@
+"use strict";

package/dist/types/index.es.js

@@ -0,0 +1 @@
+

package/dist/types.d.ts

@@ -0,0 +1,14 @@
+import { Component } from 'vue';
+import { RouteLocationRaw } from 'vue-router';
+
+export declare type MenuItem = {
+    icon?: Component;
+    label: string;
+    url?: string | RouteLocationRaw;
+    command?: () => void;
+    description?: string;
+    badge?: boolean;
+    disabled?: boolean;
+};
+
+export { }

package/dist/uploadFile.util-DCFkx3w3.cjs

@@ -0,0 +1 @@
+"use strict";const s=require("./parseFileSize.util-Bg1rLRLQ.cjs");function o(e){if(!e)return;const a=Array.isArray(e)?e:[e],i={image:["image/*"],pdf:["application/pdf"],excel:["application/vnd.ms-excel","application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"],word:["application/msword","application/vnd.openxmlformats-officedocument.wordprocessingml.document"],all:["*/*"]};return a.flatMap(t=>i[t]||[]).join(",")}function d(e={}){return new Promise(a=>{const i=document.createElement("input");i.type="file",i.style.display="none",e.multiple&&e.maxFiles&&e.maxFiles>1&&(i.multiple=!0);const t=o(e.accept);t&&(i.accept=t),i.addEventListener("change",r=>{const n=r.target;let l=[];if(n.files&&n.files.length>0&&(l=Array.from(n.files),e.maxFiles&&l.length>e.maxFiles&&(l=l.slice(0,e.maxFiles)),e.maxFileSize)){const c=s.parseFileSize(e.maxFileSize);l=l.filter(m=>m.size<=c)}a(l),document.body.removeChild(i)}),document.body.appendChild(i),i.click()})}exports.openFileDialog=d;

package/dist/uploadFile.util-DhavPrlY.js

@@ -0,0 +1,37 @@
+import { p as o } from "./parseFileSize.util-CxVk4CvB.js";
+function s(e) {
+  if (!e) return;
+  const a = Array.isArray(e) ? e : [e], i = {
+    image: ["image/*"],
+    pdf: ["application/pdf"],
+    excel: [
+      "application/vnd.ms-excel",
+      "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
+    ],
+    word: [
+      "application/msword",
+      "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
+    ],
+    all: ["*/*"]
+  };
+  return a.flatMap((l) => i[l] || []).join(",");
+}
+function p(e = {}) {
+  return new Promise((a) => {
+    const i = document.createElement("input");
+    i.type = "file", i.style.display = "none", e.multiple && e.maxFiles && e.maxFiles > 1 && (i.multiple = !0);
+    const l = s(e.accept);
+    l && (i.accept = l), i.addEventListener("change", (r) => {
+      const n = r.target;
+      let t = [];
+      if (n.files && n.files.length > 0 && (t = Array.from(n.files), e.maxFiles && t.length > e.maxFiles && (t = t.slice(0, e.maxFiles)), e.maxFileSize)) {
+        const m = o(e.maxFileSize);
+        t = t.filter((c) => c.size <= m);
+      }
+      a(t), document.body.removeChild(i);
+    }), document.body.appendChild(i), i.click();
+  });
+}
+export {
+  p as o
+};

package/dist/utils/date.util.ts

@@ -0,0 +1,30 @@
+import { format, differenceInDays, isAfter } from 'date-fns'
+import { ru } from 'date-fns/locale'
+
+/**
+ * Форматирует дату в человекочитаемый вид: 20 июня 2025
+ */
+export function formatDateReadable(date: string | Date): string {
+    return format(new Date(date), 'd MMMM yyyy', { locale: ru })
+}
+
+/**
+ * Форматирует дату для отображения времени: 20 июня, 14:30
+ */
+export function formatDateWithTime(date: string | Date): string {
+    return format(new Date(date), 'd MMMM, HH:mm', { locale: ru })
+}
+
+/**
+ * Возвращает разницу между датами в днях
+ */
+export function getDaysBetween(start: string | Date, end: string | Date): number {
+    return differenceInDays(new Date(end), new Date(start))
+}
+
+/**
+ * Проверяет, истекла ли дата
+ */
+export function isExpired(date: string | Date): boolean {
+    return isAfter(new Date(), new Date(date))
+}

package/dist/utils/dayjs.util.ts

@@ -0,0 +1,32 @@
+import dayjs from 'dayjs'
+
+// 📦 Плагины
+import localizedFormat from 'dayjs/plugin/localizedFormat'
+import relativeTime from 'dayjs/plugin/relativeTime'
+import isToday from 'dayjs/plugin/isToday'
+import isBetween from 'dayjs/plugin/isBetween'
+import isSameOrBefore from 'dayjs/plugin/isSameOrBefore'
+import isSameOrAfter from 'dayjs/plugin/isSameOrAfter'
+import duration from 'dayjs/plugin/duration'
+import customParseFormat from 'dayjs/plugin/customParseFormat'
+import dayOfYear from 'dayjs/plugin/dayOfYear'
+
+// 🌍 Локаль
+import 'dayjs/locale/ru'
+
+// 🧩 Установка плагинов
+dayjs.extend(localizedFormat)
+dayjs.extend(relativeTime)
+dayjs.extend(isToday)
+dayjs.extend(isBetween)
+dayjs.extend(isSameOrBefore)
+dayjs.extend(isSameOrAfter)
+dayjs.extend(duration)
+dayjs.extend(customParseFormat)
+dayjs.extend(dayOfYear);
+
+// 🗣️ Установка локали
+dayjs.locale('ru')
+
+// 📤 Экспорт по умолчанию
+export {dayjs}

package/dist/utils/eventBus.util.ts

@@ -0,0 +1,43 @@
+export type Handler<T> = (event: T) => void;
+
+export interface TypedEventBus<Events extends Record<string, any>> {
+    on<K extends keyof Events>(type: K, handler: Handler<Events[K]>): void;
+    off<K extends keyof Events>(type: K, handler: Handler<Events[K]>): void;
+    emit<K extends keyof Events>(type: K, evt?: Events[K]): void;
+    clear(): void;
+}
+
+
+
+export function EventBus<Events extends Record<string, any>>(): TypedEventBus<Events> {
+    const allHandlers = new Map<keyof Events, Handler<any>[]>();
+
+    return {
+        on<K extends keyof Events>(type: K, handler: Handler<Events[K]>) {
+            const handlers = allHandlers.get(type) || [];
+            handlers.push(handler);
+            allHandlers.set(type, handlers);
+        },
+
+        off<K extends keyof Events>(type: K, handler: Handler<Events[K]>) {
+            const handlers = allHandlers.get(type);
+            if (handlers) {
+                allHandlers.set(
+                    type,
+                    handlers.filter(h => h !== handler)
+                );
+            }
+        },
+
+        emit<K extends keyof Events>(type: K, evt?: Events[K]) {
+            const handlers = allHandlers.get(type);
+            if (handlers) {
+                handlers.forEach(handler => handler(evt));
+            }
+        },
+
+        clear() {
+            allHandlers.clear();
+        }
+    };
+}