mediacube-ui-v2 0.0.41 → 0.0.42

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 (5) hide show
  1. package/README.md +122 -17
  2. package/README.template.md +139 -0
  3. package/dist/mediacube-ui-v2.js +10062 -10062
  4. package/dist/mediacube-ui-v2.umd.cjs +4 -4
  5. package/package.json +4 -3
package/README.md CHANGED
@@ -2,33 +2,138 @@
2
2
 
3
3
  This template should help get you started developing with Vue 3 in Vite.
4
4
 
5
- [![Screenshot](./public/preview.png)](https://storybook.js.org/)
5
+ # Installation #
6
+ #### Using npm or yarn
6
7
 
8
+ ```shell
9
+ yarn add mediacube-ui-v2
10
+ #or
11
+ npm install mediacube-ui-v2
12
+ ```
13
+
14
+ # Usage #
15
+ ### Nuxt@3.X
16
+ ```js
17
+ //Nuxt plugin
18
+ import { defineNuxtPlugin } from '#app';
19
+ import MediacubeUi from 'mediacube-ui-v2'
20
+ import 'mediacube-ui-v2/style'
21
+
22
+ export default defineNuxtPlugin( (nuxtApp) => {
23
+ nuxtApp.vueApp.use(MediacubeUi, {
24
+ drawerComponents: {},
25
+ modalComponents: {}
26
+ })
27
+ })
28
+ ```
29
+ ### Vue@3.X
30
+ ```js
31
+ import MediacubeUi from 'mediacube-ui-v2'
32
+ import 'mediacube-ui-v2/style'
33
+
34
+ app.use(MediacubeUi, {
35
+ drawerComponents: {},
36
+ modalComponents: {}
37
+ })
38
+ ```
7
39
 
8
40
  ## Type Support for `.vue` Imports in TS
9
41
 
10
42
  TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking.
11
43
 
12
- ## Project Setup
44
+ **CSS example:**
13
45
 
14
- ```sh
15
- yarn install
16
- ```
46
+ ```css
47
+ /**
48
+ * @tokens Colors
49
+ * @presenter Color
50
+ */
17
51
 
18
- ### Compile and Hot-Reload for Development
52
+ :root {
53
+ --n0: #fff; /* Token Description */
54
+ --n100: #fbfbfb;
55
+ --n200: #edeeef;
56
+ --n300: #e4e5e7;
57
+ --primary: var(--n300);
58
+ }
19
59
 
20
- ```sh
21
- yarn run dev
22
- ```
60
+ /**
61
+ * @tokens Border Radius
62
+ * @presenter BorderRadius
63
+ */
23
64
 
24
- ### Type-Check, Compile and Minify for Production
65
+ :root {
66
+ --border-radius-m: 4px;
67
+ --border-radius-l: 8px;
68
+ }
69
+ ```
25
70
 
26
- ```sh
27
- yarn run build
28
- ```
71
+ **SCSS example:**
29
72
 
30
- ### Lint with [ESLint](https://eslint.org/)
73
+ ```scss
74
+ /**
75
+ * @tokens Colors
76
+ * @presenter Color
77
+ */
31
78
 
32
- ```sh
33
- yarn run lint
34
- ```
79
+ $n0: #fff; /* Token Description */
80
+ $n100: #fbfbfb;
81
+ $n200: #edeeef;
82
+ $n300: #e4e5e7;
83
+ $primary: $n300;
84
+
85
+ /**
86
+ * @tokens Border Radius
87
+ * @presenter BorderRadius
88
+ */
89
+
90
+ $border-radius-m: 4px;
91
+ $border-radius-l: 8px;
92
+ ```
93
+
94
+ **SVG example:**
95
+
96
+ ```html
97
+ <?xml version="1.0" encoding="UTF-8"?>
98
+ <svg
99
+ data-token-name="check"
100
+ width="24px"
101
+ height="24px"
102
+ viewBox="0 0 24 24"
103
+ version="1.1"
104
+ xmlns="http://www.w3.org/2000/svg"
105
+ xmlns:xlink="http://www.w3.org/1999/xlink"
106
+ >
107
+ <path
108
+ d="M9.35221912,16.3536125 L19.5004166,5.34255149 C19.9029667,4.90884428 20.5808871,4.88358644 21.0145944,5.28613652 C21.4483016,5.6886866 21.4735594,6.36660707 21.0710093,6.80031428 L10.1375155,18.6574532 C9.71359736,19.1141823 8.99084087,19.1141823 8.56692275,18.6574532 L3.28613652,12.890538 C2.88358644,12.4568308 2.90884428,11.7789103 3.34255149,11.3763602 C3.77625869,10.9738101 4.45417917,10.999068 4.85672925,11.4327752 L9.35221912,16.3536125 Z"
109
+ fill="currentColor"
110
+ ></path>
111
+ </svg>
112
+ ```
113
+
114
+ Make sure to specify the `data-token-name` attribute.
115
+
116
+ ## Presenters
117
+
118
+ Presenters are used to render examples for your design tokens. The following presenters are available:
119
+
120
+ - Animation
121
+ - BorderRadius
122
+ - Border
123
+ - Color
124
+ - Easing
125
+ - FontFamily
126
+ - FontSize
127
+ - FontWeight
128
+ - Gradient
129
+ - LineHeight
130
+ - Opacity
131
+ - Shadow
132
+ - Spacing
133
+ - Svg
134
+
135
+ [//]: # (## Available Types)
136
+ [//]: # (&mdash;)
137
+ [//]: # ()
138
+ [//]: # (## Available style tokens)
139
+ [//]: # (&mdash;)
package/README.template.md ADDED
@@ -0,0 +1,139 @@
1
+ # mediacube-ui-v2 by Mediacube corp.
2
+
3
+ This template should help get you started developing with Vue 3 in Vite.
4
+
5
+ # Installation #
6
+ #### Using npm or yarn
7
+
8
+ ```shell
9
+ yarn add mediacube-ui-v2
10
+ #or
11
+ npm install mediacube-ui-v2
12
+ ```
13
+
14
+ # Usage #
15
+ ### Nuxt@3.X
16
+ ```js
17
+ //Nuxt plugin
18
+ import { defineNuxtPlugin } from '#app';
19
+ import MediacubeUi from 'mediacube-ui-v2'
20
+ import 'mediacube-ui-v2/style'
21
+
22
+ export default defineNuxtPlugin( (nuxtApp) => {
23
+ nuxtApp.vueApp.use(MediacubeUi, {
24
+ drawerComponents: {},
25
+ modalComponents: {}
26
+ })
27
+ })
28
+ ```
29
+ ### Vue@3.X
30
+ ```js
31
+ import MediacubeUi from 'mediacube-ui-v2'
32
+ import 'mediacube-ui-v2/style'
33
+
34
+ app.use(MediacubeUi, {
35
+ drawerComponents: {},
36
+ modalComponents: {}
37
+ })
38
+ ```
39
+
40
+ ## Type Support for `.vue` Imports in TS
41
+
42
+ TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking.
43
+
44
+ **CSS example:**
45
+
46
+ ```css
47
+ /**
48
+ * @tokens Colors
49
+ * @presenter Color
50
+ */
51
+
52
+ :root {
53
+ --n0: #fff; /* Token Description */
54
+ --n100: #fbfbfb;
55
+ --n200: #edeeef;
56
+ --n300: #e4e5e7;
57
+ --primary: var(--n300);
58
+ }
59
+
60
+ /**
61
+ * @tokens Border Radius
62
+ * @presenter BorderRadius
63
+ */
64
+
65
+ :root {
66
+ --border-radius-m: 4px;
67
+ --border-radius-l: 8px;
68
+ }
69
+ ```
70
+
71
+ **SCSS example:**
72
+
73
+ ```scss
74
+ /**
75
+ * @tokens Colors
76
+ * @presenter Color
77
+ */
78
+
79
+ $n0: #fff; /* Token Description */
80
+ $n100: #fbfbfb;
81
+ $n200: #edeeef;
82
+ $n300: #e4e5e7;
83
+ $primary: $n300;
84
+
85
+ /**
86
+ * @tokens Border Radius
87
+ * @presenter BorderRadius
88
+ */
89
+
90
+ $border-radius-m: 4px;
91
+ $border-radius-l: 8px;
92
+ ```
93
+
94
+ **SVG example:**
95
+
96
+ ```html
97
+ <?xml version="1.0" encoding="UTF-8"?>
98
+ <svg
99
+ data-token-name="check"
100
+ width="24px"
101
+ height="24px"
102
+ viewBox="0 0 24 24"
103
+ version="1.1"
104
+ xmlns="http://www.w3.org/2000/svg"
105
+ xmlns:xlink="http://www.w3.org/1999/xlink"
106
+ >
107
+ <path
108
+ d="M9.35221912,16.3536125 L19.5004166,5.34255149 C19.9029667,4.90884428 20.5808871,4.88358644 21.0145944,5.28613652 C21.4483016,5.6886866 21.4735594,6.36660707 21.0710093,6.80031428 L10.1375155,18.6574532 C9.71359736,19.1141823 8.99084087,19.1141823 8.56692275,18.6574532 L3.28613652,12.890538 C2.88358644,12.4568308 2.90884428,11.7789103 3.34255149,11.3763602 C3.77625869,10.9738101 4.45417917,10.999068 4.85672925,11.4327752 L9.35221912,16.3536125 Z"
109
+ fill="currentColor"
110
+ ></path>
111
+ </svg>
112
+ ```
113
+
114
+ Make sure to specify the `data-token-name` attribute.
115
+
116
+ ## Presenters
117
+
118
+ Presenters are used to render examples for your design tokens. The following presenters are available:
119
+
120
+ - Animation
121
+ - BorderRadius
122
+ - Border
123
+ - Color
124
+ - Easing
125
+ - FontFamily
126
+ - FontSize
127
+ - FontWeight
128
+ - Gradient
129
+ - LineHeight
130
+ - Opacity
131
+ - Shadow
132
+ - Spacing
133
+ - Svg
134
+
135
+ [//]: # (## Available Types)
136
+ [//]: # ({{types}})
137
+ [//]: # ()
138
+ [//]: # (## Available style tokens)
139
+ [//]: # ({{tokens}})