spoko-design-system 1.39.3 → 2.0.0
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/.releaserc.json +92 -92
- package/CHANGELOG.md +25 -0
- package/MIGRATION-BREADCRUMBS.md +106 -0
- package/astro.config.mjs +6 -0
- package/eslint.config.js +8 -0
- package/package.json +6 -5
- package/src/components/Breadcrumbs.vue +31 -7
- package/src/pages/components/breadcrumbs.mdx +42 -10
- package/src/pages/components/jumbotron.mdx +3 -9
- package/uno-config/index.ts +37 -54
package/.releaserc.json
CHANGED
|
@@ -1,93 +1,93 @@
|
|
|
1
|
-
{
|
|
2
|
-
"branches": [
|
|
3
|
-
"main",
|
|
4
|
-
{
|
|
5
|
-
"name": "next",
|
|
6
|
-
"prerelease": true
|
|
7
|
-
},
|
|
8
|
-
{
|
|
9
|
-
"name": "beta",
|
|
10
|
-
"prerelease": true
|
|
11
|
-
}
|
|
12
|
-
],
|
|
13
|
-
"plugins": [
|
|
14
|
-
"@semantic-release/commit-analyzer",
|
|
15
|
-
"@semantic-release/release-notes-generator",
|
|
16
|
-
"@semantic-release/changelog",
|
|
17
|
-
[
|
|
18
|
-
"@semantic-release/npm",
|
|
19
|
-
{
|
|
20
|
-
"npmPublish": true,
|
|
21
|
-
"tarballDir": "dist"
|
|
22
|
-
}
|
|
23
|
-
],
|
|
24
|
-
"@semantic-release/github",
|
|
25
|
-
[
|
|
26
|
-
"@semantic-release/git",
|
|
27
|
-
{
|
|
28
|
-
"assets": [
|
|
29
|
-
"package.json",
|
|
30
|
-
"CHANGELOG.md"
|
|
31
|
-
],
|
|
32
|
-
"message": "chore(release): ${nextRelease.version} [skip ci]\n\n${nextRelease.notes}"
|
|
33
|
-
}
|
|
34
|
-
]
|
|
35
|
-
],
|
|
36
|
-
"preset": "conventionalcommits",
|
|
37
|
-
"parserOpts": {
|
|
38
|
-
"noteKeywords": [
|
|
39
|
-
"BREAKING CHANGE",
|
|
40
|
-
"BREAKING CHANGES"
|
|
41
|
-
]
|
|
42
|
-
},
|
|
43
|
-
"writerOpts": {
|
|
44
|
-
"commitsSort": [
|
|
45
|
-
"subject",
|
|
46
|
-
"scope"
|
|
47
|
-
]
|
|
48
|
-
},
|
|
49
|
-
"analyzeCommits": {
|
|
50
|
-
"releaseRules": [
|
|
51
|
-
{
|
|
52
|
-
"
|
|
53
|
-
"release": "
|
|
54
|
-
},
|
|
55
|
-
{
|
|
56
|
-
"type": "
|
|
57
|
-
"release": "
|
|
58
|
-
},
|
|
59
|
-
{
|
|
60
|
-
"type": "
|
|
61
|
-
"release": "patch"
|
|
62
|
-
},
|
|
63
|
-
{
|
|
64
|
-
"type": "
|
|
65
|
-
"release": "patch"
|
|
66
|
-
},
|
|
67
|
-
{
|
|
68
|
-
"type": "
|
|
69
|
-
"release": "patch"
|
|
70
|
-
},
|
|
71
|
-
{
|
|
72
|
-
"type": "
|
|
73
|
-
"release": "patch"
|
|
74
|
-
},
|
|
75
|
-
{
|
|
76
|
-
"type": "
|
|
77
|
-
"release":
|
|
78
|
-
},
|
|
79
|
-
{
|
|
80
|
-
"type": "
|
|
81
|
-
"release": false
|
|
82
|
-
},
|
|
83
|
-
{
|
|
84
|
-
"type": "
|
|
85
|
-
"release": false
|
|
86
|
-
},
|
|
87
|
-
{
|
|
88
|
-
"
|
|
89
|
-
"release":
|
|
90
|
-
}
|
|
91
|
-
]
|
|
92
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"branches": [
|
|
3
|
+
"main",
|
|
4
|
+
{
|
|
5
|
+
"name": "next",
|
|
6
|
+
"prerelease": true
|
|
7
|
+
},
|
|
8
|
+
{
|
|
9
|
+
"name": "beta",
|
|
10
|
+
"prerelease": true
|
|
11
|
+
}
|
|
12
|
+
],
|
|
13
|
+
"plugins": [
|
|
14
|
+
"@semantic-release/commit-analyzer",
|
|
15
|
+
"@semantic-release/release-notes-generator",
|
|
16
|
+
"@semantic-release/changelog",
|
|
17
|
+
[
|
|
18
|
+
"@semantic-release/npm",
|
|
19
|
+
{
|
|
20
|
+
"npmPublish": true,
|
|
21
|
+
"tarballDir": "dist"
|
|
22
|
+
}
|
|
23
|
+
],
|
|
24
|
+
"@semantic-release/github",
|
|
25
|
+
[
|
|
26
|
+
"@semantic-release/git",
|
|
27
|
+
{
|
|
28
|
+
"assets": [
|
|
29
|
+
"package.json",
|
|
30
|
+
"CHANGELOG.md"
|
|
31
|
+
],
|
|
32
|
+
"message": "chore(release): ${nextRelease.version} [skip ci]\n\n${nextRelease.notes}"
|
|
33
|
+
}
|
|
34
|
+
]
|
|
35
|
+
],
|
|
36
|
+
"preset": "conventionalcommits",
|
|
37
|
+
"parserOpts": {
|
|
38
|
+
"noteKeywords": [
|
|
39
|
+
"BREAKING CHANGE",
|
|
40
|
+
"BREAKING CHANGES"
|
|
41
|
+
]
|
|
42
|
+
},
|
|
43
|
+
"writerOpts": {
|
|
44
|
+
"commitsSort": [
|
|
45
|
+
"subject",
|
|
46
|
+
"scope"
|
|
47
|
+
]
|
|
48
|
+
},
|
|
49
|
+
"analyzeCommits": {
|
|
50
|
+
"releaseRules": [
|
|
51
|
+
{
|
|
52
|
+
"breaking": true,
|
|
53
|
+
"release": "major"
|
|
54
|
+
},
|
|
55
|
+
{
|
|
56
|
+
"type": "feat",
|
|
57
|
+
"release": "minor"
|
|
58
|
+
},
|
|
59
|
+
{
|
|
60
|
+
"type": "fix",
|
|
61
|
+
"release": "patch"
|
|
62
|
+
},
|
|
63
|
+
{
|
|
64
|
+
"type": "perf",
|
|
65
|
+
"release": "patch"
|
|
66
|
+
},
|
|
67
|
+
{
|
|
68
|
+
"type": "refactor",
|
|
69
|
+
"release": "patch"
|
|
70
|
+
},
|
|
71
|
+
{
|
|
72
|
+
"type": "style",
|
|
73
|
+
"release": "patch"
|
|
74
|
+
},
|
|
75
|
+
{
|
|
76
|
+
"type": "docs",
|
|
77
|
+
"release": "patch"
|
|
78
|
+
},
|
|
79
|
+
{
|
|
80
|
+
"type": "test",
|
|
81
|
+
"release": false
|
|
82
|
+
},
|
|
83
|
+
{
|
|
84
|
+
"type": "ci",
|
|
85
|
+
"release": false
|
|
86
|
+
},
|
|
87
|
+
{
|
|
88
|
+
"type": "chore",
|
|
89
|
+
"release": false
|
|
90
|
+
}
|
|
91
|
+
]
|
|
92
|
+
}
|
|
93
93
|
}
|
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,28 @@
|
|
|
1
|
+
## [2.0.0](https://github.com/polo-blue/sds/compare/v1.40.0...v2.0.0) (2026-06-25)
|
|
2
|
+
|
|
3
|
+
### ⚠ BREAKING CHANGES
|
|
4
|
+
|
|
5
|
+
* the Breadcrumbs prop `productNumber` is renamed to `suffix`
|
|
6
|
+
and the hard-coded `Polo 6R` link-title prefix is removed (use `titlePrefix`).
|
|
7
|
+
This first shipped in 1.40.0, which a release-config bug mis-versioned as a
|
|
8
|
+
minor; 1.40.0 is deprecated in favour of 2.0.0. See MIGRATION-BREADCRUMBS.md.
|
|
9
|
+
|
|
10
|
+
### Bug Fixes
|
|
11
|
+
|
|
12
|
+
* upgrade to Astro 7 (Vite 8/rolldown) and correct release config ([#472](https://github.com/polo-blue/sds/issues/472)) ([77b6e26](https://github.com/polo-blue/sds/commit/77b6e269573800e7cd376be6f19d95439175f279))
|
|
13
|
+
|
|
14
|
+
## [1.40.0](https://github.com/polo-blue/sds/compare/v1.39.3...v1.40.0) (2026-06-25)
|
|
15
|
+
|
|
16
|
+
### ⚠ BREAKING CHANGES
|
|
17
|
+
|
|
18
|
+
* **Breadcrumbs:** the Breadcrumbs prop `productNumber` is renamed to `suffix`,
|
|
19
|
+
and the hard-coded `Polo 6R` link-title prefix is removed (use `titlePrefix`).
|
|
20
|
+
Consumers must update usages and bump spoko-design-system to ^2.0.0.
|
|
21
|
+
|
|
22
|
+
### Features
|
|
23
|
+
|
|
24
|
+
* **Breadcrumbs:** universal props (suffix/titlePrefix/hideOnMobile) ([#471](https://github.com/polo-blue/sds/issues/471)) ([8a23dac](https://github.com/polo-blue/sds/commit/8a23dacc55cd8e8248c7c3365990cb5c8df509a3))
|
|
25
|
+
|
|
1
26
|
## [1.39.3](https://github.com/polo-blue/sds/compare/v1.39.2...v1.39.3) (2026-06-17)
|
|
2
27
|
|
|
3
28
|
### Bug Fixes
|
|
@@ -0,0 +1,106 @@
|
|
|
1
|
+
# Migracja komponentu `Breadcrumbs` — uniwersalne propsy
|
|
2
|
+
|
|
3
|
+
> **BREAKING CHANGE** → bump major (np. `1.x` → `2.0.0`).
|
|
4
|
+
> Dotyczy konsumentów paczki `spoko-design-system` używających `Breadcrumbs`
|
|
5
|
+
> (m.in. `sale.polo.blue`, `catalog.polo.blue`).
|
|
6
|
+
|
|
7
|
+
## Co się zmieniło
|
|
8
|
+
|
|
9
|
+
Komponent przestał być związany z domeną produktu/marką i używa teraz
|
|
10
|
+
uniwersalnych nazw propsów.
|
|
11
|
+
|
|
12
|
+
| Przed (1.x) | Po (2.0) | Uwagi |
|
|
13
|
+
|-------------|----------|-------|
|
|
14
|
+
| `productNumber` | **`suffix`** | tekst doklejany po ostatnim okruszku (np. numer produktu) |
|
|
15
|
+
| _(zahardkodowany `Polo 6R` w `title`)_ | **`titlePrefix`** | opcjonalny prefiks tytułów linków; domyślnie `''` (brak) |
|
|
16
|
+
| _(zawsze `hidden sm:inline`)_ | **`hideOnMobile`** | `Array<'suffix' \| 'home' \| 'separators' \| 'trail'>`, domyślnie `['suffix']` |
|
|
17
|
+
|
|
18
|
+
### Pełna lista propsów po zmianie
|
|
19
|
+
|
|
20
|
+
| Prop | Typ | Domyślnie |
|
|
21
|
+
|------|-----|-----------|
|
|
22
|
+
| `breadcrumbs` | `Array<{ name: string; path: string }>` | — (wymagane) |
|
|
23
|
+
| `showBack` | `boolean` | `false` |
|
|
24
|
+
| `textBack` | `string` | `'Back'` |
|
|
25
|
+
| `showHome` | `boolean` | `false` |
|
|
26
|
+
| `suffix` | `string` | `undefined` |
|
|
27
|
+
| `titlePrefix` | `string` | `''` |
|
|
28
|
+
| `hideOnMobile` | `Array<'suffix' \| 'home' \| 'separators' \| 'trail'>` | `['suffix']` |
|
|
29
|
+
| `withMicrodata` | `boolean` | `true` |
|
|
30
|
+
|
|
31
|
+
## Jak zaktualizować konsumenta
|
|
32
|
+
|
|
33
|
+
### 1. Zmień nazwę propsa `productNumber` → `suffix`
|
|
34
|
+
|
|
35
|
+
W Vue atrybut był kebab-case (`product-number`), w Astro/JSX camelCase
|
|
36
|
+
(`productNumber`). Znajdź oba warianty:
|
|
37
|
+
|
|
38
|
+
```bash
|
|
39
|
+
# w repo konsumenta
|
|
40
|
+
grep -rEn "product-number|productNumber" src
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
**Przed:**
|
|
44
|
+
```vue
|
|
45
|
+
<Breadcrumbs
|
|
46
|
+
:breadcrumbs="trail"
|
|
47
|
+
product-number="6R0XXXXXX"
|
|
48
|
+
/>
|
|
49
|
+
```
|
|
50
|
+
```astro
|
|
51
|
+
<Breadcrumbs breadcrumbs={trail} productNumber="6R0XXXXXX" client:visible />
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
**Po:**
|
|
55
|
+
```vue
|
|
56
|
+
<Breadcrumbs
|
|
57
|
+
:breadcrumbs="trail"
|
|
58
|
+
suffix="6R0XXXXXX"
|
|
59
|
+
/>
|
|
60
|
+
```
|
|
61
|
+
```astro
|
|
62
|
+
<Breadcrumbs breadcrumbs={trail} suffix="6R0XXXXXX" client:visible />
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
### 2. (Opcjonalnie) Przywróć prefiks marki w tytułach linków
|
|
66
|
+
|
|
67
|
+
Wcześniej tytuły linków (`title="..."`) miały na sztywno prefiks `Polo 6R`.
|
|
68
|
+
Teraz domyślnie go nie ma. Jeśli zależy Ci na tym samym tekście tooltipów,
|
|
69
|
+
podaj `titlePrefix`:
|
|
70
|
+
|
|
71
|
+
```vue
|
|
72
|
+
<Breadcrumbs :breadcrumbs="trail" suffix="6R0XXXXXX" title-prefix="Polo 6R" />
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
### 3. Zachowanie na mobile bez zmian (domyślnie)
|
|
76
|
+
|
|
77
|
+
Domyślnie `hideOnMobile` to `['suffix']` — czyli suffix jest ukrywany poniżej
|
|
78
|
+
breakpointu `sm` (640px) i wraca od `sm` w górę, **dokładnie jak wcześniej**.
|
|
79
|
+
Nic nie trzeba robić, żeby zachować dotychczasowe zachowanie.
|
|
80
|
+
|
|
81
|
+
Jeśli chcesz to zmienić:
|
|
82
|
+
|
|
83
|
+
```vue
|
|
84
|
+
<!-- suffix widoczny też na mobile -->
|
|
85
|
+
<Breadcrumbs :breadcrumbs="trail" suffix="6R0XXXXXX" :hide-on-mobile="[]" />
|
|
86
|
+
|
|
87
|
+
<!-- ukryj na mobile także separatory i ikonę domu -->
|
|
88
|
+
<Breadcrumbs
|
|
89
|
+
:breadcrumbs="trail"
|
|
90
|
+
suffix="6R0XXXXXX"
|
|
91
|
+
show-home
|
|
92
|
+
:hide-on-mobile="['suffix', 'separators', 'home']"
|
|
93
|
+
/>
|
|
94
|
+
|
|
95
|
+
<!-- ukryj cały trail na mobile (zostaje np. tylko przycisk Back) -->
|
|
96
|
+
<Breadcrumbs :breadcrumbs="trail" show-back :hide-on-mobile="['trail']" />
|
|
97
|
+
```
|
|
98
|
+
|
|
99
|
+
Dozwolone wartości: `'suffix'`, `'home'`, `'separators'`, `'trail'`.
|
|
100
|
+
|
|
101
|
+
## Checklista PR w repo konsumenta
|
|
102
|
+
|
|
103
|
+
- [ ] `grep -rEn "product-number|productNumber"` — wszystkie wystąpienia w użyciach `Breadcrumbs` zamienione na `suffix`.
|
|
104
|
+
- [ ] (jeśli potrzebne) dodany `title-prefix` tam, gdzie tooltipy miały prefiks marki.
|
|
105
|
+
- [ ] zweryfikowane zachowanie na mobile (suffix ukryty domyślnie — bez zmian).
|
|
106
|
+
- [ ] bump wersji `spoko-design-system` do `^2.0.0` w `package.json`.
|
package/astro.config.mjs
CHANGED
|
@@ -19,6 +19,12 @@ export default defineConfig({
|
|
|
19
19
|
server: {
|
|
20
20
|
port: 1234
|
|
21
21
|
},
|
|
22
|
+
vite: {
|
|
23
|
+
// Vite 8 changed the default CSS minifier to lightningcss, which is stricter
|
|
24
|
+
// than esbuild and rejects some of our UnoCSS-generated CSS with
|
|
25
|
+
// "Unexpected token Colon". Restore the esbuild CSS minifier we built with.
|
|
26
|
+
build: { cssMinify: 'esbuild' },
|
|
27
|
+
},
|
|
22
28
|
image: {
|
|
23
29
|
service: sharpImageService(),
|
|
24
30
|
domains: ["placehold.co", "api.polo.blue", "polo.blue", "media.istockphoto.com", "freepik.com", "img.freepik.com", "polo6r.pl"],
|
package/eslint.config.js
CHANGED
|
@@ -4,6 +4,7 @@ import typescriptParser from '@typescript-eslint/parser';
|
|
|
4
4
|
import vue from 'eslint-plugin-vue';
|
|
5
5
|
import astro from 'eslint-plugin-astro';
|
|
6
6
|
import globals from 'globals';
|
|
7
|
+
import eslintConfigPrettier from 'eslint-config-prettier';
|
|
7
8
|
|
|
8
9
|
export default [
|
|
9
10
|
js.configs.recommended,
|
|
@@ -57,6 +58,13 @@ export default [
|
|
|
57
58
|
// Astro files
|
|
58
59
|
...astro.configs.recommended,
|
|
59
60
|
|
|
61
|
+
// Disable all ESLint formatting rules that conflict with Prettier.
|
|
62
|
+
// Prettier is the single source of truth for formatting (run via the
|
|
63
|
+
// pre-commit hook), so rules like vue/max-attributes-per-line and
|
|
64
|
+
// vue/html-self-closing must be turned off to avoid fighting it.
|
|
65
|
+
// MUST stay last so it overrides the recommended configs above.
|
|
66
|
+
eslintConfigPrettier,
|
|
67
|
+
|
|
60
68
|
// Global ignores
|
|
61
69
|
{
|
|
62
70
|
ignores: [
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "spoko-design-system",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "2.0.0",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"private": false,
|
|
6
6
|
"main": "./index.ts",
|
|
@@ -65,11 +65,11 @@
|
|
|
65
65
|
"spoko design system"
|
|
66
66
|
],
|
|
67
67
|
"dependencies": {
|
|
68
|
-
"@astrojs/mdx": "^
|
|
69
|
-
"@astrojs/node": "^
|
|
68
|
+
"@astrojs/mdx": "^7.0.0",
|
|
69
|
+
"@astrojs/node": "^11.0.0",
|
|
70
70
|
"@astrojs/sitemap": "^3.7.3",
|
|
71
71
|
"@astrojs/ts-plugin": "^1.10.9",
|
|
72
|
-
"@astrojs/vue": "^
|
|
72
|
+
"@astrojs/vue": "^7.0.0",
|
|
73
73
|
"@docsearch/css": "^4.6.3",
|
|
74
74
|
"@floating-ui/dom": "^1.7.6",
|
|
75
75
|
"@floating-ui/vue": "^2.0.0",
|
|
@@ -140,9 +140,10 @@
|
|
|
140
140
|
"@vitejs/plugin-vue": "^6.0.7",
|
|
141
141
|
"@vue/compiler-sfc": "^3.5.38",
|
|
142
142
|
"@vue/eslint-config-typescript": "^14.8.0",
|
|
143
|
-
"astro": "^
|
|
143
|
+
"astro": "^7.0.2",
|
|
144
144
|
"conventional-changelog-conventionalcommits": "^9.3.1",
|
|
145
145
|
"eslint": "^10.5.0",
|
|
146
|
+
"eslint-config-prettier": "^10.1.8",
|
|
146
147
|
"eslint-plugin-astro": "^1.7.0",
|
|
147
148
|
"eslint-plugin-vue": "^10.9.2",
|
|
148
149
|
"globals": "^17.6.0",
|
|
@@ -6,12 +6,17 @@ export interface Breadcrumb {
|
|
|
6
6
|
path: string;
|
|
7
7
|
}
|
|
8
8
|
|
|
9
|
+
// Parts of the breadcrumb that can be hidden on mobile via `hideOnMobile`.
|
|
10
|
+
export type BreadcrumbPart = 'suffix' | 'home' | 'separators' | 'trail';
|
|
11
|
+
|
|
9
12
|
interface Props {
|
|
10
13
|
showBack?: boolean;
|
|
11
14
|
textBack?: string;
|
|
12
15
|
showHome?: boolean;
|
|
13
16
|
breadcrumbs: Breadcrumb[];
|
|
14
|
-
|
|
17
|
+
suffix?: string;
|
|
18
|
+
titlePrefix?: string;
|
|
19
|
+
hideOnMobile?: BreadcrumbPart[];
|
|
15
20
|
withMicrodata?: boolean;
|
|
16
21
|
}
|
|
17
22
|
|
|
@@ -19,7 +24,10 @@ const props = withDefaults(defineProps<Props>(), {
|
|
|
19
24
|
showBack: false,
|
|
20
25
|
textBack: 'Back',
|
|
21
26
|
showHome: false,
|
|
22
|
-
|
|
27
|
+
suffix: undefined,
|
|
28
|
+
titlePrefix: '',
|
|
29
|
+
// Default keeps the original behaviour: the suffix is hidden below `sm`.
|
|
30
|
+
hideOnMobile: () => ['suffix'],
|
|
23
31
|
withMicrodata: true,
|
|
24
32
|
});
|
|
25
33
|
|
|
@@ -27,6 +35,15 @@ const isLast = (index: number) => {
|
|
|
27
35
|
return index === props.breadcrumbs.length - 1;
|
|
28
36
|
};
|
|
29
37
|
|
|
38
|
+
// Build the link title from the optional prefix, the crumb name and (on the
|
|
39
|
+
// last crumb) the suffix — empty parts are dropped so there are no stray spaces.
|
|
40
|
+
const getTitle = (name: string, last = false) =>
|
|
41
|
+
[props.titlePrefix, name, last ? props.suffix : undefined].filter(Boolean).join(' ');
|
|
42
|
+
|
|
43
|
+
// Hides the given part below the `sm` breakpoint; the element's base display
|
|
44
|
+
// (flex/inline) is restored from `sm` up. Empty string = always visible.
|
|
45
|
+
const mobileHidden = (part: BreadcrumbPart) => (props.hideOnMobile.includes(part) ? 'max-sm:hidden' : '');
|
|
46
|
+
|
|
30
47
|
// Microdata attributes - only added when withMicrodata is true
|
|
31
48
|
const listMicrodata = computed(() =>
|
|
32
49
|
props.withMicrodata
|
|
@@ -58,7 +75,7 @@ const listItemMicrodata = computed(() =>
|
|
|
58
75
|
</li>
|
|
59
76
|
</ul>
|
|
60
77
|
<ul class="breadcrumbs-base overflow-x-auto overflow-y-hidden sm:mr-12" v-bind="listMicrodata">
|
|
61
|
-
<li v-if="props.showHome" class="breadcrumb-item">
|
|
78
|
+
<li v-if="props.showHome" class="breadcrumb-item" :class="mobileHidden('home')">
|
|
62
79
|
<a
|
|
63
80
|
href="/"
|
|
64
81
|
class="breadcrumb-link flex items-center px-3 sm:px-0 py-4.25 sm:py-1 hover:text-brand-secondary whitespace-nowrap translate-y-0 text-sm my-auto"
|
|
@@ -72,16 +89,23 @@ const listItemMicrodata = computed(() =>
|
|
|
72
89
|
v-for="(crumb, index) in breadcrumbs"
|
|
73
90
|
:key="index"
|
|
74
91
|
class="breadcrumb-item"
|
|
92
|
+
:class="mobileHidden('trail')"
|
|
75
93
|
v-bind="listItemMicrodata"
|
|
76
94
|
>
|
|
77
|
-
<span
|
|
95
|
+
<span
|
|
96
|
+
v-if="index > 0 || props.showHome"
|
|
97
|
+
class="text-gray-400 px-1 py-4.25 sm:py-1"
|
|
98
|
+
:class="mobileHidden('separators')"
|
|
99
|
+
>
|
|
100
|
+
/
|
|
101
|
+
</span>
|
|
78
102
|
|
|
79
103
|
<a
|
|
80
104
|
v-if="!isLast(index)"
|
|
81
105
|
:href="crumb.path"
|
|
82
106
|
class="breadcrumb-link"
|
|
83
107
|
v-bind="withMicrodata ? { itemprop: 'item' } : {}"
|
|
84
|
-
:title="
|
|
108
|
+
:title="getTitle(crumb.name)"
|
|
85
109
|
>
|
|
86
110
|
<strong class="font-normal" v-bind="withMicrodata ? { itemprop: 'name' } : {}">
|
|
87
111
|
{{ crumb.name }}
|
|
@@ -91,12 +115,12 @@ const listItemMicrodata = computed(() =>
|
|
|
91
115
|
v-else
|
|
92
116
|
:href="crumb.path"
|
|
93
117
|
class="breadcrumb-link breadcrumb-link-disabled"
|
|
94
|
-
:title="
|
|
118
|
+
:title="getTitle(crumb.name, true)"
|
|
95
119
|
v-bind="withMicrodata ? { itemprop: 'item' } : {}"
|
|
96
120
|
>
|
|
97
121
|
<span class="font-normal" v-bind="withMicrodata ? { itemprop: 'name' } : {}">
|
|
98
122
|
<span v-html="crumb.name" />
|
|
99
|
-
<b v-if="
|
|
123
|
+
<b v-if="suffix" class="font-normal ml-1" :class="mobileHidden('suffix')"> {{ suffix }}</b>
|
|
100
124
|
</span>
|
|
101
125
|
</a>
|
|
102
126
|
|
|
@@ -36,7 +36,7 @@ const trail = [
|
|
|
36
36
|
---
|
|
37
37
|
<Breadcrumbs
|
|
38
38
|
breadcrumbs={trail}
|
|
39
|
-
|
|
39
|
+
suffix="6R0XXXXXX"
|
|
40
40
|
class="py-1 px-1 max-w-full flex bg-white"
|
|
41
41
|
showBack
|
|
42
42
|
textBack="Back"
|
|
@@ -55,7 +55,7 @@ const trail = [
|
|
|
55
55
|
<template>
|
|
56
56
|
<Breadcrumbs
|
|
57
57
|
:breadcrumbs="trail"
|
|
58
|
-
|
|
58
|
+
suffix="6R0XXXXXX"
|
|
59
59
|
class="py-1 px-1 max-w-full flex bg-white"
|
|
60
60
|
show-back
|
|
61
61
|
text-back="Back"
|
|
@@ -63,7 +63,7 @@ const trail = [
|
|
|
63
63
|
</template>`}>
|
|
64
64
|
<Breadcrumbs
|
|
65
65
|
breadcrumbs={[{name: 'Level1', path: '#level1'}, {name: 'Level 2', path: '#level2'}, {name: 'Level 3', path: '#level3'}]}
|
|
66
|
-
|
|
66
|
+
suffix="6R0XXXXXX"
|
|
67
67
|
class="py-1 order-0 px-1 max-w-full flex bg-white"
|
|
68
68
|
show-back
|
|
69
69
|
text-back="Back"
|
|
@@ -76,20 +76,20 @@ const trail = [
|
|
|
76
76
|
<ComponentPreview client:visible
|
|
77
77
|
astro={`<Breadcrumbs
|
|
78
78
|
breadcrumbs={trail}
|
|
79
|
-
|
|
79
|
+
suffix="6R0XXXXXX"
|
|
80
80
|
class="py-1 px-1 max-w-full flex bg-white"
|
|
81
81
|
showHome
|
|
82
82
|
client:visible
|
|
83
83
|
/>`}
|
|
84
84
|
vue={`<Breadcrumbs
|
|
85
85
|
:breadcrumbs="trail"
|
|
86
|
-
|
|
86
|
+
suffix="6R0XXXXXX"
|
|
87
87
|
class="py-1 px-1 max-w-full flex bg-white"
|
|
88
88
|
show-home
|
|
89
89
|
/>`}>
|
|
90
90
|
<Breadcrumbs
|
|
91
91
|
breadcrumbs={[{name: 'Level1', path: '#level1'}, {name: 'Level 2', path: '#level2'}, {name: 'Level 3', path: '#level3'}]}
|
|
92
|
-
|
|
92
|
+
suffix="6R0XXXXXX"
|
|
93
93
|
class="py-1 order-0 px-1 max-w-full flex bg-white"
|
|
94
94
|
show-home
|
|
95
95
|
/>
|
|
@@ -101,18 +101,48 @@ const trail = [
|
|
|
101
101
|
<ComponentPreview client:visible
|
|
102
102
|
astro={`<Breadcrumbs
|
|
103
103
|
breadcrumbs={trail}
|
|
104
|
-
|
|
104
|
+
suffix="6R0XXXXXX"
|
|
105
105
|
class="py-1 px-1 max-w-full flex bg-white"
|
|
106
106
|
client:visible
|
|
107
107
|
/>`}
|
|
108
108
|
vue={`<Breadcrumbs
|
|
109
109
|
:breadcrumbs="trail"
|
|
110
|
-
|
|
110
|
+
suffix="6R0XXXXXX"
|
|
111
111
|
class="py-1 px-1 max-w-full flex bg-white"
|
|
112
112
|
/>`}>
|
|
113
113
|
<Breadcrumbs
|
|
114
114
|
breadcrumbs={[{name: 'Level1', path: '#level1'}, {name: 'Level 2', path: '#level2'}, {name: 'Level 3', path: '#level3'}]}
|
|
115
|
-
|
|
115
|
+
suffix="6R0XXXXXX"
|
|
116
|
+
class="py-1 order-0 px-1 max-w-full flex bg-white"
|
|
117
|
+
/>
|
|
118
|
+
</ComponentPreview>
|
|
119
|
+
|
|
120
|
+
## Hide parts on mobile
|
|
121
|
+
|
|
122
|
+
Use `hideOnMobile` to hide selected parts below the `sm` breakpoint (640px); they
|
|
123
|
+
reappear from `sm` up. Accepted parts: `'suffix'`, `'home'`, `'separators'`, `'trail'`.
|
|
124
|
+
It defaults to `['suffix']`, so pass `[]` to show everything on mobile, or list more
|
|
125
|
+
parts to hide. Resize the preview below to see the suffix and separators come and go.
|
|
126
|
+
|
|
127
|
+
<ComponentPreview client:visible
|
|
128
|
+
astro={`<Breadcrumbs
|
|
129
|
+
breadcrumbs={trail}
|
|
130
|
+
suffix="6R0XXXXXX"
|
|
131
|
+
hideOnMobile={['suffix', 'separators']}
|
|
132
|
+
class="py-1 px-1 max-w-full flex bg-white"
|
|
133
|
+
client:visible
|
|
134
|
+
/>`}
|
|
135
|
+
vue={`<Breadcrumbs
|
|
136
|
+
:breadcrumbs="trail"
|
|
137
|
+
suffix="6R0XXXXXX"
|
|
138
|
+
:hide-on-mobile="['suffix', 'separators']"
|
|
139
|
+
class="py-1 px-1 max-w-full flex bg-white"
|
|
140
|
+
/>`}>
|
|
141
|
+
<Breadcrumbs
|
|
142
|
+
breadcrumbs={[{name: 'Level1', path: '#level1'}, {name: 'Level 2', path: '#level2'}, {name: 'Level 3', path: '#level3'}]}
|
|
143
|
+
suffix="6R0XXXXXX"
|
|
144
|
+
hideOnMobile={['suffix', 'separators']}
|
|
145
|
+
showHome
|
|
116
146
|
class="py-1 order-0 px-1 max-w-full flex bg-white"
|
|
117
147
|
/>
|
|
118
148
|
</ComponentPreview>
|
|
@@ -124,7 +154,9 @@ const trail = [
|
|
|
124
154
|
{ name: 'showBack', type: 'boolean', default: 'false', description: 'Show a back button before the breadcrumbs' },
|
|
125
155
|
{ name: 'textBack', type: 'string', default: "'Back'", description: 'Label text for the back button' },
|
|
126
156
|
{ name: 'showHome', type: 'boolean', default: 'false', description: 'Show home icon as first breadcrumb' },
|
|
127
|
-
{ name: '
|
|
157
|
+
{ name: 'suffix', type: 'string', default: 'undefined', description: 'Text appended after the last breadcrumb — e.g. a product number' },
|
|
158
|
+
{ name: 'titlePrefix', type: 'string', default: "''", description: 'Optional prefix prepended to each link title attribute — e.g. a brand name' },
|
|
159
|
+
{ name: 'hideOnMobile', type: "Array<'suffix' | 'home' | 'separators' | 'trail'>", default: "['suffix']", description: 'Parts hidden below the sm breakpoint (restored from sm up). Defaults to hiding the suffix; pass [] to show everything on mobile' },
|
|
128
160
|
{ name: 'withMicrodata', type: 'boolean', default: 'true', description: 'Include Schema.org BreadcrumbList markup — set false to avoid duplicates when rendering twice' },
|
|
129
161
|
]} />
|
|
130
162
|
|
|
@@ -43,9 +43,7 @@ The default variant is ideal for primary content sections. It supports custom in
|
|
|
43
43
|
variant="default"
|
|
44
44
|
title={`Lorem ipsum dolor sit amet, <span class="text-accent-light">consectetur</span> adipiscing elit.`}
|
|
45
45
|
>
|
|
46
|
-
<p slot="subtitle"
|
|
47
|
-
class="mt-3 text-base text-gray-200 sm:mt-5 text-lg md:text-xl lg:mx-0 md:mt-5"
|
|
48
|
-
>Nunc posuere massa eget turpis laoreet ultrices eget vel massa.</p>
|
|
46
|
+
<p slot="subtitle" class="mt-3 text-base text-gray-200 sm:mt-5 text-lg md:text-xl lg:mx-0 md:mt-5">Nunc posuere massa eget turpis laoreet ultrices eget vel massa.</p>
|
|
49
47
|
<Fragment slot="cta-content">
|
|
50
48
|
<Button primary rounded href="#" title="short text">
|
|
51
49
|
Read More
|
|
@@ -81,9 +79,7 @@ A more compact version of the default variant, useful for secondary content sect
|
|
|
81
79
|
slim
|
|
82
80
|
title={`Lorem ipsum dolor sit amet, <span class="text-accent-light">consectetur</span> adipiscing elit.`}
|
|
83
81
|
>
|
|
84
|
-
<p slot="subtitle"
|
|
85
|
-
class="mt-5 sm:mt-8 sm:flex sm:justify-center"
|
|
86
|
-
>Nunc posuere massa eget turpis laoreet ultrices eget vel massa.</p>
|
|
82
|
+
<p slot="subtitle" class="mt-5 sm:mt-8 sm:flex sm:justify-center">Nunc posuere massa eget turpis laoreet ultrices eget vel massa.</p>
|
|
87
83
|
</Jumbotron>
|
|
88
84
|
</div>
|
|
89
85
|
|
|
@@ -468,9 +464,7 @@ Shows how to fully customize the header section using the intro slot. Useful for
|
|
|
468
464
|
<h2 slot="intro" class="text-3xl text-white sm:(text-3xl pt-0) md:text-4xl lg:text-5xl">
|
|
469
465
|
Lorem ipsum dolor sit amet, <span class="text-accent-light">consectetur</span> adipiscing elit.
|
|
470
466
|
</h2>
|
|
471
|
-
<p slot="subtitle"
|
|
472
|
-
class="mt-5 sm:mt-8 sm:flex sm:justify-center"
|
|
473
|
-
>Nunc posuere massa eget turpis laoreet ultrices eget vel massa.</p>
|
|
467
|
+
<p slot="subtitle" class="mt-5 sm:mt-8 sm:flex sm:justify-center">Nunc posuere massa eget turpis laoreet ultrices eget vel massa.</p>
|
|
474
468
|
</Jumbotron>
|
|
475
469
|
</div>
|
|
476
470
|
|
package/uno-config/index.ts
CHANGED
|
@@ -21,33 +21,13 @@ import { theme } from './theme/index.ts';
|
|
|
21
21
|
import { generatePalette, defaultPalette, type PaletteInput } from './palette-generator.ts';
|
|
22
22
|
import { peerSelectorClasses, peerVariant } from './peer-variants.ts';
|
|
23
23
|
|
|
24
|
-
//
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
import elIcons from '@iconify-json/el/icons.json';
|
|
32
|
-
import eosIcons from '@iconify-json/eos-icons/icons.json';
|
|
33
|
-
import etIcons from '@iconify-json/et/icons.json';
|
|
34
|
-
import flowbiteIcons from '@iconify-json/flowbite/icons.json';
|
|
35
|
-
import fluentIcons from '@iconify-json/fluent/icons.json';
|
|
36
|
-
import fluentEmojiIcons from '@iconify-json/fluent-emoji/icons.json';
|
|
37
|
-
import icIcons from '@iconify-json/ic/icons.json';
|
|
38
|
-
import iconParkOutlineIcons from '@iconify-json/icon-park-outline/icons.json';
|
|
39
|
-
import laIcons from '@iconify-json/la/icons.json';
|
|
40
|
-
import lucideIcons from '@iconify-json/lucide/icons.json';
|
|
41
|
-
import materialSymbolsLightIcons from '@iconify-json/material-symbols-light/icons.json';
|
|
42
|
-
import mdiIcons from '@iconify-json/mdi/icons.json';
|
|
43
|
-
import notoV1Icons from '@iconify-json/noto-v1/icons.json';
|
|
44
|
-
import octiconIcons from '@iconify-json/octicon/icons.json';
|
|
45
|
-
import phIcons from '@iconify-json/ph/icons.json';
|
|
46
|
-
import simpleIcons from '@iconify-json/simple-icons/icons.json';
|
|
47
|
-
import systemUiconsIcons from '@iconify-json/system-uicons/icons.json';
|
|
48
|
-
import uilIcons from '@iconify-json/uil/icons.json';
|
|
49
|
-
import vscodeIcons from '@iconify-json/vscode-icons/icons.json';
|
|
50
|
-
import streamlineFreehandColorIcons from '@iconify-json/streamline-freehand-color/icons.json';
|
|
24
|
+
// Icon collections are loaded lazily via dynamic import (see `iconCollections`
|
|
25
|
+
// in the presetIcons config below). They are deliberately NOT statically
|
|
26
|
+
// imported: static imports inline every collection's `icons.json` (hundreds of
|
|
27
|
+
// MB across 26 collections) into this single module. On Vite 8's module runner
|
|
28
|
+
// that produces an inline sourcemap larger than V8's max string length
|
|
29
|
+
// (0x1fffffe8 ≈ 536M chars), which crashes the build under Astro 7. Each loader
|
|
30
|
+
// must use a literal specifier so the bundler can statically resolve the chunk.
|
|
51
31
|
|
|
52
32
|
|
|
53
33
|
interface CustomConfig extends Partial<UserConfig> {
|
|
@@ -208,34 +188,37 @@ export function createSdsConfig(customConfig: CustomConfig = {}) {
|
|
|
208
188
|
'display': 'inline-block',
|
|
209
189
|
'vertical-align': 'middle',
|
|
210
190
|
},
|
|
191
|
+
// Lazy async loaders: each collection resolves to its own dynamic-import
|
|
192
|
+
// chunk instead of being inlined into this module (see the import note
|
|
193
|
+
// at the top of the file). Specifiers must be string literals so the
|
|
194
|
+
// bundler can statically resolve each chunk.
|
|
211
195
|
collections: {
|
|
212
|
-
|
|
213
|
-
'
|
|
214
|
-
'
|
|
215
|
-
'
|
|
216
|
-
'
|
|
217
|
-
'
|
|
218
|
-
'
|
|
219
|
-
'
|
|
220
|
-
'
|
|
221
|
-
'
|
|
222
|
-
'
|
|
223
|
-
'fluent':
|
|
224
|
-
'
|
|
225
|
-
'
|
|
226
|
-
'
|
|
227
|
-
'
|
|
228
|
-
'
|
|
229
|
-
'
|
|
230
|
-
'
|
|
231
|
-
'
|
|
232
|
-
'
|
|
233
|
-
'
|
|
234
|
-
'
|
|
235
|
-
'
|
|
236
|
-
'
|
|
237
|
-
'
|
|
238
|
-
'streamline-freehand-color': streamlineFreehandColorIcons,
|
|
196
|
+
'ant-design': () => import('@iconify-json/ant-design/icons.json').then((m) => m.default),
|
|
197
|
+
'bi': () => import('@iconify-json/bi/icons.json').then((m) => m.default),
|
|
198
|
+
'bx': () => import('@iconify-json/bx/icons.json').then((m) => m.default),
|
|
199
|
+
'carbon': () => import('@iconify-json/carbon/icons.json').then((m) => m.default),
|
|
200
|
+
'circle-flags': () => import('@iconify-json/circle-flags/icons.json').then((m) => m.default),
|
|
201
|
+
'ei': () => import('@iconify-json/ei/icons.json').then((m) => m.default),
|
|
202
|
+
'el': () => import('@iconify-json/el/icons.json').then((m) => m.default),
|
|
203
|
+
'eos-icons': () => import('@iconify-json/eos-icons/icons.json').then((m) => m.default),
|
|
204
|
+
'et': () => import('@iconify-json/et/icons.json').then((m) => m.default),
|
|
205
|
+
'flowbite': () => import('@iconify-json/flowbite/icons.json').then((m) => m.default),
|
|
206
|
+
'fluent': () => import('@iconify-json/fluent/icons.json').then((m) => m.default),
|
|
207
|
+
'fluent-emoji': () => import('@iconify-json/fluent-emoji/icons.json').then((m) => m.default),
|
|
208
|
+
'ic': () => import('@iconify-json/ic/icons.json').then((m) => m.default),
|
|
209
|
+
'icon-park-outline': () => import('@iconify-json/icon-park-outline/icons.json').then((m) => m.default),
|
|
210
|
+
'la': () => import('@iconify-json/la/icons.json').then((m) => m.default),
|
|
211
|
+
'lucide': () => import('@iconify-json/lucide/icons.json').then((m) => m.default),
|
|
212
|
+
'material-symbols-light': () => import('@iconify-json/material-symbols-light/icons.json').then((m) => m.default),
|
|
213
|
+
'mdi': () => import('@iconify-json/mdi/icons.json').then((m) => m.default),
|
|
214
|
+
'noto-v1': () => import('@iconify-json/noto-v1/icons.json').then((m) => m.default),
|
|
215
|
+
'octicon': () => import('@iconify-json/octicon/icons.json').then((m) => m.default),
|
|
216
|
+
'ph': () => import('@iconify-json/ph/icons.json').then((m) => m.default),
|
|
217
|
+
'simple-icons': () => import('@iconify-json/simple-icons/icons.json').then((m) => m.default),
|
|
218
|
+
'system-uicons': () => import('@iconify-json/system-uicons/icons.json').then((m) => m.default),
|
|
219
|
+
'uil': () => import('@iconify-json/uil/icons.json').then((m) => m.default),
|
|
220
|
+
'vscode-icons': () => import('@iconify-json/vscode-icons/icons.json').then((m) => m.default),
|
|
221
|
+
'streamline-freehand-color': () => import('@iconify-json/streamline-freehand-color/icons.json').then((m) => m.default),
|
|
239
222
|
}
|
|
240
223
|
}),
|
|
241
224
|
presetTypography(),
|