@ldmjs/ui 1.0.13 → 1.0.15

package/dist/scss/_dialogs.scss

@@ -0,0 +1,207 @@
+body {
+  .v-dialog {
+    display: flex;
+    transition: none;
+
+    .v-overlay__content {
+      contain: none;
+
+      & > .v-card {
+        flex-grow: 1;
+        border: 1px solid var(--primary);
+        border-radius: var(--toolbar-border-radius);
+        box-shadow: var(--shadow-4);
+
+        & > .v-card-title {
+          height: var(--toolbar-height);
+          padding: 0 20px;
+        }
+
+        & > .v-card-text {
+          padding: 0 20px 20px 20px;
+        }
+      }
+    }
+  }
+
+  .minimized-dialogs {
+    position: absolute;
+    right: 25px;
+    bottom: 17px;
+    z-index: 999;
+  }
+
+  .minimize-btn {
+    width: 300px;
+    height: var(--input-height);
+    font-size: var(--font-size);
+    transition: background 0.2s;
+    background-color: var(--primary-l-2);
+    border-radius: var(--border-radius);
+
+    &:hover {
+      background-color: var(--primary-l-1);
+    }
+  }
+}
+
+.ld-dialog-content {
+  .card {
+    display: flex;
+    flex-direction: column;
+
+    .v-card-title {
+      display: flex;
+      flex-wrap: nowrap;
+      position: relative;
+      flex-shrink: 0;
+      padding: 0 20px !important;
+      z-index: 1;
+      box-shadow: none;
+      font-weight: 700;
+
+      &--dark {
+        background-color: var(--primary);
+        color: var(--white);
+        box-shadow: var(--shadow-2);
+      }
+
+      &.modal-title {
+        display: flex;
+        align-items: center;
+        flex-wrap: nowrap !important;
+        font-size: var(--font-size-2);
+        padding-top: 0;
+        padding-left: 10px;
+        padding-right: 10px;
+
+        & > span {
+          display: block;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+      }
+    }
+
+    .v-card-text {
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      height: auto;
+      flex-basis: 100%;
+      overflow-x: hidden;
+      overflow-y: auto;
+      padding: 0 20px 20px 20px !important;
+
+      &.content {
+        height: 100%;
+        overflow-y: auto;
+        overflow-x: hidden;
+        font-size: var(--font-size) !important;
+      }
+    }
+
+    .v-card-actions {
+      flex-shrink: 0;
+      padding: 8px 20px 20px 20px;
+      min-height: unset;
+    }
+
+    &--simple {
+      padding: 0 !important;
+      .v-card-title {
+        padding-top: 5px !important;
+        height: 40px !important;
+      }
+      .v-card-text {
+        padding: 0 20px 0px !important;
+      }
+
+      .v-card-actions {
+        padding: 20px 20px 17px !important;
+      }
+    }
+
+    &--mobile {
+      display: grid !important;
+      grid-template-rows: 44px 1fr;
+      height: 100%;
+      &.not-select-dialog {
+        min-height: 115px;
+        max-height: 100%;
+        // .mobile-container {
+        //   .v-card-text {
+        //     font-size: var(--font-size);
+        //     padding: 10px !important;
+        //   }
+        // }
+        .v-card-actions {
+          padding: 10px 0;
+        }
+      }
+
+      // .mobile-container {
+      //   position: relative;
+      //   min-height: 100%;
+      //   max-height: 100%;
+      //   overflow-y: auto;
+
+      //   .v-card-text {
+      //     height: 100%;
+      //   }
+      // }
+
+      // .modal-header {
+      //   z-index: 1;
+      //   height: $modal-header-height !important;
+      //   border-radius: 0 !important;
+      //   background-color: var(--white);
+
+      //   & .v-toolbar__content {
+      //     height: 100% !important;
+      //     display: flex;
+      //     justify-content: space-between;
+      //     & .v-toolbar-title {
+      //       margin-inline-start: 12px !important;
+      //     }
+      //   }
+      // }
+      // .v-toolbar__title {
+      //   font-size: var(--font-size) !important;
+      //   margin-inline-start: 12px !important;
+      // }
+      // .v-card-actions {
+      //   background: var(--white);
+      //   padding: 10px 0;
+      // }
+
+      // .v-toolbar__content {
+      //   // margin: 0 10px;
+      //   padding: 0;
+      // }
+
+      .v-card-text {
+        height: 100%;
+        padding: 0 12px 20px 12px;
+      }
+    }
+  }
+
+  &.Info,
+  &.Select,
+  &.CreateEdit {
+    .card {
+      .v-card-text {
+        &.content {
+          min-height: 55px;
+        }
+      }
+    }
+  }
+
+  &--hidden {
+    visibility: hidden !important;
+    opacity: 0 !important;
+  }
+}

package/dist/scss/_variables.scss

@@ -2,6 +2,8 @@ $font-size: 12px !default; // основной шрифт приложения
 $input-height: 28px !default; // высота атомарного элемента ui (button, input)
 $border-radius: 4px !default; // радиус скругления атомарного элемента ui
 $chip-height: 20px !default; // высота элемента chip
+$toolbar-height: 44px !default; // высота тулбара
+$toolbar-border-radius: 8px !default; // радиус скругления тулбара
 
 $ld-tab-height: $input-height + 10px; // высота элемента ld-tab
 
@@ -18,6 +20,8 @@ $shadow-4: 0px 16px 20px 0px rgba(0, 0, 0, 0.20);
   --border-radius: #{$border-radius};
   --chip-height: #{$chip-height};
   --ld-tab-height: #{$ld-tab-height};
+  --toolbar-height: #{$toolbar-height};
+  --toolbar-border-radius: #{$toolbar-border-radius};
   --shadow-1: #{$shadow-1};
   --shadow-2: #{$shadow-2};
   --shadow-3: #{$shadow-3};

package/dist/scss/index.scss

@@ -9,3 +9,4 @@
 @import 'toolbar';
 @import 'multiselect';
 @import 'toasted';
+@import 'dialogs';

package/dist/types/dialogs.d.ts

@@ -0,0 +1,259 @@
+export interface IViewModel<T> {
+  id: T;
+  name: string;
+  title?: string;
+}
+
+export interface IHostObject {
+  contentType: unknown;
+  id: number | string;
+  kind: unknown;
+}
+
+export interface IModalResult<T> {
+  button: ModalButton;
+  data: T;
+}
+
+export interface IModalData<T> {
+  component: string;
+  componentProps: T
+}
+
+export interface IModalInfo {
+  title: string;
+  type: ModalType;
+  description?: string | (() => string);
+  processingDescription?: string | (() => string);
+  el?: HTMLElement;
+  hostObject?: IHostObject;
+  /**
+   * Окно немодальное - это начит окно отображается поверх контента страницы и не ограничивает пользователя
+   * во взатмодействии со страницей.
+   * Окно модальное - это значит окно отображается поверх контента страницы, возможно с затемненным фоном,
+   * ограничивая пользователя в действиях, пока окно не будет закрыто
+   */
+  noModal?: boolean;
+  darkTitle?: boolean;
+  content?: string;
+  loading?: boolean;
+  component?: string;
+  componentProps?: Record<string, unknown>;
+  selectAsOk?: boolean;
+  okTitle?: string;
+  cancelTitle?: string;
+  okResult?: number | string | boolean | IModalResult<IViewModel<number | string>>;
+  cancelResult?: number | string | boolean | IModalResult<IViewModel<number | string>>;
+  hideFooter?: boolean;
+  width?: number | string;
+  height?: number | string;
+  fullHeight?: boolean;
+  closable?: boolean;
+  expandable?: boolean;
+  minimizable?: boolean;
+  expanded?: boolean;
+  minimized?: boolean;
+  collapsedSize?: {
+    width: string | number;
+    height: string | number;
+    noModal?: boolean;
+  };
+  expandedSize?: {
+    width: string | number;
+    height: string | number;
+    noModal?: boolean;
+  };
+  resolveFunction?: (data?: any) => void;
+  /**
+   *  ф-ция, вызываемая для определения того, были ли изменения в диалоге
+   */
+  isChanged?: () => boolean;
+}
+
+export interface IModalWindow<T> extends IModalInfo {
+  id: number;
+  type: ModalType;
+  show: boolean;
+  component?: string;
+  componentInstance?: {
+    save?(): void;
+    onClose?(): void | Promise<boolean>;
+  };
+  okLoading: boolean;
+  okOnly: boolean;
+  okDisabled: boolean;
+  resolved: boolean;
+  retainFocus: boolean;
+  okTitle: string;
+}
+
+export type ModalWindow = IModalWindow<IViewModel<number | string>>;
+
+export class Dialog {
+  constructor(public title: string, public content?: string);
+}
+
+export class AlertDialog extends Dialog {
+  constructor(data: { title: string; text: string });
+}
+
+export class PromptDialog extends Dialog {
+  title: string;
+  width?: string;
+  constructor(data: { title: string; width?: string });
+}
+
+export class ConfirmDialog extends Dialog {
+  title: string;
+  text: string;
+  okTitle?: string;
+  cancelTitle?: string;
+  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;
+  });
+}
+
+export class InfoDialog extends Dialog {
+  title: string;
+  component: string;
+  componentProps: Record<string, unknown>;
+  width?: string;
+  height?: string;
+  fullHeight?: boolean;
+  loading?: boolean;
+  closable?: boolean;
+  hideFooter?: boolean;
+  minimizable?: boolean;
+  description?: string;
+  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;
+  });
+}
+
+export class SelectDialog<T> {
+  title: string;
+  component: string;
+  componentProps: {
+    disabledItems: Array<T | number | string>;
+    selectedItems: Array<T | number | string>;
+    /**
+     * Активирует возможность поиска по списку
+     */
+    searchable?: boolean;
+    /**
+     * Массив полей, по которым необходим поиск
+     * в случае searchable = true, наличие массива обязательно
+     */
+    searchFields?: string[];
+    isTree?: boolean;
+    multiselect?: boolean;
+    [key: string]: unknown;
+  };
+  loading?: boolean;
+  fullHeight?: boolean;
+  width?: string | number;
+  height?: string | number;
+  selectAsOk?: 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;
+  });
+}
+
+export class CreateEditDialog<T> {
+  title: string;
+  component: string;
+  componentProps: {
+    model: T;
+    [key: string]: unknown;
+  };
+  hostObject?: IHostObject;
+  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;
+    noModal?: boolean;
+  };
+  expanded?: boolean;
+  description?: string;
+  noModal?: boolean;
+  okTitle?: string;
+  cancelTitle?: string;
+  constructor(data: {
+    title: string;
+    component: string;
+    componentProps: {
+      model: T;
+      [key: string]: unknown;
+    };
+    hostObject?: IHostObject;
+    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;
+      noModal?: boolean;
+    };
+    expanded?: boolean;
+    description?: string;
+    noModal?: boolean;
+    okTitle?: string;
+    cancelTitle?: string;
+  });
+}

package/dist/types/options.d.ts

@@ -23,6 +23,7 @@ export interface ldmuiOptions {
     'ld-edit-masked-text'?: string;
     'ld-text-markup'?: string;
     'ld-switch'?: string;
+    'ld-dialog'?: string;
   },
   viewport?: {
     isMobile: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ldmjs/ui",
-  "version": "1.0.13",
+  "version": "1.0.15",
   "description": "ldm ui",
   "main": "dist/index.js",
   "engines": {
@@ -92,7 +92,7 @@
     "vue-screen-utils": "1.0.0-beta.13",
     "vue-toastification": "2.0.0-rc.5",
     "vuetify": "3.6.8",
-    "webpack": "5.92.0",
+    "webpack": "5.92.1",
     "webpack-cli": "5.1.4",
     "webpack-dev-server": "4.15.1",
     "webpack-plugin-vuetify": "2.0.1"