@luizleon/sf.prefeiturasp.vuecomponents 0.0.37 → 0.0.38

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luizleon/sf.prefeiturasp.vuecomponents",
-  "version": "0.0.37",
+  "version": "0.0.38",
   "type": "module",
   "main": "dist/lib.umd.js",
   "module": "dist/lib.es.js",
@@ -12,6 +12,7 @@
     "air-datepicker": "3.3.1",
     "axios": "1.6.5",
     "date-fns": "2.29.3",
+    "nanoid": "5.0.4",
     "sweetalert2": "11.4.8",
     "vue-currency-input": "3.0.2"
   },
@@ -25,7 +26,7 @@
     "rimraf": "3.0.2",
     "sass": "1.69.5",
     "typescript": "5.2.2",
-    "vite": "4.5.1",
+    "vite": "4.5.2",
     "vite-plugin-dts": "1.6.4",
     "vite-plugin-vue-type-imports": "0.2.3",
     "vue-tsc": "1.8.22",

package/src/components/drawer/Drawer.d.ts

@@ -0,0 +1,55 @@
+import { StyleValue, VNode } from "vue";
+import {
+  ClassComponent,
+  GlobalComponentConstructor,
+} from "../../ts-helpers";
+
+export interface SfDrawerProps {
+  visible: boolean;
+  position?: "left" | "right" | "bottom" | "full";
+  style?: StyleValue;
+}
+
+export interface SfDrawerSlots {
+  /**
+   * Default content slot.
+   */
+  default: () => VNode[];
+  /**
+   * Título da janela
+   */
+  title: () => VNode[];
+  /**
+   * Conteúdo para exibir no rodapé
+   */
+  footer: () => VNode[];
+}
+
+export declare type SfDrawerEmits = {
+  /**
+   * Emitted when the visible changes.
+   */
+  "update:visible": (value: boolean) => void;
+  /**
+   * Emitido após aberta
+   */
+  open: () => void;
+  /**
+   * Emitido antes de fechar
+   */
+  "before-close": () => void;
+};
+
+declare class SfDrawer extends ClassComponent<
+  SfDrawerProps,
+  SfDrawerSlots,
+  SfDrawerEmits
+> {}
+
+declare module "@vue/runtime-core" {
+  interface GlobalComponents {
+    Drawer: GlobalComponentConstructor<SfDrawer>;
+  }
+}
+
+export default SfDrawer;

package/src/components/drawer/Drawer.vue

@@ -0,0 +1,131 @@
+<script setup lang="ts">
+import { SfDrawerProps } from "./Drawer";
+import { 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";
+
+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()">
+      <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"
+        >
+          <div class="sf-drawer-header">
+            <span class="sf-drawer-title">
+              <slot name="title"></slot>
+            </span>
+            <SfIcon
+              :button="true"
+              :icone="'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/internal/HeaderAvatar.vue

@@ -1,5 +1,8 @@
 <script setup lang="ts">
 import { computed, onMounted, ref } from "vue";
+import SfDrawer from "../drawer/Drawer.vue";
+import SfButton from "../button/Button.vue";
+import { Cor } from "../../enum";
 import { UseDialogService } from "../../services/dialogService";
 
 const dialogService = UseDialogService();
@@ -45,13 +48,27 @@ const color = computed(() => {
   return Math.max(cor, 0);
 });
 
+const showDrawer = ref(false);
+
 onMounted(() => {
   letters.value = Letters();
 });
 </script>
 
 <template>
-  <div id="sf-header-avatar" :data-cor="color" @click="Logout">
+  <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="Cor.Error" @click="Logout">Sair</SfButton>
+      </div>
+    </template>
+  </SfDrawer>
 </template>

package/src/components/internal/getMaxZindex.ts

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

package/src/components/layout/Layout.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { onMounted } from "vue";
 import { UseNavMenuService } from "../../services/navMenuService";
-import Icon from "../icon/Icon.vue";
 import HeaderAvatar from "../internal/HeaderAvatar.vue";
 import MenuIcon from "../internal/MenuIcon.vue";
 import ThemeToggle from "../internal/ThemeToggle.vue";
@@ -13,10 +12,6 @@ const emit = defineEmits<{
   (event: "logout"): void;
 }>();
 
-function OnLogout() {
-  emit("logout");
-}
-
 onMounted(() => {
   emit("mounted");
 });
@@ -40,17 +35,9 @@ onMounted(() => {
       </div>
       <slot name="action"> </slot>
       <ThemeToggle />
-      <HeaderAvatar @logout="OnLogout" />
+      <HeaderAvatar @logout="emit('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>

package/src/index.ts

@@ -13,7 +13,6 @@ import { AppResult } from "./common/appResult";
 
 import { Cor, Tamanho } from "./enum";
 
-import "./style/tema.scss";
 import "./style/componentes.scss";
 import { AxiosClient, UseAxiosClient } from "./axios/axiosClient";
 

package/src/services/authService.ts

@@ -28,10 +28,9 @@ async function CheckSilentLoginFile() {
       return false;
     });
   if (!result) {
-    console.warn(
-      `Arquivo ${fileName} não localizado no projeto ou não possui o conteúdo correto!`
-    );
-    document.body.innerHTML = `<div style="padding: 3rem; display: flex; justify-content: center; align-items: center; height: 100vh; width: 100vw; font-size: 1.5rem;">O arquivo '${fileName}' não foi encontrado.</div>`;
+    const error = `O arquivo ${fileName} não foi localizado no projeto ou não possui o conteúdo correto!`;
+    console.warn(error);
+    document.documentElement.setAttribute("data-app-message", error);
   }
   return result;
 }

package/src/style/componentes.scss

@@ -1,6 +1,5 @@
 @import "./src/components/layout";
 @import "./src/components/themetoggle";
-@import "./src/components/internal-icon-button";
 @import "./src/components/svg_icon";
 @import "./src/components/loading-circle";
 @import "./src/components/icon";
@@ -13,3 +12,4 @@
 @import "./src/components/headerAvatar";
 @import "./src/components/tab-navigation";
 @import "./src/components/button";
+@import "./src/components/mask";

package/src/style/src/_functions.scss

@@ -1,171 +1,4 @@
-@use "sass:color";
-
-@function alpha($color, $opacity) {
-  $color-h: unquote("var(#{$color + -color-h})");
-  $color-s: unquote("var(#{$color + -color-s})");
-  $color-l: unquote("var(#{$color + -color-l})");
-  @return hsla($color-h, $color-s, $color-l, $opacity);
-}
-
-@function str-replace($string, $search, $replace: "") {
-  $index: str-index($string, $search);
-
-  @if $index {
-    @return str-slice($string, 1, $index - 1) + $replace +
-      str-replace(
-        str-slice($string, $index + str-length($search)),
-        $search,
-        $replace
-      );
-  }
-
-  @return $string;
-}
-
-@function tetradColor($color) {
-  $hue: hue($color);
-  $saturation: saturation($color);
-  $lightness: lightness($color);
-  $tetrad: (
-    hsl($hue, $saturation, $lightness),
-    hsl($hue + 90 % 360, $saturation, $lightness),
-    hsl($hue + 180 % 360, $saturation, $lightness),
-    hsl($hue + 270 % 360, $saturation, $lightness)
-  );
-  @return $tetrad;
-}
-
-@function multiplyColor($fore, $back) {
-  $red: calc(red($back) * red($fore) / 255);
-  $green: calc(green($back) * green($fore) / 255);
-  $blue: calc(blue($back) * blue($fore) / 255);
-  @return rgb($red, $green, $blue);
-}
-
-@function makeColorPalette($color) {
-  $light: #fff;
-  $dark: multiplyColor($color, $color);
-  $tetrad: tetradColor($color);
-  $palette: (
-    "": mix($light, $color, 0%),
-    "-50": mix($light, $color, 88%),
-    "-100": mix($light, $color, 70%),
-    "-200": mix($light, $color, 50%),
-    "-300": mix($light, $color, 30%),
-    "-400": mix($light, $color, 15%),
-    "-500": mix($light, $color, 0%),
-    "-600": mix($dark, $color, 13%),
-    "-700": mix($dark, $color, 30%),
-    "-800": mix($dark, $color, 46%),
-    "-900": mix($dark, $color, 75%),
-  );
-  @return $palette;
-}
-
-@function themeColors($dark: false) {
-  $bg: #fff;
-  $text: #334d5c;
-  $primary: #3f51b5;
-  $info: #2196f3;
-  $success: #4caf50;
-  $warn: #cbb701;
-  $help: #673ab7;
-  $error: #f44336;
-  $secondary: #607d8b;
-  $disabled: #c4c4c4;
-  $primary-hover: rgba(color.scale($primary, $lightness: 70%), 0.5);
-  $info-hover: rgba(color.scale($info, $lightness: 70%), 0.5);
-  $success-hover: rgba(color.scale($success, $lightness: 70%), 0.5);
-  $warn-hover: rgba(color.scale($warn, $lightness: 70%), 0.5);
-  $help-hover: rgba(color.scale($help, $lightness: 70%), 0.5);
-  $error-hover: rgba(color.scale($error, $lightness: 70%), 0.5);
-  $secondary-hover: rgba(color.scale($secondary, $lightness: 70%), 0.5);
-  $surface: #fafafd;
-  $surface-100: color.scale($surface, $lightness: -1%);
-  $surface-200: color.scale($surface, $lightness: -3%);
-  $surface-300: color.scale($surface, $lightness: -5%);
-  $surface-400: color.scale($surface, $lightness: -7%);
-  $surface-500: color.scale($surface, $lightness: -9%);
-  $surface-600: color.scale($surface, $lightness: -11%);
-  $surface-700: color.scale($surface, $lightness: -13%);
-  $surface-800: color.scale($surface, $lightness: -15%);
-  $surface-900: color.scale($surface, $lightness: -17%);
-  $surface-1000: color.scale($surface, $lightness: -19%);
-  $surface-1100: color.scale($surface, $lightness: -22%);
-  $surface-1200: color.scale($surface, $lightness: -24%);
-  $surface-1300: color.scale($surface, $lightness: -26%);
-  $surface-border: $surface-800;
-  $maskbg: color.adjust($text, $alpha: -0.2);
-
-  @if ($dark) {
-    $bg: hsl(215, 69%, 9%);
-    $text: #cfd8dc;
-    $primary: color.scale($primary, $lightness: 35%);
-    $info: color.scale($info, $lightness: 22.5%);
-    $success: color.scale($success, $lightness: 22.5%);
-    $warn: color.scale($warn, $lightness: 22.5%);
-    $help: color.scale($help, $lightness: 35%);
-    $error: color.scale($error, $lightness: 22.5%);
-    $secondary: color.scale($secondary, $lightness: 22.5%);
-    $disabled: #576374;
-    $primary-hover: rgba(color.scale($primary, $lightness: -70%), 0.5);
-    $info-hover: rgba(color.scale($info, $lightness: -70%), 0.5);
-    $success-hover: rgba(color.scale($success, $lightness: -70%), 0.5);
-    $warn-hover: rgba(color.scale($warn, $lightness: -70%), 0.5);
-    $help-hover: rgba(color.scale($help, $lightness: -70%), 0.5);
-    $error-hover: rgba(color.scale($error, $lightness: -70%), 0.5);
-    $secondary-hover: rgba(color.scale($secondary, $lightness: -70%), 0.5);
-    $surface-100: color.scale($bg, $lightness: 2%);
-    $surface-200: color.scale($bg, $lightness: 4%);
-    $surface-300: color.scale($bg, $lightness: 6%);
-    $surface-400: color.scale($bg, $lightness: 8%);
-    $surface-500: color.scale($bg, $lightness: 10%);
-    $surface-600: color.scale($bg, $lightness: 12%);
-    $surface-700: color.scale($bg, $lightness: 14%);
-    $surface-800: color.scale($bg, $lightness: 16%);
-    $surface-900: color.scale($bg, $lightness: 18%);
-    $surface-1000: color.scale($bg, $lightness: 20%);
-    $surface-1100: color.scale($bg, $lightness: 22%);
-    $surface-1200: color.scale($bg, $lightness: 24%);
-    $surface-1300: color.scale($bg, $lightness: 26%);
-    $surface-border: $surface-800;
-    $maskbg: color.adjust($surface-600, $alpha: -0.4);
-  }
-
-  $v: (
-    "--bg": $bg,
-    "--text": $text,
-    "--primary": $primary,
-    "--info": $info,
-    "--success": $success,
-    "--warn": $warn,
-    "--help": $help,
-    "--error": $error,
-    "--secondary": $secondary,
-    "--disabled": $disabled,
-    "--primary-hover": $primary-hover,
-    "--info-hover": $info-hover,
-    "--success-hover": $success-hover,
-    "--warn-hover": $warn-hover,
-    "--help-hover": $help-hover,
-    "--error-hover": $error-hover,
-    "--secondary-hover": $secondary-hover,
-    "--surface-100": $surface-100,
-    "--surface-200": $surface-200,
-    "--surface-300": $surface-300,
-    "--surface-400": $surface-400,
-    "--surface-500": $surface-500,
-    "--surface-600": $surface-600,
-    "--surface-700": $surface-700,
-    "--surface-800": $surface-800,
-    "--surface-900": $surface-900,
-    "--surface-1000": $surface-1000,
-    "--surface-1100": $surface-1100,
-    "--surface-1200": $surface-1200,
-    "--surface-1300": $surface-1300,
-    "--surface-border": $surface-border,
-    "--maskbg": $maskbg,
-  );
-
-  @return $v;
+@function theme-colors($dark: false) {
+  @return "primary", "info", "success", "warn", "help",
+    "error", "secondary";
 }