@ember-eui/core 1.6.3 → 2.0.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.
package/README.md
CHANGED
|
@@ -8,20 +8,15 @@ For icons to work you will need to:
|
|
|
8
8
|
|
|
9
9
|
- install `ember-svg-jar`
|
|
10
10
|
- add the following `ember-svg-jar` options to your `ember-cli-build.js`:
|
|
11
|
-
- NOTICE: we are currently using a fork from ember-svg-jar, for the hbs strategy
|
|
12
|
-
`"ember-svg-jar": "https://github.com/betocantu93/ember-svg-jar.git#add-bundle-flag"`
|
|
13
11
|
|
|
14
12
|
```javascript
|
|
15
13
|
// ember-cli-build.js
|
|
16
14
|
var app = new EmberApp(defaults, {
|
|
17
15
|
...
|
|
18
16
|
svgJar: {
|
|
19
|
-
strategy: ['hbs'],
|
|
20
|
-
hbs: {
|
|
21
|
-
stripPath: false,
|
|
22
|
-
},
|
|
23
17
|
sourceDirs: [
|
|
24
18
|
'public/assets',
|
|
19
|
+
'../node_modules/@ember-eui/core/public',
|
|
25
20
|
'node_modules/@elastic/eui/lib/components/icon',
|
|
26
21
|
],
|
|
27
22
|
},
|
|
@@ -30,8 +25,6 @@ var app = new EmberApp(defaults, {
|
|
|
30
25
|
|
|
31
26
|
```
|
|
32
27
|
|
|
33
|
-
We use `ember-svg-jar` to create SVGs as TOC (Template only components) with the `hbs` strategy. For fingerprinting and such, `ember-svg-jar#add-bundle-flag` exposes an `svg-jar` service, with a `resolveAsset` callback/hook, so you can implement your own resolver, you could use for example [ember-cli-resolve-assset](https://github.com/buschtoens/ember-cli-resolve-asset).
|
|
34
|
-
|
|
35
28
|
## Compatibility
|
|
36
29
|
|
|
37
30
|
- Ember.js v3.12 or above
|
|
@@ -16,24 +16,26 @@
|
|
|
16
16
|
...attributes
|
|
17
17
|
/>
|
|
18
18
|
{{else}}
|
|
19
|
-
<
|
|
20
|
-
|
|
21
|
-
@loadingSvg={{this.emptyIcon}}
|
|
22
|
-
class={{class-names
|
|
23
|
-
this.optionalColorClass
|
|
24
|
-
(if this.isAppIcon "euiIcon--app")
|
|
25
|
-
componentName="EuiIcon"
|
|
26
|
-
size=this.size
|
|
27
|
-
}}
|
|
28
|
-
style={{this.optionalCustomStyles}}
|
|
29
|
-
tabIndex={{this.tabIndex}}
|
|
30
|
-
role="image"
|
|
31
|
-
aria-hidden={{if this.isAriaHidden true}}
|
|
32
|
-
aria-label={{if @aria-label @aria-label this.titleId}}
|
|
33
|
-
aria-labelledby={{if @aria-labelledby @aria-labelledby this.titleId}}
|
|
34
|
-
@title={{@title}}
|
|
35
|
-
@onIconLoad={{@onIconLoad}}
|
|
19
|
+
<div
|
|
20
|
+
class={{class-names "euiIcon" (if this.isAppIcon "euiIcon--app")}}
|
|
36
21
|
...attributes
|
|
37
|
-
|
|
22
|
+
>
|
|
23
|
+
{{svg-jar
|
|
24
|
+
this.icon
|
|
25
|
+
class=(class-names
|
|
26
|
+
this.optionalColorClass
|
|
27
|
+
(if this.isAppIcon "euiIcon--app")
|
|
28
|
+
componentName="EuiIcon"
|
|
29
|
+
addBase=false
|
|
30
|
+
size=this.size
|
|
31
|
+
)
|
|
32
|
+
role="image"
|
|
33
|
+
aria-hidden=(if this.isAriaHidden "true")
|
|
34
|
+
aria-label=(if @aria-label @aria-label this.titleId)
|
|
35
|
+
aria-labelledby=(if @aria-labelledby @aria-labelledby this.titleId)
|
|
36
|
+
tabindex=this.tabIndex
|
|
37
|
+
style=this.optionalCustomStyles
|
|
38
|
+
}}
|
|
39
|
+
</div>
|
|
38
40
|
{{/if}}
|
|
39
41
|
{{/if}}
|
|
@@ -118,10 +118,7 @@ export default class EuiIcon extends Component<EuiIconArgs> {
|
|
|
118
118
|
}
|
|
119
119
|
|
|
120
120
|
getEuiIconSvgPath(type: EuiIconType): string {
|
|
121
|
-
|
|
122
|
-
const svgPath = config?.['@ember-eui/core']?.svgPath || 'svg/assets/';
|
|
123
|
-
const euiIcon = typeToPathMap[type].replace(/_/g, '-').toLowerCase();
|
|
124
|
-
return `${svgPath}${euiIcon}`;
|
|
121
|
+
return typeToPathMap[type].replace('tokens/', '');
|
|
125
122
|
}
|
|
126
123
|
|
|
127
124
|
get isAppIcon(): string | boolean {
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
/* This is to avoid bumping elastic eui styles to 3.2.x , delete when possible. */
|
|
2
|
+
.euiAvatar {
|
|
3
|
+
-webkit-flex-shrink: 0;
|
|
4
|
+
flex-shrink: 0;
|
|
5
|
+
display: -webkit-inline-flex;
|
|
6
|
+
display: inline-flex;
|
|
7
|
+
-webkit-justify-content: center;
|
|
8
|
+
justify-content: center;
|
|
9
|
+
-webkit-align-items: center;
|
|
10
|
+
align-items: center;
|
|
11
|
+
background-size: cover;
|
|
12
|
+
text-align: center;
|
|
13
|
+
vertical-align: middle;
|
|
14
|
+
overflow-x: hidden;
|
|
15
|
+
font-weight: 500;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.euiMarkdownEditor--fullHeight {
|
|
19
|
+
display: -webkit-flex;
|
|
20
|
+
display: flex;
|
|
21
|
+
-webkit-flex-direction: column;
|
|
22
|
+
flex-direction: column;
|
|
23
|
+
height: 100%;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.euiMarkdownEditor--isPreviewing .euiMarkdownEditor__toggleContainer {
|
|
27
|
+
display: none;
|
|
28
|
+
}
|
|
@@ -1,30 +1 @@
|
|
|
1
|
-
/* This is to avoid bumping elastic eui styles to 3.2.x , delete when possible. */
|
|
2
|
-
.euiAvatar {
|
|
3
|
-
-webkit-flex-shrink: 0;
|
|
4
|
-
flex-shrink: 0;
|
|
5
|
-
display: -webkit-inline-flex;
|
|
6
|
-
display: inline-flex;
|
|
7
|
-
-webkit-justify-content: center;
|
|
8
|
-
justify-content: center;
|
|
9
|
-
-webkit-align-items: center;
|
|
10
|
-
align-items: center;
|
|
11
|
-
background-size: cover;
|
|
12
|
-
text-align: center;
|
|
13
|
-
vertical-align: middle;
|
|
14
|
-
overflow-x: hidden;
|
|
15
|
-
font-weight: 500;
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
.euiMarkdownEditor--fullHeight {
|
|
19
|
-
display: -webkit-flex;
|
|
20
|
-
display: flex;
|
|
21
|
-
-webkit-flex-direction: column;
|
|
22
|
-
flex-direction: column;
|
|
23
|
-
height: 100%;
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
.euiMarkdownEditor--isPreviewing .euiMarkdownEditor__toggleContainer {
|
|
27
|
-
display: none;
|
|
28
|
-
}
|
|
29
|
-
|
|
30
1
|
@import 'ember-eui-components';
|
|
@@ -1,53 +1,68 @@
|
|
|
1
1
|
# Demo
|
|
2
2
|
|
|
3
3
|
```hbs template
|
|
4
|
-
<EuiText style=
|
|
5
|
-
You can hover on the icon below, open the network tab, all svgs are loaded on
|
|
4
|
+
<EuiText style='cursor: pointer;' {{on 'mousemove' this.update}}>
|
|
5
|
+
You can hover on the icon below, open the network tab, all svgs are loaded on
|
|
6
|
+
demand!
|
|
6
7
|
<EuiIcon @type={{this.icon}} />
|
|
7
|
-
<EuiIcon @type={{this.icon}} @size=
|
|
8
|
-
<EuiIcon @type={{this.icon}} @size=
|
|
9
|
-
<EuiIcon @type={{this.icon}} @size=
|
|
10
|
-
<EuiIcon @type={{this.icon}} @size=
|
|
8
|
+
<EuiIcon @type={{this.icon}} @size='m' />
|
|
9
|
+
<EuiIcon @type={{this.icon}} @size='l' />
|
|
10
|
+
<EuiIcon @type={{this.icon}} @size='xl' />
|
|
11
|
+
<EuiIcon @type={{this.icon}} @size='xxl' />
|
|
11
12
|
</EuiText>
|
|
12
13
|
<br />
|
|
13
|
-
<EuiIcon @type=
|
|
14
|
-
<EuiIcon @type=
|
|
15
|
-
<EuiIcon @type=
|
|
16
|
-
<EuiIcon @type=
|
|
17
|
-
<EuiIcon @type=
|
|
14
|
+
<EuiIcon @type='logoGolang' />
|
|
15
|
+
<EuiIcon @type='logoGolang' @size='m' />
|
|
16
|
+
<EuiIcon @type='logoGolang' @size='l' />
|
|
17
|
+
<EuiIcon @type='logoGolang' @size='xl' />
|
|
18
|
+
<EuiIcon @type='logoGolang' @size='xxl' />
|
|
18
19
|
<br />
|
|
19
|
-
<EuiIcon @type=
|
|
20
|
-
<EuiIcon @type=
|
|
21
|
-
<EuiIcon @type=
|
|
22
|
-
<EuiIcon @type=
|
|
23
|
-
<EuiIcon @type=
|
|
20
|
+
<EuiIcon @type='logoRedis' @size='s' />
|
|
21
|
+
<EuiIcon @type='logoRedis' @size='m' />
|
|
22
|
+
<EuiIcon @type='logoRedis' @size='l' />
|
|
23
|
+
<EuiIcon @type='logoRedis' @size='xl' />
|
|
24
|
+
<EuiIcon @type='logoRedis' @size='xxl' />
|
|
24
25
|
<br />
|
|
25
|
-
<EuiIcon @type=
|
|
26
|
-
<EuiIcon @type=
|
|
27
|
-
<EuiIcon @type=
|
|
28
|
-
<EuiIcon @type=
|
|
29
|
-
<EuiIcon @type=
|
|
26
|
+
<EuiIcon @type='logoAWS' @size='s' />
|
|
27
|
+
<EuiIcon @type='logoAWS' @size='m' />
|
|
28
|
+
<EuiIcon @type='logoAWS' @size='l' />
|
|
29
|
+
<EuiIcon @type='logoAWS' @size='xl' />
|
|
30
|
+
<EuiIcon @type='logoAWS' @size='xxl' />
|
|
30
31
|
<br />
|
|
31
|
-
<EuiIcon @type=
|
|
32
|
-
<EuiIcon @type=
|
|
33
|
-
<EuiIcon @type=
|
|
34
|
-
<EuiIcon @type=
|
|
35
|
-
<EuiIcon @type=
|
|
32
|
+
<EuiIcon @type='/assets/ember.svg' @size='s' />
|
|
33
|
+
<EuiIcon @type='/assets/ember.svg' @size='m' />
|
|
34
|
+
<EuiIcon @type='/assets/ember.svg' @size='l' />
|
|
35
|
+
<EuiIcon @type='/assets/ember.svg' @size='xl' />
|
|
36
|
+
<EuiIcon @type='/assets/ember.svg' @size='xxl' />
|
|
36
37
|
<br />
|
|
37
|
-
<EuiIcon
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
<EuiIcon
|
|
38
|
+
<EuiIcon
|
|
39
|
+
@type='https://www.flaticon.es/svg/static/icons/svg/3445/3445045.svg'
|
|
40
|
+
@size='s'
|
|
41
|
+
/>
|
|
42
|
+
<EuiIcon
|
|
43
|
+
@type='https://www.flaticon.es/svg/static/icons/svg/3445/3445045.svg'
|
|
44
|
+
@size='m'
|
|
45
|
+
/>
|
|
46
|
+
<EuiIcon
|
|
47
|
+
@type='https://www.flaticon.es/svg/static/icons/svg/3445/3445045.svg'
|
|
48
|
+
@size='l'
|
|
49
|
+
/>
|
|
50
|
+
<EuiIcon
|
|
51
|
+
@type='https://www.flaticon.es/svg/static/icons/svg/3445/3445045.svg'
|
|
52
|
+
@size='xl'
|
|
53
|
+
/>
|
|
54
|
+
<EuiIcon
|
|
55
|
+
@type='https://www.flaticon.es/svg/static/icons/svg/3445/3445045.svg'
|
|
56
|
+
@size='xxl'
|
|
57
|
+
/>
|
|
42
58
|
<br />
|
|
43
|
-
<EuiIcon @type=
|
|
44
|
-
<EuiIcon @type=
|
|
45
|
-
<EuiIcon @type=
|
|
46
|
-
<EuiIcon @type=
|
|
47
|
-
<EuiIcon @type=
|
|
59
|
+
<EuiIcon @type='flag' @size='s' @color='green' />
|
|
60
|
+
<EuiIcon @type='flag' @size='m' @color='white' />
|
|
61
|
+
<EuiIcon @type='flag' @size='l' @color='red' />
|
|
62
|
+
<EuiIcon @type='flag' @size='xl' @color='green' />
|
|
63
|
+
<EuiIcon @type='flag' @size='xxl' @color='white' />
|
|
48
64
|
```
|
|
49
65
|
|
|
50
|
-
|
|
51
66
|
```js component
|
|
52
67
|
import Component from '@glimmer/component';
|
|
53
68
|
import { tracked } from '@glimmer/tracking';
|
|
@@ -65,5 +80,4 @@ export default class DemoIconComponent extends Component {
|
|
|
65
80
|
this.icon = this.icons[Math.floor(Math.random() * this.icons.length)];
|
|
66
81
|
}
|
|
67
82
|
}
|
|
68
|
-
|
|
69
|
-
```
|
|
83
|
+
```
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ember-eui/core",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "2.0.0",
|
|
4
4
|
"description": "Ember Components for Elastic UI",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"ember-addon",
|
|
@@ -75,7 +75,7 @@
|
|
|
75
75
|
"ember-set-body-class": "^1.0.2",
|
|
76
76
|
"ember-set-helper": "^2.0.0",
|
|
77
77
|
"ember-style-modifier": "^0.6.0",
|
|
78
|
-
"ember-svg-jar": "
|
|
78
|
+
"ember-svg-jar": "^2.3.4",
|
|
79
79
|
"ember-truth-helpers": "^2.1.0",
|
|
80
80
|
"highlight.js": "^9.18.5",
|
|
81
81
|
"lodash-es": "^4.17.21",
|
|
@@ -154,5 +154,5 @@
|
|
|
154
154
|
"volta": {
|
|
155
155
|
"node": "12.22.1"
|
|
156
156
|
},
|
|
157
|
-
"gitHead": "
|
|
157
|
+
"gitHead": "a225f53d9f2212e3eb5ab0c28daeabc5624031ab"
|
|
158
158
|
}
|