@luizleon/sf.prefeiturasp.vuecomponents 4.0.2 → 4.0.4

package/src/components/message/Message.vue

@@ -1,65 +0,0 @@
-<script lang="ts" setup>
-import { CssClassBuilder } from "../internal/cssClassBuilder";
-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>(),
-  {
-    color: "info",
-  }
-);
-
-const icon = computed(() => {
-  if (!!props.icon) return props.icon;
-  switch (props.color) {
-    case "error":
-      return "cancel";
-    case "info":
-      return "info";
-    case "warn":
-      return "warning";
-    case "success":
-      return "check";
-    case "help":
-      return "help";
-    default:
-      return null;
-  }
-});
-
-const css = computed(() => {
-  return new CssClassBuilder("sf-message")
-    .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();
-});
-</script>
-<template>
-  <div :class="css" :data-icon="icon">
-    <slot name="default"></slot>
-  </div>
-</template>

package/src/components/navmenu/NavMenu.vue

@@ -1,109 +0,0 @@
-<script setup lang="ts">
-import PanelMenu from "primevue/panelmenu";
-import { UseNavMenuService } from "../../services/navMenuService";
-import { SfNavMenuItem } from "./../../types";
-
-export interface SfNavMenuProps {
-  items: SfNavMenuItem[];
-}
-
-const props = defineProps<SfNavMenuProps>();
-
-const navService = UseNavMenuService();
-
-function OnClickRoute(ev: Event, navigate: () => void) {
-  ev.preventDefault();
-  const target = ev.target as HTMLElement;
-  const nav = target.closest(".panel-menu-wrapper");
-  if (nav && nav.clientWidth + 10 > document.body.clientWidth) {
-    navService.Close();
-  }
-  navigate();
-}
-</script>
-
-<template>
-  <div class="panel-menu-wrapper">
-    <PanelMenu :model="props.items" :unstyled="true">
-      <template #item="{ item, active }">
-        <router-link
-          v-if="!!item.href"
-          v-slot="{ navigate, isActive }"
-          :to="{
-            path: item.href,
-            params: item.params ?? {},
-            query: item.query ?? {},
-          }"
-          custom
-        >
-          <a
-            class="item-menu sf-ripple"
-            :data-active="isActive"
-            :href="item.href"
-            @click="OnClickRoute($event, navigate)"
-          >
-            <span class="material-symbols-outlined sf-mr-3">
-              {{ item.icon ?? "chevron_right" }}
-            </span>
-            <span>{{ item.text }}</span>
-          </a>
-        </router-link>
-        <a v-else class="item-menu sf-ripple">
-          <span
-            v-if="item.icon"
-            class="material-symbols-outlined sf-mr-3"
-          >
-            {{ item.icon }}
-          </span>
-          <span>{{ item.text }}</span>
-          <div class="sf-flex-grow-1"></div>
-          <span
-            :class="[
-              'material-symbols-outlined arrow',
-              { '--expand': active },
-            ]"
-          >
-            chevron_right
-          </span>
-        </a>
-      </template>
-    </PanelMenu>
-  </div>
-</template>
-
-<style scoped lang="scss">
-.panel-menu-wrapper {
-  padding: var(--inline-spacing);
-  :deep(ul, li) {
-    list-style-type: none;
-    padding: 0;
-    margin: 0;
-  }
-  :deep(ul) {
-    padding-left: var(--inline-spacing);
-  }
-}
-.item-menu {
-  display: flex;
-  align-items: center;
-  padding: var(--inline-spacing);
-  color: var(--text-color);
-  text-decoration: none;
-  border-radius: 6px;
-  margin-bottom: 0.25em;
-  cursor: pointer;
-  &.sub-item {
-    margin-bottom: var(--inline-spacing);
-  }
-  &[data-active="true"] {
-    background-color: var(--primary-hover-color);
-    color: var(--primary-color);
-  }
-}
-.arrow {
-  transition: transform 0.3s;
-  &.--expand {
-    transform: rotate(90deg);
-  }
-}
-</style>

package/src/components/tabnavigation/TabNavigation.vue

@@ -1,125 +0,0 @@
-<script setup lang="ts">
-import { onMounted, onBeforeUnmount, ref } from "vue";
-
-export interface SfTabNavigationTab {
-  text: string;
-  route: string;
-}
-
-export interface SfTabNavigationProps {
-  tabs: SfTabNavigationTab[];
-}
-
-const props: SfTabNavigationProps =
-  defineProps<SfTabNavigationProps>();
-
-const trackerContainer = ref<HTMLInputElement | null>(null);
-const trackerContainerObserver = new ResizeObserver((_) => {
-  AjustarIcones();
-});
-
-const isLeftArrowActive = ref(false);
-const isRightArrowActive = ref(false);
-
-function Scroll(left: boolean = false) {
-  const amount = trackerContainer.value!.clientWidth;
-  trackerContainer.value!.scrollLeft += left ? -amount : amount;
-}
-
-function AjustarIcones() {
-  const maxScrollValue =
-    trackerContainer.value!.scrollWidth -
-    trackerContainer.value!.clientWidth;
-
-  isLeftArrowActive.value! = trackerContainer.value!.scrollLeft > 10;
-
-  isRightArrowActive.value! =
-    trackerContainer.value!.scrollLeft < maxScrollValue - 10;
-}
-
-onMounted(() => {
-  trackerContainer.value!.addEventListener("scroll", AjustarIcones);
-  trackerContainerObserver.observe(trackerContainer.value!);
-});
-
-onBeforeUnmount(() => {
-  try {
-    trackerContainer.value?.removeEventListener(
-      "scroll",
-      AjustarIcones
-    );
-    trackerContainerObserver.unobserve(trackerContainer.value!);
-    trackerContainerObserver.disconnect();
-  } catch {}
-});
-</script>
-
-<template>
-  <div class="sf-tab-navigation">
-    <div
-      :class="['left-arrow', { active: isLeftArrowActive }]"
-      @click="Scroll(true)"
-    >
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        fill="none"
-        viewBox="0 0 24 24"
-        stroke-width="1.5"
-        stroke="currentColor"
-        class="w-6 h-6"
-      >
-        <path
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          d="M15.75 19.5L8.25 12l7.5-7.5"
-        />
-      </svg>
-    </div>
-
-    <ul ref="trackerContainer">
-      <RouterLink
-        v-for="tab in props.tabs"
-        :to="tab.route"
-        :custom="true"
-        v-slot="{ navigate, isActive }"
-      >
-        <li :data-active="isActive">
-          <slot
-            name="item"
-            :item="tab"
-            :navigate="navigate"
-            :is-active="isActive"
-          >
-            <a
-              :href="tab.route"
-              :class="{ active: isActive }"
-              @click="navigate"
-            >
-              {{ tab.text }}
-            </a>
-          </slot>
-        </li>
-      </RouterLink>
-    </ul>
-
-    <div
-      :class="['right-arrow', { active: isRightArrowActive }]"
-      @click="Scroll()"
-    >
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        fill="none"
-        viewBox="0 0 24 24"
-        stroke-width="1.5"
-        stroke="currentColor"
-        class="w-6 h-6"
-      >
-        <path
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          d="M8.25 4.5l7.5 7.5-7.5 7.5"
-        />
-      </svg>
-    </div>
-  </div>
-</template>

package/src/components/tooltip/Tooltip.vue

@@ -1,91 +0,0 @@
-<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

@@ -1,53 +0,0 @@
-import SfLayout from "./components/layout/Layout.vue";
-import SfIcon from "./components/icon/Icon.vue";
-import SfContent from "./components/content/Content.vue";
-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 SfNavMenu from "./components/navmenu/NavMenu.vue";
-import { ThemeToggleBase } from "./components/internal/ThemeToggle";
-
-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,
-  SfContent,
-  SfTabNavigation,
-  SfButton,
-  SfDrawer,
-  SfMessage,
-  SfTooltip,
-  SfNavMenu,
-  StartAuthService,
-  UseAuthService,
-  UseNavMenuService,
-  UseConfirmService,
-  UseAlertService,
-  UseAxiosClient,
-  AppResult,
-  AxiosClient,
-};
-
-export * from "./types";
-
-/**
- * Tema inicial
- */
-(() => {
-  ThemeToggleBase.SetInitialTheme();
-})();