@enos5/enos-vue-default

@enos5/enos-vue-default

Shared Vue 3 UI components from Enos, packaged as the Default workspace inside the monorepo.

Requirements

• Node.js 20+
• npm

Install

From the workspace root:

npm install

Build this package:

npm run build -w @enos5/enos-vue-default

Use In Another Project

Install the published package:

npm install @enos5/enos-vue-default

This package expects these peer dependencies in the consuming app:

• vue
• @inertiajs/vue3 (^2.0.0 or ^3.0.0)
• @heroicons/vue
• vue-i18n

Rich text support uses TinyMCE and is bundled as a regular dependency in this library. The component set mirrors the Jetstream package except for ApplicationLogo, AuthenticationCard, Banner, NavGroup, NavLink, NavMenu, and ResponsiveNavLink.

You can register everything globally:

import { createApp } from 'vue'
import App from './App.vue'
import { EnosVueDefault } from '@enos5/enos-vue-default'

createApp(App).use(EnosVueDefault).mount('#app')

Or import individual components:

import { Button, ColorPicker, TextInput } from '@enos5/enos-vue-default'

ColorPicker resolves its built-in UI labels through vue-i18n using the English copy as keys. If your app wants localized picker chrome, define translations for keys such as Color, Selected color, Pick color from screen, Hue, Opacity, Hex value, Saturation and brightness for {color}, and Rainbow color area for {color}.

DateInput and DateRangeInput default to English locale behavior. Pass locale to override that, and for native browser date fields remember the final picker UI is still browser-controlled, with lang used as the locale hint.

Styles are loaded automatically when you import the package entrypoint, so consumers do not have to remember a separate CSS import.

If a consuming app wants earlier stylesheet loading during npm run dev, it can opt into the stable stylesheet entry explicitly:

import '@enos5/enos-vue-default/styles.css'

That explicit import is optional. It mainly improves dev-mode first paint and avoids importing from dist directly.

Table column controls

TableList keeps its existing behavior unless the new controls are enabled:

<script setup>
import { ref } from 'vue'
import { TableList } from '@enos5/enos-vue-default'

const hiddenColumns = ref(['brand'])
const columns = [
  { key: 'name', label: 'Name', hideable: false },
  { key: 'brand', label: 'Brand' },
  { key: 'status', label: 'Status', sticky: 'right', width: '8rem' },
]
</script>

<template>
  <TableList
    v-model:hidden-columns="hiddenColumns"
    :columns="columns"
    :data="rows"
    column-visibility
    sticky-actions
  >
    <template #actions="{ item }">
      <!-- row actions -->
    </template>
  </TableList>
</template>

• sticky-actions keeps the dedicated actions slot column visible at the right edge during horizontal scrolling, keeps multi-button groups on one line, and right-aligns the whole group.
• column.sticky: 'right' (or true) pins a regular data column. A regular column can render custom buttons through its named slot, but it remains distinct from the dedicated actions slot column. Multiple sticky columns calculate their right offsets automatically.
• column-visibility displays the built-in settings button and dialog.
• v-model:hidden-columns controls the hidden column keys. Without the model, column.hidden: true supplies the initial internal state.
• column.hideable: false omits a required column from the settings dialog.
• Checkbox and “Show all” changes remain drafts until the user confirms with “OK”. Cancel, Escape, and backdrop dismissal discard the draft.
• The columnVisibility* label props localize the button, title, description, “Show all”, apply, and cancel labels.

TableListForm supports the same sticky-actions prop and column.sticky: 'right' behavior. Column visibility is intentionally limited to TableList so an actively edited field cannot disappear from an editable row.

Publish To npm

Before publishing, build the package and verify the tarball:

npm run build -w @enos5/enos-vue-default
npm pack --dry-run -w packages/default

Then bump the version in packages/default/package.json, commit the change, and publish the workspace:

npm publish -w packages/default --access public

The first public release of this package needs --access public. After the package exists on npm, subsequent publishes can use the same command.

Floating action hints

FloatingActionHint is available in the Default package. It requires a unique id, a label, and a description. Bind the default slot’s descriptionId to the action’s aria-describedby. The hint opens on hover or focus, closes on Escape or leaving the action, and follows viewport resizing and container scrolling. Its content is teleported to body to avoid clipping by ancestor containers.

<script setup lang="ts">
import { FloatingActionHint } from '@enos5/enos-vue-default'
</script>

<template>
  <FloatingActionHint
    id="save-action-hint"
    label="Save"
    description="Save your changes without leaving this page."
  >
    <template #default="{ descriptionId }">
      <button type="button" :aria-describedby="descriptionId">Save</button>
    </template>
  </FloatingActionHint>
</template>

A runnable usage example is available in examples/FloatingActionHint.vue.

File uploads

Use InputGroup with type="file" for an upload control without a current-image preview. It accepts any file type by default. Pass accept to limit the browser picker using comma-separated extensions or MIME types.

<script setup>
import { ref } from 'vue'
import { InputGroup } from '@enos5/enos-vue-default'

const attachment = ref(null)
</script>

<template>
  <InputGroup
    v-model="attachment"
    type="file"
    label="Attachment"
    accept=".pdf,.docx"
  />
</template>

The model receives a File or null. The picker filter does not replace server-side file validation. FileInput is also available as a standalone component.