@hyvor/design 1.1.13 → 1.1.14

package/dist/components/HyvorBar/BarUser.svelte

@@ -3,23 +3,27 @@
 	import ActionListItem from '../ActionList/ActionListItem.svelte';
 	import Dropdown from '../Dropdown/Dropdown.svelte';
 	import IconBoxArrowUpRight from '@hyvor/icons/IconBoxArrowUpRight';
-	import { barUser } from './bar.js';
 	import BarUserPreview from './BarUserPreview.svelte';
+	import BarUserPicture from './BarUserPicture.svelte';
 
 	interface Props {
 		instance: string;
+		logoutUrl?: string;
+		cloud: boolean;
 	}
 
-	let { instance }: Props = $props();
+	let { 
+		instance, 
+		logoutUrl = `${instance}/account/logout`,
+		cloud,
+	}: Props = $props();
 </script>
 
 <div class="wrap">
 	<Dropdown align="end" width={325}>
 		{#snippet trigger()}
 			<button class="user-wrap">
-				{#if $barUser}
-					<img class="user-picture" src={$barUser?.picture_url} alt={$barUser?.name} />
-				{/if}
+				<BarUserPicture />
 			</button>
 		{/snippet}
 
@@ -27,15 +31,19 @@
 			<ActionList>
 				<BarUserPreview />
 
-				<a href="{instance}/account" target="_blank">
-					<ActionListItem>
-						Manage Account
-						{#snippet end()}
-							<IconBoxArrowUpRight size={12} />
-						{/snippet}
-					</ActionListItem>
-				</a>
-				<a href="{instance}/account/logout">
+				{#if cloud}
+					<a href="{instance}/account" target="_blank">
+						<ActionListItem>
+							Manage Account
+							{#snippet end()}
+								<IconBoxArrowUpRight size={12} />
+							{/snippet}
+						</ActionListItem>
+					</a>
+				{/if}
+
+
+				<a href="{logoutUrl}">
 					<ActionListItem>Logout</ActionListItem>
 				</a>
 			</ActionList>
@@ -65,8 +73,4 @@
 	.user-wrap:hover {
 		box-shadow: 0 0 0 4px var(--input);
 	}
-	img {
-		width: 100%;
-		height: 100%;
-	}
 </style>

package/dist/components/HyvorBar/BarUser.svelte.d.ts

@@ -1,5 +1,7 @@
 interface Props {
     instance: string;
+    logoutUrl?: string;
+    cloud: boolean;
 }
 declare const BarUser: import("svelte").Component<Props, {}, "">;
 type BarUser = ReturnType<typeof BarUser>;

package/dist/components/HyvorBar/BarUserPicture.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+	import { barUser } from "./bar.js";
+</script>
+
+
+{#if $barUser}
+    {#if $barUser.picture_url}
+        <img src={$barUser.picture_url} alt={$barUser.name} />
+    {:else}
+        <span class="user-placeholder">
+            {$barUser.name ? $barUser.name[0].toUpperCase() : '?'}
+        </span>
+    {/if}
+{/if}
+
+<style>
+    img {
+        width: 30px;
+        height: 30px;
+        border-radius: 50%;
+    }
+    .user-placeholder {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 30px;
+        height: 30px;
+        border-radius: 50%;
+        color: var(--text);
+        font-size: 14px;
+        background-color: var(--input);
+    }
+</style>

package/dist/components/HyvorBar/BarUserPicture.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const BarUserPicture: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type BarUserPicture = InstanceType<typeof BarUserPicture>;
+export default BarUserPicture;

package/dist/components/HyvorBar/BarUserPreview.svelte

@@ -1,14 +1,21 @@
 <script lang="ts">
 	import { barUser } from './bar.js';
+	import BarUserPicture from './BarUserPicture.svelte';
 </script>
 
 {#if $barUser}
 	<div class="preview">
 		<div class="left">
-			<img src={$barUser.picture_url} alt={$barUser.name} />
+			<BarUserPicture />
 		</div>
 		<div class="right">
-			<div class="username">@{$barUser.username}</div>
+			<div class="username">
+				{#if $barUser.username}
+					@{$barUser.username}
+				{:else if $barUser.name}
+					{$barUser.name}
+				{/if}
+			</div>
 			<div class="email">{$barUser.email}</div>
 		</div>
 	</div>

package/dist/components/HyvorBar/HyvorBar.svelte

@@ -3,7 +3,7 @@
 	import { onMount } from 'svelte';
 	import BarProducts, { PRODUCTS } from './BarProducts.svelte';
 	import BarSupport from './BarSupport.svelte';
-	import { loadBarUser, setInstanceAndProduct, type BarConfig, type BarProduct } from './bar.js';
+	import { barUser, initBar, setInstanceAndProduct, type BarConfig, type BarUser as BarUserType } from './bar.js';
 	import BarUpdates from './BarUpdates.svelte';
 	import IconCaretDownFill from '@hyvor/icons/IconCaretDownFill';
 	import BarNotice from './Notice/BarNotice.svelte';
@@ -13,9 +13,31 @@
 		instance?: string;
 		product: string;
 		config?: Partial<BarConfig>;
+
+		// set a custom logo URL
+		// defaults to instance + '/api/public/logo/' + product + '.svg'
+		// recommended to use this for self-hostable products
+		logo?: string;
+
+		/**
+		 * Whether it is a HYVOR cloud-hosted product.
+		 * If false, we will hide some features
+		 */
+		cloud?: boolean;
+		authOverride?: {
+			user: BarUserType | null;
+			logoutUrl: string;
+		}
 	}
 
-	let { instance = 'https://hyvor.com', product, config = {} }: Props = $props();
+	let {
+		instance = 'https://hyvor.com', 
+		product, 
+		logo = `${instance}/api/public/logo/${product}.svg`,
+		config = {},
+		cloud = true,
+		authOverride = undefined
+	}: Props = $props();
 
 	let mobileShow = $state(false);
 
@@ -41,7 +63,14 @@
 
 	onMount(() => {
 		setInstanceAndProduct(instance, product);
-		loadBarUser();
+
+		if (cloud) {
+			initBar();
+		} else {
+			if (authOverride) {
+				barUser.set(authOverride.user);
+			}
+		}
 	});
 
 	function getName() {
@@ -59,7 +88,7 @@
 		<div class="left">
 			<a class="logo" href="/">
 				<img
-					src={instance + '/api/public/logo/' + product + '.svg'}
+					src={logo}
 					alt={product}
 					width="20"
 					height="20"
@@ -74,16 +103,20 @@
 			<BarNotice {instance} />
 
 			<div class="hidden-on-mobile">
-				<BarSupport config={configComplete} {product} mobile={mobileShow} />
-				<BarProducts {instance} mobile={mobileShow} />
-				<BarUpdates {instance} {product} />
+				{#if cloud}
+					<BarSupport config={configComplete} {product} mobile={mobileShow} />
+					<BarProducts {instance} mobile={mobileShow} />
+					<BarUpdates {instance} {product} />
+				{/if}
 			</div>
 
-			<div class="mobile">
-				<IconCaretDownFill />
-			</div>
+			{#if cloud}
+				<div class="mobile">
+					<IconCaretDownFill />
+				</div>
+			{/if}
 
-			<BarUser {instance} />
+			<BarUser {instance} logoutUrl={authOverride?.logoutUrl} {cloud} />
 		</div>
 	</div>
 

package/dist/components/HyvorBar/HyvorBar.svelte.d.ts

@@ -1,8 +1,18 @@
-import { type BarConfig } from './bar.js';
+import { type BarConfig, type BarUser as BarUserType } from './bar.js';
 interface Props {
     instance?: string;
     product: string;
     config?: Partial<BarConfig>;
+    logo?: string;
+    /**
+     * Whether it is a HYVOR cloud-hosted product.
+     * If false, we will hide some features
+     */
+    cloud?: boolean;
+    authOverride?: {
+        user: BarUserType | null;
+        logoutUrl: string;
+    };
 }
 declare const HyvorBar: import("svelte").Component<Props, {}, "">;
 type HyvorBar = ReturnType<typeof HyvorBar>;

package/dist/components/HyvorBar/bar.d.ts

@@ -5,11 +5,11 @@ export interface BarConfig {
     chat: boolean;
     g2: string | null;
 }
-interface BarUser {
+export interface BarUser {
     name: string | null;
-    username: string;
+    username?: string | null;
     email: string;
-    picture_url: string;
+    picture_url: string | null;
 }
 export interface BarUpdate {
     id: number;
@@ -34,7 +34,7 @@ export declare const barUnreadUpdates: import("svelte/store").Writable<number>;
 export declare const barLicense: import("svelte/store").Writable<BarResolvedLicense | null>;
 export declare const barHasFailedInvoices: import("svelte/store").Writable<boolean>;
 export declare function setInstanceAndProduct(instance_: string, product_: string): void;
-export declare function loadBarUser(): void;
+export declare function initBar(): void;
 export declare class UnreadUpdatesTimeLocalStorage {
     static KEY: string;
     static get(): number | null;
@@ -49,4 +49,3 @@ export declare const bar: {
      */
     reload: () => void;
 };
-export {};

package/dist/components/HyvorBar/bar.js

@@ -9,7 +9,7 @@ export function setInstanceAndProduct(instance_, product_) {
     instance = instance_;
     product = product_;
 }
-export function loadBarUser() {
+export function initBar() {
     const query = new URLSearchParams();
     query.set('product', product);
     const lastUnreadTime = UnreadUpdatesTimeLocalStorage.get();
@@ -90,6 +90,6 @@ export const bar = {
      * This is useful to create after, for example, a user creates a new blog
      */
     reload: () => {
-        loadBarUser();
+        initBar();
     }
 };

package/package.json

@@ -59,5 +59,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"version": "1.1.13"
+	"version": "1.1.14"
 }