feat(content): support simple tables in SContent

globalbrain · Nov 18, 2024 · 3d96a33 · 3d96a33
1 parent 9ddf973
commit 3d96a33
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 0 deletions.
diff --git a/lib/components/SContent.vue b/lib/components/SContent.vue
@@ -110,4 +110,38 @@
   font-feature-settings: "tnum";
   content: counter(s-medium-counter)". ";
 }
+
+.SContent :deep(table) {
+  box-shadow: 0 0 0 1px var(--c-divider);
+  table-layout: fixed;
+  overflow: clip;
+  width: 100%;
+  margin: 4px 0;
+  border-style: hidden;
+  border-radius: 6px;
+  font-size: 14px;
+  color: var(--c-text-1);
+  text-align: left;
+}
+
+.SContent :deep(table th),
+.SContent :deep(table td) {
+  overflow-wrap: break-word;
+  height: 40px;
+  padding: 8px 16px;
+  background-color: var(--c-bg-elv-3);
+  border: 1px solid var(--c-gutter);
+  text-wrap: pretty;
+}
+
+.SContent :deep(table th) {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--c-text-2);
+  text-wrap: balance;
+}
+
+.SContent :deep(table tr:hover td) {
+  background-color: var(--c-bg-elv-4);
+}
 </style>
diff --git a/stories/components/SContent.01_Playground.story.vue b/stories/components/SContent.01_Playground.story.vue
@@ -41,6 +41,33 @@ const docs = '/components/content'
             <li>Sed ut perspiciatis unde omnis iste natus error.</li>
             <li>Lorem ipsum dolor sit amet.</li>
           </ol>
+
+          <table>
+            <thead>
+              <tr>
+                <th>Header 1</th>
+                <th>Header 2</th>
+                <th>Header 3</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
+                <td>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
+                <td>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</td>
+              </tr>
+              <tr>
+                <td>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</td>
+                <td>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui.</td>
+                <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
+              </tr>
+              <tr>
+                <td>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
+                <td>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</td>
+                <td>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</td>
+              </tr>
+            </tbody>
+          </table>
         </SContent>
       </div>
     </Board>