@policystudio/policy-studio-ui-vue 1.0.21 → 1.0.25

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@policystudio/policy-studio-ui-vue",
-  "version": "1.0.21",
+  "version": "1.0.25",
   "description": "Policy Studio UI",
   "main": "src/index.js",
   "author": "Policy Studio Team",
@@ -15,7 +15,8 @@
     "storybook": "start-storybook -p 6006",
     "build-storybook": "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"
+    "publish": "npm run lint && npm run build-tailwind && npm publish",
+    "dev": "watch 'npm run build-tailwind' ./src/assets"
   },
   "dependencies": {
     "core-js": "^3.6.5",
@@ -44,6 +45,7 @@
     "prettier": "^2.2.1",
     "tailwindcss": "^1.9.6",
     "vue-loader": "^15.9.8",
-    "vue-template-compiler": "^2.6.11"
+    "vue-template-compiler": "^2.6.11",
+    "watch": "^1.0.2"
   }
 }

package/src/assets/scss/base.scss

@@ -1,5 +1,9 @@
 @import url('https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Round');
+@import './components/PsTabHeader.scss';
+@import './components/PsAccordion.scss';
 @import './components/PsInput.scss';
+@import './components/PsButton.scss';
+@import './components//PsDialog.scss';
 @import "tailwindcss/base";
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";
@@ -11,3 +15,7 @@ html {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
+
+.transition-default {
+  transition: cubic-bezier(.17,.67,.83,.67) 250ms;
+}

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

@@ -0,0 +1,67 @@
+@layer components{
+
+  .psui-el-accordion {
+
+    &-item {
+      border-bottom: 1px solid #e6ecf2;      
+  
+      &-header {
+        @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 {
+        font-size: 20px;
+        width: 20px;
+      }    
+      
+    }
+
+    &.layout-big {
+      .psui-el-accordion-item {
+        &-header, &-content {
+          padding-left: 16px;
+          padding-right: 16px;
+        }
+        &-title {
+          @apply psui-text-h5 psui-font-bold;
+        }
+        &-icon {
+          @apply psui-text-gray-30
+        }        
+      }
+    }
+    
+    &.layout-medium {
+      .psui-el-accordion-item {
+        &-title {
+          @apply psui-text-small psui-font-bold;
+        }
+        &-icon {
+          @apply psui-text-gray-60
+        }   
+      }
+    }
+
+    .psui-el-accordion-item {
+      &.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

@@ -0,0 +1,147 @@
+@layer components {
+
+    .psui-el-button {
+
+        @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;
+        }
+
+        &.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;
+            }
+
+        }
+
+        &.size-medium {
+
+            @apply psui-flex psui-items-center psui-content-center;
+            padding: 7px 16px;
+            font-size: 14px;
+
+            &.icon-left i {
+                    font-size: 18px;
+                    margin-right: 4px;
+            }
+
+            &.icon-right i {
+                    font-size: 18px;
+                    margin-left: 4px;
+            }
+        }
+
+        &.size-small {
+
+            @apply psui-flex psui-items-center psui-content-center;
+            padding: 4px 8px;
+            font-size: 14px;
+
+            &:focus {
+                @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;
+                }      
+            }
+
+            &.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;
+            }
+
+            &:focus {
+                @apply psui-bg-blue-50 psui-text-white;
+                box-shadow: inset 0px 1px 2px rgba(0,0,0,0.15);
+            }
+
+            &.disabled {
+                @apply psui-text-gray-40 psui-bg-gray-20 psui-cursor-default
+            }                
+        }
+
+        &.layout-outline {
+
+            @apply psui-text-blue-60 psui-border psui-border-blue-50;
+            background: transparent;
+
+            &.hover,
+            &:focus {
+                @apply psui-border psui-border-blue-60
+            }
+
+            &.disabled {
+                @apply psui-text-gray-40 psui-border-gray-30 psui-cursor-default;
+            } 
+        }
+
+        &.layout-ghost {
+
+            @apply psui-bg-blue-20 psui-text-blue-60;
+
+            &.hover, 
+            &:focus {
+                box-shadow: inset 0px 1px 2px rgba(0,0,0,0.05);
+            }
+
+            &.disabled {
+                @apply psui-text-gray-40 psui-bg-gray-20 psui-cursor-default
+            }
+        }
+
+        &.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
+            }
+        }
+    }
+}

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

@@ -0,0 +1,71 @@
+@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;
+
+    &-wrapper {
+      @apply psui-flex psui-flex-grow
+    }
+    &-icon {
+      @apply psui-flex psui-mr-2 psui-align-top; 
+      
+    }
+    &-close {
+      @apply psui-ml-auto psui-inline-block;
+
+      &:focus{
+        @apply psui-outline-none
+      }
+
+      i {
+        @apply psui-align-middle;
+        font-size: 18px;
+      }
+
+    }
+
+    &.layout-vertical {
+      @apply psui-pr-2 psui-pl-2 psui-flex psui-items-start;
+
+      .psui-el-dialog-wrapper {
+        @apply psui-flex-col psui-text-small
+      }
+
+      i {
+        @apply psui-align-top
+      }
+
+      .psui-el-dialog-action {
+        @apply psui-pt-2
+      }
+    }
+    
+    &.layout-horizontal {
+      .psui-el-dialog-close {
+        @apply psui-ml-3
+      }
+      .psui-el-dialog-default {
+        @apply psui-mr-auto
+      }
+      .psui-el-dialog-action {
+        @apply psui-ml-3
+      }
+      .psui-el-dialog-wrapper {
+        @apply psui-text-small psui-py-1
+      }
+    }
+        
+
+    &.theme-informative {
+      @apply psui-bg-blue-20 psui-text-blue-60;    
+    }
+
+    &.theme-success {
+      @apply psui-bg-green-10 psui-text-green-70;
+    }
+
+    &.theme-alert {
+      @apply psui-bg-yellow-10 psui-text-yellow-70;
+    }
+  }
+}

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

@@ -2,27 +2,20 @@
 
   .psui-el-input {
     
-    input {
-      @apply psui-w-full psui-border psui-border-gray-30 psui-rounded-md psui-block
-    }
-
     &-prepend {
-      @apply psui-absolute psui-inset-y-0 psui-left-0 psui-pl-2 psui-flex psui-items-center psui-pointer-events-none
+      @apply psui-pl-2 psui-flex psui-items-center psui-pointer-events-none 
     }
 
     &-append {
-      @apply psui-absolute psui-inset-y-0 psui-right-0 psui-pr-2 psui-flex psui-items-center
+      @apply psui-pr-2 psui-flex psui-items-center
     }
 
     &-hint {
-      @apply psui-text-gray-50 psui-text-xsmall
+      @apply psui-text-gray-50 psui-text-xsmall psui-mt-1
     }
 
     &-wrapper {
-      @apply psui-relative;
-      &.hover input {
-        @apply psui-border-blue-50
-      }
+      @apply psui-relative psui-w-full psui-border psui-border-gray-30 psui-rounded-md psui-bg-white psui-flex transition-default
     }
 
     label {
@@ -30,9 +23,29 @@
     }
 
     input {
-      @apply psui-bg-white psui-text-gray-60          
+      @apply psui-bg-white psui-text-gray-60 psui-w-full psui-rounded-md   
+    }
+    
+    &.status-error {
+      .psui-el-input-wrapper {
+        @apply psui-border-red-20
+      }
+      .psui-el-input-hint  {
+        @apply psui-text-red-20
+      }
     }
 
+    &.status-disabled {
+      .psui-el-input-wrapper {
+        @apply psui-bg-gray-20 psui-border-gray-20
+      }
+      input {
+        @apply psui-bg-gray-20 psui-text-gray-40
+      }
+      label {
+        @apply psui-text-gray-40
+      }
+    }
     
     /* Layout Default */
     /* ----------------------------------------- */
@@ -44,32 +57,18 @@
           padding: 11.5px 16px;
         }          
 
+        &.status-resting {
+          .psui-el-input-wrapper.hover {
+            @apply psui-border-blue-50
+          }          
+        }
+
         &.status-active {
-          input {
+          .psui-el-input-wrapper {
             @apply psui-border-blue-60
           }
         }
-        
-        &.status-error {
-          input {
-            @apply psui-border-red-20
-          }
-          &-hint  {
-            @apply psui-text-red-20
-          }
-        }
-
-        &.status-disabled {
-
-          input {
-            @apply psui-bg-gray-20 psui-border-gray-20 psui-text-gray-40
-          }
-
-          label {
-            @apply psui-text-gray-40
-          }
 
-        }
       }
     /* ----------------------------------------- Layout Default */
     
@@ -81,6 +80,22 @@
           @apply psui-text-small;
           padding: 7px 8px;
         }
+        &.status-resting {
+          .psui-el-input-wrapper.hover {
+            @apply psui-border-green-20
+          }
+        }
+        &.status-active {
+          .psui-el-input-wrapper {
+            @apply psui-border-green-20;
+            input {
+              @apply psui-text-green-20;
+              &.focus {
+                @apply psui-text-gray-60
+              }
+            }
+          }
+        }
       }
     /* ----------------------------------------- Layout Mini */
     

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

@@ -0,0 +1,98 @@
+@layer components{
+
+  .psui-el-tab-header {
+    @apply psui-flex;
+
+    button {
+      @apply transition-default psui-text-small;
+    }
+
+    &.status-disabled {
+      .psui-el-input-wrapper {
+        @apply psui-bg-gray-20 psui-border-gray-20
+      }
+    }
+
+    /* 	Layout Standard  */
+    /* ----------------------------------------- */
+      &.layout-standard {
+        @apply psui-rounded-md;
+        
+        button {
+          @apply psui-bg-gray-10 psui-text-gray-60;
+          padding: 6px 12px;
+
+          &:not(:last-child) {
+            margin-right: 1px;
+          }
+
+          &:first-child {
+            @apply psui-rounded-l;
+          }
+
+          &:last-child {
+            @apply psui-rounded-r;
+          }
+
+          &:hover {
+            @apply psui-text-blue-60;
+          }
+
+          &.status-active {
+            @apply psui-text-white psui-bg-blue-60 psui-font-bold;
+          }
+        }
+      }
+    /* ----------------------------------------- 	Layout Standard */
+    
+    /* Layout Underline */
+    /* ----------------------------------------- */
+      &.layout-underline {
+        @apply psui-border-b psui-border-gray-20;
+
+        button {
+          @apply psui-text-gray-50 psui-font-bold;
+          border-bottom: 3px solid transparent;
+          padding: 11.5px 0;
+
+          &:not(:last-child) {
+            margin-right: 20px;
+          }
+
+          &:hover {
+            @apply psui-text-blue-60;
+          }
+
+          &.status-active {
+            @apply psui-text-blue-60 psui-border-blue-60;
+          }
+        }
+      }
+    /* ----------------------------------------- Layout Underline */
+    
+    
+    /* Layout Folder */
+    /* ----------------------------------------- */
+      &.layout-folder {
+        button {
+          @apply psui-bg-gray-10 psui-text-gray-50 psui-rounded-t;
+          padding: 9px 12px;
+
+          &:not(:last-child) {
+            margin-right: 4px;
+          }
+
+          &:hover {
+            @apply psui-text-gray-60;
+          }
+
+          &.status-active {
+            @apply psui-text-blue-60 psui-font-bold psui-bg-white;
+          }
+        }
+      }
+    /* ----------------------------------------- Layout Folder */
+    
+  }
+
+}

package/src/components/accordion/PsAccordion.vue

@@ -1,40 +1,44 @@
 <template>
-  <div :class="classes" class="accordion">
+  <div class="psui-el-accordion" :class="`layout-${layout}`">
     <slot></slot>
   </div>
 </template>
 
 <script>
-export const sizes = ['big', 'medium']
-
+export const layouts = ['big', 'medium']
+export const defaultIconsByLayout = {
+  big: { 
+    'iconOpened': 'remove',
+    'iconClosed': 'add'
+  },
+  medium: {
+    'iconOpened': 'expand_less',
+    'iconClosed': 'expand_more'
+  }
+}
 export default {
   name: 'PsAccordion',
   props: {
-    size: {
+    layout: {
       type: String,
       default: 'medium',
-      required: true,
+      validator: (value) => layouts.indexOf(value) !== -1,
     },
-  },
-  computed: {
-    classes() {
-      if (this.size === 'big') return 'big'
-      return 'medium'
+    'iconOpened': {
+      type: String,
     },
+    'iconClosed': {
+      type: String,
+    }
   },
+  computed: {
+    getIcons() {
+      return {
+        'iconOpened' : this.iconOpened ?? defaultIconsByLayout[this.layout].iconOpened,
+        'iconClosed' : this.iconClosed ?? defaultIconsByLayout[this.layout].iconClosed,
+      }
+    }
+  }
 }
 </script>
-<style scoped>
-.medium {
-  width: 390px;
-}
-
-.big {
-  width: 580px;
-}
-
- .accordion {
-   display: flex;
-   flex-direction: column;
- }
-</style>
+<style> /* Please, use the file src/assets/scss/components/PsAccordion.scss */</style>