@luizleon/sf.prefeiturasp.vuecomponents 0.0.66 → 4.0.1

package/src/services/authService.ts

@@ -52,14 +52,23 @@ function ConfigAuthService(config?: KeycloakConfig): IAuthService {
         if (authenticated) {
           await FetchUserInfo();
         }
-        if (callback && typeof callback === "function") callback();
-        document.documentElement.classList.add("app-mounted");
+        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) => {
-        console.error(e);
         document.documentElement.setAttribute(
           "data-app-message",
-          "Não foi possível conectar no servidor de autenticação."
+          "Ocorreu na comunicação com o servidor de autenticação."
         );
       });
   };

package/src/style/componentes.scss

@@ -1,4 +1,8 @@
-@import "./src/components/layout";
+@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";

package/src/style/src/_functions.scss

@@ -1,4 +1,19 @@
 @function theme-colors($dark: false) {
-  @return "primary", "info", "success", "warn", "help",
-    "error", "secondary";
+  @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

@@ -74,38 +74,40 @@
 }
 
 @mixin button-colors($dark: false) {
-  @each $color in theme-colors() {
-    &[data-color="#{$color}"] {
-      color: var(--bg-color);
+  @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 var(--#{$color}-hover-color);
+          outline: 2px solid $button-var-color;
           outline-offset: 1px;
           border-color: var(--bg-color);
         }
       }
       &:active {
         transition: 0s;
-        &:active {
-          @if ($dark) {
-            filter: brightness(0.9);
-          } @else {
-            filter: brightness(1.1);
-          }
-        }
+        filter: brightness(0.9);
       }
       &.#{$prefix}button-filled {
-        background-color: var(--#{$color}-color);
+        color: #{$button-filled-color};
+        background-color: $button-var-color;
       }
       &.#{$prefix}button-outlined,
       &.#{$prefix}button-text {
+        color: $button-var-color;
         background-color: transparent;
-        color: var(--#{$color}-color);
-        border-color: var(--#{$color}-color);
         @media (pointer: fine) {
           &:hover,
           &:focus-visible {
-            background-color: var(--#{$color}-hover-color);
+            background: color-mix(
+              in srgb,
+              currentColor 10%,
+              transparent
+            );
           }
         }
       }
@@ -117,34 +119,54 @@
 }
 
 @mixin dot-colors() {
-  @each $color in theme-colors() {
-    &[data-color="#{$color}"] {
-      color: var(--#{$color}-color);
+  @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() {
-    &[data-color="#{$color}"] {
-      background-color: var(--#{$color}-color);
+  @each $color in $theme-colors-list {
+    $colorName: str-replace($color, "--");
+    &[data-color="#{$colorName}"] {
+      color: var(#{$color}-color);
     }
   }
 }
 
 @mixin toast-colors() {
-  @each $color in theme-colors() {
-    &.toast-#{$color} {
-      --animate-bg-color: var(--#{$color}-color);
+  @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 icon-button-hover-colors() {
-  @each $color in theme-colors() {
-    &:hover,
-    &:focus-visible {
-      background-color: var(--#{$color}-hover-color);
+@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;
     }
   }
 }

package/src/style/src/_variables.scss

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

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

@@ -4,8 +4,10 @@
   position: relative;
   display: inline-flex;
   align-items: center;
-  border-radius: 4px;
+  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 {
@@ -13,11 +15,12 @@
   }
 
   .#{$prefix}button-label {
-    white-space: nowrap;
+    white-space: wrap;
   }
 
   .#{$prefix}icon {
     position: absolute;
+    color: unset !important;
     > button {
       color: currentColor !important;
     }
@@ -41,7 +44,7 @@
   }
 
   &.#{$prefix}button-small {
-    height: 32px;
+    min-height: 32px;
     font-size: 0.875rem;
     padding: 0 12px;
     &.#{$prefix}button-with-icon {
@@ -54,13 +57,10 @@
         margin-left: -8px;
       }
     }
-    .#{$prefix}button-label {
-      line-height: 32px;
-    }
   }
 
   &.#{$prefix}button-medium {
-    height: 36px;
+    min-height: 36px;
     font-size: 1rem;
     padding: 0 12px;
     &.#{$prefix}button-with-icon {
@@ -73,13 +73,10 @@
         margin-left: -12px;
       }
     }
-    .#{$prefix}button-label {
-      line-height: 36px;
-    }
   }
 
   &.#{$prefix}button-large {
-    height: 48px;
+    min-height: 48px;
     font-size: 1.25rem;
     padding: 0 16px;
     &.#{$prefix}button-with-icon {

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

@@ -14,7 +14,7 @@ div.#{$prefix}icon {
   align-items: center;
 
   > button {
-    color: var(--text-color);
+    color: currentColor;
     pointer-events: none;
     background: none;
     border: none;
@@ -22,10 +22,10 @@ div.#{$prefix}icon {
     + span {
       position: absolute;
       border-radius: 50%;
-      width: 6px;
-      height: 6px;
-      top: 4px;
-      right: 4px;
+      width: 8px;
+      height: 8px;
+      top: 6px;
+      right: 6px;
       @include dot-colors;
     }
     &:focus-visible {
@@ -45,66 +45,68 @@ div.#{$prefix}icon {
   }
 
   &.#{$prefix}icon-small {
-    min-width: 28px;
-    > button {
-      font-size: 20px;
-    }
-    .#{$prefix}loading-circle {
-      width: 20px;
-      height: 20px;
-    }
+    --size: calc(var(--material-icon-font-size) * 0.75);
   }
 
   &.#{$prefix}icon-medium {
-    min-width: 37px;
+    --size: var(--material-icon-font-size);
+  }
+
+  &.#{$prefix}icon-large {
+    --size: calc(var(--material-icon-font-size) * 1.25);
     > button {
-      font-size: 24px;
-      + span {
-        width: 8px;
-        height: 8px;
-        top: 6px;
-        right: 6px;
-      }
+      font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0,
+        "opsz" 48;
     }
-    .#{$prefix}loading-circle {
-      width: 24px;
-      height: 24px;
+  }
+
+  &.#{$prefix}icon-xlarge {
+    --size: calc(var(--material-icon-font-size) * 2);
+    > button {
+      font-variation-settings: "FILL" 0, "wght" 200, "GRAD" 0,
+        "opsz" 48;
     }
   }
 
-  &.#{$prefix}icon-large {
-    min-width: 48px;
+  &.#{$prefix}icon-2xlarge {
+    --size: calc(var(--material-icon-font-size) * 2.5);
     > button {
-      font-size: 36px;
-      + span {
-        width: 12px;
-        height: 12px;
-        top: 6px;
-        right: 6px;
-      }
+      font-variation-settings: "FILL" 0, "wght" 100, "GRAD" 0,
+        "opsz" 48;
     }
-    .#{$prefix}loading-circle {
-      width: 28px;
-      height: 28px;
+  }
+
+  &.#{$prefix}icon-3xlarge {
+    --size: calc(var(--material-icon-font-size) * 3);
+    > button {
+      font-variation-settings: "FILL" 0, "wght" 100, "GRAD" 0,
+        "opsz" 48;
     }
   }
 
+  .#{$prefix}loading-circle {
+    width: var(--size);
+    height: var(--size);
+  }
+
+  > button {
+    font-size: var(--size);
+    width: var(--size);
+    height: var(--size);
+    line-height: var(--size);
+  }
+
   &.#{$prefix}icon-button {
+    padding: 6px;
     border-radius: 50%;
     transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1)
       0ms;
-    &.#{$prefix}icon-small {
-      padding: 4px;
-    }
-    &.#{$prefix}icon-medium {
-      padding: 6px;
-    }
-    &.#{$prefix}icon-large {
-      padding: 8px;
-    }
     @media (pointer: fine) {
-      cursor: pointer;
-      @include icon-button-hover-colors;
+      &:hover,
+      &:focus-within {
+        cursor: pointer;
+        background: color-mix(in srgb, currentColor 10%, transparent);
+      }
     }
   }
 

package/src/style/src/components/_tooltip.scss

@@ -1,21 +1,18 @@
 .#{$prefix}tooltip-wrapper {
   --arrow-width: 7.5px;
   pointer-events: none;
-  width: 120px;
   color: var(--bg-color);
   text-align: center;
-  text-transform: lowercase;
   position: absolute;
   opacity: 0;
   transition: opacity 0.3s;
 
   .#{$prefix}tooltip-inner {
     position: relative;
-    padding: 5px 2px;
-    border-radius: 4px;
+    padding: var(--inline-spacing);
+    border-radius: 6px;
     background-color: var(--text-color);
-    font-size: 0.825rem;
-
+    font-size: 0.875em;
     &::after {
       content: "";
       position: absolute;
@@ -45,7 +42,9 @@
 }
 
 .#{$prefix}tooltip-anchor {
-  display: inline !important;
+  display: inline-block !important;
+  width: fit-content;
+  height: fit-content;
   border-radius: 50%;
   &:has(.component-disabled),
   &:has(.component-loading) {

package/src/types/index.ts

@@ -1,5 +1,21 @@
 import Keycloak, { KeycloakInitOptions } from "./../keycloak";
 
+export type Color =
+  | "primary"
+  | "secondary"
+  | "info"
+  | "success"
+  | "help"
+  | "warn"
+  | "error"
+  | "text";
+
+export type Size = "sm" | "md" | "lg";
+
+export type IconSize = Size | "xl" | "2xl" | "3xl";
+
+export type ButtonVariant = "filled" | "outlined" | "text";
+
 interface SfPanelMenuItem {
   label: string;
   routeName?: string;
@@ -9,6 +25,14 @@ interface SfPanelMenuItem {
   key?: string;
 }
 
+export interface SfNavMenuItem {
+  text: string;
+  [key: string]: any;
+  href?: string;
+  icon?: string;
+  items?: SfNavMenuItem[];
+}
+
 interface User {
   name: string;
   email: string;

package/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/tsconfig.json

@@ -10,11 +10,13 @@
     "esModuleInterop": true,
     "skipLibCheck": true,
     "forceConsistentCasingInFileNames": true,
+    "allowSyntheticDefaultImports": true,
     "noUnusedLocals": true,
     "useDefineForClassFields": true,
     "resolveJsonModule": true,
-    "jsx": "preserve"
+    "jsx": "preserve",
+    "composite": true,
   },
-  "include": ["src"],
-  "exclude": ["node_modules", "dist", "src/App.vue"]
+  "include": ["vite-env.d.ts", "src/**/*", "src/**/*.vue"],
+  "exclude": ["node_modules", "**/*.cy.ts", "**/*.spec.ts", "**/__tests__/**/*"]
 }

package/vite.config.js

@@ -1,6 +1,5 @@
 import { defineConfig } from "vite";
 import vue from "@vitejs/plugin-vue";
-import dts from "vite-plugin-dts";
 import path from "path";
 import sourcemaps from "rollup-plugin-sourcemaps";
 
@@ -10,8 +9,7 @@ export default defineConfig({
     lib: {
       entry: path.resolve(__dirname, "src/index.ts"),
       name: "sf.prefeiturasp.vuecomponents",
-      fileName: (format) =>
-        `sf.prefeiturasp.vuecomponents.${format}.js`,
+      formats: ["es", "cjs", "umd"],
     },
     rollupOptions: {
       plugins: [sourcemaps()],
@@ -26,5 +24,5 @@ export default defineConfig({
     },
     sourcemap: true,
   },
-  plugins: [vue(), dts({ cleanVueFileName: true })],
+  plugins: [vue()],
 });

package/dist/components/internal/LoadingCircle.d.ts

@@ -1,2 +0,0 @@
-declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-export default _default;

package/dist/components/internal/MenuIcon.d.ts

@@ -1,2 +0,0 @@
-declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-export default _default;

package/dist/components/internal/ScrollToTop.d.ts

@@ -1,2 +0,0 @@
-declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-export default _default;

package/dist/components/internal/ThemeToggle.d.ts

@@ -1,2 +0,0 @@
-declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-export default _default;

package/dist/components/navmenulink/NavMenuLink.d.ts

@@ -1,18 +0,0 @@
-export interface SfNavMenuLinkProps {
-    href: string;
-    text: string;
-    icon?: string;
-    iconFilled?: boolean;
-    exact?: boolean;
-}
-declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<SfNavMenuLinkProps>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<SfNavMenuLinkProps>>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-export default _default;
-type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-type __VLS_TypePropsToRuntimeProps<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: import('vue').PropType<T[K]>;
-        required: true;
-    };
-};

package/dist/components/panelmenu/PanelMenu.d.ts

@@ -1,16 +0,0 @@
-import { SfPanelMenuItem } from "../../types";
-declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
-    items: SfPanelMenuItem[];
-}>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
-    items: SfPanelMenuItem[];
-}>>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-export default _default;
-type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-type __VLS_TypePropsToRuntimeProps<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: import('vue').PropType<T[K]>;
-        required: true;
-    };
-};

package/dist/index.d.ts

@@ -1,18 +0,0 @@
-import SfLayout from "./components/layout/Layout";
-import SfIcon from "./components/icon/Icon";
-import SfNavMenuLink from "./components/navmenulink/NavMenuLink";
-import SfContent from "./components/content/Content";
-import SfTabNavigation from "./components/tabnavigation/TabNavigation";
-import SfButton from "./components/button/Button";
-import SfDrawer from "./components/drawer/Drawer";
-import SfMessage from "./components/message/Message";
-import SfTooltip from "./components/tooltip/Tooltip";
-import SfPanelMenu from "./components/panelmenu/PanelMenu";
-import { UseNavMenuService } from "./services/navMenuService";
-import { UseAlertService, UseConfirmService } from "./services/dialogService";
-import { StartAuthService, UseAuthService } from "./services/authService";
-import { AppResult } from "./common/appResult";
-import "./style/componentes.scss";
-import { AxiosClient, UseAxiosClient } from "./axios/axiosClient";
-export { SfLayout, SfIcon, SfNavMenuLink, SfContent, SfTabNavigation, SfButton, SfDrawer, SfMessage, SfTooltip, SfPanelMenu, StartAuthService, UseAuthService, UseNavMenuService, UseConfirmService, UseAlertService, UseAxiosClient, AppResult, AxiosClient, };
-export * from "./types";