sveltacular 0.0.58 → 0.0.60

package/dist/data/index.d.ts

@@ -1,4 +1,4 @@
-declare const Data: {
+export declare const Data: {
     US_States: {
         name: string;
         value: string;
@@ -30,4 +30,3 @@ declare const Data: {
         value: string;
     }[];
 };
-export default Data;

package/dist/data/index.js

@@ -2,7 +2,7 @@ import { Canada_Provinces, Canada_ProvinceCodes } from './canada.js';
 import { Countries, CountryCodes } from './countries.js';
 import { US_States, US_StateCodes } from './united-states.js';
 import { Colors } from './colors.js';
-const Data = {
+export const Data = {
     US_States,
     US_StateCodes,
     Canada_Provinces,
@@ -11,4 +11,3 @@ const Data = {
     CountryCodes,
     Colors
 };
-export default Data;

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,14 @@
+import { browser } from '$app/environment';
+export const navigateToAnchor = (anchor) => {
+    if (browser) {
+        setTimeout(() => {
+            if (window.top)
+                window.top.location.hash = anchor;
+            else
+                window.location.href = anchor;
+        }, 0);
+    }
+};
+export const getAnchor = () => {
+    return browser ? window.location.hash : null;
+};

package/dist/helpers/date.d.ts

@@ -1,4 +1,4 @@
-export type DateUnit = 'day' | 'month' | 'year' | 'minute' | 'hour' | 'second';
+import type { DateUnit } from '../index.js';
 export declare const currentDate: () => string;
 export declare const currentDateTime: () => string;
 export declare const addDays: (days: number, fromDate?: string | Date) => Date;

package/dist/index.d.ts

@@ -90,12 +90,17 @@ export { default as SkeletonText } from './placeholders/skeleton-text.svelte';
 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';
 export * from './helpers/navigate-to.js';
+export * from './helpers/nobr.js';
+export * from './helpers/random.js';
 export * from './helpers/round-to-decimals.js';
-export * from './helpers/unique-id.js';
+export * from './helpers/split-new-lines.js';
 export * from './helpers/subscribable.js';
 export * from './helpers/ucfirst.js';
-export * from './helpers/capitalize.js';
-export * from './helpers/split-new-lines.js';
+export * from './helpers/unique-id.js';
 export * from './data/index.js';

package/dist/index.js

@@ -101,13 +101,18 @@ export * from './types/data.js';
 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';
 export * from './helpers/navigate-to.js';
+export * from './helpers/nobr.js';
+export * from './helpers/random.js';
 export * from './helpers/round-to-decimals.js';
-export * from './helpers/unique-id.js';
+export * from './helpers/split-new-lines.js';
 export * from './helpers/subscribable.js';
 export * from './helpers/ucfirst.js';
-export * from './helpers/capitalize.js';
-export * from './helpers/split-new-lines.js';
+export * from './helpers/unique-id.js';
 // Data
 export * from './data/index.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/dist/types/date.d.ts

@@ -1,3 +1,4 @@
 export type DateTimeStyle = 'full' | 'long' | 'short' | 'medium';
 export type TZStyle = 'long' | 'short' | 'shortOffset' | 'longOffset' | 'shortGeneric' | 'longGeneric';
 export type DateType = 'date' | 'time' | 'datetime' | 'ago' | 'ymd' | 'ymdhm' | 'ymdhms' | 'ymdhmt' | 'ymdhmst';
+export type DateUnit = 'day' | 'month' | 'year' | 'minute' | 'hour' | 'second';

package/package.json

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