@sfxcode/formkit-openvue 0.8.1 → 0.9.1

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/components/FormOutputLink.vue

@@ -10,8 +10,11 @@ const props = defineProps({ context: {
 } });
 const { hasPrefix, hasPrefixIcon, hasSuffix, hasSuffixIcon } = useFormKitSection(props.context);
 const url = computed(() => {
-	if (props.context?._value) return props.context?._value.indexOf("http") > -1 ? props.context?._value : `https://${props.context?._value}`;
-	else return "";
+	if (props.context?._value) {
+		return props.context?._value.indexOf("http") > -1 ? props.context?._value : `https://${props.context?._value}`;
+	} else {
+		return "";
+	}
 });
 const title = computed(() => {
 	const value = props.context?._value ?? "";

package/dist/composables/useFormKitInput.mjs

@@ -19,7 +19,13 @@ export function useFormKitInput(context) {
   const unstyled = computed(() => {
     return context?.unstyled ?? isGlobalUnstyledMode();
   });
-  const formKitCreateInputSlots = /* @__PURE__ */ new Set(["label", "help", "messages", "message", "input"]);
+  const formKitCreateInputSlots = /* @__PURE__ */ new Set([
+    "label",
+    "help",
+    "messages",
+    "message",
+    "input"
+  ]);
   const validSlotNames = computed(
     () => Object.keys(context?.slots || {}).filter((slotName) => !formKitCreateInputSlots.has(slotName))
   );
@@ -41,5 +47,15 @@ export function useFormKitInput(context) {
       context.node.input(value);
     }
   });
-  return { isInvalid, validSlotNames, styleClass, unstyled, handleBlur, handleChange, handleInput, handleSelect, modelValue };
+  return {
+    isInvalid,
+    validSlotNames,
+    styleClass,
+    unstyled,
+    handleBlur,
+    handleChange,
+    handleInput,
+    handleSelect,
+    modelValue
+  };
 }

package/dist/composables/useFormKitRepeater.mjs

@@ -3,7 +3,12 @@ export function useFormKitRepeater() {
   const { addElement, addComponent, addElementsInOuterDiv } = useFormKitSchema();
   function addInsertButton(label = "Add", innerClass = "", outerClass = "", buttonClass = "p-button-sm", iconClass = "oi oi-plus") {
     return addElementsInOuterDiv([
-      addComponent("Button", { onClick: "$addNode($node)", label, class: buttonClass, icon: iconClass }, "$node.children.length == 0")
+      addComponent("Button", {
+        onClick: "$addNode($node)",
+        label,
+        class: buttonClass,
+        icon: iconClass
+      }, "$node.children.length == 0")
     ], innerClass, outerClass);
   }
   function addListGroupFunctions(data, addNodeDefaultObject = {}) {
@@ -33,13 +38,22 @@ export function useFormKitRepeater() {
     };
     data.copyNode = (parentNode, index) => () => {
       const obj = parentNode.value[index];
-      const newArray = [...parentNode.value, { ...obj }];
+      const newArray = [
+        ...parentNode.value,
+        { ...obj }
+      ];
       parentNode.input(newArray, false);
     };
   }
   function addGroupButtons(innerClass = "", outerClass = "col-4", label = "Actions", help = "", render = "true") {
     const addButtonComponent = (onClick = "", label2 = "", icon = "", severity = "", render2 = "true", styleClass = "p-button-sm") => {
-      return addComponent("Button", { onClick, label: label2, icon, class: styleClass, severity }, render2);
+      return addComponent("Button", {
+        onClick,
+        label: label2,
+        icon,
+        class: styleClass,
+        severity
+      }, render2);
     };
     return addElementsInOuterDiv([
       addButtonComponent("$removeNode($node.parent, $index)", "", "oi oi-times", "danger"),

package/dist/composables/useFormKitSchema.mjs

@@ -54,5 +54,12 @@ export function useFormKitSchema() {
     const helpDiv = addElement("div", [help], { class: "formkit-help" });
     return addElement("div", [wrapperDiv, helpDiv], { class: outerClass, style: "position: relative;" }, render);
   };
-  return { addComponent, addElement, addGroup, addList, addListGroup, addElementsInOuterDiv };
+  return {
+    addComponent,
+    addElement,
+    addGroup,
+    addList,
+    addListGroup,
+    addElementsInOuterDiv
+  };
 }

package/dist/composables/useFormKitSection.mjs

@@ -15,5 +15,11 @@ export function useFormKitSection(context) {
   function generateId() {
     return typeof crypto !== "undefined" && crypto.randomUUID ? crypto.randomUUID() : Math.random().toString(36).slice(2);
   }
-  return { generateId, hasPrefix, hasPrefixIcon, hasSuffix, hasSuffixIcon };
+  return {
+    generateId,
+    hasPrefix,
+    hasPrefixIcon,
+    hasSuffix,
+    hasSuffixIcon
+  };
 }

package/dist/composables/useInputEditor.mjs

@@ -1,7 +1,42 @@
 export function useInputEditor() {
-  const formInputWithOptionNames = ["CascadeSelect", "Listbox", "MultiSelect", "RadioButton", "Select", "SelectButton", "TreeSelect"];
-  const formInputNames = [...formInputWithOptionNames, "AutoComplete", "Checkbox", "ColorPicker", "DatePicker", "Editor", "InputMask", "InputNumber", "InputOtp", "InputText", "Knob", "Password", "Rating", "Slider", "Textarea", "ToggleButton", "ToggleSwitch"].sort();
-  const formOutputNames = ["OutputBoolean", "OutputDate", "OutputDuration", "OutputLink", "OutputList", "OutputNumber", "OutputReference", "OutputText"];
+  const formInputWithOptionNames = [
+    "CascadeSelect",
+    "Listbox",
+    "MultiSelect",
+    "RadioButton",
+    "Select",
+    "SelectButton",
+    "TreeSelect"
+  ];
+  const formInputNames = [
+    ...formInputWithOptionNames,
+    "AutoComplete",
+    "Checkbox",
+    "ColorPicker",
+    "DatePicker",
+    "Editor",
+    "InputMask",
+    "InputNumber",
+    "InputOtp",
+    "InputText",
+    "Knob",
+    "Password",
+    "Rating",
+    "Slider",
+    "Textarea",
+    "ToggleButton",
+    "ToggleSwitch"
+  ].sort();
+  const formOutputNames = [
+    "OutputBoolean",
+    "OutputDate",
+    "OutputDuration",
+    "OutputLink",
+    "OutputList",
+    "OutputNumber",
+    "OutputReference",
+    "OutputText"
+  ];
   function editorDataToSchema(data) {
     if (!data)
       return {};
@@ -16,7 +51,9 @@ export function useInputEditor() {
         }
         return [key, value];
       });
-      tempData = { ...Object.fromEntries(mapped) };
+      tempData = {
+        ...Object.fromEntries(mapped)
+      };
     }
     const readonlyValue = data.readonly === true ? true : void 0;
     const disabledValue = data.disabled === true ? true : void 0;

package/dist/composables/useInputEditorSchema.mjs

@@ -24,7 +24,10 @@ export function useInputEditorSchema() {
     { label: "Dirty", value: "dirty" },
     { label: "Submit", value: "submit" }
   ];
-  function editorSchema(inputOptions = formInputOptions([...formInputNames, ...formOutputNames])) {
+  function editorSchema(inputOptions = formInputOptions([
+    ...formInputNames,
+    ...formOutputNames
+  ])) {
     return [
       {
         $formkit: "formSelect",