From 2895db6aa2f83f1a6c72ae3e896881491719701d Mon Sep 17 00:00:00 2001
From: CyanSalt <c.salt@hotmail.com>
Date: Mon, 1 Apr 2024 10:11:15 +0800
Subject: [PATCH] docs: table style

---
 docs/.vitepress/components/REventsTable.vue | 59 ++++++++++-------
 docs/.vitepress/components/RPropsTable.vue  | 73 ++++++++++++---------
 docs/.vitepress/components/RSlotsTable.vue  | 59 ++++++++++-------
 docs/.vitepress/components/RStylesTable.vue | 73 ++++++++++++---------
 docs/.vitepress/theme/style.scss            |  4 +-
 docs/components/graphics.md                 |  2 +-
 docs/components/table.md                    |  5 +-
 7 files changed, 158 insertions(+), 117 deletions(-)

diff --git a/docs/.vitepress/components/REventsTable.vue b/docs/.vitepress/components/REventsTable.vue
index 0a5680d..0483038 100644
--- a/docs/.vitepress/components/REventsTable.vue
+++ b/docs/.vitepress/components/REventsTable.vue
@@ -18,28 +18,39 @@ const events = useList(eventsInjection)
 </script>
 
 <template>
-  <RTable :rows="events" class="events-table">
-    <RTableColumn v-slot="{ row }" name="name">
-      <component
-        :is="(row as EventData).slots.name"
-        v-if="(row as EventData).slots.name"
-      ></component>
-      <slot v-else name="name" :value="(row as EventData).name">{{ (row as EventData).name }}</slot>
-    </RTableColumn>
-    <RTableColumn v-slot="{ row }" name="parameters">
-      <component
-        :is="(row as EventData).slots.parameters"
-        v-if="(row as EventData).slots.parameters"
-      ></component>
-      <slot v-else name="parameters"></slot>
-    </RTableColumn>
-    <RTableColumn v-slot="{ row }" name="description">
-      <component
-        :is="(row as EventData).slots.default"
-        v-if="(row as EventData).slots.default"
-      ></component>
-      <slot v-else name="description"></slot>
-    </RTableColumn>
-    <slot></slot>
-  </RTable>
+  <div class="r-events-table">
+    <RTable :rows="events">
+      <RTableColumn v-slot="{ row }" name="name">
+        <component
+          :is="(row as EventData).slots.name"
+          v-if="(row as EventData).slots.name"
+        ></component>
+        <slot v-else name="name" :value="(row as EventData).name">{{ (row as EventData).name }}</slot>
+      </RTableColumn>
+      <RTableColumn v-slot="{ row }" name="parameters">
+        <component
+          :is="(row as EventData).slots.parameters"
+          v-if="(row as EventData).slots.parameters"
+        ></component>
+        <slot v-else name="parameters"></slot>
+      </RTableColumn>
+      <RTableColumn v-slot="{ row }" name="description">
+        <component
+          :is="(row as EventData).slots.default"
+          v-if="(row as EventData).slots.default"
+        ></component>
+        <slot v-else name="description"></slot>
+      </RTableColumn>
+      <slot></slot>
+    </RTable>
+  </div>
 </template>
+
+<style lang="scss">
+.r-events-table {
+  overflow: auto;
+  .r-table {
+    min-width: 100%;
+  }
+}
+</style>
diff --git a/docs/.vitepress/components/RPropsTable.vue b/docs/.vitepress/components/RPropsTable.vue
index 40ae92f..b503dfa 100644
--- a/docs/.vitepress/components/RPropsTable.vue
+++ b/docs/.vitepress/components/RPropsTable.vue
@@ -19,35 +19,46 @@ const props = useList(propsInjection)
 </script>
 
 <template>
-  <RTable :rows="props" class="props-table">
-    <RTableColumn v-slot="{ row }" name="name">
-      <component
-        :is="(row as PropData).slots.name"
-        v-if="(row as PropData).slots.name"
-      ></component>
-      <slot v-else name="name" :value="(row as PropData).name">{{ (row as PropData).name }}</slot>
-    </RTableColumn>
-    <RTableColumn v-slot="{ row }" name="type">
-      <component
-        :is="(row as PropData).slots.type"
-        v-if="(row as PropData).slots.type"
-      ></component>
-      <slot v-else name="type"></slot>
-    </RTableColumn>
-    <RTableColumn v-slot="{ row }" name="default-value">
-      <component
-        :is="(row as PropData).slots['default-value']"
-        v-if="(row as PropData).slots['default-value']"
-      ></component>
-      <slot v-else name="default-value"></slot>
-    </RTableColumn>
-    <RTableColumn v-slot="{ row }" name="description">
-      <component
-        :is="(row as PropData).slots.default"
-        v-if="(row as PropData).slots.default"
-      ></component>
-      <slot v-else name="description"></slot>
-    </RTableColumn>
-    <slot></slot>
-  </RTable>
+  <div class="r-props-table">
+    <RTable :rows="props">
+      <RTableColumn v-slot="{ row }" name="name">
+        <component
+          :is="(row as PropData).slots.name"
+          v-if="(row as PropData).slots.name"
+        ></component>
+        <slot v-else name="name" :value="(row as PropData).name">{{ (row as PropData).name }}</slot>
+      </RTableColumn>
+      <RTableColumn v-slot="{ row }" name="type">
+        <component
+          :is="(row as PropData).slots.type"
+          v-if="(row as PropData).slots.type"
+        ></component>
+        <slot v-else name="type"></slot>
+      </RTableColumn>
+      <RTableColumn v-slot="{ row }" name="default-value">
+        <component
+          :is="(row as PropData).slots['default-value']"
+          v-if="(row as PropData).slots['default-value']"
+        ></component>
+        <slot v-else name="default-value"></slot>
+      </RTableColumn>
+      <RTableColumn v-slot="{ row }" name="description">
+        <component
+          :is="(row as PropData).slots.default"
+          v-if="(row as PropData).slots.default"
+        ></component>
+        <slot v-else name="description"></slot>
+      </RTableColumn>
+      <slot></slot>
+    </RTable>
+  </div>
 </template>
+
+<style lang="scss">
+.r-props-table {
+  overflow: auto;
+  .r-table {
+    min-width: 100%;
+  }
+}
+</style>
diff --git a/docs/.vitepress/components/RSlotsTable.vue b/docs/.vitepress/components/RSlotsTable.vue
index 2b16113..d18795a 100644
--- a/docs/.vitepress/components/RSlotsTable.vue
+++ b/docs/.vitepress/components/RSlotsTable.vue
@@ -18,28 +18,39 @@ const slots = useList(slotsInjection)
 </script>
 
 <template>
-  <RTable :rows="slots" class="slots-table">
-    <RTableColumn v-slot="{ row }" name="name">
-      <component
-        :is="(row as SlotData).slots.name"
-        v-if="(row as SlotData).slots.name"
-      ></component>
-      <slot v-else name="name" :value="(row as SlotData).name">{{ (row as SlotData).name }}</slot>
-    </RTableColumn>
-    <RTableColumn v-slot="{ row }" name="parameters">
-      <component
-        :is="(row as SlotData).slots.parameters"
-        v-if="(row as SlotData).slots.parameters"
-      ></component>
-      <slot v-else name="parameters"></slot>
-    </RTableColumn>
-    <RTableColumn v-slot="{ row }" name="description">
-      <component
-        :is="(row as SlotData).slots.default"
-        v-if="(row as SlotData).slots.default"
-      ></component>
-      <slot v-else name="description"></slot>
-    </RTableColumn>
-    <slot></slot>
-  </RTable>
+  <div class="r-slots-table">
+    <RTable :rows="slots">
+      <RTableColumn v-slot="{ row }" name="name">
+        <component
+          :is="(row as SlotData).slots.name"
+          v-if="(row as SlotData).slots.name"
+        ></component>
+        <slot v-else name="name" :value="(row as SlotData).name">{{ (row as SlotData).name }}</slot>
+      </RTableColumn>
+      <RTableColumn v-slot="{ row }" name="parameters">
+        <component
+          :is="(row as SlotData).slots.parameters"
+          v-if="(row as SlotData).slots.parameters"
+        ></component>
+        <slot v-else name="parameters"></slot>
+      </RTableColumn>
+      <RTableColumn v-slot="{ row }" name="description">
+        <component
+          :is="(row as SlotData).slots.default"
+          v-if="(row as SlotData).slots.default"
+        ></component>
+        <slot v-else name="description"></slot>
+      </RTableColumn>
+      <slot></slot>
+    </RTable>
+  </div>
 </template>
+
+<style lang="scss">
+.r-slots-table {
+  overflow: auto;
+  .r-table {
+    min-width: 100%;
+  }
+}
+</style>
diff --git a/docs/.vitepress/components/RStylesTable.vue b/docs/.vitepress/components/RStylesTable.vue
index bc7fc35..a2b71ed 100644
--- a/docs/.vitepress/components/RStylesTable.vue
+++ b/docs/.vitepress/components/RStylesTable.vue
@@ -19,35 +19,46 @@ const styles = useList(stylesInjection)
 </script>
 
 <template>
-  <RTable :rows="styles" class="styles-table">
-    <RTableColumn v-slot="{ row }" name="name">
-      <component
-        :is="(row as StyleData).slots.name"
-        v-if="(row as StyleData).slots.name"
-      ></component>
-      <slot v-else name="name" :value="(row as StyleData).name">{{ (row as StyleData).name }}</slot>
-    </RTableColumn>
-    <RTableColumn v-slot="{ row }" name="values">
-      <component
-        :is="(row as StyleData).slots.values"
-        v-if="(row as StyleData).slots.values"
-      ></component>
-      <slot v-else name="values"></slot>
-    </RTableColumn>
-    <RTableColumn v-slot="{ row }" name="default-value">
-      <component
-        :is="(row as StyleData).slots['default-value']"
-        v-if="(row as StyleData).slots['default-value']"
-      ></component>
-      <slot v-else name="default-value"></slot>
-    </RTableColumn>
-    <RTableColumn v-slot="{ row }" name="description">
-      <component
-        :is="(row as StyleData).slots.default"
-        v-if="(row as StyleData).slots.default"
-      ></component>
-      <slot v-else name="description"></slot>
-    </RTableColumn>
-    <slot></slot>
-  </RTable>
+  <div class="r-styles-table">
+    <RTable :rows="styles">
+      <RTableColumn v-slot="{ row }" name="name">
+        <component
+          :is="(row as StyleData).slots.name"
+          v-if="(row as StyleData).slots.name"
+        ></component>
+        <slot v-else name="name" :value="(row as StyleData).name">{{ (row as StyleData).name }}</slot>
+      </RTableColumn>
+      <RTableColumn v-slot="{ row }" name="values">
+        <component
+          :is="(row as StyleData).slots.values"
+          v-if="(row as StyleData).slots.values"
+        ></component>
+        <slot v-else name="values"></slot>
+      </RTableColumn>
+      <RTableColumn v-slot="{ row }" name="default-value">
+        <component
+          :is="(row as StyleData).slots['default-value']"
+          v-if="(row as StyleData).slots['default-value']"
+        ></component>
+        <slot v-else name="default-value"></slot>
+      </RTableColumn>
+      <RTableColumn v-slot="{ row }" name="description">
+        <component
+          :is="(row as StyleData).slots.default"
+          v-if="(row as StyleData).slots.default"
+        ></component>
+        <slot v-else name="description"></slot>
+      </RTableColumn>
+      <slot></slot>
+    </RTable>
+  </div>
 </template>
+
+<style lang="scss">
+.r-styles-table {
+  overflow: auto;
+  .r-table {
+    min-width: 100%;
+  }
+}
+</style>
diff --git a/docs/.vitepress/theme/style.scss b/docs/.vitepress/theme/style.scss
index 353c049..3718d1b 100644
--- a/docs/.vitepress/theme/style.scss
+++ b/docs/.vitepress/theme/style.scss
@@ -22,9 +22,7 @@
 }
 
 .vp-doc .r-table {
-  &[data-example] {
-    display: revert;
-  }
+  display: revert;
   tr {
     border-top: revert;
     background-color: transparent;
diff --git a/docs/components/graphics.md b/docs/components/graphics.md
index e2bf79c..f7fbe48 100644
--- a/docs/components/graphics.md
+++ b/docs/components/graphics.md
@@ -164,7 +164,7 @@ function draw(rc: RoughSVG, svg: SVGSVGElement) {
 
 </RDetails>
 
-<RTable :rows="['color']" data-example>
+<RTable :rows="['color']">
   <RTableColumn v-slot="{ row }" name="continent">
     <template v-if="row === 'color'">
       New Zealand
diff --git a/docs/components/table.md b/docs/components/table.md
index cedcde6..ce75a68 100644
--- a/docs/components/table.md
+++ b/docs/components/table.md
@@ -40,7 +40,7 @@ import { RTable, RTableColumn, RText } from 'roughness'
 
 </RDetails>
 
-<RTable :rows="['html', 'js', 'css']" data-example>
+<RTable :rows="['html', 'js', 'css']">
   <RTableColumn v-slot="{ row }" name="name">{{ row.toUpperCase() }}</RTableColumn>
   <RTableColumn v-slot="{ row }" name="age">
     <template v-if="row === 'html'">
@@ -92,7 +92,6 @@ import { RTable, RTableColumn } from 'roughness'
   :rows="['unified', 'western', 'eastern']"
   :header="false"
   footer
-  data-example
 >
   <RTableColumn name="name">
     <template #default="{ row }">
@@ -146,7 +145,7 @@ const data = [
 
 </RDetails>
 
-<RTable :rows="data" data-example>
+<RTable :rows="data">
   <RTableColumn name="z" />
   <RTableColumn v-slot="{ row }" name="element">
     <template v-if="row[RKey] === 1">