Vue-muscle-group-selector NPM

Vue Muscle Group Selector

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

Vue Muscle Group Selector

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

Prop	Type	Description	Default
allowMultiple	`BOOLEAN`	If true, the user can select multiple muscle groups, if false, the user can only select one muscle group.	`false`
primaryColor	`STRING`	The primary color of the component, this is the color of the selected muscle groups.	`#03001c`
muscleColor	`STRING`	The color of the NO selected but active muscle	`#fff`
strokeColor	`STRING`	This is the outside line of the body	`#4d4d4d`
initialValues	`ARRAY`	Array of muscle groups to be selected by default, this is the ID of the muscle group, not the name.	`[]`
showMusclesListHelper	`BOOLEAN`	If true, the helper list of the muscle groups will be shown, if false, the helper list will be hidden.	`false`
showBackMuscles	`BOOLEAN`	If true, the legs muscle groups will be shown, if false, the legs muscle groups will be hidden.	`true`
showFrontMuscles	`BOOLEAN`	If true, the back muscle groups will be shown, if false, the back muscle groups will be hidden.	`true`
translations	`OBJECT`	The translations of the muscle groups, the keys are the IDs of the muscle groups, the values are the names of the muscle groups.	`object`
readOnly	`BOOLEAN`	Use with the initial values to only show the selected muscle group	`false`

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",
  }
}