@dillingerstaffing/strand-vue 0.16.0 → 0.17.0

package/src/components/LabShell/LabTaxonomyList.vue

@@ -0,0 +1,8 @@
+<!--! Strand Vue | MIT License | dillingerstaffing.com -->
+<script setup lang="ts">
+import { computed } from 'vue'
+interface Props { className?: string }
+const props = withDefaults(defineProps<Props>(), { className: '' })
+const classes = computed(() => ['strand-ref-taxonomy__list', props.className].filter(Boolean).join(' '))
+</script>
+<template><dl :class="classes" v-bind="$attrs"><slot /></dl></template>

package/src/components/LabShell/LabTaxonomyTitle.vue

@@ -0,0 +1,8 @@
+<!--! Strand Vue | MIT License | dillingerstaffing.com -->
+<script setup lang="ts">
+import { computed } from 'vue'
+interface Props { className?: string }
+const props = withDefaults(defineProps<Props>(), { className: '' })
+const classes = computed(() => ['strand-ref-taxonomy__title', props.className].filter(Boolean).join(' '))
+</script>
+<template><span :class="classes" v-bind="$attrs"><slot /></span></template>

package/src/components/LabShell/index.ts

@@ -0,0 +1,34 @@
+export { default as LabShell } from './LabShell.vue'
+export { default as LabSidebar } from './LabSidebar.vue'
+export { default as LabSidebarHead } from './LabSidebarHead.vue'
+export { default as LabSidebarScroll } from './LabSidebarScroll.vue'
+export { default as LabBrand } from './LabBrand.vue'
+export { default as LabBrandMark } from './LabBrandMark.vue'
+export { default as LabBrandTitle } from './LabBrandTitle.vue'
+export { default as LabBrandSub } from './LabBrandSub.vue'
+export { default as LabSidebarGroup } from './LabSidebarGroup.vue'
+export { default as LabSidebarGroupLabel } from './LabSidebarGroupLabel.vue'
+export { default as LabSidebarGroupList } from './LabSidebarGroupList.vue'
+export { default as LabSidebarGroupLink } from './LabSidebarGroupLink.vue'
+export { default as LabSidebarGroupDot } from './LabSidebarGroupDot.vue'
+export { default as LabMain } from './LabMain.vue'
+export { default as LabHeader } from './LabHeader.vue'
+export { default as LabHeaderTitle } from './LabHeaderTitle.vue'
+export { default as LabHeaderLead } from './LabHeaderLead.vue'
+export { default as LabHeaderMeta } from './LabHeaderMeta.vue'
+export { default as LabHeaderMetaItem } from './LabHeaderMetaItem.vue'
+export { default as LabHeaderMetaLabel } from './LabHeaderMetaLabel.vue'
+export { default as LabHeaderMetaValue } from './LabHeaderMetaValue.vue'
+export { default as LabTaxonomy } from './LabTaxonomy.vue'
+export { default as LabTaxonomyTitle } from './LabTaxonomyTitle.vue'
+export { default as LabTaxonomyList } from './LabTaxonomyList.vue'
+export { default as LabSection } from './LabSection.vue'
+export { default as LabSectionHead } from './LabSectionHead.vue'
+export { default as LabSectionHeadNote } from './LabSectionHeadNote.vue'
+export { default as LabSectionBody } from './LabSectionBody.vue'
+export { default as LabExample } from './LabExample.vue'
+export { default as LabExampleMeta } from './LabExampleMeta.vue'
+export { default as LabExampleLabel } from './LabExampleLabel.vue'
+export { default as LabExampleCode } from './LabExampleCode.vue'
+export { default as LabExampleDemo } from './LabExampleDemo.vue'
+export { default as LabExampleCaption } from './LabExampleCaption.vue'

package/src/components/LabTip/LabTip.test.ts

@@ -0,0 +1,39 @@
+import { describe, it, expect } from 'vitest'
+import { render } from '@testing-library/vue'
+import LabTip from './LabTip.vue'
+import LabTipBubble from './LabTipBubble.vue'
+
+describe('LabTip (Vue)', () => {
+  it('Tip base class', () => {
+    const { container } = render(LabTip, { slots: { default: 'x' } })
+    expect(container.firstElementChild?.className).toContain('strand-ref-tip')
+  })
+
+  it('Tip pinned modifier', () => {
+    const { container } = render(LabTip, {
+      props: { pinned: true },
+      slots: { default: 'x' },
+    })
+    expect(container.firstElementChild?.className).toContain('strand-ref-tip--pinned')
+  })
+
+  it('Bubble default placement top', () => {
+    const { container } = render(LabTipBubble, { slots: { default: 'x' } })
+    expect(container.firstElementChild?.className).toContain('strand-ref-tip__bubble--top')
+  })
+
+  it('Bubble accepts placements', () => {
+    for (const p of ['top', 'bottom', 'left', 'right'] as const) {
+      const { container } = render(LabTipBubble, {
+        props: { placement: p },
+        slots: { default: 'x' },
+      })
+      expect(container.firstElementChild?.className).toContain(`strand-ref-tip__bubble--${p}`)
+    }
+  })
+
+  it('Bubble role=tooltip', () => {
+    const { container } = render(LabTipBubble, { slots: { default: 'x' } })
+    expect(container.firstElementChild?.getAttribute('role')).toBe('tooltip')
+  })
+})

package/src/components/LabTip/LabTip.vue

@@ -0,0 +1,18 @@
+<!--! Strand Vue | MIT License | dillingerstaffing.com -->
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  pinned?: boolean
+  className?: string
+}
+const props = withDefaults(defineProps<Props>(), { pinned: false, className: '' })
+
+const classes = computed(() =>
+  ['strand-ref-tip', props.pinned ? 'strand-ref-tip--pinned' : '', props.className]
+    .filter(Boolean)
+    .join(' '),
+)
+</script>
+
+<template><span :class="classes" v-bind="$attrs"><slot /></span></template>

package/src/components/LabTip/LabTipBubble.vue

@@ -0,0 +1,19 @@
+<!--! Strand Vue | MIT License | dillingerstaffing.com -->
+<script setup lang="ts">
+import { computed } from 'vue'
+
+type Placement = 'top' | 'bottom' | 'left' | 'right'
+interface Props {
+  placement?: Placement
+  className?: string
+}
+const props = withDefaults(defineProps<Props>(), { placement: 'top', className: '' })
+
+const classes = computed(() =>
+  ['strand-ref-tip__bubble', `strand-ref-tip__bubble--${props.placement}`, props.className]
+    .filter(Boolean)
+    .join(' '),
+)
+</script>
+
+<template><span :class="classes" role="tooltip" v-bind="$attrs"><slot /></span></template>

package/src/components/LabTip/index.ts

@@ -0,0 +1,2 @@
+export { default as LabTip } from './LabTip.vue'
+export { default as LabTipBubble } from './LabTipBubble.vue'

package/src/components/LabUtilCell/LabUtilCell.test.ts

@@ -0,0 +1,25 @@
+import { describe, it, expect } from 'vitest'
+import { render } from '@testing-library/vue'
+import LabUtilRow from './LabUtilRow.vue'
+import LabUtilCell from './LabUtilCell.vue'
+import LabUtilCellCode from './LabUtilCellCode.vue'
+import LabUtilCellCaption from './LabUtilCellCaption.vue'
+import LabUtilCellDemo from './LabUtilCellDemo.vue'
+import LabUtilCellBlock from './LabUtilCellBlock.vue'
+
+describe('LabUtilCell family (Vue)', () => {
+  const cases: Array<[any, string]> = [
+    [LabUtilRow, 'strand-ref-util-row'],
+    [LabUtilCell, 'strand-ref-util-cell'],
+    [LabUtilCellCode, 'strand-ref-util-cell__code'],
+    [LabUtilCellCaption, 'strand-ref-util-cell__caption'],
+    [LabUtilCellDemo, 'strand-ref-util-cell__demo'],
+    [LabUtilCellBlock, 'strand-ref-util-cell__block'],
+  ]
+  for (const [C, cls] of cases) {
+    it(`${cls} renders with base class`, () => {
+      const { container } = render(C, { slots: { default: 'x' } })
+      expect(container.firstElementChild?.className).toContain(cls)
+    })
+  }
+})

package/src/components/LabUtilCell/LabUtilCell.vue

@@ -0,0 +1,8 @@
+<!--! Strand Vue | MIT License | dillingerstaffing.com -->
+<script setup lang="ts">
+import { computed } from 'vue'
+interface Props { className?: string }
+const props = withDefaults(defineProps<Props>(), { className: '' })
+const classes = computed(() => ['strand-ref-util-cell', props.className].filter(Boolean).join(' '))
+</script>
+<template><div :class="classes" v-bind="$attrs"><slot /></div></template>

package/src/components/LabUtilCell/LabUtilCellBlock.vue

@@ -0,0 +1,8 @@
+<!--! Strand Vue | MIT License | dillingerstaffing.com -->
+<script setup lang="ts">
+import { computed } from 'vue'
+interface Props { className?: string }
+const props = withDefaults(defineProps<Props>(), { className: '' })
+const classes = computed(() => ['strand-ref-util-cell__block', props.className].filter(Boolean).join(' '))
+</script>
+<template><span :class="classes" v-bind="$attrs"><slot /></span></template>

package/src/components/LabUtilCell/LabUtilCellCaption.vue

@@ -0,0 +1,8 @@
+<!--! Strand Vue | MIT License | dillingerstaffing.com -->
+<script setup lang="ts">
+import { computed } from 'vue'
+interface Props { className?: string }
+const props = withDefaults(defineProps<Props>(), { className: '' })
+const classes = computed(() => ['strand-ref-util-cell__caption', props.className].filter(Boolean).join(' '))
+</script>
+<template><span :class="classes" v-bind="$attrs"><slot /></span></template>

package/src/components/LabUtilCell/LabUtilCellCode.vue

@@ -0,0 +1,8 @@
+<!--! Strand Vue | MIT License | dillingerstaffing.com -->
+<script setup lang="ts">
+import { computed } from 'vue'
+interface Props { className?: string }
+const props = withDefaults(defineProps<Props>(), { className: '' })
+const classes = computed(() => ['strand-ref-util-cell__code', props.className].filter(Boolean).join(' '))
+</script>
+<template><span :class="classes" v-bind="$attrs"><slot /></span></template>

package/src/components/LabUtilCell/LabUtilCellDemo.vue

@@ -0,0 +1,8 @@
+<!--! Strand Vue | MIT License | dillingerstaffing.com -->
+<script setup lang="ts">
+import { computed } from 'vue'
+interface Props { className?: string }
+const props = withDefaults(defineProps<Props>(), { className: '' })
+const classes = computed(() => ['strand-ref-util-cell__demo', props.className].filter(Boolean).join(' '))
+</script>
+<template><div :class="classes" v-bind="$attrs"><slot /></div></template>

package/src/components/LabUtilCell/LabUtilRow.vue

@@ -0,0 +1,8 @@
+<!--! Strand Vue | MIT License | dillingerstaffing.com -->
+<script setup lang="ts">
+import { computed } from 'vue'
+interface Props { className?: string }
+const props = withDefaults(defineProps<Props>(), { className: '' })
+const classes = computed(() => ['strand-ref-util-row', props.className].filter(Boolean).join(' '))
+</script>
+<template><div :class="classes" v-bind="$attrs"><slot /></div></template>

package/src/components/LabUtilCell/index.ts

@@ -0,0 +1,6 @@
+export { default as LabUtilRow } from './LabUtilRow.vue'
+export { default as LabUtilCell } from './LabUtilCell.vue'
+export { default as LabUtilCellCode } from './LabUtilCellCode.vue'
+export { default as LabUtilCellCaption } from './LabUtilCellCaption.vue'
+export { default as LabUtilCellDemo } from './LabUtilCellDemo.vue'
+export { default as LabUtilCellBlock } from './LabUtilCellBlock.vue'

package/src/components/Swatch/Swatch.test.ts

@@ -0,0 +1,29 @@
+import { describe, it, expect } from 'vitest'
+import { render } from '@testing-library/vue'
+import Swatch from './Swatch.vue'
+import SwatchGrid from './SwatchGrid.vue'
+
+describe('Swatch (Vue)', () => {
+  it('SwatchGrid base class', () => {
+    const { container } = render(SwatchGrid, { slots: { default: 'x' } })
+    expect(container.firstElementChild?.className).toContain('strand-swatch-grid')
+  })
+
+  it('Swatch renders name + hex + base class', () => {
+    const { container, getByText } = render(Swatch, {
+      props: { name: 'blue', hex: '#fff', background: '#fff', color: '#000' },
+    })
+    expect(container.firstElementChild?.className).toContain('strand-swatch')
+    expect(getByText('blue')).toBeTruthy()
+    expect(getByText('#fff')).toBeTruthy()
+  })
+
+  it('Swatch applies inline background/color', () => {
+    const { container } = render(Swatch, {
+      props: { name: 'a', hex: '#fff', background: 'rgb(1, 2, 3)', color: 'rgb(255, 255, 255)' },
+    })
+    const el = container.firstElementChild as HTMLElement
+    expect(el.style.background).toContain('rgb(1, 2, 3)')
+    expect(el.style.color).toBe('rgb(255, 255, 255)')
+  })
+})

package/src/components/Swatch/Swatch.vue

@@ -0,0 +1,23 @@
+<!--! Strand Vue | MIT License | dillingerstaffing.com -->
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  name: string
+  hex: string
+  background: string
+  color: string
+  className?: string
+}
+const props = withDefaults(defineProps<Props>(), { className: '' })
+
+const classes = computed(() => ['strand-swatch', props.className].filter(Boolean).join(' '))
+const swatchStyle = computed(() => ({ background: props.background, color: props.color }))
+</script>
+
+<template>
+  <div :class="classes" :style="swatchStyle" v-bind="$attrs">
+    <span class="strand-swatch__name">{{ name }}</span>
+    <span class="strand-swatch__hex">{{ hex }}</span>
+  </div>
+</template>

package/src/components/Swatch/SwatchGrid.vue

@@ -0,0 +1,8 @@
+<!--! Strand Vue | MIT License | dillingerstaffing.com -->
+<script setup lang="ts">
+import { computed } from 'vue'
+interface Props { className?: string }
+const props = withDefaults(defineProps<Props>(), { className: '' })
+const classes = computed(() => ['strand-swatch-grid', props.className].filter(Boolean).join(' '))
+</script>
+<template><div :class="classes" v-bind="$attrs"><slot /></div></template>

package/src/components/Swatch/index.ts

@@ -0,0 +1,2 @@
+export { default as Swatch } from './Swatch.vue'
+export { default as SwatchGrid } from './SwatchGrid.vue'

package/src/components/TokenSpecimen/TokenSpecimen.test.ts

@@ -0,0 +1,41 @@
+import { describe, it, expect } from 'vitest'
+import { render } from '@testing-library/vue'
+import TokenSpecimen from './TokenSpecimen.vue'
+import TokenSpecimenGrid from './TokenSpecimenGrid.vue'
+import TokenSpecimenSpacer from './TokenSpecimenSpacer.vue'
+import TokenSpecimenBox from './TokenSpecimenBox.vue'
+
+describe('TokenSpecimen (Vue)', () => {
+  it('Grid base class', () => {
+    const { container } = render(TokenSpecimenGrid, { slots: { default: 'x' } })
+    expect(container.firstElementChild?.className).toContain('strand-token-specimen-grid')
+  })
+
+  it('Specimen base class', () => {
+    const { container } = render(TokenSpecimen, { slots: { default: 'x' } })
+    expect(container.firstElementChild?.className).toContain('strand-token-specimen')
+  })
+
+  it('Spacer base class + inline width (string)', () => {
+    const { container } = render(TokenSpecimenSpacer, { props: { width: '48px' } })
+    const el = container.firstElementChild as HTMLElement
+    expect(el.className).toContain('strand-token-specimen__spacer')
+    expect(el.style.width).toBe('48px')
+  })
+
+  it('Spacer numeric width converts to px', () => {
+    const { container } = render(TokenSpecimenSpacer, { props: { width: 48 } })
+    const el = container.firstElementChild as HTMLElement
+    expect(el.style.width).toBe('48px')
+  })
+
+  it('Box base class + inline radius + shadow', () => {
+    const { container } = render(TokenSpecimenBox, {
+      props: { radius: '8px', shadow: '0 4px 12px rgba(0,0,0,0.1)' },
+    })
+    const el = container.firstElementChild as HTMLElement
+    expect(el.className).toContain('strand-token-specimen__box')
+    expect(el.style.borderRadius).toBe('8px')
+    expect(el.style.boxShadow).toContain('rgba(0,0,0,0.1)')
+  })
+})

package/src/components/TokenSpecimen/TokenSpecimen.vue

@@ -0,0 +1,8 @@
+<!--! Strand Vue | MIT License | dillingerstaffing.com -->
+<script setup lang="ts">
+import { computed } from 'vue'
+interface Props { className?: string }
+const props = withDefaults(defineProps<Props>(), { className: '' })
+const classes = computed(() => ['strand-token-specimen', props.className].filter(Boolean).join(' '))
+</script>
+<template><div :class="classes" v-bind="$attrs"><slot /></div></template>

package/src/components/TokenSpecimen/TokenSpecimenBox.vue

@@ -0,0 +1,23 @@
+<!--! Strand Vue | MIT License | dillingerstaffing.com -->
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  radius?: string
+  shadow?: string
+  className?: string
+}
+const props = withDefaults(defineProps<Props>(), { className: '' })
+
+const classes = computed(() => ['strand-token-specimen__box', props.className].filter(Boolean).join(' '))
+const boxStyle = computed(() => {
+  const s: Record<string, string> = {}
+  if (props.radius) s.borderRadius = props.radius
+  if (props.shadow) s.boxShadow = props.shadow
+  return s
+})
+</script>
+
+<template>
+  <span :class="classes" :style="boxStyle" v-bind="$attrs" />
+</template>

package/src/components/TokenSpecimen/TokenSpecimenGrid.vue

@@ -0,0 +1,8 @@
+<!--! Strand Vue | MIT License | dillingerstaffing.com -->
+<script setup lang="ts">
+import { computed } from 'vue'
+interface Props { className?: string }
+const props = withDefaults(defineProps<Props>(), { className: '' })
+const classes = computed(() => ['strand-token-specimen-grid', props.className].filter(Boolean).join(' '))
+</script>
+<template><div :class="classes" v-bind="$attrs"><slot /></div></template>

package/src/components/TokenSpecimen/TokenSpecimenSpacer.vue

@@ -0,0 +1,20 @@
+<!--! Strand Vue | MIT License | dillingerstaffing.com -->
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  width?: string | number
+  className?: string
+}
+const props = withDefaults(defineProps<Props>(), { className: '' })
+
+const classes = computed(() => ['strand-token-specimen__spacer', props.className].filter(Boolean).join(' '))
+const barStyle = computed(() => {
+  const w = typeof props.width === 'number' ? props.width + 'px' : props.width
+  return w ? { width: w } : {}
+})
+</script>
+
+<template>
+  <span :class="classes" :style="barStyle" v-bind="$attrs" />
+</template>

package/src/components/TokenSpecimen/index.ts

@@ -0,0 +1,4 @@
+export { default as TokenSpecimen } from './TokenSpecimen.vue'
+export { default as TokenSpecimenGrid } from './TokenSpecimenGrid.vue'
+export { default as TokenSpecimenSpacer } from './TokenSpecimenSpacer.vue'
+export { default as TokenSpecimenBox } from './TokenSpecimenBox.vue'

package/src/components/TypeSpecimen/TypeSpecimen.test.ts

@@ -0,0 +1,17 @@
+import { describe, it, expect } from 'vitest'
+import { render } from '@testing-library/vue'
+import TypeSpecimen from './TypeSpecimen.vue'
+import TypeSpecimenMeta from './TypeSpecimenMeta.vue'
+
+describe('TypeSpecimen (Vue)', () => {
+  it('base class', () => {
+    const { container } = render(TypeSpecimen, { slots: { default: 'x' } })
+    expect(container.firstElementChild?.className).toContain('strand-type-specimen')
+  })
+
+  it('Meta base class + span', () => {
+    const { container } = render(TypeSpecimenMeta, { slots: { default: 'x' } })
+    expect(container.firstElementChild?.tagName).toBe('SPAN')
+    expect(container.firstElementChild?.className).toContain('strand-type-specimen__meta')
+  })
+})

package/src/components/TypeSpecimen/TypeSpecimen.vue

@@ -0,0 +1,8 @@
+<!--! Strand Vue | MIT License | dillingerstaffing.com -->
+<script setup lang="ts">
+import { computed } from 'vue'
+interface Props { className?: string }
+const props = withDefaults(defineProps<Props>(), { className: '' })
+const classes = computed(() => ['strand-type-specimen', props.className].filter(Boolean).join(' '))
+</script>
+<template><div :class="classes" v-bind="$attrs"><slot /></div></template>

package/src/components/TypeSpecimen/TypeSpecimenMeta.vue

@@ -0,0 +1,8 @@
+<!--! Strand Vue | MIT License | dillingerstaffing.com -->
+<script setup lang="ts">
+import { computed } from 'vue'
+interface Props { className?: string }
+const props = withDefaults(defineProps<Props>(), { className: '' })
+const classes = computed(() => ['strand-type-specimen__meta', props.className].filter(Boolean).join(' '))
+</script>
+<template><span :class="classes" v-bind="$attrs"><slot /></span></template>

package/src/components/TypeSpecimen/index.ts

@@ -0,0 +1,2 @@
+export { default as TypeSpecimen } from './TypeSpecimen.vue'
+export { default as TypeSpecimenMeta } from './TypeSpecimenMeta.vue'

package/src/index.ts

@@ -46,3 +46,21 @@ export { default as Progress } from "./components/Progress/Progress.vue";
 export { default as Spinner } from "./components/Spinner/Spinner.vue";
 export { default as Skeleton } from "./components/Skeleton/Skeleton.vue";
 export { default as StarRating } from "./components/StarRating/StarRating.vue";
+
+// Composition helpers
+export { default as CardSection } from "./components/CardSection/CardSection.vue";
+export { default as KvEditorial } from "./components/KvEditorial/KvEditorial.vue";
+
+// Component-reference page chrome (strand-ref-* family)
+export * from "./components/LabShell/index";
+export * from "./components/LabFrame/index";
+export * from "./components/LabGlassStage/index";
+export * from "./components/LabRevealStage/index";
+export * from "./components/LabTip/index";
+export * from "./components/LabUtilCell/index";
+
+// Spec-visualizer primitives
+export * from "./components/Swatch/index";
+export * from "./components/TypeSpecimen/index";
+export * from "./components/TokenSpecimen/index";
+export * from "./components/ContainerScale/index";