@luizleon/sf.prefeiturasp.vuecomponents 0.0.14 → 0.0.16

package/package.json

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

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

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

@@ -0,0 +1,61 @@
+<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"
+      :icon="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/index.ts

@@ -3,6 +3,7 @@ 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";
@@ -22,6 +23,7 @@ export {
   SfNavMenuLink,
   SfContent,
   SfTabNavigation,
+  SfButton,
   AuthService,
   AppResult,
   UseNavMenuService,

package/src/style/componentes.scss

@@ -12,3 +12,4 @@
 @import "./src/sweetalert/sweetalert";
 @import "./src/components/headerAvatar";
 @import "./src/components/tab-navigation";
+@import "./src/components/button";

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

@@ -0,0 +1,107 @@
+@use "../mixins";
+
+.sf-button {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  border-radius: 4px;
+  border: 1px solid transparent;
+  font-weight: 400;
+  transition: opacity 0.2s ease-in-out;
+  &:hover {
+    cursor: pointer;
+  }
+
+  .sf-button-label {
+    white-space: nowrap;
+  }
+
+  .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);
+  }
+}