npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@sfxcode/formkit-primevue

v2.6.8

Published

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://www.primefaces.org/primevue/#/).

Downloads

5,147

Readme

Formkit - Primevue

PrimeVue based FormKit Inputs for using FormKit with the PrimeVue UI Framework.

Main focus of this project is to provide configuration based forms with validation.

In addition, you can use the same pattern for data output from schema using PrimeOutputs.

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

Netlify Status

Docs

Docs

Demo/Playground

Usage

Configuration

Add formkit.config.ts

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, 
}))

or if using also the output part

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 },
}))

Important: output elements depends on vue-i18n to style numbers, dates, ...

Nuxt

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 provide functions to simplify the usage of elements, components, lists, ...

useInputEditorSchema provide functions for a component schema generation builder

Basic Styling

Basic styling is provided with the 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/)
  • Styling and PT demo available
  • Grid Demo of the provided grid styling (col-[1-12])

Samples

Some samples for common tasks are available

  • Repeater Use Repeater composable for using repeating values in your schema
  • Input Editor Edit FormKit schema on the based on a provided composable
  • Form Editor Basic demo as starter to create Forms visually

Showcases

Demo Application

Nuxt 3 PrimeVue Starter and Vite PrimeVue Starter with Formkit support available.

Supported Inputs for PrimeVue 4

  • AutoComplete
  • CascadeSelect
  • Checkbox
  • ColorPicker
  • DatePicker
  • Editor (HTML Editor)
  • InputMask
  • InputNumber
  • InputOtp
  • InputText
  • Knob
  • Listbox
  • MultiSelect
  • Password
  • RadioButton
  • Rating
  • Select
  • SelectButton
  • Slider
  • Textarea
  • ToggleButton
  • ToggleSwitch
  • TreeSelect