Vue 3 muscle group selector component

02 May 2023
0
248

Vue Muscle Group Selector

Wrapper for Vue3 with super powers of muscle group selector made by Ryan M. Poe.

Get started

Install

npm install vue-muscle-group-selector
# or 
yarn add vue-muscle-group-selector

Usage

<script setup>
import VueMuscleGroupSelector from "vue-muscle-group-selector";
import "vue-muscle-group-selector/dist/style.css";

const handleOnSelectMuscularGroup = selection => {
  console.log(selection) // array of selection e.g ['abs']
}
</script>

<template>
  <div>
    <muscle-group-selector
      :translations="muscularGroupTranslations"
      @on-select="handleOnSelectMuscularGroup"
    />
  </div>
</template>

Props

PropTypeDescriptionDefaultallowMultipleBOOLEANIf true, the user can select multiple muscle groups, if false, the user can only select one muscle group.falseprimaryColorSTRINGThe primary color of the component, this is the color of the selected muscle groups.#03001cinitialValuesARRAYArray of muscle groups to be selected by default, this is the ID of the muscle group, not the name.[]showMusclesListHelperBOOLEANIf true, the helper list of the muscle groups will be shown, if false, the helper list will be hidden.falseshowBackMusclesBOOLEANIf true, the legs muscle groups will be shown, if false, the legs muscle groups will be hidden.trueshowFrontMusclesBOOLEANIf true, the back muscle groups will be shown, if false, the back muscle groups will be hidden.truetranslationsOBJECTThe translations of the muscle groups, the keys are the IDs of the muscle groups, the values are the names of the muscle groups.object

translations

The component has a translations prop to set all the labels of the component, below you can view the default values of this prop.

{
  arms: {
    arms: "Arms",
    bicpes: "Biceps",
    deltoids: "Deltoids",
    forearms: "Forearms",
    triceps: "Triceps",
  },
  back: {
    back: "Back",
    trapezius: "Trapezius",
    lats: "Lats",
  },
  core: {
    core: "Core",
    abs: "Abs",
    obliques: "Obliques",
    pectorals: "Pectorals",
  },
  legs: {
    legs: "Legs",
    adductors: "Adductors",
    calves: "Calves",
    hamstrings: "Hamstrings",
    glutes: "Glutes",
    quads: "Quads",
  }
}