@panneau/fields 4.1.0 → 5.0.0-alpha.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +72 -0
- package/dist/boolean/BooleanField.d.ts +11 -0
- package/dist/boolean/BooleanField.d.ts.map +1 -0
- package/dist/boolean/BooleanField.js +67 -0
- package/dist/boolean/BooleanField.js.map +1 -0
- package/dist/boolean/index.d.ts +2 -0
- package/dist/boolean/index.d.ts.map +1 -0
- package/dist/boolean/index.js +1 -0
- package/dist/color/ColorField.css +33 -0
- package/dist/color/ColorField.d.ts +16 -0
- package/dist/color/ColorField.d.ts.map +1 -0
- package/dist/color/ColorField.js +187 -0
- package/dist/color/ColorField.js.map +1 -0
- package/dist/color/ColorField.module.js +14 -0
- package/dist/color/ColorField.module.js.map +1 -0
- package/dist/color/index.d.ts +2 -0
- package/dist/color/index.d.ts.map +1 -0
- package/dist/color/index.js +1 -0
- package/dist/date/DateField.d.ts +16 -0
- package/dist/date/DateField.d.ts.map +1 -0
- package/dist/date/DateField.js +132 -0
- package/dist/date/DateField.js.map +1 -0
- package/dist/date/index.d.ts +2 -0
- package/dist/date/index.d.ts.map +1 -0
- package/dist/date/index.js +1 -0
- package/dist/datetime/DateTimeField.d.ts +22 -0
- package/dist/datetime/DateTimeField.d.ts.map +1 -0
- package/dist/datetime/DateTimeField.js +78 -0
- package/dist/datetime/DateTimeField.js.map +1 -0
- package/dist/datetime/index.d.ts +2 -0
- package/dist/datetime/index.d.ts.map +1 -0
- package/dist/datetime/index.js +1 -0
- package/dist/email/EmailField.d.ts +8 -0
- package/dist/email/EmailField.d.ts.map +1 -0
- package/dist/email/EmailField.js +84 -0
- package/dist/email/EmailField.js.map +1 -0
- package/dist/email/index.d.ts +2 -0
- package/dist/email/index.d.ts.map +1 -0
- package/dist/email/index.js +1 -0
- package/dist/group/GroupField.css +14 -0
- package/dist/group/GroupField.d.ts +19 -0
- package/dist/group/GroupField.d.ts.map +1 -0
- package/dist/group/GroupField.js +140 -0
- package/dist/group/GroupField.js.map +1 -0
- package/dist/group/GroupField.module.js +8 -0
- package/dist/group/GroupField.module.js.map +1 -0
- package/dist/group/index.d.ts +2 -0
- package/dist/group/index.d.ts.map +1 -0
- package/dist/group/index.js +1 -0
- package/dist/index.d.ts +8 -12
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +7 -134
- package/dist/locales/index.d.ts +15 -0
- package/dist/locales/index.d.ts.map +1 -0
- package/dist/locales/index.js +21 -0
- package/dist/locales/index.js.map +1 -0
- package/dist/localized/LocalizedField.css +9 -0
- package/dist/localized/LocalizedField.d.ts +36 -0
- package/dist/localized/LocalizedField.d.ts.map +1 -0
- package/dist/localized/LocalizedField.js +207 -0
- package/dist/localized/LocalizedField.js.map +1 -0
- package/dist/localized/LocalizedField.module.js +12 -0
- package/dist/localized/LocalizedField.module.js.map +1 -0
- package/dist/localized/index.d.ts +2 -0
- package/dist/localized/index.d.ts.map +1 -0
- package/dist/localized/index.js +1 -0
- package/dist/missing/MissingField.css +18 -0
- package/dist/missing/MissingField.d.ts +7 -0
- package/dist/missing/MissingField.d.ts.map +1 -0
- package/dist/missing/MissingField.js +68 -0
- package/dist/missing/MissingField.js.map +1 -0
- package/dist/missing/MissingField.module.js +14 -0
- package/dist/missing/MissingField.module.js.map +1 -0
- package/dist/number/NumberField.d.ts +23 -0
- package/dist/number/NumberField.d.ts.map +1 -0
- package/dist/number/NumberField.js +175 -0
- package/dist/number/NumberField.js.map +1 -0
- package/dist/number/index.d.ts +2 -0
- package/dist/number/index.d.ts.map +1 -0
- package/dist/number/index.js +1 -0
- package/dist/relation/RelationField.css +43 -0
- package/dist/relation/RelationField.d.ts +40 -0
- package/dist/relation/RelationField.d.ts.map +1 -0
- package/dist/relation/RelationField.js +293 -0
- package/dist/relation/RelationField.js.map +1 -0
- package/dist/relation/RelationField.module.js +20 -0
- package/dist/relation/RelationField.module.js.map +1 -0
- package/dist/relation/index.d.ts +3 -0
- package/dist/relation/index.d.ts.map +1 -0
- package/dist/relation/index.js +3 -0
- package/dist/repeater/RepeaterField.css +80 -0
- package/dist/repeater/RepeaterField.d.ts +29 -0
- package/dist/repeater/RepeaterField.d.ts.map +1 -0
- package/dist/repeater/RepeaterField.js +220 -0
- package/dist/repeater/RepeaterField.js.map +1 -0
- package/dist/repeater/RepeaterField.module.js +26 -0
- package/dist/repeater/RepeaterField.module.js.map +1 -0
- package/dist/repeater/index.d.ts +2 -0
- package/dist/repeater/index.d.ts.map +1 -0
- package/dist/repeater/index.js +1 -0
- package/dist/select/SelectField.css +5 -0
- package/dist/select/SelectField.d.ts +38 -0
- package/dist/select/SelectField.d.ts.map +1 -0
- package/dist/select/SelectField.js +434 -0
- package/dist/select/SelectField.js.map +1 -0
- package/dist/select/SelectField.module.js +8 -0
- package/dist/select/SelectField.module.js.map +1 -0
- package/dist/select/index.d.ts +2 -0
- package/dist/select/index.d.ts.map +1 -0
- package/dist/select/index.js +1 -0
- package/dist/shared/DefinitionField.d.ts +32 -0
- package/dist/shared/DefinitionField.d.ts.map +1 -0
- package/dist/shared/DefinitionField.js +153 -0
- package/dist/shared/DefinitionField.js.map +1 -0
- package/dist/shared/builtIn.d.ts +17 -0
- package/dist/shared/builtIn.d.ts.map +1 -0
- package/dist/shared/builtIn.js +52 -0
- package/dist/shared/builtIn.js.map +1 -0
- package/dist/shared/context.d.ts +55 -0
- package/dist/shared/context.d.ts.map +1 -0
- package/dist/shared/context.js +72 -0
- package/dist/shared/context.js.map +1 -0
- package/dist/shared/cx.d.ts +3 -0
- package/dist/shared/cx.d.ts.map +1 -0
- package/dist/shared/cx.js +9 -0
- package/dist/shared/cx.js.map +1 -0
- package/dist/shared/dates.d.ts +15 -0
- package/dist/shared/dates.d.ts.map +1 -0
- package/dist/shared/dates.js +49 -0
- package/dist/shared/dates.js.map +1 -0
- package/dist/shared/entry.d.ts +23 -0
- package/dist/shared/entry.d.ts.map +1 -0
- package/dist/shared/entry.js +45 -0
- package/dist/shared/entry.js.map +1 -0
- package/dist/shared/messages.d.ts +2 -0
- package/dist/shared/messages.d.ts.map +1 -0
- package/dist/shared/messages.js +1 -0
- package/dist/shared/relation.d.ts +37 -0
- package/dist/shared/relation.d.ts.map +1 -0
- package/dist/shared/relation.js +49 -0
- package/dist/shared/relation.js.map +1 -0
- package/dist/shared/types.d.ts +50 -0
- package/dist/shared/types.d.ts.map +1 -0
- package/dist/slug/SlugField.d.ts +24 -0
- package/dist/slug/SlugField.d.ts.map +1 -0
- package/dist/slug/SlugField.js +216 -0
- package/dist/slug/SlugField.js.map +1 -0
- package/dist/slug/index.d.ts +2 -0
- package/dist/slug/index.d.ts.map +1 -0
- package/dist/slug/index.js +1 -0
- package/dist/text/TextField.d.ts +24 -0
- package/dist/text/TextField.d.ts.map +1 -0
- package/dist/text/TextField.js +179 -0
- package/dist/text/TextField.js.map +1 -0
- package/dist/text/index.d.ts +2 -0
- package/dist/text/index.d.ts.map +1 -0
- package/dist/text/index.js +1 -0
- package/dist/textarea/TextAreaField.d.ts +14 -0
- package/dist/textarea/TextAreaField.d.ts.map +1 -0
- package/dist/textarea/TextAreaField.js +126 -0
- package/dist/textarea/TextAreaField.js.map +1 -0
- package/dist/textarea/index.d.ts +2 -0
- package/dist/textarea/index.d.ts.map +1 -0
- package/dist/textarea/index.js +1 -0
- package/dist/time/TimeField.d.ts +13 -0
- package/dist/time/TimeField.d.ts.map +1 -0
- package/dist/time/TimeField.js +49 -0
- package/dist/time/TimeField.js.map +1 -0
- package/dist/time/index.d.ts +2 -0
- package/dist/time/index.d.ts.map +1 -0
- package/dist/time/index.js +1 -0
- package/dist/url/UrlField.css +11 -0
- package/dist/url/UrlField.d.ts +16 -0
- package/dist/url/UrlField.d.ts.map +1 -0
- package/dist/url/UrlField.js +94 -0
- package/dist/url/UrlField.js.map +1 -0
- package/dist/url/UrlField.module.js +8 -0
- package/dist/url/UrlField.module.js.map +1 -0
- package/dist/url/index.d.ts +2 -0
- package/dist/url/index.d.ts.map +1 -0
- package/dist/url/index.js +1 -0
- package/package.json +108 -79
- package/assets/css/styles.css +0 -14
package/README.md
ADDED
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
# @panneau/fields
|
|
2
|
+
|
|
3
|
+
Controlled field components for the protocol's built-in field types, built on [`@panneau/ui`](../ui). They work without a definition, a router or a network: a product can use them directly in its own screens.
|
|
4
|
+
|
|
5
|
+
```bash
|
|
6
|
+
npm install @panneau/fields@^5.0.0-alpha.0 @panneau/ui@^5.0.0-alpha.0 react-aria-components react-intl
|
|
7
|
+
```
|
|
8
|
+
|
|
9
|
+
```tsx
|
|
10
|
+
import { TextField } from '@panneau/fields/text';
|
|
11
|
+
import { PanneauRoot } from '@panneau/ui';
|
|
12
|
+
|
|
13
|
+
<PanneauRoot>
|
|
14
|
+
<TextField label="Title" value={title} onChange={setTitle} errors={errors.title} required />
|
|
15
|
+
</PanneauRoot>;
|
|
16
|
+
```
|
|
17
|
+
|
|
18
|
+
## Fields
|
|
19
|
+
|
|
20
|
+
Every field takes `value`, `onChange`, `onBlur`, `errors`, `disabled`, `readOnly`, `required`, `label` and `description`, plus `className` and `xxxClassName` props for its inner elements. Fields keep no value of their own, and an empty value is `null`.
|
|
21
|
+
|
|
22
|
+
| Import | Components | Value |
|
|
23
|
+
| --------------------------- | -------------------------------------------- | ---------------------------------------------- |
|
|
24
|
+
| `@panneau/fields/text` | `TextField` | `string` |
|
|
25
|
+
| `@panneau/fields/textarea` | `TextAreaField` | `string` |
|
|
26
|
+
| `@panneau/fields/number` | `NumberField` | `number` |
|
|
27
|
+
| `@panneau/fields/boolean` | `BooleanField` (checkbox, switch) | `boolean` |
|
|
28
|
+
| `@panneau/fields/date` | `DateField` | `'2026-10-15'` |
|
|
29
|
+
| `@panneau/fields/datetime` | `DateTimeField` | `'2026-10-15T13:30:00Z'`, or without an offset |
|
|
30
|
+
| `@panneau/fields/time` | `TimeField` | `'09:30'` |
|
|
31
|
+
| `@panneau/fields/select` | `SelectField` (dropdown, radios, checkboxes) | an option's value, or a list with `multiple` |
|
|
32
|
+
| `@panneau/fields/email` | `EmailField` | `string` |
|
|
33
|
+
| `@panneau/fields/url` | `UrlField` | `string`, with `https://` added on blur |
|
|
34
|
+
| `@panneau/fields/color` | `ColorField` | `'#1d4ed8'` |
|
|
35
|
+
| `@panneau/fields/slug` | `SlugField`, `slugify()` | `string`, following a `source` until edited |
|
|
36
|
+
| `@panneau/fields/localized` | `LocalizedField` | `{ fr: …, en: … }` |
|
|
37
|
+
| `@panneau/fields/group` | `GroupField` | an object |
|
|
38
|
+
| `@panneau/fields/repeater` | `RepeaterField` (items or typed blocks) | a list of objects; blocks have a `type` |
|
|
39
|
+
| `@panneau/fields/relation` | `RelationField`, `createRelationSource()` | `{ id, label }`, or a list with `multiple` |
|
|
40
|
+
| `@panneau/fields/locales` | `en`, `fr` | deprecated: use `@panneau/intl` |
|
|
41
|
+
|
|
42
|
+
## From a definition
|
|
43
|
+
|
|
44
|
+
Each subpath also exports the **registry entry** of its type (`TextFieldEntry`…): a component that renders a protocol `Field`. `@panneau/fields` exports them all as `builtInFields`, and as `fieldsPlugin` for `@panneau/core`. `DefinitionField` uses them without a provider; `FieldsProvider` adds or overrides entries.
|
|
45
|
+
|
|
46
|
+
```tsx
|
|
47
|
+
import {
|
|
48
|
+
DefinitionField,
|
|
49
|
+
FieldsProvider,
|
|
50
|
+
builtInFields,
|
|
51
|
+
createRelationSource,
|
|
52
|
+
} from '@panneau/fields';
|
|
53
|
+
|
|
54
|
+
<FieldsProvider
|
|
55
|
+
components={builtInFields}
|
|
56
|
+
locales={['fr', 'en']}
|
|
57
|
+
relationSource={createRelationSource(adapter, { definition })}
|
|
58
|
+
>
|
|
59
|
+
<DefinitionField field={field} path={field.name} value={value} onChange={setValue} />
|
|
60
|
+
</FieldsProvider>;
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
- **Localized fields** (`localized: true`) render the field of their type for each locale of the provider, at `title.fr`, `title.en`.
|
|
64
|
+
- **Groups and repeaters** render their nested fields with `NestedField`, at paths like `blocks.2.body`. A `binding` in `FieldsProvider` can bind every nested field to a store by path: `@panneau/forms` binds them to its form state. Without one, the group or repeater sets its whole value.
|
|
65
|
+
- **Relations** search a `RelationSource`. `createRelationSource()` makes one from any adapter with a `list()` method, such as the `DataAdapter` of `@panneau/data`. Labels come from the resource's `itemTitle`. Without a source, a relation field shows its references, read-only.
|
|
66
|
+
- **Plugin slot:** a type without an entry, such as `richtext` and `media` until Phase 2, renders a placeholder that names it. A plugin that provides the type replaces it.
|
|
67
|
+
|
|
68
|
+
## Messages
|
|
69
|
+
|
|
70
|
+
Strings go through react-intl, with English defaults. Add the messages of every Panneau package to the app's with `withPanneauMessages()` from [`@panneau/intl`](../intl), or use `fieldsPlugin`, which carries the French messages of every package (`ui`, `fields` and `forms`).
|
|
71
|
+
|
|
72
|
+
The package layout, scripts and API reports are explained in [`docs/packages.md`](../../docs/packages.md).
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { FieldEntryProps, FieldProps } from '../shared/types';
|
|
2
|
+
export interface BooleanFieldProps extends Omit<FieldProps<boolean>, 'labelClassName'> {
|
|
3
|
+
/** `checkbox` (default) for a choice saved with the form, `switch` for an on and off setting. */
|
|
4
|
+
widget?: 'checkbox' | 'switch';
|
|
5
|
+
controlClassName?: string;
|
|
6
|
+
}
|
|
7
|
+
/** A yes or no value, as a checkbox or a switch with its label. An empty value is `false`. */
|
|
8
|
+
export declare function BooleanField({ value, onChange, label, widget, disabled, readOnly, required, controlClassName, ...props }: BooleanFieldProps): import("react").JSX.Element;
|
|
9
|
+
/** The `boolean` type: setting `widget` (`checkbox` or `switch`). */
|
|
10
|
+
export declare function BooleanFieldEntry(props: FieldEntryProps): import("react").JSX.Element;
|
|
11
|
+
//# sourceMappingURL=BooleanField.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BooleanField.d.ts","sourceRoot":"","sources":["../../src/boolean/BooleanField.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAEnE,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAClF,iGAAiG;IACjG,MAAM,CAAC,EAAE,UAAU,GAAG,QAAQ,CAAC;IAC/B,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,8FAA8F;AAC9F,wBAAgB,YAAY,CAAC,EACzB,KAAK,EACL,QAAQ,EACR,KAAK,EACL,MAAmB,EACnB,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,gBAAgB,EAChB,GAAG,KAAK,EACX,EAAE,iBAAiB,+BAenB;AAED,qEAAqE;AACrE,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,eAAe,+BAUvD"}
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
import { getFieldProps, getSetting, isString } from "../shared/entry.js";
|
|
2
|
+
import { c } from "react/compiler-runtime";
|
|
3
|
+
import { Checkbox, Switch } from "@panneau/ui";
|
|
4
|
+
import { jsx } from "react/jsx-runtime";
|
|
5
|
+
//#region src/boolean/BooleanField.tsx
|
|
6
|
+
/** A yes or no value, as a checkbox or a switch with its label. An empty value is `false`. */
|
|
7
|
+
function BooleanField({ value, onChange, label, widget = "checkbox", disabled, readOnly, required, controlClassName, ...props }) {
|
|
8
|
+
const shared = {
|
|
9
|
+
...props,
|
|
10
|
+
isSelected: value === true,
|
|
11
|
+
onChange: (next) => onChange?.(next),
|
|
12
|
+
isDisabled: disabled,
|
|
13
|
+
isReadOnly: readOnly,
|
|
14
|
+
isRequired: required,
|
|
15
|
+
children: label
|
|
16
|
+
};
|
|
17
|
+
return widget === "switch" ? /* @__PURE__ */ jsx(Switch, {
|
|
18
|
+
...shared,
|
|
19
|
+
switchClassName: controlClassName
|
|
20
|
+
}) : /* @__PURE__ */ jsx(Checkbox, {
|
|
21
|
+
...shared,
|
|
22
|
+
checkboxClassName: controlClassName
|
|
23
|
+
});
|
|
24
|
+
}
|
|
25
|
+
/** The `boolean` type: setting `widget` (`checkbox` or `switch`). */
|
|
26
|
+
function BooleanFieldEntry(props) {
|
|
27
|
+
const $ = c(11);
|
|
28
|
+
let t0;
|
|
29
|
+
if ($[0] !== props.field) {
|
|
30
|
+
t0 = getSetting(props.field, "widget", isString);
|
|
31
|
+
$[0] = props.field;
|
|
32
|
+
$[1] = t0;
|
|
33
|
+
} else t0 = $[1];
|
|
34
|
+
const widget = t0;
|
|
35
|
+
let t1;
|
|
36
|
+
if ($[2] !== props) {
|
|
37
|
+
t1 = getFieldProps(props);
|
|
38
|
+
$[2] = props;
|
|
39
|
+
$[3] = t1;
|
|
40
|
+
} else t1 = $[3];
|
|
41
|
+
const t2 = props.value === true;
|
|
42
|
+
let t3;
|
|
43
|
+
if ($[4] !== widget) {
|
|
44
|
+
t3 = widget === "switch" || widget === "checkbox" ? { widget } : {};
|
|
45
|
+
$[4] = widget;
|
|
46
|
+
$[5] = t3;
|
|
47
|
+
} else t3 = $[5];
|
|
48
|
+
let t4;
|
|
49
|
+
if ($[6] !== props.onChange || $[7] !== t1 || $[8] !== t2 || $[9] !== t3) {
|
|
50
|
+
t4 = /* @__PURE__ */ jsx(BooleanField, {
|
|
51
|
+
...t1,
|
|
52
|
+
value: t2,
|
|
53
|
+
onChange: props.onChange,
|
|
54
|
+
...t3
|
|
55
|
+
});
|
|
56
|
+
$[6] = props.onChange;
|
|
57
|
+
$[7] = t1;
|
|
58
|
+
$[8] = t2;
|
|
59
|
+
$[9] = t3;
|
|
60
|
+
$[10] = t4;
|
|
61
|
+
} else t4 = $[10];
|
|
62
|
+
return t4;
|
|
63
|
+
}
|
|
64
|
+
//#endregion
|
|
65
|
+
export { BooleanField, BooleanFieldEntry };
|
|
66
|
+
|
|
67
|
+
//# sourceMappingURL=BooleanField.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BooleanField.js","names":["_c"],"sources":["../../src/boolean/BooleanField.tsx"],"sourcesContent":["import { Checkbox, Switch } from '@panneau/ui';\n\nimport { getFieldProps, getSetting, isString } from '../shared/entry';\nimport type { FieldEntryProps, FieldProps } from '../shared/types';\n\nexport interface BooleanFieldProps extends Omit<FieldProps<boolean>, 'labelClassName'> {\n /** `checkbox` (default) for a choice saved with the form, `switch` for an on and off setting. */\n widget?: 'checkbox' | 'switch';\n controlClassName?: string;\n}\n\n/** A yes or no value, as a checkbox or a switch with its label. An empty value is `false`. */\nexport function BooleanField({\n value,\n onChange,\n label,\n widget = 'checkbox',\n disabled,\n readOnly,\n required,\n controlClassName,\n ...props\n}: BooleanFieldProps) {\n const shared = {\n ...props,\n isSelected: value === true,\n onChange: (next: boolean) => onChange?.(next),\n isDisabled: disabled,\n isReadOnly: readOnly,\n isRequired: required,\n children: label,\n };\n return widget === 'switch' ? (\n <Switch {...shared} switchClassName={controlClassName} />\n ) : (\n <Checkbox {...shared} checkboxClassName={controlClassName} />\n );\n}\n\n/** The `boolean` type: setting `widget` (`checkbox` or `switch`). */\nexport function BooleanFieldEntry(props: FieldEntryProps) {\n const widget = getSetting(props.field, 'widget', isString);\n return (\n <BooleanField\n {...getFieldProps(props)}\n value={props.value === true}\n onChange={props.onChange}\n {...(widget === 'switch' || widget === 'checkbox' ? { widget } : {})}\n />\n );\n}\n"],"mappings":";;;;;;AAYA,SAAgB,aAAa,EACzB,OACA,UACA,OACA,SAAS,YACT,UACA,UACA,UACA,kBACA,GAAG,SACe;CAClB,MAAM,SAAS;EACX,GAAG;EACH,YAAY,UAAU;EACtB,WAAW,SAAkB,WAAW,IAAI;EAC5C,YAAY;EACZ,YAAY;EACZ,YAAY;EACZ,UAAU;CACd;CACA,OAAO,WAAW,WACd,oBAAC,QAAD;EAAQ,GAAI;EAAQ,iBAAiB;CAAiB,CAAA,IAEtD,oBAAC,UAAD;EAAU,GAAI;EAAQ,mBAAmB;CAAiB,CAAA;AAElE;;AAGA,SAAO,kBAAA,OAAA;CAAA,MAAA,IAAAA,EAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,MAAA,OAAA;EACY,KAAA,WAAW,MAAK,OAAQ,UAAU,QAAQ;EAAC,EAAA,KAAA,MAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAA1D,MAAA,SAAe;CAA4C,IAAA;CAAA,IAAA,EAAA,OAAA,OAAA;EAG/C,KAAA,cAAc,KAAK;EAAC,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CACjB,MAAA,KAAA,MAAK,UAAW;CAAI,IAAA;CAAA,IAAA,EAAA,OAAA,QAAA;EAEtB,KAAA,WAAW,YAAY,WAAW,aAAlC,EAAA,OAA6D,IAA7D,CAA6D;EAAC,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,MAAA,YAAA,EAAA,OAAA,MAAA,EAAA,OAAA,MAAA,EAAA,OAAA,IAAA;EAJvE,KAAA,oBAAC,cAAD;GAAa,GACL;GACG,OAAA;GACG,UAAA,MAAK;GAAS,GACnB;EAA8D,CAAA;EACrE,EAAA,KAAA,MAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,MAAA;CAAA,OAAA,KAAA,EAAA;CAAA,OALF;AAKE"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/boolean/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,KAAK,iBAAiB,EAAE,MAAM,gBAAgB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { BooleanField, BooleanFieldEntry } from "./BooleanField.js";
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
.panneau-swatch-J24Ak3 {
|
|
2
|
+
position: relative;
|
|
3
|
+
display: inline-flex;
|
|
4
|
+
width: 1.5rem;
|
|
5
|
+
height: 1.5rem;
|
|
6
|
+
overflow: hidden;
|
|
7
|
+
border: var(--panneau-border-width) solid var(--panneau-color-border-control);
|
|
8
|
+
border-radius: var(--panneau-radius-sm);
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
.panneau-swatch-J24Ak3:focus-within {
|
|
12
|
+
outline: var(--panneau-focus-width) solid var(--panneau-color-focus);
|
|
13
|
+
outline-offset: 2px;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.panneau-picker-b7gdnM {
|
|
17
|
+
position: absolute;
|
|
18
|
+
inset: -0.5rem;
|
|
19
|
+
width: calc(100% + 1rem);
|
|
20
|
+
height: calc(100% + 1rem);
|
|
21
|
+
padding: 0;
|
|
22
|
+
cursor: pointer;
|
|
23
|
+
background: none;
|
|
24
|
+
border: 0;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.panneau-picker-b7gdnM:disabled {
|
|
28
|
+
cursor: not-allowed;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.panneau-input-1t8LLx {
|
|
32
|
+
font-family: var(--panneau-font-family-mono);
|
|
33
|
+
}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import type { FieldEntryProps } from '../shared/types';
|
|
2
|
+
import { type TextFieldProps } from '../text/TextField';
|
|
3
|
+
export type ColorFieldProps = Omit<TextFieldProps, 'type' | 'prefix' | 'maxLength'>;
|
|
4
|
+
/**
|
|
5
|
+
* Normalizes a hexadecimal color: `#` prefix, lowercase, and 3 digits expanded to 6. Returns the
|
|
6
|
+
* text as is when it isn't a hexadecimal color.
|
|
7
|
+
*/
|
|
8
|
+
export declare function normalizeColor(value: string): string;
|
|
9
|
+
/**
|
|
10
|
+
* A color as a hexadecimal value (`#1d4ed8`): typed, or picked with the browser's color picker.
|
|
11
|
+
* The value is normalized on blur.
|
|
12
|
+
*/
|
|
13
|
+
export declare function ColorField({ value, onChange, onBlur, disabled, readOnly, inputClassName, ...props }: ColorFieldProps): import("react").JSX.Element;
|
|
14
|
+
/** The `color` type. */
|
|
15
|
+
export declare function ColorFieldEntry(props: FieldEntryProps): import("react").JSX.Element;
|
|
16
|
+
//# sourceMappingURL=ColorField.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ColorField.d.ts","sourceRoot":"","sources":["../../src/color/ColorField.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AACvD,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAGnE,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,cAAc,EAAE,MAAM,GAAG,QAAQ,GAAG,WAAW,CAAC,CAAC;AAEpF;;;GAGG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAUpD;AAED;;;GAGG;AACH,wBAAgB,UAAU,CAAC,EACvB,KAAK,EACL,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,cAAc,EACd,GAAG,KAAK,EACX,EAAE,eAAe,+BAsCjB;AAED,wBAAwB;AACxB,wBAAgB,eAAe,CAAC,KAAK,EAAE,eAAe,+BAQrD"}
|
|
@@ -0,0 +1,187 @@
|
|
|
1
|
+
import { cx } from "../shared/cx.js";
|
|
2
|
+
import { getFieldProps, isString } from "../shared/entry.js";
|
|
3
|
+
import { messages } from "../shared/messages.js";
|
|
4
|
+
import { TextField } from "../text/TextField.js";
|
|
5
|
+
import ColorField_module_default from "./ColorField.module.js";
|
|
6
|
+
import { c } from "react/compiler-runtime";
|
|
7
|
+
import { usePanneauIntl } from "@panneau/ui";
|
|
8
|
+
import { jsx } from "react/jsx-runtime";
|
|
9
|
+
//#region src/color/ColorField.tsx
|
|
10
|
+
/**
|
|
11
|
+
* Normalizes a hexadecimal color: `#` prefix, lowercase, and 3 digits expanded to 6. Returns the
|
|
12
|
+
* text as is when it isn't a hexadecimal color.
|
|
13
|
+
*/
|
|
14
|
+
function normalizeColor(value) {
|
|
15
|
+
const trimmed = value.trim().toLowerCase();
|
|
16
|
+
const digits = trimmed.replace(/^#/, "");
|
|
17
|
+
if (/^[0-9a-f]{3}$/.test(digits)) return `#${[...digits].map((digit) => digit + digit).join("")}`;
|
|
18
|
+
if (/^[0-9a-f]{6}$/.test(digits) || /^[0-9a-f]{8}$/.test(digits)) return `#${digits}`;
|
|
19
|
+
return trimmed;
|
|
20
|
+
}
|
|
21
|
+
/**
|
|
22
|
+
* A color as a hexadecimal value (`#1d4ed8`): typed, or picked with the browser's color picker.
|
|
23
|
+
* The value is normalized on blur.
|
|
24
|
+
*/
|
|
25
|
+
function ColorField(t0) {
|
|
26
|
+
const $ = c(42);
|
|
27
|
+
let disabled;
|
|
28
|
+
let inputClassName;
|
|
29
|
+
let onBlur;
|
|
30
|
+
let onChange;
|
|
31
|
+
let props;
|
|
32
|
+
let readOnly;
|
|
33
|
+
let value;
|
|
34
|
+
if ($[0] !== t0) {
|
|
35
|
+
({value, onChange, onBlur, disabled, readOnly, inputClassName, ...props} = t0);
|
|
36
|
+
$[0] = t0;
|
|
37
|
+
$[1] = disabled;
|
|
38
|
+
$[2] = inputClassName;
|
|
39
|
+
$[3] = onBlur;
|
|
40
|
+
$[4] = onChange;
|
|
41
|
+
$[5] = props;
|
|
42
|
+
$[6] = readOnly;
|
|
43
|
+
$[7] = value;
|
|
44
|
+
} else {
|
|
45
|
+
disabled = $[1];
|
|
46
|
+
inputClassName = $[2];
|
|
47
|
+
onBlur = $[3];
|
|
48
|
+
onChange = $[4];
|
|
49
|
+
props = $[5];
|
|
50
|
+
readOnly = $[6];
|
|
51
|
+
value = $[7];
|
|
52
|
+
}
|
|
53
|
+
const intl = usePanneauIntl();
|
|
54
|
+
let t1;
|
|
55
|
+
if ($[8] !== value) {
|
|
56
|
+
t1 = value !== null && value !== void 0 && /^#[0-9a-f]{6}$/i.test(value);
|
|
57
|
+
$[8] = value;
|
|
58
|
+
$[9] = t1;
|
|
59
|
+
} else t1 = $[9];
|
|
60
|
+
const valid = t1;
|
|
61
|
+
let t2;
|
|
62
|
+
if ($[10] !== inputClassName) {
|
|
63
|
+
t2 = cx(ColorField_module_default.input, inputClassName);
|
|
64
|
+
$[10] = inputClassName;
|
|
65
|
+
$[11] = t2;
|
|
66
|
+
} else t2 = $[11];
|
|
67
|
+
let t3;
|
|
68
|
+
if ($[12] !== onBlur || $[13] !== onChange || $[14] !== value) {
|
|
69
|
+
t3 = () => {
|
|
70
|
+
if (value !== null && value !== void 0) {
|
|
71
|
+
const next = normalizeColor(value);
|
|
72
|
+
if (next !== value) onChange?.(next === "" ? null : next);
|
|
73
|
+
}
|
|
74
|
+
onBlur?.();
|
|
75
|
+
};
|
|
76
|
+
$[12] = onBlur;
|
|
77
|
+
$[13] = onChange;
|
|
78
|
+
$[14] = value;
|
|
79
|
+
$[15] = t3;
|
|
80
|
+
} else t3 = $[15];
|
|
81
|
+
const t4 = valid ? value : "transparent";
|
|
82
|
+
let t5;
|
|
83
|
+
if ($[16] !== t4) {
|
|
84
|
+
t5 = { backgroundColor: t4 };
|
|
85
|
+
$[16] = t4;
|
|
86
|
+
$[17] = t5;
|
|
87
|
+
} else t5 = $[17];
|
|
88
|
+
let t6;
|
|
89
|
+
if ($[18] !== valid || $[19] !== value) {
|
|
90
|
+
t6 = valid ? value.toLowerCase() : "#000000";
|
|
91
|
+
$[18] = valid;
|
|
92
|
+
$[19] = value;
|
|
93
|
+
$[20] = t6;
|
|
94
|
+
} else t6 = $[20];
|
|
95
|
+
let t7;
|
|
96
|
+
if ($[21] !== onChange) {
|
|
97
|
+
t7 = (event) => onChange?.(event.target.value);
|
|
98
|
+
$[21] = onChange;
|
|
99
|
+
$[22] = t7;
|
|
100
|
+
} else t7 = $[22];
|
|
101
|
+
const t8 = disabled === true || readOnly === true;
|
|
102
|
+
let t9;
|
|
103
|
+
if ($[23] !== intl) {
|
|
104
|
+
t9 = intl.formatMessage(messages.pickColor);
|
|
105
|
+
$[23] = intl;
|
|
106
|
+
$[24] = t9;
|
|
107
|
+
} else t9 = $[24];
|
|
108
|
+
let t10;
|
|
109
|
+
if ($[25] !== t6 || $[26] !== t7 || $[27] !== t8 || $[28] !== t9) {
|
|
110
|
+
t10 = /* @__PURE__ */ jsx("input", {
|
|
111
|
+
type: "color",
|
|
112
|
+
className: ColorField_module_default.picker,
|
|
113
|
+
value: t6,
|
|
114
|
+
onChange: t7,
|
|
115
|
+
disabled: t8,
|
|
116
|
+
"aria-label": t9
|
|
117
|
+
});
|
|
118
|
+
$[25] = t6;
|
|
119
|
+
$[26] = t7;
|
|
120
|
+
$[27] = t8;
|
|
121
|
+
$[28] = t9;
|
|
122
|
+
$[29] = t10;
|
|
123
|
+
} else t10 = $[29];
|
|
124
|
+
let t11;
|
|
125
|
+
if ($[30] !== t10 || $[31] !== t5) {
|
|
126
|
+
t11 = /* @__PURE__ */ jsx("span", {
|
|
127
|
+
className: ColorField_module_default.swatch,
|
|
128
|
+
style: t5,
|
|
129
|
+
children: t10
|
|
130
|
+
});
|
|
131
|
+
$[30] = t10;
|
|
132
|
+
$[31] = t5;
|
|
133
|
+
$[32] = t11;
|
|
134
|
+
} else t11 = $[32];
|
|
135
|
+
let t12;
|
|
136
|
+
if ($[33] !== disabled || $[34] !== onChange || $[35] !== props || $[36] !== readOnly || $[37] !== t11 || $[38] !== t2 || $[39] !== t3 || $[40] !== value) {
|
|
137
|
+
t12 = /* @__PURE__ */ jsx(TextField, {
|
|
138
|
+
autoComplete: "off",
|
|
139
|
+
...props,
|
|
140
|
+
value,
|
|
141
|
+
onChange,
|
|
142
|
+
disabled,
|
|
143
|
+
readOnly,
|
|
144
|
+
inputClassName: t2,
|
|
145
|
+
onBlur: t3,
|
|
146
|
+
prefix: t11
|
|
147
|
+
});
|
|
148
|
+
$[33] = disabled;
|
|
149
|
+
$[34] = onChange;
|
|
150
|
+
$[35] = props;
|
|
151
|
+
$[36] = readOnly;
|
|
152
|
+
$[37] = t11;
|
|
153
|
+
$[38] = t2;
|
|
154
|
+
$[39] = t3;
|
|
155
|
+
$[40] = value;
|
|
156
|
+
$[41] = t12;
|
|
157
|
+
} else t12 = $[41];
|
|
158
|
+
return t12;
|
|
159
|
+
}
|
|
160
|
+
/** The `color` type. */
|
|
161
|
+
function ColorFieldEntry(props) {
|
|
162
|
+
const $ = c(6);
|
|
163
|
+
let t0;
|
|
164
|
+
if ($[0] !== props) {
|
|
165
|
+
t0 = getFieldProps(props);
|
|
166
|
+
$[0] = props;
|
|
167
|
+
$[1] = t0;
|
|
168
|
+
} else t0 = $[1];
|
|
169
|
+
const t1 = isString(props.value) ? props.value : null;
|
|
170
|
+
let t2;
|
|
171
|
+
if ($[2] !== props.onChange || $[3] !== t0 || $[4] !== t1) {
|
|
172
|
+
t2 = /* @__PURE__ */ jsx(ColorField, {
|
|
173
|
+
...t0,
|
|
174
|
+
value: t1,
|
|
175
|
+
onChange: props.onChange
|
|
176
|
+
});
|
|
177
|
+
$[2] = props.onChange;
|
|
178
|
+
$[3] = t0;
|
|
179
|
+
$[4] = t1;
|
|
180
|
+
$[5] = t2;
|
|
181
|
+
} else t2 = $[5];
|
|
182
|
+
return t2;
|
|
183
|
+
}
|
|
184
|
+
//#endregion
|
|
185
|
+
export { ColorField, ColorFieldEntry, normalizeColor };
|
|
186
|
+
|
|
187
|
+
//# sourceMappingURL=ColorField.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ColorField.js","names":["value","onChange","disabled","readOnly","_c","styles"],"sources":["../../src/color/ColorField.tsx"],"sourcesContent":["import { usePanneauIntl } from '@panneau/ui';\n\nimport { cx } from '../shared/cx';\nimport { getFieldProps, isString } from '../shared/entry';\nimport { messages } from '../shared/messages';\nimport type { FieldEntryProps } from '../shared/types';\nimport { TextField, type TextFieldProps } from '../text/TextField';\nimport styles from './ColorField.module.css';\n\nexport type ColorFieldProps = Omit<TextFieldProps, 'type' | 'prefix' | 'maxLength'>;\n\n/**\n * Normalizes a hexadecimal color: `#` prefix, lowercase, and 3 digits expanded to 6. Returns the\n * text as is when it isn't a hexadecimal color.\n */\nexport function normalizeColor(value: string): string {\n const trimmed = value.trim().toLowerCase();\n const digits = trimmed.replace(/^#/, '');\n if (/^[0-9a-f]{3}$/.test(digits)) {\n return `#${[...digits].map((digit) => digit + digit).join('')}`;\n }\n if (/^[0-9a-f]{6}$/.test(digits) || /^[0-9a-f]{8}$/.test(digits)) {\n return `#${digits}`;\n }\n return trimmed;\n}\n\n/**\n * A color as a hexadecimal value (`#1d4ed8`): typed, or picked with the browser's color picker.\n * The value is normalized on blur.\n */\nexport function ColorField({\n value,\n onChange,\n onBlur,\n disabled,\n readOnly,\n inputClassName,\n ...props\n}: ColorFieldProps) {\n const intl = usePanneauIntl();\n const valid = value !== null && value !== undefined && /^#[0-9a-f]{6}$/i.test(value);\n return (\n <TextField\n autoComplete=\"off\"\n {...props}\n value={value}\n onChange={onChange}\n disabled={disabled}\n readOnly={readOnly}\n inputClassName={cx(styles.input, inputClassName)}\n onBlur={() => {\n if (value !== null && value !== undefined) {\n const next = normalizeColor(value);\n if (next !== value) {\n onChange?.(next === '' ? null : next);\n }\n }\n onBlur?.();\n }}\n prefix={\n <span\n className={styles.swatch}\n style={{ backgroundColor: valid ? value : 'transparent' }}\n >\n <input\n type=\"color\"\n className={styles.picker}\n value={valid ? value.toLowerCase() : '#000000'}\n onChange={(event) => onChange?.(event.target.value)}\n disabled={disabled === true || readOnly === true}\n aria-label={intl.formatMessage(messages.pickColor)}\n />\n </span>\n }\n />\n );\n}\n\n/** The `color` type. */\nexport function ColorFieldEntry(props: FieldEntryProps) {\n return (\n <ColorField\n {...getFieldProps(props)}\n value={isString(props.value) ? props.value : null}\n onChange={props.onChange}\n />\n );\n}\n"],"mappings":"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"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import "./ColorField.css";
|
|
2
|
+
//#region src/color/ColorField.module.css
|
|
3
|
+
var swatch = "panneau-swatch-J24Ak3";
|
|
4
|
+
var picker = "panneau-picker-b7gdnM";
|
|
5
|
+
var input = "panneau-input-1t8LLx";
|
|
6
|
+
var ColorField_module_default = {
|
|
7
|
+
swatch,
|
|
8
|
+
picker,
|
|
9
|
+
input
|
|
10
|
+
};
|
|
11
|
+
//#endregion
|
|
12
|
+
export { ColorField_module_default as default, input, picker, swatch };
|
|
13
|
+
|
|
14
|
+
//# sourceMappingURL=ColorField.module.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ColorField.module.js","names":[],"sources":["../../src/color/ColorField.module.css"],"sourcesContent":[".swatch {\n position: relative;\n display: inline-flex;\n width: 1.5rem;\n height: 1.5rem;\n overflow: hidden;\n border: var(--panneau-border-width) solid var(--panneau-color-border-control);\n border-radius: var(--panneau-radius-sm);\n}\n\n.swatch:focus-within {\n outline: var(--panneau-focus-width) solid var(--panneau-color-focus);\n outline-offset: 2px;\n}\n\n.picker {\n position: absolute;\n inset: -0.5rem;\n width: calc(100% + 1rem);\n height: calc(100% + 1rem);\n padding: 0;\n cursor: pointer;\n background: none;\n border: 0;\n}\n\n.picker:disabled {\n cursor: not-allowed;\n}\n\n.input {\n font-family: var(--panneau-font-family-mono);\n}\n"],"mappings":""}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/color/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,KAAK,eAAe,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { ColorField, ColorFieldEntry, normalizeColor } from "./ColorField.js";
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import type { FieldEntryProps, FieldProps } from '../shared/types';
|
|
2
|
+
export interface DateFieldProps extends FieldProps<string> {
|
|
3
|
+
/** Earliest date (`2026-01-01`). */
|
|
4
|
+
min?: string;
|
|
5
|
+
/** Latest date. */
|
|
6
|
+
max?: string;
|
|
7
|
+
controlClassName?: string;
|
|
8
|
+
}
|
|
9
|
+
/**
|
|
10
|
+
* A date as an ISO string (`2026-10-15`), typed in the order of the locale or picked in a
|
|
11
|
+
* calendar.
|
|
12
|
+
*/
|
|
13
|
+
export declare function DateField({ value, onChange, min, max, disabled, readOnly, required, ...props }: DateFieldProps): import("react").JSX.Element;
|
|
14
|
+
/** The `date` type. */
|
|
15
|
+
export declare function DateFieldEntry(props: FieldEntryProps): import("react").JSX.Element;
|
|
16
|
+
//# sourceMappingURL=DateField.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DateField.d.ts","sourceRoot":"","sources":["../../src/date/DateField.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAEnE,MAAM,WAAW,cAAe,SAAQ,UAAU,CAAC,MAAM,CAAC;IACtD,oCAAoC;IACpC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,mBAAmB;IACnB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED;;;GAGG;AACH,wBAAgB,SAAS,CAAC,EACtB,KAAK,EACL,QAAQ,EACR,GAAG,EACH,GAAG,EACH,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,GAAG,KAAK,EACX,EAAE,cAAc,+BAgBhB;AAED,uBAAuB;AACvB,wBAAgB,cAAc,CAAC,KAAK,EAAE,eAAe,+BAQpD"}
|
|
@@ -0,0 +1,132 @@
|
|
|
1
|
+
import { getFieldProps, isString } from "../shared/entry.js";
|
|
2
|
+
import { toCalendarDate } from "../shared/dates.js";
|
|
3
|
+
import { c } from "react/compiler-runtime";
|
|
4
|
+
import { DatePicker } from "@panneau/ui";
|
|
5
|
+
import { jsx } from "react/jsx-runtime";
|
|
6
|
+
//#region src/date/DateField.tsx
|
|
7
|
+
/**
|
|
8
|
+
* A date as an ISO string (`2026-10-15`), typed in the order of the locale or picked in a
|
|
9
|
+
* calendar.
|
|
10
|
+
*/
|
|
11
|
+
function DateField(t0) {
|
|
12
|
+
const $ = c(30);
|
|
13
|
+
let disabled;
|
|
14
|
+
let max;
|
|
15
|
+
let min;
|
|
16
|
+
let onChange;
|
|
17
|
+
let props;
|
|
18
|
+
let readOnly;
|
|
19
|
+
let required;
|
|
20
|
+
let value;
|
|
21
|
+
if ($[0] !== t0) {
|
|
22
|
+
({value, onChange, min, max, disabled, readOnly, required, ...props} = t0);
|
|
23
|
+
$[0] = t0;
|
|
24
|
+
$[1] = disabled;
|
|
25
|
+
$[2] = max;
|
|
26
|
+
$[3] = min;
|
|
27
|
+
$[4] = onChange;
|
|
28
|
+
$[5] = props;
|
|
29
|
+
$[6] = readOnly;
|
|
30
|
+
$[7] = required;
|
|
31
|
+
$[8] = value;
|
|
32
|
+
} else {
|
|
33
|
+
disabled = $[1];
|
|
34
|
+
max = $[2];
|
|
35
|
+
min = $[3];
|
|
36
|
+
onChange = $[4];
|
|
37
|
+
props = $[5];
|
|
38
|
+
readOnly = $[6];
|
|
39
|
+
required = $[7];
|
|
40
|
+
value = $[8];
|
|
41
|
+
}
|
|
42
|
+
let t1;
|
|
43
|
+
if ($[9] !== min) {
|
|
44
|
+
t1 = toCalendarDate(min);
|
|
45
|
+
$[9] = min;
|
|
46
|
+
$[10] = t1;
|
|
47
|
+
} else t1 = $[10];
|
|
48
|
+
const minValue = t1;
|
|
49
|
+
let t2;
|
|
50
|
+
if ($[11] !== max) {
|
|
51
|
+
t2 = toCalendarDate(max);
|
|
52
|
+
$[11] = max;
|
|
53
|
+
$[12] = t2;
|
|
54
|
+
} else t2 = $[12];
|
|
55
|
+
const maxValue = t2;
|
|
56
|
+
let t3;
|
|
57
|
+
if ($[13] !== value) {
|
|
58
|
+
t3 = toCalendarDate(value);
|
|
59
|
+
$[13] = value;
|
|
60
|
+
$[14] = t3;
|
|
61
|
+
} else t3 = $[14];
|
|
62
|
+
let t4;
|
|
63
|
+
if ($[15] !== onChange) {
|
|
64
|
+
t4 = (date) => onChange?.(date === null ? null : date.toString().slice(0, 10));
|
|
65
|
+
$[15] = onChange;
|
|
66
|
+
$[16] = t4;
|
|
67
|
+
} else t4 = $[16];
|
|
68
|
+
let t5;
|
|
69
|
+
if ($[17] !== minValue) {
|
|
70
|
+
t5 = minValue !== null ? { minValue } : {};
|
|
71
|
+
$[17] = minValue;
|
|
72
|
+
$[18] = t5;
|
|
73
|
+
} else t5 = $[18];
|
|
74
|
+
let t6;
|
|
75
|
+
if ($[19] !== maxValue) {
|
|
76
|
+
t6 = maxValue !== null ? { maxValue } : {};
|
|
77
|
+
$[19] = maxValue;
|
|
78
|
+
$[20] = t6;
|
|
79
|
+
} else t6 = $[20];
|
|
80
|
+
let t7;
|
|
81
|
+
if ($[21] !== disabled || $[22] !== props || $[23] !== readOnly || $[24] !== required || $[25] !== t3 || $[26] !== t4 || $[27] !== t5 || $[28] !== t6) {
|
|
82
|
+
t7 = /* @__PURE__ */ jsx(DatePicker, {
|
|
83
|
+
...props,
|
|
84
|
+
granularity: "day",
|
|
85
|
+
value: t3,
|
|
86
|
+
onChange: t4,
|
|
87
|
+
...t5,
|
|
88
|
+
...t6,
|
|
89
|
+
isDisabled: disabled,
|
|
90
|
+
isReadOnly: readOnly,
|
|
91
|
+
isRequired: required
|
|
92
|
+
});
|
|
93
|
+
$[21] = disabled;
|
|
94
|
+
$[22] = props;
|
|
95
|
+
$[23] = readOnly;
|
|
96
|
+
$[24] = required;
|
|
97
|
+
$[25] = t3;
|
|
98
|
+
$[26] = t4;
|
|
99
|
+
$[27] = t5;
|
|
100
|
+
$[28] = t6;
|
|
101
|
+
$[29] = t7;
|
|
102
|
+
} else t7 = $[29];
|
|
103
|
+
return t7;
|
|
104
|
+
}
|
|
105
|
+
/** The `date` type. */
|
|
106
|
+
function DateFieldEntry(props) {
|
|
107
|
+
const $ = c(6);
|
|
108
|
+
let t0;
|
|
109
|
+
if ($[0] !== props) {
|
|
110
|
+
t0 = getFieldProps(props);
|
|
111
|
+
$[0] = props;
|
|
112
|
+
$[1] = t0;
|
|
113
|
+
} else t0 = $[1];
|
|
114
|
+
const t1 = isString(props.value) ? props.value : null;
|
|
115
|
+
let t2;
|
|
116
|
+
if ($[2] !== props.onChange || $[3] !== t0 || $[4] !== t1) {
|
|
117
|
+
t2 = /* @__PURE__ */ jsx(DateField, {
|
|
118
|
+
...t0,
|
|
119
|
+
value: t1,
|
|
120
|
+
onChange: props.onChange
|
|
121
|
+
});
|
|
122
|
+
$[2] = props.onChange;
|
|
123
|
+
$[3] = t0;
|
|
124
|
+
$[4] = t1;
|
|
125
|
+
$[5] = t2;
|
|
126
|
+
} else t2 = $[5];
|
|
127
|
+
return t2;
|
|
128
|
+
}
|
|
129
|
+
//#endregion
|
|
130
|
+
export { DateField, DateFieldEntry };
|
|
131
|
+
|
|
132
|
+
//# sourceMappingURL=DateField.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DateField.js","names":["disabled","readOnly","required","_c"],"sources":["../../src/date/DateField.tsx"],"sourcesContent":["import { DatePicker } from '@panneau/ui';\n\nimport { toCalendarDate } from '../shared/dates';\nimport { getFieldProps, isString } from '../shared/entry';\nimport type { FieldEntryProps, FieldProps } from '../shared/types';\n\nexport interface DateFieldProps extends FieldProps<string> {\n /** Earliest date (`2026-01-01`). */\n min?: string;\n /** Latest date. */\n max?: string;\n controlClassName?: string;\n}\n\n/**\n * A date as an ISO string (`2026-10-15`), typed in the order of the locale or picked in a\n * calendar.\n */\nexport function DateField({\n value,\n onChange,\n min,\n max,\n disabled,\n readOnly,\n required,\n ...props\n}: DateFieldProps) {\n const minValue = toCalendarDate(min);\n const maxValue = toCalendarDate(max);\n return (\n <DatePicker\n {...props}\n granularity=\"day\"\n value={toCalendarDate(value)}\n onChange={(date) => onChange?.(date === null ? null : date.toString().slice(0, 10))}\n {...(minValue !== null ? { minValue } : {})}\n {...(maxValue !== null ? { maxValue } : {})}\n isDisabled={disabled}\n isReadOnly={readOnly}\n isRequired={required}\n />\n );\n}\n\n/** The `date` type. */\nexport function DateFieldEntry(props: FieldEntryProps) {\n return (\n <DateField\n {...getFieldProps(props)}\n value={isString(props.value) ? props.value : null}\n onChange={props.onChange}\n />\n );\n}\n"],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/date/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,aAAa,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { DateField, DateFieldEntry } from "./DateField.js";
|