feat: add details

CyanSalt · Jun 28, 2023 · 67400ee · 67400ee
1 parent 853d3f0
commit 67400ee
Show file tree

Hide file tree

Showing 18 changed files with 448 additions and 94 deletions.
diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
@@ -26,6 +26,7 @@ export default defineConfig({
             text: 'Basic',
             items: [
               { text: 'Button', link: '/components/button' },
+              { text: 'Details', link: '/components/details' },
               { text: 'Grid Guide', link: '/components/grid-guide' },
               { text: 'Link', link: '/components/link' },
               { text: 'Space', link: '/components/space' },
@@ -51,10 +52,6 @@ export default defineConfig({
             text: 'Feedback',
             items: [],
           },
-          {
-            text: 'Configuration',
-            items: [],
-          },
         ],
       },
     ],

diff --git a/docs/components/button.md b/docs/components/button.md
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { RButton, RLink, RSpace, RTable } from 'roughness'
+import { RButton, RDetails, RSpace, RTable } from 'roughness'
 </script>
 
 # Button
@@ -10,6 +10,9 @@ Squares are buttons.
 
 ### Basic
 
+<RDetails>
+  <template #summary>Show Code</template>
+
 ```vue
 <script lang="ts" setup>
 import { RButton, RSpace } from 'roughness'
@@ -27,6 +30,8 @@ import { RButton, RSpace } from 'roughness'
 </template>
 ```
 
+</RDetails>
+
 <RSpace>
   <RButton>Normal</RButton>
   <RButton type="primary">Primary</RButton>
@@ -38,6 +43,9 @@ import { RButton, RSpace } from 'roughness'
 
 ### Filled
 
+<RDetails>
+  <template #summary>Show Code</template>
+
 ```vue
 <script lang="ts" setup>
 import { RButton, RSpace } from 'roughness'
@@ -55,6 +63,8 @@ import { RButton, RSpace } from 'roughness'
 </template>
 ```
 
+</RDetails>
+
 <RSpace>
   <RButton filled>Normal</RButton>
   <RButton type="primary" filled>Primary</RButton>
@@ -66,6 +76,9 @@ import { RButton, RSpace } from 'roughness'
 
 ### Rounded
 
+<RDetails>
+  <template #summary>Show Code</template>
+
 ```vue
 <script lang="ts" setup>
 import { RButton, RSpace } from 'roughness'
@@ -79,13 +92,18 @@ import { RButton, RSpace } from 'roughness'
 </template>
 ```
 
+</RDetails>
+
 <RSpace>
   <RButton rounded>Enter the Pipe</RButton>
   <RButton type="error" filled rounded>Eat the Mushroom</RButton>
 </RSpace>
 
 ### Disabled
 
+<RDetails>
+  <template #summary>Show Code</template>
+
 ```vue
 <script lang="ts" setup>
 import { RButton, RSpace } from 'roughness'
@@ -99,33 +117,43 @@ import { RButton, RSpace } from 'roughness'
 </template>
 ```
 
+</RDetails>
+
 <RSpace>
   <RButton disabled>Train AlphaGo</RButton>
   <RButton type="primary" filled disabled>Let there be light</RButton>
 </RSpace>
 
 ### Block
 
+<RDetails>
+  <template #summary>Show Code</template>
+
 ```vue
 <script lang="ts" setup>
 import { RButton, RSpace } from 'roughness'
 </script>
 
 <template>
-  <RSpace vertical align="stretch">
+  <RSpace vertical>
     <RButton block>Switch Account</RButton>
     <RButton type="error" block>Log out of Chaos</RButton>
   </RSpace>
 </template>
 ```
 
-<RSpace vertical align="stretch">
+</RDetails>
+
+<RSpace vertical>
   <RButton block>Switch Account</RButton>
   <RButton type="error" block>Log out of Chaos</RButton>
 </RSpace>
 
 ### Tag
 
+<RDetails>
+  <template #summary>Show Code</template>
+
 ```vue
 <script lang="ts" setup>
 import { RButton, RSpace } from 'roughness'
@@ -139,6 +167,8 @@ import { RButton, RSpace } from 'roughness'
 </template>
 ```
 
+</RDetails>
+
 <RSpace>
   <RButton tag="a" type="primary" filled>Remote Bomb</RButton>
   <RButton tag="a" type="error">Magnesis</RButton>
@@ -157,63 +187,81 @@ import { RButton, RSpace } from 'roughness'
   <template #body:*.name="{ row }">{{ row }}</template>
 
   <template #body:block.type>
-    <code>boolean</code>
+
+  `boolean`
+
   </template>
   <template #body:block.default>
-    <code>false</code>
+
+  `false`
+
   </template>
   <template #body:block.description>
     Whether the button is displayed as block.
   </template>
 
   <template #body:filled.type>
-    <code>boolean</code>
+
+  `boolean`
+
   </template>
   <template #body:filled.default>
-    <code>false</code>
+
+  `false`
+
   </template>
   <template #body:filled.description>
     Whether the button is filled with its color.
   </template>
 
   <template #body:html-type.type>
-    <RLink
-      href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLButtonElement#htmlbuttonelement.type"
-      target="_blank"
-      rel="noopener noreferrer"
-    >
-      <code>'submit' | 'reset' | 'button'</code>
-    </RLink>
+
+  [`'submit' | 'reset' | 'button'`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLButtonElement#htmlbuttonelement.type)
+
   </template>
   <template #body:html-type.description>
-    The <code>type</code> attribute of <code>HTMLButtonElement</code>.
+
+  The `type` attribute of `HTMLButtonElement`.
+
   </template>
 
   <template #body:rounded.type>
-    <code>boolean</code>
+
+  `boolean`
+
   </template>
   <template #body:rounded.default>
-    <code>false</code>
+
+  `false`
+
   </template>
   <template #body:rounded.description>
     Whether the button is round.
   </template>
 
   <template #body:tag.type>
-    <code>string</code>, but usually <code>'button' | 'a'</code>
+
+  `string`, but usually `'button' | 'a'`
+
   </template>
   <template #body:tag.default>
-    <code>'button'</code>
+
+  `'button'`
+
   </template>
   <template #body:tag.description>
     HTML tag for rendering the button.
   </template>
 
   <template #body:type.type>
-    <code>string</code>, but usually <code>'default' | 'primary' | 'info' | 'success' | 'warning' | 'error'</code>
+
+  `string`, but usually `'default' | 'primary' | 'info' | 'success' | 'warning' | 'error'`
+
   </template>
   <template #body:type.default>
-    <code>'default'</code>
+
+  `'default'`
+
   </template>
   <template #body:type.description>
     Button style type.

diff --git a/docs/components/details.md b/docs/components/details.md
@@ -0,0 +1,114 @@
+<script lang="ts" setup>
+import { RButton, RDetails, RSpace, RTable } from 'roughness'
+import { ref } from 'vue'
+
+let open = ref(true)
+
+function toggle() {
+  open.value = !open.value
+}
+</script>
+
+# Details
+
+The devil is in the details.
+
+## Example
+
+<RDetails>
+  <template #summary>Show Code</template>
+
+```vue
+<script lang="ts" setup>
+import { RDetails } from 'roughness'
+import { ref } from 'vue'
+
+let open = ref(true)
+
+function toggle() {
+  open.value = !open.value
+}
+</script>
+
+<template>
+  <RSpace vertical>
+    <RDetails v-model:open="open">
+      <template #summary>Hanger</template>
+      Clown suits
+    </RDetails>
+    <RButton :filled="!open" @click="toggle">Closet Door</RButton>
+  </RSpace>
+</template>
+```
+
+</RDetails>
+
+<RSpace vertical>
+  <RDetails v-model:open="open">
+    <template #summary>Hanger</template>
+    Clown suits
+  </RDetails>
+  <RButton :filled="!open" @click="toggle">Closet Door</RButton>
+</RSpace>
+
+## Usage
+
+### Props
+
+<RTable
+  :columns="['name', 'type', 'default', 'description']"
+  :rows="['open']"
+>
+  <template #head:*="{ column, helpers }">{{ helpers.startCase(column) }}</template>
+  <template #body:*.name="{ row }">{{ row }}</template>
+
+  <template #body:open.type>
+
+  `boolean`
+
+  </template>
+  <template #body:open.default>
+
+  `false`
+
+  </template>
+  <template #body:open.description>
+    Whether the details are currently visible.
+  </template>
+</RTable>
+
+### Events
+
+<RTable
+  :columns="['name', 'parameters', 'description']"
+  :rows="['update:open']"
+>
+  <template #head:*="{ column, helpers }">{{ helpers.startCase(column) }}</template>
+  <template #body:*.name="{ row }">{{ row }}</template>
+
+  <template #body:update:open.parameters>
+
+  `(open: boolean)`
+
+  </template>
+  <template #body:update:open.description>
+    Callback function triggered when visibility of the details are changed.
+  </template>
+</RTable>
+
+### Slots
+
+<RTable
+  :columns="['name', 'parameters', 'description']"
+  :rows="['summary', 'default']"
+>
+  <template #head:*="{ column, helpers }">{{ helpers.startCase(column) }}</template>
+  <template #body:*.name="{ row }">{{ row }}</template>
+
+  <template #body:summary.description>
+    The content of the summary.
+  </template>
+  <template #body:default.description>
+    The content of the details.
+  </template>
+</RTable>
diff --git a/docs/components/graphics.md b/docs/components/graphics.md