@stsdti/approvable-vue 0.1.0

package/src/components/approvable/ApprovableStepComment.vue

@@ -0,0 +1,155 @@
+<template>
+  <div ref="rootRef" class="approvable-popover">
+    <button class="approvable-btn" :title="messages.comments" type="button" @click="onToggle">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="16"
+        height="16"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="1.8"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        aria-hidden="true"
+      >
+        <path d="M8 9h8" />
+        <path d="M8 13h6" />
+        <path d="M18 4a3 3 0 0 1 3 3v8a3 3 0 0 1 -3 3h-5l-5 3v-3h-2a3 3 0 0 1 -3 -3v-8a3 3 0 0 1 3 -3h12z" />
+      </svg>
+    </button>
+
+    <div v-if="isOpen" class="approvable-popover-panel">
+      <div v-if="isLoading" class="approvable-loading">
+        <span class="approvable-spinner" />
+      </div>
+
+      <div class="approvable-popover-title">{{ messages.comments }}</div>
+
+      <div v-if="commentedBy" class="approvable-popover-meta">
+        <div>{{ messages.commentAuthor }}:</div>
+        <div class="approvable-popover-author">{{ commentedBy }}</div>
+      </div>
+
+      <template v-if="!disabled">
+        <textarea
+          ref="textareaRef"
+          v-model="comment"
+          class="approvable-textarea"
+          rows="1"
+          @input="resizeTextarea"
+        />
+
+        <div class="approvable-popover-actions">
+          <button class="approvable-btn approvable-btn--primary" type="button" @click="onComment">
+            {{ messages.save }}
+          </button>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, useTemplateRef } from 'vue'
+
+import { ApprovableStepRepository, get, isSuccessResponse, notifyError, notifySuccess } from '@stsdti/approvable-core'
+import { useMessages } from '../../messages.js'
+
+const props = defineProps({
+  approvableStep: {
+    required: true,
+  },
+  disabled: {
+    required: true,
+    type: Boolean,
+  },
+})
+
+const emits = defineEmits(['isLoading', 'refresh'])
+
+const rootRef = useTemplateRef('rootRef')
+const textareaRef = useTemplateRef('textareaRef')
+
+const isOpen = ref(false)
+const isLoading = ref(false)
+const comment = ref(null)
+
+const commentedBy = computed(() => {
+  return get(props.approvableStep, 'commented_by')
+})
+
+function onToggle () {
+  isOpen.value ? hide() : show()
+}
+
+function show () {
+  comment.value = get(props.approvableStep, 'comment')
+  isOpen.value = true
+  nextTick(resizeTextarea)
+}
+
+function hide () {
+  isOpen.value = false
+}
+
+function resizeTextarea () {
+  const textarea = textareaRef.value
+  if (!textarea) {
+    return
+  }
+  textarea.style.height = 'auto'
+  textarea.style.height = `${textarea.scrollHeight}px`
+}
+
+function onDocumentClick (event) {
+  if (isOpen.value && rootRef.value && !rootRef.value.contains(event.target)) {
+    hide()
+  }
+}
+
+function onDocumentKeydown (event) {
+  if (event.key === 'Escape') {
+    hide()
+  }
+}
+
+onMounted(() => {
+  document.addEventListener('click', onDocumentClick)
+  document.addEventListener('keydown', onDocumentKeydown)
+})
+
+onBeforeUnmount(() => {
+  document.removeEventListener('click', onDocumentClick)
+  document.removeEventListener('keydown', onDocumentKeydown)
+})
+
+const messages = useMessages()
+
+async function onComment () {
+  if (!get(props.approvableStep, 'comment') && !comment.value) {
+    notifyError(messages.commentRequired)
+    return
+  }
+
+  isLoading.value = true
+  emits('isLoading', true)
+
+  const data = {
+    comment: comment.value,
+  }
+
+  const response = await new ApprovableStepRepository().comment(props.approvableStep.id, data)
+
+  if (isSuccessResponse(response)) {
+    notifySuccess(messages.commentSaved)
+    hide()
+    emits('refresh')
+  } else {
+    notifyError(messages.commentFailed)
+  }
+
+  isLoading.value = false
+  emits('isLoading', false)
+}
+</script>

package/src/components/approvable/ApproveStatusInfo.vue

@@ -0,0 +1,33 @@
+<template>
+  <span :class="badgeClass">{{ badgeName }}</span>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { ApprovableStatus, get } from '@stsdti/approvable-core'
+
+const props = defineProps({
+  value: {
+    required: true
+  },
+  label: {
+    default: null
+  }
+})
+const badgeClass = computed(() => {
+  const approvableStatusCode = get(props.value, 'code', ' - ')
+  return {
+    'approvable-badge': true,
+    'approvable-badge--draft': [ApprovableStatus.CODES.CODE_DRAFT].includes(approvableStatusCode),
+    'approvable-badge--waiting': [ApprovableStatus.CODES.CODE_WAITING].includes(approvableStatusCode),
+    'approvable-badge--success': [ApprovableStatus.CODES.CODE_APPROVED, ApprovableStatus.CODES.CODE_VIEWED, ApprovableStatus.CODES.CODE_NOTICED].includes(approvableStatusCode),
+    'approvable-badge--danger': [ApprovableStatus.CODES.CODE_REJECTED].includes(approvableStatusCode),
+    'approvable-badge--muted': [ApprovableStatus.CODES.CODE_EXPIRED, ApprovableStatus.CODES.CODE_SOLVED].includes(approvableStatusCode),
+    'approvable-badge--empty': approvableStatusCode === ' - '
+  }
+})
+
+const badgeName = computed(() => {
+  return props.label ? props.label : get(props.value, 'name', ' - ')
+})
+</script>

package/src/components/approvable/action-renderers.js

@@ -0,0 +1,23 @@
+import { markRaw } from 'vue'
+import {
+  registerActionRenderer,
+  unregisterActionRenderer,
+  actionRenderer,
+  actionSlotName
+} from '@stsdti/approvable-core'
+
+/**
+ * Vue binding over the core action registry.
+ *
+ * The only thing Vue-specific about registering a renderer is that a component
+ * must be marked raw before it goes into reactive state, so that is all this
+ * layer adds. The registry itself is framework-free, which is what allows a
+ * React binding to reuse it without inheriting Vue's reactivity rules.
+ */
+export function registerApprovableActionRenderer (name, component) {
+  return registerActionRenderer(name, markRaw(component))
+}
+
+export { unregisterActionRenderer as unregisterApprovableActionRenderer }
+export { actionRenderer as approvableActionRenderer }
+export { actionSlotName as approvableActionSlotName }

package/src/components/select/approvable-status-select/ApprovableStatusSelect.vue

@@ -0,0 +1,64 @@
+<template>
+  <label class="approvable-select">
+    <span v-if="label" class="approvable-select-label">{{ label }}</span>
+    <select
+      :value="selectedKey"
+      class="approvable-select-input"
+      v-bind="$attrs"
+      @change="onChange"
+    >
+      <option value="">-</option>
+      <option v-for="option in options" :key="optionKey(option)" :value="optionKey(option)">
+        {{ optionName(option) }}
+      </option>
+    </select>
+  </label>
+</template>
+
+<script setup>
+import { computed, onMounted, ref } from 'vue'
+import { ApprovableStatusRepository, get } from '@stsdti/approvable-core'
+
+defineOptions({
+  inheritAttrs: false
+})
+
+const emit = defineEmits(['mounted'])
+const modelValue = defineModel()
+
+const props = defineProps({
+  getList: {},
+  label: {
+    default: 'Status'
+  }
+})
+
+const options = ref([])
+
+const getListDefault = async (search) => {
+  let filters = [{ field: 'search', value: search }]
+  return await new ApprovableStatusRepository().fetchAll({ filters })
+}
+
+const optionKey = (option) => String(get(option, 'id') ?? get(option, 'code', ''))
+const optionName = (option) => get(option, 'name') ?? get(option, 'text', '')
+
+const selectedKey = computed(() => {
+  return modelValue.value ? optionKey(modelValue.value) : ''
+})
+
+const onChange = (event) => {
+  const key = event.target.value
+  modelValue.value = options.value.find((option) => optionKey(option) === key) ?? null
+}
+
+const refresh = async (search = null) => {
+  const list = await (props.getList ?? getListDefault)(search)
+  options.value = Array.isArray(list) ? list : []
+}
+
+onMounted(async () => {
+  await refresh()
+  emit('mounted', { refresh, options })
+})
+</script>

package/src/components/select/approvable-status-select/ApprovableStatusSelectOption.vue

@@ -0,0 +1,16 @@
+<template>
+  <div class="approvable-select-option">
+    <span>{{ displayName }}</span>
+  </div>
+</template>
+
+
+<script setup>
+import { computed } from 'vue'
+import { get } from '@stsdti/approvable-core'
+
+const props = defineProps({
+  value: {}
+})
+const displayName = computed(() => get(props.value, 'name'))
+</script>

package/src/config.js

@@ -0,0 +1,26 @@
+import { inject } from 'vue'
+
+export const APPROVABLE_LINK_COMPONENT = Symbol('approvable.linkComponent')
+
+/**
+ * Which component renders a button that navigates.
+ *
+ * Defaults to a plain anchor so the package works with no router installed.
+ * Hardcoding <router-link> instead would silently fail to resolve — and log a
+ * Vue warning — in any application without vue-router.
+ *
+ * Applications using a router opt in once, at install:
+ *
+ *   app.use(Approvable, { linkComponent: RouterLink })
+ */
+export function useLinkComponent () {
+  return inject(APPROVABLE_LINK_COMPONENT, 'a')
+}
+
+/**
+ * Anchors take `href`; RouterLink and NuxtLink take `to`. Binding the right one
+ * keeps the call sites free of that distinction.
+ */
+export function linkProps (component, target) {
+  return component === 'a' ? { href: target } : { to: target }
+}

package/src/icons.js

@@ -0,0 +1,36 @@
+import { inject } from 'vue'
+import { isClassIcon, isRegisteredIcon, isUrlIcon } from '@stsdti/approvable-core'
+
+export const APPROVABLE_ICON_REGISTRY = Symbol('approvable.iconRegistry')
+
+/**
+ * How a button's `icon` is rendered.
+ *
+ * An icon is a *name*, resolved against a registry the application supplies —
+ * never raw markup rendered with v-html. A button's icon comes from the
+ * workflow definition — authored in the editor, stored, and then displayed in
+ * the browser of every person who can see the approval — so v-html here would
+ * let whoever can edit a workflow run script in every approver's session.
+ * `<svg onload="...">` is enough; it would be a stored XSS with an unusually
+ * good distribution list.
+ *
+ *   app.use(Approvable, {
+ *     icons: { approve: CheckIcon, reject: XIcon }
+ *   })
+ *
+ * Anything not in the registry falls back to the two safe forms: an `http(s)`
+ * URL rendered as <img>, or a CSS class rendered on an <i>.
+ * A `#icon` slot is available for full control.
+ *
+ * Applications that genuinely need bespoke SVG register a component for it,
+ * which puts the markup in application code — where it is reviewed — rather
+ * than in a database row.
+ */
+export function useIconRegistry () {
+  return inject(APPROVABLE_ICON_REGISTRY, {})
+}
+
+// The three predicates come from core rather than being defined here: the
+// React binding applies the same rules, and a rule about what is safe to render
+// is only worth trusting while there is one copy of it.
+export { isRegisteredIcon, isUrlIcon, isClassIcon }

package/src/index.js

@@ -0,0 +1,109 @@
+/**
+ * @stsdti/approvable-vue
+ *
+ * Vue 3 components for laravel-approvable. All behaviour lives in
+ * @stsdti/approvable-core; this package renders it.
+ *
+ * Components ship unstyled and emit `.approvable-*` class names. Import the
+ * theme to give them a look — one stylesheet, light and dark:
+ *
+ *   import '@stsdti/approvable-vue/themes/approvable.css'
+ */
+
+import Approvable from './components/approvable/Approvable.vue'
+import ApprovableStep from './components/approvable/ApprovableStep.vue'
+import ApprovableButtons from './components/approvable/ApprovableButtons.vue'
+import ApprovableStepComment from './components/approvable/ApprovableStepComment.vue'
+import ApprovableAuditTimeline from './components/approvable/ApprovableAuditTimeline.vue'
+import ApproveStatusInfo from './components/approvable/ApproveStatusInfo.vue'
+import ApprovableStatusSelect from './components/select/approvable-status-select/ApprovableStatusSelect.vue'
+import ApprovableStatusSelectOption from './components/select/approvable-status-select/ApprovableStatusSelectOption.vue'
+
+import { APPROVABLE_LINK_COMPONENT } from './config.js'
+import { APPROVABLE_ICON_REGISTRY } from './icons.js'
+import { APPROVABLE_MESSAGES } from './messages.js'
+import {
+  registerApprovableActionRenderer,
+  unregisterApprovableActionRenderer,
+  approvableActionRenderer,
+  approvableActionSlotName
+} from './components/approvable/action-renderers.js'
+
+export {
+  Approvable,
+  ApprovableStep,
+  ApprovableButtons,
+  ApprovableStepComment,
+  ApprovableAuditTimeline,
+  ApproveStatusInfo,
+  ApprovableStatusSelect,
+  ApprovableStatusSelectOption
+}
+
+export {
+  registerApprovableActionRenderer,
+  unregisterApprovableActionRenderer,
+  approvableActionRenderer,
+  approvableActionSlotName
+}
+
+export { APPROVABLE_LINK_COMPONENT, useLinkComponent, linkProps } from './config.js'
+export {
+  APPROVABLE_ICON_REGISTRY,
+  useIconRegistry,
+  isRegisteredIcon,
+  isUrlIcon,
+  isClassIcon
+} from './icons.js'
+export { APPROVABLE_MESSAGES, useMessages } from './messages.js'
+
+const components = {
+  Approvable,
+  ApprovableStep,
+  ApprovableButtons,
+  ApprovableStepComment,
+  ApprovableAuditTimeline,
+  ApproveStatusInfo,
+  ApprovableStatusSelect,
+  ApprovableStatusSelectOption
+}
+
+/**
+ * Vue plugin, for applications that prefer global registration.
+ *
+ *   app.use(ApprovableVue, {
+ *     linkComponent: RouterLink,
+ *     icons: { approve: CheckIcon },
+ *     messages: { commentSaved: 'Comentariul a fost adăugat.' }
+ *   })
+ *
+ * `linkComponent` is what a navigating button renders as. It defaults to a
+ * plain anchor so the package works without a router installed.
+ *
+ * `icons` maps a button's `icon` name to a component. Icons are names, never
+ * raw SVG rendered with v-html — that would let anyone who can edit a workflow
+ * run script in every approver's browser.
+ *
+ * `messages` overrides the user-facing strings, which are English by default.
+ */
+export default {
+  install (app, { linkComponent = null, icons = null, messages = null, register = true } = {}) {
+    if (linkComponent) {
+      app.provide(APPROVABLE_LINK_COMPONENT, linkComponent)
+    }
+
+    if (icons) {
+      app.provide(APPROVABLE_ICON_REGISTRY, icons)
+    }
+
+    if (messages) {
+      app.provide(APPROVABLE_MESSAGES, messages)
+    }
+
+    if (register) {
+      for (const [name, component] of Object.entries(components)) {
+        app.component(name, component)
+      }
+    }
+  }
+}

package/src/messages.js

@@ -0,0 +1,19 @@
+import { inject } from 'vue'
+import { DEFAULT_MESSAGES, mergeMessages } from '@stsdti/approvable-core'
+
+export const APPROVABLE_MESSAGES = Symbol('approvable.messages')
+
+/**
+ * The user-facing strings, in English.
+ *
+ * Defined in core so that every binding ships the same wording and the same
+ * override surface — a string added for the React components is available
+ * here too. Any of it can be replaced:
+ *
+ *   app.use(Approvable, { messages: { comments: 'Comentarii' } })
+ */
+export function useMessages () {
+  return mergeMessages(inject(APPROVABLE_MESSAGES, null))
+}
+
+export { DEFAULT_MESSAGES, mergeMessages }