@luizleon/sf.prefeiturasp.vuecomponents 0.0.1

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@luizleon/sf.prefeiturasp.vuecomponents",
+  "version": "0.0.1",
+  "description": "Pacote de componentes Vue para projetos em SF.",
+  "main": "dist/lib.umd.js",
+  "module": "dist/lib.es.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "rimraf ./dist/ && vue-tsc --noEmit && vite build"
+  },
+  "dependencies": {
+    "air-datepicker": "3.3.1",
+    "date-fns": "2.29.3",
+    "keycloak-js": "22.0.5",
+    "sweetalert2": "11.4.8",
+    "vue-currency-input": "3.0.2"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "4.4.1",
+    "rimraf": "3.0.2",
+    "sass": "1.69.5",
+    "typescript": "5.2.2",
+    "vite": "4.5.0",
+    "vite-plugin-dts": "3.6.3",
+    "vite-plugin-vue-type-imports": "0.2.5",
+    "vue-tsc": "1.8.22"
+  },
+  "peerDependencies": {
+    "vue": "3.*"
+  }
+}

package/src/components/content/Content.d.ts

@@ -0,0 +1,35 @@
+import { VNode } from "vue";
+import { StyleValue } from "vue";
+import {
+  ClassComponent,
+  GlobalComponentConstructor,
+} from "../../ts-helpers";
+
+export interface SfContentProps {
+  class?: any;
+  style?: StyleValue;
+  disableBodyPadding?: boolean;
+  disableHeaderPadding?: boolean;
+  disableFooterPadding?: boolean;
+}
+
+export interface SfContentSlots {
+  header: () => VNode[];
+  footer: () => VNode[];
+}
+
+export declare type SfContentEmits = {};
+
+declare class SfContent extends ClassComponent<
+  SfContentProps,
+  SfContentSlots,
+  SfContentEmits
+> {}
+
+declare module "@vue/runtime-core" {
+  interface GlobalComponents {
+    SfContent: GlobalComponentConstructor<SfContent>;
+  }
+}
+
+export default SfContent;

package/src/components/content/Content.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import ScrollToTop from "../internal/ScrollToTop.vue";
+import { SfContentProps } from "./Content";
+import { CssClassBuilder } from "../internal/cssClassBuilder";
+
+const props: SfContentProps = defineProps<SfContentProps>();
+
+function Css() {
+  return new CssClassBuilder("sf-content")
+    .AddClass(props.class, !!props.class)
+    .Build();
+}
+
+function CssBody() {
+  return new CssClassBuilder("sf-content-body")
+    .AddClass("sf-content-no-padding", props.disableBodyPadding)
+    .Build();
+}
+
+function CssHeader() {
+  return new CssClassBuilder("sf-content-header")
+    .AddClass("sf-content-no-padding", props.disableHeaderPadding)
+    .Build();
+}
+
+function CssFooter() {
+  return new CssClassBuilder("sf-content-footer")
+    .AddClass("sf-content-no-padding", props.disableFooterPadding)
+    .Build();
+}
+</script>
+<template>
+  <div :class="Css()" :style="props.style">
+    <div :class="CssHeader()"><slot name="header"></slot></div>
+    <div :class="CssBody()">
+      <slot name="default"></slot>
+      <ScrollToTop />
+    </div>
+    <div :class="CssFooter()"><slot name="footer"></slot></div>
+  </div>
+</template>

package/src/components/icon/Icon.d.ts

@@ -0,0 +1,38 @@
+import { Cor, Tamanho } from "../../enum";
+import {
+  ClassComponent,
+  GlobalComponentConstructor,
+} from "../../ts-helpers";
+import { StyleValue, ButtonHTMLAttributes } from "vue";
+
+export interface SfIconProps {
+  icone?: string;
+  visible?: boolean;
+  class?: any;
+  style?: StyleValue;
+  disabled?: boolean;
+  loading?: boolean;
+  button?: boolean;
+  tamanho?: Tamanho;
+  dot?: boolean;
+  dotColor?: Cor;
+  buttonProps?: ButtonHTMLAttributes;
+}
+
+export interface SfIconSlots {}
+
+export declare type SfIconEmits = {};
+
+declare class SfIcon extends ClassComponent<
+  SfIconProps,
+  SfIconSlots,
+  SfIconEmits
+> {}
+
+declare module "@vue/runtime-core" {
+  interface GlobalComponents {
+    SfIcon: GlobalComponentConstructor<SfIcon>;
+  }
+}
+
+export default SfIcon;

package/src/components/icon/Icon.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { Cor, Tamanho } from "../../enum";
+import LoadingCircle from "../internal/LoadingCircle.vue";
+import { CssClassBuilder } from "../internal/cssClassBuilder";
+import { SfIconProps } from "./Icon";
+
+const props: SfIconProps = withDefaults(defineProps<SfIconProps>(), {
+  visible: true,
+  class: "",
+  style: "",
+  tamanho: Tamanho.Medio,
+  dotColor: Cor.Error,
+});
+
+function CssClass() {
+  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.tamanho === Tamanho.Pequeno)
+    .AddClass("sf-icon-medium", props.tamanho === Tamanho.Medio)
+    .AddClass("sf-icon-large", props.tamanho === Tamanho.Grande)
+    .AddClass("sf-ripple", props.button === true)
+    .Build();
+}
+</script>
+
+<template>
+  <div :style="props.style" :class="CssClass()">
+    <button
+      class="material-symbols-outlined"
+      :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.icone }}</template>
+    </button>
+    <span v-if="props.dot" :data-color="props.dotColor"></span>
+  </div>
+</template>

package/src/components/internal/LoadingCircle.vue

@@ -0,0 +1,16 @@
+<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/LogoutIcon.vue

@@ -0,0 +1,14 @@
+<template>
+  <button class="sf-internal-icon-button sf-ripple">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      height="48"
+      viewBox="0 -960 960 960"
+      width="48"
+    >
+      <path
+        d="M194.694-124.001q-28.254 0-49.473-21.22-21.22-21.219-21.22-49.473v-570.612q0-28.254 21.22-49.473 21.219-21.22 49.473-21.22h285.075v58.384H194.694q-4.616 0-8.463 3.846-3.846 3.847-3.846 8.463v570.612q0 4.616 3.846 8.463 3.847 3.846 8.463 3.846h285.075v58.384H194.694Zm469.614-183.693-42.999-42.23 101.384-101.384H360.846v-58.384h360.616L620.078-611.076l42.615-41.615 173.306 173.499-171.691 171.498Z"
+      />
+    </svg>
+  </button>
+</template>

package/src/components/internal/MenuIcon.vue

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

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

@@ -0,0 +1,41 @@
+class ThemeToggle {
+  get storedTheme() {
+    return localStorage.getItem("lkVueTheme") 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("lkVueTheme", "dark");
+  }
+  EnableLightMode() {
+    document.documentElement.classList.remove("dark");
+    document.documentElement.classList.add("light");
+    localStorage.setItem("lkVueTheme", "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

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

@@ -0,0 +1,44 @@
+/**
+ * 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/layout/Layout.d.ts

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

package/src/components/layout/Layout.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { UseDialogService } from "../..";
+import { AuthService } from "../../services/authService";
+import { UseNavMenuService } from "../../services/navMenuService";
+import Icon from "../icon/Icon.vue";
+import LogoutIcon from "../internal/LogoutIcon.vue";
+import MenuIcon from "../internal/MenuIcon.vue";
+import ThemeToggle from "../internal/ThemeToggle.vue";
+
+const navService = UseNavMenuService();
+const dialogService = UseDialogService();
+
+async function Logout() {
+  const confirm = await dialogService.ConfirmAsync({
+    message: "Você deseja sair da sua conta?",
+    confirmLabel: "sair",
+  });
+  if (!confirm) return;
+  AuthService.CallLogout();
+}
+</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>
+      <ThemeToggle />
+      <LogoutIcon @click="Logout" />
+    </header>
+    <nav :class="{ visible: navService.IsVisible }">
+      <div class="sf-layout-nav-header">
+        <span>Menu</span>
+        <Icon
+          :icone="'close'"
+          button
+          @click="navService.Close()"
+        ></Icon>
+      </div>
+      <div class="sf-layout-nav-content">
+        <slot name="menu"></slot>
+      </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/navmenulink/NavMenuLink.d.ts

@@ -0,0 +1,34 @@
+import {
+  ClassComponent,
+  GlobalComponentConstructor,
+} from "../../ts-helpers";
+
+export interface SfNavMenuLinkProps {
+  href: string;
+  text: string;
+  icon?: string;
+}
+
+export interface SfNavMenuLinkSlots {}
+
+export declare type SfNavMenuLinkEmits = {};
+
+declare class SfNavMenuLink extends ClassComponent<
+  SfNavMenuLinkProps,
+  SfNavMenuLinkSlots,
+  SfNavMenuLinkEmits
+> {}
+
+declare module "@vue/runtime-core" {
+  interface GlobalComponents {
+    SfNavMenuLink: GlobalComponentConstructor<SfNavMenuLink>;
+  }
+}
+
+/**
+ * Componente para navegação no menu.
+ *
+ * Dependência: router-link.
+ * @see [https://router.vuejs.org/api/#router-link-s-v-slot](https://router.vuejs.org/api/#router-link-s-v-slot)
+ */
+export default SfNavMenuLink;

package/src/components/navmenulink/NavMenuLink.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { SfNavMenuLinkProps } from "./NavMenuLink";
+import { UseNavMenuService } from "../../services/navMenuService";
+import Icon from "../icon/Icon.vue";
+
+const props: SfNavMenuLinkProps = defineProps<SfNavMenuLinkProps>();
+
+const navService = UseNavMenuService();
+
+function OnClick(ev: Event, navigate: any) {
+  ev.preventDefault();
+  const target = ev.target as HTMLElement;
+  const nav = target.closest(".sf-layout-nav-content");
+  navigate();
+  if (nav && nav.clientWidth + 10 > document.body.clientWidth) {
+    navService.Close();
+  }
+}
+</script>
+
+<template>
+  <router-link
+    :to="props.href"
+    custom
+    v-slot="{ href, navigate, isExactActive }"
+  >
+    <a
+      class="sf-navmenulink"
+      :href="href"
+      :data-active="isExactActive"
+      @click="OnClick($event, navigate)"
+    >
+      <Icon
+        v-if="props.icon"
+        :icone="props.icon"
+        :button-props="{ tabindex: -1 }"
+      />
+      <span class="sf-navmenulink-text">{{ props.text }}</span>
+    </a>
+  </router-link>
+</template>

package/src/enum/cor.ts

@@ -0,0 +1,9 @@
+export enum Cor {
+  Primary = "primary",
+  Secondary = "secondary",
+  Info = "info",
+  Success = "success",
+  Help = "help",
+  Warn = "warn",
+  Error = "error",
+}

package/src/enum/index.ts

@@ -0,0 +1,2 @@
+export { Cor } from "./cor";
+export { Tamanho } from "./tamanho";

package/src/enum/tamanho.ts

@@ -0,0 +1,5 @@
+export enum Tamanho {
+  Pequeno = "sm",
+  Medio = "md",
+  Grande = "lg",
+}

package/src/index.ts

@@ -0,0 +1,56 @@
+import SfLayout from "./components/layout/Layout.vue";
+import SfIcon from "./components/icon/Icon.vue";
+import SfNavMenuLink from "./components/navmenulink/NavMenuLink.vue";
+import SfContent from "./components/content/Content.vue";
+
+import { UseNavMenuService } from "./services/navMenuService";
+import { UseDialogService } from "./services/dialogService";
+import { AuthService } from "./services/authService";
+
+import { Cor, Tamanho } from "./enum";
+
+import { nextTick } from "vue";
+
+import "./style/tema.scss";
+import "./style/componentes.scss";
+
+export {
+  SfLayout,
+  SfIcon,
+  SfNavMenuLink,
+  SfContent,
+  AuthService,
+  UseNavMenuService,
+  UseDialogService,
+  Cor,
+  Tamanho,
+};
+/**
+ * https://stackoverflow.com/questions/37112218/css3-100vh-not-constant-in-mobile-browser
+ */
+(() => {
+  function Ajusta() {
+    nextTick(() => {
+      setTimeout(() => {
+        const root = document.querySelector(":root");
+        root &&
+          // @ts-ignore
+          root.style.setProperty(
+            "--window-height",
+            `${window.visualViewport?.height ?? window.innerHeight}px`
+          );
+      }, 1);
+    });
+  }
+  Ajusta();
+  window.addEventListener("resize", Ajusta);
+})();
+
+import { ThemeToggleBase } from "./components/internal/ThemeToggle";
+
+/**
+ * Tema inicial
+ */
+(() => {
+  ThemeToggleBase.SetInitialTheme();
+})();