@luizleon/sf.prefeiturasp.vuecomponents 0.0.44 → 0.0.45

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,24 +5,7 @@ import {
   GlobalComponentConstructor,
 } from "../../ts-helpers";
 import { Cor } from "../../enum";
-
-export interface SfMessageProps {
-  /**
-   * @default 'info'
-   */
-  color?:
-    | "primary"
-    | "secondary"
-    | "info"
-    | "success"
-    | "help"
-    | "warn"
-    | "error"
-    | undefined;
-  class?: any;
-  style?: StyleValue;
-  icon?: string;
-}
+import { SfMessageProps } from "./Message.vue";
 
 export interface SfMessageSlots {
   default: VNode[];

package/src/components/message/Message.vue

@@ -1,7 +1,24 @@
 <script lang="ts" setup>
 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>(),

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,6 +6,7 @@ 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";
@@ -28,6 +29,7 @@ export {
   SfButton,
   SfDrawer,
   SfMessage,
+  SfTooltip,
   UseAuthService,
   UseNavMenuService,
   UseConfirmService,

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;

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;
   }
 }

package/vite.config.js

@@ -1,6 +1,5 @@
 import { defineConfig } from "vite";
 import vue from "@vitejs/plugin-vue";
-import vueTypeImports from "vite-plugin-vue-type-imports";
 import dts from "vite-plugin-dts";
 import path from "path";
 import sourcemaps from "rollup-plugin-sourcemaps";
@@ -25,5 +24,5 @@ export default defineConfig({
     },
     sourcemap: true,
   },
-  plugins: [vue(), vueTypeImports(), dts({ cleanVueFileName: true })],
+  plugins: [vue(), dts({ cleanVueFileName: true })],
 });