kmcom-nuxt-layers 6.4.0 → 6.5.0

package/layers/core/app/components/Element.test.ts

@@ -1,90 +0,0 @@
-import { defineComponent, h } from 'vue'
-import { mount } from '@vue/test-utils'
-import { describe, expect, it } from 'vite-plus/test'
-
-import Element from './Element.vue'
-
-// Stands in for a real component (e.g. UBadge) whose own `color` prop is
-// semantic, not a raw CSS value — the same name Element uses for its own
-// raw-CSS text colour passthrough.
-const ColorPropStub = defineComponent({
-  props: { color: { type: String, default: undefined } },
-  setup(props) {
-    return () => h('div', { 'data-received-color': props.color }, 'stub')
-  },
-})
-
-describe('Element', () => {
-  it('renders as a div by default', () => {
-    const wrapper = mount(Element)
-    expect(wrapper.element.tagName).toBe('DIV')
-  })
-
-  it('renders as the tag passed via the as prop', () => {
-    const wrapper = mount(Element, { props: { as: 'section' } })
-    expect(wrapper.element.tagName).toBe('SECTION')
-  })
-
-  it('renders slot content', () => {
-    const wrapper = mount(Element, { slots: { default: 'hello' } })
-    expect(wrapper.text()).toBe('hello')
-  })
-
-  it('merges layout, sizing, and surface styles into one style attribute', () => {
-    const wrapper = mount(Element, {
-      props: {
-        flex: true,
-        w: '80px',
-        bg: 'var(--ui-bg-elevated)',
-      },
-    })
-    const style = wrapper.attributes('style') ?? ''
-    expect(style).toContain('display: flex')
-    expect(style).toContain('width: 80px')
-    expect(style).toContain('background: var(--ui-bg-elevated)')
-  })
-
-  it('applies container-axis grid styles', () => {
-    const wrapper = mount(Element, {
-      props: { grid: true, cols: 12 },
-    })
-    const style = wrapper.attributes('style') ?? ''
-    expect(style).toContain('display: grid')
-    expect(style).toContain('grid-template-columns: repeat(12, 1fr)')
-    expect(style).not.toContain('grid-column')
-    expect(style).not.toContain('grid-row')
-  })
-
-  it('gives hidden priority over grid so display: none is not overwritten', () => {
-    const wrapper = mount(Element, {
-      props: { grid: true, hidden: true },
-    })
-    const style = wrapper.attributes('style') ?? ''
-    expect(style).toContain('display: none')
-    expect(style).not.toContain('display: grid')
-  })
-
-  it('reaches margin and padding through useLayoutAttrs', () => {
-    const wrapper = mount(Element, {
-      props: { m: 'md', p: 'lg' },
-    })
-    const style = wrapper.attributes('style') ?? ''
-    expect(style).toContain('margin: var(--space-md)')
-    expect(style).toContain('padding: var(--space-lg)')
-  })
-
-  it('passes componentProps to the resolved component, past a colliding prop name', () => {
-    const wrapper = mount(Element, {
-      props: {
-        as: ColorPropStub,
-        color: 'crimson',
-        componentProps: { color: 'error' },
-      },
-    })
-    // Element's own `color` still resolves to raw CSS text colour...
-    expect(wrapper.attributes('style') ?? '').toContain('color: crimson')
-    // ...while the stub's semantic `color` prop comes from componentProps, not
-    // from Element's own `color`.
-    expect(wrapper.attributes('data-received-color')).toBe('error')
-  })
-})

package/layers/core/app/components/ElementTw.test.ts

@@ -1,64 +0,0 @@
-import { defineComponent, h } from 'vue'
-import { mount } from '@vue/test-utils'
-import { describe, expect, it } from 'vite-plus/test'
-
-import ElementTw from './ElementTw.vue'
-
-const ColorPropStub = defineComponent({
-  props: { color: { type: String, default: undefined } },
-  setup(props) {
-    return () => h('div', { 'data-received-color': props.color }, 'stub')
-  },
-})
-
-describe('ElementTw', () => {
-  it('renders as a div by default', () => {
-    const wrapper = mount(ElementTw)
-    expect(wrapper.element.tagName).toBe('DIV')
-  })
-
-  it('renders as the tag passed via the as prop', () => {
-    const wrapper = mount(ElementTw, { props: { as: 'section' } })
-    expect(wrapper.element.tagName).toBe('SECTION')
-  })
-
-  it('renders slot content', () => {
-    const wrapper = mount(ElementTw, { slots: { default: 'hello' } })
-    expect(wrapper.text()).toBe('hello')
-  })
-
-  it('emits merged layout, sizing, and surface styles as tailwind arbitrary-property classes', () => {
-    const wrapper = mount(ElementTw, {
-      props: {
-        flex: true,
-        w: '80px',
-        bg: 'var(--ui-bg-elevated)',
-      },
-    })
-    const classes = wrapper.classes()
-    expect(classes).toContain('[display:flex]')
-    expect(classes).toContain('[width:80px]')
-    expect(classes).toContain('[background:var(--ui-bg-elevated)]')
-  })
-
-  it('gives hidden priority over grid so display:none is not overwritten', () => {
-    const wrapper = mount(ElementTw, {
-      props: { grid: true, hidden: true },
-    })
-    const classes = wrapper.classes()
-    expect(classes).toContain('[display:none]')
-    expect(classes).not.toContain('[display:grid]')
-  })
-
-  it('passes componentProps to the resolved component, past a colliding prop name', () => {
-    const wrapper = mount(ElementTw, {
-      props: {
-        as: ColorPropStub,
-        color: 'crimson',
-        componentProps: { color: 'error' },
-      },
-    })
-    expect(wrapper.classes()).toContain('[color:crimson]')
-    expect(wrapper.attributes('data-received-color')).toBe('error')
-  })
-})

package/layers/core/app/composables/useLayoutAttrs.test.ts

@@ -1,77 +0,0 @@
-import { readFileSync } from 'node:fs'
-
-import { describe, expect, it } from 'vite-plus/test'
-
-import type { Spacing } from '../types/tokens'
-import { useLayoutAttrs } from './useLayoutAttrs'
-
-// spacingVar() builds the custom-property name by string interpolation, so a token
-// with no matching declaration resolves to an undefined var() — silent in CSS.
-describe('useLayoutAttrs spacing tokens', () => {
-  const css = readFileSync(
-    new URL('../assets/css/tokens/spacing-fluid.css', import.meta.url),
-    'utf8'
-  )
-  // Record, not an array, so typecheck fails if the Spacing union gains a member.
-  const tokens: Record<Exclude<Spacing, 'none'>, true> = {
-    xs: true,
-    sm: true,
-    md: true,
-    lg: true,
-    xl: true,
-    '2xl': true,
-    '3xl': true,
-  }
-
-  it('resolves every token to a property spacing-fluid.css declares', () => {
-    for (const token of Object.keys(tokens) as Spacing[]) {
-      const { style } = useLayoutAttrs(() => ({ gap: token }))
-      const name = /^var\((--[\w-]+)\)$/.exec(String(style.value.gap))?.[1]
-      expect(css).toMatch(new RegExp(`^\\s*${name}:`, 'm'))
-    }
-  })
-})
-
-describe('useLayoutAttrs margin support', () => {
-  it('sets margin from a static token', () => {
-    const { style } = useLayoutAttrs(() => ({ m: 'md' }))
-    expect(style.value.margin).toBe('var(--space-md)')
-  })
-
-  it('sets marginInline from px-equivalent mx', () => {
-    const { style } = useLayoutAttrs(() => ({ mx: 'lg' }))
-    expect(style.value.marginInline).toBe('var(--space-lg)')
-  })
-
-  it('sets marginBlock from my', () => {
-    const { style } = useLayoutAttrs(() => ({ my: 'sm' }))
-    expect(style.value.marginBlock).toBe('var(--space-sm)')
-  })
-
-  it('resolves none to 0px for margin', () => {
-    const { style } = useLayoutAttrs(() => ({ m: 'none' }))
-    expect(style.value.margin).toBe('0px')
-  })
-
-  it('omits margin keys entirely when not passed', () => {
-    const { style } = useLayoutAttrs(() => ({ gap: 'md' }))
-    expect(style.value.margin).toBeUndefined()
-    expect(style.value.marginInline).toBeUndefined()
-    expect(style.value.marginBlock).toBeUndefined()
-  })
-
-  it('does not regress existing gap/align/justify/padding behavior', () => {
-    const { style } = useLayoutAttrs(() => ({
-      gap: 'md',
-      align: 'center',
-      justify: 'between',
-      p: 'lg',
-    }))
-    expect(style.value).toEqual({
-      gap: 'var(--space-md)',
-      padding: 'var(--space-lg)',
-      alignItems: 'center',
-      justifyContent: 'space-between',
-    })
-  })
-})

package/layers/core/app/utils/browserInfo.test.ts

@@ -1,81 +0,0 @@
-import { describe, expect, it } from 'vite-plus/test'
-
-import { getBrowserVersionParts, isBrowserAtLeast, parseBrowserInfo } from './browserInfo'
-
-describe('parseBrowserInfo', () => {
-  // In a node vitest environment `import.meta.client` is not defined by Nuxt's
-  // build macros, so it is falsy and the function always takes its SSR/default
-  // branch regardless of the user agent passed in.
-  it('returns the unknown/default shape when import.meta.client is falsy', () => {
-    expect(parseBrowserInfo('Mozilla/5.0 Chrome/120.0.0.0')).toEqual({
-      name: 'unknown',
-      version: '0',
-      engine: 'unknown',
-      os: 'unknown',
-    })
-  })
-
-  it('returns the same default shape with no user agent argument', () => {
-    expect(parseBrowserInfo()).toEqual({
-      name: 'unknown',
-      version: '0',
-      engine: 'unknown',
-      os: 'unknown',
-    })
-  })
-
-  it('returns the same default shape with a null user agent', () => {
-    expect(parseBrowserInfo(null)).toEqual({
-      name: 'unknown',
-      version: '0',
-      engine: 'unknown',
-      os: 'unknown',
-    })
-  })
-})
-
-describe('getBrowserVersionParts', () => {
-  it('parses a major.minor version string', () => {
-    expect(getBrowserVersionParts('120.5')).toEqual({ major: 120, minor: 5 })
-  })
-
-  it('defaults minor to 0 when only a major version is given', () => {
-    expect(getBrowserVersionParts('120')).toEqual({ major: 120, minor: 0 })
-  })
-
-  it('defaults both parts to 0 for a non-numeric version', () => {
-    expect(getBrowserVersionParts('abc')).toEqual({ major: 0, minor: 0 })
-  })
-
-  it('defaults both parts to 0 for an empty string', () => {
-    expect(getBrowserVersionParts('')).toEqual({ major: 0, minor: 0 })
-  })
-
-  it('parses extra version segments, ignoring anything past minor', () => {
-    expect(getBrowserVersionParts('120.5.9.1')).toEqual({ major: 120, minor: 5 })
-  })
-})
-
-describe('isBrowserAtLeast', () => {
-  it('returns false when the minimum version has no major segment', () => {
-    expect(isBrowserAtLeast('120.0', '')).toBe(false)
-  })
-
-  it('returns true when the current major exceeds the required major', () => {
-    expect(isBrowserAtLeast('121.0', '120.5')).toBe(true)
-  })
-
-  it('returns false when the current major is behind the required major', () => {
-    expect(isBrowserAtLeast('119.9', '120.0')).toBe(false)
-  })
-
-  it('compares minor versions when majors are equal', () => {
-    expect(isBrowserAtLeast('120.5', '120.5')).toBe(true)
-    expect(isBrowserAtLeast('120.6', '120.5')).toBe(true)
-    expect(isBrowserAtLeast('120.4', '120.5')).toBe(false)
-  })
-
-  it('treats a missing minimum minor as 0', () => {
-    expect(isBrowserAtLeast('120.0', '120')).toBe(true)
-  })
-})

package/layers/core/app/utils/featureClasses.test.ts

@@ -1,101 +0,0 @@
-import { describe, expect, it } from 'vite-plus/test'
-
-import type { FeatureDetection } from '../types/detection'
-import { getFeatureClassNames } from './featureClasses'
-
-function createFeatures(overrides: Partial<FeatureDetection> = {}): FeatureDetection {
-  return {
-    grid: false,
-    subgrid: false,
-    containerQueries: false,
-    has: false,
-    aspectRatio: false,
-    logicalProperties: false,
-    backdropFilter: false,
-    intersectionObserver: false,
-    resizeObserver: false,
-    serviceWorker: false,
-    webGL: false,
-    darkMode: false,
-    reducedMotion: false,
-    highContrast: false,
-    webp: false,
-    avif: false,
-    ...overrides,
-  }
-}
-
-describe('getFeatureClassNames', () => {
-  it('emits the "no-" variant for every unsupported CSS feature and no extras', () => {
-    expect(getFeatureClassNames(createFeatures())).toEqual([
-      'no-grid',
-      'no-subgrid',
-      'no-container-queries',
-      'no-has',
-      'no-aspect-ratio',
-      'no-backdrop-filter',
-    ])
-  })
-
-  it('emits the "supports-" variant for every supported CSS feature plus all extras', () => {
-    expect(
-      getFeatureClassNames(
-        createFeatures({
-          grid: true,
-          subgrid: true,
-          containerQueries: true,
-          has: true,
-          aspectRatio: true,
-          backdropFilter: true,
-          intersectionObserver: true,
-          resizeObserver: true,
-          serviceWorker: true,
-          webGL: true,
-          webp: true,
-          avif: true,
-        })
-      )
-    ).toEqual([
-      'supports-grid',
-      'supports-subgrid',
-      'supports-container-queries',
-      'supports-has',
-      'supports-aspect-ratio',
-      'supports-backdrop-filter',
-      'has-intersection-observer',
-      'has-resize-observer',
-      'has-service-worker',
-      'has-webgl',
-      'supports-webp',
-      'supports-avif',
-    ])
-  })
-
-  it('only includes extra classes for the features that are truthy', () => {
-    const classes = getFeatureClassNames(createFeatures({ intersectionObserver: true, avif: true }))
-
-    expect(classes).toContain('has-intersection-observer')
-    expect(classes).toContain('supports-avif')
-    expect(classes).not.toContain('has-resize-observer')
-    expect(classes).not.toContain('supports-webp')
-  })
-
-  it('mixes supported and unsupported CSS features independently', () => {
-    const classes = getFeatureClassNames(createFeatures({ grid: true, has: true }))
-
-    expect(classes).toEqual([
-      'supports-grid',
-      'no-subgrid',
-      'no-container-queries',
-      'supports-has',
-      'no-aspect-ratio',
-      'no-backdrop-filter',
-    ])
-  })
-
-  it('ignores keys that are not part of either class map (e.g. darkMode)', () => {
-    const classes = getFeatureClassNames(createFeatures({ darkMode: true, highContrast: true }))
-    expect(classes.join(' ')).not.toContain('dark')
-    expect(classes.join(' ')).not.toContain('contrast')
-  })
-})

package/layers/core/app/utils/loading.test.ts

@@ -1,48 +0,0 @@
-import { describe, expect, it } from 'vite-plus/test'
-
-import { approachProgress, resolveLoadingConfig, trickleProgress } from './loading'
-
-const FRAME = 1 / 60
-
-describe('resolveLoadingConfig', () => {
-  it('fills unset keys with defaults but keeps falsy values that were set', () => {
-    expect(resolveLoadingConfig(undefined)).toMatchObject({ enabled: false, minDuration: 1500 })
-    expect(resolveLoadingConfig({ loading: { minDuration: 0, label: '' } })).toMatchObject({
-      enabled: false,
-      minDuration: 0,
-      label: '',
-    })
-  })
-})
-
-describe('trickleProgress', () => {
-  it('starts at 0, rises with time, and stays below the cap', () => {
-    expect(trickleProgress(0, 1200)).toBe(0)
-    expect(trickleProgress(-500, 1200)).toBe(0)
-    expect(trickleProgress(1200, 1200)).toBeGreaterThan(trickleProgress(600, 1200))
-    expect(trickleProgress(60_000, 1200)).toBeLessThanOrEqual(90)
-  })
-})
-
-describe('approachProgress', () => {
-  it('counts 0 → 100 in small per-frame steps and lands exactly on the target', () => {
-    let current = 0
-    let frames = 0
-    while (current < 100) {
-      const next = approachProgress(current, 100, FRAME)
-      expect(next).toBeGreaterThan(current)
-      expect(Math.floor(next) - Math.floor(current)).toBeLessThanOrEqual(3)
-      current = next
-      frames++
-    }
-    expect(current).toBe(100)
-    // A visible count of at least ~0.7s, not a jump
-    expect(frames).toBeGreaterThan(40)
-  })
-
-  it('never moves backwards or overshoots', () => {
-    expect(approachProgress(60, 40, FRAME)).toBe(60)
-    expect(approachProgress(0, 90, -0.008)).toBe(0)
-    expect(approachProgress(99.9, 100, 1)).toBe(100)
-  })
-})

package/layers/core/app/utils/resolveElementStyle.test.ts

@@ -1,99 +0,0 @@
-import { describe, expect, it } from 'vite-plus/test'
-
-import { resolveElementStyle } from './resolveElementStyle'
-
-describe('resolveElementStyle display mode', () => {
-  it('returns no display when no mode prop is set', () => {
-    expect(resolveElementStyle({}).display).toBeUndefined()
-  })
-
-  it.each([
-    ['block', 'block'],
-    ['flex', 'flex'],
-    ['grid', 'grid'],
-    ['hidden', 'none'],
-  ] as const)('resolves %s to display: %s', (prop, display) => {
-    expect(resolveElementStyle({ [prop]: true }).display).toBe(display)
-  })
-
-  it('prioritizes hidden > grid > flex > block', () => {
-    expect(resolveElementStyle({ hidden: true, grid: true, flex: true, block: true }).display).toBe(
-      'none'
-    )
-    expect(resolveElementStyle({ grid: true, flex: true, block: true }).display).toBe('grid')
-    expect(resolveElementStyle({ flex: true, block: true }).display).toBe('flex')
-  })
-})
-
-describe('resolveElementStyle grid container axis', () => {
-  it('returns no grid-template properties when grid is not set', () => {
-    const style = resolveElementStyle({ cols: 12 })
-    expect(style.gridTemplateColumns).toBeUndefined()
-    expect(style.gridTemplateRows).toBeUndefined()
-  })
-
-  it('converts numeric cols/rows to repeat() tracks when grid is set', () => {
-    const style = resolveElementStyle({ grid: true, cols: 12, rows: 4 })
-    expect(style.gridTemplateColumns).toBe('repeat(12, 1fr)')
-    expect(style.gridTemplateRows).toBe('repeat(4, 1fr)')
-  })
-
-  it('passes a string track through unchanged', () => {
-    expect(resolveElementStyle({ grid: true, cols: '1fr 2fr 1fr' }).gridTemplateColumns).toBe(
-      '1fr 2fr 1fr'
-    )
-  })
-})
-
-describe('resolveElementStyle prop mapping', () => {
-  it('maps sizing, surface and interaction props to their CSS properties 1:1', () => {
-    expect(
-      resolveElementStyle({
-        w: '10px',
-        h: '20px',
-        minW: '1px',
-        maxW: '2px',
-        minH: '3px',
-        maxH: '4px',
-        aspect: '16 / 9',
-        bg: 'red',
-        color: 'blue',
-        border: '1px solid',
-        radius: '4px',
-        shadow: '0 0 1px black',
-        cursor: 'pointer',
-        select: 'none',
-        pointer: 'none',
-      })
-    ).toMatchObject({
-      width: '10px',
-      height: '20px',
-      minWidth: '1px',
-      maxWidth: '2px',
-      minHeight: '3px',
-      maxHeight: '4px',
-      aspectRatio: '16 / 9',
-      background: 'red',
-      color: 'blue',
-      border: '1px solid',
-      borderRadius: '4px',
-      boxShadow: '0 0 1px black',
-      cursor: 'pointer',
-      userSelect: 'none',
-      pointerEvents: 'none',
-    })
-  })
-
-  it('merges layout attrs (gap/align/padding) into the same object', () => {
-    expect(resolveElementStyle({ flex: true, gap: 'md', align: 'center', p: 'sm' })).toMatchObject({
-      display: 'flex',
-      gap: 'var(--space-md)',
-      alignItems: 'center',
-      padding: 'var(--space-sm)',
-    })
-  })
-
-  it('leaves every property undefined when no props are set', () => {
-    expect(Object.values(resolveElementStyle({})).every((v) => v === undefined)).toBe(true)
-  })
-})

package/layers/core/app/utils/scrollGuardClamp.test.ts

@@ -1,36 +0,0 @@
-import { describe, expect, it } from 'vite-plus/test'
-
-import { isOverflowing, shouldExclude } from './scrollGuardClamp'
-
-describe('isOverflowing', () => {
-  it('is true when scrollWidth exceeds the viewport width', () => {
-    expect(isOverflowing(1200, 1024)).toBe(true)
-  })
-
-  it('is false when scrollWidth is within the viewport width', () => {
-    expect(isOverflowing(800, 1024)).toBe(false)
-  })
-
-  it('is false when scrollWidth equals the viewport width', () => {
-    expect(isOverflowing(1024, 1024)).toBe(false)
-  })
-})
-
-describe('shouldExclude', () => {
-  it('is true when any selector matches', () => {
-    const matches = (sel: string) => sel === '.carousel'
-    expect(shouldExclude(matches, ['.overflow-intent', '.carousel'])).toBe(true)
-  })
-
-  it('is false when no selector matches', () => {
-    const matches = () => false
-    expect(shouldExclude(matches, ['.carousel', '.overflow-intent'])).toBe(false)
-  })
-
-  it('swallows an invalid selector and treats it as non-matching', () => {
-    const matches = () => {
-      throw new DOMException('invalid selector')
-    }
-    expect(shouldExclude(matches, ['::not-a-real-selector'])).toBe(false)
-  })
-})

package/layers/core/app/utils/styleToTailwindClasses.test.ts

@@ -1,31 +0,0 @@
-import { describe, expect, it } from 'vite-plus/test'
-
-import { styleToTailwindClasses } from './styleToTailwindClasses'
-
-describe('styleToTailwindClasses', () => {
-  it('converts a camelCase property into a kebab-case arbitrary-property class', () => {
-    expect(styleToTailwindClasses({ background: 'red' })).toEqual(['[background:red]'])
-    expect(styleToTailwindClasses({ gridTemplateColumns: 'repeat(12, 1fr)' })).toEqual([
-      '[grid-template-columns:repeat(12,_1fr)]',
-    ])
-  })
-
-  it('escapes spaces in the value with underscores', () => {
-    expect(styleToTailwindClasses({ boxShadow: '0 1px 2px rgba(0,0,0,.1)' })).toEqual([
-      '[box-shadow:0_1px_2px_rgba(0,0,0,.1)]',
-    ])
-  })
-
-  it('skips undefined, null, and empty-string values', () => {
-    expect(
-      styleToTailwindClasses({ width: undefined, height: null as unknown as undefined, color: '' })
-    ).toEqual([])
-  })
-
-  it('preserves declaration order across multiple properties', () => {
-    expect(styleToTailwindClasses({ display: 'flex', width: '80px' })).toEqual([
-      '[display:flex]',
-      '[width:80px]',
-    ])
-  })
-})