@sfxcode/formkit-openvue 0.8.1 → 0.9.0

package/README.md

@@ -49,7 +49,7 @@ Migrating from `@sfxcode/formkit-primevue` to `@sfxcode/formkit-openvue`:
 
 5. Update custom CSS: selectors like `[data-type="primeCheckbox"]` become `[data-type="formCheckbox"]`.
 
-Also rename the `primeAttributes` prop to `formAttributes` (`prime-attributes` to `form-attributes` in templates). Rename the i18n keys `formkit.prime.true` / `formkit.prime.false` to `formkit.form.true` / `formkit.form.false`. Not changed: the `p-formkit` wrapper class. The stylesheet is now `formkit-openvue.scss` (update imports of `dist/sass/formkit-primevue.scss`).
+Also rename the i18n keys `formkit.prime.true` / `formkit.prime.false` to `formkit.form.true` / `formkit.form.false`. If you use `useInputEditor`, its data fields `prime`, `prime_key` and `prime_value` are now `form`, `form_key` and `form_value`. The stylesheet is now `formkit-openvue.scss` (update imports of `dist/sass/formkit-primevue.scss`). Not changed: the `p-formkit` wrapper class.
 
 ## Build
 
@@ -63,6 +63,64 @@ Also rename the `primeAttributes` prop to `formAttributes` (`prime-attributes` t
 
 [Demo/Playground](https://formkit-openvue.netlify.app/)
 
+## Getting Started
+
+Install the latest release of [`@sfxcode/formkit-openvue`](https://www.npmjs.com/package/@sfxcode/formkit-openvue) together with OpenVue:
+
+```bash
+pnpm add @sfxcode/formkit-openvue openvue @openvue/themes @openvue/openicons
+# or: npm install ... / yarn add ...
+```
+
+Set up OpenVue, FormKit and the form inputs in your *main.ts*:
+
+```typescript
+import Aura from '@openvue/themes/aura'
+import { defaultConfig, plugin } from '@formkit/vue'
+import { formInputs, useFormInputs } from '@sfxcode/formkit-openvue'
+import OpenVue from 'openvue/config'
+import { createApp } from 'vue'
+import App from './App.vue'
+import '@openvue/openicons/openicons.css'
+import '@sfxcode/formkit-openvue/dist/style.css'
+
+const app = createApp(App)
+
+// OpenVue with theme
+app.use(OpenVue, { theme: { preset: Aura } })
+
+// register the OpenVue components used by the form inputs
+const { registerInputs } = useFormInputs()
+registerInputs(app)
+
+// FormKit with the OpenVue inputs
+app.use(plugin, defaultConfig({ inputs: formInputs }))
+
+app.mount('#app')
+```
+
+Use the inputs in a FormKit schema (or as `<FormKit type="formInputText" ... />`):
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const data = ref({ email: '' })
+const schema = [
+  { $formkit: 'formInputText', name: 'email', label: 'Email', validation: 'required|email' },
+  { $formkit: 'formCheckbox', name: 'newsletter', label: 'Subscribe to the newsletter' },
+]
+</script>
+
+<template>
+  <FormKit v-model="data" type="form">
+    <FormKitSchema :schema="schema" :data="data" />
+  </FormKit>
+</template>
+```
+
+See [Usage](#usage) for outputs, i18n and more configuration.
+
 ## Usage
 
 ### Configuration

package/dist/definitions/repeater.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.formRepeaterDefinition = void 0;
 var _vue = require("@formkit/vue");
 var _composables = require("../composables");
+var _clonePlain = require("../utils/clonePlain");
 const {
   addList,
   addElement,
@@ -13,18 +14,21 @@ const {
   addComponent
 } = (0, _composables.useFormKitSchema)();
 function addButtonGroup(buttonGroupClass = "", buttonGroupItemClass = "", buttonSize, render = "true") {
-  const addActionButtonComponent = (onClick = "", icon = "", severity = "", render2 = "true", disabled = "false") => {
+  const addActionButtonComponent = (onClick = "", icon = "", severity = "", render2 = "true", disabled = "false", label = "") => {
+    const name = `${label} + " " + ($index + 1)`;
     return addElement("div", [addComponent("Button", {
-      onClick,
+      "onClick": onClick,
       icon,
       severity,
       disabled,
-      size: buttonSize
+      "size": buttonSize,
+      "aria-label": name,
+      "title": name
     })], {
       class: buttonGroupItemClass
     }, render2);
   };
-  return addElement("div", [addActionButtonComponent("$moveNodeUp($node.parent, $index)", "oi oi-arrow-up", "secondary", "$renderMoveButtons", "$index === 0"), addActionButtonComponent("$removeNode($node.parent, $index)", "oi oi-trash", "danger", "$displayDeleteButton", "$node.parent.value.length === $minItems"), addActionButtonComponent("$cloneNode($node.parent, $index)", "oi oi-clone", "", "$displayCloneButton", "$node.parent.value.length > $maxItems -1"), addActionButtonComponent("$addNode($node.parent, $index)", "oi oi-plus", "", "$displayAddButton", "$node.parent.value.length > $maxItems -1"), addActionButtonComponent("$moveNodeDown($node.parent, $index)", "oi oi-arrow-down", "secondary", "$renderMoveButtons", "$index === $node.parent.value.length -1")], {
+  return addElement("div", [addActionButtonComponent("$moveNodeUp($node.parent, $index)", "oi oi-arrow-up", "secondary", "$renderMoveButtons", "$index === 0", "$moveUpLabel"), addActionButtonComponent("$removeNode($node.parent, $index)", "oi oi-trash", "danger", "$displayDeleteButton", "$node.parent.value.length === $minItems", "$deleteLabel"), addActionButtonComponent("$cloneNode($node.parent, $index)", "oi oi-clone", "", "$displayCloneButton", "$node.parent.value.length > $maxItems -1", "$cloneLabel"), addActionButtonComponent("$addNode($node.parent, $index)", "oi oi-plus", "", "$displayAddButton", "$node.parent.value.length > $maxItems -1", "$addLabel"), addActionButtonComponent("$moveNodeDown($node.parent, $index)", "oi oi-arrow-down", "secondary", "$renderMoveButtons", "$index === $node.parent.value.length -1", "$moveDownLabel")], {
     class: buttonGroupClass
   }, render);
 }
@@ -39,6 +43,19 @@ function addInsertButton(label = "Add Item", icon = "i-lucide-plus", styleClass
     class: styleClass
   }, render);
 }
+function addUndoBar(render = "true") {
+  return addElement("div", [addElement("div", [addElement("span", ["$deletedLabel"]), addComponent("Button", {
+    onClick: "$undoRemoveNode($node)",
+    label: "$undoLabel",
+    size: "small",
+    variant: "text"
+  })], {
+    class: "formkit-repeater-undo"
+  }, "$removedItem")], {
+    "role": "status",
+    "aria-live": "polite"
+  }, render);
+}
 function addDragHandle(handleClass = "", iconClass = "", render = "true") {
   return addElement("span", [addElement("i", [], {
     class: iconClass
@@ -58,13 +75,14 @@ const formRepeaterDefinition = exports.formRepeaterDefinition = (0, _vue.createI
   onDragleave: "$dragNodeLeave($index)",
   onDrop: "$dropNode($node.parent, $index)",
   onDragend: "$dragNodeEnd"
-})], true, {})], true, "true", {
-  value: "$value"
+})], true, {}), addUndoBar("$undoDelete")], true, "true", {
+  value: "$value",
+  validation: "$repeaterValidation"
 })], {
   class: "$internalListClass",
   id: "$internalListId"
 }, true), {
-  props: ["insertButtonLabel", "insertButtonClass", "insertButtonSize", "alwaysDisplayInsertButton", "newItem", "listClass", "listItemClass", "hideButtonGroup", "hideMoveButtons", "buttonGroupClass", "buttonGroupItemClass", "buttonSize", "displayCloneButton", "displayAddButton", "displayDeleteButton", "minItems", "maxItems", "displayDragHandle", "draggable", "dragHandleClass", "dragHandleIconClass"],
+  props: ["insertButtonLabel", "insertButtonClass", "insertButtonSize", "alwaysDisplayInsertButton", "newItem", "listClass", "listItemClass", "hideButtonGroup", "hideMoveButtons", "buttonGroupClass", "buttonGroupItemClass", "buttonSize", "displayCloneButton", "displayAddButton", "displayDeleteButton", "minItems", "maxItems", "moveUpLabel", "moveDownLabel", "deleteLabel", "cloneLabel", "addLabel", "undoDelete", "undoLabel", "deletedLabel", "undoTimeout", "displayDragHandle", "draggable", "dragHandleClass", "dragHandleIconClass"],
   features: [addRepeaterHandler]
 });
 function addRepeaterHandler(node) {
@@ -72,12 +90,20 @@ function addRepeaterHandler(node) {
     array.splice(index2, 0, array.splice(index1, 1)[0]);
     return array;
   };
-  const uuid = typeof crypto !== "undefined" && crypto.randomUUID ? crypto.randomUUID() : Math.random().toString(36).slice(2);
   node.on("created", () => {
     if (node.context) {
       let dragStartIndex = null;
-      let dragOverIndex = null;
-      const newItem = node.context.newItem || {};
+      const makeNewItem = () => (0, _clonePlain.clonePlain)(node.context?.newItem || {});
+      const instanceId = String(node.props.id ?? node.name);
+      const context = node.context;
+      context.dragOverIndex = null;
+      let undoTimer;
+      const forgetRemoved = () => {
+        clearTimeout(undoTimer);
+        undoTimer = void 0;
+        context.removedItem = void 0;
+      };
+      node.on("destroying", () => clearTimeout(undoTimer));
       node.context.listName = node.name;
       node.context.renderButtons = !node.context.hideButtonGroup;
       node.context.insertButtonSize = node.context.insertButtonSize ? node.context.insertButtonSize : "";
@@ -89,39 +115,68 @@ function addRepeaterHandler(node) {
       node.context.internalDragHandleClass = node.context.dragHandleClass ? `formkit-repeater-drag-handle ${node.context.dragHandleClass}` : "formkit-repeater-drag-handle";
       node.context.internalListClass = node.context.listClass ? `formkit-items ${node.context.listClass}` : "formkit-items";
       node.context.internalListItemClass = node.context.listItemClass ? `formkit-item ${node.context.listItemClass}` : "formkit-item";
-      node.context.internalListId = `formkit-items-${uuid}`;
+      node.context.moveUpLabel = node.context.moveUpLabel || "Move item up";
+      node.context.moveDownLabel = node.context.moveDownLabel || "Move item down";
+      node.context.deleteLabel = node.context.deleteLabel || "Delete item";
+      node.context.cloneLabel = node.context.cloneLabel || "Clone item";
+      node.context.addLabel = node.context.addLabel || "Add item below";
+      node.context.undoDelete = !!node.context.undoDelete;
+      node.context.undoLabel = node.context.undoLabel || "Undo";
+      node.context.deletedLabel = node.context.deletedLabel || "Item deleted";
+      node.context.undoTimeout = node.context.undoTimeout !== void 0 ? Number(node.context.undoTimeout) : 8e3;
+      node.context.removedItem = void 0;
+      node.context.minItems = node.context.minItems !== void 0 ? node.context.minItems : 0;
+      node.context.maxItems = node.context.maxItems !== void 0 ? node.context.maxItems : Number.POSITIVE_INFINITY;
+      node.context.repeaterValidation = [["+length", node.context.minItems, node.context.maxItems]];
+      node.context.internalListId = `formkit-items-${instanceId}`;
       node.context.getListItemClass = index => {
-        if (dragOverIndex === index && dragStartIndex !== index) return `${node.context?.internalListItemClass} formkit-repeater-drop-target`;
+        if (context.dragOverIndex === index && dragStartIndex !== index) return `${node.context?.internalListItemClass} formkit-repeater-drop-target`;
         return node.context?.internalListItemClass?.toString() ?? "";
       };
       node.context.getListItemId = index => {
-        return `formkit-item-${index}-${uuid}`;
+        return `formkit-item-${index}-${instanceId}`;
       };
       node.context.insertNode = parentNode => () => {
         if (parentNode && Array.isArray(parentNode._value)) {
-          const newArray = [{
-            ...newItem
-          }, ...parentNode.value];
+          const newArray = [makeNewItem(), ...parentNode.value];
           parentNode.input(newArray, false);
         }
       };
       node.context.removeNode = (parentNode, index) => () => {
         if (parentNode && Array.isArray(parentNode._value)) {
+          const removed = (0, _clonePlain.clonePlain)(parentNode._value[index]);
           parentNode.input(parentNode._value.filter((_, i) => i !== index), false);
+          if (context.undoDelete) {
+            clearTimeout(undoTimer);
+            context.removedItem = {
+              index,
+              item: removed
+            };
+            const timeout = Number(context.undoTimeout);
+            undoTimer = timeout > 0 ? setTimeout(forgetRemoved, timeout) : void 0;
+          }
+        }
+      };
+      node.context.undoRemoveNode = parentNode => () => {
+        const removed = context.removedItem;
+        if (removed && parentNode && Array.isArray(parentNode._value) && parentNode._value.length < Number(context.maxItems)) {
+          const array = [...parentNode.value];
+          array.splice(Math.min(removed.index, array.length), 0, (0, _clonePlain.clonePlain)(removed.item));
+          parentNode.input(array, false);
         }
+        forgetRemoved();
       };
       node.context.addNode = (parentNode, index) => () => {
         if (parentNode && Array.isArray(parentNode._value)) {
           const array = parentNode.value;
-          array.splice(index + 1, 0, newItem);
+          array.splice(index + 1, 0, makeNewItem());
           parentNode.input(array, false);
         }
       };
       node.context.cloneNode = (parentNode, index) => () => {
         if (parentNode && Array.isArray(parentNode._value)) {
-          const item = parentNode.value[index];
           const array = parentNode.value;
-          array.splice(index + 1, 0, item);
+          array.splice(index + 1, 0, (0, _clonePlain.clonePlain)(array[index]));
           parentNode.input(array, false);
         }
       };
@@ -144,35 +199,35 @@ function addRepeaterHandler(node) {
       };
       node.context.dragNodeOver = targetIndex => event => {
         event?.preventDefault();
-        dragOverIndex = targetIndex;
+        context.dragOverIndex = targetIndex;
         if (event?.dataTransfer) event.dataTransfer.dropEffect = "move";
       };
       node.context.dragNodeLeave = targetIndex => () => {
-        if (dragOverIndex === targetIndex) dragOverIndex = null;
+        if (context.dragOverIndex === targetIndex) context.dragOverIndex = null;
       };
       node.context.dropNode = (parentNode, targetIndex) => event => {
         event?.preventDefault();
         if (!parentNode || !Array.isArray(parentNode._value)) {
-          dragOverIndex = null;
+          context.dragOverIndex = null;
           return;
         }
         const sourceFromEvent = Number.parseInt(event?.dataTransfer?.getData("text/plain") || "", 10);
         const sourceIndex = Number.isInteger(sourceFromEvent) ? sourceFromEvent : dragStartIndex;
         if (sourceIndex === null || sourceIndex === targetIndex) {
-          dragOverIndex = null;
+          context.dragOverIndex = null;
           return;
         }
         if (sourceIndex < 0 || sourceIndex >= parentNode.value.length) {
-          dragOverIndex = null;
+          context.dragOverIndex = null;
           return;
         }
         parentNode.input(swapElements(parentNode.value, sourceIndex, targetIndex), false);
         dragStartIndex = null;
-        dragOverIndex = null;
+        context.dragOverIndex = null;
       };
       node.context.dragNodeEnd = () => {
         dragStartIndex = null;
-        dragOverIndex = null;
+        context.dragOverIndex = null;
       };
     }
   });

package/dist/definitions/repeater.mjs

@@ -1,16 +1,18 @@
 import { createInput } from "@formkit/vue";
 import { useFormKitSchema } from "../composables/index.mjs";
+import { clonePlain } from "../utils/clonePlain.mjs";
 const { addList, addElement, addListGroup, addComponent } = useFormKitSchema();
 function addButtonGroup(buttonGroupClass = "", buttonGroupItemClass = "", buttonSize, render = "true") {
-  const addActionButtonComponent = (onClick = "", icon = "", severity = "", render2 = "true", disabled = "false") => {
-    return addElement("div", [addComponent("Button", { onClick, icon, severity, disabled, size: buttonSize })], { class: buttonGroupItemClass }, render2);
+  const addActionButtonComponent = (onClick = "", icon = "", severity = "", render2 = "true", disabled = "false", label = "") => {
+    const name = `${label} + " " + ($index + 1)`;
+    return addElement("div", [addComponent("Button", { "onClick": onClick, icon, severity, disabled, "size": buttonSize, "aria-label": name, "title": name })], { class: buttonGroupItemClass }, render2);
   };
   return addElement("div", [
-    addActionButtonComponent("$moveNodeUp($node.parent, $index)", "oi oi-arrow-up", "secondary", "$renderMoveButtons", "$index === 0"),
-    addActionButtonComponent("$removeNode($node.parent, $index)", "oi oi-trash", "danger", "$displayDeleteButton", "$node.parent.value.length === $minItems"),
-    addActionButtonComponent("$cloneNode($node.parent, $index)", "oi oi-clone", "", "$displayCloneButton", "$node.parent.value.length > $maxItems -1"),
-    addActionButtonComponent("$addNode($node.parent, $index)", "oi oi-plus", "", "$displayAddButton", "$node.parent.value.length > $maxItems -1"),
-    addActionButtonComponent("$moveNodeDown($node.parent, $index)", "oi oi-arrow-down", "secondary", "$renderMoveButtons", "$index === $node.parent.value.length -1")
+    addActionButtonComponent("$moveNodeUp($node.parent, $index)", "oi oi-arrow-up", "secondary", "$renderMoveButtons", "$index === 0", "$moveUpLabel"),
+    addActionButtonComponent("$removeNode($node.parent, $index)", "oi oi-trash", "danger", "$displayDeleteButton", "$node.parent.value.length === $minItems", "$deleteLabel"),
+    addActionButtonComponent("$cloneNode($node.parent, $index)", "oi oi-clone", "", "$displayCloneButton", "$node.parent.value.length > $maxItems -1", "$cloneLabel"),
+    addActionButtonComponent("$addNode($node.parent, $index)", "oi oi-plus", "", "$displayAddButton", "$node.parent.value.length > $maxItems -1", "$addLabel"),
+    addActionButtonComponent("$moveNodeDown($node.parent, $index)", "oi oi-arrow-down", "secondary", "$renderMoveButtons", "$index === $node.parent.value.length -1", "$moveDownLabel")
   ], { class: buttonGroupClass }, render);
 }
 function addInsertButton(label = "Add Item", icon = "i-lucide-plus", styleClass = "", buttonSize, render = "true") {
@@ -18,6 +20,14 @@ function addInsertButton(label = "Add Item", icon = "i-lucide-plus", styleClass
     addComponent("Button", { onClick: "$insertNode($node)", label, icon, size: buttonSize, disabled: "$node.value.length > $maxItems -1" })
   ], { class: styleClass }, render);
 }
+function addUndoBar(render = "true") {
+  return addElement("div", [
+    addElement("div", [
+      addElement("span", ["$deletedLabel"]),
+      addComponent("Button", { onClick: "$undoRemoveNode($node)", label: "$undoLabel", size: "small", variant: "text" })
+    ], { class: "formkit-repeater-undo" }, "$removedItem")
+  ], { "role": "status", "aria-live": "polite" }, render);
+}
 function addDragHandle(handleClass = "", iconClass = "", render = "true") {
   return addElement("span", [
     addElement("i", [], { class: iconClass })
@@ -45,11 +55,12 @@ export const formRepeaterDefinition = createInput(
           onDrop: "$dropNode($node.parent, $index)",
           onDragend: "$dragNodeEnd"
         })
-      ], true, {})
-    ], true, "true", { value: "$value" })
+      ], true, {}),
+      addUndoBar("$undoDelete")
+    ], true, "true", { value: "$value", validation: "$repeaterValidation" })
   ], { class: "$internalListClass", id: "$internalListId" }, true),
   {
-    props: ["insertButtonLabel", "insertButtonClass", "insertButtonSize", "alwaysDisplayInsertButton", "newItem", "listClass", "listItemClass", "hideButtonGroup", "hideMoveButtons", "buttonGroupClass", "buttonGroupItemClass", "buttonSize", "displayCloneButton", "displayAddButton", "displayDeleteButton", "minItems", "maxItems", "displayDragHandle", "draggable", "dragHandleClass", "dragHandleIconClass"],
+    props: ["insertButtonLabel", "insertButtonClass", "insertButtonSize", "alwaysDisplayInsertButton", "newItem", "listClass", "listItemClass", "hideButtonGroup", "hideMoveButtons", "buttonGroupClass", "buttonGroupItemClass", "buttonSize", "displayCloneButton", "displayAddButton", "displayDeleteButton", "minItems", "maxItems", "moveUpLabel", "moveDownLabel", "deleteLabel", "cloneLabel", "addLabel", "undoDelete", "undoLabel", "deletedLabel", "undoTimeout", "displayDragHandle", "draggable", "dragHandleClass", "dragHandleIconClass"],
     features: [addRepeaterHandler]
   }
 );
@@ -58,12 +69,20 @@ function addRepeaterHandler(node) {
     array.splice(index2, 0, array.splice(index1, 1)[0]);
     return array;
   };
-  const uuid = typeof crypto !== "undefined" && crypto.randomUUID ? crypto.randomUUID() : Math.random().toString(36).slice(2);
   node.on("created", () => {
     if (node.context) {
       let dragStartIndex = null;
-      let dragOverIndex = null;
-      const newItem = node.context.newItem || {};
+      const makeNewItem = () => clonePlain(node.context?.newItem || {});
+      const instanceId = String(node.props.id ?? node.name);
+      const context = node.context;
+      context.dragOverIndex = null;
+      let undoTimer;
+      const forgetRemoved = () => {
+        clearTimeout(undoTimer);
+        undoTimer = void 0;
+        context.removedItem = void 0;
+      };
+      node.on("destroying", () => clearTimeout(undoTimer));
       node.context.listName = node.name;
       node.context.renderButtons = !node.context.hideButtonGroup;
       node.context.insertButtonSize = node.context.insertButtonSize ? node.context.insertButtonSize : "";
@@ -75,38 +94,66 @@ function addRepeaterHandler(node) {
       node.context.internalDragHandleClass = node.context.dragHandleClass ? `formkit-repeater-drag-handle ${node.context.dragHandleClass}` : "formkit-repeater-drag-handle";
       node.context.internalListClass = node.context.listClass ? `formkit-items ${node.context.listClass}` : "formkit-items";
       node.context.internalListItemClass = node.context.listItemClass ? `formkit-item ${node.context.listItemClass}` : "formkit-item";
-      node.context.internalListId = `formkit-items-${uuid}`;
+      node.context.moveUpLabel = node.context.moveUpLabel || "Move item up";
+      node.context.moveDownLabel = node.context.moveDownLabel || "Move item down";
+      node.context.deleteLabel = node.context.deleteLabel || "Delete item";
+      node.context.cloneLabel = node.context.cloneLabel || "Clone item";
+      node.context.addLabel = node.context.addLabel || "Add item below";
+      node.context.undoDelete = !!node.context.undoDelete;
+      node.context.undoLabel = node.context.undoLabel || "Undo";
+      node.context.deletedLabel = node.context.deletedLabel || "Item deleted";
+      node.context.undoTimeout = node.context.undoTimeout !== void 0 ? Number(node.context.undoTimeout) : 8e3;
+      node.context.removedItem = void 0;
+      node.context.minItems = node.context.minItems !== void 0 ? node.context.minItems : 0;
+      node.context.maxItems = node.context.maxItems !== void 0 ? node.context.maxItems : Number.POSITIVE_INFINITY;
+      node.context.repeaterValidation = [["+length", node.context.minItems, node.context.maxItems]];
+      node.context.internalListId = `formkit-items-${instanceId}`;
       node.context.getListItemClass = (index) => {
-        if (dragOverIndex === index && dragStartIndex !== index)
+        if (context.dragOverIndex === index && dragStartIndex !== index)
           return `${node.context?.internalListItemClass} formkit-repeater-drop-target`;
         return node.context?.internalListItemClass?.toString() ?? "";
       };
       node.context.getListItemId = (index) => {
-        return `formkit-item-${index}-${uuid}`;
+        return `formkit-item-${index}-${instanceId}`;
       };
       node.context.insertNode = (parentNode) => () => {
         if (parentNode && Array.isArray(parentNode._value)) {
-          const newArray = [{ ...newItem }, ...parentNode.value];
+          const newArray = [makeNewItem(), ...parentNode.value];
           parentNode.input(newArray, false);
         }
       };
       node.context.removeNode = (parentNode, index) => () => {
         if (parentNode && Array.isArray(parentNode._value)) {
+          const removed = clonePlain(parentNode._value[index]);
           parentNode.input(parentNode._value.filter((_, i) => i !== index), false);
+          if (context.undoDelete) {
+            clearTimeout(undoTimer);
+            context.removedItem = { index, item: removed };
+            const timeout = Number(context.undoTimeout);
+            undoTimer = timeout > 0 ? setTimeout(forgetRemoved, timeout) : void 0;
+          }
+        }
+      };
+      node.context.undoRemoveNode = (parentNode) => () => {
+        const removed = context.removedItem;
+        if (removed && parentNode && Array.isArray(parentNode._value) && parentNode._value.length < Number(context.maxItems)) {
+          const array = [...parentNode.value];
+          array.splice(Math.min(removed.index, array.length), 0, clonePlain(removed.item));
+          parentNode.input(array, false);
         }
+        forgetRemoved();
       };
       node.context.addNode = (parentNode, index) => () => {
         if (parentNode && Array.isArray(parentNode._value)) {
           const array = parentNode.value;
-          array.splice(index + 1, 0, newItem);
+          array.splice(index + 1, 0, makeNewItem());
           parentNode.input(array, false);
         }
       };
       node.context.cloneNode = (parentNode, index) => () => {
         if (parentNode && Array.isArray(parentNode._value)) {
-          const item = parentNode.value[index];
           const array = parentNode.value;
-          array.splice(index + 1, 0, item);
+          array.splice(index + 1, 0, clonePlain(array[index]));
           parentNode.input(array, false);
         }
       };
@@ -131,37 +178,37 @@ function addRepeaterHandler(node) {
       };
       node.context.dragNodeOver = (targetIndex) => (event) => {
         event?.preventDefault();
-        dragOverIndex = targetIndex;
+        context.dragOverIndex = targetIndex;
         if (event?.dataTransfer)
           event.dataTransfer.dropEffect = "move";
       };
       node.context.dragNodeLeave = (targetIndex) => () => {
-        if (dragOverIndex === targetIndex)
-          dragOverIndex = null;
+        if (context.dragOverIndex === targetIndex)
+          context.dragOverIndex = null;
       };
       node.context.dropNode = (parentNode, targetIndex) => (event) => {
         event?.preventDefault();
         if (!parentNode || !Array.isArray(parentNode._value)) {
-          dragOverIndex = null;
+          context.dragOverIndex = null;
           return;
         }
         const sourceFromEvent = Number.parseInt(event?.dataTransfer?.getData("text/plain") || "", 10);
         const sourceIndex = Number.isInteger(sourceFromEvent) ? sourceFromEvent : dragStartIndex;
         if (sourceIndex === null || sourceIndex === targetIndex) {
-          dragOverIndex = null;
+          context.dragOverIndex = null;
           return;
         }
         if (sourceIndex < 0 || sourceIndex >= parentNode.value.length) {
-          dragOverIndex = null;
+          context.dragOverIndex = null;
           return;
         }
         parentNode.input(swapElements(parentNode.value, sourceIndex, targetIndex), false);
         dragStartIndex = null;
-        dragOverIndex = null;
+        context.dragOverIndex = null;
       };
       node.context.dragNodeEnd = () => {
         dragStartIndex = null;
-        dragOverIndex = null;
+        context.dragOverIndex = null;
       };
     }
   });

package/dist/plugins/autoAnimate.d.ts

@@ -0,0 +1,9 @@
+import type { AutoAnimateOptions } from '@formkit/auto-animate';
+import type { FormKitNode } from '@formkit/core';
+/** Sections to animate, per input type. `global` applies to every input. */
+export type AutoAnimateTargets = Record<string, string[]>;
+/**
+ * Drop-in replacement for `createAutoAnimatePlugin` from `@formkit/addons` with the same
+ * arguments, that does not stack animations on an element after inputs are added to it.
+ */
+export declare function createAutoAnimatePlugin(options?: Partial<AutoAnimateOptions>, targets?: AutoAnimateTargets): (node: FormKitNode) => void;

package/dist/plugins/autoAnimate.js

@@ -0,0 +1,93 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createAutoAnimatePlugin = createAutoAnimatePlugin;
+var _autoAnimate = _interopRequireDefault(require("@formkit/auto-animate"));
+var _core = require("@formkit/core");
+var _inputs = require("@formkit/inputs");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const DEFAULT_KEY = "true";
+const optionsByKey = /* @__PURE__ */new Map();
+const attached = /* @__PURE__ */new WeakSet();
+const pendingIds = /* @__PURE__ */new Set();
+let observer = null;
+let attachTimer;
+function attachNewTargets() {
+  if (typeof document === "undefined") return;
+  document.querySelectorAll("[data-auto-animate]").forEach(target => {
+    if (attached.has(target)) return;
+    attached.add(target);
+    (0, _autoAnimate.default)(target, optionsByKey.get(target.getAttribute("data-auto-animate") ?? "") ?? {});
+  });
+}
+function checkPendingIds() {
+  if (typeof document === "undefined") return;
+  pendingIds.forEach(id => {
+    if (!document.getElementById(id)) return;
+    pendingIds.delete(id);
+    clearTimeout(attachTimer);
+    attachTimer = setTimeout(attachNewTargets, 250);
+  });
+}
+function observeUntilRendered() {
+  if (observer || typeof document === "undefined") return;
+  checkPendingIds();
+  if (!pendingIds.size) return;
+  observer = new MutationObserver(() => {
+    checkPendingIds();
+    if (!pendingIds.size) {
+      observer?.disconnect();
+      observer = null;
+    }
+  });
+  observer.observe(document, {
+    childList: true,
+    subtree: true
+  });
+}
+function createAutoAnimatePlugin(options = {}, targets = {}) {
+  optionsByKey.set(DEFAULT_KEY, options);
+  return node => {
+    node.on("created", () => {
+      if (typeof node.props.definition?.schema !== "function") return;
+      const typeTargets = targets[node.props.type] ?? [];
+      const originalSchema = node.props.definition.schema;
+      node.props.definition.schema = extensions => {
+        const schema = originalSchema(extensions);
+        const finalSchema = Array.isArray(schema) ? schema[0] : schema;
+        let marked = false;
+        (0, _inputs.eachSection)(finalSchema, section => {
+          if (!(0, _core.isDOM)(section)) return;
+          let key;
+          const meta = section.meta;
+          if (meta?.autoAnimate) {
+            key = DEFAULT_KEY;
+            if (typeof meta.autoAnimate === "object") {
+              key = `${node.props.id}-${meta.section ?? "section"}`;
+              optionsByKey.set(key, {
+                ...options,
+                ...meta.autoAnimate
+              });
+            }
+          } else {
+            const sectionName = meta?.section;
+            if (typeof sectionName === "string" && (targets.global?.includes(sectionName) || typeTargets.includes(sectionName))) key = DEFAULT_KEY;
+          }
+          if (key === void 0) return;
+          section.attrs = {
+            ...section.attrs,
+            "data-auto-animate": key
+          };
+          marked = true;
+        });
+        if (marked && node.props.id && typeof window !== "undefined") {
+          pendingIds.add(node.props.id);
+          observeUntilRendered();
+        }
+        return finalSchema;
+      };
+    });
+  };
+}

package/dist/plugins/autoAnimate.mjs

@@ -0,0 +1,87 @@
+import autoAnimate from "@formkit/auto-animate";
+import { isDOM } from "@formkit/core";
+import { eachSection } from "@formkit/inputs";
+const DEFAULT_KEY = "true";
+const optionsByKey = /* @__PURE__ */ new Map();
+const attached = /* @__PURE__ */ new WeakSet();
+const pendingIds = /* @__PURE__ */ new Set();
+let observer = null;
+let attachTimer;
+function attachNewTargets() {
+  if (typeof document === "undefined")
+    return;
+  document.querySelectorAll("[data-auto-animate]").forEach((target) => {
+    if (attached.has(target))
+      return;
+    attached.add(target);
+    autoAnimate(target, optionsByKey.get(target.getAttribute("data-auto-animate") ?? "") ?? {});
+  });
+}
+function checkPendingIds() {
+  if (typeof document === "undefined")
+    return;
+  pendingIds.forEach((id) => {
+    if (!document.getElementById(id))
+      return;
+    pendingIds.delete(id);
+    clearTimeout(attachTimer);
+    attachTimer = setTimeout(attachNewTargets, 250);
+  });
+}
+function observeUntilRendered() {
+  if (observer || typeof document === "undefined")
+    return;
+  checkPendingIds();
+  if (!pendingIds.size)
+    return;
+  observer = new MutationObserver(() => {
+    checkPendingIds();
+    if (!pendingIds.size) {
+      observer?.disconnect();
+      observer = null;
+    }
+  });
+  observer.observe(document, { childList: true, subtree: true });
+}
+export function createAutoAnimatePlugin(options = {}, targets = {}) {
+  optionsByKey.set(DEFAULT_KEY, options);
+  return (node) => {
+    node.on("created", () => {
+      if (typeof node.props.definition?.schema !== "function")
+        return;
+      const typeTargets = targets[node.props.type] ?? [];
+      const originalSchema = node.props.definition.schema;
+      node.props.definition.schema = (extensions) => {
+        const schema = originalSchema(extensions);
+        const finalSchema = Array.isArray(schema) ? schema[0] : schema;
+        let marked = false;
+        eachSection(finalSchema, (section) => {
+          if (!isDOM(section))
+            return;
+          let key;
+          const meta = section.meta;
+          if (meta?.autoAnimate) {
+            key = DEFAULT_KEY;
+            if (typeof meta.autoAnimate === "object") {
+              key = `${node.props.id}-${meta.section ?? "section"}`;
+              optionsByKey.set(key, { ...options, ...meta.autoAnimate });
+            }
+          } else {
+            const sectionName = meta?.section;
+            if (typeof sectionName === "string" && (targets.global?.includes(sectionName) || typeTargets.includes(sectionName)))
+              key = DEFAULT_KEY;
+          }
+          if (key === void 0)
+            return;
+          section.attrs = { ...section.attrs, "data-auto-animate": key };
+          marked = true;
+        });
+        if (marked && node.props.id && typeof window !== "undefined") {
+          pendingIds.add(node.props.id);
+          observeUntilRendered();
+        }
+        return finalSchema;
+      };
+    });
+  };
+}

package/dist/plugins/index.d.ts

@@ -1,3 +1,5 @@
 import type { FormKitNode } from '@formkit/core';
 export declare function addFormAsteriskPlugin(node: FormKitNode): void;
 export declare function addLabelPlugin(node: FormKitNode): void;
+export { createAutoAnimatePlugin } from './autoAnimate';
+export type { AutoAnimateTargets } from './autoAnimate';

package/dist/plugins/index.js

@@ -5,6 +5,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.addFormAsteriskPlugin = addFormAsteriskPlugin;
 exports.addLabelPlugin = addLabelPlugin;
+Object.defineProperty(exports, "createAutoAnimatePlugin", {
+  enumerable: true,
+  get: function () {
+    return _autoAnimate.createAutoAnimatePlugin;
+  }
+});
+var _autoAnimate = require("./autoAnimate");
 function addFormAsteriskPlugin(node) {
   if (!/^form[A-Z]/.test(node.props.type) || node.props.type.startsWith("formOutput")) return;
   node.on("created", () => {

package/dist/plugins/index.mjs

@@ -53,3 +53,4 @@ export function addLabelPlugin(node) {
     }
   });
 }
+export { createAutoAnimatePlugin } from "./autoAnimate.mjs";

package/dist/sass/formkit-openvue.scss

@@ -314,7 +314,8 @@ $grid-breakpoints: (
   align-items: stretch;
   gap: 1rem;
   width: 100%;
-  min-width: 600px;
+  // never wider than the container it is in
+  min-width: min(600px, 100%);
 }
 
 .p-formkit-transfer-list-container {
@@ -333,6 +334,36 @@ $grid-breakpoints: (
   gap: 0.5rem;
 }
 
+// Repeater: the bar that offers to put back a deleted row
+.formkit-repeater-undo {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.25rem 0.5rem;
+  margin-top: 0.5rem;
+  border: 1px solid var(--p-content-border-color);
+  border-radius: var(--p-content-border-radius);
+  background: var(--p-content-hover-background);
+  font-size: 0.875rem;
+}
+
+// Narrow screens: the lists are stacked, the buttons sit between them in a row and their arrows point down and up.
+@media (max-width: 640px) {
+  .p-formkit-transfer {
+    flex-direction: column;
+    min-width: 0;
+  }
+
+  .p-formkit-transfer-buttons {
+    flex-direction: row;
+    flex-wrap: wrap;
+
+    .oi {
+      transform: rotate(90deg);
+    }
+  }
+}
+
 .p-formkit-transfer-option {
   width: 100%;
 }

package/dist/style.css

@@ -1 +1 @@
-:root{--formkit-error-color: #ef9a9a}.formkit-form .formkit-messages{margin:.125rem 0;padding-top:.5rem;padding-left:.5rem}.formkit-form .formkit-message{list-style:none;padding:0;margin:0;color:var(--formkit-error-color);font-size:.8rem}.formkit-form .formkit-outer{padding-bottom:.8rem}.formkit-form .formkit-outer .formkit-messages{margin:.125rem 0;padding-top:.25rem;padding-left:0}.formkit-form .formkit-outer .formkit-inner .p-formkit .p-formkit-icon{box-sizing:border-box;width:100%}.formkit-form .formkit-outer .formkit-inner .p-formkit .p-inputtext,.formkit-form .formkit-outer .formkit-inner .p-formkit .p-textarea,.formkit-form .formkit-outer .formkit-inner .p-formkit .p-password,.formkit-form .formkit-outer .formkit-inner .p-formkit .p-multiselect,.formkit-form .formkit-outer .formkit-inner .p-formkit .p-select,.formkit-form .formkit-outer .formkit-inner .p-formkit .p-editor{box-sizing:border-box;width:100%}.formkit-form .formkit-outer .formkit-inner .p-formkit .p-inputtext.p-colorpicker-preview,.formkit-form .formkit-outer .formkit-inner .p-formkit .p-textarea.p-colorpicker-preview,.formkit-form .formkit-outer .formkit-inner .p-formkit .p-password.p-colorpicker-preview,.formkit-form .formkit-outer .formkit-inner .p-formkit .p-multiselect.p-colorpicker-preview,.formkit-form .formkit-outer .formkit-inner .p-formkit .p-select.p-colorpicker-preview,.formkit-form .formkit-outer .formkit-inner .p-formkit .p-editor.p-colorpicker-preview{width:2rem}.formkit-form .formkit-outer .formkit-help{margin:.25rem 0 0 0;font-size:.8rem;color:var(--text-color-secondary)}.formkit-form .formkit-label{display:block;margin:0;padding-bottom:.5rem;font-weight:bold;font-size:.8rem}.formkit-form .p-formkit>*{margin-right:.5rem}.formkit-form .p-formkit>*:last-child,.formkit-form .p-formkit>*:only-child{margin-right:0}.formkit-form .p-formkit-options{display:flex;flex-wrap:wrap;gap:.5rem}.formkit-form .p-formkit-options .p-formkit-option{display:flex;align-items:center}.formkit-form .p-formkit-options .p-formkit-option label{margin-left:.5rem}.formkit-form .formkit-fieldset{margin:0;padding:0;border-radius:0;border:0}.formkit-form .formkit-fieldset:focus-within{border:0}.formkit-form .formkit-fieldset>.formkit-help{margin-top:0;margin-bottom:0}.formkit-form .formkit-legend{display:block;margin:0;padding:0}.formkit-form .formkit-actions{padding-top:.5rem;display:flex}.formkit-form .formkit-actions button{margin-right:.5rem}.formkit-form .p-action-buttons{margin-top:.25rem}.formkit-form .p-action-buttons .p-button{margin-right:.5rem}.formkit-form .p-action-buttons span .p-space{margin-right:3rem}.formkit-form .p-chip-item{align-items:center;background:var(--p-surface-500);color:var(--p-surface-0);border-radius:1rem;padding:.2rem .5rem}.formkit-form .formkit-repeater-drag-handle{display:inline-flex;align-items:center;cursor:grab;user-select:none}.formkit-form .formkit-item[draggable=true]{cursor:grab}.formkit-form .formkit-item[draggable=true]:active{cursor:grabbing}.formkit-form .formkit-item[draggable=true].formkit-repeater-drop-target{outline:1px dashed var(--p-primary-color, #3b82f6);outline-offset:2px;background:color-mix(in srgb, var(--p-primary-color, #3b82f6) 12%, transparent)}.p-formkit-data-view .formkit-outer{padding-bottom:.5rem}.p-formkit-data-view.form-horizontal{padding-bottom:.8rem}.p-formkit-data-view .formkit-help{padding-top:.25rem;margin:0}.p-formkit-data-view ul,.p-formkit-data-view ol{padding-inline-start:1rem;margin-block-start:0;margin-block-end:0}.p-formkit-data-edit .formkit-outer[data-type=formCheckbox] .formkit-wrapper{display:flex;flex-wrap:wrap}.p-formkit-data-edit .formkit-outer[data-type=formCheckbox] .formkit-wrapper .formkit-inner{width:auto !important}.p-formkit-data-edit .formkit-outer[data-type=formCheckbox] .formkit-wrapper label{width:auto;order:2;padding:.125rem 0}.p-formkit-data-edit .formkit-outer[data-type=formCheckbox] .formkit-wrapper label:after{content:""}.p-formkit-data-edit .formkit-outer[data-type=formCheckbox] .formkit-wrapper label+.formkit-inner{margin-left:0 !important;order:1;flex-basis:2rem;flex-grow:0;flex-shrink:0;overflow:hidden}.p-formkit-data-edit .formkit-outer[data-type=formCheckbox] .formkit-wrapper label+.formkit-inner:has(label){flex-grow:1;flex-basis:100%}.p-formkit-data-edit .formkit-outer[data-type=formCheckbox] .formkit-wrapper label:first-child:nth-last-child(3),.p-formkit-data-edit .formkit-outer[data-type=formCheckbox] .formkit-wrapper label:first-child:nth-last-child(3)~label{width:auto}.p-formkit-data-edit .formkit-outer[data-type=formCheckbox] .formkit-wrapper label:first-child:nth-last-child(3){order:1}.p-formkit-data-edit .formkit-outer[data-type=formCheckbox] .formkit-wrapper label:first-child:nth-last-child(3)+div.p-checkbox{order:2;width:auto}.p-formkit-data-edit .formkit-outer[data-type=formCheckbox] .formkit-wrapper label:first-child:nth-last-child(3)~label{order:3}.p-formkit-data-edit .formkit-outer[data-type=formCheckbox] .formkit-wrapper .formkit-inner:first-child{margin-left:0 !important}.p-formkit-data-edit .formkit-outer[data-type=formCheckbox] .formkit-wrapper .formkit-inner:first-child .p-formkit{display:flex}.p-formkit-data-edit .formkit-outer[data-type=formCheckbox] .formkit-wrapper .p-checkbox:not(:only-child){width:2rem;overflow:hidden}.p-formkit-data-edit .formkit-outer[data-type=formCheckbox] .formkit-help{width:auto !important}.p-formkit-transfer{display:flex;align-items:stretch;gap:1rem;width:100%;min-width:600px}.p-formkit-transfer-list-container{display:flex;flex-direction:column;flex:1;gap:.5rem;min-width:0}.p-formkit-transfer-buttons{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem}.p-formkit-transfer-option{width:100%}.p-formkit-transfer-option-draggable{cursor:grab}.p-formkit-transfer-option-draggable:active{cursor:grabbing}.p-formkit-data-debug pre,.p-formkit-data-debug span{font-size:.75rem;line-height:1rem}@media(min-width: 1024px){.formkit-form{display:flex;flex-wrap:wrap;margin-left:-0.5rem;margin-right:-0.5rem}.formkit-form>*{flex-shrink:0;width:100%;max-width:100%;padding-left:.5rem;padding-right:.5rem}.col-1{width:8.3333333333%}.col-2{width:16.6666666667%}.col-3{width:25%}.col-4{width:33.3333333333%}.col-5{width:41.6666666667%}.col-6{width:50%}.col-7{width:58.3333333333%}.col-8{width:66.6666666667%}.col-9{width:75%}.col-10{width:83.3333333333%}.col-11{width:91.6666666667%}.col-12{width:100%}}@media(min-width: 768px){.formkit-form.form-horizontal .formkit-wrapper{display:flex}.formkit-form.form-horizontal .formkit-wrapper label{display:inline-block;padding:0 .25rem 0 0;font-size:inherit}.formkit-form.form-horizontal .formkit-wrapper label:after{content:":"}}@media(min-width: 768px)and (min-width: 768px){.formkit-form.form-horizontal.form-horizontal-checkbox-indent .formkit-outer[data-type=formCheckbox]{padding-left:33.3333333333%}}@media(min-width: 768px){.p-formkit-data-view .formkit-form.form-horizontal label{white-space:nowrap}.p-formkit-data-edit .formkit-form.form-horizontal .formkit-outer{width:100%}.p-formkit-data-edit .formkit-form.form-horizontal .formkit-outer label{width:33.3333333333%;padding-top:.25rem;line-height:normal}.p-formkit-data-edit .formkit-form.form-horizontal .formkit-outer .formkit-inner{width:66.6666666667%}.p-formkit-data-edit .formkit-form.form-horizontal div[data-type=formCheckbox] .formkit-inner{margin-left:auto}.p-formkit-data-edit .formkit-form.form-horizontal div[data-type=formCheckbox] .formkit-inner .p-formkit{display:flex}.p-formkit-data-edit .formkit-form.form-horizontal div[data-type=formCheckbox] .formkit-inner label{width:auto;padding:0}.p-formkit-data-edit .formkit-form.form-horizontal .formkit-help,.p-formkit-data-edit .formkit-form.form-horizontal .formkit-messages{width:66.6666666667%;margin-left:auto}}
+:root{--formkit-error-color: #ef9a9a}.formkit-form .formkit-messages{margin:.125rem 0;padding-top:.5rem;padding-left:.5rem}.formkit-form .formkit-message{list-style:none;padding:0;margin:0;color:var(--formkit-error-color);font-size:.8rem}.formkit-form .formkit-outer{padding-bottom:.8rem}.formkit-form .formkit-outer .formkit-messages{margin:.125rem 0;padding-top:.25rem;padding-left:0}.formkit-form .formkit-outer .formkit-inner .p-formkit .p-formkit-icon{box-sizing:border-box;width:100%}.formkit-form .formkit-outer .formkit-inner .p-formkit .p-inputtext,.formkit-form .formkit-outer .formkit-inner .p-formkit .p-textarea,.formkit-form .formkit-outer .formkit-inner .p-formkit .p-password,.formkit-form .formkit-outer .formkit-inner .p-formkit .p-multiselect,.formkit-form .formkit-outer .formkit-inner .p-formkit .p-select,.formkit-form .formkit-outer .formkit-inner .p-formkit .p-editor{box-sizing:border-box;width:100%}.formkit-form .formkit-outer .formkit-inner .p-formkit .p-inputtext.p-colorpicker-preview,.formkit-form .formkit-outer .formkit-inner .p-formkit .p-textarea.p-colorpicker-preview,.formkit-form .formkit-outer .formkit-inner .p-formkit .p-password.p-colorpicker-preview,.formkit-form .formkit-outer .formkit-inner .p-formkit .p-multiselect.p-colorpicker-preview,.formkit-form .formkit-outer .formkit-inner .p-formkit .p-select.p-colorpicker-preview,.formkit-form .formkit-outer .formkit-inner .p-formkit .p-editor.p-colorpicker-preview{width:2rem}.formkit-form .formkit-outer .formkit-help{margin:.25rem 0 0 0;font-size:.8rem;color:var(--text-color-secondary)}.formkit-form .formkit-label{display:block;margin:0;padding-bottom:.5rem;font-weight:bold;font-size:.8rem}.formkit-form .p-formkit>*{margin-right:.5rem}.formkit-form .p-formkit>*:last-child,.formkit-form .p-formkit>*:only-child{margin-right:0}.formkit-form .p-formkit-options{display:flex;flex-wrap:wrap;gap:.5rem}.formkit-form .p-formkit-options .p-formkit-option{display:flex;align-items:center}.formkit-form .p-formkit-options .p-formkit-option label{margin-left:.5rem}.formkit-form .formkit-fieldset{margin:0;padding:0;border-radius:0;border:0}.formkit-form .formkit-fieldset:focus-within{border:0}.formkit-form .formkit-fieldset>.formkit-help{margin-top:0;margin-bottom:0}.formkit-form .formkit-legend{display:block;margin:0;padding:0}.formkit-form .formkit-actions{padding-top:.5rem;display:flex}.formkit-form .formkit-actions button{margin-right:.5rem}.formkit-form .p-action-buttons{margin-top:.25rem}.formkit-form .p-action-buttons .p-button{margin-right:.5rem}.formkit-form .p-action-buttons span .p-space{margin-right:3rem}.formkit-form .p-chip-item{align-items:center;background:var(--p-surface-500);color:var(--p-surface-0);border-radius:1rem;padding:.2rem .5rem}.formkit-form .formkit-repeater-drag-handle{display:inline-flex;align-items:center;cursor:grab;user-select:none}.formkit-form .formkit-item[draggable=true]{cursor:grab}.formkit-form .formkit-item[draggable=true]:active{cursor:grabbing}.formkit-form .formkit-item[draggable=true].formkit-repeater-drop-target{outline:1px dashed var(--p-primary-color, #3b82f6);outline-offset:2px;background:color-mix(in srgb, var(--p-primary-color, #3b82f6) 12%, transparent)}.p-formkit-data-view .formkit-outer{padding-bottom:.5rem}.p-formkit-data-view.form-horizontal{padding-bottom:.8rem}.p-formkit-data-view .formkit-help{padding-top:.25rem;margin:0}.p-formkit-data-view ul,.p-formkit-data-view ol{padding-inline-start:1rem;margin-block-start:0;margin-block-end:0}.p-formkit-data-edit .formkit-outer[data-type=formCheckbox] .formkit-wrapper{display:flex;flex-wrap:wrap}.p-formkit-data-edit .formkit-outer[data-type=formCheckbox] .formkit-wrapper .formkit-inner{width:auto !important}.p-formkit-data-edit .formkit-outer[data-type=formCheckbox] .formkit-wrapper label{width:auto;order:2;padding:.125rem 0}.p-formkit-data-edit .formkit-outer[data-type=formCheckbox] .formkit-wrapper label:after{content:""}.p-formkit-data-edit .formkit-outer[data-type=formCheckbox] .formkit-wrapper label+.formkit-inner{margin-left:0 !important;order:1;flex-basis:2rem;flex-grow:0;flex-shrink:0;overflow:hidden}.p-formkit-data-edit .formkit-outer[data-type=formCheckbox] .formkit-wrapper label+.formkit-inner:has(label){flex-grow:1;flex-basis:100%}.p-formkit-data-edit .formkit-outer[data-type=formCheckbox] .formkit-wrapper label:first-child:nth-last-child(3),.p-formkit-data-edit .formkit-outer[data-type=formCheckbox] .formkit-wrapper label:first-child:nth-last-child(3)~label{width:auto}.p-formkit-data-edit .formkit-outer[data-type=formCheckbox] .formkit-wrapper label:first-child:nth-last-child(3){order:1}.p-formkit-data-edit .formkit-outer[data-type=formCheckbox] .formkit-wrapper label:first-child:nth-last-child(3)+div.p-checkbox{order:2;width:auto}.p-formkit-data-edit .formkit-outer[data-type=formCheckbox] .formkit-wrapper label:first-child:nth-last-child(3)~label{order:3}.p-formkit-data-edit .formkit-outer[data-type=formCheckbox] .formkit-wrapper .formkit-inner:first-child{margin-left:0 !important}.p-formkit-data-edit .formkit-outer[data-type=formCheckbox] .formkit-wrapper .formkit-inner:first-child .p-formkit{display:flex}.p-formkit-data-edit .formkit-outer[data-type=formCheckbox] .formkit-wrapper .p-checkbox:not(:only-child){width:2rem;overflow:hidden}.p-formkit-data-edit .formkit-outer[data-type=formCheckbox] .formkit-help{width:auto !important}.p-formkit-transfer{display:flex;align-items:stretch;gap:1rem;width:100%;min-width:min(600px,100%)}.p-formkit-transfer-list-container{display:flex;flex-direction:column;flex:1;gap:.5rem;min-width:0}.p-formkit-transfer-buttons{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem}.formkit-repeater-undo{display:flex;align-items:center;gap:.5rem;padding:.25rem .5rem;margin-top:.5rem;border:1px solid var(--p-content-border-color);border-radius:var(--p-content-border-radius);background:var(--p-content-hover-background);font-size:.875rem}@media(max-width: 640px){.p-formkit-transfer{flex-direction:column;min-width:0}.p-formkit-transfer-buttons{flex-direction:row;flex-wrap:wrap}.p-formkit-transfer-buttons .oi{transform:rotate(90deg)}}.p-formkit-transfer-option{width:100%}.p-formkit-transfer-option-draggable{cursor:grab}.p-formkit-transfer-option-draggable:active{cursor:grabbing}.p-formkit-data-debug pre,.p-formkit-data-debug span{font-size:.75rem;line-height:1rem}@media(min-width: 1024px){.formkit-form{display:flex;flex-wrap:wrap;margin-left:-0.5rem;margin-right:-0.5rem}.formkit-form>*{flex-shrink:0;width:100%;max-width:100%;padding-left:.5rem;padding-right:.5rem}.col-1{width:8.3333333333%}.col-2{width:16.6666666667%}.col-3{width:25%}.col-4{width:33.3333333333%}.col-5{width:41.6666666667%}.col-6{width:50%}.col-7{width:58.3333333333%}.col-8{width:66.6666666667%}.col-9{width:75%}.col-10{width:83.3333333333%}.col-11{width:91.6666666667%}.col-12{width:100%}}@media(min-width: 768px){.formkit-form.form-horizontal .formkit-wrapper{display:flex}.formkit-form.form-horizontal .formkit-wrapper label{display:inline-block;padding:0 .25rem 0 0;font-size:inherit}.formkit-form.form-horizontal .formkit-wrapper label:after{content:":"}}@media(min-width: 768px)and (min-width: 768px){.formkit-form.form-horizontal.form-horizontal-checkbox-indent .formkit-outer[data-type=formCheckbox]{padding-left:33.3333333333%}}@media(min-width: 768px){.p-formkit-data-view .formkit-form.form-horizontal label{white-space:nowrap}.p-formkit-data-edit .formkit-form.form-horizontal .formkit-outer{width:100%}.p-formkit-data-edit .formkit-form.form-horizontal .formkit-outer label{width:33.3333333333%;padding-top:.25rem;line-height:normal}.p-formkit-data-edit .formkit-form.form-horizontal .formkit-outer .formkit-inner{width:66.6666666667%}.p-formkit-data-edit .formkit-form.form-horizontal div[data-type=formCheckbox] .formkit-inner{margin-left:auto}.p-formkit-data-edit .formkit-form.form-horizontal div[data-type=formCheckbox] .formkit-inner .p-formkit{display:flex}.p-formkit-data-edit .formkit-form.form-horizontal div[data-type=formCheckbox] .formkit-inner label{width:auto;padding:0}.p-formkit-data-edit .formkit-form.form-horizontal .formkit-help,.p-formkit-data-edit .formkit-form.form-horizontal .formkit-messages{width:66.6666666667%;margin-left:auto}}

package/dist/utils/clonePlain.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Deep-copies arrays and plain objects and leaves every other value - class
+ * instances such as `@internationalized/date`'s `CalendarDate`/`Time`/
+ * `ZonedDateTime`, `Date`, `File`, `Map` - as the same reference.
+ *
+ * Not `@formkit/utils`' `cloneAny`: it shares a `Date`/`File`/`Map` but rebuilds a
+ * `CalendarDate` as a plain object without its prototype, so the date inputs lose
+ * the value without any error. A cycle is copied as a cycle.
+ */
+export declare function clonePlain<T>(value: T, seen?: WeakMap<object, unknown>): T;

package/dist/utils/clonePlain.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.clonePlain = clonePlain;
+function isPlainObject(value) {
+  const prototype = Object.getPrototypeOf(value);
+  return prototype === Object.prototype || prototype === null;
+}
+function clonePlain(value, seen = /* @__PURE__ */new WeakMap()) {
+  if (value === null || typeof value !== "object") return value;
+  if (seen.has(value)) return seen.get(value);
+  if (Array.isArray(value)) {
+    const copy2 = [];
+    seen.set(value, copy2);
+    for (const item of value) copy2.push(clonePlain(item, seen));
+    return copy2;
+  }
+  if (!isPlainObject(value)) return value;
+  const copy = Object.getPrototypeOf(value) === null ? /* @__PURE__ */Object.create(null) : {};
+  seen.set(value, copy);
+  for (const key of Object.keys(value)) copy[key] = clonePlain(value[key], seen);
+  return copy;
+}

package/dist/utils/clonePlain.mjs

@@ -0,0 +1,24 @@
+function isPlainObject(value) {
+  const prototype = Object.getPrototypeOf(value);
+  return prototype === Object.prototype || prototype === null;
+}
+export function clonePlain(value, seen = /* @__PURE__ */ new WeakMap()) {
+  if (value === null || typeof value !== "object")
+    return value;
+  if (seen.has(value))
+    return seen.get(value);
+  if (Array.isArray(value)) {
+    const copy2 = [];
+    seen.set(value, copy2);
+    for (const item of value)
+      copy2.push(clonePlain(item, seen));
+    return copy2;
+  }
+  if (!isPlainObject(value))
+    return value;
+  const copy = Object.getPrototypeOf(value) === null ? /* @__PURE__ */ Object.create(null) : {};
+  seen.set(value, copy);
+  for (const key of Object.keys(value))
+    copy[key] = clonePlain(value[key], seen);
+  return copy;
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sfxcode/formkit-openvue",
   "type": "module",
-  "version": "0.8.1",
+  "version": "0.9.0",
   "packageManager": "pnpm@11.0.9+sha512.34ce82e6780233cf9cad8685029a8f81d2e06196c5a9bad98879f7424940c6817c4e4524fb7d38b8553ceed48b9758b8ebaf1abd3600c232c4c8cf7366086f38",
   "author": {
     "name": "Tom",
@@ -79,7 +79,7 @@
     "dev": "vite serve dev",
     "dev:build": "vite build dev",
     "dev:preview": "vite preview dev",
-    "release": "npm run lint && npm run build && changelogen --patch --release  && npm publish --access public && git push --follow-tags",
+    "release": "npm run lint && npm run build && changelogen --major --release  && npm publish --access public && git push --follow-tags",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
     "prepublishOnly": "pnpm build",
@@ -100,51 +100,39 @@
     "@formkit/i18n": "^2.1.2",
     "@formkit/inputs": "^2.1.2",
     "@formkit/vue": "^2.1.2",
-    "@intlify/core": "^11.4.13",
+    "@intlify/core": "^11.4.14",
     "@openvue/openicons": "^1.0.0",
     "@openvue/openicons-vue": "^1.0.0",
     "openvue": "1.0.0",
-    "vue-i18n": "^11.4.13"
+    "vue-i18n": "^11.4.14"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^9.5.1",
     "@openvue/themes": "1.0.0",
     "@types/node": "latest",
-    "@unocss/preset-icons": "^66.10.5",
-    "@unocss/preset-uno": "^66.10.5",
-    "@vitejs/plugin-vue": "^6.0.9",
-    "@vitest/coverage-v8": "^5.0.3",
-    "@vitest/ui": "^5.0.3",
-    "@vue/compiler-sfc": "^3.5.43",
-    "@vue/server-renderer": "^3.5.43",
-    "@vue/test-utils": "^2.5.1",
+    "@vitejs/plugin-vue": "^6.0.10",
+    "@vitest/coverage-v8": "^5.0.5",
+    "@vitest/ui": "^5.0.5",
     "@vue/tsconfig": "^0.9.1",
     "@vueuse/core": "^15.0.0",
-    "@vueuse/head": "^2.0.0",
     "changelogen": "^0.6.2",
-    "chart.js": "^4.5.1",
-    "consola": "^3.4.2",
-    "esbuild": "^0.28.2",
-    "eslint": "^10.12.0",
-    "happy-dom": "^20.14.5",
+    "eslint": "^10.13.0",
+    "happy-dom": "^21.0.3",
     "json-editor-vue": "^0.19.2",
     "mkdist": "^2.4.1",
-    "sass": "^1.105.1",
-    "tslib": "^2.8.1",
+    "sass": "^1.105.2",
     "typescript": "^6.0.3",
     "unbuild": "^3.6.1",
-    "unocss": "^66.10.5",
+    "unocss": "^66.11.0",
     "unplugin-auto-import": "^21.1.0",
     "unplugin-vue-components": "^32.1.0",
-    "vite": "^8.3.2",
+    "vite": "^8.3.4",
     "vite-plugin-pages": "^0.33.3",
-    "vite-ssg": "^28.3.0",
     "vitepress": "2.0.0-alpha.20",
-    "vitest": "^5.0.3",
-    "vue": "^3.5.43",
-    "vue-demi": "^0.14.10",
-    "vue-router": "^5.3.1",
+    "vitest": "^5.0.5",
+    "vue": "^3.5.44",
+    "vue-router": "^5.4.0",
     "vue-sfc-transformer": "^0.3.0",
-    "vue-tsc": "^3.3.12"
+    "vue-tsc": "^3.3.13"
   }
 }