open-index/open-npm huggingface dataset:
npm package: @luaguillande/luadoc
Description: A tool to improve your Vuejs project documentation.
Author: Luana Guillande
Latest version: 1.1.2


# LuaDoc - Documentation for Vuejs Components 

A tool to improve your Vuejs project documentation.

<br>
<br>

## Demo

### Map the props
<img src="https://raw.githubusercontent.com/luaguillande/luadoc/master/doc/lib/assets/demo1.jpg">
<br>
<br>

### Map the slots
  
<img src="https://raw.githubusercontent.com/luaguillande/luadoc/master/doc/lib/assets/demo2.jpg">
<br>
<br>

### Map the usage
  
<img src="https://raw.githubusercontent.com/luaguillande/luadoc/master/doc/lib/assets/demo3.jpg">

<br>
<br>

## Quick start guide
  

## 1. Instalation

### 1.1. Install LuaDoc

  ```bash
      $ npm install @luaguillande/luadoc
  ```

### 1.2. Install the library Marker to render the markdown notations

  ```bash
      $ npm i marker
  ```


## 2. Create the route to access the documentation. I suggest the `/doc` route. 

Exemple to create a local route (doesn't work in production) in Laravel.

```bash
    if (App::environment('local')) {
      Route::get('doc', function () {
        View::addNamespace('Folder', '../node_modules/@luaguillande/luadoc/doc');
        return View::make('Folder::doc');
      });
    }
```

## 3. Add the `luadoc.js` to your compiler

Exemplo using webpack:

```js
mix.js('node_modules/@luaguillande/luadoc/doc/luadoc.js', 'public/js')
```

## 4. Set the components to be documented

### 4.1. Copy the `Components.js` file to `public`

```bash
  cp node_modules/@luaguillande/luadoc/doc/Components.js public
```

### 4.2. Edit the `public/Component.js` file to map your own components

```js
  import CompA from '../resources/js/components/CompA.vue';
  import CompB from '../resources/js/components/CompB.vue';

  export {
      CompA,
      CompB
  }
```

## 5. Add metadata to componentes 

### 5.1. Mandatory Metadata:

```vue
  export default{
      name: 'comp-a',
      description: `This \`comp-a\` is amazing, you should _check_ it out.`,
      token: `<comp-a label='foo'></comp-a>`,
  }
```

### 5.2. Optional Metadata:

```vue
    img: "imgs/doc/compa.png",
    slots:[
      {
        name: 'lol',
        note: "a label to be appended after the checkbox"
      }
    ],
    usage:[
      {
        url: '/',
        calledBy:['welcome.blade.php', 'App.vue']
      },
    ],
    props: {
      label: {
        type: String,
        default: '',
        note: "a label to be appended after the checkbox"
      },
      color: {
        type: String,
        default: 'blue',
        note: "a color for checkbox"
      }
    }
```

## Enjoy! 

@luaguillande - 31solutions.com
npm package: @luaguillande/screen-checker
Description: Vue Plugin to help you to identify the size of the screen without complexity.
Author: Luana Guillande
Latest version: 1.2.5

# Screen Checker

  Vue Plugin to help you to identify the size of the screen without complexity.

      
## Quick start guide
  
  
## 1. Add the plugin to your project

  ```bash
    npm i @luaguillande/screen-checker
  ```

<br>
 
## 2. Import

#### Option 1: If you are using Nuxt.js you can import a plugin to inject the property $sc to your Vue instances.

  ```nuxt.config.js
    plugins: [
        { src: '~/node_modules/@luaguillande/screen-checker/checkScreenPlugin.js'}
    ]
  ```

#### Option 2: Import as Mixin

If you are not using a Nuxt environment or if you want to import individually into components use the Mixin.

  ```js
    <scprit>
    import checkScreenMixin from '@luaguillande/screen-checker/checkScreenMixin.js'

    export default {
         mixins:[checkScreenMixin]
    }
    </scprit>
  ```
  or 

  ```js
    <scprit>
    import checkScreenMixin from '@luaguillande/screen-checker/checkScreenMixin.js'

    Vue.mixins(checkScreenMixin)
    </scprit>
  ```

<br>
 
## 3. Usage

Use in html. 

  ```html
  <div :class="{ 'some-class': $sc.desktopAndUp,  'another-class': $sc.tabletAndDown}">
  ```
  
  ```html
  <button :v-html="$sc.largeTabletAndDown ? 'Click here' : 'Click here to send me a text' "></button>
  ```

  ```html
  <img :src="my logo" v-if="$sc.isLargeDesktop"/>
  <div v-else>My Logo Text </div>
  ```
Use in js. 

  ```js
 <script>
  export default{
    methods:{
      myFn(value){
        return this.$sc.largeTabletAndDown ? value : 'Not mobile'
      }
    }
  }
 <script>
  ```

  
### Note: If you are using as a Nuxt injection use '$sc' else use 'sc'.

<br>

## 4. Boundaries

### Option 1: Specific range

  Property | Min Size | Max Size
--- | --- | --- 
`isLargeDesktop` | 1600px | 8200px
`isDesktop` | 1280px | 1599px
`isLargeTablet` | 1024px | 1279px
`isTablet` | 768px  | 1023px
`isCell` | 250px | 767px


### Option 2: Screen size bigger than 

  Property | Min Size
--- | --- 
`largeDesktopAndUp` | 1600px
`desktopAndUp` | 1280px
`largeTabletAndUp` | 1024px
`tabletAndUp` | 768px  | 1023px
`cellAndUp` | 250px

### Option 3: Screen size smaller than 

  Property | Max Size
--- | --- 
`largeDesktopAndDown` | 8200px
`desktopAndDown` | 1599px
`largeTabletAndDown` | 1279px
`tabletAndDown`  | 1023px
`cellAndDown` | 767px

<br>
 
## Enjoy!

@luaguillande - 31solutions.com

## You might like!

[Scss Helpers Library](https://www.npmjs.com/package/@luaguillande/scss_helpers)