docs(vitepress): update files and add new content

sfxcode · sfxcode · commit ed228fffbfe5 · 2024-07-30T22:38:02.000+02:00
close #48
diff --git a/dev/components/demo/PrimeInput.vue b/dev/components/demo/PrimeInput.vue
@@ -39,7 +39,7 @@ async function submitHandler() {
     <slot />
     <div class="flex flex-wrap gap-8">
       <div class="min-w-30rem basis-1/3 xl:basis-1/4">
-        <FormKitDataEdit :form-class="formClass" :schema="formSchema" :data="formData" :debug-schema="false" :debug-data="true" form-class="data-edit" @data-saved="submitHandler" />
+        <FormKitDataEdit :form-class="formClass" :schema="formSchema" :data="formData" :debug-schema="false" :debug-data="true" @data-saved="submitHandler" />
       </div>
       <div class="">
         <Tabs>
diff --git a/docs/.vitepress/config.mts b/docs/.vitepress/config.mts
@@ -88,11 +88,15 @@ function sidebarGuide() {
       collapsible: true,
       items: [
         { text: 'Usage', link: '/guide/usage' },
-        { text: 'PrimeVue Inputs', link: '/guide/inputs' },
+        { text: 'Input Components', link: '/guide/inputs' },
+        { text: 'Output Components', link: '/guide/outputs' },
+        { text: 'Data Components', link: '/guide/data' },
         { text: 'Options', link: '/guide/options' },
         { text: 'Composables', link: '/guide/composables' },
         { text: 'Styling', link: '/guide/styling' },
+        { text: 'Prefix/Suffix', link: '/guide/prefix' },
         { text: 'Sample Apps', link: '/guide/examples' },
+        { text: 'History', link: '/guide/history' },
       ],
     },
   ]
diff --git a/docs/.vitepress/theme/components/DisplayComponents.vue b/docs/.vitepress/theme/components/DisplayComponents.vue
@@ -1,8 +1,23 @@
 <script setup lang='ts'>
-import { ref } from 'vue'
+import { defineProps, ref } from 'vue'
 
-const inputs = ['AutoComplete', 'CascadeSelect', 'Checkbox', 'ColorPicker', 'DatePicker', 'Editor', 'InputMask', 'InputNumber', 'InputOtp', 'InputText', 'Knob', 'Listbox', 'MultiSelect', 'Password', 'RadioButton', 'Rating', 'Select', 'SelectButton', 'Slider', 'Textarea', 'ToggleButton', 'ToggleSwitch', 'TreeSelect']
-const names = ref(inputs.sort((a, b) => a.localeCompare(b)))
+const props = defineProps({
+  full: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const primeInputWithOptionNames = ['CascadeSelect', 'Listbox', 'MultiSelect', 'RadioButton', 'Select', 'SelectButton', 'TreeSelect']
+
+function primeInputNames() {
+  if (props.full)
+    return [...primeInputWithOptionNames, 'AutoComplete', 'Checkbox', 'ColorPicker', 'DatePicker', 'Editor', 'InputMask', 'InputNumber', 'InputOtp', 'InputText', 'Knob', 'Password', 'Rating', 'Slider', 'Textarea', 'ToggleButton', 'ToggleSwitch'].sort()
+  else
+    return primeInputWithOptionNames
+}
+
+const names = ref(primeInputNames().sort((a, b) => a.localeCompare(b)))
 </script>
 
 <template>
diff --git a/docs/.vitepress/theme/components/DisplayOutputComponents.vue b/docs/.vitepress/theme/components/DisplayOutputComponents.vue
@@ -0,0 +1,21 @@
+<script setup lang='ts'>
+import { ref } from 'vue'
+
+const primeOutputNames = ['OutputBoolean', 'OutputDate', 'OutputDuration', 'OutputLink', 'OutputList', 'OutputNumber', 'OutputText']
+
+const names = ref(primeOutputNames.sort((a, b) => a.localeCompare(b)))
+</script>
+
+<template>
+  <div>
+    <div class="pb-6 grid grid-cols-3 gap-4 content-start ...">
+      <div v-for="name in names" :key="name" class="">
+        <a :href="`https://formkit-primevue.netlify.app/outputs/${name}`" target="_new">{{ name }}</a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts
@@ -4,11 +4,13 @@ import 'uno.css'
 import type { Theme } from 'vitepress'
 import Todo from './components/Todo.vue'
 import DisplayComponents from './components/DisplayComponents.vue'
+import DisplayOutputComponents from './components/DisplayOutputComponents.vue'
 
 export default {
   ...DefaultTheme,
   enhanceApp({ app }: { app: App }) {
     app.component('Todo', Todo)
     app.component('DisplayComponents', DisplayComponents)
+    app.component('DisplayOutputComponents', DisplayOutputComponents)
   },
 } satisfies Theme
diff --git a/docs/guide/composables.md b/docs/guide/composables.md
@@ -47,12 +47,23 @@ const formData = ref([
 ])
 ```
 
-### Repeater
+## useFormkitRepeater
 
 To simplify the build of a repeater you can use:
 
-- addList
-- addListGroup
+- addInsertButton
+- addGroupButtons
 - addListGroupFunctions
 
+```vue
+
+<script setup lang='ts'>
+import { useFormKitRepeater } from '@sfxcode/formkit-primevue/comosables'
+
+const { addInsertButton, addGroupButtons, addListGroupFunctions } = useFormKitRepeater()
+
+</script>
+
+```
+
 A working example can be found in the [repeater demo](https://github.com/sfxcode/formkit-primevue/blob/main/dev/pages/samples/Repeater.vue).
diff --git a/docs/guide/data.md b/docs/guide/data.md
@@ -0,0 +1,37 @@
+# Data
+
+For the simple usage with schema and data values FormKitDataEdit and FormKitDataView (and FormkitDebug) components ars available. 
+
+## Usage
+
+To use the components there must be an import or global registration.
+
+### FormKitDataEdit
+
+```vue
+
+<script setup lang='ts'>
+
+  import { FormKitDataEdit } from '@sfxcode/formkit-primevue/components'
+ 
+  const formSchema = ref({})  // some schema should be provided
+  const formData = ref({})    // some data
+
+  async function submitHandler(data: any) {
+    // some action on form submit
+  }
+</script>
+
+<template>
+  <div>
+    <FormKitDataEdit  :schema="formSchema" :data="formData" 
+                      :debug-schema="false" :debug-data="true" 
+                      @data-saved="submitHandler" />
+  </div>
+</template>
+
+```
+
+### FormKitDataView
+
+Same as FormKitDataEdit but without Submit button and action.
diff --git a/docs/guide/history.md b/docs/guide/history.md
@@ -0,0 +1,76 @@
+# History
+
+Only some topics are mentioned ....
+
+## 0.x to 1.0.0 (2023-03-08)
+
+- First version of this framework with PrimeVue 3 
+
+## 1.1.x
+
+- Added some styles to visualize errors on prime inputs
+
+## 1.2.x
+
+- Added Radio Button
+
+## 1.3.x
+
+- **FormKit 1.0**
+
+
+## 1.4.x
+
+- more styling by sass
+- default style of all inputs to width of 100% (when it makes sense)
+
+## 1.5.x
+
+- autoAnimate Plugin in ShowCase
+- add missing props to some components
+- **FormKit 1.5**
+
+## 1.6.x 
+
+- Better Option Handling
+- Provide simple option usage
+
+## 1.7.x
+
+- TreeSelect
+- v-bind for passthrough of missing options
+
+## 1.8.x
+
+- use InputField/InputIcon
+- types added
+
+## 1.9.x
+
+- useFormKitSchema composable
+- vitest - create some tests
+
+## 1.11.x
+
+- Input Editor
+- **FormKit 1.6.5**
+
+## 2.0.x
+
+- Update to **PrimeVue 4**
+
+## 2.1.x
+
+- Stabilize the usage with PrimeVue 4
+
+## 2.3.x
+
+- FormEditor
+- Form Outputs
+- Better Styling with the provided sass file
+- Simple Grid by adding col-[1-12] to outerClass
+- Better Prefix / Suffix Handling
+
+## 2.4.x
+
+- change to iconPrefix/iconSuffix
diff --git a/docs/guide/inputs.md b/docs/guide/inputs.md
@@ -1,4 +1,4 @@
-# PrimeVue Inputs
+# Input Components
 
 formkit-primevue tries to integrate as much PrimeVue inputs as possible.
 
@@ -15,4 +15,4 @@ E.g. InputMask -> primeInputMask
 
 ## Supported Inputs
 
-<DisplayComponents />
+<DisplayComponents :full="true" />
diff --git a/docs/guide/options.md b/docs/guide/options.md
@@ -4,11 +4,7 @@ In some inputs options are needed. There are several ways to deal with the optio
 
 ## Option based Inputs
 
-- Listbox
-- MultiSelect
-- RadioButton
-- Select
-- SelectButton
+<DisplayComponents :full="false" />
 
 ## Ways of Usage
 
diff --git a/docs/guide/outputs.md b/docs/guide/outputs.md
@@ -0,0 +1,34 @@
+# Output Components
+
+formkit-primevue can also be used to output data.
+
+Different types of data can behandled.
+
+::: warning
+Some outputs depends on vue-i18n e.g. **OutputNumber** or **OutputDate**.
+
+numberFormats / datetimeFormats from vue-i18n are used to display the values accordingly to the selected format.
+:::
+
+## Examples
+
+### OutputNumber
+
+```ts
+  const formkitItem =  {
+      $formkit: 'primeOutputNumber',
+      name: 'mumber', 
+      format: 'decimal',  // vue-i18n format
+    }
+```
+
+
+
+## Naming in FormKit
+Outputs are used in schema with **prime** as prefix and the **output name** as suffix.
+
+E.g. OutputText -> primeOutputText
+
+## Supported Inputs
+
+<DisplayOutputComponents />
diff --git a/docs/guide/prefix.md b/docs/guide/prefix.md
@@ -0,0 +1,42 @@
+# Usage Examples
+
+All **Output classes** support the **optional** usage of a prefix (text/icon) and a suffix (text/icon).
+
+**InputText** and **InputMask** uses iconPrefix/iconSuffix, **CheckBox** and **ToggleButton** uses prefix/suffix.
+
+::: warning
+FormKit use the props prefixIcon/suffixIcon internal for theme and provides a lookup for available icons when some pattern for props is used.
+To prevent the behavior for this framework the property names are switched to **iconPrefix** and **iconSuffix**.
+:::
+## Sample Definition
+
+```ts
+
+export const primeOutputTextDefinition: FormKitTypeDefinition = createInput(PrimeOutputText, {
+    props: ['prefix', 'suffix', 'iconPrefix', 'iconSuffix'],
+})
+
+```
+
+Icons are rendered in an i-Tag and requires a class and text in a span-Tag.
+
+## Example
+
+```ts
+const schema
+= [
+    {
+        $formkit: 'primeOutputBoolean',
+        name: 'falseValue',
+        label: 'False',
+        prefix: 'prefix',
+        iconPrefix: 'pi pi-check',
+        suffix: 'suffix',
+        iconSuffix: 'pi pi-times',
+    }
+]
+
+```
+
+
+
diff --git a/docs/guide/styling.md b/docs/guide/styling.md
@@ -18,10 +18,39 @@ You can use it or take it as base for your own styling.
 
 Make sure to add a class selector for **p-invalid**.
 
+## Grid
+
+**formkit-primevue.scss** defines a simple grid system based on flex with a 12 columns layout.
+
+For example to place 2 elements side by side give both of them the **outerClass** value **col-6**.
+
+```ts
+  const formkitItems =  [
+    {
+        $formkit: 'primePassword',
+        name: 'password',
+        label: 'Password',
+        help: 'Enter your new password.',
+        validation: 'required|length:5,16',
+        feedback: true,
+        outerClass: 'col-6',
+    },
+    {
+        $formkit: 'primePassword',
+        name: 'password_confirm',
+        label: 'Confirm password',
+        help: 'Enter your new password again.',
+        validation: 'required|confirm',
+        validationLabel: 'password confirmation',
+        outerClass: 'col-6',
+    },
+]
+```
+
 ## Extended Styling
 
-- All inputs are wrapped in a div with a **p-formkit** class
-- Use *wrapperClass* to add additional styleclasses to wrapper div
+- All components are wrapped in a div with a **p-formkit** class
+- Use *outerClass*, *wrapperClass*, *innerClass* to add additional styleclasses to formkit generated classes
 - Most Prime Components have access to class / styles attributes
 - Some Components have addtional properties for the rendered inputs (eg: optionClass, labelClass in primeRadioButton)
 - PT and PTOptions are available ([https://primevue.org/passthrough/](https://primevue.org/passthrough/))
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
