@epignosis_llc/ui-vue2

Vue 2.7 component library for the Epignosis design system. Ships compiled ESM + CJS + .d.ts and a CSS bundle.

This is the Vue 2 counterpart to @epignosis_llc/ui-vue (Vue 3). Both conform to the same framework-agnostic component specs in docs/specs/. New work should target the Vue 3 package; this one exists for products still on Vue 2.

Built on top of @epignosis_llc/ui-tokens. For background on the design system, see the main repository.

Install

pnpm add @epignosis_llc/ui-vue2 @epignosis_llc/ui-tokens

Peer dependency: vue ^2.7. Vue 2.7 is required — the components are authored with the Composition API, which earlier Vue 2 releases do not ship.

Import the stylesheet once, at your app entry:

import "@epignosis_llc/ui-vue2/styles.css";

Usage

<script setup lang="ts">
import { Button } from "@epignosis_llc/ui-vue2";

function save(event: MouseEvent) {
  console.log("clicked", event);
}
</script>

<template>
  <!-- Vue 2 has no fragments, so a template needs a single root element. -->
  <div>
    <Button color="primary" @click="save">Save</Button>

    <!-- `disabled` and `isLoading` both emit the native `disabled` attribute, so the
         browser blocks the click and `@click` does not fire. -->
    <Button :is-loading="true" @click="save">Saving…</Button>

    <!-- With a non-button root the Button styles and sets aria-disabled, but cannot
         stop navigation — guard it yourself. -->
    <Button as="a" href="/reports" @click="save">Reports</Button>
  </div>
</template>

Everything the Button does not consume itself is forwarded to the rendered root: $attrs (data-*, aria-*, href, type, …, with the consumer's value winning over the Button's own) and every listener in $listeners, not just click. There is no onClick prop — that is React's convention.

Handling clicks

All the usual Vue 2 listener forms work, because the Button binds $listeners to its root:

<Button @click="save">Save</Button>                        <!-- save(event) -->
<Button @click="save($event, item.id)">Save</Button>       <!-- save(event, id) -->
<Button @click="() => save(item.id)">Save</Button>         <!-- no event needed -->

One caveat when as is a component rather than a tag name. Vue 2 treats @click on a component as a custom event listener, so it only fires if that component re-emits click or binds $listeners to its root. A component that does neither — router-link being the common case — will swallow it. Use .native there, which attaches to the rendered root element instead:

<!-- tag name root: plain @click is fine -->
<Button as="a" href="/reports" @click="save">Reports</Button>

<!-- component root that doesn't forward listeners: use .native -->
<Button :as="RouterLink" :to="{ name: 'reports' }" @click.native="save">Reports</Button>

Stylesheets

@epignosis_llc/ui-vue2/styles.css is required — it carries the component styles, exactly as in the Vue 3 package.

@epignosis_llc/ui-tokens/tokens.css is not. Unlike the Vue 3 package, every design value a component needs is bridged from the JS tokens, so import tokens.css only if your own stylesheets reference the CSS variables.

Components

| Component | Spec | | --------- | ----------------------- | | Button | docs/specs/button.md |

Vue 2 constraints

• ThemeProvider is renderless only with a single child. Vue 2 has no fragments, so a render function must return one vnode. Given exactly one child it passes it through untouched; given zero or several it wraps them in a display: contents <div>. Pass a single root child to keep the DOM identical to the Vue 3 package.
• @click on a component root needs .native — see Handling clicks above. Tag-name roots (as="a") are unaffected.