@hyvor/design 1.1.3 → 1.1.5

package/dist/components/Button/Button.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { legacyHandlers } from '../../legacy.js';
 	import { createBubbler } from 'svelte/legacy';
 
 	const bubble = createBubbler();
@@ -16,6 +17,17 @@
 		end?: import('svelte').Snippet;
 		action?: import('svelte').Snippet;
 		[key: string]: any;
+
+		onkeyup?: (event: KeyboardEvent) => void;
+		onkeydown?: (event: KeyboardEvent) => void;
+		onkeypress?: (event: KeyboardEvent) => void;
+		onfocus?: (event: FocusEvent) => void;
+		onblur?: (event: FocusEvent) => void;
+		onclick?: (event: MouseEvent) => void;
+		onmouseover?: (event: MouseEvent) => void;
+		onmouseenter?: (event: MouseEvent) => void;
+		onmouseleave?: (event: MouseEvent) => void;
+		onchange?: (event: Event) => void;
 	}
 
 	let {
@@ -30,6 +42,18 @@
 		children,
 		end,
 		action,
+
+		onkeyup,
+		onkeydown,
+		onkeypress,
+		onfocus,
+		onblur,
+		onclick,
+		onmouseover,
+		onmouseenter,
+		onmouseleave,
+		onchange,
+
 		...rest
 	}: Props = $props();
 </script>
@@ -38,16 +62,18 @@
 	this={as}
 	class="button {size} {color} {variant} {align}"
 	class:block
-	onkeyup={bubble('keyup')}
-	onkeydown={bubble('keydown')}
-	onkeypress={bubble('keypress')}
-	onfocus={bubble('focus')}
-	onblur={bubble('blur')}
-	onclick={bubble('click')}
-	onmouseover={bubble('mouseover')}
-	onmouseenter={bubble('mouseenter')}
-	onmouseleave={bubble('mouseleave')}
-	onchange={bubble('change')}
+
+	onkeyup={legacyHandlers(onkeyup, bubble('keyup'))}
+	onkeydown={legacyHandlers(onkeydown, bubble('keydown'))}
+	onkeypress={legacyHandlers(onkeypress, bubble('keypress'))}
+	onfocus={legacyHandlers(onfocus, bubble('focus'))}
+	onblur={legacyHandlers(onblur, bubble('blur'))}
+	onclick={legacyHandlers(onclick, bubble('click'))}
+	onmouseover={legacyHandlers(onmouseover, bubble('mouseover'))}
+	onmouseenter={legacyHandlers(onmouseenter, bubble('mouseenter'))}
+	onmouseleave={legacyHandlers(onmouseleave, bubble('mouseleave'))}
+	onchange={legacyHandlers(onchange, bubble('change'))}
+
 	role="button"
 	tabindex="0"
 	bind:this={button}

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

@@ -11,6 +11,16 @@ interface Props {
     end?: import('svelte').Snippet;
     action?: import('svelte').Snippet;
     [key: string]: any;
+    onkeyup?: (event: KeyboardEvent) => void;
+    onkeydown?: (event: KeyboardEvent) => void;
+    onkeypress?: (event: KeyboardEvent) => void;
+    onfocus?: (event: FocusEvent) => void;
+    onblur?: (event: FocusEvent) => void;
+    onclick?: (event: MouseEvent) => void;
+    onmouseover?: (event: MouseEvent) => void;
+    onmouseenter?: (event: MouseEvent) => void;
+    onmouseleave?: (event: MouseEvent) => void;
+    onchange?: (event: Event) => void;
 }
 declare const Button: import("svelte").Component<Props, {}, "button">;
 type Button = ReturnType<typeof Button>;

package/dist/components/CodeBlock/TabbedCodeBlock.svelte

@@ -0,0 +1,78 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	import Button from "../Button/Button.svelte";
+
+    interface Props {
+        children: Snippet;
+        tabs: string[];
+    }
+
+    let { children, tabs }: Props = $props();
+    let activeTab = $state(tabs[0]);
+
+    function activateTab(tab: string) {
+        activeTab = tab;
+
+        const pres = blocksEl.querySelectorAll("pre");
+        const tabIndex = tabs.indexOf(tab);
+
+        pres.forEach((pre, index) => {
+            if (index === tabIndex) {
+                pre.style.display = "block";
+            } else {
+                pre.style.display = "none";
+            }
+        });
+    }
+
+    let blocksEl: HTMLDivElement;
+</script>
+
+<div class="tabbed">
+
+    <div class="selectors">
+        {#each tabs as tab}
+            <Button 
+                size="x-small" 
+                color={activeTab === tab ? 'accent' : 'input'}
+                onclick={() => activateTab(tab)}
+            >{tab}</Button>
+        {/each}
+    </div>
+
+    <div class="blocks" bind:this={blocksEl}>
+        {@render children()}
+    </div>
+
+</div>
+
+<style>
+
+    .tabbed {
+        margin: 1.5rem 0 1rem 0;
+        position: relative
+    }
+
+    .selectors {
+        display: inline-flex;
+        position: absolute;
+        top: 0;
+        left: 20px;
+        z-index: 1;
+        transform: translateY(-50%);
+        gap: 3px;
+    }
+
+    .selectors > :global(button) {
+        border: 1px solid var(--border);
+    }
+
+    .blocks > :global(pre:not(:first-child)) {
+        display: none;
+    }
+
+    .blocks > :global(pre) {
+        margin: 0
+    }
+
+</style>

package/dist/components/CodeBlock/TabbedCodeBlock.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from "svelte";
+interface Props {
+    children: Snippet;
+    tabs: string[];
+}
+declare const TabbedCodeBlock: import("svelte").Component<Props, {}, "">;
+type TabbedCodeBlock = ReturnType<typeof TabbedCodeBlock>;
+export default TabbedCodeBlock;

package/dist/components/index.d.ts

@@ -11,6 +11,7 @@ export { default as BoxShadowPicker } from './BoxShadowPicker/BoxShadowPicker.sv
 export { default as Callout } from './Callout/Callout.svelte';
 export { default as Checkbox } from './Checkbox/Checkbox.svelte';
 export { default as CodeBlock } from './CodeBlock/CodeBlock.svelte';
+export { default as TabbedCodeBlock } from './CodeBlock/TabbedCodeBlock.svelte';
 export { default as ColorPicker } from './ColorPicker/ColorPicker.svelte';
 export { default as DarkProvider } from './Dark/DarkProvider.svelte';
 export { default as DarkToggle } from './Dark/DarkToggle.svelte';

package/dist/components/index.js

@@ -11,6 +11,7 @@ export { default as BoxShadowPicker } from './BoxShadowPicker/BoxShadowPicker.sv
 export { default as Callout } from './Callout/Callout.svelte';
 export { default as Checkbox } from './Checkbox/Checkbox.svelte';
 export { default as CodeBlock } from './CodeBlock/CodeBlock.svelte';
+export { default as TabbedCodeBlock } from './CodeBlock/TabbedCodeBlock.svelte';
 export { default as ColorPicker } from './ColorPicker/ColorPicker.svelte';
 export { default as DarkProvider } from './Dark/DarkProvider.svelte';
 export { default as DarkToggle } from './Dark/DarkToggle.svelte';

package/dist/legacy.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Event can be KeyboardEvent, MouseEvent, TouchEvent, FocusEvent, or Event
+ */
+type CustomEventListener = (event: any) => void;
+/**
+ * Extends svelte4 handlers to support undefined
+ */
+export declare function legacyHandlers(...eventHandlers: (CustomEventListener | undefined)[]): EventListener;
+export {};

package/dist/legacy.js

@@ -0,0 +1,8 @@
+import { handlers } from "svelte/legacy";
+/**
+ * Extends svelte4 handlers to support undefined
+ */
+export function legacyHandlers(...eventHandlers) {
+    const all = eventHandlers.filter(h => h !== undefined);
+    return handlers(...all);
+}

package/package.json

@@ -59,5 +59,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"version": "1.1.3"
+	"version": "1.1.5"
 }