@sfxcode/formkit-primevue 1.9.12 → 1.11.0

package/README.md

@@ -11,22 +11,23 @@ Helper classes for using [Formkit](https://formkit.com/) with the [PrimeVue UI F
 ## Usage
 
 ```typescript
-
 import { defaultConfig, plugin } from '@formkit/vue'
 import { primeInputs } from '@sfxcode/formkit-primevue'
 
-  app.use(plugin, defaultConfig({
-    locales: { de, en },
-    // Define the active locale
-    locale: 'en',
-    inputs: primeInputs,
-  }))
+app.use(plugin, defaultConfig({
+  locales: { de, en },
+  // Define the active locale
+  locale: 'en',
+  inputs: primeInputs,
+}))
 ```
 
 ### Schema Helper Functions
 
 [useFormKitSchema](https://github.com/sfxcode/formkit-primevue/blob/main/src/composables/useFormKitSchema.ts) provide functions to simplify the usage of elements, components, lists, ...
 
+[useInputEditorSchema](https://github.com/sfxcode/formkit-primevue/blob/main/src/composables/useInputEditorSchema.ts) provide functions for a component schema generation builder
+
 ### Basic Styling
 
 Basic styling is provided with the [formkit-primevue.scss](https://github.com/sfxcode/formkit-primevue/blob/main/src/sass/formkit-primevue.scss) file.

package/dist/components/PrimeCalendar.vue

@@ -83,7 +83,7 @@ const styleClass = computed(() => (props.context?.state.validationVisible && !pr
       v-bind="context?.attrs"
       :input-id="context.id"
       :disabled="!!context?.disabled"
-      :readonly="context?.attrs._readonly ?? false"
+      :readonly="context?.attrs.readonly ?? false"
       :input-style="context?.attrs.style"
       :input-class="styleClass"
       :tabindex="context?.attrs.tabindex"

package/dist/components/PrimeCascadeSelect.vue

@@ -40,7 +40,7 @@ const styleClass = computed(() => (props.context?.state.validationVisible && !pr
       v-model="context._value"
       v-bind="context?.attrs"
       :disabled="!!context?.disabled"
-      :readonly="context?.attrs._readonly ?? false"
+      :readonly="context?.attrs.readonly ?? false"
       :class="styleClass"
       :tabindex="context?.attrs.tabindex"
       :aria-label="context?.attrs.ariaLabel"

package/dist/components/PrimeCheckbox.vue

@@ -40,7 +40,7 @@ const styleClass = computed(() => (props.context?.state.validationVisible && !pr
       v-bind="context?.attrs"
       :input-id="context.id"
       :disabled="!!context?.disabled"
-      :readonly="context?.attrs._readonly ?? false"
+      :readonly="context?.attrs.readonly ?? false"
       :input-style="context?.attrs.style"
       :input-class="styleClass"
       :tabindex="context?.attrs.tabindex"

package/dist/components/PrimeChips.vue

@@ -34,7 +34,7 @@ const styleClass = computed(() => (props.context?.state.validationVisible && !pr
       v-bind="context?.attrs"
       :input-id="context.id"
       :disabled="!!context?.disabled"
-      :readonly="context?.attrs._readonly ?? false"
+      :readonly="context?.attrs.readonly ?? false"
       :input-style="context?.attrs.style"
       :input-class="styleClass"
       :tabindex="context?.attrs.tabindex"

package/dist/components/PrimeColorPicker.vue

@@ -30,7 +30,7 @@ function handleChange(_: any) {
       v-model="context._value"
       v-bind="context?.attrs"
       :disabled="!!context?.disabled"
-      :readonly="context?.attrs._readonly ?? false"
+      :readonly="context?.attrs.readonly ?? false"
       :style="context?.attrs.style"
       :panel-class="context?.attrs.class"
       :tabindex="context?.attrs.tabindex"

package/dist/components/PrimeDropdown.vue

@@ -62,7 +62,7 @@ const styleClass = computed(() => (props.context?.state.validationVisible && !pr
       v-bind="context?.attrs"
       :input-id="context.id"
       :disabled="!!context?.disabled"
-      :readonly="context?.attrs._readonly ?? false"
+      :readonly="context?.attrs.readonly ?? false"
       :style="context?.attrs.style"
       :class="styleClass"
       :input-style="context?.attrs.style"

package/dist/components/PrimeEditor.vue

@@ -38,7 +38,7 @@ const styleClass = computed(() => (props.context?.state.validationVisible && !pr
       v-model="context._value"
       v-bind="context?.attrs"
       :disabled="!!context?.disabled"
-      :readonly="context?.attrs._readonly ?? false"
+      :readonly="context?.attrs.readonly ?? false"
       :editor-style="context?.attrs.style"
       :class="styleClass"
       :tabindex="context?.attrs.tabindex"

package/dist/components/PrimeInputMask.vue

@@ -59,7 +59,7 @@ const styleClass = computed(() => (props.context?.state.validationVisible && !pr
         v-model="context._value"
         v-bind="context?.attrs"
         :disabled="!!context?.disabled"
-        :readonly="context?.attrs._readonly ?? false"
+        :readonly="context?.attrs.readonly ?? false"
         :class="styleClass"
         :tabindex="context?.attrs.tabindex"
         :aria-label="context?.attrs.ariaLabel"

package/dist/components/PrimeInputNumber.vue

@@ -47,7 +47,7 @@ const styleClass = computed(() => (props.context?.state.validationVisible && !pr
       v-bind="context?.attrs"
       :input-id="context.id"
       :disabled="!!context?.disabled"
-      :readonly="context?.attrs._readonly ?? false"
+      :readonly="context?.attrs.readonly ?? false"
       :input-style="context?.attrs.style"
       :input-class="styleClass"
       :tabindex="context?.attrs.tabindex"

package/dist/components/PrimeInputOtp.vue

@@ -38,7 +38,7 @@ const styleClass = computed(() => (props.context?.state.validationVisible && !pr
       v-model="context._value"
       v-bind="context?.attrs"
       :disabled="!!context?.disabled"
-      :readonly="context?.attrs._readonly ?? false"
+      :readonly="context?.attrs.readonly ?? false"
       :style="context?.attrs.style"
       :class="styleClass"
       :tabindex="context?.attrs.tabindex"

package/dist/components/PrimeInputSwitch.vue

@@ -39,7 +39,7 @@ const styleClass = computed(() => (props.context?.state.validationVisible && !pr
       v-bind="context?.attrs"
       :input-id="context.id"
       :disabled="!!context?.disabled"
-      :readonly="context?.attrs._readonly ?? false"
+      :readonly="context?.attrs.readonly ?? false"
       :input-style="context?.attrs.style"
       :input-class="styleClass"
       :tabindex="context?.attrs.tabindex"

package/dist/components/PrimeInputText.vue

@@ -55,7 +55,7 @@ const styleClass = computed(() => (props.context?.state.validationVisible && !pr
         v-model="context._value"
         v-bind="context?.attrs"
         :disabled="!!context?.disabled"
-        :readonly="context?.attrs._readonly ?? false"
+        :readonly="context?.attrs.readonly ?? false"
         :style="context?.attrs.style"
         :class="styleClass"
         :tabindex="context?.attrs.tabindex"
@@ -75,7 +75,7 @@ const styleClass = computed(() => (props.context?.state.validationVisible && !pr
       v-model="context._value"
       v-bind="context?.attrs"
       :disabled="!!context?.disabled"
-      :readonly="context?.attrs._readonly ?? false"
+      :readonly="context?.attrs.readonly ?? false"
       :style="context?.attrs.style"
       :class="styleClass"
       :tabindex="context?.attrs.tabindex"

package/dist/components/PrimeKnob.vue

@@ -45,7 +45,7 @@ const styleClass = computed(() => (props.context?.state.validationVisible && !pr
       v-model="context._value"
       v-bind="context?.attrs"
       :disabled="!!context?.disabled"
-      :readonly="context?.attrs._readonly ?? false"
+      :readonly="context?.attrs.readonly ?? false"
       :style="context?.attrs.style"
       :class="styleClass"
       :tabindex="context?.attrs.tabindex"

package/dist/components/PrimeListbox.vue

@@ -45,7 +45,7 @@ const styleClass = computed(() => (props.context?.state.validationVisible && !pr
       v-model="context._value"
       v-bind="context?.attrs"
       :disabled="!!context?.disabled"
-      :readonly="context?.attrs._readonly ?? false"
+      :readonly="context?.attrs.readonly ?? false"
       :list-style="context?.attrs.style"
       :class="styleClass"
       :tabindex="context?.attrs.tabindex"

package/dist/components/PrimeMultiSelect.vue

@@ -67,7 +67,7 @@ const styleClass = computed(() => (props.context?.state.validationVisible && !pr
       v-bind="context?.attrs"
       :input-id="context.id"
       :disabled="!!context?.disabled"
-      :readonly="context?.attrs._readonly ?? false"
+      :readonly="context?.attrs.readonly ?? false"
       :list-style="context?.attrs.style"
       :class="styleClass"
       :tabindex="context?.attrs.tabindex"

package/dist/components/PrimePassword.vue

@@ -45,7 +45,7 @@ const styleClass = computed(() => (props.context?.state.validationVisible && !pr
       v-bind="context?.attrs"
       :input-id="context.id"
       :disabled="!!context?.disabled"
-      :readonly="context?.attrs._readonly ?? false"
+      :readonly="context?.attrs.readonly ?? false"
       :input-style="context?.attrs.style"
       :input-class="styleClass"
       :tabindex="context?.attrs.tabindex"

package/dist/components/PrimeRadioButton.vue

@@ -37,7 +37,7 @@ const styleClass = computed(() => (props.context?.state.validationVisible && !pr
         v-model="context._value"
         v-bind="context?.attrs"
         :disabled="!!context?.disabled"
-        :readonly="context?.attrs._readonly ?? false"
+        :readonly="context?.attrs.readonly ?? false"
         :name="context?.attrs.name"
         :value="option.value"
         :input-style="context?.attrs.style"

package/dist/components/PrimeRating.vue

@@ -39,7 +39,7 @@ const styleClass = computed(() => (props.context?.state.validationVisible && !pr
       v-model="context._value"
       v-bind="context?.attrs"
       :disabled="!!context?.disabled"
-      :readonly="context?.attrs._readonly ?? false"
+      :readonly="context?.attrs.readonly ?? false"
       :style="context?.attrs.style"
       :class="styleClass"
       :tabindex="context?.attrs.tabindex"

package/dist/components/PrimeSelectButton.vue

@@ -41,7 +41,7 @@ const styleClass = computed(() => (props.context?.state.validationVisible && !pr
       v-model="context._value"
       v-bind="context?.attrs"
       :disabled="!!context?.disabled"
-      :readonly="context?.attrs._readonly ?? false"
+      :readonly="context?.attrs.readonly ?? false"
       :style="context?.attrs.style"
       :class="styleClass"
       :tabindex="context?.attrs.tabindex"

package/dist/components/PrimeSlider.vue

@@ -40,7 +40,7 @@ const styleClass = computed(() => (props.context?.state.validationVisible && !pr
       v-model="context._value"
       v-bind="context?.attrs"
       :disabled="!!context?.disabled"
-      :readonly="context?.attrs._readonly ?? false"
+      :readonly="context?.attrs.readonly ?? false"
       :style="context?.attrs.style"
       :class="styleClass"
       :tabindex="context?.attrs.tabindex"

package/dist/components/PrimeTextarea.vue

@@ -36,7 +36,7 @@ const styleClass = computed(() => (props.context?.state.validationVisible && !pr
       v-model="context._value"
       v-bind="context?.attrs"
       :disabled="!!context?.disabled"
-      :readonly="context?.attrs._readonly ?? false"
+      :readonly="context?.attrs.readonly ?? false"
       :style="context?.attrs.style"
       :class="styleClass"
       :tabindex="context?.attrs.tabindex"

package/dist/components/PrimeToggleButton.vue

@@ -39,7 +39,7 @@ const styleClass = computed(() => (props.context?.state.validationVisible && !pr
       v-bind="context?.attrs"
       :input-id="context.id"
       :disabled="!!context?.disabled"
-      :readonly="context?.attrs._readonly ?? false"
+      :readonly="context?.attrs.readonly ?? false"
       :input-style="context?.attrs.style"
       :input-class="styleClass"
       :tabindex="context?.attrs.tabindex"

package/dist/components/PrimeTreeSelect.vue

@@ -44,7 +44,7 @@ const styleClass = computed(() => (props.context?.state.validationVisible && !pr
       v-bind="context?.attrs"
       :input-id="context.id"
       :disabled="!!context?.disabled"
-      :readonly="context?.attrs._readonly ?? false"
+      :readonly="context?.attrs.readonly ?? false"
       :input-style="context?.attrs.style"
       :input-class="styleClass"
       :tabindex="context?.attrs.tabindex"

package/dist/components/PrimeTriStateCheckbox.vue

@@ -38,7 +38,7 @@ const styleClass = computed(() => (props.context?.state.validationVisible && !pr
       v-bind="context?.attrs"
       :input-id="context.id"
       :disabled="!!context?.disabled"
-      :readonly="context?.attrs._readonly ?? false"
+      :readonly="context?.attrs.readonly ?? false"
       :input-style="context?.attrs.style"
       :input-class="styleClass"
       :tabindex="context?.attrs.tabindex"

package/dist/composables/index.d.ts

@@ -1,2 +1,3 @@
 import { useFormKitSchema } from './useFormKitSchema';
-export { useFormKitSchema, };
+import { useInputEditorSchema } from './useInputEditorSchema';
+export { useFormKitSchema, useInputEditorSchema, };

package/dist/composables/index.js

@@ -9,4 +9,11 @@ Object.defineProperty(exports, "useFormKitSchema", {
     return _useFormKitSchema.useFormKitSchema;
   }
 });
-var _useFormKitSchema = require("./useFormKitSchema");
+Object.defineProperty(exports, "useInputEditorSchema", {
+  enumerable: true,
+  get: function () {
+    return _useInputEditorSchema.useInputEditorSchema;
+  }
+});
+var _useFormKitSchema = require("./useFormKitSchema");
+var _useInputEditorSchema = require("./useInputEditorSchema");

package/dist/composables/index.mjs

@@ -1,4 +1,6 @@
 import { useFormKitSchema } from "./useFormKitSchema.mjs";
+import { useInputEditorSchema } from "./useInputEditorSchema.mjs";
 export {
-  useFormKitSchema
+  useFormKitSchema,
+  useInputEditorSchema
 };

package/dist/composables/useFormKitSchema.d.ts

@@ -1,25 +1,25 @@
 export declare function useFormKitSchema(): {
-    addComponent: (component?: string, props?: object, render?: string) => object;
-    addElement: (element?: string, children?: any[] | string, attrs?: object, render?: string) => {
+    addComponent: (component?: string, props?: object, render?: string, formKitAttrs?: object) => object;
+    addElement: (element?: string, children?: any[] | string, attrs?: object, render?: string, formKitAttrs?: object) => {
         $el: string;
         if: string;
         attrs: object;
         children: string | any[];
     };
-    addGroup: (name: string, children?: object[], render?: string) => {
+    addGroup: (name: string, children?: object[], render?: string, formKitAttrs?: object) => {
         $formkit: string;
         if: string;
         name: string;
         children: object[];
     };
-    addList: (name: string, children: object[], dynamic?: boolean, render?: string) => {
+    addList: (name: string, children: object[], dynamic?: boolean, render?: string, formKitAttrs?: object) => {
         $formkit: string;
         if: string;
         name: string;
         dynamic: boolean;
         children: object[];
     };
-    addListGroup: (children?: object[], render?: string) => {
+    addListGroup: (children?: object[], render?: string, formKitAttrs?: object) => {
         $formkit: string;
         if: string;
         for: string[];

package/dist/composables/useFormKitSchema.js

@@ -5,39 +5,43 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useFormKitSchema = useFormKitSchema;
 function useFormKitSchema() {
-  const addComponent = (component = "Button", props = {}, render = "true") => {
+  const addComponent = (component = "Button", props = {}, render = "true", formKitAttrs = {}) => {
     return {
       $cmp: component,
       if: render,
-      props
+      props,
+      ...formKitAttrs
     };
   };
-  const addElement = (element = "div", children = [], attrs = {}, render = "true") => {
+  const addElement = (element = "div", children = [], attrs = {}, render = "true", formKitAttrs = {}) => {
     return {
       $el: element,
       if: render,
       attrs,
-      children
+      children,
+      ...formKitAttrs
     };
   };
-  const addGroup = (name, children = [], render = "true") => {
+  const addGroup = (name, children = [], render = "true", formKitAttrs = {}) => {
     return {
       $formkit: "group",
       if: render,
       name,
-      children
+      children,
+      ...formKitAttrs
     };
   };
-  const addList = (name, children, dynamic = true, render = "true") => {
+  const addList = (name, children, dynamic = true, render = "true", formKitAttrs = {}) => {
     return {
       $formkit: "list",
       if: render,
       name,
       dynamic,
-      children
+      children,
+      ...formKitAttrs
     };
   };
-  const addListGroup = (children = [], render = "true") => {
+  const addListGroup = (children = [], render = "true", formKitAttrs = {}) => {
     return {
       $formkit: "group",
       if: render,
@@ -45,7 +49,8 @@ function useFormKitSchema() {
       // 👈 $items is in the slot’s scope
       key: "$item",
       index: "$index",
-      children
+      children,
+      ...formKitAttrs
     };
   };
   function addListGroupFunctions(data, addNodeDefaultObject = {}) {

package/dist/composables/useFormKitSchema.mjs

@@ -1,37 +1,41 @@
 export function useFormKitSchema() {
-  const addComponent = (component = "Button", props = {}, render = "true") => {
+  const addComponent = (component = "Button", props = {}, render = "true", formKitAttrs = {}) => {
     return {
       $cmp: component,
       if: render,
-      props
+      props,
+      ...formKitAttrs
     };
   };
-  const addElement = (element = "div", children = [], attrs = {}, render = "true") => {
+  const addElement = (element = "div", children = [], attrs = {}, render = "true", formKitAttrs = {}) => {
     return {
       $el: element,
       if: render,
       attrs,
-      children
+      children,
+      ...formKitAttrs
     };
   };
-  const addGroup = (name, children = [], render = "true") => {
+  const addGroup = (name, children = [], render = "true", formKitAttrs = {}) => {
     return {
       $formkit: "group",
       if: render,
       name,
-      children
+      children,
+      ...formKitAttrs
     };
   };
-  const addList = (name, children, dynamic = true, render = "true") => {
+  const addList = (name, children, dynamic = true, render = "true", formKitAttrs = {}) => {
     return {
       $formkit: "list",
       if: render,
       name,
       dynamic,
-      children
+      children,
+      ...formKitAttrs
     };
   };
-  const addListGroup = (children = [], render = "true") => {
+  const addListGroup = (children = [], render = "true", formKitAttrs = {}) => {
     return {
       $formkit: "group",
       if: render,
@@ -39,7 +43,8 @@ export function useFormKitSchema() {
       // 👈 $items is in the slot’s scope
       key: "$item",
       index: "$index",
-      children
+      children,
+      ...formKitAttrs
     };
   };
   function addListGroupFunctions(data, addNodeDefaultObject = {}) {

package/dist/composables/useInputEditorSchema.d.ts

@@ -0,0 +1,132 @@
+export declare function useInputEditorSchema(): {
+    editorSchema: (inputOptions?: any[]) => ({
+        $formkit: string;
+        if: string;
+        name: string;
+        dynamic: boolean;
+        children: object[];
+    } | {
+        $formkit: string;
+        id: string;
+        name: string;
+        label: string;
+        value: string;
+        optionLabel: string;
+        optionValue: string;
+        options: any[];
+        key: string;
+        preserve: boolean;
+        validation?: undefined;
+        validationVisibility?: undefined;
+        allowEmpty?: undefined;
+        if?: undefined;
+    } | {
+        $formkit: string;
+        name: string;
+        label: string;
+        validation: string;
+        validationVisibility: string;
+        key: string;
+        preserve: boolean;
+        id?: undefined;
+        value?: undefined;
+        optionLabel?: undefined;
+        optionValue?: undefined;
+        options?: undefined;
+        allowEmpty?: undefined;
+        if?: undefined;
+    } | {
+        $formkit: string;
+        id: string;
+        name: string;
+        options: {
+            label: string;
+            value: string;
+        }[];
+        optionLabel: string;
+        optionValue: string;
+        value: string;
+        allowEmpty: boolean;
+        key: string;
+        preserve: boolean;
+        label?: undefined;
+        validation?: undefined;
+        validationVisibility?: undefined;
+        if?: undefined;
+    } | {
+        $formkit: string;
+        if: string;
+        name: string;
+        label: string;
+        key: string;
+        preserve: boolean;
+        id?: undefined;
+        value?: undefined;
+        optionLabel?: undefined;
+        optionValue?: undefined;
+        options?: undefined;
+        validation?: undefined;
+        validationVisibility?: undefined;
+        allowEmpty?: undefined;
+    } | {
+        $formkit: string;
+        if: string;
+        name: string;
+        label: string;
+        key: string;
+        value: boolean;
+        preserve: boolean;
+        id?: undefined;
+        optionLabel?: undefined;
+        optionValue?: undefined;
+        options?: undefined;
+        validation?: undefined;
+        validationVisibility?: undefined;
+        allowEmpty?: undefined;
+    } | {
+        $formkit: string;
+        if: string;
+        name: string;
+        label: string;
+        value: string;
+        optionLabel: string;
+        optionValue: string;
+        options: {
+            label: string;
+            value: string;
+        }[];
+        key: string;
+        preserve: boolean;
+        id?: undefined;
+        validation?: undefined;
+        validationVisibility?: undefined;
+        allowEmpty?: undefined;
+    } | {
+        $formkit: string;
+        if: string;
+        name: string;
+        label: string;
+        optionLabel: string;
+        optionValue: string;
+        options: {
+            label: string;
+            value: string;
+        }[];
+        key: string;
+        preserve: boolean;
+        id?: undefined;
+        value?: undefined;
+        validation?: undefined;
+        validationVisibility?: undefined;
+        allowEmpty?: undefined;
+    })[];
+    primeInputNames: string[];
+    primeInputOptions: (list: string[]) => {
+        label: string;
+        value: string;
+    }[];
+    editorDataToSchema: (data: any) => any;
+    editorDataToJson: (data: any) => string;
+    editorDataToCode: (data: any) => string;
+    schemaToEditorData: (schema: any) => any;
+};