@policystudio/policy-studio-ui-vue 1.0.30 → 1.0.33

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@policystudio/policy-studio-ui-vue",
-  "version": "1.0.30",
+  "version": "1.0.33",
   "description": "Policy Studio UI",
   "main": "src/index.js",
   "author": "Policy Studio Team",
@@ -12,11 +12,16 @@
   ],
   "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\"",
+    "serve-prod": "concurrently --kill-others \"npm run watch-storybook\" \"npm run watch-prod-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 +40,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 +50,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/postcss.config.js

@@ -1,7 +1,7 @@
 module.exports = {
   plugins: {
     'postcss-nested': {},
-    "postcss-import": {},
+    'postcss-import': {},
     tailwindcss: {},
     autoprefixer: {},
   },

package/src/assets/images/multifamily-units.svg

@@ -0,0 +1,10 @@
+<svg width="39" height="38" viewBox="0 0 39 38" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0)">
+<path d="M18.2274 34.9462V30.9159M18.2274 34.9462H3.12439V30.9159H4.56681M18.2274 34.9462H21.1123H23.8274M34.3911 10.2129V34.9462H31.3789H28.6214M34.3911 10.2129L35.7911 10.8068V7.74167L18.2274 1.61667V4.27349M34.3911 10.2129L18.2274 4.27349M16.2759 11.6129L4.56681 16.7498M18.2274 7.74167L3.12439 14.6833V17.3826L4.56681 16.7498M18.2274 7.74167V30.9159M18.2274 7.74167V4.27349M8.34257 30.9159V25.7826H14.4941V30.9159M8.34257 30.9159H14.4941M8.34257 30.9159H4.56681M14.4941 30.9159H18.2274M4.56681 30.9159V16.7498M23.8274 34.9462V27.3947H28.6214V34.9462M23.8274 34.9462H28.6214M8.34257 18.825L12.5001 17.0432H14.4941V22.4735H8.34257V18.825ZM21.1123 18.4432H24.5062V23.7886H21.1123V18.4432ZM27.985 18.4432H31.3789V23.7886H27.985V18.4432ZM21.1123 15.1341H24.5062V9.70379L21.1123 8.34621V15.1341ZM27.985 15.1341H31.3789V12.1644L27.985 10.8068V15.1341Z" stroke="#A9AEB0" stroke-width="1.4" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0">
+<rect width="37.3333" height="37.3333" fill="white" transform="translate(0.791016 0.333344)"/>
+</clipPath>
+</defs>
+</svg>

package/src/assets/scss/base.scss

@@ -18,6 +18,7 @@
 @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';
@@ -25,6 +26,7 @@
 @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;
@@ -42,7 +43,7 @@
 
     &.size-medium {
       @apply psui-flex psui-items-center psui-content-center;
-      padding: 7px 16px;
+      padding: 7px 13px;
       font-size: 14px;
 
       &.icon-left i {
@@ -120,9 +121,12 @@
     &.layout-ghost {
       @apply psui-bg-blue-20 psui-text-blue-60;
 
-      &.hover, 
+      &.hover {
+        @apply psui-bg-blue-10
+      } 
+
       &:active:not(.disabled) {
-        box-shadow: inset 0px 1px 2px rgba(0,0,0,0.05);
+        box-shadow: inset 0px 1px 2px rgba(0,0,0,0.05)
       }
 
       &.disabled {
@@ -141,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

@@ -28,7 +28,7 @@
       }
 
       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;
+        @apply psui-flex psui-items-center psui-justify-center psui-text-gray-50 psui-bg-gray-10 psui-transition-all psui-cursor-pointer psui-rounded;
         padding: 4px 8px 4px 6px;
   
         &:before {
@@ -40,7 +40,7 @@
         }
 
         &:hover {
-          @apply psui-text-blue-60;
+          @apply psui-text-blue-60 psui-bg-gray-10;
           &:before {
             @apply psui-text-blue-50;
           }
@@ -83,8 +83,8 @@
 
     &.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;
-
+        @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;
         &:hover {
           @apply psui-text-blue-60 psui-bg-white;
         }
@@ -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/PsDataTable.scss

@@ -45,6 +45,23 @@
         border-bottom: 0; 
       }
     }
+
+    &-rich {
+      thead {
+        th {
+          padding: 15px 16px;
+        }
+      }
+
+      tbody {
+        th,
+        td,
+        tr {
+          padding: 7px 16px;
+          @apply .psui-text-gray-80;
+        }
+      }
+    }
   }
 
 }

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/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,25 +1,15 @@
 @layer components {
     .psui-el-dropdown-menu {
-        @apply psui-relative psui-inline-block psui-text-left psui-bg-white;
-        padding: 0px 20px;
-        width: 230px;
-
-        &:hover {
-            @apply psui-cursor-pointer psui-bg-blue-10 psui-text-blue-60;
-            
-        }
-
-        &:first-child {
-
-        }
-
-        &-button {
+        @apply psui-relative psui-inline-block psui-text-left;
+        
+        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;
             padding-bottom: 2.5px;
             min-height: 27px;
             font-size: 0.875rem;
+            
 
             &:focus {
                 outline: none;
@@ -27,18 +17,13 @@
             }
         }
 
-        &-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;
-
-            &-category-divider {
-                @apply w-full;
+        &-dialog-wrapper {
+            @apply psui-hidden psui-origin-top-right 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;
+            
+            &-dialog {
+                @apply psui-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 psui-my-3;
+
+        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 psui-bg-blue-10;
+            }
+
+            span {
+                @apply psui-w-full;
+            }
+        }
+    }
+}

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

@@ -11,15 +11,20 @@
     }
 
     &-hint {
-      @apply psui-text-gray-50 psui-text-xsmall psui-mt-1
+      @apply psui-text-gray-50 psui-mt-1;
+      font-size: 12px;
+      line-height: 24px;
     }
 
     &-wrapper {
-      @apply psui-relative psui-w-full psui-border psui-border-gray-30 psui-rounded-md psui-bg-white psui-flex transition-default
+      @apply psui-relative psui-w-full psui-border psui-border-gray-30 psui-rounded-md psui-bg-white psui-flex;
+      transition: ease 130ms;
     }
 
     label {
-      @apply psui-font-bold psui-text-gray-80
+      @apply psui-font-bold psui-text-gray-80;
+      line-height: 32px;
+      
     }
 
     input {

package/src/assets/scss/components/PsInputSelect.scss

@@ -1,6 +1,7 @@
 @layer components {
     .psui-el-input-select {
         @apply psui-w-full psui-flex psui-flex-col psui-relative psui-text-gray-40 psui-box-border;
+        transition: ease 130ms;
 
         &.disabled {
             @apply psui-pointer-events-none;
@@ -31,7 +32,7 @@
                 content: 'arrow_drop_down';
                 font-family: 'Material Icons Round';
                 font-size: 24px;
-                top: 26px;
+                top: 38px;
                 right: 15px;
                 z-index: -20;
             }
@@ -54,13 +55,15 @@
 
 
         label {
-            @apply psui-flex psui-text-gray-80 psui-text-big psui-items-center psui-w-full psui-font-bold psui-pointer-events-none
+            @apply psui-flex psui-text-gray-80 psui-items-center psui-w-full psui-font-bold psui-pointer-events-none;
+            font-size: 16px;
+            line-height: 32px;
         }
 
         .psui-el-input-helper {
             @apply psui-text-gray-50;
             font-size: 12px;
-            line-height: 120%;
+            line-height: 24px;
         }
 
         &.layout-mini {

package/src/assets/scss/components/PsInputTextArea.scss

@@ -19,9 +19,12 @@
 
         .psui-el-input-textarea-wrapper {
             @apply psui-flex psui-flex-col;
+            transition: ease 130ms;
 
             label {
-                @apply psui-h-full psui-flex psui-items-center psui-font-bold psui-text-big psui-py-1
+                @apply psui-h-full psui-flex psui-items-center psui-font-bold psui-text-big psui-py-1;
+                font-size: 16px;
+                line-height: 32px;
             }
 
             textarea {
@@ -42,7 +45,7 @@
         .psui-el-input-textarea-message {
             @apply psui-text-gray-50 psui-flex psui-font-normal;
             font-size: 12px;
-            line-height: 120%;
+            line-height: 24px;
             padding: 5px 0px;    
         }
     }

package/src/assets/scss/components/PsRadioButton.scss

@@ -1,7 +1,7 @@
 @layer components {
 
         .psui-el-radio {
-            @apply psui-relative psui-text-gray-50;
+            @apply psui-relative psui-text-gray-50 psui-flex psui-bg-gray-10;
 
             &.disabled {
                 .psui-el-checkmark {
@@ -28,7 +28,7 @@
                 }
 
                 .psui-el-checkmark {
-                    @apply psui-block psui-cursor-pointer;
+                    @apply psui-cursor-pointer psui-flex psui-items-center;
                     height: 18px;
 
                     span {
@@ -37,7 +37,7 @@
 
                     &::before {
                         content: 'radio_button_unchecked';
-                        @apply psui-text-gray-40 psui-align-text-bottom;
+                        @apply psui-text-gray-40;
                         font-family: 'Material Icons Round';
                         font-size: 18px;
                     }
@@ -59,7 +59,7 @@
                 }
 
                 .psui-el-checkmark {
-                    @apply psui-block psui-cursor-pointer;
+                    @apply psui-cursor-pointer psui-flex psui-items-center;
                     height: 24px;
 
                     span {
@@ -68,7 +68,7 @@
 
                     &::before {
                         content: 'radio_button_unchecked';
-                        @apply psui-text-gray-40 psui-align-text-bottom;
+                        @apply psui-text-gray-40;
                         font-family: 'Material Icons Round';
                         font-size: 24px;
                     }