@knime/jsonforms 2.1.0 → 3.0.0

package/CHANGELOG.md

@@ -1,4 +1,50 @@
-# @knime/json-forms
+# @knime/jsonforms
+
+## 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
+
+### Patch Changes
+
+- 1082a6f: HideOnNull Input Field: improve label interaction
 
 ## 2.1.0
 

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-2p38J6TB.js → AnyOfTwinlist-CcodfEXw.js}

@@ -1,6 +1,6 @@
 import { defineComponent as s, openBlock as p, createBlock as t, mergeProps as r, unref as a } from "vue";
 import { o as l } from "./index-Blg1O3Fz.js";
-import { _ as i } from "./TwinlistControlBase.vue_vue_type_script_setup_true_lang-DfInqqdb.js";
+import { _ as i } from "./TwinlistControlBase.vue_vue_type_script_setup_true_lang-BKCvZF3X.js";
 const d = /* @__PURE__ */ s({
   __name: "AnyOfTwinlist",
   props: {

package/dist/{CheckboxControl-CQgVs955.js → CheckboxControl-B_MAR82s.js}

@@ -1,6 +1,7 @@
-import { defineComponent as r, ref as s, openBlock as d, createElementBlock as u, createElementVNode as c, createVNode as i, unref as b, renderSlot as a } from "vue";
-import { $ as v, _ as m } from "./SimpleButtonControl.vue_vue_type_style_index_0_scoped_c79c6b71_lang-H1rQVLn0.js";
-const f = { class: "checkbox-container" }, x = /* @__PURE__ */ r({
+import { defineComponent as a, ref as s, openBlock as d, createElementBlock as u, createElementVNode as c, createVNode as i, unref as b, renderSlot as r } from "vue";
+import { KdsCheckbox as v } from "@knime/kds-components";
+import { _ as m } from "./SimpleButtonControl.vue_vue_type_style_index_0_scoped_c79c6b71_lang-Ccuf283K.js";
+const f = { class: "checkbox-container" }, x = /* @__PURE__ */ a({
   __name: "CheckboxControl",
   props: {
     control: {},
@@ -29,12 +30,12 @@ const f = { class: "checkbox-container" }, x = /* @__PURE__ */ r({
           "sub-text": e.subText,
           "onUpdate:modelValue": o[0] || (o[0] = (l) => e.changeValue(l === !0))
         }, null, 8, ["disabled", "model-value", "label", "error", "sub-text"]),
-        a(n.$slots, "icon", {}, void 0, !0)
+        r(n.$slots, "icon", {}, void 0, !0)
       ]),
-      a(n.$slots, "buttons", { hover: t.value }, void 0, !0)
+      r(n.$slots, "buttons", { hover: t.value }, void 0, !0)
     ], 32));
   }
-}), p = /* @__PURE__ */ m(x, [["__scopeId", "data-v-4f590a2d"]]);
+}), C = /* @__PURE__ */ m(x, [["__scopeId", "data-v-4f590a2d"]]);
 export {
-  p as default
+  C as default
 };

package/dist/{CheckboxesControl-BBTGgWaL.js → CheckboxesControl--bG4aF6O.js}

@@ -1,7 +1,7 @@
 import { defineComponent as u, computed as l, ref as r, toRef as c, onMounted as i, openBlock as d, createBlock as m, unref as p, createCommentVNode as b } from "vue";
-import { M as f } from "./SimpleButtonControl.vue_vue_type_style_index_0_scoped_c79c6b71_lang-H1rQVLn0.js";
+import { KdsCheckboxGroup as f } from "@knime/kds-components";
 import { o as h } from "./index-Blg1O3Fz.js";
-import { u as v } from "./usePossibleValues-11Tpukcj.js";
+import { u as v } from "./usePossibleValues-CXVLf00v.js";
 const F = /* @__PURE__ */ u({
   __name: "CheckboxesControl",
   props: {

package/dist/{ColorControl-Dxcl1I4j.js → ColorControl-CEp2Ei7R.js}

@@ -1,6 +1,6 @@
-import { defineComponent as a, openBlock as o, createBlock as l, unref as t } from "vue";
-import { O as n } from "./SimpleButtonControl.vue_vue_type_style_index_0_scoped_c79c6b71_lang-H1rQVLn0.js";
-const c = /* @__PURE__ */ a({
+import { defineComponent as o, openBlock as a, createBlock as l, unref as t } from "vue";
+import { KdsColorInput as n } from "@knime/kds-components";
+const c = /* @__PURE__ */ o({
   __name: "ColorControl",
   props: {
     control: {},
@@ -13,7 +13,7 @@ const c = /* @__PURE__ */ a({
     labelForId: {}
   },
   setup(e) {
-    return (r, d) => (o(), l(t(n), {
+    return (r, d) => (a(), l(t(n), {
       id: e.labelForId,
       ariaLabel: e.control.label,
       "model-value": e.control.data ?? "",

package/dist/{ColorPreviewControl-CcwzFb2W.js → ColorPreviewControl-j0uQH95J.js}

@@ -1,5 +1,6 @@
 import { defineComponent as u, openBlock as e, createElementBlock as o, createVNode as y, unref as p, computed as s, normalizeStyle as m, createBlock as d, Fragment as f, renderList as k } from "vue";
-import { N as w, _ as v, u as C } from "./SimpleButtonControl.vue_vue_type_style_index_0_scoped_c79c6b71_lang-H1rQVLn0.js";
+import { KdsEmptyState as w } from "@knime/kds-components";
+import { _ as v, u as C } from "./SimpleButtonControl.vue_vue_type_style_index_0_scoped_c79c6b71_lang-Ccuf283K.js";
 const P = { class: "empty-state-wrapper" }, $ = /* @__PURE__ */ u({
   __name: "ColorPreviewEmptyState",
   setup(r) {
@@ -55,7 +56,7 @@ const P = { class: "empty-state-wrapper" }, $ = /* @__PURE__ */ u({
       }))
     ]));
   }
-}), G = /* @__PURE__ */ v(E, [["__scopeId", "data-v-ad83046f"]]), I = { class: "color-preview" }, V = /* @__PURE__ */ u({
+}), G = /* @__PURE__ */ v(E, [["__scopeId", "data-v-ad83046f"]]), I = { class: "color-preview" }, j = /* @__PURE__ */ u({
   __name: "ColorPreviewControl",
   props: {
     control: {},
@@ -85,5 +86,5 @@ const P = { class: "empty-state-wrapper" }, $ = /* @__PURE__ */ u({
   }
 });
 export {
-  V as default
+  j as default
 };

package/dist/{ComboBoxControl-D46RLQSp.js → ComboBoxControl-BpJzwiv6.js}

@@ -1,6 +1,6 @@
-import { defineComponent as r, toRef as c, computed as a, openBlock as d, createBlock as b, unref as u } from "vue";
-import { P as m } from "./SimpleButtonControl.vue_vue_type_style_index_0_scoped_c79c6b71_lang-H1rQVLn0.js";
-import { u as v } from "./usePossibleValues-11Tpukcj.js";
+import { defineComponent as r, toRef as d, computed as a, openBlock as c, createBlock as b, unref as u } from "vue";
+import { KdsMultiSelectDropdown as m } from "@knime/kds-components";
+import { u as v } from "./usePossibleValues-CXVLf00v.js";
 const w = /* @__PURE__ */ r({
   __name: "ComboBoxControl",
   props: {
@@ -14,20 +14,20 @@ const w = /* @__PURE__ */ r({
     labelForId: {}
   },
   setup(e) {
-    const l = e, { possibleValues: o } = v(c(l, "control")), t = a(
+    const l = e, { possibleValues: o } = v(d(l, "control")), t = a(
       () => o.value === null || o.value.length === 0
-    ), s = a(
+    ), n = a(
       () => l.control.uischema.providedOptions?.includes("possibleValues") || l.control.uischema.options?.possibleValues !== void 0
     ), i = a(
-      () => l.disabled || t.value && s.value
+      () => l.disabled || t.value && n.value
     );
-    return (p, V) => (d(), b(u(m), {
+    return (p, V) => (c(), b(u(m), {
       id: e.labelForId,
       "model-value": e.control.data,
-      "allow-new-values": !s.value,
+      "allow-new-values": !n.value,
       ariaLabel: e.control.label,
       disabled: i.value,
-      "possible-values": t.value ? e.control.data.map((n) => ({ id: n, text: n })) : u(o),
+      "possible-values": t.value ? e.control.data.map((s) => ({ id: s, text: s })) : u(o),
       error: e.error,
       "sub-text": e.subText,
       "onUpdate:modelValue": e.changeValue

package/dist/{DateControl-xz4dAXfv.js → DateControl-83Fi6P5y.js}

@@ -1,6 +1,6 @@
-import { defineComponent as l, computed as i, openBlock as d, createBlock as c, unref as u } from "vue";
+import { defineComponent as l, computed as i, openBlock as d, createBlock as u, unref as c } from "vue";
 import { T as m } from "./index-_VUHzju5.js";
-import { T as s } from "./SimpleButtonControl.vue_vue_type_style_index_0_scoped_c79c6b71_lang-H1rQVLn0.js";
+import { KdsDateInput as s } from "@knime/kds-components";
 import { p } from "./plainDateTimeUtils-BZSKqp9i.js";
 const y = /* @__PURE__ */ l({
   __name: "DateControl",
@@ -15,7 +15,7 @@ const y = /* @__PURE__ */ l({
     labelForId: {}
   },
   setup(t) {
-    const a = t, o = (e) => {
+    const o = t, a = (e) => {
       if (!e)
         return null;
       try {
@@ -24,13 +24,13 @@ const y = /* @__PURE__ */ l({
         return p.fromString(e).date;
       }
     }, r = i(
-      () => o(a.control.data)
+      () => a(o.control.data)
     ), n = (e) => {
-      a.changeValue(e?.toString() ?? "");
+      o.changeValue(e?.toString() ?? "");
     };
-    return (e, b) => (d(), c(u(s), {
+    return (e, b) => (d(), u(c(s), {
       id: t.labelForId,
-      ariaLabel: a.control.label,
+      ariaLabel: o.control.label,
       "model-value": r.value,
       disabled: t.disabled,
       error: t.error,

package/dist/{DateTimeControl-621tOLQk.js → DateTimeControl-C-D8bFm3.js}

@@ -1,8 +1,8 @@
-import { defineComponent as P, computed as l, ref as I, openBlock as v, createBlock as x, unref as T } from "vue";
-import { T as h } from "./index-_VUHzju5.js";
-import { R as L, T as w } from "./SimpleButtonControl.vue_vue_type_style_index_0_scoped_c79c6b71_lang-H1rQVLn0.js";
+import { defineComponent as M, computed as l, ref as P, openBlock as v, createBlock as x, unref as h } from "vue";
+import { T } from "./index-_VUHzju5.js";
+import { KdsDateTimeInput as L, KdsDateInput as w } from "@knime/kds-components";
 import { p as n } from "./plainDateTimeUtils-BZSKqp9i.js";
-const N = /* @__PURE__ */ P({
+const j = /* @__PURE__ */ M({
   __name: "DateTimeControl",
   props: {
     control: {},
@@ -19,47 +19,47 @@ const N = /* @__PURE__ */ P({
       () => n.getMaxGranularity(o.value, {
         showMilliseconds: !1
       })
-    ), c = (e) => {
+    ), s = (e) => {
       if (typeof e != "string" || e === "")
         return null;
       try {
-        return h.PlainDate.from(e);
+        return T.PlainDate.from(e);
       } catch {
         return n.fromString(e).date;
       }
     }, f = l(
-      () => c(o.value?.minimum)
+      () => s(o.value?.minimum)
     ), g = l(
-      () => c(o.value?.maximum)
-    ), d = I(
+      () => s(o.value?.maximum)
+    ), d = P(
       n.detectGranularity(t.control.data)
     ), V = l(() => {
       const { date: e, time: u } = n.fromString(t.control.data);
-      return e === null ? null : e.toPlainDateTime(u ?? h.PlainTime.from("00:00:00"));
+      return e === null ? null : e.toPlainDateTime(u ?? T.PlainTime.from("00:00:00"));
     }), U = l(
       () => n.fromString(t.control.data).date
     );
     let r, i, m = !1;
     const S = () => {
       m = !1;
-      const e = i ?? d.value, u = r !== void 0, B = i !== void 0, s = r;
+      const e = i ?? d.value, u = r !== void 0, B = i !== void 0, c = r;
       if (r = void 0, i = void 0, d.value = e, u) {
-        if (s === null) {
+        if (c === null) {
           t.changeValue("");
           return;
         }
         t.changeValue(
           n.toString(
-            s.toPlainDate(),
-            s.toPlainTime(),
+            c.toPlainDate(),
+            c.toPlainTime(),
             e
           )
         );
         return;
       }
       if (B) {
-        const { date: y, time: M } = n.fromString(t.control.data);
-        y && t.changeValue(n.toString(y, M, e));
+        const { date: y, time: I } = n.fromString(t.control.data);
+        y && t.changeValue(n.toString(y, I, e));
       }
     }, b = () => {
       m || (m = !0, queueMicrotask(S));
@@ -70,7 +70,7 @@ const N = /* @__PURE__ */ P({
     }, k = (e) => {
       t.changeValue(e === null ? "" : e.toString());
     };
-    return (e, u) => p.value ? (v(), x(T(L), {
+    return (e, u) => p.value ? (v(), x(h(L), {
       key: 0,
       id: a.labelForId,
       ariaLabel: a.control.label,
@@ -84,7 +84,7 @@ const N = /* @__PURE__ */ P({
       "sub-text": a.subText,
       "onUpdate:modelValue": F,
       "onUpdate:granularity": G
-    }, null, 8, ["id", "ariaLabel", "model-value", "min-date", "max-date", "granularity", "max-granularity", "disabled", "error", "sub-text"])) : (v(), x(T(w), {
+    }, null, 8, ["id", "ariaLabel", "model-value", "min-date", "max-date", "granularity", "max-granularity", "disabled", "error", "sub-text"])) : (v(), x(h(w), {
       key: 1,
       id: a.labelForId,
       ariaLabel: a.control.label,
@@ -99,5 +99,5 @@ const N = /* @__PURE__ */ P({
   }
 });
 export {
-  N as default
+  j as default
 };

package/dist/{DateTimeFormatPickerControl-BK8R5UTW.js → DateTimeFormatPickerControl-B9gl_66T.js}

@@ -1,6 +1,7 @@
-import { defineComponent as s, computed as a, openBlock as u, createBlock as c, unref as l } from "vue";
-import { u as i, Q as m } from "./SimpleButtonControl.vue_vue_type_style_index_0_scoped_c79c6b71_lang-H1rQVLn0.js";
-const h = /* @__PURE__ */ s({
+import { defineComponent as s, computed as a, openBlock as u, createBlock as m, unref as l } from "vue";
+import { KdsDateTimeFormatInput as i } from "@knime/kds-components";
+import { u as c } from "./SimpleButtonControl.vue_vue_type_style_index_0_scoped_c79c6b71_lang-Ccuf283K.js";
+const v = /* @__PURE__ */ s({
   __name: "DateTimeFormatPickerControl",
   props: {
     control: {},
@@ -15,13 +16,13 @@ const h = /* @__PURE__ */ s({
   setup(e) {
     const o = e, t = a(
       () => o.control.uischema
-    ), n = a(() => t.value.options), r = a(() => n.value?.allowedFormats), d = i(t, "dateTimeFormats", []);
-    return (b, f) => (u(), c(l(m), {
+    ), r = a(() => t.value.options), n = a(() => r.value?.allowedFormats), d = c(t, "dateTimeFormats", []);
+    return (b, f) => (u(), m(l(i), {
       id: e.labelForId,
       ariaLabel: e.control.label,
       "model-value": o.control.data,
       disabled: e.disabled,
-      "allowed-formats": r.value,
+      "allowed-formats": n.value,
       "all-default-formats": l(d) ?? [],
       error: e.error,
       "sub-text": e.subText,
@@ -30,5 +31,5 @@ const h = /* @__PURE__ */ s({
   }
 });
 export {
-  h as default
+  v as default
 };

package/dist/{DropdownControl-CZURMaxR.js → DropdownControl-CtveoldX.js}

@@ -1,6 +1,6 @@
 import { defineComponent as l, toRef as t, openBlock as n, createBlock as r, unref as s } from "vue";
-import { u } from "./usePossibleValues-11Tpukcj.js";
-import { _ as d } from "./LoadingDropdown.vue_vue_type_script_setup_true_lang-CHAtK3ts.js";
+import { u } from "./usePossibleValues-CXVLf00v.js";
+import { _ as d } from "./LoadingDropdown.vue_vue_type_script_setup_true_lang-DFSHuMQ6.js";
 const p = /* @__PURE__ */ l({
   __name: "DropdownControl",
   props: {

package/dist/{ExecutorCoresControl-DXFG_H5T.js → ExecutorCoresControl-CErHidL7.js}

@@ -1,5 +1,5 @@
 import { defineComponent as d, computed as e, openBlock as p, createBlock as m, mergeProps as h } from "vue";
-import { R as v } from "./ResourceControlBase-DpHX2wpj.js";
+import { R as v } from "./ResourceControlBase-CX97xRiy.js";
 const g = /* @__PURE__ */ d({
   __name: "ExecutorCoresControl",
   props: {

package/dist/{ExecutorMemoryControl-DDEmODyY.js → ExecutorMemoryControl-DgSM86Yg.js}

@@ -1,5 +1,5 @@
 import { defineComponent as c, computed as o, openBlock as i, createBlock as p, mergeProps as d } from "vue";
-import { R as m } from "./ResourceControlBase-DpHX2wpj.js";
+import { R as m } from "./ResourceControlBase-CX97xRiy.js";
 const x = /* @__PURE__ */ c({
   __name: "ExecutorMemoryControl",
   props: {

package/dist/FileUploadControl-BBfnxURy.js

@@ -0,0 +1,56 @@
+import { defineComponent as b, ref as s, computed as o, openBlock as h, createElementBlock as v, createVNode as y, unref as F, createElementVNode as r, toDisplayString as _ } from "vue";
+import { KdsButton as g } from "@knime/kds-components";
+import { _ as C } from "./SimpleButtonControl.vue_vue_type_style_index_0_scoped_c79c6b71_lang-Ccuf283K.js";
+const S = { class: "wrapper" }, k = { class: "filename" }, x = ["id", "aria-label", "accept", "multiple", "disabled"], B = /* @__PURE__ */ b({
+  inheritAttrs: !1,
+  __name: "FileUploadControl",
+  props: {
+    control: {},
+    handleChange: { type: Function },
+    changeValue: { type: Function },
+    disabled: { type: Boolean },
+    error: { type: Boolean },
+    subText: {},
+    onRegisterValidation: { type: Function },
+    labelForId: {}
+  },
+  setup(e) {
+    const l = e, a = s(l.control.data?.slice()), d = o(
+      () => l.control.uischema.options?.accept ?? "*"
+    ), i = o(
+      () => l.control.uischema.options?.multiple ?? !1
+    ), c = s(null), u = o(() => a.value?.map?.(({ name: t }) => t).join(", ") || "No file selected"), p = o(() => `Select file${i.value ? "s" : ""}`), f = () => {
+      c.value?.click();
+    }, m = (t) => {
+      const n = t.target;
+      n.files && (a.value = Array.from(n.files), l.handleChange(l.control.path, Array.from(a.value)));
+    };
+    return (t, n) => (h(), v("div", S, [
+      y(F(g), {
+        class: "file-select-button",
+        label: p.value,
+        "leading-icon": "search",
+        variant: "outlined",
+        disabled: e.disabled,
+        size: "small",
+        onClick: f
+      }, null, 8, ["label", "disabled"]),
+      r("span", k, _(u.value), 1),
+      r("input", {
+        id: e.labelForId,
+        ref_key: "fileSelector",
+        ref: c,
+        "aria-label": e.control.label,
+        type: "file",
+        accept: d.value,
+        multiple: i.value,
+        disabled: e.disabled,
+        hidden: "",
+        onChange: m
+      }, null, 40, x)
+    ]));
+  }
+}), N = /* @__PURE__ */ C(B, [["__scopeId", "data-v-37968bc6"]]);
+export {
+  N as default
+};