From ecfc27777b9fe733d97555201d04181016e90d2b Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Fri, 23 Feb 2024 11:13:16 +0300
Subject: [PATCH] Update PT doc

---
 doc/passthrough/DeclarativeDoc.vue | 53 ++++++++++++++++++++++++++++++
 pages/passthrough/index.vue        |  6 ++++
 2 files changed, 59 insertions(+)
 create mode 100644 doc/passthrough/DeclarativeDoc.vue

diff --git a/doc/passthrough/DeclarativeDoc.vue b/doc/passthrough/DeclarativeDoc.vue
new file mode 100644
index 000000000..82eb25679
--- /dev/null
+++ b/doc/passthrough/DeclarativeDoc.vue
@@ -0,0 +1,53 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            The declarative syntax provides an alternative to the programmatic syntax. The attributes that start with <i>pt</i> are interpreted differently by the component based on the format below. An IDE extension is also being planned to
+            autocomplete the values for better developer experience in the future.
+        </p>
+        <DocSectionCode :code="code1" hideToggleCode hideStackBlitz />
+        <p>Here is another example using both syntax alternatives for the same options.</p>
+        <DocSectionCode :code="code2" hideToggleCode hideStackBlitz />
+        <DocSectionCode :code="code3" hideToggleCode hideStackBlitz />
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code1: {
+                basic: `
+<ComponentTag pt:[passthrough_key]:[attribute]="value" />
+`
+            },
+            code2: {
+                basic: `
+<Panel
+    :pt="{
+       root: {
+         class='"border-1 border-solid'
+       },
+       header: {
+          'data-test-id': 'testid',
+          class: 'bg-blue-500',
+          onClick: onHeaderClick
+       }
+    }"
+>
+`
+            },
+            code3: {
+                basic: `
+<Panel
+    pt:root:class="border-1 border-solid"
+    pt:header:id="headerId"
+    pt:header:data-test-id="testId"
+    pt:header:class="bg-blue-500"
+    :pt:header:onClick="onHeaderClick"
+>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/pages/passthrough/index.vue b/pages/passthrough/index.vue
index 108ec3bde..9b37fa0b8 100644
--- a/pages/passthrough/index.vue
+++ b/pages/passthrough/index.vue
@@ -18,6 +18,7 @@
 <script>
 import BasicDoc from '@/doc/passthrough/BasicDoc.vue';
 import CustomCSSDoc from '@/doc/passthrough/CustomCSSDoc.vue';
+import DeclarativeDoc from '@/doc/passthrough/DeclarativeDoc.vue';
 import GlobalDoc from '@/doc/passthrough/GlobalDoc.vue';
 import LifecycleDoc from '@/doc/passthrough/LifecycleDoc.vue';
 import UsePassThroughDoc from '@/doc/passthrough/UsePassThroughDoc.vue';
@@ -31,6 +32,11 @@ export default {
                     label: 'Basic',
                     component: BasicDoc
                 },
+                {
+                    id: 'declarative',
+                    label: 'Declarative',
+                    component: DeclarativeDoc
+                },
                 {
                     id: 'lifecycle',
                     label: 'Lifecycle',