release: WRNexusJS 0.6.0

packages/ui/components/AuthForm.wrn

@@ -1,27 +1,30 @@
 component AuthForm {
+  outputs {
+    submit(payload: { event: Event; mode: string; action: string })
+    change(payload: { value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)
+    input(payload: { value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)
+    focus(payload: { sourceEvent?: Event; [key: string]: string | number | boolean | null | object })
+    blur(payload: { sourceEvent?: Event; [key: string]: string | number | boolean | null | object })
+  }
+
   props {
-    @event submit = function
-    @event change = function
-    @event input = function
-    @event focus = function
-    @event blur = function
-    size = "default"
-    color = "primary"
-    mode = "sign-in"
-    action = "/api/auth/login"
-    method = "post"
-    title = "Sign in"
-    description = ""
-    returnTo = ""
-    schema = ""
-    showRemember = true
-    showName = true
-    submitLabel = "Continue"
-    class = ""
+size: string = "default"
+    color: string = "primary"
+    mode: string = "sign-in"
+    action: string = "/api/auth/login"
+    method: string = "post"
+    title: string = "Sign in"
+    description: string = ""
+    returnTo: string = ""
+    schema: string = ""
+    showRemember: boolean = true
+    showName: boolean = true
+    submitLabel: string = "Continue"
+    class: string = ""
   }
 
   functions {
-    function schemaName() {
+    shared function schemaName() {
       if (schema) return schema
       if (mode === "sign-in") return "auth-login"
       if (mode === "register") return "auth-register"
@@ -31,12 +34,12 @@ component AuthForm {
       return "auth-empty"
     }
 
-    function submitForm(event) {
-      $emit("submit", { event: event, mode: mode, action: action })
+    client function submitForm(event) {
+      output.submit({ event: event, mode: mode, action: action })
     }
-    function fieldEvent(type, event) {
-      const detail = event.detail || {}
-      $emit(type, { event: event, name: detail.name || "", value: detail.value || "" })
+    client function fieldEvent(type, payload) {
+      const detail = payload || {}
+      output[type]({ sourceEvent: detail.sourceEvent, name: detail.name || "", value: detail.value || "" })
     }
   }
 
@@ -52,20 +55,20 @@ component AuthForm {
         data-schema="{schemaName()}"
         data-wrnexus-runtime="auth"
         novalidate="true"
-        @submit="submitForm($event)"
+        @submit="submitForm(event)"
       >
         {#if returnTo}<input type="hidden" name="returnTo" value="{returnTo}" />{/if}
         {#if mode === "register" && showName}
-          <Input label="Full name" name="displayName" autocomplete="name" placeholder="Enter your full name" required="true" icon="icon-[lucide--user-round]" iconPosition="start" @change="fieldEvent('change', $event)" @input="fieldEvent('input', $event)" @focus="fieldEvent('focus', $event)" @blur="fieldEvent('blur', $event)" />
+          <Input label="Full name" name="displayName" autocomplete="name" placeholder="Enter your full name" required="true" icon="icon-[lucide--user-round]" iconPosition="start" @change="fieldEvent('change', payload)" @input="fieldEvent('input', payload)" @focus="fieldEvent('focus', payload)" @blur="fieldEvent('blur', payload)" />
         {/if}
         {#if mode === "sign-in" || mode === "register" || mode === "recover"}
-          <Input label="{mode === 'recover' ? 'Registered email or mobile' : 'Email, mobile, or username'}" name="{mode === 'recover' ? 'identifier' : mode === 'register' ? 'email' : 'identifier'}" type="{mode === 'register' ? 'email' : 'text'}" autocomplete="{mode === 'register' ? 'email' : 'username'}" placeholder="{mode === 'recover' ? 'Enter your registered identity' : 'Enter your identity'}" required="true" icon="icon-[lucide--at-sign]" iconPosition="start" @change="fieldEvent('change', $event)" @input="fieldEvent('input', $event)" @focus="fieldEvent('focus', $event)" @blur="fieldEvent('blur', $event)" />
+          <Input label="{mode === 'recover' ? 'Registered email or mobile' : 'Email, mobile, or username'}" name="{mode === 'recover' ? 'identifier' : mode === 'register' ? 'email' : 'identifier'}" type="{mode === 'register' ? 'email' : 'text'}" autocomplete="{mode === 'register' ? 'email' : 'username'}" placeholder="{mode === 'recover' ? 'Enter your registered identity' : 'Enter your identity'}" required="true" icon="icon-[lucide--at-sign]" iconPosition="start" @change="fieldEvent('change', payload)" @input="fieldEvent('input', payload)" @focus="fieldEvent('focus', payload)" @blur="fieldEvent('blur', payload)" />
         {/if}
         {#if mode === "sign-in" || mode === "register" || mode === "reset"}
-          <Input label="{mode === 'reset' ? 'New password' : 'Password'}" name="password" type="password" autocomplete="{mode === 'sign-in' ? 'current-password' : 'new-password'}" placeholder="Enter your password" required="true" icon="icon-[lucide--lock-keyhole]" iconPosition="start" @change="fieldEvent('change', $event)" @input="fieldEvent('input', $event)" @focus="fieldEvent('focus', $event)" @blur="fieldEvent('blur', $event)" />
+          <Input label="{mode === 'reset' ? 'New password' : 'Password'}" name="password" type="password" autocomplete="{mode === 'sign-in' ? 'current-password' : 'new-password'}" placeholder="Enter your password" required="true" icon="icon-[lucide--lock-keyhole]" iconPosition="start" @change="fieldEvent('change', payload)" @input="fieldEvent('input', payload)" @focus="fieldEvent('focus', payload)" @blur="fieldEvent('blur', payload)" />
         {/if}
         {#if mode === "register" || mode === "reset"}
-          <Input label="Confirm password" name="confirmPassword" type="password" autocomplete="new-password" placeholder="Enter the password again" required="true" icon="icon-[lucide--shield-check]" iconPosition="start" @change="fieldEvent('change', $event)" @input="fieldEvent('input', $event)" @focus="fieldEvent('focus', $event)" @blur="fieldEvent('blur', $event)" />
+          <Input label="Confirm password" name="confirmPassword" type="password" autocomplete="new-password" placeholder="Enter the password again" required="true" icon="icon-[lucide--shield-check]" iconPosition="start" @change="fieldEvent('change', payload)" @input="fieldEvent('input', payload)" @focus="fieldEvent('focus', payload)" @blur="fieldEvent('blur', payload)" />
         {/if}
         {#if mode === "mfa"}
           <PinInput label="Verification code" name="code" length={6} inputMode="numeric" />