@plaidev/karte-action-sdk 1.1.270-29170585.8999f4d3 → 1.1.270-29228770.05dce6ca
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-flex/brand-kit.d.ts +6 -0
- package/dist/components-flex/embed/types.d.ts +7 -0
- package/dist/components-flex/form/styles.d.ts +7 -0
- package/dist/components-flex/form/types.d.ts +116 -0
- package/dist/components-flex/form.d.ts +85 -0
- package/dist/components-flex/icon/types.d.ts +1 -0
- package/dist/components-flex/layout/types.d.ts +1 -0
- package/dist/components-flex/modal/types.d.ts +2 -2
- package/dist/components-flex/props.d.ts +5 -1
- package/dist/components-flex/utils/obj-to-style.d.ts +1 -1
- package/dist/functions.d.ts +4 -0
- package/dist/hydrate/components-flex/brand-kit.d.ts +6 -0
- package/dist/hydrate/components-flex/embed/types.d.ts +7 -0
- package/dist/hydrate/components-flex/form/styles.d.ts +7 -0
- package/dist/hydrate/components-flex/form/types.d.ts +116 -0
- package/dist/hydrate/components-flex/form.d.ts +85 -0
- package/dist/hydrate/components-flex/icon/types.d.ts +1 -0
- package/dist/hydrate/components-flex/layout/types.d.ts +1 -0
- package/dist/hydrate/components-flex/modal/types.d.ts +2 -2
- package/dist/hydrate/components-flex/props.d.ts +5 -1
- package/dist/hydrate/components-flex/utils/obj-to-style.d.ts +1 -1
- package/dist/hydrate/functions.d.ts +4 -0
- package/dist/hydrate/index.d.ts +3 -0
- package/dist/hydrate/index.es.js +3244 -975
- package/dist/hydrate/index.svelte5.d.ts +11 -0
- package/dist/hydrate/prop.d.ts +14 -0
- package/dist/hydrate/stores.d.ts +12 -0
- package/dist/index.es.d.ts +3 -0
- package/dist/index.es.js +2933 -936
- package/dist/prop.d.ts +14 -0
- package/dist/stores.d.ts +12 -0
- package/dist/svelte5/components-flex/brand-kit.d.ts +6 -0
- package/dist/svelte5/components-flex/embed/types.d.ts +7 -0
- package/dist/svelte5/components-flex/form/styles.d.ts +7 -0
- package/dist/svelte5/components-flex/form/types.d.ts +116 -0
- package/dist/svelte5/components-flex/form.d.ts +85 -0
- package/dist/svelte5/components-flex/icon/types.d.ts +1 -0
- package/dist/svelte5/components-flex/layout/types.d.ts +1 -0
- package/dist/svelte5/components-flex/modal/types.d.ts +2 -2
- package/dist/svelte5/components-flex/props.d.ts +5 -1
- package/dist/svelte5/components-flex/utils/obj-to-style.d.ts +1 -1
- package/dist/svelte5/functions.d.ts +4 -0
- package/dist/svelte5/hydrate/components-flex/brand-kit.d.ts +6 -0
- package/dist/svelte5/hydrate/components-flex/embed/types.d.ts +7 -0
- package/dist/svelte5/hydrate/components-flex/form/styles.d.ts +7 -0
- package/dist/svelte5/hydrate/components-flex/form/types.d.ts +116 -0
- package/dist/svelte5/hydrate/components-flex/form.d.ts +85 -0
- package/dist/svelte5/hydrate/components-flex/icon/types.d.ts +1 -0
- package/dist/svelte5/hydrate/components-flex/layout/types.d.ts +1 -0
- package/dist/svelte5/hydrate/components-flex/modal/types.d.ts +2 -2
- package/dist/svelte5/hydrate/components-flex/props.d.ts +5 -1
- package/dist/svelte5/hydrate/components-flex/utils/obj-to-style.d.ts +1 -1
- package/dist/svelte5/hydrate/functions.d.ts +4 -0
- package/dist/svelte5/hydrate/index.es.d.ts +11 -0
- package/dist/svelte5/hydrate/index.es.js +1394 -240
- package/dist/svelte5/hydrate/prop.d.ts +14 -0
- package/dist/svelte5/hydrate/stores.d.ts +12 -0
- package/dist/svelte5/index.es.d.ts +11 -0
- package/dist/svelte5/index.es.js +1394 -240
- package/dist/svelte5/index.front2.es.js +1422 -239
- package/dist/svelte5/index.svelte5.d.ts +11 -0
- package/dist/svelte5/prop.d.ts +14 -0
- package/dist/svelte5/stores.d.ts +12 -0
- package/dist/templates.cjs.js +10 -5
- package/dist/templates.d.ts +0 -3
- package/dist/templates.js +10 -5
- package/package.json +7 -14
@@ -9,6 +9,12 @@ export type BrandKit = {
|
|
9
9
|
color_info: string;
|
10
10
|
color_warning: string;
|
11
11
|
color_white: string;
|
12
|
+
color_form_field_placeholder: string;
|
13
|
+
color_form_field_border: string;
|
14
|
+
color_form_field_background: string;
|
15
|
+
color_form_field_focused_border?: string;
|
16
|
+
color_form_field_focused_background?: string;
|
17
|
+
color_form_field_accent?: string;
|
12
18
|
};
|
13
19
|
export declare const getBrandKit: (customBrandKit?: Partial<BrandKit>) => BrandKit;
|
14
20
|
export declare const useBrandKit: () => {
|
@@ -0,0 +1,7 @@
|
|
1
|
+
import type { ButtonProps } from "src/components-flex/button/types";
|
2
|
+
import type { PropStyles } from "../shared/types.js";
|
3
|
+
import type { BrandKit } from "../brand-kit.js";
|
4
|
+
import type { BrandableStyles } from "../styles.js";
|
5
|
+
import { FormFieldProps } from "./types.js";
|
6
|
+
export declare const getFormFieldLabelThemeStyles: (customBrandKit?: Partial<BrandKit>) => BrandableStyles<FormFieldProps>;
|
7
|
+
export declare const FORM_FIELD_LABEL_SIZE_STYLES: PropStyles<ButtonProps, "size">;
|
@@ -0,0 +1,116 @@
|
|
1
|
+
import type { CommonProps } from "../props.js";
|
2
|
+
import { Properties } from "csstype";
|
3
|
+
export type FormProps = CommonProps & {
|
4
|
+
fields: FormField[];
|
5
|
+
};
|
6
|
+
export declare const FORM_FIELD_LABEL_SIZE: {
|
7
|
+
readonly small: "スモール";
|
8
|
+
readonly medium: "ミディアム";
|
9
|
+
readonly large: "ラージ";
|
10
|
+
};
|
11
|
+
export declare const FORM_FIELD_LABEL_THEME: {
|
12
|
+
readonly default: "デフォルト";
|
13
|
+
readonly gray: "グレー";
|
14
|
+
readonly brand: "ブランド";
|
15
|
+
};
|
16
|
+
export type FormFieldProps = CommonProps & {
|
17
|
+
fieldName?: string;
|
18
|
+
fieldType?: FormFieldType;
|
19
|
+
required?: boolean;
|
20
|
+
defaultValue?: string | string[];
|
21
|
+
// layout
|
22
|
+
direction?: "row" | "column";
|
23
|
+
gap?: Properties["rowGap"];
|
24
|
+
// label
|
25
|
+
showLabel?: boolean;
|
26
|
+
label?: string;
|
27
|
+
labelWidth?: Properties["width"];
|
28
|
+
labelSize?: keyof typeof FORM_FIELD_LABEL_SIZE | string;
|
29
|
+
labelTheme?: keyof typeof FORM_FIELD_LABEL_THEME | string;
|
30
|
+
};
|
31
|
+
export declare const FORM_FIELD_TYPE: {
|
32
|
+
readonly INPUT: "input";
|
33
|
+
readonly SELECT: "select";
|
34
|
+
readonly CHECKBOX: "checkbox";
|
35
|
+
readonly CHECKBOXES: "checkboxes";
|
36
|
+
readonly RADIOS: "radio";
|
37
|
+
readonly TEXTAREA: "textarea";
|
38
|
+
};
|
39
|
+
export type FormFieldType = (typeof FORM_FIELD_TYPE)[keyof typeof FORM_FIELD_TYPE];
|
40
|
+
export type FormField = {
|
41
|
+
name: string;
|
42
|
+
type: FormFieldType;
|
43
|
+
required: boolean;
|
44
|
+
label: string;
|
45
|
+
defaultValue?: string | string[];
|
46
|
+
};
|
47
|
+
export declare const FORM_FIELD_VARIANT: {
|
48
|
+
readonly outlined: "アウトライン";
|
49
|
+
readonly underlined: "アンダーライン";
|
50
|
+
readonly filled: "塗りつぶし";
|
51
|
+
};
|
52
|
+
export declare const FORM_FIELD_VARIANT_FOR_CHECKER: {
|
53
|
+
readonly outlined: "アウトライン";
|
54
|
+
readonly filled: "塗りつぶし";
|
55
|
+
};
|
56
|
+
export type FormFieldVariant = keyof typeof FORM_FIELD_VARIANT;
|
57
|
+
export type FormFieldVariantForChecker = keyof typeof FORM_FIELD_VARIANT_FOR_CHECKER;
|
58
|
+
export declare const FORM_FIELD_SIZE: {
|
59
|
+
readonly small: "スモール";
|
60
|
+
readonly medium: "ミディアム";
|
61
|
+
readonly large: "ラージ";
|
62
|
+
};
|
63
|
+
export type FormFieldSize = keyof typeof FORM_FIELD_SIZE;
|
64
|
+
export declare const FORM_INPUT_TYPE: {
|
65
|
+
readonly TEXT: "text";
|
66
|
+
readonly URL: "url";
|
67
|
+
readonly TEL: "tel";
|
68
|
+
readonly EMAIL: "email";
|
69
|
+
};
|
70
|
+
export type FormInputType = (typeof FORM_INPUT_TYPE)[keyof typeof FORM_INPUT_TYPE];
|
71
|
+
export type FormInputCommonProps = {
|
72
|
+
placeholder?: string;
|
73
|
+
width?: Properties["width"];
|
74
|
+
variant?: FormFieldVariant;
|
75
|
+
size?: FormFieldSize;
|
76
|
+
backgroundColor?: string;
|
77
|
+
borderColor?: string;
|
78
|
+
focusedBorderColor?: string;
|
79
|
+
fontColor?: string;
|
80
|
+
placeholderColor?: string;
|
81
|
+
};
|
82
|
+
export type FormInputProps = FormFieldProps & FormInputCommonProps & {
|
83
|
+
variant?: FormFieldVariant;
|
84
|
+
inputType?: FormInputType;
|
85
|
+
};
|
86
|
+
export type FormTextareaProps = FormFieldProps & FormInputCommonProps & {
|
87
|
+
variant?: FormFieldVariant;
|
88
|
+
rows?: number;
|
89
|
+
};
|
90
|
+
export type FormOptionsProps = {
|
91
|
+
options?: {
|
92
|
+
label: string;
|
93
|
+
value: string;
|
94
|
+
}[];
|
95
|
+
};
|
96
|
+
export type FormSelectProps = FormFieldProps & FormInputCommonProps & FormOptionsProps & {
|
97
|
+
variant?: FormFieldVariant;
|
98
|
+
};
|
99
|
+
export type FormListCommonProps = FormOptionsProps & {
|
100
|
+
layout?: "vertical" | "horizontal" | "grid";
|
101
|
+
layoutGridCols?: number;
|
102
|
+
layoutGapY?: Properties["columnGap"];
|
103
|
+
layoutGapX?: Properties["rowGap"];
|
104
|
+
accentColor?: string;
|
105
|
+
borderColor?: string;
|
106
|
+
fontColor?: string;
|
107
|
+
backgroundColor?: string;
|
108
|
+
};
|
109
|
+
export type FormCheckboxesProps = FormFieldProps & FormListCommonProps & {
|
110
|
+
variant?: FormFieldVariantForChecker;
|
111
|
+
size?: FormFieldSize;
|
112
|
+
};
|
113
|
+
export type FormRadiosProps = FormFieldProps & FormListCommonProps & {
|
114
|
+
variant?: FormFieldVariantForChecker;
|
115
|
+
size?: FormFieldSize;
|
116
|
+
};
|
@@ -0,0 +1,85 @@
|
|
1
|
+
import { Writable } from "svelte/store";
|
2
|
+
import { FormFieldType } from "./form/types.js";
|
3
|
+
export type FormStoreValue = string | string[];
|
4
|
+
export type FormStoreState = {
|
5
|
+
isDirty: boolean;
|
6
|
+
isTouched: boolean;
|
7
|
+
isValid: boolean;
|
8
|
+
errorMessage: string | null;
|
9
|
+
value: FormStoreValue;
|
10
|
+
};
|
11
|
+
export type FormStoreValues = Record<string, FormStoreValue>;
|
12
|
+
export type FormStoreErrorMessages = Record<string, FormStoreState["errorMessage"]>;
|
13
|
+
export type FormStoreStates = Record<string, FormStoreState>;
|
14
|
+
export type FormStoreSchemaInput = {
|
15
|
+
name: string;
|
16
|
+
type: FormFieldType;
|
17
|
+
defaultValue: string | string[];
|
18
|
+
required: boolean;
|
19
|
+
};
|
20
|
+
export type FormStoreSchema = FormStoreSchemaInput & {
|
21
|
+
statePath: string;
|
22
|
+
};
|
23
|
+
export type FormStore = {
|
24
|
+
schemas: FormStoreSchema[];
|
25
|
+
states: FormStoreStates;
|
26
|
+
};
|
27
|
+
/**
|
28
|
+
* @internal
|
29
|
+
*/
|
30
|
+
export declare const formStore: Writable<FormStore>;
|
31
|
+
export declare const formSubmittedValues: Writable<FormStoreValues>;
|
32
|
+
/**
|
33
|
+
* @public
|
34
|
+
*/
|
35
|
+
export declare const getFormFieldSchema: (name: string) => FormStoreSchema | undefined;
|
36
|
+
/**
|
37
|
+
* @public
|
38
|
+
*/
|
39
|
+
export declare const getFormFieldState: (name: string) => FormStoreState | undefined;
|
40
|
+
/**
|
41
|
+
* @public
|
42
|
+
*/
|
43
|
+
export declare const getFormFieldValue: (name: string) => FormStoreValue | undefined;
|
44
|
+
/**
|
45
|
+
* @public
|
46
|
+
*/
|
47
|
+
export declare const getFormValues: () => FormStoreValues;
|
48
|
+
/**
|
49
|
+
* @public
|
50
|
+
*/
|
51
|
+
export declare const getFormErrors: () => FormStoreErrorMessages;
|
52
|
+
/**
|
53
|
+
* @public
|
54
|
+
*/
|
55
|
+
export declare const setFormFieldValue: (name: string, value: any) => void;
|
56
|
+
/**
|
57
|
+
* @public
|
58
|
+
*/
|
59
|
+
export declare const setFormFieldError: (name: string, errorMessage: string | null) => void;
|
60
|
+
/**
|
61
|
+
* @public
|
62
|
+
*/
|
63
|
+
export declare const setFormFieldTouched: (name: string) => void;
|
64
|
+
/**
|
65
|
+
* @public
|
66
|
+
*/
|
67
|
+
export declare const registerFormField: (schemas: FormStoreSchemaInput | FormStoreSchemaInput[]) => void;
|
68
|
+
/**
|
69
|
+
* @public
|
70
|
+
*/
|
71
|
+
export declare const unregisterFormField: (fieldNames: string | string[]) => void;
|
72
|
+
export declare const validateFormField: (schema: FormStoreSchema, value: FormStoreValue) => {
|
73
|
+
isValid: true;
|
74
|
+
error: undefined;
|
75
|
+
} | {
|
76
|
+
isValid: false;
|
77
|
+
error: string;
|
78
|
+
};
|
79
|
+
/**
|
80
|
+
* @public
|
81
|
+
*/
|
82
|
+
export declare function onSubmitForm(fn: (data: {
|
83
|
+
currentStateValues: any;
|
84
|
+
allValues: any;
|
85
|
+
}) => void): void;
|
@@ -1,4 +1,5 @@
|
|
1
1
|
import type { ClickableProps, CommonProps } from "../props.js";
|
2
|
+
// @ts-ignore -- NOTE(kazupon): error TS2307: Cannot find module 'preact/src/jsx-csstype' or its corresponding type declarations
|
2
3
|
import type { Properties } from "preact/src/jsx-csstype";
|
3
4
|
export declare const ICON_SIZE: {
|
4
5
|
[key: string]: {
|
@@ -1,5 +1,5 @@
|
|
1
1
|
import type { Properties } from "csstype";
|
2
|
-
import type { CommonProps, OverflowProps, BorderProps, RadiusProps, ShadowProps, BackgroundProps } from "../props.js";
|
3
|
-
export type FrameModalProps = CommonProps & OverflowProps & BorderProps & RadiusProps & ShadowProps & BackgroundProps & {
|
2
|
+
import type { CommonProps, OverflowProps, BorderProps, RadiusProps, ShadowProps, BackgroundProps, PaddingProps } from "../props.js";
|
3
|
+
export type FrameModalProps = CommonProps & OverflowProps & BorderProps & RadiusProps & ShadowProps & PaddingProps & BackgroundProps & {
|
4
4
|
width?: Properties["width"];
|
5
5
|
};
|
@@ -21,13 +21,17 @@ export type CustomizeCssProps = {
|
|
21
21
|
isCustomizeCss?: boolean;
|
22
22
|
customizeCss?: string;
|
23
23
|
};
|
24
|
+
export type CustomizeAttributesProps = {
|
25
|
+
id?: string;
|
26
|
+
classNames?: string[];
|
27
|
+
};
|
24
28
|
export type BrandStyleProps = {
|
25
29
|
customBrandKit?: Partial<BrandKit>;
|
26
30
|
};
|
27
31
|
export type ActionTableProps = {
|
28
32
|
actionTableKey?: string;
|
29
33
|
};
|
30
|
-
export type CommonProps = MetaProps & PositionProps & CustomizeCssProps & BrandStyleProps;
|
34
|
+
export type CommonProps = MetaProps & PositionProps & CustomizeAttributesProps & CustomizeCssProps & BrandStyleProps;
|
31
35
|
export type ClickableProps = {
|
32
36
|
onClick?: OnClickOperation;
|
33
37
|
eventName?: string;
|
@@ -1,2 +1,2 @@
|
|
1
1
|
import type { Properties } from "csstype";
|
2
|
-
export declare const objToStyle: (obj: Properties) => string;
|
2
|
+
export declare const objToStyle: (obj: Properties | Record<string, any>) => string;
|
package/dist/functions.d.ts
CHANGED
@@ -13,6 +13,10 @@ export declare const runScript: (handlerName: string) => () => void;
|
|
13
13
|
/** @internal */
|
14
14
|
export declare const submitForm: (to: string) => () => void;
|
15
15
|
/** @internal */
|
16
|
+
export declare const submitFormProgress: (to: string) => () => void;
|
17
|
+
/** @internal */
|
18
|
+
export declare const submitFormFinal: (to: string) => () => void;
|
19
|
+
/** @internal */
|
16
20
|
export declare const bootChat: (hide_launcher: boolean, placement_pc: string, placement_mobile: string, horizontal_spacing_pc: number, horizontal_spacing_mobile: number, vertical_spacing_pc: number, vertical_spacing_mobile: number, theme_color: string, header_title: string, header_description: string, launcher_image: string) => () => void;
|
17
21
|
/** @internal */
|
18
22
|
export declare const execOnClickOperation: (onClickOperation: OnClickOperation) => void;
|
@@ -9,6 +9,12 @@ export type BrandKit = {
|
|
9
9
|
color_info: string;
|
10
10
|
color_warning: string;
|
11
11
|
color_white: string;
|
12
|
+
color_form_field_placeholder: string;
|
13
|
+
color_form_field_border: string;
|
14
|
+
color_form_field_background: string;
|
15
|
+
color_form_field_focused_border?: string;
|
16
|
+
color_form_field_focused_background?: string;
|
17
|
+
color_form_field_accent?: string;
|
12
18
|
};
|
13
19
|
export declare const getBrandKit: (customBrandKit?: Partial<BrandKit>) => BrandKit;
|
14
20
|
export declare const useBrandKit: () => {
|
@@ -0,0 +1,7 @@
|
|
1
|
+
import type { ButtonProps } from "src/components-flex/button/types";
|
2
|
+
import type { PropStyles } from "../shared/types.js";
|
3
|
+
import type { BrandKit } from "../brand-kit.js";
|
4
|
+
import type { BrandableStyles } from "../styles.js";
|
5
|
+
import { FormFieldProps } from "./types.js";
|
6
|
+
export declare const getFormFieldLabelThemeStyles: (customBrandKit?: Partial<BrandKit>) => BrandableStyles<FormFieldProps>;
|
7
|
+
export declare const FORM_FIELD_LABEL_SIZE_STYLES: PropStyles<ButtonProps, "size">;
|
@@ -0,0 +1,116 @@
|
|
1
|
+
import type { CommonProps } from "../props.js";
|
2
|
+
import { Properties } from "csstype";
|
3
|
+
export type FormProps = CommonProps & {
|
4
|
+
fields: FormField[];
|
5
|
+
};
|
6
|
+
export declare const FORM_FIELD_LABEL_SIZE: {
|
7
|
+
readonly small: "スモール";
|
8
|
+
readonly medium: "ミディアム";
|
9
|
+
readonly large: "ラージ";
|
10
|
+
};
|
11
|
+
export declare const FORM_FIELD_LABEL_THEME: {
|
12
|
+
readonly default: "デフォルト";
|
13
|
+
readonly gray: "グレー";
|
14
|
+
readonly brand: "ブランド";
|
15
|
+
};
|
16
|
+
export type FormFieldProps = CommonProps & {
|
17
|
+
fieldName?: string;
|
18
|
+
fieldType?: FormFieldType;
|
19
|
+
required?: boolean;
|
20
|
+
defaultValue?: string | string[];
|
21
|
+
// layout
|
22
|
+
direction?: "row" | "column";
|
23
|
+
gap?: Properties["rowGap"];
|
24
|
+
// label
|
25
|
+
showLabel?: boolean;
|
26
|
+
label?: string;
|
27
|
+
labelWidth?: Properties["width"];
|
28
|
+
labelSize?: keyof typeof FORM_FIELD_LABEL_SIZE | string;
|
29
|
+
labelTheme?: keyof typeof FORM_FIELD_LABEL_THEME | string;
|
30
|
+
};
|
31
|
+
export declare const FORM_FIELD_TYPE: {
|
32
|
+
readonly INPUT: "input";
|
33
|
+
readonly SELECT: "select";
|
34
|
+
readonly CHECKBOX: "checkbox";
|
35
|
+
readonly CHECKBOXES: "checkboxes";
|
36
|
+
readonly RADIOS: "radio";
|
37
|
+
readonly TEXTAREA: "textarea";
|
38
|
+
};
|
39
|
+
export type FormFieldType = (typeof FORM_FIELD_TYPE)[keyof typeof FORM_FIELD_TYPE];
|
40
|
+
export type FormField = {
|
41
|
+
name: string;
|
42
|
+
type: FormFieldType;
|
43
|
+
required: boolean;
|
44
|
+
label: string;
|
45
|
+
defaultValue?: string | string[];
|
46
|
+
};
|
47
|
+
export declare const FORM_FIELD_VARIANT: {
|
48
|
+
readonly outlined: "アウトライン";
|
49
|
+
readonly underlined: "アンダーライン";
|
50
|
+
readonly filled: "塗りつぶし";
|
51
|
+
};
|
52
|
+
export declare const FORM_FIELD_VARIANT_FOR_CHECKER: {
|
53
|
+
readonly outlined: "アウトライン";
|
54
|
+
readonly filled: "塗りつぶし";
|
55
|
+
};
|
56
|
+
export type FormFieldVariant = keyof typeof FORM_FIELD_VARIANT;
|
57
|
+
export type FormFieldVariantForChecker = keyof typeof FORM_FIELD_VARIANT_FOR_CHECKER;
|
58
|
+
export declare const FORM_FIELD_SIZE: {
|
59
|
+
readonly small: "スモール";
|
60
|
+
readonly medium: "ミディアム";
|
61
|
+
readonly large: "ラージ";
|
62
|
+
};
|
63
|
+
export type FormFieldSize = keyof typeof FORM_FIELD_SIZE;
|
64
|
+
export declare const FORM_INPUT_TYPE: {
|
65
|
+
readonly TEXT: "text";
|
66
|
+
readonly URL: "url";
|
67
|
+
readonly TEL: "tel";
|
68
|
+
readonly EMAIL: "email";
|
69
|
+
};
|
70
|
+
export type FormInputType = (typeof FORM_INPUT_TYPE)[keyof typeof FORM_INPUT_TYPE];
|
71
|
+
export type FormInputCommonProps = {
|
72
|
+
placeholder?: string;
|
73
|
+
width?: Properties["width"];
|
74
|
+
variant?: FormFieldVariant;
|
75
|
+
size?: FormFieldSize;
|
76
|
+
backgroundColor?: string;
|
77
|
+
borderColor?: string;
|
78
|
+
focusedBorderColor?: string;
|
79
|
+
fontColor?: string;
|
80
|
+
placeholderColor?: string;
|
81
|
+
};
|
82
|
+
export type FormInputProps = FormFieldProps & FormInputCommonProps & {
|
83
|
+
variant?: FormFieldVariant;
|
84
|
+
inputType?: FormInputType;
|
85
|
+
};
|
86
|
+
export type FormTextareaProps = FormFieldProps & FormInputCommonProps & {
|
87
|
+
variant?: FormFieldVariant;
|
88
|
+
rows?: number;
|
89
|
+
};
|
90
|
+
export type FormOptionsProps = {
|
91
|
+
options?: {
|
92
|
+
label: string;
|
93
|
+
value: string;
|
94
|
+
}[];
|
95
|
+
};
|
96
|
+
export type FormSelectProps = FormFieldProps & FormInputCommonProps & FormOptionsProps & {
|
97
|
+
variant?: FormFieldVariant;
|
98
|
+
};
|
99
|
+
export type FormListCommonProps = FormOptionsProps & {
|
100
|
+
layout?: "vertical" | "horizontal" | "grid";
|
101
|
+
layoutGridCols?: number;
|
102
|
+
layoutGapY?: Properties["columnGap"];
|
103
|
+
layoutGapX?: Properties["rowGap"];
|
104
|
+
accentColor?: string;
|
105
|
+
borderColor?: string;
|
106
|
+
fontColor?: string;
|
107
|
+
backgroundColor?: string;
|
108
|
+
};
|
109
|
+
export type FormCheckboxesProps = FormFieldProps & FormListCommonProps & {
|
110
|
+
variant?: FormFieldVariantForChecker;
|
111
|
+
size?: FormFieldSize;
|
112
|
+
};
|
113
|
+
export type FormRadiosProps = FormFieldProps & FormListCommonProps & {
|
114
|
+
variant?: FormFieldVariantForChecker;
|
115
|
+
size?: FormFieldSize;
|
116
|
+
};
|
@@ -0,0 +1,85 @@
|
|
1
|
+
import { Writable } from "svelte/store";
|
2
|
+
import { FormFieldType } from "./form/types.js";
|
3
|
+
export type FormStoreValue = string | string[];
|
4
|
+
export type FormStoreState = {
|
5
|
+
isDirty: boolean;
|
6
|
+
isTouched: boolean;
|
7
|
+
isValid: boolean;
|
8
|
+
errorMessage: string | null;
|
9
|
+
value: FormStoreValue;
|
10
|
+
};
|
11
|
+
export type FormStoreValues = Record<string, FormStoreValue>;
|
12
|
+
export type FormStoreErrorMessages = Record<string, FormStoreState["errorMessage"]>;
|
13
|
+
export type FormStoreStates = Record<string, FormStoreState>;
|
14
|
+
export type FormStoreSchemaInput = {
|
15
|
+
name: string;
|
16
|
+
type: FormFieldType;
|
17
|
+
defaultValue: string | string[];
|
18
|
+
required: boolean;
|
19
|
+
};
|
20
|
+
export type FormStoreSchema = FormStoreSchemaInput & {
|
21
|
+
statePath: string;
|
22
|
+
};
|
23
|
+
export type FormStore = {
|
24
|
+
schemas: FormStoreSchema[];
|
25
|
+
states: FormStoreStates;
|
26
|
+
};
|
27
|
+
/**
|
28
|
+
* @internal
|
29
|
+
*/
|
30
|
+
export declare const formStore: Writable<FormStore>;
|
31
|
+
export declare const formSubmittedValues: Writable<FormStoreValues>;
|
32
|
+
/**
|
33
|
+
* @public
|
34
|
+
*/
|
35
|
+
export declare const getFormFieldSchema: (name: string) => FormStoreSchema | undefined;
|
36
|
+
/**
|
37
|
+
* @public
|
38
|
+
*/
|
39
|
+
export declare const getFormFieldState: (name: string) => FormStoreState | undefined;
|
40
|
+
/**
|
41
|
+
* @public
|
42
|
+
*/
|
43
|
+
export declare const getFormFieldValue: (name: string) => FormStoreValue | undefined;
|
44
|
+
/**
|
45
|
+
* @public
|
46
|
+
*/
|
47
|
+
export declare const getFormValues: () => FormStoreValues;
|
48
|
+
/**
|
49
|
+
* @public
|
50
|
+
*/
|
51
|
+
export declare const getFormErrors: () => FormStoreErrorMessages;
|
52
|
+
/**
|
53
|
+
* @public
|
54
|
+
*/
|
55
|
+
export declare const setFormFieldValue: (name: string, value: any) => void;
|
56
|
+
/**
|
57
|
+
* @public
|
58
|
+
*/
|
59
|
+
export declare const setFormFieldError: (name: string, errorMessage: string | null) => void;
|
60
|
+
/**
|
61
|
+
* @public
|
62
|
+
*/
|
63
|
+
export declare const setFormFieldTouched: (name: string) => void;
|
64
|
+
/**
|
65
|
+
* @public
|
66
|
+
*/
|
67
|
+
export declare const registerFormField: (schemas: FormStoreSchemaInput | FormStoreSchemaInput[]) => void;
|
68
|
+
/**
|
69
|
+
* @public
|
70
|
+
*/
|
71
|
+
export declare const unregisterFormField: (fieldNames: string | string[]) => void;
|
72
|
+
export declare const validateFormField: (schema: FormStoreSchema, value: FormStoreValue) => {
|
73
|
+
isValid: true;
|
74
|
+
error: undefined;
|
75
|
+
} | {
|
76
|
+
isValid: false;
|
77
|
+
error: string;
|
78
|
+
};
|
79
|
+
/**
|
80
|
+
* @public
|
81
|
+
*/
|
82
|
+
export declare function onSubmitForm(fn: (data: {
|
83
|
+
currentStateValues: any;
|
84
|
+
allValues: any;
|
85
|
+
}) => void): void;
|
@@ -1,4 +1,5 @@
|
|
1
1
|
import type { ClickableProps, CommonProps } from "../props.js";
|
2
|
+
// @ts-ignore -- NOTE(kazupon): error TS2307: Cannot find module 'preact/src/jsx-csstype' or its corresponding type declarations
|
2
3
|
import type { Properties } from "preact/src/jsx-csstype";
|
3
4
|
export declare const ICON_SIZE: {
|
4
5
|
[key: string]: {
|
@@ -1,5 +1,5 @@
|
|
1
1
|
import type { Properties } from "csstype";
|
2
|
-
import type { CommonProps, OverflowProps, BorderProps, RadiusProps, ShadowProps, BackgroundProps } from "../props.js";
|
3
|
-
export type FrameModalProps = CommonProps & OverflowProps & BorderProps & RadiusProps & ShadowProps & BackgroundProps & {
|
2
|
+
import type { CommonProps, OverflowProps, BorderProps, RadiusProps, ShadowProps, BackgroundProps, PaddingProps } from "../props.js";
|
3
|
+
export type FrameModalProps = CommonProps & OverflowProps & BorderProps & RadiusProps & ShadowProps & PaddingProps & BackgroundProps & {
|
4
4
|
width?: Properties["width"];
|
5
5
|
};
|
@@ -21,13 +21,17 @@ export type CustomizeCssProps = {
|
|
21
21
|
isCustomizeCss?: boolean;
|
22
22
|
customizeCss?: string;
|
23
23
|
};
|
24
|
+
export type CustomizeAttributesProps = {
|
25
|
+
id?: string;
|
26
|
+
classNames?: string[];
|
27
|
+
};
|
24
28
|
export type BrandStyleProps = {
|
25
29
|
customBrandKit?: Partial<BrandKit>;
|
26
30
|
};
|
27
31
|
export type ActionTableProps = {
|
28
32
|
actionTableKey?: string;
|
29
33
|
};
|
30
|
-
export type CommonProps = MetaProps & PositionProps & CustomizeCssProps & BrandStyleProps;
|
34
|
+
export type CommonProps = MetaProps & PositionProps & CustomizeAttributesProps & CustomizeCssProps & BrandStyleProps;
|
31
35
|
export type ClickableProps = {
|
32
36
|
onClick?: OnClickOperation;
|
33
37
|
eventName?: string;
|
@@ -1,2 +1,2 @@
|
|
1
1
|
import type { Properties } from "csstype";
|
2
|
-
export declare const objToStyle: (obj: Properties) => string;
|
2
|
+
export declare const objToStyle: (obj: Properties | Record<string, any>) => string;
|
@@ -13,6 +13,10 @@ export declare const runScript: (handlerName: string) => () => void;
|
|
13
13
|
/** @internal */
|
14
14
|
export declare const submitForm: (to: string) => () => void;
|
15
15
|
/** @internal */
|
16
|
+
export declare const submitFormProgress: (to: string) => () => void;
|
17
|
+
/** @internal */
|
18
|
+
export declare const submitFormFinal: (to: string) => () => void;
|
19
|
+
/** @internal */
|
16
20
|
export declare const bootChat: (hide_launcher: boolean, placement_pc: string, placement_mobile: string, horizontal_spacing_pc: number, horizontal_spacing_mobile: number, vertical_spacing_pc: number, vertical_spacing_mobile: number, theme_color: string, header_title: string, header_description: string, launcher_image: string) => () => void;
|
17
21
|
/** @internal */
|
18
22
|
export declare const execOnClickOperation: (onClickOperation: OnClickOperation) => void;
|
package/dist/hydrate/index.d.ts
CHANGED
@@ -103,6 +103,9 @@ export { default as FlexCountDownValue } from "./components-flex/count-down/Coun
|
|
103
103
|
export * from "./components-flex/count-down/types.js";
|
104
104
|
export { default as FlexClipCopy } from "./components-flex/clip-copy/ClipCopy.svelte.js";
|
105
105
|
export * from "./components-flex/clip-copy/types.js";
|
106
|
+
export { default as FlexForm } from "./components-flex/form/Form.svelte.js";
|
107
|
+
export { default as FlexFormField } from "./components-flex/form/FormField.svelte.js";
|
108
|
+
export * from "./components-flex/form/types.js";
|
106
109
|
export { default as ThumbnailPreview } from "./components-flex/ThumbnailPreview.svelte.js";
|
107
110
|
export * from "./components-flex/code/types.js";
|
108
111
|
export * from "./components-flex/brand-kit.js";
|