@moyarich/console-addon-search 0.1.0 → 0.2.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 +7 -1
- package/dist/components/ConsoleSearchControls/ConsoleSearchControls.d.cts +8 -0
- package/dist/components/ConsoleSearchControls/ConsoleSearchControls.d.ts +6 -3
- package/dist/components/ConsoleSearchHighlight/ConsoleSearchHighlight.d.cts +6 -0
- package/dist/components/ConsoleSearchHighlight/ConsoleSearchHighlight.d.ts +2 -2
- package/dist/console-addon-search.css +106 -29
- package/dist/index.cjs +261 -1842
- package/dist/index.d.cts +50 -0
- package/dist/index.d.ts +9 -3
- package/dist/index.js +262 -1843
- package/dist/locales/en.json +14 -0
- package/dist/locales/es.json +14 -0
- package/dist/locales/fr.json +14 -0
- package/dist/locales/pt.json +14 -0
- package/dist/localization.d.cts +4 -0
- package/dist/localization.d.ts +4 -0
- package/dist/styles.css +169 -0
- package/package.json +19 -10
package/README.md
CHANGED
|
@@ -2,12 +2,18 @@
|
|
|
2
2
|
|
|
3
3
|
Search and highlight output. Find text matches, move between occurrences, and use optional controls and an observable controller.
|
|
4
4
|
|
|
5
|
+
[Documentation and live examples](https://moyarich.github.io/console/)
|
|
6
|
+
|
|
5
7
|
## Install
|
|
6
8
|
|
|
7
9
|
```bash
|
|
8
|
-
npm install @moyarich/console @moyarich/console-addon-search
|
|
10
|
+
npm install @moyarich/console @moyarich/console-addon-search react
|
|
9
11
|
```
|
|
10
12
|
|
|
13
|
+
Configure the `@moyarich` scope and authenticate with GitHub Packages as described in the [installation guide](../../../README.md#installation).
|
|
14
|
+
|
|
15
|
+
Required peer dependencies: `@moyarich/console-core@^0.2.0`, `react@>=18`.
|
|
16
|
+
|
|
11
17
|
## Quick start
|
|
12
18
|
|
|
13
19
|
```tsx
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { type AddonTranslations } from "../../localization.cjs";
|
|
2
|
+
import type { ConsoleSearchController } from "../../index.cjs";
|
|
3
|
+
|
|
4
|
+
export declare function ConsoleSearchControls({ controller, locale, translations, }: {
|
|
5
|
+
controller: ConsoleSearchController;
|
|
6
|
+
locale?: string;
|
|
7
|
+
translations?: AddonTranslations;
|
|
8
|
+
}): import("react").JSX.Element;
|
|
@@ -1,5 +1,8 @@
|
|
|
1
|
-
import type
|
|
2
|
-
import "
|
|
3
|
-
|
|
1
|
+
import { type AddonTranslations } from "../../localization.js";
|
|
2
|
+
import type { ConsoleSearchController } from "../../index.js";
|
|
3
|
+
|
|
4
|
+
export declare function ConsoleSearchControls({ controller, locale, translations, }: {
|
|
4
5
|
controller: ConsoleSearchController;
|
|
6
|
+
locale?: string;
|
|
7
|
+
translations?: AddonTranslations;
|
|
5
8
|
}): import("react").JSX.Element;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import type { ConsoleSearchController } from "../../index";
|
|
2
|
-
|
|
1
|
+
import type { ConsoleSearchController } from "../../index.js";
|
|
2
|
+
|
|
3
3
|
export declare function ConsoleSearchHighlight({ controller, index, }: {
|
|
4
4
|
controller: ConsoleSearchController;
|
|
5
5
|
index: number;
|
|
@@ -6,62 +6,139 @@
|
|
|
6
6
|
);
|
|
7
7
|
--_console-search-color: var(
|
|
8
8
|
--console-search-color,
|
|
9
|
-
var(--console-panel-color,
|
|
9
|
+
var(--console-panel-color, light-dark(#27272a, #f4f4f5))
|
|
10
10
|
);
|
|
11
11
|
--_console-search-border-color: var(
|
|
12
12
|
--console-search-border-color,
|
|
13
|
-
var(--
|
|
14
|
-
);
|
|
15
|
-
--_console-search-focus-color: var(
|
|
16
|
-
--console-search-focus-color,
|
|
17
|
-
var(--console-header-icon-color, currentColor)
|
|
13
|
+
color-mix(in srgb, var(--_console-search-color) 16%, transparent)
|
|
18
14
|
);
|
|
15
|
+
--_console-search-focus-color: var(--console-search-focus-color, #635bff);
|
|
19
16
|
|
|
20
|
-
|
|
21
|
-
flex
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
17
|
+
box-sizing: border-box;
|
|
18
|
+
flex: 1 1 22rem;
|
|
19
|
+
min-width: 0;
|
|
20
|
+
display: grid;
|
|
21
|
+
gap: 8px;
|
|
22
|
+
padding: 12px;
|
|
26
23
|
background: var(--_console-search-background-color);
|
|
27
24
|
color: var(--_console-search-color);
|
|
28
|
-
font:
|
|
25
|
+
font:
|
|
26
|
+
400 12px/1.4 ui-sans-serif,
|
|
27
|
+
system-ui,
|
|
28
|
+
sans-serif;
|
|
29
29
|
}
|
|
30
30
|
|
|
31
|
-
.console-search-controls
|
|
32
|
-
display:
|
|
31
|
+
.console-search-controls-row {
|
|
32
|
+
display: flex;
|
|
33
|
+
align-items: center;
|
|
34
|
+
gap: 4px;
|
|
35
|
+
min-width: 0;
|
|
36
|
+
padding-inline-end: 4px;
|
|
37
|
+
border: 1px solid var(--_console-search-border-color);
|
|
38
|
+
border-radius: 8px;
|
|
39
|
+
background: color-mix(
|
|
40
|
+
in srgb,
|
|
41
|
+
var(--_console-search-color) 3%,
|
|
42
|
+
var(--_console-search-background-color)
|
|
43
|
+
);
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.console-search-controls-field {
|
|
47
|
+
display: flex;
|
|
33
48
|
align-items: center;
|
|
34
|
-
gap:
|
|
49
|
+
gap: 8px;
|
|
50
|
+
flex: 1;
|
|
51
|
+
min-width: 0;
|
|
52
|
+
padding-inline-start: 10px;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.console-search-controls-field svg {
|
|
56
|
+
flex-shrink: 0;
|
|
57
|
+
opacity: 0.6;
|
|
35
58
|
}
|
|
36
59
|
|
|
37
60
|
.console-search-controls input[type="search"] {
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
61
|
+
box-sizing: border-box;
|
|
62
|
+
width: 100%;
|
|
63
|
+
min-width: 0;
|
|
64
|
+
border: 0;
|
|
65
|
+
padding: 9px 0;
|
|
66
|
+
background: transparent;
|
|
67
|
+
color: inherit;
|
|
68
|
+
font: inherit;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.console-search-controls input::placeholder {
|
|
72
|
+
color: inherit;
|
|
73
|
+
opacity: 0.55;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.console-search-controls-row:focus-within {
|
|
77
|
+
border-color: var(--_console-search-focus-color);
|
|
78
|
+
box-shadow: 0 0 0 2px
|
|
79
|
+
color-mix(in srgb, var(--_console-search-focus-color) 15%, transparent);
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.console-search-controls-row [role="status"] {
|
|
83
|
+
max-width: 10rem;
|
|
84
|
+
font-size: 11px;
|
|
85
|
+
opacity: 0.65;
|
|
45
86
|
}
|
|
46
87
|
|
|
47
88
|
.console-search-controls button {
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
padding: 0
|
|
52
|
-
border
|
|
89
|
+
flex-shrink: 0;
|
|
90
|
+
width: 28px;
|
|
91
|
+
height: 28px;
|
|
92
|
+
padding: 0;
|
|
93
|
+
border: 0;
|
|
94
|
+
border-radius: 5px;
|
|
95
|
+
background: transparent;
|
|
96
|
+
color: inherit;
|
|
97
|
+
font: inherit;
|
|
98
|
+
font-size: 16px;
|
|
53
99
|
cursor: pointer;
|
|
54
100
|
}
|
|
55
101
|
|
|
102
|
+
.console-search-controls button:hover:not(:disabled) {
|
|
103
|
+
background: color-mix(in srgb, var(--_console-search-color) 9%, transparent);
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
.console-search-controls-options {
|
|
107
|
+
display: flex;
|
|
108
|
+
flex-wrap: wrap;
|
|
109
|
+
gap: 6px 14px;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
.console-search-controls-options label {
|
|
113
|
+
display: inline-flex;
|
|
114
|
+
align-items: center;
|
|
115
|
+
gap: 5px;
|
|
116
|
+
cursor: pointer;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
.console-search-controls input[type="checkbox"] {
|
|
120
|
+
margin: 0;
|
|
121
|
+
accent-color: var(--_console-search-focus-color);
|
|
122
|
+
}
|
|
123
|
+
|
|
56
124
|
.console-search-controls :focus-visible {
|
|
57
125
|
outline: 2px solid var(--_console-search-focus-color);
|
|
58
126
|
outline-offset: 2px;
|
|
59
127
|
}
|
|
60
128
|
|
|
129
|
+
.console-search-controls input[type="search"]:focus-visible {
|
|
130
|
+
outline: none;
|
|
131
|
+
}
|
|
132
|
+
|
|
61
133
|
.console-search-controls button:disabled {
|
|
62
|
-
opacity: 0.
|
|
134
|
+
opacity: 0.3;
|
|
63
135
|
cursor: default;
|
|
64
136
|
}
|
|
137
|
+
|
|
138
|
+
.console-search-controls-error {
|
|
139
|
+
color: var(--console-error-color, light-dark(#b42318, #fda4af));
|
|
140
|
+
overflow-wrap: anywhere;
|
|
141
|
+
}
|
|
65
142
|
/* Search match colors can be themed independently from the Console panel. */
|
|
66
143
|
.console-search-highlight {
|
|
67
144
|
--_console-search-highlight-background-color: var(
|