@ldmjs/ui 2.1.5 → 2.1.6

package/dist/scss/_tabs.scss

@@ -48,15 +48,66 @@ body {
           flex: 1 1 auto;
 
           .v-tabs {
+            .v-btn.v-tab {
+              width: 100%;
+              .v-btn__content {
+                justify-content: flex-start;
+                width: 100%;
+              }
+            }
             .v-slide-group__prev {
               display: none;
             }
             .v-slide-group__next {
               display: none;
             }
+            .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;
+              }
+            }
+          }
+
+          .ld-tab-header {
+            font-family: var(--medium);
           }
         }
       }
+
+      // --------- small
+
+      &.ld-tabs--small {
+        .ld-tab-header {
+          font-size: var(--text-body-s);
+          height: var(--tabs-s) !important;
+        }
+        .v-btn.v-tab {
+          font-size: var(--text-body-s);
+          height: var(--tabs-s) !important;
+        }
+      }
+
+      // --------- large
+
+      &.ld-tabs--large {
+        .ld-tab-header {
+          font-size: var(--text-body-m);
+          height: var(--tabs-l) !important;
+        }
+        .v-btn.v-tab {
+          font-size: var(--text-body-m);
+          height: var(--tabs-l) !important;
+        }
+      }
     }
 
     // --------- horizontal
@@ -73,6 +124,42 @@ body {
             .v-slide-group__next {
               display: flex;
             }
+
+            .v-tab {
+              &.v-btn {
+                border-width: 0 0 2px 0;
+                border-style: solid;
+                border-color: transparent;
+                min-width: 80px;
+                padding: 0 12px;
+
+                &: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);
+                  }
+                }
+
+                &:after {
+                  content: '';
+                  position: absolute;
+                  top: 0;
+                  left: 0;
+                  display: block;
+                  width: 100%;
+                  border-radius: var(--border-radius);
+                  border: 2px solid var(--focus);
+                  opacity: 0;
+                }
+              }
+            }
           }
         }
       }
@@ -135,43 +222,12 @@ body {
         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);
           }
@@ -187,128 +243,40 @@ body {
     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);
+  .v-tabs-bar {
+    flex: none;
+    height: fit-content;
+    height: -moz-max-content;
+    max-height: fit-content;
+    max-height: -moz-max-content;
+    z-index: 1;
+  }
 
-    &--no-padding {
-      padding: 0 !important;
-    }
+  .v-window-item {
+    height: 100%;
   }
 
-  // :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;
-  //       }
-  //     }
-  //   }
-  // }
+  .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/index.scss

@@ -87,6 +87,7 @@ body {
     .v-list-item {
       color: var(--grey-d-3);
       transition: all 0.1s;
+      min-height: var(--input-s);
       &:hover {
         background-color: var(--grey-l-6);
         color: var(--text);
@@ -102,6 +103,7 @@ body {
       .v-list-item__content {
         .v-list-item-title {
           font-family: var(--regular);
+          font-size: var(--text-body-s);
           font-weight: 500;
         }
         .v-list-item-subtitle {

package/dist/types/dialogs.d.ts

@@ -7,6 +7,7 @@ export interface IDialogProps {
   size?: string;
   width?: string | number;
   height?: string | number;
+  css?: string;
   align?: 'left' | 'right';
 }
 
@@ -69,12 +70,14 @@ export interface IModalInfo {
   cancelTitle?: string;
   okResult?: number | string | boolean | IModalResult<IViewModel<number | string>>;
   cancelResult?: number | string | boolean | IModalResult<IViewModel<number | string>>;
+  settedResult?: boolean;
   hideFooter?: boolean;
   size?: DialogSize;
   width?: number | string;
   height?: number | string;
   fullHeight?: boolean;
   align?: 'left' | 'right';
+  css?: string;
   closable?: boolean;
   expandable?: boolean;
   minimizable?: boolean;
@@ -127,81 +130,63 @@ export class Dialog {
     public content?: string,
     public pressEnterAsOk?: boolean,
     public pressEscAsCancel?: boolean,
-    public hostObject?: IHostObject
+    public hostObject?: IHostObject,
+    public size?: 's' | 'm' | 'l',
+    public width?: string | number,
+    public height?: string | number,
+    public css?: string,
+    public align?: 'left' | 'right'
   ) {}
 }
 
+export class InteractiveDialog extends Dialog {
+  loading: boolean;
+  fullHeight: boolean;
+  closable: boolean;
+  hideFooter: boolean;
+  constructor(data: IInterativeDialogProps) {}
+}
+
 export class AlertDialog extends Dialog {
-  constructor(data: {
-    title: string;
-    content: string;
-    pressEnterAsOk?: boolean;
-    pressEscAsCancel?: boolean;
-    hostObject?: IHostObject;
-  });
+  constructor(data: IDialogProps) {}
 }
 
 export class PromptDialog extends Dialog {
-  width?: string;
-  constructor(data: {
-    title: string;
-    width?: string;
-    pressEnterAsOk?: boolean;
-    pressEscAsCancel?: boolean;
-    hostObject?: IHostObject;
-  });
+  constructor(data: IDialogProps);
 }
 
-export class ConfirmDialog extends Dialog {
-  okTitle?: string;
-  cancelTitle?: string;
+export class ConfirmDialog extends InteractiveDialog {
   okResult?: number | string | boolean;
   cancelResult?: number | string | boolean;
-  constructor(data: {
-    title: string;
-    text: string;
-    okTitle?: string;
-    cancelTitle?: string;
-    okResult?: number | string | boolean;
-    cancelResult?: number | string | boolean;
-    pressEnterAsOk?: boolean;
-    pressEscAsCancel?: boolean;
-    hostObject?: IHostObject;
-  });
+  constructor(
+    data: IInterativeDialogProps & {
+      okResult?: number | string | boolean;
+      cancelResult?: number | string | boolean;
+    }
+  ) {}
 }
 
-export class InfoDialog extends Dialog {
+export class InfoDialog extends InteractiveDialog {
   component: string;
   componentProps: Record<string, unknown>;
-  width?: string;
-  height?: string;
   fullHeight?: boolean;
-  loading?: boolean;
-  closable?: boolean;
   hideFooter?: boolean;
   minimizable?: boolean;
   description?: string;
   help?: boolean;
-  constructor(data: {
-    title: string;
-    component: string;
-    componentProps: Record<string, unknown>;
-    width?: string;
-    height?: string;
-    fullHeight?: boolean;
-    loading?: boolean;
-    closable?: boolean;
-    hideFooter?: boolean;
-    minimizable?: boolean;
-    description?: string;
-    pressEnterAsOk?: boolean;
-    pressEscAsCancel?: boolean;
-    hostObject?: IHostObject;
-    help?: boolean;
-  });
+  constructor(
+    data: IInterativeDialogProps & {
+      component: string;
+      componentProps: Record<string, unknown>;
+      fullHeight?: boolean;
+      minimizable?: boolean;
+      description?: string;
+      help?: boolean;
+    }
+  );
 }
 
-export class SelectDialog<T> extends Dialog {
+export class SelectDialog<T> extends InteractiveDialog {
   component: string;
   componentProps: {
     disabledItems: Array<T | number | string>;
@@ -219,53 +204,32 @@ export class SelectDialog<T> extends Dialog {
     multiselect?: boolean;
     [key: string]: unknown;
   };
-  loading?: boolean;
-  fullHeight?: boolean;
-  width?: string | number;
-  height?: string | number;
   selectAsOk?: boolean;
-  okTitle?: string;
-  cancelTitle?: string;
   help?: boolean;
-  constructor(data: {
-    title: string;
-    component: string;
-    componentProps: {
-      disabledItems: Array<T | number | string>;
-      selectedItems: Array<T | number | string>;
-      searchable?: boolean;
-      searchFields?: Array<string>;
-      isTree?: boolean;
-      multiselect?: boolean;
-      [key: string]: unknown;
-    };
-    loading?: boolean;
-    fullHeight?: boolean;
-    width?: string | number;
-    height?: string | number;
-    selectAsOk?: boolean;
-    okTitle?: string;
-    cancelTitle?: string;
-    pressEnterAsOk?: boolean;
-    pressEscAsCancel?: boolean;
-    hostObject?: IHostObject;
-    help?: boolean;
-  });
+  constructor(
+    data: IInterativeDialogProps & {
+      component: string;
+      componentProps: {
+        disabledItems: Array<T | number | string>;
+        selectedItems: Array<T | number | string>;
+        searchable?: boolean;
+        searchFields?: Array<string>;
+        isTree?: boolean;
+        multiselect?: boolean;
+        [key: string]: unknown;
+      };
+      selectAsOk?: boolean;
+      help?: boolean;
+    }
+  );
 }
 
-export class CreateEditDialog<T> extends Dialog {
+export class CreateEditDialog<T> extends InteractiveDialog {
   component: string;
   componentProps: {
     model: T;
     [key: string]: unknown;
   };
-  loading?: boolean;
-  fullHeight?: boolean;
-  width?: string | number;
-  height?: string | number;
-  hideFooter?: boolean;
-  darkTitle?: boolean;
-  closable?: boolean;
   expandable?: boolean;
   minimizable?: boolean;
   collapsedSize?: {
@@ -281,43 +245,30 @@ export class CreateEditDialog<T> extends Dialog {
   expanded?: boolean;
   description?: string;
   noModal?: boolean;
-  okTitle?: string;
-  cancelTitle?: string;
   help?: boolean;
-  constructor(data: {
-    title: string;
-    component: string;
-    componentProps: {
-      model: T;
-      [key: string]: unknown;
-    };
-    loading?: boolean;
-    fullHeight?: boolean;
-    width?: string | number;
-    height?: string | number;
-    hideFooter?: boolean;
-    darkTitle?: boolean;
-    closable?: boolean;
-    expandable?: boolean;
-    minimizable?: boolean;
-    collapsedSize?: {
-      width: string | number;
-      height: string | number;
-      noModal?: boolean;
-    };
-    expandedSize?: {
-      width: string | number;
-      height: string | number;
+  constructor(
+    data: IInterativeDialogProps & {
+      component: string;
+      componentProps: {
+        model: T;
+        [key: string]: unknown;
+      };
+      expandable?: boolean;
+      minimizable?: boolean;
+      collapsedSize?: {
+        width: string | number;
+        height: string | number;
+        noModal?: boolean;
+      };
+      expandedSize?: {
+        width: string | number;
+        height: string | number;
+        noModal?: boolean;
+      };
+      expanded?: boolean;
+      description?: string;
       noModal?: boolean;
-    };
-    expanded?: boolean;
-    description?: string;
-    noModal?: boolean;
-    okTitle?: string;
-    cancelTitle?: string;
-    pressEnterAsOk?: boolean;
-    pressEscAsCancel?: boolean;
-    hostObject?: IHostObject;
-    help?: boolean;
-  });
+      help?: boolean;
+    }
+  );
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ldmjs/ui",
-  "version": "2.1.5",
+  "version": "2.1.6",
   "description": "ldm ui",
   "main": "dist/index.js",
   "engines": {
@@ -32,7 +32,9 @@
     "@babel/plugin-transform-typescript": "7.28.0",
     "@babel/preset-env": "7.28.3",
     "@babel/preset-typescript": "7.27.1",
+    "@ldmjs/datatable": "2.0.2",
     "@ldmjs/editor": "2.0.0",
+    "@ldmjs/treeview": "2.0.3",
     "@popperjs/core": "2.11.8",
     "@types/babel__core": "7.20.5",
     "@types/babel__plugin-transform-runtime": "7.9.5",
@@ -100,9 +102,7 @@
     "webpack-plugin-vuetify": "3.1.2"
   },
   "dependencies": {
-    "@ldmjs/core": "2.0.1",
-    "@ldmjs/datatable": "2.0.1",
-    "@ldmjs/treeview": "2.0.3"
+    "@ldmjs/core": "2.0.1"
   },
   "volta": {
     "node": "22.15.0",