@ldmjs/ui 1.0.90 → 2.0.0-beta.1

package/dist/scss/_switch.scss

@@ -0,0 +1,198 @@
+@use "sass:list";
+
+:root {
+  --switch-s-w: 32px;
+  --switch-s-h: 20px;
+  --switch-m-w: 40px;
+  --switch-m-h: 24px;
+  --switch-l-w: 56px;
+  --switch-l-h: 32px;
+}
+
+$sizearray: (
+  "x-small": (
+    // width
+    var(--switch-s-w),
+    // height
+    var(--switch-s-h),
+    // hint gap
+    8px,
+    // font size
+    var(--text-body-s)
+  ),
+  "small": (
+    var(--switch-m-w),
+    var(--switch-m-h),
+    8px,
+    var(--text-body-m)
+
+  ),
+  "large": (
+    var(--switch-l-w),
+    var(--switch-l-h),
+    12px,
+    var(--text-body-l)
+  ),
+);
+
+body {
+  .ld-switch {
+    position: relative;
+
+    input[type='checkbox'] {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      opacity: 0;
+    }
+
+    &:not(.ld-switch--disabled) {
+      cursor: pointer;
+
+      .ld-switch-track {
+        background-color: var(--grey-l-4);
+        cursor: pointer;
+
+        &:hover {
+          background-color: var(--grey-l-3);
+        }
+      }
+
+      .ld-switch-thumb {
+        cursor: pointer;
+      }
+
+      &.ld-switch--active {
+        .ld-switch-track {
+          background-color: var(--primary);
+
+          &:hover {
+            background-color: var(--primary-d-1);
+          }
+        }
+      }
+    }
+
+    .ld-switch-track {
+      display: block;
+      position: relative;
+      background-color: var(--grey-l-4);
+      transition: all 0.1s;
+
+      &:after {
+        content: '';
+        display: none;
+        position: absolute;
+        top: -4px;
+        left: -4px;
+        width: calc(100% + 8px);
+        height: calc(100% + 8px);
+        border: 2px solid var(--primary-d-1);
+        border-radius: 20px;
+      }
+    }
+
+    .ld-switch-thumb {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      position: absolute;
+      top: 2px;
+      left: 2px;
+      color: var(--grey-l-4);
+      background-color: var(--white);
+      transition: all 0.1s;
+    }
+
+    &.ld-switch--focused {
+      .ld-switch-track {
+        &:after {
+          display: block;
+        }
+      }
+    }
+
+    &.ld-switch--hovered {
+      .ld-switch-track {
+        background-color: var(--grey-l-3);
+      }
+    }
+
+    &.ld-switch--disabled,
+    &.ld-switch--readonly {
+      &.ld-switch--active {
+        .ld-switch-track {
+          background-color: var(--primary);
+        }
+      }
+      .ld-switch-thumb {
+        background-color: transparent;
+      }
+    }
+
+    &.ld-switch--disabled {
+      .ld-label-content {
+        color: var(--grey-l-2);
+      }
+    }
+
+    &.ld-switch--readonly {
+      .ld-label-content {
+        color: var(--grey-d-3);
+      }
+    }
+
+    @each $size, $values in $sizearray {
+      &.ld-switch--#{$size} {
+        $w: list.nth($values, 1);
+        $h: list.nth($values, 2);
+        $hintGap: list.nth($values, 3);
+        $f: list.nth($values, 4);
+        min-height: calc($h + 8px);
+        padding-top: 4px;
+
+        .ld-switch-track {
+          width: $w;
+          height: $h;
+          border-radius: 20px;
+        }
+
+        .ld-switch-thumb {
+          width: calc($h - 4px);
+          height: calc($h - 4px);
+          border-radius: calc($h - 4px);
+        }
+
+        &.ld-switch--active {
+          .ld-switch-thumb {
+            transform: translateX(calc($w - $h));
+          }
+        }
+
+        .ld-label-content {
+          font-size: $f;
+          line-height: calc($f + 6px);
+        }
+
+        .ld-switch-hint {
+          padding-left: calc($w + $hintGap);
+          font-size: calc($f - 2px);
+          line-height: calc($f - 2px + 6px);
+        }
+      }
+    }
+
+    .ld-switch-hint {
+      font-family: var(--regular);
+      color: var(--grey-d-1);
+    }
+
+    .ld-switch-label {
+      height: 20px;
+      min-height: 20px;
+      font-family: var(--medium);
+    }
+  }
+}

package/dist/scss/_tabs.scss

@@ -0,0 +1,318 @@
+:root {
+  --tabs-s: 40px;
+  --tabs-l: 48px;
+}
+
+body {
+  .ld-tabs {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+
+    .ld-tabs-content {
+      display: flex;
+      height: 100%;
+      width: 100%;
+      margin-left: 0;
+      overflow-y: auto;
+
+      .ld-tabs-wrapper {
+        display: flex;
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+      }
+
+      .header-text {
+        font-size: var(--font-size-2);
+      }
+
+      &-mobile {
+        height: 100%;
+      }
+
+      .vertical-body {
+        --w: 44px;
+        display: flex;
+        flex-flow: column nowrap;
+        width: calc(100% - var(--w)) !important;
+        height: 100%;
+      }
+    }
+
+    // --------- vertical
+
+    &.ld-tabs--vertical {
+      .ld-tabs-content {
+        .ld-tabs-wrapper {
+          flex: 1 1 auto;
+
+          .v-tabs {
+            .v-slide-group__prev {
+              display: none;
+            }
+            .v-slide-group__next {
+              display: none;
+            }
+          }
+        }
+      }
+    }
+
+    // --------- horizontal
+
+    &.ld-tabs--horizontal {
+      .ld-tabs-content {
+        .ld-tabs-wrapper {
+          flex-direction: column;
+
+          .v-tabs {
+            .v-slide-group__prev {
+              display: flex;
+            }
+            .v-slide-group__next {
+              display: flex;
+            }
+          }
+        }
+      }
+
+      // --------- small
+
+      &.ld-tabs--small {
+        .v-tabs {
+          height: var(--tabs-s) !important;
+
+          .v-tab {
+            height: var(--tabs-s) !important;
+            font-size: var(--text-body-s);
+
+            &.v-btn {
+              &:after {
+                top: 50%;
+                margin-top: -14px;
+                height: 28px;
+              }
+            }
+          }
+        }
+      }
+
+      // --------- large
+
+      &.ld-tabs--large {
+        .v-tabs {
+          height: var(--tabs-l) !important;
+
+          .v-tab {
+            height: var(--tabs-l) !important;
+            font-size: var(--text-body-m);
+
+            &.v-btn {
+              &:after {
+                top: 50%;
+                margin-top: -16px;
+                height: 32px;
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .v-tabs {
+      .v-tab {
+        &.v-btn:focus-visible {
+          &:after {
+            opacity: 1;
+          }
+        }
+      }
+    }
+
+    .v-tabs {
+      .v-tab {
+        display: flex !important;
+        font-family: var(--medium);
+        letter-spacing: 0 !important;
+        min-width: 80px;
+        padding: 0 12px;
+
+        &.v-btn {
+          position: relative;
+          border-width: 0 0 2px 0;
+          border-style: solid;
+          border-color: transparent;
+          color: var(--grey-d-3);
+          transition: all 0.1s;
+
+          &:after {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            display: block;
+            width: 100%;
+            border-radius: var(--border-radius);
+            border: 2px solid var(--focus);
+            opacity: 0;
+          }
+
+          &:hover {
+            border-color: var(--grey-l-3);
+            color: var(--text);
+          }
+
+          &.v-tab--selected {
+            border-color: var(--primary);
+            color: var(--primary);
+
+            &.v-btn--disabled {
+              border-color: var(--grey-l-2);
+            }
+          }
+
+          &.v-btn--disabled {
+            color: var(--grey-l-2);
+          }
+        }
+      }
+    }
+  }
+
+  .v-window {
+    background-color: var(--white);
+    box-shadow:
+      1px 0 var(--grey-l-5),
+      -1px 0 0 var(--grey-l-5);
+    overflow-y: auto;
+    height: 100%;
+    width: 100%;
+  }
+
+  .vertical-window.v-window {
+    padding: 10px 12px;
+    border-bottom: 1px solid var(--grey-l-5);
+    border-right: 1px solid var(--grey-l-5);
+    border-top: 1px solid var(--grey-l-5);
+
+    &--no-padding {
+      padding: 0 !important;
+    }
+  }
+
+  :deep() {
+    .ld-tabs {
+      .v-tabs {
+        &--vertical {
+          background: var(--grey-l-6);
+
+          .v-tab {
+            justify-content: flex-start;
+            border: 1px solid var(--grey-l-5);
+            border-bottom: none;
+            border-radius: 0 !important;
+            text-transform: none !important;
+            width: 100%;
+            min-width: auto !important;
+
+            &--selected {
+              background-color: var(--white);
+              border-right-color: transparent;
+            }
+          }
+
+          .v-tab:last-child {
+            border-bottom: 1px solid var(--grey-l-5) !important;
+          }
+
+          .v-slide-group__content {
+            flex-flow: column nowrap;
+            height: 100% !important;
+            width: 100% !important;
+
+            .v-btn__content {
+              text-overflow: ellipsis;
+              display: inline-flex;
+              justify-content: flex-start;
+              gap: 4px;
+              white-space: nowrap;
+              overflow: hidden;
+            }
+          }
+        }
+      }
+
+      .v-tabs.v-tabs--vertical.no-header {
+        .v-tab:first-child {
+          border-top: none;
+        }
+      }
+
+
+    }
+    .v-window {
+      &.mobile {
+        .tg-field {
+          .v-row {
+            .v-col {
+              flex: 1 0 0 !important;
+            }
+          }
+          .text-viewer-wrapper {
+            .v-col {
+              flex: 1 0 0 !important;
+            }
+          }
+        }
+      }
+    }
+
+    .v-slide-group--vertical {
+      border-color: var(--grey-l-5);
+      border: 1px;
+    }
+
+    .v-slide-group--vertical .v-tab__slider {
+      width: 0px;
+    }
+
+
+    .v-tabs-bar {
+      flex: none;
+      height: fit-content;
+      height: -moz-max-content;
+      max-height: fit-content;
+      max-height: -moz-max-content;
+      z-index: 1;
+    }
+
+    .v-window-item {
+      height: 100%;
+    }
+
+    .ld-tabs-mobile {
+      &.hide-tabs {
+        .v-tab {
+          display: none !important;
+        }
+      }
+
+      &.hide-body {
+        .v-slide-group {
+          width: 100% !important;
+        }
+        .v-window {
+          display: none !important;
+        }
+      }
+    }
+    .v-tabs-mobile {
+      .v-slide-group__content {
+        .v-btn__content {
+          display: block !important;
+        }
+      }
+    }
+  }
+}

package/dist/scss/_textmarkup.scss

@@ -0,0 +1,47 @@
+body {
+  .md-editor {
+    &-toolbar {
+      margin-bottom: 8px;
+    }
+    &-toolbar-left {
+      display: grid;
+      grid-auto-flow: column;
+      justify-content: start;
+      gap: 4px;
+    }
+    &-content {
+      position: relative;
+      font-size: var(--text-body-s);
+      padding: 12px 16px !important;
+
+      &-wrapper {
+        position: relative;
+        z-index: 1;
+      }
+
+      .cm-focused {
+        outline: none !important;
+      }
+
+      &:hover {
+        &:after {
+          border: 1px solid var(--input-border-color-hover);
+        }
+      }
+
+      &:after {
+        content: '';
+        display: block;
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        border: 1px solid var(--input-border-color-default);
+        border-radius: var(--border-radius);
+        transition: all 0.1s;
+        z-index: 0;
+      }
+    }
+  }
+}

package/dist/scss/_textviewer.scss

@@ -0,0 +1,13 @@
+body {
+  .ld-text-viewer {
+    min-width: 100%;
+    display: flex;
+    flex-direction: column;
+    white-space: break-spaces;
+    font-size: var(--font-size);
+
+    .column {
+      flex-flow: column;
+    }
+  }
+}

package/dist/scss/_toasted.scss

@@ -1,29 +1,35 @@
-@charset "UTF-8";
-
 @use "sass:math";
 
 $vt-namespace: "Vue-Toastification" !default;
-$vt-toast-min-width: 326px !default;
+$vt-toast-min-width: 400px !default;
 $vt-toast-max-width: 600px !default;
+
 $vt-toast-background: #ffffff !default;
 
 $vt-toast-min-height: 64px !default;
 $vt-toast-max-height: 800px !default;
 
 $vt-color-default: #1976d2 !default;
-$vt-text-color-default: #fff !default;
-// $vt-color-info: #2196f3 !default;
+$vt-text-color-default: var(--text) !default;
+
 $vt-color-info: var(--primary-l-4);
-$vt-text-color-info: #fff !default;
-// $vt-color-success: #4caf50 !default;
-$vt-color-success: var(--success);
-$vt-text-color-success: #fff !default;
-// $vt-color-warning: #ffc107 !default;
-$vt-color-warning: var(--warning-l-2);
-$vt-text-color-warning: #fff !default;
-// $vt-color-error: #ff5252 !default;
-$vt-color-error: var(--error-l-2);
-$vt-text-color-error: #fff !default;
+$vt-text-color-info: var(--text) !default;
+
+$vt-color-success: var(--success-l-5);
+$vt-text-color-success: var(--text) !default;
+
+$vt-color-warning: var(--warning-l-4);
+$vt-text-color-warning: var(--text) !default;
+
+$vt-color-error: var(--error-l-5);
+$vt-text-color-error: var(--text) !default;
+
+:root {
+  --vt-fill-success: var(--success-d-2);
+  --vt-fill-info: var(--primary-d-2);
+  --vt-fill-error: var(--error-d-2);
+  --vt-fill-warning: var(--warning-d-2);
+}
 
 $vt-color-progress-default: linear-gradient(
   to right,
@@ -37,7 +43,9 @@ $vt-color-progress-default: linear-gradient(
 
 $vt-mobile: "only screen and (max-width : 600px)" !default;
 $vt-not-mobile: "only screen and (min-width : 600px)" !default;
-$vt-font-family: "Lato", Helvetica, "Roboto", Arial, sans-serif !default;
+$vt-font-title: "Roboto Semi Bold", 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+$vt-font-text: "Roboto Regular", Arial, sans-serif;
+$vt-font-size: var(--texy-body-s);
 $vt-z-index: 9999 !default;
 
 .#{$vt-namespace}__container {
@@ -138,11 +146,11 @@ $vt-z-index: 9999 !default;
   min-height: $vt-toast-min-height;
   box-sizing: border-box;
   margin-bottom: 1rem;
-  padding: 22px 24px;
-  border-radius: 8px;
-  box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.1), 0 2px 15px 0 rgba(0, 0, 0, 0.05);
+  padding: 20px 20px;
+  border-radius: 12px;
+  // box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.1), 0 2px 15px 0 rgba(0, 0, 0, 0.05);
   justify-content: space-between;
-  font-family: $vt-font-family;
+  font-size: $vt-font-size;
   max-width: $vt-toast-max-width;
   min-width: $vt-toast-min-width;
   pointer-events: auto;
@@ -183,11 +191,25 @@ $vt-z-index: 9999 !default;
   }
 
   &-body {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
     flex: 1;
-    line-height: 24px;
-    font-size: 16px;
+    line-height: 20px;
     word-break: break-word;
     white-space: pre-wrap;
+
+    &-title {
+      font-family: $vt-font-title;
+      font-size: var(--text-body-m);
+      font-weight: 600;
+    }
+
+    &-text {
+      padding-top: 8px;
+      font-family: $vt-font-text;
+      font-size: var(--text-body-s);
+    }
   }
 
   &-component-body {