@luizleon/sf.prefeiturasp.vuecomponents 0.0.65 → 4.0.0

package/src/style/src/_functions.scss

@@ -1,4 +1,19 @@
 @function theme-colors($dark: false) {
-  @return "primary", "info", "success", "warn", "help",
-    "error", "secondary";
+  @return "primary", "info", "success", "warn", "help", "error",
+    "secondary";
+}
+
+@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;
 }

package/src/style/src/_mixins.scss

@@ -74,38 +74,40 @@
 }
 
 @mixin button-colors($dark: false) {
-  @each $color in theme-colors() {
-    &[data-color="#{$color}"] {
-      color: var(--bg-color);
+  @each $color in $theme-colors-list {
+    $button-var-color: var(#{$color}-color);
+    $button-filled-color: #fff;
+    @if ($color == "--warn") {
+      $button-filled-color: #000;
+    }
+    &[data-color="#{str-replace($color, '--')}"] {
       @media (pointer: fine) {
         &:focus-visible {
-          outline: 2px solid var(--#{$color}-hover-color);
+          outline: 2px solid $button-var-color;
           outline-offset: 1px;
           border-color: var(--bg-color);
         }
       }
       &:active {
         transition: 0s;
-        &:active {
-          @if ($dark) {
-            filter: brightness(0.9);
-          } @else {
-            filter: brightness(1.1);
-          }
-        }
+        filter: brightness(0.9);
       }
       &.#{$prefix}button-filled {
-        background-color: var(--#{$color}-color);
+        color: #{$button-filled-color};
+        background-color: $button-var-color;
       }
       &.#{$prefix}button-outlined,
       &.#{$prefix}button-text {
+        color: $button-var-color;
         background-color: transparent;
-        color: var(--#{$color}-color);
-        border-color: var(--#{$color}-color);
         @media (pointer: fine) {
           &:hover,
           &:focus-visible {
-            background-color: var(--#{$color}-hover-color);
+            background: color-mix(
+              in srgb,
+              currentColor 10%,
+              transparent
+            );
           }
         }
       }
@@ -117,34 +119,54 @@
 }
 
 @mixin dot-colors() {
-  @each $color in theme-colors() {
-    &[data-color="#{$color}"] {
-      color: var(--#{$color}-color);
+  @each $color in $theme-colors-list {
+    $colorName: str-replace($color, "--");
+    &[data-color="#{$colorName}"] {
+      background-color: var(#{$color}-color);
     }
   }
 }
 
 @mixin input-colors() {
-  @each $color in theme-colors() {
-    &[data-color="#{$color}"] {
-      background-color: var(--#{$color}-color);
+  @each $color in $theme-colors-list {
+    $colorName: str-replace($color, "--");
+    &[data-color="#{$colorName}"] {
+      color: var(#{$color}-color);
     }
   }
 }
 
 @mixin toast-colors() {
-  @each $color in theme-colors() {
-    &.toast-#{$color} {
-      --animate-bg-color: var(--#{$color}-color);
+  @each $color, $colorValue in $theme-colors-list {
+    $colorName: str-replace($color, "--");
+    &.toast-#{$colorName} {
+      --toast-progress-color: var(#{$color}-color);
+      --toast-bg-color: hsla(
+        var(#{$color}-color-h),
+        var(#{$color}-color-s),
+        var(#{$color}-color-l),
+        0.9
+      );
     }
   }
 }
 
-@mixin icon-button-hover-colors() {
-  @each $color in theme-colors() {
-    &:hover,
-    &:focus-visible {
-      background-color: var(--#{$color}-hover-color);
+@mixin theme-colors-class() {
+  @each $color in $theme-colors-list {
+    $colorName: str-replace($color, "--");
+    .#{$colorName}-color:not(
+        :disabled,
+        .disabled,
+        .component-disabled
+      ) {
+      color: var(#{$color}-color) !important;
+    }
+    .#{$colorName}-bgcolor:not(
+        :disabled,
+        .disabled,
+        .component-disabled
+      ) {
+      background-color: var(#{$color}-color) !important;
     }
   }
 }

package/src/style/src/_variables.scss

@@ -1 +1,12 @@
 $prefix: "sf-" !default;
+
+$theme-colors-list: (
+  "--primary",
+  "--info",
+  "--success",
+  "--warn",
+  "--help",
+  "--error",
+  "--secondary",
+  "--text"
+);

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

@@ -4,8 +4,10 @@
   position: relative;
   display: inline-flex;
   align-items: center;
-  border-radius: 4px;
+  border-radius: 6px;
   border: 1px solid transparent;
+  width: fit-content;
+  word-break: break-word;
   font-weight: 400;
   transition: opacity 0.2s ease-in-out;
   &:hover {
@@ -13,11 +15,12 @@
   }
 
   .#{$prefix}button-label {
-    white-space: nowrap;
+    white-space: wrap;
   }
 
   .#{$prefix}icon {
     position: absolute;
+    color: unset !important;
     > button {
       color: currentColor !important;
     }
@@ -41,7 +44,7 @@
   }
 
   &.#{$prefix}button-small {
-    height: 32px;
+    min-height: 32px;
     font-size: 0.875rem;
     padding: 0 12px;
     &.#{$prefix}button-with-icon {
@@ -54,13 +57,10 @@
         margin-left: -8px;
       }
     }
-    .#{$prefix}button-label {
-      line-height: 32px;
-    }
   }
 
   &.#{$prefix}button-medium {
-    height: 36px;
+    min-height: 36px;
     font-size: 1rem;
     padding: 0 12px;
     &.#{$prefix}button-with-icon {
@@ -73,13 +73,10 @@
         margin-left: -12px;
       }
     }
-    .#{$prefix}button-label {
-      line-height: 36px;
-    }
   }
 
   &.#{$prefix}button-large {
-    height: 48px;
+    min-height: 48px;
     font-size: 1.25rem;
     padding: 0 16px;
     &.#{$prefix}button-with-icon {

package/src/style/src/components/_icon.scss

@@ -14,7 +14,7 @@ div.#{$prefix}icon {
   align-items: center;
 
   > button {
-    color: var(--text-color);
+    color: currentColor;
     pointer-events: none;
     background: none;
     border: none;
@@ -22,10 +22,10 @@ div.#{$prefix}icon {
     + span {
       position: absolute;
       border-radius: 50%;
-      width: 6px;
-      height: 6px;
-      top: 4px;
-      right: 4px;
+      width: 8px;
+      height: 8px;
+      top: 6px;
+      right: 6px;
       @include dot-colors;
     }
     &:focus-visible {
@@ -45,66 +45,68 @@ div.#{$prefix}icon {
   }
 
   &.#{$prefix}icon-small {
-    min-width: 28px;
-    > button {
-      font-size: 20px;
-    }
-    .#{$prefix}loading-circle {
-      width: 20px;
-      height: 20px;
-    }
+    --size: calc(var(--material-icon-font-size) * 0.75);
   }
 
   &.#{$prefix}icon-medium {
-    min-width: 37px;
+    --size: var(--material-icon-font-size);
+  }
+
+  &.#{$prefix}icon-large {
+    --size: calc(var(--material-icon-font-size) * 1.25);
     > button {
-      font-size: 24px;
-      + span {
-        width: 8px;
-        height: 8px;
-        top: 6px;
-        right: 6px;
-      }
+      font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0,
+        "opsz" 48;
     }
-    .#{$prefix}loading-circle {
-      width: 24px;
-      height: 24px;
+  }
+
+  &.#{$prefix}icon-xlarge {
+    --size: calc(var(--material-icon-font-size) * 2);
+    > button {
+      font-variation-settings: "FILL" 0, "wght" 200, "GRAD" 0,
+        "opsz" 48;
     }
   }
 
-  &.#{$prefix}icon-large {
-    min-width: 48px;
+  &.#{$prefix}icon-2xlarge {
+    --size: calc(var(--material-icon-font-size) * 2.5);
     > button {
-      font-size: 36px;
-      + span {
-        width: 12px;
-        height: 12px;
-        top: 6px;
-        right: 6px;
-      }
+      font-variation-settings: "FILL" 0, "wght" 100, "GRAD" 0,
+        "opsz" 48;
     }
-    .#{$prefix}loading-circle {
-      width: 28px;
-      height: 28px;
+  }
+
+  &.#{$prefix}icon-3xlarge {
+    --size: calc(var(--material-icon-font-size) * 3);
+    > button {
+      font-variation-settings: "FILL" 0, "wght" 100, "GRAD" 0,
+        "opsz" 48;
     }
   }
 
+  .#{$prefix}loading-circle {
+    width: var(--size);
+    height: var(--size);
+  }
+
+  > button {
+    font-size: var(--size);
+    width: var(--size);
+    height: var(--size);
+    line-height: var(--size);
+  }
+
   &.#{$prefix}icon-button {
+    padding: 6px;
     border-radius: 50%;
     transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1)
       0ms;
-    &.#{$prefix}icon-small {
-      padding: 4px;
-    }
-    &.#{$prefix}icon-medium {
-      padding: 6px;
-    }
-    &.#{$prefix}icon-large {
-      padding: 8px;
-    }
     @media (pointer: fine) {
-      cursor: pointer;
-      @include icon-button-hover-colors;
+      &:hover,
+      &:focus-within {
+        cursor: pointer;
+        background: color-mix(in srgb, currentColor 10%, transparent);
+      }
     }
   }
 

package/src/style/src/components/_tooltip.scss

@@ -1,21 +1,18 @@
 .#{$prefix}tooltip-wrapper {
   --arrow-width: 7.5px;
   pointer-events: none;
-  width: 120px;
   color: var(--bg-color);
   text-align: center;
-  text-transform: lowercase;
   position: absolute;
   opacity: 0;
   transition: opacity 0.3s;
 
   .#{$prefix}tooltip-inner {
     position: relative;
-    padding: 5px 2px;
-    border-radius: 4px;
+    padding: var(--inline-spacing);
+    border-radius: 6px;
     background-color: var(--text-color);
-    font-size: 0.825rem;
-
+    font-size: 0.875em;
     &::after {
       content: "";
       position: absolute;
@@ -45,7 +42,9 @@
 }
 
 .#{$prefix}tooltip-anchor {
-  display: inline !important;
+  display: inline-block !important;
+  width: fit-content;
+  height: fit-content;
   border-radius: 50%;
   &:has(.component-disabled),
   &:has(.component-loading) {

package/src/types/index.ts

@@ -1,5 +1,21 @@
 import Keycloak, { KeycloakInitOptions } from "./../keycloak";
 
+export type Color =
+  | "primary"
+  | "secondary"
+  | "info"
+  | "success"
+  | "help"
+  | "warn"
+  | "error"
+  | "text";
+
+export type Size = "sm" | "md" | "lg";
+
+export type IconSize = Size | "xl" | "2xl" | "3xl";
+
+export type ButtonVariant = "filled" | "outlined" | "text";
+
 interface SfPanelMenuItem {
   label: string;
   routeName?: string;
@@ -9,6 +25,14 @@ interface SfPanelMenuItem {
   key?: string;
 }
 
+export interface SfNavMenuItem {
+  text: string;
+  [key: string]: any;
+  href?: string;
+  icon?: string;
+  items?: SfNavMenuItem[];
+}
+
 interface User {
   name: string;
   email: string;