feat(desc): add multi paragraph support for <SDescText>

globalbrain · Aug 8, 2023 · c8264cc · c8264cc
1 parent 823772e
commit c8264cc
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 0 deletions.
diff --git a/docs/components/desc.md b/docs/components/desc.md
@@ -154,6 +154,20 @@ The `<SDescText>` has builtin styling support for links. You may make part of th
 </SDesc>
 ```
 
+You may also pass in multiple paragraphs as a content. This is useful when you want to display markdown content as a value.
+
+```vue-html
+<SDesc cols="2" gap="24">
+  <SDescItem span="1">
+    <SDescLabel>About</SDescLabel>
+    <SDescText>
+      <p>Line one...</p>
+      <p>Line two...</p>
+    </SDescText>
+  </SDescItem>
+</SDesc>
+```
+
 When displaying long text, there might be a case where you want to trim the texts into certain length. You can do so by defining `:line-clamp`. The value is the number of lines you want to display.
 
 ```vue-html

diff --git a/lib/components/SDescText.vue b/lib/components/SDescText.vue
@@ -53,6 +53,10 @@ const lineClamp = computed(() => props.lineClamp ?? 'none')
   }
 }
 
+.value :deep(p + p) {
+  margin-top: 12px;
+}
+
 .value :deep(a) {
   color: var(--c-info-text);
   transition: color 0.25s;