@hyvor/design 2.0.8 → 2.0.11

package/dist/cloud/HyvorBar/BarUpdatesList.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
-	import { barUnreadUpdates, UnreadUpdatesTimeLocalStorage, type BarUpdate } from './bar.js';
+	import { barUnreadUpdates, barLastReadUpdatesAt, type BarUpdate } from './bar.js';
 	import IconBoxArrowUpRight from '@hyvor/icons/IconBoxArrowUpRight';
 
 	import {
@@ -17,23 +17,23 @@
 	let loading = $state(true);
 	let error = $state(false);
 
-	let lastReadTime: null | number = $state(null);
+	let lastReadTime: null | number = $derived($barLastReadUpdatesAt);
 
 	const cloudContext = $derived(getCloudContext());
 
 	function fetchUpdates() {
 		error = false;
-		lastReadTime = UnreadUpdatesTimeLocalStorage.get();
 		loading = true;
 
-		fetch(cloudContext.instance + '/api/public/updates?types=company,' + cloudContext.component)
+		fetch(cloudContext.instance + '/api/public/updates?types=company,' + cloudContext.component, {
+			credentials: 'include'
+		})
 			.then((response) => response.json())
 			.then((data) => {
 				updates = data;
 
 				barUnreadUpdates.set(0);
-				// set as last read now
-				UnreadUpdatesTimeLocalStorage.setNow();
+				barLastReadUpdatesAt.set(Math.floor(Date.now() / 1000));
 			})
 			.catch(() => {
 				error = true;

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

@@ -15,13 +15,8 @@ export interface BarUpdate {
 export type BarUpdateType = 'company' | 'core' | 'talk' | 'blogs' | 'post' | 'relay' | 'fortguard';
 export declare const barUnreadUpdates: import("svelte/store").Writable<number>;
 export declare const barHasFailedInvoices: import("svelte/store").Writable<boolean>;
+export declare const barLastReadUpdatesAt: import("svelte/store").Writable<number | null>;
 export declare function initBar(): Promise<void>;
-export declare class UnreadUpdatesTimeLocalStorage {
-    static KEY: string;
-    static get(): number | null;
-    static set(value: string): void;
-    static setNow(): void;
-}
 export declare const bar: {
     /**
      * Refetches data like user info, unread updates, billing data, etc.

package/dist/cloud/HyvorBar/bar.js

@@ -2,6 +2,7 @@ import { writable } from 'svelte/store';
 import { getCloudContext } from '../CloudContext/cloudContextState.svelte.js';
 export const barUnreadUpdates = writable(0);
 export const barHasFailedInvoices = writable(false);
+export const barLastReadUpdatesAt = writable(null);
 export async function initBar() {
     const { user, organization, instance, component, deployment } = getCloudContext();
     if (deployment !== 'cloud') {
@@ -9,10 +10,6 @@ export async function initBar() {
     }
     const query = new URLSearchParams();
     query.set('component', component);
-    const lastUnreadTime = UnreadUpdatesTimeLocalStorage.get();
-    if (lastUnreadTime) {
-        query.set('last_read_updates_at', lastUnreadTime.toString());
-    }
     const response = await fetch(instance + '/api/v2/cloud/bar/init?' + query.toString(), {
         credentials: 'include'
     });
@@ -27,57 +24,11 @@ export async function initBar() {
     }
     barHasFailedInvoices.set(data.has_failed_invoices);
     barUnreadUpdates.set(data.unread_updates);
-    if (lastUnreadTime === null) {
-        UnreadUpdatesTimeLocalStorage.setNow();
-    }
-}
-export class UnreadUpdatesTimeLocalStorage {
-    static KEY = 'unread_updates';
-    static get() {
-        const val = BarLocalStorage.get(UnreadUpdatesTimeLocalStorage.KEY);
-        if (val) {
-            return Number(val);
-        }
-        return null;
-    }
-    static set(value) {
-        BarLocalStorage.set(UnreadUpdatesTimeLocalStorage.KEY, value);
-    }
-    static setNow() {
-        UnreadUpdatesTimeLocalStorage.set(Math.floor(Date.now() / 1000).toString());
-    }
-}
-class BarLocalStorage {
-    static KEY = 'hyvor_bar';
-    static getJson() {
-        try {
-            const data = localStorage.getItem(BarLocalStorage.KEY);
-            if (data) {
-                return JSON.parse(data);
-            }
-        }
-        catch (e) {
-            console.error(e);
-            return null;
-        }
-        return null;
-    }
-    static get(key) {
-        const data = BarLocalStorage.getJson();
-        if (data) {
-            return data[key];
-        }
-        return null;
+    if (data.last_read_updates_at !== null) {
+        barLastReadUpdatesAt.set(data.last_read_updates_at);
     }
-    static set(key, value) {
-        try {
-            const data = BarLocalStorage.getJson() || {};
-            data[key] = value;
-            localStorage.setItem(BarLocalStorage.KEY, JSON.stringify(data));
-        }
-        catch (e) {
-            console.error(e);
-        }
+    else {
+        barLastReadUpdatesAt.set(Math.floor(Date.now() / 1000));
     }
 }
 // exported to be used from outside

package/dist/components/Table/Table.svelte

@@ -2,14 +2,23 @@
 	interface Props {
 		columns: string;
 		hover?: boolean;
+		style?: 'default' | 'bordered';
 		children?: import('svelte').Snippet;
 	}
 
-	let { columns, hover = false, children }: Props = $props();
+	let { columns, hover = false, style = 'default', children }: Props = $props();
 
 	const hoverCss = hover ? '--local-hover-color: var(--hover);' : '';
 </script>
 
-<div class="table" style="--local-columns: {columns};{hoverCss}" role="table">
+<div class="table {style}" style="--local-columns: {columns};{hoverCss}" role="table">
 	{@render children?.()}
 </div>
+
+<style>
+	.table.bordered {
+		border-radius: 20px;
+		overflow: hidden;
+		border: 1px solid var(--border);
+	}
+</style>

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

@@ -1,6 +1,7 @@
 interface Props {
     columns: string;
     hover?: boolean;
+    style?: 'default' | 'bordered';
     children?: import('svelte').Snippet;
 }
 declare const Table: import("svelte").Component<Props, {}, "">;

package/dist/components/Table/TableRow.svelte

@@ -3,15 +3,16 @@
 
 	interface Props {
 		head?: boolean;
+		section?: boolean;
 		children: Snippet;
 	}
 
-	const { head = false, children, ...rest }: Props = $props();
+	const { head = false, section = false, children, ...rest }: Props = $props();
 
-	setContext('table-row', { head });
+	setContext('table-row', { head, section });
 </script>
 
-<div class:head {...rest} role="row">
+<div class:head class:section {...rest} role="row">
 	{@render children()}
 </div>
 
@@ -28,11 +29,37 @@
 		background: var(--accent-lightest);
 		margin-bottom: 5px;
 	}
-	div:hover:not(.head) {
+
+	:global(.table.bordered) div {
+		border-radius: 0;
+		padding: 13px 20px;
+		border-top: 1px solid var(--border);
+	}
+
+	:global(.table.bordered) div.head {
+		background: var(--box-background);
+		font-weight: 600;
+		font-size: 13px;
+		padding: 12px 20px;
+		margin-bottom: 0;
+		border-top: 0;
+	}
+
+	div:hover:not(.head, .section) {
 		background-color: var(--local-hover-color);
 	}
 	div > :global(*) {
 		padding-right: 5px;
 		word-wrap: break-word;
 	}
+
+	div.section {
+		background: var(--box-background);
+		font-size: 11px;
+		font-weight: 600;
+		letter-spacing: 0.06em;
+		text-transform: uppercase;
+		color: var(--text-light);
+		padding: 8px 20px;
+	}
 </style>

package/dist/components/Table/TableRow.svelte.d.ts

@@ -1,6 +1,7 @@
 import { type Snippet } from 'svelte';
 interface Props {
     head?: boolean;
+    section?: boolean;
     children: Snippet;
 }
 declare const TableRow: import("svelte").Component<Props, {}, "">;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@hyvor/design",
-	"version": "2.0.8",
+	"version": "2.0.11",
 	"license": "MIT",
 	"private": false,
 	"repository": {