@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.

Responsive table search

TableSearch sizes its layout from its container, including inside sidebars and panels. Below 1280px, the search input sits above the filters; the filter grid fits one column on narrow phones and adds columns as space allows. At 1280px and wider, the search input and all filter fields share one row, with more space reserved for filters and the search input capped at 40rem. The deleted toggle and result count stay together to their right, vertically centered on the search row. On smaller containers they stack beneath the search and filters. On tablet-sized containers, toggle and count share a row with space between them; on phones the count sits below the toggle. Long query summaries wrap. search-fields-layout="stacked" keeps search above extra fields.

Pass fields directly to the slot; the wrapper uses an auto-fitting grid:

<TableList
  v-model:search-value="search"
  :data="users"
  :columns="columns"
  search
  :search-show-deleted-toggle="true"
  :search-show-deleted="showDeleted"
  @update:search-show-deleted="showDeleted = $event"
  :search-ui="{
    input: 'min-w-[min(100%,16rem)] flex-[2_1_24rem]',
    fields: 'grid min-w-[min(100%,12rem)] flex-1 gap-3 sm:grid-cols-2',
  }"
>
  <template #search-fields>
    <InputGroup v-model="role" type="select" :options="roles" />
    <InputGroup v-model="status" type="select" :options="statuses" />
  </template>
</TableList>

Use ui on TableSearch directly, or search-ui on TableList. Each key accepts a Vue class value (string, array, or object) and replaces that wrapper's default classes. Unspecified keys retain their defaults. No internal selectors are needed.

The named @container/table-search stays on the root even when ui.root is provided, so ordinary named container variants remain available in overrides. Changing classes does not change filtering, models, events, or server/client modes.

DateWeekInput

Select a calendar week with v-model="week", where week is { start: 'YYYY-MM-DD', end: 'YYYY-MM-DD' }. Set week-starts-on to 0 (Sunday, the default) or 1 (Monday). The filter callback receives a week and returns whether it can be selected. locale, placeholder, and disabled are also supported.

DateRangeInput also accepts week-starts-on: 0 for Sunday (default) or 1 for Monday. This controls both the weekday headings and calendar grid. DateInput uses the browser native picker and does not control its week start.