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

package/dist/css/psui_styles.css

@@ -20079,11 +20079,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 +20099,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.33",
+  "version": "1.0.36",
   "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/components/forms/PsInput.vue

@@ -5,9 +5,6 @@
     
     <div 
       class="psui-el-input-wrapper" 
-      @mouseenter="isHoveringInputWrapper = true" 
-      @mouseleave="isHoveringInputWrapper = false"
-      :class="{ 'hover' : isHoveringInputWrapper }"
     >
     
       <div v-if="$slots.prepend" class="psui-el-input-prepend">
@@ -108,7 +105,6 @@ export default {
     },
 	},
   data: () => ({
-    isHoveringInputWrapper: false,
     isFocus: false,
   }),
   computed: {
@@ -135,10 +131,12 @@ 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/components/ui/PsIcon.vue

@@ -4,6 +4,7 @@
       v-if="getIconType === 'material-icons'"
       class="material-icons-round"
       :class="[getIconClasses]"
+      :style="{ fontSize: `${size}px`}"
     >
       {{ getIcon }}
     </span>
@@ -11,8 +12,8 @@
     <inline-svg
       v-else
       :src="icon"
-      :width="getWidth"
-      :height="getHeight"
+      :width="size"
+      :height="size"
       :stroke="getColor"
       :fill="getColor"
     ></inline-svg>
@@ -32,38 +33,30 @@ export default {
       type: String,
       default: 'more_horiz'
     },
+
     /**
      * It sets the type of the icon.
      */
     type: {
       type: String,
     },
+
     /**
      * It sets the style of the icon.
      */
     iconClasses: {
-      type: String
+      type: String,
+      default: null
     },
+
     /**
-     * It sets the size of the icon. 
+     * It sets the size of the icon.
      */
     size: {
       type: [Number, String],
-    },
-    /**
-     * It sets the width of the icon.
-     */
-    width: {
-      type: [Number, String],
-      default: 24
-    },
-    /**
-     * It sets the height of the icon.
-     */
-    height: {
-      type: [Number, String],
       default: 24
     },
+
     /**
      * It sets fill property of the icon.
      */
@@ -71,6 +64,7 @@ export default {
       type: String,
       default: null
     },
+
     /**
      * It sets the color of the icon.
      */
@@ -83,6 +77,7 @@ export default {
           typeof(tailwindConfig.theme.colors[value]) != 'undefined'
       }
     },
+
     /**
      * It set a animation icon if needed.
      */
@@ -90,6 +85,7 @@ export default {
       type: String,
       default: 'hourglass_top'
     },
+    
     /**
      * It sets a error when the icon is not available.
      */
@@ -120,14 +116,9 @@ export default {
     },
     getIconClasses() {
       if(this.iconClasses) return this.iconClasses
-      return `${this.size} ${this.color}`
-    },
-    getWidth() {
-      if(this.size) return this.size
-      return this.width
+      return `${this.color}`
     },
     getHeight() {
-      if(this.size) return this.size
       return this.height
     },
     getColor() {

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',