Skip to content

Commit

Permalink
fix(vue): .vue files can be placed in subfolders
Browse files Browse the repository at this point in the history
  • Loading branch information
@rck-dev-bot @ph1p
rck-dev-bot authored and ph1p committed Feb 18, 2021
1 parent 30b0d8f commit bbd40d3
Show file tree
Hide file tree
Showing 10 changed files with 685 additions and 4 deletions.
7 changes: 4 additions & 3 deletions cmds/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -138,9 +138,10 @@ async function generate(argv) {

if (/\.vue$/.test(file)) {
const nodeModulesPath = path.join(path.dirname(fs.realpathSync(__filename)), '../node_modules');
process.chdir(folder);
child_process.execSync(`${nodeModulesPath}/.bin/vue-docgen ${file} ${path.join('../', folderPath)}`);
process.chdir('../');
const rootProjectFolder = process.cwd()
process.chdir(folder); // Change current working directory to the folder of the current source file
child_process.execSync(`${nodeModulesPath}/.bin/vue-docgen ${file} ${path.join(rootProjectFolder, folderPath)}`);
process.chdir(rootProjectFolder); // Reset current working directory to root project folder

mdFileData = fs.readFileSync(`${folderPath}/${fileName}.md`, 'utf-8');
} else if (/\.(js|ts|jsx|tsx)$/.test(file) && fileData) {
Expand Down
56 changes: 56 additions & 0 deletions example/documentation/code/components/sub/sub-test.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
---
title: sub-test
---
# grid

> This is an example of creating a reusable grid component and using it with external data.
Author: [Rafael](https://github.com/rafaesc92)

Since: Version 1.0.1

Version: 1.0.5

## Props

| Prop name | Description | Type | Values | Default |
| --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- | ------ | --------------------- |
| msg | object/array defaults should be returned from a factory function<br/>`@version` 1.0.5<br/>`@since` Version 1.0.1<br/>`@see` See [Wikipedia](https://en.wikipedia.org/wiki/Web_colors#HTML_color_names) for a list of color names<br/>`@link` See [Wikipedia](https://en.wikipedia.org/wiki/Web_colors#HTML_color_names) for a list of color names | string\|number | - | text |
| myF | Function | func | - | (param, param2) => {} |
| v-model | Model example<br/>`@model` true | string | - | |
| data | describe data<br/>`@version` 1.0.5 | array | - | |
| columns | get columns list | array | - | |
| filterKey | filter key<br/>`@ignore` true | string | - | 'example' |

## Methods

### sortBy

> Sets the order
#### Params

| Param name | Type | Description |
| ---------- | ------ | ------------ |
| key | string | Key to order |

#### Return

| Type | Description |
| ------ | ----------- |
| string | Test |

## Events

| Event name | Properties | Description |
| ---------- | ----------------------------------------------------------------------------------------------------------------------------------- | -------------- |
| success | **example** `object` - the demo example<br>**exampleStr** `string` - the demo example<br>**exampleNum** `number` - the demo example | Success event. |

## Slots

| Name | Description | Bindings |
| ------ | -------------------- | -------- |
| header | Use this slot header | |
| footer | Use this slot footer | |

---
40 changes: 40 additions & 0 deletions example/documentation/code/components/sub/sub-vue-md.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
---
title: sub-vue-md
---
# Button

> The only true button.
## Props

| Prop name | Description | Type | Values | Default |
| --------- | ----------------------------------------------------------------- | ------ | -------------------------- | ---------------------------------------------------------------------- |
| color | The color for the button. | string | - | '#333' |
| size | The size of the button | string | `small`, `normal`, `large` | 'normal' |
| onClick | Gets called when the user clicks on the button<br/>`@ignore` true | func | - | event => {<br> console.log('You have clicked me!', event.target);<br>} |

## Slots

| Name | Description | Bindings |
| ------- | ----------------- | -------- |
| default | Content of button | |

---

Use vue live right here too

````markdown
```jsx live
<Button>I’m transparent!</Button>
```
````

```jsx live
<Button>I’m transparent!</Button>
```

To render an example as highlighted source code remove the live modifier

```html
<button>I’m transparent!</button>
```
56 changes: 56 additions & 0 deletions example/documentation/code/components/test.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
---
title: test
---
# grid

> This is an example of creating a reusable grid component and using it with external data.
Author: [Rafael](https://github.com/rafaesc92)

Since: Version 1.0.1

Version: 1.0.5

## Props

| Prop name | Description | Type | Values | Default |
| --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- | ------ | --------------------- |
| msg | object/array defaults should be returned from a factory function<br/>`@version` 1.0.5<br/>`@since` Version 1.0.1<br/>`@see` See [Wikipedia](https://en.wikipedia.org/wiki/Web_colors#HTML_color_names) for a list of color names<br/>`@link` See [Wikipedia](https://en.wikipedia.org/wiki/Web_colors#HTML_color_names) for a list of color names | string\|number | - | text |
| myF | Function | func | - | (param, param2) => {} |
| v-model | Model example<br/>`@model` true | string | - | |
| data | describe data<br/>`@version` 1.0.5 | array | - | |
| columns | get columns list | array | - | |
| filterKey | filter key<br/>`@ignore` true | string | - | 'example' |

## Methods

### sortBy

> Sets the order
#### Params

| Param name | Type | Description |
| ---------- | ------ | ------------ |
| key | string | Key to order |

#### Return

| Type | Description |
| ------ | ----------- |
| string | Test |

## Events

| Event name | Properties | Description |
| ---------- | ----------------------------------------------------------------------------------------------------------------------------------- | -------------- |
| success | **example** `object` - the demo example<br>**exampleStr** `string` - the demo example<br>**exampleNum** `number` - the demo example | Success event. |

## Slots

| Name | Description | Bindings |
| ------ | -------------------- | -------- |
| header | Use this slot header | |
| footer | Use this slot footer | |

---
40 changes: 40 additions & 0 deletions example/documentation/code/components/vue-md.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
---
title: vue-md
---
# Button

> The only true button.
## Props

| Prop name | Description | Type | Values | Default |
| --------- | ----------------------------------------------------------------- | ------ | -------------------------- | ---------------------------------------------------------------------- |
| color | The color for the button. | string | - | '#333' |
| size | The size of the button | string | `small`, `normal`, `large` | 'normal' |
| onClick | Gets called when the user clicks on the button<br/>`@ignore` true | func | - | event => {<br> console.log('You have clicked me!', event.target);<br>} |

## Slots

| Name | Description | Bindings |
| ------- | ----------------- | -------- |
| default | Content of button | |

---

Use vue live right here too

````markdown
```jsx live
<Button>I’m transparent!</Button>
```
````

```jsx live
<Button>I’m transparent!</Button>
```

To render an example as highlighted source code remove the live modifier

```html
<button>I’m transparent!</button>
```
2 changes: 1 addition & 1 deletion example/documentation/code/config.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

143 changes: 143 additions & 0 deletions example/src/components/sub/sub-test.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,143 @@
<template>
<div>
<!-- @slot Use this slot header -->
<slot name="header"></slot>

<table class="grid">
<!-- -->
</table>

<!-- @slot Use this slot footer -->
<slot name="footer"></slot>
</div>
</template>

<script>
import { text } from './utils';
/**
* This is an example of creating a reusable grid component and using it with external data.
* @version 1.0.5
* @author [Rafael](https://github.com/rafaesc92)
* @since Version 1.0.1
*/
export default {
name: 'grid',
props: {
/**
* object/array defaults should be returned from a factory function
* @version 1.0.5
* @since Version 1.0.1
* @see See [Wikipedia](https://en.wikipedia.org/wiki/Web_colors#HTML_color_names) for a list of color names
* @link See [Wikipedia](https://en.wikipedia.org/wiki/Web_colors#HTML_color_names) for a list of color names
*/
msg: {
type: [String, Number],
default: text,
},
/**
* Function
*/
myF: {
type: Function,
default: (param, param2) => {}
},
/**
* Model example
* @model
*/
value: {
type: String
},
/**
* describe data
* @version 1.0.5
*/
data: [Array],
/**
* get columns list
*/
columns: [Array],
/**
* filter key
* @ignore
*/
filterKey: {
type: String,
default: 'example'
}
},
data () {
var sortOrders = {}
this.columns.forEach(function (key) {
sortOrders[key] = 1
})
return {
sortKey: '',
sortOrders: sortOrders
}
},
computed: {
filteredData: function () {
var sortKey = this.sortKey
var filterKey = this.filterKey && this.filterKey.toLowerCase()
var order = this.sortOrders[sortKey] || 1
var data = this.data
if (filterKey) {
data = data.filter(function (row) {
return Object.keys(row).some(function (key) {
return String(row[key]).toLowerCase().indexOf(filterKey) > -1
})
})
}
if (sortKey) {
data = data.slice().sort(function (a, b) {
a = a[sortKey]
b = b[sortKey]
return (a === b ? 0 : a > b ? 1 : -1) * order
})
}
return data
}
},
filters: {
capitalize: function (str) {
return str.charAt(0).toUpperCase() + str.slice(1)
}
},
methods: {
/**
* Sets the order
*
* @public
* @version 1.0.5
* @since Version 1.0.1
* @param {string} key Key to order
* @returns {string} Test
*/
sortBy: function (key) {
this.sortKey = key
this.sortOrders[key] = this.sortOrders[key] * -1;
/**
* Success event.
*
* @event success
* @property {object} example the demo example
* @property {string} exampleStr the demo example
* @property {number} exampleNum the demo example
* @type {object | string}
*/
this.$emit('success', {
demo: 'example',
})
},
hiddenMethod: function(){
}
}
}
</script>
Loading

0 comments on commit bbd40d3

Please sign in to comment.