feat: lint codebase and run precommit hook
This commit is contained in:
@@ -4,13 +4,13 @@ import List from './underline-tabs-list.svelte';
|
||||
import Trigger from './underline-tabs-trigger.svelte';
|
||||
|
||||
export {
|
||||
Root,
|
||||
Content,
|
||||
List,
|
||||
Trigger,
|
||||
//
|
||||
Root as UnderlineTabs,
|
||||
Content as UnderlineTabsContent,
|
||||
List as UnderlineTabsList,
|
||||
Trigger as UnderlineTabsTrigger
|
||||
Root,
|
||||
Content,
|
||||
List,
|
||||
Trigger,
|
||||
//
|
||||
Root as UnderlineTabs,
|
||||
Content as UnderlineTabsContent,
|
||||
List as UnderlineTabsList,
|
||||
Trigger as UnderlineTabsTrigger
|
||||
};
|
||||
|
||||
@@ -4,85 +4,85 @@ import type { Tabs as TabsPrimitive } from 'bits-ui';
|
||||
import { crossfade } from 'svelte/transition';
|
||||
|
||||
export const [send, receive] = crossfade({
|
||||
duration: (d) => Math.sqrt(d * 200)
|
||||
duration: (d) => Math.sqrt(d * 200)
|
||||
});
|
||||
|
||||
type UnderlineTabsRootProps = WritableBoxedValues<{
|
||||
value: string;
|
||||
value: string;
|
||||
}> &
|
||||
ReadableBoxedValues<{
|
||||
id: string;
|
||||
}>;
|
||||
ReadableBoxedValues<{
|
||||
id: string;
|
||||
}>;
|
||||
|
||||
class UnderlineTabsRootState {
|
||||
hoveredTab = $state<string | null>(null);
|
||||
isHovered = $state(false);
|
||||
constructor(readonly opts: UnderlineTabsRootProps) {
|
||||
this.hoveredTab = this.opts.value.current;
|
||||
}
|
||||
hoveredTab = $state<string | null>(null);
|
||||
isHovered = $state(false);
|
||||
constructor(readonly opts: UnderlineTabsRootProps) {
|
||||
this.hoveredTab = this.opts.value.current;
|
||||
}
|
||||
}
|
||||
|
||||
type UnderlineTabsTriggerProps = ReadableBoxedValues<{
|
||||
value: string;
|
||||
onmouseenter: TabsPrimitive.TriggerProps['onmouseenter'];
|
||||
onmouseleave: TabsPrimitive.TriggerProps['onmouseleave'];
|
||||
onfocus: TabsPrimitive.TriggerProps['onfocus'];
|
||||
onblur: TabsPrimitive.TriggerProps['onblur'];
|
||||
value: string;
|
||||
onmouseenter: TabsPrimitive.TriggerProps['onmouseenter'];
|
||||
onmouseleave: TabsPrimitive.TriggerProps['onmouseleave'];
|
||||
onfocus: TabsPrimitive.TriggerProps['onfocus'];
|
||||
onblur: TabsPrimitive.TriggerProps['onblur'];
|
||||
}>;
|
||||
|
||||
class UnderlineTabsTriggerState {
|
||||
constructor(
|
||||
readonly opts: UnderlineTabsTriggerProps,
|
||||
readonly rootState: UnderlineTabsRootState
|
||||
) {}
|
||||
constructor(
|
||||
readonly opts: UnderlineTabsTriggerProps,
|
||||
readonly rootState: UnderlineTabsRootState
|
||||
) {}
|
||||
|
||||
handleFocus() {
|
||||
this.rootState.isHovered = true;
|
||||
this.rootState.hoveredTab = this.opts.value.current;
|
||||
}
|
||||
handleFocus() {
|
||||
this.rootState.isHovered = true;
|
||||
this.rootState.hoveredTab = this.opts.value.current;
|
||||
}
|
||||
|
||||
handleBlur() {
|
||||
if (this.rootState.hoveredTab === this.opts.value.current) {
|
||||
this.rootState.isHovered = false;
|
||||
}
|
||||
}
|
||||
handleBlur() {
|
||||
if (this.rootState.hoveredTab === this.opts.value.current) {
|
||||
this.rootState.isHovered = false;
|
||||
}
|
||||
}
|
||||
|
||||
onmouseenter(e: Parameters<NonNullable<TabsPrimitive.TriggerProps['onmouseenter']>>[0]) {
|
||||
this.handleFocus();
|
||||
this.opts.onmouseenter.current?.(e);
|
||||
}
|
||||
onmouseenter(e: Parameters<NonNullable<TabsPrimitive.TriggerProps['onmouseenter']>>[0]) {
|
||||
this.handleFocus();
|
||||
this.opts.onmouseenter.current?.(e);
|
||||
}
|
||||
|
||||
onmouseleave(e: Parameters<NonNullable<TabsPrimitive.TriggerProps['onmouseleave']>>[0]) {
|
||||
this.handleBlur();
|
||||
this.opts.onmouseleave.current?.(e);
|
||||
}
|
||||
onmouseleave(e: Parameters<NonNullable<TabsPrimitive.TriggerProps['onmouseleave']>>[0]) {
|
||||
this.handleBlur();
|
||||
this.opts.onmouseleave.current?.(e);
|
||||
}
|
||||
|
||||
onfocus(e: Parameters<NonNullable<TabsPrimitive.TriggerProps['onfocus']>>[0]) {
|
||||
this.handleFocus();
|
||||
this.opts.onfocus.current?.(e);
|
||||
}
|
||||
onfocus(e: Parameters<NonNullable<TabsPrimitive.TriggerProps['onfocus']>>[0]) {
|
||||
this.handleFocus();
|
||||
this.opts.onfocus.current?.(e);
|
||||
}
|
||||
|
||||
onblur(e: Parameters<NonNullable<TabsPrimitive.TriggerProps['onblur']>>[0]) {
|
||||
this.handleBlur();
|
||||
onblur(e: Parameters<NonNullable<TabsPrimitive.TriggerProps['onblur']>>[0]) {
|
||||
this.handleBlur();
|
||||
|
||||
this.opts.onblur.current?.(e);
|
||||
}
|
||||
this.opts.onblur.current?.(e);
|
||||
}
|
||||
|
||||
props = $derived.by(() => ({
|
||||
value: this.opts.value.current,
|
||||
onmouseenter: this.onmouseenter.bind(this),
|
||||
onmouseleave: this.onmouseleave.bind(this),
|
||||
onfocus: this.onfocus.bind(this),
|
||||
onblur: this.onblur.bind(this)
|
||||
}));
|
||||
props = $derived.by(() => ({
|
||||
value: this.opts.value.current,
|
||||
onmouseenter: this.onmouseenter.bind(this),
|
||||
onmouseleave: this.onmouseleave.bind(this),
|
||||
onfocus: this.onfocus.bind(this),
|
||||
onblur: this.onblur.bind(this)
|
||||
}));
|
||||
}
|
||||
|
||||
const ctx = new Context<UnderlineTabsRootState>('underline-tabs-root-ctx');
|
||||
|
||||
export function useUnderlineTabs(opts: UnderlineTabsRootProps) {
|
||||
return ctx.set(new UnderlineTabsRootState(opts));
|
||||
return ctx.set(new UnderlineTabsRootState(opts));
|
||||
}
|
||||
|
||||
export function useUnderlineTabsTrigger(opts: UnderlineTabsTriggerProps) {
|
||||
return new UnderlineTabsTriggerState(opts, ctx.get());
|
||||
return new UnderlineTabsTriggerState(opts, ctx.get());
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user