@policystudio/policy-studio-ui-vue 1.0.37 → 1.0.38

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;

package/package.json

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

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/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

@@ -6,7 +6,7 @@
     <div 
       class="psui-el-input-wrapper"
       @mouseenter="$emit('mouseenter',$event)" 
-      @mouseleave="$emit('mouseenter',$event)" 
+      @mouseleave="$emit('mouseleave',$event)" 
     >
     
       <div v-if="$slots.prepend" class="psui-el-input-prepend">
@@ -133,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>