fleetcor-lwc 2.6.0 → 2.6.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 +191 -36
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,8 +1,20 @@
|
|
|
1
1
|
# Fleetcor LWC
|
|
2
2
|
|
|
3
|
-
##
|
|
3
|
+
## About
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
The Fleetcor LWC framework is a set of popular LWC components for use in any client-side web development projects.
|
|
6
|
+
|
|
7
|
+
It will help you speed up the process of building any web application.
|
|
8
|
+
|
|
9
|
+
## How to install
|
|
10
|
+
|
|
11
|
+
In your project open terminal and install `fleetcor-lwc`
|
|
12
|
+
|
|
13
|
+
```js
|
|
14
|
+
npm i fleetcor-lwc
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
Add / update `lwc.config.json` file in your project
|
|
6
18
|
|
|
7
19
|
```js
|
|
8
20
|
...
|
|
@@ -17,12 +29,35 @@ Add `fleetcor-lwc` npm to `lwc.config.json`
|
|
|
17
29
|
...
|
|
18
30
|
```
|
|
19
31
|
|
|
20
|
-
## Use fleetcor-lwc-loader
|
|
32
|
+
## Use Webpack fleetcor-lwc-loader
|
|
21
33
|
|
|
22
|
-
|
|
34
|
+
There are available style themes: `amber` and `aquamarine`
|
|
23
35
|
Customize with mixins: path to .scss file
|
|
24
36
|
|
|
25
|
-
Add `fleetcor-lwc-loader` to `webpack.config.json`
|
|
37
|
+
Add `fleetcor-lwc-loader` to `webpack.config.json`, by default we use `aquamarine` style theme. You can change theme with loader options `theme`
|
|
38
|
+
|
|
39
|
+
```js
|
|
40
|
+
...
|
|
41
|
+
{
|
|
42
|
+
test: /\.scss$/i,
|
|
43
|
+
use: [
|
|
44
|
+
"style-loader",
|
|
45
|
+
"css-loader",
|
|
46
|
+
{
|
|
47
|
+
loader: "sass-loader"
|
|
48
|
+
},
|
|
49
|
+
{
|
|
50
|
+
loader: 'fleetcor-lwc/loader',
|
|
51
|
+
options: {
|
|
52
|
+
theme: 'amber', // amber | aquamarine
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
]
|
|
56
|
+
}
|
|
57
|
+
...
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
You can ovverride theme styles with your own styles values stored in file with extantion `.scss`
|
|
26
61
|
|
|
27
62
|
```js
|
|
28
63
|
...
|
|
@@ -39,8 +74,8 @@ const pathConstants = 'frontend/common/mixins.scss';
|
|
|
39
74
|
{
|
|
40
75
|
loader: 'fleetcor-lwc/loader',
|
|
41
76
|
options: {
|
|
42
|
-
theme: '
|
|
43
|
-
mixins: pathWithConstants
|
|
77
|
+
theme: 'aquamarine',
|
|
78
|
+
mixins: pathWithConstants
|
|
44
79
|
}
|
|
45
80
|
}
|
|
46
81
|
]
|
|
@@ -50,13 +85,14 @@ const pathConstants = 'frontend/common/mixins.scss';
|
|
|
50
85
|
|
|
51
86
|
## Components
|
|
52
87
|
|
|
88
|
+
### Radio Group Icon
|
|
89
|
+
|
|
53
90
|
```html
|
|
54
|
-
Radio Group Icon:
|
|
55
91
|
<flt-radio-group-icon
|
|
56
92
|
size="s"
|
|
57
93
|
name="city"
|
|
58
|
-
disabled
|
|
59
|
-
required
|
|
94
|
+
disabled
|
|
95
|
+
required
|
|
60
96
|
group="main"
|
|
61
97
|
options="[{icon:'///icon-path', value:'London'}, {icon:'///icon-path', value:'Leon'}]"
|
|
62
98
|
value="London"
|
|
@@ -64,14 +100,41 @@ Radio Group Icon:
|
|
|
64
100
|
...
|
|
65
101
|
```
|
|
66
102
|
|
|
67
|
-
|
|
68
|
-
|
|
103
|
+
#### Radio Group Icon variables
|
|
104
|
+
|
|
105
|
+
| @api | type | values | required | description |
|
|
106
|
+
| ------------- | ------ | ------ | -------- | ----------------------------------------------------------------------------------------- |
|
|
107
|
+
| name | string | | + | |
|
|
108
|
+
| options | array | | + | Array of available items which have `icon` with path of icon and `value` as unique string |
|
|
109
|
+
| size | string | `s` | - | |
|
|
110
|
+
| value | string | | - | Current value from options items value |
|
|
111
|
+
| disabled | bool | | - | |
|
|
112
|
+
| required | bool | | - | |
|
|
113
|
+
| group | string | | - | |
|
|
114
|
+
| error-message | string | | - | |
|
|
115
|
+
|
|
116
|
+
#### Radio Group Icon methods
|
|
117
|
+
|
|
118
|
+
| @api | params | return type | description |
|
|
119
|
+
| -------- | ----------- | ----------- | ----------------------------------------------------------------------------------------------------------------------- |
|
|
120
|
+
| validate | | void | Check component validation and show error message to user |
|
|
121
|
+
| isValid | | bool | Return `true` or `false` |
|
|
122
|
+
| getData | silent:bool | object | Return full data of component's state. If `silent` true - return value will be without any errors displaying for client |
|
|
123
|
+
|
|
124
|
+
#### Radio Group Icon events
|
|
69
125
|
|
|
126
|
+
| name | handle | return | description |
|
|
127
|
+
| ------ | ------------ | ------ | ------------------------------------- |
|
|
128
|
+
| change | event.detail | object | Return full data of component's state |
|
|
129
|
+
|
|
130
|
+
### Radio Group
|
|
131
|
+
|
|
132
|
+
```html
|
|
70
133
|
<flt-radio-group
|
|
71
134
|
size="s"
|
|
72
135
|
name="city"
|
|
73
|
-
disabled
|
|
74
|
-
required
|
|
136
|
+
disabled
|
|
137
|
+
required
|
|
75
138
|
group="main"
|
|
76
139
|
options="[{label:'London', value:'London'}, {label:'Leon', value:'Leon'}]"
|
|
77
140
|
value="London"
|
|
@@ -80,14 +143,42 @@ Radio Group:
|
|
|
80
143
|
...
|
|
81
144
|
```
|
|
82
145
|
|
|
83
|
-
|
|
84
|
-
Checkbox:
|
|
146
|
+
#### Radio Group variables
|
|
85
147
|
|
|
148
|
+
| @api variables | type | values | required | description |
|
|
149
|
+
| -------------- | ------ | ------ | -------- | ---------------------------------------------------------------------------------------- |
|
|
150
|
+
| name | string | | + | |
|
|
151
|
+
| options | array | | + | Array of available items which have `label` with any string and `value` as unique string |
|
|
152
|
+
| size | string | `s` | - | |
|
|
153
|
+
| value | string | | - | Current value from options items value |
|
|
154
|
+
| label | string | | - | It is main label for items value |
|
|
155
|
+
| disabled | bool | | - | |
|
|
156
|
+
| required | bool | | - | |
|
|
157
|
+
| group | string | | - | |
|
|
158
|
+
| error-message | string | | - | |
|
|
159
|
+
|
|
160
|
+
#### Radio Group methods
|
|
161
|
+
|
|
162
|
+
| @api | params | return type | description |
|
|
163
|
+
| -------- | ----------- | ----------- | ----------------------------------------------------------------------------------------------------------------------- |
|
|
164
|
+
| validate | | void | Check component validation and show error message to user |
|
|
165
|
+
| isValid | | bool | Return `true` or `false` |
|
|
166
|
+
| getData | silent:bool | object | Return full data of component's state. If `silent` true - return value will be without any errors displaying for client |
|
|
167
|
+
|
|
168
|
+
#### Radio Group events
|
|
169
|
+
|
|
170
|
+
| name | handle | return | description |
|
|
171
|
+
| ------ | ------------ | ------ | ------------------------------------- |
|
|
172
|
+
| change | event.detail | object | Return full data of component's state |
|
|
173
|
+
|
|
174
|
+
### Checkbox
|
|
175
|
+
|
|
176
|
+
```html
|
|
86
177
|
<flt-checkbox
|
|
87
178
|
size="s"
|
|
88
179
|
name="agreement"
|
|
89
|
-
disabled
|
|
90
|
-
required
|
|
180
|
+
disabled
|
|
181
|
+
required
|
|
91
182
|
group="main"
|
|
92
183
|
value="true"
|
|
93
184
|
label="Next"
|
|
@@ -95,34 +186,73 @@ Checkbox:
|
|
|
95
186
|
...
|
|
96
187
|
```
|
|
97
188
|
|
|
98
|
-
|
|
99
|
-
|
|
189
|
+
#### Checkbox variables
|
|
190
|
+
|
|
191
|
+
| @api variables | type | values | required | description |
|
|
192
|
+
| -------------- | ------ | ------ | -------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
|
|
193
|
+
| name | string | | + | |
|
|
194
|
+
| size | string | `s` | - | |
|
|
195
|
+
| value | bool | | - | |
|
|
196
|
+
| label | html | | - | Label set to template as HTML content. You can user tag `a` with attribute `view-modal` to catch `viewmodal` Custom Event by click on it |
|
|
197
|
+
| disabled | bool | | - | |
|
|
198
|
+
| required | bool | | - | |
|
|
199
|
+
| group | string | | - | |
|
|
200
|
+
| error-message | string | | - | |
|
|
100
201
|
|
|
202
|
+
#### Checkbox methods
|
|
203
|
+
|
|
204
|
+
| @api | params | return type | description |
|
|
205
|
+
| -------- | ----------- | ----------- | ----------------------------------------------------------------------------------------------------------------------- |
|
|
206
|
+
| validate | | void | Check component validation and show error message to user |
|
|
207
|
+
| isValid | | bool | Return `true` or `false` |
|
|
208
|
+
| getData | silent:bool | object | Return full data of component's state. If `silent` true - return value will be without any errors displaying for client |
|
|
209
|
+
|
|
210
|
+
#### Checkbox events
|
|
211
|
+
|
|
212
|
+
| name | handle | return | description |
|
|
213
|
+
| ------ | ------------ | ------ | ------------------------------------- |
|
|
214
|
+
| change | event.detail | object | Return full data of component's state |
|
|
215
|
+
|
|
216
|
+
### Button
|
|
217
|
+
|
|
218
|
+
```html
|
|
101
219
|
<flt-button
|
|
102
220
|
type="base|primary|secondary|link"
|
|
103
221
|
size="xs|small|medium|large"
|
|
104
|
-
icon-left="arrow-left
|
|
105
|
-
icon-right="arrow-left
|
|
222
|
+
icon-left="arrow-left"
|
|
223
|
+
icon-right="arrow-left"
|
|
106
224
|
disabled
|
|
107
225
|
label="Next"
|
|
108
226
|
></flt-button>
|
|
109
227
|
...
|
|
110
228
|
```
|
|
111
229
|
|
|
112
|
-
|
|
113
|
-
Icon:
|
|
230
|
+
#### Button variables
|
|
114
231
|
|
|
115
|
-
|
|
232
|
+
| @api variables | type | values | required | description |
|
|
233
|
+
| -------------- | ------ | -------------------------------- | -------- | ------------------------------- |
|
|
234
|
+
| type | string | `base, primary, secondary, link` | - | |
|
|
235
|
+
| size | string | `xs, small, medium, large` | - | |
|
|
236
|
+
| icon-left | string | `arrow-left, ...` | - | any value from `Icon` component |
|
|
237
|
+
| icon-right | string | `arrow-right, ...` | - | any value from `Icon` component |
|
|
238
|
+
| label | string | | - | |
|
|
239
|
+
| disabled | bool | | - | |
|
|
116
240
|
|
|
117
|
-
|
|
118
|
-
both | shared-card | ev-and-fuel | oil | key | blocked | multiple-users |
|
|
119
|
-
arrow-right | diesel | hydrogen | signature | plus | plus-small | document |
|
|
120
|
-
close | hgv
|
|
121
|
-
```
|
|
241
|
+
### Icon
|
|
122
242
|
|
|
123
243
|
```html
|
|
124
|
-
|
|
244
|
+
<flt-icon icon="arrow-left"></flt-icon>
|
|
245
|
+
```
|
|
246
|
+
|
|
247
|
+
#### Icon variables
|
|
248
|
+
|
|
249
|
+
| @api variables | type | values | required | description |
|
|
250
|
+
| -------------- | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------- | ----------- |
|
|
251
|
+
| icon | string | `arrow-left, ev, carwash, car, van, unleaded, fuel, driver, vehicle, both, shared-card, ev-and-fuel, oil, key, blocked, multiple-users,arrow-right, diesel, hydrogen, signature, plus, plus-small, document, close, hgv` | - | |
|
|
125
252
|
|
|
253
|
+
### Tooltip
|
|
254
|
+
|
|
255
|
+
```html
|
|
126
256
|
<flt-tooltip content="Text description info" corner="12">
|
|
127
257
|
<!-- Any html element -->
|
|
128
258
|
<flt-icon icon="arrow-left"></flt-icon>
|
|
@@ -131,8 +261,26 @@ Tooltip:
|
|
|
131
261
|
...
|
|
132
262
|
```
|
|
133
263
|
|
|
264
|
+
#### Tooltip variables
|
|
265
|
+
|
|
266
|
+
| @api variables | type | values | required | description |
|
|
267
|
+
| -------------- | ---- | ------ | -------- | --------------------------------- |
|
|
268
|
+
| content | html | | + | |
|
|
269
|
+
| corner | int | | - | change corner radius of container |
|
|
270
|
+
|
|
271
|
+
#### Tooltip slot
|
|
272
|
+
|
|
273
|
+
| slot | description |
|
|
274
|
+
| ------ | ----------------------------- |
|
|
275
|
+
| defalt | any html element can be there |
|
|
276
|
+
|
|
277
|
+
## Override styles
|
|
278
|
+
|
|
279
|
+
You can copy any variables from this list and override them as you wish. For that you have to use fleetcor-lwc-loader with .scss file.
|
|
280
|
+
Also you can use global css variables as priority.
|
|
281
|
+
|
|
134
282
|
```scss
|
|
135
|
-
/* mixins.scss */
|
|
283
|
+
/* this is aquamarine mixins.scss */
|
|
136
284
|
|
|
137
285
|
// TOOLTIP ->
|
|
138
286
|
$FLT_TOOLTIP_BG_COLOR: var(--flt-tooltip-bg-color, #374151);
|
|
@@ -224,7 +372,7 @@ $FLT_CHECKBOX_LABEL_HREF_COLOR: var(--flt-checkbox-color, #3782c8);
|
|
|
224
372
|
$FLT_CHECKBOX_LABEL_HREF_HOVER_COLOR: var(--flt-checkbox-color, #67cdda);
|
|
225
373
|
// <- CHECKBOX
|
|
226
374
|
|
|
227
|
-
// RADIO GROUP ->
|
|
375
|
+
// RADIO GROUP, RADIO GROUP ICON ->
|
|
228
376
|
$FLT_RADIO_GROUP_COLOR: var(--flt-radio-group-color, #111827);
|
|
229
377
|
$FLT_RADIO_GROUP_DISABLED_COLOR: var(--flt-radio-group-disabled-color, #6b7280);
|
|
230
378
|
$FLT_RADIO_GROUP_ERROR_COLOR: var(--flt-radio-group-error-color, #ed123d);
|
|
@@ -262,19 +410,26 @@ $FLT_RADIO_GROUP_CIRCLE_DISABLED_SELECTED_BG_COLOR: var(
|
|
|
262
410
|
--flt-radio-group-circle-disabled-selected-bg-color,
|
|
263
411
|
#ffffff
|
|
264
412
|
);
|
|
265
|
-
// <- RADIO GROUP
|
|
413
|
+
// <- RADIO GROUP, RADIO GROUP ICON
|
|
266
414
|
```
|
|
267
415
|
|
|
268
416
|
## Release Notes:
|
|
269
417
|
|
|
270
|
-
- v.2.6.
|
|
418
|
+
- v.2.6.1
|
|
419
|
+
- Update documentation
|
|
271
420
|
|
|
421
|
+
---
|
|
422
|
+
|
|
423
|
+
- v.2.6.0
|
|
272
424
|
- Added new component `flt-radio-group-icon` (don't use `flt-radio-group` with icons)
|
|
273
425
|
|
|
274
|
-
|
|
426
|
+
---
|
|
275
427
|
|
|
428
|
+
- v.2.5.0
|
|
276
429
|
- Available icons for `flt-radio-group`
|
|
277
430
|
|
|
431
|
+
---
|
|
432
|
+
|
|
278
433
|
- v.2.4.2
|
|
279
434
|
- Bug fix at `flt-radio-group`
|
|
280
435
|
|