@skdx/vue-blocks 0.41.0 → 0.43.1

package/dist/sign-in-page/SignInPage.vue.d.cts

@@ -1,6 +1,6 @@
 import { type SignInDetail, type SignInProvider } from './types.cjs';
 /**
- * A sign-in panel: provider buttons, an email and password form, and a magic-link form, reporting the user's choice as one `sign-in` event.
+ * A sign-in panel: provider buttons (Google and Microsoft carry their brand marks), an email and password form, a magic-link form and an email-only form, reporting the user's choice as one `sign-in` event.
  *
  * @example
  * ```vue
@@ -17,7 +17,7 @@ type __VLS_Props = {
      * @default 'Sign in'
      */
     title?: string;
-    /** The ways to sign in, in render order; `'credentials'` and `'magic-link'` render forms, anything else a button. */
+    /** The ways to sign in, in render order; `'credentials'`, `'magic-link'` and `'email'` render forms, anything else a button. */
     providers: readonly SignInProvider[];
     /**
      * Message rendered into a derived error Alert; the block never clears it, the consumer does.
@@ -25,7 +25,22 @@ type __VLS_Props = {
      */
     error?: string | undefined;
     /**
-     * Label of the email field in both forms.
+     * Informational message rendered into a derived status Alert below the error, such as "Redirecting…".
+     * @default undefined — no notice renders.
+     */
+    notice?: string | undefined;
+    /**
+     * Disables every provider button and submit while the consumer is signing in or redirecting.
+     * @default false
+     */
+    busy?: boolean;
+    /**
+     * Initial value of the email field in every form, for a second step that already knows the address.
+     * @default undefined — the field starts empty.
+     */
+    email?: string | undefined;
+    /**
+     * Label of the email field in every form.
      * @default 'Email'
      */
     emailLabel?: string;
@@ -44,6 +59,11 @@ type __VLS_Props = {
      * @default 'Send magic link'
      */
     magicLinkLabel?: string;
+    /**
+     * Text of the email form's submit button (an email-only first step).
+     * @default 'Continue'
+     */
+    continueLabel?: string;
     /**
      * Formats a provider button's text from its entry, for wording or translation.
      * @default defaultProviderLabel — reads "Sign in with Google".
@@ -57,10 +77,14 @@ declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {
 }>, {
     title: string;
     error: string | undefined;
+    notice: string | undefined;
+    busy: boolean;
+    email: string | undefined;
     emailLabel: string;
     passwordLabel: string;
     submitLabel: string;
     magicLinkLabel: string;
+    continueLabel: string;
     getProviderLabel: (provider: SignInProvider) => string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/sign-in-page/SignInPage.vue.d.ts

@@ -1,6 +1,6 @@
 import { type SignInDetail, type SignInProvider } from './types.js';
 /**
- * A sign-in panel: provider buttons, an email and password form, and a magic-link form, reporting the user's choice as one `sign-in` event.
+ * A sign-in panel: provider buttons (Google and Microsoft carry their brand marks), an email and password form, a magic-link form and an email-only form, reporting the user's choice as one `sign-in` event.
  *
  * @example
  * ```vue
@@ -17,7 +17,7 @@ type __VLS_Props = {
      * @default 'Sign in'
      */
     title?: string;
-    /** The ways to sign in, in render order; `'credentials'` and `'magic-link'` render forms, anything else a button. */
+    /** The ways to sign in, in render order; `'credentials'`, `'magic-link'` and `'email'` render forms, anything else a button. */
     providers: readonly SignInProvider[];
     /**
      * Message rendered into a derived error Alert; the block never clears it, the consumer does.
@@ -25,7 +25,22 @@ type __VLS_Props = {
      */
     error?: string | undefined;
     /**
-     * Label of the email field in both forms.
+     * Informational message rendered into a derived status Alert below the error, such as "Redirecting…".
+     * @default undefined — no notice renders.
+     */
+    notice?: string | undefined;
+    /**
+     * Disables every provider button and submit while the consumer is signing in or redirecting.
+     * @default false
+     */
+    busy?: boolean;
+    /**
+     * Initial value of the email field in every form, for a second step that already knows the address.
+     * @default undefined — the field starts empty.
+     */
+    email?: string | undefined;
+    /**
+     * Label of the email field in every form.
      * @default 'Email'
      */
     emailLabel?: string;
@@ -44,6 +59,11 @@ type __VLS_Props = {
      * @default 'Send magic link'
      */
     magicLinkLabel?: string;
+    /**
+     * Text of the email form's submit button (an email-only first step).
+     * @default 'Continue'
+     */
+    continueLabel?: string;
     /**
      * Formats a provider button's text from its entry, for wording or translation.
      * @default defaultProviderLabel — reads "Sign in with Google".
@@ -57,10 +77,14 @@ declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {
 }>, {
     title: string;
     error: string | undefined;
+    notice: string | undefined;
+    busy: boolean;
+    email: string | undefined;
     emailLabel: string;
     passwordLabel: string;
     submitLabel: string;
     magicLinkLabel: string;
+    continueLabel: string;
     getProviderLabel: (provider: SignInProvider) => string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/sign-in-page/SignInPage.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +1 @@
-const a=require("../internal/part.cjs"),x=require("./types.cjs");let e=require("vue"),n=require("@skdx/vue");var P=["aria-labelledby"],b=(0,e.defineComponent)({__name:"SignInPage",props:{title:{default:"Sign in"},providers:{},error:{default:void 0},emailLabel:{default:"Email"},passwordLabel:{default:"Password"},submitLabel:{default:"Sign in"},magicLinkLabel:{default:"Send magic link"},getProviderLabel:{type:Function,default:x.defaultProviderLabel}},emits:["sign-in"],setup(i,{emit:f}){const d=i,s=f,c=(0,e.useId)(),m=(0,e.computed)(()=>d.providers.filter(r=>r.id==="credentials"||r.id==="magic-link")),u=(0,e.computed)(()=>d.providers.filter(r=>r.id!=="credentials"&&r.id!=="magic-link")),p=(0,e.computed)(()=>u.value.length>0&&m.value.length>0);function g(r,l){const t=r.get(l);return typeof t=="string"?t:""}function k(r,l){l.preventDefault();const t=new FormData(l.target),o=g(t,"email");s("sign-in",r==="credentials"?{providerId:r,email:o,password:g(t,"password")}:{providerId:r,email:o})}return(r,l)=>((0,e.openBlock)(),(0,e.createElementBlock)("section",(0,e.mergeProps)((0,e.unref)(a.skdxPart)("sign-in-page","root"),{"aria-labelledby":(0,e.unref)(c)}),[(0,e.createElementVNode)("div",(0,e.normalizeProps)((0,e.guardReactiveProps)((0,e.unref)(a.skdxPart)("sign-in-page","panel"))),[(0,e.createVNode)((0,e.unref)(n.SkdxHeading),(0,e.mergeProps)({id:(0,e.unref)(c)},(0,e.unref)(a.skdxPart)("sign-in-page","title"),{as:"h1"}),{default:(0,e.withCtx)(()=>[(0,e.createTextVNode)((0,e.toDisplayString)(i.title),1)]),_:1},16,["id"]),i.error?((0,e.openBlock)(),(0,e.createBlock)((0,e.unref)(n.SkdxAlert),(0,e.mergeProps)({key:0},(0,e.unref)(a.skdxPart)("sign-in-page","error"),{role:"alert",status:"danger"}),{default:(0,e.withCtx)(()=>[(0,e.createTextVNode)((0,e.toDisplayString)(i.error),1)]),_:1},16)):(0,e.createCommentVNode)("",!0),u.value.length?((0,e.openBlock)(),(0,e.createElementBlock)("div",(0,e.normalizeProps)((0,e.mergeProps)({key:1},(0,e.unref)(a.skdxPart)("sign-in-page","providers"))),[((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,null,(0,e.renderList)(u.value,t=>((0,e.openBlock)(),(0,e.createBlock)((0,e.unref)(n.SkdxButton),(0,e.mergeProps)({key:t.id},{ref_for:!0},(0,e.unref)(a.skdxPart)("sign-in-page","provider"),{type:"button","data-provider":t.id,onClick:o=>s("sign-in",{providerId:t.id})}),{default:(0,e.withCtx)(()=>[(0,e.createTextVNode)((0,e.toDisplayString)(d.getProviderLabel(t)),1)]),_:2},1040,["data-provider","onClick"]))),128))],16)):(0,e.createCommentVNode)("",!0),p.value?((0,e.openBlock)(),(0,e.createBlock)((0,e.unref)(n.SkdxDivider),(0,e.normalizeProps)((0,e.mergeProps)({key:2},(0,e.unref)(a.skdxPart)("sign-in-page","divider"))),null,16)):(0,e.createCommentVNode)("",!0),((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,null,(0,e.renderList)(m.value,t=>((0,e.openBlock)(),(0,e.createBlock)((0,e.unref)(n.SkdxForm),(0,e.mergeProps)({key:t.id},{ref_for:!0},(0,e.unref)(a.skdxPart)("sign-in-page","form"),{"data-provider":t.id,onSubmit:o=>k(t.id,o)}),{default:(0,e.withCtx)(()=>[(0,e.createVNode)((0,e.unref)(n.SkdxField),(0,e.mergeProps)({ref_for:!0},(0,e.unref)(a.skdxPart)("sign-in-page","field"),{label:i.emailLabel,required:""}),{default:(0,e.withCtx)(()=>[(0,e.createVNode)((0,e.unref)(n.SkdxTextField),{type:"email",name:"email",autocomplete:"email",required:""})]),_:1},16,["label"]),t.id==="credentials"?((0,e.openBlock)(),(0,e.createBlock)((0,e.unref)(n.SkdxField),(0,e.mergeProps)({key:0,ref_for:!0},(0,e.unref)(a.skdxPart)("sign-in-page","field"),{label:i.passwordLabel,required:""}),{default:(0,e.withCtx)(()=>[(0,e.createVNode)((0,e.unref)(n.SkdxPasswordInput),{name:"password",autocomplete:"current-password",required:""})]),_:1},16,["label"])):(0,e.createCommentVNode)("",!0),(0,e.createVNode)((0,e.unref)(n.SkdxButton),(0,e.mergeProps)({ref_for:!0},(0,e.unref)(a.skdxPart)("sign-in-page","submit"),{type:"submit"}),{default:(0,e.withCtx)(()=>[(0,e.createTextVNode)((0,e.toDisplayString)(t.id==="credentials"?i.submitLabel:i.magicLinkLabel),1)]),_:2},1040)]),_:2},1040,["data-provider","onSubmit"]))),128))],16)],16,P))}});exports.default=b;
+const r=require("../internal/part.cjs"),P=require("./types.cjs");let e=require("vue"),n=require("@skdx/vue");var v=["aria-labelledby"],B=(0,e.defineComponent)({__name:"SignInPage",props:{title:{default:"Sign in"},providers:{},error:{default:void 0},notice:{default:void 0},busy:{type:Boolean,default:!1},email:{default:void 0},emailLabel:{default:"Email"},passwordLabel:{default:"Password"},submitLabel:{default:"Sign in"},magicLinkLabel:{default:"Send magic link"},continueLabel:{default:"Continue"},getProviderLabel:{type:Function,default:P.defaultProviderLabel}},emits:["sign-in"],setup(l,{emit:k}){const o=l,s=k,c=(0,e.useId)(),f=new Set(["credentials","magic-link","email"]),u=(0,e.computed)(()=>o.providers.filter(a=>!f.has(a.id))),m=(0,e.computed)(()=>o.providers.filter(a=>f.has(a.id)));function p(a){return a==="credentials"?o.submitLabel:a==="email"?o.continueLabel:o.magicLinkLabel}const x=(0,e.computed)(()=>u.value.length>0&&m.value.length>0);function g(a,i){const t=a.get(i);return typeof t=="string"?t:""}function b(a,i){i.preventDefault();const t=new FormData(i.target),d=g(t,"email");s("sign-in",a==="credentials"?{providerId:a,email:d,password:g(t,"password")}:{providerId:a,email:d})}return(a,i)=>((0,e.openBlock)(),(0,e.createElementBlock)("section",(0,e.mergeProps)((0,e.unref)(r.skdxPart)("sign-in-page","root"),{"aria-labelledby":(0,e.unref)(c)}),[(0,e.createElementVNode)("div",(0,e.normalizeProps)((0,e.guardReactiveProps)((0,e.unref)(r.skdxPart)("sign-in-page","panel"))),[(0,e.createVNode)((0,e.unref)(n.SkdxHeading),(0,e.mergeProps)({id:(0,e.unref)(c)},(0,e.unref)(r.skdxPart)("sign-in-page","title"),{as:"h1"}),{default:(0,e.withCtx)(()=>[(0,e.createTextVNode)((0,e.toDisplayString)(l.title),1)]),_:1},16,["id"]),l.error?((0,e.openBlock)(),(0,e.createBlock)((0,e.unref)(n.SkdxAlert),(0,e.mergeProps)({key:0},(0,e.unref)(r.skdxPart)("sign-in-page","error"),{role:"alert",status:"danger"}),{default:(0,e.withCtx)(()=>[(0,e.createTextVNode)((0,e.toDisplayString)(l.error),1)]),_:1},16)):(0,e.createCommentVNode)("",!0),l.notice?((0,e.openBlock)(),(0,e.createBlock)((0,e.unref)(n.SkdxAlert),(0,e.mergeProps)({key:1},(0,e.unref)(r.skdxPart)("sign-in-page","notice"),{role:"status",status:"info"}),{default:(0,e.withCtx)(()=>[(0,e.createTextVNode)((0,e.toDisplayString)(l.notice),1)]),_:1},16)):(0,e.createCommentVNode)("",!0),u.value.length?((0,e.openBlock)(),(0,e.createElementBlock)("div",(0,e.normalizeProps)((0,e.mergeProps)({key:2},(0,e.unref)(r.skdxPart)("sign-in-page","providers"))),[((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,null,(0,e.renderList)(u.value,t=>((0,e.openBlock)(),(0,e.createBlock)((0,e.unref)(n.SkdxButton),(0,e.mergeProps)({key:t.id},{ref_for:!0},(0,e.unref)(r.skdxPart)("sign-in-page","provider"),{type:"button","data-provider":t.id,disabled:!!l.busy,onClick:d=>s("sign-in",{providerId:t.id})}),{default:(0,e.withCtx)(()=>[t.id==="google"?((0,e.openBlock)(),(0,e.createElementBlock)("svg",(0,e.mergeProps)({key:0,ref_for:!0},(0,e.unref)(r.skdxPart)("sign-in-page","provider-icon"),{viewBox:"0 0 24 24","aria-hidden":"true",focusable:"false"}),[...i[0]||(i[0]=[(0,e.createElementVNode)("path",{fill:"#4285F4",d:"M23.5 12.3c0-.8-.1-1.6-.2-2.3H12v4.5h6.5c-.3 1.5-1.1 2.7-2.4 3.6v3h3.9c2.3-2.1 3.5-5.2 3.5-8.8z"},null,-1),(0,e.createElementVNode)("path",{fill:"#34A853",d:"M12 24c3.2 0 6-1.1 8-2.9l-3.9-3c-1.1.7-2.5 1.2-4.1 1.2-3.1 0-5.8-2.1-6.7-5H1.3v3.1C3.3 21.3 7.3 24 12 24z"},null,-1),(0,e.createElementVNode)("path",{fill:"#FBBC05",d:"M5.3 14.3c-.5-1.5-.5-3.1 0-4.6V6.6H1.3c-1.7 3.4-1.7 7.4 0 10.8l4-3.1z"},null,-1),(0,e.createElementVNode)("path",{fill:"#EA4335",d:"M12 4.7c1.7 0 3.3.6 4.5 1.8l3.4-3.4C17.9 1.2 15.1 0 12 0 7.3 0 3.3 2.7 1.3 6.6l4 3.1c.9-2.9 3.6-5 6.7-5z"},null,-1)])],16)):t.id==="microsoft"?((0,e.openBlock)(),(0,e.createElementBlock)("svg",(0,e.mergeProps)({key:1,ref_for:!0},(0,e.unref)(r.skdxPart)("sign-in-page","provider-icon"),{viewBox:"0 0 24 24","aria-hidden":"true",focusable:"false"}),[...i[1]||(i[1]=[(0,e.createElementVNode)("rect",{x:"1",y:"1",width:"10.5",height:"10.5",fill:"#F25022"},null,-1),(0,e.createElementVNode)("rect",{x:"12.5",y:"1",width:"10.5",height:"10.5",fill:"#7FBA00"},null,-1),(0,e.createElementVNode)("rect",{x:"1",y:"12.5",width:"10.5",height:"10.5",fill:"#00A4EF"},null,-1),(0,e.createElementVNode)("rect",{x:"12.5",y:"12.5",width:"10.5",height:"10.5",fill:"#FFB900"},null,-1)])],16)):(0,e.createCommentVNode)("",!0),(0,e.createTextVNode)(" "+(0,e.toDisplayString)(o.getProviderLabel(t)),1)]),_:2},1040,["data-provider","disabled","onClick"]))),128))],16)):(0,e.createCommentVNode)("",!0),x.value?((0,e.openBlock)(),(0,e.createBlock)((0,e.unref)(n.SkdxDivider),(0,e.normalizeProps)((0,e.mergeProps)({key:3},(0,e.unref)(r.skdxPart)("sign-in-page","divider"))),null,16)):(0,e.createCommentVNode)("",!0),((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,null,(0,e.renderList)(m.value,t=>((0,e.openBlock)(),(0,e.createBlock)((0,e.unref)(n.SkdxForm),(0,e.mergeProps)({key:t.id,ref_for:!0},(0,e.unref)(r.skdxPart)("sign-in-page","form"),{"data-provider":t.id,onSubmit:d=>b(t.id,d)}),{default:(0,e.withCtx)(()=>[(0,e.createVNode)((0,e.unref)(n.SkdxField),(0,e.mergeProps)({ref_for:!0},(0,e.unref)(r.skdxPart)("sign-in-page","field"),{label:l.emailLabel,required:""}),{default:(0,e.withCtx)(()=>[(0,e.createVNode)((0,e.unref)(n.SkdxTextField),{type:"email",name:"email",autocomplete:"email","default-value":l.email??"",required:""},null,8,["default-value"])]),_:1},16,["label"]),t.id==="credentials"?((0,e.openBlock)(),(0,e.createBlock)((0,e.unref)(n.SkdxField),(0,e.mergeProps)({key:0,ref_for:!0},(0,e.unref)(r.skdxPart)("sign-in-page","field"),{label:l.passwordLabel,required:""}),{default:(0,e.withCtx)(()=>[(0,e.createVNode)((0,e.unref)(n.SkdxPasswordInput),{name:"password",autocomplete:"current-password",required:""})]),_:1},16,["label"])):(0,e.createCommentVNode)("",!0),(0,e.createVNode)((0,e.unref)(n.SkdxButton),(0,e.mergeProps)({ref_for:!0},(0,e.unref)(r.skdxPart)("sign-in-page","submit"),{type:"submit",disabled:!!l.busy}),{default:(0,e.withCtx)(()=>[(0,e.createTextVNode)((0,e.toDisplayString)(p(t.id)),1)]),_:2},1040,["disabled"])]),_:2},1040,["data-provider","onSubmit"]))),128))],16)],16,v))}});exports.default=B;

package/dist/sign-in-page/SignInPage.vue_vue_type_script_setup_true_lang.js

@@ -1 +1 @@
-import{skdxPart as e}from"../internal/part.js";import{defaultProviderLabel as a}from"./types.js";import{Fragment as i,computed as r,createBlock as t,createCommentVNode as d,createElementBlock as l,createElementVNode as n,createTextVNode as s,createVNode as o,defineComponent as p,guardReactiveProps as u,mergeProps as g,normalizeProps as m,openBlock as f,renderList as c,toDisplayString as v,unref as b,useId as k,withCtx as y}from"vue";import{SkdxAlert as S,SkdxButton as x,SkdxDivider as L,SkdxField as _,SkdxForm as w,SkdxHeading as P,SkdxPasswordInput as F,SkdxTextField as I}from"@skdx/vue";var h=["aria-labelledby"],C=/* @__PURE__ */p({__name:"SignInPage",props:{title:{default:"Sign in"},providers:{},error:{default:void 0},emailLabel:{default:"Email"},passwordLabel:{default:"Password"},submitLabel:{default:"Sign in"},magicLinkLabel:{default:"Send magic link"},getProviderLabel:{type:Function,default:a}},emits:["sign-in"],setup(a,{emit:p}){const C=a,q=p,B=k(),D=r(()=>C.providers.filter(e=>"credentials"===e.id||"magic-link"===e.id)),N=r(()=>C.providers.filter(e=>"credentials"!==e.id&&"magic-link"!==e.id)),V=r(()=>N.value.length>0&&D.value.length>0);function E(e,a){const i=e.get(a);return"string"==typeof i?i:""}return(r,p)=>(f(),l("section",g(b(e)("sign-in-page","root"),{"aria-labelledby":b(B)}),[n("div",m(u(b(e)("sign-in-page","panel"))),[o(b(P),g({id:b(B)},b(e)("sign-in-page","title"),{as:"h1"}),{default:y(()=>[s(v(a.title),1)]),_:1},16,["id"]),a.error?(f(),t(b(S),g({key:0},b(e)("sign-in-page","error"),{role:"alert",status:"danger"}),{default:y(()=>[s(v(a.error),1)]),_:1},16)):d("",!0),N.value.length?(f(),l("div",m(g({key:1},b(e)("sign-in-page","providers"))),[(f(!0),l(i,null,c(N.value,a=>(f(),t(b(x),g({key:a.id},{ref_for:!0},b(e)("sign-in-page","provider"),{type:"button","data-provider":a.id,onClick:e=>q("sign-in",{providerId:a.id})}),{default:y(()=>[s(v(C.getProviderLabel(a)),1)]),_:2},1040,["data-provider","onClick"]))),128))],16)):d("",!0),V.value?(f(),t(b(L),m(g({key:2},b(e)("sign-in-page","divider"))),null,16)):d("",!0),(f(!0),l(i,null,c(D.value,i=>(f(),t(b(w),g({key:i.id},{ref_for:!0},b(e)("sign-in-page","form"),{"data-provider":i.id,onSubmit:e=>function(e,a){a.preventDefault();const i=new FormData(a.target),r=E(i,"email");q("sign-in","credentials"===e?{providerId:e,email:r,password:E(i,"password")}:{providerId:e,email:r})}(i.id,e)}),{default:y(()=>[o(b(_),g({ref_for:!0},b(e)("sign-in-page","field"),{label:a.emailLabel,required:""}),{default:y(()=>[o(b(I),{type:"email",name:"email",autocomplete:"email",required:""})]),_:1},16,["label"]),"credentials"===i.id?(f(),t(b(_),g({key:0,ref_for:!0},b(e)("sign-in-page","field"),{label:a.passwordLabel,required:""}),{default:y(()=>[o(b(F),{name:"password",autocomplete:"current-password",required:""})]),_:1},16,["label"])):d("",!0),o(b(x),g({ref_for:!0},b(e)("sign-in-page","submit"),{type:"submit"}),{default:y(()=>[s(v("credentials"===i.id?a.submitLabel:a.magicLinkLabel),1)]),_:2},1040)]),_:2},1040,["data-provider","onSubmit"]))),128))],16)],16,h))}});export{C as default};
+import{skdxPart as e}from"../internal/part.js";import{defaultProviderLabel as a}from"./types.js";import{Fragment as i,computed as l,createBlock as t,createCommentVNode as r,createElementBlock as d,createElementVNode as n,createTextVNode as s,createVNode as o,defineComponent as u,guardReactiveProps as f,mergeProps as p,normalizeProps as g,openBlock as c,renderList as m,toDisplayString as v,unref as b,useId as k,withCtx as h}from"vue";import{SkdxAlert as y,SkdxButton as x,SkdxDivider as w,SkdxField as _,SkdxForm as L,SkdxHeading as S,SkdxPasswordInput as F,SkdxTextField as B}from"@skdx/vue";var P=["aria-labelledby"],C=/* @__PURE__ */u({__name:"SignInPage",props:{title:{default:"Sign in"},providers:{},error:{default:void 0},notice:{default:void 0},busy:{type:Boolean,default:!1},email:{default:void 0},emailLabel:{default:"Email"},passwordLabel:{default:"Password"},submitLabel:{default:"Sign in"},magicLinkLabel:{default:"Send magic link"},continueLabel:{default:"Continue"},getProviderLabel:{type:Function,default:a}},emits:["sign-in"],setup(a,{emit:u}){const C=a,I=u,z=k(),A=/* @__PURE__ */new Set(["credentials","magic-link","email"]),E=l(()=>C.providers.filter(e=>!A.has(e.id))),V=l(()=>C.providers.filter(e=>A.has(e.id)));function q(e){return"credentials"===e?C.submitLabel:"email"===e?C.continueLabel:C.magicLinkLabel}const D=l(()=>E.value.length>0&&V.value.length>0);function H(e,a){const i=e.get(a);return"string"==typeof i?i:""}return(l,u)=>(c(),d("section",p(b(e)("sign-in-page","root"),{"aria-labelledby":b(z)}),[n("div",g(f(b(e)("sign-in-page","panel"))),[o(b(S),p({id:b(z)},b(e)("sign-in-page","title"),{as:"h1"}),{default:h(()=>[s(v(a.title),1)]),_:1},16,["id"]),a.error?(c(),t(b(y),p({key:0},b(e)("sign-in-page","error"),{role:"alert",status:"danger"}),{default:h(()=>[s(v(a.error),1)]),_:1},16)):r("",!0),a.notice?(c(),t(b(y),p({key:1},b(e)("sign-in-page","notice"),{role:"status",status:"info"}),{default:h(()=>[s(v(a.notice),1)]),_:1},16)):r("",!0),E.value.length?(c(),d("div",g(p({key:2},b(e)("sign-in-page","providers"))),[(c(!0),d(i,null,m(E.value,i=>(c(),t(b(x),p({key:i.id},{ref_for:!0},b(e)("sign-in-page","provider"),{type:"button","data-provider":i.id,disabled:!!a.busy,onClick:e=>I("sign-in",{providerId:i.id})}),{default:h(()=>["google"===i.id?(c(),d("svg",p({key:0,ref_for:!0},b(e)("sign-in-page","provider-icon"),{viewBox:"0 0 24 24","aria-hidden":"true",focusable:"false"}),[...u[0]||(u[0]=[n("path",{fill:"#4285F4",d:"M23.5 12.3c0-.8-.1-1.6-.2-2.3H12v4.5h6.5c-.3 1.5-1.1 2.7-2.4 3.6v3h3.9c2.3-2.1 3.5-5.2 3.5-8.8z"},null,-1),n("path",{fill:"#34A853",d:"M12 24c3.2 0 6-1.1 8-2.9l-3.9-3c-1.1.7-2.5 1.2-4.1 1.2-3.1 0-5.8-2.1-6.7-5H1.3v3.1C3.3 21.3 7.3 24 12 24z"},null,-1),n("path",{fill:"#FBBC05",d:"M5.3 14.3c-.5-1.5-.5-3.1 0-4.6V6.6H1.3c-1.7 3.4-1.7 7.4 0 10.8l4-3.1z"},null,-1),n("path",{fill:"#EA4335",d:"M12 4.7c1.7 0 3.3.6 4.5 1.8l3.4-3.4C17.9 1.2 15.1 0 12 0 7.3 0 3.3 2.7 1.3 6.6l4 3.1c.9-2.9 3.6-5 6.7-5z"},null,-1)])],16)):"microsoft"===i.id?(c(),d("svg",p({key:1,ref_for:!0},b(e)("sign-in-page","provider-icon"),{viewBox:"0 0 24 24","aria-hidden":"true",focusable:"false"}),[...u[1]||(u[1]=[n("rect",{x:"1",y:"1",width:"10.5",height:"10.5",fill:"#F25022"},null,-1),n("rect",{x:"12.5",y:"1",width:"10.5",height:"10.5",fill:"#7FBA00"},null,-1),n("rect",{x:"1",y:"12.5",width:"10.5",height:"10.5",fill:"#00A4EF"},null,-1),n("rect",{x:"12.5",y:"12.5",width:"10.5",height:"10.5",fill:"#FFB900"},null,-1)])],16)):r("",!0),s(" "+v(C.getProviderLabel(i)),1)]),_:2},1040,["data-provider","disabled","onClick"]))),128))],16)):r("",!0),D.value?(c(),t(b(w),g(p({key:3},b(e)("sign-in-page","divider"))),null,16)):r("",!0),(c(!0),d(i,null,m(V.value,i=>(c(),t(b(L),p({key:i.id,ref_for:!0},b(e)("sign-in-page","form"),{"data-provider":i.id,onSubmit:e=>function(e,a){a.preventDefault();const i=new FormData(a.target),l=H(i,"email");I("sign-in","credentials"===e?{providerId:e,email:l,password:H(i,"password")}:{providerId:e,email:l})}(i.id,e)}),{default:h(()=>[o(b(_),p({ref_for:!0},b(e)("sign-in-page","field"),{label:a.emailLabel,required:""}),{default:h(()=>[o(b(B),{type:"email",name:"email",autocomplete:"email","default-value":a.email??"",required:""},null,8,["default-value"])]),_:1},16,["label"]),"credentials"===i.id?(c(),t(b(_),p({key:0,ref_for:!0},b(e)("sign-in-page","field"),{label:a.passwordLabel,required:""}),{default:h(()=>[o(b(F),{name:"password",autocomplete:"current-password",required:""})]),_:1},16,["label"])):r("",!0),o(b(x),p({ref_for:!0},b(e)("sign-in-page","submit"),{type:"submit",disabled:!!a.busy}),{default:h(()=>[s(v(q(i.id)),1)]),_:2},1040,["disabled"])]),_:2},1040,["data-provider","onSubmit"]))),128))],16)],16,P))}});export{C as default};

package/dist/sign-in-page/types.d.cts

@@ -1,6 +1,6 @@
 /** One way to sign in, listed in a `SkdxSignInPage`'s `providers`. */
 export interface SignInProvider {
-    /** The provider's id, `'credentials'` and `'magic-link'` rendering forms and anything else a button. */
+    /** The provider's id, `'credentials'`, `'magic-link'` and `'email'` rendering forms and anything else a button. */
     id: string;
     /** The provider's display name, from which its button label is formatted. */
     name: string;
@@ -10,7 +10,7 @@ export interface SignInDetail {
     /** The id of the provider the user chose. */
     providerId: string;
     /**
-     * The submitted email address, present for the credentials and magic-link forms.
+     * The submitted email address, present for the credentials, magic-link and email forms.
      * @default undefined — a provider button carries no email.
      */
     email?: string | undefined;

package/dist/sign-in-page/types.d.ts

@@ -1,6 +1,6 @@
 /** One way to sign in, listed in a `SkdxSignInPage`'s `providers`. */
 export interface SignInProvider {
-    /** The provider's id, `'credentials'` and `'magic-link'` rendering forms and anything else a button. */
+    /** The provider's id, `'credentials'`, `'magic-link'` and `'email'` rendering forms and anything else a button. */
     id: string;
     /** The provider's display name, from which its button label is formatted. */
     name: string;
@@ -10,7 +10,7 @@ export interface SignInDetail {
     /** The id of the provider the user chose. */
     providerId: string;
     /**
-     * The submitted email address, present for the credentials and magic-link forms.
+     * The submitted email address, present for the credentials, magic-link and email forms.
      * @default undefined — a provider button carries no email.
      */
     email?: string | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skdx/vue-blocks",
-  "version": "0.41.0",
+  "version": "0.43.1",
   "description": "Vue blocks for the SkandaDX design system — page-level compositions of @skdx/vue styled by @skdx/skins",
   "license": "MIT",
   "publishConfig": {
@@ -254,7 +254,7 @@
   "sideEffects": false,
   "peerDependencies": {
     "vue": "^3.5.0",
-    "@skdx/vue": "^0.41.0"
+    "@skdx/vue": "^0.43.1"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.0",
@@ -266,7 +266,7 @@
     "vitest": "^4.1.10",
     "vue": "^3.5.39",
     "vue-tsc": "^2.0.0",
-    "@skdx/vue": "0.41.0"
+    "@skdx/vue": "0.43.1"
   },
   "scripts": {
     "lint": "eslint . --cache --cache-location node_modules/.cache/eslint/",