fleetcor-lwc 2.6.0 → 2.6.2
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 +196 -36
- package/frontend/components/flt/icon/icons/tmpl-close.html +6 -11
- 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 | | - | |
|
|
69
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
|
|
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
|
-
|
|
146
|
+
#### Radio Group variables
|
|
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
|
|
85
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 | | - | |
|
|
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
|
|
100
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,31 @@ $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.2
|
|
419
|
+
- Updated close icon
|
|
420
|
+
|
|
421
|
+
---
|
|
422
|
+
|
|
423
|
+
- v.2.6.1
|
|
424
|
+
- Update documentation
|
|
271
425
|
|
|
426
|
+
---
|
|
427
|
+
|
|
428
|
+
- v.2.6.0
|
|
272
429
|
- Added new component `flt-radio-group-icon` (don't use `flt-radio-group` with icons)
|
|
273
430
|
|
|
274
|
-
|
|
431
|
+
---
|
|
275
432
|
|
|
433
|
+
- v.2.5.0
|
|
276
434
|
- Available icons for `flt-radio-group`
|
|
277
435
|
|
|
436
|
+
---
|
|
437
|
+
|
|
278
438
|
- v.2.4.2
|
|
279
439
|
- Bug fix at `flt-radio-group`
|
|
280
440
|
|
|
@@ -1,15 +1,10 @@
|
|
|
1
1
|
<template lwc:render-mode="light">
|
|
2
|
-
<svg
|
|
3
|
-
class="flt-icon flt-icon__close"
|
|
4
|
-
width="24"
|
|
5
|
-
height="24"
|
|
6
|
-
viewBox="0 0 24 24"
|
|
7
|
-
fill="none"
|
|
8
|
-
xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<svg class="flt-icon flt-icon__close" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
9
3
|
<path
|
|
10
|
-
class="flt-icon__path"
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
4
|
+
class="flt-icon__path-fill"
|
|
5
|
+
fill-rule="evenodd"
|
|
6
|
+
clip-rule="evenodd"
|
|
7
|
+
d="M5.46967 5.46967C5.76256 5.17678 6.23744 5.17678 6.53033 5.46967L12 10.9393L17.4697 5.46967C17.7626 5.17678 18.2374 5.17678 18.5303 5.46967C18.8232 5.76256 18.8232 6.23744 18.5303 6.53033L13.0607 12L18.5303 17.4697C18.8232 17.7626 18.8232 18.2374 18.5303 18.5303C18.2374 18.8232 17.7626 18.8232 17.4697 18.5303L12 13.0607L6.53033 18.5303C6.23744 18.8232 5.76256 18.8232 5.46967 18.5303C5.17678 18.2374 5.17678 17.7626 5.46967 17.4697L10.9393 12L5.46967 6.53033C5.17678 6.23744 5.17678 5.76256 5.46967 5.46967Z"
|
|
8
|
+
></path>
|
|
14
9
|
</svg>
|
|
15
10
|
</template>
|