@empathyco/x-components 3.0.0-alpha.231 → 3.0.0-alpha.232
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/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,19 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file. See
|
|
4
4
|
[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [3.0.0-alpha.232](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.231...@empathyco/x-components@3.0.0-alpha.232) (2022-11-28)
|
|
7
|
+
|
|
8
|
+
### Features
|
|
9
|
+
|
|
10
|
+
- add `Highlight` component (#872)
|
|
11
|
+
([1b5aa57](https://github.com/empathyco/x/commit/1b5aa5793b7916ec0433b4110b7ef355f882f4f6)),
|
|
12
|
+
closes [EX-7468](https://searchbroker.atlassian.net/browse/EX-7468)
|
|
13
|
+
|
|
14
|
+
# Change Log
|
|
15
|
+
|
|
16
|
+
All notable changes to this project will be documented in this file. See
|
|
17
|
+
[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
18
|
+
|
|
6
19
|
## [3.0.0-alpha.231](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.230...@empathyco/x-components@3.0.0-alpha.231) (2022-11-28)
|
|
7
20
|
|
|
8
21
|
### Features
|
|
@@ -0,0 +1,100 @@
|
|
|
1
|
+
---
|
|
2
|
+
|
|
3
|
+
title: Highlight
|
|
4
|
+
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
# Highlight
|
|
8
|
+
|
|
9
|
+
Highlights the given part of the text. The component is smart enough to do matches
|
|
10
|
+
between special characters like tilde, cedilla, eñe, capital letters...
|
|
11
|
+
|
|
12
|
+
## Props
|
|
13
|
+
|
|
14
|
+
| Name | Description | Type | Default |
|
|
15
|
+
| ----------------------- | ------------------------------------------------------------------------ | ------------------- | --------------- |
|
|
16
|
+
| <code>text</code> | The text to highlight some part of it. | <code>string</code> | <code>''</code> |
|
|
17
|
+
| <code>highlight</code> | The part of the text to be highlighted. | <code>string</code> | <code>''</code> |
|
|
18
|
+
| <code>matchClass</code> | CSS Class to add when the `text` string contains the `highlight` string. | <code>string</code> | <code>''</code> |
|
|
19
|
+
|
|
20
|
+
## Slots
|
|
21
|
+
|
|
22
|
+
| Name | Description | Bindings<br />(name - type - description) |
|
|
23
|
+
| -------------------- | ----------- | ----------------------------------------- |
|
|
24
|
+
| <code>default</code> | | <br /><br /> |
|
|
25
|
+
|
|
26
|
+
## Events
|
|
27
|
+
|
|
28
|
+
This component emits no events.
|
|
29
|
+
|
|
30
|
+
## See it in action
|
|
31
|
+
|
|
32
|
+
Here you have a basic example of how the highlight component is rendered.
|
|
33
|
+
|
|
34
|
+
_Type any term in the input field to try it out!_
|
|
35
|
+
|
|
36
|
+
```vue live
|
|
37
|
+
<template>
|
|
38
|
+
<div>
|
|
39
|
+
<input v-model="highlight" />
|
|
40
|
+
<Highlight :highlight="highlight" text="milanesa" />
|
|
41
|
+
</div>
|
|
42
|
+
</template>
|
|
43
|
+
|
|
44
|
+
<script>
|
|
45
|
+
import { Highlight } from "@empathyco/x-components";
|
|
46
|
+
|
|
47
|
+
export default {
|
|
48
|
+
name: "HighlightDemo",
|
|
49
|
+
components: {
|
|
50
|
+
Highlight
|
|
51
|
+
},
|
|
52
|
+
data() {
|
|
53
|
+
return {
|
|
54
|
+
highlight: ""
|
|
55
|
+
};
|
|
56
|
+
}
|
|
57
|
+
};
|
|
58
|
+
</script>
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
### Customise the layout
|
|
62
|
+
|
|
63
|
+
This component allows to customise the whole layout. Be careful as due to Vue 2 limitations you can
|
|
64
|
+
only render a single root element.
|
|
65
|
+
|
|
66
|
+
```vue live
|
|
67
|
+
<template>
|
|
68
|
+
<div>
|
|
69
|
+
<input v-model="highlight" />
|
|
70
|
+
<Highlight
|
|
71
|
+
:highlight="highlight"
|
|
72
|
+
text="Entraña"
|
|
73
|
+
#default="{ hasMatch, start, match, end, text }"
|
|
74
|
+
>
|
|
75
|
+
<span class="custom-layout" v-if="hasMatch">
|
|
76
|
+
<strong>{{ start }}</strong>
|
|
77
|
+
{{ match }}
|
|
78
|
+
<strong>{{ end }}</strong>
|
|
79
|
+
</span>
|
|
80
|
+
<span v-else>{{ text }}</span>
|
|
81
|
+
</Highlight>
|
|
82
|
+
</div>
|
|
83
|
+
</template>
|
|
84
|
+
|
|
85
|
+
<script>
|
|
86
|
+
import { Highlight } from "@empathyco/x-components";
|
|
87
|
+
|
|
88
|
+
export default {
|
|
89
|
+
name: "HighlightDemo",
|
|
90
|
+
components: {
|
|
91
|
+
Highlight
|
|
92
|
+
},
|
|
93
|
+
data() {
|
|
94
|
+
return {
|
|
95
|
+
highlight: "entran"
|
|
96
|
+
};
|
|
97
|
+
}
|
|
98
|
+
};
|
|
99
|
+
</script>
|
|
100
|
+
```
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@empathyco/x-components",
|
|
3
|
-
"version": "3.0.0-alpha.
|
|
3
|
+
"version": "3.0.0-alpha.232",
|
|
4
4
|
"description": "Empathy X Components",
|
|
5
5
|
"author": "Empathy Systems Corporation S.L.",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -85,7 +85,7 @@
|
|
|
85
85
|
"@cypress/vue": "~2.2.4",
|
|
86
86
|
"@cypress/webpack-dev-server": "~1.8.4",
|
|
87
87
|
"@empathyco/x-adapter-platform": "^1.0.0-alpha.44",
|
|
88
|
-
"@empathyco/x-tailwindcss": "^0.2.0-alpha.
|
|
88
|
+
"@empathyco/x-tailwindcss": "^0.2.0-alpha.30",
|
|
89
89
|
"@microsoft/api-documenter": "~7.15.3",
|
|
90
90
|
"@microsoft/api-extractor": "~7.19.4",
|
|
91
91
|
"@rollup/plugin-commonjs": "~21.0.1",
|
|
@@ -135,5 +135,5 @@
|
|
|
135
135
|
"access": "public",
|
|
136
136
|
"directory": "dist"
|
|
137
137
|
},
|
|
138
|
-
"gitHead": "
|
|
138
|
+
"gitHead": "1f8d1974224849377a90117703484ee644b6e2de"
|
|
139
139
|
}
|