@policystudio/policy-studio-ui-vue 1.1.29 → 1.1.31

package/dist/css/psui_styles.css

@@ -1118,10 +1118,11 @@ video {
 
 .psui-el-accordion-item-header-wrapper {
         display: flex;
+        align-items: flex-start;
+        justify-content: space-between;
         width: 100%;
         cursor: pointer;
         transition-property: all;
-        justify-content: space-between;
         transition: cubic-bezier(.17,.67,.83,.67) 250ms;
         --text-opacity: 1;
         color: #28323B;

package/package.json

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

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

@@ -20,7 +20,7 @@
         padding-bottom: 16px;
 
         &-wrapper {
-          @apply psui-flex psui-w-full psui-cursor-pointer psui-transition-all psui-justify-between transition-default psui-text-gray-80;
+          @apply psui-flex psui-items-start psui-justify-between psui-w-full psui-cursor-pointer psui-transition-all transition-default psui-text-gray-80;
         
           &:hover {
             .psui-el-accordion-item-icon {

package/src/assets/scss/components/PsDropdown.scss

@@ -1,29 +1,28 @@
 @layer components {
-    .psui-el-dropdown-menu {
-        @apply psui-relative psui-inline-block psui-text-left;
-        
-        button {
-            @apply psui-inline-flex psui-justify-center psui-items-center psui-w-full psui-font-medium psui-leading-none;
-            background-color: transparent;
-            padding-top: 2.5px;
-            padding-bottom: 2.5px;
-            min-height: 27px;
-            font-size: 0.875rem;
-            
+  .psui-el-dropdown-menu {
+    @apply psui-relative psui-inline-block psui-text-left;
+    
+    button {
+      @apply psui-inline-flex psui-justify-center psui-items-center psui-w-full psui-font-medium psui-leading-none;
+      background-color: transparent;
+      padding-top: 2.5px;
+      padding-bottom: 2.5px;
+      min-height: 27px;
+      font-size: 0.875rem;
+      
 
-            &:focus {
-                outline: none;
-                box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);
-            }
-        }
-
-        &-dialog-wrapper {
-            @apply psui-hidden psui-origin-top-right psui-bg-white psui-fixed psui-w-auto psui-rounded-md psui-z-50 psui-opacity-0 psui-shadow-elevation-20 psui-transition-all psui-duration-100 psui-ease-in;
-            
-            &-dialog {
-                @apply psui-w-full;
+      &:focus {
+        outline: none;
+        box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);
+      }
+    }
 
-            }
-        }
+    &-dialog-wrapper {
+      @apply psui-hidden psui-origin-top-right psui-bg-white psui-fixed psui-w-auto psui-rounded-md psui-z-50 psui-opacity-0 psui-shadow-elevation-20 psui-transition-all psui-duration-100 psui-ease-in;
+      
+      &-dialog {
+        @apply psui-w-full;
+      }
     }
+  }
 }

package/src/components/controls/PsCheckbox.vue

@@ -1,14 +1,14 @@
 <template>
   <div class='psui-el-checkbox' :class="[getComponentClass, {'disabled':disabled}]" >
     <input 
-      :id="label" 
+      :id="getInputId" 
       type="checkbox" 
       :value="inputValue"
       v-model="model"
       :disabled="disabled"      
     />
     <label 
-      :for="label" 
+      :for="getInputId" 
       class="psui-el-checkmark"
       :class="[labelClasses, 'psui-el-checkmark']"
     >
@@ -19,6 +19,7 @@
 
 <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: 'PsCheckbox',
@@ -74,6 +75,15 @@ export default {
     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)
+      }
+    },
     model: {
       get(){
         return this.value

package/src/components/controls/PsCheckboxSimple.vue

@@ -1,9 +1,35 @@
 <template>
   <div 
+    v-if="withPrevent"
     class='psui-el-checkbox' 
     :class="[getComponentClass, {'disabled':disabled}]"
     v-bind="getComponentAttrs"
+    @click.prevent="$emit('click', $event)"
+  >
+    <input 
+      type="checkbox" 
+      :checked="checked" 
+      :disabled="disabled"
+      :name="label"
+      :id="getInputId"
+      v-bind="inputAttrs"
+      @change="$emit('change', $event)"
+    />
+    <label 
+      :for="getInputId"
+      class="psui-el-checkmark"
     >
+      <slot name="content">
+        <span>{{ label }}</span>
+      </slot>
+    </label>    
+  </div>
+  <div 
+    v-else
+    class='psui-el-checkbox' 
+    :class="[getComponentClass, {'disabled':disabled}]"
+    v-bind="getComponentAttrs"
+  >
     <input 
       type="checkbox" 
       :checked="checked" 
@@ -11,7 +37,7 @@
       :name="label"
       :id="getInputId"
       v-bind="inputAttrs"
-      @change="$emit('change')"
+      @change="$emit('change', $event)"
     />
     <label 
       :for="getInputId"
@@ -40,6 +66,11 @@ export default {
     /**
      * It disables the checkbox input.
      */
+    withPrevent: {
+      type: Boolean,
+      default: false,
+    },
+
     disabled: {
       type: Boolean,
       default: false,