From bee6a7f0f1c93b95bb333ba6f6c13bb27bf107e3 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Sun, 27 Oct 2024 12:46:57 +0300
Subject: [PATCH] Update pass-through docs

---
 .../showcase/doc/passthrough/CustomCSSDoc.vue | 30 ++++---------------
 .../doc/passthrough/IntroductionDoc.vue       | 17 +++++++++++
 apps/showcase/pages/passthrough/index.vue     | 10 +++++--
 3 files changed, 31 insertions(+), 26 deletions(-)
 create mode 100644 apps/showcase/doc/passthrough/IntroductionDoc.vue

diff --git a/apps/showcase/doc/passthrough/CustomCSSDoc.vue b/apps/showcase/doc/passthrough/CustomCSSDoc.vue
index 5a0c46f75..3c977bef1 100644
--- a/apps/showcase/doc/passthrough/CustomCSSDoc.vue
+++ b/apps/showcase/doc/passthrough/CustomCSSDoc.vue
@@ -1,8 +1,7 @@
 <template>
     <DocSectionText v-bind="$attrs">
         <p>
-            The <i>global</i> property has a <i>css</i> option to define custom css that belongs to a global <i>pt</i> configuration. Common use case of this feature is defining global styles and animations related to the pass through props
-            configuration.
+            The <i>global</i> property has a <i>css</i> option to define custom css that belongs to a global <i>pt</i> configuration. Common use case of this feature is defining global styles and animations related to the pass through configuration.
         </p>
     </DocSectionText>
 
@@ -23,30 +22,13 @@ app.use(PrimeVue, {
     pt: {
         global: {
             css: \`
-                button {
-                    padding: 2rem;
-                }
-
-                .p-ink {
-                    display: block;
-                    position: absolute;
-                    background: rgba(255, 255, 255, 0.5);
-                    border-radius: 100%;
-                    transform: scale(0);
-                    pointer-events: none;
-                }
-
-                .p-ink-active {
-                    animation: ripple 0.4s linear;
-                }
-
-                @keyframes ripple {
-                    100% {
-                        opacity: 0;
-                        transform: scale(2.5);
-                    }
+                .my-button {
+                    border-width: 2px;
                 }
             \`
+        },
+        button: {
+            root: 'my-button'
         }
     }
 });
diff --git a/apps/showcase/doc/passthrough/IntroductionDoc.vue b/apps/showcase/doc/passthrough/IntroductionDoc.vue
new file mode 100644
index 000000000..5656e972f
--- /dev/null
+++ b/apps/showcase/doc/passthrough/IntroductionDoc.vue
@@ -0,0 +1,17 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            In traditional 3rd party UI libraries, users are limited to the API provided by component author. This API commonly consists of props, events and slots. Whenever a requirement emerges for a new customization option in the API, the
+            component author needs to develop and publish it with a new release.
+        </p>
+        <p>
+            Vision of PrimeTek is <i>Your components, not ours</i>. The pass through feature is a key element to implement this vision by exposing the component internals in order to apply arbitrary attributes and listeners to the DOM elements. The
+            main advantage of this approach is that it prevents you from being locked into the component author. We recommend considering the pass-through feature whenever you need to tailor a component that lacks a built-in feature for your specific
+            requirement.
+        </p>
+        <p>Two videos are available at PrimeTV youtube channel, first one is an introduction and second one covers a unique case that is solved by the pass-through.</p>
+    </DocSectionText>
+    <div class="video-container">
+        <iframe width="560" height="315" src="https://www.youtube.com/embed/videoseries?si=gBh1ow-f0JfGWPrv&amp;list=PLC9bp-OHi-Wk9fMhxOM1u6Si82i6AxqUM" frameborder="0" allowfullscreen></iframe>
+    </div>
+</template>
diff --git a/apps/showcase/pages/passthrough/index.vue b/apps/showcase/pages/passthrough/index.vue
index c69c6ca2c..f855d0141 100644
--- a/apps/showcase/pages/passthrough/index.vue
+++ b/apps/showcase/pages/passthrough/index.vue
@@ -1,13 +1,13 @@
 <template>
     <Head>
         <Title>PrimeVue - Pass Through</Title>
-        <Meta name="description" content="The Pass Through props is an API to access the internal DOM Structure of the components." />
+        <Meta name="description" content="The Pass Through attributes is an API to access the internal DOM Structure of the components." />
     </Head>
     <div class="doc">
         <div class="doc-main">
             <div class="doc-intro">
                 <h1>Pass Through</h1>
-                <p>The Pass Through props is an API to access the internal DOM Structure of the components.</p>
+                <p>The Pass Through attributes is an API to access the internal DOM Structure of the components.</p>
             </div>
             <DocSections :docs="docs" />
         </div>
@@ -20,6 +20,7 @@ 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 IntroductionDoc from '@/doc/passthrough/IntroductionDoc.vue';
 import LifecycleDoc from '@/doc/passthrough/LifecycleDoc.vue';
 import PCPrefixDoc from '@/doc/passthrough/PCPrefixDoc.vue';
 import UsePassThroughDoc from '@/doc/passthrough/UsePassThroughDoc.vue';
@@ -28,6 +29,11 @@ export default {
     data() {
         return {
             docs: [
+                {
+                    id: 'introduction',
+                    label: 'Introduction',
+                    component: IntroductionDoc
+                },
                 {
                     id: 'basic',
                     label: 'Basic',