@ldmjs/ui 1.0.60 → 1.0.61

package/dist/scss/_toasted.scss

@@ -1,15 +1,411 @@
-.Vue-Toastification__toast--success {
-  background: var(--success);
-}
-
-.Vue-Toastification__toast--error {
-  background: var(--error-l-2);
-}
-
-.Vue-Toastification__toast--warning {
-  background: var(--warning-l-2);
-}
-
-.Vue-Toastification__toast--info {
-  background: var(--primary-l-4);
-}
+@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);
+  }
+}
+
+.#{$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;
+  }
+}
+
+.#{$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;
+  }
+}
+
+/* ----------------------------------------------
+/* 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,6 +8,7 @@
 @use 'calendar';
 @use 'toolbar';
 @use 'multiselect';
+@use 'animations';
 @use 'toasted';
 @use 'dialogs';
 @use 'iterator';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ldmjs/ui",
-  "version": "1.0.60",
+  "version": "1.0.61",
   "description": "ldm ui",
   "main": "dist/index.js",
   "engines": {
@@ -93,7 +93,6 @@
     "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",