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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@policystudio/policy-studio-ui-vue",
-  "version": "1.0.30",
+  "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

@@ -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

@@ -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/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,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/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;
                     }

package/src/assets/scss/components/PsSwitch.scss

@@ -12,7 +12,7 @@
                 .psui-el-switch-button {
                      &.toggle-false{   
                         &::before {
-                            @apply psui-absolute psui-h-3 psui-w-3 psui-bg-white psui-rounded-full psui-transition-all psui-ease-in-out psui-duration-500 psui-shadow-elevation-20;
+                            @apply psui-absolute psui-h-3 psui-w-3 psui-bg-white psui-rounded-full psui-transition-all psui-ease-in-out psui-duration-300 psui-shadow-elevation-20;
                             box-shadow: 0 0 98px 6px rgba(0, 0, 0, 0.2);
                             left: 2px;
                             top: 2px;
@@ -24,7 +24,7 @@
                         @apply psui-bg-green-20;
     
                         &::before {
-                            @apply psui-absolute psui-h-3 psui-w-3 psui-bg-white psui-rounded-full psui-transition-all psui-ease-in-out psui-duration-500 psui-shadow-elevation-20;
+                            @apply psui-absolute psui-h-3 psui-w-3 psui-bg-white psui-rounded-full psui-transition-all psui-ease-in-out psui-duration-300 psui-shadow-elevation-20;
                             box-shadow: 0 0 98px 6px rgba(0, 0, 0, 0.2);
                             left: 16px;
                             top: 2px;
@@ -44,7 +44,7 @@
                 
                  &.toggle-false{   
                     &::before {
-                        @apply psui-absolute psui-h-5 psui-w-5 psui-bg-white psui-rounded-full psui-transition-all psui-ease-in-out psui-duration-500 psui-shadow-elevation-20;
+                        @apply psui-absolute psui-h-5 psui-w-5 psui-bg-white psui-rounded-full psui-transition-all psui-ease-in-out psui-duration-300 psui-shadow-elevation-20;
                         left: 2px;
                         top: 2px;
                         content: '';
@@ -55,7 +55,7 @@
                     @apply psui-bg-green-20;
 
                     &::before {
-                        @apply psui-absolute psui-h-5 psui-w-5 psui-bg-white psui-rounded-full psui-transition-all psui-ease-in-out psui-duration-500 psui-shadow-elevation-20;
+                        @apply psui-absolute psui-h-5 psui-w-5 psui-bg-white psui-rounded-full psui-transition-all psui-ease-in-out psui-duration-300 psui-shadow-elevation-20;
                         left: 24px;
                         top:2px;
                         content: '';

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

@@ -8,6 +8,10 @@
       &.status-disabled {
         @apply cursor-not-allowed
       }
+
+      &:focus {
+        outline: none;
+      }
     }
 
     &.status-disabled {
@@ -24,6 +28,7 @@
         button {
           @apply psui-bg-gray-10 psui-text-gray-60;
           padding: 6px 12px;
+          box-shadow: inset 0px 0px 8px rgba(40, 50, 59, 0.05);
 
           &:not(:last-child) {
             margin-right: 1px;
@@ -39,6 +44,7 @@
 
           &:hover {
             @apply psui-text-blue-60;
+            box-shadow: inset 0px 0px 8px rgba(40, 50, 59, 0.05);
           }
 
           &.status-active {
@@ -62,6 +68,10 @@
           border-bottom: 3px solid transparent;
           padding: 11.5px 0;
 
+          &:hover {
+            @apply psui-text-blue-60;
+          }
+
           &:not(:last-child) {
             margin-right: 20px;
           }
@@ -85,6 +95,10 @@
           @apply psui-bg-gray-10 psui-text-gray-50 psui-rounded-t;
           padding: 9px 12px;
 
+          &:hover {
+            @apply psui-text-blue-60;
+          }
+
           &:not(:last-child) {
             margin-right: 4px;
           }

package/src/assets/scss/components/PsToast.scss

@@ -1,6 +1,6 @@
 @layer components {
     .psui-el-toast {
-        @apply psui-flex psui-items-center psui-text-big psui-text-white psui-py-3 psui-px-4 psui-rounded-md psui-font-bold;    
+        @apply psui-flex psui-items-center psui-text-big psui-text-white psui-py-3 psui-px-4 psui-rounded-md psui-font-bold psui-shadow-elevation-20;    
 
         .psui-el-toast-icon {
             @apply psui-flex psui-mr-4;
@@ -12,7 +12,7 @@
         }
 
         .psui-el-toast-actions {
-            @apply psui-flex psui-gap-4
+            @apply psui-flex psui-gap-4 psui-text-accentSmall;            
         }
 
         &.fill-intense.layout{
@@ -35,7 +35,7 @@
         
         &.fill-soft.layout {
             &-info {
-                @apply psui-text-blue-60 psui-bg-blue-20
+                @apply psui-text-blue-60 psui-bg-blue-20;
             }
             
             &-success {