@hashrytech/quick-components-kit 0.12.11 → 0.13.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +6 -0
- package/dist/components/link-button/LinkButton.svelte +2 -1
- package/dist/components/tab-navigation/TabNavigation.svelte +33 -0
- package/dist/components/tab-navigation/TabNavigation.svelte.d.ts +16 -0
- package/dist/components/tab-navigation/index.d.ts +1 -0
- package/dist/components/tab-navigation/index.js +1 -0
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -20,7 +20,8 @@
|
|
|
20
20
|
|
|
21
21
|
</script>
|
|
22
22
|
|
|
23
|
-
<a {href} data-sveltekit-reload={reload} data-sveltekit-preload-data={preload ? 'hover' : false}
|
|
23
|
+
<a {href} data-sveltekit-reload={reload} data-sveltekit-preload-data={preload ? 'hover' : false}
|
|
24
|
+
class={twMerge("flex flex-row items-center gap-2 px-4 py-2 bg-button-primary hover:bg-button-primary-hover rounded-primary w-fit cursor-pointer text-white focus:outline-focus-primary", props.class)}>
|
|
24
25
|
{#if icon}<span class="w-10">{@render icon()}</span>{/if}
|
|
25
26
|
{@render children?.()}
|
|
26
27
|
</a>
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
<script lang="ts" module>
|
|
2
|
+
import { twMerge } from "tailwind-merge";
|
|
3
|
+
import type { ClassNameValue } from 'tailwind-merge';
|
|
4
|
+
|
|
5
|
+
export type TabNavigationLink = {
|
|
6
|
+
text: string;
|
|
7
|
+
href: string;
|
|
8
|
+
active: boolean;
|
|
9
|
+
};
|
|
10
|
+
|
|
11
|
+
export type TabNavigationProps = {
|
|
12
|
+
links: TabNavigationLink[];
|
|
13
|
+
preload?: boolean;
|
|
14
|
+
reload?: boolean;
|
|
15
|
+
divClasses?: ClassNameValue;
|
|
16
|
+
class?: ClassNameValue;
|
|
17
|
+
};
|
|
18
|
+
|
|
19
|
+
</script>
|
|
20
|
+
|
|
21
|
+
<script lang="ts">
|
|
22
|
+
let { links, preload=true, reload=false, divClasses, ...props }: TabNavigationProps = $props();
|
|
23
|
+
</script>
|
|
24
|
+
|
|
25
|
+
<div class={twMerge("flex flex-row flex-wrap gap-4 justify-start xxxs:justify-center items-start py-2 px-4 mt-8 font-semibold", divClasses)}>
|
|
26
|
+
{#each links as link}
|
|
27
|
+
<a class={twMerge("px-4 py-1 hover:border-primary-secondary-500 hover:border-b-2 text-gray-900 bg-transparent hover:bg-transparent rounded-none", link.active ? "border-primary-600 border-b-2": "", props.class)}
|
|
28
|
+
data-sveltekit-reload={reload} data-sveltekit-preload-data={preload ? 'hover' : false}
|
|
29
|
+
href={link.href}>
|
|
30
|
+
{link.text}
|
|
31
|
+
</a>
|
|
32
|
+
{/each}
|
|
33
|
+
</div>
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import type { ClassNameValue } from 'tailwind-merge';
|
|
2
|
+
export type TabNavigationLink = {
|
|
3
|
+
text: string;
|
|
4
|
+
href: string;
|
|
5
|
+
active: boolean;
|
|
6
|
+
};
|
|
7
|
+
export type TabNavigationProps = {
|
|
8
|
+
links: TabNavigationLink[];
|
|
9
|
+
preload?: boolean;
|
|
10
|
+
reload?: boolean;
|
|
11
|
+
divClasses?: ClassNameValue;
|
|
12
|
+
class?: ClassNameValue;
|
|
13
|
+
};
|
|
14
|
+
declare const TabNavigation: import("svelte").Component<TabNavigationProps, {}, "">;
|
|
15
|
+
type TabNavigation = ReturnType<typeof TabNavigation>;
|
|
16
|
+
export default TabNavigation;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as TabNavigation } from './TabNavigation.svelte';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as TabNavigation } from './TabNavigation.svelte';
|