mgv-backoffice 1.43.1 → 1.43.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/ui-lib.css +1 -1
- package/dist/ui-lib.js +1 -1
- package/dist/ui-lib.umd.cjs +1 -1
- package/package.json +1 -1
- package/src/components/BaseDetailList.vue +1 -1
- package/src/components/noSharedResponsiveGrid.test.ts +28 -17
- package/src/style.css +96 -90
package/package.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<dl class="grid grid-cols-
|
|
2
|
+
<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))]' : ''">
|
|
3
3
|
<div v-for="item in items" :key="item.label" class="min-w-0">
|
|
4
4
|
<dt class="text-xs uppercase tracking-wide text-slate-500 dark:text-slate-400">{{ item.label }}</dt>
|
|
5
5
|
<dd class="mt-1 break-words text-sm text-slate-900 dark:text-slate-100" :class="item.mono ? 'font-mono' : ''">
|
|
@@ -1,23 +1,34 @@
|
|
|
1
1
|
import { describe, it, expect } from 'vitest'
|
|
2
|
-
import { readFileSync, readdirSync } from 'node:fs'
|
|
2
|
+
import { readFileSync, readdirSync, statSync } from 'node:fs'
|
|
3
3
|
import { join } from 'node:path'
|
|
4
4
|
|
|
5
|
-
// Consumers import the lib CSS AFTER their own Tailwind utilities
|
|
6
|
-
//
|
|
7
|
-
//
|
|
8
|
-
//
|
|
9
|
-
//
|
|
10
|
-
//
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
5
|
+
// Consumers import the lib CSS AFTER their own Tailwind utilities, so any
|
|
6
|
+
// grid-cols-N utility a lib source ships lands in that later stylesheet and
|
|
7
|
+
// wins every equal-specificity tie against the consumer's own copy:
|
|
8
|
+
// - a breakpoint-prefixed one overrides the consumer's larger-breakpoint
|
|
9
|
+
// columns (a 7-column stat grid collapses to 2);
|
|
10
|
+
// - an unprefixed one overrides ALL of the consumer's responsive columns
|
|
11
|
+
// (a 3-column grid stacks into 1 at every width).
|
|
12
|
+
// Lib sources must use the arbitrary-value forms instead, e.g.
|
|
13
|
+
// grid-cols-[minmax(0,1fr)] or grid-cols-[repeat(2,minmax(0,1fr))] (behind a
|
|
14
|
+
// breakpoint prefix as needed) — no consumer class collides with those.
|
|
15
|
+
// Test files are excluded from Tailwind's scan (@source not in style.css), so
|
|
16
|
+
// they're skipped here too. No literal class tokens in this file on purpose.
|
|
17
|
+
const PLAIN = new RegExp(String.raw`(?<![\w-])(?:(?:sm|md|lg|xl|2xl):)?grid-cols-\d+\b`, 'g')
|
|
18
|
+
|
|
19
|
+
function sources(dir: string): string[] {
|
|
20
|
+
return readdirSync(dir).flatMap((f) => {
|
|
21
|
+
const p = join(dir, f)
|
|
22
|
+
if (statSync(p).isDirectory()) return sources(p)
|
|
23
|
+
return /\.(vue|ts|css)$/.test(f) && !f.endsWith('.test.ts') ? [p] : []
|
|
24
|
+
})
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
describe('lib sources', () => {
|
|
28
|
+
it('use no plain grid-cols-N utilities (prefixed or not)', () => {
|
|
29
|
+
const offenders = sources(join(__dirname, '..')).flatMap((p) =>
|
|
30
|
+
[...readFileSync(p, 'utf8').matchAll(PLAIN)].map((m) => `${p}: ${m[0]}`),
|
|
31
|
+
)
|
|
21
32
|
expect(offenders).toEqual([])
|
|
22
33
|
})
|
|
23
34
|
})
|
package/src/style.css
CHANGED
|
@@ -1,93 +1,99 @@
|
|
|
1
|
-
/* Brand typography, shipped by the library so every consumer renders the same:
|
|
2
|
-
Fira Sans for UI text, Fira Code for numerals/data. External @import (kept
|
|
3
|
-
first — CSS ignores @import after any other rule); consumers should add
|
|
4
|
-
<link rel="preconnect"> hints for fonts.googleapis.com / fonts.gstatic.com
|
|
5
|
-
in their index.html for faster first paint. */
|
|
6
|
-
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600;700&family=Fira+Sans:wght@300;400;500;600;700&display=swap');
|
|
7
|
-
|
|
8
|
-
@import "tailwindcss";
|
|
9
|
-
|
|
10
|
-
/*
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
@
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
/*
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
--dp-
|
|
50
|
-
--dp-
|
|
51
|
-
--dp-
|
|
52
|
-
--dp-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
--dp-
|
|
56
|
-
--dp-
|
|
57
|
-
--dp-
|
|
58
|
-
--dp-
|
|
59
|
-
--dp-
|
|
60
|
-
--dp-
|
|
61
|
-
--dp-
|
|
62
|
-
--dp-
|
|
63
|
-
--dp-
|
|
64
|
-
--dp-
|
|
65
|
-
--dp-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
--dp-
|
|
69
|
-
--dp-
|
|
70
|
-
--dp-
|
|
71
|
-
--dp-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
--dp-
|
|
75
|
-
--dp-
|
|
76
|
-
--dp-
|
|
77
|
-
--dp-
|
|
78
|
-
--dp-
|
|
79
|
-
--dp-
|
|
80
|
-
--dp-
|
|
81
|
-
--dp-
|
|
82
|
-
--dp-
|
|
83
|
-
--dp-
|
|
84
|
-
--dp-
|
|
85
|
-
--dp-
|
|
86
|
-
--dp-
|
|
87
|
-
--dp-
|
|
88
|
-
--dp-
|
|
89
|
-
--dp-
|
|
90
|
-
|
|
1
|
+
/* Brand typography, shipped by the library so every consumer renders the same:
|
|
2
|
+
Fira Sans for UI text, Fira Code for numerals/data. External @import (kept
|
|
3
|
+
first — CSS ignores @import after any other rule); consumers should add
|
|
4
|
+
<link rel="preconnect"> hints for fonts.googleapis.com / fonts.gstatic.com
|
|
5
|
+
in their index.html for faster first paint. */
|
|
6
|
+
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600;700&family=Fira+Sans:wght@300;400;500;600;700&display=swap');
|
|
7
|
+
|
|
8
|
+
@import "tailwindcss";
|
|
9
|
+
|
|
10
|
+
/* Only real component sources may contribute utilities to the shipped CSS.
|
|
11
|
+
Test files mention class names in assertions/comments, and anything Tailwind
|
|
12
|
+
finds there would ship and can override consumer utilities (the lib CSS is
|
|
13
|
+
imported after the consumer's own). */
|
|
14
|
+
@source not "./**/*.test.ts";
|
|
15
|
+
|
|
16
|
+
/* Register the fonts as the Tailwind theme defaults. The compiled stylesheet
|
|
17
|
+
re-declares theme variables in its :root, so in consumers that import this
|
|
18
|
+
file after their own `@import "tailwindcss"` these values win the cascade
|
|
19
|
+
for font-sans/font-mono utilities AND the body rule below. */
|
|
20
|
+
@theme {
|
|
21
|
+
--font-sans: 'Fira Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
|
|
22
|
+
--font-mono: 'Fira Code', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
/* Compile `dark:` variants against the `.dark` class that useTheme()/initTheme()
|
|
26
|
+
toggle on <html> — NOT the OS-level prefers-color-scheme media query
|
|
27
|
+
(Tailwind v4's default). Both consumers (TradeAutomation, WireMate) switch
|
|
28
|
+
themes with the class toggle, so media-gated dark rules leak the dark skin
|
|
29
|
+
into the light theme for users whose OS prefers dark.
|
|
30
|
+
Use a specificity-bearing selector (:is, not :where) so dark: utilities win
|
|
31
|
+
over plain base utilities like bg-slate-50 on a cascade tie. */
|
|
32
|
+
@custom-variant dark (&:is(.dark, .dark *));
|
|
33
|
+
|
|
34
|
+
/* Apply the brand font app-wide. Plain body rule (not preflight-dependent) so
|
|
35
|
+
it also styles consumers whose own Tailwind preflight came earlier. */
|
|
36
|
+
body {
|
|
37
|
+
font-family: var(--font-sans);
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
/* BaseDateTimePicker skin: re-point @vuepic/vue-datepicker's CSS variables at
|
|
41
|
+
the lib palette (emerald accent, slate surfaces — same as BaseInput). The
|
|
42
|
+
picker is third-party markup, so its variables are the only styling hook;
|
|
43
|
+
Tailwind utilities can't reach inside it. `html` prefix out-specifies the
|
|
44
|
+
package's own `.dp--theme-*` blocks regardless of stylesheet order. */
|
|
45
|
+
html .dp--theme-light,
|
|
46
|
+
html .dp--theme-dark {
|
|
47
|
+
--dp-font-family: var(--font-sans);
|
|
48
|
+
--dp-font-size: 0.875rem;
|
|
49
|
+
--dp-border-radius: 0.5rem; /* rounded-lg, like BaseInput */
|
|
50
|
+
--dp-cell-border-radius: 0.25rem;
|
|
51
|
+
--dp-input-padding: 8px 30px 8px 12px;
|
|
52
|
+
--dp-primary-text-color: #fff;
|
|
53
|
+
}
|
|
54
|
+
html .dp--theme-light {
|
|
55
|
+
--dp-background-color: #fff; /* white, like BaseInput */
|
|
56
|
+
--dp-text-color: #0f172a; /* slate-900 */
|
|
57
|
+
--dp-hover-color: #f1f5f9; /* slate-100 */
|
|
58
|
+
--dp-hover-text-color: #0f172a;
|
|
59
|
+
--dp-hover-icon-color: #64748b; /* slate-500 */
|
|
60
|
+
--dp-icon-color: #94a3b8; /* slate-400 */
|
|
61
|
+
--dp-primary-color: #059669; /* emerald-600 */
|
|
62
|
+
--dp-primary-disabled-color: #6ee7b7; /* emerald-300 */
|
|
63
|
+
--dp-secondary-color: #94a3b8;
|
|
64
|
+
--dp-border-color: #cbd5e1; /* slate-300 */
|
|
65
|
+
--dp-menu-border-color: #cbd5e1;
|
|
66
|
+
--dp-border-color-hover: #94a3b8;
|
|
67
|
+
--dp-border-color-focus: #10b981; /* emerald-500 */
|
|
68
|
+
--dp-highlight-color: rgb(16 185 129 / 0.12);
|
|
69
|
+
--dp-success-color: #10b981;
|
|
70
|
+
--dp-danger-color: #ef4444; /* red-500 */
|
|
71
|
+
--dp-marker-color: #ef4444;
|
|
72
|
+
}
|
|
73
|
+
html .dp--theme-dark {
|
|
74
|
+
--dp-background-color: #0f172a; /* slate-900 */
|
|
75
|
+
--dp-text-color: #f1f5f9; /* slate-100 */
|
|
76
|
+
--dp-hover-color: #1e293b; /* slate-800 */
|
|
77
|
+
--dp-hover-text-color: #f1f5f9;
|
|
78
|
+
--dp-hover-icon-color: #cbd5e1; /* slate-300 */
|
|
79
|
+
--dp-icon-color: #64748b; /* slate-500 */
|
|
80
|
+
--dp-primary-color: #059669; /* emerald-600 */
|
|
81
|
+
--dp-primary-disabled-color: #065f46; /* emerald-800 */
|
|
82
|
+
--dp-secondary-color: #64748b;
|
|
83
|
+
--dp-border-color: #475569; /* slate-600 */
|
|
84
|
+
--dp-menu-border-color: #334155; /* slate-700 */
|
|
85
|
+
--dp-border-color-hover: #64748b;
|
|
86
|
+
--dp-border-color-focus: #10b981; /* emerald-500 */
|
|
87
|
+
--dp-highlight-color: rgb(16 185 129 / 0.2);
|
|
88
|
+
--dp-disabled-color: #1e293b;
|
|
89
|
+
--dp-disabled-color-text: #64748b;
|
|
90
|
+
--dp-scroll-bar-background: #0f172a;
|
|
91
|
+
--dp-scroll-bar-color: #334155;
|
|
92
|
+
--dp-success-color: #10b981;
|
|
93
|
+
--dp-danger-color: #ef4444;
|
|
94
|
+
--dp-marker-color: #ef4444;
|
|
95
|
+
--dp-tooltip-color: #1e293b;
|
|
96
|
+
}
|
|
91
97
|
|
|
92
98
|
/* BaseSelect: rounded, themed dropdown panel. Opt-in customizable <select>
|
|
93
99
|
(appearance: base-select, Chromium 135+); other browsers keep the native
|