@policystudio/policy-studio-ui-vue 1.1.88 → 1.1.90-access.0

package/src/assets/scss/base.scss

@@ -35,6 +35,9 @@
 @import './components/PsBarChart.scss';
 @import './components/PsSimpleAlert.scss';
 @import './components/PsBreadcrumb.scss';
+@import './components/PsCollapse.scss';
+
+
 @import "tailwindcss/base";
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";
@@ -67,35 +70,5 @@ html {
   -webkit-font-smoothing: antialiased;
 }
 
-.psui-card {
-  @apply .psui-w-full .psui-bg-white .psui-rounded-lg .psui-px-6 .psui-py-4 .psui-shadow-elevation-5;
-
-  &-header {
-    @apply .psui-flex .psui-items-center .psui-justify-between .psui-mb-4;
-
-    h4 {
-      @apply .psui-text-h6 .psui-font-bold .psui-text-gray-80;
-    }
-  }
-}
-
-.psui-show-childrens-on-hover {
-  &:hover {
-    * {
-      opacity: 1 !important;
-    }
-  }
 
-  &.absolute-childrens {
-    @apply psui-relative;
-
-    .helper {
-      @apply psui-absolute psui-top-0;
-      right: -18px;
-    }
-  }
-}
 
-.psui-transition {
-  @apply psui-transition-all psui-ease-in-out psui-duration-150;
-}

package/src/assets/scss/components/PsAccordion.scss

@@ -8,7 +8,7 @@
       &.disabled {
         .psui-el-accordion-item-header {
           .psui-el-accordion-item-header-wrapper {
-           @apply psui-text-gray-50 pointer-events-none;
+           @apply psui-text-gray-50 psui-pointer-events-none;
 
           }
         }
@@ -101,7 +101,7 @@
       overflow: hidden;
     }
 
-    .accordion-fade-enter,
+    .accordion-fade-enter-from,
     .accordion-fade-leave-to {
       height: 0 !important;
       margin-bottom: 0 !important;

package/src/assets/scss/components/PsButton.scss

@@ -16,6 +16,12 @@
       outline: none;
     }
 
+    &:focus-visible {
+        outline: 2px solid #2563EB;
+        outline-offset: 2px;       
+        border-radius: 6px;        
+      }
+
     &.icon-right {
       @apply psui-flex-row-reverse;
     }
@@ -135,7 +141,7 @@
     }
 
     &.layout-onlytext {
-      @apply psui-bg-white psui-text-blue-60;
+      @apply  psui-text-blue-60;
 
       &.disabled {
         @apply psui-text-gray-40 psui-cursor-default

package/src/assets/scss/components/PsChips.scss

@@ -1,4 +1,4 @@
-@layer components{
+@layer components {
 
   .psui-el-chips {
     @apply psui-inline-flex psui-relative;
@@ -19,7 +19,15 @@
         &:checked {
           + label {
             @apply psui-text-blue-60 psui-bg-blue-20;
-  
+
+            &.layout-disabled {
+              @apply psui-bg-gray-20 psui-text-gray-40 psui-cursor-default; 
+
+              &:before {
+                @apply psui-text-gray-30 psui-cursor-default; 
+              }
+            }
+
             &:before {
               @apply psui-text-blue-50;
             }
@@ -82,8 +90,6 @@
     }
 
     &.type-button {
-
-
       label {
         @apply psui-flex psui-items-center psui-justify-center psui-text-gray-60 psui-transition-all psui-cursor-pointer psui-rounded psui-py-1 psui-px-3 psui-text-small;
         background-color: #F6F7F8;
@@ -99,7 +105,6 @@
         &.checked {
           @apply psui-text-blue-60 psui-bg-blue-20;
         }
-  
       }
 
       &.layout-with-icon {
@@ -126,7 +131,7 @@
 
             &,
             .psui-el-chips-close {
-              @apply .psui-text-gray-50;
+              @apply psui-text-gray-50;
             }
 
             .psui-el-chips-icon-prepend {
@@ -140,7 +145,7 @@
 
             &,
             .psui-el-chips-close {
-              @apply .psui-text-blue-60;
+              @apply psui-text-blue-60;
             }
 
             .psui-el-chips-icon-prepend {

package/src/assets/scss/components/PsCollapse.scss

@@ -0,0 +1,71 @@
+@layer components {
+
+  .psui-el-collapse {
+    
+    .psui-el-collapse-item-content {
+      @apply psui-relative psui-pl-4;
+
+      &::before {
+        @apply psui-bg-gray-30 psui-ml-2;
+        content: "";
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 1px;
+        height: 100%;
+        transform: translateX(-50%);
+      }
+    }
+
+    
+
+    .psui-el-collapse-item-header {
+      @apply psui-flex psui-items-center psui-cursor-pointer;
+
+      .psui-el-collapse-item-icon {
+        @apply psui-text-gray-50 psui-transition-all;
+        transition-duration: 0.4s;
+        font-size: 16px;
+      }
+
+      .psui-el-collapse-item-header-wrapper {
+        @apply psui-flex psui-items-center psui-py-2 psui-text-small psui-w-full;
+  
+        .psui-el-collapse-item-title {
+          @apply psui-ml-1 psui-text-gray-70 hover:psui-text-blue-60;
+
+          &.disabled {
+            @apply psui-text-gray-50;
+          }      
+  
+        }
+
+        .psui-el-collapse-item-header-action {
+          @apply psui-invisible psui-ml-auto psui-text-gray-70 hover:psui-text-blue-60;
+        }
+      }
+
+      &:hover {
+        .psui-el-collapse-item-header-wrapper {
+          .psui-el-collapse-item-header-action {
+            @apply psui-visible;
+          }
+        }
+      }
+    }
+
+
+    .collapse-fade-enter-active,
+    .collapse-fade-leave-active {
+      will-change: height, margin-bottom;
+      transition: height 0.4s ease-in-out, margin-bottom 0.4s ease-in-out;
+      overflow: hidden;
+    }
+
+    .collapse-fade-enter-from,
+    .collapse-fade-leave-to {
+      height: 0 !important;
+      margin-bottom: 0 !important;
+    }
+  }
+}

package/src/assets/scss/components/PsCostEffectBar.scss

@@ -1,13 +1,13 @@
 @layer components {
   .psui-el-cost-effect-bar {
-    @apply .psui-overflow-visible;
+    @apply psui-overflow-visible;
 
     div {
-      @apply .psui-relative .psui-h-2 .psui-rounded-2xl;
+      @apply psui-relative psui-h-2 psui-rounded-2xl;
       width: 100px;
 
       span {
-        @apply .psui-absolute .psui-rounded-sm .psui-z-10; 
+        @apply psui-absolute psui-rounded-sm psui-z-10; 
         background-color: #d6dde5;
         width: 2px;
         height: 14px;
@@ -15,7 +15,7 @@
       }
 
       .psui-el-simple-progress-bar {
-        @apply .psui-overflow-hidden;
+        @apply psui-overflow-hidden;
 
         &-percentage {
           border-radius: unset;

package/src/assets/scss/components/PsDataTable.scss

@@ -58,7 +58,7 @@
         td,
         tr {
           padding: 7px 16px;
-          @apply .psui-text-gray-80;
+          @apply psui-text-gray-80;
         }
       }
     }

package/src/assets/scss/components/PsDateCardInfo.scss

@@ -1,13 +1,12 @@
 @layer components {
   .psui-el-date-card {
     @apply psui-flex psui-flex-col psui-bg-blue-60 psui-text-blue-20 psui-text-small psui-font-bold psui-text-center psui-overflow-hidden psui-rounded;
-    width: 61px;
 
-    &-month-day,
-    &-year {
-      @apply psui-py-1;
+    &-month-day, &-year {
+      @apply psui-text-small;
+      padding: 4px 8px;
     }
-
+   
     &-year {
       @apply psui-bg-blue-50 psui-w-full psui-font-bold;
     }

package/src/assets/scss/components/PsDialog.scss

@@ -79,5 +79,12 @@
         @apply psui-text-yellow-70;
       }
     }
+
+    &.theme-gray {
+      @apply psui-bg-gray-10 psui-text-gray-50;
+      .psui-el-dialog-message {
+        @apply psui-text-gray-70;
+      }
+    }
   }
 }

package/src/assets/scss/components/PsDropdownList.scss

@@ -3,7 +3,7 @@
     @apply psui-w-full psui-flex psui-flex-col psui-font-medium psui-my-4;
 
     .psui-el-dropdown-menu-list-item {
-      @apply psui-flex psui-items-end psui-justify-between psui-mx-0 psui-text-small psui-text-gray-60 psui-cursor-pointer psui-transition-all psui-show-childrens-on-hover;
+      @apply psui-flex psui-items-end psui-justify-between psui-mx-0 psui-text-small psui-text-gray-60 psui-cursor-pointer psui-transition-all;
       padding: 7px 20px;
 
       &-left-label {

package/src/assets/scss/components/PsInput.scss

@@ -1,6 +1,15 @@
 @layer components{
 
   .psui-el-input {
+    &:focus {
+        outline: none;
+      }
+
+    &:focus-visible {
+        outline: 2px solid #2563EB;
+        outline-offset: 2px;       
+        border-radius: 6px;        
+      }
     
     &-prepend {
       @apply psui-pl-2 psui-flex psui-items-center psui-pointer-events-none 

package/src/assets/scss/components/PsProgressBar.scss

@@ -1,10 +1,10 @@
 @layer components {
   .psui-el-progress-bar {
-    @apply .psui-relative .psui-h-2 .psui-rounded-full .psui-bg-red-10;
+    @apply psui-relative psui-h-2 psui-rounded-full psui-bg-red-10;
     width: 100px;
 
     &.is-breakeven {
-      @apply .psui-bg-blue-20;
+      @apply psui-bg-blue-20;
     }
 
     &-percentage {
@@ -16,13 +16,13 @@
     }
 
     &-divider {
-      @apply .psui-absolute .psui-rounded-full .psui-z-auto .psui-bg-gray-30;
+      @apply psui-absolute psui-rounded-full psui-z-auto psui-bg-gray-30;
       width: 2px; height: 14px;
       top: -3px;
     }
 
     &-value {
-      @apply .psui-h-2 .psui-rounded-tl-full .psui-rounded-bl-full;
+      @apply psui-h-2 psui-rounded-tl-full psui-rounded-bl-full;
     }
 
     @keyframes animate-stripes {

package/src/assets/scss/components/PsTabHeader.scss

@@ -6,7 +6,7 @@
     button {
       @apply transition-default psui-text-small;
       &.status-disabled {
-        @apply cursor-not-allowed;
+        @apply psui-cursor-not-allowed;
       }
 
       &:focus {
@@ -20,6 +20,61 @@
       }
     }
 
+    /*  Layout Policy Design  */
+      &.layout-policy-design {
+          button {
+            padding: 8px 2px 7px 0px;
+            margin-right: 8px;
+            @apply psui-flex psui-items-center psui-relative;
+            
+            &:not(:first-child) {
+              margin-left: 8px;
+            }
+             
+
+            &:after {
+              content: '';
+              @apply psui-transition-all psui-h-[3px] psui-block psui-w-full psui-absolute psui-bottom-0 psui-left-0 psui-opacity-0 psui-bg-blue-60;
+            }
+
+            &:hover {
+              > div {
+                @apply psui-text-gray-60;
+              }
+            }
+
+            &.status-active {
+              @apply psui-border-blue-60;
+
+              &:after {
+                @apply psui-opacity-100;
+              }
+
+               > div {
+                @apply psui-text-blue-60;
+               }
+
+               > span {
+                @apply psui-font-bold psui-text-gray-70;
+               }
+            }
+
+            > div {
+              @apply psui-text-gray-50 psui-mr-1;
+            }
+
+            > span {
+              line-height: 120%;
+              font-size: 14px;
+              @apply psui-text-gray-60 psui-font-bold;
+            }
+          }
+        }
+      
+
+
+    /* ----------------------------------------- */
+
     /* 	Layout Standard  */
     /* ----------------------------------------- */
       &.layout-standard {
@@ -91,7 +146,7 @@
           }
 
           &.status-active {
-            @apply psui-text-blue-60 psui-border-blue-50
+            @apply psui-text-blue-60 psui-border-blue-50;
           }
         }
       }

package/src/assets/scss/components/PsTableResults.scss

@@ -1,15 +1,30 @@
 @layer components{
   .psui-el-table-results-wrapper {
-    @apply psui-w-full psui-whitespace-no-wrap psui-flex psui-overflow-auto;
+    @apply psui-w-full psui-whitespace-nowrap psui-flex psui-overflow-auto;
 
     &.table-flexible {
-      @apply psui-pr-4 psui-pb-2;
+      @apply psui-pr-4;
     }
   }
 
   .psui-el-table-results {
     @apply psui-relative psui-align-top psui-w-full psui-max-w-full psui-text-p;
 
+    .is-warning-column {
+      padding-right: 12px;
+    }
+
+    .warning-svg-position {
+      position: absolute;
+      right: calc(-1rem + 15px);
+      top: 4px;
+      .psui-el-tooltip-trigger {
+        margin-right: calc(0.313rem + 1px);
+        margin-bottom: 0.125rem;
+        margin-left: -0.094rem;
+      }
+    }
+
     &.layout-results {
       tr {
         th, td {
@@ -358,13 +373,11 @@
   
         tr {
           .title {
-            @apply psui-text-small psui-font-bold psui-leading-4;
+            @apply psui-text-small psui-leading-4;
           }
 
           th {
             @apply psui-text-gray-50 psui-text-right psui-w-auto psui-align-top;
-            padding-top: 0.438rem;
-            padding-bottom: 0.625rem;
 
             .description {
               @apply psui-text-xsmall psui-font-normal;
@@ -408,12 +421,10 @@
               }
   
               > div {
-                @apply psui-flex psui-flex-row psui-border-b psui-border-gray-30;
-                padding-top: 0.5rem;
-                padding-bottom: 0.625rem;
+                @apply psui-flex psui-flex-row psui-border-b psui-border-gray-30 psui-py-2;
 
                  > .title {
-                  @apply psui-text-accentSmall psui-text-gray-60 psui-font-bold psui-uppercase;
+                  @apply psui-text-accentSmall psui-text-blue-80 psui-font-bold psui-uppercase;
 
                  }
               }
@@ -427,7 +438,18 @@
 
           &:not(:first-of-type) {
             th {
-              padding-left: 20px;
+              &:not(:first-of-type) {
+                 > div {
+                  > div {
+                    @apply psui-mx-auto;
+                  }
+                 }
+              }
+
+               > div {
+                @apply psui-border-b psui-border-gray-20 psui-pr-[20px];
+
+                }
 
               .title {
                 @apply psui-text-blue-80;
@@ -479,9 +501,9 @@
                 }
                }
             }
-          
           }
 
+
           &.is-disabled {
             td {
               &.hover-color {
@@ -491,14 +513,10 @@
               }
             }
           }
+
   
           td {
-            @apply psui-text-gray-70 psui-h-10 psui-text-right psui-text-small;
-            padding-top: 0.688rem;
-            padding-bottom: 0.688rem;
-            min-height: 41.5px;
-            padding-left: 20px;
-            
+            @apply psui-text-gray-70 psui-h-[32px] psui-text-right psui-text-small;            
 
             &.hover-color {
               background-color: #ECF7FB !important;
@@ -520,10 +538,7 @@
   
             &:first-child {
               @apply psui-pr-8 psui-text-left psui-block psui-sticky psui-z-10 psui-left-0;
-              padding-top: 8px;
-              padding-bottom: 8px;
               width: 352px;
-              padding-left: 0px;
             }
 
             &:nth-child(2) {
@@ -544,6 +559,10 @@
               }
             }
 
+            &:nth-child(n+3) {
+              padding-right: 20px;
+            }
+
             .psui-el-tooltip-dialog {
               text-align: left;
               max-width: 180px;
@@ -566,7 +585,7 @@
             }
 
             td {
-              @apply psui-h-auto psui-pt-2 psui-pb-0;
+              @apply psui-h-auto psui-py-1;
               min-height: 1rem;
             }
 
@@ -729,6 +748,18 @@
         }
       }
     }
+    .psui-show-childrens-on-hover:hover * {
+      opacity: 1!important
+    }
+  
+    .psui-show-childrens-on-hover.absolute-childrens {
+      position: relative
+    }
+  
+    .psui-show-childrens-on-hover.absolute-childrens .helper {
+      position: absolute;
+      top: 0;
+      right: -18px
+    }
   }
-
 }

package/src/assets/scss/components/PsTestimonialCard.scss

@@ -1,6 +1,6 @@
 @layer components {
   .psui-el-testimonial {
-    @apply psui-relative psui-bg-white psui-shadow-elevation-5 psui-flex psui-flex-col psui-rounded-lg w-full;
+    @apply psui-relative psui-bg-white psui-shadow-elevation-5 psui-flex psui-flex-col psui-rounded-lg psui-w-full;
     padding: 56px 42px 40px 32px;
 
     &-icon {