Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs(docgen): improve documentation code generation #1124

Merged
merged 15 commits into from
Nov 22, 2024
Merged

docs(docgen): improve documentation code generation #1124

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
8f040ba
add storybook helper
mlmoravek Nov 5, 2024
651987f
Merge remote-tracking branch 'origin/develop' into feat/1076/docgen
mlmoravek Nov 18, 2024
8e8acc9
Merge remote-tracking branch 'origin/develop' into feat/1076/docgen
mlmoravek Nov 19, 2024
61049b2
docs: update docgen
mlmoravek Nov 19, 2024
6262f33
docs: update docgen
mlmoravek Nov 20, 2024
5aafcfe
docs: update docgen
mlmoravek Nov 20, 2024
509abcb
docs: update docgen
mlmoravek Nov 20, 2024
2433e29
docs: update docgen
mlmoravek Nov 20, 2024
99fc39a
fix: build
mlmoravek Nov 20, 2024
dc4bace
docs: update docgen
mlmoravek Nov 21, 2024
ce30735
fix: build
mlmoravek Nov 21, 2024
8b3567a
fix: build
mlmoravek Nov 21, 2024
29608a6
fix: fix docs build
mlmoravek Nov 22, 2024
fa0be49
fix: fix docs build
mlmoravek Nov 22, 2024
ec1b63b
refactor: apply review fixes
mlmoravek Nov 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4,440 changes: 2,880 additions & 1,560 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 2 additions & 0 deletions packages/docs/.vitepress/config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -138,6 +138,8 @@ export default defineConfig({
"@": fileURLToPath(
new URL("./../../oruga/src", import.meta.url),
),
// add '@docs' alias to docs src folder
"@docs": fileURLToPath(new URL("./../src", import.meta.url)),
},
},
},
Expand Down
2 changes: 1 addition & 1 deletion packages/docs/.vitepress/theme/components/ThemeSelector.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<script setup lang="ts">
// Import theme definitions
import themes from "../../themes.json";
import themes from "@docs/themes.json";

const selectedTheme = defineModel<any>("theme");

Expand Down
2 changes: 1 addition & 1 deletion packages/docs/.vitepress/theme/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ hljs.registerLanguage("scss", scss);
hljs.registerLanguage("css", css);

// Import theme definitions
import themes from "../themes.json";
import themes from "@docs/themes.json";

// load last used theme or set a default one
function loadTheme() {
Expand Down
49 changes: 24 additions & 25 deletions packages/docs/components/Autocomplete.md
View file
Open in desktop

Large diffs are not rendered by default.

13 changes: 6 additions & 7 deletions packages/docs/components/Button.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,22 +7,20 @@
</div>

<div class="vp-example">

## Examples

<example-button />

</div>
<div class="vp-example">

<div class="vp-example">
## Class props

<inspector-button-viewer />

</div>

<div class="vp-doc">

## Button component

> The classic button, in different colors, sizes, and states
Expand All @@ -49,7 +47,7 @@
| rounded | Enable rounded style | boolean | - | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>button: {<br>&nbsp;&nbsp;rounded: false<br>}</code> |
| size | Size of the control | string | `small`, `medium`, `large` | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>button: {<br>&nbsp;&nbsp;size: undefined<br>}</code> |
| tag | Button tag name | DynamicComponent | `button`, `a`, `input`, `router-link`, `nuxt-link (or other nuxt alias)` | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>button: {<br>&nbsp;&nbsp;tag: "button"<br>}</code> |
| type | Button type, like native | "reset" \| "submit" \| "button" | `button`, `submit`, `reset` | <code style='white-space: nowrap; padding: 0;'>"button"</code> |
| type | Button type, like native | "button" \| "reset" \| "submit" | `button`, `submit`, `reset` | <code style='white-space: nowrap; padding: 0;'>"button"</code> |
| variant | Color variant of the control | string | `primary`, `info`, `success`, `warning`, `danger`, `and any other custom color` | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>button: {<br>&nbsp;&nbsp;variant: undefined<br>}</code> |

### Slots
Expand All @@ -61,7 +59,6 @@
</div>

<div class="vp-doc">

## Sass variables

<div class="theme-oruga">
Expand Down Expand Up @@ -89,7 +86,8 @@

See ➜ 📄 [Full scss file](https://github.com/oruga-ui/theme-oruga/tree/main/src/assets/scss/components/_button.scss)

</div><div class="theme-bulma">
</div>
<div class="theme-bulma">

> Current theme ➜ _[Bulma](https://github.com/oruga-ui/theme-bulma)_

Expand All @@ -99,7 +97,8 @@ See ➜ 📄 [Full scss file](https://github.com/oruga-ui/theme-oruga/tree/main/

See ➜ 📄 [Full scss file](https://github.com/oruga-ui/theme-bulma/tree/main/src/assets/scss/components/_button.scss)

</div><div class="theme-bootstrap">
</div>
<div class="theme-bootstrap">

> Current theme ➜ _[Bootstrap](https://github.com/oruga-ui/theme-bootstrap)_

Expand Down
29 changes: 12 additions & 17 deletions packages/docs/components/Carousel.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,22 +11,20 @@ sidebarDepth: 2
</div>

<div class="vp-example">

## Examples

<example-carousel />

</div>
<div class="vp-example">

<div class="vp-example">
## Class props

<inspector-carousel-viewer />

</div>

<div class="vp-doc">

## Carousel component

> A Slideshow for cycling images in confined spaces
Expand All @@ -42,14 +40,14 @@ sidebarDepth: 2
| arrows | Show next / prev arrows | boolean | - | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>carousel: {<br>&nbsp;&nbsp;arrows: true<br>}</code> |
| arrowsHover | Show next / prev arrows only on hover | boolean | - | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>carousel: {<br>&nbsp;&nbsp;arrowsHover: true<br>}</code> |
| autoplay | Move item automaticalls after `interval` | boolean | - | <code style='white-space: nowrap; padding: 0;'>false</code> |
| breakpoints | Define these props for different screen sizes | Record&lt;number, any&gt; | - | Default function (see source code) |
| breakpoints | Define these props for different screen sizes | Record&lt;number, any&gt; | - | <code style='white-space: nowrap; padding: 0;'>{}</code> |
| dragable | Enable drag mode | boolean | - | <code style='white-space: nowrap; padding: 0;'>true</code> |
| iconNext | Icon name for next icon | string | - | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>carousel: {<br>&nbsp;&nbsp;iconNext: "chevron-right"<br>}</code> |
| iconPack | Icon pack to use | string | `mdi`, `fa`, `fas and any other custom icon pack` | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>carousel: {<br>&nbsp;&nbsp;iconPack: undefined<br>}</code> |
| iconPrev | Icon name for previous icon | string | - | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>carousel: {<br>&nbsp;&nbsp;iconPrev: "chevron-left"<br>}</code> |
| iconSize | Icon size | string | `small`, `medium`, `large` | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>carousel: {<br>&nbsp;&nbsp;iconSize: undefined<br>}</code> |
| indicatorInside | Place indicators inside the carousel | boolean | - | <code style='white-space: nowrap; padding: 0;'>false</code> |
| indicatorMode | Indicator interaction mode | string | `click`, `hover` | <code style='white-space: nowrap; padding: 0;'>"click"</code> |
| indicatorMode | Indicator interaction mode | "click" \| "hover" | `click`, `hover` | <code style='white-space: nowrap; padding: 0;'>"click"</code> |
| indicatorPosition | Position of the indicator - depends on used theme | string | - | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>carousel: {<br>&nbsp;&nbsp;indicatorPosition: "bottom"<br>}</code> |
| indicatorStyle | Style of the indicator - depends on used theme | string | - | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>carousel: {<br>&nbsp;&nbsp;indicatorStyle: "dots"<br>}</code> |
| indicators | Enable indicators | boolean | - | <code style='white-space: nowrap; padding: 0;'>true</code> |
Expand All @@ -64,11 +62,11 @@ sidebarDepth: 2

### Events

| Event name | Properties | Description |
| ----------------- | -------------------------------------------- | ------------------------------- |
| update:modelValue | **value** `number` - updated modelValue prop | modelValue prop two-way binding |
| scroll | **value** `number` - scroll index | on carousel scroll event |
| click | **event** `event` - native event | on item click event |
| Event name | Properties | Description |
| ------------------ | -------------------------------------------- | ------------------------------- |
| update:model-value | **value** `number` - updated modelValue prop | modelValue prop two-way binding |
| scroll | **value** `number` - scroll index | on carousel scroll event |
| click | **event** `event` - native event | on item click event |

### Slots

Expand All @@ -83,7 +81,6 @@ sidebarDepth: 2
</div>

<div class="vp-doc">

## CarouselItem component

> A Slideshow item used by the carousel
Expand All @@ -109,10 +106,6 @@ sidebarDepth: 2
</div>

<div class="vp-doc">

</div>
<div class="vp-doc">

## Sass variables

<div class="theme-oruga">
Expand Down Expand Up @@ -149,7 +142,8 @@ sidebarDepth: 2

See ➜ 📄 [Full scss file](https://github.com/oruga-ui/theme-oruga/tree/main/src/assets/scss/components/_carousel.scss)

</div><div class="theme-bulma">
</div>
<div class="theme-bulma">

> Current theme ➜ _[Bulma](https://github.com/oruga-ui/theme-bulma)_

Expand All @@ -168,7 +162,8 @@ See ➜ 📄 [Full scss file](https://github.com/oruga-ui/theme-oruga/tree/main/

See ➜ 📄 [Full scss file](https://github.com/oruga-ui/theme-bulma/tree/main/src/assets/scss/components/_carousel.scss)

</div><div class="theme-bootstrap">
</div>
<div class="theme-bootstrap">

> Current theme ➜ _[Bootstrap](https://github.com/oruga-ui/theme-bootstrap)_

Expand Down
27 changes: 13 additions & 14 deletions packages/docs/components/Checkbox.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,22 +7,20 @@
</div>

<div class="vp-example">

## Examples

<example-checkbox />

</div>
<div class="vp-example">

<div class="vp-example">
## Class props

<inspector-checkbox-viewer />

</div>

<div class="vp-doc">

## Checkbox component

> Select a single or grouped options
Expand Down Expand Up @@ -54,14 +52,14 @@

### Events

| Event name | Properties | Description |
| -------------------- | ------------------------------------------------------------------------------------------------------------- | ---------------------------------- |
| update:modelValue | **value** `string \| number \| boolean \| object \| array` - updated modelValue prop | modelValue prop two-way binding |
| input | **value** `string \| number \| boolean \| object \| array` - input value<br/>**event** `Event` - native event | on input change event |
| update:indeterminate | **value** `boolean` - updated indeterminate prop | indeterminate prop two-way binding |
| focus | **event** `Event` - native event | on input focus event |
| blur | **event** `Event` - native event | on input blur event |
| invalid | **event** `Event` - native event | on input invalid event |
| Event name | Properties | Description |
| -------------------- | ----------------------------------------------------------------------- | ---------------------------------- |
| update:model-value | **value** `T \| T[]` - updated modelValue prop | modelValue prop two-way binding |
| input | **value** `T \| T[]` - input value<br/>**event** `Event` - native event | on input change event |
| update:indeterminate | **value** `boolean` - updated indeterminate prop | indeterminate prop two-way binding |
| focus | **event** `Event` - native event | on input focus event |
| blur | **event** `Event` - native event | on input blur event |
| invalid | **event** `Event` - native event | on input invalid event |

### Slots

Expand All @@ -72,7 +70,6 @@
</div>

<div class="vp-doc">

## Sass variables

<div class="theme-oruga">
Expand All @@ -99,7 +96,8 @@

See ➜ 📄 [Full scss file](https://github.com/oruga-ui/theme-oruga/tree/main/src/assets/scss/components/_checkbox.scss)

</div><div class="theme-bulma">
</div>
<div class="theme-bulma">

> Current theme ➜ _[Bulma](https://github.com/oruga-ui/theme-bulma)_

Expand All @@ -119,7 +117,8 @@ See ➜ 📄 [Full scss file](https://github.com/oruga-ui/theme-oruga/tree/main/

See ➜ 📄 [Full scss file](https://github.com/oruga-ui/theme-bulma/tree/main/src/assets/scss/components/_checkbox.scss)

</div><div class="theme-bootstrap">
</div>
<div class="theme-bootstrap">

> Current theme ➜ _[Bootstrap](https://github.com/oruga-ui/theme-bootstrap)_

Expand Down
15 changes: 7 additions & 8 deletions packages/docs/components/Collapse.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,22 +7,20 @@
</div>

<div class="vp-example">

## Examples

<example-collapse />

</div>
<div class="vp-example">

<div class="vp-example">
## Class props

<inspector-collapse-viewer />

</div>

<div class="vp-doc">

## Collapse component

> An easy way to toggle what you want
Expand All @@ -36,10 +34,10 @@
| Prop name | Description | Type | Values | Default |
| --------- | ---------------------------------------------------------------------------- | ----------------- | --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
| animation | Custom animation (transition name) | string | - | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>collapse: {<br>&nbsp;&nbsp;animation: "fade"<br>}</code> |
| contentId | Id property of the content container - default is an uuid | string | - | Default function (see source code) |
| contentId | Id property of the content container - default is an uuid | string | - | <code style='white-space: nowrap; padding: 0;'>useId()</code> |
| open | Whether collapse is open or not, use v-model:open to make it two-way binding | boolean | - | <code style='white-space: nowrap; padding: 0;'>true</code> |
| override | Override existing theme classes completely | boolean | - | |
| position | Trigger position | "top" \| "bottom" | `top`, `bottom` | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>collapse: {<br>&nbsp;&nbsp;position: "top"<br>}</code> |
| position | Trigger position | "bottom" \| "top" | `top`, `bottom` | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>collapse: {<br>&nbsp;&nbsp;position: "top"<br>}</code> |

### Events

Expand All @@ -59,7 +57,6 @@
</div>

<div class="vp-doc">

## Sass variables

<div class="theme-oruga">
Expand All @@ -71,12 +68,14 @@

See ➜ 📄 [Full scss file](https://github.com/oruga-ui/theme-oruga/tree/main/src/assets/scss/components/_collapse.scss)

</div><div class="theme-bulma">
</div>
<div class="theme-bulma">

> Current theme ➜ _[Bulma](https://github.com/oruga-ui/theme-bulma)_

<p>The theme does not have any custom variables for this component.</p>
</div><div class="theme-bootstrap">
</div>
<div class="theme-bootstrap">

> Current theme ➜ _[Bootstrap](https://github.com/oruga-ui/theme-bootstrap)_

Expand Down
Loading
Loading