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
- 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
- Restart the fc-ui-portal development server.
- 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
- Ensure that all local changes are saved.
- Run the command
git add -A
to stage all local changes.
- Run the command
git commit -m "<Your commit message here>"
to commit all local changes.
- Run the command
make publish
to build the library for production and increment the version number.
- The new version number will be displayed in the package.json file (take note of this new version number).
"version": "0.4.33"
- Run the command
git push origin <branch name>
.
- Merge your branch into master on Gitlab.
fc-ui-portal
- Comment out the local volume in the docker-compose.yaml file.
volumes:
- .:/app
- 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]
).
- 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. |