kmcom-nuxt-layers 5.0.8 → 6.0.0

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

@@ -1,33 +0,0 @@
-import { describe, expect, it } from 'vite-plus/test'
-
-import { useElementGrid } from './useElementGrid'
-
-describe('useElementGrid container axis', () => {
-  it('returns no grid-template properties when grid is not set', () => {
-    const result = useElementGrid({ cols: 12 })
-    expect(result.gridTemplateColumns).toBeUndefined()
-    expect(result.gridTemplateRows).toBeUndefined()
-  })
-
-  it('converts a numeric cols to a repeat() track when grid is set', () => {
-    const result = useElementGrid({ grid: true, cols: 12 })
-    expect(result.gridTemplateColumns).toBe('repeat(12, 1fr)')
-  })
-
-  it('converts a numeric rows to a repeat() track when grid is set', () => {
-    const result = useElementGrid({ grid: true, rows: 4 })
-    expect(result.gridTemplateRows).toBe('repeat(4, 1fr)')
-  })
-
-  it('passes a string cols track through unchanged', () => {
-    const result = useElementGrid({ grid: true, cols: '1fr 2fr 1fr' })
-    expect(result.gridTemplateColumns).toBe('1fr 2fr 1fr')
-  })
-
-  // display is intentionally NOT set by useElementGrid — useElementLayout owns
-  // the hidden > grid > flex > block display priority.
-  it('never sets display, even when grid is true', () => {
-    const result = useElementGrid({ grid: true, cols: 12 })
-    expect(result.display).toBeUndefined()
-  })
-})

package/layers/core/app/composables/useElementGrid.ts

@@ -1,29 +0,0 @@
-import type { CSSProperties } from 'vue'
-
-// `| undefined` on each is explicit (not just `?`) so component prop objects
-// — which have it too, under exactOptionalPropertyTypes — are assignable here.
-export type ElementGridProps = {
-  grid?: boolean | undefined
-  cols?: number | string | undefined
-  rows?: number | string | undefined
-}
-
-function track(value: number | string | undefined): string | undefined {
-  return typeof value === 'number' ? `repeat(${value}, 1fr)` : value
-}
-
-// Container axis only ("I am a grid"). Item placement (colStart/colSpan/rowStart/
-// rowSpan) is deliberately out of scope here — that engine (buildGridPlacementStyle,
-// layers/structure/layout) lives in the layout layer, and Element itself lives in
-// core (used across every layer) so it can't depend on layout. Use LayoutGridItem
-// directly for item placement inside a grid built with Element.
-export function useElementGrid(props: ElementGridProps): Partial<CSSProperties> {
-  return {
-    // `display` is intentionally NOT set here — useElementLayout already maps
-    // grid: true -> display: 'grid' and owns the hidden > grid > flex > block priority.
-    ...(props.grid && {
-      gridTemplateColumns: track(props.cols),
-      gridTemplateRows: track(props.rows),
-    }),
-  }
-}

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

@@ -1,27 +0,0 @@
-import { describe, expect, it } from 'vite-plus/test'
-
-import { useElementInteraction } from './useElementInteraction'
-
-describe('useElementInteraction', () => {
-  it('returns all-undefined style when no props are set', () => {
-    expect(useElementInteraction({})).toEqual({
-      cursor: undefined,
-      userSelect: undefined,
-      pointerEvents: undefined,
-    })
-  })
-
-  it('maps every prop to its CSS property 1:1', () => {
-    expect(
-      useElementInteraction({
-        cursor: 'pointer',
-        select: 'none',
-        pointer: 'none',
-      })
-    ).toEqual({
-      cursor: 'pointer',
-      userSelect: 'none',
-      pointerEvents: 'none',
-    })
-  })
-})

package/layers/core/app/composables/useElementInteraction.ts

@@ -1,17 +0,0 @@
-import type { CSSProperties } from 'vue'
-
-// `| undefined` on each is explicit (not just `?`) so component prop objects
-// — which have it too, under exactOptionalPropertyTypes — are assignable here.
-export type ElementInteractionProps = {
-  cursor?: CSSProperties['cursor'] | undefined
-  select?: CSSProperties['userSelect'] | undefined
-  pointer?: CSSProperties['pointerEvents'] | undefined
-}
-
-export function useElementInteraction(props: ElementInteractionProps): Partial<CSSProperties> {
-  return {
-    cursor: props.cursor,
-    userSelect: props.select,
-    pointerEvents: props.pointer,
-  }
-}

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

@@ -1,41 +0,0 @@
-import { describe, expect, it } from 'vite-plus/test'
-
-import { useElementLayout } from './useElementLayout'
-
-describe('useElementLayout', () => {
-  it('returns no display when no mode prop is set', () => {
-    expect(useElementLayout({})).toEqual({ display: undefined })
-  })
-
-  it('resolves block to display: block', () => {
-    expect(useElementLayout({ block: true })).toEqual({ display: 'block' })
-  })
-
-  it('resolves flex to display: flex', () => {
-    expect(useElementLayout({ flex: true })).toEqual({ display: 'flex' })
-  })
-
-  it('resolves grid to display: grid', () => {
-    expect(useElementLayout({ grid: true })).toEqual({ display: 'grid' })
-  })
-
-  it('resolves hidden to display: none', () => {
-    expect(useElementLayout({ hidden: true })).toEqual({ display: 'none' })
-  })
-
-  it('prioritizes hidden over grid, flex, and block when multiple are set', () => {
-    expect(useElementLayout({ hidden: true, grid: true, flex: true, block: true })).toEqual({
-      display: 'none',
-    })
-  })
-
-  it('prioritizes grid over flex and block', () => {
-    expect(useElementLayout({ grid: true, flex: true, block: true })).toEqual({
-      display: 'grid',
-    })
-  })
-
-  it('prioritizes flex over block', () => {
-    expect(useElementLayout({ flex: true, block: true })).toEqual({ display: 'flex' })
-  })
-})

package/layers/core/app/composables/useElementLayout.ts

@@ -1,26 +0,0 @@
-import type { CSSProperties } from 'vue'
-
-// `| undefined` on each is explicit (not just `?`) so component prop objects
-// — which have it too, under exactOptionalPropertyTypes — are assignable here.
-export type ElementLayoutProps = {
-  block?: boolean | undefined
-  flex?: boolean | undefined
-  grid?: boolean | undefined
-  hidden?: boolean | undefined
-}
-
-type Mode = 'hidden' | 'grid' | 'flex' | 'block'
-
-const DISPLAY_FOR: Record<Mode, CSSProperties['display']> = {
-  hidden: 'none',
-  grid: 'grid',
-  flex: 'flex',
-  block: 'block',
-}
-
-export function useElementLayout(props: ElementLayoutProps): Partial<CSSProperties> {
-  const mode = (['hidden', 'grid', 'flex', 'block'] as const).find((m) => props[m])
-  return {
-    display: mode && DISPLAY_FOR[mode],
-  }
-}

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

@@ -1,39 +0,0 @@
-import { describe, expect, it } from 'vite-plus/test'
-
-import { useElementSizing } from './useElementSizing'
-
-describe('useElementSizing', () => {
-  it('returns all-undefined style when no props are set', () => {
-    expect(useElementSizing({})).toEqual({
-      width: undefined,
-      height: undefined,
-      minWidth: undefined,
-      maxWidth: undefined,
-      minHeight: undefined,
-      maxHeight: undefined,
-      aspectRatio: undefined,
-    })
-  })
-
-  it('maps every prop to its CSS property 1:1', () => {
-    expect(
-      useElementSizing({
-        w: '80px',
-        h: '40px',
-        minW: '10rem',
-        maxW: '20rem',
-        minH: '5rem',
-        maxH: '15rem',
-        aspect: '16 / 9',
-      })
-    ).toEqual({
-      width: '80px',
-      height: '40px',
-      minWidth: '10rem',
-      maxWidth: '20rem',
-      minHeight: '5rem',
-      maxHeight: '15rem',
-      aspectRatio: '16 / 9',
-    })
-  })
-})

package/layers/core/app/composables/useElementSizing.ts

@@ -1,25 +0,0 @@
-import type { CSSProperties } from 'vue'
-
-// `| undefined` on each is explicit (not just `?`) so component prop objects
-// — which have it too, under exactOptionalPropertyTypes — are assignable here.
-export type ElementSizingProps = {
-  w?: CSSProperties['width'] | undefined
-  h?: CSSProperties['height'] | undefined
-  minW?: CSSProperties['minWidth'] | undefined
-  maxW?: CSSProperties['maxWidth'] | undefined
-  minH?: CSSProperties['minHeight'] | undefined
-  maxH?: CSSProperties['maxHeight'] | undefined
-  aspect?: CSSProperties['aspectRatio'] | undefined
-}
-
-export function useElementSizing(props: ElementSizingProps): Partial<CSSProperties> {
-  return {
-    width: props.w,
-    height: props.h,
-    minWidth: props.minW,
-    maxWidth: props.maxW,
-    minHeight: props.minH,
-    maxHeight: props.maxH,
-    aspectRatio: props.aspect,
-  }
-}

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

@@ -1,33 +0,0 @@
-import { describe, expect, it } from 'vite-plus/test'
-
-import { useElementSurface } from './useElementSurface'
-
-describe('useElementSurface', () => {
-  it('returns all-undefined style when no props are set', () => {
-    expect(useElementSurface({})).toEqual({
-      background: undefined,
-      color: undefined,
-      border: undefined,
-      borderRadius: undefined,
-      boxShadow: undefined,
-    })
-  })
-
-  it('maps every prop to its CSS property 1:1', () => {
-    expect(
-      useElementSurface({
-        bg: 'var(--ui-bg-elevated)',
-        color: 'var(--ui-text)',
-        border: '1px solid var(--ui-border)',
-        radius: '0.5rem',
-        shadow: '0 4px 12px rgb(0 0 0 / 0.15)',
-      })
-    ).toEqual({
-      background: 'var(--ui-bg-elevated)',
-      color: 'var(--ui-text)',
-      border: '1px solid var(--ui-border)',
-      borderRadius: '0.5rem',
-      boxShadow: '0 4px 12px rgb(0 0 0 / 0.15)',
-    })
-  })
-})

package/layers/core/app/composables/useElementSurface.ts

@@ -1,21 +0,0 @@
-import type { CSSProperties } from 'vue'
-
-// `| undefined` on each is explicit (not just `?`) so component prop objects
-// — which have it too, under exactOptionalPropertyTypes — are assignable here.
-export type ElementSurfaceProps = {
-  bg?: CSSProperties['background'] | undefined
-  color?: CSSProperties['color'] | undefined
-  border?: CSSProperties['border'] | undefined
-  radius?: CSSProperties['borderRadius'] | undefined
-  shadow?: CSSProperties['boxShadow'] | undefined
-}
-
-export function useElementSurface(props: ElementSurfaceProps): Partial<CSSProperties> {
-  return {
-    background: props.bg,
-    color: props.color,
-    border: props.border,
-    borderRadius: props.radius,
-    boxShadow: props.shadow,
-  }
-}

package/layers/design-system/theming/app/composables/useThemePreferences.ts

@@ -1,5 +0,0 @@
-/**
- * @deprecated Use `useTheme()` instead.
- * Kept as a backward-compatible alias.
- */
-export const useThemePreferences = useTheme