@ldmjs/ui 1.0.89 → 2.0.0-beta.0

package/dist/scss/_toggle.scss

@@ -0,0 +1,125 @@
+@use "sass:list";
+
+$sizearray: (
+  "small": (
+    // font size
+    var(--text-body-s),
+    // height
+    var(--button-xs),
+    // radius
+    var(--border-radius),
+    // icon padding
+    12px
+  ),
+  "large": (
+    var(--text-body-m),
+    var(--button-s),
+    var(--border-radius),
+    16px,
+  ),
+  "x-large": (
+    var(--text-body-l),
+    var(--button-m),
+    var(--border-radius),
+    20px,
+  ),
+);
+
+body {
+  .ld-toggle-buttons {
+    width: max-content;
+    & > div {
+      display: grid;
+      grid-auto-flow: column;
+      gap: 8px;
+      background-color: var(--grey-l-6);
+      width: max-content;
+      padding: 4px;
+
+      .ld-toggle-button {
+        position: relative;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-family: var(--medium);
+        color: var(--grey-d-3);
+        transition: all 0.1s;
+
+        .ld-toggle-button-content {
+          display: grid;
+          align-items: center;
+          grid-auto-flow: column;
+          gap: 8px;
+        }
+
+        &:hover {
+          color: var(--text);
+        }
+
+        &.ld-toggle-button--selected {
+          background-color: var(--white);
+          color: var(--primary);
+        }
+
+        &[disabled] {
+          color: var(--grey-l-2);
+        }
+
+        &:after {
+          content: '';
+          display: block;
+          position: absolute;
+          top: -2px;
+          left: -2px;
+          width: calc(100% + 4px);
+          height: calc(100% + 4px);
+          border: 2px solid var(--focus);
+          border-radius: calc(var(--border-radius) + 4px);
+          opacity: 0;
+        }
+
+
+        &:focus-visible {
+          &:after {
+            opacity: 1;
+          }
+        }
+      }
+    }
+
+    @each $size, $values in $sizearray {
+      $f: list.nth($values, 1);
+      $h: list.nth($values, 2);
+      $r: list.nth($values, 3);
+      $p: list.nth($values, 4);
+      &.ld-toggle-buttons--#{$size} {
+        & > div {
+          border-radius: calc($r + 4px);
+
+          .ld-toggle-button {
+            font-size: $f;
+            min-width: $h;
+            height: $h;
+            border-radius: $r;
+
+            &:not(.ld-toggle-button--icon) {
+              padding: 0 $p;
+            }
+          }
+        }
+        &.ld-toggle-buttons--rounded {
+          & > div {
+            border-radius: $h;
+            .ld-toggle-button {
+              border-radius: calc($h - 6px);
+
+              &:after {
+                border-radius: calc($h - 6px + 4px);
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/dist/scss/_toolbar.scss

@@ -13,4 +13,43 @@
   .v-toolbar__content > .v-btn:last-child {
     margin-inline-end: 0;
   }
-}
+}
+
+body {
+  .ld-page-toolbar {
+    position: relative;
+    background-color: var(--white);
+    box-shadow: var(--shadow-sm);
+    z-index: 1;
+
+    &-wrapper {
+      display: grid;
+      width: 100%;
+      height: 100%;
+      padding: 0 12px;
+
+      &:not(.--preview) {
+        grid-template-columns: 100%;
+        grid-template-rows: var(--input-height);
+        row-gap: 4px;
+      }
+
+      &.--preview {
+        grid-template-columns: 1fr;
+      }
+    }
+
+    &-title {
+      display: grid;
+      grid-template-rows: 100%;
+      padding: 0 8px;
+    }
+
+    &-inner {
+      display: grid;
+      grid-template-rows: 100%;
+      grid-template-columns: 1fr max-content;
+      column-gap: 8px;
+    }
+  }
+}

package/dist/scss/_tooltip.scss

@@ -0,0 +1,30 @@
+body {
+  .v-tooltip {
+    .v-overlay__content {
+      font-family: var(--regular);
+      font-size: var(--text-body-s);
+      line-height: 20px;
+
+      border-radius: var(--border-radius);
+      box-shadow: var(--shadow-m);
+
+      &.bg-dark {
+        background-color: var(--dark);
+        color: var(--white);
+      }
+
+      &.bg-light {
+        background-color: var(--white);
+        color: var(--grey-d-3);
+      }
+
+      &.ld-tooltip {
+        padding: 10px 12px;
+      }
+
+      &.ld-popover {
+        padding: 20px;
+      }
+    }
+  }
+}

package/dist/scss/_treeview.scss

@@ -0,0 +1,35 @@
+body {
+  .ld-tree-view {
+    .ld-tree-view__category {
+      .ld-tree-view__item {
+        font-family: var(--medium);
+        font-size: var(--text-body-s);
+        color: var(--text);
+        min-height: var(--input-s);
+
+        .ld-tree-view__opener {
+          color: var(--grey-d-3);
+        }
+      }
+
+      &--selected {
+        & > .ld-tree-view__item {
+          color: var(--primary-d-1);
+          background-color: var(--primary-l-5);
+        }
+      }
+    }
+
+    &--hovered {
+      & > ul {
+        & > li {
+          & > .ld-tree-view__item {
+            &:hover {
+              background-color: var(--primary-l-6);
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/dist/scss/_uploader.scss

@@ -0,0 +1,167 @@
+body {
+  .ld-uploader {
+    position: relative;
+
+    .v-card-text {
+      padding: 0 !important;
+    }
+
+    input[type="file"] {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 0;
+      height: 0;
+      opacity: 0;
+    }
+
+    .ld-label-content {
+      color: var(--grey-d-1) !important;
+    }
+
+    .ld-uploader-droparea {
+      position: relative;
+      border: 1px dashed var(--grey-l-3);
+      border-radius: 8px;
+      margin-bottom: 8px;
+      transition: all 0.2s;
+
+      &:hover {
+        background-color: var(--primary-l-6);
+        border-color: var(--primary-l-2);
+
+        .ld-uploader-placeholder {
+          svg {
+            color: var(--primary-d-1);
+          }
+        }
+      }
+    }
+
+    .ld-uploader-max {
+      display: flex;
+      justify-content: center;
+      font-size: var(--font-size);
+      color: var(--grey-d-1);
+    }
+
+    .ld-uploader-placeholder {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      font-size: var(--text-body-s);
+      font-weight: 500;
+
+      span {
+        line-height: 21px;
+        color: var(--grey-d-3);
+      }
+    }
+
+    .ld-uploader-validate {
+      font-size: var(--font-size);
+      height: 20px;
+    }
+
+    .ld-uploader-items {
+      display: flex;
+      flex-direction: column;
+      padding-top: 24px;
+      max-width: 90%;
+    }
+
+    .ld-uploader-item {
+      display: flex;
+      margin-bottom: 24px;
+
+      &-icon {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 36px;
+        height: 36px;
+        background-color: var(--primary-l-6);
+        border-radius: 36px;
+        color: var(--primary-d-1);
+      }
+    }
+
+    .ld-uploader-progress {
+      margin-top: 6px;
+    }
+
+    // ------------- x-small
+
+    &.ld-uploader--x-small {
+      .ld-uploader-droparea {
+        padding: 20px 0;
+
+        svg {
+          margin-right: 8px;
+        }
+      }
+    }
+
+    // ------------- small
+
+    &.ld-uploader--small {
+      .ld-uploader-droparea {
+        padding: 32px 0;
+
+        svg {
+          margin-bottom: 16px;
+        }
+      }
+    }
+
+    // ------------- large
+
+    &.ld-uploader--large {
+      .ld-uploader-droparea {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        padding: 0;
+
+        svg {
+          margin-bottom: 24px;
+        }
+      }
+    }
+
+    &.ld-uploader--drag {
+      .ld-uploader-droparea {
+        background-color: var(--primary-l-5);
+        border-color: var(--peimary-l-2);
+      }
+    }
+
+    &.ld-uploader--disabled {
+      .ld-uploader-droparea {
+        background-color: var(--grey-l-6);
+        border-color: var(--grey-l-3);
+
+        &:hover {
+          .ld-uploader-placeholder {
+            color: var(--grey-l-2);
+
+            svg {
+              color: var(--grey-l-2);
+            }
+          }
+        }
+      }
+      .ld-uploader-placeholder {
+        color: var(--grey-l-2);
+
+        svg {
+          color: var(--grey-l-2);
+        }
+      }
+
+      .ld-uploader-max {
+        color: var(--grey-l-2);
+      }
+    }
+  }
+}

package/dist/scss/_variables.scss

@@ -1,33 +1,11 @@
-$font-size: 12px !default; // основной шрифт приложения
-$input-height: 28px !default; // высота атомарного элемента ui (button, input)
+$border-radius: 8px !default; // радиус скругления атомарного элемента ui
 $icon-height: 24px !default; // размеры обычной иконки
-$border-radius: 4px !default; // радиус скругления атомарного элемента ui
-$chip-height: 20px !default; // высота элемента chip
-$toolbar-height: 44px !default; // высота тулбара
-$toolbar-border-radius: 8px !default; // радиус скругления тулбара
-$pager-height: 32px !default;
-
-$ld-tab-height: $input-height + 10px; // высота элемента ld-tab
-
-$shadow-1: 0px 3px 4px 0px rgba(0, 0, 0, 0.14);
-$shadow-2: 0px 3px 4px 0px rgba(0, 0, 0, 0.20);
-$shadow-3: 0px 5px 6px 0px rgba(0, 0, 0, 0.30);
-$shadow-4: 0px 16px 20px 0px rgba(0, 0, 0, 0.20);
 
 :root {
-  --font-size--1: #{calc(var(--font-size) - 1px)};
-  --font-size: #{$font-size};
-  --font-size-2: #{calc(var(--font-size) + 2px)};
-  --input-height: #{$input-height};
+  --text: var(--grey-d-5);
+  --focus: var(--primary-d-1);
+  --highlight: var(--grey-d-1);
+  --white: hsla(255, 100%, 100%, 100%);
   --border-radius: #{$border-radius};
-  --chip-height: #{$chip-height};
-  --ld-tab-height: #{$ld-tab-height};
-  --toolbar-height: #{$toolbar-height};
-  --toolbar-border-radius: #{$toolbar-border-radius};
-  --pager-height: #{$pager-height};
   --icon-height: #{$icon-height};
-  --shadow-1: #{$shadow-1};
-  --shadow-2: #{$shadow-2};
-  --shadow-3: #{$shadow-3};
-  --shadow-4: #{$shadow-4};
 }

package/dist/scss/index.scss

@@ -1,16 +1,140 @@
-@use 'fonts';
-@use 'colors';
-@use 'variables';
-@use 'buttons';
-@use 'chip';
-@use 'breadcrumbs';
-@use 'inputs';
-@use 'calendar';
-@use 'toolbar';
-@use 'multiselect';
-@use 'animations';
-@use 'toasted';
-@use 'dialogs';
-@use 'iterator';
-@use 'pager';
-@use 'time';
+@use "fonts";
+@use "colors";
+@use "shadows";
+@use "scroll";
+@use "tooltip";
+@use "variables";
+@use "buttons";
+@use "checkbox";
+@use "radiogroup";
+@use "radiobutton";
+@use "switch";
+@use "chip";
+@use "badge";
+@use "avatar";
+@use "breadcrumbs";
+@use "loader";
+@use "splitter";
+@use "tabs";
+@use "toggle";
+@use "progress";
+@use "inputs";
+@use "calendar";
+@use "toolbar";
+@use "animations";
+@use "toasted";
+@use "dialogs";
+@use "iterator";
+@use "pager";
+@use "time";
+@use "uploader";
+@use "step";
+@use "slider";
+@use "editor";
+@use "treeview";
+@use "textviewer";
+@use "textmarkup";
+
+@use 'vuetify' with (
+  $color-pack: false,
+);
+
+body {
+  .v-card {
+    background-color: var(--white);
+  }
+
+  .v-menu {
+    .v-overlay__content {
+      border-radius: var(--border-radius);
+      background-color: var(--white);
+      box-shadow: var(--shadow-l);
+
+      .v-list {
+        background-color: var(--white);
+
+        .v-list-item__overlay {
+          background-color: var(--grey-l-6);
+        }
+
+        .v-list-item__prepend {
+          display: flex;
+          align-items: start;
+          height: 100%;
+        }
+      }
+    }
+  }
+
+  .v-list {
+    border-radius: var(--border-radius);
+
+    .v-list-item__overlay,
+    .v-list-item__underlay {
+      display: none;
+    }
+
+    .v-list-item {
+      transition: all 0.1s;
+      color: var(--grey-d-3);
+      &:hover {
+        background-color: var(--grey-l-6);
+        color: var(--text);
+      }
+
+      &--active {
+        color: var(--primary-d-1);
+        &:hover {
+          color: var(--primary-d-1);
+        }
+      }
+
+      .v-list-item__content {
+        .v-list-item-title {
+          font-family: var(--regular);
+          font-weight: 500;
+        }
+        .v-list-item-subtitle {
+          font-family: var(--regular);
+          color: var(--grey-d-1);
+        }
+      }
+    }
+
+    &.v-list--x-small {
+      .v-list-item {
+        padding: 6px 12px;
+      }
+    }
+
+    &.v-list--small {
+      .v-list-item {
+        padding: 8px 12px;
+      }
+    }
+
+    &.v-list--large {
+      .v-list-item {
+        padding: 12px 20px;
+      }
+    }
+  }
+
+  .ld-label {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    min-height: var(--input-height);
+
+    .ld-label-content {
+      color: var(--text);
+      line-height: 20px;
+    }
+
+    .ld-label-reqiured::after {
+      content: '*';
+      display: inline-block;
+      color: var(--error);
+    }
+  }
+}

package/dist/scss/utils.scss

@@ -0,0 +1,17 @@
+@use "sass:selector";
+@use "sass:list";
+
+@function getParent($class) {
+  $parent: '';
+
+  @each $selector in $class {
+    $l: list.length($selector);
+    $parent: list.nth($selector, $l);
+  }
+
+  @return $parent;
+}
+
+@function getSelector($class, $prefix) {
+  @return selector.append($class, $prefix);
+}

package/dist/types/breadcrumbs.d.ts

@@ -14,9 +14,11 @@ export interface IRoute {
 }
 
 export interface IBreadcrumbsItem {
+  uid?: number;
   text?: string;
   remark?: string;
   route: IRoute;
   disabled?: boolean;
+  hidden?: boolean;
   data?: unknown;
 }

package/dist/types/calendar.d.ts

@@ -1,73 +1,8 @@
-export interface IAttr {
-  // An optional key can be used for retrieving this attribute later,
-  // and will most likely be derived from your data object
-  key: Any;
-  // Attribute type definitions
-  content?: string; // Boolean, String, Object
-  highlight: boolean | string | IHighlight; // Boolean, String, Object
-  dot?: boolean; // Boolean, String, Object
-  bar?: boolean; // Boolean, String, Object
-  popover?: {
-    label: string;
-    visibility: 'hover' | 'click';
-    hideIndicator: boolean;
-  };
-  // Your custom data object for later access, if needed
-  customData?: Record<string, unknown>;
-  // We also need some dates to know where to display the attribute
-  // We use a single date here, but it could also be an array of dates,
-  //  a date range or a complex date pattern.
-  dates: Date | Array<Date>;
-  // Think of `order` like `z-index`
-  order?: number;
-}
-
-export type Attributes = Array<IAttr>;
-
-export interface ICalendarDay {
-  date: Date;
-}
-
-interface IHighlight {
-  color?: string;
-  fillMode?: string; // solid (default), light, outline.
-  class?: string; // Class to apply to the highlight background element.
-  style?: Record<string, string>; // Style to apply to the highlight background element.
-  contentClass?: string; // Class to apply to the highlight content element.
-  contentStyle?: Record<string, string>; // Style to apply to the highlight content element.
-  hightlight?: boolean;
-}
-
-interface IPage {
-  id: string;
-  day?: number;
-  week?: number;
-  month: number;
-  year: number;
-  trimWeeks: boolean;
-  position: number;
-  row: number;
-  rowFromEnd: number;
-  column: number;
-  columnFromEnd: number;
-  showWeeknumbers: boolean;
-  showIsoWeeknumbers: boolean;
-  weeknumberPosition: string;
-  monthTitle: string;
-  weekTitle?: string;
-  dayTitle?: string;
-  title: string;
-  shortMonthLabel: string;
-  monthLabel: string;
-  shortYearLabel: string;
-  yearLabel: string;
-}
-
-export interface IInitialPage {
-  month: number;
-  year: number;
-}
-
-export interface IInstance {
-  moveBy: (value: number) => void;
-}
+export type DatetimeValueRaw =
+  | Date
+  | Array<number>
+  | string
+  | number
+  | { year: number; month: number; date: number; hours?: number; minutes?: number; seconds?: number; ms?: number };
+
+export type ViewMode = 'month' | 'months' | 'year';