@luizleon/sf.prefeiturasp.vuecomponents 0.0.37 → 0.0.38

package/src/style/src/_variables.scss

@@ -1,87 +1 @@
-@use "sass:color";
-
-$prefix: "sf-" !default;
-$separator: "\\:" !default;
-
-$sm: 576px !default;
-$md: 768px !default;
-$lg: 992px !default;
-$xl: 1200px !default;
-$gutter: 0.5rem !default;
-
-$fieldMargin: 1rem !default;
-$fieldLabelMargin: 0.5rem !default;
-$helperTextMargin: 0.25rem !default;
-
-$spacer: 1rem !default;
-
-$breakpoints: (
-  "sm": $sm,
-  "md": $md,
-  "lg": $lg,
-  "xl": $xl,
-) !default;
-
-$red: #f44336;
-$pink: #e91e63;
-$purple: #9c27b0;
-$deepPurple: #673ab7;
-$indigo: #3f51b5;
-$blue: #2196f3;
-$lightBlue: #03a9f4;
-$cyan: #00bcd4;
-$teal: #009688;
-$green: #4caf50;
-$lightGreen: #8bc34a;
-$lime: #cddc39;
-$yellow: #ffeb3b;
-$amber: #ffc107;
-$orange: #ff9800;
-$deepOrange: #ff5722;
-$brown: #795548;
-$gray: #9e9e9e;
-$blueGray: #607d8b;
-
-$colors: (
-  "--red": $red,
-  "--pink": $pink,
-  "--purple": $purple,
-  "--deepPurple": $deepPurple,
-  "--indigo": $indigo,
-  "--blue": $blue,
-  "--lightBlue": $lightBlue,
-  "--cyan": $cyan,
-  "--teal": $teal,
-  "--green": $green,
-  "--lightGreen": $lightGreen,
-  "--lime": $lime,
-  "--yellow": $yellow,
-  "--amber": $amber,
-  "--orange": $orange,
-  "--deepOrange": $deepOrange,
-  "--brown": $brown,
-  "--gray": $gray,
-  "--blueGray": $blueGray,
-);
-
-$icon-hover-color: color.scale($blueGray, $alpha: -80%);
-
-$theme-colors-list: (
-  "--primary",
-  "--info",
-  "--success",
-  "--warn",
-  "--help",
-  "--error",
-  "--secondary"
-);
-
-$theme-colors-hover-list: (
-  "--primary-hover",
-  "--info-hover",
-  "--success-hover",
-  "--warn-hover",
-  "--help-hover",
-  "--error-hover",
-  "--secondary-hover"
-);
+$prefix: "sf-" !default;

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

@@ -1,6 +1,6 @@
 @use "../mixins";
 
-.sf-button {
+.#{$prefix}button {
   position: relative;
   display: inline-flex;
   align-items: center;
@@ -12,26 +12,26 @@
     cursor: pointer;
   }
 
-  .sf-button-label {
+  .#{$prefix}button-label {
     white-space: nowrap;
   }
 
-  .sf-icon {
+  .#{$prefix}icon {
     position: absolute;
     > button {
       color: currentColor !important;
     }
   }
 
-  &.sf-component-loading {
+  &.#{$prefix}component-loading {
     color: var(--disabled-color) !important;
     border-color: var(--disabled-color) !important;
-    .sf-button-label {
+    .#{$prefix}button-label {
       color: transparent !important;
     }
   }
 
-  &.sf-button-filled:disabled {
+  &.#{$prefix}button-filled:disabled {
     background-color: hsla(
       var(--disabled-color-h),
       var(--disabled-color-s),
@@ -40,59 +40,59 @@
     ) !important;
   }
 
-  &.sf-button-small {
+  &.#{$prefix}button-small {
     height: 32px;
     font-size: 0.875rem;
     padding: 0 12px;
-    &.sf-button-with-icon {
+    &.#{$prefix}button-with-icon {
       padding-left: 28px;
     }
-    .sf-icon {
+    .#{$prefix}icon {
       inset: 0 0 0 6px;
-      &.sf-component-loading {
+      &.#{$prefix}component-loading {
         inset: 0 0 0 50%;
         margin-left: -8px;
       }
     }
-    .sf-button-label {
+    .#{$prefix}button-label {
       line-height: 32px;
     }
   }
 
-  &.sf-button-medium {
+  &.#{$prefix}button-medium {
     height: 36px;
     font-size: 1rem;
     padding: 0 12px;
-    &.sf-button-with-icon {
+    &.#{$prefix}button-with-icon {
       padding-left: 38px;
     }
-    .sf-icon {
+    .#{$prefix}icon {
       inset: 0 0 0 8px;
-      &.sf-component-loading {
+      &.#{$prefix}component-loading {
         inset: 0 0 0 50%;
         margin-left: -12px;
       }
     }
-    .sf-button-label {
+    .#{$prefix}button-label {
       line-height: 36px;
     }
   }
 
-  &.sf-button-large {
+  &.#{$prefix}button-large {
     height: 48px;
     font-size: 1.25rem;
     padding: 0 16px;
-    &.sf-button-with-icon {
+    &.#{$prefix}button-with-icon {
       padding-left: 54px;
     }
-    .sf-icon {
+    .#{$prefix}icon {
       inset: 0 0 0 10px;
-      &.sf-component-loading {
+      &.#{$prefix}component-loading {
         inset: 0 0 0 50%;
         margin-left: -18px;
       }
     }
-    .sf-button-label {
+    .#{$prefix}button-label {
       line-height: 48px;
     }
   }
@@ -101,7 +101,7 @@
 }
 
 html.dark {
-  .sf-button {
+  .#{$prefix}button {
     @include button-colors(true);
   }
 }

package/src/style/src/components/_drawer.scss

@@ -1,91 +1,81 @@
-.sf-drawer {
+@import "../variables";
+
+.#{$prefix}drawer {
   pointer-events: auto;
   height: var(--window-height);
   background: var(--bg-color);
   border-right: 1px solid var(--surface-border-color);
-  width: 360px;
+  width: min(360px, 100vw);
   transform: translate3d(0px, 0px, 0px);
   opacity: 1;
   transition: all 0.2s linear;
-  @media screen and (min-width: #{$xl}) {
-    width: 480px;
-  }
-  @media screen and (max-width: #{$sm}) {
-    width: 100%;
-    border: none;
-  }
-  .sf-drawer-header,
-  .sf-drawer-footer {
+  .#{$prefix}drawer-header,
+  .#{$prefix}drawer-footer {
     border-color: var(--surface-border-color);
     height: 60px;
   }
-  .sf-drawer-header {
+  .#{$prefix}drawer-header {
     padding: 0 1.25rem;
     display: flex;
     align-items: center;
     justify-content: space-between;
     border-bottom: 1px solid var(--surface-border-color);
-    .sf-drawer-title {
+    .#{$prefix}drawer-title {
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
+      flex-grow: 1;
     }
   }
-  .sf-drawer-content {
+  .#{$prefix}drawer-content {
     overflow: auto;
-    height: 100%;
+    height: calc(var(--window-height) - 60px);
   }
-  .sf-drawer-footer {
+  .#{$prefix}drawer-footer {
     border-top: 1px solid var(--surface-border-color);
   }
-  &.sf-drawer-with-title .sf-drawer-content {
-    height: calc(100% - 60px);
-  }
-  &.sf-drawer-with-footer .sf-drawer-content {
-    height: calc(100% - 60px);
-  }
-  &.sf-drawer-with-title.sf-drawer-with-footer .sf-drawer-content {
-    height: calc(100% - 120px);
+  &.#{$prefix}drawer-with-footer .#{$prefix}drawer-content {
+    height: calc(var(--window-height) - 120px);
   }
 }
-.sf-drawer-enter-active {
+.#{$prefix}drawer-enter-active {
   transition: all 0.2 linear;
 }
-.sf-drawer-leave-active {
+.#{$prefix}drawer-leave-active {
   transition: all 0.2 linear;
 }
-.sf-drawer-enter-from,
-.sf-drawer-leave-to {
+.#{$prefix}drawer-enter-from,
+.#{$prefix}drawer-leave-to {
   transform: translate3d(-100%, 0px, 0px);
 }
-.sf-mask.right {
+.#{$prefix}mask.right {
   justify-content: flex-end;
-  .sf-drawer {
+  .#{$prefix}drawer {
     border-left: 1px solid var(--surface-border-color);
     border-right: unset;
   }
-  .sf-drawer-enter-from,
-  .sf-drawer-leave-to {
+  .#{$prefix}drawer-enter-from,
+  .#{$prefix}drawer-leave-to {
     transform: translate3d(100%, 0px, 0px);
   }
 }
-.sf-mask.bottom,
-.sf-mask.full {
+.#{$prefix}mask.bottom,
+.#{$prefix}mask.full {
   justify-content: flex-end;
-  .sf-drawer {
+  .#{$prefix}drawer {
     border-left: unset;
     border-top: 1px solid var(--surface-border-color);
     width: 100%;
     height: 420px;
     align-self: end;
   }
-  .sf-drawer-enter-from,
-  .sf-drawer-leave-to {
+  .#{$prefix}drawer-enter-from,
+  .#{$prefix}drawer-leave-to {
     transform: translate3d(0px, var(--window-height), 0px);
   }
 }
 
-.sf-mask.bottom .sf-drawer {
+.mask.bottom .#{$prefix}drawer {
   @media screen and (max-height: 360px) {
     height: var(--window-height);
   }
@@ -94,6 +84,6 @@
   }
 }
 
-.sf-mask.full .sf-drawer {
+.mask.full .#{$prefix}drawer {
   height: var(--window-height);
 }

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

@@ -1,7 +1,7 @@
 @import "../variables";
 @import "../mixins";
 
-div.sf-icon {
+div.#{$prefix}icon {
   position: relative;
   display: inline-flex;
   align-items: center;
@@ -31,31 +31,31 @@ div.sf-icon {
     outline-offset: 0px;
   }
 
-  .sf-loading-circle {
+  .#{$prefix}loading-circle {
     svg {
       stroke: currentColor;
     }
   }
 
-  &.sf-icon-filled {
+  &.#{$prefix}icon-filled {
     button {
       font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0,
         "opsz" 48;
     }
   }
 
-  &.sf-icon-small {
+  &.#{$prefix}icon-small {
     min-width: 28px;
     > button {
       font-size: 20px;
     }
-    .sf-loading-circle {
+    .#{$prefix}loading-circle {
       width: 20px;
       height: 20px;
     }
   }
 
-  &.sf-icon-medium {
+  &.#{$prefix}icon-medium {
     min-width: 37px;
     > button {
       font-size: 24px;
@@ -66,13 +66,13 @@ div.sf-icon {
         right: 6px;
       }
     }
-    .sf-loading-circle {
+    .#{$prefix}loading-circle {
       width: 24px;
       height: 24px;
     }
   }
 
-  &.sf-icon-large {
+  &.#{$prefix}icon-large {
     min-width: 48px;
     > button {
       font-size: 36px;
@@ -83,36 +83,33 @@ div.sf-icon {
         right: 6px;
       }
     }
-    .sf-loading-circle {
+    .#{$prefix}loading-circle {
       width: 28px;
       height: 28px;
     }
   }
 
-  &.sf-icon-button {
+  &.#{$prefix}icon-button {
     border-radius: 50%;
     transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1)
       0ms;
-    &.sf-icon-small {
+    &.#{$prefix}icon-small {
       padding: 4px;
     }
-    &.sf-icon-medium {
+    &.#{$prefix}icon-medium {
       padding: 6px;
     }
-    &.sf-icon-large {
+    &.#{$prefix}icon-large {
       padding: 8px;
     }
     @media (pointer: fine) {
-      &:hover,
-      &:focus-visible {
-        cursor: pointer;
-        background-color: $icon-hover-color;
-      }
+      cursor: pointer;
+      @include icon-button-hover-colors;
     }
   }
 
-  &.sf-component-loading,
-  &.sf-component-disabled {
+  &.#{$prefix}component-loading,
+  &.#{$prefix}component-disabled {
     > button + span {
       display: none;
     }

package/src/style/src/components/_layout.scss

@@ -22,7 +22,6 @@
     }
 
     #sf-theme-toggle svg,
-    .sf-internal-icon-button svg,
     .sf-svg-icon {
       fill: #fff !important;
     }
@@ -52,10 +51,6 @@
       }
     }
 
-    @media screen and (max-width: 579px) {
-      padding: 0 8px;
-    }
-
     > .title {
       padding: 0 16px;
       font-size: 1.25rem;
@@ -64,18 +59,6 @@
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
-      > .name {
-        display: none;
-        @media screen and (min-width: $sm) {
-          display: unset;
-        }
-      }
-      > .shortname {
-        display: none;
-        @media screen and (max-width: $sm) {
-          display: unset;
-        }
-      }
     }
   }
 
@@ -127,22 +110,19 @@
 
     &.menu-visible {
       padding-left: 290px;
-
-      @media screen and (max-width: $sm) {
-        padding-left: 0;
-      }
     }
   }
 
   nav {
+    --nav-width: min(100vw, 290px);
     z-index: 5;
     position: absolute;
-    top: 0;
-    height: var(--window-height);
+    top: var(--header-height);
+    height: calc(var(--window-height) - var(--header-height));
     background-color: var(--surface-100-color);
-    width: 100vw;
+    width: var(--nav-width);
     border-right: 1px solid var(--surface-border-color);
-    transform: translateX(-100vw);
+    transform: translateX(calc(-1 * var(--nav-width)));
     transition-property: transform;
     display: flex;
     flex-direction: column;
@@ -152,32 +132,10 @@
       transform: translateX(0);
     }
 
-    > .sf-layout-nav-header {
-      height: var(--header-height);
-      border-bottom: 1px solid var(--surface-border-color);
-      background-color: var(--surface-100-color);
-      display: flex;
-      align-items: center;
-      padding: 0 16px;
-      > span {
-        flex-grow: 1;
-      }
-    }
-
     > .sf-layout-nav-content {
       height: 100%;
       overflow: auto;
       border-bottom: 1px solid var(--surface-border-color);
     }
-
-    @media screen and (min-width: #{$sm + 1}) {
-      top: unset;
-      height: calc(100vh - var(--header-height));
-      width: 290px;
-      transform: translateX(-290px);
-      > .sf-layout-nav-header {
-        display: none;
-      }
-    }
   }
 }

package/src/style/src/components/_mask.scss

@@ -0,0 +1,35 @@
+@import "../variables";
+
+.#{$prefix}mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  pointer-events: none;
+}
+
+.#{$prefix}mask-overlay-enter {
+  pointer-events: auto;
+  animation: #{$prefix}mask-overlay-enter-animation 250ms forwards;
+}
+.#{$prefix}mask-overlay-leave {
+  animation: #{$prefix}mask-overlay-leave-animation 250ms forwards;
+}
+@keyframes #{$prefix}mask-overlay-enter-animation {
+  from {
+    background-color: transparent;
+  }
+  to {
+    background-color: var(--maskbg-color);
+  }
+}
+@keyframes #{$prefix}mask-overlay-leave-animation {
+  from {
+    background-color: var(--maskbg-color);
+  }
+  to {
+    background-color: transparent;
+  }
+}

package/src/style/src/components/_themetoggle.scss

@@ -1,8 +1,35 @@
 @import "../mixins";
 
 html {
-  #sf-theme-toggle {
-    @include sf-internal-icon-button;
+  ##{$prefix}theme-toggle {
+    isolation: isolate;
+    display: flex;
+    align-items: center;
+    background: none;
+    border: none;
+    padding: 8px;
+    position: relative;
+    border-radius: 50%;
+    @media (pointer: fine) {
+      &:hover {
+        cursor: pointer;
+        background-color: hsla(
+          var(--primary-color-h),
+          var(--primary-color-s),
+          var(--primary-color-l),
+          0.1
+        );
+      }
+      &:focus-visible {
+        outline-offset: 0px;
+      }
+    }
+
+    svg {
+      height: 24px;
+      width: 24px;
+      fill: var(--text-color);
+    }
 
     .toggle-circle {
       transition: transform 500ms ease-out;
@@ -16,7 +43,7 @@ html {
     }
   }
 
-  &.dark #sf-theme-toggle {
+  &.dark ##{$prefix}theme-toggle {
     .toggle-circle,
     .toggle-sun {
       transform: unset;

package/src/style/src/sweetalert/scss/_core.scss

@@ -14,10 +14,9 @@
     "top-start     top            top-end"
     "center-start  center         center-end"
     "bottom-start  bottom-center  bottom-end";
-  grid-template-rows: minmax(min-content, auto) minmax(
-      min-content,
-      auto
-    ) minmax(min-content, auto);
+  grid-template-rows:
+    minmax(min-content, auto) minmax(min-content, auto)
+    minmax(min-content, auto);
   height: 100%; // Safari
   padding: $swal2-container-padding;
   overflow-x: hidden;
@@ -393,7 +392,7 @@
 
   &.swal2-inputerror {
     border-color: $swal2-error !important;
-    background-color: alpha(--error, 0.1);
+    background-color: var(--error-hover-color);
   }
 
   &:focus {
@@ -403,7 +402,7 @@
   }
 
   &::placeholder {
-    color: alpha(--text, 0.8);
+    color: var(--secondary-color);
   }
 }
 
@@ -584,8 +583,8 @@ $icon-zoom: math.div(strip-units($swal2-icon-size), 5);
   }
 
   &.swal2-warning {
-    border-color: alpha(--warn, 0.7);
-    background-color: alpha(--warn, 0.1);
+    border-color: var(--warn-color);
+    background-color: var(--warn-hover-color);
     color: $swal2-warning;
 
     // Warning icon animation
@@ -601,8 +600,8 @@ $icon-zoom: math.div(strip-units($swal2-icon-size), 5);
   }
 
   &.swal2-info {
-    border-color: alpha(--info, 0.7);
-    background-color: alpha(--info, 0.1);
+    border-color: var(--info-color);
+    background-color: var(--info-hover-color);
     color: $swal2-info;
 
     // Info icon animation
@@ -618,8 +617,8 @@ $icon-zoom: math.div(strip-units($swal2-icon-size), 5);
   }
 
   &.swal2-question {
-    border-color: alpha(--help, 0.7);
-    background-color: alpha(--help, 0.1);
+    border-color: var(--help-color);
+    background-color: var(--help-hover-color);
     color: $swal2-question;
 
     // Question icon animation
@@ -635,8 +634,8 @@ $icon-zoom: math.div(strip-units($swal2-icon-size), 5);
   }
 
   &.swal2-success {
-    border-color: alpha(--success, 0.7);
-    background-color: alpha(--success, 0.1);
+    border-color: var(--success-color);
+    background-color: var(--success-hover-color);
     color: $swal2-success;
 
     [class^="swal2-success-circular-line"] {