@policystudio/policy-studio-ui-vue 1.0.35 → 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;
@@ -20079,11 +20083,11 @@ html {
       padding: 11.5px 16px;
     }
 
-.psui-el-input.layout-default.status-resting .psui-el-input-wrapper.hover {
-        --border-opacity: 1;
-        border-color: #64B5CE;
-        border-color: rgba(100, 181, 206, var(--border-opacity))
-      }
+.psui-el-input.layout-default.status-resting .psui-el-input-wrapper:hover {
+          --border-opacity: 1;
+          border-color: #64B5CE;
+          border-color: rgba(100, 181, 206, var(--border-opacity))
+        }
 
 .psui-el-input.layout-default.status-active .psui-el-input-wrapper {
         --border-opacity: 1;
@@ -20099,11 +20103,11 @@ html {
       padding: 7px 8px;
     }
 
-.psui-el-input.layout-mini.status-resting .psui-el-input-wrapper.hover {
-        --border-opacity: 1;
-        border-color: #5DB883;
-        border-color: rgba(93, 184, 131, var(--border-opacity))
-      }
+.psui-el-input.layout-mini.status-resting .psui-el-input-wrapper:hover {
+          --border-opacity: 1;
+          border-color: #5DB883;
+          border-color: rgba(93, 184, 131, var(--border-opacity))
+        }
 
 .psui-el-input.layout-mini.status-active .psui-el-input-wrapper {
         --border-opacity: 1;

package/package.json

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

package/src/assets/scss/components/PsInput.scss

@@ -63,9 +63,12 @@
         }          
 
         &.status-resting {
-          .psui-el-input-wrapper.hover {
-            @apply psui-border-blue-50
+          .psui-el-input-wrapper{
+            &:hover {
+              @apply psui-border-blue-50
+            }
           }          
+
         }
 
         &.status-active {
@@ -86,8 +89,10 @@
           padding: 7px 8px;
         }
         &.status-resting {
-          .psui-el-input-wrapper.hover {
-            @apply psui-border-green-20
+          .psui-el-input-wrapper {
+            &:hover {
+              @apply psui-border-green-20
+            }
           }
         }
         &.status-active {

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

@@ -4,10 +4,9 @@
     <label v-if="label"> {{ label }} </label>
     
     <div 
-      class="psui-el-input-wrapper" 
-      @mouseenter="isHoveringInputWrapper = true" 
-      @mouseleave="isHoveringInputWrapper = false"
-      :class="{ 'hover' : isHoveringInputWrapper }"
+      class="psui-el-input-wrapper"
+      @mouseenter="$emit('mouseenter',$event)" 
+      @mouseleave="$emit('mouseleave',$event)" 
     >
     
       <div v-if="$slots.prepend" class="psui-el-input-prepend">
@@ -108,7 +107,6 @@ export default {
     },
 	},
   data: () => ({
-    isHoveringInputWrapper: false,
     isFocus: false,
   }),
   computed: {

package/src/stories/Input.stories.js

@@ -7,8 +7,8 @@ export default {
     required: { control: 'boolean' },
   },
 }
-
-const TemplateDefault = (args, { argTypes }) => ({
+ 
+const TemplateInputText = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
   components: { PsInput },
   data: () => {
@@ -21,19 +21,19 @@ const TemplateDefault = (args, { argTypes }) => ({
   },
   template: `    
     <div class="psui-p-8 psui-bg-gray-10 psui-grid psui-grid-cols-3 psui-gap-6">          
-
+ 
       <div class="psui-col-span-3 psui-mt-8">
         <h1 class="psui-font-bold psui-border-b psui-border-gray-30">PSInput Layout Default</h1>
       </div>
-      
-      <PsInput v-bind="{...$props, label: 'Resting with hint', placeholder: '', value: '' }" />      
+     
+      <PsInput v-bind="{...$props, label: 'Resting with hint', placeholder: '', value: '' }" />
       <PsInput label="Resting without hint" />      
       <PsInput label="Resting with Placeholder" placeholder="This is a placeholder" />      
  
       <PsInput v-bind="{...$props, label: 'Focus'}" />
       <PsInput label="Typing" placeholder="Type to see the effect..." />
       <PsInput v-bind="{...$props, label: 'Active', active: true }" />
-      
+     
       <PsInput v-bind="{...$props, label: 'Error', hasError: true }" />
       <PsInput v-bind="{...$props, label: 'Error with custom message', hasError: 'Format invalid' }" />    
       <PsInput v-bind="{...$props, label: 'Prepend / Append ' }" >
@@ -44,17 +44,17 @@ const TemplateDefault = (args, { argTypes }) => ({
           Prepend
         </template>
       </PsInput>
-
+ 
       <PsInput label="Disabled" :disabled="true" value="100,000" />      
       <PsInput v-bind="{...$props, label: 'Disabled without value', disabled: true, value: '', hint: false }" />
       <PsInput v-bind="{...$props, label: 'Active/Disabled', disabled: true, active: true }" />      
-
-      
-
+ 
+     
+ 
       <div class="psui-col-span-3 psui-mt-8">
         <h1 class="psui-font-bold psui-border-b psui-border-gray-30">PSInput Layout Mini</h1>
       </div>
-
+ 
       <PsInput layout="mini" label="Resting with hint" hint="This is a hint" value="1,653" />      
       <PsInput layout="mini" label="Resting without hint" />      
       <PsInput layout="mini" label="Resting with Placeholder" placeholder="This is a placeholder" />      
@@ -62,7 +62,7 @@ const TemplateDefault = (args, { argTypes }) => ({
       <PsInput layout="mini" v-bind="{...$props, label: 'Focus'}" />
       <PsInput layout="mini" label="Typing" placeholder="Type to see the effect..." />
       <PsInput layout="mini" v-bind="{...$props, label: 'Active', active: true }" />
-      
+     
       <PsInput layout="mini" v-bind="{...$props, label: 'Error', hasError: true }" />
       <PsInput layout="mini" v-bind="{...$props, label: 'Error with custom message', hasError: 'Format invalid' }" />
       <PsInput layout="mini" v-bind="{...$props, label: 'Prepend / Append ' }" >
@@ -73,15 +73,120 @@ const TemplateDefault = (args, { argTypes }) => ({
           Prepend
         </template>
       </PsInput>
-
+ 
       <PsInput layout="mini" label="Disabled" :disabled="true" value="100,000" />      
       <PsInput layout="mini" v-bind="{...$props, label: 'Disabled without value', disabled: true, value: '', hint: false }" />
       <PsInput layout="mini" v-bind="{...$props, label: 'Active/Disabled', disabled: true, active: true }" />      
-
-    </div> 
+ 
+    </div>
   `
 })
-
+ 
+const TemplateInputPassword = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { PsInput },
+  data: () => {
+    return {
+      validator: {
+        hasError: true,
+        label: 'Error message!'
+      }
+    }
+  },
+  template: `    
+    <div class="psui-p-8 psui-bg-gray-10 psui-grid psui-grid-cols-3 psui-gap-6">          
+ 
+      <div class="psui-col-span-3 psui-mt-8">
+        <h1 class="psui-font-bold psui-border-b psui-border-gray-30">PSInput Password Layout Default</h1>
+      </div>
+     
+      <PsInput v-bind="{...$props, label: 'Resting with hint', placeholder: '', value: '', hint: 'Between 8 and 16 characters' }" >
+        <template v-slot:append>
+          <span class="material-icons-round psui-text-gray-50 psui-mr-2">
+            visibility_off
+          </span>
+        </template>
+      </PsInput>
+ 
+      <PsInput label="Resting without hint" hint="Between 8 and 16 characters">
+        <template v-slot:append>
+          <span class="material-icons-round psui-text-gray-50 psui-mr-2">
+            visibility_off
+          </span>
+        </template>
+        </PsInput>
+       
+        <PsInput label="Resting with Placeholder" placeholder="This is a placeholder" hint="Between 8 and 16 characters">        
+          <template v-slot:append>
+            <span class="material-icons-round psui-text-gray-50 psui-mr-2">
+              visibility_off
+            </span>
+          </template>
+      </PsInput>
+ 
+ 
+      <PsInput v-bind="{...$props, label: 'Focus'}" hint="Between 8 and 16 characters">
+        <template v-slot:append>
+          <span class="material-icons-round psui-text-gray-50 psui-mr-2">
+            visibility_off
+          </span>
+        </template>
+      </PsInput>
+ 
+      <PsInput v-bind="{...$props, label: 'Typing', placeholder: 'Type to see the effect...', value: '' }" hint="Between 8 and 16 characters" >
+        <template v-slot:append>
+          <span class="material-icons-round psui-text-gray-50 psui-mr-2">
+            visibility_off
+          </span>
+        </template>
+      </PsInput>
+ 
+      <PsInput v-bind="{label: 'Active', active: true }" value="Password123" hint="Between 8 and 16 characters">
+        <template v-slot:append>
+          <span class="material-icons-round psui-text-gray-50 psui-mr-2">
+            visibility
+          </span>
+        </template>
+      </PsInput>
+     
+      <PsInput v-bind="{...$props, label: 'Error', hasError: true }" hint="Between 8 and 16 characters" />
+      <PsInput v-bind="{...$props, label: 'Error with custom message', hasError: 'Format invalid' }" />    
+      <PsInput v-bind="{...$props, label: 'Prepend / Append ' }" hint="Between 8 and 16 characters">
+        <template v-slot:append>
+          Append
+        </template>
+        <template v-slot:prepend>
+          Prepend
+        </template>
+      </PsInput>
+ 
+      <PsInput label="Disabled" :disabled="true" value="100,000" hint="Between 8 and 16 characters">
+        <template v-slot:append>
+          <span class="material-icons-round psui-text-gray-50 psui-mr-2">
+            visibility
+          </span>
+        </template>
+      </PsInput>
+ 
+      <PsInput v-bind="{...$props, label: 'Disabled without value', disabled: true, value: '', hint: false }">
+        <template v-slot:append>
+          <span class="material-icons-round psui-text-gray-50 psui-mr-2">
+            visibility_off
+          </span>
+        </template>
+      </PsInput>
+ 
+      <PsInput v-bind="{...$props, label: 'Active/Disabled', disabled: true, active: true }" hint="Between 8 and 16 characters">
+        <template v-slot:append>
+          <span class="material-icons-round psui-text-gray-50 psui-mr-2">
+            visibility_off
+          </span>
+        </template>
+      </PsInput>      
+    </div>
+  `
+})
+ 
 const TemplateSlots = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
   components: { PsInput },
@@ -91,12 +196,12 @@ const TemplateSlots = (args, { argTypes }) => ({
         <template v-slot:append>
           ft²
         </template>
-      </PsInput>   
+      </PsInput>  
       <PsInput v-bind="$props" class="psui-mb-4">
         <template v-slot:prepend>
           ft²
         </template>
-      </PsInput>   
+      </PsInput>  
       <PsInput v-bind="$props" class="psui-mb-4">
         <template v-slot:prepend>
           ft²
@@ -108,8 +213,8 @@ const TemplateSlots = (args, { argTypes }) => ({
     </div>
   `
 })
-
-export const InputText = TemplateDefault.bind({})
+ 
+export const InputText = TemplateInputText.bind({})
 InputText.args = {
   label: 'Input Text',
   placeholder: 'Placeholder',
@@ -118,8 +223,8 @@ InputText.args = {
   required: false,
   value: 10,
 }
-
-export const InputPassword = TemplateDefault.bind({})
+ 
+export const InputPassword = TemplateInputPassword.bind({})
 InputPassword.args = {
   type: 'password',
   label: 'Password',
@@ -127,7 +232,7 @@ InputPassword.args = {
   disabled: false,
   required: false,
 }
-
+ 
 export const InputSlots = TemplateSlots.bind({})
 InputSlots.args = {
   label: 'Label',

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>