@ldmjs/ui 2.0.0-beta.2 → 2.0.1-beta.0

package/{dist → build/dist}/scss/_inputs.scss

@@ -51,10 +51,13 @@ $input-border-color-hover: var(--grey);
 $input-disabled-color: var(--grey-l-2);
 $input-disabled-background-color: var(--grey-l-6);
 
+$input-border-color-readonly: var(--grey-l-6);
+$input-readonly-color: var(--grey-d-3);
+
 $colors: (
   "grey": ("default": $input-border-color-default, "hover": $input-border-color-hover),
-  "success": ("default": var(--success-d-1), "hover": var(--success-d-1)),
-  "error": ("default": var(--error), "hover": var(--error)),
+  "success": ("default": var(--success-d-1), "hover": var(--success-d-2)),
+  "error": ("default": var(--error), "hover": var(--error-d-1)),
 );
 
 :root {
@@ -67,6 +70,46 @@ $colors: (
   --input-disabled-background-color: #{$input-disabled-background-color};
 }
 
+@mixin inputlabel($parent, $size) {
+  $label-on-top: utils.getSelector($parent, '--label-on-top');
+  @include utils.not-class(utils.getSelector($parent, '--label-on-top')) {
+    .ld-label {
+      height: $size;
+    }
+  }
+  &#{utils.getSelector($parent, '--label-on-top')} {
+    .ld-label {
+      margin-bottom: 4px;
+    }
+  }
+
+  .ld-label {
+    font-size: var(--text-body-s);
+    &-content {
+      color: var(--grey-d-1);
+    }
+  }
+}
+
+@mixin inputdetails() {
+  .v-input__details {
+    position: relative;
+    padding: 0 !important;
+    margin: 6px 0 0 0 !important;
+    z-index: 1;
+    height: 20px;
+    min-height: 20px;
+    align-items: center;
+
+    .v-messages {
+      color: var(--grey-d-1);
+      font-family: var(--regular);
+      font-size: var(--font-size);
+      line-height: calc(var(--font-size) + 6px);
+    }
+  }
+}
+
 @mixin inputsize() {
   $parent: utils.getParent(&);
 
@@ -100,19 +143,9 @@ $colors: (
           }
         }
 
-        .ld-label {
-          height: $size;
-          &-content {
-            font-size: $font;
-          }
-        }
+        @include inputlabel($parent, $size);
 
-        .v-input__details {
-          .v-messages {
-            font-size: calc($font - 2px);
-            line-height: calc($font - 2px + 6px);
-          }
-        }
+        @include inputdetails();
 
         #{utils.getSelector($parent, '-help')} {
           display: flex;
@@ -248,29 +281,37 @@ $colors: (
             }
           }
 
-          &:hover {
-            .v-field.v-field--variant-outlined {
-              @include vfieldoutline($hover);
+          &:not(.v-input--readonly) {
+            &:hover {
+              .v-field.v-field--variant-outlined {
+                @include vfieldoutline($hover);
+              }
+
+              .v-input__append {
+                &:after {
+                  border-color: $hover;
+                  border-width: 1px;
+                }
+              }
             }
 
-            .v-input__append {
-              &:after {
-                border-color: $hover;
-                border-width: 1px;
+            &.v-input--focused {
+              .v-field.v-field--variant-outlined {
+                @include vfieldoutline(var(--focus));
+              }
+
+              .v-input__append {
+                &:after {
+                  border-color: var(--focus);
+                  border-width: 2px;
+                }
               }
             }
           }
 
-          &.v-input--focused {
+          &.v-input--readonly {
             .v-field.v-field--variant-outlined {
-              @include vfieldoutline(var(--focus));
-            }
-
-            .v-input__append {
-              &:after {
-                border-color: var(--focus);
-                border-width: 2px;
-              }
+              @include vfieldoutline($input-border-color-readonly);
             }
           }
         }
@@ -302,22 +343,6 @@ $colors: (
   }
 }
 
-@mixin inputdetails() {
-  .v-input__details {
-    position: relative;
-    padding: 0 !important;
-    margin: 6px 0 0 0 !important;
-    z-index: 1;
-    height: 20px;
-    min-height: 20px;
-    align-items: center;
-
-    .v-messages {
-      color: var(--grey-d-1);
-    }
-  }
-}
-
 @mixin inputloader() {
   $parent: utils.getParent(&);
   $selector: utils.getSelector($parent, '-loader');
@@ -448,9 +473,17 @@ body {
   }
 
   .v-input {
-    .v-input__details {
-      .v-messages {
-        font-family: var(--regular);
+    &.v-input--readonly {
+      &.v-input--focused {
+        .v-field.v-field--variant-outlined {
+          .v-field__outline {
+            --v-field-border-width: 1px;
+          }
+        }
+      }
+
+      .v-field__input {
+        color: $input-readonly-color !important;
       }
     }
   }
@@ -548,6 +581,27 @@ body {
     }
   }
 
+  .ld-daterange {
+    @extend %custom-edit;
+
+    @include inputsize();
+
+    @include vfield();
+
+    @include vfieldborder();
+
+    @include vfielddisabled();
+
+    @include inputdetails();
+
+    .ld-daterange-date-field {
+      position: relative;
+      display: flex;
+      align-items: center;
+      flex-basis: 100%;
+    }
+  }
+
   .ld-timepicker {
     @extend %custom-edit;
 
@@ -587,7 +641,34 @@ body {
 
     @include vfield();
 
-    @include vfieldborder();
+    &:not(.ld-edit-list-box--readonly) {
+      .v-autocomplete {
+        & > .v-input__control > .v-field.v-field--variant-outlined {
+          @include vfieldoutline($input-border-color-default);
+        }
+
+        &:hover {
+          & > .v-input__control > .v-field.v-field--variant-outlined {
+            @include vfieldoutline($input-border-color-hover);
+          }
+
+          & > .v-input__append {
+            &:after {
+              border-color: $input-border-color-hover;
+              border-width: 1px;
+            }
+          }
+        }
+      }
+    }
+
+    &.ld-edit-list-box--readonly {
+      .v-autocomplete {
+        & > .v-input__control > .v-field.v-field--variant-outlined {
+          @include vfieldoutline($input-border-color-readonly);
+        }
+      }
+    }
 
     @include vfielddisabled();
 
@@ -679,6 +760,12 @@ body {
   .ld-textarea {
     @extend %custom-edit;
 
+    ::-webkit-resizer{
+      background-image: -webkit-repeating-radial-gradient(center center, hsla(220, 5%, 56%, 1), hsla(220, 5%, 56%, 1) 1px, transparent 1px, transparent 100%);
+      background-size: 3px 3px;
+      border-bottom-right-radius: var(--border-radius);
+    }
+
     $parent: '.ld-textarea';
 
     $props: (
@@ -713,14 +800,14 @@ body {
             line-height: calc($font + 6px);
             padding: $p;;
           }
-        }
-
-        .ld-label {
-          &-content {
-            font-size: $font;
+          .v-field__clearable {
+            top: 4px;
+            right: 4px;
           }
         }
 
+        @include inputlabel($parent, $size);
+
         .ld-textarea-help {
           height: $size;
           display: flex;
@@ -728,12 +815,6 @@ body {
           margin-left: 8px;
         }
 
-        &.ld-textarea--label-on-top {
-          .ld-label {
-            height: $size;
-          }
-        }
-
         &.ld-textarea--clearable {
           .v-field {
             .v-field__input {
@@ -743,12 +824,7 @@ body {
           }
         }
 
-        .v-input__details {
-          .v-messages {
-            font-size: calc($font - 2px);
-            line-height: calc($font - 2px + 6px);
-          }
-        }
+        @include inputdetails();
       }
     }
 
@@ -773,12 +849,6 @@ body {
   .ld-text-markup {
     @extend %custom-edit;
 
-    .ld-label {
-      &-content {
-        font-size: var(--text-body-s);
-      }
-    }
-
     &--focused {
       .md-editor-content {
         &:after {
@@ -835,13 +905,6 @@ body {
     }
 
     @include inputdetails();
-
-    .v-input__details {
-      .v-messages {
-        font-size: var(--font-size);
-        line-height: calc(var(--font-size) + 6px);
-      }
-    }
   }
 
   .v-select__content,
@@ -864,6 +927,22 @@ body {
     }
   }
 
+  .v-menu.ld-daterange-menu {
+    .v-card.ld-daterange-dropdown {
+      padding: 0 !important;
+      .v-card-text  {
+        display: flex;
+        padding: 0 !important;
+      }
+      .v-card-actions {
+        display: flex;
+        justify-content: flex-end;
+        padding: 16px !important;
+        min-height: unset;
+      }
+    }
+  }
+
   .v-menu.ld-timepicker-menu {
     .ld-timepicker-dropdown {
       padding: 16px !important;

package/{dist → build/dist}/scss/_tabs.scss

@@ -182,9 +182,6 @@ body {
 
   .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%;
@@ -201,118 +198,117 @@ body {
     }
   }
 
-  :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;
-        }
-      }
-    }
-  }
+  // :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/build/dist/scss/_treeview.scss

@@ -0,0 +1,34 @@
+@use "@ldmjs/treeview/styles";
+
+body {
+  .ld-tree-view {
+    .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);
+      }
+    }
+    &--hovered {
+      & > ul {
+        & > li {
+          .ld-tree-view__item {
+            &:hover {
+              background-color: var(--primary-l-6);
+            }
+          }
+        }
+      }
+    }
+
+    .ld-tree-view--selected {
+      & > .ld-tree-view__item {
+        color: var(--primary-d-1);
+        background-color: var(--primary-l-5);
+      }
+    }
+  }
+}

package/{dist → build/dist}/scss/index.scss

@@ -31,12 +31,11 @@
 @use "step";
 @use "slider";
 @use "editor";
-@use "treeview";
 @use "textviewer";
+@use "treeview";
 @use "textmarkup";
 @use "expansions";
 
-
 @use "@ldmjs/datatable/styles";
 
 @use 'vuetify' with (
@@ -134,7 +133,6 @@ body {
     display: flex;
     flex-direction: column;
     justify-content: center;
-    min-height: var(--input-height);
 
     .ld-label-content {
       color: var(--text);

package/{dist → build/dist}/scss/utils.scss

@@ -15,3 +15,9 @@
 @function getSelector($class, $prefix) {
   @return selector.append($class, $prefix);
 }
+
+@mixin not-class($className) {
+  &:not(#{$className}) {
+    @content;
+  }
+}

package/build/dist/types/daterange.d.ts

@@ -0,0 +1,42 @@
+export type DateRange = [string | Date, string | Date];
+
+export interface TimepickerProps {
+  placeholder: string;
+  is24hr: boolean;
+}
+
+export interface DatepickerProps {
+  minDate: Date;
+  maxDate: Date;
+  disabledDates: Array<Date>;
+}
+
+export interface IMaskOptions {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  mask: any;
+  pattern: string;
+  lazy: boolean;
+  format: (date: Date) => string;
+  parse: (str: string) => Date | Array<Date>;
+  blocks: {
+    d: {
+      mask: typeof IMask.MaskedRange;
+      from: number;
+      to: number;
+      maxLength: number;
+    };
+    m: {
+      mask: typeof IMask.MaskedRange;
+      from: number;
+      to: number;
+      maxLength: number;
+    };
+    Y: {
+      mask: typeof IMask.MaskedRange;
+      from: number;
+      to: number;
+    };
+  };
+  min: unknown;
+  max: unknown;
+}