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.

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.

   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).

"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.

   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/[email protected]).
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 Chip Input Button Snackbar Alert

Input (fc-input)

<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)

<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 |

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)

<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)

<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)

<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. |