drug-label

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"
/>