@stsdti/approvable-vue

@stsdti/approvable-vue

Vue 3 components for laravel-approvable: approval trails, step actions, comments and the audit timeline.

npm install @stsdti/approvable-vue

Vue 3 is a peer dependency. All behaviour comes from @stsdti/approvable-core, which installs alongside.

This package is ESM only: it publishes ES modules and no CommonJS build. Use import, or a dynamic import() from CommonJS.

Usage

import { createApp } from 'vue'
import ApprovableVue from '@stsdti/approvable-vue'
import '@stsdti/approvable-vue/themes/approvable.css'

app.use(ApprovableVue)

Or import components individually:

<script setup>
import { Approvable } from '@stsdti/approvable-vue'
</script>

<template>
  <Approvable :value="document" @refresh="reload" />
</template>

value is the resource that carries the approval — a document, a request — not the approvable itself.

Theming

The components ship unstyled and emit .approvable-* class names. One stylesheet — themes/approvable.css — gives them their look, in light and dark.

Dark mode follows the viewer's system setting; an application with its own toggle stamps data-theme="dark" (or a .dark class) on an ancestor and the panel follows it, in either direction.

A button's icon is a class name from the workflow definition, so the icon font is the application's to load — examples/vue uses Tabler and workflow icons named ti ti-check.

There is no Tailwind dependency and no build step to configure — you do not need to add this package to a Tailwind content glob. Every class it renders is styled by the stylesheet you import.

Every colour, radius and shadow is a custom property, so changing one is a declaration rather than a rule:

.approvable {
  --approvable-accent: #16a34a;
  --approvable-radius: 12px;
}

To write a theme of your own, target the same class names — they are the public contract, and a React binding would emit exactly the same ones.

Links

A button that navigates renders as a plain <a> by default, so the package works with no router installed. To use your router's link component:

import { RouterLink } from 'vue-router'

app.use(ApprovableVue, { linkComponent: RouterLink })

Custom action buttons

A button whose action_ui matches a registered renderer renders through it:

import { registerApprovableActionRenderer } from '@stsdti/approvable-vue'

registerApprovableActionRenderer('pdf-signature', SignatureButton)

The renderer receives button, step, approvable, resource and a complete callback to invoke when its own flow finishes.

Configuration

The HTTP client is optional: with no configuration the components use fetch and echo the XSRF-TOKEN cookie back as X-XSRF-TOKEN, so Laravel's CSRF check passes. Configure it when you want your own axios instance — its baseURL, interceptors and auth:

import { configureApprovableClient } from '@stsdti/approvable-vue'

configureApprovableClient({ axios })                  // your axios instance
configureApprovableClient({ fetch: myFetch })         // a custom fetch
configureApprovableClient({ baseURL: '/admin-api' })  // default transport, other prefix
configureApprovableClient({ adapter: myAdapter })     // anything else

Notifications and date formatting are configured on the core package:

import { setApprovableNotifier, setApprovableDateFormatter } from '@stsdti/approvable-core'

setApprovableNotifier({ success: toast.success, error: toast.error })
setApprovableDateFormatter((value) => dayjs(value).format('LLL'))

License

MIT