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

Slots

Events

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

Slots

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

Snackbar (fc-snackbar)

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

Props

Slots

Alert (fc-alert)

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

Props

Slots