@policystudio/policy-studio-ui-vue 1.0.45 → 1.0.46

package/dist/css/psui_styles.css

@@ -17186,13 +17186,13 @@ html {
   display: flex;
   flex-wrap: wrap;
   justify-content: flex-start;
-  grid-gap: 0.5rem;
-  gap: 0.5rem;
+  grid-row-gap: 1rem;
+  row-gap: 1rem;
 }
 
 .psui-el-draggable .psui-el-draggable-wrapper {
     width: 100%;
-    border-radius: 0.5rem;
+    border-radius: 0.375rem;
     --bg-opacity: 1;
     background-color: #E6ECF2;
     background-color: rgba(230, 236, 242, var(--bg-opacity));
@@ -17200,56 +17200,83 @@ html {
     display: flex;
     align-items: center;
     flex-direction: column;
-    padding: 8px 8px 0px 8px;
+    padding: 8px;
   }
 
-.psui-el-draggable .psui-el-draggable-title {
+.psui-el-draggable .psui-el-draggable-wrapper-title {
+      width: 100%;
+      display: flex;
+      border-radius: 0.125rem;
+      align-items: center;
+      justify-content: space-between;
+      cursor: -webkit-grab;
+      cursor: grab;
+      margin-bottom: 0.5rem;
+      padding: 8px 16px;
+    }
+
+.psui-el-draggable .psui-el-draggable-wrapper-title p {
+        font-size: 12px;
+        line-height: 130%;
+        --text-opacity: 1;
+        color: #28323B;
+        color: rgba(40, 50, 59, var(--text-opacity));
+        font-weight: 700;
+        text-transform: uppercase;
+        letter-spacing: 0.6px;
+      }
+
+.psui-el-draggable .psui-el-draggable-wrapper-title i {
+        --text-opacity: 1;
+        color: #A2ACB7;
+        color: rgba(162, 172, 183, var(--text-opacity));
+        font-size: 18px;
+      }
+
+.psui-el-draggable .psui-el-draggable-wrapper-list {
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      grid-row-gap: 0.5rem;
+      row-gap: 0.5rem;
+    }
+
+.psui-el-draggable .psui-el-draggable-item {
     width: 100%;
     display: flex;
     border-radius: 0.125rem;
+    background-color: #ffffff;
     align-items: center;
     cursor: -webkit-grab;
     cursor: grab;
-    vertical-align: middle;
+    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.03), 0px 1px 2px rgba(0, 0, 0, 0.1);
+    padding: 7px 16px;
   }
 
-.psui-el-draggable .psui-el-draggable-title:active {
-      cursor: -webkit-grabbing;
-      cursor: grabbing;
-    }
-
-.psui-el-draggable .psui-el-draggable-title{
-    padding: 6px 16px;
-}
-
-.psui-el-draggable .psui-el-draggable-title h2 {
-      width: 100%;
+.psui-el-draggable .psui-el-draggable-item-title {
       --text-opacity: 1;
-      color: #28323B;
-      color: rgba(40, 50, 59, var(--text-opacity));
+      color: #515E6A;
+      color: rgba(81, 94, 106, var(--text-opacity));
+      font-size: 14px;
+      line-height: 130%;
       font-weight: 700;
-      text-transform: uppercase;
-      font-size: 12px;
     }
 
-.psui-el-draggable .psui-el-draggable-title i {
-      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;
+.psui-el-draggable .psui-el-draggable-item-append {
+      display: flex;
       --text-opacity: 1;
-      color: #A2ACB7;
-      color: rgba(162, 172, 183, var(--text-opacity));
-      font-size: 18px;
+      color: #D6DDE5;
+      color: rgba(214, 221, 229, var(--text-opacity));
+      margin-left: auto;
+    }
+
+.psui-el-draggable .psui-el-draggable-item-append i {
+        font-size: 18px;
+      }
+
+.psui-el-draggable .psui-el-draggable-item:active {
+      cursor: -webkit-grabbing;
+      cursor: grabbing;
     }
 
 .psui-el-draggable .psui-el-draggable-list-items-wrapper {
@@ -18018,7 +18045,7 @@ html {
 
 .psui-el-mini-tag {
   display: flex;
-  border-radius: 9999px;
+  border-radius: 0.5rem;
   align-items: center;
   justify-content: center;
   flex-direction: row;
@@ -18027,7 +18054,7 @@ html {
   width: fit-content;
 }
 
-.psui-el-mini-tag div {
+.psui-el-mini-tag span {
     width: 100%;
     font-weight: 700;
     padding: 1px 8px 0px 8px;
@@ -18035,6 +18062,13 @@ html {
     letter-spacing: 0.5px;
   }
 
+.psui-el-mini-tag-layout-solid-info{
+      --bg-opacity: 1;
+      background-color: #64B5CE;
+      background-color: rgba(100, 181, 206, var(--bg-opacity));
+      color: #ffffff
+    }
+
 .psui-el-mini-tag-layout-info {
       --bg-opacity: 1;
       background-color: #E0EFF6;
@@ -18044,6 +18078,13 @@ html {
       color: rgba(49, 143, 172, var(--text-opacity))
     }
 
+.psui-el-mini-tag-layout-solid-success {
+      --bg-opacity: 1;
+      background-color: #5DB883;
+      background-color: rgba(93, 184, 131, var(--bg-opacity));
+      color: #ffffff
+    }
+
 .psui-el-mini-tag-layout-success {
       --bg-opacity: 1;
       background-color: #DEF8E8;
@@ -18053,6 +18094,13 @@ html {
       color: rgba(68, 160, 106, var(--text-opacity))
     }
 
+.psui-el-mini-tag-layout-solid-warning {
+      --bg-opacity: 1;
+      background-color: #EDAB3E;
+      background-color: rgba(237, 171, 62, var(--bg-opacity));
+      color: #ffffff
+    }
+
 .psui-el-mini-tag-layout-warning {
       --bg-opacity: 1;
       background-color: #FDF3E3;
@@ -18062,6 +18110,13 @@ html {
       color: rgba(184, 115, 5, var(--text-opacity))
     }
 
+.psui-el-mini-tag-layout-solid-error {
+      --bg-opacity: 1;
+      background-color: #D65C5A;
+      background-color: rgba(214, 92, 90, var(--bg-opacity));
+      color: #ffffff
+    }
+
 .psui-el-mini-tag-layout-error {
       --bg-opacity: 1;
       background-color: #FCEBEB;
@@ -18071,6 +18126,13 @@ html {
       color: rgba(214, 92, 90, var(--text-opacity))
     }
 
+.psui-el-mini-tag-layout-solid-default {
+      --bg-opacity: 1;
+      background-color: #A2ACB7;
+      background-color: rgba(162, 172, 183, var(--bg-opacity));
+      color: #ffffff
+    }
+
 .psui-el-mini-tag-layout-default {
       --bg-opacity: 1;
       background-color: #E6ECF2;
@@ -18775,7 +18837,7 @@ html {
       display: flex;
       cursor: pointer;
       align-items: center;
-      height: 100%;
+      min-height: 18px;
     }
 
 .psui-el-checkbox.size-small .psui-el-checkmark span {
@@ -18824,7 +18886,7 @@ html {
       display: flex;
       cursor: pointer;
       align-items: center;
-      height: 100%;
+      min-height: 24px;
     }
 
 .psui-el-checkbox.size-big .psui-el-checkmark span {
@@ -20012,7 +20074,7 @@ html {
     color: rgba(121, 132, 144, var(--text-opacity));
     margin-top: 0.25rem;
     font-size: 12px;
-    line-height: 24px;
+    line-height: 15.6px;
   }
 
 .psui-el-input-wrapper {

package/package.json

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

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

@@ -1,95 +1,97 @@
 @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-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
-            }
+      .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;
 
-        &.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-flex psui-cursor-pointer psui-items-center;
-                height: 100%;
+        &:checked ~ .psui-el-checkmark::before {
+          @apply psui-text-blue-50;
+          font-size: 18px;
+        }
+      }
+      .psui-el-checkmark {
+        @apply psui-flex psui-cursor-pointer psui-items-center;
+        min-height: 18px;
 
-                span {
-                    margin-left: 8px;
-                }
+        span {
+          margin-left: 8px;
+        }
 
-                &::before {
-                    content:'check_box_outline_blank'; 
-                    @apply psui-text-gray-40;
-                    font-family:'Material Icons Round';
-                    font-size: 18px;
-                }
-            }            
-        }    
-        &.size-big {
-            @apply psui-text-big;
+        &::before {
+          content:'check_box_outline_blank'; 
+          @apply psui-text-gray-40;
+          font-family:'Material Icons Round';
+          font-size: 18px;
+        }
+      }            
+    }
 
-            &.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-items-center;
-                    height: 100%;
-                    
-                    span {
-                        margin-left: 8px;
-                    }
+    &.size-big {
+      @apply psui-text-big;
 
-                &:before {
-                    content:'check_box_outline_blank'; 
-                    @apply psui-text-gray-40 psui-align-text-bottom;
-                    font-family:'Material Icons Round';
-                    font-size: 24px;
-                }
-            }
-        }   
+      &.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-items-center;
+        min-height: 24px;
+        
+        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: 24px;
+        }
+      }
     }
+  }
 }

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

@@ -1,64 +1,81 @@
 @layer components {
-    .psui-el-draggable {
-        @apply psui-w-full psui-flex psui-flex-wrap psui-justify-start psui-gap-2;
+  .psui-el-draggable {
+    @apply psui-w-full psui-flex psui-flex-wrap psui-justify-start psui-gap-y-4;
 
-        .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-wrapper {
+      @apply psui-w-full psui-rounded-md psui-bg-gray-20 psui-p-2 psui-flex psui-items-center psui-flex-col;
+      padding: 8px;
+
+      &-title {
+        @apply psui-w-full psui-flex psui-rounded-sm psui-items-center psui-justify-between psui-cursor-grab psui-mb-2;
+        padding: 8px 16px;
+      
+        p {
+          @apply psui-text-accentSmall psui-text-gray-80 psui-font-bold psui-uppercase;
+          letter-spacing: 0.6px;
+        }
+  
+        i {
+          @apply psui-text-gray-40;
+          font-size: 18px;
         }
+      }
 
-        .psui-el-draggable-title {
-            @apply psui-w-full psui-flex psui-rounded-sm psui-items-center psui-cursor-grab psui-align-middle;
+      &-list {
+        @apply psui-w-full psui-flex psui-flex-col psui-gap-y-2;
+      }
+    }
 
-            &:active {
-                @apply psui-cursor-grabbing;
-            }            
-            
-            padding: 6px 16px;
+    .psui-el-draggable-item {
+      @apply psui-w-full psui-flex psui-rounded-sm psui-bg-white psui-items-center psui-cursor-grab psui-shadow-elevation-5;
+      padding: 7px 16px;
 
-             h2 {
-                 @apply psui-w-full psui-text-gray-80 psui-font-bold psui-uppercase;
-                 font-size: 12px;
-             }
+      &-title {
+        @apply psui-text-gray-60 psui-text-small psui-font-bold;
+      }
 
-             i {
-                 @apply psui-icon psui-text-gray-40;
-                 font-size: 18px;
-             }
-        }
+      &-append {
+        @apply psui-flex psui-text-gray-30 psui-ml-auto;
 
+        i {
+          font-size: 18px;
+        }
+      }
 
-        .psui-el-draggable-list-items-wrapper {
-            @apply psui-w-full psui-flex psui-flex-wrap;
+      &:active {
+        @apply psui-cursor-grabbing;
+      }
+    }
 
-            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
-                }
+    .psui-el-draggable-list-items-wrapper {
+      @apply psui-w-full psui-flex psui-flex-wrap;
 
-                &:active {
-                        @apply psui-cursor-grabbing
-                }
-            }
+      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;
 
-            .psui-el-draggable-item-wrapper {
-                @apply psui-select-none psui-w-full psui-flex psui-items-center
-            }
+        &:hover {
+          @apply psui-text-gray-50 psui-cursor-grab
+        }
 
-            .psui-el-draggable-item-icon {
-                @apply psui-flex psui-justify-end psui-ml-auto;
+        &:active {
+          @apply psui-cursor-grabbing
+        }
+      }
 
-                i {
-                    @apply psui-icon psui-text-gray-30;
-                    font-size: 18px;
+      .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/PsInput.scss

@@ -13,7 +13,7 @@
     &-hint {
       @apply psui-text-gray-50 psui-mt-1;
       font-size: 12px;
-      line-height: 24px;
+      line-height: 15.6px;
     }
 
     &-wrapper {

package/src/assets/scss/components/PsMiniTag.scss

@@ -1,10 +1,10 @@
 @layer components {
     .psui-el-mini-tag {
-        @apply psui-flex psui-rounded-full psui-items-center psui-justify-center psui-flex-row;
+        @apply psui-flex psui-rounded-lg psui-items-center psui-justify-center psui-flex-row;
         width: fit-content;
 
 
-        div {
+        span {
             @apply psui-w-full psui-font-bold;
             padding: 1px 8px 0px 8px;
             font-size: 10px;
@@ -12,22 +12,42 @@
         }
 
         &-layout{
+            &-solid-info{
+                @apply psui-bg-blue-50 psui-text-white
+            }
+
             &-info {
                 @apply psui-bg-blue-20 psui-text-blue-60
             }
+
+            &-solid-success {
+                @apply psui-bg-green-20 psui-text-white
+            }
             
             &-success {
                 @apply psui-bg-green-10 psui-text-green-70
             }
 
+            &-solid-warning {
+                @apply psui-bg-yellow-20 psui-text-white
+            }
+
             &-warning {
                 @apply psui-bg-yellow-10 psui-text-yellow-70
             }
 
+            &-solid-error {
+                @apply psui-bg-red-20 psui-text-white
+            }
+
             &-error {
                 @apply psui-bg-red-10 psui-text-red-20
             }
 
+            &-solid-default {
+                @apply psui-bg-gray-40 psui-text-white
+            }
+
             &-default {
                 @apply psui-bg-gray-20 psui-text-gray-50
             }

package/src/components/badges-and-tags/PsMiniTag.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="psui-el-mini-tag" :class="getComponentClass">
-    <div>{{ message }}</div>
+  <div class="psui-el-mini-tag" :class="getComponentClass" @click="$emit('click', $event.target)" >
+    <span>{{ message }}</span>
   </div>
 </template>
 

package/src/components/controls/PsDraggable.vue

@@ -5,39 +5,40 @@
       :key="indexColumnGroup"
       :ref="indexColumnGroup"
     >
-      <!-- COLUMN GROUP -->
       <div 
-        class="psui-el-draggable-title"
+        class="psui-el-draggable-wrapper-title"
         draggable="true"
         @dragstart="onDragStart"
         @dragover="$emit('drag-over', $event)"
         @dragend="onDragEnd"
       >
-        <h2 >{{columnGroup.title}}</h2>
-        <i >drag_indicator</i>
+        <p>{{ columnGroup.title }}</p>
+        <i class="material-icons-round">drag_indicator</i>
       </div>
 
-      <ul class="psui-el-draggable-list-items-wrapper">
-        <!-- COLUMNS -->
-        <li
+      <div class="psui-el-draggable-wrapper-list">
+        <div
           v-for="(column, indexColumn) in columnGroup.columns"
           :key="`edit-columns-column-${indexColumnGroup}-${indexColumn}`"
           :id="`edit-columns-column-${indexColumnGroup}-${indexColumn}`"
+          class="psui-el-draggable-item"
         >
-          <div class="psui-el-draggable-item-wrapper"
+          <div
+            class="psui-w-full psui-flex psui-items-center"
             draggable="true"
             @dragstart="$emit('drag-start-item',$event)"
             @dragover="$emit('drag-over-item',$event)"
             @dragend="$emit('drag-end-item',$event)"
           >
-            <slot name="item">
-            </slot>
-            <div class="psui-el-draggable-item-icon">
-              <i>drag_indicator</i>
-            </div>
+            <span class="psui-el-draggable-item-title">
+              {{ column.title }}
+            </span>
+            <span class="psui-el-draggable-item-append">
+              <i class="material-icons-round">drag_indicator</i>
+            </span>
           </div>
-        </li>
-      </ul>
+        </div>
+      </div>
     </div>
   </div>
 </template>

package/src/index.js

@@ -27,6 +27,7 @@ import PsCardInfos from './components/badges-and-tags/PsCardInfos.vue'
 import PsChartLegend from './components/badges-and-tags/PsChartLegend.vue'
 import PsInlineSelector from './components/controls/PsInlineSelector.vue'
 import PsScrollBar from './components/playground/PsScrollBar.vue'
+import PsMiniTag from './components/badges-and-tags/PsMiniTag.vue'
 
 
 
@@ -61,6 +62,7 @@ export default {
     Vue.component('PsDropdown',PsDropdown)
     Vue.component('PsDropdownList', PsDropdownList)
     Vue.component('PsScrollBar', PsScrollBar)
+    Vue.component('PsMiniTag', PsMiniTag)
     
     Vue.directive('click-outside', {
       bind: function (el, binding, vnode) {
@@ -109,6 +111,7 @@ export {
   PsInputSelect,
   PsDropdown,
   PsDropdownList,
-  PsScrollBar
+  PsScrollBar,
+  PsMiniTag
 }
 

package/src/stories/Draggable.stories.js

@@ -1,22 +1,22 @@
 import PsDraggable from '../components/controls/PsDraggable.vue'
 
 export default {
-    title: 'Components/Draggable',
-    component: PsDraggable 
+  title: 'Components/Draggable',
+  component: PsDraggable 
 }
 
 const Template = (args, {argTypes}) => ({
-    props: Object.keys(argTypes),
-    components: { PsDraggable },
-    template: `
-        <div style='width: 300px; font-family: "Lato", sans-serif; font-size: 12px;'>
-            <PsDraggable v-bind='$props'/>
-        </div>
-            `
+  props: Object.keys(argTypes),
+  components: { PsDraggable },
+  template: `
+    <div style='width: 300px; font-family: "Lato", sans-serif; font-size: 12px;'>
+        <PsDraggable v-bind='$props'/>
+    </div>
+        `
 })
 
 export const Component = Template.bind({})
 Component.args = {
-    getColumns: {columnGroups:[{title: 'COST EFFECTIVENESS', columns: [ 'Teste1' , 'Teste2' , 'Teste3', 'Teste4']}, {title: 'PER HOME RESULTS', columns: [ 'Teste5' , 'Teste6' , 'Teste7', 'Teste8']}]},
-    module: 'comparison'
+  getColumns: {columnGroups:[{title: 'COST EFFECTIVENESS', columns: [ 'Item 1' , 'Item 2' , 'Item 3', 'Item 4']}, {title: 'PER HOME RESULTS', columns: [ 'Item 1' , 'Item 2' , 'Item 3', 'Item 4']}]},
+  module: 'comparison'
 }