@policystudio/policy-studio-ui-vue 1.0.36 → 1.0.39

package/dist/css/psui_styles.css

@@ -18309,6 +18309,10 @@ html {
   border-radius: 1.5rem;
 }
 
+.psui-el-switch.disabled {
+    pointer-events: none;
+  }
+
 .psui-el-switch.size-big{
     width: 46px;
     height: 24px;
@@ -18723,9 +18727,6 @@ html {
   --text-opacity: 1;
   color: #798490;
   color: rgba(121, 132, 144, var(--text-opacity));
-  --bg-opacity: 1;
-  background-color: #F3F6F9;
-  background-color: rgba(243, 246, 249, var(--bg-opacity));
 }
 
 .psui-el-checkbox.disabled .psui-el-checkmark {
@@ -18774,7 +18775,7 @@ html {
       display: flex;
       cursor: pointer;
       align-items: center;
-      height: 18px;
+      height: 100%;
     }
 
 .psui-el-checkbox.size-small .psui-el-checkmark span {
@@ -18823,7 +18824,7 @@ html {
       display: flex;
       cursor: pointer;
       align-items: center;
-      height: 24px;
+      height: 100%;
     }
 
 .psui-el-checkbox.size-big .psui-el-checkmark span {

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@policystudio/policy-studio-ui-vue",
-  "version": "1.0.36",
+  "version": "1.0.39",
   "description": "Policy Studio UI",
   "main": "src/index.js",
   "author": "Policy Studio Team",
-  "url": "https://bitbucket.org/policy-studio/policy-studio-ui-vue",
+  "url": "https://github.com/Policy-Studio/policy-studio-ui-vue",
   "license": "MIT",
   "keywords": [
     "vue",

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

@@ -1,7 +1,7 @@
 @layer components {
         
         .psui-el-checkbox {
-            @apply psui-relative psui-text-gray-50 psui-bg-gray-10;    
+            @apply psui-relative psui-text-gray-50;    
         
         &.disabled {
             .psui-el-checkmark {
@@ -38,7 +38,7 @@
             }
             .psui-el-checkmark {
                 @apply psui-flex psui-cursor-pointer psui-items-center;
-                height: 18px;
+                height: 100%;
 
                 span {
                     margin-left: 8px;
@@ -77,7 +77,7 @@
             }
             .psui-el-checkmark {
                     @apply psui-flex psui-cursor-pointer psui-items-center;
-                    height: 24px;
+                    height: 100%;
                     
                     span {
                         margin-left: 8px;

package/src/assets/scss/components/PsSwitch.scss

@@ -1,6 +1,10 @@
 @layer components {
     .psui-el-switch {
         @apply psui-relative psui-inline-block psui-rounded-3xl;
+
+            &.disabled {
+                pointer-events: none;
+            }
             &.size-big{
                 width: 46px;
                 height: 24px;  

package/src/components/controls/PsCheckbox.vue

@@ -28,7 +28,7 @@ export default {
      * It sets the value which should be monitored.
     */
     inputValue: {
-      type: String,
+      type: [String, Boolean],
     },
     value:{
       type: Array

package/src/components/controls/PsSwitch.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class='psui-el-switch' :class="getComponentClass" @click="change()">
+  <div class='psui-el-switch' :class="[getComponentClass, {'disabled':disabled}]" @click="change()">
       <input type="checkbox" :checked="value" />
       <label class='psui-el-switch-button' :class="[getToggleClass]" />
   </div>
@@ -23,6 +23,13 @@ export default {
     value:{
       type: Boolean,
     },
+    /**
+     * It sets disabling mode.
+     */
+    disabled:{
+      type: Boolean,
+      default: false
+    },
     /**
     * It sets the size of the switch button. eg: small and big.
      */

package/src/components/forms/PsInput.vue

@@ -4,7 +4,9 @@
     <label v-if="label"> {{ label }} </label>
     
     <div 
-      class="psui-el-input-wrapper" 
+      class="psui-el-input-wrapper"
+      @mouseenter="$emit('mouseenter',$event)" 
+      @mouseleave="$emit('mouseleave',$event)" 
     >
     
       <div v-if="$slots.prepend" class="psui-el-input-prepend">
@@ -131,12 +133,10 @@ export default {
   },
   methods: {
     onInputFocus($event) {
-      console.log('focus')
       this.isFocus = true
       this.$emit('focus', $event)
     },
     onInputBlur($event) {
-      console.log('blur')
       this.isFocus = false
       this.$emit('blur', $event)
     }

package/src/stories/Switch.stories.js

@@ -22,8 +22,8 @@ const Template = (args, { argTypes }) => ({
       </div>
       <div style='display: flex; gap: 10px; flex-direction: column;'>
         <span>Disable</span>
-        <PsSwitch v-bind="$props" v-model="dt" label='Switch1'   size='big'/>
-        <PsSwitch v-bind="$props" v-model="dt" label='Switch2' size='small'/>
+        <PsSwitch v-bind="$props" v-model="dt" label='Switch1' disabled size='big'/>
+        <PsSwitch v-bind="$props" v-model="dt" label='Switch2' disabled size='small'/>
       </div>
       <div style='display: flex; gap: 10px; flex-direction: column;'>
       <span>Enable</span>