@nexxtmove/ui 1.2.9 → 1.3.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nexxtmove/ui",
   "type": "module",
-  "version": "1.2.9",
+  "version": "1.3.1",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -25,7 +25,8 @@
     "@vueuse/core": "^14.4.0",
     "date-fns": "^4.4.0",
     "date-fns-tz": "^3.2.0",
-    "reka-ui": "^2.10.3"
+    "reka-ui": "^2.10.3",
+    "vite-svg-loader": "^5.1.1"
   },
   "peerDependencies": {
     "tailwindcss": "^4.0.0",
@@ -47,6 +48,8 @@
     "@types/react": "^19.2.18",
     "@types/react-dom": "^19.2.4",
     "@vitejs/plugin-vue": "^6.0.8",
+    "@vitest/browser": "^4.1.11",
+    "@vitest/browser-playwright": "^4.1.11",
     "@vitest/coverage-v8": "^4.1.10",
     "@vue/eslint-config-typescript": "^14.9.0",
     "@vue/test-utils": "^2.4.11",
@@ -60,6 +63,7 @@
     "flag-icons": "^7.5.0",
     "globals": "^17.11.0",
     "jsdom": "^29.1.1",
+    "playwright": "^1.62.1",
     "prettier": "^3.9.6",
     "prettier-plugin-tailwindcss": "^0.8.1",
     "react": "^19.2.8",
@@ -69,7 +73,6 @@
     "typescript-eslint": "^8.67.0",
     "vite": "^8.2.1",
     "vite-plugin-dts": "^5.0.3",
-    "vite-svg-loader": "^5.1.1",
     "vitest": "^4.1.10"
   },
   "engines": {
@@ -81,6 +84,7 @@
     "build": "vite build",
     "format": "prettier --write .",
     "generate:index": "node --experimental-strip-types ./scripts/generate-index.ts",
+    "version": "node --experimental-strip-types ./scripts/changelog.ts && git add CHANGELOG.md",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
     "storybook": "storybook dev -p 6006 --no-open",

package/src/components/Modal/Modal.vue

@@ -54,12 +54,18 @@ const sizeClasses = {
   xl: 'max-w-7xl',
 }
 
-const dialogClass = computed(() => {
-  if (!customWidth) return sizeClasses[size]
-
-  const normalized = /^\d+$/.test(customWidth) ? `${customWidth}px` : customWidth
-  return `max-w-[${normalized}]`
+// A bare number is treated as pixels; anything carrying its own unit (`90vw`,
+// `42rem`) is passed through untouched.
+const customMaxWidth = computed(() => {
+  if (!customWidth) return undefined
+  return /^\d+$/.test(customWidth) ? `${customWidth}px` : customWidth
 })
+
+const dialogClass = computed(() => (customMaxWidth.value ? undefined : sizeClasses[size]))
+
+const dialogStyle = computed(() =>
+  customMaxWidth.value ? { maxWidth: customMaxWidth.value } : undefined,
+)
 </script>
 
 <template>
@@ -89,6 +95,7 @@ const dialogClass = computed(() => {
               'pointer-events-auto relative z-10 flex max-h-[85vh] w-full flex-col overflow-x-auto rounded-3xl bg-white shadow-lg',
               dialogClass,
             ]"
+            :style="dialogStyle"
             :aria-describedby="description ? undefined : 'undefined'"
             @pointer-down-outside="!dismissible && $event.preventDefault()"
             @interact-outside="!dismissible && $event.preventDefault()"

package/src/nuxt.ts

@@ -41,7 +41,19 @@ const module: NuxtModule<ModuleOptions> = defineNuxtModule<ModuleOptions>({
     // Anchored to dist/nuxt.js at runtime; ../src resolves to the shipped source files
     const { resolve } = createResolver(import.meta.url)
 
-    addVitePlugin(svgLoader())
+    // `defaultImport: 'url'` so a plain `import logo from './logo.svg'` in the
+    // consumer's own source yields a URL string, which is what an `<img :src>`
+    // needs. Without it vite-svg-loader defaults to returning a Vue component
+    // and those bindings render as "[object Object]". Consumers that want the
+    // component form ask for it explicitly with `?component`, which is
+    // unaffected by this setting.
+    //
+    // This plugin only ever sees the consumer's source. The library's own SVG
+    // imports — SocialMediaType.vue and Icon/customIcons.ts, which do rely on
+    // the component form — are resolved by this repo's vite.config.ts at build
+    // time and are already compiled into dist/index.js before a consumer sees
+    // them.
+    addVitePlugin(svgLoader({ defaultImport: 'url' }))
 
     nuxt.hook('vite:extendConfig', (config: UserConfig) => {
       config.resolve ??= {}
@@ -61,6 +73,43 @@ const module: NuxtModule<ModuleOptions> = defineNuxtModule<ModuleOptions>({
       })
     }
 
+    // Large assets (video, photography) are emitted to dist/assets/ rather than
+    // base64-inlined, and dist/index.js references them as
+    // `new URL("assets/<file>", import.meta.url)`. Nuxt does not run Vite's
+    // asset-import-meta-url transform over a prebuilt dependency, so that
+    // reference survives verbatim into the client chunk and resolves relative
+    // to it — i.e. to `<buildAssetsDir>/assets/<file>`. Nothing is emitted
+    // there, so without this the assets 404 in both dev and production.
+    //
+    // Serving dist/assets/ at exactly that prefix makes the existing references
+    // resolve. buildAssetsDir is read from the app rather than hardcoded to
+    // '/_nuxt/', since an app may move it.
+    const assetsDir = resolve('./assets')
+
+    if (existsSync(assetsDir)) {
+      const baseURL = `/${[nuxt.options.app.buildAssetsDir, 'assets']
+        .join('/')
+        .replace(/\/+/g, '/')
+        .replace(/^\/|\/$/g, '')}/`
+
+      nuxt.options.nitro.publicAssets ??= []
+      nuxt.options.nitro.publicAssets.push({
+        dir: assetsDir,
+        baseURL,
+        // Content-hashed filenames, so they are safe to cache indefinitely.
+        maxAge: 60 * 60 * 24 * 365,
+      })
+
+      // Dev is served by Vite, not Nitro, and dist/assets sits outside the
+      // app root — without this the same URLs 403 instead of resolving.
+      nuxt.hook('vite:extendConfig', (config: UserConfig) => {
+        config.server ??= {}
+        config.server.fs ??= {}
+        config.server.fs.allow ??= []
+        config.server.fs.allow.push(assetsDir)
+      })
+    }
+
     if (options.addCSS) {
       // Tailwind scans the shipped source for class names only — this does not
       // involve the consumer's type-checker. The .ts files are scanned too