sveltacular 0.0.59 → 0.0.61

package/dist/helpers/anchor.d.ts

@@ -0,0 +1,2 @@
+export declare const navigateToAnchor: (anchor: string) => void;
+export declare const getAnchor: () => string | null;

package/dist/helpers/anchor.js

@@ -0,0 +1,17 @@
+import { browser } from '$app/environment';
+export const navigateToAnchor = (anchor) => {
+    if (!browser)
+        return;
+    setTimeout(() => {
+        if (window.top)
+            window.top.location.hash = anchor;
+        else
+            window.location.href = anchor;
+    }, 0);
+};
+export const getAnchor = () => {
+    if (!browser)
+        return null;
+    const hash = window.top ? window.top.location.hash : window.location.hash;
+    return hash ? hash.slice(1) : null;
+};

package/dist/index.d.ts

@@ -91,6 +91,7 @@ export * from './types/data.js';
 export * from './types/date.js';
 export * from './types/form.js';
 export * from './helpers/ago.js';
+export * from './helpers/anchor.js';
 export * from './helpers/capitalize.js';
 export * from './helpers/date.js';
 export * from './helpers/debounce.js';

package/dist/index.js

@@ -102,6 +102,7 @@ export * from './types/date.js';
 export * from './types/form.js';
 // Helpers
 export * from './helpers/ago.js';
+export * from './helpers/anchor.js';
 export * from './helpers/capitalize.js';
 export * from './helpers/date.js';
 export * from './helpers/debounce.js';

package/dist/navigation/tabs/tab-context.d.ts

@@ -3,6 +3,7 @@ export type TabStyle = 'traditional' | 'underline' | 'outline' | 'overline';
 export type TabDefinition = {
     id: string;
     name: string;
+    defaultActive: boolean;
 };
 export interface TabContext {
     active: Subscribable<string | null>;

package/dist/navigation/tabs/tab-group.svelte

@@ -1,17 +1,38 @@
 <script>import { writable } from "svelte/store";
-import { setContext } from "svelte";
+import { createEventDispatcher, setContext } from "svelte";
 import { tabContext } from "./tab-context.js";
-import { subscribable } from "../../index.js";
+import { getAnchor, navigateToAnchor, subscribable } from "../../index.js";
 export let style = "traditional";
+const dispatch = createEventDispatcher();
 const tabs = writable([]);
 const register = (id, name, isActive) => {
-  tabs.update((value) => [...value, { id, name }]);
-  if (isActive)
-    active.set(id);
+  tabs.update((value) => [...value, { id, name, defaultActive: isActive }]);
+  checkActive();
+};
+const tabExists = (id) => {
+  const value = $tabs;
+  return value.some((tab) => tab.id === id);
+};
+let timeout = null;
+const checkActive = () => {
+  if (timeout)
+    clearTimeout(timeout);
+  timeout = setTimeout(() => {
+    const anchor = getAnchor();
+    if (anchor && tabExists(anchor))
+      active.set(anchor);
+    else {
+      const defaultActiveTab = $tabs.find((tab) => tab.defaultActive);
+      if (defaultActiveTab)
+        active.set(defaultActiveTab.id);
+    }
+  }, 10);
 };
 const active = writable(null);
 const selectTab = (id) => {
   active.set(id);
+  navigateToAnchor(id);
+  dispatch("change", id);
 };
 const ctx = {
   active: subscribable(active),

package/dist/navigation/tabs/tab-group.svelte.d.ts

@@ -5,6 +5,8 @@ declare const __propDef: {
         style?: TabStyle | undefined;
     };
     events: {
+        change: CustomEvent<string | null>;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {

package/dist/navigation/tabs/tab.svelte

@@ -5,13 +5,17 @@ import Loading from "../../placeholders/loading.svelte";
 export let title;
 export let href = void 0;
 export let active = false;
+export let id = void 0;
+const getId = () => id || title.trim().toLocaleLowerCase().replaceAll(" ", "_") || uniqueId();
 const dispatch = createEventDispatcher();
 const ctx = getContext(tabContext);
 const tabStyle = ctx.style || "traditional";
-const id = uniqueId();
-ctx.register(id, title, active);
+const _id = getId();
+ctx.register(_id, title, active);
 const unsubscribe = ctx.active.subscribe((selectedId) => {
-  active = selectedId === id;
+  active = selectedId === _id;
+  if (active)
+    dispatch("selected", _id);
   if (active && href) {
     console.log("Navigating to", href);
     navigateTo(href);
@@ -20,7 +24,7 @@ const unsubscribe = ctx.active.subscribe((selectedId) => {
 onDestroy(() => unsubscribe());
 </script>
 
-<article class:active>
+<article class:active class={tabStyle}>
 	{#if active}
 		{#if $$slots.default}
 			<slot />

package/dist/navigation/tabs/tab.svelte.d.ts

@@ -4,9 +4,10 @@ declare const __propDef: {
         title: string;
         href?: string | undefined;
         active?: boolean | undefined;
+        id?: string | undefined;
     };
     events: {
-        selectTab: CustomEvent<string>;
+        selected: CustomEvent<string>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "sveltacular",
-	"version": "0.0.59",
+	"version": "0.0.61",
 	"description": "A Svelte component library",
 	"main": "dist/index.js",
 	"module": "dist/index.js",