bard-tag_field 0.7.0 → 0.7.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.
- checksums.yaml +4 -4
- data/README.md +57 -0
- data/app/assets/javascripts/input-tag.js +17 -15
- data/input-tag/src/input-tag.js +17 -15
- data/lib/bard/tag_field/version.rb +1 -1
- data/lib/bard-tag_field.rb +1 -0
- metadata +3 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 273e3dda2a790b12547aa1aecc3b897fcf114f667fe5e3b5c0d991b41e61c24f
|
|
4
|
+
data.tar.gz: 12174ee0c8167b487dd2081b32220ac257874bf26e1cbaab1d51f7b422497b55
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 1ae7bf9a3ff6260c925d22a890581e1995dd6e1327002abb91f70f9064c3c339f34517b92e5cc2ef24d78fcad67873c5fbb991240815f85bb2acf74333c1ccf1
|
|
7
|
+
data.tar.gz: 43cbe858f1ecad6feed1fd80006bb3939af4c3c1963921973ae24c9cffb52eb67e3620d346b97a46d572325e7a889af07a1aedb78aa62b92899afb54227cafc7
|
data/README.md
CHANGED
|
@@ -168,6 +168,63 @@ Or include the precompiled asset (automatically added by this gem):
|
|
|
168
168
|
//= require input-tag
|
|
169
169
|
```
|
|
170
170
|
|
|
171
|
+
## Styling
|
|
172
|
+
|
|
173
|
+
The custom element uses Shadow DOM, so its internals can't be reached with normal selectors. Theme it by overriding these CSS custom properties on `input-tag` (or any ancestor).
|
|
174
|
+
|
|
175
|
+
### Tag (`<tag-option>`)
|
|
176
|
+
|
|
177
|
+
| Variable | Default | Styles |
|
|
178
|
+
| --- | --- | --- |
|
|
179
|
+
| `--tag-option-bg` | `#588a00` | Tag background |
|
|
180
|
+
| `--tag-option-color` | `#fff` | Tag label color |
|
|
181
|
+
| `--tag-option-button-color` | `rgba(255, 255, 255, 0.6)` | Tag close-button color |
|
|
182
|
+
|
|
183
|
+
### Container
|
|
184
|
+
|
|
185
|
+
| Variable | Default | Styles |
|
|
186
|
+
| --- | --- | --- |
|
|
187
|
+
| `--container-bg` | `rgba(255, 255, 255, 0.8)` | Background of the input area |
|
|
188
|
+
| `--container-border` | `#d0d0d0` | Border color (all sides) |
|
|
189
|
+
| `--container-border-left-width` | `1px` | Left border width (override to add a focus/error accent stripe) |
|
|
190
|
+
| `--container-border-left-color` | `#d0d0d0` | Left border color |
|
|
191
|
+
| `--container-shadow` | `#ccc` | Inset shadow color |
|
|
192
|
+
|
|
193
|
+
### Input
|
|
194
|
+
|
|
195
|
+
| Variable | Default | Styles |
|
|
196
|
+
| --- | --- | --- |
|
|
197
|
+
| `--input-border` | `#d0d0d0` | Dashed border around the input |
|
|
198
|
+
| `--input-bg` | `#fff` | Input background |
|
|
199
|
+
| `--input-color` | `#333` | Input text color |
|
|
200
|
+
|
|
201
|
+
### Suggestions toggle button
|
|
202
|
+
|
|
203
|
+
| Variable | Default | Styles |
|
|
204
|
+
| --- | --- | --- |
|
|
205
|
+
| `--button-border` | `#e0e0e0` | Button border color |
|
|
206
|
+
| `--button-color` | `#666` | Caret color |
|
|
207
|
+
|
|
208
|
+
### Autocomplete menu
|
|
209
|
+
|
|
210
|
+
| Variable | Default | Styles |
|
|
211
|
+
| --- | --- | --- |
|
|
212
|
+
| `--menu-shadow` | `#ccc` | Drop shadow color |
|
|
213
|
+
| `--menu-bg` | `#fff` | Menu background |
|
|
214
|
+
| `--menu-color` | `#555` | Menu item text color |
|
|
215
|
+
| `--menu-hover` | `#e0e0e0` | Menu item hover background |
|
|
216
|
+
|
|
217
|
+
### Example
|
|
218
|
+
|
|
219
|
+
```css
|
|
220
|
+
input-tag {
|
|
221
|
+
--tag-option-bg: #1f6feb;
|
|
222
|
+
--container-border: #ccd;
|
|
223
|
+
--container-border-left-width: 3px;
|
|
224
|
+
--container-border-left-color: #1f6feb;
|
|
225
|
+
}
|
|
226
|
+
```
|
|
227
|
+
|
|
171
228
|
## Browser Support
|
|
172
229
|
|
|
173
230
|
- Modern browsers that support custom elements
|
|
@@ -1001,7 +1001,7 @@ function autocomplete(settings) {
|
|
|
1001
1001
|
const tagOptionStyleSheet = new CSSStyleSheet();
|
|
1002
1002
|
tagOptionStyleSheet.replaceSync(`
|
|
1003
1003
|
:host {
|
|
1004
|
-
background: #588a00;
|
|
1004
|
+
background: var(--tag-option-bg, #588a00);
|
|
1005
1005
|
padding: 3px 10px 3px 10px !important;
|
|
1006
1006
|
margin-right: 4px !important;
|
|
1007
1007
|
margin-bottom: 2px !important;
|
|
@@ -1011,7 +1011,7 @@ tagOptionStyleSheet.replaceSync(`
|
|
|
1011
1011
|
font-size: 14px;
|
|
1012
1012
|
line-height: 1;
|
|
1013
1013
|
min-height: 32px;
|
|
1014
|
-
color: #fff;
|
|
1014
|
+
color: var(--tag-option-color, #fff);
|
|
1015
1015
|
text-transform: none;
|
|
1016
1016
|
border-radius: 3px;
|
|
1017
1017
|
position: relative;
|
|
@@ -1023,7 +1023,7 @@ tagOptionStyleSheet.replaceSync(`
|
|
|
1023
1023
|
background: none;
|
|
1024
1024
|
font-size: 20px;
|
|
1025
1025
|
display: inline-block;
|
|
1026
|
-
color: rgba(255, 255, 255, 0.6);
|
|
1026
|
+
color: var(--tag-option-button-color, rgba(255, 255, 255, 0.6));
|
|
1027
1027
|
right: 10px;
|
|
1028
1028
|
height: 100%;
|
|
1029
1029
|
cursor: pointer;
|
|
@@ -1040,7 +1040,7 @@ inputTagStyleSheet.replaceSync(`
|
|
|
1040
1040
|
padding: 0;
|
|
1041
1041
|
}
|
|
1042
1042
|
#container {
|
|
1043
|
-
background: rgba(255, 255, 255, 0.8);
|
|
1043
|
+
background: var(--container-bg, rgba(255, 255, 255, 0.8));
|
|
1044
1044
|
padding: 6px 6px 3px;
|
|
1045
1045
|
max-height: none;
|
|
1046
1046
|
display: flex;
|
|
@@ -1050,9 +1050,11 @@ inputTagStyleSheet.replaceSync(`
|
|
|
1050
1050
|
min-height: 48px;
|
|
1051
1051
|
line-height: 48px;
|
|
1052
1052
|
width: 100%;
|
|
1053
|
-
border: 1px solid #d0d0d0;
|
|
1053
|
+
border: 1px solid var(--container-border, #d0d0d0);
|
|
1054
|
+
border-left-width: var(--container-border-left-width, 1px);
|
|
1055
|
+
border-left-color: var(--container-border-left-color, #d0d0d0);
|
|
1054
1056
|
outline: 1px solid transparent;
|
|
1055
|
-
box-shadow: #ccc 0 1px 4px 0 inset;
|
|
1057
|
+
box-shadow: var(--container-shadow, #ccc) 0 1px 4px 0 inset;
|
|
1056
1058
|
border-radius: 2px;
|
|
1057
1059
|
cursor: text;
|
|
1058
1060
|
color: #333;
|
|
@@ -1072,21 +1074,21 @@ inputTagStyleSheet.replaceSync(`
|
|
|
1072
1074
|
width: 100%;
|
|
1073
1075
|
line-height: 2;
|
|
1074
1076
|
padding: 0 0 0 10px;
|
|
1075
|
-
border: 1px dashed #d0d0d0;
|
|
1077
|
+
border: 1px dashed var(--input-border, #d0d0d0);
|
|
1076
1078
|
outline: 1px solid transparent;
|
|
1077
|
-
background: #fff;
|
|
1079
|
+
background: var(--input-bg, #fff);
|
|
1078
1080
|
box-shadow: none;
|
|
1079
1081
|
border-radius: 2px;
|
|
1080
1082
|
cursor: text;
|
|
1081
|
-
color: #333;
|
|
1083
|
+
color: var(--input-color, #333);
|
|
1082
1084
|
}
|
|
1083
1085
|
button {
|
|
1084
1086
|
width: 38px;
|
|
1085
1087
|
text-align: center;
|
|
1086
1088
|
line-height: 36px;
|
|
1087
|
-
border: 1px solid #e0e0e0;
|
|
1089
|
+
border: 1px solid var(--button-border, #e0e0e0);
|
|
1088
1090
|
font-size: 20px;
|
|
1089
|
-
color: #666;
|
|
1091
|
+
color: var(--button-color, #666);
|
|
1090
1092
|
position: absolute !important;
|
|
1091
1093
|
z-index: 10;
|
|
1092
1094
|
right: 0px;
|
|
@@ -1111,11 +1113,11 @@ inputTagStyleSheet.replaceSync(`
|
|
|
1111
1113
|
.ui-menu{
|
|
1112
1114
|
margin: 0;
|
|
1113
1115
|
padding: 6px;
|
|
1114
|
-
box-shadow: #ccc 0 1px 6px;
|
|
1116
|
+
box-shadow: var(--menu-shadow, #ccc) 0 1px 6px;
|
|
1115
1117
|
z-index: 2;
|
|
1116
1118
|
display: flex;
|
|
1117
1119
|
flex-wrap: wrap;
|
|
1118
|
-
background: #fff;
|
|
1120
|
+
background: var(--menu-bg, #fff);
|
|
1119
1121
|
list-style: none;
|
|
1120
1122
|
font-size: 14px;
|
|
1121
1123
|
min-width: 200px;
|
|
@@ -1130,10 +1132,10 @@ inputTagStyleSheet.replaceSync(`
|
|
|
1130
1132
|
border-radius: 2px;
|
|
1131
1133
|
width: auto;
|
|
1132
1134
|
cursor: pointer;
|
|
1133
|
-
color: #555;
|
|
1135
|
+
color: var(--menu-color, #555);
|
|
1134
1136
|
}
|
|
1135
1137
|
.ui-menu .ui-menu-item::before{ display: none; }
|
|
1136
|
-
.ui-menu .ui-menu-item:hover{ background: #e0e0e0; }
|
|
1138
|
+
.ui-menu .ui-menu-item:hover{ background: var(--menu-hover, #e0e0e0); }
|
|
1137
1139
|
.ui-state-active{
|
|
1138
1140
|
padding: 0;
|
|
1139
1141
|
border: none;
|
data/input-tag/src/input-tag.js
CHANGED
|
@@ -5,7 +5,7 @@ import autocomplete from "autocompleter"
|
|
|
5
5
|
const tagOptionStyleSheet = new CSSStyleSheet()
|
|
6
6
|
tagOptionStyleSheet.replaceSync(`
|
|
7
7
|
:host {
|
|
8
|
-
background: #588a00;
|
|
8
|
+
background: var(--tag-option-bg, #588a00);
|
|
9
9
|
padding: 3px 10px 3px 10px !important;
|
|
10
10
|
margin-right: 4px !important;
|
|
11
11
|
margin-bottom: 2px !important;
|
|
@@ -15,7 +15,7 @@ tagOptionStyleSheet.replaceSync(`
|
|
|
15
15
|
font-size: 14px;
|
|
16
16
|
line-height: 1;
|
|
17
17
|
min-height: 32px;
|
|
18
|
-
color: #fff;
|
|
18
|
+
color: var(--tag-option-color, #fff);
|
|
19
19
|
text-transform: none;
|
|
20
20
|
border-radius: 3px;
|
|
21
21
|
position: relative;
|
|
@@ -27,7 +27,7 @@ tagOptionStyleSheet.replaceSync(`
|
|
|
27
27
|
background: none;
|
|
28
28
|
font-size: 20px;
|
|
29
29
|
display: inline-block;
|
|
30
|
-
color: rgba(255, 255, 255, 0.6);
|
|
30
|
+
color: var(--tag-option-button-color, rgba(255, 255, 255, 0.6));
|
|
31
31
|
right: 10px;
|
|
32
32
|
height: 100%;
|
|
33
33
|
cursor: pointer;
|
|
@@ -44,7 +44,7 @@ inputTagStyleSheet.replaceSync(`
|
|
|
44
44
|
padding: 0;
|
|
45
45
|
}
|
|
46
46
|
#container {
|
|
47
|
-
background: rgba(255, 255, 255, 0.8);
|
|
47
|
+
background: var(--container-bg, rgba(255, 255, 255, 0.8));
|
|
48
48
|
padding: 6px 6px 3px;
|
|
49
49
|
max-height: none;
|
|
50
50
|
display: flex;
|
|
@@ -54,9 +54,11 @@ inputTagStyleSheet.replaceSync(`
|
|
|
54
54
|
min-height: 48px;
|
|
55
55
|
line-height: 48px;
|
|
56
56
|
width: 100%;
|
|
57
|
-
border: 1px solid #d0d0d0;
|
|
57
|
+
border: 1px solid var(--container-border, #d0d0d0);
|
|
58
|
+
border-left-width: var(--container-border-left-width, 1px);
|
|
59
|
+
border-left-color: var(--container-border-left-color, #d0d0d0);
|
|
58
60
|
outline: 1px solid transparent;
|
|
59
|
-
box-shadow: #ccc 0 1px 4px 0 inset;
|
|
61
|
+
box-shadow: var(--container-shadow, #ccc) 0 1px 4px 0 inset;
|
|
60
62
|
border-radius: 2px;
|
|
61
63
|
cursor: text;
|
|
62
64
|
color: #333;
|
|
@@ -76,21 +78,21 @@ inputTagStyleSheet.replaceSync(`
|
|
|
76
78
|
width: 100%;
|
|
77
79
|
line-height: 2;
|
|
78
80
|
padding: 0 0 0 10px;
|
|
79
|
-
border: 1px dashed #d0d0d0;
|
|
81
|
+
border: 1px dashed var(--input-border, #d0d0d0);
|
|
80
82
|
outline: 1px solid transparent;
|
|
81
|
-
background: #fff;
|
|
83
|
+
background: var(--input-bg, #fff);
|
|
82
84
|
box-shadow: none;
|
|
83
85
|
border-radius: 2px;
|
|
84
86
|
cursor: text;
|
|
85
|
-
color: #333;
|
|
87
|
+
color: var(--input-color, #333);
|
|
86
88
|
}
|
|
87
89
|
button {
|
|
88
90
|
width: 38px;
|
|
89
91
|
text-align: center;
|
|
90
92
|
line-height: 36px;
|
|
91
|
-
border: 1px solid #e0e0e0;
|
|
93
|
+
border: 1px solid var(--button-border, #e0e0e0);
|
|
92
94
|
font-size: 20px;
|
|
93
|
-
color: #666;
|
|
95
|
+
color: var(--button-color, #666);
|
|
94
96
|
position: absolute !important;
|
|
95
97
|
z-index: 10;
|
|
96
98
|
right: 0px;
|
|
@@ -115,11 +117,11 @@ inputTagStyleSheet.replaceSync(`
|
|
|
115
117
|
.ui-menu{
|
|
116
118
|
margin: 0;
|
|
117
119
|
padding: 6px;
|
|
118
|
-
box-shadow: #ccc 0 1px 6px;
|
|
120
|
+
box-shadow: var(--menu-shadow, #ccc) 0 1px 6px;
|
|
119
121
|
z-index: 2;
|
|
120
122
|
display: flex;
|
|
121
123
|
flex-wrap: wrap;
|
|
122
|
-
background: #fff;
|
|
124
|
+
background: var(--menu-bg, #fff);
|
|
123
125
|
list-style: none;
|
|
124
126
|
font-size: 14px;
|
|
125
127
|
min-width: 200px;
|
|
@@ -134,10 +136,10 @@ inputTagStyleSheet.replaceSync(`
|
|
|
134
136
|
border-radius: 2px;
|
|
135
137
|
width: auto;
|
|
136
138
|
cursor: pointer;
|
|
137
|
-
color: #555;
|
|
139
|
+
color: var(--menu-color, #555);
|
|
138
140
|
}
|
|
139
141
|
.ui-menu .ui-menu-item::before{ display: none; }
|
|
140
|
-
.ui-menu .ui-menu-item:hover{ background: #e0e0e0; }
|
|
142
|
+
.ui-menu .ui-menu-item:hover{ background: var(--menu-hover, #e0e0e0); }
|
|
141
143
|
.ui-state-active{
|
|
142
144
|
padding: 0;
|
|
143
145
|
border: none;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
require "bard/tag_field"
|
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: bard-tag_field
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.7.
|
|
4
|
+
version: 0.7.1
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Micah Geisel
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: exe
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2026-05-
|
|
11
|
+
date: 2026-05-17 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: rails
|
|
@@ -183,6 +183,7 @@ files:
|
|
|
183
183
|
- input-tag/test/nested-datalist.test.js
|
|
184
184
|
- input-tag/test/value-label-separation.test.js
|
|
185
185
|
- input-tag/web-test-runner.config.mjs
|
|
186
|
+
- lib/bard-tag_field.rb
|
|
186
187
|
- lib/bard/tag_field.rb
|
|
187
188
|
- lib/bard/tag_field/cucumber.rb
|
|
188
189
|
- lib/bard/tag_field/field.rb
|