@strands.gg/accui 1.7.2 → 1.7.3

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

@@ -6969,12 +6969,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"];
@@ -7653,16 +7653,15 @@ const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
             vue.createElementVNode("div", _hoisted_2$5, [
               vue.createElementVNode("div", _hoisted_3$5, [
                 vue.createElementVNode("div", _hoisted_4$4, [
-                  currentUser.value ? (vue.openBlock(), vue.createBlock(vue.unref(StrandsUiLevelProgress), {
-                    key: 0,
+                  vue.createVNode(vue.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"])) : vue.createCommentVNode("", true),
+                  }, null, 8, ["value", "max", "level", "level-label", "user-settings"]),
                   currentUser.value?.avatar ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$4, [
                     vue.createElementVNode("img", {
                       src: currentUser.value.avatar,
@@ -8128,7 +8127,7 @@ const _sfc_main$8 = /* @__PURE__ */ vue.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" };
@@ -8556,10 +8555,15 @@ const _hoisted_3$2 = {
 const _sfc_main$5 = /* @__PURE__ */ vue.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 = vue.computed(() => (isAuthenticated.value && !invert || !isAuthenticated.value && invert) && !showLoading.value);
+    const signedOutOrInverted = vue.computed(() => (isAuthenticated.value && invert || !isAuthenticated.value && !invert) && props.showFallback && !showLoading.value);
     const emit = __emit;
     const isComponentReady = vue.ref(false);
     const { isAuthenticated, isInitializing, isSigningIn, user, signOut } = useStrandsAuth.useStrandsAuth();
@@ -8573,15 +8577,16 @@ const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
       emit("sign-in-required");
     };
     return (_ctx, _cache) => {
-      return vue.unref(isAuthenticated) && !showLoading.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$4, [
+      return signedInOrInverted.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$4, [
         vue.renderSlot(_ctx.$slots, "default", {
           user: vue.unref(user),
-          signOut: vue.unref(signOut)
+          signOut: vue.unref(signOut),
+          invert: vue.unref(invert)
         }, void 0, true)
-      ])) : !vue.unref(isAuthenticated) && _ctx.showFallback && !showLoading.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$2, [
+      ])) : signedOutOrInverted.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$2, [
         vue.renderSlot(_ctx.$slots, "fallback", { signIn }, () => [
           vue.createElementVNode("div", { class: "signed-in-fallback" }, [
-            _cache[0] || (_cache[0] = vue.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] = vue.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)),
             vue.createElementVNode("button", {
               onClick: signIn,
               class: "signed-in-button"
@@ -8601,7 +8606,7 @@ const _sfc_main$5 = /* @__PURE__ */ vue.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"
@@ -8901,17 +8906,22 @@ const _sfc_main = /* @__PURE__ */ vue.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.useStrandsAuth();
+    const { currentUser, signOut } = useStrandsAuth.useStrandsAuth();
     const showDropdown = vue.ref(false);
     const showProfileModal = vue.ref(false);
     const showSignInModal = vue.ref(false);
     const containerRef = vue.ref();
     const profileButtonRef = vue.ref();
+    const user = vue.computed(() => props.user || currentUser.value);
     const displayName = vue.computed(() => {
       if (!user.value) return "User";
       if (user.value.username) {
@@ -9003,7 +9013,9 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
         ref_key: "containerRef",
         ref: containerRef
       }, [
-        vue.createVNode(vue.unref(SignedIn), null, {
+        vue.createVNode(vue.unref(SignedIn), {
+          invert: !!props.user
+        }, {
           fallback: vue.withCtx(() => [
             vue.createElementVNode("button", {
               onClick: openSignIn,
@@ -9085,10 +9097,10 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                 ])) : vue.createCommentVNode("", true),
                 vue.createElementVNode("div", _hoisted_5, [
                   vue.createElementVNode("div", _hoisted_6, [
-                    vue.unref(user)?.avatar ? (vue.openBlock(), vue.createElementBlock("img", {
+                    user.value?.avatar ? (vue.openBlock(), vue.createElementBlock("img", {
                       key: 0,
-                      src: vue.unref(user).avatar,
-                      alt: `${vue.unref(user).firstName || vue.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)) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_8, _cache[0] || (_cache[0] = [
                       vue.createElementVNode("svg", {
@@ -9123,7 +9135,11 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                 default: vue.withCtx(() => [
                   showDropdown.value ? (vue.openBlock(), vue.createElementBlock("div", {
                     key: 0,
-                    class: "dropdown-menu",
+                    class: vue.normalizeClass([
+                      "dropdown-menu",
+                      `dropdown-menu-align-${props.menuAlign}`,
+                      `dropdown-menu-vertical-${props.menuVerticalAlign}`
+                    ]),
                     role: "menu",
                     "aria-orientation": "vertical",
                     onKeydown: [
@@ -9136,20 +9152,20 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                   }, [
                     vue.createElementVNode("div", _hoisted_10, [
                       vue.createElementVNode("div", _hoisted_11, [
-                        vue.unref(user) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_12, [
+                        user.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_12, [
                           vue.createVNode(vue.unref(StrandsUiLevelProgress), {
                             size: 80,
-                            value: vue.unref(user).xp,
-                            max: vue.unref(user).next_level_xp,
-                            level: vue.unref(user).level,
-                            "level-label": `LEVEL ${vue.unref(user).level}`,
-                            "user-settings": vue.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"]),
-                          vue.unref(user)?.avatar ? (vue.openBlock(), vue.createElementBlock("img", {
+                          user.value?.avatar ? (vue.openBlock(), vue.createElementBlock("img", {
                             key: 0,
-                            src: vue.unref(user).avatar,
-                            alt: `${vue.unref(user).firstName || vue.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)) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_14, _cache[2] || (_cache[2] = [
                             vue.createElementVNode("svg", {
@@ -9167,7 +9183,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                         ])) : vue.createCommentVNode("", true),
                         vue.createElementVNode("div", _hoisted_15, [
                           vue.createElementVNode("div", _hoisted_16, vue.toDisplayString(displayName.value), 1),
-                          vue.createElementVNode("div", _hoisted_17, vue.toDisplayString(vue.unref(user)?.email), 1)
+                          vue.createElementVNode("div", _hoisted_17, vue.toDisplayString(user.value?.email), 1)
                         ])
                       ]),
                       _cache[5] || (_cache[5] = vue.createElementVNode("div", { class: "dropdown-divider" }, null, -1)),
@@ -9218,7 +9234,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                         ]))
                       ])
                     ])
-                  ], 40, _hoisted_9)) : vue.createCommentVNode("", true)
+                  ], 42, _hoisted_9)) : vue.createCommentVNode("", true)
                 ]),
                 _: 1
               })
@@ -9254,21 +9270,22 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
               ]),
               default: vue.withCtx(() => [
                 vue.createVNode(vue.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,