@quandis/qbo4.configuration 4.0.1-CI-20241014-230455 → 4.0.1-CI-20241016-222653

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.
Files changed (22) hide show
  1. package/package.json +3 -2
  2. package/scss/qbo-configuration.scss +56 -1
  3. package/src/qbo-config-editor.d.ts +6 -0
  4. package/src/qbo-config-editor.js +53 -39
  5. package/src/qbo-config-editor.js.map +1 -1
  6. package/src/qbo-config-editor.ts +44 -38
  7. package/src/styles.js +1 -1
  8. package/src/styles.js.map +1 -1
  9. package/src/styles.ts +1 -1
  10. package/wwwroot/css/qbo-configuration.css +11365 -970
  11. package/wwwroot/css/qbo-configuration.css.map +1 -1
  12. package/wwwroot/css/qbo-configuration.min.css +1 -1
  13. package/wwwroot/js/esm/qbo4.configuration.js +57 -43
  14. package/wwwroot/js/esm/qbo4.configuration.min.js +30 -43
  15. package/wwwroot/js/esm/qbo4.configuration.min.js.map +1 -1
  16. package/wwwroot/js/qbo4.configuration.js +57 -43
  17. package/wwwroot/js/qbo4.configuration.min.js +30 -43
  18. package/wwwroot/js/qbo4.configuration.min.js.map +1 -1
  19. package/scss/qbo-config-editor.scss +0 -2
  20. package/wwwroot/css/qbo-config-editor.css +0 -3
  21. package/wwwroot/css/qbo-config-editor.css.map +0 -1
  22. package/wwwroot/css/qbo-config-editor.min.css +0 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@quandis/qbo4.configuration",
3
- "version": "4.0.1-CI-20241014-230455",
3
+ "version": "4.0.1-CI-20241016-222653",
4
4
  "type": "module",
5
5
  "types": "./src/Program.d.ts",
6
6
  "exports": {
@@ -48,6 +48,7 @@
48
48
  "postcss": "postcss \"wwwroot/css/*.css\" --use autoprefixer --replace",
49
49
  "packdev": "webpack --config pack.dev.js --no-color",
50
50
  "packprod": "webpack --config pack.prod.js --no-color",
51
- "build": "ncu -u && npm install && npm run sass && tsc --build --force && npm run packdev && npm run packprod && del *.tgz && npm pack && ren *.tgz qbo4.configuration.tgz"
51
+ "build": "ncu -u && npm install && npm run sass && tsc --build --force && npm run packdev && npm run packprod && del *.tgz && npm pack && ren *.tgz qbo4.configuration.tgz",
52
+ "test": "tsc --build --force && npm run packdev && npm run packprod && del *.tgz && npm pack && ren *.tgz qbo4.configuration.tgz"
52
53
  }
53
54
  }
package/scss/qbo-configuration.scss CHANGED
@@ -1,4 +1,4 @@
1
- @import "../node_modules/bootstrap/scss/bootstrap";
1
+ @import "bootstrap/scss/bootstrap";
2
2
 
3
3
  .qbo-code {
4
4
  position: fixed;
@@ -71,3 +71,58 @@
71
71
  .hidden {
72
72
  display: none;
73
73
  }
74
+
75
+ .qbo-config-editor {
76
+
77
+ button {
78
+ @extend .btn;
79
+ }
80
+
81
+ button.add {
82
+ @extend .btn-outline-primary;
83
+ }
84
+
85
+ button.cancel {
86
+ @extend .btn-outline-danger;
87
+ }
88
+
89
+ button.delete {
90
+ @extend .btn-outline-danger;
91
+ }
92
+
93
+ button.save {
94
+ @extend .btn-outline-primary;
95
+ }
96
+
97
+ div.buttons {
98
+ > div {
99
+ float: right;
100
+ }
101
+ }
102
+
103
+ div.qbo-row {
104
+ @extend .row;
105
+ margin-bottom: 10px;
106
+
107
+ > div {
108
+ @extend .col;
109
+
110
+ > div {
111
+ @extend .input-group;
112
+ }
113
+ }
114
+ }
115
+
116
+ div.search {
117
+ @extend .input-group;
118
+ margin-bottom: 1rem !important;
119
+
120
+ > button {
121
+ @extend .btn-outline-primary;
122
+ }
123
+ }
124
+
125
+ input {
126
+ @extend .form-control;
127
+ }
128
+ }
package/src/qbo-config-editor.d.ts CHANGED
@@ -1,7 +1,12 @@
1
1
  import { LitElement } from 'lit';
2
2
  export declare class QboConfigEditor extends LitElement {
3
3
  apiEndpoint: URL;
4
+ buttonClass: string;
4
5
  configData: Object;
6
+ formClass: string;
7
+ rowClass: string;
8
+ searchClass: string;
9
+ theme: string;
5
10
  static styles: import("lit").CSSResult[];
6
11
  updateConfigData(key: any, newValue: any, event: any, isKey?: boolean): Promise<void>;
7
12
  addKeyValuePair(event: any): void;
@@ -12,5 +17,6 @@ export declare class QboConfigEditor extends LitElement {
12
17
  cancelChanges(event: any): Promise<void>;
13
18
  filter(event: any): Promise<void>;
14
19
  search(): Promise<void>;
20
+ handleSubmit(event: Event): void;
15
21
  render(): import("lit-html").TemplateResult<1>;
16
22
  }
package/src/qbo-config-editor.js CHANGED
@@ -7,7 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
7
7
  var __metadata = (this && this.__metadata) || function (k, v) {
8
8
  if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
9
9
  };
10
- import { LitElement, html, css, } from 'lit';
10
+ import { LitElement, html, } from 'lit';
11
11
  import { property } from 'lit/decorators.js';
12
12
  import { JsonConfigurationSource } from './Configuration.js';
13
13
  import { configurationCss } from './styles.js';
@@ -15,22 +15,15 @@ export class QboConfigEditor extends LitElement {
15
15
  constructor() {
16
16
  super(...arguments);
17
17
  this.apiEndpoint = new URL('configuration/repository', this.baseURI);
18
+ this.buttonClass = 'buttons';
18
19
  this.configData = {};
20
+ this.formClass = 'qbo-config-editor';
21
+ this.rowClass = 'qbo-row';
22
+ this.searchClass = 'search';
23
+ this.theme = 'light';
19
24
  }
20
25
  static { this.styles = [
21
- configurationCss,
22
- css `
23
- :host {
24
- display: block;
25
- padding: 16px;
26
- }
27
- .row-search-result {
28
- margin-bottom: 10px;
29
- }
30
- .save-cancel-buttons {
31
- float: right;
32
- }
33
- `
26
+ configurationCss
34
27
  ]; }
35
28
  async updateConfigData(key, newValue, event, isKey = false) {
36
29
  event.preventDefault();
@@ -87,7 +80,7 @@ export class QboConfigEditor extends LitElement {
87
80
  alert.className = "success";
88
81
  alert.innerHTML = "Settings have been updated.";
89
82
  var form = this.renderRoot.querySelector(`form`);
90
- form?.insertBefore(alert, form?.querySelector("div.save-cancel"));
83
+ form?.insertBefore(alert, form?.querySelector(`div.${this.buttonClass}`));
91
84
  }
92
85
  setTimeout(this.alertClear, 5000, alert);
93
86
  }
@@ -104,7 +97,7 @@ export class QboConfigEditor extends LitElement {
104
97
  await this.search();
105
98
  }
106
99
  async search() {
107
- var input = this.renderRoot.querySelector(`input.form-control.search`);
100
+ var input = this.renderRoot.querySelector(`div.${this.searchClass}`)?.querySelector('input');
108
101
  if (input instanceof HTMLInputElement) {
109
102
  if (input.value.trim() == '') {
110
103
  this.configData = {};
@@ -123,54 +116,75 @@ export class QboConfigEditor extends LitElement {
123
116
  }
124
117
  }
125
118
  }
119
+ handleSubmit(event) {
120
+ event.preventDefault();
121
+ }
126
122
  render() {
127
123
  const source = new JsonConfigurationSource(this.configData);
128
- return html `<slot></slot>
129
- <form onsubmit="return false;">
130
- <div class="input-group mb-3">
131
- <input type="text" class="form-control search" @keydown="${this.filter}">
132
- <button class="btn btn-outline-primary" @click="${this.filter}">Search</button>
124
+ return html `<slot>
125
+ <form @submit="${this.handleSubmit}" class="${this.formClass}" data-bs-theme="${this.theme}">
126
+ <div class="${this.searchClass}">
127
+ <input type="text" @keydown="${this.filter}">
128
+ <button type="button" @click="${this.filter}">Search</button>
133
129
  </div>
134
- <div class="row">
135
- <div class="col">
130
+ <div class="${this.rowClass}">
131
+ <div>
136
132
  <label>Key</label>
137
- <hr/>
138
133
  </div>
139
- <div class="col">
134
+ <div>
140
135
  <label>Value</label>
141
- <hr/>
142
136
  </div>
143
137
  </div>
144
138
  ${Array.from(source.getValues()).map(({ key, value }) => html `
145
- <div class="row row-search-result">
146
- <div class="col">
147
- <input type="text" class="form-control" .value="${key}" @input="${(e) => this.updateConfigData(key, e.target.value, e, true)}">
139
+ <div class="${this.rowClass}">
140
+ <div>
141
+ <input type="text" .value="${key}" @input="${(e) => this.updateConfigData(key, e.target.value, e, true)}">
148
142
  </div>
149
- <div class="col">
150
- <div class="input-group">
151
- <input type="text" class="form-control" .value="${value}" @input="${(e) => this.updateConfigData(key, e.target.value, e)}">
152
- <button type="button" class="btn btn-outline-danger" @click="${(e) => this.deleteKeyValuePair(key, e)}">Delete</button>
143
+ <div>
144
+ <div>
145
+ <input type="text" .value="${value}" @input="${(e) => this.updateConfigData(key, e.target.value, e)}">
146
+ <button type="button" class="delete" @click="${(e) => this.deleteKeyValuePair(key, e)}">Delete</button>
153
147
  </div>
154
148
  </div>
155
149
  </div>`)}
156
- <div class="save-cancel">
157
- <button type="button" class="btn btn-outline-primary" @click="${this.addKeyValuePair}">Add Setting</button>
158
- <div class="save-cancel-buttons">
159
- <button type="button" class="btn btn-outline-primary save" @click="${this.saveChanges}">Save</button>
160
- <button type="button" class="btn btn-outline-danger cancel" @click="${this.cancelChanges}">Cancel</button>
150
+ <div class="${this.buttonClass}">
151
+ <button type="button" class="add" @click="${this.addKeyValuePair}">Add Setting</button>
152
+ <div>
153
+ <button type="button" class="save" @click="${this.saveChanges}">Save</button>
154
+ <button type="button" class="cancel" @click="${this.cancelChanges}">Cancel</button>
161
155
  </div>
162
156
  </div>
163
157
  </form>
164
- `;
158
+ </slot>`;
165
159
  }
166
160
  }
167
161
  __decorate([
168
162
  property({ type: URL }),
169
163
  __metadata("design:type", Object)
170
164
  ], QboConfigEditor.prototype, "apiEndpoint", void 0);
165
+ __decorate([
166
+ property({ type: String }),
167
+ __metadata("design:type", Object)
168
+ ], QboConfigEditor.prototype, "buttonClass", void 0);
171
169
  __decorate([
172
170
  property({ type: Object }),
173
171
  __metadata("design:type", Object)
174
172
  ], QboConfigEditor.prototype, "configData", void 0);
173
+ __decorate([
174
+ property({ type: String }),
175
+ __metadata("design:type", Object)
176
+ ], QboConfigEditor.prototype, "formClass", void 0);
177
+ __decorate([
178
+ property({ type: String }),
179
+ __metadata("design:type", Object)
180
+ ], QboConfigEditor.prototype, "rowClass", void 0);
181
+ __decorate([
182
+ property({ type: String }),
183
+ __metadata("design:type", Object)
184
+ ], QboConfigEditor.prototype, "searchClass", void 0);
185
+ __decorate([
186
+ property({ type: String }),
187
+ __metadata("design:type", Object)
188
+ ], QboConfigEditor.prototype, "theme", void 0);
175
189
  customElements.define('qbo-config-editor', QboConfigEditor);
176
190
  //# sourceMappingURL=qbo-config-editor.js.map
package/src/qbo-config-editor.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"qbo-config-editor.js","sourceRoot":"","sources":["qbo-config-editor.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"qbo-config-editor.js","sourceRoot":"","sources":["qbo-config-editor.ts"],"names":[],"mappings":"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"}
package/src/qbo-config-editor.ts CHANGED
@@ -8,23 +8,26 @@ export class QboConfigEditor extends LitElement {
8
8
  @property({ type: URL })
9
9
  apiEndpoint = new URL('configuration/repository', this.baseURI);
10
10
 
11
+ @property({ type: String })
12
+ buttonClass = 'buttons';
13
+
11
14
  @property({ type: Object })
12
15
  configData: Object = {};
13
16
 
17
+ @property({ type: String })
18
+ formClass = 'qbo-config-editor';
19
+
20
+ @property({ type: String })
21
+ rowClass = 'qbo-row';
22
+
23
+ @property({ type: String })
24
+ searchClass = 'search';
25
+
26
+ @property({ type: String })
27
+ theme = 'light';
28
+
14
29
  static styles = [
15
- configurationCss,
16
- css`
17
- :host {
18
- display: block;
19
- padding: 16px;
20
- }
21
- .row-search-result {
22
- margin-bottom: 10px;
23
- }
24
- .save-cancel-buttons {
25
- float: right;
26
- }
27
- `
30
+ configurationCss
28
31
  ];
29
32
 
30
33
  async updateConfigData(key, newValue, event, isKey = false) {
@@ -83,7 +86,7 @@ export class QboConfigEditor extends LitElement {
83
86
  alert.innerHTML = "Settings have been updated.";
84
87
 
85
88
  var form = this.renderRoot.querySelector(`form`);
86
- form?.insertBefore(alert, form?.querySelector("div.save-cancel"));
89
+ form?.insertBefore(alert, form?.querySelector(`div.${this.buttonClass}`));
87
90
  }
88
91
  setTimeout(this.alertClear, 5000, alert);
89
92
  }
@@ -103,7 +106,7 @@ export class QboConfigEditor extends LitElement {
103
106
  }
104
107
 
105
108
  async search() {
106
- var input = this.renderRoot.querySelector(`input.form-control.search`);
109
+ var input = this.renderRoot.querySelector(`div.${this.searchClass}`)?.querySelector('input');
107
110
  if (input instanceof HTMLInputElement) {
108
111
 
109
112
  if (input.value.trim() == '') {
@@ -125,45 +128,48 @@ export class QboConfigEditor extends LitElement {
125
128
  }
126
129
  }
127
130
  }
131
+
132
+ handleSubmit(event: Event) {
133
+ event.preventDefault();
134
+ }
135
+
128
136
  render() {
129
137
  const source = new JsonConfigurationSource(this.configData);
130
- return html`<slot></slot>
131
- <form onsubmit="return false;">
132
- <div class="input-group mb-3">
133
- <input type="text" class="form-control search" @keydown="${this.filter}">
134
- <button class="btn btn-outline-primary" @click="${this.filter}">Search</button>
138
+ return html`<slot>
139
+ <form @submit="${this.handleSubmit}" class="${this.formClass}" data-bs-theme="${this.theme}">
140
+ <div class="${this.searchClass}">
141
+ <input type="text" @keydown="${this.filter}">
142
+ <button type="button" @click="${this.filter}">Search</button>
135
143
  </div>
136
- <div class="row">
137
- <div class="col">
144
+ <div class="${this.rowClass}">
145
+ <div>
138
146
  <label>Key</label>
139
- <hr/>
140
147
  </div>
141
- <div class="col">
148
+ <div>
142
149
  <label>Value</label>
143
- <hr/>
144
150
  </div>
145
151
  </div>
146
152
  ${Array.from(source.getValues()).map(({ key, value }) => html`
147
- <div class="row row-search-result">
148
- <div class="col">
149
- <input type="text" class="form-control" .value="${key}" @input="${(e) => this.updateConfigData(key, e.target.value, e, true)}">
153
+ <div class="${this.rowClass}">
154
+ <div>
155
+ <input type="text" .value="${key}" @input="${(e) => this.updateConfigData(key, e.target.value, e, true)}">
150
156
  </div>
151
- <div class="col">
152
- <div class="input-group">
153
- <input type="text" class="form-control" .value="${value}" @input="${(e) => this.updateConfigData(key, e.target.value, e)}">
154
- <button type="button" class="btn btn-outline-danger" @click="${(e) => this.deleteKeyValuePair(key, e)}">Delete</button>
157
+ <div>
158
+ <div>
159
+ <input type="text" .value="${value}" @input="${(e) => this.updateConfigData(key, e.target.value, e)}">
160
+ <button type="button" class="delete" @click="${(e) => this.deleteKeyValuePair(key, e)}">Delete</button>
155
161
  </div>
156
162
  </div>
157
163
  </div>`)}
158
- <div class="save-cancel">
159
- <button type="button" class="btn btn-outline-primary" @click="${this.addKeyValuePair}">Add Setting</button>
160
- <div class="save-cancel-buttons">
161
- <button type="button" class="btn btn-outline-primary save" @click="${this.saveChanges}">Save</button>
162
- <button type="button" class="btn btn-outline-danger cancel" @click="${this.cancelChanges}">Cancel</button>
164
+ <div class="${this.buttonClass}">
165
+ <button type="button" class="add" @click="${this.addKeyValuePair}">Add Setting</button>
166
+ <div>
167
+ <button type="button" class="save" @click="${this.saveChanges}">Save</button>
168
+ <button type="button" class="cancel" @click="${this.cancelChanges}">Cancel</button>
163
169
  </div>
164
170
  </div>
165
171
  </form>
166
- `;
172
+ </slot>`;
167
173
  }
168
174
  }
169
175