@goliafrs/control

Vue 3 control library with typed exports, standalone styles, and reusable menu primitives.

Install

pnpm add @goliafrs/control vue

Usage

Import styles once in the host application:

import '@goliafrs/control/styles.css'

Import from the root entry:

import { Button, Input, type ButtonVariant } from '@goliafrs/control'

Import from subpaths:

import { Select, type SelectOption } from '@goliafrs/control/select'
import { Menu, type MenuItem } from '@goliafrs/control/menu'

Use Vue-native modelValue contracts:

<Input
  ariaLabel="Search"
  label="Search"
  modelValue={searchQuery.value}
  type="text"
  onUpdate:modelValue={nextValue => {
    searchQuery.value = nextValue
  }}
/>

<Select
  ariaLabel="Sort order"
  label="Sort order"
  modelValue={sortOrder.value}
  options={sortOptions.value}
  onUpdate:modelValue={nextValue => {
    sortOrder.value = nextValue
  }}
/>

Use the standalone menu directly:

<Menu
  anchorElement={triggerReference.value}
  ariaLabel="Sort menu"
  items={menuItems.value}
  menuPosition={menuPosition.value}
  onClose={() => {
    menuPosition.value = null
  }}
  onSelect={itemId => {
    selectedItemId.value = itemId
  }}
/>

Styles and themes

The package ships:

• @goliafrs/control/styles.css
• @goliafrs/control/styles/tokens.scss
• @goliafrs/control/styles/mixins.scss

Override CSS variables in the host application:

:root {
  --control-font-family: 'Rubik', sans-serif;
  --control-button-primary-background: rgb(59 130 246 / 100%);
}

Reuse raw Sass mixins and tokens:

@use '@goliafrs/control/styles/tokens.scss' as controlTokens;
@use '@goliafrs/control/styles/mixins.scss' as controlMixins;

:root[data-theme='light'] {
  @include controlTokens.light-theme-tokens;
}

.custom-toolbar {
  @include controlMixins.section-inline-padding;
}