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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@policystudio/policy-studio-ui-vue",
-  "version": "1.0.28",
+  "version": "1.0.31",
   "description": "Policy Studio UI",
   "main": "src/index.js",
   "author": "Policy Studio Team",
@@ -12,11 +12,15 @@
   ],
   "scripts": {
     "lint": "vue-cli-service lint",
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook",
+    "build-storybook": "STORYBOOK_ENV=production build-storybook",
     "build-tailwind": "postcss src/assets/scss/base.scss -o dist/css/psui_styles.css",
-    "publish": "npm run lint && npm run build-tailwind && npm publish",
-    "dev": "watch 'npm run build-tailwind' ./src/assets"
+    "build-temp-tailwind": "postcss src/assets/scss/base.scss -o temp/css/psui_styles.css",
+    "publish": "npm run lint && npm run build-tailwind && build-storybook && npm publish",
+    "serve": "concurrently --kill-others \"npm run watch-storybook\" \"npm run watch-tailwind\"",
+    "watch-storybook": "start-storybook -p 6006",
+    "watch-prod-tailwind": "watch 'npm run build-tailwind' ./src/assets",
+    "watch-tailwind": "watch 'npm run build-temp-tailwind' ./src/assets",
+    "build-prop-intellisense": "vue-int --input src/components --output vetur --recursive"
   },
   "dependencies": {
     "core-js": "^3.6.5",
@@ -35,6 +39,7 @@
     "@vue/eslint-config-prettier": "^6.0.0",
     "babel-eslint": "^10.1.0",
     "babel-loader": "^8.2.3",
+    "concurrently": "^7.0.0",
     "eslint": "^6.7.2",
     "eslint-plugin-prettier": "^3.3.1",
     "eslint-plugin-vue": "^6.2.2",
@@ -44,8 +49,13 @@
     "postcss-nested": "^5.0.6",
     "prettier": "^2.2.1",
     "tailwindcss": "^1.9.6",
+    "vue-intellisense": "^1.0.1",
     "vue-loader": "^15.9.8",
     "vue-template-compiler": "^2.6.11",
     "watch": "^1.0.2"
+  },
+  "vetur": {
+    "tags": "vetur/tags.json",
+    "attributes": "vetur/attributes.json"
   }
 }

package/src/assets/scss/base.scss

@@ -13,16 +13,20 @@
 @import './components/PsDataTable.scss';
 @import './components/PsCheckbox.scss';
 @import './components/PsDialog.scss';
+@import './components/PsDotLoader.scss';
 @import './components/PsRadioButton.scss';
 @import './components/PsSwitch.scss';
 @import './components/PsProgressBar.scss';
 @import './components/PsDropdown.scss';
+@import './components/PsDropdownList.scss';
 @import './components/PsSlider.scss';
 @import './components/PsToast.scss';
+@import './components/PsMiniTag.scss';
 @import './components/PsInlineSelector.scss';
 @import './components/PsTooltip.scss';
 @import './components/PsInputTextArea.scss';
 @import './components/PsInputSelect.scss';
+@import './components/PsDraggable.scss';
 @import "tailwindcss/base";
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";

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

@@ -9,27 +9,25 @@
         @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 {
           @apply psui-text-blue-60;
         }
       }
 
-      &-content {
-        padding-bottom: 24px;
-      }
-
       &-icon {
+        @apply psui-icon;
         font-size: 20px;
         width: 20px;
-      }    
-      
+        transition: transform 0.4s ease-in-out;
+      }
+
     }
 
     &.layout-big {
       .psui-el-accordion-item {
         &-header, &-content {
-          padding-left: 16px;
-          padding-right: 16px;
+          @apply psui-pl-4 psui-pr-4;
         }
         &-title {
           @apply psui-text-h5 psui-font-bold;
@@ -46,8 +44,14 @@
           @apply psui-text-small psui-font-bold;
         }
         &-icon {
-          @apply psui-text-gray-60
-        }   
+          @apply psui-text-gray-60;
+        }
+        
+        &.status-opened {
+          .psui-el-accordion-item-icon {
+            transform: rotate(180deg);
+          }
+        }
       }
     }
 
@@ -60,8 +64,21 @@
       }
     }
 
+    .psui-el-accordion-item-content {
+      @apply psui-list-none psui-text-gray-60 psui-mb-5;
+    }
 
+    .accordion-fade-enter-active,
+    .accordion-fade-leave-active {
+      will-change: height, margin-bottom;
+      transition: height 0.4s ease, margin-bottom 0.4s ease-in-out;
+      overflow: hidden;
+    }
 
+    .accordion-fade-enter,
+    .accordion-fade-leave-to {
+      height: 0 !important;
+      margin-bottom: 0 !important;
+    }
   }
-
 }

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

@@ -2,7 +2,8 @@
 
   .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 psui-transition-all psui-ease-in-out;
+    transition-duration: 130ms;
 
     span {
       @apply psui-font-bold psui-flex-shrink-0;
@@ -22,22 +23,27 @@
     &.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-left {
+          padding: 8px 16px;
+          i {
+           font-size: 24px;
+           margin-right: 8px;
+          }
+        }
 
-      &.icon-right i {
-        font-size: 24px;
-        margin-left: 8px;
-      }
+        &.icon-right { 
+          padding: 8px 16px;     
+          i {
+              font-size: 24px;
+              margin-left: 8px;
+          }
+        }
     }
 
     &.size-medium {
       @apply psui-flex psui-items-center psui-content-center;
-      padding: 7px 16px;
+      padding: 7px 13px;
       font-size: 14px;
 
       &.icon-left i {
@@ -56,7 +62,7 @@
       font-size: 14px;
 
       &.layout-onlytext {
-        &:focus:not(.disabled) {
+        &:active:not(.disabled) {
           @apply psui-bg-blue-20 psui-text-blue-60;    
           box-shadow: inset 0px 1px 2px rgba(0,0,0,0.05);
         }    
@@ -82,14 +88,13 @@
     }
 
     &.layout-solid {
-        
       @apply psui-bg-blue-60 psui-text-white; 
 
       &.hover {
         @apply psui-bg-blue-50 psui-text-white;
       }
 
-      &:focus:not(.disabled) {
+      &:active:not(.disabled) {
         @apply psui-bg-blue-50 psui-text-white;
         box-shadow: inset 0px 1px 2px rgba(0,0,0,0.15);
       }
@@ -104,7 +109,7 @@
       background: transparent;
 
       &.hover,
-      &:focus {
+      &:active {
         @apply psui-border psui-border-blue-60
       }
 
@@ -116,9 +121,12 @@
     &.layout-ghost {
       @apply psui-bg-blue-20 psui-text-blue-60;
 
-      &.hover, 
-      &:focus:not(.disabled) {
-        box-shadow: inset 0px 1px 2px rgba(0,0,0,0.05);
+      &.hover {
+        @apply psui-bg-blue-10
+      } 
+
+      &:active:not(.disabled) {
+        box-shadow: inset 0px 1px 2px rgba(0,0,0,0.05)
       }
 
       &.disabled {
@@ -137,5 +145,18 @@
         @apply psui-text-blue-50
       }
     }
+
+    &.layout-caution {
+      @apply psui-bg-red-10 psui-text-red-20;
+
+      &.hover, 
+      &:active:not(.disabled) {
+        @apply psui-bg-red-10 psui-text-red-70;
+      }
+
+      &.disabled {
+        @apply psui-text-gray-40 psui-bg-gray-20 psui-cursor-default
+      }
+    }
   }
 }

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

@@ -8,7 +8,7 @@
     }
 
     &-content {
-      @apply psui-w-full psui-flex psui-justify-center psui-items-center psui-text-p;
+      @apply psui-w-full psui-flex psui-justify-end psui-items-center psui-text-p;
     }
 
     &-icon {

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

@@ -1,7 +1,7 @@
 @layer components {
         
         .psui-el-checkbox {
-            @apply psui-relative psui-text-gray-50;    
+            @apply psui-relative psui-text-gray-50 psui-bg-gray-10;    
         
         &.disabled {
             .psui-el-checkmark {
@@ -37,7 +37,7 @@
                 }
             }
             .psui-el-checkmark {
-                @apply psui-block psui-cursor-pointer;
+                @apply psui-flex psui-cursor-pointer psui-items-center;
                 height: 18px;
 
                 span {
@@ -46,7 +46,7 @@
 
                 &::before {
                     content:'check_box_outline_blank'; 
-                    @apply psui-text-gray-40 psui-align-text-bottom;
+                    @apply psui-text-gray-40;
                     font-family:'Material Icons Round';
                     font-size: 18px;
                 }
@@ -76,11 +76,10 @@
                 }
             }
             .psui-el-checkmark {
-                    @apply psui-flex psui-cursor-pointer psui-content-center;
+                    @apply psui-flex psui-cursor-pointer psui-items-center;
                     height: 24px;
                     
                     span {
-                        margin-top: 1px;
                         margin-left: 8px;
                     }
 

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

@@ -116,7 +116,11 @@
           @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-close {
+              @apply .psui-text-gray-50;
+            }
 
             .psui-el-chips-icon-prepend {
               @apply psui-bg-gray-40;
@@ -125,7 +129,12 @@
 
           &:focus,
           &:active {
-            @apply psui-bg-blue-20 psui-text-blue-60;
+            @apply psui-bg-blue-20;
+
+            &,
+            .psui-el-chips-close {
+              @apply .psui-text-blue-60;
+            }
 
             .psui-el-chips-icon-prepend {
               @apply psui-bg-blue-60;
@@ -137,16 +146,12 @@
           font-size: 18px;
 
           &-prepend {
-            @apply psui-bg-gray-30 psui-rounded-full psui-text-white psui-mr-2;
+            @apply psui-bg-gray-30 psui-rounded-full psui-text-white psui-mr-2 psui-w-6 psui-h-6 psui-flex psui-items-center psui-justify-center;
           }
         }
 
         .psui-el-chips-close {
-          @apply psui-text-gray-40 psui-flex psui-items-center psui-justify-center;
-
-          span {
-            @apply psui-ml-2;
-          }
+          @apply psui-text-gray-40 psui-flex psui-items-center psui-justify-center psui-ml-2;
         }
       }
     }

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

@@ -2,7 +2,7 @@
     .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;
+        padding: 0px 6px;
 
         &:hover {
             @apply psui-text-blue-60 psui-bg-blue-20;

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

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

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

@@ -1,7 +1,9 @@
 @layer components {
 
   .psui-el-dialog {
-    @apply psui-flex psui-justify-start psui-items-start psui-pr-3 psui-pl-2 psui-py-2 psui-rounded-md;
+    @apply psui-flex psui-justify-start psui-items-start psui-pr-3 psui-pl-2 psui-rounded-md;
+    padding-top: 8.8px;
+    padding-bottom: 8.8px;
 
     &-wrapper {
       @apply psui-flex psui-flex-grow
@@ -25,7 +27,8 @@
     }
 
     &.layout-vertical {
-      @apply psui-pr-2 psui-pl-2 psui-flex psui-items-start;
+      @apply psui-flex psui-items-start;
+      padding: 9.6px 9.6px 11.2px 9.6px;
 
       .psui-el-dialog-wrapper {
         @apply psui-flex-col psui-text-small

package/src/assets/scss/components/PsDotLoader.scss

@@ -0,0 +1,45 @@
+@layer components {
+
+    .psui-el-dotloader {
+        @apply psui-flex psui-items-center psui-justify-center psui-h-full;
+        padding: 0;
+
+        .psui-el-dotloader-wrapper {
+            @apply psui-relative psui-p-4 psui-flex;
+            height: 15px;
+            span {
+                @apply psui-rounded-full psui-relative psui-float-left psui-left-0 psui-top-0 psui-mr-1;
+                background: #b7b7b7;
+                height: 15px;
+                width: 15px;
+                opacity: 0.15;
+                transform: scale(1);
+                animation: dots-animation 1s 0.2s ease-in-out infinite;
+
+                &:nth-of-type(1) {
+                    animation-delay: 0.2s;
+                }
+
+                &:nth-of-type(2) {
+                    animation-delay: 0.4s;
+                }
+
+                &:nth-of-type(3) {
+                    animation-delay: 0.6s;
+                }      
+            }
+
+            @keyframes dots-animation {
+                0%, 70%, 100% {
+                    opacity: 0.15;
+                    transform: scale(1);
+                }
+
+                35% {
+                    opacity: 1;
+                    transform: scale(1);
+                }
+            }
+        }
+    }
+}

package/src/assets/scss/components/PsDraggable.scss

@@ -0,0 +1,64 @@
+@layer components {
+    .psui-el-draggable {
+        @apply psui-w-full psui-flex psui-flex-wrap psui-justify-start psui-gap-2;
+
+        .psui-el-draggable-wrapper {
+            @apply psui-w-full psui-rounded-lg psui-bg-gray-20 psui-p-2 psui-flex psui-items-center psui-flex-col;
+            padding: 8px 8px 0px 8px;
+                
+        }
+
+        .psui-el-draggable-title {
+            @apply psui-w-full psui-flex psui-rounded-sm psui-items-center psui-cursor-grab psui-align-middle;
+
+            &:active {
+                @apply psui-cursor-grabbing;
+            }            
+            
+            padding: 6px 16px;
+
+             h2 {
+                 @apply psui-w-full psui-text-gray-80 psui-font-bold psui-uppercase;
+                 font-size: 12px;
+             }
+
+             i {
+                 @apply psui-icon psui-text-gray-40;
+                 font-size: 18px;
+             }
+        }
+
+
+        .psui-el-draggable-list-items-wrapper {
+            @apply psui-w-full psui-flex psui-flex-wrap;
+
+            li {
+                @apply psui-w-full psui-mb-2 psui-shadow-elevation-5 psui-bg-white psui-rounded psui-flex psui-items-center;
+                padding: 7px 16px;
+
+                &:hover {
+                        @apply psui-text-gray-50 psui-cursor-grab
+                }
+
+                &:active {
+                        @apply psui-cursor-grabbing
+                }
+            }
+
+            .psui-el-draggable-item-wrapper {
+                @apply psui-select-none psui-w-full psui-flex psui-items-center
+            }
+
+            .psui-el-draggable-item-icon {
+                @apply psui-flex psui-justify-end psui-ml-auto;
+
+                i {
+                    @apply psui-icon psui-text-gray-30;
+                    font-size: 18px;
+
+
+                }
+            }
+        }
+    }
+}

package/src/assets/scss/components/PsDropdown.scss

@@ -1,19 +1,8 @@
 @layer components {
     .psui-el-dropdown-menu {
-        @apply psui-relative psui-inline-block psui-text-left psui-bg-white;
-        padding: 0px 20px;
-        width: 230px;
+        @apply psui-relative psui-inline-block psui-text-left;
 
-        &:hover {
-            @apply psui-cursor-pointer psui-bg-blue-10 psui-text-blue-60;
-            
-        }
-
-        &:first-child {
-
-        }
-
-        &-button {
+        button {
             @apply psui-inline-flex psui-justify-center psui-items-center psui-w-full psui-font-medium psui-leading-none;
             background-color: transparent;
             padding-top: 2.5px;
@@ -27,18 +16,12 @@
             }
         }
 
-        &-dialog {
-            @apply psui-hidden psui-origin-top-right psui-fixed psui-mt-2 psui-w-auto psui-rounded psui-shadow-lg psui-z-50 psui-opacity-0;
-            transition: opacity 150ms ease-in-out;
+        &-dialog-wrapper {
+            @apply psui-hidden psui-origin-top-right psui-py-4 psui-bg-white psui-fixed psui-w-auto psui-rounded-md psui-z-50 psui-opacity-0 psui-shadow-elevation-20 psui-transition-all psui-duration-100 psui-ease-in;
 
-            &-category-divider {
+            &-dialog {
                 @apply w-full;
-
-                h2 {
-                    @apply psui-text-gray-20 psui-font-bold psui-whitespace-no-wrap psui-mb-4;
-                }
             }
-
         }
     }
 }

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

@@ -0,0 +1,19 @@
+@layer components {
+    .psui-el-dropdown-menu-list {
+        @apply psui-w-full psui-font-bold;
+
+        li {
+            @apply psui-w-full psui-text-gray-60 psui-text-small psui-list-none psui-flex psui-flex-col psui-cursor-pointer;
+            padding: 7px 20px;
+            font-weight: 700;
+
+            &:hover {
+                @apply psui-text-blue-60
+            }
+
+            span {
+                @apply psui-w-full;
+            }
+        }
+    }
+}

package/src/assets/scss/components/PsHighlightRippleDot.scss

@@ -9,7 +9,7 @@
 
             &::before, &::after {
                 @apply psui-rounded-full psui-absolute psui-origin-center;
-                background-color: #def8e8;
+                background-color: rgba(93, 184, 131, 0.3);
                 border: solid 0px;
                 content: '';
                 width: 36px;