From bf9e06e67d6012ddcb68f87acd5095173d631052 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Tue, 5 Oct 2021 10:41:52 -0400
Subject: [PATCH] remove attr column

---
 docs/assets/plugins/metadata/metadata.js | 29 ++++++++++++++++++++----
 1 file changed, 24 insertions(+), 5 deletions(-)

diff --git a/docs/assets/plugins/metadata/metadata.js b/docs/assets/plugins/metadata/metadata.js
index 55de06b3..c693281c 100644
--- a/docs/assets/plugins/metadata/metadata.js
+++ b/docs/assets/plugins/metadata/metadata.js
@@ -11,7 +11,6 @@
       <thead>
         <tr>
           <th>Name</th>
-          <th>Attribute</th>
           <th>Description</th>
           <th>Reflects</th>
           <th>Type</th>
@@ -21,13 +20,33 @@
       <tbody>
         ${props
           .map(prop => {
+            const hasAttribute = !!prop.attribute;
+            const isAttributeDifferent = prop.attribute !== prop.name;
+            let attributeInfo = '';
+
+            if (!hasAttribute) {
+              attributeInfo = `<br><small>(property only)</small>`;
+            } else if (isAttributeDifferent) {
+              attributeInfo = `
+                <br>
+                <sl-tooltip content="This attribute is different than the property">
+                  <small>
+                    <code class="nowrap">
+                      ${escapeHtml(prop.attribute)}
+                    </code>
+                  </small>
+                </sl-tooltip>`;
+            }
+
             return `
               <tr>
-                <td class="nowrap">
-                  <code>${escapeHtml(prop.name)}</code>
+                <td>
+                  <code class="nowrap">${escapeHtml(prop.name)}</code>
+                  ${attributeInfo}
+                </td>
+                <td>
+                  ${escapeHtml(prop.description)}
                 </td>
-                <td class="nowrap">${prop.attribute ? `<code>${escapeHtml(prop.attribute)}</code>` : '-'}</td>
-                <td>${escapeHtml(prop.description)}</td>
                 <td style="text-align: center;">${
                   prop.reflects ? '<sl-icon label="yes" name="check"></sl-icon>' : ''
                 }</td>