ui-ingredients 0.12.0 → 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/README.md +1 -1
- package/dist/accordion/accordion-item-trigger.svelte +1 -1
- package/dist/alert-dialog/alert-dialog-close-trigger.svelte +1 -1
- package/dist/alert-dialog/alert-dialog-trigger.svelte +1 -1
- package/dist/carousel/carousel-indicator.svelte +1 -1
- package/dist/carousel/carousel-next-trigger.svelte +1 -1
- package/dist/carousel/carousel-prev-trigger.svelte +1 -1
- package/dist/clipboard/clipboard-trigger.svelte +1 -1
- package/dist/collapsible/collapsible-trigger.svelte +1 -1
- package/dist/color-picker/color-picker-channel-slider-label.svelte +2 -5
- package/dist/color-picker/color-picker-channel-slider-label.svelte.d.ts +2 -3
- package/dist/color-picker/color-picker-swatch-trigger.svelte +1 -1
- package/dist/color-picker/create-color-picker.svelte.d.ts +1 -2
- package/dist/color-picker/create-color-picker.svelte.js +0 -1
- package/dist/color-picker/index.d.ts +1 -0
- package/dist/combobox/combobox-clear-trigger.svelte +1 -1
- package/dist/combobox/combobox-root.svelte +6 -10
- package/dist/combobox/combobox-root.svelte.d.ts +16 -19
- package/dist/combobox/combobox-trigger.svelte +1 -1
- package/dist/combobox/combobox.d.ts +1 -0
- package/dist/combobox/combobox.js +1 -0
- package/dist/combobox/create-combobox.svelte.d.ts +3 -3
- package/dist/combobox/create-combobox.svelte.js +1 -10
- package/dist/create-context.svelte.d.ts +1 -1
- package/dist/date-picker/create-date-picker.svelte.d.ts +1 -5
- package/dist/date-picker/create-date-picker.svelte.js +0 -6
- package/dist/date-picker/date-picker-clear-trigger.svelte +1 -1
- package/dist/date-picker/date-picker-day-table-cell-trigger.svelte +1 -1
- package/dist/date-picker/date-picker-month-table-cell-trigger.svelte +1 -1
- package/dist/date-picker/date-picker-next-trigger.svelte +1 -1
- package/dist/date-picker/date-picker-preset-trigger.svelte +1 -1
- package/dist/date-picker/date-picker-prev-trigger.svelte +1 -1
- package/dist/date-picker/date-picker-trigger.svelte +1 -1
- package/dist/date-picker/date-picker-view-trigger.svelte +1 -1
- package/dist/date-picker/date-picker-year-table-cell-trigger.svelte +1 -1
- package/dist/date-picker/index.d.ts +1 -0
- package/dist/dialog/dialog-close-trigger.svelte +1 -1
- package/dist/dialog/dialog-trigger.svelte +1 -1
- package/dist/drawer/drawer-close-trigger.svelte +1 -1
- package/dist/drawer/drawer-trigger.svelte +1 -1
- package/dist/editable/editable-cancel-trigger.svelte +1 -1
- package/dist/editable/editable-edit-trigger.svelte +1 -1
- package/dist/editable/editable-submit-trigger.svelte +1 -1
- package/dist/field/field-textarea.svelte +30 -4
- package/dist/field/field-textarea.svelte.d.ts +3 -1
- package/dist/file-upload/file-upload-clear-trigger.svelte +1 -1
- package/dist/file-upload/file-upload-item-delete-trigger.svelte +1 -1
- package/dist/file-upload/file-upload-trigger.svelte +1 -1
- package/dist/floating-panel/floating-panel-close-trigger.svelte +1 -1
- package/dist/floating-panel/floating-panel-drag-trigger.svelte +1 -1
- package/dist/floating-panel/floating-panel-maximize-trigger.svelte +1 -1
- package/dist/floating-panel/floating-panel-minimize-trigger.svelte +1 -1
- package/dist/floating-panel/floating-panel-resize-trigger.svelte +1 -1
- package/dist/floating-panel/floating-panel-restore-trigger.svelte +1 -1
- package/dist/floating-panel/floating-panel-trigger.svelte +1 -1
- package/dist/menu/menu-context-trigger.svelte +1 -1
- package/dist/menu/menu-trigger-item.svelte +1 -1
- package/dist/menu/menu-trigger.svelte +1 -1
- package/dist/number-input/number-input-decrement-trigger.svelte +1 -1
- package/dist/number-input/number-input-increment-trigger.svelte +1 -1
- package/dist/pagination/pagination-item.svelte +1 -1
- package/dist/pagination/pagination-next-trigger.svelte +1 -1
- package/dist/pagination/pagination-prev-trigger.svelte +1 -1
- package/dist/pin-input/create-pin-input.svelte.js +1 -0
- package/dist/pin-input/pin-input-clear-trigger.svelte +1 -1
- package/dist/popover/popover-close-trigger.svelte +1 -1
- package/dist/popover/popover-trigger.svelte +1 -1
- package/dist/select/create-select.svelte.d.ts +3 -3
- package/dist/select/create-select.svelte.js +1 -10
- package/dist/select/select-clear-trigger.svelte +1 -1
- package/dist/select/select-root.svelte +6 -9
- package/dist/select/select-root.svelte.d.ts +16 -19
- package/dist/select/select-trigger.svelte +1 -1
- package/dist/select/select.d.ts +1 -0
- package/dist/select/select.js +1 -0
- package/dist/signature-pad/signature-pad-clear-trigger.svelte +1 -1
- package/dist/steps/steps-next-trigger.svelte +1 -1
- package/dist/steps/steps-prev-trigger.svelte +1 -1
- package/dist/steps/steps-trigger.svelte +1 -1
- package/dist/tabs/tabs-trigger.svelte +1 -1
- package/dist/tags-input/tags-input-clear-trigger.svelte +1 -1
- package/dist/tags-input/tags-input-item-delete-trigger.svelte +1 -1
- package/dist/time-picker/index.d.ts +1 -1
- package/dist/time-picker/time-picker-clear-trigger.svelte +1 -1
- package/dist/time-picker/time-picker-trigger.svelte +1 -1
- package/dist/timer/timer-action-trigger.svelte +1 -1
- package/dist/toast/create-toaster.svelte.d.ts +3 -17
- package/dist/toast/toast-action-trigger.svelte +1 -1
- package/dist/toast/toast-close-trigger.svelte +1 -1
- package/dist/toggle-group/toggle-group-item.svelte +1 -1
- package/dist/tooltip/tooltip-trigger.svelte +1 -1
- package/dist/tour/tour-action-trigger.svelte +1 -1
- package/dist/tour/tour-close-trigger.svelte +1 -1
- package/dist/tour/tour-trigger.svelte +1 -1
- package/dist/tree-view/index.d.ts +2 -0
- package/dist/tree-view/tree-view-branch-content.svelte +6 -7
- package/dist/tree-view/tree-view-branch-control.svelte +3 -5
- package/dist/tree-view/tree-view-branch-indent-guide.svelte +35 -0
- package/dist/tree-view/tree-view-branch-indent-guide.svelte.d.ts +21 -0
- package/dist/tree-view/tree-view-branch-indicator.svelte +6 -8
- package/dist/tree-view/tree-view-branch-indicator.svelte.d.ts +1 -1
- package/dist/tree-view/tree-view-branch-text.svelte +3 -5
- package/dist/tree-view/tree-view-branch-trigger.svelte +3 -5
- package/dist/tree-view/tree-view-branch.svelte +11 -20
- package/dist/tree-view/tree-view-branch.svelte.d.ts +2 -2
- package/dist/tree-view/tree-view-context.svelte.d.ts +2 -10
- package/dist/tree-view/tree-view-context.svelte.js +1 -3
- package/dist/tree-view/tree-view-item-indicator.svelte +3 -5
- package/dist/tree-view/tree-view-item-text.svelte +3 -5
- package/dist/tree-view/tree-view-item.svelte +9 -22
- package/dist/tree-view/tree-view-item.svelte.d.ts +2 -2
- package/dist/tree-view/tree-view-label.svelte +0 -1
- package/dist/tree-view/tree-view-root.svelte +1 -0
- package/dist/tree-view/tree-view-tree.svelte +2 -11
- package/dist/tree-view/tree-view-tree.svelte.d.ts +0 -1
- package/dist/tree-view/tree-view.d.ts +2 -0
- package/dist/tree-view/tree-view.js +2 -0
- package/dist/tree-view/types.d.ts +4 -0
- package/dist/tree-view/types.js +1 -0
- package/package.json +58 -57
package/README.md
CHANGED
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
<script lang="ts" module>
|
|
2
|
-
import type {
|
|
3
|
-
import type {ChannelProps} from '@zag-js/color-picker';
|
|
2
|
+
import type {HtmlIngredientProps} from '../types.js';
|
|
4
3
|
|
|
5
4
|
export interface ColorPickerChannelSliderLabelProps
|
|
6
|
-
extends
|
|
5
|
+
extends HtmlIngredientProps<'div', HTMLDivElement> {}
|
|
7
6
|
</script>
|
|
8
7
|
|
|
9
8
|
<script lang="ts">
|
|
@@ -15,8 +14,6 @@
|
|
|
15
14
|
|
|
16
15
|
let {
|
|
17
16
|
ref = $bindable(null),
|
|
18
|
-
channel,
|
|
19
|
-
orientation,
|
|
20
17
|
asChild,
|
|
21
18
|
children,
|
|
22
19
|
...props
|
|
@@ -1,6 +1,5 @@
|
|
|
1
|
-
import type {
|
|
2
|
-
|
|
3
|
-
export interface ColorPickerChannelSliderLabelProps extends Assign<HtmlIngredientProps<'div', HTMLDivElement>, ChannelProps> {
|
|
1
|
+
import type { HtmlIngredientProps } from '../types.js';
|
|
2
|
+
export interface ColorPickerChannelSliderLabelProps extends HtmlIngredientProps<'div', HTMLDivElement> {
|
|
4
3
|
}
|
|
5
4
|
interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
|
|
6
5
|
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
import type { GenericObject } from '../types.js';
|
|
2
2
|
import * as colorPicker from '@zag-js/color-picker';
|
|
3
|
-
type Omitted = 'id' | 'dir' | '
|
|
3
|
+
type Omitted = 'id' | 'dir' | 'getRootNode' | 'open.controlled';
|
|
4
4
|
export interface CreateColorPickerProps extends Omit<colorPicker.Context, Omitted> {
|
|
5
5
|
id?: string;
|
|
6
|
-
value?: string;
|
|
7
6
|
openControlled?: boolean;
|
|
8
7
|
}
|
|
9
8
|
export interface CreateColorPickerReturn extends colorPicker.Api {
|
|
@@ -26,5 +26,6 @@ export type { ColorPickerTriggerProps } from './color-picker-trigger.svelte';
|
|
|
26
26
|
export type { ColorPickerValueSwatchProps } from './color-picker-value-swatch.svelte';
|
|
27
27
|
export type { ColorPickerValueTextProps } from './color-picker-value-text.svelte';
|
|
28
28
|
export type { ColorPickerViewTextProps } from './color-picker-view.svelte';
|
|
29
|
+
export type { Color } from '@zag-js/color-picker';
|
|
29
30
|
export { anatomy as colorPickerAnatomy } from './color-picker-anatomy.js';
|
|
30
31
|
export { getColorPickerContext } from './color-picker-context.svelte.js';
|
|
@@ -6,15 +6,15 @@
|
|
|
6
6
|
CreateComboboxReturn,
|
|
7
7
|
} from './create-combobox.svelte.js';
|
|
8
8
|
|
|
9
|
-
export interface ComboboxProps
|
|
9
|
+
export interface ComboboxProps
|
|
10
10
|
extends Assign<
|
|
11
11
|
HtmlIngredientProps<'div', HTMLDivElement, CreateComboboxReturn>,
|
|
12
|
-
CreateComboboxProps
|
|
12
|
+
CreateComboboxProps
|
|
13
13
|
>,
|
|
14
14
|
PresenceStrategyProps {}
|
|
15
15
|
</script>
|
|
16
16
|
|
|
17
|
-
<script lang="ts"
|
|
17
|
+
<script lang="ts">
|
|
18
18
|
import {mergeProps} from '../merge-props.js';
|
|
19
19
|
import {createPresence} from '../presence/create-presence.svelte.js';
|
|
20
20
|
import {setPresenceContext} from '../presence/presence-context.svelte.js';
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
asChild,
|
|
29
29
|
children,
|
|
30
30
|
...props
|
|
31
|
-
}: ComboboxProps
|
|
31
|
+
}: ComboboxProps = $props();
|
|
32
32
|
|
|
33
33
|
let [presenceStrategyProps, rest] = $derived(
|
|
34
34
|
createSplitProps<PresenceStrategyProps>(['lazyMount', 'keepMounted'])(
|
|
@@ -37,14 +37,14 @@
|
|
|
37
37
|
);
|
|
38
38
|
|
|
39
39
|
let [createComboboxProps, localProps] = $derived(
|
|
40
|
-
createSplitProps<CreateComboboxProps
|
|
40
|
+
createSplitProps<CreateComboboxProps>([
|
|
41
41
|
'id',
|
|
42
42
|
'ids',
|
|
43
43
|
'name',
|
|
44
44
|
'form',
|
|
45
45
|
'open',
|
|
46
46
|
'openControlled',
|
|
47
|
-
'
|
|
47
|
+
'collection',
|
|
48
48
|
'value',
|
|
49
49
|
'invalid',
|
|
50
50
|
'disabled',
|
|
@@ -67,9 +67,6 @@
|
|
|
67
67
|
'allowCustomValue',
|
|
68
68
|
'highlightedValue',
|
|
69
69
|
'selectionBehavior',
|
|
70
|
-
'itemToString',
|
|
71
|
-
'itemToValue',
|
|
72
|
-
'isItemDisabled',
|
|
73
70
|
'onOpenChange',
|
|
74
71
|
'onValueChange',
|
|
75
72
|
'onFocusOutside',
|
|
@@ -77,7 +74,6 @@
|
|
|
77
74
|
'onInteractOutside',
|
|
78
75
|
'onInputValueChange',
|
|
79
76
|
'onPointerDownOutside',
|
|
80
|
-
'getSelectionValue',
|
|
81
77
|
'scrollToIndexFn',
|
|
82
78
|
])(rest),
|
|
83
79
|
);
|
|
@@ -1,26 +1,23 @@
|
|
|
1
1
|
import type { PresenceStrategyProps } from '../presence/create-presence.svelte.js';
|
|
2
2
|
import type { Assign, HtmlIngredientProps } from '../types.js';
|
|
3
3
|
import type { CreateComboboxProps, CreateComboboxReturn } from './create-combobox.svelte.js';
|
|
4
|
-
export interface ComboboxProps
|
|
4
|
+
export interface ComboboxProps extends Assign<HtmlIngredientProps<'div', HTMLDivElement, CreateComboboxReturn>, CreateComboboxProps>, PresenceStrategyProps {
|
|
5
5
|
}
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
6
|
+
interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
|
|
7
|
+
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
|
8
|
+
$$bindings?: Bindings;
|
|
9
|
+
} & Exports;
|
|
10
|
+
(internal: unknown, props: Props & {
|
|
11
|
+
$$events?: Events;
|
|
12
|
+
$$slots?: Slots;
|
|
13
|
+
}): Exports & {
|
|
14
|
+
$set?: any;
|
|
15
|
+
$on?: any;
|
|
10
16
|
};
|
|
11
|
-
|
|
12
|
-
bindings(): "ref";
|
|
13
|
-
exports(): {};
|
|
17
|
+
z_$$bindings?: Bindings;
|
|
14
18
|
}
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
<T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {
|
|
20
|
-
$$events?: ReturnType<__sveltets_Render<T>['events']>;
|
|
21
|
-
}): ReturnType<__sveltets_Render<T>['exports']>;
|
|
22
|
-
z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
|
|
23
|
-
}
|
|
24
|
-
declare const ComboboxRoot: $$IsomorphicComponent;
|
|
25
|
-
type ComboboxRoot<T> = InstanceType<typeof ComboboxRoot<T>>;
|
|
19
|
+
declare const ComboboxRoot: $$__sveltets_2_IsomorphicComponent<ComboboxProps, {
|
|
20
|
+
[evt: string]: CustomEvent<any>;
|
|
21
|
+
}, {}, {}, "ref">;
|
|
22
|
+
type ComboboxRoot = InstanceType<typeof ComboboxRoot>;
|
|
26
23
|
export default ComboboxRoot;
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import * as combobox from '@zag-js/combobox';
|
|
2
|
-
type Omitted = 'id' | 'dir' | '
|
|
3
|
-
export interface CreateComboboxProps
|
|
2
|
+
type Omitted = 'id' | 'dir' | 'getRootNode' | 'open.controlled';
|
|
3
|
+
export interface CreateComboboxProps extends Omit<combobox.Context, Omitted> {
|
|
4
4
|
id?: string;
|
|
5
5
|
openControlled?: boolean;
|
|
6
6
|
}
|
|
7
7
|
export interface CreateComboboxReturn extends combobox.Api {
|
|
8
8
|
}
|
|
9
|
-
export declare function createCombobox
|
|
9
|
+
export declare function createCombobox(props: CreateComboboxProps): CreateComboboxReturn;
|
|
10
10
|
export {};
|
|
@@ -4,15 +4,7 @@ import { getFieldContext } from '../field/field-context.svelte.js';
|
|
|
4
4
|
import { getLocaleContext } from '../locale-provider/local-provider-context.svelte.js';
|
|
5
5
|
import * as combobox from '@zag-js/combobox';
|
|
6
6
|
import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
|
|
7
|
-
import { createSplitProps } from '@zag-js/utils';
|
|
8
7
|
export function createCombobox(props) {
|
|
9
|
-
const [collectionProps, comboboxProps] = $derived(createSplitProps([
|
|
10
|
-
'items',
|
|
11
|
-
'itemToValue',
|
|
12
|
-
'itemToString',
|
|
13
|
-
'isItemDisabled',
|
|
14
|
-
])(props));
|
|
15
|
-
const collection = $derived(combobox.collection(collectionProps));
|
|
16
8
|
const field = getFieldContext();
|
|
17
9
|
const locale = getLocaleContext();
|
|
18
10
|
const environment = getEnvironmentContext();
|
|
@@ -28,10 +20,9 @@ export function createCombobox(props) {
|
|
|
28
20
|
disabled: field?.disabled,
|
|
29
21
|
readOnly: field?.readOnly,
|
|
30
22
|
required: field?.required,
|
|
31
|
-
...
|
|
23
|
+
...props,
|
|
32
24
|
getRootNode: environment?.getRootNode,
|
|
33
25
|
'open.controlled': props.openControlled,
|
|
34
|
-
collection,
|
|
35
26
|
}));
|
|
36
27
|
const [state, send, service] = useMachine(combobox.machine(context));
|
|
37
28
|
$effect(() => {
|
|
@@ -7,7 +7,7 @@ type CreateContextReturn<T, Strict extends boolean> = [
|
|
|
7
7
|
setContext: SetContext<T>,
|
|
8
8
|
hasContext: HasContext
|
|
9
9
|
];
|
|
10
|
-
export declare function createContext<T extends GenericObject>(key: string): CreateContextReturn<T, true>;
|
|
11
10
|
export declare function createContext<T extends GenericObject>(key: string, strict: true): CreateContextReturn<T, true>;
|
|
12
11
|
export declare function createContext<T extends GenericObject>(key: string, strict: false): CreateContextReturn<T, false>;
|
|
12
|
+
export declare function createContext<T extends GenericObject>(key: string): CreateContextReturn<T, true>;
|
|
13
13
|
export {};
|
|
@@ -1,12 +1,8 @@
|
|
|
1
1
|
import * as datePicker from '@zag-js/date-picker';
|
|
2
2
|
import type { HTMLAttributes } from 'svelte/elements';
|
|
3
|
-
type Omitted = 'id' | 'dir' | '
|
|
3
|
+
type Omitted = 'id' | 'dir' | 'getRootNode' | 'open.controlled';
|
|
4
4
|
export interface CreateDatePickerProps extends Omit<datePicker.Context, Omitted> {
|
|
5
5
|
id?: string;
|
|
6
|
-
min?: string | Date;
|
|
7
|
-
max?: string | Date;
|
|
8
|
-
value?: string[] | Date[];
|
|
9
|
-
focusedValue?: string | Date;
|
|
10
6
|
openControlled?: boolean;
|
|
11
7
|
}
|
|
12
8
|
export interface CreateDatePickerReturn extends datePicker.Api {
|
|
@@ -13,12 +13,6 @@ export function createDatePicker(props) {
|
|
|
13
13
|
dir: locale?.dir,
|
|
14
14
|
locale: locale?.locale,
|
|
15
15
|
...props,
|
|
16
|
-
min: props.min ? datePicker.parse(props.min) : undefined,
|
|
17
|
-
max: props.max ? datePicker.parse(props.max) : undefined,
|
|
18
|
-
value: props.value ? datePicker.parse(props.value) : undefined,
|
|
19
|
-
focusedValue: props.focusedValue
|
|
20
|
-
? datePicker.parse(props.focusedValue)
|
|
21
|
-
: undefined,
|
|
22
16
|
getRootNode: environment?.getRootNode,
|
|
23
17
|
'open.controlled': props.openControlled,
|
|
24
18
|
}));
|
|
@@ -27,5 +27,6 @@ export type { DatePickerViewProps } from './date-picker-view.svelte';
|
|
|
27
27
|
export type { DatePickerYearSelectProps } from './date-picker-year-select.svelte';
|
|
28
28
|
export type { DatePickerYearTableCellTriggerProps } from './date-picker-year-table-cell-trigger.svelte';
|
|
29
29
|
export type { DatePickerYearTableCellProps } from './date-picker-year-table-cell.svelte';
|
|
30
|
+
export type { DateValue } from '@zag-js/date-picker';
|
|
30
31
|
export { anatomy as datePickerAnatomy } from './date-picker-anatomy.js';
|
|
31
32
|
export { getDatePickerContext } from './date-picker-context.svelte.js';
|
|
@@ -1,25 +1,51 @@
|
|
|
1
1
|
<script lang="ts" module>
|
|
2
2
|
import type {HtmlIngredientProps} from '../types.js';
|
|
3
|
+
import {autoresizeTextarea} from '@zag-js/auto-resize';
|
|
4
|
+
import type {Action} from 'svelte/action';
|
|
3
5
|
|
|
4
6
|
export interface FieldTextareaProps
|
|
5
|
-
extends HtmlIngredientProps<
|
|
7
|
+
extends HtmlIngredientProps<
|
|
8
|
+
'textarea',
|
|
9
|
+
HTMLTextAreaElement,
|
|
10
|
+
never,
|
|
11
|
+
Action<HTMLTextAreaElement>
|
|
12
|
+
> {
|
|
13
|
+
autoResize?: boolean;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
function action(node: HTMLTextAreaElement) {
|
|
17
|
+
const destroy = autoresizeTextarea(node);
|
|
18
|
+
|
|
19
|
+
return {
|
|
20
|
+
destroy,
|
|
21
|
+
};
|
|
22
|
+
}
|
|
6
23
|
</script>
|
|
7
24
|
|
|
8
25
|
<script lang="ts">
|
|
9
26
|
import {mergeProps} from '../merge-props.js';
|
|
10
27
|
import {getFieldContext} from './field-context.svelte.js';
|
|
11
28
|
|
|
12
|
-
let {
|
|
29
|
+
let {
|
|
30
|
+
ref = $bindable(null),
|
|
31
|
+
autoResize,
|
|
32
|
+
asChild,
|
|
33
|
+
...props
|
|
34
|
+
}: FieldTextareaProps = $props();
|
|
13
35
|
|
|
14
36
|
let field = getFieldContext();
|
|
15
37
|
|
|
16
38
|
let mergedProps = $derived(
|
|
17
39
|
mergeProps(field?.getTextareaProps() ?? {}, props),
|
|
18
40
|
);
|
|
41
|
+
|
|
42
|
+
function wrappedAction(node: HTMLTextAreaElement) {
|
|
43
|
+
return autoResize ? action(node) : {};
|
|
44
|
+
}
|
|
19
45
|
</script>
|
|
20
46
|
|
|
21
47
|
{#if asChild}
|
|
22
|
-
{@render asChild(mergedProps)}
|
|
48
|
+
{@render asChild(wrappedAction, mergedProps)}
|
|
23
49
|
{:else}
|
|
24
|
-
<textarea bind:this={ref} {...mergedProps}></textarea>
|
|
50
|
+
<textarea bind:this={ref} use:wrappedAction {...mergedProps}></textarea>
|
|
25
51
|
{/if}
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
import type { HtmlIngredientProps } from '../types.js';
|
|
2
|
-
|
|
2
|
+
import type { Action } from 'svelte/action';
|
|
3
|
+
export interface FieldTextareaProps extends HtmlIngredientProps<'textarea', HTMLTextAreaElement, never, Action<HTMLTextAreaElement>> {
|
|
4
|
+
autoResize?: boolean;
|
|
3
5
|
}
|
|
4
6
|
interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
|
|
5
7
|
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|