@luizleon/sf.prefeiturasp.vuecomponents 0.0.19 → 0.0.20

package/package.json

@@ -1,12 +1,22 @@
 {
   "name": "@luizleon/sf.prefeiturasp.vuecomponents",
-  "version": "0.0.19",
+  "version": "0.0.20",
+  "type": "module",
+  "files": [
+    "dist"
+  ],
   "description": "Pacote de componentes Vue para projetos em SF.",
-  "main": "dist/lib.umd.js",
-  "module": "dist/lib.es.js",
+  "main": "dist/lib.umd.cjs",
+  "module": "dist/lib.js",
+  "exports": {
+    ".": {
+      "import": "./dist/lib.js",
+      "require": "./dist/lib.umd.cjs"
+    }
+  },
   "types": "dist/index.d.ts",
   "scripts": {
-    "build": "rimraf ./dist/ && vue-tsc --noEmit && vite build"
+    "build": "rimraf ./dist/ && vite build && vue-tsc --noemit"
   },
   "dependencies": {
     "air-datepicker": "3.3.1",

package/src/common/appResult.ts

@@ -1,22 +0,0 @@
-export class AppResult<Value = null> {
-  constructor(value: Value | null = null) {
-    this._value = value;
-  }
-  errors: string[] = [];
-  private _value?: Value | null = null;
-  get value() {
-    return this._value as Value;
-  }
-  set value(v: Value) {
-    this._value = v;
-  }
-  get hasSuccess(): boolean {
-    return !this.hasError;
-  }
-  get hasError(): boolean {
-    return this.errors.length > 0;
-  }
-  WithError(error: string) {
-    this.errors.push(error);
-  }
-}

package/src/components/button/Button.d.ts

@@ -1,42 +0,0 @@
-import { VNode } from "vue";
-import { StyleValue } from "vue";
-import {
-  ClassComponent,
-  GlobalComponentConstructor,
-} from "../../ts-helpers";
-
-export interface SfButtonProps {
-  icon?: string;
-  visible?: boolean;
-  class?: any;
-  style?: StyleValue;
-  disabled?: boolean;
-  loading?: boolean;
-  color?: Color;
-  size?: Size;
-  variant?: "filled" | "outlined" | "text";
-  autofocus?: boolean;
-  form?: string;
-  name?: string;
-  id?: string;
-  type?: "submit" | "reset" | "button";
-  value?: string | string[] | number;
-}
-
-export interface SfButtonSlots {}
-
-export declare type SfButtonEmits = {};
-
-declare class SfButton extends ClassComponent<
-  SfButtonProps,
-  SfButtonSlots,
-  SfButtonEmits
-> {}
-
-declare module "@vue/runtime-core" {
-  interface GlobalComponents {
-    SfButton: GlobalComponentConstructor<SfButton>;
-  }
-}
-
-export default SfButton;

package/src/components/button/Button.vue

@@ -1,61 +0,0 @@
-<script setup lang="ts">
-import Icon from "../icon/Icon.vue";
-import { CssClassBuilder } from "../internal/cssClassBuilder";
-import { SfButtonProps } from "./Button";
-
-const props: SfButtonProps = withDefaults(
-  defineProps<SfButtonProps>(),
-  {
-    visible: true,
-    color: "primary",
-    size: "md",
-    type: "button",
-    variant: "filled",
-  }
-);
-
-function CssClass() {
-  return new CssClassBuilder(`${props.class ?? ""} sf-button`)
-    .AddClass("sf-component-loading", props.loading)
-    .AddClass("sf-component-disabled", props.disabled)
-    .AddClass("sf-button-small", props.size === "sm")
-    .AddClass("sf-button-medium", props.size === "md")
-    .AddClass("sf-button-large", props.size === "lg")
-    .AddClass("sf-button-filled", props.variant === "filled")
-    .AddClass("sf-button-text", props.variant === "text")
-    .AddClass("sf-button-outlined", props.variant === "outlined")
-    .AddClass("sf-button-with-icon", !!props.icon)
-    .AddClass("sf-ripple")
-    .Build();
-}
-</script>
-
-<template>
-  <button
-    :id="props.id"
-    :name="props.name"
-    :class="CssClass()"
-    :style="props.style"
-    :disabled="props.disabled || props.loading"
-    :data-color="props.color"
-    :form="props.form"
-    :type="props.type"
-  >
-    <Icon
-      v-if="!!props.icon"
-      :icone="props.icon"
-      :loading="props.loading"
-      :size="props.size"
-      :button-props="{ tabindex: -1 }"
-    />
-    <Icon
-      v-else-if="props.loading"
-      :loading="true"
-      :size="props.size"
-      :button-props="{ tabindex: -1 }"
-    />
-    <span class="sf-button-label">
-      <slot name="default"></slot>
-    </span>
-  </button>
-</template>

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

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

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

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

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

@@ -1,49 +0,0 @@
-<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({
-    text: `${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/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/layout/Layout.d.ts

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

@@ -1,51 +0,0 @@
-<script setup lang="ts">
-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";
-
-const navService = UseNavMenuService();
-</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 />
-      <HeaderAvatar />
-    </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

@@ -1,35 +0,0 @@
-import {
-  ClassComponent,
-  GlobalComponentConstructor,
-} from "../../ts-helpers";
-
-export interface SfNavMenuLinkProps {
-  href: string;
-  text: string;
-  icon?: string;
-  exact?: boolean;
-}
-
-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;