@sfxcode/formkit-primevue 1.8.1 → 1.8.3

package/dist/components/PrimeSlider.vue

@@ -0,0 +1,29 @@
+<script setup lang='ts'>
+const props = defineProps({
+  context: Object,
+})
+
+const context = props.context
+const attrs = computed(() => context?.attrs)
+
+function handleInput(e: any) {
+  context?.node.input(e)
+  context?.handlers.blur(e)
+}
+const styleClass = computed(() => (context?.state.validationVisible && !context?.state.valid) ? `${attrs.value?.class} p-invalid` : attrs.value?.class)
+</script>
+
+<template>
+  <div class="p-formkit">
+    <Slider
+      :id="context.id"
+      v-model="context._value"
+      v-bind="attrs"
+      :disabled="attrs._disabled ?? !!context?.disabled"
+      :readonly="attrs._readonly ?? false"
+      :style="attrs.style"
+      :class="styleClass"
+      @change="handleInput"
+    />
+  </div>
+</template>

package/dist/components/PrimeTextarea.vue

@@ -0,0 +1,34 @@
+<script setup lang='ts'>
+const props = defineProps({
+  context: Object,
+})
+
+const context = props.context
+const attrs = computed(() => context?.attrs)
+
+function handleBlur(e: any) {
+  context?.handlers.blur(e.target.value)
+}
+
+function handleInput(e: any) {
+  context?.node.input(e.target.value)
+}
+const styleClass = computed(() => (context?.state.validationVisible && !context?.state.valid) ? `${attrs.value?.class} p-invalid` : attrs.value?.class)
+</script>
+
+<template>
+  <div class="p-formkit">
+    <Textarea
+      :id="context.id"
+      v-model="context._value"
+      v-bind="attrs"
+      :disabled="attrs._disabled ?? !!context?.disabled"
+      :readonly="attrs._readonly ?? false"
+      :style="attrs.style"
+      :class="styleClass"
+      :rows="context.rows ?? 3"
+      @input="handleInput"
+      @blur="handleBlur"
+    />
+  </div>
+</template>

package/dist/components/PrimeToggleButton.vue

@@ -0,0 +1,30 @@
+<script setup lang='ts'>
+const props = defineProps({
+  context: Object,
+})
+
+const context = props.context
+const attrs = computed(() => context?.attrs)
+
+function handleChange(e: any) {
+  context?.node.input(props.context?._value)
+}
+const styleClass = computed(() => (context?.state.validationVisible && !context?.state.valid) ? `${attrs.value?.class} p-invalid` : attrs.value?.class)
+</script>
+
+<template>
+  <div class="p-formkit">
+    <ToggleButton
+      v-model="context._value"
+      v-bind="attrs"
+      :input-id="context.id"
+      :disabled="attrs._disabled ?? !!context?.disabled"
+      :readonly="attrs._readonly ?? false"
+      :input-style="attrs.style"
+      :input-class="styleClass"
+      :on-icon="context.onIcon ?? 'pi pi-check'"
+      :off-icon="context.offIcon ?? 'pi pi-times'"
+      @change="handleChange"
+    />
+  </div>
+</template>

package/dist/components/PrimeTreeSelect.vue

@@ -0,0 +1,29 @@
+<script setup lang='ts'>
+const props = defineProps({
+  context: Object,
+})
+
+const context = props.context
+const attrs = computed(() => context?.attrs)
+
+function handleInput(e: any) {
+  context?.node.input(props.context?._value)
+}
+
+const styleClass = computed(() => (context?.state.validationVisible && !context?.state.valid) ? `${attrs.value?.class} p-invalid` : attrs.value?.class)
+</script>
+
+<template>
+  <div class="p-formkit">
+    <TreeSelect
+      v-model="context._value"
+      v-bind="attrs"
+      :input-id="context.id"
+      :disabled="attrs._disabled ?? !!context?.disabled"
+      :readonly="attrs._readonly ?? false"
+      :input-style="attrs.style"
+      :input-class="styleClass"
+      @change="handleInput"
+    />
+  </div>
+</template>

package/dist/components/PrimeTriStateCheckbox.vue

@@ -0,0 +1,31 @@
+<script setup lang='ts'>
+const props = defineProps({
+  context: Object,
+})
+
+const context = props.context
+const attrs = computed(() => context?.attrs)
+
+function handleChange(e: any) {
+  context?.node.input(props.context?._value)
+}
+
+const styleClass = computed(() => (context?.state.validationVisible && !context?.state.valid) ? `${attrs.value?.class} p-invalid` : attrs.value?.class)
+</script>
+
+<template>
+  <div class="p-formkit">
+    <span v-if="context.attrs.labelLeft" class="formkit-prime-left">{{ context.attrs.labelLeft }}</span>
+    <TriStateCheckbox
+      v-model="context._value"
+      v-bind="attrs"
+      :input-id="context.id"
+      :disabled="attrs._disabled ?? !!context?.disabled"
+      :readonly="attrs._readonly ?? false"
+      :input-style="attrs.style"
+      :input-class="styleClass"
+      @change="handleChange"
+    />
+    <span v-if="context.attrs.labelRight" class="formkit-prime-right">{{ context.attrs.labelRight }}</span>
+  </div>
+</template>

package/dist/components/index.d.ts

@@ -0,0 +1,25 @@
+import PrimeAutoComplete from './PrimeAutoComplete.vue';
+import PrimeCalendar from './PrimeCalendar.vue';
+import PrimeCascadeSelect from './PrimeCascadeSelect.vue';
+import PrimeCheckbox from './PrimeCheckbox.vue';
+import PrimeChips from './PrimeChips.vue';
+import PrimeColorPicker from './PrimeColorPicker.vue';
+import PrimeDropdown from './PrimeDropdown.vue';
+import PrimeEditor from './PrimeEditor.vue';
+import PrimeInputMask from './PrimeInputMask.vue';
+import PrimeInputNumber from './PrimeInputNumber.vue';
+import PrimeInputSwitch from './PrimeInputSwitch.vue';
+import PrimeInputText from './PrimeInputText.vue';
+import PrimeTextarea from './PrimeTextarea.vue';
+import PrimeKnob from './PrimeKnob.vue';
+import PrimeMultiSelect from './PrimeMultiSelect.vue';
+import PrimeListbox from './PrimeListbox.vue';
+import PrimePassword from './PrimePassword.vue';
+import PrimeRadioButton from './PrimeRadioButton.vue';
+import PrimeRating from './PrimeRating.vue';
+import PrimeSlider from './PrimeSlider.vue';
+import PrimeToggleButton from './PrimeToggleButton.vue';
+import PrimeTreeSelect from './PrimeTreeSelect.vue';
+import PrimeSelectButton from './PrimeSelectButton.vue';
+import PrimeTriStateCheckbox from './PrimeTriStateCheckbox.vue';
+export { PrimeAutoComplete, PrimeCalendar, PrimeCascadeSelect, PrimeCheckbox, PrimeChips, PrimeColorPicker, PrimeDropdown, PrimeEditor, PrimeInputMask, PrimeInputNumber, PrimeInputSwitch, PrimeInputText, PrimeTextarea, PrimeKnob, PrimeMultiSelect, PrimeListbox, PrimePassword, PrimeRadioButton, PrimeRating, PrimeSlider, PrimeToggleButton, PrimeTreeSelect, PrimeSelectButton, PrimeTriStateCheckbox, };

package/dist/components/index.js

@@ -0,0 +1,174 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "PrimeAutoComplete", {
+  enumerable: true,
+  get: function () {
+    return _PrimeAutoComplete.default;
+  }
+});
+Object.defineProperty(exports, "PrimeCalendar", {
+  enumerable: true,
+  get: function () {
+    return _PrimeCalendar.default;
+  }
+});
+Object.defineProperty(exports, "PrimeCascadeSelect", {
+  enumerable: true,
+  get: function () {
+    return _PrimeCascadeSelect.default;
+  }
+});
+Object.defineProperty(exports, "PrimeCheckbox", {
+  enumerable: true,
+  get: function () {
+    return _PrimeCheckbox.default;
+  }
+});
+Object.defineProperty(exports, "PrimeChips", {
+  enumerable: true,
+  get: function () {
+    return _PrimeChips.default;
+  }
+});
+Object.defineProperty(exports, "PrimeColorPicker", {
+  enumerable: true,
+  get: function () {
+    return _PrimeColorPicker.default;
+  }
+});
+Object.defineProperty(exports, "PrimeDropdown", {
+  enumerable: true,
+  get: function () {
+    return _PrimeDropdown.default;
+  }
+});
+Object.defineProperty(exports, "PrimeEditor", {
+  enumerable: true,
+  get: function () {
+    return _PrimeEditor.default;
+  }
+});
+Object.defineProperty(exports, "PrimeInputMask", {
+  enumerable: true,
+  get: function () {
+    return _PrimeInputMask.default;
+  }
+});
+Object.defineProperty(exports, "PrimeInputNumber", {
+  enumerable: true,
+  get: function () {
+    return _PrimeInputNumber.default;
+  }
+});
+Object.defineProperty(exports, "PrimeInputSwitch", {
+  enumerable: true,
+  get: function () {
+    return _PrimeInputSwitch.default;
+  }
+});
+Object.defineProperty(exports, "PrimeInputText", {
+  enumerable: true,
+  get: function () {
+    return _PrimeInputText.default;
+  }
+});
+Object.defineProperty(exports, "PrimeKnob", {
+  enumerable: true,
+  get: function () {
+    return _PrimeKnob.default;
+  }
+});
+Object.defineProperty(exports, "PrimeListbox", {
+  enumerable: true,
+  get: function () {
+    return _PrimeListbox.default;
+  }
+});
+Object.defineProperty(exports, "PrimeMultiSelect", {
+  enumerable: true,
+  get: function () {
+    return _PrimeMultiSelect.default;
+  }
+});
+Object.defineProperty(exports, "PrimePassword", {
+  enumerable: true,
+  get: function () {
+    return _PrimePassword.default;
+  }
+});
+Object.defineProperty(exports, "PrimeRadioButton", {
+  enumerable: true,
+  get: function () {
+    return _PrimeRadioButton.default;
+  }
+});
+Object.defineProperty(exports, "PrimeRating", {
+  enumerable: true,
+  get: function () {
+    return _PrimeRating.default;
+  }
+});
+Object.defineProperty(exports, "PrimeSelectButton", {
+  enumerable: true,
+  get: function () {
+    return _PrimeSelectButton.default;
+  }
+});
+Object.defineProperty(exports, "PrimeSlider", {
+  enumerable: true,
+  get: function () {
+    return _PrimeSlider.default;
+  }
+});
+Object.defineProperty(exports, "PrimeTextarea", {
+  enumerable: true,
+  get: function () {
+    return _PrimeTextarea.default;
+  }
+});
+Object.defineProperty(exports, "PrimeToggleButton", {
+  enumerable: true,
+  get: function () {
+    return _PrimeToggleButton.default;
+  }
+});
+Object.defineProperty(exports, "PrimeTreeSelect", {
+  enumerable: true,
+  get: function () {
+    return _PrimeTreeSelect.default;
+  }
+});
+Object.defineProperty(exports, "PrimeTriStateCheckbox", {
+  enumerable: true,
+  get: function () {
+    return _PrimeTriStateCheckbox.default;
+  }
+});
+var _PrimeAutoComplete = _interopRequireDefault(require("./PrimeAutoComplete.vue"));
+var _PrimeCalendar = _interopRequireDefault(require("./PrimeCalendar.vue"));
+var _PrimeCascadeSelect = _interopRequireDefault(require("./PrimeCascadeSelect.vue"));
+var _PrimeCheckbox = _interopRequireDefault(require("./PrimeCheckbox.vue"));
+var _PrimeChips = _interopRequireDefault(require("./PrimeChips.vue"));
+var _PrimeColorPicker = _interopRequireDefault(require("./PrimeColorPicker.vue"));
+var _PrimeDropdown = _interopRequireDefault(require("./PrimeDropdown.vue"));
+var _PrimeEditor = _interopRequireDefault(require("./PrimeEditor.vue"));
+var _PrimeInputMask = _interopRequireDefault(require("./PrimeInputMask.vue"));
+var _PrimeInputNumber = _interopRequireDefault(require("./PrimeInputNumber.vue"));
+var _PrimeInputSwitch = _interopRequireDefault(require("./PrimeInputSwitch.vue"));
+var _PrimeInputText = _interopRequireDefault(require("./PrimeInputText.vue"));
+var _PrimeTextarea = _interopRequireDefault(require("./PrimeTextarea.vue"));
+var _PrimeKnob = _interopRequireDefault(require("./PrimeKnob.vue"));
+var _PrimeMultiSelect = _interopRequireDefault(require("./PrimeMultiSelect.vue"));
+var _PrimeListbox = _interopRequireDefault(require("./PrimeListbox.vue"));
+var _PrimePassword = _interopRequireDefault(require("./PrimePassword.vue"));
+var _PrimeRadioButton = _interopRequireDefault(require("./PrimeRadioButton.vue"));
+var _PrimeRating = _interopRequireDefault(require("./PrimeRating.vue"));
+var _PrimeSlider = _interopRequireDefault(require("./PrimeSlider.vue"));
+var _PrimeToggleButton = _interopRequireDefault(require("./PrimeToggleButton.vue"));
+var _PrimeTreeSelect = _interopRequireDefault(require("./PrimeTreeSelect.vue"));
+var _PrimeSelectButton = _interopRequireDefault(require("./PrimeSelectButton.vue"));
+var _PrimeTriStateCheckbox = _interopRequireDefault(require("./PrimeTriStateCheckbox.vue"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/dist/components/index.mjs

@@ -0,0 +1,50 @@
+import PrimeAutoComplete from "./PrimeAutoComplete.vue";
+import PrimeCalendar from "./PrimeCalendar.vue";
+import PrimeCascadeSelect from "./PrimeCascadeSelect.vue";
+import PrimeCheckbox from "./PrimeCheckbox.vue";
+import PrimeChips from "./PrimeChips.vue";
+import PrimeColorPicker from "./PrimeColorPicker.vue";
+import PrimeDropdown from "./PrimeDropdown.vue";
+import PrimeEditor from "./PrimeEditor.vue";
+import PrimeInputMask from "./PrimeInputMask.vue";
+import PrimeInputNumber from "./PrimeInputNumber.vue";
+import PrimeInputSwitch from "./PrimeInputSwitch.vue";
+import PrimeInputText from "./PrimeInputText.vue";
+import PrimeTextarea from "./PrimeTextarea.vue";
+import PrimeKnob from "./PrimeKnob.vue";
+import PrimeMultiSelect from "./PrimeMultiSelect.vue";
+import PrimeListbox from "./PrimeListbox.vue";
+import PrimePassword from "./PrimePassword.vue";
+import PrimeRadioButton from "./PrimeRadioButton.vue";
+import PrimeRating from "./PrimeRating.vue";
+import PrimeSlider from "./PrimeSlider.vue";
+import PrimeToggleButton from "./PrimeToggleButton.vue";
+import PrimeTreeSelect from "./PrimeTreeSelect.vue";
+import PrimeSelectButton from "./PrimeSelectButton.vue";
+import PrimeTriStateCheckbox from "./PrimeTriStateCheckbox.vue";
+export {
+  PrimeAutoComplete,
+  PrimeCalendar,
+  PrimeCascadeSelect,
+  PrimeCheckbox,
+  PrimeChips,
+  PrimeColorPicker,
+  PrimeDropdown,
+  PrimeEditor,
+  PrimeInputMask,
+  PrimeInputNumber,
+  PrimeInputSwitch,
+  PrimeInputText,
+  PrimeTextarea,
+  PrimeKnob,
+  PrimeMultiSelect,
+  PrimeListbox,
+  PrimePassword,
+  PrimeRadioButton,
+  PrimeRating,
+  PrimeSlider,
+  PrimeToggleButton,
+  PrimeTreeSelect,
+  PrimeSelectButton,
+  PrimeTriStateCheckbox
+};

package/dist/composables/index.d.ts

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

package/dist/composables/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "useFormKitSchema", {
+  enumerable: true,
+  get: function () {
+    return _useFormKitSchema.useFormKitSchema;
+  }
+});
+var _useFormKitSchema = require("./useFormKitSchema");

package/dist/composables/index.mjs

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

package/dist/composables/useFormKitSchema.js

@@ -0,0 +1,85 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useFormKitSchema = useFormKitSchema;
+function useFormKitSchema() {
+  const addComponent = (component = "Button", props = {}, render = "true") => {
+    return {
+      $cmp: component,
+      if: render,
+      props
+    };
+  };
+  const addElement = (element = "div", children = [], attrs = {}, render = "true") => {
+    return {
+      $el: element,
+      if: render,
+      attrs,
+      children
+    };
+  };
+  const addGroup = (name, children = [], render = "true") => {
+    return {
+      $formkit: "group",
+      if: render,
+      name,
+      children
+    };
+  };
+  const addList = (name, children, dynamic = true, render = "true") => {
+    return {
+      $formkit: "list",
+      if: render,
+      name,
+      dynamic,
+      children
+    };
+  };
+  const addListGroup = (children = [], render = "true") => {
+    return {
+      $formkit: "group",
+      if: render,
+      for: ["item", "index", "$items"],
+      // 👈 $items is in the slot’s scope
+      key: "$item",
+      index: "$index",
+      children
+    };
+  };
+  function addListGroupFunctions(data) {
+    const swapElements = (array, index1, index2) => {
+      array[index1] = array.splice(index2, 1, array[index1])[0];
+      return array;
+    };
+    data.addNode = node => () => {
+      const newArray = [...node.value, {}];
+      node.input(newArray, false);
+    };
+    data.removeNode = (node, index) => () => {
+      node.input(node._value.filter((_, i) => i !== index), false);
+    };
+    data.moveNodeUp = (node, index) => () => {
+      const array = [...node.value];
+      if (index > 0) node.input(swapElements(array, index - 1, index), false);
+    };
+    data.moveNodeDown = (node, index) => () => {
+      const array = [...node.value];
+      if (index < array.length - 1) node.input(swapElements(array, index, index + 1), false);
+    };
+    data.insertDuplicate = (node, index) => () => {
+      const obj = node.value[index];
+      const newArray = [...node.value, obj];
+      node.input(newArray, false);
+    };
+  }
+  return {
+    addComponent,
+    addElement,
+    addGroup,
+    addList,
+    addListGroup,
+    addListGroupFunctions
+  };
+}

package/dist/composables/useFormKitSchema.mjs

@@ -0,0 +1,74 @@
+export function useFormKitSchema() {
+  const addComponent = (component = "Button", props = {}, render = "true") => {
+    return {
+      $cmp: component,
+      if: render,
+      props
+    };
+  };
+  const addElement = (element = "div", children = [], attrs = {}, render = "true") => {
+    return {
+      $el: element,
+      if: render,
+      attrs,
+      children
+    };
+  };
+  const addGroup = (name, children = [], render = "true") => {
+    return {
+      $formkit: "group",
+      if: render,
+      name,
+      children
+    };
+  };
+  const addList = (name, children, dynamic = true, render = "true") => {
+    return {
+      $formkit: "list",
+      if: render,
+      name,
+      dynamic,
+      children
+    };
+  };
+  const addListGroup = (children = [], render = "true") => {
+    return {
+      $formkit: "group",
+      if: render,
+      for: ["item", "index", "$items"],
+      // 👈 $items is in the slot’s scope
+      key: "$item",
+      index: "$index",
+      children
+    };
+  };
+  function addListGroupFunctions(data) {
+    const swapElements = (array, index1, index2) => {
+      array[index1] = array.splice(index2, 1, array[index1])[0];
+      return array;
+    };
+    data.addNode = (node) => () => {
+      const newArray = [...node.value, {}];
+      node.input(newArray, false);
+    };
+    data.removeNode = (node, index) => () => {
+      node.input(node._value.filter((_, i) => i !== index), false);
+    };
+    data.moveNodeUp = (node, index) => () => {
+      const array = [...node.value];
+      if (index > 0)
+        node.input(swapElements(array, index - 1, index), false);
+    };
+    data.moveNodeDown = (node, index) => () => {
+      const array = [...node.value];
+      if (index < array.length - 1)
+        node.input(swapElements(array, index, index + 1), false);
+    };
+    data.insertDuplicate = (node, index) => () => {
+      const obj = node.value[index];
+      const newArray = [...node.value, obj];
+      node.input(newArray, false);
+    };
+  }
+  return { addComponent, addElement, addGroup, addList, addListGroup, addListGroupFunctions };
+}

package/dist/index.d.ts

@@ -1 +1,53 @@
-export * from './formkit/index'
+import type { FormKitTypeDefinition } from '@formkit/core';
+import { useFormKitSchema } from './composables';
+export declare const primeAutoCompleteDefinition: FormKitTypeDefinition;
+export declare const primeInputTextDefinition: FormKitTypeDefinition;
+export declare const primeInputNumberDefinition: FormKitTypeDefinition;
+export declare const primeInputMaskDefinition: FormKitTypeDefinition;
+export declare const primePasswordDefinition: FormKitTypeDefinition;
+export declare const primeTextareaDefinition: FormKitTypeDefinition;
+export declare const primeCheckboxDefinition: FormKitTypeDefinition;
+export declare const primeInputSwitchDefinition: FormKitTypeDefinition;
+export declare const primeEditorDefinition: FormKitTypeDefinition;
+export declare const primeDropdownDefinition: FormKitTypeDefinition;
+export declare const primeMultiSelectDefinition: FormKitTypeDefinition;
+export declare const primeListboxDefinition: FormKitTypeDefinition;
+export declare const primeCalendarDefinition: FormKitTypeDefinition;
+export declare const primeSliderDefinition: FormKitTypeDefinition;
+export declare const primeRatingDefinition: FormKitTypeDefinition;
+export declare const primeRadioButtonDefinition: FormKitTypeDefinition;
+export declare const primeChipsDefinition: FormKitTypeDefinition;
+export declare const primeKnobDefinition: FormKitTypeDefinition;
+export declare const primeColorPickerDefinition: FormKitTypeDefinition;
+export declare const primeToggleButtonDefinition: FormKitTypeDefinition;
+export declare const primeSelectButtonDefinition: FormKitTypeDefinition;
+export declare const primeTriStateCheckboxDefinition: FormKitTypeDefinition;
+export declare const primeCascadeSelectDefinition: FormKitTypeDefinition;
+export declare const primeTreeSelectDefinition: FormKitTypeDefinition;
+export declare const primeInputs: {
+    primeAutoComplete: FormKitTypeDefinition;
+    primeInputText: FormKitTypeDefinition;
+    primeInputNumber: FormKitTypeDefinition;
+    primeInputMask: FormKitTypeDefinition;
+    primePassword: FormKitTypeDefinition;
+    primeCheckbox: FormKitTypeDefinition;
+    primeInputSwitch: FormKitTypeDefinition;
+    primeTextarea: FormKitTypeDefinition;
+    primeEditor: FormKitTypeDefinition;
+    primeDropdown: FormKitTypeDefinition;
+    primeMultiSelect: FormKitTypeDefinition;
+    primeCalendar: FormKitTypeDefinition;
+    primeSlider: FormKitTypeDefinition;
+    primeChips: FormKitTypeDefinition;
+    primeKnob: FormKitTypeDefinition;
+    primeRating: FormKitTypeDefinition;
+    primeRadioButton: FormKitTypeDefinition;
+    primeColorPicker: FormKitTypeDefinition;
+    primeToggleButton: FormKitTypeDefinition;
+    primeListbox: FormKitTypeDefinition;
+    primeSelectButton: FormKitTypeDefinition;
+    primeTriStateCheckbox: FormKitTypeDefinition;
+    primeCascadeSelect: FormKitTypeDefinition;
+    primeTreeSelect: FormKitTypeDefinition;
+};
+export { useFormKitSchema, };