@sfxcode/formkit-primevue 3.2.4 → 3.2.6

package/dist/components/FormKitDataEdit.vue

@@ -1,129 +1,114 @@
-<script setup lang='ts'>
-import type { FormKitSchemaDefinition } from '@formkit/core'
-import type { PropType } from 'vue'
-import { reset } from '@formkit/core'
-import { FormKit, FormKitMessages, FormKitSchema } from '@formkit/vue'
-import { ref } from 'vue'
-
-import FormKitDebug from './FormKitDebug.vue'
-
+<script setup>
+import { reset } from "@formkit/core";
+import { FormKit, FormKitMessages, FormKitSchema } from "@formkit/vue";
+import { ref } from "vue";
+import FormKitDebug from "./FormKitDebug.vue";
 const props = defineProps({
   id: {
     type: String,
-    default: 'formkit_form',
+    default: "formkit_form"
   },
   data: {
     type: Object,
-    default: null,
+    default: null
   },
   schema: {
-    type: Object as PropType<FormKitSchemaDefinition>,
-    default: null,
+    type: Object,
+    default: null
   },
   formClass: {
     type: String,
-    default: '',
+    default: ""
   },
   actionsClass: {
     type: String,
-    default: '',
+    default: ""
   },
   submitSeverity: {
     type: String,
-    default: '',
+    default: ""
   },
   submitClass: {
     type: String,
-    default: '',
+    default: ""
   },
   submitLabel: {
     type: String,
-    default: 'Save',
+    default: "Save"
   },
   submitIcon: {
     type: String,
-    default: '',
+    default: ""
   },
   showReset: {
     type: Boolean,
-    default: false,
+    default: false
   },
   resetSeverity: {
     type: String,
-    default: 'danger',
+    default: "danger"
   },
   resetLabel: {
     type: String,
-    default: 'Reset',
+    default: "Reset"
   },
   resetClass: {
     type: String,
-    default: '',
+    default: ""
   },
   resetIcon: {
     type: String,
-    default: '',
+    default: ""
   },
   debugData: {
     type: Boolean,
-    default: false,
+    default: false
   },
   debugSchema: {
     type: Boolean,
-    default: false,
-  },
-})
-const emit = defineEmits(['dataSaved', 'onReset'])
-
-const formData = defineModel<any>()
-
+    default: false
+  }
+});
+const emit = defineEmits(["dataSaved", "onReset"]);
+const formData = defineModel({ type: null });
 if (props.data) {
-  formData.value = props.data
+  formData.value = props.data;
 }
-
-const formSchema = ref(props.schema)
-
+const formSchema = ref(props.schema);
 function handleSave() {
-  emit('dataSaved', formData.value)
+  emit("dataSaved", formData.value);
 }
-
 function handleReset() {
-  reset(props.id)
-  emit('onReset')
+  reset(props.id);
+  emit("onReset");
 }
 </script>
 
 <template>
-  <div class="p-formkit-data-edit">
-    <FormKit
-      :id="id"
-      v-model="formData"
-      :form-class="formClass"
-      :actions-class="actionsClass"
-      type="form"
-      @submit="handleSave"
-    >
-      <template #default>
-        <FormKitSchema v-if="formSchema" :schema="formSchema" :data="formData" />
-        <slot />
-      </template>
-      <template #messages>
-        <slot name="messages">
-          <FormKitMessages class="p-formkit-data-edit-messages" />
-        </slot>
-      </template>
-      <template #submit>
-        <slot name="submit">
-          <Button :icon="submitIcon" type="submit" :label="submitLabel" :class="submitClass" :severity="submitSeverity" @submit="handleSave" />
-          <Button v-if="showReset" type="reset" :icon="resetIcon" :label="resetLabel" :class="resetClass" :severity="resetSeverity" @click="handleReset" />
-        </slot>
-      </template>
-    </FormKit>
-    <FormKitDebug v-if="debugData" :data="formData" header="Data" />
-    <FormKitDebug v-if="debugSchema" :data="formSchema as object" header="Schema" />
-  </div>
+  <FormKit
+    :id="id"
+    v-model="formData"
+    :actions-class="actionsClass"
+    :form-class="`p-formkit-data-edit ${formClass}`"
+    type="form"
+    @submit="handleSave"
+  >
+    <template #default>
+      <FormKitSchema v-if="formSchema" :schema="formSchema" :data="formData" />
+      <slot />
+      <FormKitDebug v-if="debugData" :data="formData" header="Debug Mode - Data" />
+      <FormKitDebug v-if="debugSchema" :data="formSchema as object" header="Debug Mode - Schema" />
+    </template>
+    <template #messages>
+      <slot name="messages">
+        <FormKitMessages class="p-formkit-data-edit-messages" />
+      </slot>
+    </template>
+    <template #submit>
+      <slot name="submit">
+        <Button :icon="submitIcon" type="submit" :label="submitLabel" :class="submitClass" :severity="submitSeverity" @submit="handleSave" />
+        <Button v-if="showReset" type="reset" :icon="resetIcon" :label="resetLabel" :class="resetClass" :severity="resetSeverity" @click="handleReset" />
+      </slot>
+    </template>
+  </FormKit>
 </template>
-
-<style scoped>
-
-</style>

package/dist/components/FormKitDataView.vue

@@ -1,55 +1,47 @@
-<script setup lang='ts'>
-import type { FormKitSchemaDefinition } from '@formkit/core'
-import type { PropType } from 'vue'
-import { FormKit, FormKitSchema } from '@formkit/vue'
-import FormKitDebug from './FormKitDebug.vue'
-
+<script setup>
+import { FormKit, FormKitSchema } from "@formkit/vue";
+import { ref } from "vue";
+import FormKitDebug from "./FormKitDebug.vue";
 const props = defineProps({
   data: {
     type: Object,
-    default: null,
+    default: null
   },
   schema: {
-    type: Object as PropType<FormKitSchemaDefinition>,
-    default: null,
+    type: Object,
+    default: null
   },
   formClass: {
     type: String,
-    default: '',
+    default: ""
   },
   debugData: {
     type: Boolean,
-    default: false,
+    default: false
   },
   debugSchema: {
     type: Boolean,
-    default: false,
-  },
-})
-
-const formData = defineModel<any>()
-
+    default: false
+  }
+});
+const formSchema = ref(props.schema);
+const formData = defineModel({ type: null });
 if (props.data) {
-  formData.value = props.data
+  formData.value = props.data;
 }
 </script>
 
 <template>
-  <div class="p-formkit-data-view">
-    <FormKit
-      v-model="formData"
-      type="form"
-      :form-class="formClass"
-      :actions="false"
-    >
-      <FormKitSchema v-if="schema" :schema="schema" :data="formData" />
-      <slot />
-    </FormKit>
-    <FormKitDebug v-if="debugData" :data="formData" header="Data" />
-    <FormKitDebug v-if="debugSchema" :data="schema as object" header="Schema" />
-  </div>
+  <FormKit
+    v-model="formData"
+    :actions="false"
+    :form-class="`p-formkit-data-view ${formClass}`"
+    class="p-formkit-data-view"
+    type="form"
+  >
+    <FormKitSchema v-if="schema" :schema="formSchema" :data="formData" />
+    <slot />
+    <FormKitDebug v-if="debugData" :data="formData" header="Debug Mode - Data" />
+    <FormKitDebug v-if="debugSchema" :data="formSchema as object" header="Debug Mode - Schema" />
+  </FormKit>
 </template>
-
-<style scoped>
-
-</style>

package/dist/components/FormKitDebug.vue

@@ -1,25 +1,20 @@
-<script setup lang='ts'>
+<script setup>
 defineProps({
   data: {
     type: Object,
-    default: null,
+    default: null
   },
   header: {
     type: String,
-    default: 'Debug',
-  },
-})
+    default: "Debug"
+  }
+});
 </script>
 
 <template>
-  <div class="p-formkit-data-debug">
-    <h3>{{ header }}</h3>
+  <Fieldset class="p-formkit-data-debug" :legend="header" :toggleable="true" :collapsed="true">
     <slot />
     <pre v-if="data">{{ data }}</pre>
     <span v-else>No Data available</span>
-  </div>
+  </Fieldset>
 </template>
-
-<style scoped>
-
-</style>

package/dist/components/FormKitIcon.vue

@@ -1,23 +1,16 @@
-<script setup lang="ts">
-import type { PropType } from 'vue'
-
-export interface FormKitIconProps {
-  onIconPrefixClicked?: () => void
-  onIconSuffixClicked?: () => void
-}
-
+<script setup>
 defineProps({
   iconClass: {
     type: String,
-    default: '',
+    default: ""
   },
-  onClick: { type: Function as PropType<() => void>, default: undefined },
+  onClick: { type: Function, default: void 0 },
   position: {
     type: String,
     required: true,
-    validator: (val: string) => ['prefix', 'suffix'].includes(val),
-  },
-})
+    validator: (val) => ["prefix", "suffix"].includes(val)
+  }
+});
 </script>
 
 <template>

package/dist/components/FormKitPrefix.vue

@@ -1,7 +1,7 @@
-<script setup lang="ts">
+<script setup>
 defineProps({
-  prefix: String,
-})
+  prefix: String
+});
 </script>
 
 <template>

package/dist/components/FormKitSuffix.vue

@@ -1,7 +1,7 @@
-<script setup lang="ts">
+<script setup>
 defineProps({
-  suffix: String,
-})
+  suffix: String
+});
 </script>
 
 <template>

package/dist/components/PrimeAutoComplete.vue

@@ -1,123 +1,72 @@
-<script setup lang='ts'>
-import type { FormKitFrameworkContext } from '@formkit/core'
-import type { AutoCompleteCompleteEvent, AutoCompleteProps } from 'primevue/autocomplete'
-import type { PropType } from 'vue'
-import { ref, watch } from 'vue'
-import { useFormKitInput } from '../composables'
-
-export interface FormKitPrimeAutoCompleteProps {
-  pt?: AutoCompleteProps['pt']
-  ptOptions?: AutoCompleteProps['ptOptions']
-  unstyled?: AutoCompleteProps['unstyled']
-  dropdown?: AutoCompleteProps['dropdown']
-  multiple?: AutoCompleteProps['multiple']
-  typeahead?: AutoCompleteProps['typeahead']
-  optionLabel?: AutoCompleteProps['optionLabel']
-  options?: any[] | undefined
-  size?: AutoCompleteProps['size']
-  minLength?: AutoCompleteProps['minLength']
-  placeholder?: AutoCompleteProps['placeholder']
-  fluid?: AutoCompleteProps['fluid']
-  separators?: string[] | []
-}
-
+<script setup>
+import { ref, watch } from "vue";
+import { useFormKitInput } from "../composables";
 const props = defineProps({
   context: {
-    type: Object as PropType<FormKitFrameworkContext & FormKitPrimeAutoCompleteProps>,
-    required: true,
-  },
-})
-
-const { validSlotNames, unstyled, isInvalid, handleInput, handleBlur } = useFormKitInput(props.context)
-
-const suggestions = ref(['', {}])
-suggestions.value = []
-const loading = ref(false)
-
-// Local value for v-model
-const localValue = ref(props.context._value)
-
-// Sync localValue with context._value
+    type: Object,
+    required: true
+  }
+});
+const { validSlotNames, unstyled, isInvalid, handleInput, handleBlur } = useFormKitInput(props.context);
+const suggestions = ref(["", {}]);
+suggestions.value = [];
+const loading = ref(false);
+const localValue = ref(props.context._value);
 watch(
   () => props.context._value,
   (newVal) => {
-    localValue.value = newVal
-  },
-)
-
-// Emit changes from localValue to context
+    localValue.value = newVal;
+  }
+);
 watch(
   localValue,
   (newVal) => {
     if (newVal !== props.context._value) {
-      props.context._value = newVal
-      props.context?.node?.input?.(newVal)
+      props.context._value = newVal;
+      props.context?.node?.input?.(newVal);
     }
-  },
-)
-
-/**
- * Searches for suggestions based on the input query.
- */
-async function search(event: AutoCompleteCompleteEvent) {
+  }
+);
+async function search(event) {
   if (props.context?.options && props.context?.optionLabel) {
     suggestions.value = props.context.options.filter((option) => {
-      return option[`${props.context.optionLabel}`].toString().toLowerCase().includes(event.query.toLowerCase())
-    })
-  }
-  else {
-    loading.value = true
+      return option[`${props.context.optionLabel}`].toString().toLowerCase().includes(event.query.toLowerCase());
+    });
+  } else {
+    loading.value = true;
     try {
-      suggestions.value = await props.context?.attrs.complete(event.query)
-    }
-    catch (error) {
-      console.error('Error fetching suggestions:', error)
-      suggestions.value = []
-    }
-    finally {
-      loading.value = false
+      suggestions.value = await props.context?.attrs.complete(event.query);
+    } catch (error) {
+      console.error("Error fetching suggestions:", error);
+      suggestions.value = [];
+    } finally {
+      loading.value = false;
     }
   }
 }
-
-/**
- * Handles paste event to transform a string separated by any of the provided separators into multiple items.
- */
-function handlePaste(event: ClipboardEvent) {
+function handlePaste(event) {
   if (!props.context?.multiple)
-    return
-  const clipboardData = event.clipboardData
+    return;
+  const clipboardData = event.clipboardData;
   if (!clipboardData)
-    return
-  const pastedText = clipboardData.getData('text')
-  const separators = Array.isArray(props.context?.separators) && props.context.separators.length > 0
-    ? props.context.separators
-    : [',']
-  const regex = new RegExp(`[${separators.map(s => s.replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&')).join('')}]`)
-  // If separators are provided, split the pasted text by them
+    return;
+  const pastedText = clipboardData.getData("text");
+  const separators = Array.isArray(props.context?.separators) && props.context.separators.length > 0 ? props.context.separators : [","];
+  const regex = new RegExp(`[${separators.map((s) => s.replace(/[-/\\^$*+?.()|[\]{}]/g, "\\$&")).join("")}]`);
   if (pastedText && regex.test(pastedText)) {
-    event.preventDefault()
-    const items = pastedText
-      .split(regex)
-      .map(item => item.trim())
-      .filter(item => item.length > 0)
-    // Use a local ref, never mutate context._value directly
+    event.preventDefault();
+    const items = pastedText.split(regex).map((item) => item.trim()).filter((item) => item.length > 0);
     if (Array.isArray(localValue.value)) {
-      localValue.value = [...localValue.value, ...items]
-    }
-    else {
-      localValue.value = items
+      localValue.value = [...localValue.value, ...items];
+    } else {
+      localValue.value = items;
     }
-  }
-  // If no separators, just set the value directly
-  else if (pastedText) {
-    event.preventDefault()
-    // If no separators, just set the value directly
+  } else if (pastedText) {
+    event.preventDefault();
     if (Array.isArray(localValue.value)) {
-      localValue.value = [...localValue.value, pastedText.trim()]
-    }
-    else {
-      localValue.value = [pastedText.trim()]
+      localValue.value = [...localValue.value, pastedText.trim()];
+    } else {
+      localValue.value = [pastedText.trim()];
     }
   }
 }

package/dist/components/PrimeCascadeSelect.vue

@@ -1,31 +1,12 @@
-<script setup lang='ts'>
-import type { FormKitFrameworkContext } from '@formkit/core'
-import type { CascadeSelectProps } from 'primevue/cascadeselect'
-
-import type { PropType } from 'vue'
-import { useFormKitInput } from '../composables'
-
-export interface FormKitPrimeCascadeSelectProps {
-  options?: CascadeSelectProps['options']
-  optionLabel?: CascadeSelectProps['optionLabel']
-  optionValue?: CascadeSelectProps['optionValue']
-  optionGroupLabel?: CascadeSelectProps['optionGroupLabel']
-  optionGroupChildren?: CascadeSelectProps['optionGroupChildren']
-  placeholder?: CascadeSelectProps['placeholder']
-  pt?: CascadeSelectProps['pt']
-  ptOptions?: CascadeSelectProps['ptOptions']
-  unstyled?: CascadeSelectProps['unstyled']
-  size?: CascadeSelectProps['size']
-}
-
+<script setup>
+import { useFormKitInput } from "../composables";
 const props = defineProps({
   context: {
-    type: Object as PropType<FormKitFrameworkContext & FormKitPrimeCascadeSelectProps>,
-    required: true,
-  },
-})
-
-const { validSlotNames, unstyled, isInvalid, handleInput, handleBlur } = useFormKitInput(props.context)
+    type: Object,
+    required: true
+  }
+});
+const { validSlotNames, unstyled, isInvalid, handleInput, handleBlur } = useFormKitInput(props.context);
 </script>
 
 <template>

package/dist/components/PrimeCheckbox.vue

@@ -1,34 +1,14 @@
-<script setup lang='ts'>
-import type { FormKitFrameworkContext } from '@formkit/core'
-import type { CheckboxProps } from 'primevue/checkbox'
-
-import type { PropType } from 'vue'
-import { useFormKitInput, useFormKitSection } from '../composables'
-
-export interface FormKitPrimeCheckboxProps {
-  binary?: CheckboxProps['binary']
-  trueValue?: CheckboxProps['trueValue']
-  falseValue?: CheckboxProps['falseValue']
-  pt?: CheckboxProps['pt']
-  ptOptions?: CheckboxProps['ptOptions']
-  unstyled?: CheckboxProps['unstyled']
-  indeterminate?: CheckboxProps['indeterminate']
-  variant?: CheckboxProps['variant']
-  size?: CheckboxProps['size']
-}
-
+<script setup>
+import { useFormKitInput, useFormKitSection } from "../composables";
 const props = defineProps({
   context: {
-    type: Object as PropType<FormKitFrameworkContext & FormKitPrimeCheckboxProps>,
-    required: true,
-  },
-})
-
-const { hasPrefix, hasSuffix, generateId } = useFormKitSection(props.context)
-
-const { validSlotNames, unstyled, isInvalid, handleInput, handleBlur } = useFormKitInput(props.context)
-
-const generatedId = generateId()
+    type: Object,
+    required: true
+  }
+});
+const { hasPrefix, hasSuffix, generateId } = useFormKitSection(props.context);
+const { validSlotNames, unstyled, isInvalid, handleInput, handleBlur } = useFormKitInput(props.context);
+const generatedId = generateId();
 </script>
 
 <template>

package/dist/components/PrimeColorPicker.vue

@@ -1,27 +1,12 @@
-<script setup lang='ts'>
-import type { FormKitFrameworkContext } from '@formkit/core'
-import type { ColorPickerProps } from 'primevue/colorpicker'
-
-import type { PropType } from 'vue'
-import { useFormKitInput } from '../composables'
-
-export interface FormKitPrimeColorPickerProps {
-  defaultColor?: ColorPickerProps['defaultColor']
-  inline?: ColorPickerProps['inline']
-  format?: ColorPickerProps['format']
-  pt?: ColorPickerProps['pt']
-  ptOptions?: ColorPickerProps['ptOptions']
-  unstyled?: ColorPickerProps['unstyled']
-}
-
+<script setup>
+import { useFormKitInput } from "../composables";
 const props = defineProps({
   context: {
-    type: Object as PropType<FormKitFrameworkContext & FormKitPrimeColorPickerProps>,
-    required: true,
-  },
-})
-
-const { unstyled, handleChange } = useFormKitInput(props.context)
+    type: Object,
+    required: true
+  }
+});
+const { unstyled, handleChange } = useFormKitInput(props.context);
 </script>
 
 <template>