@luizleon/sf.prefeiturasp.vuecomponents 4.0.2 → 4.0.3

package/package.json

@@ -1,10 +1,13 @@
 {
   "name": "@luizleon/sf.prefeiturasp.vuecomponents",
-  "version": "4.0.2",
+  "version": "4.0.3",
   "type": "module",
+  "files": [
+    "dist"
+  ],
   "main": "dist/sf.prefeiturasp.vuecomponents.umd.js",
   "module": "dist/sf.prefeiturasp.vuecomponents.es.js",
-  "types": "dist/src/index.d.ts",
+  "types": "dist/index.d.ts",
   "scripts": {
     "build": "rimraf ./dist/ && vue-tsc --noEmit  && vite build"
   },

package/src/axios/axiosClient.ts

@@ -1,207 +0,0 @@
-import _axios, { AxiosInstance, AxiosResponse } from "axios";
-import { AppResult } from "../common/appResult";
-import Keycloak from "../keycloak";
-
-class AxiosClient {
-  constructor(keycloak: Keycloak, baseUrl: string) {
-    this.keycloak = keycloak;
-    this.axios = _axios.create();
-    this.axios.defaults.baseURL = baseUrl;
-    this.axios.defaults.headers.common["content-type"] =
-      "application/json";
-    this.axios.defaults.timeout = 1000 * 60 * 5;
-    this.axios.interceptors.request.use(async (config) => {
-      await this.SilentLogin();
-      const token = this.keycloak.token;
-      config.headers.Authorization = `Bearer ${token}`;
-      return config;
-    });
-  }
-  keycloak: Keycloak;
-  axios: AxiosInstance;
-  private fileName: string = "silent-login.html";
-
-  private ParseAppResult(data: any): AppResult<any> | null {
-    try {
-      const check1 = typeof data.hasSuccess === "boolean";
-      const check2 = typeof data.hasError === "boolean";
-      const check3 = typeof data.httpStatusCode === "number";
-      const check4 = Array.isArray(data.errors);
-      if (check1 && check2 && check3 && check4) return data;
-      return null;
-    } catch {
-      return null;
-    }
-  }
-
-  /**
-   * Usar após 'then' (httpStatusCode 2xx) para obter o resultado da requisição.
-   * @param r
-   */
-  HandleThen<T>(r: AxiosResponse<any, any>): AppResult<T> {
-    const result = new AppResult<T>();
-    const parsed = this.ParseAppResult(r.data);
-    if (parsed === null) {
-      // Foi recebido um httpStatusCode 2xx, mas não é um AppResult.
-      // Então, o resultado é o próprio 'data'.
-      // Por padrão, httpStatusCode é 200.
-      result.value = r.data;
-      return result;
-    }
-    if (parsed.hasError) {
-      // Foi recebido um httpStatusCode 2xx e é um AppResult.
-      // Porém, o resultado é um erro.
-      // Então, adiciona os erros e o httpStatusCode.
-      parsed.errors.forEach((e) => result.WithError(e));
-      result.httpStatusCode = parsed.httpStatusCode;
-      return result;
-    }
-    // Foi recebido um httpStatusCode 2xx e é um AppResult.
-    // O resultado é um sucesso.
-    // Então, adiciona o valor.
-    // Por padrão, httpStatusCode é 200.
-    result.value = r.data.value;
-    return result;
-  }
-
-  /**
-   * Usar após 'catch' (httpStatusCode 4xx ou 5xx) para obter o resultado da requisição.
-   * @param r
-   * @returns
-   */
-  HandleCatch<T>(r: any): AppResult<T> {
-    const result = new AppResult<T>();
-    const parsed = this.ParseAppResult(r.response?.data);
-    if (parsed === null) {
-      // Foi recebido um httpStatusCode 4xx ou 5xx, mas não é um AppResult.
-      // Então só adiciona o erro.
-      result.WithError(r.message);
-    } else {
-      // Foi recebido um httpStatusCode 4xx ou 5xx e é um AppResult.
-      // Então, adiciona os erros e o httpStatusCode.
-      result.WithErrors(parsed.errors);
-      result.httpStatusCode = parsed.httpStatusCode;
-    }
-
-    return result;
-  }
-
-  private async SilentLogin() {
-    return new Promise<boolean>(async (res) => {
-      if (!this.isTokenExpired) {
-        res(true);
-        return;
-      }
-      const iframe = this.GenerateIframe();
-      const fn = (e: MessageEvent) => {
-        document.body.removeChild(iframe);
-        window.removeEventListener("message", fn);
-        if (e.origin !== location.origin) {
-          res(false);
-          return;
-        }
-        const action = e.data.action;
-        const code = e.data.code;
-        const state = e.data.state;
-        const error = e.data.error;
-        if (
-          action !== "silent-login-iframe-result" ||
-          error === "login_required" ||
-          !code
-        ) {
-          res(false);
-          return;
-        }
-        const req = new XMLHttpRequest();
-        req.open("POST", this.tokenExchangeUrl, true);
-        req.setRequestHeader(
-          "Content-type",
-          "application/x-www-form-urlencoded"
-        );
-        req.onreadystatechange = () => {
-          if (req.readyState === 4) {
-            if (req.status === 200) {
-              const tokenResponse = JSON.parse(req.responseText);
-              this.keycloak.setToken(
-                tokenResponse.access_token,
-                null,
-                tokenResponse.id_token,
-                new Date().getTime()
-              );
-              res(true);
-              return;
-            }
-            res(false);
-          }
-        };
-        req.send(this.TokenExchangeParams(code, state));
-      };
-      window.addEventListener("message", fn);
-    }).then((r) => {
-      if (!r) {
-        this.keycloak.clearToken();
-        this.keycloak.login();
-      }
-      return r;
-    });
-  }
-
-  private GetCodeVerifierFromState(state: string) {
-    const key = `kc-callback-${state}`;
-    const stored = localStorage.getItem(key);
-    if (stored) {
-      localStorage.removeItem(key);
-      return JSON.parse(stored).pkceCodeVerifier;
-    }
-  }
-
-  private TokenExchangeParams(code: string, state: string) {
-    let params = `code=${code}&grant_type=authorization_code`;
-    params += `&client_id=${encodeURIComponent(
-      this.keycloak.clientId!
-    )}`;
-    params += `&redirect_uri=${this.silentLoginRedirectUrl}`;
-    params += `&code_verifier=${this.GetCodeVerifierFromState(
-      state
-    )}`;
-    return params;
-  }
-
-  private GenerateIframe() {
-    const iframe = document.createElement("iframe");
-    iframe.src =
-      this.keycloak.createLoginUrl({
-        prompt: "none",
-        redirectUri: this.silentLoginRedirectUrl,
-      }) ?? "";
-    document.body.appendChild(iframe);
-    return iframe;
-  }
-
-  private get silentLoginRedirectUrl() {
-    return `${location.origin}/${this.fileName}`;
-  }
-
-  private get tokenExchangeUrl() {
-    return `${this.keycloak.authServerUrl}/realms/${this.keycloak.realm}/protocol/openid-connect/token`;
-  }
-
-  private get isTokenExpired() {
-    const token = this.keycloak.tokenParsed;
-    const exp = token ? token["exp"] : null;
-
-    if (!token || !exp) return true;
-
-    const expiresIn =
-      exp -
-      Math.ceil(new Date().getTime() / 1000) +
-      (this.keycloak.timeSkew ?? 0);
-
-    return expiresIn < 10;
-  }
-}
-
-const UseAxiosClient = (keycloak: Keycloak, baseURL: string) =>
-  new AxiosClient(keycloak, baseURL);
-
-export { AxiosClient, UseAxiosClient };

package/src/common/appResult.ts

@@ -1,34 +0,0 @@
-export class AppResult<Value = null> {
-  constructor(value: Value | null = null) {
-    this._value = value;
-    this._httpStatusCode = 200;
-  }
-  errors: string[] = [];
-  private _value?: Value | null = null;
-  private _httpStatusCode: number;
-  get value() {
-    return this._value as Value;
-  }
-  set value(v: Value) {
-    this._value = v;
-  }
-  get hasSuccess(): boolean {
-    return !this.hasError;
-  }
-  get hasError(): boolean {
-    return this.errors.length > 0;
-  }
-  get httpStatusCode() {
-    return this._httpStatusCode;
-  }
-  set httpStatusCode(v: number) {
-    this._httpStatusCode = v;
-  }
-  WithError(error: string) {
-    this.errors.push(error);
-    if (this._httpStatusCode === 200) this._httpStatusCode = 400;
-  }
-  WithErrors(errors: string[]) {
-    errors.forEach((error) => this.WithError(error));
-  }
-}

package/src/components/button/Button.vue

@@ -1,104 +0,0 @@
-<script setup lang="ts">
-import { StyleValue } from "vue";
-import Icon from "../icon/Icon.vue";
-import { CssClassBuilder } from "../internal/cssClassBuilder";
-
-export interface SfButtonProps {
-  icon?: string;
-  /**
-   * @default true
-   */
-  visible?: boolean;
-  class?: any;
-  style?: StyleValue;
-  disabled?: boolean;
-  loading?: boolean;
-  /**
-   * @default 'primary'
-   */
-  color?:
-    | "primary"
-    | "secondary"
-    | "info"
-    | "success"
-    | "help"
-    | "warn"
-    | "error"
-    | undefined;
-  /**
-   * @default 'md'
-   */
-  size?: "sm" | "md" | "lg" | undefined;
-  /**
-   * @default 'filled'
-   */
-  variant?: "filled" | "outlined" | "text" | undefined;
-  autofocus?: boolean;
-  form?: string;
-  name?: string;
-  id?: string;
-  /**
-   * @default 'button'
-   */
-  type?: "submit" | "reset" | "button";
-  value?: string | string[] | number;
-}
-
-const props: SfButtonProps = withDefaults(
-  defineProps<SfButtonProps>(),
-  {
-    visible: true,
-    color: "primary",
-    size: "md",
-    type: "button",
-    variant: "filled",
-  }
-);
-
-function CssClass() {
-  return new CssClassBuilder(`${props.class ?? ""} sf-button`)
-    .AddClass("sf-component-loading", props.loading)
-    .AddClass("sf-component-disabled", props.disabled)
-    .AddClass("sf-button-small", props.size === "sm")
-    .AddClass("sf-button-medium", props.size === "md")
-    .AddClass("sf-button-large", props.size === "lg")
-    .AddClass("sf-button-filled", props.variant === "filled")
-    .AddClass("sf-button-text", props.variant === "text")
-    .AddClass("sf-button-outlined", props.variant === "outlined")
-    .AddClass("sf-button-with-icon", !!props.icon)
-    .AddClass("sf-ripple")
-    .Build();
-}
-</script>
-
-<template>
-  <button
-    v-if="props.visible"
-    :id="props.id"
-    :name="props.name"
-    :class="CssClass()"
-    :style="props.style"
-    :disabled="props.disabled || props.loading"
-    :data-color="props.color"
-    :form="props.form"
-    :type="props.type"
-  >
-    <Icon
-      v-if="!!props.icon"
-      :icon="props.icon"
-      :loading="props.loading"
-      :size="props.size"
-      :color="undefined"
-      :button-props="{ tabindex: -1 }"
-    />
-    <Icon
-      v-else-if="props.loading"
-      :loading="true"
-      :size="props.size"
-      :button-props="{ tabindex: -1 }"
-    />
-    <span class="sf-button-label">
-      <slot name="default"></slot>
-    </span>
-  </button>
-</template>

package/src/components/content/Content.vue

@@ -1,49 +0,0 @@
-<script setup lang="ts">
-import { StyleValue } from "vue";
-import ScrollToTop from "../internal/ScrollToTop.vue";
-import { CssClassBuilder } from "../internal/cssClassBuilder";
-
-export interface SfContentProps {
-  class?: any;
-  style?: StyleValue;
-  disableBodyPadding?: boolean;
-  disableHeaderPadding?: boolean;
-  disableFooterPadding?: boolean;
-}
-
-const props: SfContentProps = defineProps<SfContentProps>();
-
-function Css() {
-  return new CssClassBuilder("sf-content")
-    .AddClass(props.class, !!props.class)
-    .Build();
-}
-
-function CssBody() {
-  return new CssClassBuilder("sf-content-body")
-    .AddClass("sf-content-no-padding", props.disableBodyPadding)
-    .Build();
-}
-
-function CssHeader() {
-  return new CssClassBuilder("sf-content-header")
-    .AddClass("sf-content-no-padding", props.disableHeaderPadding)
-    .Build();
-}
-
-function CssFooter() {
-  return new CssClassBuilder("sf-content-footer")
-    .AddClass("sf-content-no-padding", props.disableFooterPadding)
-    .Build();
-}
-</script>
-<template>
-  <div :class="Css()" :style="props.style">
-    <div :class="CssHeader()"><slot name="header"></slot></div>
-    <div :class="CssBody()">
-      <slot name="default"></slot>
-      <ScrollToTop />
-    </div>
-    <div :class="CssFooter()"><slot name="footer"></slot></div>
-  </div>
-</template>

package/src/components/drawer/Drawer.vue

@@ -1,146 +0,0 @@
-<script setup lang="ts">
-import { StyleValue, ref, useSlots, watch } from "vue";
-import { CssClassBuilder } from "../internal/cssClassBuilder";
-import { GetMaxZindex } from "../internal/getMaxZindex";
-import { nanoid } from "nanoid";
-import SfIcon from "../icon/Icon.vue";
-
-export interface SfDrawerProps {
-  visible: boolean;
-  /**
-   * @default 'left'
-   */
-  position?: "left" | "right" | "bottom" | "full";
-  style?: StyleValue;
-}
-
-const props: SfDrawerProps = withDefaults(
-  defineProps<SfDrawerProps>(),
-  {
-    visible: false,
-    position: "left",
-  }
-);
-
-const emit = defineEmits<{
-  (e: "update:visible", v: boolean): void;
-  (e: "open"): void;
-  (e: "before-close"): void;
-}>();
-
-const slots = useSlots();
-
-const visible = ref(props.visible);
-
-const maskVisible = ref(false);
-
-const zIndex = ref(0);
-
-const id = nanoid();
-
-function Close() {
-  visible.value = false;
-}
-
-function OnKeydown(ev: KeyboardEvent) {
-  if (ev.key === "Escape" || ev.code === "Escape") {
-    Close();
-  }
-}
-
-function OnEnter() {
-  emit("open");
-  window.document.addEventListener("keydown", OnKeydown, true);
-}
-
-function OnBeforeEnter(el: Element) {
-  zIndex.value = GetMaxZindex();
-  (el as HTMLElement).style.zIndex = `${zIndex.value}`;
-}
-
-function OnBeforeLeave(el: Element) {
-  emit("before-close");
-  el?.parentElement?.classList.add("sf-mask-overlay-leave");
-}
-
-function OnAfterLeave() {
-  window.document.removeEventListener("keydown", OnKeydown, true);
-  maskVisible.value = false;
-}
-
-function CssMask() {
-  return new CssClassBuilder("sf-mask sf-mask-overlay")
-    .AddClass("right", props.position === "right")
-    .AddClass("bottom", props.position === "bottom")
-    .AddClass("full", props.position === "full")
-    .AddClass("sf-mask-overlay-enter", props.visible === true)
-    .Build();
-}
-
-watch(
-  () => props.visible,
-  (v) => {
-    visible.value = v;
-  }
-);
-watch(
-  () => visible.value,
-  (v) => {
-    emit("update:visible", v);
-    if (v) {
-      maskVisible.value = true;
-    }
-  }
-);
-</script>
-
-<template>
-  <Teleport :to="'body'">
-    <div
-      v-if="maskVisible"
-      :id="id"
-      :class="CssMask()"
-      :style="{ zIndex: zIndex - 1 }"
-      @click.stop="Close"
-    >
-      <transition
-        name="sf-drawer"
-        appear
-        @before-enter="OnBeforeEnter"
-        @enter="OnEnter"
-        @before-leave="OnBeforeLeave"
-        @after-leave="OnAfterLeave"
-      >
-        <div
-          v-if="visible"
-          :class="[
-            'sf-drawer',
-            {
-              'sf-drawer-with-footer': !!slots.footer,
-            },
-          ]"
-          :style="props.style"
-          role="dialog"
-          @click.stop="void"
-        >
-          <div class="sf-drawer-header">
-            <span class="sf-drawer-title">
-              <slot name="title"></slot>
-            </span>
-            <SfIcon
-              :button="true"
-              :icon="'close'"
-              @click.stop="Close"
-            />
-          </div>
-          <div class="sf-drawer-content">
-            <slot name="default"></slot>
-          </div>
-          <div class="sf-drawer-footer" v-if="slots.footer">
-            <slot name="footer"></slot>
-          </div>
-        </div>
-      </transition>
-    </div>
-  </Teleport>
-</template>

package/src/components/icon/Icon.vue

@@ -1,96 +0,0 @@
-<script setup lang="ts">
-import { ButtonHTMLAttributes, StyleValue, computed } from "vue";
-import LoadingCircle from "../internal/LoadingCircle.vue";
-import { CssClassBuilder } from "../internal/cssClassBuilder";
-import Tooltip from "../tooltip/Tooltip.vue";
-import { Color, IconSize } from "../../types";
-
-export interface SfIconProps {
-  icon?: string;
-  visible?: boolean;
-  class?: any;
-  style?: StyleValue;
-  disabled?: boolean;
-  loading?: boolean;
-  button?: boolean;
-  size?: IconSize;
-  dot?: boolean;
-  dotColor?: Color;
-  filled?: boolean;
-  buttonProps?: ButtonHTMLAttributes;
-  tooltip?: string;
-  color?: Color | "inherit";
-}
-
-const props: SfIconProps = withDefaults(defineProps<SfIconProps>(), {
-  visible: true,
-  class: "",
-  style: "",
-  size: "md",
-  dotColor: "error",
-  color: "inherit",
-});
-
-const dynamicComponent = computed(() =>
-  props.tooltip ? Tooltip : "div"
-);
-
-const componentClass = computed(() => {
-  return props.tooltip ? "" : "display-content";
-});
-
-const cssClass = computed(() => {
-  return new CssClassBuilder(`${props.class} sf-icon`)
-    .AddClass("sf-component-loading", props.loading)
-    .AddClass("sf-component-disabled", props.disabled)
-    .AddClass("sf-icon-button", props.button)
-    .AddClass("sf-icon-small", props.size === "sm")
-    .AddClass("sf-icon-medium", props.size === "md")
-    .AddClass("sf-icon-large", props.size === "lg")
-    .AddClass("sf-icon-xlarge", props.size === "xl")
-    .AddClass("sf-icon-2xlarge", props.size === "2xl")
-    .AddClass("sf-icon-3xlarge", props.size === "3xl")
-    .AddClass("sf-ripple", props.button === true)
-    .AddClass(
-      `${props.color}-color`,
-      !!props.color && props.color !== "inherit"
-    )
-    .Build();
-});
-</script>
-
-<template>
-  <component
-    :is="dynamicComponent"
-    :text="props.tooltip"
-    :class="componentClass"
-  >
-    <div
-      v-if="!!props.visible"
-      :style="props.style"
-      :class="cssClass"
-    >
-      <button
-        :class="[
-          'material-symbols-outlined',
-          { 'icon-filled': !!props.filled },
-        ]"
-        :disabled="props.disabled || props.loading"
-        v-bind="props.buttonProps"
-        :tabindex="!props.button ? -1 : undefined"
-      >
-        <template v-if="props.loading">
-          <LoadingCircle></LoadingCircle>
-        </template>
-        <template v-else>{{ props.icon }}</template>
-      </button>
-      <span v-if="props.dot" :data-color="props.dotColor"></span>
-    </div>
-  </component>
-</template>
-
-<style scoped>
-.display-content {
-  display: contents;
-}
-</style>