pantheon/atlas
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Activity Actions

update-to-daisui-5.0 #1

Merged
baobeld merged 18 commits from update-to-daisui-5.0 into main 2025-03-27 13:19:01 -04:00
Conversation 0 Commits 18 Files changed 40 +30 -32
2 changed files with 30 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit 2e8083509b - Show all commits

38
packages/svelte/src/lib/components/DataInput/TextInput.stories.svelte → packages/svelte/src/lib/components/DataInput/InputField.stories.svelte
View file

@ -1,27 +1,15 @@
<script module lang="ts">
import { defineMeta } from '@storybook/addon-svelte-csf';
import TextInput from './TextInput.svelte';
import { User } from 'lucide-svelte';
import InputField from './InputField.svelte';
const { Story } = defineMeta({
title: 'Data Input/Text Input',
component: TextInput,
component: InputField,
argTypes: {
bordered: {
control: 'boolean',
},
color: {
control: 'select',
options: [
'ghost',
'primary',
'secondary',
'accent',
'info',
'success',
'warning',
'error',
],
options: ['primary', 'secondary', 'accent', 'info', 'success', 'warning', 'error'],
},
disabled: {
control: 'boolean',
@ -36,7 +24,11 @@
placeholder: { control: 'text' },
size: {
control: 'select',
options: ['xs', 'sm', '-', 'lg'],
options: ['xs', 'sm', 'md', 'lg', 'xl'],
},
style: {
control: 'radio',
options: [undefined, 'ghost'],
},
type: {
control: 'select',
@ -46,18 +38,20 @@
});
</script>
<Story name="Text Label" args={{ color: 'primary', name: 'text', start: 'Text' }} />
<Story name="Default" args={{ color: 'primary', name: 'text', start: 'Text' }} />
<Story name="Icon Start">
<TextInput name="text" color="secondary">
<InputField name="text" color="secondary">
{#snippet start()}
<User />
{/snippet}
</TextInput>
</InputField>
</Story>
<Story name="Icon End">
<TextInput name="text" color="secondary">
<InputField name="text" color="secondary">
{#snippet end()}
<User />
{/snippet}
</TextInput>
</Story>
</InputField>
</Story>

24
packages/svelte/src/lib/components/DataInput/TextInput.svelte → packages/svelte/src/lib/components/DataInput/InputField.svelte
View file

@ -1,3 +1,7 @@
<script lang="ts" module>
export type InputFieldStyle = 'ghost';
</script>
<script lang="ts">
import type { DaisyColor, DaisySize } from '$lib/types';
import clsx from 'clsx';
@ -7,7 +11,6 @@
import { twMerge } from 'tailwind-merge';
type Props = {
bordered?: boolean;
color?: Exclude<DaisyColor, 'neutral'>;
error?: string | Snippet;
fade?: boolean;
@ -15,14 +18,14 @@
end?: string | Snippet;
label?: string | Snippet;
size?: DaisySize;
style?: InputFieldStyle;
type?: Extract<
HTMLInputTypeAttribute,
'email' | 'password' | 'search' | 'tel' | 'text' | 'url'
>;
} & Omit<SvelteHTMLElements['input'], 'type'>;
} & Omit<SvelteHTMLElements['input'], 'type' | 'size'>;
let {
bordered = false,
class: className,
color,
error,
@ -30,7 +33,8 @@
start,
end,
label,
size,
size = 'md',
style,
...props
}: Props = $props();
</script>
@ -63,18 +67,18 @@
</div>
<div
class="input flex w-full items-center gap-2"
class:input-bordered={bordered}
class:input-xs={size === 'xs'}
class:input-sm={size === 'sm'}
class:input-lg={size === 'lg'}
class:input-primary={color === 'primary'}
class:input-secondary={color === 'secondary'}
class:input-accent={color === 'accent'}
class:input-ghost={color === 'ghost'}
class:input-info={color === 'info'}
class:input-success={color === 'success'}
class:input-warning={color === 'warning'}
class:input-error={color === 'error' || error}
class:input-ghost={style === 'ghost'}
class:input-xs={size === 'xs'}
class:input-sm={size === 'sm'}
class:input-lg={size === 'lg'}
class:input-xl={size === 'xl'}
>
{#if typeof start === 'string'}
{start}
@ -88,4 +92,4 @@
{@render end?.()}
{/if}
</div>
</label>
</label>