@knime/jsonforms 2.1.1 → 3.1.0

package/CHANGELOG.md

@@ -1,4 +1,59 @@
-# @knime/json-forms
+# @knime/jsonforms
+
+## 3.1.0
+
+### Minor Changes
+
+- 48da7bc: - `KdsZonedDateTimeInput`: `possibleValues` is now optional. When omitted, the component falls back to a built-in list of common timezone aliases (UTC, CET, EET, WET, MET, EST, HST, MST) followed by all IANA zone IDs from `Intl.supportedValuesOf("timeZone")`.
+  - `ZonedDateTimeControl`: when `possibleValues` is not set in the UI schema options, the timezone dropdown is now populated via the built-in fallback in `KdsZonedDateTimeInput` instead of showing an empty list.
+
+### Patch Changes
+
+- Updated dependencies [baa0c4e]
+- Updated dependencies [48da7bc]
+- Updated dependencies [7e9db61]
+  - @knime/kds-components@2.5.0
+  - @knime/kds-rich-text-editor@2.5.0
+
+## 3.0.0
+
+### Major Changes
+
+- Move `@knime/jsonforms` into knime-designsystem (KDS-907). Its KNIME Design System
+  dependencies are now local `workspace:^` packages, so the package no longer
+  depends on `@knime/components` or `@knime/styles`.
+
+  BREAKING CHANGES:
+
+  - The `singleSelectListBox` and `multiSelectListBox` renderers have been removed.
+    Consumers relying on those formats should migrate to the `Dropdown` /
+    `MultiSelectDropdown` renderers.
+  - `@vueuse/core` is now a peer dependency (it replaces the internal `lodash-es`
+    usage). Consumers must provide `@vueuse/core`; KDS consumers already do via
+    `@knime/kds-components`.
+
+### Patch Changes
+
+- b8baf16: Bump `@jsonforms/core`, `@jsonforms/vue` and `@jsonforms/vue-vanilla` from `3.4.0`
+  to `3.8.0`. No changes to the public API of `@knime/jsonforms`.
+- 53e5a7a: Bump `ajv` from `8.18.0` to `8.20.0`, which includes a security fix for prototype
+  pollution via the `format` keyword using `$data` references.
+- eece880: Remove the `uuid` dependency from `@knime/jsonforms`. Internal validation
+  registration ids are now generated with a simple per-instance counter instead of
+  `uuidv4`, since the id is only used as a key into a local record and never leaves
+  the closure.
+- db75908: Remove the unused `@jsonforms/vue-vanilla` dependency. It was never imported by
+  `@knime/jsonforms` (only declared and marked as a Rollup external).
+- Updated dependencies [83dcf9c]
+- Updated dependencies [d6c8a53]
+- Updated dependencies [98f37bd]
+- Updated dependencies
+- Updated dependencies [b5c0b76]
+- Updated dependencies [abe3709]
+- Updated dependencies [b5c0b76]
+  - @knime/kds-components@2.1.0
+  - @knime/utils@1.12.1
+  - @knime/kds-rich-text-editor@2.1.0
 
 ## 2.1.1
 

package/README.md

@@ -1,85 +1,26 @@
 # ![Image](https://www.knime.com/sites/default/files/knime_logo_github_40x40_4layers.png) KNIME JSONForms integration
 
-This repository contains the frontend components of the KNIME JSONForms integration that is based on [Vue].
-It is built as a [Vue library] and used in KNIME Analytics Platform and/or KNIME Hub.
+`@knime/jsonforms` is the KNIME [JSONForms](https://jsonforms.io/)
+integration, built on top of [`@jsonforms/vue`](https://github.com/eclipsesource/jsonforms).
+It renders a settings dialog from a JSON `schema` + `uischema` + `data` triple.
+It powers node dialogs and other schema-driven forms across our apps.
 
-## Installation
-
-To install the `@knime/jsonforms` package, you can use npm:
-
-```bash
-npm install @knime/jsonforms
-```
+The package ships a **comprehensive set of default renderers built on KNIME Design System components**
+(text, number, dropdown, combo box, radio, value switch, twinlist, date/time, rich text, and more, plus
+the standard layouts). For many forms these defaults are all you need. Consumers can also **extend the
+set with their own custom renderers** — this is how [`knime-core-ui`] adds node-dialog widgets (array
+layouts, file choosers, credentials, flow variables, …).
 
 ## Usage
 
-The vue component controlling the JSONForms instance can be imported as follows:
-
-```javascript
-import { JsonFormsDialog } from "@knime/jsonforms";
-```
-
-It requires renderers as property, which can be constructed using a variety of defaults.
-
-Those default components are divided into layouts and controls:
-
-```javascript
-import { controls, layouts } from "@jsonforms/testing";
-```
-
-Use the `toRenderers` method to construct the final list of renderers once the chosen controls/layouts are modified in the desired way. A modification might entail replacing the tester by which this renderer is used by jsonforms or wrapping a control using higher order vue components.
-
-Combined example:
-
-```vue
-<script setup lang="ts">
-import {
-  controls,
-  layouts,
-  JsonFormsDialog
-  toRenderers
-} from "@knime/jsonforms"
-
-
-const renderers = toRenderers([/**
-  Add newly constructed renderers here
-*/], [
-  controls.dropdownRenderer,
-  controls.textRenderer
-], [
-  layouts.sectionRenderer
-])
-</script>
-<template>
-  <JsonFormsDialog :data="..." ... :renderers="renderers" />
-</template>
-```
-
-### Testing
-
-Types and utility methods for testing are made available in the following way:
-
-```javascript
-import * from "@knime/jsonforms/testing"
-```
-
-## Development
+For installation, usage examples, and how to extend the package with custom renderers, see the
+**Product Features/JSONForms** page in the design-system Storybook (source: [stories/JSONForms.mdx]).
 
-### Prerequisites
+## Development in Storybook
 
-- Install [Node.js][node], see version in [package.json](package.json).
-
-Newer versions may also work, but have not been tested.
-
-### Install dependencies
-
-```sh
-pnpm install
-```
-
-and then use the following commands. For detailed explanations see [Vue CLI docs]:
-
-## Demo application with mocks
+The JSONForms mocks are showcased as Storybook stories under
+`Product Features/JSONForms` (one story per mock, in `stories/`). Run the
+design-system Storybook to browse and develop them:
 
 ```sh
 pnpm dev
@@ -108,29 +49,8 @@ Note: noisy Vue warnings are suppressed if you set the environment flag `SUPPRES
 and they are also suppressed when running with `CI=true` which is set by default in most pipeline
 environments.
 
-### Running security audit
-
-npm provides a check against known security issues of used dependencies. Run it by calling
-
-```sh
-pnpm audit
-```
-
-## Building
-
-To build the package, use the following command:
-
-```sh
-pnpm build
-```
-
-# Join the Community!
-
-- [KNIME Forum](https://forum.knime.com/)
-
-[Vue]: https://vuejs.org/
-[node]: https://knime-com.atlassian.net/wiki/spaces/SPECS/pages/905281540/Node.js+Installation
-[Vue CLI docs]: https://cli.vuejs.org/guide/
-[Vue library]: https://cli.vuejs.org/guide/build-targets.html#library
+[`@jsonforms/vue`]: https://github.com/eclipsesource/jsonforms
+[`knime-core-ui`]: https://bitbucket.org/KNIME/knime-core-ui
+[stories/JSONForms.mdx]: stories/JSONForms.mdx
 [LCOV]: https://github.com/linux-test-project/lcov
 [Clover]: http://openclover.org/

package/dist/AnyOfTwinlist-iPxS5C9Y.js

@@ -0,0 +1,24 @@
+import { i as e } from "./utils-DmZLgn8X.js";
+import { t } from "./TwinlistControlBase-300a_qUR.js";
+import { createBlock as n, defineComponent as r, mergeProps as i, openBlock as a, unref as o } from "vue";
+//#endregion
+//#region src/uiComponents/twinlist/AnyOfTwinlist.vue
+var s = /* @__PURE__ */ r({
+	__name: "AnyOfTwinlist",
+	props: {
+		control: {},
+		handleChange: { type: Function },
+		changeValue: { type: Function },
+		disabled: { type: Boolean },
+		error: { type: Boolean },
+		subText: {},
+		onRegisterValidation: { type: Function },
+		labelForId: {}
+	},
+	setup(r) {
+		let s = r.control.schema.anyOf.map(e);
+		return (e, r) => (a(), n(t, i(e.$props, { "possible-values": o(s) }), null, 16, ["possible-values"]));
+	}
+});
+//#endregion
+export { s as default };

package/dist/CheckboxControl-C99OdmDL.js

@@ -0,0 +1,41 @@
+import { t as e } from "./_plugin-vue_export-helper-B3ysoDQm.js";
+import { createElementBlock as t, createElementVNode as n, createVNode as r, defineComponent as i, openBlock as a, ref as o, renderSlot as s, unref as c } from "vue";
+import { KdsCheckbox as l } from "@knime/kds-components";
+//#region src/uiComponents/CheckboxControl.vue?vue&type=script&setup=true&lang.ts
+var u = { class: "checkbox-container" }, d = /*#__PURE__*/ e(/* @__PURE__ */ i({
+	__name: "CheckboxControl",
+	props: {
+		control: {},
+		handleChange: { type: Function },
+		changeValue: { type: Function },
+		disabled: { type: Boolean },
+		labelForId: {},
+		error: { type: Boolean },
+		subText: {},
+		onRegisterValidation: { type: Function }
+	},
+	setup(e) {
+		let i = o(!1);
+		return (o, d) => (a(), t("div", {
+			class: "checkbox-input",
+			onMouseover: d[1] ||= (e) => i.value = !0,
+			onMouseleave: d[2] ||= (e) => i.value = !1
+		}, [n("div", u, [r(c(l), {
+			class: "checkbox",
+			disabled: e.disabled,
+			"model-value": e.control.data,
+			label: e.control.label,
+			error: e.error,
+			"sub-text": e.subText,
+			"onUpdate:modelValue": d[0] ||= (t) => e.changeValue(t === !0)
+		}, null, 8, [
+			"disabled",
+			"model-value",
+			"label",
+			"error",
+			"sub-text"
+		]), s(o.$slots, "icon", {}, void 0, !0)]), s(o.$slots, "buttons", { hover: i.value }, void 0, !0)], 32));
+	}
+}), [["__scopeId", "data-v-4f590a2d"]]);
+//#endregion
+export { d as default };

package/dist/CheckboxesControl-BZhMhT9x.js

@@ -0,0 +1,47 @@
+import { i as e } from "./utils-DmZLgn8X.js";
+import { n as t } from "./usePossibleValues-Cx6iSt_X.js";
+import { computed as n, createBlock as r, createCommentVNode as i, defineComponent as a, onMounted as o, openBlock as s, ref as c, toRef as l, unref as u } from "vue";
+import { KdsCheckboxGroup as d } from "@knime/kds-components";
+//#endregion
+//#region src/uiComponents/CheckboxesControl.vue
+var f = /* @__PURE__ */ a({
+	__name: "CheckboxesControl",
+	props: {
+		control: {},
+		handleChange: { type: Function },
+		changeValue: { type: Function },
+		disabled: { type: Boolean },
+		error: { type: Boolean },
+		subText: {},
+		onRegisterValidation: { type: Function },
+		labelForId: {}
+	},
+	setup(a) {
+		let f = a, p = n(() => f.control.uischema.options?.checkboxLayout), m = c(null), { possibleValues: h } = t(l(f, "control")), g = n(() => m.value ?? h.value);
+		return o(() => {
+			m.value = f.control.schema.anyOf ? f.control.schema.anyOf.map(e) : null;
+		}), (e, t) => g.value ? (s(), r(u(d), {
+			key: 0,
+			id: a.labelForId,
+			class: "checkboxes",
+			"possible-values": g.value,
+			alignment: p.value,
+			disabled: a.disabled,
+			"model-value": a.control.data,
+			error: a.error,
+			"sub-text": a.subText,
+			"onUpdate:modelValue": a.changeValue
+		}, null, 8, [
+			"id",
+			"possible-values",
+			"alignment",
+			"disabled",
+			"model-value",
+			"error",
+			"sub-text",
+			"onUpdate:modelValue"
+		])) : i("", !0);
+	}
+});
+//#endregion
+export { f as default };

package/dist/ColorControl-D1dNnNbO.js

@@ -0,0 +1,38 @@
+import { createBlock as e, defineComponent as t, openBlock as n, unref as r } from "vue";
+import { KdsColorInput as i } from "@knime/kds-components";
+//#endregion
+//#region src/uiComponents/ColorControl.vue
+var a = /* @__PURE__ */ t({
+	__name: "ColorControl",
+	props: {
+		control: {},
+		handleChange: { type: Function },
+		changeValue: { type: Function },
+		disabled: { type: Boolean },
+		error: { type: Boolean },
+		subText: {},
+		onRegisterValidation: { type: Function },
+		labelForId: {}
+	},
+	setup(t) {
+		return (a, o) => (n(), e(r(i), {
+			id: t.labelForId,
+			ariaLabel: t.control.label,
+			"model-value": t.control.data ?? "",
+			disabled: t.disabled,
+			error: t.error,
+			"sub-text": t.subText,
+			"onUpdate:modelValue": t.changeValue
+		}, null, 8, [
+			"id",
+			"ariaLabel",
+			"model-value",
+			"disabled",
+			"error",
+			"sub-text",
+			"onUpdate:modelValue"
+		]));
+	}
+});
+//#endregion
+export { a as default };

package/dist/ColorPreviewControl-B4zix2kb.js

@@ -0,0 +1,67 @@
+import { t as e } from "./_plugin-vue_export-helper-B3ysoDQm.js";
+import { n as t } from "./useProvidedState-478_KXOe.js";
+import { Fragment as n, computed as r, createBlock as i, createElementBlock as a, createVNode as o, defineComponent as s, normalizeStyle as c, openBlock as l, renderList as u, unref as d } from "vue";
+import { KdsEmptyState as f } from "@knime/kds-components";
+//#region src/uiComponents/colorPreview/ColorPreviewEmptyState.vue?vue&type=script&setup=true&lang.ts
+var p = { class: "empty-state-wrapper" }, m = /*#__PURE__*/ e(/* @__PURE__ */ s({
+	__name: "ColorPreviewEmptyState",
+	setup(e) {
+		return (e, t) => (l(), a("div", p, [o(d(f), { headline: "No colors" })]));
+	}
+}), [["__scopeId", "data-v-7a09310d"]]), h = { class: "gradient-preview" }, g = /*#__PURE__*/ e(/* @__PURE__ */ s({
+	__name: "GradientPreview",
+	props: { gradient: {} },
+	setup(e) {
+		let t = e, n = r(() => t.gradient.colors.length > 0), o = r(() => {
+			let e = t.gradient.stops;
+			return e === null ? t.gradient.colors.join(", ") : t.gradient.colors.map((t, n) => `${t} ${e[n]}%`).join(", ");
+		}), s = r(() => `linear-gradient(to right in lab, ${o.value})`);
+		return (e, t) => (l(), a("div", h, [n.value ? (l(), a("div", {
+			key: 0,
+			class: "gradient-bar",
+			style: c({ background: s.value })
+		}, null, 4)) : (l(), i(m, { key: 1 }))]));
+	}
+}), [["__scopeId", "data-v-8a745225"]]), _ = { class: "palette-preview" }, v = 8, y = /*#__PURE__*/ e(/* @__PURE__ */ s({
+	__name: "PalettePreview",
+	props: { palette: {} },
+	setup(e) {
+		let t = e, o = r(() => t.palette.colors.length > 0), s = r(() => Math.max(1, Math.min(v, t.palette.colors.length))), d = r(() => ({ gridTemplateColumns: `repeat(${s.value}, minmax(0, 1fr))` }));
+		return (t, r) => (l(), a("div", _, [o.value ? (l(), a("div", {
+			key: 0,
+			class: "palette-grid",
+			style: c(d.value)
+		}, [(l(!0), a(n, null, u(e.palette.colors, (e, t) => (l(), a("div", {
+			key: t,
+			class: "color-cell",
+			style: c({ background: e })
+		}, null, 4))), 128))], 4)) : (l(), i(m, {
+			key: 1,
+			class: "empty-state"
+		}))]));
+	}
+}), [["__scopeId", "data-v-ad83046f"]]), b = { class: "color-preview" }, x = /* @__PURE__ */ s({
+	__name: "ColorPreviewControl",
+	props: {
+		control: {},
+		handleChange: { type: Function },
+		changeValue: { type: Function },
+		disabled: { type: Boolean },
+		labelForId: {},
+		error: { type: Boolean },
+		subText: {},
+		onRegisterValidation: { type: Function }
+	},
+	setup(e) {
+		let n = e, o = t(r(() => n.control.uischema), "previewColors", { colors: [] }), s = (e) => !("stops" in e);
+		return (e, t) => (l(), a("div", b, [s(d(o)) ? (l(), i(y, {
+			key: 0,
+			palette: d(o)
+		}, null, 8, ["palette"])) : (l(), i(g, {
+			key: 1,
+			gradient: d(o)
+		}, null, 8, ["gradient"]))]));
+	}
+});
+//#endregion
+export { x as default };

package/dist/ComboBoxControl-BGWAD9IW.js

@@ -0,0 +1,47 @@
+import { n as e } from "./usePossibleValues-Cx6iSt_X.js";
+import { computed as t, createBlock as n, defineComponent as r, openBlock as i, toRef as a, unref as o } from "vue";
+import { KdsMultiSelectDropdown as s } from "@knime/kds-components";
+//#endregion
+//#region src/uiComponents/ComboBoxControl.vue
+var c = /* @__PURE__ */ r({
+	__name: "ComboBoxControl",
+	props: {
+		control: {},
+		handleChange: { type: Function },
+		changeValue: { type: Function },
+		disabled: { type: Boolean },
+		error: { type: Boolean },
+		subText: {},
+		onRegisterValidation: { type: Function },
+		labelForId: {}
+	},
+	setup(r) {
+		let c = r, { possibleValues: l } = e(a(c, "control")), u = t(() => l.value === null || l.value.length === 0), d = t(() => c.control.uischema.providedOptions?.includes("possibleValues") || c.control.uischema.options?.possibleValues !== void 0), f = t(() => c.disabled || u.value && d.value);
+		return (e, t) => (i(), n(o(s), {
+			id: r.labelForId,
+			"model-value": r.control.data,
+			"allow-new-values": !d.value,
+			ariaLabel: r.control.label,
+			disabled: f.value,
+			"possible-values": u.value ? r.control.data.map((e) => ({
+				id: e,
+				text: e
+			})) : o(l),
+			error: r.error,
+			"sub-text": r.subText,
+			"onUpdate:modelValue": r.changeValue
+		}, null, 8, [
+			"id",
+			"model-value",
+			"allow-new-values",
+			"ariaLabel",
+			"disabled",
+			"possible-values",
+			"error",
+			"sub-text",
+			"onUpdate:modelValue"
+		]));
+	}
+});
+//#endregion
+export { c as default };

package/dist/DateControl-D0HfVrtz.js

@@ -0,0 +1,49 @@
+import { t as e } from "./temporal-polyfill-D4u1I_Z-.js";
+import { t } from "./plainDateTimeUtils-5uOCJ4N5.js";
+import { computed as n, createBlock as r, defineComponent as i, openBlock as a, unref as o } from "vue";
+import { KdsDateInput as s } from "@knime/kds-components";
+//#endregion
+//#region src/uiComponents/DateControl.vue
+var c = /* @__PURE__ */ i({
+	__name: "DateControl",
+	props: {
+		control: {},
+		handleChange: { type: Function },
+		changeValue: { type: Function },
+		disabled: { type: Boolean },
+		error: { type: Boolean },
+		subText: {},
+		onRegisterValidation: { type: Function },
+		labelForId: {}
+	},
+	setup(i) {
+		let c = i, l = (n) => {
+			if (!n) return null;
+			try {
+				return e.PlainDate.from(n);
+			} catch {
+				return t.fromString(n).date;
+			}
+		}, u = n(() => l(c.control.data)), d = (e) => {
+			c.changeValue(e?.toString() ?? "");
+		};
+		return (e, t) => (a(), r(o(s), {
+			id: i.labelForId,
+			ariaLabel: c.control.label,
+			"model-value": u.value,
+			disabled: i.disabled,
+			error: i.error,
+			"sub-text": i.subText,
+			"onUpdate:modelValue": d
+		}, null, 8, [
+			"id",
+			"ariaLabel",
+			"model-value",
+			"disabled",
+			"error",
+			"sub-text"
+		]));
+	}
+});
+//#endregion
+export { c as default };

package/dist/DateTimeControl-kTQZI9JC.js

@@ -0,0 +1,103 @@
+import { t as e } from "./temporal-polyfill-D4u1I_Z-.js";
+import { t } from "./plainDateTimeUtils-5uOCJ4N5.js";
+import { computed as n, createBlock as r, defineComponent as i, openBlock as a, ref as o, unref as s } from "vue";
+import { KdsDateInput as c, KdsDateTimeInput as l } from "@knime/kds-components";
+//#endregion
+//#region src/uiComponents/DateTimeControl.vue
+var u = /* @__PURE__ */ i({
+	__name: "DateTimeControl",
+	props: {
+		control: {},
+		handleChange: { type: Function },
+		changeValue: { type: Function },
+		disabled: { type: Boolean },
+		error: { type: Boolean },
+		subText: {},
+		onRegisterValidation: { type: Function },
+		labelForId: {}
+	},
+	setup(i) {
+		let u = i, d = n(() => u.control.uischema.options), f = n(() => d.value?.showTime ?? !0), p = n(() => t.getMaxGranularity(d.value, { showMilliseconds: !1 })), m = (n) => {
+			if (typeof n != "string" || n === "") return null;
+			try {
+				return e.PlainDate.from(n);
+			} catch {
+				return t.fromString(n).date;
+			}
+		}, h = n(() => m(d.value?.minimum)), g = n(() => m(d.value?.maximum)), _ = o(t.detectGranularity(u.control.data)), v = n(() => {
+			let { date: n, time: r } = t.fromString(u.control.data);
+			return n === null ? null : n.toPlainDateTime(r ?? e.PlainTime.from("00:00:00"));
+		}), y = n(() => t.fromString(u.control.data).date), b, x, S = !1, C = () => {
+			S = !1;
+			let e = x ?? _.value, n = b !== void 0, r = x !== void 0, i = b;
+			if (b = void 0, x = void 0, _.value = e, n) {
+				if (i === null) {
+					u.changeValue("");
+					return;
+				}
+				u.changeValue(t.toString(i.toPlainDate(), i.toPlainTime(), e));
+				return;
+			}
+			if (r) {
+				let { date: n, time: r } = t.fromString(u.control.data);
+				n && u.changeValue(t.toString(n, r, e));
+			}
+		}, w = () => {
+			S || (S = !0, queueMicrotask(C));
+		}, T = (e) => {
+			b = e, w();
+		}, E = (e) => {
+			x = e, w();
+		}, D = (e) => {
+			u.changeValue(e === null ? "" : e.toString());
+		};
+		return (e, t) => f.value ? (a(), r(s(l), {
+			key: 0,
+			id: i.labelForId,
+			ariaLabel: i.control.label,
+			"model-value": v.value,
+			"min-date": h.value,
+			"max-date": g.value,
+			granularity: _.value,
+			"max-granularity": p.value,
+			disabled: i.disabled,
+			error: i.error,
+			"sub-text": i.subText,
+			"onUpdate:modelValue": T,
+			"onUpdate:granularity": E
+		}, null, 8, [
+			"id",
+			"ariaLabel",
+			"model-value",
+			"min-date",
+			"max-date",
+			"granularity",
+			"max-granularity",
+			"disabled",
+			"error",
+			"sub-text"
+		])) : (a(), r(s(c), {
+			key: 1,
+			id: i.labelForId,
+			ariaLabel: i.control.label,
+			"model-value": y.value,
+			"min-date": h.value,
+			"max-date": g.value,
+			disabled: i.disabled,
+			error: i.error,
+			"sub-text": i.subText,
+			"onUpdate:modelValue": D
+		}, null, 8, [
+			"id",
+			"ariaLabel",
+			"model-value",
+			"min-date",
+			"max-date",
+			"disabled",
+			"error",
+			"sub-text"
+		]));
+	}
+});
+//#endregion
+export { u as default };

package/dist/DateTimeFormatPickerControl-BiYcsKSn.js

@@ -0,0 +1,44 @@
+import { n as e } from "./useProvidedState-478_KXOe.js";
+import { computed as t, createBlock as n, defineComponent as r, openBlock as i, unref as a } from "vue";
+import { KdsDateTimeFormatInput as o } from "@knime/kds-components";
+//#endregion
+//#region src/uiComponents/DateTimeFormatPickerControl.vue
+var s = /* @__PURE__ */ r({
+	__name: "DateTimeFormatPickerControl",
+	props: {
+		control: {},
+		handleChange: { type: Function },
+		changeValue: { type: Function },
+		disabled: { type: Boolean },
+		error: { type: Boolean },
+		subText: {},
+		onRegisterValidation: { type: Function },
+		labelForId: {}
+	},
+	setup(r) {
+		let s = r, c = t(() => s.control.uischema), l = t(() => c.value.options), u = t(() => l.value?.allowedFormats), d = e(c, "dateTimeFormats", []);
+		return (e, t) => (i(), n(a(o), {
+			id: r.labelForId,
+			ariaLabel: r.control.label,
+			"model-value": s.control.data,
+			disabled: r.disabled,
+			"allowed-formats": u.value,
+			"all-default-formats": a(d) ?? [],
+			error: r.error,
+			"sub-text": r.subText,
+			"onUpdate:modelValue": r.changeValue
+		}, null, 8, [
+			"id",
+			"ariaLabel",
+			"model-value",
+			"disabled",
+			"allowed-formats",
+			"all-default-formats",
+			"error",
+			"sub-text",
+			"onUpdate:modelValue"
+		]));
+	}
+});
+//#endregion
+export { s as default };