@providame/vue 0.0.3 → 0.0.6

package/README.md

@@ -10,18 +10,30 @@ npm install @providame/vue vue
 
 ## Usage
 
-Install the plugin once, then import the CSS for the prebuilt components:
+Install the plugin once, and import the stylesheet:
 
 ```ts
 import { createApp } from 'vue'
 import { ProvidamePlugin } from '@providame/vue'
-import '@providame/vue/style.css'
+import '@providame/vue/style.css' // required — see below
 
 createApp(App).use(ProvidamePlugin, {
   publishableKey: 'pk_test_...',
 })
 ```
 
+> **The stylesheet import is required.** Without it every prebuilt component
+> renders completely unstyled — there is no runtime fallback, and no error to
+> tell you what's wrong.
+>
+> This package ships a real CSS file rather than injecting styles at runtime,
+> so Nuxt and other SSR frameworks can inline it into the document head instead
+> of flashing unstyled content on first paint. `@providame/react` and
+> `@providame/sdk-js` inject at runtime and need no import — this package is
+> the exception, deliberately.
+>
+> In Nuxt, add it to `nuxt.config.ts` instead: `css: ['@providame/vue/style.css']`.
+
 ### Prebuilt components
 
 ```vue
@@ -34,6 +46,31 @@ import { SignIn } from '@providame/vue'
 </template>
 ```
 
+### Modal vs. page usage
+
+These components serve two contexts, and the footer link behaves differently
+in each:
+
+- **Page** — you render `<SignIn>` at your own `/sign-in` route. Pass
+  `sign-up-url` and the footer renders a normal link that navigates.
+- **Modal** — `<SignInButton mode="modal">` handles this for you: the footer
+  switches to sign-up *in place*, because navigating would tear the modal down.
+
+Rendering these inside your own modal? Attach the switch listener instead of
+passing a URL, and hold the view state yourself:
+
+```vue
+<SignIn v-if="view === 'sign-in'" @switch-to-sign-up="view = 'sign-up'" />
+<SignUp v-else @switch-to-sign-in="view = 'sign-in'" />
+```
+
+The listener takes precedence when both it and a URL are supplied.
+
+> `SignInButton` no longer accepts `sign-up-url` (nor `SignUpButton`
+> `sign-in-url`). They had no effect in `mode="redirect"` and produced a
+> modal-destroying navigation in `mode="modal"`. Pass those URLs to
+> `<SignIn>`/`<SignUp>` directly when rendering them as pages.
+
 ### Headless
 
 ```ts

package/dist/components/SignIn.vue.d.ts

@@ -13,8 +13,10 @@ type __VLS_Props = {
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     complete: (session: import("@providame/core").Session) => any;
+    switchToSignUp: () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onComplete?: ((session: import("@providame/core").Session) => any) | undefined;
+    onSwitchToSignUp?: (() => any) | undefined;
 }>, {
     title: string;
     signUpUrl: string;

package/dist/components/SignInButton.vue.d.ts

@@ -1,7 +1,6 @@
 type __VLS_Props = {
     mode?: "modal" | "redirect";
     signInUrl?: string;
-    signUpUrl?: string;
 };
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {

package/dist/components/SignUp.vue.d.ts

@@ -18,8 +18,10 @@ type __VLS_Props = {
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     complete: (session: import("@providame/core").Session) => any;
+    switchToSignIn: () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onComplete?: ((session: import("@providame/core").Session) => any) | undefined;
+    onSwitchToSignIn?: (() => any) | undefined;
 }>, {
     title: string;
     signInUrl: string;

package/dist/components/SignUpButton.vue.d.ts

@@ -1,7 +1,6 @@
 type __VLS_Props = {
     mode?: "modal" | "redirect";
     signUpUrl?: string;
-    signInUrl?: string;
 };
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {