@luizleon/sf.prefeiturasp.vuecomponents 0.0.21 → 0.0.22

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, isActive }"
+  >
+    <a
+      class="sf-navmenulink"
+      :href="href"
+      :data-active="props.exact ? isExactActive : isActive"
+      @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/components/tabnavigation/TabNavigation.d.ts

@@ -0,0 +1,42 @@
+import {
+  ClassComponent,
+  GlobalComponentConstructor,
+} from "../../ts-helpers";
+
+export interface SfTabNavigationTab {
+  text: string;
+  route: string;
+}
+
+export interface SfTabNavigationProps {
+  tabs: SfTabNavigationTab[];
+}
+
+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,117 @@
+<script setup lang="ts">
+import { onMounted, onBeforeUnmount, ref } from "vue";
+import { SfTabNavigationProps } from "./TabNavigation";
+
+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>

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,62 @@
+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 SfButton from "./components/button/Button.vue";
+
+import { UseNavMenuService } from "./services/navMenuService";
+import { UseDialogService } from "./services/dialogService";
+import { AuthService } from "./services/authService";
+import { AppResult } from "./common/appResult";
+
+import { Cor, Tamanho } from "./enum";
+
+import { nextTick } from "vue";
+
+import "./style/tema.scss";
+import "./style/componentes.scss";
+
+export {
+  SfLayout,
+  SfIcon,
+  SfNavMenuLink,
+  SfContent,
+  SfTabNavigation,
+  SfButton,
+  AuthService,
+  AppResult,
+  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();
+})();