select

commit

a12dce4d99a6604fcdae820d684b75ff07da7365

parent

d819995010ffa7b9264e6665c497c665b9cf6968

Author

Tobias Bengfort <tobias.bengfort@posteo.de>

Date

2022-07-26 14:48

allow to customize classes

Diffstat

3 files changed, 7 insertions, 3 deletions

diff --git a/select.css b/select.css

@@ -67,10 +67,12 @@
   67    67 	display: inline-block;
   68    68 	margin: 0.1em 0.2em;
   69    69 	margin-inline-start: 0;
   -1    70 	cursor: default;
   -1    71 }
   -1    72 .select__value {
   70    73 	padding: 0 0.2em;
   71    74 	background: rgba(128,128,128,.2);
   72    75 	color: inherit;
   73    76 	border: 1px solid ThreeDShadow;
   74    77 	border-radius: 0.3em;
   75    -1 	cursor: default;
   76    78 }

diff --git a/select.js b/select.js

@@ -54,6 +54,7 @@ export class Select {
   54    54 
   55    55 		this.wrapper.append(this.dropdown);
   56    56 
   -1    57 		this.input.className = this.original.dataset.selectInputClass || '';
   57    58 		this.input.disabled = this.original.disabled;
   58    59 		// this.dropdown.setAttribute('aria-labelledby', 'TODO');
   59    60 
@@ -108,6 +109,7 @@ export class Select {
  108   109 				if (op.selected && op.label) {
  109   110 					var li = create('<li>');
  110   111 					li.textContent = op.label;
   -1   112 					li.className = this.original.dataset.selectValueClass || 'select__value';
  111   113 					li.onclick = () => {
  112   114 						this.original.options[i].selected = false;
  113   115 						li.remove();

diff --git a/tags.js b/tags.js

@@ -33,7 +33,7 @@ export class TagInput {
   33    33 		this.wrapper.append(this.values);
   34    34 
   35    35 		this.input = document.createElement('input');
   36    -1 		this.input.className = 'form-control';
   -1    36 		this.input.className = this.original.dataset.tagsInputClass || '';
   37    37 		this.wrapper.append(this.input);
   38    38 
   39    39 		this.datalist = document.createElement('datalist');
@@ -97,7 +97,7 @@ export class TagInput {
   97    97 			if (op.selected) {
   98    98 				var li = document.createElement('li');
   99    99 				li.textContent = op.label;
  100    -1 				li.className = 'badge bg-secondary me-1';
   -1   100 				li.className = this.original.dataset.tagsValueClass || 'select__value';
  101   101 				li.onclick = () => {
  102   102 					op.selected = false;
  103   103 					li.remove();