@luizleon/sf.prefeiturasp.vuecomponents 0.0.43 → 0.0.45

package/src/components/internal/HeaderAvatar.vue

@@ -2,10 +2,9 @@
 import { computed, onMounted, ref } from "vue";
 import SfDrawer from "../drawer/Drawer.vue";
 import SfButton from "../button/Button.vue";
-import { Cor } from "../../enum";
-import { UseDialogService } from "../../services/dialogService";
+import { UseConfirmService } from "../../services/dialogService";
 
-const dialogService = UseDialogService();
+const confirmService = UseConfirmService();
 
 const letters = ref("?");
 
@@ -14,7 +13,7 @@ const emit = defineEmits<{
 }>();
 
 async function Logout() {
-  const confirm = await dialogService.ConfirmAsync({
+  const confirm = await confirmService.CreateConfirmAsync({
     text: `Você deseja sair da conta?`,
     confirmLabel: "sair",
   });
@@ -67,7 +66,7 @@ onMounted(() => {
     <template #title>Minha conta</template>
     <template #default>
       <div class="sf-p-4">
-        <SfButton :color="Cor.Error" @click="Logout">Sair</SfButton>
+        <SfButton :color="'error'" @click="Logout">Sair</SfButton>
       </div>
     </template>
   </SfDrawer>

package/src/components/layout/Layout.d.ts

@@ -3,8 +3,7 @@ import {
   ClassComponent,
   GlobalComponentConstructor,
 } from "../ts-helpers";
-
-export interface SfLayoutProps {}
+import { SfLayoutProps } from "./Layout.vue";
 
 export interface SfLayoutSlots {
   /**

package/src/components/layout/Layout.vue

@@ -4,6 +4,9 @@ import { UseNavMenuService } from "../../services/navMenuService";
 import HeaderAvatar from "../internal/HeaderAvatar.vue";
 import MenuIcon from "../internal/MenuIcon.vue";
 import ThemeToggle from "../internal/ThemeToggle.vue";
+import SfTooltip from "../tooltip/Tooltip.vue";
+
+export interface SfLayoutProps {}
 
 const navService = UseNavMenuService();
 
@@ -34,7 +37,9 @@ onMounted(() => {
         <slot name="title"></slot>
       </div>
       <slot name="action"> </slot>
-      <ThemeToggle />
+      <SfTooltip :text="'alternar tema'">
+        <ThemeToggle />
+      </SfTooltip>
       <HeaderAvatar @logout="emit('logout')" />
     </header>
     <nav :class="{ visible: navService.IsVisible }">

package/src/components/message/Message.d.ts

@@ -5,16 +5,7 @@ import {
   GlobalComponentConstructor,
 } from "../../ts-helpers";
 import { Cor } from "../../enum";
-
-export interface SfMessageProps {
-  /**
-   * @default "Info"
-   */
-  severity?: Cor;
-  class?: any;
-  style?: StyleValue;
-  icon?: string;
-}
+import { SfMessageProps } from "./Message.vue";
 
 export interface SfMessageSlots {
   default: VNode[];

package/src/components/message/Message.vue

@@ -1,19 +1,35 @@
 <script lang="ts" setup>
-import { Cor } from "../../enum";
 import { CssClassBuilder } from "../internal/cssClassBuilder";
-import { SfMessageProps } from "./Message";
-import { computed } from "vue";
+import { StyleValue, computed } from "vue";
+
+export interface SfMessageProps {
+  /**
+   * @default 'info'
+   */
+  color?:
+    | "primary"
+    | "secondary"
+    | "info"
+    | "success"
+    | "help"
+    | "warn"
+    | "error"
+    | undefined;
+  class?: any;
+  style?: StyleValue;
+  icon?: string;
+}
 
 const props: SfMessageProps = withDefaults(
   defineProps<SfMessageProps>(),
   {
-    severity: Cor.Info,
+    color: "info",
   }
 );
 
 const icon = computed(() => {
   if (!!props.icon) return props.icon;
-  switch (props.severity) {
+  switch (props.color) {
     case "error":
       return "cancel";
     case "info":
@@ -31,13 +47,13 @@ const icon = computed(() => {
 
 const css = computed(() => {
   return new CssClassBuilder("sf-message")
-    .AddClass("sf-message-error", props.severity === "error")
-    .AddClass("sf-message-info", props.severity === "info")
-    .AddClass("sf-message-warning", props.severity === "warn")
-    .AddClass("sf-message-success", props.severity === "success")
-    .AddClass("sf-message-help", props.severity === "help")
-    .AddClass("sf-message-primary", props.severity === "primary")
-    .AddClass("sf-message-secondary", props.severity === "secondary")
+    .AddClass("sf-message-error", props.color === "error")
+    .AddClass("sf-message-info", props.color === "info")
+    .AddClass("sf-message-warning", props.color === "warn")
+    .AddClass("sf-message-success", props.color === "success")
+    .AddClass("sf-message-help", props.color === "help")
+    .AddClass("sf-message-primary", props.color === "primary")
+    .AddClass("sf-message-secondary", props.color === "secondary")
     .AddClass(props.class)
     .Build();
 });

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

@@ -2,13 +2,7 @@ import {
   ClassComponent,
   GlobalComponentConstructor,
 } from "../../ts-helpers";
-
-export interface SfNavMenuLinkProps {
-  href: string;
-  text: string;
-  icon?: string;
-  exact?: boolean;
-}
+import { SfNavMenuLinkProps } from "./NavMenuLink.vue";
 
 export interface SfNavMenuLinkSlots {}
 

package/src/components/navmenulink/NavMenuLink.vue

@@ -1,8 +1,15 @@
 <script setup lang="ts">
-import { SfNavMenuLinkProps } from "./NavMenuLink";
 import { UseNavMenuService } from "../../services/navMenuService";
 import Icon from "../icon/Icon.vue";
 
+export interface SfNavMenuLinkProps {
+  href: string;
+  text: string;
+  icon?: string;
+  iconFilled?: boolean;
+  exact?: boolean;
+}
+
 const props: SfNavMenuLinkProps = defineProps<SfNavMenuLinkProps>();
 
 const navService = UseNavMenuService();
@@ -32,7 +39,8 @@ function OnClick(ev: Event, navigate: any) {
     >
       <Icon
         v-if="props.icon"
-        :icone="props.icon"
+        :icon="props.icon"
+        :filled="props.iconFilled"
         :button-props="{ tabindex: -1 }"
       />
       <span class="sf-navmenulink-text">{{ props.text }}</span>

package/src/components/tabnavigation/TabNavigation.d.ts

@@ -2,15 +2,7 @@ import {
   ClassComponent,
   GlobalComponentConstructor,
 } from "../../ts-helpers";
-
-export interface SfTabNavigationTab {
-  text: string;
-  route: string;
-}
-
-export interface SfTabNavigationProps {
-  tabs: SfTabNavigationTab[];
-}
+import { SfTabNavigationProps } from "./TabNavigation.vue";
 
 export interface SfTabNavigationSlots {
   item: (scope: {

package/src/components/tabnavigation/TabNavigation.vue

@@ -1,6 +1,14 @@
 <script setup lang="ts">
 import { onMounted, onBeforeUnmount, ref } from "vue";
-import { SfTabNavigationProps } from "./TabNavigation";
+
+export interface SfTabNavigationTab {
+  text: string;
+  route: string;
+}
+
+export interface SfTabNavigationProps {
+  tabs: SfTabNavigationTab[];
+}
 
 const props: SfTabNavigationProps =
   defineProps<SfTabNavigationProps>();

package/src/components/tooltip/Tooltip.d.ts

@@ -0,0 +1,23 @@
+import {
+  ClassComponent,
+  GlobalComponentConstructor,
+} from "../../ts-helpers";
+import { SfTooltipProps } from "./Tooltip.vue";
+
+export interface SfTooltipSlots {}
+
+export declare type SfTooltipEmits = {};
+
+declare class SfTooltip extends ClassComponent<
+  SfTooltipProps,
+  SfTooltipSlots,
+  SfTooltipEmits
+> {}
+
+declare module "@vue/runtime-core" {
+  interface GlobalComponents {
+    SfTooltip: GlobalComponentConstructor<SfTooltip>;
+  }
+}
+
+export default SfTooltip;

package/src/components/tooltip/Tooltip.vue

@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import { onBeforeUnmount } from "vue";
+import { GetMaxZindex } from "../internal/getMaxZindex";
+
+export interface SfTooltipProps {
+  text: string;
+}
+
+const props = defineProps<SfTooltipProps>();
+
+class Tooltip {
+  constructor() {
+    this.zIndex = GetMaxZindex() + 1;
+    this.Render();
+  }
+  zIndex: number;
+  wrapper!: HTMLElement;
+  inner!: HTMLElement;
+  Render() {
+    this.wrapper = document.createElement("div");
+    this.wrapper.classList.add("sf-tooltip-wrapper");
+    this.wrapper.style.zIndex = `${this.zIndex ?? 0}`;
+    this.inner = document.createElement("div");
+    this.inner.classList.add("sf-tooltip-inner");
+    this.wrapper.appendChild(this.inner);
+  }
+  Show(ev: MouseEvent) {
+    this.inner.textContent = props.text;
+    const target = ev.target as HTMLDivElement;
+    document.body.appendChild(this.wrapper);
+    this.Position(target.getBoundingClientRect());
+    this.wrapper.classList.add("visible");
+  }
+  Hide() {
+    this.wrapper.classList.remove("visible");
+    this.wrapper.remove();
+  }
+  Position(rect: DOMRect) {
+    const offset = 10;
+    const top = rect.top;
+    const bottom = rect.bottom;
+    const left = rect.left;
+    const right = rect.right;
+    const margin = rect.width / 2 - 15;
+    const wrapper = this.wrapper;
+    wrapper.style.top = `${bottom + offset}px`;
+    wrapper.style.left = `${left}px`;
+    wrapper.style.marginLeft = `${margin}px`;
+    if (this.OutOfBottom()) {
+      wrapper.style.top = `${top - wrapper.clientHeight - offset}px`;
+      wrapper.classList.add("top");
+    }
+    if (this.OutOfRight()) {
+      wrapper.style.left = `${right - wrapper.clientWidth}px`;
+      wrapper.style.marginLeft = `-${margin}px`;
+      wrapper.classList.add("left");
+    }
+  }
+  OutOfBottom() {
+    const rect = this.wrapper.getBoundingClientRect();
+    return (
+      rect.bottom >
+      (window.innerHeight || document.documentElement.clientHeight)
+    );
+  }
+  OutOfRight() {
+    const rect = this.wrapper.getBoundingClientRect();
+    return (
+      rect.right >
+      (window.innerWidth || document.documentElement.clientWidth)
+    );
+  }
+}
+
+const TooltipInstance = new Tooltip();
+
+onBeforeUnmount(() => {
+  TooltipInstance.Hide();
+});
+</script>
+
+<template>
+  <div
+    class="sf-tooltip-anchor"
+    @mouseenter="TooltipInstance.Show"
+    @mouseleave="TooltipInstance.Hide"
+    @mousedown="TooltipInstance.Hide"
+  >
+    <slot name="default"></slot>
+  </div>
+</template>

package/src/index.ts

@@ -6,15 +6,17 @@ import SfTabNavigation from "./components/tabnavigation/TabNavigation.vue";
 import SfButton from "./components/button/Button.vue";
 import SfDrawer from "./components/drawer/Drawer.vue";
 import SfMessage from "./components/message/Message.vue";
+import SfTooltip from "./components/tooltip/Tooltip.vue";
 import { ThemeToggleBase } from "./components/internal/ThemeToggle";
 
 import { UseNavMenuService } from "./services/navMenuService";
-import { UseDialogService } from "./services/dialogService";
+import {
+  UseAlertService,
+  UseConfirmService,
+} from "./services/dialogService";
 import { UseAuthService } from "./services/authService";
 import { AppResult } from "./common/appResult";
 
-import { Cor, Tamanho } from "./enum";
-
 import "./style/componentes.scss";
 import { AxiosClient, UseAxiosClient } from "./axios/axiosClient";
 
@@ -27,13 +29,13 @@ export {
   SfButton,
   SfDrawer,
   SfMessage,
+  SfTooltip,
   UseAuthService,
   UseNavMenuService,
-  UseDialogService,
+  UseConfirmService,
+  UseAlertService,
   UseAxiosClient,
   AppResult,
-  Cor,
-  Tamanho,
   AxiosClient,
 };
 

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/src/_mixins.scss

@@ -164,3 +164,8 @@
   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/components/_icon.scss

@@ -1,6 +1,13 @@
 @import "../variables";
 @import "../mixins";
 
+.material-symbols-outlined {
+  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
+  &.icon-filled {
+    font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
+  }
+}
+
 div.#{$prefix}icon {
   position: relative;
   display: inline-flex;
@@ -37,13 +44,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

@@ -36,7 +36,7 @@
   &[data-icon] {
     padding-left: 3.25rem;
     &::before {
-      @include material-symbols-outlined;
+      @include material-symbols-filled;
       content: attr(data-icon);
       position: absolute;
       top: 50%;

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

@@ -1,4 +1,4 @@
-.sf-tooltip-wrapper {
+.#{$prefix}tooltip-wrapper {
   --arrow-width: 7.5px;
   pointer-events: none;
   width: 120px;
@@ -9,18 +9,18 @@
   opacity: 0;
   transition: opacity 0.3s;
 
-  .sf-tooltip-inner {
+  .#{$prefix}tooltip-inner {
     position: relative;
-    padding: 6px 0;
+    padding: 5px 2px;
     border-radius: 4px;
     background-color: var(--text-color);
-    font-size: 0.875rem;
+    font-size: 0.825rem;
 
     &::after {
       content: "";
       position: absolute;
       left: var(--arrow-width);
-      top: calc(var(--arrow-width) * -1);
+      top: calc(var(--arrow-width) * -0.75);
       border-left: var(--arrow-width) solid transparent;
       border-right: var(--arrow-width) solid transparent;
       border-bottom: var(--arrow-width) solid var(--text-color);
@@ -31,25 +31,24 @@
     opacity: 1;
   }
 
-  &.top .sf-tooltip-inner::after {
+  &.top .#{$prefix}tooltip-inner::after {
     top: unset;
-    bottom: calc(var(--arrow-width) * -1);
+    bottom: calc(var(--arrow-width) * -0.75);
     border-bottom: unset;
     border-top: var(--arrow-width) solid var(--text-color);
   }
 
-  &.left .sf-tooltip-inner::after {
+  &.left .#{$prefix}tooltip-inner::after {
     left: unset;
     right: var(--arrow-width);
   }
 }
 
-.sf-tooltip-anchor {
+.#{$prefix}tooltip-anchor {
   display: inline !important;
   border-radius: 50%;
-  &:has(.sf-component-disabled),
-  &:has(.sf-component-loading),
-  &:has(.sf-component-freeze) {
+  &:has(.component-disabled),
+  &:has(.component-loading) {
     pointer-events: none !important;
   }
 }