@luizleon/sf.prefeiturasp.vuecomponents 0.0.1 → 0.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luizleon/sf.prefeiturasp.vuecomponents",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "description": "Pacote de componentes Vue para projetos em SF.",
   "main": "dist/lib.umd.js",
   "module": "dist/lib.es.js",

package/src/components/internal/HeaderAvatar.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { AuthService } from "../../services/authService";
+import { UseDialogService } from "../../services/dialogService";
+
+const dialogService = UseDialogService();
+
+const letters = Letters();
+
+async function Logout() {
+  const confirm = await dialogService.ConfirmAsync({
+    message: `${AuthService.User.username} - ${AuthService.User.name}.<br /><br />Você deseja sair da conta?`,
+    confirmLabel: "sair",
+  });
+  if (!confirm) return;
+  AuthService.CallLogout();
+}
+
+function Letters() {
+  const name = AuthService.User.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 : "?";
+}
+
+function Color() {
+  const primeiraLetra = letters[0];
+  const cor =
+    primeiraLetra === "?"
+      ? 0
+      : (primeiraLetra.charCodeAt(0) - 64) % 19;
+  return Math.max(cor, 0);
+}
+</script>
+
+<template>
+  <div id="sf-header-avatar" :data-cor="Color()" @click="Logout">
+    {{ letters }}
+  </div>
+</template>

package/src/components/internal/ThemeToggle.ts

@@ -1,6 +1,6 @@
 class ThemeToggle {
   get storedTheme() {
-    return localStorage.getItem("lkVueTheme") as
+    return localStorage.getItem("color-scheme") as
       | "light"
       | "dark"
       | null;
@@ -14,12 +14,12 @@ class ThemeToggle {
   EnableDarkMode() {
     document.documentElement.classList.add("dark");
     document.documentElement.classList.remove("light");
-    localStorage.setItem("lkVueTheme", "dark");
+    localStorage.setItem("color-scheme", "dark");
   }
   EnableLightMode() {
     document.documentElement.classList.remove("dark");
     document.documentElement.classList.add("light");
-    localStorage.setItem("lkVueTheme", "light");
+    localStorage.setItem("color-scheme", "light");
   }
   SetInitialTheme() {
     if (this.storedTheme === "light") {

package/src/components/layout/Layout.vue

@@ -1,23 +1,11 @@
 <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 HeaderAvatar from "../internal/HeaderAvatar.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>
@@ -38,7 +26,7 @@ async function Logout() {
       </div>
       <slot name="action"> </slot>
       <ThemeToggle />
-      <LogoutIcon @click="Logout" />
+      <HeaderAvatar />
     </header>
     <nav :class="{ visible: navService.IsVisible }">
       <div class="sf-layout-nav-header">

package/src/components/tabnavigation/TabNavigation.d.ts

@@ -0,0 +1,37 @@
+import {
+  ClassComponent,
+  GlobalComponentConstructor,
+} from "../../ts-helpers";
+
+export interface SfTabNavigationProps {
+  tabs: { text: string; route: string }[];
+}
+
+export interface SfTabNavigationSlots {
+  item: (scope: {
+    navigate: () => void;
+    isActive: boolean;
+  }) => VNode[];
+}
+
+export declare type SfTabNavigationEmits = {};
+
+declare class SfTabNavigation extends ClassComponent<
+  SfTabNavigationProps,
+  SfTabNavigationSlots,
+  SfTabNavigationEmits
+> {}
+
+declare module "@vue/runtime-core" {
+  interface GlobalComponents {
+    SfTabNavigation: GlobalComponentConstructor<SfTabNavigation>;
+  }
+}
+
+/**
+ * Componente para navegação em abas
+ *
+ * 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 SfTabNavigation;

package/src/components/tabnavigation/TabNavigation.vue

@@ -0,0 +1,114 @@
+<script setup lang="ts">
+import { onMounted, onBeforeUnmount, ref } from "vue";
+import { SfTabNavigationProps } from "./TabNavigation";
+
+const props = 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(() => {
+  trackerContainer.value!.removeEventListener(
+    "scroll",
+    AjustarIcones
+  );
+  trackerContainerObserver.unobserve(trackerContainer.value!);
+  trackerContainerObserver.disconnect();
+});
+</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>
+          <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/index.ts

@@ -2,6 +2,7 @@ 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 SfTabNavigation from "./components/tabnavigation/TabNavigation.vue";
 
 import { UseNavMenuService } from "./services/navMenuService";
 import { UseDialogService } from "./services/dialogService";
@@ -19,6 +20,7 @@ export {
   SfIcon,
   SfNavMenuLink,
   SfContent,
+  SfTabNavigation,
   AuthService,
   UseNavMenuService,
   UseDialogService,

package/src/services/dialogService.ts

@@ -20,7 +20,7 @@ class DialogService {
         allowOutsideClick: false,
         icon: "question",
         title: options.header,
-        text: options.message,
+        html: options.message,
         confirmButtonText: options.confirmLabel ?? "confirmar",
         cancelButtonText: options.rejectLabel ?? "cancelar",
       }).then((x: any) => {

package/src/style/componentes.scss

@@ -1,22 +1,14 @@
 @import "./src/components/layout";
 @import "./src/components/themetoggle";
-@import "./src/components/internal_icon_button";
+@import "./src/components/internal-icon-button";
 @import "./src/components/svg_icon";
 @import "./src/components/loading-circle";
 @import "./src/components/icon";
-@import "./src/components/progress-circular";
 @import "./src/components/tooltip";
-@import "./src/components/toast";
 @import "./src/components/drawer";
-@import "./src/components/mask";
 @import "./src/components/navmenulink";
-@import "./src/components/button";
-@import "./src/components/textfield";
-@import "./src/components/numpad";
 @import "./src/components/content";
 @import "./src/components/scrollToTop";
-@import "./src/components/datefield";
-@import "./src/components/checkbox";
-@import "./src/components/mark";
-@import "./src/components/select";
 @import "./src/sweetalert/sweetalert";
+@import "./src/components/headerAvatar";
+@import "./src/components/tab-navigation";

package/src/style/src/components/_headerAvatar.scss

@@ -0,0 +1,22 @@
+html {
+  #sf-header-avatar {
+    text-transform: uppercase;
+    line-height: 1;
+    word-break: keep-all;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    background-position: center;
+    background-size: contain;
+    font-size: 1rem;
+    min-width: 36px;
+    min-height: 36px;
+    border-radius: 50%;
+    margin-left: 0.5rem;
+    cursor: pointer;
+    @include avatar-colors();
+    &.dark {
+      @include avatar-colors(true);
+    }
+  }
+}

package/src/style/src/components/_tab-navigation.scss

@@ -0,0 +1,88 @@
+.sf-tab-navigation {
+  background: var(--surface-100-color);
+  overflow: hidden;
+  position: relative;
+}
+
+.sf-tab-navigation svg {
+  width: 36px;
+  height: 36px;
+  padding: 8px;
+  cursor: pointer;
+  color: var(--text-color);
+  border-radius: 50%;
+  pointer-events: auto;
+}
+
+.sf-tab-navigation ul {
+  padding: 0;
+  margin: 0;
+  display: flex;
+  height: 42px;
+  list-style: none;
+  overflow: scroll;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+  scroll-behavior: smooth;
+  background-color: var(--bg-color);
+  border-bottom: 1px solid var(--surface-border-color);
+  > li {
+    display: flex;
+    align-items: center;
+    padding: 0 1rem;
+    flex-grow: 1;
+    justify-content: center;
+    a {
+      text-decoration: none;
+      padding-bottom: 2px;
+      border-bottom: 2px solid transparent;
+      &:hover,
+      &.active {
+        border-bottom-color: var(--primary-color);
+      }
+    }
+  }
+}
+
+.sf-tab-navigation ul::-webkit-scrollbar {
+  display: none;
+}
+
+.sf-tab-navigation .right-arrow,
+.sf-tab-navigation .left-arrow {
+  position: absolute;
+  height: 100%;
+  width: 100px;
+  top: 0;
+  display: none;
+  align-items: center;
+  padding: 0 10px;
+  pointer-events: none;
+}
+
+.sf-tab-navigation .right-arrow.active,
+.sf-tab-navigation .left-arrow.active {
+  display: flex;
+}
+
+.sf-tab-navigation .right-arrow {
+  right: 0;
+  background: linear-gradient(
+    to left,
+    var(--surface-100-color) 30%,
+    transparent
+  );
+  justify-content: flex-end;
+}
+
+.sf-tab-navigation .left-arrow {
+  background: linear-gradient(
+    to right,
+    var(--surface-100-color) 50%,
+    transparent
+  );
+}
+
+.sf-tab-navigation svg:hover {
+  background: var(--surface-300-color);
+}

package/src/components/internal/LogoutIcon.vue

@@ -1,14 +0,0 @@
-<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/sf-oidc-state.html

@@ -1,15 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <body>
-    <script>
-      const query = new URLSearchParams(location.href.split('#')[1]);
-      const state = query.get('state');
-      const code = query.get('code');
-      const error = query.get('error');
-      parent.postMessage(
-        { action: 'sf-oidc-state', code, state, error },
-        location.origin
-      );
-    </script>
-  </body>
-</html>

package/src/style/src/components/_button.scss

@@ -1,110 +0,0 @@
-@use "../mixins";
-
-.sf-button {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  border-radius: 4px;
-  border: 1px solid transparent;
-  overflow: hidden;
-  font-weight: 400;
-  transition: opacity 0.2s ease-in-out;
-  &:hover {
-    cursor: pointer;
-  }
-
-  .sf-button-label {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  .sf-icon {
-    position: absolute;
-    > button {
-      color: currentColor !important;
-    }
-  }
-
-  &.sf-component-loading {
-    color: var(--disabled-color) !important;
-    border-color: var(--disabled-color) !important;
-    .sf-button-label {
-      color: transparent !important;
-    }
-  }
-
-  &.sf-button-filled:disabled {
-    background-color: hsla(
-      var(--disabled-color-h),
-      var(--disabled-color-s),
-      var(--disabled-color-l),
-      0.5
-    ) !important;
-  }
-
-  &.sf-button-small {
-    height: 32px;
-    font-size: 0.875rem;
-    padding: 0 12px;
-    &.sf-button-with-icon {
-      padding-left: 28px;
-    }
-    .sf-icon {
-      inset: 0 0 0 6px;
-      &.sf-component-loading {
-        inset: 0 0 0 50%;
-        margin-left: -8px;
-      }
-    }
-    .sf-button-label {
-      line-height: 32px;
-    }
-  }
-
-  &.sf-button-medium {
-    height: 36px;
-    font-size: 1rem;
-    padding: 0 12px;
-    &.sf-button-with-icon {
-      padding-left: 38px;
-    }
-    .sf-icon {
-      inset: 0 0 0 8px;
-      &.sf-component-loading {
-        inset: 0 0 0 50%;
-        margin-left: -12px;
-      }
-    }
-    .sf-button-label {
-      line-height: 36px;
-    }
-  }
-
-  &.sf-button-large {
-    height: 48px;
-    font-size: 1.25rem;
-    padding: 0 16px;
-    &.sf-button-with-icon {
-      padding-left: 54px;
-    }
-    .sf-icon {
-      inset: 0 0 0 10px;
-      &.sf-component-loading {
-        inset: 0 0 0 50%;
-        margin-left: -18px;
-      }
-    }
-    .sf-button-label {
-      line-height: 48px;
-    }
-  }
-
-  @include button-colors;
-}
-
-html.dark {
-  .sf-button {
-    @include button-colors(true);
-  }
-}

package/src/style/src/components/_checkbox.scss

@@ -1,53 +0,0 @@
-.sf-checkbox {
-  $width: 22px;
-  $height: 22px;
-  $radius: 4px;
-  cursor: pointer;
-  user-select: none;
-  align-items: center;
-  position: relative;
-  .sf-checkbox-box {
-    min-width: $width;
-    min-height: $height;
-    width: $width;
-    height: $height;
-    border-radius: $radius;
-    border: 2px solid var(--surface-border-color);
-    background: var(--surface-200-color);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    transition-duration: 0.2s;
-    transition-timing-function: linear;
-    transition-property: box-shadow, border;
-    &.sf-checkbox-box-highlight {
-      border-color: var(--primary-color);
-      background-color: var(--primary-color);
-      > .sf-icon > button {
-        color: var(--bg-color);
-      }
-    }
-    &.sf-checkbox-box-focus {
-      outline: 0 none;
-      outline-offset: 0;
-      border-color: var(--primary-color);
-      box-shadow: 0 0 0 1px var(--primary-color);
-    }
-    &:not(.sf-checkbox-box-highlight) {
-      &:hover {
-        outline: 0 none;
-        outline-offset: 0;
-        border-color: var(--surface-900-color);
-        background: var(--surface-300-color);
-      }
-    }
-  }
-  .sf-checkbox-label {
-    padding-left: 1rem;
-    margin-right: 1rem;
-    word-break: break-all;
-    &:empty {
-      display: none;
-    }
-  }
-}