@sfxcode/formkit-primevue 3.3.1 → 3.3.3

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 sfxcode
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,23 +1,148 @@
-# tsdown-starter
+# Formkit - Primevue
 
-A starter for creating a TypeScript package.
+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/#/).
 
-## Development
+Main focus of this project is to provide configuration based forms with validation.
 
-- Install dependencies:
+In addition, you can use the same pattern for **data output** from **schema** using [PrimeOutputs](https://sfxcode.github.io/formkit-primevue/guide/outputs.html).
 
-```bash
-npm install
-```
+## 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
 
-- Run the unit tests:
+### Configuration
 
-```bash
-npm run test
+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, 
+}))
 ```
 
-- Build the library:
+or if using also the output part
+
+```typescript
+import { defaultConfig, plugin } from '@formkit/vue'
+import { primeInputs, primeOutputs } from '@sfxcode/formkit-primevue'
 
-```bash
-npm run build
+app.use(plugin, defaultConfig({
+  locales: { de, en },
+  // Define the active locale
+  locale: 'en',
+    inputs: { ...primeInputs, ...primeOutputs },
+}))
 ```
+
+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.
+
+### 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)

package/components.d.ts

@@ -0,0 +1 @@
+export * from './dist/components'

package/dist/components/FormKitDataDebug.d.vue.ts

@@ -0,0 +1,24 @@
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    data: {
+        type: ObjectConstructor;
+        default: null;
+    };
+    header: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    data: {
+        type: ObjectConstructor;
+        default: null;
+    };
+    header: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    data: Record<string, any>;
+    header: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/FormKitDataDebug.vue

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

package/dist/components/FormKitDataDebug.vue.d.ts

@@ -0,0 +1,24 @@
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    data: {
+        type: ObjectConstructor;
+        default: null;
+    };
+    header: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    data: {
+        type: ObjectConstructor;
+        default: null;
+    };
+    header: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    data: Record<string, any>;
+    header: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/FormKitDataEdit.d.vue.ts

@@ -0,0 +1,180 @@
+import type { FormKitSchemaDefinition } from '@formkit/core';
+import type { PropType } from 'vue';
+declare var __VLS_16: {}, __VLS_29: {}, __VLS_37: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_16) => any;
+} & {
+    messages?: (props: typeof __VLS_29) => any;
+} & {
+    submit?: (props: typeof __VLS_37) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    id: {
+        type: StringConstructor;
+        default: string;
+    };
+    data: {
+        type: ObjectConstructor;
+        default: null;
+    };
+    schema: {
+        type: PropType<FormKitSchemaDefinition>;
+        default: null;
+    };
+    formClass: {
+        type: StringConstructor;
+        default: string;
+    };
+    actionsClass: {
+        type: StringConstructor;
+        default: string;
+    };
+    submitSeverity: {
+        type: StringConstructor;
+        default: string;
+    };
+    submitClass: {
+        type: StringConstructor;
+        default: string;
+    };
+    submitLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    submitIcon: {
+        type: StringConstructor;
+        default: string;
+    };
+    showReset: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    resetSeverity: {
+        type: StringConstructor;
+        default: string;
+    };
+    resetLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    resetClass: {
+        type: StringConstructor;
+        default: string;
+    };
+    resetIcon: {
+        type: StringConstructor;
+        default: string;
+    };
+    debugData: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    debugSchema: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    modelValue: {
+        type: PropType<any>;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    onReset: (...args: any[]) => void;
+    dataSaved: (...args: any[]) => void;
+    "update:modelValue": (value: any) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    id: {
+        type: StringConstructor;
+        default: string;
+    };
+    data: {
+        type: ObjectConstructor;
+        default: null;
+    };
+    schema: {
+        type: PropType<FormKitSchemaDefinition>;
+        default: null;
+    };
+    formClass: {
+        type: StringConstructor;
+        default: string;
+    };
+    actionsClass: {
+        type: StringConstructor;
+        default: string;
+    };
+    submitSeverity: {
+        type: StringConstructor;
+        default: string;
+    };
+    submitClass: {
+        type: StringConstructor;
+        default: string;
+    };
+    submitLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    submitIcon: {
+        type: StringConstructor;
+        default: string;
+    };
+    showReset: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    resetSeverity: {
+        type: StringConstructor;
+        default: string;
+    };
+    resetLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    resetClass: {
+        type: StringConstructor;
+        default: string;
+    };
+    resetIcon: {
+        type: StringConstructor;
+        default: string;
+    };
+    debugData: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    debugSchema: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    modelValue: {
+        type: PropType<any>;
+    };
+}>> & Readonly<{
+    onOnReset?: ((...args: any[]) => any) | undefined;
+    onDataSaved?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: any) => any) | undefined;
+}>, {
+    data: Record<string, any>;
+    id: string;
+    schema: FormKitSchemaDefinition;
+    formClass: string;
+    actionsClass: string;
+    submitSeverity: string;
+    submitClass: string;
+    submitLabel: string;
+    submitIcon: string;
+    showReset: boolean;
+    resetSeverity: string;
+    resetLabel: string;
+    resetClass: string;
+    resetIcon: string;
+    debugData: boolean;
+    debugSchema: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/FormKitDataEdit.vue

@@ -0,0 +1,126 @@
+<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'
+
+const props = defineProps({
+  id: {
+    type: String,
+    default: 'formkit_form',
+  },
+  data: {
+    type: Object,
+    default: null,
+  },
+  schema: {
+    type: Object as PropType<FormKitSchemaDefinition>,
+    default: null,
+  },
+  formClass: {
+    type: String,
+    default: '',
+  },
+  actionsClass: {
+    type: String,
+    default: '',
+  },
+  submitSeverity: {
+    type: String,
+    default: '',
+  },
+  submitClass: {
+    type: String,
+    default: '',
+  },
+  submitLabel: {
+    type: String,
+    default: 'Save',
+  },
+  submitIcon: {
+    type: String,
+    default: '',
+  },
+  showReset: {
+    type: Boolean,
+    default: false,
+  },
+  resetSeverity: {
+    type: String,
+    default: 'danger',
+  },
+  resetLabel: {
+    type: String,
+    default: 'Reset',
+  },
+  resetClass: {
+    type: String,
+    default: '',
+  },
+  resetIcon: {
+    type: String,
+    default: '',
+  },
+  debugData: {
+    type: Boolean,
+    default: false,
+  },
+  debugSchema: {
+    type: Boolean,
+    default: false,
+  },
+})
+const emit = defineEmits(['dataSaved', 'onReset'])
+
+const formData = defineModel<any>()
+
+if (props.data) {
+  formData.value = props.data
+}
+
+const formSchema = ref(props.schema)
+
+function handleSave() {
+  emit('dataSaved', formData.value)
+}
+
+function handleReset() {
+  reset(props.id)
+  emit('onReset')
+}
+</script>
+
+<template>
+  <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 />
+      <FormKitDataDebug v-if="debugData" :data="formData" header="Debug Mode - Data" />
+      <FormKitDataDebug 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>