open-index/open-npm huggingface dataset:
npm package: @morioh/is-bot
Description: Detect user-agent is a bot/spider/crawler
Author: Morioh Team
Latest version: 1.1.2

# Detect user-agent is a bot/spider/crawler


```js

// const { isBot } = require('@morioh/is-bot');

const isBot = require('@morioh/is-bot');

console.log(isBot('Mozilla/5.0 (compatible; Googlebot/2.1; +http://www.google.com/bot.html)'));
// return true

```
npm package: @morioh/r-bus
Description: A global event emitter for React.
Author: Morioh Team
Latest version: 1.0.3

# useBus
A global event emitter for React

## Install

```
npm i @morioh/r-bus
```


```js
import useBus from "@morioh/r-bus";

const [data, setData] = useState(null);

useBus('show',(data) => { setData(data)}, [])

```



```js

import { emit } from "@morioh/r-bus";

<button onCLick={()=> emit('show', {field:"value"})}>

```
npm package: @morioh/r-ckeditor
Description: CKEditor wrapper for React
Author: Morioh Team
Latest version: 1.0.2

# CKEditor wrapper for React


## Install

```
npm i @morioh/r-ckeditor
```


```js
import Editor from "@morioh/r-ckeditor";

 const config = {
        ...editorConfig,
        placeholder: "Write a comment",
        blockToolbar: []

    }

    const onChange = ({ html, text }) => {

        setDoc(prev => ({ ...prev, txt: html }));

    };

    const onKeydown = (evt, data, editor) => {
        const { keyCode, shiftKey } = data;

       
        if (keyCode === 13 && !shiftKey) {
            data.preventDefault();
            setSubmit(true);
            editor.setData('');
        }

    }

<Editor config={config} value={txt} onChange={onChange} onKeydown={onKeydown} className="border border-gray-300 text-gray-900 text-sm rounded-md focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full p-2.5 transition dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-indigo-500 dark:focus:border-indigo-500" />


```

## Props
```ts
/// <reference types="react" />
declare type EditorProps = {
    onChange: Function;
    onReady?: Function;
    onFocus?: Function;
    onBlur?: Function;
    onKeydown?: Function;
    value?: string | null;
    config?: any;
    disabled?: boolean;
    className?: string;
};
declare function Editor(props: EditorProps): JSX.Element | null;
export default Editor;
export { Editor };

```
npm package: @morioh/r-clipboard
Description: Clipboard React Hooks
Author: nasa8x
Latest version: 1.0.0

# use Clipboard React Hooks


## Install

```
npm i @morioh/r-clipboard
```


```js
import useClipboard from "@morioh/r-clipboard";


export default function App() {

    const address = '0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48';

    const [isCopied, toClipboard] = useClipboard();

    return (
        <div className="space-y-4 px-6 py-4">
            <div className="relative mt-1 flex rounded-md shadow-sm">
                <input
                    type="text"
                    readOnly
                    value={address}
                    className="block w-full rounded-md border-gray-300 p-2.5 text-sm text-gray-900 transition focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-indigo-500 dark:focus:ring-indigo-500"
                />

                <div className="absolute inset-y-0 right-1 flex items-center">
                    <button
                        type="button"
                        onClick={() => toClipboard(address)}
                        className="-ml-py inline-flex items-center rounded px-3 py-2 text-sm font-medium transition hover:bg-indigo-500 hover:text-white focus:outline-none focus:ring-1 focus:ring-indigo-500">
                        {isCopied ? <MdCheck className="h-5 w-5"></MdCheck> : <MdContentCopy className="h-5 w-5"></MdContentCopy>}
                    </button>
                </div>
            </div>
        </div>
    );
}

```

## Props
```ts
/// <reference types="react" />
export interface IClipboard {
    timeout: number; // default 3000ms 
    debug?: boolean;
    message?: string;
    format?: string;
    onCopy?: (clipboardData: object) => void;
}
export default function useClipboard(config?: IClipboard): [boolean, (text: string) => void];

```

Contributing
------------

Please refer to each project's style and contribution guidelines for submitting patches and additions. In general, we follow the "fork-and-pull" Git workflow.

 1. **Fork** the repo on GitHub
 2. **Clone** the project to your own machine
 3. **Commit** changes to your own branch
 4. **Push** your work back up to your fork
 5. Submit a **Pull request** so that we can review your changes

NOTE: Be sure to merge the latest from "upstream" before making a pull request!

Community
------------
Stay up to date on the development of Morioh UI and reach out to the community with these helpful resources.

Follow [@codek_tv](https://twitter.com/codek_tv) and [@im_a_developer](https://twitter.com/im_a_developer) on Twitter.

Follow [Morioh](https://www.facebook.com/moriohdotcom) and [React Developers](https://www.facebook.com/ReactDevelopersz/) on FaceBook.

Join the official [Discord](https://discord.gg/sqxU6un) room: [https://discord.gg/sqxU6un](https://discord.gg/sqxU6un).
npm package: @morioh/r-flatpickr
Description: FlatPickr wrapper for React
Author: Morioh Team
Latest version: 1.0.1

# FlatPickr wrapper for React


## Install

```
npm i @morioh/r-flatpickr
```


```js
import Flatpickr from "@morioh/r-flatpickr";

 <Flatpickr onChange={(d, val) => setDoc({ ...doc, at: val })} value={doc.at.toString()} className="inline-flex focus:ring-indigo-500 focus:border-indigo-500 rounded-none rounded-l-md sm:text-sm border-gray-300 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400" />

```
npm package: @morioh/r-resource
Description: React hook to dynamically load an external script, css and know when its loaded
Author: Morioh Team
Latest version: 1.0.2

# useResource: use script, css hook react
React hook to dynamically load multiple external script, css and know when its loaded

## Install

```
npm i @morioh/r-resource
```


```js
import useResource from "@morioh/r-resource";

const [loading] = useResource([      

        {
            tag: 'link',
            id: 'flatpickr-css',
            rel: 'stylesheet',
            href: 'https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.9/flatpickr.min.css',
        },
        {
            tag: 'script',
            id: 'flatpickr-js',
            src: 'https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.9/flatpickr.min.js'
        }
    ]);

```

## Full example

```js

import { useEffect, useRef } from "react";
import useResource from "@morioh/r-resource";

declare const window: any;

type PlatpickrProps = {
    config?: object,
    onChange?: any,
    onOpen?: any,
    onClose?: any,
    onMonthChange?: any,
    onYearChange?: any,
    onReady?: any,
    onValueUpdate?: any,
    onDayCreate?: any,
    onCreate?: any,
    onDestroy?: any,
    value?: string | any | object | number,
    className?: string
}


export default function Flatpickr(props: PlatpickrProps) {

    const hooks = ['onChange', 'onOpen', 'onClose', 'onMonthChange', 'onYearChange', 'onReady', 'onValueUpdate', 'onDayCreate'];

    const root = useRef(null);
    const instance = useRef<any>();

    const [loading] = useResource([      

        {
            tag: 'link',
            id: 'flatpickr-css',
            rel: 'stylesheet',
            href: 'https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.9/flatpickr.min.css',
        },
        {
            tag: 'script',
            id: 'flatpickr-js',
            src: 'https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.9/flatpickr.min.js'
        }
    ]);


    useEffect(() => {

        if (loading) return;

        const config = {
            dateFormat: 'U',
            altFormat: 'Y-m-d G:i K',
            altInput: true,
            enableTime: true,
            minDate: new Date(),
            ...props.config,
            defaultDate: props.config?.defaultDate || props.value || null
        };

        hooks.forEach(hook => {
            if (props.hasOwnProperty(hook)) {
                config[hook] = props[hook]
            }
        })

        instance.current = window.flatpickr(root.current, config);


        return () => {
            // Clean up the subscription
            if (instance.current) {
                instance.current.destroy();
                instance.current = null;
            }

        };

    }, [loading]);


    if (loading) return null;


    return <input type="text" ref={root} {...props} />;


}

```
npm package: @morioh/r-store
Description: Sync state to local storage so that it persists through a page refresh. Usage is similar to useState except we pass in a local storage key so that we can default to that value on page load instead of the specified initial value.
Author: Morioh Team
Latest version: 1.0.1

# useResource: use script, css hook react
React hook to dynamically load multiple external script, css and know when its loaded

## Install

```
npm i @morioh/r-resource
```


```js
import useResource from "@morioh/r-resource";

const [loading] = useResource([      

        {
            tag: 'link',
            id: 'flatpickr-css',
            rel: 'stylesheet',
            href: 'https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.9/flatpickr.min.css',
        },
        {
            tag: 'script',
            id: 'flatpickr-js',
            src: 'https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.9/flatpickr.min.js'
        }
    ]);

```

## Full example

```js

import { useEffect, useRef } from "react";
import useResource from "@morioh/r-resource";

declare const window: any;

type PlatpickrProps = {
    config?: object,
    onChange?: any,
    onOpen?: any,
    onClose?: any,
    onMonthChange?: any,
    onYearChange?: any,
    onReady?: any,
    onValueUpdate?: any,
    onDayCreate?: any,
    onCreate?: any,
    onDestroy?: any,
    value?: string | any | object | number,
    className?: string
}


export default function Flatpickr(props: PlatpickrProps) {

    const hooks = ['onChange', 'onOpen', 'onClose', 'onMonthChange', 'onYearChange', 'onReady', 'onValueUpdate', 'onDayCreate'];

    const root = useRef(null);
    const instance = useRef<any>();

    const [loading] = useResource([      

        {
            tag: 'link',
            id: 'flatpickr-css',
            rel: 'stylesheet',
            href: 'https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.9/flatpickr.min.css',
        },
        {
            tag: 'script',
            id: 'flatpickr-js',
            src: 'https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.9/flatpickr.min.js'
        }
    ]);


    useEffect(() => {

        if (loading) return;

        const config = {
            dateFormat: 'U',
            altFormat: 'Y-m-d G:i K',
            altInput: true,
            enableTime: true,
            minDate: new Date(),
            ...props.config,
            defaultDate: props.config?.defaultDate || props.value || null
        };

        hooks.forEach(hook => {
            if (props.hasOwnProperty(hook)) {
                config[hook] = props[hook]
            }
        })

        instance.current = window.flatpickr(root.current, config);


        return () => {
            // Clean up the subscription
            if (instance.current) {
                instance.current.destroy();
                instance.current = null;
            }

        };

    }, [loading]);


    if (loading) return null;


    return <input type="text" ref={root} {...props} />;


}

```
npm package: @morioh/v-editor
Description: CKEditor wrapper for Vue 3.0
Author: Morioh Team
Latest version: 1.0.8

# CKEditor wrapper for Vue 3.0



Contributing
------------

Please refer to each project's style and contribution guidelines for submitting patches and additions. In general, we follow the "fork-and-pull" Git workflow.

 1. **Fork** the repo on GitHub
 2. **Clone** the project to your own machine
 3. **Commit** changes to your own branch
 4. **Push** your work back up to your fork
 5. Submit a **Pull request** so that we can review your changes

NOTE: Be sure to merge the latest from "upstream" before making a pull request!

Community
------------
Stay up to date on the development of Morioh UI and reach out to the community with these helpful resources.

Follow [@codek_tv](https://twitter.com/codek_tv) and [@im_a_developer](https://twitter.com/im_a_developer) on Twitter.

Follow [Morioh](https://www.facebook.com/moriohdotcom) and [Vue Developers](https://www.facebook.com/VueDevelopers) on FaceBook.

Join the official [Discord](https://discord.gg/sqxU6un) room: [https://discord.gg/sqxU6un](https://discord.gg/sqxU6un).
npm package: @morioh/v-flatpickr
Description: FlatPickr wrapper for Vue 3.0
Author: Morioh Team
Latest version: 1.0.4

# FlatPickr wrapper for Vue 3.0



Contributing
------------

Please refer to each project's style and contribution guidelines for submitting patches and additions. In general, we follow the "fork-and-pull" Git workflow.

 1. **Fork** the repo on GitHub
 2. **Clone** the project to your own machine
 3. **Commit** changes to your own branch
 4. **Push** your work back up to your fork
 5. Submit a **Pull request** so that we can review your changes

NOTE: Be sure to merge the latest from "upstream" before making a pull request!

Community
------------
Stay up to date on the development of Morioh UI and reach out to the community with these helpful resources.

Follow [@codek_tv](https://twitter.com/codek_tv) and [@im_a_developer](https://twitter.com/im_a_developer) on Twitter.

Follow [Vuejs Components](https://morioh.com/@5dde2f9041863624e46656ad) and [Vue Developers](https://www.facebook.com/VueDevelopers) on FaceBook.

Join the official [Discord](https://discord.gg/sqxU6un) room: [https://discord.gg/sqxU6un](https://discord.gg/sqxU6un).
npm package: @morioh/v-lazy
Description: Lazy image loading directive for Vue.js
Author: Morioh-Lab
Latest version: 1.0.1

# Lazy image loading directive for Vue.js

### Install

```
npm install @morioh/v-lazy
```

```js

import { createApp } from "vue";
import Lazy from '@morioh/v-lazy'

// global register
const app = createApp(App)  
  .use(store)
  .use(router)  
  .use(Lazy)
  .mount("#app");

```

```html
<img class="placeholder" v-lazy="https://unsplash.com/photos/al1bUu7EfAQ/download?force=true&w=1920">

```
npm package: @morioh/v-lightbox
Description: Lightbox Photo Grid and Slideshow component for Vue.Js
Author: Morioh-Lab
Latest version: 1.0.3

# Lightbox Photo Grid and Slideshow component for Vue.JS

v-lightbox is a Vue component which allows to display first x (1-5) images of your gallery in a grid view as you seen on Facebook timeline. Click on the thumbnail will display all images in a fullscreen, navigatable modal popup just like the gallery lightbox.

![Lightbox Photo Grid and Slideshow component for Vue.Js](https://i.imgur.com/HdsKXTr.png)

![Lightbox Photo Grid and Slideshow component for Vue.Js](https://i.imgur.com/OPE3Ndr.png)

![Lightbox Photo Grid and Slideshow component for Vue.Js](https://i.imgur.com/v9VDfu9.png)

![Lightbox Photo Grid and Slideshow component for Vue.Js](https://i.imgur.com/lHe0oEK.png)

![Lightbox Photo Grid and Slideshow component for Vue.Js](https://i.imgur.com/yRftjuT.png)


### Demo

☞ [Lightbox Demo](https://lab.morioh.com/v-lightbox)

### How to use

☞ [Lightbox Photo Grid and Slideshow component for Vue.JS](https://morioh.com/p/da2adf3f7eac)

### Recommended

☞ [What's new in Bootstrap 5](https://morioh.com/p/46e9af3b9b04)

☞ [Vue.JS Tutorial: Learn Vue.js from Scratch](https://morioh.com/list/5dd27fc107964607af718993)

☞ [Building a simple Applications with Vue 3](https://morioh.com/p/d5f7657ee12d)
npm package: @morioh/v-modal
Description: Modal wrapper for Vue 3.0
Author: Morioh Team
Latest version: 1.0.1

# Modal wrapper for Vue 3.0



Contributing
------------

Please refer to each project's style and contribution guidelines for submitting patches and additions. In general, we follow the "fork-and-pull" Git workflow.

 1. **Fork** the repo on GitHub
 2. **Clone** the project to your own machine
 3. **Commit** changes to your own branch
 4. **Push** your work back up to your fork
 5. Submit a **Pull request** so that we can review your changes

NOTE: Be sure to merge the latest from "upstream" before making a pull request!

Community
------------
Stay up to date on the development of Morioh UI and reach out to the community with these helpful resources.

Follow [@codek_tv](https://twitter.com/codek_tv) and [@im_a_developer](https://twitter.com/im_a_developer) on Twitter.

Follow [Vuejs Components](https://morioh.com/@5dde2f9041863624e46656ad) and [Vue Developers](https://www.facebook.com/VueDevelopers) on FaceBook.

Join the official [Discord](https://discord.gg/sqxU6un) room: [https://discord.gg/sqxU6un](https://discord.gg/sqxU6un).
npm package: @morioh/v-msg
Description: Simple notify handler component for Vue.js
Author: Morioh Team
Latest version: 1.0.4

# V-MSG: Simple notify handler component for Vue.js

![Simple notify handler component for Vue.js](https://i.morioh.com/200503/f43131db.jpg)

### Demo

☞ [V-MSG Preview](https://lab.morioh.com/v-msg/)


### How to use

☞ [V-MSGX: Simple notify handler component for Vue.js Guide](https://morioh.com/p/04c52630e8a9)

### Recommended

☞ [What's new in Bootstrap 5](https://morioh.com/p/46e9af3b9b04)

☞ [Lightbox Photo Grid and Slideshow component for Vue.JS](https://morioh.com/p/da2adf3f7eac)

☞ [Building a simple Applications with Vue 3](https://morioh.com/p/d5f7657ee12d)
npm package: @morioh/v-perfect-scrollbar
Description: Perfect Scrollbar directive for Vue.js
Author: Morioh-Lab
Latest version: 1.0.1

# Perfect Scrollbar directive for Vue.js

Custom Scrollbar JavaScript Library with Perfect Scrollbar

![Perfect Scrollbar Preview](https://i.morioh.com/200518/54d79624.jpg)


### Demo

☞ [Perfect Scrollbar Live Preview](https://lab.morioh.com/v-perfect-scrollbar/)


### How to use

☞ [Vue Perfect Scrollbar Guide](https://morioh.com/p/c767f850bb5b)

### Recommended

☞ [Smooth Scrollbar directive for Vue.js](https://morioh.com/p/c767f850bb5b)

☞ [Quill Rich Text Editor component for Vue.js](https://morioh.com/p/9e5eb9b16e71)

☞ [Markdown Editor component for Vue.js](https://morioh.com/p/2a1c9c34024b)

☞ [Simple notify handler component for Vue.js](https://morioh.com/p/04c52630e8a9)

☞ [Lightbox Photo Grid and Slideshow component for Vue.JS](https://morioh.com/p/da2adf3f7eac)
npm package: @morioh/v-quill-editor
Description: Quill Rich Text Editor component for Vue.js
Author: Morioh Team
Latest version: 1.0.2

# Quill Rich Text Editor component for Vue.js

Quill is a free, open source WYSIWYG editor built for the modern web. With its modular architecture and expressive API, it is completely customizable to fit any need.

![Editor Theme snow Preview](https://i.imgur.com/vzxxRtzh.png)

![Editor Theme bubble Preview](https://i.imgur.com/XJPUph8h.png)


### Demo

☞ [Editor Preview](https://lab.morioh.com/v-quill-editor/)


### How to use

☞ [Vue Editor Guide](https://morioh.com/p/9e5eb9b16e71)

### Recommended

☞ [Markdown Editor component for Vue.js](https://morioh.com/p/2a1c9c34024b)

☞ [Simple notify handler component for Vue.js](https://morioh.com/p/04c52630e8a9)

☞ [Lightbox Photo Grid and Slideshow component for Vue.JS](https://morioh.com/p/da2adf3f7eac)

☞ [Video Embed Component for Vue.JS](https://morioh.com/p/487a79571ccb)
npm package: @morioh/v-scrollbar
Description: Smooth Scrollbar directive for Vue.js
Author: Morioh-Lab
Latest version: 1.0.1

# Smooth Scrollbar directive for Vue.js

Custom Scrollbar JavaScript Library with Smooth Scrollbar

![Smooth Scrollbar Preview](https://i.imgur.com/k1jVDe3.gif)


### Demo

☞ [Smooth Scrollbar Preview](https://lab.morioh.com/v-smooth-scrollbar/)


### How to use

☞ [Vue Smooth Scrollbar Guide](https://morioh.com/p/c767f850bb5b)

### Recommended

☞ [Quill Rich Text Editor component for Vue.js](https://morioh.com/p/9e5eb9b16e71)

☞ [Markdown Editor component for Vue.js](https://morioh.com/p/2a1c9c34024b)

☞ [Simple notify handler component for Vue.js](https://morioh.com/p/04c52630e8a9)

☞ [Lightbox Photo Grid and Slideshow component for Vue.JS](https://morioh.com/p/da2adf3f7eac)

☞ [Video Embed Component for Vue.JS](https://morioh.com/p/487a79571ccb)
npm package: @morioh/v-smooth-scrollbar
Description: Smooth Scrollbar directive for Vue.js
Author: Morioh-Lab
Latest version: 1.0.3

# Smooth Scrollbar directive for Vue.js

Custom Scrollbar JavaScript Library with Smooth Scrollbar

![Smooth Scrollbar Preview](https://i.imgur.com/k1jVDe3.gif)


### Demo

☞ [Smooth Scrollbar Preview](https://lab.morioh.com/v-smooth-scrollbar/)


### How to use

☞ [Vue Smooth Scrollbar Guide](https://morioh.com/p/c767f850bb5b)

### Recommended

☞ [Quill Rich Text Editor component for Vue.js](https://morioh.com/p/9e5eb9b16e71)

☞ [Markdown Editor component for Vue.js](https://morioh.com/p/2a1c9c34024b)

☞ [Simple notify handler component for Vue.js](https://morioh.com/p/04c52630e8a9)

☞ [Lightbox Photo Grid and Slideshow component for Vue.JS](https://morioh.com/p/da2adf3f7eac)

☞ [Video Embed Component for Vue.JS](https://morioh.com/p/487a79571ccb)
npm package: @morioh/v-tooltip
Description: Tooltip directive for Vue.js
Author: Morioh-Lab
Latest version: 1.0.1

# Tooltip directive for Vue.js (without jQuery or Javascript Framework min 7 Kb)

☞ [What's new in Bootstrap 5](https://morioh.com/p/46e9af3b9b04)

☞ [Vue.JS Tutorial: Learn Vue.js from Scratch](https://morioh.com/list/5dd27fc107964607af718993)

☞ [Javascript Tutorial for Absolute Beginners](https://morioh.com/list/5dcd0341203e265d661aa028)


### Demo

☞ [v-tooltip demo](https://morioh-lab.github.io/v-tooltip/dist/www/)


### Install

```
npm install @morioh/v-tooltip
```

```js
import '@morioh/v-tooltip/dist/v-tooltip.css';

import Vue from 'vue'
import Tooltip from '@morioh/v-tooltip'

// global register
Vue.use(Tooltip);

```

```html
<h5>Hover</h5>

<div class="form-group">

    <button type="button" class="btn btn-primary"
        v-tooltip="{ when:'hover', placement: 'top', content: 'Html content'}">Top</button>


    <button type="button" class="btn btn-primary"
        v-tooltip="{ when:'hover', placement: 'bottom', content: 'Html content'}">Bottom</button>

    <button type="button" class="btn btn-primary"
        v-tooltip="{ when:'hover', placement: 'left', content: 'Html content'}">Left</button>

    <button type="button" class="btn btn-primary"
        v-tooltip="{ when:'hover', placement: 'right', content: 'Html content'}">Right</button>

</div>

<h5>Click</h5>

<div class="form-group">

    <button type="button" class="btn btn-primary"
        v-tooltip="{ when: 'click', placement: 'top', content: 'Html content'}">Top</button>


    <button type="button" class="btn btn-primary"
        v-tooltip="{ when: 'click', placement: 'bottom', content: 'Html content'}">Bottom</button>

    <button type="button" class="btn btn-primary"
        v-tooltip="{ when: 'click', placement: 'left', content: 'Html content'}">Left</button>

    <button type="button" class="btn btn-primary"
        v-tooltip="{ when: 'click', placement: 'right', content: 'Html content'}">Right</button>

</div>

<h5>Focus</h5>

<div class="row">
    <div class="col-3">
        <div class="form-group">
            <input type="text" id="i-top" class="form-control"
                v-tooltip="{ when: 'focus', placement: 'top', content: 'Html content top'}">
        </div>
    </div>

    <div class="col-3">
        <div class="form-group">
            <input type="text" id="i-bottom" class="form-control"
                v-tooltip="{ when: 'focus', placement: 'bottom', content: 'Html content bottom'}">
        </div>
    </div>
    <div class="col-3">
        <div class="form-group">
            <input type="text" id="i-left" class="form-control"
                v-tooltip="{ when: 'focus', placement: 'left', content: 'Html content left'}">
        </div>
    </div>

    <div class="col-3">
        <div class="form-group">
            <input type="text" id="i-right" class="form-control"
                v-tooltip="{ when: 'focus', placement: 'right', content: 'Html content right'}">
        </div>
    </div>
</div>
```
npm package: @morione/git-report
Description: Generate xlsx file report with git history data - author, score, commits
Author: kalman@morione.sk
Latest version: 1.0.12

# git-report

The Command tool display the commit score from a specific local git repository. The score is calculated based on git history data (number of commits, number of files added and removed, commit complexity). Author scores, commits and other information are exported in **XLSX** format.
Exported data can be generated at intervals into separated sheets.

[![npm version](https://img.shields.io/npm/v/@morione/git-report)](https://www.npmjs.com/package/@morione/git-report)
[![MIT License](https://badges.frapsoft.com/os/mit/mit.svg?v=102)](https://github.com/ellerbrock/open-source-badge/)
[![Downloads](https://img.shields.io/npm/dm/@morione/git-report)](https://www.npmjs.com/package/@morione/git-report)
[![FOSSA Status](https://app.fossa.io/api/projects/git%2Bhttps%3A%2F%2Fgithub.com%2Feslint%2Feslint.svg?type=shield)](https://app.fossa.com/projects/custom%2b37792%2fgitlab.com%2fmorione%2fgit-report/refs/branch/main/013f9fc3aed391578b7ad44e0954eab7189cc2b8)


## Install

```sh
npm install @morione/git-report
```


## Usage

**<i>Basic</i>** usage will generate **xlsx** document for defined local repository path.


```
npx @morione/git-report  [local path to repository]
```

**<i>Usage with all params</i>** will generate  **xlsx** document (named by defined name [reportFileName]) from the git history using a start date [since] and end date [until]. The generated data will be ranged by defined weeks [springDuration]. 


```
npx @morione/git-report [local path to repository] \
 --since 2023-01-04 --until 2023-05-12 \
 --sprintDuration 2 \
 --reportFileName "/tmp/eza-be.xlsx" \
 --sprintOffset=8
```