@luizleon/sf.prefeiturasp.vuecomponents 0.0.42 → 0.0.44

package/src/services/dialogService.ts

@@ -1,4 +1,4 @@
-import Swal from "sweetalert2";
+import Swal, { SweetAlertIcon } from "sweetalert2";
 import DOMPurify from "dompurify";
 
 interface ConfirmOptions {
@@ -11,15 +11,77 @@ interface ConfirmOptions {
 interface AlertOptions {
   text: string | string[];
   title?: string;
-  icon?: "info" | "error" | "success" | "warning" | "question";
+  icon?: SweetAlertIcon;
 }
 
-class DialogService {
+class Base {
   get IsVisible(): boolean {
     return Swal.isVisible();
   }
+}
 
-  async ConfirmAsync(options: ConfirmOptions): Promise<boolean> {
+class AlertService extends Base {
+  constructor() {
+    super();
+  }
+  async CreateAlertAsync(
+    options: AlertOptions | string | string[]
+  ): Promise<boolean> {
+    let icon: SweetAlertIcon = "info";
+    let html: string;
+    let title: string;
+    if (typeof options === "string" || Array.isArray(options)) {
+      html = Array.isArray(options)
+        ? options.join("<br />")
+        : options;
+    } else {
+      icon = options.icon ?? "info";
+      title = options.title ?? "";
+      html = Array.isArray(options.text)
+        ? options.text.join("<br />")
+        : options.text;
+    }
+    return new Promise((r) => {
+      Swal.fire({
+        allowEscapeKey: false,
+        allowOutsideClick: false,
+        icon,
+        title,
+        html: `<div style="max-height: 50vh; overflow: auto">${DOMPurify.sanitize(
+          html
+        )}</div>`,
+      }).then(() => r(true));
+    });
+  }
+
+  async AlertAsync(message: string | string[]): Promise<boolean> {
+    return this.CreateAlertAsync({
+      text: message,
+      icon: "info",
+    });
+  }
+
+  async AlertErrorAsync(error: string | string[]): Promise<boolean> {
+    return this.CreateAlertAsync({
+      text: error,
+      icon: "error",
+    });
+  }
+
+  async AlertSuccessAsync(
+    message: string | string[]
+  ): Promise<boolean> {
+    return this.CreateAlertAsync({
+      text: message,
+      icon: "success",
+    });
+  }
+}
+
+class ConfirmService extends Base {
+  async CreateConfirmAsync(
+    options: ConfirmOptions
+  ): Promise<boolean> {
     return new Promise((r) => {
       Swal.fire({
         showCancelButton: true,
@@ -35,29 +97,13 @@ class DialogService {
       });
     });
   }
-
-  async AlertAsync(options: AlertOptions): Promise<boolean> {
-    const icon = options.icon ?? "info";
-    let html: string;
-    if (Array.isArray(options.text)) {
-      html = `<div style="max-height: 50vh; overflow: auto">
-      ${options.text.join("<br />")}
-      </div>`;
-    } else {
-      html = options.text;
-    }
-    return new Promise((r) => {
-      Swal.fire({
-        allowEscapeKey: false,
-        allowOutsideClick: false,
-        icon,
-        title: options.title,
-        html: DOMPurify.sanitize(html),
-      }).then(() => r(true));
+  async ConfirmAsync(message: string) {
+    return this.CreateConfirmAsync({
+      text: message,
     });
   }
 }
 
-const service = new DialogService();
+export const UseAlertService = () => new AlertService();
 
-export const UseDialogService = () => service;
+export const UseConfirmService = () => new ConfirmService();

package/src/style/componentes.scss

@@ -13,3 +13,4 @@
 @import "./src/components/tab-navigation";
 @import "./src/components/button";
 @import "./src/components/mask";
+@import "./src/components/message";

package/src/style/src/_mixins.scss

@@ -148,3 +148,19 @@
     }
   }
 }
+
+@mixin material-symbols-outlined {
+  font-family: "Material Symbols Outlined";
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  font-feature-settings: "liga";
+  -webkit-font-smoothing: antialiased;
+}

package/src/style/src/components/_icon.scss

@@ -37,13 +37,6 @@ div.#{$prefix}icon {
     }
   }
 
-  &.#{$prefix}icon-filled {
-    button {
-      font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0,
-        "opsz" 48;
-    }
-  }
-
   &.#{$prefix}icon-small {
     min-width: 28px;
     > button {

package/src/style/src/components/_message.scss

@@ -0,0 +1,47 @@
+@import "../variables";
+
+.#{$prefix}message {
+  border-radius: 4px;
+  padding: 1rem 1.5rem;
+  margin: 1rem;
+  position: relative;
+  &.#{$prefix}message-info {
+    background-color: var(--info-hover-color);
+    color: var(--info-color);
+  }
+  &.#{$prefix}message-error {
+    background-color: var(--error-hover-color);
+    color: var(--error-color);
+  }
+  &.#{$prefix}message-success {
+    background-color: var(--success-hover-color);
+    color: var(--success-color);
+  }
+  &.#{$prefix}message-warning {
+    background-color: var(--warn-hover-color);
+    color: var(--warn-color);
+  }
+  &.#{$prefix}message-help {
+    background-color: var(--help-hover-color);
+    color: var(--help-color);
+  }
+  &.#{$prefix}message-primary {
+    background-color: var(--primary-hover-color);
+    color: var(--primary-color);
+  }
+  &.#{$prefix}message-secondary {
+    background-color: var(--secondary-hover-color);
+    color: var(--secondary-color);
+  }
+  &[data-icon] {
+    padding-left: 3.25rem;
+    &::before {
+      @include material-symbols-outlined;
+      content: attr(data-icon);
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      left: 1rem;
+    }
+  }
+}

package/src/style/src/sweetalert/scss/_animations.scss

@@ -1,197 +1,197 @@
-//@import 'toasts-animations';
-
-// Appearance animation
-@keyframes swal2-show {
-  0% {
-    transform: scale(0.7);
-  }
-
-  45% {
-    transform: scale(1.05);
-  }
-
-  80% {
-    transform: scale(0.95);
-  }
-
-  100% {
-    transform: scale(1);
-  }
-}
-
-// Disppearance animation
-@keyframes swal2-hide {
-  0% {
-    transform: scale(1);
-    opacity: 1;
-  }
-
-  100% {
-    transform: scale(0.5);
-    opacity: 0;
-  }
-}
-
-// Success icon animations
-@keyframes swal2-animate-success-line-tip {
-  0% {
-    top: 1.1875em;
-    left: 0.0625em;
-    width: 0;
-  }
-
-  54% {
-    top: 1.0625em;
-    left: 0.125em;
-    width: 0;
-  }
-
-  70% {
-    top: 2.1875em;
-    left: -0.375em;
-    width: 3.125em;
-  }
-
-  84% {
-    top: 3em;
-    left: 1.3125em;
-    width: 1.0625em;
-  }
-
-  100% {
-    top: 2.8125em;
-    left: 0.8125em;
-    width: 1.5625em;
-  }
-}
-
-@keyframes swal2-animate-success-line-long {
-  0% {
-    top: 3.375em;
-    right: 2.875em;
-    width: 0;
-  }
-
-  65% {
-    top: 3.375em;
-    right: 2.875em;
-    width: 0;
-  }
-
-  84% {
-    top: 2.1875em;
-    right: 0;
-    width: 3.4375em;
-  }
-
-  100% {
-    top: 2.375em;
-    right: 0.5em;
-    width: 2.9375em;
-  }
-}
-
-@keyframes swal2-rotate-success-circular-line {
-  0% {
-    transform: rotate(-45deg);
-  }
-
-  5% {
-    transform: rotate(-45deg);
-  }
-
-  12% {
-    transform: rotate(-405deg);
-  }
-
-  100% {
-    transform: rotate(-405deg);
-  }
-}
-
-// Error icon animations
-@keyframes swal2-animate-error-x-mark {
-  0% {
-    margin-top: 1.625em;
-    transform: scale(0.4);
-    opacity: 0;
-  }
-
-  50% {
-    margin-top: 1.625em;
-    transform: scale(0.4);
-    opacity: 0;
-  }
-
-  80% {
-    margin-top: -0.375em;
-    transform: scale(1.15);
-  }
-
-  100% {
-    margin-top: 0;
-    transform: scale(1);
-    opacity: 1;
-  }
-}
-
-@keyframes swal2-animate-error-icon {
-  0% {
-    transform: rotateX(100deg);
-    opacity: 0;
-  }
-
-  100% {
-    transform: rotateX(0deg);
-    opacity: 1;
-  }
-}
-
-@keyframes swal2-rotate-loading {
-  0% {
-    transform: rotate(0deg);
-  }
-
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-// Question mark animation
-@keyframes swal2-animate-question-mark {
-  0% {
-    transform: rotateY(-360deg);
-  }
-
-  100% {
-    transform: rotateY(0);
-  }
-}
-
-// Info and Warning mark animation
-@keyframes swal2-animate-i-mark {
-  0% {
-    transform: rotateZ(45deg);
-    opacity: 0;
-  }
-
-  25% {
-    transform: rotateZ(-25deg);
-    opacity: 0.4;
-  }
-
-  50% {
-    transform: rotateZ(15deg);
-    opacity: 0.8;
-  }
-
-  75% {
-    transform: rotateZ(-5deg);
-    opacity: 1;
-  }
-
-  100% {
-    transform: rotateX(0);
-    opacity: 1;
-  }
-}
+//@import 'toasts-animations';
+
+// Appearance animation
+@keyframes swal2-show {
+  0% {
+    transform: scale(0.7);
+  }
+
+  45% {
+    transform: scale(1.05);
+  }
+
+  80% {
+    transform: scale(0.95);
+  }
+
+  100% {
+    transform: scale(1);
+  }
+}
+
+// Disppearance animation
+@keyframes swal2-hide {
+  0% {
+    transform: scale(1);
+    opacity: 1;
+  }
+
+  100% {
+    transform: scale(0.5);
+    opacity: 0;
+  }
+}
+
+// Success icon animations
+@keyframes swal2-animate-success-line-tip {
+  0% {
+    top: 1.1875em;
+    left: 0.0625em;
+    width: 0;
+  }
+
+  54% {
+    top: 1.0625em;
+    left: 0.125em;
+    width: 0;
+  }
+
+  70% {
+    top: 2.1875em;
+    left: -0.375em;
+    width: 3.125em;
+  }
+
+  84% {
+    top: 3em;
+    left: 1.3125em;
+    width: 1.0625em;
+  }
+
+  100% {
+    top: 2.8125em;
+    left: 0.8125em;
+    width: 1.5625em;
+  }
+}
+
+@keyframes swal2-animate-success-line-long {
+  0% {
+    top: 3.375em;
+    right: 2.875em;
+    width: 0;
+  }
+
+  65% {
+    top: 3.375em;
+    right: 2.875em;
+    width: 0;
+  }
+
+  84% {
+    top: 2.1875em;
+    right: 0;
+    width: 3.4375em;
+  }
+
+  100% {
+    top: 2.375em;
+    right: 0.5em;
+    width: 2.9375em;
+  }
+}
+
+@keyframes swal2-rotate-success-circular-line {
+  0% {
+    transform: rotate(-45deg);
+  }
+
+  5% {
+    transform: rotate(-45deg);
+  }
+
+  12% {
+    transform: rotate(-405deg);
+  }
+
+  100% {
+    transform: rotate(-405deg);
+  }
+}
+
+// Error icon animations
+@keyframes swal2-animate-error-x-mark {
+  0% {
+    margin-top: 1.625em;
+    transform: scale(0.4);
+    opacity: 0;
+  }
+
+  50% {
+    margin-top: 1.625em;
+    transform: scale(0.4);
+    opacity: 0;
+  }
+
+  80% {
+    margin-top: -0.375em;
+    transform: scale(1.15);
+  }
+
+  100% {
+    margin-top: 0;
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+@keyframes swal2-animate-error-icon {
+  0% {
+    transform: rotateX(100deg);
+    opacity: 0;
+  }
+
+  100% {
+    transform: rotateX(0deg);
+    opacity: 1;
+  }
+}
+
+@keyframes swal2-rotate-loading {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+// Question mark animation
+@keyframes swal2-animate-question-mark {
+  0% {
+    transform: rotateY(-360deg);
+  }
+
+  100% {
+    transform: rotateY(0);
+  }
+}
+
+// Info and Warning mark animation
+@keyframes swal2-animate-i-mark {
+  0% {
+    transform: rotateZ(45deg);
+    opacity: 0;
+  }
+
+  25% {
+    transform: rotateZ(-25deg);
+    opacity: 0.4;
+  }
+
+  50% {
+    transform: rotateZ(15deg);
+    opacity: 0.8;
+  }
+
+  75% {
+    transform: rotateZ(-5deg);
+    opacity: 1;
+  }
+
+  100% {
+    transform: rotateX(0);
+    opacity: 1;
+  }
+}

package/src/style/src/sweetalert/scss/_body.scss

@@ -1,45 +1,45 @@
-//@import "toasts-body";
-
-@mixin sweetalert2-body() {
-  &.swal2-shown {
-    @include not(".swal2-no-backdrop", ".swal2-toast-shown") {
-      overflow: hidden; // not overflow-y because of Sarari, #1253
-    }
-  }
-
-  // SfLayout define height de html.
-  // &.swal2-height-auto {
-  //    height: auto !important; // #781 #1107
-  // }
-
-  &.swal2-no-backdrop {
-    .swal2-container {
-      background-color: transparent !important;
-      pointer-events: none;
-
-      .swal2-popup {
-        pointer-events: all;
-      }
-
-      .swal2-modal {
-        box-shadow: 0 0 10px $swal2-backdrop;
-      }
-    }
-  }
-
-  @media print {
-    &.swal2-shown {
-      @include not(".swal2-no-backdrop", ".swal2-toast-shown") {
-        overflow-y: scroll !important;
-
-        > [aria-hidden="true"] {
-          display: none;
-        }
-
-        .swal2-container {
-          position: static !important;
-        }
-      }
-    }
-  }
-}
+//@import "toasts-body";
+
+@mixin sweetalert2-body() {
+  &.swal2-shown {
+    @include not(".swal2-no-backdrop", ".swal2-toast-shown") {
+      overflow: hidden; // not overflow-y because of Sarari, #1253
+    }
+  }
+
+  // SfLayout define height de html.
+  // &.swal2-height-auto {
+  //    height: auto !important; // #781 #1107
+  // }
+
+  &.swal2-no-backdrop {
+    .swal2-container {
+      background-color: transparent !important;
+      pointer-events: none;
+
+      .swal2-popup {
+        pointer-events: all;
+      }
+
+      .swal2-modal {
+        box-shadow: 0 0 10px $swal2-backdrop;
+      }
+    }
+  }
+
+  @media print {
+    &.swal2-shown {
+      @include not(".swal2-no-backdrop", ".swal2-toast-shown") {
+        overflow-y: scroll !important;
+
+        > [aria-hidden="true"] {
+          display: none;
+        }
+
+        .swal2-container {
+          position: static !important;
+        }
+      }
+    }
+  }
+}