fix: overlay z-index and doc tables

CyanSalt · Apr 1, 2024 · 365f30f · 365f30f
1 parent 692c45c
commit 365f30f
Show file tree

Hide file tree

Showing 42 changed files with 2,466 additions and 2,136 deletions.
diff --git a/docs/.vitepress/components/REventsTable.vue b/docs/.vitepress/components/REventsTable.vue
@@ -9,6 +9,8 @@ defineOptions({
 
 defineSlots<{
   name?: (props: {}) => any,
+  parameters?: (props: {}) => any,
+  description?: (props: {}) => any,
   default?: (props: {}) => any,
 }>()
 
@@ -29,12 +31,14 @@ const events = useList(eventsInjection)
         :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>

diff --git a/docs/.vitepress/components/RPropsTable.vue b/docs/.vitepress/components/RPropsTable.vue
@@ -9,6 +9,9 @@ defineOptions({
 
 defineSlots<{
   name?: (props: {}) => any,
+  type?: (props: {}) => any,
+  'default-value'?: (props: {}) => any,
+  description?: (props: {}) => any,
   default?: (props: {}) => any,
 }>()
 
@@ -29,18 +32,21 @@ const props = useList(propsInjection)
         :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>

diff --git a/docs/.vitepress/components/RSlotsTable.vue b/docs/.vitepress/components/RSlotsTable.vue
@@ -9,6 +9,8 @@ defineOptions({
 
 defineSlots<{
   name?: (props: {}) => any,
+  parameters?: (props: {}) => any,
+  description?: (props: {}) => any,
   default?: (props: {}) => any,
 }>()
 
@@ -29,12 +31,14 @@ const slots = useList(slotsInjection)
         :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>

diff --git a/docs/.vitepress/components/RStylesTable.vue b/docs/.vitepress/components/RStylesTable.vue
@@ -9,6 +9,9 @@ defineOptions({
 
 defineSlots<{
   name?: (props: {}) => any,
+  values?: (props: {}) => any,
+  'default-value'?: (props: {}) => any,
+  description?: (props: {}) => any,
   default?: (props: {}) => any,
 }>()
 
@@ -29,18 +32,21 @@ const styles = useList(stylesInjection)
         :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>

diff --git a/docs/.vitepress/theme/style.scss b/docs/.vitepress/theme/style.scss
@@ -44,7 +44,7 @@
     background: revert;
   }
 }
-.vp-doc .r-card:not(.r-dialog__card) {
+.vp-doc .r-card:not(.r-dialog__card, .r-popover__content) {
   margin: 16px 0;
   p {
     margin: 0;

diff --git a/docs/components/badge.md b/docs/components/badge.md
@@ -45,113 +45,116 @@ import { RBadge, RButton } from 'roughness'
 
 ### Props
 
-<RSpace>
-<RTable
-  :columns="['name', 'type', 'default', 'description']"
-  :rows="['graphics-options', 'reactions']"
->
-  <template #body:*:name="{ row }">{{ row }}</template>
+<RPropsTable>
+
+  <RProp name="graphics-options">
 
-  <template #body:graphics-options:type>
+  <template #type>
 
   `import('roughjs/bin/core').Options`
 
   </template>
-  <template #body:graphics-options:description>
 
   [Options for Rough.js](https://github.com/rough-stuff/rough/wiki#options).
 
   See [Graphics Configuration](/components/graphics#component-prop).
 
-  </template>
+  </RProp>
 
-  <template #body:reactions:type>
+  <RProp name="reactions">
+
+  <template #type>
 
   `string[]`
 
   </template>
-  <template #body:reactions:default>
+
+  <template #default-value>
 
   `[]`
 
   </template>
-  <template #body:reactions:description>
 
   States that trigger graphics redrawing.
 
   See [Reactions](/guide/theme#reactions).
 
-  </template>
-</RTable>
-</RSpace>
+  </RProp>
+
+</RPropsTable>
 
 ### Slots
 
-<RSpace>
-<RTable
-  :columns="['name', 'parameters', 'description']"
-  :rows="['marker', 'default']"
->
-  <template #body:*:name="{ row }">{{ row }}</template>
+<RSlotsTable>
 
-  <template #body:marker:description>
+  <RSlot name="marker">
     Content of the badge marker.
-  </template>
-  <template #body:default:description>
+  </RSlot>
+
+  <RSlot name="default">
     Decorated content of the badge.
-  </template>
-</RTable>
-</RSpace>
+  </RSlot>
+
+</RSlotsTable>
 
 ### Styles
 
-<RSpace>
-<RTable
-  :columns="['name', 'values', 'default', 'description']"
-  :rows="['color', 'padding-block', 'padding-inline']"
->
-  <template #body:*:name="{ row }">--r-badge-{{ row }}</template>
+<RStylesTable>
+
+  <template #name="{ value }">--r-badge-{{ value }}</template>
+
+  <RStyle name="color">
 
-  <template #body:color:values>
+  <template #values>
 
   `<color>`
 
   </template>
-  <template #body:color:default>
+
+  <template #default-value>
 
   `var(--r-common-error-color)`
 
   </template>
-  <template #body:color:description>
-    Color of the badge marker.
-  </template>
 
-  <template #body:padding-block:values>
+  Color of the badge marker.
+
+  </RStyle>
+
+  <RStyle name="padding-block">
+
+  <template #values>
 
   1-2 `<length>` or `<percentage>`
 
   </template>
-  <template #body:padding-block:default>
+
+  <template #default-value>
 
   `calc(0.5em - 4px)`
 
   </template>
-  <template #body:padding-block:description>
-    Vertical padding of the badge marker.
-  </template>
 
-  <template #body:padding-inline:values>
+  Vertical padding of the badge marker.
+
+  </RStyle>
+
+  <RStyle name="padding-inline">
+
+  <template #values>
 
   1-2 `<length>` or `<percentage>`
 
   </template>
-  <template #body:padding-inline:default>
+
+  <template #default-value>
 
   `calc(1em - 4px)`
 
   </template>
-  <template #body:padding-inline:description>
-    Horizontal padding of the badge marker.
-  </template>
-</RTable>
-</RSpace>
+
+  Horizontal padding of the badge marker.
+
+  </RStyle>
+
+</RStylesTable>