refactor: merge playground into webui
This commit is contained in:
@@ -1,83 +1,83 @@
|
||||
import type { Component, ComponentProps, JSX, ValidComponent } from "solid-js"
|
||||
import { Show, splitProps } from "solid-js"
|
||||
import type { Component, ComponentProps, JSX, ValidComponent } from 'solid-js';
|
||||
import { Show, splitProps } from 'solid-js';
|
||||
|
||||
import * as NumberFieldPrimitive from "@kobalte/core/number-field"
|
||||
import type { PolymorphicProps } from "@kobalte/core/polymorphic"
|
||||
import * as NumberFieldPrimitive from '@kobalte/core/number-field';
|
||||
import type { PolymorphicProps } from '@kobalte/core/polymorphic';
|
||||
|
||||
import { cn } from "~/styles/utils"
|
||||
import { cn } from '~/utils/styles';
|
||||
|
||||
const NumberField = NumberFieldPrimitive.Root
|
||||
const NumberField = NumberFieldPrimitive.Root;
|
||||
|
||||
const NumberFieldGroup: Component<ComponentProps<"div">> = (props) => {
|
||||
const [local, others] = splitProps(props, ["class"])
|
||||
const NumberFieldGroup: Component<ComponentProps<'div'>> = (props) => {
|
||||
const [local, others] = splitProps(props, ['class']);
|
||||
return (
|
||||
<div
|
||||
class={cn(
|
||||
"relative rounded-md focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2",
|
||||
'relative rounded-md focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2',
|
||||
local.class
|
||||
)}
|
||||
{...others}
|
||||
/>
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
type NumberFieldLabelProps<T extends ValidComponent = "label"> =
|
||||
type NumberFieldLabelProps<T extends ValidComponent = 'label'> =
|
||||
NumberFieldPrimitive.NumberFieldLabelProps<T> & {
|
||||
class?: string | undefined
|
||||
}
|
||||
class?: string | undefined;
|
||||
};
|
||||
|
||||
const NumberFieldLabel = <T extends ValidComponent = "label">(
|
||||
const NumberFieldLabel = <T extends ValidComponent = 'label'>(
|
||||
props: PolymorphicProps<T, NumberFieldLabelProps<T>>
|
||||
) => {
|
||||
const [local, others] = splitProps(props as NumberFieldLabelProps, ["class"])
|
||||
const [local, others] = splitProps(props as NumberFieldLabelProps, ['class']);
|
||||
return (
|
||||
<NumberFieldPrimitive.Label
|
||||
class={cn(
|
||||
"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
|
||||
'font-medium text-sm leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
|
||||
local.class
|
||||
)}
|
||||
{...others}
|
||||
/>
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
type NumberFieldInputProps<T extends ValidComponent = "input"> =
|
||||
type NumberFieldInputProps<T extends ValidComponent = 'input'> =
|
||||
NumberFieldPrimitive.NumberFieldInputProps<T> & {
|
||||
class?: string | undefined
|
||||
}
|
||||
class?: string | undefined;
|
||||
};
|
||||
|
||||
const NumberFieldInput = <T extends ValidComponent = "input">(
|
||||
const NumberFieldInput = <T extends ValidComponent = 'input'>(
|
||||
props: PolymorphicProps<T, NumberFieldInputProps<T>>
|
||||
) => {
|
||||
const [local, others] = splitProps(props as NumberFieldInputProps, ["class"])
|
||||
const [local, others] = splitProps(props as NumberFieldInputProps, ['class']);
|
||||
return (
|
||||
<NumberFieldPrimitive.Input
|
||||
class={cn(
|
||||
"flex h-10 w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 data-[invalid]:border-error-foreground data-[invalid]:text-error-foreground",
|
||||
'flex h-10 w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:font-medium file:text-sm placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 data-[invalid]:border-error-foreground data-[invalid]:text-error-foreground',
|
||||
local.class
|
||||
)}
|
||||
{...others}
|
||||
/>
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
type NumberFieldIncrementTriggerProps<T extends ValidComponent = "button"> =
|
||||
type NumberFieldIncrementTriggerProps<T extends ValidComponent = 'button'> =
|
||||
NumberFieldPrimitive.NumberFieldIncrementTriggerProps<T> & {
|
||||
class?: string | undefined
|
||||
children?: JSX.Element
|
||||
}
|
||||
class?: string | undefined;
|
||||
children?: JSX.Element;
|
||||
};
|
||||
|
||||
const NumberFieldIncrementTrigger = <T extends ValidComponent = "button">(
|
||||
const NumberFieldIncrementTrigger = <T extends ValidComponent = 'button'>(
|
||||
props: PolymorphicProps<T, NumberFieldIncrementTriggerProps<T>>
|
||||
) => {
|
||||
const [local, others] = splitProps(props as NumberFieldIncrementTriggerProps, [
|
||||
"class",
|
||||
"children"
|
||||
])
|
||||
const [local, others] = splitProps(
|
||||
props as NumberFieldIncrementTriggerProps,
|
||||
['class', 'children']
|
||||
);
|
||||
return (
|
||||
<NumberFieldPrimitive.IncrementTrigger
|
||||
class={cn(
|
||||
"absolute right-1 top-1 inline-flex size-4 items-center justify-center",
|
||||
'absolute top-1 right-1 inline-flex size-4 items-center justify-center',
|
||||
local.class
|
||||
)}
|
||||
{...others}
|
||||
@@ -102,26 +102,26 @@ const NumberFieldIncrementTrigger = <T extends ValidComponent = "button">(
|
||||
{(children) => children()}
|
||||
</Show>
|
||||
</NumberFieldPrimitive.IncrementTrigger>
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
type NumberFieldDecrementTriggerProps<T extends ValidComponent = "button"> =
|
||||
type NumberFieldDecrementTriggerProps<T extends ValidComponent = 'button'> =
|
||||
NumberFieldPrimitive.NumberFieldDecrementTriggerProps<T> & {
|
||||
class?: string | undefined
|
||||
children?: JSX.Element
|
||||
}
|
||||
class?: string | undefined;
|
||||
children?: JSX.Element;
|
||||
};
|
||||
|
||||
const NumberFieldDecrementTrigger = <T extends ValidComponent = "button">(
|
||||
const NumberFieldDecrementTrigger = <T extends ValidComponent = 'button'>(
|
||||
props: PolymorphicProps<T, NumberFieldDecrementTriggerProps<T>>
|
||||
) => {
|
||||
const [local, others] = splitProps(props as NumberFieldDecrementTriggerProps, [
|
||||
"class",
|
||||
"children"
|
||||
])
|
||||
const [local, others] = splitProps(
|
||||
props as NumberFieldDecrementTriggerProps,
|
||||
['class', 'children']
|
||||
);
|
||||
return (
|
||||
<NumberFieldPrimitive.DecrementTrigger
|
||||
class={cn(
|
||||
"absolute bottom-1 right-1 inline-flex size-4 items-center justify-center",
|
||||
'absolute right-1 bottom-1 inline-flex size-4 items-center justify-center',
|
||||
local.class
|
||||
)}
|
||||
{...others}
|
||||
@@ -146,42 +146,46 @@ const NumberFieldDecrementTrigger = <T extends ValidComponent = "button">(
|
||||
{(children) => children()}
|
||||
</Show>
|
||||
</NumberFieldPrimitive.DecrementTrigger>
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
type NumberFieldDescriptionProps<T extends ValidComponent = "div"> =
|
||||
type NumberFieldDescriptionProps<T extends ValidComponent = 'div'> =
|
||||
NumberFieldPrimitive.NumberFieldDescriptionProps<T> & {
|
||||
class?: string | undefined
|
||||
}
|
||||
class?: string | undefined;
|
||||
};
|
||||
|
||||
const NumberFieldDescription = <T extends ValidComponent = "div">(
|
||||
const NumberFieldDescription = <T extends ValidComponent = 'div'>(
|
||||
props: PolymorphicProps<T, NumberFieldDescriptionProps<T>>
|
||||
) => {
|
||||
const [local, others] = splitProps(props as NumberFieldDescriptionProps, ["class"])
|
||||
const [local, others] = splitProps(props as NumberFieldDescriptionProps, [
|
||||
'class',
|
||||
]);
|
||||
return (
|
||||
<NumberFieldPrimitive.Description
|
||||
class={cn("text-sm text-muted-foreground", local.class)}
|
||||
class={cn('text-muted-foreground text-sm', local.class)}
|
||||
{...others}
|
||||
/>
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
type NumberFieldErrorMessageProps<T extends ValidComponent = "div"> =
|
||||
type NumberFieldErrorMessageProps<T extends ValidComponent = 'div'> =
|
||||
NumberFieldPrimitive.NumberFieldErrorMessageProps<T> & {
|
||||
class?: string | undefined
|
||||
}
|
||||
class?: string | undefined;
|
||||
};
|
||||
|
||||
const NumberFieldErrorMessage = <T extends ValidComponent = "div">(
|
||||
const NumberFieldErrorMessage = <T extends ValidComponent = 'div'>(
|
||||
props: PolymorphicProps<T, NumberFieldErrorMessageProps<T>>
|
||||
) => {
|
||||
const [local, others] = splitProps(props as NumberFieldErrorMessageProps, ["class"])
|
||||
const [local, others] = splitProps(props as NumberFieldErrorMessageProps, [
|
||||
'class',
|
||||
]);
|
||||
return (
|
||||
<NumberFieldPrimitive.ErrorMessage
|
||||
class={cn("text-sm text-error-foreground", local.class)}
|
||||
class={cn('text-error-foreground text-sm', local.class)}
|
||||
{...others}
|
||||
/>
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
export {
|
||||
NumberField,
|
||||
@@ -191,5 +195,5 @@ export {
|
||||
NumberFieldIncrementTrigger,
|
||||
NumberFieldDecrementTrigger,
|
||||
NumberFieldDescription,
|
||||
NumberFieldErrorMessage
|
||||
}
|
||||
NumberFieldErrorMessage,
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user