@mozaic-ds/vue 1.0.0-rc.0 → 1.0.0-rc.1
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/README.md +10 -8
- package/dist/mozaic-vue.adeo.css +45 -43
- package/dist/mozaic-vue.adeo.umd.js +11552 -22322
- package/dist/mozaic-vue.common.js +11552 -22322
- package/dist/mozaic-vue.common.js.map +1 -1
- package/dist/mozaic-vue.css +1 -1
- package/dist/mozaic-vue.umd.js +11552 -22322
- package/dist/mozaic-vue.umd.js.map +1 -1
- package/dist/mozaic-vue.umd.min.js +2 -2
- package/dist/mozaic-vue.umd.min.js.map +1 -1
- package/package.json +24 -23
- package/src/components/autocomplete/MAutocomplete.vue +294 -111
- package/src/components/checkbox/MCheckboxGroup.vue +8 -0
- package/src/components/dropdown/MDropdown.vue +316 -0
- package/src/components/dropdown/index.js +7 -0
- package/src/components/flag/MFlag.vue +1 -1
- package/src/components/icon/MIcon.vue +18 -2
- package/src/components/index.js +2 -1
- package/src/components/link/MLink.vue +14 -3
- package/src/components/listbox/MListBox.vue +97 -57
- package/src/components/listbox/MListBoxActions.vue +251 -0
- package/src/components/listbox/index.js +6 -1
- package/src/components/phonenumber/MPhoneNumber.vue +10 -3
- package/src/components/quantityselector/MQuantitySelector.vue +15 -2
- package/src/components/ratingstars/MStarsInput.vue +1 -0
- package/src/components/stepper/MStepper.vue +68 -27
- package/src/components/tabs/MTab.vue +69 -59
- package/src/components/textinput/MTextInputField.vue +0 -1
- package/src/index.js +2 -1
- package/src/tokens/adeo/android/colors.xml +183 -126
- package/src/tokens/adeo/css/_variables.scss +183 -126
- package/src/tokens/adeo/css/root.scss +80 -23
- package/src/tokens/adeo/ios/StyleDictionaryColor.h +60 -3
- package/src/tokens/adeo/ios/StyleDictionaryColor.m +187 -130
- package/src/tokens/adeo/ios/StyleDictionaryColor.swift +183 -126
- package/src/tokens/adeo/js/tokens.js +183 -126
- package/src/tokens/adeo/js/tokensObject.js +1570 -283
- package/src/tokens/adeo/scss/_tokens.scss +342 -128
- package/types/index.d.ts +4 -0
package/README.md
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
|
|
5
5
|
## Introduction
|
|
6
6
|
|
|
7
|
-
**
|
|
7
|
+
**Mozaic-Vue** is the [Vue.js](https://vuejs.org/) implementation of [Mozaic Design System](https://mozaic.adeo.cloud/)
|
|
8
8
|
|
|
9
9
|
Note that this package is built to be used with **Vue.js version 2**.
|
|
10
10
|
|
|
@@ -14,7 +14,7 @@ You can have an overview of each component of this library by visiting the dedic
|
|
|
14
14
|
|
|
15
15
|
> PREREQUISITE: To allow you to include and use our package in your library, we assume that you are using a module bundlers like [Webpack](https://webpack.js.org/), [Parcel](https://parceljs.org/) or [rollup.js](https://rollupjs.org/guide/en/), or that your project has been initiated with [Vue CLI](https://cli.vuejs.org/). Otherwise, the package might not work.
|
|
16
16
|
|
|
17
|
-
In order to use **
|
|
17
|
+
In order to use **Mozaic-Vue** in your **Vue.js** project, you must first install the npm package:
|
|
18
18
|
|
|
19
19
|
```shell
|
|
20
20
|
$ npm install @mozaic-ds/vue --save --save-exact
|
|
@@ -28,7 +28,7 @@ $ yarn add @mozaic-ds/vue -E
|
|
|
28
28
|
|
|
29
29
|
## Usage
|
|
30
30
|
|
|
31
|
-
**
|
|
31
|
+
**Mozaic-Vue** is a component library that responds to the different usage contexts proposed by **Vue.js**.
|
|
32
32
|
|
|
33
33
|
Indeed, as indicated in [its documentation](https://vuejs.org/v2/guide/components-registration.html#Global-Registration), **Vue.js** proposes to register/use the components in a global or local way:
|
|
34
34
|
|
|
@@ -41,7 +41,7 @@ Indeed, as indicated in [its documentation](https://vuejs.org/v2/guide/component
|
|
|
41
41
|
|
|
42
42
|
#### Import all components
|
|
43
43
|
|
|
44
|
-
The easiest way to start using **
|
|
44
|
+
The easiest way to start using **Mozaic-Vue**, is to import all the components and make them available throughout your application.
|
|
45
45
|
|
|
46
46
|
To do this, in your entry point file, insert the following code:
|
|
47
47
|
|
|
@@ -49,11 +49,13 @@ To do this, in your entry point file, insert the following code:
|
|
|
49
49
|
// In the entry point file of your application - usually src/main.js
|
|
50
50
|
|
|
51
51
|
import MozaicVue from '@mozaic-ds/vue';
|
|
52
|
-
import '@mozaic-ds/vue/dist/mozaic-vue.css'; // Import the css of all components
|
|
52
|
+
import '@mozaic-ds/vue/dist/mozaic-vue.css'; // Import the css of all components
|
|
53
53
|
|
|
54
54
|
Vue.use(MozaicVue);
|
|
55
55
|
```
|
|
56
56
|
|
|
57
|
+
> NOTE: If you are working on a project that requires the use of the ADEO theme, you should use the following style sheet: `import '@mozaic-ds/vue/dist/mozaic-vue.adeo.css';`
|
|
58
|
+
|
|
57
59
|
#### Import only the desired components
|
|
58
60
|
|
|
59
61
|
If you do not want to use all the components of the library, but only some of them, you can proceed as follows:
|
|
@@ -62,7 +64,7 @@ If you do not want to use all the components of the library, but only some of th
|
|
|
62
64
|
// In the entry point file of your application - usually src/main.js
|
|
63
65
|
|
|
64
66
|
import { MAccordion, MButton } from '@mozaic-ds/vue';
|
|
65
|
-
import '@mozaic-ds/vue/dist/mozaic-vue.css'; // Import the css of all components
|
|
67
|
+
import '@mozaic-ds/vue/dist/mozaic-vue.css'; // Import the css of all components
|
|
66
68
|
|
|
67
69
|
Vue.use(MAccordion);
|
|
68
70
|
Vue.use(MButton);
|
|
@@ -77,7 +79,7 @@ That's it! You are now able to use the **Mozaic** components in your **Vue.js**
|
|
|
77
79
|
Simply call the component of your choice at the desired location anywhere in your application:
|
|
78
80
|
|
|
79
81
|
```html
|
|
80
|
-
<
|
|
82
|
+
<MButton label="Default button" />
|
|
81
83
|
```
|
|
82
84
|
|
|
83
85
|
### Local import
|
|
@@ -119,5 +121,5 @@ That's it! You are now able to use the **Mozaic** components in your **Vue.js**
|
|
|
119
121
|
Simply call the component as follows:
|
|
120
122
|
|
|
121
123
|
```html
|
|
122
|
-
<
|
|
124
|
+
<MButton label="Default button" />
|
|
123
125
|
```
|