import { Meta, Story, Preview} from "@storybook/addon-docs/blocks"
import SGithubRepoCount from "../SGithubRepoCount"

<Meta title='Count/SGithubRepoCount' component={ SGithubRepoCount } />

<style>{`
  .custom-preview .base-canvas {
    height: auto;
  }
`}</style>

# SGithubRepoCount

## Preview

<Preview className="custom-preview">
  <Story id='count-sgithubrepocount--default' />
</Preview>

## Example

```html
<template>
  <s-github-repo-count
    :share-options="shareOptions"
    @load="onLoad"
    @error="onError"
    @loading="onLoading"
  ></s-github-repo-count>
</template>

<script>
  import { SGithubRepoCount } from 'vue-socials'

  export default {
    name: 'SGithubRepoCountSharing',

    components: { SGithubRepoCount },

    data() {
      return {
        tag: 'span',
        shareOptions: {
          username: 'webistomin',
          repository: 'nanogram.js',
          type: 'fork',
        },
      }
    },

    methods: {
      onLoad() {},
      onError() {},
      onLoading() {},
    }
  };
</script>
```

## Props

| Prop | Type | Description | Default value |
| ------ | ------ | ------ | ------ |
`shareOptions` | `object` | Your share link parameters: <br /> **username** – your github username <br /> **repository** – your github repository <br /> **type** – share link type (watch, type, fork, issues) <br /> | `{}`
`tag` | `string` | Dynamic HTML tag or component  | `span`

## Events

| Event name | Usage |
| ------ | ------ |
`load` |  the request has finished successfully |
`error` | the request has finished with error |
`loading` | the request has started |

## ⚠️ Warning

This component uses `JSONP` so the content won't be available during `SSR`.