@stsdti/approvable-vue 0.1.7 → 0.1.12

package/src/components/approvable/ApprovableStepActions.vue

@@ -0,0 +1,135 @@
+<template>
+  <div v-if="hasActions" class="approvable-step-actions">
+    <div class="approvable-btn-group">
+      <!--      APPROVABLE BUTTONS (custom renderer per button, else basic)      -->
+      <template v-for="(button, index) in step.buttons" :key="button.id ?? index">
+        <component
+          :is="buttonRenderer(button)"
+          v-if="buttonRenderer(button)"
+          :action-ui="button.action_ui"
+          :approvable="approvable"
+          :button="button"
+          :buttons="[button]"
+          :complete="onApproveStatusChange"
+          :resource="resource"
+          :step="value"
+          @is-loading="(isLoading) => emits('isLoading', isLoading)"
+          @refresh="emits('refresh')"
+        />
+        <component
+          :is="linkComponent"
+          v-else-if="button.link"
+          v-bind="linkProps(linkComponent, button.link)"
+        >
+          <button
+            :title="button.tooltip"
+            :class="buttonClass(button)"
+            type="button"
+            @click="onApproveStatusChange(button)"
+          >
+            <approvable-icon :icon="button.icon" />
+          </button>
+        </component>
+        <button
+          v-else
+          :title="button.tooltip"
+          :class="buttonClass(button)"
+          type="button"
+          @click="onApproveStatusChange(button)"
+        >
+          <approvable-icon :icon="button.icon" />
+          {{ button.text }}
+        </button>
+      </template>
+    </div>
+
+    <div v-if="value.can_comment" class="approvable-btn-group">
+      <approvable-step-comment
+        :approvable-step="value"
+        :disabled="!value.can_comment"
+        @refresh="emits('refresh')"
+        @is-loading="(isLoading) => emits('isLoading', isLoading)"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { createStepViewModel, performStepAction } from '@stsdti/approvable-core'
+import ApprovableIcon from './ApprovableIcon.vue'
+import ApprovableStepComment from './ApprovableStepComment.vue'
+import { approvableActionRenderer } from './action-renderers.js'
+import { linkProps, useLinkComponent } from '../../config.js'
+
+/**
+ * The controls a step offers — its workflow buttons and, where allowed, the
+ * comment popover.
+ *
+ * Extracted from the step row because the compact form renders exactly these
+ * controls beside a one-line summary instead of beside a trail. Two copies of
+ * this markup would be two places for a custom action renderer, a navigating
+ * button or the refresh-after-action rule to quietly diverge.
+ */
+const emits = defineEmits(['isLoading', 'refresh'])
+
+const props = defineProps({
+  value: {
+    type: Object,
+    required: true
+  },
+  approvable: {
+    type: Object,
+    required: true
+  },
+  resource: {
+    type: Object,
+    required: true
+  }
+})
+
+const linkComponent = useLinkComponent()
+
+const step = computed(() => createStepViewModel(props.value))
+
+/**
+ * A row shows controls when it has any — a finished step usually has none, and
+ * shows when it was decided instead.
+ */
+const hasActions = computed(() => step.value.buttons.length > 0 || !!props.value.can_comment)
+
+const buttonClass = (button) => ({
+  'approvable-btn': true,
+  // A button carrying only an icon collapses to a circle, so the row keeps its
+  // rhythm instead of stretching around an empty label.
+  'approvable-btn--icon': !button.text,
+  'approvable-btn--primary': button.result === 'approved'
+})
+
+const buttonRenderer = (button) => {
+  if (!step.value.isActive) {
+    return null
+  }
+
+  return approvableActionRenderer(button?.action_ui)
+}
+
+const onApproveStatusChange = async (buttonOrId) => {
+  emits('isLoading', true)
+
+  const result = await performStepAction({
+    stepId: step.value.id,
+    button: buttonOrId,
+    buttons: step.value.buttons
+  })
+
+  emits('isLoading', false)
+
+  // Refresh after any attempted request, success or failure — a failed action
+  // still means the local state may be stale. Only a skipped one (no id, no
+  // button, or a presentational button) reloads nothing, since it sent nothing.
+  if (!result.skipped) {
+    emits('refresh')
+  }
+}
+</script>

package/src/index.js

@@ -11,7 +11,9 @@
  */
 
 import Approvable from './components/approvable/Approvable.vue'
+import ApprovableCompact from './components/approvable/ApprovableCompact.vue'
 import ApprovableStep from './components/approvable/ApprovableStep.vue'
+import ApprovableStepActions from './components/approvable/ApprovableStepActions.vue'
 import ApprovableButtons from './components/approvable/ApprovableButtons.vue'
 import ApprovableStepComment from './components/approvable/ApprovableStepComment.vue'
 import ApprovableAuditTimeline from './components/approvable/ApprovableAuditTimeline.vue'
@@ -31,7 +33,9 @@ import {
 
 export {
   Approvable,
+  ApprovableCompact,
   ApprovableStep,
+  ApprovableStepActions,
   ApprovableButtons,
   ApprovableStepComment,
   ApprovableAuditTimeline,
@@ -80,7 +84,9 @@ export {
 
 const components = {
   Approvable,
+  ApprovableCompact,
   ApprovableStep,
+  ApprovableStepActions,
   ApprovableButtons,
   ApprovableStepComment,
   ApprovableAuditTimeline,

package/src/themes/approvable.css

@@ -266,6 +266,29 @@
     text-underline-offset: 3px;
 }
 
+/* The control that folds a long trail down to `visibleStepRange`. A quiet
+   outline pill rather than a second header link: it changes what the panel
+   shows, where History opens something, and the difference should be legible
+   before it is read. */
+.approvable-steps-toggle-btn {
+    flex: none;
+    padding: 4px 10px;
+    border: 1px solid var(--approvable-control-border);
+    border-radius: 999px;
+    background: var(--approvable-control);
+    color: var(--approvable-control-ink);
+    font-family: inherit;
+    font-size: 11px;
+    font-weight: 600;
+    line-height: 1.2;
+    white-space: nowrap;
+    cursor: pointer;
+}
+
+.approvable-steps-toggle-btn:hover {
+    background: var(--approvable-control-hover);
+}
+
 /* --------------------------------------------------------------------------
    Status badge — the header pill, and anywhere else a status is named
    -------------------------------------------------------------------------- */
@@ -337,6 +360,161 @@
     50% { opacity: 1; transform: scale(1); }
 }
 
+/* --------------------------------------------------------------------------
+   Compact — the collapsed, one-line form
+
+   Status, a dot per step, who it is waiting on and that step's controls, on a
+   single row. Built for a table cell or a page header, where the full trail
+   does not fit and its absence is the point.
+   -------------------------------------------------------------------------- */
+.approvable-compact {
+    display: flex;
+    align-items: center;
+    gap: 11px;
+    padding: 10px 12px;
+}
+
+.approvable-compact-main {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 3px;
+}
+
+.approvable-compact-line {
+    display: flex;
+    align-items: center;
+    gap: 7px;
+    min-width: 0;
+}
+
+/* The whole chain, one dot per visible step, in workflow order. Small enough
+   to sit beside the badge without competing with it, and the only place the
+   collapsed form admits how long the approval actually is. */
+.approvable-compact-dots {
+    display: flex;
+    align-items: center;
+    gap: 3px;
+    flex: none;
+}
+
+.approvable-compact-dot {
+    width: 5px;
+    height: 5px;
+    flex: none;
+    border-radius: 999px;
+    background: var(--approvable-neutral-tint);
+}
+
+.approvable-compact-dot--success {
+    background: var(--approvable-success-text);
+}
+
+.approvable-compact-dot--danger {
+    background: var(--approvable-danger-text);
+}
+
+.approvable-compact-dot--muted {
+    background: var(--approvable-muted-soft);
+}
+
+.approvable-compact-dot--pending {
+    background: var(--approvable-control-border);
+}
+
+/* The step being waited on is larger and pulses — the same beat the header's
+   waiting badge keeps, so the two read as one signal rather than two. */
+.approvable-compact-dot--active {
+    width: 7px;
+    height: 7px;
+    background: var(--approvable-accent);
+    animation: approvable-pulse 1.6s ease-in-out infinite;
+}
+
+.approvable-compact-who {
+    margin: 0;
+    min-width: 0;
+    font-size: 11.5px;
+    font-weight: 400;
+    line-height: 1.35;
+    color: var(--approvable-muted);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.approvable-compact-name {
+    font-weight: 600;
+    color: var(--approvable-ink);
+}
+
+.approvable-compact-sep {
+    margin: 0 5px;
+}
+
+.approvable-compact-side {
+    flex: none;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+}
+
+/* The row's own actions sit flush with the chevron rather than in the padded
+   block a step row gives them. */
+.approvable-compact-side .approvable-step-actions {
+    margin: 0;
+    padding: 0;
+}
+
+/* The control that swaps the two forms. A circle, so it reads as a disclosure
+   rather than as one more thing to approve. */
+.approvable-compact-toggle {
+    flex: none;
+    width: 26px;
+    height: 26px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    border: 1px solid var(--approvable-control-border);
+    border-radius: 999px;
+    background: var(--approvable-control);
+    color: var(--approvable-control-ink);
+    cursor: pointer;
+}
+
+.approvable-compact-toggle:hover {
+    background: var(--approvable-control-hover);
+}
+
+.approvable-compact-toggle:focus-visible {
+    outline: 2px solid var(--approvable-accent);
+    outline-offset: 2px;
+}
+
+/* Same chevron either way; the direction is the state. */
+.approvable-compact-toggle--expanded svg {
+    transform: rotate(180deg);
+}
+
+/* Narrow enough that the name and its controls cannot share a line, so the
+   controls drop below and keep their hit targets. */
+@media (max-width: 420px) {
+    .approvable-compact {
+        align-items: flex-start;
+        flex-wrap: wrap;
+    }
+
+    /* The controls wrap onto their own rows here, so the chevron sits with the
+       first of them rather than floating between two. */
+    .approvable-compact-side {
+        width: 100%;
+        align-items: flex-start;
+        justify-content: flex-end;
+    }
+}
+
 /* --------------------------------------------------------------------------
    Step rows
    -------------------------------------------------------------------------- */
@@ -533,18 +711,6 @@
     display: none;
 }
 
-/* --------------------------------------------------------------------------
-   Footer
-   -------------------------------------------------------------------------- */
-.approvable-footer {
-    padding: 10px 15px 13px;
-    border-top: 1px solid var(--approvable-divider);
-    font-size: 11.5px;
-    font-weight: 400;
-    line-height: 1.3;
-    color: var(--approvable-muted);
-}
-
 /* --------------------------------------------------------------------------
    Buttons
    -------------------------------------------------------------------------- */
@@ -575,6 +741,7 @@
 .approvable-btn:focus-visible,
 .approvable-history-btn:focus-visible,
 .approvable-step-comment-more:focus-visible,
+.approvable-steps-toggle-btn:focus-visible,
 .approvable-timeline-refresh:focus-visible,
 .approvable-dialog-close:focus-visible {
     outline: 2px solid var(--approvable-accent);