@policystudio/policy-studio-ui-vue 1.0.58 → 1.0.62

package/package.json

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

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

@@ -6,13 +6,18 @@
       border-bottom: 1px solid #e6ecf2;      
   
       &-header {
-        @apply psui-flex psui-cursor-pointer psui-transition-all psui-justify-between transition-default psui-text-gray-80;
+        @apply psui-flex psui-justify-between psui-items-center;
         padding-top: 16px;
         padding-bottom: 16px;
 
-        &:hover {
-          @apply psui-text-blue-60;
+        &-wrapper {
+          @apply psui-flex psui-w-full psui-cursor-pointer psui-transition-all psui-justify-between transition-default psui-text-gray-80;
+        
+          &:hover {
+            @apply psui-text-blue-60;
+          }
         }
+
       }
 
       &-icon {

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

@@ -1,6 +1,6 @@
 @layer components {
     .psui-el-input-select {
-        @apply psui-w-full psui-flex psui-flex-col psui-relative psui-text-gray-40 psui-box-border;
+        @apply psui-flex psui-flex-col psui-w-full psui-relative psui-text-gray-40 psui-box-border;
         transition: ease 130ms;
 
         &.disabled {
@@ -11,13 +11,17 @@
             }
 
             select {
-                @apply  psui-text-gray-40 psui-border-gray-20 psui-bg-gray-20 !important
+                @apply  psui-text-gray-40 psui-border-gray-20 psui-bg-gray-20 !important;
             }
-
-            &::after {
-                @apply psui-z-20 psui-text-gray-50 !important;
+            
+            .psui-el-input-select-wrapper {
+                &::after {
+                    @apply psui-text-gray-50 !important;
+                    z-index: 100 !important;
+                }    
             }
         }
+        
 
         &.layout-default {
 
@@ -26,20 +30,27 @@
                     @apply psui-border-blue-50 psui-text-gray-60
                 }
             }
+
+            .psui-el-input-select-wrapper {
+                @apply psui-relative psui-w-auto;
     
-            &::after {
-                @apply psui-absolute psui-inline-block psui-text-gray-50;
-                content: 'arrow_drop_down';
-                font-family: 'Material Icons Round';
-                font-size: 24px;
-                top: 38px;
-                right: 15px;
-                z-index: -20;
+                &::after {
+                    @apply psui-absolute psui-inline-block psui-text-gray-50;
+                    content: 'arrow_drop_down';
+                    font-family: 'Material Icons Round';
+                    font-size: 24px;
+                    top: 13%;
+                    left: calc(100% - 26px);
+                    z-index: -20;
+                }
             }
+            
     
             select {
-                @apply psui-appearance-none psui-bg-transparent psui-text-big psui-w-full psui-border psui-border-gray-30 psui-rounded-md psui-text-gray-40;
-                padding: 11.5px 16px;
+                @apply psui-appearance-none psui-bg-transparent psui-text-big psui-border psui-border-gray-30 psui-rounded-md psui-text-gray-40;
+                padding: 11.5px 26px 11.5px 16px;
+                min-width: 100%;
+
     
                 &:hover,
                 &:active {
@@ -51,6 +62,8 @@
                 }
             }
 
+
+
         }
 
 
@@ -68,9 +81,22 @@
 
         &.layout-mini {
 
+            .psui-el-input-select-wrapper {
+                @apply psui-relative psui-w-full;
+    
+                &::after {
+                    @apply psui-absolute psui-inline-block psui-text-gray-50;
+                    content: 'unfold_more';
+                    font-family: 'Material Icons Round';
+                    font-size: 18px;
+                    top: 13%;
+                    left: calc(100% - 26px);
+                    z-index: -20;
+                }
+            }
 
             select {
-                @apply psui-text-small psui-appearance-none psui-bg-transparent psui-w-full psui-border psui-border-gray-30;
+                @apply psui-text-small psui-w-full psui-appearance-none psui-bg-transparent psui-border psui-border-gray-30;
                 border-radius: 4px;
                 padding: 7px 8px;
 
@@ -82,26 +108,21 @@
                 &:focus {
                     @apply psui-border-green-70 psui-text-gray-50
                 }
-    
-
-            }
-
-            &::after {
-                @apply psui-absolute psui-inline-block psui-text-gray-50 ;
-                content: 'unfold_more';
-                font-family: 'Material Icons Round';
-                font-size: 18px;
-                top: 4px;
-                right: 4px;
-                z-index: -20;
-            }
+                    
+            }   
             
             &.selected {
-                select {
-                    @apply psui-border-green-20 psui-text-green-70
+
+                .psui-el-input-select-wrapper {
+                    select {
+                        @apply psui-border-green-20 !important;
+                    }
+                }
+
+                &:not(option) {
+                    @apply  psui-text-green-70;
                 }
             }
-    
         }
     }
 }

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

@@ -1,56 +1,55 @@
 @layer components {
-    .psui-el-mini-tag {
-        @apply psui-flex psui-rounded-lg psui-items-center psui-justify-center psui-flex-row;
-        width: fit-content;
-
-
-        span {
-            @apply psui-w-full psui-font-bold psui-uppercase;
-            padding: 3px 8px 3px 8px;
-            font-size: 10px;
-            letter-spacing: 0.5px;
-        }
-
-        &-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
-            }
-        }
+  .psui-el-mini-tag {
+    @apply psui-flex psui-rounded-full psui-items-center psui-justify-center psui-flex-row;
+    width: fit-content;
+
+    span {
+      @apply psui-w-full psui-font-bold psui-uppercase;
+      padding: 3px 8px 3px 8px;
+      font-size: 10px;
+      letter-spacing: 0.5px;
     }
+
+    &-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/assets/scss/components/PsTabHeader.scss

@@ -67,9 +67,7 @@
     /* Layout Underline */
     /* ----------------------------------------- */
       &.layout-underline {
-        @apply psui-border-b psui-border-gray-20;
-
-        .psui-el-tooltip{
+        .psui-el-tooltip {
           &:not(:last-child) {
             margin-right: 20px;
           }

package/src/components/accordion/PsAccordionItem.vue

@@ -1,8 +1,12 @@
 <template>
   <div class="psui-el-accordion-item" :class="`status-${isOpen ? 'opened' : 'closed'}`">
-    <div @click="toggle" class="psui-el-accordion-item-header">
-      <h2 v-if="title" class="psui-el-accordion-item-title">{{ title }}</h2>
-        <i class="psui-el-accordion-item-icon">{{ getIcon }}</i>
+    <div class="psui-el-accordion-item-header">
+      <slot name='custom-header' :toggle="toggle" :isOpen="isOpen">
+        <div @click="toggle" class="psui-el-accordion-item-header-wrapper" v-if="!hasCustomHeader">
+          <h2 v-if="title" class="psui-el-accordion-item-title">{{ title }}</h2>
+          <i class="psui-el-accordion-item-icon">{{ getIcon }}</i> 
+        </div>
+      </slot>
     </div>
     <transition
       name="accordion-fade"
@@ -20,6 +24,7 @@
 
 <script>
 import { getParentVueComponentByName } from '../../util/GeneralFunctions'
+
 export default {
   name: 'PsAccordionItem',
   props: {
@@ -28,7 +33,6 @@ export default {
      */
     title: {
       type: String,
-      required: true,
     },
     /**
     * It sets the status of the accordion item when mounted. 
@@ -42,6 +46,13 @@ export default {
      */
     icon: {
       type: String
+    },
+    /**
+     * It sets if it has a custom header
+     */
+    hasCustomHeader: {
+      type: Boolean,
+      default: false
     }
   },
   data() {

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

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

package/src/components/buttons/PsButton.vue

@@ -4,9 +4,16 @@
       @mouseenter="onMouseEnter"
       @mouseleave="onMouseLeave" 
       class='psui-el-button' 
-      :class="[getComponentClass, {'hover': isHover}, {'disabled': disabled}]" 
+      :class="[getComponentClass, {'hover': isHover}, {'disabled': disabled || loading }]" 
    >
-    <i v-if="icon" :class='iconClass' class='material-icons-round'>{{icon}}</i>
+    <svg v-if="loading" 
+      class="psui-animate-spin psui-mr-3 psui-h-5 psui-w-5 psui-text-black"
+      :class="`${iconPosition == 'left' ? 'psui-mr-3' : 'psui-ml-3 psui--mr-1'}`"
+      xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+      <circle class="psui-opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+      <path class="psui-opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+    </svg>
+    <i v-else-if="icon" :class='iconClass' class='material-icons-round'>{{icon}}</i>
     <span v-if="label">{{ label }}</span>
   </button>
 </template>
@@ -57,6 +64,13 @@ export default {
       type: Boolean,
       default: false
     },
+    /**
+     * It disable and add a spin icon to the button. All mouse event are disabled.
+     */
+    loading: {
+      type: Boolean,
+      default: false
+    },
     /**
      * It set any further css style that might be needed.
      */
@@ -76,7 +90,7 @@ export default {
         } else {
           return `layout-${this.layout} size-${this.size}` 
         }
-    }
+    },
   },
   methods: {
     onClick() {

package/src/components/controls/PsCheckboxSimple.vue

@@ -1,23 +1,33 @@
 <template>
-  <div class='psui-el-checkbox' @click="$emit('click')" :class="[getComponentClass, {'disabled':disabled}]" >
+  <div 
+    class='psui-el-checkbox' 
+    @click="$emit('click')" 
+    :class="[getComponentClass, {'disabled':disabled}]"
+    v-bind="getComponentAttrs"
+    >
     <input 
       type="checkbox" 
       :checked="checked" 
       :disabled="disabled"
       :name="label"
+      :id="getInputId"
+      v-bind="inputAttrs"
+      @change="$emit('change')" 
     />
     <label 
-      :for="label" 
+      :for="getInputId"
       class="psui-el-checkmark"
     >
-      <slot v-if="!label" name="content"></slot>
-      <span v-else>{{ label }}</span>
+      <slot name="content">
+        <span>{{ label }}</span>
+      </slot>
     </label>    
   </div>
 </template>
 
 <script>
 //FIGMA CONTROLS & SELECTORS https://www.figma.com/file/Tto8hrNlSfuPcwd1pfqogF/%E2%9A%A1%EF%B8%8F-Design-System?node-id=1768%3A64852
+import { randomString } from '../../util/GeneralFunctions'
 
 export default {
   name: 'PsCheckboxSimple',
@@ -35,10 +45,20 @@ export default {
       type: Boolean,
       default: false,
     },
+    /**
+     * Sets the input as checked
+     */
     checked: {
       type: Boolean,
       default: false
     },
+    /** 
+     * Add html attributes to the element input
+    */
+    inputAttrs: {
+      type: Object,
+      default: () => ({})
+    },
     /**
      * It set the of the checkbox input. eg: big and small.
      */
@@ -56,10 +76,25 @@ export default {
       validator: (value)=> ['default','mixed'].includes(value)
     }
   },
+  inheritAttrs: false,
   computed:{
     getComponentClass(){
       return `size-${this.size} layout-${this.layout}`
-    }, 
+    },
+    getInputId() {
+      if (this?.inputAttrs?.id) {
+        return this.inputAttrs.id
+      } else if (this?.$attrs?.id) {
+        return this.$attrs.id
+      } else {
+        return randomString(16)
+      }
+    },
+    getComponentAttrs() {
+      let componentAttrs = { ... this.$attrs }
+      delete componentAttrs.id
+      return componentAttrs
+    }
   },
 }
 </script>

package/src/components/controls/PsDraggable.vue

@@ -32,14 +32,14 @@
             class="psui-w-full psui-flex psui-items-center"
           >
             <span class="psui-el-draggable-item-title">
-              <PsCheckbox
+              <PsCheckboxSimple
                 size="small"
-                :value="column.isActive"
                 :label="column.title"
                 :class="{'active' : column.isActive}"
+                :checked="column.isActive"
                 :disabled="column.isDisabled"
                 class="psui-el-draggable-item-checkbox"
-                @input="$emit('on-select-item', { studyKey: getColumns.key, indexColumnGroup, indexColumn, columnGroupKey: columnGroup.key })"
+                @change="$emit('on-select-item', { studyKey: getColumns.key, indexColumnGroup, indexColumn, columnGroupKey: columnGroup.key })"
               />
             </span>
             <span class="psui-el-draggable-item-append">
@@ -80,7 +80,6 @@ export default {
   },
   computed: {
     getStatus() {
-      console.log('var:', this.column.key)
       if (this.column.key == 'compliance_margin') {
         return true 
       } else {

package/src/components/forms/PsDropdown.vue

@@ -70,6 +70,13 @@ export default {
       type: Boolean,
       default: true,
     },
+    /**
+    * Disable the toogle on click. default: false.
+    */
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
     return {
@@ -90,6 +97,8 @@ export default {
   },
   methods: {
     toggle() {
+      if (this.disabled) return 
+
       if (!this.show) {
         this.open()
       } else {

package/src/components/forms/PsInputSelect.vue

@@ -1,6 +1,7 @@
 <template>
-  <div class="psui-el-input-select" :class="[{'disabled':disabled}, getComponentClass, {'selected':selectedClass}]">
+  <div class="psui-el-input-select" :class="[getComponentClass, {'selected':selectedClass}, {'disabled':disabled}]">
     <label :for='label' v-if="label" >{{ label }}</label>
+    <div class="psui-el-input-select-wrapper">
     <select 
       :name="label"
       :id="label"  
@@ -9,6 +10,7 @@
       <option value='' disabled>Select</option>
       <option v-for="item in getItems" :value="item[keyValue]" :key="item[keyValue]">{{ item[keyLabel] }}</option>
     </select>
+    </div>
     <p v-if="optionalLabel && !disabled && layout !== 'mini'" class="psui-el-input-helper">{{ optionalLabel }}</p>
   </div>
 </template>
@@ -16,7 +18,7 @@
 <script>
 
 export default {
-  name: 'PsSelectInput',
+  name: 'PsInputSelect',
   props: {
     /**
      * It sets the items which will be rendered within the select input.