@luizleon/sf.prefeiturasp.vuecomponents 4.0.1 → 4.0.3

package/src/components/drawer/Drawer.vue

@@ -1,146 +0,0 @@
-<script setup lang="ts">
-import { StyleValue, ref, useSlots, watch } from "vue";
-import { CssClassBuilder } from "../internal/cssClassBuilder";
-import { GetMaxZindex } from "../internal/getMaxZindex";
-import { nanoid } from "nanoid";
-import SfIcon from "../icon/Icon.vue";
-
-export interface SfDrawerProps {
-  visible: boolean;
-  /**
-   * @default 'left'
-   */
-  position?: "left" | "right" | "bottom" | "full";
-  style?: StyleValue;
-}
-
-const props: SfDrawerProps = withDefaults(
-  defineProps<SfDrawerProps>(),
-  {
-    visible: false,
-    position: "left",
-  }
-);
-
-const emit = defineEmits<{
-  (e: "update:visible", v: boolean): void;
-  (e: "open"): void;
-  (e: "before-close"): void;
-}>();
-
-const slots = useSlots();
-
-const visible = ref(props.visible);
-
-const maskVisible = ref(false);
-
-const zIndex = ref(0);
-
-const id = nanoid();
-
-function Close() {
-  visible.value = false;
-}
-
-function OnKeydown(ev: KeyboardEvent) {
-  if (ev.key === "Escape" || ev.code === "Escape") {
-    Close();
-  }
-}
-
-function OnEnter() {
-  emit("open");
-  window.document.addEventListener("keydown", OnKeydown, true);
-}
-
-function OnBeforeEnter(el: Element) {
-  zIndex.value = GetMaxZindex();
-  (el as HTMLElement).style.zIndex = `${zIndex.value}`;
-}
-
-function OnBeforeLeave(el: Element) {
-  emit("before-close");
-  el?.parentElement?.classList.add("sf-mask-overlay-leave");
-}
-
-function OnAfterLeave() {
-  window.document.removeEventListener("keydown", OnKeydown, true);
-  maskVisible.value = false;
-}
-
-function CssMask() {
-  return new CssClassBuilder("sf-mask sf-mask-overlay")
-    .AddClass("right", props.position === "right")
-    .AddClass("bottom", props.position === "bottom")
-    .AddClass("full", props.position === "full")
-    .AddClass("sf-mask-overlay-enter", props.visible === true)
-    .Build();
-}
-
-watch(
-  () => props.visible,
-  (v) => {
-    visible.value = v;
-  }
-);
-watch(
-  () => visible.value,
-  (v) => {
-    emit("update:visible", v);
-    if (v) {
-      maskVisible.value = true;
-    }
-  }
-);
-</script>
-
-<template>
-  <Teleport :to="'body'">
-    <div
-      v-if="maskVisible"
-      :id="id"
-      :class="CssMask()"
-      :style="{ zIndex: zIndex - 1 }"
-      @click.stop="Close"
-    >
-      <transition
-        name="sf-drawer"
-        appear
-        @before-enter="OnBeforeEnter"
-        @enter="OnEnter"
-        @before-leave="OnBeforeLeave"
-        @after-leave="OnAfterLeave"
-      >
-        <div
-          v-if="visible"
-          :class="[
-            'sf-drawer',
-            {
-              'sf-drawer-with-footer': !!slots.footer,
-            },
-          ]"
-          :style="props.style"
-          role="dialog"
-          @click.stop="void"
-        >
-          <div class="sf-drawer-header">
-            <span class="sf-drawer-title">
-              <slot name="title"></slot>
-            </span>
-            <SfIcon
-              :button="true"
-              :icon="'close'"
-              @click.stop="Close"
-            />
-          </div>
-          <div class="sf-drawer-content">
-            <slot name="default"></slot>
-          </div>
-          <div class="sf-drawer-footer" v-if="slots.footer">
-            <slot name="footer"></slot>
-          </div>
-        </div>
-      </transition>
-    </div>
-  </Teleport>
-</template>

package/src/components/icon/Icon.vue

@@ -1,96 +0,0 @@
-<script setup lang="ts">
-import { ButtonHTMLAttributes, StyleValue, computed } from "vue";
-import LoadingCircle from "../internal/LoadingCircle.vue";
-import { CssClassBuilder } from "../internal/cssClassBuilder";
-import Tooltip from "../tooltip/Tooltip.vue";
-import { Color, IconSize } from "../../types";
-
-export interface SfIconProps {
-  icon?: string;
-  visible?: boolean;
-  class?: any;
-  style?: StyleValue;
-  disabled?: boolean;
-  loading?: boolean;
-  button?: boolean;
-  size?: IconSize;
-  dot?: boolean;
-  dotColor?: Color;
-  filled?: boolean;
-  buttonProps?: ButtonHTMLAttributes;
-  tooltip?: string;
-  color?: Color | "inherit";
-}
-
-const props: SfIconProps = withDefaults(defineProps<SfIconProps>(), {
-  visible: true,
-  class: "",
-  style: "",
-  size: "md",
-  dotColor: "error",
-  color: "inherit",
-});
-
-const dynamicComponent = computed(() =>
-  props.tooltip ? Tooltip : "div"
-);
-
-const componentClass = computed(() => {
-  return props.tooltip ? "" : "display-content";
-});
-
-const cssClass = computed(() => {
-  return new CssClassBuilder(`${props.class} sf-icon`)
-    .AddClass("sf-component-loading", props.loading)
-    .AddClass("sf-component-disabled", props.disabled)
-    .AddClass("sf-icon-button", props.button)
-    .AddClass("sf-icon-small", props.size === "sm")
-    .AddClass("sf-icon-medium", props.size === "md")
-    .AddClass("sf-icon-large", props.size === "lg")
-    .AddClass("sf-icon-xlarge", props.size === "xl")
-    .AddClass("sf-icon-2xlarge", props.size === "2xl")
-    .AddClass("sf-icon-3xlarge", props.size === "3xl")
-    .AddClass("sf-ripple", props.button === true)
-    .AddClass(
-      `${props.color}-color`,
-      !!props.color && props.color !== "inherit"
-    )
-    .Build();
-});
-</script>
-
-<template>
-  <component
-    :is="dynamicComponent"
-    :text="props.tooltip"
-    :class="componentClass"
-  >
-    <div
-      v-if="!!props.visible"
-      :style="props.style"
-      :class="cssClass"
-    >
-      <button
-        :class="[
-          'material-symbols-outlined',
-          { 'icon-filled': !!props.filled },
-        ]"
-        :disabled="props.disabled || props.loading"
-        v-bind="props.buttonProps"
-        :tabindex="!props.button ? -1 : undefined"
-      >
-        <template v-if="props.loading">
-          <LoadingCircle></LoadingCircle>
-        </template>
-        <template v-else>{{ props.icon }}</template>
-      </button>
-      <span v-if="props.dot" :data-color="props.dotColor"></span>
-    </div>
-  </component>
-</template>
-
-<style scoped>
-.display-content {
-  display: contents;
-}
-</style>

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.vue

@@ -1,67 +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";
-
-export interface SfLayoutProps {}
-
-export interface SfLayoutSlots {
-  title: {};
-  action: {};
-  menu: {};
-  content: {};
-}
-
-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>