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

package/dist/css/psui_styles.css

@@ -17391,9 +17391,9 @@ html {
         }
 
 .psui-el-input-select {
-  width: 100%;
   display: flex;
   flex-direction: column;
+  width: 100%;
   position: relative;
   --text-opacity: 1;
   color: #A2ACB7;
@@ -17421,15 +17421,15 @@ html {
       border-color: rgba(230, 236, 242, var(--border-opacity)) !important;
       --bg-opacity: 1 !important;
       background-color: #E6ECF2 !important;
-      background-color: rgba(230, 236, 242, var(--bg-opacity)) !important
+      background-color: rgba(230, 236, 242, var(--bg-opacity)) !important;
     }
 
-.psui-el-input-select.disabled::after {
-      z-index: 20 !important;
-      --text-opacity: 1 !important;
-      color: #798490 !important;
-      color: rgba(121, 132, 144, var(--text-opacity)) !important;
-    }
+.psui-el-input-select.disabled .psui-el-input-select-wrapper::after {
+        --text-opacity: 1 !important;
+        color: #798490 !important;
+        color: rgba(121, 132, 144, var(--text-opacity)) !important;
+        z-index: 100 !important;
+      }
 
 .psui-el-input-select.layout-default.selected select {
         --border-opacity: 1;
@@ -17440,20 +17440,25 @@ html {
         color: rgba(81, 94, 106, var(--text-opacity))
       }
 
-.psui-el-input-select.layout-default::after {
-      position: absolute;
-      display: inline-block;
-      --text-opacity: 1;
-      color: #798490;
-      color: rgba(121, 132, 144, var(--text-opacity));
-      content: 'arrow_drop_down';
-      font-family: 'Material Icons Round';
-      font-size: 24px;
-      top: 38px;
-      right: 15px;
-      z-index: -20;
+.psui-el-input-select.layout-default .psui-el-input-select-wrapper {
+      position: relative;
+      width: auto;
     }
 
+.psui-el-input-select.layout-default .psui-el-input-select-wrapper::after {
+        position: absolute;
+        display: inline-block;
+        --text-opacity: 1;
+        color: #798490;
+        color: rgba(121, 132, 144, var(--text-opacity));
+        content: 'arrow_drop_down';
+        font-family: 'Material Icons Round';
+        font-size: 24px;
+        top: 13%;
+        left: calc(100% - 26px);
+        z-index: -20;
+      }
+
 .psui-el-input-select.layout-default select {
       -webkit-appearance: none;
          -moz-appearance: none;
@@ -17461,7 +17466,6 @@ html {
       background-color: transparent;
       font-size: 16px;
       line-height: 130%;
-      width: 100%;
       border-width: 1px;
       --border-opacity: 1;
       border-color: #D6DDE5;
@@ -17470,7 +17474,8 @@ html {
       --text-opacity: 1;
       color: #A2ACB7;
       color: rgba(162, 172, 183, var(--text-opacity));
-      padding: 11.5px 16px;
+      padding: 11.5px 26px 11.5px 16px;
+      min-width: 100%;
     }
 
 .psui-el-input-select.layout-default select:hover,
@@ -17513,14 +17518,33 @@ html {
     line-height: 24px;
   }
 
+.psui-el-input-select.layout-mini .psui-el-input-select-wrapper {
+      position: relative;
+      width: 100%;
+    }
+
+.psui-el-input-select.layout-mini .psui-el-input-select-wrapper::after {
+        position: absolute;
+        display: inline-block;
+        --text-opacity: 1;
+        color: #798490;
+        color: rgba(121, 132, 144, var(--text-opacity));
+        content: 'unfold_more';
+        font-family: 'Material Icons Round';
+        font-size: 18px;
+        top: 13%;
+        left: calc(100% - 26px);
+        z-index: -20;
+      }
+
 .psui-el-input-select.layout-mini select {
       font-size: 14px;
       line-height: 130%;
+      width: 100%;
       -webkit-appearance: none;
          -moz-appearance: none;
               appearance: none;
       background-color: transparent;
-      width: 100%;
       border-width: 1px;
       --border-opacity: 1;
       border-color: #D6DDE5;
@@ -17548,27 +17572,16 @@ html {
         color: rgba(121, 132, 144, var(--text-opacity))
       }
 
-.psui-el-input-select.layout-mini::after {
-      position: absolute;
-      display: inline-block;
-      --text-opacity: 1;
-      color: #798490;
-      color: rgba(121, 132, 144, var(--text-opacity));
-      content: 'unfold_more';
-      font-family: 'Material Icons Round';
-      font-size: 18px;
-      top: 4px;
-      right: 4px;
-      z-index: -20;
-    }
+.psui-el-input-select.layout-mini.selected .psui-el-input-select-wrapper select {
+          --border-opacity: 1 !important;
+          border-color: #5DB883 !important;
+          border-color: rgba(93, 184, 131, var(--border-opacity)) !important;
+        }
 
-.psui-el-input-select.layout-mini.selected select {
-        --border-opacity: 1;
-        border-color: #5DB883;
-        border-color: rgba(93, 184, 131, var(--border-opacity));
+.psui-el-input-select.layout-mini.selected:not(option) {
         --text-opacity: 1;
         color: #44A06A;
-        color: rgba(68, 160, 106, var(--text-opacity))
+        color: rgba(68, 160, 106, var(--text-opacity));
       }
 
 .psui-el-input-textarea {
@@ -20003,23 +20016,30 @@ html {
 
 .psui-el-accordion-item-header {
       display: flex;
-      cursor: pointer;
-      transition-property: all;
       justify-content: space-between;
-      transition: cubic-bezier(.17,.67,.83,.67) 250ms;
-      --text-opacity: 1;
-      color: #28323B;
-      color: rgba(40, 50, 59, var(--text-opacity));
+      align-items: center;
       padding-top: 16px;
       padding-bottom: 16px;
     }
 
-.psui-el-accordion-item-header:hover {
+.psui-el-accordion-item-header-wrapper {
+        display: flex;
+        width: 100%;
+        cursor: pointer;
+        transition-property: all;
+        justify-content: space-between;
+        transition: cubic-bezier(.17,.67,.83,.67) 250ms;
         --text-opacity: 1;
-        color: #318FAC;
-        color: rgba(49, 143, 172, var(--text-opacity));
+        color: #28323B;
+        color: rgba(40, 50, 59, var(--text-opacity));
       }
 
+.psui-el-accordion-item-header-wrapper:hover {
+          --text-opacity: 1;
+          color: #318FAC;
+          color: rgba(49, 143, 172, var(--text-opacity));
+        }
+
 .psui-el-accordion-item-icon {
       font-family: 'Material Icons Round';
       font-weight: normal;

package/package.json

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

@@ -1,23 +1,32 @@
 <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"
     />
     <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 +44,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 +75,26 @@ 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
+      console.log('componentAttrs', componentAttrs)
+      return componentAttrs
+    }
   },
 }
 </script>

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,
 }
 
@@ -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/vetur/attributes.json

@@ -39,6 +39,44 @@
     "type": "string",
     "description": "It sets the text key to get the svg icon in Google Fonts. Make sure to get the correct description of your icon on https://fonts.google.com/."
   },
+  "ps-badge-with-icon/icon": {
+    "type": "string"
+  },
+  "PsBadgeWithIcon/icon": {
+    "type": "string"
+  },
+  "ps-badge-with-icon/iconClass": {
+    "type": "string",
+    "description": "It set any further css style that might be needed."
+  },
+  "PsBadgeWithIcon/iconClass": {
+    "type": "string",
+    "description": "It set any further css style that might be needed."
+  },
+  "ps-badge-with-icon/message": {
+    "type": "string"
+  },
+  "PsBadgeWithIcon/message": {
+    "type": "string"
+  },
+  "ps-badge-with-icon/layout": {
+    "type": "string",
+    "options": [
+      "grey",
+      "blue",
+      "green",
+      "yellow"
+    ]
+  },
+  "PsBadgeWithIcon/layout": {
+    "type": "string",
+    "options": [
+      "grey",
+      "blue",
+      "green",
+      "yellow"
+    ]
+  },
   "ps-card-infos/title": {
     "type": "string",
     "description": "It sets the title of your card."
@@ -143,7 +181,12 @@
       "success",
       "warning",
       "error",
-      "default"
+      "default",
+      "solid-info",
+      "solid-success",
+      "solid-warning",
+      "solid-error",
+      "solid-default"
     ]
   },
   "PsMiniTag/layout": {
@@ -154,7 +197,12 @@
       "success",
       "warning",
       "error",
-      "default"
+      "default",
+      "solid-info",
+      "solid-success",
+      "solid-warning",
+      "solid-error",
+      "solid-default"
     ]
   },
   "ps-mini-tag/message": {
@@ -362,18 +410,18 @@
     "description": "It sets the label of the checkbox input."
   },
   "ps-checkbox/inputValue": {
-    "type": "string",
+    "type": "string|boolean",
     "description": "It sets the value which should be monitored."
   },
   "PsCheckbox/inputValue": {
-    "type": "string",
+    "type": "string|boolean",
     "description": "It sets the value which should be monitored."
   },
   "ps-checkbox/value": {
-    "type": "array"
+    "type": "array|boolean"
   },
   "PsCheckbox/value": {
-    "type": "array"
+    "type": "array|boolean"
   },
   "ps-checkbox/disabled": {
     "type": "boolean",
@@ -415,6 +463,60 @@
       "mixed"
     ]
   },
+  "ps-checkbox-simple/label": {
+    "type": "string",
+    "description": "It sets the label of the checkbox input."
+  },
+  "PsCheckboxSimple/label": {
+    "type": "string",
+    "description": "It sets the label of the checkbox input."
+  },
+  "ps-checkbox-simple/disabled": {
+    "type": "boolean",
+    "description": "It disables the checkbox input."
+  },
+  "PsCheckboxSimple/disabled": {
+    "type": "boolean",
+    "description": "It disables the checkbox input."
+  },
+  "ps-checkbox-simple/checked": {
+    "type": "boolean"
+  },
+  "PsCheckboxSimple/checked": {
+    "type": "boolean"
+  },
+  "ps-checkbox-simple/size": {
+    "type": "string",
+    "description": "It set the of the checkbox input. eg: big and small.",
+    "options": [
+      "big",
+      "small"
+    ]
+  },
+  "PsCheckboxSimple/size": {
+    "type": "string",
+    "description": "It set the of the checkbox input. eg: big and small.",
+    "options": [
+      "big",
+      "small"
+    ]
+  },
+  "ps-checkbox-simple/layout": {
+    "type": "string",
+    "description": "It set the layout of the checkbox input. eg: default and mixed.",
+    "options": [
+      "default",
+      "mixed"
+    ]
+  },
+  "PsCheckboxSimple/layout": {
+    "type": "string",
+    "description": "It set the layout of the checkbox input. eg: default and mixed.",
+    "options": [
+      "default",
+      "mixed"
+    ]
+  },
   "ps-draggable/getColumns": {
     "type": "object",
     "description": "It sets the data that will be used."
@@ -431,6 +533,14 @@
     "type": "string",
     "description": "It sets the module which will be used to set getters and actions."
   },
+  "ps-draggable/disabled": {
+    "type": "boolean",
+    "description": "It disables the input. All mouse events are disabled."
+  },
+  "PsDraggable/disabled": {
+    "type": "boolean",
+    "description": "It disables the input. All mouse events are disabled."
+  },
   "ps-inline-selector/width": {
     "type": "number",
     "description": "It sets the default width of the inline selector."
@@ -529,6 +639,12 @@
     "type": "string",
     "description": "It sets the placeholder of the component."
   },
+  "ps-radio-button/inputId": {
+    "type": "string"
+  },
+  "PsRadioButton/inputId": {
+    "type": "string"
+  },
   "ps-radio-button/label": {
     "type": "string",
     "description": "It sets the label of the radio button."
@@ -538,18 +654,18 @@
     "description": "It sets the label of the radio button."
   },
   "ps-radio-button/inputValue": {
-    "type": "string",
+    "type": "string|object",
     "description": "It's the value of the checkbox"
   },
   "PsRadioButton/inputValue": {
-    "type": "string",
+    "type": "string|object",
     "description": "It's the value of the checkbox"
   },
   "ps-radio-button/value": {
-    "type": "string"
+    "type": "string|object"
   },
   "PsRadioButton/value": {
-    "type": "string"
+    "type": "string|object"
   },
   "ps-radio-button/disabled": {
     "type": "boolean",
@@ -639,6 +755,14 @@
     "type": "boolean",
     "description": "It sets the value of the switch button."
   },
+  "ps-switch/disabled": {
+    "type": "boolean",
+    "description": "It sets disabling mode."
+  },
+  "PsSwitch/disabled": {
+    "type": "boolean",
+    "description": "It sets disabling mode."
+  },
   "ps-switch/size": {
     "type": "string",
     "description": "It sets the size of the switch button. eg: small and big.",
@@ -885,61 +1009,61 @@
     "type": "boolean",
     "description": "It sets a active css class based on a boolean property."
   },
-  "ps-select-input/items": {
+  "ps-input-select/items": {
     "type": "",
     "description": "It sets the items which will be rendered within the select input."
   },
-  "PsSelectInput/items": {
+  "PsInputSelect/items": {
     "type": "",
     "description": "It sets the items which will be rendered within the select input."
   },
-  "ps-select-input/value": {
+  "ps-input-select/value": {
     "type": "string"
   },
-  "PsSelectInput/value": {
+  "PsInputSelect/value": {
     "type": "string"
   },
-  "ps-select-input/label": {
+  "ps-input-select/label": {
     "type": "string",
     "description": "It sets the value label of the select input if needed."
   },
-  "PsSelectInput/label": {
+  "PsInputSelect/label": {
     "type": "string",
     "description": "It sets the value label of the select input if needed."
   },
-  "ps-select-input/optionalLabel": {
+  "ps-input-select/optionalLabel": {
     "type": "string",
     "description": "It sets a o optional label below the select input."
   },
-  "PsSelectInput/optionalLabel": {
+  "PsInputSelect/optionalLabel": {
     "type": "string",
     "description": "It sets a o optional label below the select input."
   },
-  "ps-select-input/keyLabel": {
+  "ps-input-select/keyLabel": {
     "type": "string",
     "description": "It sets the key label of your items if needed."
   },
-  "PsSelectInput/keyLabel": {
+  "PsInputSelect/keyLabel": {
     "type": "string",
     "description": "It sets the key label of your items if needed."
   },
-  "ps-select-input/keyValue": {
+  "ps-input-select/keyValue": {
     "type": "string",
     "description": "It sets the key value of yout items if needed."
   },
-  "PsSelectInput/keyValue": {
+  "PsInputSelect/keyValue": {
     "type": "string",
     "description": "It sets the key value of yout items if needed."
   },
-  "ps-select-input/disabled": {
+  "ps-input-select/disabled": {
     "type": "boolean",
     "description": "It disables the select input. All mouse events are disabled."
   },
-  "PsSelectInput/disabled": {
+  "PsInputSelect/disabled": {
     "type": "boolean",
     "description": "It disables the select input. All mouse events are disabled."
   },
-  "ps-select-input/layout": {
+  "ps-input-select/layout": {
     "type": "string",
     "description": "It sets the layout of the select input. eg: default and mini.",
     "options": [
@@ -947,7 +1071,7 @@
       "mini"
     ]
   },
-  "PsSelectInput/layout": {
+  "PsInputSelect/layout": {
     "type": "string",
     "description": "It sets the layout of the select input. eg: default and mini.",
     "options": [
@@ -1325,22 +1449,6 @@
     "type": "number|string",
     "description": "It sets the size of the icon."
   },
-  "app-icon/width": {
-    "type": "number|string",
-    "description": "It sets the width of the icon."
-  },
-  "AppIcon/width": {
-    "type": "number|string",
-    "description": "It sets the width of the icon."
-  },
-  "app-icon/height": {
-    "type": "number|string",
-    "description": "It sets the height of the icon."
-  },
-  "AppIcon/height": {
-    "type": "number|string",
-    "description": "It sets the height of the icon."
-  },
   "app-icon/stroke": {
     "type": "string",
     "description": "It sets fill property of the icon."

package/vetur/tags.json

@@ -27,6 +27,24 @@
     ],
     "description": ""
   },
+  "ps-badge-with-icon": {
+    "attributes": [
+      "icon",
+      "iconClass",
+      "message",
+      "layout"
+    ],
+    "description": ""
+  },
+  "PsBadgeWithIcon": {
+    "attributes": [
+      "icon",
+      "iconClass",
+      "message",
+      "layout"
+    ],
+    "description": ""
+  },
   "ps-card-infos": {
     "attributes": [
       "title",
@@ -199,17 +217,39 @@
     ],
     "description": ""
   },
+  "ps-checkbox-simple": {
+    "attributes": [
+      "label",
+      "disabled",
+      "checked",
+      "size",
+      "layout"
+    ],
+    "description": ""
+  },
+  "PsCheckboxSimple": {
+    "attributes": [
+      "label",
+      "disabled",
+      "checked",
+      "size",
+      "layout"
+    ],
+    "description": ""
+  },
   "ps-draggable": {
     "attributes": [
       "getColumns",
-      "module"
+      "module",
+      "disabled"
     ],
     "description": ""
   },
   "PsDraggable": {
     "attributes": [
       "getColumns",
-      "module"
+      "module",
+      "disabled"
     ],
     "description": ""
   },
@@ -251,6 +291,7 @@
   },
   "ps-radio-button": {
     "attributes": [
+      "inputId",
       "label",
       "inputValue",
       "value",
@@ -261,6 +302,7 @@
   },
   "PsRadioButton": {
     "attributes": [
+      "inputId",
       "label",
       "inputValue",
       "value",
@@ -299,6 +341,7 @@
     "attributes": [
       "label",
       "value",
+      "disabled",
       "size"
     ],
     "description": ""
@@ -307,6 +350,7 @@
     "attributes": [
       "label",
       "value",
+      "disabled",
       "size"
     ],
     "description": ""
@@ -427,7 +471,7 @@
     ],
     "description": ""
   },
-  "ps-select-input": {
+  "ps-input-select": {
     "attributes": [
       "items",
       "value",
@@ -440,7 +484,7 @@
     ],
     "description": ""
   },
-  "PsSelectInput": {
+  "PsInputSelect": {
     "attributes": [
       "items",
       "value",
@@ -517,6 +561,14 @@
     ],
     "description": ""
   },
+  "ps-scroll-bar": {
+    "attributes": [],
+    "description": ""
+  },
+  "PsScrollBar": {
+    "attributes": [],
+    "description": ""
+  },
   "ps-tab-header": {
     "attributes": [
       "layout",
@@ -605,8 +657,6 @@
       "type",
       "iconClasses",
       "size",
-      "width",
-      "height",
       "stroke",
       "color",
       "loaderIcon",
@@ -620,8 +670,6 @@
       "type",
       "iconClasses",
       "size",
-      "width",
-      "height",
       "stroke",
       "color",
       "loaderIcon",