@policystudio/policy-studio-ui-vue 1.0.55 → 1.0.61

package/package.json

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

@@ -6,7 +6,7 @@
     button {
       @apply transition-default psui-text-small;
       &.status-disabled {
-        @apply cursor-not-allowed
+        @apply cursor-not-allowed;
       }
 
       &:focus {
@@ -24,6 +24,12 @@
     /* ----------------------------------------- */
       &.layout-standard {
         @apply psui-rounded-md;
+
+        .psui-el-tooltip{
+          &:not(:last-child) {
+            margin-right: 20px;
+          }
+        }
         
         button {
           @apply psui-bg-gray-10 psui-text-gray-60;
@@ -61,7 +67,11 @@
     /* Layout Underline */
     /* ----------------------------------------- */
       &.layout-underline {
-        @apply psui-border-b psui-border-gray-20;
+        .psui-el-tooltip {
+          &:not(:last-child) {
+            margin-right: 20px;
+          }
+        }
 
         button {
           @apply psui-text-gray-50 psui-font-bold;
@@ -91,6 +101,13 @@
     /* Layout Folder */
     /* ----------------------------------------- */
       &.layout-folder {
+
+        .psui-el-tooltip{
+          &:not(:last-child) {
+            margin-right: 20px;
+          }
+        }
+
         button {
           @apply psui-bg-gray-10 psui-text-gray-50 psui-rounded-t;
           padding: 9px 12px;

package/src/assets/scss/components/PsTooltip.scss

@@ -5,7 +5,7 @@
             @apply psui-relative;
 
             .psui-el-tooltip-dialog {
-                @apply psui-fixed psui-opacity-0 psui-transition-opacity psui-duration-300 psui-ease-in-out;
+                @apply psui-fixed psui-opacity-0 psui-transition-opacity psui-duration-300 psui-ease-in-out psui-z-10;
                 transition-delay: 0.4s;
 
                 .psui-el-tooltip-content {

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/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/controls/PsRadioButton.vue

@@ -1,23 +1,27 @@
 <template>
   <div class='psui-el-radio' :class="[getComponentClass, {'disabled':disabled}]" >
-    <input 
-      :id="label" 
-      type="radio" 
+    <input
+      :id="inputId"
+      type="radio"
       :value="inputValue"
       v-model="model"
       :disabled='disabled'      
     />
-    <label :for="label" class="psui-el-checkmark"><span>{{ label }}</span></label>    
+    <label :for="inputId" class="psui-el-checkmark"><span>{{ label }}</span></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
-
+ 
 export default {
   name: 'PsRadioButton',
   props: {
+    inputId: {
+      type: String,
+      default: ''
+    },
     /**
     * It sets the label of the radio button.
      */
@@ -64,5 +68,4 @@ export default {
   }  
   },
 }
-</script>
-
+</script>

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.

package/src/stories/CheckboxSimple.stories.js

@@ -1,7 +1,7 @@
 import PsCheckboxSimple from '../components/controls/PsCheckboxSimple.vue'
 // const icons = ['add_circle', 'delete', 'done', 'info', 'send']
 export default {
-  title: 'Components/CheckboxSimple',
+  title: 'Components/Inputs V2/Checkbox',
   component: PsCheckboxSimple,
 }
 
@@ -23,8 +23,8 @@ const defaultTemplate = (args, {argTypes}) => ({
       <div style='display:flex; flex-direction:column; gap:5px;'>
         <p>Active</p>
         <div style='display: flex; flex-direction:column; gap: 10px;'>
-          <PsCheckboxSimple v-bind="$props" label='Label 3'  checked />
-          <PsCheckboxSimple v-bind="$props" label='Label 4'  checked size='small'/>
+          <PsCheckboxSimple v-bind="$props" label='Label 3' checked />
+          <PsCheckboxSimple v-bind="$props" label='Label 4' checked size='small'/>
         </div>
       </div>
       <div style='display:flex; flex-direction:column; gap:5px;'>
@@ -37,8 +37,9 @@ const defaultTemplate = (args, {argTypes}) => ({
       <div style='display:flex; flex-direction:column; gap:5px;'>
         <p>Disabled</p>
         <div style='display: flex; flex-direction:column; gap: 10px;'>
-          <PsCheckboxSimple v-bind="$props" label='Label 7' disabled/>
-          <PsCheckboxSimple v-bind="$props" label='Label 8' size='small' disabled/>
+          <PsCheckboxSimple v-bind="$props" label='Input via inputAttrs' :inputAttrs="{ id: 'my-input-id' }" disabled/>
+          <PsCheckboxSimple v-bind="$props" label='Input via component id' size='small' id="my-component-id" data-test="test" disabled/>
+          <PsCheckboxSimple v-bind="$props" label='Input fallback' size='small' disabled/>
         </div>
       </div>
     </div>

package/tailwind.config.js

@@ -4,7 +4,7 @@ module.exports = {
   darkMode: false, // or 'media' or 'class'
   theme: {
     colors: {
-      'white': '#ffffff !important',
+      'white': '#ffffff ',
       'gray-10': '#F3F6F9',
       'gray-20': '#E6ECF2',
       'gray-30': '#D6DDE5',