INIT
This commit is contained in:
+34
@@ -0,0 +1,34 @@
|
||||
<script lang="ts">
|
||||
import { boxWith, mergeProps } from "svelte-toolbelt";
|
||||
import type { LabelRootProps } from "../types.js";
|
||||
import { LabelRootState } from "../label.svelte.js";
|
||||
import { createId } from "../../../internal/create-id.js";
|
||||
|
||||
const uid = $props.id();
|
||||
|
||||
let {
|
||||
children,
|
||||
child,
|
||||
id = createId(uid),
|
||||
ref = $bindable(null),
|
||||
for: forProp,
|
||||
...restProps
|
||||
}: LabelRootProps = $props();
|
||||
|
||||
const rootState = LabelRootState.create({
|
||||
id: boxWith(() => id),
|
||||
ref: boxWith(
|
||||
() => ref,
|
||||
(v) => (ref = v)
|
||||
),
|
||||
});
|
||||
const mergedProps = $derived(mergeProps(restProps, rootState.props, { for: forProp }));
|
||||
</script>
|
||||
|
||||
{#if child}
|
||||
{@render child({ props: mergedProps })}
|
||||
{:else}
|
||||
<label {...mergedProps} for={forProp}>
|
||||
{@render children?.()}
|
||||
</label>
|
||||
{/if}
|
||||
+4
@@ -0,0 +1,4 @@
|
||||
import type { LabelRootProps } from "../types.js";
|
||||
declare const Label: import("svelte").Component<LabelRootProps, {}, "ref">;
|
||||
type Label = ReturnType<typeof Label>;
|
||||
export default Label;
|
||||
+2
@@ -0,0 +1,2 @@
|
||||
export { default as Root } from "./components/label.svelte";
|
||||
export type { LabelRootProps as RootProps } from "./types.js";
|
||||
+1
@@ -0,0 +1 @@
|
||||
export { default as Root } from "./components/label.svelte";
|
||||
+1
@@ -0,0 +1 @@
|
||||
export * as Label from "./exports.js";
|
||||
+1
@@ -0,0 +1 @@
|
||||
export * as Label from "./exports.js";
|
||||
+15
@@ -0,0 +1,15 @@
|
||||
import type { BitsMouseEvent, RefAttachment, WithRefOpts } from "../../internal/types.js";
|
||||
interface LabelRootStateOpts extends WithRefOpts {
|
||||
}
|
||||
export declare class LabelRootState {
|
||||
static create(opts: LabelRootStateOpts): LabelRootState;
|
||||
readonly opts: LabelRootStateOpts;
|
||||
readonly attachment: RefAttachment;
|
||||
constructor(opts: LabelRootStateOpts);
|
||||
onmousedown(e: BitsMouseEvent): void;
|
||||
readonly props: {
|
||||
readonly id: string;
|
||||
readonly onmousedown: (e: BitsMouseEvent) => void;
|
||||
};
|
||||
}
|
||||
export {};
|
||||
+28
@@ -0,0 +1,28 @@
|
||||
import { attachRef } from "svelte-toolbelt";
|
||||
import { createBitsAttrs } from "../../internal/attrs.js";
|
||||
const labelAttrs = createBitsAttrs({
|
||||
component: "label",
|
||||
parts: ["root"],
|
||||
});
|
||||
export class LabelRootState {
|
||||
static create(opts) {
|
||||
return new LabelRootState(opts);
|
||||
}
|
||||
opts;
|
||||
attachment;
|
||||
constructor(opts) {
|
||||
this.opts = opts;
|
||||
this.attachment = attachRef(this.opts.ref);
|
||||
this.onmousedown = this.onmousedown.bind(this);
|
||||
}
|
||||
onmousedown(e) {
|
||||
if (e.detail > 1)
|
||||
e.preventDefault();
|
||||
}
|
||||
props = $derived.by(() => ({
|
||||
id: this.opts.id.current,
|
||||
[labelAttrs.root]: "",
|
||||
onmousedown: this.onmousedown,
|
||||
...this.attachment,
|
||||
}));
|
||||
}
|
||||
+4
@@ -0,0 +1,4 @@
|
||||
import type { WithChild, Without } from "../../internal/types.js";
|
||||
import type { BitsPrimitiveLabelAttributes } from "../../shared/attributes.js";
|
||||
export type LabelRootPropsWithoutHTML = WithChild;
|
||||
export type LabelRootProps = LabelRootPropsWithoutHTML & Without<BitsPrimitiveLabelAttributes, LabelRootPropsWithoutHTML>;
|
||||
+1
@@ -0,0 +1 @@
|
||||
export {};
|
||||
Reference in New Issue
Block a user