updating docs

Author: webdevnerdstuff

src/documentation/components/examples/ConditionalPageExample.vue

@@ -198,7 +198,7 @@ function submitForm() {
 defineExpose({
 	exampleCode: {
 		desc: 'The <code class="ic">when</code> prop in both Page and Field components enables dynamic visibility based on specific conditions. For Page, the <code class="ic">when</code> prop controls page visibility by evaluating a condition, displaying the page only when the condition is met. Similarly, for Field, the <code class="ic">when</code> prop manages field visibility, showing the field only when its condition is satisfied.',
-		name: 'Conditional Fields',
+		name: 'Conditional When',
 		script: scriptCode,
 		template: templateCode,
 	},

src/documentation/components/examples/TemplateExample.vue

@@ -56,7 +56,6 @@ const formSettings = ref({
 	// autoPageDelay: 2000,
 	// bgColor: 'secondary',
 	// border: 'lg',
-	// canReview: false,
 	// color: 'yellow',
 	// density: 'default' as const,
 	// disabled: true,

src/documentation/sections/PropsSection.vue

@@ -58,22 +58,11 @@
 			</p>
 		</v-col>
 
-		<v-col cols="12">
-			<VCodeBlock
-				:code="pagesObject"
-				:highlightjs="codeBlockSettings.plugin === 'highlightjs'"
-				label="Example Page Object"
-				lang="javascript"
-				:prismjs="codeBlockSettings.plugin === 'prismjs'"
-				:theme="codeBlockSettings.theme"
-			/>
-		</v-col>
-
 		<v-col cols="12">
 			<VCodeBlock
 				:code="pageTypings"
 				:highlightjs="codeBlockSettings.plugin === 'highlightjs'"
-				label="Page typings"
+				label="Page Interface"
 				lang="typescript"
 				:prismjs="codeBlockSettings.plugin === 'prismjs'"
 				:theme="codeBlockSettings.theme"
@@ -103,17 +92,6 @@
 			</p>
 		</v-col>
 
-		<v-col cols="12">
-			<VCodeBlock
-				:code="fieldObject"
-				:highlightjs="codeBlockSettings.plugin === 'highlightjs'"
-				label="Example Field Object"
-				lang="javascript"
-				:prismjs="codeBlockSettings.plugin === 'prismjs'"
-				:theme="codeBlockSettings.theme"
-			/>
-		</v-col>
-
 		<v-col
 			id="props-field-interface"
 			cols="12"
@@ -173,20 +151,6 @@ const classes = inject<Docs.GlobalClasses>('classes')!;
 const store = useCoreStore();
 const propsStore = usePropsStore();
 
-const pagesObject = `const pages = [
-  {
-    title: 'Page 1'
-    text: 'This is the page one text',
-    fields: [
-      // ...field objects
-    ],
-    autoPage: true,
-    editable: true,
-    error: false,
-  }
-]
-`;
-
 const pageTypings = `interface Page {
   autoPage?: boolean;
   editable?: VStepperItem['editable'];
@@ -195,22 +159,13 @@ const pageTypings = `interface Page {
   isReview?: boolean;
   text?: string;
   title?: string;
-}`;
-
-const fieldObject = `{
-  color: 'primary',
-  label: 'First Name',
-  name: 'firstName',
-  text: 'Enter your first name only',
-  type: 'text',
-  validateOn: 'blur',
-  variant: 'outlined',
+  visible?: boolean; // Internal use only
+  when?: (value: any) => boolean;
 }`;
 
 const fieldTypings = `interface Field {
   autoPage?: Props['autoPage'];
   autoPageDelay?: Props['autoPageDelay'];
-  canReview?: Props['canReview'];
   class?: string;
   color?: Props['color'];
   columns?: Props['fieldColumns'];

src/stores/menu.ts

@@ -143,10 +143,10 @@ export const useMenuStore = defineStore('menu', () => {
 					title: 'Validation',
 				},
 				{
-					href: '#examples-conditional-fields',
+					href: '#examples-conditional-when',
 					icon: 'mdi:mdi-code-json',
-					key: 'examples-conditional-fields',
-					title: 'Conditional Fields',
+					key: 'examples-conditional-when',
+					title: 'Conditional When',
 				},
 				{
 					href: '#examples-summary-page',