@strands.gg/accui 1.7.2 → 1.7.3

package/dist/strands-auth-ui.es.js

@@ -6968,12 +6968,12 @@ const _hoisted_2$5 = { class: "profile-image-section" };
 const _hoisted_3$5 = { class: "profile-image-container" };
 const _hoisted_4$4 = { class: "profile-image-wrapper" };
 const _hoisted_5$4 = {
-  key: 1,
+  key: 0,
   class: "profile-avatar profile-avatar-with-image"
 };
 const _hoisted_6$2 = ["src", "alt"];
 const _hoisted_7$2 = {
-  key: 2,
+  key: 1,
   class: "profile-avatar profile-avatar-initials"
 };
 const _hoisted_8$2 = ["disabled"];
@@ -7652,16 +7652,15 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
             createElementVNode("div", _hoisted_2$5, [
               createElementVNode("div", _hoisted_3$5, [
                 createElementVNode("div", _hoisted_4$4, [
-                  currentUser.value ? (openBlock(), createBlock(unref(StrandsUiLevelProgress), {
-                    key: 0,
+                  createVNode(unref(StrandsUiLevelProgress), {
                     size: 140,
-                    value: currentUser.value.xp | 0,
-                    max: currentUser.value.next_level_xp | 1,
-                    level: currentUser.value.level | 0,
-                    "level-label": `LEVEL ${currentUser.value.level | 0}`,
-                    "user-settings": currentUser.value.settings,
+                    value: currentUser.value?.xp || 0,
+                    max: currentUser.value?.next_level_xp || 1,
+                    level: currentUser.value?.level || 0,
+                    "level-label": `LEVEL ${currentUser.value?.level || 0}`,
+                    "user-settings": currentUser.value?.settings,
                     class: "profile-progress-ring"
-                  }, null, 8, ["value", "max", "level", "level-label", "user-settings"])) : createCommentVNode("", true),
+                  }, null, 8, ["value", "max", "level", "level-label", "user-settings"]),
                   currentUser.value?.avatar ? (openBlock(), createElementBlock("div", _hoisted_5$4, [
                     createElementVNode("img", {
                       src: currentUser.value.avatar,
@@ -8127,7 +8126,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const StrandsUserProfile = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["__scopeId", "data-v-31d6a9db"]]);
+const StrandsUserProfile = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["__scopeId", "data-v-b880e15b"]]);
 const _hoisted_1$6 = { class: "accui-component-scope" };
 const _hoisted_2$4 = { class: "accui-w-full accui-min-w-100 accui-max-w-md accui-mx-auto accui-animate-slide-up" };
 const _hoisted_3$4 = { class: "accui-mt-8 accui-text-center" };
@@ -8555,10 +8554,15 @@ const _hoisted_3$2 = {
 const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   __name: "SignedIn",
   props: {
-    showFallback: { type: Boolean, default: true }
+    showFallback: { type: Boolean, default: true },
+    invert: { type: Boolean, default: false }
   },
   emits: ["sign-in-required"],
   setup(__props, { emit: __emit }) {
+    const props = __props;
+    const invert = props.invert ?? false;
+    const signedInOrInverted = computed(() => (isAuthenticated.value && !invert || !isAuthenticated.value && invert) && !showLoading.value);
+    const signedOutOrInverted = computed(() => (isAuthenticated.value && invert || !isAuthenticated.value && !invert) && props.showFallback && !showLoading.value);
     const emit = __emit;
     const isComponentReady = ref(false);
     const { isAuthenticated, isInitializing, isSigningIn, user, signOut } = useStrandsAuth();
@@ -8572,15 +8576,16 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
       emit("sign-in-required");
     };
     return (_ctx, _cache) => {
-      return unref(isAuthenticated) && !showLoading.value ? (openBlock(), createElementBlock("div", _hoisted_1$4, [
+      return signedInOrInverted.value ? (openBlock(), createElementBlock("div", _hoisted_1$4, [
         renderSlot(_ctx.$slots, "default", {
           user: unref(user),
-          signOut: unref(signOut)
+          signOut: unref(signOut),
+          invert: unref(invert)
         }, void 0, true)
-      ])) : !unref(isAuthenticated) && _ctx.showFallback && !showLoading.value ? (openBlock(), createElementBlock("div", _hoisted_2$2, [
+      ])) : signedOutOrInverted.value ? (openBlock(), createElementBlock("div", _hoisted_2$2, [
         renderSlot(_ctx.$slots, "fallback", { signIn }, () => [
           createElementVNode("div", { class: "signed-in-fallback" }, [
-            _cache[0] || (_cache[0] = createStaticVNode('<div class="signed-in-icon-container" data-v-ab5f199f><svg class="signed-in-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-v-ab5f199f><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" data-v-ab5f199f></path></svg></div><h3 class="signed-in-title" data-v-ab5f199f>Sign in required</h3><p class="signed-in-subtitle" data-v-ab5f199f>You need to be signed in to access this content.</p>', 3)),
+            _cache[0] || (_cache[0] = createStaticVNode('<div class="signed-in-icon-container" data-v-669fa3b4><svg class="signed-in-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-v-669fa3b4><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" data-v-669fa3b4></path></svg></div><h3 class="signed-in-title" data-v-669fa3b4>Sign in required</h3><p class="signed-in-subtitle" data-v-669fa3b4>You need to be signed in to access this content.</p>', 3)),
             createElementVNode("button", {
               onClick: signIn,
               class: "signed-in-button"
@@ -8600,7 +8605,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const SignedIn = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-ab5f199f"]]);
+const SignedIn = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-669fa3b4"]]);
 const _hoisted_1$3 = {
   key: 0,
   class: "animate-fade-in"
@@ -8900,17 +8905,22 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   props: {
     hideUser: { type: Boolean, default: false },
     variant: { default: "minimal" },
-    redirectUrl: { default: "/" }
+    redirectUrl: { default: "/" },
+    user: { default: void 0 },
+    menuAlign: { default: "right" },
+    menuVerticalAlign: { default: "bottom" }
   },
   emits: ["profile-updated", "signed-out", "signed-in"],
   setup(__props, { emit: __emit }) {
+    const props = __props;
     const emit = __emit;
-    const { currentUser: user, signOut } = useStrandsAuth();
+    const { currentUser, signOut } = useStrandsAuth();
     const showDropdown = ref(false);
     const showProfileModal = ref(false);
     const showSignInModal = ref(false);
     const containerRef = ref();
     const profileButtonRef = ref();
+    const user = computed(() => props.user || currentUser.value);
     const displayName = computed(() => {
       if (!user.value) return "User";
       if (user.value.username) {
@@ -9002,7 +9012,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         ref_key: "containerRef",
         ref: containerRef
       }, [
-        createVNode(unref(SignedIn), null, {
+        createVNode(unref(SignedIn), {
+          invert: !!props.user
+        }, {
           fallback: withCtx(() => [
             createElementVNode("button", {
               onClick: openSignIn,
@@ -9084,10 +9096,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 ])) : createCommentVNode("", true),
                 createElementVNode("div", _hoisted_5, [
                   createElementVNode("div", _hoisted_6, [
-                    unref(user)?.avatar ? (openBlock(), createElementBlock("img", {
+                    user.value?.avatar ? (openBlock(), createElementBlock("img", {
                       key: 0,
-                      src: unref(user).avatar,
-                      alt: `${unref(user).firstName || unref(user).email}'s avatar`,
+                      src: user.value.avatar,
+                      alt: `${user.value.firstName || user.value.email}'s avatar`,
                       class: "avatar-image"
                     }, null, 8, _hoisted_7)) : (openBlock(), createElementBlock("div", _hoisted_8, _cache[0] || (_cache[0] = [
                       createElementVNode("svg", {
@@ -9122,7 +9134,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 default: withCtx(() => [
                   showDropdown.value ? (openBlock(), createElementBlock("div", {
                     key: 0,
-                    class: "dropdown-menu",
+                    class: normalizeClass([
+                      "dropdown-menu",
+                      `dropdown-menu-align-${props.menuAlign}`,
+                      `dropdown-menu-vertical-${props.menuVerticalAlign}`
+                    ]),
                     role: "menu",
                     "aria-orientation": "vertical",
                     onKeydown: [
@@ -9135,20 +9151,20 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   }, [
                     createElementVNode("div", _hoisted_10, [
                       createElementVNode("div", _hoisted_11, [
-                        unref(user) ? (openBlock(), createElementBlock("div", _hoisted_12, [
+                        user.value ? (openBlock(), createElementBlock("div", _hoisted_12, [
                           createVNode(unref(StrandsUiLevelProgress), {
                             size: 80,
-                            value: unref(user).xp,
-                            max: unref(user).next_level_xp,
-                            level: unref(user).level,
-                            "level-label": `LEVEL ${unref(user).level}`,
-                            "user-settings": unref(user).settings,
+                            value: user.value.xp,
+                            max: user.value.next_level_xp,
+                            level: user.value.level,
+                            "level-label": `LEVEL ${user.value.level}`,
+                            "user-settings": user.value.settings,
                             class: "level-progress-overlay"
                           }, null, 8, ["value", "max", "level", "level-label", "user-settings"]),
-                          unref(user)?.avatar ? (openBlock(), createElementBlock("img", {
+                          user.value?.avatar ? (openBlock(), createElementBlock("img", {
                             key: 0,
-                            src: unref(user).avatar,
-                            alt: `${unref(user).firstName || unref(user).email}'s avatar`,
+                            src: user.value.avatar,
+                            alt: `${user.value.firstName || user.value.email}'s avatar`,
                             class: "dropdown-avatar-image"
                           }, null, 8, _hoisted_13)) : (openBlock(), createElementBlock("div", _hoisted_14, _cache[2] || (_cache[2] = [
                             createElementVNode("svg", {
@@ -9166,7 +9182,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                         ])) : createCommentVNode("", true),
                         createElementVNode("div", _hoisted_15, [
                           createElementVNode("div", _hoisted_16, toDisplayString(displayName.value), 1),
-                          createElementVNode("div", _hoisted_17, toDisplayString(unref(user)?.email), 1)
+                          createElementVNode("div", _hoisted_17, toDisplayString(user.value?.email), 1)
                         ])
                       ]),
                       _cache[5] || (_cache[5] = createElementVNode("div", { class: "dropdown-divider" }, null, -1)),
@@ -9217,7 +9233,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                         ]))
                       ])
                     ])
-                  ], 40, _hoisted_9)) : createCommentVNode("", true)
+                  ], 42, _hoisted_9)) : createCommentVNode("", true)
                 ]),
                 _: 1
               })
@@ -9253,21 +9269,22 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               ]),
               default: withCtx(() => [
                 createVNode(unref(StrandsUserProfile), {
+                  user: user.value,
                   onProfileUpdated: handleProfileUpdated,
                   onError: handleProfileError,
                   "in-modal": ""
-                })
+                }, null, 8, ["user"])
               ]),
               _: 1
             }, 8, ["open"])
           ]),
           _: 1
-        })
+        }, 8, ["invert"])
       ], 512);
     };
   }
 });
-const StrandsUserButton = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-5acc4f6e"]]);
+const StrandsUserButton = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-9e187d2c"]]);
 const components = {
   StrandsUiAlert,
   StrandsUiButton,