jplomas/drug-labels

drug-labels

Vue component to provide UI drug labels as <drug-label> tags.

Usage demo on Codepen

docs a bit of a WIP

Parameters

type

Default: null (displayed as others / white label)

Determines the type of drug and therefore the color of the label. Possible values are:

Parameter	Type	Example	Colour
induction-agent	Induction agents	thiopental	yellow
hypnotic	Sedative/hypnotics	midazolam	orange
hypnotic-antagonist	Sedative antagonist	flumazenil	orange and white stripes
neuromuscular-blocker	Neuromuscular blockers	atracurium	fluorescent red
depolarizing-neuromuscular-blocker	Depolarising neuromuscular blockers	suxamethonium	fluorescent red with black top
neuromuscular-blocker-antagonist	Neuromuscular blocker reversal agents	neostigmine	fluorescent red and white stripes
opioid	Opioids	fentanyl	blue
opioid-antagonist	Opioid antagonists	naloxone	blue and white stripes
vasopressor	Vasopressors	ephedrine	violet
adrenaline	Adrenaline	adrenaline	violet with black top
hypotensive	Hypotensive agents	labetalol	violet and white stripes
local-anaesthetic	Local anaesthetics	bupivacaine	grey
anticholinergic	Anticholinergics	atropine	green
antiemetic	Antiemetics	cyclizine	salmon
others	others drugs	paracetamol	white

Example:

<drug-label type="opioid" />

---

name

Default: null (displayed as "Drug")

The name of the drug to be displayed on the top portion of the label. The initial letter is capitalized automatically.

Example:

<drug-label name="ketamine" />

---

concentration

Default: null (displayed as ".............")

The concentration of the drug to be displayed on the lower portion of the label suffixed with the units.

---

units

Default: null (displayed as "mg/ml")

---

size

Default: null (displayed normal sized)

Determines the size of the label. Possible values are:

Parameter	Size	font-size
normal	Normal	1.1rem
small	Small	0.8rem
xsmall	Extra small	0.6rem

---

bordered

Default: null (displayed as false - no border)

value	border
true	yes
false	none

---

scaled

Default: null (displayed as false)

value	width
true	16 rem (size="normal") 12 rem (size="small") 10 rem (size="xsmall")
false	as parent element

Example:

<drug-label
  name="Midazolam"
  type="hypnotic"
  scaled
/>

<drug-label
  name="Midazolam"
  type="hypnotic"
  scaled
  size="small"
/>

<drug-label
  name="Midazolam"
  type="hypnotic"
  scaled
  size="xsmall"
/>