release: WRNexusJS 0.6.0

.publish/ui/components/StrongPassword.wrn

@@ -1,62 +1,65 @@
 component StrongPassword {
-  props {
-    size = "default"
-    color = "primary"
-    label = "Password"
-    name = "password"
-    value = ""
-    placeholder = "Create a strong password"
-    autocomplete = "new-password"
-    minLength = 8
-    specialCharactersSet = "!@#$%^&*()_+-=[]{}|;:,.<>?"
-    requireLowercase = true
-    requireUppercase = true
-    requireNumber = true
-    requireSpecialCharacter = true
-    showRequirements = true
-    presentation = "inline"
-    hintText = "Use a unique password you do not use elsewhere."
-    emptyLabel = "Enter a password"
-    weakLabel = "Weak"
-    fairLabel = "Fair"
-    goodLabel = "Good"
-    strongLabel = "Strong"
-    disabled = false
-    readonly = false
-    required = false
-    invalid = false
-    validationMessage = ""
-    class = ""
-    @event input = function
-    @event change = function
-    @event strength = function
+  outputs {
+    input(payload: { value: string; score: number; maximumScore: number; percent: number; level: string })
+    change(payload: { value: string; score: number; maximumScore: number; percent: number; level: string })
+    strength(payload: { value: string; score: number; maximumScore: number; percent: number; level: string })
   }
 
+  props {
+    size: string = "default"
+    color: string = "primary"
+    label: string = "Password"
+    name: string = "password"
+    value: string = ""
+    placeholder: string = "Create a strong password"
+    autocomplete: string = "new-password"
+    minLength: number = 8
+    specialCharactersSet: string = "!@#$%^&*()_+-=[]{}|;:,.<>?"
+    requireLowercase: boolean = true
+    requireUppercase: boolean = true
+    requireNumber: boolean = true
+    requireSpecialCharacter: boolean = true
+    showRequirements: boolean = true
+    presentation: string = "inline"
+    hintText: string = "Use a unique password you do not use elsewhere."
+    emptyLabel: string = "Enter a password"
+    weakLabel: string = "Weak"
+    fairLabel: string = "Fair"
+    goodLabel: string = "Good"
+    strongLabel: string = "Strong"
+    disabled: boolean = false
+    readonly: boolean = false
+    required: boolean = false
+    invalid: boolean = false
+    validationMessage: string = ""
+    class: string = ""
+}
+
   state password = value
-  state detailsOpen = false
+  state detailsOpen: boolean = false
 
   functions {
-    function hasMinimumLength() {
+    shared function hasMinimumLength() {
       return password.length >= Number(minLength)
     }
 
-    function hasLowercase() {
+    shared function hasLowercase() {
       return password !== password.toUpperCase()
     }
 
-    function hasUppercase() {
+    shared function hasUppercase() {
       return password !== password.toLowerCase()
     }
 
-    function hasNumber() {
+    shared function hasNumber() {
       return containsCharacterAt("0123456789", 0)
     }
 
-    function hasSpecialCharacter() {
+    shared function hasSpecialCharacter() {
       return containsCharacterAt(specialCharactersSet, 0)
     }
 
-    function containsCharacterAt(characters, index) {
+    shared function containsCharacterAt(characters, index) {
       if (index >= characters.length) {
         return false
       }
@@ -66,19 +69,19 @@ component StrongPassword {
       return containsCharacterAt(characters, index + 1)
     }
 
-    function score() {
+    shared function score() {
       return (hasMinimumLength() ? 1 : 0) + (requireLowercase && hasLowercase() ? 1 : 0) + (requireUppercase && hasUppercase() ? 1 : 0) + (requireNumber && hasNumber() ? 1 : 0) + (requireSpecialCharacter && hasSpecialCharacter() ? 1 : 0)
     }
 
-    function maximumScore() {
+    shared function maximumScore() {
       return 1 + (requireLowercase ? 1 : 0) + (requireUppercase ? 1 : 0) + (requireNumber ? 1 : 0) + (requireSpecialCharacter ? 1 : 0)
     }
 
-    function strengthPercent() {
+    shared function strengthPercent() {
       return Math.round(score() / maximumScore() * 100)
     }
 
-    function strengthLevel() {
+    shared function strengthLevel() {
       if (!password) {
         return "empty"
       }
@@ -94,7 +97,7 @@ component StrongPassword {
       return "strong"
     }
 
-    function strengthLabel() {
+    shared function strengthLabel() {
       if (strengthLevel() === "weak") {
         return weakLabel
       }
@@ -137,8 +140,8 @@ component StrongPassword {
           aria-describedby="{validationMessage ? name + '-validation' : hintText ? name + '-hint' : ''}"
           @focus="detailsOpen = true"
           @blur="detailsOpen = false"
-          @input="password = event.target.value; $emit('input', { value: password, score: score(), maximumScore: maximumScore(), percent: strengthPercent(), level: strengthLevel() }); $emit('strength', { value: password, score: score(), maximumScore: maximumScore(), percent: strengthPercent(), level: strengthLevel() })"
-          @change="$emit('change', { value: password, score: score(), maximumScore: maximumScore(), percent: strengthPercent(), level: strengthLevel() })"
+          @input="password = event.target.value; output.input({ value: password, score: score(), maximumScore: maximumScore(), percent: strengthPercent(), level: strengthLevel() }); output.strength({ value: password, score: score(), maximumScore: maximumScore(), percent: strengthPercent(), level: strengthLevel() })"
+          @change="output.change({ value: password, score: score(), maximumScore: maximumScore(), percent: strengthPercent(), level: strengthLevel() })"
         />
 
         {#if presentation === "popover"}