@mozaic-ds/vue 2.17.0 → 2.19.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.
Files changed (69) hide show
  1. package/dist/mozaic-vue.css +1 -1
  2. package/dist/mozaic-vue.d.ts +158 -72
  3. package/dist/mozaic-vue.js +1728 -4748
  4. package/dist/mozaic-vue.js.map +1 -1
  5. package/dist/mozaic-vue.umd.cjs +6 -25
  6. package/dist/mozaic-vue.umd.cjs.map +1 -1
  7. package/package.json +16 -10
  8. package/src/components/BrandPresets.mdx +20 -2
  9. package/src/components/Migration.mdx +651 -0
  10. package/src/components/accordionlistitem/MAccordionListItem.spec.ts +22 -3
  11. package/src/components/accordionlistitem/MAccordionListItem.vue +38 -28
  12. package/src/components/actionlistbox/MActionListbox.spec.ts +99 -0
  13. package/src/components/actionlistbox/MActionListbox.vue +54 -7
  14. package/src/components/breadcrumb/MBreadcrumb.vue +1 -1
  15. package/src/components/builtinmenu/MBuiltInMenu.spec.ts +30 -1
  16. package/src/components/builtinmenu/MBuiltInMenu.vue +26 -17
  17. package/src/components/builtinmenu/README.md +2 -0
  18. package/src/components/button/MButton.spec.ts +26 -0
  19. package/src/components/button/MButton.vue +2 -0
  20. package/src/components/callout/MCallout.spec.ts +35 -0
  21. package/src/components/callout/MCallout.stories.ts +0 -3
  22. package/src/components/callout/MCallout.vue +26 -7
  23. package/src/components/callout/README.md +4 -2
  24. package/src/components/carousel/MCarousel.spec.ts +26 -2
  25. package/src/components/carousel/MCarousel.vue +10 -4
  26. package/src/components/checklistmenu/MCheckListMenu.spec.ts +12 -1
  27. package/src/components/checklistmenu/MCheckListMenu.vue +6 -0
  28. package/src/components/checklistmenu/README.md +2 -0
  29. package/src/components/combobox/MCombobox.vue +7 -0
  30. package/src/components/datatable/datatable.mdx +3 -2
  31. package/src/components/drawer/MDrawer.spec.ts +102 -3
  32. package/src/components/drawer/MDrawer.vue +73 -14
  33. package/src/components/field/MField.vue +1 -0
  34. package/src/components/fileuploader/MFileUploader.vue +2 -2
  35. package/src/components/fileuploaderitem/MFileUploaderItem.vue +2 -7
  36. package/src/components/iconbutton/MIconButton.spec.ts +15 -0
  37. package/src/components/iconbutton/MIconButton.vue +1 -0
  38. package/src/components/kpiitem/MKpiItem.spec.ts +13 -0
  39. package/src/components/kpiitem/MKpiItem.vue +1 -1
  40. package/src/components/modal/MModal.spec.ts +115 -3
  41. package/src/components/modal/MModal.vue +91 -11
  42. package/src/components/modal/README.md +1 -1
  43. package/src/components/navigationindicator/MNavigationIndicator.spec.ts +75 -18
  44. package/src/components/navigationindicator/MNavigationIndicator.vue +10 -12
  45. package/src/components/optionListbox/MOptionListbox.vue +16 -1
  46. package/src/components/overlay/MOverlay.spec.ts +1 -1
  47. package/src/components/overlay/MOverlay.vue +1 -1
  48. package/src/components/phonenumber/MPhoneNumber.spec.ts +6 -2
  49. package/src/components/phonenumber/MPhoneNumber.vue +20 -16
  50. package/src/components/popover/MPopover.spec.ts +126 -0
  51. package/src/components/popover/MPopover.vue +36 -1
  52. package/src/components/segmentedcontrol/MSegmentedControl.spec.ts +92 -0
  53. package/src/components/segmentedcontrol/MSegmentedControl.vue +61 -2
  54. package/src/components/sidebarexpandableitem/MSidebarExpandableItem.spec.ts +12 -0
  55. package/src/components/sidebarexpandableitem/MSidebarExpandableItem.vue +1 -0
  56. package/src/components/starrating/MStarRating.spec.ts +19 -22
  57. package/src/components/starrating/MStarRating.vue +3 -2
  58. package/src/components/steppercompact/MStepperCompact.spec.ts +9 -0
  59. package/src/components/steppercompact/MStepperCompact.vue +1 -1
  60. package/src/components/stepperinline/MStepperInline.spec.ts +11 -0
  61. package/src/components/stepperinline/MStepperInline.vue +1 -1
  62. package/src/components/stepperstacked/MStepperStacked.spec.ts +13 -0
  63. package/src/components/stepperstacked/MStepperStacked.vue +1 -0
  64. package/src/components/tabs/MTabs.vue +90 -4
  65. package/src/components/tabs/Mtabs.spec.ts +162 -0
  66. package/src/components/textinput/MTextInput.vue +2 -2
  67. package/src/components/toggle/MToggle.vue +1 -1
  68. package/src/main.ts +1 -0
  69. package/src/components/ComponentsMapping.mdx +0 -98
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mozaic-ds/vue",
3
- "version": "2.17.0",
3
+ "version": "2.19.0",
4
4
  "type": "module",
5
5
  "description": "Mozaic-Vue is the Vue.js implementation of ADEO Design system",
6
6
  "author": "ADEO - ADEO Design system",
@@ -43,25 +43,26 @@
43
43
  "*.d.ts"
44
44
  ],
45
45
  "dependencies": {
46
- "@mozaic-ds/styles": "^2.15.0",
46
+ "@mozaic-ds/styles": "^2.18.0",
47
47
  "@mozaic-ds/web-fonts": "^1.65.0",
48
- "postcss-scss": "^4.0.9",
48
+ "postcss-scss": "^4.0.9"
49
+ },
50
+ "peerDependencies": {
49
51
  "vue": "^3.5.13"
50
52
  },
51
53
  "devDependencies": {
52
- "@commitlint/cli": "^20.1.0",
53
- "@commitlint/config-conventional": "^20.0.0",
54
+ "@commitlint/cli": "^21.0.1",
55
+ "@commitlint/config-conventional": "^21.0.1",
54
56
  "@figma/code-connect": "^1.4.1",
55
57
  "@mozaic-ds/css-dev-tools": "1.75.0",
56
58
  "@mozaic-ds/datatable-vue": "^1.0.0",
57
59
  "@mozaic-ds/icons-vue": "^2.5.0",
58
- "@release-it/conventional-changelog": "^10.0.1",
60
+ "@release-it/conventional-changelog": "^11.0.0",
59
61
  "@storybook/addon-a11y": "^10.0.4",
60
62
  "@storybook/addon-docs": "^10.0.4",
61
63
  "@storybook/addon-themes": "^10.0.4",
62
64
  "@storybook/vue3-vite": "^10.0.4",
63
65
  "@types/jsdom": "^28.0.0",
64
- "@types/lodash": "^4.17.23",
65
66
  "@vitejs/plugin-vue": "^6.0.1",
66
67
  "@vitest/coverage-v8": "^4.0.7",
67
68
  "@vitest/eslint-plugin": "^1.1.38",
@@ -82,18 +83,23 @@
82
83
  "mermaid": "^11.5.0",
83
84
  "npm-run-all": "^4.1.5",
84
85
  "prettier": "^3.5.3",
85
- "release-it": "^19.0.4",
86
- "sass": "1.94.2",
86
+ "release-it": "^20.0.0",
87
+ "sass": "^1.99.0",
87
88
  "storybook": "^10.0.4",
88
89
  "storybook-addon-tag-badges": "^3.0.2",
89
- "typescript": "^5.7.2",
90
+ "typescript": "^6.0.3",
90
91
  "vite": "^8.0.0",
91
92
  "vite-plugin-dts": "^4.5.3",
92
93
  "vitest": "^4.0.7",
94
+ "vue": "^3.5.13",
93
95
  "vue-component-meta": "^3.0.8",
94
96
  "vue-eslint-parser": "^10.1.1",
95
97
  "vue-tsc": "^3.1.8"
96
98
  },
99
+ "sideEffects": false,
100
+ "publishConfig": {
101
+ "access": "public"
102
+ },
97
103
  "bugs": {
98
104
  "url": "https://github.com/adeo/mozaic-vue/issues"
99
105
  },
package/src/components/BrandPresets.mdx CHANGED
@@ -80,16 +80,34 @@ The table below summarises which font to use depending on the brand.
80
80
  </tr>
81
81
  </table>
82
82
 
83
+ For example, here is how to include the Roboto font in your HTML for the Adeo brand:
84
+
85
+ <Source
86
+ language="html"
87
+ dark
88
+ code={`
89
+ <head>
90
+ <meta charset="UTF-8" />
91
+ <link rel="preconnect" href="https://fonts.googleapis.com" />
92
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
93
+ <link
94
+ href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap"
95
+ rel="stylesheet"
96
+ />
97
+ </head>
98
+ `}
99
+ />
100
+
83
101
  From there, we can update the main style sheet of your project, in order to import the right font.
84
102
 
85
103
  <Source
86
104
  language='css'
87
105
  dark
88
106
  code={`
89
- @use "@mozaic-ds/styles/tools/t.font" as *;
107
+ @use '@mozaic-ds/tokens/adeo/theme' as *;
90
108
 
91
109
  body {
92
- @include set-font-family();
110
+ font-family: var(--font-family, 'Roboto', sans-serif);
93
111
  }
94
112
  `} />
95
113