@policystudio/policy-studio-ui-vue 1.0.24 → 1.0.28

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@policystudio/policy-studio-ui-vue",
-  "version": "1.0.24",
+  "version": "1.0.28",
   "description": "Policy Studio UI",
   "main": "src/index.js",
   "author": "Policy Studio Team",

package/src/assets/scss/base.scss

@@ -1,13 +1,34 @@
 @import url('https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Round');
+@import './components/PsChips.scss';
+@import './components/PsToggle.scss';
+@import './components/PsTabHeader.scss';
 @import './components/PsAccordion.scss';
 @import './components/PsInput.scss';
 @import './components/PsButton.scss';
+@import './components/PsCardInfos.scss';
+@import './components/PsChartLegend.scss';
+@import './components/PsClimateZoneBadge.scss';
+@import './components/PsCostEffectBar.scss';
+@import './components/PsHighlightRippleDot.scss';
+@import './components/PsDataTable.scss';
+@import './components/PsCheckbox.scss';
+@import './components/PsDialog.scss';
+@import './components/PsRadioButton.scss';
+@import './components/PsSwitch.scss';
+@import './components/PsProgressBar.scss';
+@import './components/PsDropdown.scss';
+@import './components/PsSlider.scss';
+@import './components/PsToast.scss';
+@import './components/PsInlineSelector.scss';
+@import './components/PsTooltip.scss';
+@import './components/PsInputTextArea.scss';
+@import './components/PsInputSelect.scss';
 @import "tailwindcss/base";
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";
 
 *:focus {
-    outline: none;
+  outline: none;
 }
 html {
   -webkit-font-smoothing: antialiased;
@@ -16,4 +37,20 @@ html {
 
 .transition-default {
   transition: cubic-bezier(.17,.67,.83,.67) 250ms;
-}
+}
+
+.psui-icon {
+  font-family: 'Material Icons Round';
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  -webkit-font-feature-settings: 'liga';
+  -webkit-font-smoothing: antialiased;
+}

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

@@ -6,7 +6,7 @@
       border-bottom: 1px solid #e6ecf2;      
   
       &-header {
-        @apply psui-flex psui-cursor-pointer psui-transition-all psui-justify-between transition-default;
+        @apply psui-flex psui-cursor-pointer psui-transition-all psui-justify-between transition-default psui-text-gray-80;
         padding-top: 16px;
         padding-bottom: 16px;
         &:hover {
@@ -45,11 +45,15 @@
         &-title {
           @apply psui-text-small psui-font-bold;
         }
+        &-icon {
+          @apply psui-text-gray-60
+        }   
       }
     }
 
     .psui-el-accordion-item {
-      &.status-opened, &-header:hover {
+      &.status-opened .psui-el-accordion-item-header, &-header:hover {
+        @apply psui-text-blue-60;
         .psui-el-accordion-item-icon {
           @apply psui-text-blue-60;
         }

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

@@ -1,145 +1,141 @@
 @layer components {
 
-    .psui-el-button {
+  .psui-el-button {
 
-        @apply psui-font-bold psui-items-center psui-flex psui-content-center psui-rounded-md transition-default;
+    @apply psui-font-bold psui-items-center psui-flex psui-content-center psui-rounded-md transition-default;
 
-        span {
-            @apply psui-font-bold;
-            line-height: 130%;
-            font-family: inherit;
-            text-align: right;
-        }
-
-        &:focus {
-            outline: none;
-        }
+    span {
+      @apply psui-font-bold psui-flex-shrink-0;
+      line-height: 130%;
+      font-family: inherit;
+      text-align: right;
+    }
 
-        &.right {
-            @apply psui-flex-row-reverse;
-        }
-        
-        &.big {
-            @apply psui-flex psui-items-center psui-content-center;
-            padding: 9.5px 16px;
-            font-size: 16px;
-            
-            &.left i {
-                font-size: 24px;
-                margin-right: 8px;
-            }
-
-            &.right i {
-                    font-size: 24px;
-                    margin-left: 8px;
-            }
+    &:focus {
+      outline: none;
+    }
 
-        }
+    &.icon-right {
+      @apply psui-flex-row-reverse;
+    }
+    
+    &.size-big {
+      @apply psui-flex psui-items-center psui-content-center;
+      padding: 9.5px 16px;
+      font-size: 16px;
+      
+      &.icon-left i {
+        font-size: 24px;
+        margin-right: 8px;
+      }
+
+      &.icon-right i {
+        font-size: 24px;
+        margin-left: 8px;
+      }
+    }
 
-        &.medium {
+    &.size-medium {
+      @apply psui-flex psui-items-center psui-content-center;
+      padding: 7px 16px;
+      font-size: 14px;
 
-            @apply psui-flex psui-items-center psui-content-center;
-            padding: 7px 16px;
-            font-size: 14px;
+      &.icon-left i {
+        font-size: 18px;
+        margin-right: 4px;
+      }
 
-            &.left i {
-                    font-size: 18px;
-                    margin-right: 4px;
-            }
+      &.icon-right i {
+        font-size: 18px;
+        margin-left: 4px;
+      }
+    }
 
-            &.right i {
-                    font-size: 18px;
-                    margin-left: 4px;
-            }
+    &.size-small {
+      @apply psui-flex psui-items-center psui-justify-center psui-rounded psui-py-1 psui-px-2;
+      font-size: 14px;
+
+      &.layout-onlytext {
+        &:focus:not(.disabled) {
+          @apply psui-bg-blue-20 psui-text-blue-60;    
+          box-shadow: inset 0px 1px 2px rgba(0,0,0,0.05);
+        }    
+      }
+
+      &.hover.layout-onlytext {
+        @apply psui-text-blue-60 psui-bg-blue-20 !important;
+      }
+
+      &.icon-left {
+        i {
+          font-size: 18px;
+          margin-right: 4px;
         }
+      }
 
-        &.small {
-
-            @apply psui-flex psui-items-center psui-content-center;
-            padding: 4px 8px;
-            font-size: 14px;
-
-            &.active {
-                @apply psui-bg-blue-20 psui-text-blue-60;
-                box-shadow: inset 0px 1px 2px rgba(0,0,0,0.05);
-            }
-
-            &.hover.layout-onlytext {
-                @apply psui-text-blue-60 psui-bg-blue-20 !important;
-            }
-
-            &.left {
-                i {
-                    font-size: 18px;
-                    margin-right: 4px;
-                }      
-            }
-
-            &.right {
-                i {
-                    font-size: 18px;
-                    margin-left: 4px;
-                }  
-            }
-
+      &.icon-right {
+        i {
+          font-size: 18px;
+          margin-left: 4px;
         }
+      }
+    }
 
-        &.layout-solid {
-            
-            @apply psui-bg-blue-60 psui-text-white; 
-
-            &.hover {
-                @apply psui-bg-blue-50 psui-text-white;
-            }
+    &.layout-solid {
+        
+      @apply psui-bg-blue-60 psui-text-white; 
 
-            &.active {
-                @apply psui-bg-blue-50 psui-text-white;
-                box-shadow: inset 0px 1px 2px rgba(0,0,0,0.15);
-            }
+      &.hover {
+        @apply psui-bg-blue-50 psui-text-white;
+      }
 
-            &.disabled {
-                @apply psui-text-gray-40 psui-bg-gray-20 psui-cursor-default
-            }                
-        }
+      &:focus:not(.disabled) {
+        @apply psui-bg-blue-50 psui-text-white;
+        box-shadow: inset 0px 1px 2px rgba(0,0,0,0.15);
+      }
 
-        &.layout-outline {
+      &.disabled {
+        @apply psui-text-gray-40 psui-bg-gray-20 psui-cursor-default
+      }                
+    }
 
-            @apply psui-text-blue-60 psui-border psui-border-blue-50;
-            background: transparent;
+    &.layout-outline {
+      @apply psui-text-blue-60 psui-border psui-border-blue-50;
+      background: transparent;
 
-            &.hover,
-            &.active {
-                @apply psui-border psui-border-blue-60
-            }
+      &.hover,
+      &:focus {
+        @apply psui-border psui-border-blue-60
+      }
 
-            &.disabled {
-                @apply psui-text-gray-40 psui-border-gray-30 psui-cursor-default;
-            } 
-        }
+      &.disabled {
+        @apply psui-text-gray-40 psui-border-gray-30 psui-cursor-default;
+      } 
+    }
 
-        &.layout-ghost {
+    &.layout-ghost {
+      @apply psui-bg-blue-20 psui-text-blue-60;
 
-            @apply psui-bg-blue-20 psui-text-blue-60;
-            &.hover,
-            &.active {
-                @apply psui-bg-blue-10
-            }
-            &.disabled {
-                @apply psui-text-gray-40 psui-bg-gray-20 psui-cursor-default
-            }
-        }
+      &.hover, 
+      &:focus:not(.disabled) {
+        box-shadow: inset 0px 1px 2px rgba(0,0,0,0.05);
+      }
 
-        &.layout-onlytext {
+      &.disabled {
+        @apply psui-text-gray-40 psui-bg-gray-20 psui-cursor-default
+      }
+    }
 
-            @apply psui-bg-white psui-text-blue-60;
+    &.layout-onlytext {
+      @apply psui-bg-white psui-text-blue-60;
 
-            &.disabled {
-                @apply psui-text-gray-40 psui-cursor-default
-            }
-            
-            &.hover {
-                @apply psui-text-blue-50
-            }
-        }
+      &.disabled {
+        @apply psui-text-gray-40 psui-cursor-default
+      }
+      
+      &.hover {
+        @apply psui-text-blue-50
+      }
     }
+  }
 }

package/src/assets/scss/components/PsCardInfos.scss

@@ -0,0 +1,26 @@
+@layer components{
+
+  .psui-el-card-infos {
+    @apply psui-border psui-border-gray-20 psui-rounded-md psui-flex psui-flex-col psui-items-center psui-justify-center psui-px-3 psui-py-2 psui-cursor-pointer;
+
+    &-title {
+      @apply psui-text-xsmall psui-font-bold psui-text-gray-40 psui-mb-1;
+    }
+
+    &-content {
+      @apply psui-w-full psui-flex psui-justify-center psui-items-center psui-text-p;
+    }
+
+    &-icon {
+      @apply psui-text-blue-50 psui-mr-1;
+      font-size: 17px;
+    }
+
+    &:hover {
+      .psui-el-card-infos-icon {
+        @apply psui-text-blue-60;
+      }
+    }
+  }
+
+}

package/src/assets/scss/components/PsChartLegend.scss

@@ -0,0 +1,25 @@
+@layer components{
+
+  .psui-el-chart-legend {
+    @apply psui-flex psui-p-2 psui-rounded;
+
+    &-dot {
+      @apply psui-bg-teal psui-rounded-full;
+      width: 14px; height: 14px;
+      margin-right: 6px;
+    }
+
+    &-text {
+      @apply psui-text-xsmall psui-text-gray-50 psui-font-bold;
+    }
+
+    &-total {
+      @apply psui-text-p psui-text-gray-80 psui-mt-1;
+    }
+
+    &-percentage {
+      @apply psui-text-gray-50;
+    }
+  }
+
+}

package/src/assets/scss/components/PsCheckbox.scss

@@ -0,0 +1,96 @@
+@layer components {
+        
+        .psui-el-checkbox {
+            @apply psui-relative psui-text-gray-50;    
+        
+        &.disabled {
+            .psui-el-checkmark {
+                @apply psui-cursor-default psui-text-gray-40 !important
+            }
+
+            .psui-el-checkmark::before {
+                @apply psui-text-gray-30 !important
+            }
+        }
+
+        &.size-small {
+            @apply psui-text-small;
+            
+            &.layout-default {
+                input:checked ~.psui-el-checkmark::before {
+                    content: 'check_box';
+                    font-family: 'Material Icons Round';
+                }
+            }
+            &.layout-mixed {
+                input:checked ~.psui-el-checkmark::before {
+                    content: 'indeterminate_check_box';
+                    font-family: 'Material Icons Round';
+                }
+            }
+            input {
+                @apply psui-absolute psui-opacity-0 psui-h-0 psui-w-0;
+    
+                &:checked ~ .psui-el-checkmark::before {
+                    @apply psui-text-blue-50;
+                    font-size: 18px;
+                }
+            }
+            .psui-el-checkmark {
+                @apply psui-block psui-cursor-pointer;
+                height: 18px;
+
+                span {
+                    margin-left: 8px;
+                }
+
+                &::before {
+                    content:'check_box_outline_blank'; 
+                    @apply psui-text-gray-40 psui-align-text-bottom;
+                    font-family:'Material Icons Round';
+                    font-size: 18px;
+                }
+            }            
+        }    
+        &.size-big {
+            @apply psui-text-big;
+
+            &.layout-mixed {
+                input:checked ~.psui-el-checkmark::before {
+                    content: 'indeterminate_check_box';
+                    font-family: 'Material Icons Round';
+                }
+            }
+            &.layout-default {
+                input:checked ~.psui-el-checkmark::before {
+                    content: 'check_box';
+                    font-family: 'Material Icons Round';
+                }
+            }
+            input {
+                @apply psui-absolute psui-opacity-0 psui-h-0 psui-w-0;
+    
+                &:checked ~ .psui-el-checkmark:before {
+                    @apply psui-text-blue-50;
+                    font-size: 24px;
+                }
+            }
+            .psui-el-checkmark {
+                    @apply psui-flex psui-cursor-pointer psui-content-center;
+                    height: 24px;
+                    
+                    span {
+                        margin-top: 1px;
+                        margin-left: 8px;
+                    }
+
+                &:before {
+                    content:'check_box_outline_blank'; 
+                    @apply psui-text-gray-40 psui-align-text-bottom;
+                    font-family:'Material Icons Round';
+                    font-size: 24px;
+                }
+            }
+        }   
+    }
+}

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

@@ -0,0 +1,155 @@
+@layer components{
+
+  .psui-el-chips {
+    @apply psui-inline-flex psui-relative;
+
+    &-icon {
+      @apply psui-icon;
+    }
+
+    &.type-checkbox,
+    &.type-radio {
+      font-size: 14px;
+      @apply psui-leading-none;
+
+      input {
+        @apply psui-absolute psui-pointer-events-none psui-invisible;
+        clip: rect(0,0,0,0);
+
+        &:checked {
+          + label {
+            @apply psui-text-blue-60 psui-bg-blue-20;
+  
+            &:before {
+              @apply psui-text-blue-50;
+            }
+          }
+        }
+      }
+
+      label {
+        @apply psui-flex psui-items-center psui-justify-center psui-text-gray-50 psui-bg-white psui-transition-all psui-cursor-pointer psui-rounded;
+        padding: 4px 8px 4px 6px;
+  
+        &:before {
+          @apply psui-inline-block psui-text-gray-30 psui-cursor-pointer psui-transition-all;
+          content: '';
+          font-family: 'Material Icons Round';
+          font-size: 18px;
+          margin-right: 6px;
+        }
+
+        &:hover {
+          @apply psui-text-blue-60;
+          &:before {
+            @apply psui-text-blue-50;
+          }
+        }
+      }
+    }
+
+    &.type-checkbox {
+      input:checked {
+        + label {
+          
+          &:before {
+            content: "check_box";
+          }
+        }
+      }
+  
+      label {
+        &:before {
+          content: "check_box_outline_blank";
+        }
+      }
+    }
+
+    &.type-radio {
+      input:checked {
+        + label {
+          &:before {
+            content: "radio_button_checked";
+          }
+        }
+      }
+      
+      label {
+        &:before {
+          content: "radio_button_unchecked";
+        }
+      }
+    }
+
+    &.type-button {
+      label {
+        @apply psui-flex psui-items-center psui-justify-center psui-text-gray-60 psui-bg-gray-10 psui-transition-all psui-cursor-pointer psui-rounded psui-py-1 psui-px-3 psui-text-small;
+
+        &:hover {
+          @apply psui-text-blue-60 psui-bg-white;
+        }
+
+        &:focus,
+        &:active {
+          @apply psui-text-blue-60 psui-bg-blue-20;
+        }
+      }
+
+      &.layout-with-icon {
+        label {
+          @apply psui-flex psui-items-center psui-justify-center psui-text-gray-50 psui-rounded-full;
+          padding: 6px 12px;
+  
+          &:hover {
+            @apply psui-text-blue-60 psui-bg-blue-10;
+          }
+        }
+
+        .psui-el-chips-icon {
+          @apply psui-icon psui-mr-2;
+          font-size: 20px;
+        }
+      }
+
+      &.layout-rich {
+        label {
+          @apply psui-rounded-full psui-bg-gray-10 psui-text-gray-40 psui-text-xsmall psui-font-bold psui-pl-1 psui-py-1 psui-pr-2;
+  
+          &:hover {
+            @apply psui-text-gray-50;
+
+            .psui-el-chips-icon-prepend {
+              @apply psui-bg-gray-40;
+            }
+          }
+
+          &:focus,
+          &:active {
+            @apply psui-bg-blue-20 psui-text-blue-60;
+
+            .psui-el-chips-icon-prepend {
+              @apply psui-bg-blue-60;
+            }
+          }
+        }
+
+        .psui-el-chips-icon {
+          font-size: 18px;
+
+          &-prepend {
+            @apply psui-bg-gray-30 psui-rounded-full psui-text-white psui-mr-2;
+          }
+        }
+
+        .psui-el-chips-close {
+          @apply psui-text-gray-40 psui-flex psui-items-center psui-justify-center;
+
+          span {
+            @apply psui-ml-2;
+          }
+        }
+      }
+    }
+  }
+
+}

package/src/assets/scss/components/PsClimateZoneBadge.scss

@@ -0,0 +1,26 @@
+@layer components {
+    .psui-el-climate-zone-badge {
+        @apply psui-flex psui-bg-gray-10 psui-text-gray-50 psui-transition-all psui-duration-300 psui-ease-out psui-rounded psui-items-center;
+        width: fit-content;
+        padding: 4px 6px;
+
+        &:hover {
+            @apply psui-text-blue-60 psui-bg-blue-20;
+        }
+
+        i {
+            font-family: 'Material Icons Round';
+            font-style: normal;
+            margin-right: 4px;
+            font-size: 16px;
+        }
+
+        span {
+            @apply psui-font-bold psui-inline-block psui-self-end;
+            font-size: 12px;
+            line-height: 120%;
+            margin-bottom: 3.5px;
+        }
+
+    }
+}