@14ch/svelte-ui 0.0.27 → 0.0.28
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/dist/components/Button.svelte +8 -1
- package/dist/components/Button.svelte.d.ts +8 -1
- package/dist/components/Checkbox.svelte +7 -0
- package/dist/components/Checkbox.svelte.d.ts +7 -0
- package/dist/components/CheckboxGroup.svelte +5 -0
- package/dist/components/CheckboxGroup.svelte.d.ts +5 -0
- package/dist/components/ColorPicker.svelte +3 -0
- package/dist/components/ColorPicker.svelte.d.ts +3 -0
- package/dist/components/Combobox.svelte +6 -0
- package/dist/components/Combobox.svelte.d.ts +6 -0
- package/dist/components/ConfirmDialog.svelte +7 -0
- package/dist/components/ConfirmDialog.svelte.d.ts +7 -3
- package/dist/components/Datepicker.svelte +12 -0
- package/dist/components/Datepicker.svelte.d.ts +12 -3
- package/dist/components/Dialog.svelte +12 -0
- package/dist/components/Dialog.svelte.d.ts +12 -4
- package/dist/components/Drawer.svelte +13 -0
- package/dist/components/Drawer.svelte.d.ts +13 -4
- package/dist/components/Fab.svelte +11 -0
- package/dist/components/Fab.svelte.d.ts +11 -0
- package/dist/components/FileUploader.svelte +4 -0
- package/dist/components/FileUploader.svelte.d.ts +4 -0
- package/dist/components/Icon.svelte +8 -0
- package/dist/components/Icon.svelte.d.ts +8 -0
- package/dist/components/IconButton.svelte +13 -0
- package/dist/components/IconButton.svelte.d.ts +13 -0
- package/dist/components/ImageUploader.svelte +6 -0
- package/dist/components/ImageUploader.svelte.d.ts +6 -0
- package/dist/components/Input.svelte +13 -0
- package/dist/components/Input.svelte.d.ts +13 -0
- package/dist/components/LoadingSpinner.svelte +4 -0
- package/dist/components/LoadingSpinner.svelte.d.ts +4 -0
- package/dist/components/Modal.svelte +9 -0
- package/dist/components/Modal.svelte.d.ts +9 -4
- package/dist/components/Nav.svelte +6 -0
- package/dist/components/Nav.svelte.d.ts +6 -0
- package/dist/components/Pagination.svelte +7 -0
- package/dist/components/Pagination.svelte.d.ts +7 -0
- package/dist/components/Popup.svelte +13 -0
- package/dist/components/Popup.svelte.d.ts +13 -4
- package/dist/components/PopupMenu.svelte +8 -0
- package/dist/components/PopupMenu.svelte.d.ts +8 -3
- package/dist/components/PopupMenuButton.svelte +7 -0
- package/dist/components/PopupMenuButton.svelte.d.ts +7 -0
- package/dist/components/Radio.svelte +7 -0
- package/dist/components/Radio.svelte.d.ts +7 -0
- package/dist/components/RadioGroup.svelte +5 -0
- package/dist/components/RadioGroup.svelte.d.ts +5 -0
- package/dist/components/SegmentedControl.svelte +5 -0
- package/dist/components/SegmentedControl.svelte.d.ts +5 -0
- package/dist/components/Select.svelte +4 -0
- package/dist/components/Select.svelte.d.ts +4 -0
- package/dist/components/Slider.svelte +5 -0
- package/dist/components/Slider.svelte.d.ts +5 -0
- package/dist/components/Snackbar.svelte +4 -0
- package/dist/components/Snackbar.svelte.d.ts +4 -0
- package/dist/components/Switch.svelte +3 -0
- package/dist/components/Switch.svelte.d.ts +3 -0
- package/dist/components/Tab.svelte +7 -0
- package/dist/components/Tab.svelte.d.ts +7 -0
- package/dist/components/Textarea.svelte +9 -0
- package/dist/components/Textarea.svelte.d.ts +9 -0
- package/dist/index.d.ts +4 -0
- package/package.json +1 -1
|
@@ -5,23 +5,34 @@ import type { FocusHandler, KeyboardHandler, MouseHandler, TouchHandler, Pointer
|
|
|
5
5
|
import type { ButtonVariant, FabPosition } from '../types/propOptions';
|
|
6
6
|
export type FabProps = {
|
|
7
7
|
children?: Snippet;
|
|
8
|
+
/** @default 'button' */
|
|
8
9
|
type?: HTMLButtonAttributes['type'];
|
|
9
10
|
customStyle?: HTMLButtonAttributes['style'];
|
|
10
11
|
disabled?: boolean;
|
|
12
|
+
/** Shows a loading spinner and disables interaction. @default false */
|
|
11
13
|
loading?: boolean;
|
|
14
|
+
/** Material Symbols icon name. */
|
|
12
15
|
icon?: string;
|
|
13
16
|
iconFilled?: boolean;
|
|
14
17
|
iconWeight?: IconWeight;
|
|
15
18
|
iconGrade?: IconGrade;
|
|
16
19
|
iconOpticalSize?: IconOpticalSize;
|
|
17
20
|
iconVariant?: IconVariant;
|
|
21
|
+
/** Custom CSS color value. Overrides the theme color. */
|
|
18
22
|
color?: string;
|
|
23
|
+
/** @default 'ghost' */
|
|
19
24
|
variant?: ButtonVariant;
|
|
25
|
+
/** Fixed position on screen. When set, the FAB is `position: fixed`. */
|
|
20
26
|
position?: FabPosition;
|
|
27
|
+
/** Distance from the bottom edge when `position` is set. */
|
|
21
28
|
bottomOffset?: string | number;
|
|
29
|
+
/** Distance from the side edge when `position` is set. */
|
|
22
30
|
sideOffset?: string | number;
|
|
31
|
+
/** Adds safe-area inset padding (for notched devices). @default false */
|
|
23
32
|
useSafeArea?: boolean;
|
|
33
|
+
/** @default false */
|
|
24
34
|
shadow?: boolean;
|
|
35
|
+
/** Disables animations for accessibility. @default false */
|
|
25
36
|
reducedMotion?: boolean;
|
|
26
37
|
ariaLabel?: string;
|
|
27
38
|
ariaDescribedby?: string;
|
|
@@ -21,13 +21,17 @@
|
|
|
21
21
|
// =========================================================================
|
|
22
22
|
export type FileUploaderProps = {
|
|
23
23
|
// 基本プロパティ
|
|
24
|
+
/** Supports `bind:value`. */
|
|
24
25
|
value: FileList | null | undefined;
|
|
26
|
+
/** Allows selecting multiple files. @default false */
|
|
25
27
|
multiple?: boolean;
|
|
28
|
+
/** Maximum file size in bytes. Shows an error if exceeded. */
|
|
26
29
|
maxFileSize?: number;
|
|
27
30
|
placeholder?: string;
|
|
28
31
|
|
|
29
32
|
// HTML属性系
|
|
30
33
|
id?: string;
|
|
34
|
+
/** Accepted file types (e.g. `"image/*"`, `".pdf,.docx"`). */
|
|
31
35
|
accept?: string;
|
|
32
36
|
|
|
33
37
|
// スタイル/レイアウト
|
|
@@ -1,11 +1,15 @@
|
|
|
1
1
|
import type { IconVariant, IconWeight, IconGrade, IconOpticalSize } from '../types/icon';
|
|
2
2
|
import type { BivariantValueHandler, FocusHandler, KeyboardHandler, MouseHandler, TouchHandler, PointerHandler } from '../types/callbackHandlers';
|
|
3
3
|
export type FileUploaderProps = {
|
|
4
|
+
/** Supports `bind:value`. */
|
|
4
5
|
value: FileList | null | undefined;
|
|
6
|
+
/** Allows selecting multiple files. @default false */
|
|
5
7
|
multiple?: boolean;
|
|
8
|
+
/** Maximum file size in bytes. Shows an error if exceeded. */
|
|
6
9
|
maxFileSize?: number;
|
|
7
10
|
placeholder?: string;
|
|
8
11
|
id?: string;
|
|
12
|
+
/** Accepted file types (e.g. `"image/*"`, `".pdf,.docx"`). */
|
|
9
13
|
accept?: string;
|
|
10
14
|
width?: string | number;
|
|
11
15
|
height?: string | number;
|
|
@@ -10,26 +10,34 @@
|
|
|
10
10
|
// =========================================================================
|
|
11
11
|
export type IconProps = {
|
|
12
12
|
// Snippet
|
|
13
|
+
/** Material Symbols icon name (e.g. `"home"`, `"settings"`). */
|
|
13
14
|
children: Snippet;
|
|
14
15
|
|
|
15
16
|
// 基本プロパティ
|
|
16
17
|
title?: string;
|
|
18
|
+
/** Text shown when the icon font fails to load. */
|
|
17
19
|
fallbackText?: string;
|
|
18
20
|
|
|
19
21
|
// スタイル/レイアウト
|
|
22
|
+
/** Icon size in px or CSS unit. @default 24 */
|
|
20
23
|
size?: number | string;
|
|
21
24
|
color?: string;
|
|
22
25
|
customStyle?: string;
|
|
23
26
|
|
|
24
27
|
// アイコン関連
|
|
28
|
+
/** Renders the filled style. @default false */
|
|
25
29
|
filled?: boolean;
|
|
30
|
+
/** @default 300 */
|
|
26
31
|
weight?: IconWeight;
|
|
32
|
+
/** @default 0 */
|
|
27
33
|
grade?: IconGrade;
|
|
28
34
|
opticalSize?: IconOpticalSize;
|
|
35
|
+
/** @default 'outlined' */
|
|
29
36
|
variant?: IconVariant;
|
|
30
37
|
|
|
31
38
|
// ARIA/アクセシビリティ
|
|
32
39
|
ariaLabel?: string;
|
|
40
|
+
/** Marks the icon as decorative (hidden from screen readers). @default true */
|
|
33
41
|
decorative?: boolean;
|
|
34
42
|
|
|
35
43
|
// その他
|
|
@@ -1,18 +1,26 @@
|
|
|
1
1
|
import type { Snippet } from 'svelte';
|
|
2
2
|
import type { IconVariant, IconWeight, IconGrade, IconOpticalSize } from '../types/icon';
|
|
3
3
|
export type IconProps = {
|
|
4
|
+
/** Material Symbols icon name (e.g. `"home"`, `"settings"`). */
|
|
4
5
|
children: Snippet;
|
|
5
6
|
title?: string;
|
|
7
|
+
/** Text shown when the icon font fails to load. */
|
|
6
8
|
fallbackText?: string;
|
|
9
|
+
/** Icon size in px or CSS unit. @default 24 */
|
|
7
10
|
size?: number | string;
|
|
8
11
|
color?: string;
|
|
9
12
|
customStyle?: string;
|
|
13
|
+
/** Renders the filled style. @default false */
|
|
10
14
|
filled?: boolean;
|
|
15
|
+
/** @default 300 */
|
|
11
16
|
weight?: IconWeight;
|
|
17
|
+
/** @default 0 */
|
|
12
18
|
grade?: IconGrade;
|
|
13
19
|
opticalSize?: IconOpticalSize;
|
|
20
|
+
/** @default 'outlined' */
|
|
14
21
|
variant?: IconVariant;
|
|
15
22
|
ariaLabel?: string;
|
|
23
|
+
/** Marks the icon as decorative (hidden from screen readers). @default true */
|
|
16
24
|
decorative?: boolean;
|
|
17
25
|
[key: string]: any;
|
|
18
26
|
};
|
|
@@ -21,21 +21,28 @@
|
|
|
21
21
|
// =========================================================================
|
|
22
22
|
export type IconButtonProps = {
|
|
23
23
|
// Snippet
|
|
24
|
+
/** Material Symbols icon name (e.g. `"close"`, `"edit"`). */
|
|
24
25
|
children: Snippet;
|
|
25
26
|
|
|
26
27
|
// HTML属性系
|
|
28
|
+
/** @default 'button' */
|
|
27
29
|
type?: 'button' | 'submit' | 'reset' | null | undefined;
|
|
28
30
|
tabindex?: number | null;
|
|
29
31
|
|
|
30
32
|
// スタイル/レイアウト
|
|
31
33
|
customStyle?: HTMLButtonAttributes['style'];
|
|
34
|
+
/** @default 'ghost' */
|
|
32
35
|
variant?: ButtonVariant;
|
|
36
|
+
/** Button size in px. */
|
|
33
37
|
size?: number;
|
|
38
|
+
/** Icon font size in px. */
|
|
34
39
|
fontSize?: number;
|
|
40
|
+
/** Custom CSS color value. Overrides the theme color. */
|
|
35
41
|
color?: string;
|
|
36
42
|
rounded?: boolean;
|
|
37
43
|
|
|
38
44
|
// アイコン関連
|
|
45
|
+
/** Additional Material Symbols icon rendered alongside children. */
|
|
39
46
|
icon?: string;
|
|
40
47
|
iconFilled?: boolean;
|
|
41
48
|
iconWeight?: IconWeight;
|
|
@@ -44,21 +51,27 @@
|
|
|
44
51
|
iconVariant?: IconVariant;
|
|
45
52
|
|
|
46
53
|
// バッジ関連
|
|
54
|
+
/** Shows a badge indicator on the button. @default false */
|
|
47
55
|
hasBadge?: boolean;
|
|
56
|
+
/** Number shown inside the badge. */
|
|
48
57
|
badgeCount?: number;
|
|
49
58
|
badgeVariant?: BadgeVariant;
|
|
50
59
|
badgeColor?: string;
|
|
60
|
+
/** Caps the badge count display (shows `max+` when exceeded). */
|
|
51
61
|
badgeMax?: number;
|
|
52
62
|
|
|
53
63
|
// 状態/動作
|
|
54
64
|
disabled?: boolean;
|
|
65
|
+
/** Shows a loading spinner and disables interaction. @default false */
|
|
55
66
|
loading?: boolean;
|
|
67
|
+
/** Toggleable pressed state (for toggle buttons). @default false */
|
|
56
68
|
pressed?: boolean;
|
|
57
69
|
|
|
58
70
|
// ARIA/アクセシビリティ
|
|
59
71
|
ariaLabel: string;
|
|
60
72
|
ariaDescribedby?: string;
|
|
61
73
|
ariaPressed?: boolean;
|
|
74
|
+
/** Disables animations for accessibility. @default false */
|
|
62
75
|
reducedMotion?: boolean;
|
|
63
76
|
|
|
64
77
|
// フォーカスイベント
|
|
@@ -4,32 +4,45 @@ import type { IconVariant, IconWeight, IconGrade, IconOpticalSize } from '../typ
|
|
|
4
4
|
import type { FocusHandler, KeyboardHandler, MouseHandler, TouchHandler, PointerHandler } from '../types/callbackHandlers';
|
|
5
5
|
import type { ButtonVariant, BadgeVariant } from '../types/propOptions';
|
|
6
6
|
export type IconButtonProps = {
|
|
7
|
+
/** Material Symbols icon name (e.g. `"close"`, `"edit"`). */
|
|
7
8
|
children: Snippet;
|
|
9
|
+
/** @default 'button' */
|
|
8
10
|
type?: 'button' | 'submit' | 'reset' | null | undefined;
|
|
9
11
|
tabindex?: number | null;
|
|
10
12
|
customStyle?: HTMLButtonAttributes['style'];
|
|
13
|
+
/** @default 'ghost' */
|
|
11
14
|
variant?: ButtonVariant;
|
|
15
|
+
/** Button size in px. */
|
|
12
16
|
size?: number;
|
|
17
|
+
/** Icon font size in px. */
|
|
13
18
|
fontSize?: number;
|
|
19
|
+
/** Custom CSS color value. Overrides the theme color. */
|
|
14
20
|
color?: string;
|
|
15
21
|
rounded?: boolean;
|
|
22
|
+
/** Additional Material Symbols icon rendered alongside children. */
|
|
16
23
|
icon?: string;
|
|
17
24
|
iconFilled?: boolean;
|
|
18
25
|
iconWeight?: IconWeight;
|
|
19
26
|
iconGrade?: IconGrade;
|
|
20
27
|
iconOpticalSize?: IconOpticalSize;
|
|
21
28
|
iconVariant?: IconVariant;
|
|
29
|
+
/** Shows a badge indicator on the button. @default false */
|
|
22
30
|
hasBadge?: boolean;
|
|
31
|
+
/** Number shown inside the badge. */
|
|
23
32
|
badgeCount?: number;
|
|
24
33
|
badgeVariant?: BadgeVariant;
|
|
25
34
|
badgeColor?: string;
|
|
35
|
+
/** Caps the badge count display (shows `max+` when exceeded). */
|
|
26
36
|
badgeMax?: number;
|
|
27
37
|
disabled?: boolean;
|
|
38
|
+
/** Shows a loading spinner and disables interaction. @default false */
|
|
28
39
|
loading?: boolean;
|
|
40
|
+
/** Toggleable pressed state (for toggle buttons). @default false */
|
|
29
41
|
pressed?: boolean;
|
|
30
42
|
ariaLabel: string;
|
|
31
43
|
ariaDescribedby?: string;
|
|
32
44
|
ariaPressed?: boolean;
|
|
45
|
+
/** Disables animations for accessibility. @default false */
|
|
33
46
|
reducedMotion?: boolean;
|
|
34
47
|
onfocus?: FocusHandler;
|
|
35
48
|
onblur?: FocusHandler;
|
|
@@ -22,20 +22,26 @@
|
|
|
22
22
|
// =========================================================================
|
|
23
23
|
export type ImageUploaderProps = {
|
|
24
24
|
// 基本プロパティ
|
|
25
|
+
/** Supports `bind:value`. */
|
|
25
26
|
value: FileList | null | undefined;
|
|
27
|
+
/** Allows selecting multiple images. @default false */
|
|
26
28
|
multiple?: boolean;
|
|
29
|
+
/** Maximum file size in bytes. Shows an error if exceeded. */
|
|
27
30
|
maxFileSize?: number;
|
|
28
31
|
placeholder?: string;
|
|
29
32
|
|
|
30
33
|
// HTML属性系
|
|
31
34
|
id?: string;
|
|
35
|
+
/** Accepted file types (e.g. `"image/*"`). */
|
|
32
36
|
accept?: string;
|
|
33
37
|
|
|
34
38
|
// スタイル/レイアウト
|
|
35
39
|
width?: string | number;
|
|
36
40
|
height?: string | number;
|
|
37
41
|
rounded?: boolean;
|
|
42
|
+
/** Preview display style. @default 'plain' */
|
|
38
43
|
previewStyle?: 'plain' | 'framed';
|
|
44
|
+
/** Adapts preview size to the image aspect ratio. @default false */
|
|
39
45
|
previewAdaptive?: boolean;
|
|
40
46
|
|
|
41
47
|
// アイコン系
|
|
@@ -1,16 +1,22 @@
|
|
|
1
1
|
import type { IconVariant, IconWeight, IconGrade, IconOpticalSize } from '../types/icon';
|
|
2
2
|
import type { BivariantValueHandler, FocusHandler, KeyboardHandler, MouseHandler, TouchHandler, PointerHandler } from '../types/callbackHandlers';
|
|
3
3
|
export type ImageUploaderProps = {
|
|
4
|
+
/** Supports `bind:value`. */
|
|
4
5
|
value: FileList | null | undefined;
|
|
6
|
+
/** Allows selecting multiple images. @default false */
|
|
5
7
|
multiple?: boolean;
|
|
8
|
+
/** Maximum file size in bytes. Shows an error if exceeded. */
|
|
6
9
|
maxFileSize?: number;
|
|
7
10
|
placeholder?: string;
|
|
8
11
|
id?: string;
|
|
12
|
+
/** Accepted file types (e.g. `"image/*"`). */
|
|
9
13
|
accept?: string;
|
|
10
14
|
width?: string | number;
|
|
11
15
|
height?: string | number;
|
|
12
16
|
rounded?: boolean;
|
|
17
|
+
/** Preview display style. @default 'plain' */
|
|
13
18
|
previewStyle?: 'plain' | 'framed';
|
|
19
|
+
/** Adapts preview size to the image aspect ratio. @default false */
|
|
14
20
|
previewAdaptive?: boolean;
|
|
15
21
|
icon?: string;
|
|
16
22
|
iconSize?: number;
|
|
@@ -27,6 +27,7 @@
|
|
|
27
27
|
|
|
28
28
|
// HTML属性系
|
|
29
29
|
id?: string | null;
|
|
30
|
+
/** @default 'text' */
|
|
30
31
|
type?: 'text' | 'password' | 'email' | 'tel' | 'url' | 'number';
|
|
31
32
|
tabindex?: number | null;
|
|
32
33
|
maxlength?: number | null;
|
|
@@ -34,24 +35,32 @@
|
|
|
34
35
|
min?: number | null;
|
|
35
36
|
max?: number | null;
|
|
36
37
|
step?: number | null;
|
|
38
|
+
/** Decimal places to round and display. Only for `type="number"`. */
|
|
37
39
|
decimalPlaces?: number | null;
|
|
40
|
+
/** Show thousands separator in the displayed value. Only for `type="number"`. @default false */
|
|
38
41
|
enableThousandsSeparator?: boolean;
|
|
39
42
|
autocomplete?: HTMLInputElement['autocomplete'] | null;
|
|
40
43
|
spellcheck?: boolean | null;
|
|
41
44
|
// スタイル/レイアウト
|
|
45
|
+
/** Renders inline, sized to content. @default false */
|
|
42
46
|
inline?: boolean;
|
|
47
|
+
/** @default 'outline' */
|
|
43
48
|
focusStyle?: FocusStyle;
|
|
44
49
|
placeholder?: string;
|
|
45
50
|
fullWidth?: boolean;
|
|
51
|
+
/** Width as px number or CSS string. */
|
|
46
52
|
width?: string | number | null;
|
|
47
53
|
minWidth?: string | number | null;
|
|
48
54
|
maxWidth?: string | number | null;
|
|
49
55
|
rounded?: boolean;
|
|
50
56
|
customStyle?: string;
|
|
57
|
+
/** Unit label (e.g. `"px"`, `"kg"`) shown next to the value; hidden while focused. */
|
|
51
58
|
unit?: string;
|
|
52
59
|
|
|
53
60
|
// アイコン関連
|
|
61
|
+
/** Material Symbols icon name shown on the right. */
|
|
54
62
|
rightIcon?: string;
|
|
63
|
+
/** Material Symbols icon name shown on the left. */
|
|
55
64
|
leftIcon?: string;
|
|
56
65
|
leftIconAriaLabel?: string;
|
|
57
66
|
rightIconAriaLabel?: string;
|
|
@@ -65,9 +74,13 @@
|
|
|
65
74
|
disabled?: boolean;
|
|
66
75
|
readonly?: boolean;
|
|
67
76
|
required?: boolean;
|
|
77
|
+
/** Shows a clear (×) button when the input has a value. @default false */
|
|
68
78
|
clearable?: boolean;
|
|
79
|
+
/** Converts URLs in the value to clickable links. Only for `type="text"` or `type="url"`. @default false */
|
|
69
80
|
linkify?: boolean;
|
|
81
|
+
/** Adds a show/hide password toggle button. Only for `type="password"`. @default false */
|
|
70
82
|
enablePasswordVisibilityToggle?: boolean;
|
|
83
|
+
/** Adds increment/decrement stepper buttons. Only for `type="number"`. @default false */
|
|
71
84
|
enableNumberStepper?: boolean;
|
|
72
85
|
|
|
73
86
|
// フォーカスイベント
|
|
@@ -5,6 +5,7 @@ export type InputProps = {
|
|
|
5
5
|
name?: string;
|
|
6
6
|
value: string | number | null | undefined;
|
|
7
7
|
id?: string | null;
|
|
8
|
+
/** @default 'text' */
|
|
8
9
|
type?: 'text' | 'password' | 'email' | 'tel' | 'url' | 'number';
|
|
9
10
|
tabindex?: number | null;
|
|
10
11
|
maxlength?: number | null;
|
|
@@ -12,21 +13,29 @@ export type InputProps = {
|
|
|
12
13
|
min?: number | null;
|
|
13
14
|
max?: number | null;
|
|
14
15
|
step?: number | null;
|
|
16
|
+
/** Decimal places to round and display. Only for `type="number"`. */
|
|
15
17
|
decimalPlaces?: number | null;
|
|
18
|
+
/** Show thousands separator in the displayed value. Only for `type="number"`. @default false */
|
|
16
19
|
enableThousandsSeparator?: boolean;
|
|
17
20
|
autocomplete?: HTMLInputElement['autocomplete'] | null;
|
|
18
21
|
spellcheck?: boolean | null;
|
|
22
|
+
/** Renders inline, sized to content. @default false */
|
|
19
23
|
inline?: boolean;
|
|
24
|
+
/** @default 'outline' */
|
|
20
25
|
focusStyle?: FocusStyle;
|
|
21
26
|
placeholder?: string;
|
|
22
27
|
fullWidth?: boolean;
|
|
28
|
+
/** Width as px number or CSS string. */
|
|
23
29
|
width?: string | number | null;
|
|
24
30
|
minWidth?: string | number | null;
|
|
25
31
|
maxWidth?: string | number | null;
|
|
26
32
|
rounded?: boolean;
|
|
27
33
|
customStyle?: string;
|
|
34
|
+
/** Unit label (e.g. `"px"`, `"kg"`) shown next to the value; hidden while focused. */
|
|
28
35
|
unit?: string;
|
|
36
|
+
/** Material Symbols icon name shown on the right. */
|
|
29
37
|
rightIcon?: string;
|
|
38
|
+
/** Material Symbols icon name shown on the left. */
|
|
30
39
|
leftIcon?: string;
|
|
31
40
|
leftIconAriaLabel?: string;
|
|
32
41
|
rightIconAriaLabel?: string;
|
|
@@ -38,9 +47,13 @@ export type InputProps = {
|
|
|
38
47
|
disabled?: boolean;
|
|
39
48
|
readonly?: boolean;
|
|
40
49
|
required?: boolean;
|
|
50
|
+
/** Shows a clear (×) button when the input has a value. @default false */
|
|
41
51
|
clearable?: boolean;
|
|
52
|
+
/** Converts URLs in the value to clickable links. Only for `type="text"` or `type="url"`. @default false */
|
|
42
53
|
linkify?: boolean;
|
|
54
|
+
/** Adds a show/hide password toggle button. Only for `type="password"`. @default false */
|
|
43
55
|
enablePasswordVisibilityToggle?: boolean;
|
|
56
|
+
/** Adds increment/decrement stepper buttons. Only for `type="number"`. @default false */
|
|
44
57
|
enableNumberStepper?: boolean;
|
|
45
58
|
onfocus?: FocusHandler;
|
|
46
59
|
onblur?: FocusHandler;
|
|
@@ -6,14 +6,18 @@
|
|
|
6
6
|
// =========================================================================
|
|
7
7
|
export type LoadingSpinnerProps = {
|
|
8
8
|
// スタイル/レイアウト
|
|
9
|
+
/** Size in px. @default 32 */
|
|
9
10
|
size?: number;
|
|
10
11
|
color?: string;
|
|
12
|
+
/** @default 3 */
|
|
11
13
|
strokeWidth?: number;
|
|
12
14
|
|
|
13
15
|
// 状態/動作
|
|
16
|
+
/** Animation speed multiplier. @default 1 */
|
|
14
17
|
speed?: number;
|
|
15
18
|
|
|
16
19
|
// ARIA/アクセシビリティ
|
|
20
|
+
/** Disables animations for accessibility. @default false */
|
|
17
21
|
reducedMotion?: boolean;
|
|
18
22
|
};
|
|
19
23
|
|
|
@@ -1,8 +1,12 @@
|
|
|
1
1
|
export type LoadingSpinnerProps = {
|
|
2
|
+
/** Size in px. @default 32 */
|
|
2
3
|
size?: number;
|
|
3
4
|
color?: string;
|
|
5
|
+
/** @default 3 */
|
|
4
6
|
strokeWidth?: number;
|
|
7
|
+
/** Animation speed multiplier. @default 1 */
|
|
5
8
|
speed?: number;
|
|
9
|
+
/** Disables animations for accessibility. @default false */
|
|
6
10
|
reducedMotion?: boolean;
|
|
7
11
|
};
|
|
8
12
|
declare const LoadingSpinner: import("svelte").Component<LoadingSpinnerProps, {}, "">;
|
|
@@ -23,6 +23,7 @@
|
|
|
23
23
|
children?: Snippet;
|
|
24
24
|
|
|
25
25
|
// 基本プロパティ
|
|
26
|
+
/** Internal label used for accessibility announcements. @default 'Modal' */
|
|
26
27
|
componentType?: string;
|
|
27
28
|
|
|
28
29
|
// スタイル/レイアウト
|
|
@@ -30,9 +31,13 @@
|
|
|
30
31
|
customStyles?: string;
|
|
31
32
|
|
|
32
33
|
// 状態/動作
|
|
34
|
+
/** Use `modalRef.open()` / `.close()` instead of binding this directly. */
|
|
33
35
|
isOpen?: boolean;
|
|
36
|
+
/** Closes when clicking the backdrop. @default true */
|
|
34
37
|
closeIfClickOutside?: boolean;
|
|
38
|
+
/** Returns focus to the trigger element on close. @default false */
|
|
35
39
|
restoreFocus?: boolean;
|
|
40
|
+
/** Focuses the first focusable element on open. @default false */
|
|
36
41
|
focusFirstOnOpen?: boolean;
|
|
37
42
|
|
|
38
43
|
// ARIA/アクセシビリティ
|
|
@@ -163,6 +168,7 @@
|
|
|
163
168
|
// =========================================================================
|
|
164
169
|
// Methods
|
|
165
170
|
// =========================================================================
|
|
171
|
+
/** Opens the modal. */
|
|
166
172
|
export const open = (title?: string): void => {
|
|
167
173
|
if (!dialogRef) return;
|
|
168
174
|
|
|
@@ -181,6 +187,7 @@
|
|
|
181
187
|
}, 0);
|
|
182
188
|
};
|
|
183
189
|
|
|
190
|
+
/** Closes the modal. */
|
|
184
191
|
export const close = (title?: string): void => {
|
|
185
192
|
if (!dialogRef) return;
|
|
186
193
|
|
|
@@ -191,6 +198,7 @@
|
|
|
191
198
|
announceOpenClose(componentType, false, title || ariaLabel || '');
|
|
192
199
|
};
|
|
193
200
|
|
|
201
|
+
/** @internal Completes the close animation. Called automatically. */
|
|
194
202
|
export const closeEnd = (): void => {
|
|
195
203
|
if (!dialogRef) return;
|
|
196
204
|
|
|
@@ -203,6 +211,7 @@
|
|
|
203
211
|
previousActiveElement = null;
|
|
204
212
|
};
|
|
205
213
|
|
|
214
|
+
/** Toggles between open and closed. */
|
|
206
215
|
export const toggle = (title?: string): void => {
|
|
207
216
|
if (isOpen) {
|
|
208
217
|
close(title);
|
|
@@ -13,12 +13,17 @@
|
|
|
13
13
|
import type { Snippet } from 'svelte';
|
|
14
14
|
export type ModalProps = {
|
|
15
15
|
children?: Snippet;
|
|
16
|
+
/** Internal label used for accessibility announcements. @default 'Modal' */
|
|
16
17
|
componentType?: string;
|
|
17
18
|
customClass?: string;
|
|
18
19
|
customStyles?: string;
|
|
20
|
+
/** Use `modalRef.open()` / `.close()` instead of binding this directly. */
|
|
19
21
|
isOpen?: boolean;
|
|
22
|
+
/** Closes when clicking the backdrop. @default true */
|
|
20
23
|
closeIfClickOutside?: boolean;
|
|
24
|
+
/** Returns focus to the trigger element on close. @default false */
|
|
21
25
|
restoreFocus?: boolean;
|
|
26
|
+
/** Focuses the first focusable element on open. @default false */
|
|
22
27
|
focusFirstOnOpen?: boolean;
|
|
23
28
|
ariaLabel?: string;
|
|
24
29
|
ariaLabelledby?: string;
|
|
@@ -26,10 +31,10 @@ export type ModalProps = {
|
|
|
26
31
|
id?: string;
|
|
27
32
|
};
|
|
28
33
|
declare const Modal: import("svelte").Component<ModalProps, {
|
|
29
|
-
open: (title?: string) => void;
|
|
30
|
-
close: (title?: string) => void;
|
|
31
|
-
closeEnd: () => void;
|
|
32
|
-
toggle: (title?: string) => void;
|
|
34
|
+
/** Opens the modal. */ open: (title?: string) => void;
|
|
35
|
+
/** Closes the modal. */ close: (title?: string) => void;
|
|
36
|
+
/** @internal Completes the close animation. Called automatically. */ closeEnd: () => void;
|
|
37
|
+
/** Toggles between open and closed. */ toggle: (title?: string) => void;
|
|
33
38
|
}, "isOpen">;
|
|
34
39
|
type Modal = ReturnType<typeof Modal>;
|
|
35
40
|
export default Modal;
|
|
@@ -14,10 +14,15 @@
|
|
|
14
14
|
// =========================================================================
|
|
15
15
|
export type NavProps = {
|
|
16
16
|
// 基本プロパティ
|
|
17
|
+
/** `{ label, href, icon?, disabled? }[]` */
|
|
17
18
|
navItems?: MenuItem[];
|
|
19
|
+
/** Layout variant. @default 'tab' */
|
|
18
20
|
variant?: NavVariant;
|
|
21
|
+
/** Prepended to each item's href for active-state matching. */
|
|
19
22
|
pathPrefix?: string;
|
|
23
|
+
/** Custom function to determine if an item is active. */
|
|
20
24
|
customPathMatcher?: (currentPath: string, itemHref: string, item: MenuItem) => boolean;
|
|
25
|
+
/** Overrides the auto-detected current path. */
|
|
21
26
|
currentPath?: string;
|
|
22
27
|
|
|
23
28
|
// HTML属性
|
|
@@ -31,6 +36,7 @@
|
|
|
31
36
|
iconVariant?: IconVariant;
|
|
32
37
|
|
|
33
38
|
// スタイル/レイアウト
|
|
39
|
+
/** Visual style for the selected item. */
|
|
34
40
|
selectedStyle?: NavItemSelectedStyle;
|
|
35
41
|
gap?: number | string;
|
|
36
42
|
|
|
@@ -3,10 +3,15 @@ import type { MenuItem } from '../types/menuItem';
|
|
|
3
3
|
import type { NavVariant } from '../types/propOptions';
|
|
4
4
|
import type { IconVariant, IconWeight, IconGrade, IconOpticalSize } from '../types/icon';
|
|
5
5
|
export type NavProps = {
|
|
6
|
+
/** `{ label, href, icon?, disabled? }[]` */
|
|
6
7
|
navItems?: MenuItem[];
|
|
8
|
+
/** Layout variant. @default 'tab' */
|
|
7
9
|
variant?: NavVariant;
|
|
10
|
+
/** Prepended to each item's href for active-state matching. */
|
|
8
11
|
pathPrefix?: string;
|
|
12
|
+
/** Custom function to determine if an item is active. */
|
|
9
13
|
customPathMatcher?: (currentPath: string, itemHref: string, item: MenuItem) => boolean;
|
|
14
|
+
/** Overrides the auto-detected current path. */
|
|
10
15
|
currentPath?: string;
|
|
11
16
|
id?: string;
|
|
12
17
|
iconFilled?: boolean;
|
|
@@ -14,6 +19,7 @@ export type NavProps = {
|
|
|
14
19
|
iconGrade?: IconGrade;
|
|
15
20
|
iconOpticalSize?: IconOpticalSize;
|
|
16
21
|
iconVariant?: IconVariant;
|
|
22
|
+
/** Visual style for the selected item. */
|
|
17
23
|
selectedStyle?: NavItemSelectedStyle;
|
|
18
24
|
gap?: number | string;
|
|
19
25
|
ariaLabel?: string;
|
|
@@ -10,17 +10,24 @@
|
|
|
10
10
|
// =========================================================================
|
|
11
11
|
export type PaginationProps = {
|
|
12
12
|
// 基本プロパティ
|
|
13
|
+
/** Total number of items. */
|
|
13
14
|
total: number;
|
|
15
|
+
/** Items per page. */
|
|
14
16
|
limit: number;
|
|
17
|
+
/** Current page number (1-based). Supports `bind:currentPageNum`. */
|
|
15
18
|
currentPageNum: number;
|
|
19
|
+
/** Number of page buttons shown. @default 5 */
|
|
16
20
|
visiblePages?: number;
|
|
17
21
|
|
|
18
22
|
// HTML属性
|
|
19
23
|
id?: string;
|
|
20
24
|
|
|
21
25
|
// 状態/動作
|
|
26
|
+
/** Shows "X items" count. @default true */
|
|
22
27
|
showCount?: boolean;
|
|
28
|
+
/** Shows "X–Y of" range. @default true */
|
|
23
29
|
showRange?: boolean;
|
|
30
|
+
/** Shows total count. @default true */
|
|
24
31
|
showTotal?: boolean;
|
|
25
32
|
|
|
26
33
|
// イベントハンドラー
|
|
@@ -1,11 +1,18 @@
|
|
|
1
1
|
export type PaginationProps = {
|
|
2
|
+
/** Total number of items. */
|
|
2
3
|
total: number;
|
|
4
|
+
/** Items per page. */
|
|
3
5
|
limit: number;
|
|
6
|
+
/** Current page number (1-based). Supports `bind:currentPageNum`. */
|
|
4
7
|
currentPageNum: number;
|
|
8
|
+
/** Number of page buttons shown. @default 5 */
|
|
5
9
|
visiblePages?: number;
|
|
6
10
|
id?: string;
|
|
11
|
+
/** Shows "X items" count. @default true */
|
|
7
12
|
showCount?: boolean;
|
|
13
|
+
/** Shows "X–Y of" range. @default true */
|
|
8
14
|
showRange?: boolean;
|
|
15
|
+
/** Shows total count. @default true */
|
|
9
16
|
showTotal?: boolean;
|
|
10
17
|
onchange: (pageNum: number) => void;
|
|
11
18
|
};
|
|
@@ -29,23 +29,32 @@
|
|
|
29
29
|
children: Snippet;
|
|
30
30
|
|
|
31
31
|
// DOM参照
|
|
32
|
+
/** The element the popup is anchored to. */
|
|
32
33
|
anchorElement: HTMLElement | null | undefined;
|
|
33
34
|
|
|
34
35
|
// 基本プロパティ
|
|
36
|
+
/** ARIA role for the popup container. @default 'menu' */
|
|
35
37
|
role?: string;
|
|
36
38
|
|
|
37
39
|
// HTML属性
|
|
38
40
|
id?: string;
|
|
39
41
|
|
|
40
42
|
// スタイル/レイアウト
|
|
43
|
+
/** @default 'bottom' */
|
|
41
44
|
position?: PopupPosition;
|
|
45
|
+
/** Gap in px between anchor and popup. @default 8 */
|
|
42
46
|
margin?: number;
|
|
43
47
|
|
|
44
48
|
// 状態/動作
|
|
49
|
+
/** Use `popupRef.open()` / `.close()` instead of binding this directly. */
|
|
45
50
|
isOpen?: boolean;
|
|
51
|
+
/** Traps keyboard focus inside the popup. @default false */
|
|
46
52
|
focusTrap?: boolean;
|
|
53
|
+
/** Returns focus to the anchor element on close. @default false */
|
|
47
54
|
restoreFocus?: boolean;
|
|
55
|
+
/** On mobile, displays as a fullscreen sheet. @default false */
|
|
48
56
|
mobileFullscreen?: boolean;
|
|
57
|
+
/** Repositions automatically when near viewport edges. @default false */
|
|
49
58
|
enableAutoReposition?: boolean;
|
|
50
59
|
|
|
51
60
|
// ARIA/アクセシビリティ
|
|
@@ -432,6 +441,7 @@
|
|
|
432
441
|
};
|
|
433
442
|
};
|
|
434
443
|
|
|
444
|
+
/** Opens the popup. */
|
|
435
445
|
export const open = async () => {
|
|
436
446
|
// 他の開いているPopupをすべて閉じる
|
|
437
447
|
popupManager.closeOthers(close);
|
|
@@ -487,6 +497,7 @@
|
|
|
487
497
|
}, 1);
|
|
488
498
|
};
|
|
489
499
|
|
|
500
|
+
/** Closes the popup. */
|
|
490
501
|
export const close = () => {
|
|
491
502
|
isOpen = false;
|
|
492
503
|
removeEventListenersToClose();
|
|
@@ -498,6 +509,7 @@
|
|
|
498
509
|
// onCloseはアニメーション完了後に呼ぶ(closeEndで実行)
|
|
499
510
|
};
|
|
500
511
|
|
|
512
|
+
/** Toggles between open and closed. */
|
|
501
513
|
export const toggle = () => {
|
|
502
514
|
if (isOpen) {
|
|
503
515
|
close();
|
|
@@ -506,6 +518,7 @@
|
|
|
506
518
|
}
|
|
507
519
|
};
|
|
508
520
|
|
|
521
|
+
/** Returns whether the popup is currently open. */
|
|
509
522
|
export const getIsOpen = () => {
|
|
510
523
|
return isOpen;
|
|
511
524
|
};
|