Update PT doc

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>