@sfxcode/formkit-openvue 0.0.0-stage → 0.8.1

package/dist/definitions/repeater.mjs

@@ -0,0 +1,168 @@
+import { createInput } from "@formkit/vue";
+import { useFormKitSchema } from "../composables/index.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);
+  };
+  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")
+  ], { class: buttonGroupClass }, render);
+}
+function addInsertButton(label = "Add Item", icon = "i-lucide-plus", styleClass = "", buttonSize, render = "true") {
+  return addElement("div", [
+    addComponent("Button", { onClick: "$insertNode($node)", label, icon, size: buttonSize, disabled: "$node.value.length > $maxItems -1" })
+  ], { class: styleClass }, render);
+}
+function addDragHandle(handleClass = "", iconClass = "", render = "true") {
+  return addElement("span", [
+    addElement("i", [], { class: iconClass })
+  ], {
+    "class": handleClass,
+    "aria-label": "Drag to reorder"
+  }, render);
+}
+export const formRepeaterDefinition = createInput(
+  addElement("div", [
+    addList("$listName", [
+      addInsertButton("$insertButtonLabel", "oi oi-plus", "$insertButtonClass", "$insertButtonSize", "$node.children.length == 0 || $alwaysDisplayInsertButton"),
+      addListGroup([
+        addElement("div", [
+          addDragHandle("$internalDragHandleClass", "$dragHandleIconClass", "$renderDragHandle"),
+          { children: "$slots.default" },
+          addButtonGroup("$buttonGroupClass", "$buttonGroupItemClass", "$buttonSize", "$renderButtons")
+        ], {
+          id: "$getListItemId($index)",
+          class: "$getListItemClass($index)",
+          draggable: "$draggable",
+          onDragstart: "$dragNodeStart($node.parent, $index)",
+          onDragover: "$dragNodeOver($index)",
+          onDragleave: "$dragNodeLeave($index)",
+          onDrop: "$dropNode($node.parent, $index)",
+          onDragend: "$dragNodeEnd"
+        })
+      ], true, {})
+    ], true, "true", { value: "$value" })
+  ], { 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"],
+    features: [addRepeaterHandler]
+  }
+);
+function addRepeaterHandler(node) {
+  const swapElements = (array, index1, index2) => {
+    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 || {};
+      node.context.listName = node.name;
+      node.context.renderButtons = !node.context.hideButtonGroup;
+      node.context.insertButtonSize = node.context.insertButtonSize ? node.context.insertButtonSize : "";
+      node.context.buttonSize = node.context.buttonSize ? node.context.buttonSize : "";
+      node.context.renderMoveButtons = !node.context.hideMoveButtons;
+      node.context.draggable = !!node.context.draggable;
+      node.context.renderDragHandle = !!node.context.displayDragHandle;
+      node.context.dragHandleIconClass = node.context.dragHandleIconClass || "oi oi-bars";
+      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.getListItemClass = (index) => {
+        if (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}`;
+      };
+      node.context.insertNode = (parentNode) => () => {
+        if (parentNode && Array.isArray(parentNode._value)) {
+          const newArray = [{ ...newItem }, ...parentNode.value];
+          parentNode.input(newArray, false);
+        }
+      };
+      node.context.removeNode = (parentNode, index) => () => {
+        if (parentNode && Array.isArray(parentNode._value)) {
+          parentNode.input(parentNode._value.filter((_, i) => i !== index), false);
+        }
+      };
+      node.context.addNode = (parentNode, index) => () => {
+        if (parentNode && Array.isArray(parentNode._value)) {
+          const array = parentNode.value;
+          array.splice(index + 1, 0, newItem);
+          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);
+          parentNode.input(array, false);
+        }
+      };
+      node.context.moveNodeUp = (parentNode, index) => () => {
+        if (parentNode && Array.isArray(parentNode._value)) {
+          if (index > 0)
+            parentNode.input(swapElements(parentNode.value, index - 1, index), false);
+        }
+      };
+      node.context.moveNodeDown = (parentNode, index) => () => {
+        if (parentNode && Array.isArray(parentNode._value)) {
+          if (index < parentNode.value.length - 1)
+            parentNode.input(swapElements(parentNode.value, index, index + 1), false);
+        }
+      };
+      node.context.dragNodeStart = (_parentNode, index) => (event) => {
+        dragStartIndex = index;
+        if (event?.dataTransfer) {
+          event.dataTransfer.effectAllowed = "move";
+          event.dataTransfer.setData("text/plain", String(index));
+        }
+      };
+      node.context.dragNodeOver = (targetIndex) => (event) => {
+        event?.preventDefault();
+        dragOverIndex = targetIndex;
+        if (event?.dataTransfer)
+          event.dataTransfer.dropEffect = "move";
+      };
+      node.context.dragNodeLeave = (targetIndex) => () => {
+        if (dragOverIndex === targetIndex)
+          dragOverIndex = null;
+      };
+      node.context.dropNode = (parentNode, targetIndex) => (event) => {
+        event?.preventDefault();
+        if (!parentNode || !Array.isArray(parentNode._value)) {
+          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;
+          return;
+        }
+        if (sourceIndex < 0 || sourceIndex >= parentNode.value.length) {
+          dragOverIndex = null;
+          return;
+        }
+        parentNode.input(swapElements(parentNode.value, sourceIndex, targetIndex), false);
+        dragStartIndex = null;
+        dragOverIndex = null;
+      };
+      node.context.dragNodeEnd = () => {
+        dragStartIndex = null;
+        dragOverIndex = null;
+      };
+    }
+  });
+}

package/dist/index.d.ts

@@ -0,0 +1,148 @@
+import type { FormKitBaseSlots, FormKitInputs } from '@formkit/inputs';
+import type { AutoCompleteSlots, CascadeSelectSlots, CheckboxSlots, ColorPickerSlots, DatePickerSlots, InputMaskSlots, InputNumberSlots, InputOtpSlots, InputTextSlots, KnobSlots, ListboxSlots, MultiSelectSlots, PasswordSlots, RadioButtonSlots, RatingSlots, SelectButtonSlots, SelectSlots, SliderSlots, TextareaSlots, ToggleButtonSlots, ToggleSwitchSlots, TreeSelectSlots } from 'openvue';
+import type { CascadeSelectProps } from 'openvue/cascadeselect';
+import type { ListboxProps } from 'openvue/listbox';
+import type { MultiSelectProps } from 'openvue/multiselect';
+import type { SelectProps } from 'openvue/select';
+import type { SelectButtonProps } from 'openvue/selectbutton';
+import type { TreeSelectProps } from 'openvue/treeselect';
+import { FormKitDataEdit, FormKitDataView } from './components';
+import { useFormInputs, useFormKitRepeater, useFormKitSchema, useInputEditor, useInputEditorSchema } from './composables';
+import { formInputs, formOutputs } from './definitions';
+export { formInputs, FormKitDataEdit, FormKitDataView, formOutputs, useFormInputs, useFormKitRepeater, useFormKitSchema, useInputEditor, useInputEditorSchema, };
+/**
+ * Keeps all slots from 1st argument, add any slots from 2nd type which do not collide with the 1st's names.
+ */
+type MergeSlots<A, B> = A & Omit<B, keyof A>;
+declare module '@formkit/inputs' {
+    interface FormKitInputProps<Props extends FormKitInputs<Props>> {
+        formAutoComplete: {
+            type: 'formAutoComplete';
+        };
+        formInputText: {
+            type: 'formInputText';
+        };
+        formInputNumber: {
+            type: 'formInputNumber';
+        };
+        formInputMask: {
+            type: 'formInputMask';
+        };
+        formPassword: {
+            type: 'formPassword';
+        };
+        formCheckbox: {
+            type: 'formCheckbox';
+        };
+        formToggleSwitch: {
+            type: 'formToggleSwitch';
+        };
+        formTextarea: {
+            type: 'formTextarea';
+        };
+        formSelect: {
+            type: 'formSelect';
+            options?: SelectProps['options'];
+        };
+        formMultiSelect: {
+            type: 'formMultiSelect';
+            options?: MultiSelectProps['options'];
+        };
+        formDatePicker: {
+            type: 'formDatePicker';
+        };
+        formSlider: {
+            type: 'formSlider';
+        };
+        formKnob: {
+            type: 'formKnob';
+        };
+        formRating: {
+            type: 'formRating';
+        };
+        formRadioButton: {
+            type: 'formRadioButton';
+        };
+        formColorPicker: {
+            type: 'formColorPicker';
+        };
+        formToggleButton: {
+            type: 'formToggleButton';
+        };
+        formListbox: {
+            type: 'formListbox';
+            options?: ListboxProps['options'];
+        };
+        formSelectButton: {
+            type: 'formSelectButton';
+            options?: SelectButtonProps['options'];
+        };
+        formCascadeSelect: {
+            type: 'formCascadeSelect';
+            options?: CascadeSelectProps['options'];
+        };
+        formTreeSelect: {
+            type: 'formTreeSelect';
+            options?: TreeSelectProps['options'];
+        };
+        formInputOtp: {
+            type: 'formInputOtp';
+        };
+        formOutputText: {
+            type: 'formOutputText';
+        };
+        formOutputLink: {
+            type: 'formOutputLink';
+        };
+        formOutputReference: {
+            type: 'formOutputReference';
+        };
+        formOutputNumber: {
+            type: 'formOutputNumber';
+        };
+        formOutputDate: {
+            type: 'formOutputDate';
+        };
+        formOutputBoolean: {
+            type: 'formOutputBoolean';
+        };
+        formOutputDuration: {
+            type: 'formOutputDuration';
+        };
+        formOutputList: {
+            type: 'formOutputList';
+        };
+    }
+    interface FormKitInputSlots<Props extends FormKitInputs<Props>> {
+        formAutoComplete: MergeSlots<FormKitBaseSlots<Props>, AutoCompleteSlots>;
+        formCascadeSelect: MergeSlots<FormKitBaseSlots<Props>, CascadeSelectSlots>;
+        formCheckbox: MergeSlots<FormKitBaseSlots<Props>, CheckboxSlots>;
+        formColorPicker: MergeSlots<FormKitBaseSlots<Props>, ColorPickerSlots>;
+        formDatePicker: MergeSlots<FormKitBaseSlots<Props>, DatePickerSlots>;
+        formInputMask: MergeSlots<FormKitBaseSlots<Props>, InputMaskSlots>;
+        formInputNumber: MergeSlots<FormKitBaseSlots<Props>, InputNumberSlots>;
+        formInputOtp: MergeSlots<FormKitBaseSlots<Props>, InputOtpSlots>;
+        formInputText: MergeSlots<FormKitBaseSlots<Props>, InputTextSlots>;
+        formKnob: MergeSlots<FormKitBaseSlots<Props>, KnobSlots>;
+        formListbox: MergeSlots<FormKitBaseSlots<Props>, ListboxSlots>;
+        formMultiSelect: MergeSlots<FormKitBaseSlots<Props>, MultiSelectSlots>;
+        formOutputBoolean: FormKitBaseSlots<Props>;
+        formOutputDate: FormKitBaseSlots<Props>;
+        formOutputDuration: FormKitBaseSlots<Props>;
+        formOutputLink: FormKitBaseSlots<Props>;
+        formOutputList: FormKitBaseSlots<Props>;
+        formOutputNumber: FormKitBaseSlots<Props>;
+        formOutputReference: FormKitBaseSlots<Props>;
+        formOutputText: FormKitBaseSlots<Props>;
+        formPassword: MergeSlots<FormKitBaseSlots<Props>, PasswordSlots>;
+        formRadioButton: MergeSlots<FormKitBaseSlots<Props>, RadioButtonSlots>;
+        formRating: MergeSlots<FormKitBaseSlots<Props>, RatingSlots>;
+        formSelect: MergeSlots<FormKitBaseSlots<Props>, SelectSlots>;
+        formSelectButton: MergeSlots<FormKitBaseSlots<Props>, SelectButtonSlots>;
+        formSlider: MergeSlots<FormKitBaseSlots<Props>, SliderSlots>;
+        formTextarea: MergeSlots<FormKitBaseSlots<Props>, TextareaSlots>;
+        formToggleButton: MergeSlots<FormKitBaseSlots<Props>, ToggleButtonSlots>;
+        formToggleSwitch: MergeSlots<FormKitBaseSlots<Props>, ToggleSwitchSlots>;
+        formTreeSelect: MergeSlots<FormKitBaseSlots<Props>, TreeSelectSlots>;
+    }
+}

package/dist/index.js

@@ -0,0 +1,62 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "FormKitDataEdit", {
+  enumerable: true,
+  get: function () {
+    return _components.FormKitDataEdit;
+  }
+});
+Object.defineProperty(exports, "FormKitDataView", {
+  enumerable: true,
+  get: function () {
+    return _components.FormKitDataView;
+  }
+});
+Object.defineProperty(exports, "formInputs", {
+  enumerable: true,
+  get: function () {
+    return _definitions.formInputs;
+  }
+});
+Object.defineProperty(exports, "formOutputs", {
+  enumerable: true,
+  get: function () {
+    return _definitions.formOutputs;
+  }
+});
+Object.defineProperty(exports, "useFormInputs", {
+  enumerable: true,
+  get: function () {
+    return _composables.useFormInputs;
+  }
+});
+Object.defineProperty(exports, "useFormKitRepeater", {
+  enumerable: true,
+  get: function () {
+    return _composables.useFormKitRepeater;
+  }
+});
+Object.defineProperty(exports, "useFormKitSchema", {
+  enumerable: true,
+  get: function () {
+    return _composables.useFormKitSchema;
+  }
+});
+Object.defineProperty(exports, "useInputEditor", {
+  enumerable: true,
+  get: function () {
+    return _composables.useInputEditor;
+  }
+});
+Object.defineProperty(exports, "useInputEditorSchema", {
+  enumerable: true,
+  get: function () {
+    return _composables.useInputEditorSchema;
+  }
+});
+var _components = require("./components");
+var _composables = require("./composables");
+var _definitions = require("./definitions");

package/dist/index.mjs

@@ -0,0 +1,14 @@
+import { FormKitDataEdit, FormKitDataView } from "./components/index.mjs";
+import { useFormInputs, useFormKitRepeater, useFormKitSchema, useInputEditor, useInputEditorSchema } from "./composables/index.mjs";
+import { formInputs, formOutputs } from "./definitions/index.mjs";
+export {
+  formInputs,
+  FormKitDataEdit,
+  FormKitDataView,
+  formOutputs,
+  useFormInputs,
+  useFormKitRepeater,
+  useFormKitSchema,
+  useInputEditor,
+  useInputEditorSchema
+};

package/dist/plugins/index.d.ts

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

package/dist/plugins/index.js

@@ -0,0 +1,60 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.addFormAsteriskPlugin = addFormAsteriskPlugin;
+exports.addLabelPlugin = addLabelPlugin;
+function addFormAsteriskPlugin(node) {
+  if (!/^form[A-Z]/.test(node.props.type) || node.props.type.startsWith("formOutput")) return;
+  node.on("created", () => {
+    if (node.props.definition?.schema) {
+      const schemaFn = node.props.definition?.schema;
+      node.props.definition.schema = (sectionsSchema = {}) => {
+        sectionsSchema.label = {
+          children: ["$label", {
+            $el: "span",
+            if: "$state.required",
+            attrs: {
+              class: "p-formkit-asterisk"
+            },
+            children: ["*"]
+          }]
+        };
+        return schemaFn(sectionsSchema);
+      };
+    }
+  });
+}
+function addLabelPlugin(node) {
+  if (!/^form[A-Z]/.test(node.props.type)) return;
+  node.on("created", () => {
+    if (node.props.definition?.schema) {
+      const schemaFn = node.props.definition?.schema;
+      node.props.definition.schema = (sectionsSchema = {}) => {
+        sectionsSchema.label = {
+          children: [{
+            $el: "span",
+            attrs: {
+              title: "$help",
+              class: "p-formkit-label"
+            },
+            children: ["$label"]
+          }, {
+            $el: "span",
+            if: "$state.required",
+            attrs: {
+              class: "p-formkit-required",
+              title: "$help"
+            },
+            children: ["*"]
+          }]
+        };
+        sectionsSchema.help = {
+          children: []
+        };
+        return schemaFn(sectionsSchema);
+      };
+    }
+  });
+}

package/dist/plugins/index.mjs

@@ -0,0 +1,55 @@
+export function addFormAsteriskPlugin(node) {
+  if (!/^form[A-Z]/.test(node.props.type) || node.props.type.startsWith("formOutput"))
+    return;
+  node.on("created", () => {
+    if (node.props.definition?.schema) {
+      const schemaFn = node.props.definition?.schema;
+      node.props.definition.schema = (sectionsSchema = {}) => {
+        sectionsSchema.label = {
+          children: ["$label", {
+            $el: "span",
+            if: "$state.required",
+            attrs: {
+              class: "p-formkit-asterisk"
+            },
+            children: ["*"]
+          }]
+        };
+        return schemaFn(sectionsSchema);
+      };
+    }
+  });
+}
+export function addLabelPlugin(node) {
+  if (!/^form[A-Z]/.test(node.props.type))
+    return;
+  node.on("created", () => {
+    if (node.props.definition?.schema) {
+      const schemaFn = node.props.definition?.schema;
+      node.props.definition.schema = (sectionsSchema = {}) => {
+        sectionsSchema.label = {
+          children: [{
+            $el: "span",
+            attrs: {
+              title: "$help",
+              class: "p-formkit-label"
+            },
+            children: ["$label"]
+          }, {
+            $el: "span",
+            if: "$state.required",
+            attrs: {
+              class: "p-formkit-required",
+              title: "$help"
+            },
+            children: ["*"]
+          }]
+        };
+        sectionsSchema.help = {
+          children: []
+        };
+        return schemaFn(sectionsSchema);
+      };
+    }
+  });
+}