@luizleon/sf.prefeiturasp.vuecomponents 4.0.2 → 4.0.3

package/src/services/authService.ts

@@ -1,118 +0,0 @@
-import { IAuthService, User } from "../types";
-import Keycloak, {
-  KeycloakConfig,
-  KeycloakInitOptions,
-} from "./../keycloak";
-
-async function CheckSilentLoginFile() {
-  const fileName = "silent-login.html";
-  const result = await fetch(location.origin + "/" + fileName)
-    .then(async (r) => {
-      if (r.status !== 200) return false;
-      const text = await r.text();
-      return text.includes("silent-login-iframe-result");
-    })
-    .catch(() => {
-      return false;
-    });
-  if (!result) {
-    const error = `O arquivo ${fileName} não foi localizado no projeto ou não possui o conteúdo correto!`;
-    console.warn(error);
-    document.documentElement.setAttribute("data-app-message", error);
-  }
-  return result;
-}
-
-let AuthService: IAuthService;
-
-function ConfigAuthService(config?: KeycloakConfig): IAuthService {
-  if (!config) {
-    return AuthService;
-  }
-
-  const keycloakInstance = new Keycloak(config);
-
-  const User: User = {} as User;
-
-  const Init = async (
-    initOptions: KeycloakInitOptions = {},
-    callback?: () => void
-  ) => {
-    const check = await CheckSilentLoginFile();
-    if (!check) return;
-    if (initOptions.onLoad === "login-required") {
-      document.documentElement.setAttribute(
-        "data-app-message",
-        "Autorizando..."
-      );
-    }
-    return keycloakInstance
-      .init(initOptions)
-      .then(async (authenticated) => {
-        if (authenticated) {
-          await FetchUserInfo();
-        }
-        if (callback && typeof callback === "function") {
-          try {
-            callback();
-            document.documentElement.classList.add("app-mounted");
-          } catch (e) {
-            console.error(e);
-            document.documentElement.setAttribute(
-              "data-app-message",
-              "Ocorreu um erro na inicialização. Verifique o console para mais detalhes."
-            );
-          }
-        }
-      })
-      .catch((e: any) => {
-        document.documentElement.setAttribute(
-          "data-app-message",
-          "Ocorreu na comunicação com o servidor de autenticação."
-        );
-      });
-  };
-
-  const FetchUserInfo = async () => {
-    const info: any = await keycloakInstance.loadUserInfo();
-    User.email = info.email ?? "";
-    User.emailVerified = info.email_verified === true;
-    User.firstName = info.given_name ?? "";
-    User.lastName = info.family_name ?? "";
-    User.name = info.name ?? "";
-    User.sub = info.sub ?? "";
-    User.username = info.preferred_username ?? "";
-    User.roles = [...(info.role ?? [])];
-    User.groups = [...(info.group ?? [])];
-    User.IsInRole = (role: string) => {
-      return User.roles.includes(role);
-    };
-    sessionStorage.setItem("name", User.name);
-  };
-
-  const Logout = () => {
-    keycloakInstance
-      .logout({
-        redirectUri: location.origin,
-      })
-      .then(() => {
-        sessionStorage.removeItem("name");
-      });
-  };
-
-  AuthService = {
-    Instance: keycloakInstance,
-    User,
-    Init,
-    Logout,
-  };
-
-  return AuthService;
-}
-
-const UseAuthService = () => AuthService;
-
-const StartAuthService = (config: KeycloakConfig) =>
-  ConfigAuthService(config);
-
-export { StartAuthService, UseAuthService };

package/src/services/dialogService.ts

@@ -1,109 +0,0 @@
-import Swal, { SweetAlertIcon } from "sweetalert2";
-import DOMPurify from "dompurify";
-
-interface ConfirmOptions {
-  text: string;
-  title?: string;
-  confirmLabel?: string;
-  rejectLabel?: string;
-}
-
-interface AlertOptions {
-  text: string | string[];
-  title?: string;
-  icon?: SweetAlertIcon;
-}
-
-class Base {
-  get IsVisible(): boolean {
-    return Swal.isVisible();
-  }
-}
-
-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,
-        allowEscapeKey: false,
-        allowOutsideClick: false,
-        icon: "question",
-        title: options.title,
-        html: DOMPurify.sanitize(options.text),
-        confirmButtonText: options.confirmLabel ?? "confirmar",
-        cancelButtonText: options.rejectLabel ?? "cancelar",
-      }).then((x: any) => {
-        r(x.isConfirmed === true);
-      });
-    });
-  }
-  async ConfirmAsync(message: string) {
-    return this.CreateConfirmAsync({
-      text: message,
-    });
-  }
-}
-
-export const UseAlertService = () => new AlertService();
-
-export const UseConfirmService = () => new ConfirmService();

package/src/services/navMenuService.ts

@@ -1,21 +0,0 @@
-import { ref, Ref } from "vue";
-
-class NavMenuService {
-  private _visible: Ref<boolean> = ref(false);
-  get IsVisible() {
-    return this._visible.value === true;
-  }
-  Toggle() {
-    this._visible.value = !this._visible.value;
-  }
-  Close() {
-    this._visible.value = false;
-  }
-  Open() {
-    this._visible.value = true;
-  }
-}
-
-const LkNavMenuService = new NavMenuService();
-
-export const UseNavMenuService = () => LkNavMenuService;

package/src/style/componentes.scss

@@ -1,20 +0,0 @@
-@use "./src/mixins" as mx;
-
-@include mx.theme-colors-class();
-
-@import "./src/components/layout";
-@import "./src/components/themetoggle";
-@import "./src/components/svg_icon";
-@import "./src/components/loading-circle";
-@import "./src/components/icon";
-@import "./src/components/tooltip";
-@import "./src/components/drawer";
-@import "./src/components/navmenulink";
-@import "./src/components/content";
-@import "./src/components/scrollToTop";
-@import "./src/sweetalert/sweetalert";
-@import "./src/components/headerAvatar";
-@import "./src/components/tab-navigation";
-@import "./src/components/button";
-@import "./src/components/mask";
-@import "./src/components/message";

package/src/style/src/_functions.scss

@@ -1,19 +0,0 @@
-@function theme-colors($dark: false) {
-  @return "primary", "info", "success", "warn", "help", "error",
-    "secondary";
-}
-
-@function str-replace($string, $search, $replace: "") {
-  $index: str-index($string, $search);
-
-  @if $index {
-    @return str-slice($string, 1, $index - 1) + $replace +
-      str-replace(
-        str-slice($string, $index + str-length($search)),
-        $search,
-        $replace
-      );
-  }
-
-  @return $string;
-}

package/src/style/src/_mixins.scss

@@ -1,193 +0,0 @@
-@use "sass:map";
-@use "sass:list";
-@use "sass:color";
-@use "sass:math";
-@import "./variables";
-@import "./functions";
-
-@mixin avatar-colors($dark: false) {
-  $red: #f44336;
-  $pink: #e91e63;
-  $purple: #9c27b0;
-  $deepPurple: #673ab7;
-  $indigo: #3f51b5;
-  $blue: #2196f3;
-  $lightBlue: #03a9f4;
-  $cyan: #00bcd4;
-  $teal: #009688;
-  $green: #4caf50;
-  $lightGreen: #8bc34a;
-  $lime: #cddc39;
-  $yellow: #ffeb3b;
-  $amber: #ffc107;
-  $orange: #ff9800;
-  $deepOrange: #ff5722;
-  $brown: #795548;
-  $gray: #9e9e9e;
-  $blueGray: #607d8b;
-
-  $colors: (
-    "--red": $red,
-    "--pink": $pink,
-    "--purple": $purple,
-    "--deepPurple": $deepPurple,
-    "--indigo": $indigo,
-    "--blue": $blue,
-    "--lightBlue": $lightBlue,
-    "--cyan": $cyan,
-    "--teal": $teal,
-    "--green": $green,
-    "--lightGreen": $lightGreen,
-    "--lime": $lime,
-    "--yellow": $yellow,
-    "--amber": $amber,
-    "--orange": $orange,
-    "--deepOrange": $deepOrange,
-    "--brown": $brown,
-    "--gray": $gray,
-    "--blueGray": $blueGray,
-  );
-
-  $incr: 0;
-
-  @each $key, $value in $colors {
-    $bgColor: color.scale($value, $lightness: -40%);
-    $color: color.scale($value, $lightness: 90%);
-
-    @if ($dark) {
-      $bgColor: color.scale($value, $lightness: 40%);
-      $color: color.scale($value, $lightness: -90%);
-    }
-
-    &[data-cor="#{$incr}"] {
-      color: $color;
-      background-color: $bgColor;
-
-      &[data-hover]:hover {
-        box-shadow: 0 0 0 2px color.scale($bgColor, $alpha: -50%);
-        cursor: pointer;
-      }
-    }
-
-    $incr: $incr + 1;
-  }
-}
-
-@mixin button-colors($dark: false) {
-  @each $color in $theme-colors-list {
-    $button-var-color: var(#{$color}-color);
-    $button-filled-color: #fff;
-    @if ($color == "--warn") {
-      $button-filled-color: #000;
-    }
-    &[data-color="#{str-replace($color, '--')}"] {
-      @media (pointer: fine) {
-        &:focus-visible {
-          outline: 2px solid $button-var-color;
-          outline-offset: 1px;
-          border-color: var(--bg-color);
-        }
-      }
-      &:active {
-        transition: 0s;
-        filter: brightness(0.9);
-      }
-      &.#{$prefix}button-filled {
-        color: #{$button-filled-color};
-        background-color: $button-var-color;
-      }
-      &.#{$prefix}button-outlined,
-      &.#{$prefix}button-text {
-        color: $button-var-color;
-        background-color: transparent;
-        @media (pointer: fine) {
-          &:hover,
-          &:focus-visible {
-            background: color-mix(
-              in srgb,
-              currentColor 10%,
-              transparent
-            );
-          }
-        }
-      }
-      &.#{$prefix}button-text {
-        border-color: transparent !important;
-      }
-    }
-  }
-}
-
-@mixin dot-colors() {
-  @each $color in $theme-colors-list {
-    $colorName: str-replace($color, "--");
-    &[data-color="#{$colorName}"] {
-      background-color: var(#{$color}-color);
-    }
-  }
-}
-
-@mixin input-colors() {
-  @each $color in $theme-colors-list {
-    $colorName: str-replace($color, "--");
-    &[data-color="#{$colorName}"] {
-      color: var(#{$color}-color);
-    }
-  }
-}
-
-@mixin toast-colors() {
-  @each $color, $colorValue in $theme-colors-list {
-    $colorName: str-replace($color, "--");
-    &.toast-#{$colorName} {
-      --toast-progress-color: var(#{$color}-color);
-      --toast-bg-color: hsla(
-        var(#{$color}-color-h),
-        var(#{$color}-color-s),
-        var(#{$color}-color-l),
-        0.9
-      );
-    }
-  }
-}
-
-@mixin theme-colors-class() {
-  @each $color in $theme-colors-list {
-    $colorName: str-replace($color, "--");
-    .#{$colorName}-color:not(
-        :disabled,
-        .disabled,
-        .component-disabled
-      ) {
-      color: var(#{$color}-color) !important;
-    }
-    .#{$colorName}-bgcolor:not(
-        :disabled,
-        .disabled,
-        .component-disabled
-      ) {
-      background-color: var(#{$color}-color) !important;
-    }
-  }
-}
-
-@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;
-}
-
-@mixin material-symbols-filled {
-  @include material-symbols-outlined;
-  font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
-}

package/src/style/src/_variables.scss

@@ -1,12 +0,0 @@
-$prefix: "sf-" !default;
-
-$theme-colors-list: (
-  "--primary",
-  "--info",
-  "--success",
-  "--warn",
-  "--help",
-  "--error",
-  "--secondary",
-  "--text"
-);

package/src/style/src/components/_button.scss

@@ -1,104 +0,0 @@
-@use "../mixins";
-
-.#{$prefix}button {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  border-radius: 6px;
-  border: 1px solid transparent;
-  width: fit-content;
-  word-break: break-word;
-  font-weight: 400;
-  transition: opacity 0.2s ease-in-out;
-  &:hover {
-    cursor: pointer;
-  }
-
-  .#{$prefix}button-label {
-    white-space: wrap;
-  }
-
-  .#{$prefix}icon {
-    position: absolute;
-    color: unset !important;
-    > button {
-      color: currentColor !important;
-    }
-  }
-
-  &.#{$prefix}component-loading {
-    color: var(--disabled-color) !important;
-    border-color: var(--disabled-color) !important;
-    .#{$prefix}button-label {
-      color: transparent !important;
-    }
-  }
-
-  &.#{$prefix}button-filled:disabled {
-    background-color: hsla(
-      var(--disabled-color-h),
-      var(--disabled-color-s),
-      var(--disabled-color-l),
-      0.5
-    ) !important;
-  }
-
-  &.#{$prefix}button-small {
-    min-height: 32px;
-    font-size: 0.875rem;
-    padding: 0 12px;
-    &.#{$prefix}button-with-icon {
-      padding-left: 28px;
-    }
-    .#{$prefix}icon {
-      inset: 0 0 0 6px;
-      &.#{$prefix}component-loading {
-        inset: 0 0 0 50%;
-        margin-left: -8px;
-      }
-    }
-  }
-
-  &.#{$prefix}button-medium {
-    min-height: 36px;
-    font-size: 1rem;
-    padding: 0 12px;
-    &.#{$prefix}button-with-icon {
-      padding-left: 38px;
-    }
-    .#{$prefix}icon {
-      inset: 0 0 0 8px;
-      &.#{$prefix}component-loading {
-        inset: 0 0 0 50%;
-        margin-left: -12px;
-      }
-    }
-  }
-
-  &.#{$prefix}button-large {
-    min-height: 48px;
-    font-size: 1.25rem;
-    padding: 0 16px;
-    &.#{$prefix}button-with-icon {
-      padding-left: 54px;
-    }
-    .#{$prefix}icon {
-      inset: 0 0 0 10px;
-      &.#{$prefix}component-loading {
-        inset: 0 0 0 50%;
-        margin-left: -18px;
-      }
-    }
-    .#{$prefix}button-label {
-      line-height: 48px;
-    }
-  }
-
-  @include button-colors;
-}
-
-html.dark {
-  .#{$prefix}button {
-    @include button-colors(true);
-  }
-}

package/src/style/src/components/_content.scss

@@ -1,57 +0,0 @@
-@import "../mixins";
-
-.sf-content {
-  height: 100%;
-  overflow: hidden;
-  position: relative;
-  > .sf-content-body {
-    height: calc(100% - 25%);
-    overflow: auto;
-    scroll-behavior: smooth;
-    padding: 1rem;
-    &.sf-content-no-padding {
-      padding: 0;
-    }
-  }
-  > .sf-content-header {
-    top: 0;
-    border-bottom: 1px solid var(--surface-900-color);
-  }
-  > .sf-content-footer {
-    bottom: 0;
-    border-top: 1px solid var(--surface-900-color);
-  }
-  > .sf-content-header,
-  > .sf-content-footer {
-    width: 100%;
-    padding: 0 1rem;
-    height: 60px;
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    &:empty {
-      display: none;
-      height: 0;
-    }
-    &.sf-content-no-padding {
-      padding: 0;
-      gap: 0;
-    }
-  }
-  > .sf-content-header {
-    background-color: var(--bg-color);
-  }
-  > .sf-content-footer {
-    background-color: var(--surface-300-color);
-  }
-  &:has(.sf-content-header:empty) > .sf-content-body {
-    height: calc(100% - 60px);
-  }
-  &:has(.sf-content-footer:empty) > .sf-content-body {
-    height: calc(100% - 60px);
-  }
-  &:has(.sf-content-header:empty):has(.sf-content-footer:empty)
-    > .sf-content-body {
-    height: 100%;
-  }
-}