kmcom-nuxt-layers 2.2.6 → 2.2.9

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/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.6",
+  "version": "2.2.9",
   "description": "Composable Nuxt 4 layers for building scalable Vue applications",
   "exports": {
     "./layers/core": "./layers/core/nuxt.config.ts",
@@ -33,6 +33,7 @@
     "layers/*/tsconfig.json",
     "layers/*/tailwind.config.*",
     "layers/*/app/**",
+    "layers/*/public/**",
     "layers/*/server/**",
     "docs/"
   ],
@@ -150,8 +151,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 +186,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",