npm package: @fantasyclub/fc-components
Description: ## Project setup
Latest version: 0.4.48

# fc-components

## Project setup

```
npm install
```

### Compiles and hot-reloads for development

```
npm run serve
```

### Compiles and minifies for production

```
npm run build
```

### Lints and fixes files

```
npm run lint
```

### Customize configuration

See [Configuration Reference](https://cli.vuejs.org/config/).

# Integration with fc-ui-portal

## Develop fc-components locally with fc-ui-portal

1. Ensure that a local volume of fc-components is enabled in the fc-ui-portal **docker-compose.yaml** file.
   ```yaml
   volumes:
      - .:/app
      - ../fc-components:/app/node_modules/@fantasyclub/fc-components
    ```
2. Restart the fc-ui-portal development server.
3. To make local changes in fc-components effective in fc-ui-portal, run the command `make build` from within the fc-components directory.

## Integrate local changes for production

### fc-components

1. Ensure that all local changes are saved.
2. Run the command `git add -A` to stage all local changes.
3. Run the command `git commit -m "<Your commit message here>"` to commit all local changes.
4. Run the command `make publish` to build the library for production and increment the version number.
5. The new version number will be displayed in the **package.json** file (take note of this new version number).
  ```json
  "version": "0.4.33"
  ```
6. Run the command `git push origin <branch name>`.
7. Merge your branch into master on Gitlab.

### fc-ui-portal
1. Comment out the local volume in the **docker-compose.yaml** file.
   ```yaml
   volumes:
      - .:/app
      #- ../fc-components:/app/node_modules/@fantasyclub/fc-components
    ```
2. Upgrade the fc-components npm package by running the command `npm install @fantasyclub/fc-components@<version>`, where **version** is the new version number of fc-components that was merged to master (e.g. `npm install @fantasyclub/fc-components@0.4.33`).
3. Restart the development server and ensure that all changes that were made in the local environment are reflected in the newly upgraded fc-components npm package.

# API Reference

[Input](#input-fc-input)<br />
[Chip Input](#chip-input-fc-chip-input)<br />
[Button](#button-fc-btn)<br />
[Snackbar](#snackbar-fc-snackbar)<br />
[Alert](#alert-fc-alert)<br />

## Input (fc-input)

![input](/src/assets/images/input.png)

![input in error state](/src/assets/images/input-error.png)

```vue
<fc-input
  :type="showPassword ? 'text' : 'password'"
  name="password"
  placeholder="Enter your Password"
  label="Password"
  :icon="showPassword ? 'eye-slash' : 'eye'"
  v-model="form.password"
  @clickIcon="showPassword = !showPassword"
/>
```

### Props

| Name         | Type    | Default | Description                                                                                                                                               |
| ------------ | ------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
| label        | String  | N/A     | input label                                                                                                                                               |
| placeholder  | String  | N/A     | input placeholder                                                                                                                                         |
| type         | String  | text    | any valid input type                                                                                                                                      |
| autocomplete | String  | N/A     | any valid autocomplete attribute                                                                                                                          |
| id           | String  | N/A     | input id                                                                                                                                                  |
| disabled     | Boolean | false   | disables the input                                                                                                                                        |
| readonly     | Boolean | false   | makes the input readonly                                                                                                                                  |
| icon         | String  | N/A     | any valid font-awesome icon name                                                                                                                          |
| hint         | String  | N/A     | dislpayed underneath the input, is hidden if the input is in an **error** state                                                                           |
| name         | String  | N/A     | input name, required                                                                                                                                      |
| error        | Boolean | false   | puts the input in an **error** state, and displays the _errorMessage_ prop                                                                                |
| errorMessage | String  | N/A     | Replaces hint text when the input is in an **error** state. If the errorMessage is not an empty string, the input will be thrown into an **error** state. |

### Slots

| Name         | Description                                                                                                                                      |
| ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------ |
| icon         | Used in lieu of the _icon_ prop, can be any valid font-awesome icon.                                                                             |
| label        | Used in lieu of the _lablel_  prop.                                                                                                              |
| errorMessage | Used in lieu of the _errorMessage_ prop, will be displayed only if the input is in an **error** state.                                           |
| hint         | Used in lieu of the _hint_ prop, will display beneath the input. Replaced by the _errorMessage_ prop/slot if the input is in an **error** state. |

### Events

| Name      | Description                                                                            |
| --------- | -------------------------------------------------------------------------------------- |
| clickIcon | emits a click event on the input icon (only applies to prop icons, not slotted icons). |

## Chip Input (fc-chip-input)

![buttons](/src/assets/images/chips.png)

```vue
<fc-chip-input
  v-model="chips"
  label="Tags"
  hint="Enter the tags that best describe you"
  placeholder="Tag Name"
/>
```

### Props

| Name             | Type   | Default       | Description                                                                                                                                                                 |
| ---------------- | ------ | ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| label            | String | Default Label | label for the chip input                                                                                                                                                    |
| placeholder      | String | N/A           | placeholder for the chip input                                                                                                                                              |
| hint             | String | N/A           | hint (bottom text) for the chip input                                                                                                                                       |
| maxLength        | Number | 20            | max character length for each chip                                                                                                                                          |
| customDelimiters | Array  | [ ]           | key codes for custom keyboard events that create a new chip and reset the input value to an empty string. Key codes for all keys can be found [here](https://keycode.info/) |

### Slots

| Name | Description                                                      |
| ---- | ---------------------------------------------------------------- |
| hint | Used in lieu of the _hint_ prop, will display beneath the input. |

### Additional Information

- This input must v-model an Array
- The default delimiters for this input are the following keys: `Enter`, `Space`, `,`, and `#`
- All chips are automatically prepended with a `#` character. If the input value starts with a `#`, this rendundant character will be removed.

## Button (fc-btn)

![buttons](/src/assets/images/buttons.png)

```vue
<fc-btn type="submit" :loading="loading" :disabled="disabled" lg>
    Sign In
</fc-btn>
```

### Props

| Name      | Type    | Default | Description                               |
| --------- | ------- | ------- | ----------------------------------------- |
| type      | String  | button  | button type                               |
| sm        | Boolean | false   | decreases button size                     |
| lg        | Boolean | false   | increases button size                     |
| secondary | Boolean | false   | removes background, adds a thin border    |
| tertiary  | Boolean | false   | removes background and border             |
| disabled  | Boolean | false   | disables the button                       |
| loading   | Boolean | false   | hides text and displays a loading spinner |

## Snackbar (fc-snackbar)

![buttons](/src/assets/images/snackbar.png)

```vue
<fc-snackbar v-model="confirmation" type="info" message="Information updated" />
```

### Props

| Name    | Type             | Default | Description                                                                 |
| ------- | ---------------- | ------- | --------------------------------------------------------------------------- |
| message | String           | N/A     | the message to be displayed                                                 |  
| timeout | String or Number | 2000    | allows for a custom timeout to wait until snackbar is automatically hidden. |

### Slots

| Name | Description                                                      |
| ---- | ---------------------------------------------------------------- |
| message | Used in lieu of the _message_ prop. |

## Alert (fc-alert)

![alert](/src/assets/images/alert.png)

```vue
<fc-alert
  v-if="!error"
  class="my-5"
  message="This is an alert"
/>
```

### Props

| Name      | Type    | Default | Description                               |
| --------- | ------- | ------- | ----------------------------------------- |
| message      | String  | N/A  | the alert message to be displayed   

### Slots

| Name | Description                                                      |
| ---- | ---------------------------------------------------------------- |
| message | Used in lieu of the _message_ prop. |