@stsdti/approvable-vue 0.1.7 → 0.1.12

package/src/components/approvable/Approvable.vue

@@ -1,81 +1,149 @@
 <template>
-  <div v-if="approval.hasApprovable" class="approvable">
+  <div v-if="approval.hasApprovable" :class="rootClass">
     <!-- A refresh has content to veil; an initial load has none, and gets the
          skeleton below instead. -->
     <div v-if="isLoading && approval.steps.length" class="approvable-loading">
       <span class="approvable-spinner" />
     </div>
 
-    <div class="approvable-header">
+    <!-- The collapsed form replaces the trail rather than summarising it on top
+         of one, so it is the whole panel while it is on. -->
+    <template v-if="isCompact">
       <h2 class="approvable-sr-only">{{ title }}</h2>
 
-      <template v-if="isInitialLoad">
+      <div v-if="isInitialLoad" class="approvable-compact">
+        <span class="approvable-sr-only" aria-live="polite">{{ messages.loadingStatus }}</span>
         <span aria-hidden="true" class="approvable-skeleton-bar approvable-skeleton-bar--pill" />
-        <span class="approvable-skeleton-spacer" />
         <span
           aria-hidden="true"
           class="approvable-skeleton-bar approvable-skeleton-bar--soft"
-          style="width:104px;animation-delay:0.2s"
+          style="width:96px;animation-delay:0.15s"
         />
-      </template>
+        <span aria-hidden="true" class="approvable-skeleton-spacer" />
+        <span aria-hidden="true" class="approvable-skeleton-disc" style="animation-delay:0.25s" />
+      </div>
 
-      <template v-else>
-        <approve-status-info
-          v-if="showApprovableStatus"
-          :label="approval.statusName"
-          :value="approval.status"
-        />
+      <approvable-compact
+        v-else
+        :show-approvable-status="showApprovableStatus"
+        :value="value"
+        @expand="setCompact(false)"
+        @isLoading="(value) => (isLoading = value)"
+        @refresh="onRefresh"
+      >
+        <template v-for="slot in Object.keys($slots)" v-slot:[slot]="scoped">
+          <slot v-bind="scoped ?? {}" :name="slot" />
+        </template>
+      </approvable-compact>
+    </template>
 
-        <span class="approvable-updated-at">
-          {{ approval.updatedAt }}
-        </span>
-        <button
-          v-if="approval.id"
-          type="button"
-          class="approvable-history-btn"
-          :title="messages.historyTitle"
-          :aria-label="messages.historyTitle"
-          @click="historyOpen = true"
-        >
-          {{ messages.history }}
-        </button>
-      </template>
-    </div>
+    <template v-else>
+      <div class="approvable-header">
+        <h2 class="approvable-sr-only">{{ title }}</h2>
 
-    <template v-if="isInitialLoad">
-      <span class="approvable-sr-only" aria-live="polite">{{ messages.loadingStatus }}</span>
-      <div v-for="row in SKELETON_ROWS" :key="row.delay" aria-hidden="true" class="approvable-skeleton-row">
-        <span class="approvable-skeleton-disc" :style="{ animationDelay: row.delay }" />
-        <span class="approvable-skeleton-bar" :style="{ width: row.name, animationDelay: row.delay }" />
-        <span class="approvable-skeleton-spacer" />
-        <span
-          class="approvable-skeleton-bar approvable-skeleton-bar--soft"
-          :style="{ width: row.meta, animationDelay: row.metaDelay }"
-        />
-      </div>
-      <div class="approvable-footer" aria-hidden="true">
-        <span class="approvable-skeleton-bar approvable-skeleton-bar--soft" style="display:block;width:132px" />
+        <template v-if="isInitialLoad">
+          <span aria-hidden="true" class="approvable-skeleton-bar approvable-skeleton-bar--pill" />
+          <span class="approvable-skeleton-spacer" />
+          <span
+            aria-hidden="true"
+            class="approvable-skeleton-bar approvable-skeleton-bar--soft"
+            style="width:104px;animation-delay:0.2s"
+          />
+        </template>
+
+        <template v-else>
+          <approve-status-info
+            v-if="showApprovableStatus"
+            :label="approval.statusName"
+            :value="approval.status"
+          />
+
+          <span class="approvable-updated-at">
+            {{ approval.updatedAt }}
+          </span>
+          <!-- Only worth offering when the window is actually hiding something —
+               a short trail shows in full either way. -->
+          <button
+            v-if="stepWindow.isCollapsible"
+            type="button"
+            class="approvable-steps-toggle-btn"
+            :aria-expanded="stepsExpanded"
+            @click="stepsExpanded = !stepsExpanded"
+          >
+            {{ stepsExpanded
+              ? messages.stepsShowLess
+              : formatMessage(messages.stepsShowMore, { count: stepWindow.totalCount }) }}
+          </button>
+
+          <button
+            v-if="isHistoryVisible && approval.id"
+            type="button"
+            class="approvable-history-btn"
+            :title="messages.historyTitle"
+            :aria-label="messages.historyTitle"
+            @click="historyOpen = true"
+          >
+            {{ messages.history }}
+          </button>
+
+          <!-- The way back to the collapsed form: the same chevron the compact
+               row carries, turned over. One control, two directions. -->
+          <button
+            v-if="isCollapsible"
+            type="button"
+            class="approvable-compact-toggle approvable-compact-toggle--expanded"
+            :aria-expanded="true"
+            :aria-label="messages.compactCollapse"
+            :title="messages.compactCollapse"
+            @click="setCompact(true)"
+          >
+            <svg
+              aria-hidden="true"
+              class="approvable-icon"
+              fill="none"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              viewBox="0 0 16 16"
+            >
+              <path d="M4.5 6.4 8 9.9l3.5-3.5" />
+            </svg>
+          </button>
+        </template>
       </div>
-    </template>
 
-    <template v-else>
-      <ol v-if="approval.steps.length" :class="approvableStepsClass">
-        <approvable-step
-          v-for="approvableStep of approval.steps"
-          :key="approvableStep.id"
-          :approvable="approval.approvable"
-          :resource="value"
-          :value="approvableStep"
-          @isLoading="(value) => (isLoading = value)"
-          @refresh="onRefresh"
-        >
-          <template v-for="slot in Object.keys($slots)" v-slot:[slot]="scoped">
-            <slot v-bind="scoped ?? {}" :name="slot" />
-          </template>
-        </approvable-step>
-      </ol>
+      <template v-if="isInitialLoad">
+        <span class="approvable-sr-only" aria-live="polite">{{ messages.loadingStatus }}</span>
+        <div v-for="row in SKELETON_ROWS" :key="row.delay" aria-hidden="true" class="approvable-skeleton-row">
+          <span class="approvable-skeleton-disc" :style="{ animationDelay: row.delay }" />
+          <span class="approvable-skeleton-bar" :style="{ width: row.name, animationDelay: row.delay }" />
+          <span class="approvable-skeleton-spacer" />
+          <span
+            class="approvable-skeleton-bar approvable-skeleton-bar--soft"
+            :style="{ width: row.meta, animationDelay: row.metaDelay }"
+          />
+        </div>
+      </template>
+
+      <template v-else>
+        <ol v-if="stepWindow.steps.length" :class="approvableStepsClass">
+          <approvable-step
+            v-for="approvableStep of stepWindow.steps"
+            :key="approvableStep.id"
+            :approvable="approval.approvable"
+            :resource="value"
+            :value="approvableStep"
+            @isLoading="(value) => (isLoading = value)"
+            @refresh="onRefresh"
+          >
+            <template v-for="slot in Object.keys($slots)" v-slot:[slot]="scoped">
+              <slot v-bind="scoped ?? {}" :name="slot" />
+            </template>
+          </approvable-step>
 
-      <p v-if="progressLabel" class="approvable-footer">{{ progressLabel }}</p>
+        </ol>
+      </template>
     </template>
 
     <Teleport to="body">
@@ -121,9 +189,10 @@
 </template>
 
 <script setup>
-import { ref, computed } from 'vue'
-import { createApprovableViewModel, formatMessage } from '@stsdti/approvable-core'
+import { ref, computed, watch } from 'vue'
+import { createApprovableViewModel, createStepWindow, formatMessage } from '@stsdti/approvable-core'
 import ApprovableAuditTimeline from './ApprovableAuditTimeline.vue'
+import ApprovableCompact from './ApprovableCompact.vue'
 import ApprovableStep from './ApprovableStep.vue'
 import ApproveStatusInfo from './ApproveStatusInfo.vue'
 import { useMessages } from '../../messages.js'
@@ -131,16 +200,37 @@ import { useMessages } from '../../messages.js'
 const props = defineProps({
   value: {},
   showApprovableStatus: { type: Boolean, default: true },
+  /** Whether the History button — and so the audit dialog — is offered. */
+  isHistoryVisible: { type: Boolean, default: true },
   title: { default: 'Approval' },
-  isDirectionRow: { default: false }
+  isDirectionRow: { default: false },
+  /**
+   * How many steps stay on screen above and below the active one, with the
+   * rest folded behind a toggle. `null` shows the whole trail.
+   */
+  visibleStepRange: { type: Number, default: null },
+  /**
+   * Start collapsed: the status, a dot per step, and the active step's controls
+   * on one line. Supports `v-model:compact`, and the panel's own chevron drives
+   * it either way.
+   */
+  compact: { type: Boolean, default: false },
+  /**
+   * Whether the chevron that switches between the two forms is offered at all.
+   * `null` means "whenever the panel was asked for compact" — a caller that
+   * wants the control but the full trail first passes `true` explicitly.
+   */
+  collapsible: { type: Boolean, default: null }
 })
 
-const emits = defineEmits(['refresh', 'isLoading'])
+const emits = defineEmits(['refresh', 'isLoading', 'update:compact'])
 
 const isLoading = ref(false)
 const auditTimeline = ref(null)
 const historyOpen = ref(false)
 const historyCount = ref(null)
+const stepsExpanded = ref(false)
+const isCompact = ref(props.compact)
 
 const messages = useMessages()
 
@@ -153,8 +243,25 @@ const SKELETON_ROWS = [
   { name: '78px', meta: '48px', delay: '0.2s', metaDelay: '0.35s' }
 ]
 
+// The prop leads when the host drives it, and the chevron writes back through
+// `update:compact` — so `v-model:compact` and a plain default both behave the
+// way a caller expects.
+watch(() => props.compact, (value) => (isCompact.value = value))
+
+const setCompact = (value) => {
+  isCompact.value = value
+  emits('update:compact', value)
+}
+
+const isCollapsible = computed(() => props.collapsible ?? props.compact)
+
 const approval = computed(() => createApprovableViewModel(props.value))
 
+const stepWindow = computed(() => createStepWindow(approval.value.steps, {
+  range: props.visibleStepRange,
+  isExpanded: stepsExpanded.value
+}))
+
 /** Names the dialog, and once the history has loaded, counts it. */
 const historyTitle = computed(() => (
   historyCount.value === null
@@ -165,31 +272,16 @@ const historyTitle = computed(() => (
 /** Nothing to veil yet, so the panel shows its own shape instead. */
 const isInitialLoad = computed(() => isLoading.value && !approval.value.steps.length)
 
+const rootClass = computed(() => ({
+  approvable: true,
+  'approvable--compact': isCompact.value
+}))
+
 const approvableStepsClass = computed(() => ({
   'approvable-steps': true,
   'approvable-steps--row': props.isDirectionRow
 }))
 
-/** "Step 2 of 3 — awaiting Priya Raman", with the tail dropped when nothing is pending. */
-const progressLabel = computed(() => {
-  const { activeStepNumber, visibleStepCount, activeApproverName } = approval.value
-
-  if (!activeStepNumber || !visibleStepCount) {
-    return null
-  }
-
-  const progress = formatMessage(messages.stepProgress, {
-    current: activeStepNumber,
-    total: visibleStepCount
-  })
-
-  if (!activeApproverName) {
-    return progress
-  }
-
-  return `${progress} — ${formatMessage(messages.awaitingApprover, { name: activeApproverName })}`
-})
-
 const onRefresh = () => {
   auditTimeline.value?.refresh()
   emits('refresh')

package/src/components/approvable/ApprovableCompact.vue

@@ -0,0 +1,130 @@
+<template>
+  <div class="approvable-compact">
+    <div class="approvable-compact-main">
+      <div class="approvable-compact-line">
+        <approve-status-info
+          v-if="showApprovableStatus"
+          :label="approval.statusName"
+          :value="approval.status"
+        />
+
+        <!-- One dot per visible step, in workflow order: the strip is the only
+             thing the collapsed form keeps of the trail, so it has to carry
+             both how many steps there are and where each one landed. -->
+        <span
+          v-if="compact.dots.length"
+          class="approvable-compact-dots"
+          role="img"
+          :aria-label="stepsLabel"
+        >
+          <span
+            v-for="dot in compact.dots"
+            :key="dot.id"
+            :class="dotClass(dot)"
+            :title="dotTitle(dot)"
+          />
+        </span>
+      </div>
+
+      <p v-if="focus" class="approvable-compact-who">
+        <slot :step="compact.focusStep" name="approvableStepInfo">
+          <span class="approvable-compact-name">{{ focus.approverName }}</span>
+        </slot>
+        <slot :role="focus.approverRole" :step="compact.focusStep" name="approvableStepRole">
+          <template v-if="focus.approverRole">
+            <span aria-hidden="true" class="approvable-compact-sep">·</span>{{ focus.approverRole }}
+          </template>
+        </slot>
+      </p>
+    </div>
+
+    <div class="approvable-compact-side">
+      <!-- Only the step being waited on is actionable; a finished approval
+           collapses to its outcome and nothing to press. -->
+      <approvable-step-actions
+        v-if="compact.hasActiveStep && compact.focusStep"
+        :approvable="approval.approvable"
+        :resource="value"
+        :value="compact.focusStep"
+        @is-loading="(isLoading) => emits('isLoading', isLoading)"
+        @refresh="emits('refresh')"
+      />
+
+      <button
+        type="button"
+        class="approvable-compact-toggle"
+        :aria-expanded="false"
+        :aria-label="messages.compactExpand"
+        :title="messages.compactExpand"
+        @click="emits('expand')"
+      >
+        <svg
+          aria-hidden="true"
+          class="approvable-icon"
+          fill="none"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          viewBox="0 0 16 16"
+        >
+          <path d="M4.5 6.4 8 9.9l3.5-3.5" />
+        </svg>
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import {
+  createApprovableViewModel,
+  createCompactViewModel,
+  formatMessage
+} from '@stsdti/approvable-core'
+import ApprovableStepActions from './ApprovableStepActions.vue'
+import ApproveStatusInfo from './ApproveStatusInfo.vue'
+import { useMessages } from '../../messages.js'
+
+/**
+ * The collapsed form: status pill, a dot per step, who it is waiting on, and
+ * that step's controls — one row, for a header or a table cell where the full
+ * trail does not fit. The caller swaps it for {@link Approvable}'s full list
+ * on `expand`.
+ */
+const props = defineProps({
+  value: {
+    type: Object,
+    required: true
+  },
+  showApprovableStatus: { type: Boolean, default: true }
+})
+
+const emits = defineEmits(['expand', 'isLoading', 'refresh'])
+
+const messages = useMessages()
+
+const approval = computed(() => createApprovableViewModel(props.value))
+
+const compact = computed(() => createCompactViewModel(approval.value.steps))
+
+const focus = computed(() => compact.value.focus)
+
+/** "Step 5 of 9" — the strip's accessible name, and its own tooltip. */
+const stepsLabel = computed(() => formatMessage(messages.stepProgress, {
+  current: compact.value.focusStepNumber ?? 0,
+  total: compact.value.stepCount
+}))
+
+const dotClass = (dot) => ({
+  'approvable-compact-dot': true,
+  [`approvable-compact-dot--${dot.tone}`]: true
+})
+
+/** Hovering a dot names the step it stands for, so the strip is readable. */
+const dotTitle = (dot) => [
+  formatMessage(messages.stepProgress, { current: dot.number, total: compact.value.stepCount }),
+  dot.approverName,
+  dot.statusName
+].filter(Boolean).join(' — ')
+</script>

package/src/components/approvable/ApprovableStep.vue

@@ -36,59 +36,13 @@
           <time v-if="step.performedAt" class="approvable-step-date">{{ step.performedAt }}</time>
         </span>
 
-        <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>
+        <approvable-step-actions
+          :approvable="approvable"
+          :resource="resource"
+          :value="value"
+          @is-loading="(isLoading) => emits('isLoading', isLoading)"
+          @refresh="emits('refresh')"
+        />
       </div>
 
       <p v-if="step.comment.text" class="approvable-step-comment">
@@ -112,13 +66,9 @@ import { computed, ref } from 'vue'
 import {
   approvableStatusTone,
   approvableStepGlyph,
-  createStepViewModel,
-  performStepAction
+  createStepViewModel
 } 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'
+import ApprovableStepActions from './ApprovableStepActions.vue'
 import { useMessages } from '../../messages.js'
 
 const emits = defineEmits(['isLoading', 'refresh'])
@@ -138,7 +88,6 @@ const props = defineProps({
   }
 })
 
-const linkComponent = useLinkComponent()
 const messages = useMessages()
 
 const isCommentExpanded = ref(false)
@@ -197,39 +146,4 @@ const discClass = computed(() => ({
 const commentText = computed(() => (
   isCommentExpanded.value ? step.value.comment.text : step.value.comment.preview
 ))
-
-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>