@dillingerstaffing/strand-vue 0.4.0

package/src/components/Tag/Tag.vue

@@ -0,0 +1,65 @@
+<!--! Strand Vue | MIT License | dillingerstaffing.com -->
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  /** Visual style variant */
+  variant?: 'solid' | 'outlined'
+  /** Color status */
+  status?: 'default' | 'teal' | 'blue' | 'amber' | 'red'
+  /** Show remove button */
+  removable?: boolean
+  /** Additional CSS class */
+  className?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'solid',
+  status: 'default',
+  removable: false,
+  className: '',
+})
+
+const emit = defineEmits<{
+  remove: []
+}>()
+
+const classes = computed(() =>
+  [
+    'strand-tag',
+    `strand-tag--${props.variant}`,
+    `strand-tag--${props.status}`,
+    props.className,
+  ]
+    .filter(Boolean)
+    .join(' '),
+)
+</script>
+
+<template>
+  <span :class="classes" v-bind="$attrs">
+    <span class="strand-tag__text"><slot /></span>
+    <button
+      v-if="removable"
+      type="button"
+      class="strand-tag__remove"
+      aria-label="Remove"
+      @click="emit('remove')"
+    >
+      <svg
+        width="12"
+        height="12"
+        viewBox="0 0 12 12"
+        fill="none"
+        aria-hidden="true"
+      >
+        <path
+          d="M3 3l6 6M9 3l-6 6"
+          stroke="currentColor"
+          stroke-width="1.5"
+          stroke-linecap="round"
+        />
+      </svg>
+    </button>
+  </span>
+</template>

package/src/components/Tag/index.ts

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

package/src/components/Textarea/Textarea.test.ts

@@ -0,0 +1,107 @@
+/*! Strand Vue | MIT License | dillingerstaffing.com */
+
+import { describe, it, expect } from 'vitest'
+import { render, fireEvent } from '@testing-library/vue'
+import Textarea from './Textarea.vue'
+
+describe('Textarea', () => {
+  it('renders with default props', () => {
+    const { container } = render(Textarea)
+    const wrapper = container.querySelector('.strand-textarea')
+    expect(wrapper).toBeInTheDocument()
+    const textarea = container.querySelector('.strand-textarea__field') as HTMLTextAreaElement
+    expect(textarea).toBeInTheDocument()
+    expect(textarea).not.toBeDisabled()
+  })
+
+  it('applies error class and aria-invalid', () => {
+    const { container } = render(Textarea, {
+      props: { error: true },
+    })
+    const wrapper = container.querySelector('.strand-textarea')
+    expect(wrapper).toHaveClass('strand-textarea--error')
+    const textarea = container.querySelector('.strand-textarea__field')
+    expect(textarea).toHaveAttribute('aria-invalid', 'true')
+  })
+
+  it('does not set aria-invalid when no error', () => {
+    const { container } = render(Textarea)
+    const textarea = container.querySelector('.strand-textarea__field')
+    expect(textarea).not.toHaveAttribute('aria-invalid')
+  })
+
+  it('applies disabled class and attribute', () => {
+    const { container } = render(Textarea, {
+      props: { disabled: true },
+    })
+    const wrapper = container.querySelector('.strand-textarea')
+    expect(wrapper).toHaveClass('strand-textarea--disabled')
+    const textarea = container.querySelector('.strand-textarea__field')
+    expect(textarea).toBeDisabled()
+  })
+
+  it('applies auto-resize class', () => {
+    const { container } = render(Textarea, {
+      props: { autoResize: true },
+    })
+    expect(container.querySelector('.strand-textarea')).toHaveClass('strand-textarea--auto-resize')
+  })
+
+  it('emits update:modelValue on input', async () => {
+    const { container, emitted } = render(Textarea, {
+      props: { modelValue: '' },
+    })
+    const textarea = container.querySelector('.strand-textarea__field') as HTMLTextAreaElement
+    await fireEvent.update(textarea, 'hello world')
+    expect(emitted()['update:modelValue']).toBeTruthy()
+    expect(emitted()['update:modelValue'][0]).toEqual(['hello world'])
+  })
+
+  it('shows character count when showCount and maxLength are set', () => {
+    const { container } = render(Textarea, {
+      props: { showCount: true, maxLength: 100, modelValue: 'hello' },
+    })
+    const count = container.querySelector('.strand-textarea__count')
+    expect(count).toBeInTheDocument()
+    expect(count).toHaveAttribute('aria-live', 'polite')
+    expect(count).toHaveTextContent('5/100')
+  })
+
+  it('does not show count without maxLength', () => {
+    const { container } = render(Textarea, {
+      props: { showCount: true },
+    })
+    expect(container.querySelector('.strand-textarea__count')).not.toBeInTheDocument()
+  })
+
+  it('does not show count without showCount', () => {
+    const { container } = render(Textarea, {
+      props: { maxLength: 100 },
+    })
+    expect(container.querySelector('.strand-textarea__count')).not.toBeInTheDocument()
+  })
+
+  it('shows 0 count for empty value', () => {
+    const { container } = render(Textarea, {
+      props: { showCount: true, maxLength: 50, modelValue: '' },
+    })
+    const count = container.querySelector('.strand-textarea__count')
+    expect(count).toHaveTextContent('0/50')
+  })
+
+  it('sets maxlength attribute on textarea', () => {
+    const { container } = render(Textarea, {
+      props: { maxLength: 200 },
+    })
+    const textarea = container.querySelector('.strand-textarea__field')
+    expect(textarea).toHaveAttribute('maxlength', '200')
+  })
+
+  it('passes modelValue to textarea value', () => {
+    const { container } = render(Textarea, {
+      props: { modelValue: 'test content' },
+    })
+    const textarea = container.querySelector('.strand-textarea__field') as HTMLTextAreaElement
+    expect(textarea.value).toBe('test content')
+  })
+})

package/src/components/Textarea/Textarea.vue

@@ -0,0 +1,90 @@
+<!--! Strand Vue | MIT License | dillingerstaffing.com -->
+<script setup lang="ts">
+import { computed, ref, onMounted, watch } from 'vue'
+
+export interface TextareaProps {
+  /** Auto-resize to fit content */
+  autoResize?: boolean
+  /** Show character count (requires maxLength) */
+  showCount?: boolean
+  /** Show error styling */
+  error?: boolean
+  /** Maximum character count */
+  maxLength?: number
+  /** Disabled state */
+  disabled?: boolean
+  /** Controlled value */
+  modelValue?: string
+}
+
+const props = withDefaults(defineProps<TextareaProps>(), {
+  autoResize: false,
+  showCount: false,
+  error: false,
+  disabled: false,
+  modelValue: '',
+})
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string): void
+}>()
+
+const textareaRef = ref<HTMLTextAreaElement | null>(null)
+
+const wrapperClasses = computed(() =>
+  [
+    'strand-textarea',
+    props.error && 'strand-textarea--error',
+    props.disabled && 'strand-textarea--disabled',
+    props.autoResize && 'strand-textarea--auto-resize',
+  ]
+    .filter(Boolean)
+    .join(' '),
+)
+
+const currentLength = computed(() =>
+  typeof props.modelValue === 'string' ? props.modelValue.length : 0,
+)
+
+function resize() {
+  if (props.autoResize && textareaRef.value) {
+    textareaRef.value.style.height = 'auto'
+    textareaRef.value.style.height = `${textareaRef.value.scrollHeight}px`
+  }
+}
+
+function handleInput(event: Event) {
+  const target = event.target as HTMLTextAreaElement
+  emit('update:modelValue', target.value)
+  resize()
+}
+
+watch(() => props.modelValue, () => {
+  resize()
+})
+
+onMounted(() => {
+  resize()
+})
+</script>
+
+<template>
+  <div :class="wrapperClasses">
+    <textarea
+      ref="textareaRef"
+      class="strand-textarea__field"
+      :disabled="disabled"
+      :aria-invalid="error ? 'true' : undefined"
+      :maxlength="maxLength"
+      :value="modelValue"
+      @input="handleInput"
+    />
+    <span
+      v-if="showCount && maxLength != null"
+      class="strand-textarea__count"
+      aria-live="polite"
+    >
+      {{ currentLength }}/{{ maxLength }}
+    </span>
+  </div>
+</template>

package/src/components/Textarea/index.ts

@@ -0,0 +1,2 @@
+/*! Strand Vue | MIT License | dillingerstaffing.com */
+export { default as Textarea } from './Textarea.vue'

package/src/components/Toast/Toast.test.ts

@@ -0,0 +1,204 @@
+/*! Strand Vue | MIT License | dillingerstaffing.com */
+
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import { render, fireEvent } from '@testing-library/vue'
+import { defineComponent, h } from 'vue'
+import Toast from './Toast.vue'
+import ToastProvider from './ToastProvider.vue'
+import { useToast } from './useToast'
+import type { ToastStatus } from './useToast'
+
+/** Helper component that triggers a toast via the composable */
+const TestTrigger = defineComponent({
+  props: {
+    message: { type: String, default: 'Test message' },
+    status: { type: String as () => ToastStatus | undefined, default: undefined },
+    duration: { type: Number, default: undefined },
+  },
+  setup(props) {
+    const { toast } = useToast()
+    return { toast, props }
+  },
+  render() {
+    return h(
+      'button',
+      {
+        type: 'button',
+        onClick: () =>
+          this.toast({
+            message: this.props.message,
+            status: this.props.status,
+            duration: this.props.duration,
+          }),
+      },
+      'Trigger',
+    )
+  },
+})
+
+describe('Toast', () => {
+  // -- Standalone Toast component --
+
+  it('renders message text', () => {
+    const { getByText } = render(Toast, {
+      props: { message: 'Hello' },
+    })
+    expect(getByText('Hello')).toBeTruthy()
+  })
+
+  it('applies status class', () => {
+    const { container } = render(Toast, {
+      props: { message: 'OK', status: 'success' },
+    })
+    expect(container.querySelector('.strand-toast--success')).toBeTruthy()
+  })
+
+  it('has role status', () => {
+    const { getByRole } = render(Toast, {
+      props: { message: 'Info' },
+    })
+    expect(getByRole('status')).toBeTruthy()
+  })
+
+  it('error toast has aria-live assertive', () => {
+    const { getByRole } = render(Toast, {
+      props: { message: 'Fail', status: 'error' },
+    })
+    expect(getByRole('status')).toHaveAttribute('aria-live', 'assertive')
+  })
+
+  it('info toast has aria-live polite', () => {
+    const { getByRole } = render(Toast, {
+      props: { message: 'Note', status: 'info' },
+    })
+    expect(getByRole('status')).toHaveAttribute('aria-live', 'polite')
+  })
+
+  it('warning toast has aria-live assertive', () => {
+    const { getByRole } = render(Toast, {
+      props: { message: 'Warn', status: 'warning' },
+    })
+    expect(getByRole('status')).toHaveAttribute('aria-live', 'assertive')
+  })
+
+  it('emits dismiss when dismiss button is clicked', async () => {
+    const { getByLabelText, emitted } = render(Toast, {
+      props: { message: 'Bye' },
+    })
+    await fireEvent.click(getByLabelText('Dismiss'))
+    expect(emitted().dismiss).toHaveLength(1)
+  })
+
+  it('defaults to info status', () => {
+    const { container } = render(Toast, {
+      props: { message: 'Default' },
+    })
+    expect(container.querySelector('.strand-toast--info')).toBeTruthy()
+  })
+})
+
+describe('ToastProvider + useToast', () => {
+  beforeEach(() => {
+    vi.useFakeTimers()
+  })
+
+  afterEach(() => {
+    vi.useRealTimers()
+  })
+
+  function renderWithProvider(triggerProps: Record<string, unknown> = {}) {
+    return render(ToastProvider, {
+      slots: {
+        default: () =>
+          h(TestTrigger, {
+            message: 'Test message',
+            ...triggerProps,
+          }),
+      },
+    })
+  }
+
+  it('renders children', () => {
+    const { getByText } = render(ToastProvider, {
+      slots: { default: '<p>App content</p>' },
+    })
+    expect(getByText('App content')).toBeTruthy()
+  })
+
+  it('useToast adds a toast that renders message', async () => {
+    const { getByText } = renderWithProvider({ message: 'Hello toast' })
+    await fireEvent.click(getByText('Trigger'))
+    expect(getByText('Hello toast')).toBeTruthy()
+  })
+
+  it('toast has correct status class', async () => {
+    const { getByText, container } = renderWithProvider({
+      message: 'Error occurred',
+      status: 'error',
+    })
+    await fireEvent.click(getByText('Trigger'))
+    expect(container.querySelector('.strand-toast--error')).toBeTruthy()
+  })
+
+  it('toast has role status', async () => {
+    const { getByText, getAllByRole } = renderWithProvider({
+      message: 'Status toast',
+    })
+    await fireEvent.click(getByText('Trigger'))
+    const statuses = getAllByRole('status')
+    expect(statuses.length).toBeGreaterThan(0)
+  })
+
+  it('error toast in provider has aria-live assertive', async () => {
+    const { getByText, container } = renderWithProvider({
+      message: 'Err',
+      status: 'error',
+    })
+    await fireEvent.click(getByText('Trigger'))
+    const toast = container.querySelector('.strand-toast--error')!
+    expect(toast.getAttribute('aria-live')).toBe('assertive')
+  })
+
+  it('toast auto-dismisses after duration', async () => {
+    const { getByText, queryByText } = renderWithProvider({
+      message: 'Vanishing',
+      duration: 3000,
+    })
+    await fireEvent.click(getByText('Trigger'))
+    expect(getByText('Vanishing')).toBeTruthy()
+
+    vi.advanceTimersByTime(3000)
+    await vi.dynamicImportSettled()
+
+    expect(queryByText('Vanishing')).toBeNull()
+  })
+
+  it('dismiss button removes toast', async () => {
+    const { getByText, getByLabelText, queryByText } = renderWithProvider({
+      message: 'Dismissable',
+    })
+    await fireEvent.click(getByText('Trigger'))
+    expect(getByText('Dismissable')).toBeTruthy()
+
+    await fireEvent.click(getByLabelText('Dismiss'))
+    expect(queryByText('Dismissable')).toBeNull()
+  })
+
+  it('defaults to info status when none provided', async () => {
+    const { getByText, container } = renderWithProvider({
+      message: 'Default info',
+    })
+    await fireEvent.click(getByText('Trigger'))
+    expect(container.querySelector('.strand-toast--info')).toBeTruthy()
+  })
+
+  it('multiple toasts stack', async () => {
+    const { getByText, container } = renderWithProvider({
+      message: 'First',
+    })
+    await fireEvent.click(getByText('Trigger'))
+    await fireEvent.click(getByText('Trigger'))
+    const toasts = container.querySelectorAll('.strand-toast')
+    expect(toasts.length).toBe(2)
+  })
+})

package/src/components/Toast/Toast.vue

@@ -0,0 +1,48 @@
+<!--! Strand Vue | MIT License | dillingerstaffing.com -->
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { ToastStatus } from './useToast'
+
+export interface ToastProps {
+  /** Visual status */
+  status?: ToastStatus
+  /** Toast message text */
+  message: string
+}
+
+const props = withDefaults(defineProps<ToastProps>(), {
+  status: 'info',
+})
+
+const emit = defineEmits<{
+  (e: 'dismiss'): void
+}>()
+
+const isUrgent = computed(
+  () => props.status === 'error' || props.status === 'warning',
+)
+
+const classes = computed(() =>
+  ['strand-toast', `strand-toast--${props.status}`]
+    .filter(Boolean)
+    .join(' '),
+)
+</script>
+
+<template>
+  <div
+    :class="classes"
+    role="status"
+    :aria-live="isUrgent ? 'assertive' : 'polite'"
+  >
+    <span class="strand-toast__message">{{ message }}</span>
+    <button
+      type="button"
+      class="strand-toast__dismiss"
+      aria-label="Dismiss"
+      @click="emit('dismiss')"
+    >
+      &#215;
+    </button>
+  </div>
+</template>

package/src/components/Toast/ToastProvider.vue

@@ -0,0 +1,80 @@
+<!--! Strand Vue | MIT License | dillingerstaffing.com -->
+<script setup lang="ts">
+import { ref, provide, onUnmounted } from 'vue'
+import { ToastKey } from './useToast'
+import type { ToastOptions, ToastStatus } from './useToast'
+
+interface ToastEntry {
+  id: number
+  message: string
+  status: ToastStatus
+  duration: number
+}
+
+let toastIdCounter = 0
+
+const toasts = ref<ToastEntry[]>([])
+const timers = new Map<number, ReturnType<typeof setTimeout>>()
+
+function removeToast(id: number) {
+  const timer = timers.get(id)
+  if (timer !== undefined) {
+    clearTimeout(timer)
+    timers.delete(id)
+  }
+  toasts.value = toasts.value.filter((t) => t.id !== id)
+}
+
+function addToast(options: ToastOptions) {
+  const entry: ToastEntry = {
+    id: ++toastIdCounter,
+    message: options.message,
+    status: options.status ?? 'info',
+    duration: options.duration ?? 5000,
+  }
+  toasts.value = [...toasts.value, entry]
+
+  if (entry.duration > 0) {
+    const timer = setTimeout(() => {
+      removeToast(entry.id)
+    }, entry.duration)
+    timers.set(entry.id, timer)
+  }
+}
+
+provide(ToastKey, { toast: addToast })
+
+onUnmounted(() => {
+  for (const timer of timers.values()) {
+    clearTimeout(timer)
+  }
+  timers.clear()
+})
+
+function isUrgent(status: ToastStatus): boolean {
+  return status === 'error' || status === 'warning'
+}
+</script>
+
+<template>
+  <slot />
+  <div v-if="toasts.length > 0" class="strand-toast__container">
+    <div
+      v-for="entry in toasts"
+      :key="entry.id"
+      :class="['strand-toast', `strand-toast--${entry.status}`].join(' ')"
+      role="status"
+      :aria-live="isUrgent(entry.status) ? 'assertive' : 'polite'"
+    >
+      <span class="strand-toast__message">{{ entry.message }}</span>
+      <button
+        type="button"
+        class="strand-toast__dismiss"
+        aria-label="Dismiss"
+        @click="removeToast(entry.id)"
+      >
+        &#215;
+      </button>
+    </div>
+  </div>
+</template>

package/src/components/Toast/index.ts

@@ -0,0 +1,5 @@
+/*! Strand Vue | MIT License | dillingerstaffing.com */
+export { default as Toast } from './Toast.vue'
+export { default as ToastProvider } from './ToastProvider.vue'
+export { useToast } from './useToast'
+export type { ToastOptions, ToastStatus, ToastContextValue } from './useToast'

package/src/components/Toast/useToast.ts

@@ -0,0 +1,26 @@
+/*! Strand Vue | MIT License | dillingerstaffing.com */
+
+import { inject } from 'vue'
+import type { InjectionKey } from 'vue'
+
+export type ToastStatus = 'info' | 'success' | 'warning' | 'error'
+
+export interface ToastOptions {
+  message: string
+  status?: ToastStatus
+  duration?: number
+}
+
+export interface ToastContextValue {
+  toast: (options: ToastOptions) => void
+}
+
+export const ToastKey: InjectionKey<ToastContextValue> = Symbol('StrandToast')
+
+export function useToast(): ToastContextValue {
+  const ctx = inject(ToastKey)
+  if (!ctx) {
+    throw new Error('useToast must be used within a ToastProvider')
+  }
+  return ctx
+}