@verbb/plugin-kit-react 1.0.7 → 1.0.8
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/CHANGELOG.md +11 -0
- package/dist/forms/Field.d.ts +2 -1
- package/dist/forms/Field.d.ts.map +1 -1
- package/dist/forms/Field.js +24 -12
- package/dist/forms/Field.js.map +1 -1
- package/dist/forms/TranslationIcon.d.ts +5 -0
- package/dist/forms/TranslationIcon.d.ts.map +1 -0
- package/dist/forms/TranslationIcon.js +18 -0
- package/dist/forms/TranslationIcon.js.map +1 -0
- package/dist/forms/fields/ListField.d.ts +1 -0
- package/dist/forms/fields/ListField.d.ts.map +1 -1
- package/dist/forms/fields/ListField.js +1 -0
- package/dist/forms/fields/ListField.js.map +1 -1
- package/dist/forms/fields/RichTextField.d.ts +1 -0
- package/dist/forms/fields/RichTextField.d.ts.map +1 -1
- package/dist/forms/fields/RichTextField.js +1 -0
- package/dist/forms/fields/RichTextField.js.map +1 -1
- package/dist/forms/fields/SelectField.d.ts.map +1 -1
- package/dist/forms/fields/SelectField.js +2 -1
- package/dist/forms/fields/SelectField.js.map +1 -1
- package/dist/forms/fields/TextField.d.ts +1 -0
- package/dist/forms/fields/TextField.d.ts.map +1 -1
- package/dist/forms/fields/TextField.js +1 -0
- package/dist/forms/fields/TextField.js.map +1 -1
- package/dist/forms/fields/TextareaField.d.ts +1 -0
- package/dist/forms/fields/TextareaField.d.ts.map +1 -1
- package/dist/forms/fields/TextareaField.js +1 -0
- package/dist/forms/fields/TextareaField.js.map +1 -1
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,17 @@
|
|
|
2
2
|
|
|
3
3
|
## Unreleased
|
|
4
4
|
|
|
5
|
+
## 1.0.8 - 2026-06-23
|
|
6
|
+
|
|
7
|
+
### Added
|
|
8
|
+
- Added a translation icon to `FieldLayout` for schema fields marked `translatable`.
|
|
9
|
+
- Added `TranslationIcon` for host apps that need the same translatable-field affordance outside `FieldLayout`.
|
|
10
|
+
- Added `translatable` support to `TextField`, `TextareaField`, and `RichTextField`.
|
|
11
|
+
- Added `className` support to `ListField`.
|
|
12
|
+
|
|
13
|
+
### Fixed
|
|
14
|
+
- Fixed `SelectField` ignoring the schema `disabled` property and leaving the select interactive when it should be read-only.
|
|
15
|
+
|
|
5
16
|
## 1.0.7 - 2026-06-18
|
|
6
17
|
|
|
7
18
|
### Added
|
package/dist/forms/Field.d.ts
CHANGED
|
@@ -31,7 +31,8 @@ type FieldLayoutProps = ComponentProps<'div'> & {
|
|
|
31
31
|
errors?: string[];
|
|
32
32
|
withControl?: boolean;
|
|
33
33
|
showInlineErrors?: boolean;
|
|
34
|
+
translatable?: boolean;
|
|
34
35
|
};
|
|
35
|
-
declare const FieldLayout: ({ name, label, instructions, headerEnd, required, warning, errors, withControl, showInlineErrors, className, children, ...props }: FieldLayoutProps) => import("react/jsx-runtime").JSX.Element;
|
|
36
|
+
declare const FieldLayout: ({ name, label, instructions, headerEnd, required, warning, errors, withControl, showInlineErrors, translatable, className, children, ...props }: FieldLayoutProps) => import("react/jsx-runtime").JSX.Element;
|
|
36
37
|
export { FieldRoot, FieldHeader, FieldLabel, FieldInstructions, FieldControl, FieldErrors, FieldLayout, InlineFieldErrorVisibilityContext, useFieldContext, };
|
|
37
38
|
//# sourceMappingURL=Field.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Field.d.ts","sourceRoot":"","sources":["../../src/forms/Field.tsx"],"names":[],"mappings":"AAAA,OAAO,EAC+B,KAAK,cAAc,EAAE,KAAK,SAAS,EACxE,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,KAAK,EAAY,MAAM,oCAAoC,CAAC;AACrE,OAAO,EAAE,IAAI,EAAE,MAAM,yCAAyC,CAAC;
|
|
1
|
+
{"version":3,"file":"Field.d.ts","sourceRoot":"","sources":["../../src/forms/Field.tsx"],"names":[],"mappings":"AAAA,OAAO,EAC+B,KAAK,cAAc,EAAE,KAAK,SAAS,EACxE,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,KAAK,EAAY,MAAM,oCAAoC,CAAC;AACrE,OAAO,EAAE,IAAI,EAAE,MAAM,yCAAyC,CAAC;AAQ/D,KAAK,iBAAiB,GAAG;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,EAAE,CAAC;CACpB,CAAC;AAGF,QAAA,MAAM,iCAAiC,kCAA+B,CAAC;AAEvE,QAAA,MAAM,eAAe,yBAMpB,CAAC;AAEF,KAAK,cAAc,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IAC1C,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;CACrB,CAAC;AAEF,QAAA,MAAM,SAAS,GAAI,uCAEhB,cAAc,4CAWhB,CAAC;AAEF,QAAA,MAAM,WAAW,GAAI,yBAAyB,cAAc,CAAC,KAAK,CAAC,4CAIlE,CAAC;AAEF,QAAA,MAAM,UAAU,GAAI,yBAAyB,cAAc,CAAC,OAAO,KAAK,CAAC,4CAWxE,CAAC;AAEF,QAAA,MAAM,iBAAiB,GAAI,mCAAmC,cAAc,CAAC,GAAG,CAAC,4CA0BhF,CAAC;AAEF,KAAK,iBAAiB,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,EAAE,WAAW,CAAC,GAAG;IACtE,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,QAAA,MAAM,YAAY,GAAI,yBAAyB,iBAAiB,4CAe/D,CAAC;AAEF,QAAA,MAAM,WAAW,GAAI,yBAAyB,cAAc,CAAC,IAAI,CAAC,mDAsBjE,CAAC;AAEF,KAAK,gBAAgB,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IAC5C,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,YAAY,CAAC,EAAE,OAAO,CAAC;CAC1B,CAAC;AAEF,QAAA,MAAM,WAAW,GAAI,iJAclB,gBAAgB,4CAqElB,CAAC;AAEF,OAAO,EACH,SAAS,EACT,WAAW,EACX,UAAU,EACV,iBAAiB,EACjB,YAAY,EACZ,WAAW,EACX,WAAW,EACX,iCAAiC,EACjC,eAAe,GAClB,CAAC"}
|
package/dist/forms/Field.js
CHANGED
|
@@ -6,6 +6,7 @@ import { Label } from "../components/Label.js";
|
|
|
6
6
|
import { Markdown } from "../components/Markdown.js";
|
|
7
7
|
import "../components/index.js";
|
|
8
8
|
import { Slot } from "../components/Slot.js";
|
|
9
|
+
import { TranslationIcon } from "./TranslationIcon.js";
|
|
9
10
|
import { createContext, useContext, useId } from "react";
|
|
10
11
|
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
|
|
11
12
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
|
@@ -103,7 +104,7 @@ var FieldErrors = ({ className, ...props }) => {
|
|
|
103
104
|
})
|
|
104
105
|
});
|
|
105
106
|
};
|
|
106
|
-
var FieldLayout = ({ name, label, instructions, headerEnd, required, warning, errors = [], withControl = true, showInlineErrors, className, children, ...props }) => {
|
|
107
|
+
var FieldLayout = ({ name, label, instructions, headerEnd, required, warning, errors = [], withControl = true, showInlineErrors, translatable = false, className, children, ...props }) => {
|
|
107
108
|
const t = useTranslation();
|
|
108
109
|
const contextShowInlineErrors = useContext(InlineFieldErrorVisibilityContext);
|
|
109
110
|
const shouldShowInlineErrors = showInlineErrors ?? contextShowInlineErrors;
|
|
@@ -119,17 +120,28 @@ var FieldLayout = ({ name, label, instructions, headerEnd, required, warning, er
|
|
|
119
120
|
className: "min-w-0 space-y-0.5",
|
|
120
121
|
children: [label && /* @__PURE__ */ jsxs(FieldLabel, {
|
|
121
122
|
className: "flex items-center gap-1",
|
|
122
|
-
children: [
|
|
123
|
-
|
|
124
|
-
children:
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
123
|
+
children: [
|
|
124
|
+
label,
|
|
125
|
+
required && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
|
|
126
|
+
className: "sr-only",
|
|
127
|
+
children: t("Required")
|
|
128
|
+
}), /* @__PURE__ */ jsx("span", {
|
|
129
|
+
className: "text-rose-600",
|
|
130
|
+
"aria-hidden": "true",
|
|
131
|
+
children: /* @__PURE__ */ jsx(FontAwesomeIcon, {
|
|
132
|
+
icon: faAsterisk,
|
|
133
|
+
className: "size-[10px]"
|
|
134
|
+
})
|
|
135
|
+
})] }),
|
|
136
|
+
translatable ? /* @__PURE__ */ jsxs("span", {
|
|
137
|
+
className: "inline-flex",
|
|
138
|
+
title: t("Translatable"),
|
|
139
|
+
children: [/* @__PURE__ */ jsx(TranslationIcon, {}), /* @__PURE__ */ jsx("span", {
|
|
140
|
+
className: "sr-only",
|
|
141
|
+
children: t("Translatable")
|
|
142
|
+
})]
|
|
143
|
+
}) : null
|
|
144
|
+
]
|
|
133
145
|
}), instructions && /* @__PURE__ */ jsx(FieldInstructions, { children: instructions })]
|
|
134
146
|
}), headerEnd && /* @__PURE__ */ jsx("div", {
|
|
135
147
|
className: "shrink-0",
|
package/dist/forms/Field.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Field.js","names":[],"sources":["../../src/forms/Field.tsx"],"sourcesContent":["import {\n createContext, useContext, useId, type ComponentProps, type ReactNode,\n} from 'react';\nimport { Label, Markdown } from '@verbb/plugin-kit-react/components';\nimport { Slot } from '@verbb/plugin-kit-react/components/Slot';\nimport { cn } from '@verbb/plugin-kit-react/utils';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faAsterisk, faTriangleExclamation } from '@fortawesome/pro-solid-svg-icons';\nimport { useTranslation } from '@verbb/plugin-kit-react/hooks';\n\ntype FieldContextValue = {\n id: string;\n name: string;\n errors: string[];\n};\n\nconst FieldContext = createContext<FieldContextValue | null>(null);\nconst InlineFieldErrorVisibilityContext = createContext<boolean>(true);\n\nconst useFieldContext = () => {\n const context = useContext(FieldContext);\n if (!context) {\n throw new Error('Field components must be used within <FieldRoot>.');\n }\n return context;\n};\n\ntype FieldRootProps = ComponentProps<'div'> & {\n name: string;\n errors?: string[];\n};\n\nconst FieldRoot = ({\n name, errors = [], className, ...props\n}: FieldRootProps) => {\n const id = useId();\n return (\n <FieldContext.Provider value={{ id, name, errors }}>\n <div\n data-slot=\"field\"\n className={cn('space-y-1.5', className)}\n {...props}\n />\n </FieldContext.Provider>\n );\n};\n\nconst FieldHeader = ({ className, ...props }: ComponentProps<'div'>) => {\n return (\n <div data-slot=\"field-header\" className={cn(className)} {...props} />\n );\n};\n\nconst FieldLabel = ({ className, ...props }: ComponentProps<typeof Label>) => {\n const { id, errors } = useFieldContext();\n return (\n <Label\n data-slot=\"field-label\"\n htmlFor={`${id}-control`}\n data-error={errors.length > 0}\n className={cn('text-sm font-bold', className)}\n {...props}\n />\n );\n};\n\nconst FieldInstructions = ({ className, children, ...props }: ComponentProps<'p'>) => {\n const { id } = useFieldContext();\n const content = typeof children === 'string' ? children : null;\n\n const baseProps = {\n 'data-slot': 'field-instructions',\n id: `${id}-description`,\n className: cn('text-sm text-gray-500', className),\n };\n\n if (content !== null) {\n return (\n <Markdown\n content={content}\n inline\n as=\"p\"\n {...baseProps}\n />\n );\n }\n\n return (\n <p {...baseProps} {...props}>\n {children}\n </p>\n );\n};\n\ntype FieldControlProps = Omit<ComponentProps<typeof Slot>, 'className'> & {\n className?: string;\n};\n\nconst FieldControl = ({ className, ...props }: FieldControlProps) => {\n const { id, errors } = useFieldContext();\n const isInvalid = errors.length > 0;\n\n return (\n <Slot\n data-slot=\"field-control\"\n id={`${id}-control`}\n aria-invalid={isInvalid}\n aria-describedby={`${id}-description ${id}-errors`}\n aria-errormessage={isInvalid ? `${id}-errors` : undefined}\n className={cn(className)}\n {...props}\n />\n );\n};\n\nconst FieldErrors = ({ className, ...props }: ComponentProps<'ul'>) => {\n const { id, errors } = useFieldContext();\n if (!errors.length) {\n return null;\n }\n return (\n <ul\n data-slot=\"field-errors\"\n id={`${id}-errors`}\n className={cn('list-[square] text-error', className)}\n style={{ marginBlockStart: '5px', paddingInlineStart: '20px' }}\n {...props}\n >\n {errors.map((message, index) => {\n return (\n <li key={index}>\n <Markdown content={message} inline />\n </li>\n );\n })}\n </ul>\n );\n};\n\ntype FieldLayoutProps = ComponentProps<'div'> & {\n name: string;\n label?: string;\n instructions?: string;\n headerEnd?: ReactNode;\n required?: boolean;\n warning?: string;\n errors?: string[];\n withControl?: boolean;\n showInlineErrors?: boolean;\n};\n\nconst FieldLayout = ({\n name,\n label,\n instructions,\n headerEnd,\n required,\n warning,\n errors = [],\n withControl = true,\n showInlineErrors,\n className,\n children,\n ...props\n}: FieldLayoutProps) => {\n const t = useTranslation();\n const contextShowInlineErrors = useContext(InlineFieldErrorVisibilityContext);\n const shouldShowInlineErrors = showInlineErrors ?? contextShowInlineErrors;\n\n return (\n <FieldRoot name={name} errors={errors} className={className} {...props}>\n {(label || instructions || headerEnd) ? (\n <FieldHeader className={cn(\n headerEnd ? 'flex items-start justify-between gap-3' : 'space-y-0.5',\n )}>\n <div className=\"min-w-0 space-y-0.5\">\n {label && (\n <FieldLabel className=\"flex items-center gap-1\">\n {label}\n {required && (\n <>\n <span className=\"sr-only\">{t('Required')}</span>\n <span className=\"text-rose-600\" aria-hidden=\"true\">\n <FontAwesomeIcon icon={faAsterisk} className=\"size-[10px]\" />\n </span>\n </>\n )}\n </FieldLabel>\n )}\n {instructions && (\n <FieldInstructions>{instructions}</FieldInstructions>\n )}\n </div>\n\n {headerEnd && (\n <div className=\"shrink-0\">\n {headerEnd}\n </div>\n )}\n </FieldHeader>\n ) : null}\n\n {withControl ? (\n <FieldControl>{children}</FieldControl>\n ) : (\n children\n )}\n\n {shouldShowInlineErrors && <FieldErrors />}\n\n {warning && (\n <div className=\"flex min-w-0 items-start gap-1 text-sm text-warning\">\n <FontAwesomeIcon icon={faTriangleExclamation} className=\"mt-[0.3em] size-3 shrink-0\" />\n\n <Markdown\n className=\"min-w-0\"\n content={warning}\n inline\n as=\"p\"\n />\n </div>\n )}\n </FieldRoot>\n );\n};\n\nexport {\n FieldRoot,\n FieldHeader,\n FieldLabel,\n FieldInstructions,\n FieldControl,\n FieldErrors,\n FieldLayout,\n InlineFieldErrorVisibilityContext,\n useFieldContext,\n};\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Field.js","names":[],"sources":["../../src/forms/Field.tsx"],"sourcesContent":["import {\n createContext, useContext, useId, type ComponentProps, type ReactNode,\n} from 'react';\nimport { Label, Markdown } from '@verbb/plugin-kit-react/components';\nimport { Slot } from '@verbb/plugin-kit-react/components/Slot';\nimport { cn } from '@verbb/plugin-kit-react/utils';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faAsterisk, faTriangleExclamation } from '@fortawesome/pro-solid-svg-icons';\nimport { useTranslation } from '@verbb/plugin-kit-react/hooks';\n\nimport { TranslationIcon } from './TranslationIcon';\n\ntype FieldContextValue = {\n id: string;\n name: string;\n errors: string[];\n};\n\nconst FieldContext = createContext<FieldContextValue | null>(null);\nconst InlineFieldErrorVisibilityContext = createContext<boolean>(true);\n\nconst useFieldContext = () => {\n const context = useContext(FieldContext);\n if (!context) {\n throw new Error('Field components must be used within <FieldRoot>.');\n }\n return context;\n};\n\ntype FieldRootProps = ComponentProps<'div'> & {\n name: string;\n errors?: string[];\n};\n\nconst FieldRoot = ({\n name, errors = [], className, ...props\n}: FieldRootProps) => {\n const id = useId();\n return (\n <FieldContext.Provider value={{ id, name, errors }}>\n <div\n data-slot=\"field\"\n className={cn('space-y-1.5', className)}\n {...props}\n />\n </FieldContext.Provider>\n );\n};\n\nconst FieldHeader = ({ className, ...props }: ComponentProps<'div'>) => {\n return (\n <div data-slot=\"field-header\" className={cn(className)} {...props} />\n );\n};\n\nconst FieldLabel = ({ className, ...props }: ComponentProps<typeof Label>) => {\n const { id, errors } = useFieldContext();\n return (\n <Label\n data-slot=\"field-label\"\n htmlFor={`${id}-control`}\n data-error={errors.length > 0}\n className={cn('text-sm font-bold', className)}\n {...props}\n />\n );\n};\n\nconst FieldInstructions = ({ className, children, ...props }: ComponentProps<'p'>) => {\n const { id } = useFieldContext();\n const content = typeof children === 'string' ? children : null;\n\n const baseProps = {\n 'data-slot': 'field-instructions',\n id: `${id}-description`,\n className: cn('text-sm text-gray-500', className),\n };\n\n if (content !== null) {\n return (\n <Markdown\n content={content}\n inline\n as=\"p\"\n {...baseProps}\n />\n );\n }\n\n return (\n <p {...baseProps} {...props}>\n {children}\n </p>\n );\n};\n\ntype FieldControlProps = Omit<ComponentProps<typeof Slot>, 'className'> & {\n className?: string;\n};\n\nconst FieldControl = ({ className, ...props }: FieldControlProps) => {\n const { id, errors } = useFieldContext();\n const isInvalid = errors.length > 0;\n\n return (\n <Slot\n data-slot=\"field-control\"\n id={`${id}-control`}\n aria-invalid={isInvalid}\n aria-describedby={`${id}-description ${id}-errors`}\n aria-errormessage={isInvalid ? `${id}-errors` : undefined}\n className={cn(className)}\n {...props}\n />\n );\n};\n\nconst FieldErrors = ({ className, ...props }: ComponentProps<'ul'>) => {\n const { id, errors } = useFieldContext();\n if (!errors.length) {\n return null;\n }\n return (\n <ul\n data-slot=\"field-errors\"\n id={`${id}-errors`}\n className={cn('list-[square] text-error', className)}\n style={{ marginBlockStart: '5px', paddingInlineStart: '20px' }}\n {...props}\n >\n {errors.map((message, index) => {\n return (\n <li key={index}>\n <Markdown content={message} inline />\n </li>\n );\n })}\n </ul>\n );\n};\n\ntype FieldLayoutProps = ComponentProps<'div'> & {\n name: string;\n label?: string;\n instructions?: string;\n headerEnd?: ReactNode;\n required?: boolean;\n warning?: string;\n errors?: string[];\n withControl?: boolean;\n showInlineErrors?: boolean;\n translatable?: boolean;\n};\n\nconst FieldLayout = ({\n name,\n label,\n instructions,\n headerEnd,\n required,\n warning,\n errors = [],\n withControl = true,\n showInlineErrors,\n translatable = false,\n className,\n children,\n ...props\n}: FieldLayoutProps) => {\n const t = useTranslation();\n const contextShowInlineErrors = useContext(InlineFieldErrorVisibilityContext);\n const shouldShowInlineErrors = showInlineErrors ?? contextShowInlineErrors;\n\n return (\n <FieldRoot name={name} errors={errors} className={className} {...props}>\n {(label || instructions || headerEnd) ? (\n <FieldHeader className={cn(\n headerEnd ? 'flex items-start justify-between gap-3' : 'space-y-0.5',\n )}>\n <div className=\"min-w-0 space-y-0.5\">\n {label && (\n <FieldLabel className=\"flex items-center gap-1\">\n {label}\n {required && (\n <>\n <span className=\"sr-only\">{t('Required')}</span>\n <span className=\"text-rose-600\" aria-hidden=\"true\">\n <FontAwesomeIcon icon={faAsterisk} className=\"size-[10px]\" />\n </span>\n </>\n )}\n {translatable ? (\n <span\n className=\"inline-flex\"\n title={t('Translatable')}\n >\n <TranslationIcon />\n <span className=\"sr-only\">{t('Translatable')}</span>\n </span>\n ) : null}\n </FieldLabel>\n )}\n {instructions && (\n <FieldInstructions>{instructions}</FieldInstructions>\n )}\n </div>\n\n {headerEnd && (\n <div className=\"shrink-0\">\n {headerEnd}\n </div>\n )}\n </FieldHeader>\n ) : null}\n\n {withControl ? (\n <FieldControl>{children}</FieldControl>\n ) : (\n children\n )}\n\n {shouldShowInlineErrors && <FieldErrors />}\n\n {warning && (\n <div className=\"flex min-w-0 items-start gap-1 text-sm text-warning\">\n <FontAwesomeIcon icon={faTriangleExclamation} className=\"mt-[0.3em] size-3 shrink-0\" />\n\n <Markdown\n className=\"min-w-0\"\n content={warning}\n inline\n as=\"p\"\n />\n </div>\n )}\n </FieldRoot>\n );\n};\n\nexport {\n FieldRoot,\n FieldHeader,\n FieldLabel,\n FieldInstructions,\n FieldControl,\n FieldErrors,\n FieldLayout,\n InlineFieldErrorVisibilityContext,\n useFieldContext,\n};\n"],"mappings":"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"}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { ComponentProps } from 'react';
|
|
2
|
+
type TranslationIconProps = ComponentProps<'svg'>;
|
|
3
|
+
declare const TranslationIcon: ({ className, ...props }: TranslationIconProps) => import("react/jsx-runtime").JSX.Element;
|
|
4
|
+
export { TranslationIcon };
|
|
5
|
+
//# sourceMappingURL=TranslationIcon.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TranslationIcon.d.ts","sourceRoot":"","sources":["../../src/forms/TranslationIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAI5C,KAAK,oBAAoB,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;AAElD,QAAA,MAAM,eAAe,GAAI,yBAAyB,oBAAoB,4CAerE,CAAC;AAEF,OAAO,EAAE,eAAe,EAAE,CAAC"}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { cn } from "../utils/classes.js";
|
|
2
|
+
import "../utils/index.js";
|
|
3
|
+
import { jsx } from "react/jsx-runtime";
|
|
4
|
+
//#region src/forms/TranslationIcon.tsx
|
|
5
|
+
var TranslationIcon = ({ className, ...props }) => {
|
|
6
|
+
return /* @__PURE__ */ jsx("svg", {
|
|
7
|
+
"aria-hidden": "true",
|
|
8
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
9
|
+
viewBox: "0 0 640 512",
|
|
10
|
+
className: cn("size-4 fill-current text-gray-550", className),
|
|
11
|
+
...props,
|
|
12
|
+
children: /* @__PURE__ */ jsx("path", { d: "M64 64C28.7 64 0 92.7 0 128L0 384c0 35.3 28.7 64 64 64l208 0 32 0 16 0 256 0c35.3 0 64-28.7 64-64l0-256c0-35.3-28.7-64-64-64L320 64l-16 0-32 0L64 64zm512 48c8.8 0 16 7.2 16 16l0 256c0 8.8-7.2 16-16 16l-256 0 0-288 256 0zM178.3 175.9l64 144c4.5 10.1-.1 21.9-10.2 26.4s-21.9-.1-26.4-10.2L196.8 316l-73.6 0-8.9 20.1c-4.5 10.1-16.3 14.6-26.4 10.2s-14.6-16.3-10.2-26.4l64-144c3.2-7.2 10.4-11.9 18.3-11.9s15.1 4.7 18.3 11.9zM179 276l-19-42.8L141 276l38 0zM456 164c-11 0-20 9-20 20l0 4-52 0c-11 0-20 9-20 20s9 20 20 20l72 0 35.1 0c-7.3 16.7-17.4 31.9-29.8 45l-.5-.5-14.6-14.6c-7.8-7.8-20.5-7.8-28.3 0s-7.8 20.5 0 28.3L430 298.3c-5.9 3.6-12.1 6.9-18.5 9.8l-3.6 1.6c-10.1 4.5-14.6 16.3-10.2 26.4s16.3 14.6 26.4 10.2l3.6-1.6c12-5.3 23.4-11.8 34-19.4c4.3 3 8.6 5.8 13.1 8.5l18.9 11.3c9.5 5.7 21.8 2.6 27.4-6.9s2.6-21.8-6.9-27.4l-18.9-11.3c-.9-.5-1.8-1.1-2.7-1.6c17.2-18.8 30.7-40.9 39.6-65.4L534 228l2 0c11 0 20-9 20-20s-9-20-20-20l-16 0-44 0 0-4c0-11-9-20-20-20z" })
|
|
13
|
+
});
|
|
14
|
+
};
|
|
15
|
+
//#endregion
|
|
16
|
+
export { TranslationIcon };
|
|
17
|
+
|
|
18
|
+
//# sourceMappingURL=TranslationIcon.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TranslationIcon.js","names":[],"sources":["../../src/forms/TranslationIcon.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\n\nimport { cn } from '@verbb/plugin-kit-react/utils';\n\ntype TranslationIconProps = ComponentProps<'svg'>;\n\nconst TranslationIcon = ({ className, ...props }: TranslationIconProps) => {\n return (\n <svg\n aria-hidden=\"true\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 640 512\"\n className={cn(\n 'size-4 fill-current text-gray-550',\n className,\n )}\n {...props}\n >\n <path d=\"M64 64C28.7 64 0 92.7 0 128L0 384c0 35.3 28.7 64 64 64l208 0 32 0 16 0 256 0c35.3 0 64-28.7 64-64l0-256c0-35.3-28.7-64-64-64L320 64l-16 0-32 0L64 64zm512 48c8.8 0 16 7.2 16 16l0 256c0 8.8-7.2 16-16 16l-256 0 0-288 256 0zM178.3 175.9l64 144c4.5 10.1-.1 21.9-10.2 26.4s-21.9-.1-26.4-10.2L196.8 316l-73.6 0-8.9 20.1c-4.5 10.1-16.3 14.6-26.4 10.2s-14.6-16.3-10.2-26.4l64-144c3.2-7.2 10.4-11.9 18.3-11.9s15.1 4.7 18.3 11.9zM179 276l-19-42.8L141 276l38 0zM456 164c-11 0-20 9-20 20l0 4-52 0c-11 0-20 9-20 20s9 20 20 20l72 0 35.1 0c-7.3 16.7-17.4 31.9-29.8 45l-.5-.5-14.6-14.6c-7.8-7.8-20.5-7.8-28.3 0s-7.8 20.5 0 28.3L430 298.3c-5.9 3.6-12.1 6.9-18.5 9.8l-3.6 1.6c-10.1 4.5-14.6 16.3-10.2 26.4s16.3 14.6 26.4 10.2l3.6-1.6c12-5.3 23.4-11.8 34-19.4c4.3 3 8.6 5.8 13.1 8.5l18.9 11.3c9.5 5.7 21.8 2.6 27.4-6.9s2.6-21.8-6.9-27.4l-18.9-11.3c-.9-.5-1.8-1.1-2.7-1.6c17.2-18.8 30.7-40.9 39.6-65.4L534 228l2 0c11 0 20-9 20-20s-9-20-20-20l-16 0-44 0 0-4c0-11-9-20-20-20z\" />\n </svg>\n );\n};\n\nexport { TranslationIcon };\n"],"mappings":";;;;AAMA,IAAM,mBAAmB,EAAE,WAAW,GAAG,YAAkC;AACvE,QACI,oBAAC,OAAD;EACI,eAAY;EACZ,OAAM;EACN,SAAQ;EACR,WAAW,GACP,qCACA,UACH;EACD,GAAI;YAEJ,oBAAC,QAAD,EAAM,GAAE,47BAA67B,CAAA;EACn8B,CAAA"}
|
|
@@ -10,6 +10,7 @@ type ListFieldProps = {
|
|
|
10
10
|
required?: boolean;
|
|
11
11
|
schema?: SchemaRenderable;
|
|
12
12
|
showGroupedErrors?: boolean;
|
|
13
|
+
className?: string;
|
|
13
14
|
};
|
|
14
15
|
};
|
|
15
16
|
export declare const ListField: ({ form, field }: ListFieldProps) => import("react/jsx-runtime").JSX.Element | null;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListField.d.ts","sourceRoot":"","sources":["../../../src/forms/fields/ListField.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAC7D,OAAO,KAAK,EAAc,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAE1E,KAAK,cAAc,GAAG;IAClB,IAAI,EAAE,mBAAmB,CAAC;IAC1B,KAAK,EAAE;QACH,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,YAAY,CAAC,EAAE,MAAM,CAAC;QACtB,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,MAAM,CAAC,EAAE,gBAAgB,CAAC;QAC1B,iBAAiB,CAAC,EAAE,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"ListField.d.ts","sourceRoot":"","sources":["../../../src/forms/fields/ListField.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAC7D,OAAO,KAAK,EAAc,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAE1E,KAAK,cAAc,GAAG;IAClB,IAAI,EAAE,mBAAmB,CAAC;IAC1B,KAAK,EAAE;QACH,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,YAAY,CAAC,EAAE,MAAM,CAAC;QACtB,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,MAAM,CAAC,EAAE,gBAAgB,CAAC;QAC1B,iBAAiB,CAAC,EAAE,OAAO,CAAC;QAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;KACtB,CAAC;CACL,CAAC;AAEF,eAAO,MAAM,SAAS,GAAI,iBAAiB,cAAc,mDA6ExD,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListField.js","names":[],"sources":["../../../src/forms/fields/ListField.tsx"],"sourcesContent":["import { FieldLayout } from '../Field';\nimport type { SchemaFormEngineApi } from '../engine/context';\nimport type { SchemaNode, SchemaRenderable } from '../engine/SchemaIndex';\n\ntype ListFieldProps = {\n form: SchemaFormEngineApi;\n field: {\n name: string;\n label?: string;\n instructions?: string;\n warning?: string;\n required?: boolean;\n schema?: SchemaRenderable;\n showGroupedErrors?: boolean;\n };\n};\n\nexport const ListField = ({ form, field }: ListFieldProps) => {\n const Renderer = form?.SchemaRenderer;\n const shouldShowGroupedErrors = field.showGroupedErrors !== false;\n const errors = shouldShowGroupedErrors\n ? (form?.getGroupedErrorsForPath?.(field.name)\n ?? form?.getErrorMapFields?.()[field.name]\n ?? [])\n : [];\n\n if (!Renderer) {\n return null;\n }\n\n const items = Array.isArray(form.getFieldValue(field.name)) ? form.getFieldValue(field.name) : [];\n const itemSchema = field.schema;\n\n return (\n <FieldLayout\n name={field.name}\n label={field.label}\n instructions={field.instructions}\n warning={field.warning}\n required={field.required}\n errors={errors}\n withControl={false}\n >\n {items.map((item, index) => {\n const modifyChildren = (children: SchemaRenderable | undefined): SchemaRenderable[] => {\n let normalizedChildren: SchemaRenderable[] = [];\n if (Array.isArray(children)) {\n normalizedChildren = children;\n } else if (children) {\n normalizedChildren = [children];\n }\n\n return normalizedChildren.map((child) => {\n if (!child || typeof child !== 'object' || Array.isArray(child)) {\n return child;\n }\n\n const childNode = child as SchemaNode;\n const shouldMapChildren = Boolean(childNode.children) && typeof childNode.children === 'object';\n const resolvedChildren = shouldMapChildren ? modifyChildren(childNode.children) : childNode.children;\n\n const childWithContext = {\n ...childNode,\n _data: {\n $item: item,\n $key: index,\n },\n children: resolvedChildren,\n };\n\n if (childNode.$field && typeof childNode.name === 'string') {\n return {\n ...childWithContext,\n name: `${field.name}.${index}.${childNode.name}`,\n };\n }\n\n return childWithContext;\n });\n };\n\n const modifiedChildren = modifyChildren(itemSchema);\n const key = item?._uid || item?.id || `${field.name}-${index}`;\n\n return (\n <Renderer\n key={key}\n schema={modifiedChildren}\n />\n );\n })}\n </FieldLayout>\n );\n};\n"],"mappings":";;;
|
|
1
|
+
{"version":3,"file":"ListField.js","names":[],"sources":["../../../src/forms/fields/ListField.tsx"],"sourcesContent":["import { FieldLayout } from '../Field';\nimport type { SchemaFormEngineApi } from '../engine/context';\nimport type { SchemaNode, SchemaRenderable } from '../engine/SchemaIndex';\n\ntype ListFieldProps = {\n form: SchemaFormEngineApi;\n field: {\n name: string;\n label?: string;\n instructions?: string;\n warning?: string;\n required?: boolean;\n schema?: SchemaRenderable;\n showGroupedErrors?: boolean;\n className?: string;\n };\n};\n\nexport const ListField = ({ form, field }: ListFieldProps) => {\n const Renderer = form?.SchemaRenderer;\n const shouldShowGroupedErrors = field.showGroupedErrors !== false;\n const errors = shouldShowGroupedErrors\n ? (form?.getGroupedErrorsForPath?.(field.name)\n ?? form?.getErrorMapFields?.()[field.name]\n ?? [])\n : [];\n\n if (!Renderer) {\n return null;\n }\n\n const items = Array.isArray(form.getFieldValue(field.name)) ? form.getFieldValue(field.name) : [];\n const itemSchema = field.schema;\n\n return (\n <FieldLayout\n name={field.name}\n label={field.label}\n instructions={field.instructions}\n warning={field.warning}\n required={field.required}\n errors={errors}\n withControl={false}\n className={field.className}\n >\n {items.map((item, index) => {\n const modifyChildren = (children: SchemaRenderable | undefined): SchemaRenderable[] => {\n let normalizedChildren: SchemaRenderable[] = [];\n if (Array.isArray(children)) {\n normalizedChildren = children;\n } else if (children) {\n normalizedChildren = [children];\n }\n\n return normalizedChildren.map((child) => {\n if (!child || typeof child !== 'object' || Array.isArray(child)) {\n return child;\n }\n\n const childNode = child as SchemaNode;\n const shouldMapChildren = Boolean(childNode.children) && typeof childNode.children === 'object';\n const resolvedChildren = shouldMapChildren ? modifyChildren(childNode.children) : childNode.children;\n\n const childWithContext = {\n ...childNode,\n _data: {\n $item: item,\n $key: index,\n },\n children: resolvedChildren,\n };\n\n if (childNode.$field && typeof childNode.name === 'string') {\n return {\n ...childWithContext,\n name: `${field.name}.${index}.${childNode.name}`,\n };\n }\n\n return childWithContext;\n });\n };\n\n const modifiedChildren = modifyChildren(itemSchema);\n const key = item?._uid || item?.id || `${field.name}-${index}`;\n\n return (\n <Renderer\n key={key}\n schema={modifiedChildren}\n />\n );\n })}\n </FieldLayout>\n );\n};\n"],"mappings":";;;AAkBA,IAAa,aAAa,EAAE,MAAM,YAA4B;CAC1D,MAAM,WAAW,MAAM;CAEvB,MAAM,SAD0B,MAAM,sBAAsB,QAErD,MAAM,0BAA0B,MAAM,KAAK,IACvC,MAAM,qBAAqB,CAAC,MAAM,SAClC,EAAE,GACP,EAAE;AAER,KAAI,CAAC,SACD,QAAO;CAGX,MAAM,QAAQ,MAAM,QAAQ,KAAK,cAAc,MAAM,KAAK,CAAC,GAAG,KAAK,cAAc,MAAM,KAAK,GAAG,EAAE;CACjG,MAAM,aAAa,MAAM;AAEzB,QACI,oBAAC,aAAD;EACI,MAAM,MAAM;EACZ,OAAO,MAAM;EACb,cAAc,MAAM;EACpB,SAAS,MAAM;EACf,UAAU,MAAM;EACR;EACR,aAAa;EACb,WAAW,MAAM;YAEhB,MAAM,KAAK,MAAM,UAAU;GACxB,MAAM,kBAAkB,aAA+D;IACnF,IAAI,qBAAyC,EAAE;AAC/C,QAAI,MAAM,QAAQ,SAAS,CACvB,sBAAqB;aACd,SACP,sBAAqB,CAAC,SAAS;AAGnC,WAAO,mBAAmB,KAAK,UAAU;AACrC,SAAI,CAAC,SAAS,OAAO,UAAU,YAAY,MAAM,QAAQ,MAAM,CAC3D,QAAO;KAGX,MAAM,YAAY;KAElB,MAAM,mBADoB,QAAQ,UAAU,SAAS,IAAI,OAAO,UAAU,aAAa,WAC1C,eAAe,UAAU,SAAS,GAAG,UAAU;KAE5F,MAAM,mBAAmB;MACrB,GAAG;MACH,OAAO;OACH,OAAO;OACP,MAAM;OACT;MACD,UAAU;MACb;AAED,SAAI,UAAU,UAAU,OAAO,UAAU,SAAS,SAC9C,QAAO;MACH,GAAG;MACH,MAAM,GAAG,MAAM,KAAK,GAAG,MAAM,GAAG,UAAU;MAC7C;AAGL,YAAO;MACT;;GAGN,MAAM,mBAAmB,eAAe,WAAW;GACnD,MAAM,MAAM,MAAM,QAAQ,MAAM,MAAM,GAAG,MAAM,KAAK,GAAG;AAEvD,UACI,oBAAC,UAAD,EAEI,QAAQ,kBACV,EAFO,IAEP;IAER;EACQ,CAAA"}
|
|
@@ -16,6 +16,7 @@ type RichTextFieldProps = {
|
|
|
16
16
|
rows?: number;
|
|
17
17
|
linkOptions?: LinkOptionsInput;
|
|
18
18
|
linkSelectorStorageKeyPrefix?: string;
|
|
19
|
+
translatable?: boolean;
|
|
19
20
|
};
|
|
20
21
|
};
|
|
21
22
|
export declare const RichTextField: ({ form, field }: RichTextFieldProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RichTextField.d.ts","sourceRoot":"","sources":["../../../src/forms/fields/RichTextField.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAgB,MAAM,oCAAoC,CAAC;AAEpF,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAC7D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uCAAuC,CAAC;AAI5E,KAAK,kBAAkB,GAAG;IACtB,IAAI,EAAE,mBAAmB,CAAC;IAC1B,KAAK,EAAE;QACH,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,YAAY,CAAC,EAAE,MAAM,CAAC;QACtB,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;QACnB,cAAc,CAAC,EAAE,cAAc,CAAC;QAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,WAAW,CAAC,EAAE,gBAAgB,CAAC;QAC/B,4BAA4B,CAAC,EAAE,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"RichTextField.d.ts","sourceRoot":"","sources":["../../../src/forms/fields/RichTextField.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAgB,MAAM,oCAAoC,CAAC;AAEpF,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAC7D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uCAAuC,CAAC;AAI5E,KAAK,kBAAkB,GAAG;IACtB,IAAI,EAAE,mBAAmB,CAAC;IAC1B,KAAK,EAAE;QACH,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,YAAY,CAAC,EAAE,MAAM,CAAC;QACtB,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;QACnB,cAAc,CAAC,EAAE,cAAc,CAAC;QAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,WAAW,CAAC,EAAE,gBAAgB,CAAC;QAC/B,4BAA4B,CAAC,EAAE,MAAM,CAAC;QACtC,YAAY,CAAC,EAAE,OAAO,CAAC;KAC1B,CAAC;CACL,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,iBAAiB,kBAAkB,4CAkDhE,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RichTextField.js","names":[],"sources":["../../../src/forms/fields/RichTextField.tsx"],"sourcesContent":["import { useMemo } from 'react';\nimport { LinkOptionsInput, TiptapEditor } from '@verbb/plugin-kit-react/components';\nimport { FieldLayout } from '../Field';\nimport type { SchemaFormEngineApi } from '../engine/context';\nimport type { VariableConfig } from '../contexts/VariableCategoriesContext';\nimport { useEngineField } from '../useEngineField';\nimport { useVariableCategoriesContext } from '../contexts/VariableCategoriesContext';\n\ntype RichTextFieldProps = {\n form: SchemaFormEngineApi;\n field: {\n name: string;\n label?: string;\n instructions?: string;\n warning?: string;\n placeholder?: string;\n buttons?: string[];\n variableConfig?: VariableConfig;\n required?: boolean;\n disabled?: boolean;\n rows?: number;\n linkOptions?: LinkOptionsInput;\n linkSelectorStorageKeyPrefix?: string;\n };\n};\n\nexport const RichTextField = ({ form, field }: RichTextFieldProps) => {\n const { value, setValue, errors } = useEngineField(form, field.name);\n const buttons = field.buttons ?? ['bold', 'italic'];\n const {\n getVariableCategories,\n variableCategoryLabels,\n variableCategoryOrder,\n variableTransformerRegistry,\n renderVariableConfigureSection,\n resolveVariableTagLabel,\n } = useVariableCategoriesContext();\n const { variableConfig } = field;\n\n const variableCategories = useMemo(() => {\n if (!variableConfig || !getVariableCategories) {\n return undefined;\n }\n return getVariableCategories(variableConfig, { form });\n }, [variableConfig, form, getVariableCategories]);\n\n return (\n <FieldLayout\n name={field.name}\n label={field.label}\n instructions={field.instructions}\n warning={field.warning}\n required={field.required}\n errors={errors}\n withControl={false}\n >\n <TiptapEditor\n value={value ?? ''}\n onChange={setValue}\n placeholder={field.placeholder}\n rows={field.rows}\n buttons={buttons}\n {...(variableCategories && { variableCategories })}\n {...(variableCategoryLabels && { variableCategoryLabels })}\n {...(variableCategoryOrder && { variableCategoryOrder })}\n {...(variableTransformerRegistry && { variableTransformerRegistry })}\n {...(renderVariableConfigureSection && { renderVariableConfigureSection })}\n {...(resolveVariableTagLabel && { resolveVariableTagLabel })}\n {...(field.linkOptions && { linkOptions: field.linkOptions })}\n {...(field.linkSelectorStorageKeyPrefix && { linkSelectorStorageKeyPrefix: field.linkSelectorStorageKeyPrefix })}\n disabled={field.disabled}\n isInvalid={errors.length > 0}\n />\n </FieldLayout>\n );\n};\n"],"mappings":";;;;;;;;
|
|
1
|
+
{"version":3,"file":"RichTextField.js","names":[],"sources":["../../../src/forms/fields/RichTextField.tsx"],"sourcesContent":["import { useMemo } from 'react';\nimport { LinkOptionsInput, TiptapEditor } from '@verbb/plugin-kit-react/components';\nimport { FieldLayout } from '../Field';\nimport type { SchemaFormEngineApi } from '../engine/context';\nimport type { VariableConfig } from '../contexts/VariableCategoriesContext';\nimport { useEngineField } from '../useEngineField';\nimport { useVariableCategoriesContext } from '../contexts/VariableCategoriesContext';\n\ntype RichTextFieldProps = {\n form: SchemaFormEngineApi;\n field: {\n name: string;\n label?: string;\n instructions?: string;\n warning?: string;\n placeholder?: string;\n buttons?: string[];\n variableConfig?: VariableConfig;\n required?: boolean;\n disabled?: boolean;\n rows?: number;\n linkOptions?: LinkOptionsInput;\n linkSelectorStorageKeyPrefix?: string;\n translatable?: boolean;\n };\n};\n\nexport const RichTextField = ({ form, field }: RichTextFieldProps) => {\n const { value, setValue, errors } = useEngineField(form, field.name);\n const buttons = field.buttons ?? ['bold', 'italic'];\n const {\n getVariableCategories,\n variableCategoryLabels,\n variableCategoryOrder,\n variableTransformerRegistry,\n renderVariableConfigureSection,\n resolveVariableTagLabel,\n } = useVariableCategoriesContext();\n const { variableConfig } = field;\n\n const variableCategories = useMemo(() => {\n if (!variableConfig || !getVariableCategories) {\n return undefined;\n }\n return getVariableCategories(variableConfig, { form });\n }, [variableConfig, form, getVariableCategories]);\n\n return (\n <FieldLayout\n name={field.name}\n label={field.label}\n instructions={field.instructions}\n warning={field.warning}\n required={field.required}\n translatable={field.translatable}\n errors={errors}\n withControl={false}\n >\n <TiptapEditor\n value={value ?? ''}\n onChange={setValue}\n placeholder={field.placeholder}\n rows={field.rows}\n buttons={buttons}\n {...(variableCategories && { variableCategories })}\n {...(variableCategoryLabels && { variableCategoryLabels })}\n {...(variableCategoryOrder && { variableCategoryOrder })}\n {...(variableTransformerRegistry && { variableTransformerRegistry })}\n {...(renderVariableConfigureSection && { renderVariableConfigureSection })}\n {...(resolveVariableTagLabel && { resolveVariableTagLabel })}\n {...(field.linkOptions && { linkOptions: field.linkOptions })}\n {...(field.linkSelectorStorageKeyPrefix && { linkSelectorStorageKeyPrefix: field.linkSelectorStorageKeyPrefix })}\n disabled={field.disabled}\n isInvalid={errors.length > 0}\n />\n </FieldLayout>\n );\n};\n"],"mappings":";;;;;;;;AA2BA,IAAa,iBAAiB,EAAE,MAAM,YAAgC;CAClE,MAAM,EAAE,OAAO,UAAU,WAAW,eAAe,MAAM,MAAM,KAAK;CACpE,MAAM,UAAU,MAAM,WAAW,CAAC,QAAQ,SAAS;CACnD,MAAM,EACF,uBACA,wBACA,uBACA,6BACA,gCACA,4BACA,8BAA8B;CAClC,MAAM,EAAE,mBAAmB;CAE3B,MAAM,qBAAqB,cAAc;AACrC,MAAI,CAAC,kBAAkB,CAAC,sBACpB;AAEJ,SAAO,sBAAsB,gBAAgB,EAAE,MAAM,CAAC;IACvD;EAAC;EAAgB;EAAM;EAAsB,CAAC;AAEjD,QACI,oBAAC,aAAD;EACI,MAAM,MAAM;EACZ,OAAO,MAAM;EACb,cAAc,MAAM;EACpB,SAAS,MAAM;EACf,UAAU,MAAM;EAChB,cAAc,MAAM;EACZ;EACR,aAAa;YAEb,oBAAC,cAAD;GACI,OAAO,SAAS;GAChB,UAAU;GACV,aAAa,MAAM;GACnB,MAAM,MAAM;GACH;GACT,GAAK,sBAAsB,EAAE,oBAAoB;GACjD,GAAK,0BAA0B,EAAE,wBAAwB;GACzD,GAAK,yBAAyB,EAAE,uBAAuB;GACvD,GAAK,+BAA+B,EAAE,6BAA6B;GACnE,GAAK,kCAAkC,EAAE,gCAAgC;GACzE,GAAK,2BAA2B,EAAE,yBAAyB;GAC3D,GAAK,MAAM,eAAe,EAAE,aAAa,MAAM,aAAa;GAC5D,GAAK,MAAM,gCAAgC,EAAE,8BAA8B,MAAM,8BAA8B;GAC/G,UAAU,MAAM;GAChB,WAAW,OAAO,SAAS;GAC7B,CAAA;EACQ,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectField.d.ts","sourceRoot":"","sources":["../../../src/forms/fields/SelectField.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAC7D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAGxD,KAAK,iBAAiB,GAAG;IACrB,KAAK,EAAE,OAAO,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CAC1B,CAAC;AAEF,KAAK,gBAAgB,GAAG;IACpB,IAAI,EAAE,mBAAmB,CAAC;IAC1B,KAAK,EAAE,UAAU,GAAG;QAChB,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,YAAY,CAAC,EAAE,MAAM,CAAC;QACtB,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,OAAO,CAAC,EAAE,iBAAiB,EAAE,CAAC;QAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;KACtB,CAAC;CACL,CAAC;AAIF,eAAO,MAAM,WAAW,GAAI,iBAAiB,gBAAgB,
|
|
1
|
+
{"version":3,"file":"SelectField.d.ts","sourceRoot":"","sources":["../../../src/forms/fields/SelectField.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAC7D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAGxD,KAAK,iBAAiB,GAAG;IACrB,KAAK,EAAE,OAAO,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CAC1B,CAAC;AAEF,KAAK,gBAAgB,GAAG;IACpB,IAAI,EAAE,mBAAmB,CAAC;IAC1B,KAAK,EAAE,UAAU,GAAG;QAChB,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,YAAY,CAAC,EAAE,MAAM,CAAC;QACtB,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,OAAO,CAAC,EAAE,iBAAiB,EAAE,CAAC;QAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;KACtB,CAAC;CACL,CAAC;AAIF,eAAO,MAAM,WAAW,GAAI,iBAAiB,gBAAgB,4CA2E5D,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectField.js","names":[],"sources":["../../../src/forms/fields/SelectField.tsx"],"sourcesContent":["import type React from 'react';\nimport { SelectInput } from '@verbb/plugin-kit-react/components';\nimport { evaluateCondition } from '@verbb/plugin-kit-react/utils/schema';\nimport { useEffect, useMemo, useSyncExternalStore } from 'react';\nimport { FieldLayout } from '../Field';\nimport type { SchemaFormEngineApi } from '../engine/context';\nimport type { SchemaNode } from '../engine/SchemaIndex';\nimport { useEngineField } from '../useEngineField';\n\ntype SelectFieldOption = {\n value: unknown;\n label: string;\n disabled?: boolean;\n if?: string;\n [key: string]: unknown;\n};\n\ntype SelectFieldProps = {\n form: SchemaFormEngineApi;\n field: SchemaNode & {\n name: string;\n label?: string;\n instructions?: string;\n warning?: string;\n placeholder?: string;\n options?: SelectFieldOption[];\n required?: boolean;\n disabled?: boolean;\n };\n};\n\ntype SelectInputProps = React.ComponentProps<typeof SelectInput>;\n\nexport const SelectField = ({ form, field }: SelectFieldProps) => {\n const {\n value, setValue, setTouched, errors, isInvalid,\n } = useEngineField(form, field.name);\n const values = useSyncExternalStore(\n form.store.subscribe.bind(form.store),\n () => { return form.store.state.values; },\n () => { return form.store.state.values; },\n );\n\n const conditionData = useMemo(() => {\n const scopePath = typeof field._scopePath === 'string' ? field._scopePath : '';\n const scopedValues = scopePath ? form?.getFieldValue?.(scopePath) : null;\n const scopedObject = scopedValues && typeof scopedValues === 'object' ? scopedValues : {};\n const fieldData = (field._data && typeof field._data === 'object') ? field._data : {};\n\n return {\n ...(values || {}),\n ...scopedObject,\n ...fieldData,\n };\n }, [field, form, values]);\n\n const filteredOptions = useMemo(() => {\n const options = Array.isArray(field.options) ? field.options : [];\n\n return options.filter((option) => {\n if (!option?.if) {\n return true;\n }\n\n return evaluateCondition(option.if, conditionData);\n });\n }, [conditionData, field.options]);\n\n useEffect(() => {\n if (value === undefined || value === null || value === '') {\n return;\n }\n\n const hasCurrentValue = filteredOptions.some((option) => {\n return String(option?.value) === String(value);\n });\n\n if (hasCurrentValue) {\n return;\n }\n\n const fallback = filteredOptions.find((option) => {\n return option?.value !== undefined && option?.disabled !== true;\n });\n\n setValue(fallback ? fallback.value : '');\n }, [filteredOptions, setValue, value]);\n\n return (\n <FieldLayout\n name={field.name}\n label={field.label}\n instructions={field.instructions}\n warning={field.warning}\n required={field.required}\n errors={errors}\n >\n <SelectInput\n options={filteredOptions}\n placeholder={field.placeholder}\n value={value ?? ''}\n onChange={(nextValue) => { return setValue(nextValue); }}\n isInvalid={isInvalid}\n onBlur={setTouched as SelectInputProps['onBlur']}\n />\n </FieldLayout>\n );\n};\n"],"mappings":";;;;;;;;AAiCA,IAAa,eAAe,EAAE,MAAM,YAA8B;CAC9D,MAAM,EACF,OAAO,UAAU,YAAY,QAAQ,cACrC,eAAe,MAAM,MAAM,KAAK;CACpC,MAAM,SAAS,qBACX,KAAK,MAAM,UAAU,KAAK,KAAK,MAAM,QAC/B;AAAE,SAAO,KAAK,MAAM,MAAM;UAC1B;AAAE,SAAO,KAAK,MAAM,MAAM;GACnC;CAED,MAAM,gBAAgB,cAAc;EAChC,MAAM,YAAY,OAAO,MAAM,eAAe,WAAW,MAAM,aAAa;EAC5E,MAAM,eAAe,YAAY,MAAM,gBAAgB,UAAU,GAAG;EACpE,MAAM,eAAe,gBAAgB,OAAO,iBAAiB,WAAW,eAAe,EAAE;EACzF,MAAM,YAAa,MAAM,SAAS,OAAO,MAAM,UAAU,WAAY,MAAM,QAAQ,EAAE;AAErF,SAAO;GACH,GAAI,UAAU,EAAE;GAChB,GAAG;GACH,GAAG;GACN;IACF;EAAC;EAAO;EAAM;EAAO,CAAC;CAEzB,MAAM,kBAAkB,cAAc;AAGlC,UAFgB,MAAM,QAAQ,MAAM,QAAQ,GAAG,MAAM,UAAU,EAAE,EAElD,QAAQ,WAAW;AAC9B,OAAI,CAAC,QAAQ,GACT,QAAO;AAGX,UAAO,kBAAkB,OAAO,IAAI,cAAc;IACpD;IACH,CAAC,eAAe,MAAM,QAAQ,CAAC;AAElC,iBAAgB;AACZ,MAAI,UAAU,KAAA,KAAa,UAAU,QAAQ,UAAU,GACnD;AAOJ,MAJwB,gBAAgB,MAAM,WAAW;AACrD,UAAO,OAAO,QAAQ,MAAM,KAAK,OAAO,MAAM;IAG9C,CACA;EAGJ,MAAM,WAAW,gBAAgB,MAAM,WAAW;AAC9C,UAAO,QAAQ,UAAU,KAAA,KAAa,QAAQ,aAAa;IAC7D;AAEF,WAAS,WAAW,SAAS,QAAQ,GAAG;IACzC;EAAC;EAAiB;EAAU;EAAM,CAAC;AAEtC,QACI,oBAAC,aAAD;EACI,MAAM,MAAM;EACZ,OAAO,MAAM;EACb,cAAc,MAAM;EACpB,SAAS,MAAM;EACf,UAAU,MAAM;EACR;YAER,oBAAC,aAAD;GACI,SAAS;GACT,aAAa,MAAM;GACnB,OAAO,SAAS;GAChB,WAAW,cAAc;AAAE,WAAO,SAAS,UAAU;;GAC1C;GACX,QAAQ;
|
|
1
|
+
{"version":3,"file":"SelectField.js","names":[],"sources":["../../../src/forms/fields/SelectField.tsx"],"sourcesContent":["import type React from 'react';\nimport { SelectInput } from '@verbb/plugin-kit-react/components';\nimport { evaluateCondition } from '@verbb/plugin-kit-react/utils/schema';\nimport { useEffect, useMemo, useSyncExternalStore } from 'react';\nimport { FieldLayout } from '../Field';\nimport type { SchemaFormEngineApi } from '../engine/context';\nimport type { SchemaNode } from '../engine/SchemaIndex';\nimport { useEngineField } from '../useEngineField';\n\ntype SelectFieldOption = {\n value: unknown;\n label: string;\n disabled?: boolean;\n if?: string;\n [key: string]: unknown;\n};\n\ntype SelectFieldProps = {\n form: SchemaFormEngineApi;\n field: SchemaNode & {\n name: string;\n label?: string;\n instructions?: string;\n warning?: string;\n placeholder?: string;\n options?: SelectFieldOption[];\n required?: boolean;\n disabled?: boolean;\n };\n};\n\ntype SelectInputProps = React.ComponentProps<typeof SelectInput>;\n\nexport const SelectField = ({ form, field }: SelectFieldProps) => {\n const {\n value, setValue, setTouched, errors, isInvalid,\n } = useEngineField(form, field.name);\n const values = useSyncExternalStore(\n form.store.subscribe.bind(form.store),\n () => { return form.store.state.values; },\n () => { return form.store.state.values; },\n );\n\n const conditionData = useMemo(() => {\n const scopePath = typeof field._scopePath === 'string' ? field._scopePath : '';\n const scopedValues = scopePath ? form?.getFieldValue?.(scopePath) : null;\n const scopedObject = scopedValues && typeof scopedValues === 'object' ? scopedValues : {};\n const fieldData = (field._data && typeof field._data === 'object') ? field._data : {};\n\n return {\n ...(values || {}),\n ...scopedObject,\n ...fieldData,\n };\n }, [field, form, values]);\n\n const filteredOptions = useMemo(() => {\n const options = Array.isArray(field.options) ? field.options : [];\n\n return options.filter((option) => {\n if (!option?.if) {\n return true;\n }\n\n return evaluateCondition(option.if, conditionData);\n });\n }, [conditionData, field.options]);\n\n useEffect(() => {\n if (value === undefined || value === null || value === '') {\n return;\n }\n\n const hasCurrentValue = filteredOptions.some((option) => {\n return String(option?.value) === String(value);\n });\n\n if (hasCurrentValue) {\n return;\n }\n\n const fallback = filteredOptions.find((option) => {\n return option?.value !== undefined && option?.disabled !== true;\n });\n\n setValue(fallback ? fallback.value : '');\n }, [filteredOptions, setValue, value]);\n\n return (\n <FieldLayout\n name={field.name}\n label={field.label}\n instructions={field.instructions}\n warning={field.warning}\n required={field.required}\n errors={errors}\n >\n <SelectInput\n options={filteredOptions}\n placeholder={field.placeholder}\n value={value ?? ''}\n onChange={(nextValue) => { return setValue(nextValue); }}\n isInvalid={isInvalid}\n onBlur={setTouched as SelectInputProps['onBlur']}\n disabled={field.disabled}\n />\n </FieldLayout>\n );\n};\n"],"mappings":";;;;;;;;AAiCA,IAAa,eAAe,EAAE,MAAM,YAA8B;CAC9D,MAAM,EACF,OAAO,UAAU,YAAY,QAAQ,cACrC,eAAe,MAAM,MAAM,KAAK;CACpC,MAAM,SAAS,qBACX,KAAK,MAAM,UAAU,KAAK,KAAK,MAAM,QAC/B;AAAE,SAAO,KAAK,MAAM,MAAM;UAC1B;AAAE,SAAO,KAAK,MAAM,MAAM;GACnC;CAED,MAAM,gBAAgB,cAAc;EAChC,MAAM,YAAY,OAAO,MAAM,eAAe,WAAW,MAAM,aAAa;EAC5E,MAAM,eAAe,YAAY,MAAM,gBAAgB,UAAU,GAAG;EACpE,MAAM,eAAe,gBAAgB,OAAO,iBAAiB,WAAW,eAAe,EAAE;EACzF,MAAM,YAAa,MAAM,SAAS,OAAO,MAAM,UAAU,WAAY,MAAM,QAAQ,EAAE;AAErF,SAAO;GACH,GAAI,UAAU,EAAE;GAChB,GAAG;GACH,GAAG;GACN;IACF;EAAC;EAAO;EAAM;EAAO,CAAC;CAEzB,MAAM,kBAAkB,cAAc;AAGlC,UAFgB,MAAM,QAAQ,MAAM,QAAQ,GAAG,MAAM,UAAU,EAAE,EAElD,QAAQ,WAAW;AAC9B,OAAI,CAAC,QAAQ,GACT,QAAO;AAGX,UAAO,kBAAkB,OAAO,IAAI,cAAc;IACpD;IACH,CAAC,eAAe,MAAM,QAAQ,CAAC;AAElC,iBAAgB;AACZ,MAAI,UAAU,KAAA,KAAa,UAAU,QAAQ,UAAU,GACnD;AAOJ,MAJwB,gBAAgB,MAAM,WAAW;AACrD,UAAO,OAAO,QAAQ,MAAM,KAAK,OAAO,MAAM;IAG9C,CACA;EAGJ,MAAM,WAAW,gBAAgB,MAAM,WAAW;AAC9C,UAAO,QAAQ,UAAU,KAAA,KAAa,QAAQ,aAAa;IAC7D;AAEF,WAAS,WAAW,SAAS,QAAQ,GAAG;IACzC;EAAC;EAAiB;EAAU;EAAM,CAAC;AAEtC,QACI,oBAAC,aAAD;EACI,MAAM,MAAM;EACZ,OAAO,MAAM;EACb,cAAc,MAAM;EACpB,SAAS,MAAM;EACf,UAAU,MAAM;EACR;YAER,oBAAC,aAAD;GACI,SAAS;GACT,aAAa,MAAM;GACnB,OAAO,SAAS;GAChB,WAAW,cAAc;AAAE,WAAO,SAAS,UAAU;;GAC1C;GACX,QAAQ;GACR,UAAU,MAAM;GAClB,CAAA;EACQ,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../../../src/forms/fields/TextField.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAG7D,KAAK,cAAc,GAAG;IAClB,IAAI,EAAE,mBAAmB,CAAC;IAC1B,KAAK,EAAE;QACH,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,YAAY,CAAC,EAAE,MAAM,CAAC;QACtB,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../../../src/forms/fields/TextField.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAG7D,KAAK,cAAc,GAAG;IAClB,IAAI,EAAE,mBAAmB,CAAC;IAC1B,KAAK,EAAE;QACH,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,YAAY,CAAC,EAAE,MAAM,CAAC;QACtB,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,YAAY,CAAC,EAAE,OAAO,CAAC;KAC1B,CAAC;CACL,CAAC;AAEF,eAAO,MAAM,SAAS,GAAI,iBAAiB,cAAc,4CAyBxD,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextField.js","names":[],"sources":["../../../src/forms/fields/TextField.tsx"],"sourcesContent":["import { Input } from '@verbb/plugin-kit-react/components';\nimport { FieldLayout } from '../Field';\nimport type { SchemaFormEngineApi } from '../engine/context';\nimport { useEngineField } from '../useEngineField';\n\ntype TextFieldProps = {\n form: SchemaFormEngineApi;\n field: {\n name: string;\n label?: string;\n instructions?: string;\n warning?: string;\n placeholder?: string;\n required?: boolean;\n disabled?: boolean;\n };\n};\n\nexport const TextField = ({ form, field }: TextFieldProps) => {\n const {\n value, setValue, setTouched, errors, isInvalid,\n } = useEngineField(form, field.name);\n\n return (\n <FieldLayout\n name={field.name}\n label={field.label}\n instructions={field.instructions}\n warning={field.warning}\n required={field.required}\n errors={errors}\n >\n <Input\n value={String(value ?? '')}\n onChange={(event) => { return setValue(event.target.value); }}\n onBlur={setTouched}\n placeholder={field.placeholder}\n disabled={field.disabled}\n aria-invalid={isInvalid}\n />\n </FieldLayout>\n );\n};\n"],"mappings":";;;;;;
|
|
1
|
+
{"version":3,"file":"TextField.js","names":[],"sources":["../../../src/forms/fields/TextField.tsx"],"sourcesContent":["import { Input } from '@verbb/plugin-kit-react/components';\nimport { FieldLayout } from '../Field';\nimport type { SchemaFormEngineApi } from '../engine/context';\nimport { useEngineField } from '../useEngineField';\n\ntype TextFieldProps = {\n form: SchemaFormEngineApi;\n field: {\n name: string;\n label?: string;\n instructions?: string;\n warning?: string;\n placeholder?: string;\n required?: boolean;\n disabled?: boolean;\n translatable?: boolean;\n };\n};\n\nexport const TextField = ({ form, field }: TextFieldProps) => {\n const {\n value, setValue, setTouched, errors, isInvalid,\n } = useEngineField(form, field.name);\n\n return (\n <FieldLayout\n name={field.name}\n label={field.label}\n instructions={field.instructions}\n warning={field.warning}\n required={field.required}\n translatable={field.translatable}\n errors={errors}\n >\n <Input\n value={String(value ?? '')}\n onChange={(event) => { return setValue(event.target.value); }}\n onBlur={setTouched}\n placeholder={field.placeholder}\n disabled={field.disabled}\n aria-invalid={isInvalid}\n />\n </FieldLayout>\n );\n};\n"],"mappings":";;;;;;AAmBA,IAAa,aAAa,EAAE,MAAM,YAA4B;CAC1D,MAAM,EACF,OAAO,UAAU,YAAY,QAAQ,cACrC,eAAe,MAAM,MAAM,KAAK;AAEpC,QACI,oBAAC,aAAD;EACI,MAAM,MAAM;EACZ,OAAO,MAAM;EACb,cAAc,MAAM;EACpB,SAAS,MAAM;EACf,UAAU,MAAM;EAChB,cAAc,MAAM;EACZ;YAER,oBAAC,OAAD;GACI,OAAO,OAAO,SAAS,GAAG;GAC1B,WAAW,UAAU;AAAE,WAAO,SAAS,MAAM,OAAO,MAAM;;GAC1D,QAAQ;GACR,aAAa,MAAM;GACnB,UAAU,MAAM;GAChB,gBAAc;GAChB,CAAA;EACQ,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextareaField.d.ts","sourceRoot":"","sources":["../../../src/forms/fields/TextareaField.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAG7D,KAAK,kBAAkB,GAAG;IACtB,IAAI,EAAE,mBAAmB,CAAC;IAC1B,KAAK,EAAE;QACH,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,YAAY,CAAC,EAAE,MAAM,CAAC;QACtB,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"TextareaField.d.ts","sourceRoot":"","sources":["../../../src/forms/fields/TextareaField.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAG7D,KAAK,kBAAkB,GAAG;IACtB,IAAI,EAAE,mBAAmB,CAAC;IAC1B,KAAK,EAAE;QACH,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,YAAY,CAAC,EAAE,MAAM,CAAC;QACtB,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,YAAY,CAAC,EAAE,OAAO,CAAC;KAC1B,CAAC;CACL,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,iBAAiB,kBAAkB,4CA0BhE,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextareaField.js","names":[],"sources":["../../../src/forms/fields/TextareaField.tsx"],"sourcesContent":["import { Textarea } from '@verbb/plugin-kit-react/components';\nimport { FieldLayout } from '../Field';\nimport type { SchemaFormEngineApi } from '../engine/context';\nimport { useEngineField } from '../useEngineField';\n\ntype TextareaFieldProps = {\n form: SchemaFormEngineApi;\n field: {\n name: string;\n label?: string;\n instructions?: string;\n warning?: string;\n placeholder?: string;\n rows?: number;\n required?: boolean;\n disabled?: boolean;\n };\n};\n\nexport const TextareaField = ({ form, field }: TextareaFieldProps) => {\n const {\n value, setValue, setTouched, errors, isInvalid,\n } = useEngineField(form, field.name);\n\n return (\n <FieldLayout\n name={field.name}\n label={field.label}\n instructions={field.instructions}\n warning={field.warning}\n required={field.required}\n errors={errors}\n >\n <Textarea\n value={String(value ?? '')}\n onChange={(event) => { return setValue(event.target.value); }}\n onBlur={setTouched}\n placeholder={field.placeholder}\n disabled={field.disabled}\n rows={field.rows}\n aria-invalid={isInvalid}\n />\n </FieldLayout>\n );\n};\n"],"mappings":";;;;;;
|
|
1
|
+
{"version":3,"file":"TextareaField.js","names":[],"sources":["../../../src/forms/fields/TextareaField.tsx"],"sourcesContent":["import { Textarea } from '@verbb/plugin-kit-react/components';\nimport { FieldLayout } from '../Field';\nimport type { SchemaFormEngineApi } from '../engine/context';\nimport { useEngineField } from '../useEngineField';\n\ntype TextareaFieldProps = {\n form: SchemaFormEngineApi;\n field: {\n name: string;\n label?: string;\n instructions?: string;\n warning?: string;\n placeholder?: string;\n rows?: number;\n required?: boolean;\n disabled?: boolean;\n translatable?: boolean;\n };\n};\n\nexport const TextareaField = ({ form, field }: TextareaFieldProps) => {\n const {\n value, setValue, setTouched, errors, isInvalid,\n } = useEngineField(form, field.name);\n\n return (\n <FieldLayout\n name={field.name}\n label={field.label}\n instructions={field.instructions}\n warning={field.warning}\n required={field.required}\n translatable={field.translatable}\n errors={errors}\n >\n <Textarea\n value={String(value ?? '')}\n onChange={(event) => { return setValue(event.target.value); }}\n onBlur={setTouched}\n placeholder={field.placeholder}\n disabled={field.disabled}\n rows={field.rows}\n aria-invalid={isInvalid}\n />\n </FieldLayout>\n );\n};\n"],"mappings":";;;;;;AAoBA,IAAa,iBAAiB,EAAE,MAAM,YAAgC;CAClE,MAAM,EACF,OAAO,UAAU,YAAY,QAAQ,cACrC,eAAe,MAAM,MAAM,KAAK;AAEpC,QACI,oBAAC,aAAD;EACI,MAAM,MAAM;EACZ,OAAO,MAAM;EACb,cAAc,MAAM;EACpB,SAAS,MAAM;EACf,UAAU,MAAM;EAChB,cAAc,MAAM;EACZ;YAER,oBAAC,UAAD;GACI,OAAO,OAAO,SAAS,GAAG;GAC1B,WAAW,UAAU;AAAE,WAAO,SAAS,MAAM,OAAO,MAAM;;GAC1D,QAAQ;GACR,aAAa,MAAM;GACnB,UAAU,MAAM;GAChB,MAAM,MAAM;GACZ,gBAAc;GAChB,CAAA;EACQ,CAAA"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@verbb/plugin-kit-react",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.8",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/index.js",
|
|
@@ -154,7 +154,7 @@
|
|
|
154
154
|
"@tiptap/react": "^3.22.4",
|
|
155
155
|
"@types/prismjs": "^1.26.6",
|
|
156
156
|
"@uiw/react-codemirror": "^4.25.10",
|
|
157
|
-
"@verbb/plugin-kit": "1.0.
|
|
157
|
+
"@verbb/plugin-kit": "1.0.8",
|
|
158
158
|
"class-variance-authority": "^0.7.1",
|
|
159
159
|
"clsx": "^2.1.1",
|
|
160
160
|
"cmdk": "^1.1.1",
|