@ldmjs/ui 1.0.60 → 1.0.62

package/dist/scss/_toasted.scss

@@ -1,15 +1,411 @@
-.Vue-Toastification__toast--success {
-  background: var(--success);
+@charset "UTF-8";
+
+@use "sass:math";
+
+$vt-namespace: "Vue-Toastification" !default;
+$vt-toast-min-width: 326px !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-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-color-progress-default: linear-gradient(
+  to right,
+  #4cd964,
+  #5ac8fa,
+  #007aff,
+  #34aadc,
+  #5856d6,
+  #ff2d55
+) !default;
+
+$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-z-index: 9999 !default;
+
+.#{$vt-namespace}__container {
+  z-index: $vt-z-index;
+  position: fixed;
+  padding: 4px;
+  width: $vt-toast-max-width;
+  box-sizing: border-box;
+  display: flex;
+  min-height: 100%;
+  color: #fff;
+  flex-direction: column;
+  pointer-events: none;
+
+  @media #{$vt-not-mobile} {
+    &.top-left,
+    &.top-right,
+    &.top-center {
+      top: 1em;
+    }
+
+    &.bottom-left,
+    &.bottom-right,
+    &.bottom-center {
+      bottom: 1em;
+      flex-direction: column-reverse;
+    }
+
+    &.top-left,
+    &.bottom-left {
+      left: 1em;
+      .#{$vt-namespace}__toast {
+        margin-right: auto;
+      }
+      // Firefox does not apply rtl rules to containers and margins, it appears.
+      // See https://github.com/Maronato/vue-toastification/issues/179
+      @supports not (-moz-appearance:none) {
+        .#{$vt-namespace}__toast--rtl {
+          margin-right: unset;
+          margin-left: auto;
+        }
+      }
+    }
+
+    &.top-right,
+    &.bottom-right {
+      right: 1em;
+      .#{$vt-namespace}__toast {
+        margin-left: auto;
+      }
+      // Firefox does not apply rtl rules to containers and margins, it appears.
+      // See https://github.com/Maronato/vue-toastification/issues/179
+      @supports not (-moz-appearance:none) {
+        .#{$vt-namespace}__toast--rtl {
+          margin-left: unset;
+          margin-right: auto;
+        }
+      }
+    }
+
+    &.top-center,
+    &.bottom-center {
+      left: 50%;
+      margin-left: - math.div($vt-toast-max-width, 2);
+      .#{$vt-namespace}__toast {
+        margin-left: auto;
+        margin-right: auto;
+      }
+    }
+  }
+
+  @media #{$vt-mobile} {
+    width: 100vw;
+    padding: 0;
+    left: 0;
+    margin: 0;
+    .#{$vt-namespace}__toast {
+      width: 100%;
+    }
+    &.top-left,
+    &.top-right,
+    &.top-center {
+      top: 0;
+    }
+    &.bottom-left,
+    &.bottom-right,
+    &.bottom-center {
+      bottom: 0;
+      flex-direction: column-reverse;
+    }
+  }
+}
+
+.#{$vt-namespace}__toast {
+  display: inline-flex;
+  position: relative;
+  max-height: $vt-toast-max-height;
+  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);
+  justify-content: space-between;
+  font-family: $vt-font-family;
+  max-width: $vt-toast-max-width;
+  min-width: $vt-toast-min-width;
+  pointer-events: auto;
+  overflow: hidden;
+  // overflow: hidden + border-radius does not work properly on Safari
+  // The following magic line fixes it
+  // https://stackoverflow.com/a/58283449
+  transform: translateZ(0);
+  direction: ltr;
+  &--rtl {
+    direction: rtl;
+  }
+
+  &--default {
+    background-color: $vt-color-default;
+    color: $vt-text-color-default;
+  }
+  &--info {
+    background-color: $vt-color-info;
+    color: $vt-text-color-info;
+  }
+  &--success {
+    background-color: $vt-color-success;
+    color: $vt-text-color-success;
+  }
+  &--error {
+    background-color: $vt-color-error;
+    color: $vt-text-color-error;
+  }
+  &--warning {
+    background-color: $vt-color-warning;
+    color: $vt-text-color-warning;
+  }
+
+  @media #{$vt-mobile} {
+    border-radius: 0px;
+    margin-bottom: 0.5rem;
+  }
+
+  &-body {
+    flex: 1;
+    line-height: 24px;
+    font-size: 16px;
+    word-break: break-word;
+    white-space: pre-wrap;
+  }
+
+  &-component-body {
+    flex: 1;
+  }
+
+  &.disable-transition {
+    animation: none !important;
+  }
+}
+
+.#{$vt-namespace}__close-button {
+  font-weight: bold;
+  font-size: 24px;
+  line-height: 24px;
+  background: transparent;
+  outline: none;
+  border: none;
+  padding: 0;
+  padding-left: 10px;
+  cursor: pointer;
+  transition: 0.3s ease;
+  align-items: center;
+  color: #fff;
+  opacity: 0.3;
+  transition: visibility 0s, opacity 0.2s linear;
+  &:hover,
+  &:focus {
+    opacity: 1;
+  }
+  .#{$vt-namespace}__toast:not(:hover) &.show-on-hover {
+    opacity: 0;
+  }
+  .#{$vt-namespace}__toast--rtl & {
+    padding-left: unset;
+    padding-right: 10px;
+  }
+}
+
+@keyframes scale-x-frames {
+  0% {
+    transform: scaleX(1);
+  }
+  100% {
+    transform: scaleX(0);
+  }
 }
 
-.Vue-Toastification__toast--error {
-  background: var(--error-l-2);
+.#{$vt-namespace}__progress-bar {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 5px;
+  z-index: ($vt-z-index + 1);
+  background-color: rgba(255, 255, 255, 0.7);
+  transform-origin: left;
+  animation: scale-x-frames linear 1 forwards;
+  .#{$vt-namespace}__toast--rtl & {
+    right: 0;
+    left: unset;
+    transform-origin: right;
+  }
 }
 
-.Vue-Toastification__toast--warning {
-  background: var(--warning-l-2);
+.#{$vt-namespace}__icon {
+  margin: auto 18px auto 0px;
+  background: transparent;
+  outline: none;
+  border: none;
+  padding: 0;
+  transition: 0.3s ease;
+  align-items: center;
+  width: 20px;
+  height: 100%;
+  .#{$vt-namespace}__toast--rtl & {
+    margin: auto 0px auto 18px;
+  }
 }
 
-.Vue-Toastification__toast--info {
-  background: var(--primary-l-4);
-}
+/* ----------------------------------------------
+/* Animations
+/* ---------------------------------------------- */
+
+.#{$vt-namespace}__bounce-enter-active {
+  &.top-left,
+  &.bottom-left {
+    animation-name: bounceInLeft;
+  }
+  &.top-right,
+  &.bottom-right {
+    animation-name: bounceInRight;
+  }
+  &.top-center {
+    animation-name: bounceInDown;
+  }
+  &.bottom-center {
+    animation-name: bounceInUp;
+  }
+}
+
+.#{$vt-namespace}__bounce-leave-active:not(.disable-transition) {
+  &.top-left,
+  &.bottom-left {
+    animation-name: bounceOutLeft;
+  }
+  &.top-right,
+  &.bottom-right {
+    animation-name: bounceOutRight;
+  }
+  &.top-center {
+    animation-name: bounceOutUp;
+  }
+  &.bottom-center {
+    animation-name: bounceOutDown;
+  }
+}
+
+.#{$vt-namespace}__bounce-leave-active,
+.#{$vt-namespace}__bounce-enter-active {
+  animation-duration: 750ms;
+  animation-fill-mode: both;
+}
+
+.#{$vt-namespace}__bounce-move {
+  transition-timing-function: ease-in-out;
+  transition-property: all;
+  transition-duration: 400ms;
+}
+
+.#{$vt-namespace}__fade-enter-active {
+  &.top-left,
+  &.bottom-left {
+    animation-name: fadeInLeft;
+  }
+  &.top-right,
+  &.bottom-right {
+    animation-name: fadeInRight;
+  }
+  &.top-center {
+    animation-name: fadeInTop;
+  }
+  &.bottom-center {
+    animation-name: fadeInBottom;
+  }
+}
+
+.#{$vt-namespace}__fade-leave-active:not(.disable-transition) {
+  &.top-left,
+  &.bottom-left {
+    animation-name: fadeOutLeft;
+  }
+  &.top-right,
+  &.bottom-right {
+    animation-name: fadeOutRight;
+  }
+  &.top-center {
+    animation-name: fadeOutTop;
+  }
+  &.bottom-center {
+    animation-name: fadeOutBottom;
+  }
+}
+
+.#{$vt-namespace}__fade-leave-active,
+.#{$vt-namespace}__fade-enter-active {
+  animation-duration: 750ms;
+  animation-fill-mode: both;
+}
+
+.#{$vt-namespace}__fade-move {
+  transition-timing-function: ease-in-out;
+  transition-property: all;
+  transition-duration: 400ms;
+}
+
+.#{$vt-namespace}__slideBlurred-enter-active {
+  &.top-left,
+  &.bottom-left {
+    animation-name: slideInBlurredLeft;
+  }
+  &.top-right,
+  &.bottom-right {
+    animation-name: slideInBlurredRight;
+  }
+  &.top-center {
+    animation-name: slideInBlurredTop;
+  }
+  &.bottom-center {
+    animation-name: slideInBlurredBottom;
+  }
+}
+
+.#{$vt-namespace}__slideBlurred-leave-active:not(.disable-transition) {
+  &.top-left,
+  &.bottom-left {
+    animation-name: slideOutBlurredLeft;
+  }
+  &.top-right,
+  &.bottom-right {
+    animation-name: slideOutBlurredRight;
+  }
+  &.top-center {
+    animation-name: slideOutBlurredTop;
+  }
+  &.bottom-center {
+    animation-name: slideOutBlurredBottom;
+  }
+}
+
+.#{$vt-namespace}__slideBlurred-leave-active,
+.#{$vt-namespace}__slideBlurred-enter-active {
+  animation-duration: 750ms;
+  animation-fill-mode: both;
+}
+
+.#{$vt-namespace}__slideBlurred-move {
+  transition-timing-function: ease-in-out;
+  transition-property: all;
+  transition-duration: 400ms;
+}

package/dist/scss/index.scss

@@ -8,7 +8,9 @@
 @use 'calendar';
 @use 'toolbar';
 @use 'multiselect';
+@use 'animations';
 @use 'toasted';
 @use 'dialogs';
 @use 'iterator';
 @use 'pager';
+@use 'time';

package/dist/types/calendar.d.ts

@@ -1,36 +1,41 @@
 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,
+  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
+  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,
-  },
+    label: string;
+    visibility: 'hover' | 'click';
+    hideIndicator: boolean;
+  };
   // Your custom data object for later access, if needed
-  customData?: Record<string, unknown>,
+  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>,
+  dates: Date | Array<Date>;
   // Think of `order` like `z-index`
   order?: number;
 }
 
-export type Attributes = Array<IAttr>
+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.
+  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 {

package/dist/types/options.d.ts

@@ -1,3 +1,4 @@
+/* eslint-disable-next-line @typescript-eslint/naming-convention */
 export interface ldmuiOptions {
   aliases?: {
     'ld-button'?: string;
@@ -27,29 +28,31 @@ export interface ldmuiOptions {
     'ld-dialog'?: string;
     'ld-data-iterator'?: string;
     'ld-pager'?: string;
-  },
+    'ld-edit-list-box'?: string;
+    'ld-time'?: string;
+  };
   viewport?: {
     isMobile: string;
     isTablet: string;
     isDesktop: string;
-  },
+  };
   language?: string;
   LdIcon?: {
     path: string;
     map: {
       icons: Array<[string, string]>;
-    }
-  },
+    };
+  };
   LdBreadcrumbs?: {
     home: {
       name: string;
       path: string;
-    }
-  },
+    };
+  };
   LdTabs?: {
     header: string;
-  }
+  };
   LdPager?: {
     entityName: (contentType: unknown, count: number) => string;
-  }
+  };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ldmjs/ui",
-  "version": "1.0.60",
+  "version": "1.0.62",
   "description": "ldm ui",
   "main": "dist/index.js",
   "engines": {
@@ -17,18 +17,15 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/ldmjs/ui.git"
+    "url": ""
   },
   "keywords": [
     "ldm",
     "ui"
   ],
-  "author": "ldmjs <nevezhin@lanit.ru>",
+  "author": "LANIT",
   "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/ldmjs/ui/issues"
-  },
-  "homepage": "https://github.com/ldmjs/ui#readme",
+  "homepage": "",
   "files": [
     "dist/"
   ],
@@ -43,7 +40,6 @@
     "@babel/preset-env": "7.23.6",
     "@babel/preset-typescript": "7.23.3",
     "@floating-ui/dom": "1.6.3",
-    "@ldmjs/core": "1.0.0",
     "@ldmjs/datatable": "1.0.9",
     "@ldmjs/editor": "1.0.1",
     "@ldmjs/treeview": "1.0.1",
@@ -67,6 +63,14 @@
     "cross-env": "7.0.3",
     "css-loader": "6.8.1",
     "eslint": "8.56.0",
+    "eslint-config-prettier": "8.10.0",
+    "eslint-formatter-friendly": "7.0.0",
+    "eslint-plugin-prettier": "5.1.3",
+    "eslint-plugin-promise": "5.1.0",
+    "eslint-plugin-simple-import-sort": "10.0.0",
+    "eslint-plugin-vue": "9.21.1",
+    "eslint-plugin-vuetify": "2.1.1",
+    "eslint-webpack-plugin": "3.2.0",
     "html-webpack-plugin": "5.6.0",
     "imask": "7.6.1",
     "jest": "29.2.2",
@@ -78,6 +82,7 @@
     "md-editor-v3": "4.15.6",
     "mini-css-extract-plugin": "2.8.0",
     "postcss-loader": "7.3.3",
+    "prettier": "3.4.2",
     "sass": "1.83.0",
     "sass-loader": "16.0.3",
     "style-loader": "4.0.0",
@@ -93,13 +98,15 @@
     "vue-loader": "17.4.2",
     "vue-property-decorator": "10.0.0-rc.3",
     "vue-screen-utils": "1.0.0-beta.13",
-    "vue-toastification": "2.0.0-rc.5",
     "vuetify": "3.8.0",
     "webpack": "5.97.1",
     "webpack-cli": "5.1.4",
     "webpack-dev-server": "5.1.0",
     "webpack-plugin-vuetify": "3.0.3"
   },
+  "dependencies": {
+    "@ldmjs/core": "1.0.0"
+  },
   "volta": {
     "node": "18.20.3",
     "yarn": "4.5.0"