docs(vitepress): create docs initial

Author: sfxcode

.gitignore

@@ -25,3 +25,6 @@ dist-ssr
 
 .gitconfig
 
+# vitepress
+docs/.vitepress/cache
+docs/.vitepress/dist

docs/.vitepress/config.mts

@@ -0,0 +1,103 @@
+import Unocss from 'unocss/vite'
+import { defineConfig } from 'vitepress'
+import { version } from '../../package.json'
+
+export default defineConfig({
+  title: 'FormKit-PrimeVue',
+  description: 'Formkit PrimeVue Integration',
+  base: '/formkit-primevue/',
+  themeConfig: {
+    footer: {
+      message: 'Nuxt 3 PrimeVue Module',
+      copyright: 'Copyright © 2023 SFXCode',
+    },
+    socialLinks: [
+      { icon: 'github', link: 'https://github.com/sfxcode/formkit-primevue' },
+    ],
+    editLink: {
+      pattern: 'https://github.com/sfxcode/formkit-primevue/edit/main/docs/:path',
+      text: 'Edit this page on GitHub',
+    },
+    nav: nav(),
+    search: {
+      provider: 'local'
+    },
+    sidebar: {
+      '/guide/': sidebarGuide(),
+      '/config/': sidebarConfig(),
+    },
+  },
+  markdown: {
+    headers: {
+      level: [0, 0],
+    },
+  },
+  vite: {
+    plugins: [
+      Unocss({
+        configFile: '../../unocss.config.ts',
+      }),
+    ],
+  },
+})
+
+function nav() {
+  return [
+    { text: 'Guide', link: '/guide/', activeMatch: '/guide/' },
+    {
+      text: 'External Docs',
+      items: [
+        {
+          text: 'PrimeVue',
+          link: 'https://www.primefaces.org/primevue',
+        },
+        {
+          text: 'Formkit',
+          link: 'https://formkit.com',
+        },
+      ],
+    },
+    {
+      text: version,
+      items: [
+        {
+          text: 'Changelog',
+          link: 'https://github.com/sfxcode/formkit-primevue/blob/main/CHANGELOG.md',
+        },
+      ],
+    },
+  ]
+}
+
+function sidebarGuide() {
+  return [
+    {
+      text: 'Introduction',
+      collapsible: true,
+      items: [
+        { text: 'What is this?', link: '/guide/' },
+        { text: 'Getting started', link: '/guide/getting-started' },
+      ],
+    },
+    {
+      text: 'Guide',
+      collapsible: true,
+      items: [
+        { text: 'Usage', link: '/guide/usage' },
+        { text: 'PrimeVue Inputs', link: '/guide/inputs' },
+        { text: 'Sample Apps', link: '/guide/examples' },
+      ],
+    },
+  ]
+}
+
+function sidebarConfig() {
+  return [
+    {
+      text: 'Config',
+      items: [
+        { text: 'Introduction', link: '/config/' },
+      ],
+    },
+  ]
+}

docs/.vitepress/theme/components/Todo.vue

@@ -0,0 +1,18 @@
+<script setup lang='ts'>
+</script>
+
+<template>
+  <div>
+    <div class="mt-8 flex gap-2">
+      <div class="i-mdi-information text-2xl mb-2 text-[color:var(--vp-c-brand)]"/>
+      <div class="text-2xl">TODO</div>
+    </div>
+    <div class="">
+      <span>More Info to come ...</span>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

docs/.vitepress/theme/index.ts

@@ -0,0 +1,12 @@
+import DefaultTheme from 'vitepress/theme'
+import type { App } from 'vue'
+import 'uno.css'
+import type { Theme } from 'vitepress'
+import Todo from './components/Todo.vue'
+
+export default {
+  ...DefaultTheme,
+  enhanceApp({ app }: { app: App }) {
+    app.component('Todo', Todo)
+  },
+} satisfies Theme

docs/guide/examples.md

@@ -0,0 +1,16 @@
+# Usage Examples
+
+::: info
+If you are using this package in your project, please let me know or create a PR for this site
+:::
+
+## Vue
+
+[Demo Application](https://formkit-primevue.netlify.app/)
+
+[Vite PrimeVue Starter](https://github.com/sfxcode/vite-primevue-starter)
+
+## Nuxt 3
+
+[Nuxt 3 PrimeVue Starter](https://github.com/sfxcode/nuxt3-primevue-starter)
+

docs/guide/getting-started.md

@@ -0,0 +1,32 @@
+Getting Started
+
+## Installation steps
+
+### Install depenendencies
+
+```sh
+$ pnpm add -D @sfxcode/formkit-primevue
+```
+
+### PrimeVue
+
+Make sure all components of PrimeVue you want to use are enabled in your configuration.
+
+### Formkit Config
+
+Add a formkit.config.ts to your root dir and register primeInputs for FormKit.
+
+Sample:
+
+```ts
+// formkit.config.ts
+import type { DefaultConfigOptions } from '@formkit/vue'
+import { primeInputs } from '@sfxcode/formkit-primevue'
+
+const config: DefaultConfigOptions = {
+  inputs: primeInputs
+}
+
+export default config
+```
+

docs/guide/index.md

@@ -0,0 +1,7 @@
+# Guide Overview
+
+**formkit-primevue** combines the [PrimeVue](https://www.primefaces.org/primevue) component framework with the validation power of [Formkit](https://formkit.com/) in your Vue/Nuxt application.
+
+
+
+

docs/guide/inputs.md

@@ -0,0 +1,39 @@
+# PrimeVue Inputs
+
+formkit-primevue tries to integrate as much PrimeVue inputs as possible.
+
+::: warning
+Used inputs by FormKit must be imported global (default).
+
+They are referenced in the startup phase, if FormKit is enabled.
+:::
+
+
+## Naming in FormKit
+Inputs are used in schema with **prime** as prefix and the **input name** as suffix.
+
+E.g. InputMask -> primeInputMask
+
+## Supported Inputs
+
+- Calendar
+- Checkbox
+- Dropdown
+- Editor (HTML Editor)
+- InputMask
+- InputNumber
+- InputSwitch
+- InputText
+- InputTextarea
+- MultiSelect
+- Password
+- Ranking
+- Chips
+- Knob
+- ColorPicker
+- Listbox
+- ToggleButton
+- SelectButton
+- TriStateCheckbox
+- RadioButton
+

docs/guide/usage.md

@@ -0,0 +1,45 @@
+# Usage
+
+formkit-primevue was designed for easy integration into FormKit schema.
+
+## Formkit Schema 
+
+```ts
+
+const schema
+  = [
+  {
+    $formkit: 'primeInputMask',
+    name: 'myInputMask',
+    label: 'Input Mask',
+    validation: 'required',
+    validationVisibility: 'live',
+    mask: '99-999999',
+    placeholder: '99-999999',
+  },
+  {
+    $formkit: 'primeInputMask',
+    name: 'custom',
+    label: 'Input Mask',
+    mask: '(999) 999-9999',
+    unmask: true,
+  },
+]
+const data = { }
+```
+
+```vue
+<template>
+      <FormKit
+        id="form"
+        v-model="data"
+        type="form"
+        :submit-attrs="{
+          inputClass: 'p-button p-component',
+        }"
+        @submit="submitHandler"
+      >
+        <FormKitSchema :schema="schema" :data="data" />
+      </FormKit>
+</template>
+```

docs/index.md

@@ -0,0 +1,24 @@
+---
+layout: home
+
+hero:
+  name: FormKit PrimeVue
+  text: Schema based Validation 
+  tagline: Use PrimeVue and FormKit Validation
+  actions:
+    - theme: brand
+      text: Get Started
+      link: /guide/getting-started
+    - theme: alt
+      text: Guide
+      link: /guide/
+
+features:
+- title: "Formkit-PrimeVue"
+  details: PrimeVue support for the FormKit validation Framwork. PrimeVue inputs are prepared for seamless FormKit integration.
+- title: "PrimeVue"
+  details: Next Generation Vue UI Component Library. Rich set of open source native components for Vue.
+- title: "FormKit"
+  details: A Vue form building framework that simplifies form structure, generation, validation, theming, submission, error handling, and more.
+---
+