feat(demo): Add MultiStep sample

Author: sfxcode

README.md

@@ -126,7 +126,7 @@ Some samples for common tasks are available
 - Checkbox
 - ColorPicker
 - DatePicker
-- Editor (HTML Editor)
+- Editor (HTML Editor - if you register the editor component, make sure to import quill)
 - InputMask
 - InputNumber
 - InputOtp

dev/App.scss

@@ -8,6 +8,18 @@
   --font-feature-settings: "cv02", "cv03", "cv04", "cv11";
 }
 
+:root {
+  --multistep-color-border: var(--p-primary-color);
+  --multistep-color-tab: var(--p-primary-active-color);
+  --multistep-color-tab-active: var(--p-primary-color);
+  --multistep-color-success: var(--p-primary-color);
+  --multistep-color-danger: #ef9a9a;
+  --multistep-color-tab-active-text: var(--p-button-primary-color);
+  --multistep-color-tab-text: var(--p-button-primary-color);
+  --multistep-radius: 0.4em;
+  --multistep-shadow: 0.25em 0.25em 1em 0 rgb(0 0 0 / 10%);
+}
+
 html {
   height: 100%;
   font-size: 16px;
@@ -18,4 +30,27 @@ a {
   color: var(--p-primary-color);
 }
 
+.formkit-step-actions {
+  button {
+    display: inline-flex;
+    cursor: pointer;
+    user-select: none;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+    color: var(--p-button-primary-color);
+    background: var(--p-button-primary-background);
+    border: 1px solid var(--p-button-primary-border-color);
+    padding: var(--p-button-padding-y) var(--p-button-padding-x);
+    font-size: 1rem;
+    font-family: inherit;
+    font-feature-settings: inherit;
+    transition: background var(--p-button-transition-duration), color var(--p-button-transition-duration), border-color var(--p-button-transition-duration), outline-color var(--p-button-transition-duration), box-shadow var(--p-button-transition-duration);
+    border-radius: var(--p-button-border-radius);
+    outline-color: transparent;
+    gap: var(--p-button-gap);
+  }
+}
+
 

dev/components/app/AppTopbar.vue

@@ -126,6 +126,7 @@ const items = ref([
             { label: 'Repeater', icon: 'pi pi-fw pi-user-edit', route: '/samples/repeater' },
             { label: 'Input Editor', icon: 'pi pi-fw pi-user-edit', route: '/samples/inputEditor' },
             { label: 'Form Editor', icon: 'pi pi-fw pi-user-edit', route: '/samples/formEditor' },
+            { label: 'MultiStep', icon: 'pi pi-fw pi-user-edit', route: '/samples/multiStep' },
           ],
         },
       ],
@@ -145,8 +146,8 @@ const items = ref([
       </template>  <template #center>
         <div class="text-lg">
           <span class="text-yellow-600 font-bold">New: </span>
-          <router-link to="/outputs/outputList" class="">
-            <span class="">Output List - listStyle</span>
+          <router-link to="/samples/multiStep" class="">
+            <span class="">MultiStep</span>
           </router-link>
         </div>
       </template>  <template #end>

dev/modules/formkit.ts

@@ -1,10 +1,11 @@
 import type { UserModule } from '@/types'
-import { createAutoAnimatePlugin } from '@formkit/addons'
-
+import { createAutoAnimatePlugin, createMultiStepPlugin } from '@formkit/addons'
 import { de, en } from '@formkit/i18n'
+
 import { defaultConfig, plugin } from '@formkit/vue'
 import { primeInputs, primeOutputs } from 'my-library/definitions'
 import { addPrimeAsteriskPlugin } from 'my-library/plugins'
+import '@formkit/addons/css/multistep'
 
 export const install: UserModule = ({ app }) => {
   app.use(plugin, defaultConfig({
@@ -29,6 +30,7 @@ export const install: UserModule = ({ app }) => {
         },
       ),
       addPrimeAsteriskPlugin,
+      createMultiStepPlugin(),
     ],
   }))
 }

dev/pages/samples/MultiStep.vue

@@ -0,0 +1,79 @@
+<script setup lang='ts'>
+const tab = ref(true)
+const key = ref(0)
+const mode = computed(() => {
+  if (tab.value) {
+    return 'tab'
+  }
+  else {
+    return 'progress'
+  }
+})
+
+const schema = reactive([
+  {
+    $formkit: 'multi-step',
+    tabStyle: mode,
+    allowIncomplete: true,
+    children: [
+      {
+        $formkit: 'step',
+        name: 'step1',
+        label: 'Step 1',
+        nextAttrs: {
+          'data-foo': 'bar',
+        },
+        children: [
+          {
+            $formkit: 'primeInputText',
+            name: 'email',
+            label: 'Email',
+            help: 'This will be used for your account.',
+            validation: 'required|email',
+            outerClass: 'col-6',
+          },
+        ],
+      },
+      {
+        $formkit: 'step',
+        name: 'step2',
+        label: 'Step 2',
+        children: [
+          {
+            $formkit: 'primeTextarea',
+            name: 'myText',
+            label: 'Text',
+            validation: '',
+            rows: '3',
+          },
+        ],
+      },
+    ],
+  },
+])
+const data = ref({ })
+
+function update() {
+  data.value = {}
+  key.value++
+}
+</script>
+
+<template>
+  <div class="ml-2">
+    <PrimeInput
+      :key="key"
+      header="MultiStep" :schema="schema" :data="data"
+    >
+      <div class="flex gap-2 mb-4">
+        <div>Use Tab</div>
+        <div>   <ToggleSwitch v-model="tab" @change="update" /></div>
+      </div>
+      <h4>Mode: {{ mode }} </h4>
+    </PrimeInput>
+  </div>
+</template>
+
+<style lang='scss'>
+
+</style>