Pass Through options added to documentation

assets/styles/layout/_doc.scss

@@ -275,6 +275,14 @@
                         text-decoration: underline;
                     }
                 }
+
+                .doc-option-type-options-container {
+                    display: flex;
+                    align-items: center;
+                }
+                span.doc-option-type-options {
+                    color: var(--primary-700);
+                }
             }
 
             &.doc-option-default {
@@ -289,7 +297,7 @@
             }
 
             .doc-option-name,
-            > i {
+            > i:not(.pi) {
                 font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, Liberation Mono, monospace;
                 position: relative;
                 scroll-margin-top: 6.5rem;

components/doc/DocApiTable.vue

@@ -19,7 +19,7 @@
             </thead>
             <tbody>
                 <tr v-for="prop in data" :key="prop">
-                    <td v-for="[k, v] in Object.entries(prop)" :key="k" :class="{ 'doc-option-type': k === 'type', 'doc-option-default': k === 'defaultValue' }">
+                    <td v-for="[k, v] in Object.entries(prop)" :key="k" :class="{ 'doc-option-type': k === 'type' || k === 'options', 'doc-option-default': k === 'defaultValue' }">
                         <template v-if="k !== 'readonly' && k !== 'optional' && k !== 'deprecated'">
                             <span v-if="k === 'name'" :id="id + '.' + v" class="doc-option-name" :class="{ 'line-through cursor-pointer': !!prop.deprecated }" :title="prop.deprecated">
                                 {{ v
@@ -34,6 +34,14 @@
                                 </template>
                             </template>
 
+                            <template v-else-if="k === 'options'">
+                                <template v-for="val in v" :key="val.name">
+                                    <div class="doc-option-type-options-container">
+                                        {{ val.name }}: <span class="doc-option-type-options">{{ val.type }}</span>
+                                    </div>
+                                </template>
+                            </template>
+
                             <template v-else-if="k === 'parameters'">
                                 <span v-if="v.name" :class="{ 'parameter-bold': label === 'Slots' }"> {{ v.name }} : </span>
                                 <template v-for="(value, i) in getType(v.type)" :key="value">

components/doc/helpers/PTHelper.js

@@ -2,14 +2,24 @@ import APIDocs from '@/doc/common/apidoc/index.json';
 
 export const getPTOption = (name) => {
     const { props } = APIDocs[name.toLowerCase()].interfaces.values[`${name}PassThroughOptions`] || APIDocs[name.toLowerCase()].interfaces.values[`${name}DirectivePassThroughOptions`];
+    const options = APIDocs[name.toLowerCase()].interfaces.values[`${name}PassThroughMethodOptions`];
     let data = [];
 
     for (const [i, prop] of props.entries()) {
-        data.push({
-            value: i + 1,
-            label: prop.name,
-            description: prop.description
-        });
+        if (options) {
+            data.push({
+                value: i + 1,
+                label: prop.name,
+                options: options?.props,
+                description: prop.description
+            });
+        } else {
+            data.push({
+                value: i + 1,
+                label: prop.name,
+                description: prop.description
+            });
+        }
     }
 
     return data;