mgv-backoffice 1.43.2 → 1.43.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mgv-backoffice",
-  "version": "1.43.2",
+  "version": "1.43.3",
   "description": "Shared Vue 3 UI component library",
   "type": "module",
   "main": "./dist/ui-lib.umd.cjs",

package/src/components/BaseDetailList.vue

@@ -1,5 +1,5 @@
 <template>
-  <dl class="grid grid-cols-1 gap-x-6 gap-y-4 text-left" :class="columns === 2 ? 'sm:grid-cols-[repeat(2,minmax(0,1fr))]' : columns === 3 ? 'sm:grid-cols-[repeat(2,minmax(0,1fr))] lg:grid-cols-[repeat(3,minmax(0,1fr))]' : ''">
+  <dl class="grid grid-cols-[minmax(0,1fr)] gap-x-6 gap-y-4 text-left" :class="columns === 2 ? 'sm:grid-cols-[repeat(2,minmax(0,1fr))]' : columns === 3 ? 'sm:grid-cols-[repeat(2,minmax(0,1fr))] lg:grid-cols-[repeat(3,minmax(0,1fr))]' : ''">
     <div v-for="item in items" :key="item.label" class="min-w-0">
       <dt class="text-xs uppercase tracking-wide text-slate-500 dark:text-slate-400">{{ item.label }}</dt>
       <dd class="mt-1 break-words text-sm text-slate-900 dark:text-slate-100" :class="item.mono ? 'font-mono' : ''">

package/src/components/noSharedResponsiveGrid.test.ts

@@ -2,15 +2,19 @@ import { describe, it, expect } from 'vitest'
 import { readFileSync, readdirSync, statSync } from 'node:fs'
 import { join } from 'node:path'
 
-// Consumers import the lib CSS AFTER their own Tailwind utilities. A plain
-// responsive column utility (breakpoint prefix + grid-cols + a number) in a lib
-// source lands in that later stylesheet and overrides the consumer's own
-// larger-breakpoint columns at every width (equal specificity → later rule
-// wins). Lib sources must use the arbitrary-value form instead, e.g.
-// grid-cols-[repeat(2,minmax(0,1fr))] behind the breakpoint prefix.
+// Consumers import the lib CSS AFTER their own Tailwind utilities, so any
+// grid-cols-N utility a lib source ships lands in that later stylesheet and
+// wins every equal-specificity tie against the consumer's own copy:
+//   - a breakpoint-prefixed one overrides the consumer's larger-breakpoint
+//     columns (a 7-column stat grid collapses to 2);
+//   - an unprefixed one overrides ALL of the consumer's responsive columns
+//     (a 3-column grid stacks into 1 at every width).
+// Lib sources must use the arbitrary-value forms instead, e.g.
+// grid-cols-[minmax(0,1fr)] or grid-cols-[repeat(2,minmax(0,1fr))] (behind a
+// breakpoint prefix as needed) — no consumer class collides with those.
 // Test files are excluded from Tailwind's scan (@source not in style.css), so
 // they're skipped here too. No literal class tokens in this file on purpose.
-const PLAIN = new RegExp(String.raw`\b(?:sm|md|lg|xl|2xl):grid-cols-\d+\b`, 'g')
+const PLAIN = new RegExp(String.raw`(?<![\w-])(?:(?:sm|md|lg|xl|2xl):)?grid-cols-\d+\b`, 'g')
 
 function sources(dir: string): string[] {
   return readdirSync(dir).flatMap((f) => {
@@ -21,7 +25,7 @@ function sources(dir: string): string[] {
 }
 
 describe('lib sources', () => {
-  it('use no plain responsive grid-cols-N utilities', () => {
+  it('use no plain grid-cols-N utilities (prefixed or not)', () => {
     const offenders = sources(join(__dirname, '..')).flatMap((p) =>
       [...readFileSync(p, 'utf8').matchAll(PLAIN)].map((m) => `${p}: ${m[0]}`),
     )