kmcom-nuxt-layers 2.2.5 → 2.2.8

package/layers/visual/app/app.config.ts

@@ -1,3 +1,6 @@
+import type { GradientConfig } from './types/gradient'
+import type { AccentSceneConfig } from './types/accent'
+
 export default defineAppConfig({
   uiLayer: {
     gradients: {
@@ -107,8 +110,8 @@ declare module '@nuxt/schema' {
   interface AppConfigInput {
     uiLayer?: {
       name?: string
-      gradients?: Record<string, import('./types/gradient').GradientConfig>
-      accentScenes?: Record<string, import('./types/accent').AccentSceneConfig>
+      gradients?: Record<string, GradientConfig>
+      accentScenes?: Record<string, AccentSceneConfig>
     }
   }
 }

package/layers/visual/app/components/Accent/Blob.vue

@@ -1,27 +1,27 @@
 <script setup lang="ts">
   import type { AccentBlobColor, BlobBlur } from '../../types/accent'
 
-  const props = withDefaults(
-    defineProps<{
-      x: number
-      y: number
-      size?: string
-      blur?: BlobBlur
-      opacity?: number
-      color?: AccentBlobColor
-      shade?: 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 950
-      customColor?: string
-    }>(),
-    {
-      size: '40rem',
-      blur: '3xl',
-      opacity: 25,
-      color: 'primary',
-      shade: 500,
-    }
-  )
+  const {
+    x,
+    y,
+    size = '40rem',
+    blur = '3xl',
+    opacity = 25,
+    color = 'primary',
+    shade = 500,
+    customColor = undefined,
+  } = defineProps<{
+    x: number
+    y: number
+    size?: string
+    blur?: BlobBlur
+    opacity?: number
+    color?: AccentBlobColor
+    shade?: 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 950
+    customColor?: string
+  }>()
 
-  const { style } = useAccentBlob(props)
+  const { style } = useAccentBlob(() => ({ x, y, size, blur, opacity, color, shade, customColor }))
 </script>
 
 <template>

package/layers/visual/app/components/Accent/Scene.vue

@@ -2,8 +2,8 @@
   import type { AccentSceneConfig, BlobConfig } from '../../types/accent'
 
   const {
-    preset,
-    blobs,
+    preset = undefined,
+    blobs = undefined,
     tag = 'div',
   } = defineProps<{
     preset?: string

package/layers/visual/app/components/Base/Modal.vue

@@ -16,8 +16,8 @@
    */
   const {
     open = false,
-    title,
-    description,
+    title = undefined,
+    description = undefined,
     size = 'md',
   } = defineProps<{
     open?: boolean

package/layers/visual/app/components/Gradient/Background.vue

@@ -2,8 +2,8 @@
   import type { GradientConfig } from '../../types/gradient'
 
   const {
-    preset,
-    config,
+    preset = undefined,
+    config = undefined,
     tag = 'div',
   } = defineProps<{
     preset?: string

package/layers/visual/app/components/Gradient/Text.vue

@@ -2,8 +2,8 @@
   import type { GradientConfig } from '../../types/gradient'
 
   const {
-    preset,
-    config,
+    preset = undefined,
+    config = undefined,
     tag = 'span',
   } = defineProps<{
     preset?: string

package/layers/visual/app/components/Media/Picture.vue

@@ -2,6 +2,8 @@
   import { usePicture } from '../../composables/picture'
   import type { PictureProps } from '../../types/media'
 
+  defineOptions({ inheritAttrs: false })
+
   const {
     src,
     alt,
@@ -40,7 +42,7 @@
     :loading
     :fetchpriority
     :decoding
-    :provider="(provider as any)"
+    :provider="provider as any"
     :preset
     :densities
     :class="wrapperClass"

package/layers/visual/app/components/Progress/Bar.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
   const {
     progress = null,
-    color,
-    size,
-    orientation,
-    status,
-    animation,
-    inverted,
+    color = undefined,
+    size = undefined,
+    orientation = undefined,
+    status = undefined,
+    animation = undefined,
+    inverted = undefined,
   } = defineProps<{
     progress?: number | null
     color?: 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'error' | 'neutral'

package/layers/visual/app/components/Tint/Overlay.vue

@@ -1,20 +1,20 @@
 <script setup lang="ts">
-  import type { ColorShade, TintColorSlot, TintLevel } from '../../types/tint'
+  import type { ColorShade } from '../../types/gradient'
+  import type { TintColorSlot, TintLevel } from '../../types/tint'
 
-  const props = withDefaults(
-    defineProps<{
-      color: TintColorSlot
-      level: TintLevel
-      shade?: ColorShade
-      tag?: string
-    }>(),
-    {
-      shade: 500,
-      tag: 'div',
-    }
-  )
+  const {
+    color,
+    level,
+    shade = 500,
+    tag = 'div',
+  } = defineProps<{
+    color: TintColorSlot
+    level: TintLevel
+    shade?: ColorShade
+    tag?: string
+  }>()
 
-  const { style } = useTint(props)
+  const { style } = useTint(() => ({ color, level, shade }))
 </script>
 
 <template>

package/layers/visual/app/composables/accent.ts

@@ -1,4 +1,5 @@
-import type { ComputedRef, CSSProperties } from 'vue'
+import type { ComputedRef, CSSProperties, MaybeRefOrGetter } from 'vue'
+import { toValue } from 'vue'
 
 import type { BlobBlur, BlobConfig } from '../types/accent'
 
@@ -25,22 +26,23 @@ function resolveColor(config: BlobConfig): string {
   return `var(--ui-color-${color}-${shade})`
 }
 
-export function useAccentBlob(config: BlobConfig): {
+export function useAccentBlob(config: MaybeRefOrGetter<BlobConfig>): {
   style: ComputedRef<CSSProperties>
 } {
   const style = computed((): CSSProperties => {
-    const size = config.size ?? '40rem'
-    const opacity = (config.opacity ?? 25) / 100
-    const blurPx = resolveBlurPx(config.blur)
+    const resolved = toValue(config)
+    const size = resolved.size ?? '40rem'
+    const opacity = (resolved.opacity ?? 25) / 100
+    const blurPx = resolveBlurPx(resolved.blur)
 
     return {
       position: 'absolute',
-      left: `${config.x}%`,
-      top: `${config.y}%`,
+      left: `${resolved.x}%`,
+      top: `${resolved.y}%`,
       transform: 'translate(-50%, -50%)',
       width: size,
       height: size,
-      backgroundColor: resolveColor(config),
+      backgroundColor: resolveColor(resolved),
       opacity,
       borderRadius: '9999px',
       filter: blurPx > 0 ? `blur(${blurPx}px)` : undefined,

package/layers/visual/app/composables/gradient.ts

@@ -62,9 +62,8 @@ export function useGradient(
     const presets = (appConfig.uiLayer as Record<string, unknown> | undefined)?.['gradients'] as
       | Record<string, GradientConfig>
       | undefined
-    let resolved: GradientConfig = typeof raw === 'string'
-      ? (presets?.[raw] ?? DEFAULT_CONFIG)
-      : raw
+    let resolved: GradientConfig =
+      typeof raw === 'string' ? (presets?.[raw] ?? DEFAULT_CONFIG) : raw
 
     if (override) {
       resolved = { ...resolved, ...override }

package/layers/visual/app/composables/tint.ts

@@ -1,18 +1,18 @@
-import type { ComputedRef, CSSProperties } from 'vue'
+import type { ComputedRef, CSSProperties, MaybeRefOrGetter } from 'vue'
+import { toValue } from 'vue'
 
 import { TINT_LEVEL_OPACITY, type TintConfig } from '../types/tint'
 
-export function useTint(config: TintConfig): {
+export function useTint(config: MaybeRefOrGetter<TintConfig>): {
   style: ComputedRef<CSSProperties>
 } {
   const style = computed((): CSSProperties => {
-    const { color, shade = 500 } = config
-    let backgroundColor: string
+    const { color, shade = 500, level } = toValue(config)
+    let backgroundColor = `var(--ui-color-${color}-${shade})`
     if (color === 'white') backgroundColor = '#ffffff'
-    else if (color === 'black') backgroundColor = '#000000'
-    else backgroundColor = `var(--ui-color-${color}-${shade})`
+    if (color === 'black') backgroundColor = '#000000'
 
-    const opacity = TINT_LEVEL_OPACITY[config.level] / 100
+    const opacity = TINT_LEVEL_OPACITY[level] / 100
     return { backgroundColor, opacity }
   })
 

package/layers/visual/app/types/index.ts

@@ -0,0 +1,6 @@
+export type * from './accent'
+export type * from './breakpoints'
+export type * from './gradient'
+export type * from './media'
+export type { TintLevel, TintColorSlot, TintConfig } from './tint'
+export { TINT_LEVEL_OPACITY } from './tint'

package/layers/visual/app/types/media.ts

@@ -174,12 +174,14 @@ export type PictureProps = {
   decoding?: 'sync' | 'async' | 'auto'
 }
 
+import type { ComputedRef } from 'vue'
+
 /**
  * Return type for usePicture composable
  */
 export type UsePictureReturn = {
   /** Computed sizes attribute string */
-  sizesString: import('vue').ComputedRef<string>
+  sizesString: ComputedRef<string>
   /** Computed format string */
-  computedFormat: import('vue').ComputedRef<string>
+  computedFormat: ComputedRef<string>
 }

package/layers/visual/app/types/tint.ts

@@ -1,3 +1,5 @@
+import type { ColorShade } from './gradient'
+
 export type TintLevel = 'subtle' | 'light' | 'medium' | 'strong' | 'heavy'
 export type TintColorSlot =
   | 'primary'
@@ -8,7 +10,6 @@ export type TintColorSlot =
   | 'error'
   | 'white'
   | 'black'
-export type ColorShade = 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 950
 
 export const TINT_LEVEL_OPACITY: Record<TintLevel, number> = {
   subtle: 5,

package/layers/visual/package.json

@@ -2,5 +2,8 @@
   "name": "kmcom-layer-visual",
   "version": "0.0.1",
   "type": "module",
-  "main": "./nuxt.config.ts"
+  "main": "./nuxt.config.ts",
+  "scripts": {
+    "lint": "eslint ."
+  }
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "kmcom-nuxt-layers",
   "private": false,
-  "version": "2.2.5",
+  "version": "2.2.8",
   "description": "Composable Nuxt 4 layers for building scalable Vue applications",
   "exports": {
     "./layers/core": "./layers/core/nuxt.config.ts",
@@ -150,8 +150,10 @@
     "@vueuse/core": "^14.3.0",
     "@vueuse/nuxt": "^14.3.0",
     "@webgpu/glslang": "^0.0.15",
+    "@webgpu/types": "^0.1.70",
     "browserslist": "^4.28.2",
     "changesets": "^1.0.2",
+    "csstype": "^3.2.3",
     "cypress": "^15.16.0",
     "depcheck": "^1.4.7",
     "eslint": "^10.4.1",
@@ -183,7 +185,8 @@
     "stylelint-no-unsupported-browser-features": "^8.1.1",
     "stylelint-prettier": "^5.0.3",
     "tailwindcss": "^4.3.0",
-    "turbo": "^2.9.16",
+    "turbo": "^2.9.18",
+    "type-fest": "^5.7.0",
     "typescript": "^6",
     "vite-plugin-checker": "^0.14.1",
     "vitest": "^4.1.8",