@fantasyclub/fc-components

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