@luizleon/sf.prefeiturasp.vuecomponents 4.0.2 → 4.0.3

package/src/components/internal/HeaderAvatar.vue

@@ -1,73 +0,0 @@
-<script setup lang="ts">
-import { computed, onMounted, ref } from "vue";
-import SfDrawer from "../drawer/Drawer.vue";
-import SfButton from "../button/Button.vue";
-import { UseConfirmService } from "../../services/dialogService";
-
-const confirmService = UseConfirmService();
-
-const letters = ref("?");
-
-const emit = defineEmits<{
-  (event: "logout"): void;
-}>();
-
-async function Logout() {
-  const confirm = await confirmService.CreateConfirmAsync({
-    text: `Você deseja sair da conta?`,
-    confirmLabel: "sair",
-  });
-  if (!confirm) return;
-  emit("logout");
-}
-
-function Letters() {
-  const name = sessionStorage.getItem("name");
-  let letters = "?";
-  if (!name) return letters;
-
-  const parts = name
-    .split(" ")
-    .filter((x) => x.length > 0)
-    .map((x) => x[0].toUpperCase());
-
-  const count = Math.min(2, parts.length);
-
-  letters = parts.slice(0, count).join("");
-
-  return letters.length > 0 ? letters : "?";
-}
-
-const color = computed(() => {
-  const primeiraLetra = letters.value[0];
-  const cor =
-    primeiraLetra === "?"
-      ? 0
-      : (primeiraLetra.charCodeAt(0) - 64) % 19;
-  return Math.max(cor, 0);
-});
-
-const showDrawer = ref(false);
-
-onMounted(() => {
-  letters.value = Letters();
-});
-</script>
-
-<template>
-  <div
-    id="sf-header-avatar"
-    :data-cor="color"
-    @click="showDrawer = true"
-  >
-    {{ letters }}
-  </div>
-  <SfDrawer v-model:visible="showDrawer" :position="'right'">
-    <template #title>Minha conta</template>
-    <template #default>
-      <div class="sf-p-4">
-        <SfButton :color="'error'" @click="Logout">Sair</SfButton>
-      </div>
-    </template>
-  </SfDrawer>
-</template>

package/src/components/internal/LoadingCircle.vue

@@ -1,16 +0,0 @@
-<template>
-  <div class="sf-loading-circle">
-    <div>
-      <svg viewBox="25 25 50 50">
-        <circle
-          cx="50"
-          cy="50"
-          r="20"
-          fill="none"
-          stroke-width="4"
-          stroke-miterlimit="10"
-        ></circle>
-      </svg>
-    </div>
-  </div>
-</template>

package/src/components/internal/MenuIcon.vue

@@ -1,13 +0,0 @@
-<template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    height="48"
-    viewBox="0 -960 960 960"
-    width="48"
-    class="sf-svg-icon"
-  >
-    <path
-      d="m307.231-83.463-54.999-55.23 343.923-343.922-343.923-343.539 54.999-54.614 398.153 398.153L307.231-83.462Z"
-    />
-  </svg>
-</template>

package/src/components/internal/ScrollToTop.vue

@@ -1,26 +0,0 @@
-<script setup lang="ts">
-import { onMounted, ref } from "vue";
-
-const visible = ref(false);
-const id = `--${+new Date()}`;
-let parent: HTMLElement | null = null;
-
-function ButtonClick() {
-  parent?.scrollTo(0, 0);
-}
-
-onMounted(() => {
-  parent = document.getElementById(id)?.parentElement ?? null;
-  if (!parent) return;
-  parent.addEventListener("scroll", function () {
-    visible.value = this.scrollTop - this.clientHeight > 0;
-  });
-});
-</script>
-<template>
-  <button
-    :id="id"
-    :class="['sf-scrollToTop', { 'sf-scrollToTop-visible': visible }]"
-    @click="ButtonClick"
-  ></button>
-</template>

package/src/components/internal/ThemeToggle.ts

@@ -1,41 +0,0 @@
-class ThemeToggle {
-  get storedTheme() {
-    return localStorage.getItem("color-scheme") as
-      | "light"
-      | "dark"
-      | null;
-  }
-  get IsDark() {
-    return document.documentElement.classList.contains("dark");
-  }
-  Toggle() {
-    this.IsDark ? this.EnableLightMode() : this.EnableDarkMode();
-  }
-  EnableDarkMode() {
-    document.documentElement.classList.add("dark");
-    document.documentElement.classList.remove("light");
-    localStorage.setItem("color-scheme", "dark");
-  }
-  EnableLightMode() {
-    document.documentElement.classList.remove("dark");
-    document.documentElement.classList.add("light");
-    localStorage.setItem("color-scheme", "light");
-  }
-  SetInitialTheme() {
-    if (this.storedTheme === "light") {
-      return this.EnableLightMode();
-    }
-    if (this.storedTheme === "dark") {
-      return this.EnableDarkMode();
-    }
-    if (
-      window.matchMedia &&
-      window.matchMedia("(prefers-color-scheme: dark)").matches
-    ) {
-      return this.EnableDarkMode();
-    }
-    this.EnableLightMode();
-  }
-}
-
-export const ThemeToggleBase = (() => new ThemeToggle())();

package/src/components/internal/ThemeToggle.vue

@@ -1,23 +0,0 @@
-<script setup lang="ts">
-import { ThemeToggleBase } from "./ThemeToggle";
-</script>
-
-<template>
-  <button id="sf-theme-toggle" @click="ThemeToggleBase.Toggle">
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="472.39"
-      height="472.39"
-      viewBox="0 0 472.39 472.39"
-    >
-      <g class="toggle-sun">
-        <path
-          d="M403.21,167V69.18H305.38L236.2,0,167,69.18H69.18V167L0,236.2l69.18,69.18v97.83H167l69.18,69.18,69.18-69.18h97.83V305.38l69.18-69.18Zm-167,198.17a129,129,0,1,1,129-129A129,129,0,0,1,236.2,365.19Z"
-        />
-      </g>
-      <g class="toggle-circle">
-        <circle class="cls-1" cx="236.2" cy="236.2" r="103.78" />
-      </g>
-    </svg>
-  </button>
-</template>

package/src/components/internal/cssClassBuilder.ts

@@ -1,44 +0,0 @@
-/**
- * A utility class for building CSS class strings.
- */
-export class CssClassBuilder {
-  /**
-   * Creates a new instance of the CssClassBuilder class.
-   * @param value The initial value of the CSS class string.
-   */
-  constructor(value: string) {
-    this.retorno = value ?? "";
-  }
-
-  retorno: string;
-
-  /**
-   * Concatenates a new CSS class to the existing string.
-   * @param value The CSS class to concatenate.
-   * @returns The current instance of the CssClassBuilder class.
-   */
-  private Concat(value?: string) {
-    if (value && value.trim().length) {
-      this.retorno += ` ${value}`;
-    }
-    return this;
-  }
-
-  /**
-   * Adds a new CSS class to the string if the specified condition is true.
-   * @param value The CSS class to add.
-   * @param when The condition that determines whether to add the CSS class.
-   * @returns The current instance of the CssClassBuilder class.
-   */
-  AddClass(value?: string, when: boolean = true) {
-    return when ? this.Concat(value) : this;
-  }
-
-  /**
-   * Builds the final CSS class string.
-   * @returns The final CSS class string.
-   */
-  Build() {
-    return this.retorno.trim();
-  }
-}

package/src/components/internal/getMaxZindex.ts

@@ -1,15 +0,0 @@
-function GetMaxZindex(seletores: string[] = []) {
-  let selector = "body > *:not(script):not(style)";
-  for (const s of seletores) {
-    selector += `, ${s}`;
-  }
-  const max = Math.max(
-    ...Array.from(document.querySelectorAll(selector)).map((x) => {
-      const z = getComputedStyle(x).zIndex;
-      return +z === +z ? +z : 0;
-    })
-  );
-  return max >= 100 ? max : 100;
-}
-
-export { GetMaxZindex };

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

@@ -1,38 +0,0 @@
-import {
-  ClassComponent,
-  GlobalComponentConstructor,
-} from "../ts-helpers";
-
-export interface SfLayoutSlots {
-  /**
-   * Título ao lado do botão do menu
-   */
-  title: () => VNode[];
-  /**
-   * Conteúdo para ficar no menu
-   */
-  menu: () => VNode[];
-  /**
-   * Conteúdo principal
-   */
-  content: () => VNode[];
-}
-
-export declare type SfLayoutEmits = {
-  mounted: () => void;
-  logout: () => void;
-};
-
-declare class SfLayout extends ClassComponent<
-  SfLayoutProps,
-  SfLayoutSlots,
-  SfLayoutEmits
-> {}
-
-declare module "@vue/runtime-core" {
-  interface GlobalComponent {
-    SfLayout: GlobalComponentConstructor<SfLayout>;
-  }
-}
-
-export default SfLayout;

package/src/components/layout/Layout.vue

@@ -1,58 +0,0 @@
-<script setup lang="ts">
-import { onMounted } from "vue";
-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";
-
-const navService = UseNavMenuService();
-
-const emit = defineEmits<{
-  (event: "mounted"): void;
-  (event: "logout"): void;
-}>();
-
-onMounted(() => {
-  emit("mounted");
-});
-</script>
-
-<template>
-  <div id="sf-layout">
-    <header>
-      <div
-        :class="[
-          'sf-layout-menu-toggler',
-          { invert: navService.IsVisible },
-        ]"
-        @click="navService.Toggle()"
-      >
-        <div class="sf-layout-menu-toggler-logo"></div>
-        <MenuIcon />
-      </div>
-      <div class="title">
-        <slot name="title"></slot>
-      </div>
-      <slot name="action"> </slot>
-      <SfTooltip :text="'Tema'">
-        <ThemeToggle />
-      </SfTooltip>
-      <HeaderAvatar @logout="emit('logout')" />
-    </header>
-    <nav :class="{ visible: navService.IsVisible }">
-      <div class="sf-layout-nav-content">
-        <slot name="menu"></slot>
-      </div>
-      <div class="sf-layout-nav-footer">
-        <div class="sf-layout-nav-footer-logo"></div>
-      </div>
-    </nav>
-    <main :class="{ 'menu-visible': navService.IsVisible }">
-      <section id="sf-layout-page-title"></section>
-      <section id="sf-layout-content">
-        <slot name="content"></slot>
-      </section>
-    </main>
-  </div>
-</template>

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>