@dillingerstaffing/strand-vue 0.14.0 → 0.15.0

package/src/components/CodeBlock/CodeBlock.vue

@@ -1,6 +1,6 @@
 <!--! Strand Vue | MIT License | dillingerstaffing.com -->
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, onBeforeUnmount, ref } from 'vue'
 
 interface Props {
   /** The code content to display */
@@ -9,22 +9,95 @@ interface Props {
   language?: string
   /** Additional CSS class */
   className?: string
+  /**
+   * Render the one-click copy-to-clipboard button. Defaults to true so
+   * every CodeBlock is copyable out of the box; pass false to opt out
+   * for blocks that should not advertise a copy affordance.
+   */
+  copyable?: boolean
 }
 
+const COPIED_DURATION_MS = 1500
+
 const props = withDefaults(defineProps<Props>(), {
   className: '',
+  copyable: true,
 })
 
 const classes = computed(() =>
-  ['strand-code-block', props.className]
-    .filter(Boolean)
-    .join(' '),
+  ['strand-code-block', props.className].filter(Boolean).join(' '),
 )
+
+const copied = ref(false)
+let timer: number | null = null
+
+onBeforeUnmount(() => {
+  if (timer !== null) window.clearTimeout(timer)
+})
+
+async function handleCopy() {
+  try {
+    if (navigator.clipboard?.writeText) {
+      await navigator.clipboard.writeText(props.code)
+    } else {
+      const ta = document.createElement('textarea')
+      ta.value = props.code
+      ta.setAttribute('readonly', '')
+      ta.style.position = 'absolute'
+      ta.style.left = '-9999px'
+      document.body.appendChild(ta)
+      ta.select()
+      document.execCommand('copy')
+      document.body.removeChild(ta)
+    }
+    copied.value = true
+    if (timer !== null) window.clearTimeout(timer)
+    timer = window.setTimeout(() => {
+      copied.value = false
+    }, COPIED_DURATION_MS)
+  } catch {
+    // Ignore copy failures.
+  }
+}
 </script>
 
 <template>
-  <div :class="classes" v-bind="$attrs">
+  <div :class="classes" :data-strand-copy="copyable ? '' : undefined" v-bind="$attrs">
     <span v-if="language" class="strand-code-block__label">{{ language }}</span>
     <pre class="strand-code-block__pre"><code>{{ code }}</code></pre>
+    <button
+      v-if="copyable"
+      type="button"
+      :class="['strand-code-block__copy', copied ? 'strand-code-block__copy--copied' : '']"
+      :aria-label="copied ? 'Copied' : 'Copy code to clipboard'"
+      @click="handleCopy"
+    >
+      <svg
+        class="strand-code-block__copy-icon strand-code-block__copy-icon--clipboard"
+        viewBox="0 0 16 16"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="1.75"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        aria-hidden="true"
+        focusable="false"
+      >
+        <path d="M6 3 V2 a1 1 0 0 1 1-1 h2 a1 1 0 0 1 1 1 v1 M5 3 h6 a1 1 0 0 1 1 1 v9 a1 1 0 0 1 -1 1 h-6 a1 1 0 0 1 -1 -1 v-9 a1 1 0 0 1 1 -1 z" />
+      </svg>
+      <svg
+        class="strand-code-block__copy-icon strand-code-block__copy-icon--check"
+        viewBox="0 0 16 16"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="1.75"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        aria-hidden="true"
+        focusable="false"
+      >
+        <path d="M3 8 l3 3 l7 -7" />
+      </svg>
+    </button>
   </div>
 </template>

package/src/components/InstrumentViewport/InstrumentViewport.test.ts

@@ -37,6 +37,25 @@ describe('InstrumentViewport', () => {
     expect(container.firstElementChild?.className).toContain('strand-instrument-viewport--grid')
   })
 
+  // ── Full bleed modifier ──
+
+  it('does not apply full-bleed modifier by default', () => {
+    const { container } = render(InstrumentViewport, { slots: { default: 'Test' } })
+    expect(container.firstElementChild?.className).not.toContain(
+      'strand-instrument-viewport--full-bleed',
+    )
+  })
+
+  it('applies full-bleed modifier when fullBleed prop is true', () => {
+    const { container } = render(InstrumentViewport, {
+      props: { fullBleed: true },
+      slots: { default: 'Test' },
+    })
+    expect(container.firstElementChild?.className).toContain(
+      'strand-instrument-viewport--full-bleed',
+    )
+  })
+
   // ── Custom className ──
 
   it('merges custom className with component classes', () => {

package/src/components/InstrumentViewport/InstrumentViewport.vue

@@ -5,12 +5,17 @@ import { computed } from 'vue'
 interface Props {
   /** Show grid overlay lines */
   grid?: boolean
+  /** Render as page-filling instrument cabinet (DL Part 9.3 full-bleed mode).
+   *  Requires the host page to apply `strand-body--instrument` to <body>
+   *  so the dark surface reaches the screen edge. */
+  fullBleed?: boolean
   /** Additional CSS class */
   className?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
   grid: false,
+  fullBleed: false,
   className: '',
 })
 
@@ -18,6 +23,7 @@ const classes = computed(() =>
   [
     'strand-instrument-viewport',
     props.grid && 'strand-instrument-viewport--grid',
+    props.fullBleed && 'strand-instrument-viewport--full-bleed',
     props.className,
   ]
     .filter(Boolean)