@sfxcode/formkit-primevue 3.3.3 → 3.3.5

package/README.md

@@ -1,148 +1,23 @@
-# Formkit - Primevue
+# tsdown-starter
 
-PrimeVue based [FormKit Inputs](https://sfxcode.github.io/formkit-primevue/guide/inputs.html) for using [FormKit](https://formkit.com/) with the [PrimeVue UI Framework](https://primevue.org/#/).
+A starter for creating a TypeScript package.
 
-Main focus of this project is to provide configuration based forms with validation.
+## Development
 
-In addition, you can use the same pattern for **data output** from **schema** using [PrimeOutputs](https://sfxcode.github.io/formkit-primevue/guide/outputs.html).
+- Install dependencies:
 
-## PrimeVue Versions
-
-Actual PrimeVue Version of the main branch is *4.x.*
-
-PrimeVue 3 is in the prime3 branch, but future development will only focus on PrimeVue 4
-
-## Build
-
-[![CI](https://github.com/sfxcode/formkit-primevue/actions/workflows/deploy.yml/badge.svg)](https://github.com/sfxcode/formkit-primevue/actions/workflows/deploy.yml)
-
-[![Netlify Status](https://api.netlify.com/api/v1/badges/6142cb73-02e0-4b2a-9ca3-25496f59ba9b/deploy-status)](https://app.netlify.com/sites/formkit-primevue/deploys)
-
-## Docs
-
-[Docs](https://sfxcode.github.io/formkit-primevue/)
-
-[Demo/Playground](https://formkit-primevue.netlify.app/)
-
-## Usage
-
-### Configuration
-
-Add *formkit.config.ts*
-
-```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, 
-}))
+```bash
+npm install
 ```
 
-or if using also the output part
+- Run the unit tests:
 
-```typescript
-import { defaultConfig, plugin } from '@formkit/vue'
-import { primeInputs, primeOutputs } from '@sfxcode/formkit-primevue'
-
-app.use(plugin, defaultConfig({
-  locales: { de, en },
-  // Define the active locale
-  locale: 'en',
-    inputs: { ...primeInputs, ...primeOutputs },
-}))
+```bash
+npm run test
 ```
 
-Important: output elements depends on vue-i18n to style numbers, dates, ...
-
-### Nuxt
-
-[FormKit-PrimeVue-Nuxt](https://github.com/sfxcode/formkit-primevue-nuxt) module available.
-
-Features:
-
-- add PrimeVue Nuxt Module
-- add FormKit Nuxt Module
-- add i18n Nuxt Module
-- Default Configuration for FormKit (with PrimeVue components) is provided (can be disabled if needed)
-- AutoImport of PrimeVue Form Components
-- PrimeIcons are loaded by Default
-- FormKit Styling of this package is loaded by default
-- AutoImport of Composables
-- AutoImport of Components
-
-## Limitations
-
-Prefixing of the PrimeVue component names is not supported.
+- Build the library:
 
-### 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 or the corresponding css file in the package.
-
-Features:
-
-- Width of all text and dropdown elements is set to 100%
-- Error Color by variable (--formkit-error-color)
-- Some margins, font sizes ...
-
-You can use it or take it as base for your own styling.
-
-### Extended Styling
-
-- Styling outerClas, innerClass .... is provided by FormKit
-- All inputs, outputs are wrapped in a div with a **p-formkit** class
-- Most of the Prime Input Components have access to class / styles attributes
-- PT and PTOptions are available ([https://primevue.org/passthrough/](https://primevue.org/passthrough/))
-- [Styling](https://formkit-primevue.netlify.app/styling/base) and [PT](https://formkit-primevue.netlify.app/styling/passThrough) demo available
-- [Grid](https://formkit-primevue.netlify.app/styling/grid) Demo of the provided grid styling (col-[1-12])
-
-### Samples
-
-Some samples for common tasks are available
-
-- [Repeater](https://formkit-primevue.netlify.app/samples/repeater) Use Repeater composable for using repeating values in your schema
-- [Input Editor](https://formkit-primevue.netlify.app/samples/inputEditor) Edit FormKit schema on the based on a provided composable
-- [Form Editor](https://formkit-primevue.netlify.app/samples/formEditor) Basic demo as starter to create Forms visually
-
-## Showcases
-
-[Demo Application](https://formkit-primevue.netlify.app/)
-
-[Nuxt 3 PrimeVue Starter](https://github.com/sfxcode/nuxt3-primevue-starter) and [Vite PrimeVue Starter](https://github.com/sfxcode/vite-primevue-starter) with Formkit support available.
-
-## Supported Inputs for PrimeVue 4
-
-- AutoComplete
-- CascadeSelect
-- Checkbox
-- ColorPicker
-- DatePicker
-- Editor (HTML Editor - if you register the editor component, make sure to import quill)
-- InputMask
-- InputNumber
-- InputOtp
-- InputText
-- Knob
-- Listbox
-- MultiSelect
-- Password
-- RadioButton
-- Rating
-- Select
-- SelectButton
-- Slider
-- Textarea
-- ToggleButton
-- ToggleSwitch
-- TreeSelect
-
-![](formkit-primevue.png)
+```bash
+npm run build
+```

package/dist/components/FormKitDataDebug.vue

@@ -1,14 +1,14 @@
-<script setup lang='ts'>
+<script setup>
 defineProps({
   data: {
     type: Object,
-    default: null,
+    default: null
   },
   header: {
     type: String,
-    default: 'Debug',
-  },
-})
+    default: "Debug"
+  }
+});
 </script>
 
 <template>
@@ -17,7 +17,3 @@ defineProps({
     <span v-else>No Data available</span>
   </Fieldset>
 </template>
-
-<style scoped>
-
-</style>

package/dist/components/FormKitDataEdit.vue

@@ -1,94 +1,86 @@
-<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 FormKitDataDebug from './FormKitDataDebug.vue'
-
+<script setup>
+import { reset } from "@formkit/core";
+import { FormKit, FormKitMessages, FormKitSchema } from "@formkit/vue";
+import { ref } from "vue";
+import FormKitDataDebug from "./FormKitDataDebug.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>
 
@@ -105,7 +97,11 @@ function handleReset() {
       <FormKitSchema v-if="formSchema" :schema="formSchema" :data="formData" />
       <slot />
       <FormKitDataDebug v-if="debugData" :data="formData" header="Debug Mode - Data" />
-      <FormKitDataDebug v-if="debugSchema" :data="formSchema as object" header="Debug Mode - Schema" />
+      <FormKitDataDebug
+        v-if="debugSchema"
+        :data="formSchema as object"
+        header="Debug Mode - Schema"
+      />
     </template>
     <template #messages>
       <slot name="messages">
@@ -114,13 +110,24 @@ function handleReset() {
     </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" />
+        <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,40 +1,33 @@
-<script setup lang='ts'>
-import type { FormKitSchemaDefinition } from '@formkit/core'
-import type { PropType } from 'vue'
-
-import { FormKit, FormKitSchema } from '@formkit/vue'
-import { ref } from 'vue'
-import FormKitDataDebug from './FormKitDataDebug.vue'
-
+<script setup>
+import { FormKit, FormKitSchema } from "@formkit/vue";
+import { ref } from "vue";
+import FormKitDataDebug from "./FormKitDataDebug.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 formSchema = ref(props.schema)
-
-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>
 
@@ -49,10 +42,10 @@ if (props.data) {
     <FormKitSchema v-if="schema" :schema="formSchema" :data="formData" />
     <slot />
     <FormKitDataDebug v-if="debugData" :data="formData" header="Debug Mode - Data" />
-    <FormKitDataDebug v-if="debugSchema" :data="formSchema as object" header="Debug Mode - Schema" />
+    <FormKitDataDebug
+      v-if="debugSchema"
+      :data="formSchema as object"
+      header="Debug Mode - Schema"
+    />
   </FormKit>
 </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,101 +1,56 @@
-<script setup lang='ts'>
-import type { FormKitFrameworkContext } from '@formkit/core'
-import type { AutoCompleteCompleteEvent, AutoCompleteProps } from 'primevue/autocomplete'
-import type { PropType } from 'vue'
-import { ref } 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 } from "vue";
+import { useFormKitInput } from "../composables/index.ts";
 const props = defineProps({
   context: {
-    type: Object as PropType<FormKitFrameworkContext & FormKitPrimeAutoCompleteProps>,
-    required: true,
-  },
-})
-
-const { validSlotNames, unstyled, isInvalid, handleInput, handleBlur, modelValue } = useFormKitInput(props.context)
-
-const suggestions = ref(['', {}])
-suggestions.value = []
-const loading = ref(false)
-
-/**
- * Searches for suggestions based on the input query.
- */
-async function search(event: AutoCompleteCompleteEvent) {
+    type: Object,
+    required: true
+  }
+});
+const { validSlotNames, unstyled, isInvalid, handleInput, handleBlur, modelValue } = useFormKitInput(props.context);
+const suggestions = ref(["", {}]);
+suggestions.value = [];
+const loading = ref(false);
+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) {
-  if (!props.context?.multiple)
-    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
+function handlePaste(event) {
+  if (!props.context?.multiple) 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 (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(modelValue.value)) {
-      modelValue.value = [...modelValue.value, ...items]
+      modelValue.value = [...modelValue.value, ...items];
+    } else {
+      modelValue.value = items;
     }
-    else {
-      modelValue.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(modelValue.value)) {
-      modelValue.value = [...modelValue.value, pastedText.trim()]
-    }
-    else {
-      modelValue.value = [pastedText.trim()]
+      modelValue.value = [...modelValue.value, pastedText.trim()];
+    } else {
+      modelValue.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/index.ts";
 const props = defineProps({
   context: {
-    type: Object as PropType<FormKitFrameworkContext & FormKitPrimeCascadeSelectProps>,
-    required: true,
-  },
-})
-
-const { validSlotNames, unstyled, isInvalid, handleInput, handleBlur, modelValue } = useFormKitInput(props.context)
+    type: Object,
+    required: true
+  }
+});
+const { validSlotNames, unstyled, isInvalid, handleInput, handleBlur, modelValue } = useFormKitInput(props.context);
 </script>
 
 <template>