@tuprolog/arg2p-ui 0.1.0 → 0.1.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.
- package/README.md +29 -2
- package/dist/components/arg2p-editor.js +47 -47
- package/dist/components/arg2p-flags.js +197 -197
- package/dist/components/arg2p-graph.js +210 -210
- package/dist/components/arg2p-solutions.js +186 -186
- package/package.json +2 -2
|
@@ -120,33 +120,33 @@ export class Arg2pSolutions extends LitElement {
|
|
|
120
120
|
return this.renderError(this.error);
|
|
121
121
|
if (this.run === null)
|
|
122
122
|
return nothing;
|
|
123
|
-
return html `
|
|
124
|
-
<div class="head">
|
|
125
|
-
<div class="query">?- ${this.run.query}</div>
|
|
126
|
-
<button type="button" class="next" title="The next solution" ?disabled=${!this.hasNext} @click=${() => this.next()}>Next</button>
|
|
127
|
-
</div>
|
|
128
|
-
<ol class="list">
|
|
129
|
-
${this.entries.map(entry => this.renderEntry(entry))}
|
|
130
|
-
${this.busy ? html `<li class="pending" aria-live="polite">Solving…</li>` : nothing}
|
|
131
|
-
</ol>
|
|
123
|
+
return html `
|
|
124
|
+
<div class="head">
|
|
125
|
+
<div class="query">?- ${this.run.query}</div>
|
|
126
|
+
<button type="button" class="next" title="The next solution" ?disabled=${!this.hasNext} @click=${() => this.next()}>Next</button>
|
|
127
|
+
</div>
|
|
128
|
+
<ol class="list">
|
|
129
|
+
${this.entries.map(entry => this.renderEntry(entry))}
|
|
130
|
+
${this.busy ? html `<li class="pending" aria-live="polite">Solving…</li>` : nothing}
|
|
131
|
+
</ol>
|
|
132
132
|
`;
|
|
133
133
|
}
|
|
134
134
|
renderError(error) {
|
|
135
135
|
const where = error.syntax;
|
|
136
136
|
const select = () => this.emit('arg2p-error-select', { error });
|
|
137
|
-
return html `
|
|
138
|
-
<ol class="list">
|
|
139
|
-
<li
|
|
140
|
-
class="solution halt ${where !== null ? 'selectable' : ''}"
|
|
141
|
-
tabindex=${where !== null ? 0 : -1}
|
|
142
|
-
title=${where !== null ? 'Go to the error' : ''}
|
|
143
|
-
@click=${where !== null ? select : null}
|
|
144
|
-
@keydown=${where !== null ? (e) => activate(e, select) : null}
|
|
145
|
-
>
|
|
146
|
-
${header('error', error.name)}
|
|
147
|
-
<div class="error">${error.message}</div>
|
|
148
|
-
</li>
|
|
149
|
-
</ol>
|
|
137
|
+
return html `
|
|
138
|
+
<ol class="list">
|
|
139
|
+
<li
|
|
140
|
+
class="solution halt ${where !== null ? 'selectable' : ''}"
|
|
141
|
+
tabindex=${where !== null ? 0 : -1}
|
|
142
|
+
title=${where !== null ? 'Go to the error' : ''}
|
|
143
|
+
@click=${where !== null ? select : null}
|
|
144
|
+
@keydown=${where !== null ? (e) => activate(e, select) : null}
|
|
145
|
+
>
|
|
146
|
+
${header('error', error.name)}
|
|
147
|
+
<div class="error">${error.message}</div>
|
|
148
|
+
</li>
|
|
149
|
+
</ol>
|
|
150
150
|
`;
|
|
151
151
|
}
|
|
152
152
|
renderEntry(entry) {
|
|
@@ -159,165 +159,165 @@ export class Arg2pSolutions extends LitElement {
|
|
|
159
159
|
return html `<li class="solution halt">${header('halt', 'Halted')}<div class="error">${solution.error ?? ''}</div></li>`;
|
|
160
160
|
}
|
|
161
161
|
const pick = () => this.show(entry);
|
|
162
|
-
return html `
|
|
163
|
-
<li
|
|
164
|
-
class="solution yes selectable ${this.shown === entry ? 'shown' : ''}"
|
|
165
|
-
tabindex="0"
|
|
166
|
-
role="button"
|
|
167
|
-
aria-pressed=${this.shown === entry}
|
|
168
|
-
title="Show the graph of this solution"
|
|
169
|
-
@click=${pick}
|
|
170
|
-
@keydown=${(e) => activate(e, pick)}
|
|
171
|
-
>
|
|
172
|
-
${header('yes', `Solution ${accepted}`)}
|
|
173
|
-
${solution.bindings.length > 0 ? bindings(solution.bindings) : html `<div class="term">${solution.query}</div>`}
|
|
174
|
-
</li>
|
|
162
|
+
return html `
|
|
163
|
+
<li
|
|
164
|
+
class="solution yes selectable ${this.shown === entry ? 'shown' : ''}"
|
|
165
|
+
tabindex="0"
|
|
166
|
+
role="button"
|
|
167
|
+
aria-pressed=${this.shown === entry}
|
|
168
|
+
title="Show the graph of this solution"
|
|
169
|
+
@click=${pick}
|
|
170
|
+
@keydown=${(e) => activate(e, pick)}
|
|
171
|
+
>
|
|
172
|
+
${header('yes', `Solution ${accepted}`)}
|
|
173
|
+
${solution.bindings.length > 0 ? bindings(solution.bindings) : html `<div class="term">${solution.query}</div>`}
|
|
174
|
+
</li>
|
|
175
175
|
`;
|
|
176
176
|
}
|
|
177
177
|
static { this.styles = [
|
|
178
178
|
tokens,
|
|
179
|
-
css `
|
|
180
|
-
:host {
|
|
181
|
-
display: block;
|
|
182
|
-
font-size: 14px;
|
|
183
|
-
}
|
|
184
|
-
.head {
|
|
185
|
-
display: flex;
|
|
186
|
-
align-items: baseline;
|
|
187
|
-
gap: 8px;
|
|
188
|
-
padding: 0 2px 8px 2px;
|
|
189
|
-
}
|
|
190
|
-
.query {
|
|
191
|
-
flex: 1;
|
|
192
|
-
font-family: var(--_mono);
|
|
193
|
-
font-size: 13px;
|
|
194
|
-
color: var(--_muted);
|
|
195
|
-
word-break: break-word;
|
|
196
|
-
}
|
|
197
|
-
button {
|
|
198
|
-
font: inherit;
|
|
199
|
-
font-size: 13px;
|
|
200
|
-
color: var(--_text);
|
|
201
|
-
background: var(--_surface);
|
|
202
|
-
border: 1px solid var(--_border);
|
|
203
|
-
border-radius: 4px;
|
|
204
|
-
padding: 2px 10px;
|
|
205
|
-
cursor: pointer;
|
|
206
|
-
}
|
|
207
|
-
button:hover:not(:disabled) {
|
|
208
|
-
background: var(--_hover);
|
|
209
|
-
}
|
|
210
|
-
button:disabled {
|
|
211
|
-
opacity: 0.5;
|
|
212
|
-
cursor: default;
|
|
213
|
-
}
|
|
214
|
-
.list {
|
|
215
|
-
list-style: none;
|
|
216
|
-
margin: 0;
|
|
217
|
-
padding: 0;
|
|
218
|
-
}
|
|
219
|
-
.solution {
|
|
220
|
-
border: 1px solid var(--_border);
|
|
221
|
-
border-left: 4px solid var(--_accent);
|
|
222
|
-
border-radius: 6px;
|
|
223
|
-
padding: 8px 10px;
|
|
224
|
-
margin-bottom: 8px;
|
|
225
|
-
background: var(--_surface);
|
|
226
|
-
}
|
|
227
|
-
.selectable {
|
|
228
|
-
cursor: pointer;
|
|
229
|
-
}
|
|
230
|
-
.selectable:hover {
|
|
231
|
-
background: var(--_hover);
|
|
232
|
-
}
|
|
233
|
-
.selectable:focus {
|
|
234
|
-
outline: none;
|
|
235
|
-
}
|
|
236
|
-
.selectable:focus-visible,
|
|
237
|
-
.shown {
|
|
238
|
-
box-shadow: 0 0 0 2px color-mix(in srgb, var(--_accent) 45%, transparent);
|
|
239
|
-
}
|
|
240
|
-
.solution.no {
|
|
241
|
-
border-left-color: var(--_no);
|
|
242
|
-
}
|
|
243
|
-
.solution.halt {
|
|
244
|
-
border-left-color: var(--_error);
|
|
245
|
-
}
|
|
246
|
-
.header {
|
|
247
|
-
display: flex;
|
|
248
|
-
align-items: center;
|
|
249
|
-
gap: 8px;
|
|
250
|
-
}
|
|
251
|
-
.badge {
|
|
252
|
-
font-size: 11px;
|
|
253
|
-
font-weight: bold;
|
|
254
|
-
text-transform: uppercase;
|
|
255
|
-
letter-spacing: 0.04em;
|
|
256
|
-
color: #ffffff;
|
|
257
|
-
background: var(--_accent);
|
|
258
|
-
border-radius: 4px;
|
|
259
|
-
padding: 1px 6px;
|
|
260
|
-
}
|
|
261
|
-
.no .badge {
|
|
262
|
-
background: var(--_no);
|
|
263
|
-
}
|
|
264
|
-
.halt .badge {
|
|
265
|
-
background: var(--_error);
|
|
266
|
-
}
|
|
267
|
-
.term,
|
|
268
|
-
.error,
|
|
269
|
-
.bindings {
|
|
270
|
-
margin: 8px 0 0 0;
|
|
271
|
-
font-family: var(--_mono);
|
|
272
|
-
font-size: 13px;
|
|
273
|
-
word-break: break-word;
|
|
274
|
-
}
|
|
275
|
-
.error {
|
|
276
|
-
color: var(--_error);
|
|
277
|
-
}
|
|
278
|
-
.bindings {
|
|
279
|
-
display: grid;
|
|
280
|
-
grid-template-columns: max-content 1fr;
|
|
281
|
-
column-gap: 10px;
|
|
282
|
-
row-gap: 6px;
|
|
283
|
-
align-items: baseline;
|
|
284
|
-
}
|
|
285
|
-
dt {
|
|
286
|
-
font-weight: bold;
|
|
287
|
-
}
|
|
288
|
-
dt::after {
|
|
289
|
-
content: ' =';
|
|
290
|
-
color: var(--_muted);
|
|
291
|
-
font-weight: normal;
|
|
292
|
-
}
|
|
293
|
-
dd {
|
|
294
|
-
margin: 0;
|
|
295
|
-
display: flex;
|
|
296
|
-
flex-wrap: wrap;
|
|
297
|
-
gap: 4px;
|
|
298
|
-
}
|
|
299
|
-
.chip {
|
|
300
|
-
border-radius: 10px;
|
|
301
|
-
padding: 0 8px;
|
|
302
|
-
color: #ffffff;
|
|
303
|
-
}
|
|
304
|
-
.chip.in {
|
|
305
|
-
background: var(--_in);
|
|
306
|
-
}
|
|
307
|
-
.chip.out {
|
|
308
|
-
background: var(--_out);
|
|
309
|
-
}
|
|
310
|
-
.chip.und {
|
|
311
|
-
background: var(--_und);
|
|
312
|
-
}
|
|
313
|
-
.empty,
|
|
314
|
-
.pending {
|
|
315
|
-
color: var(--_muted);
|
|
316
|
-
}
|
|
317
|
-
.pending {
|
|
318
|
-
font-style: italic;
|
|
319
|
-
padding: 4px 2px;
|
|
320
|
-
}
|
|
179
|
+
css `
|
|
180
|
+
:host {
|
|
181
|
+
display: block;
|
|
182
|
+
font-size: 14px;
|
|
183
|
+
}
|
|
184
|
+
.head {
|
|
185
|
+
display: flex;
|
|
186
|
+
align-items: baseline;
|
|
187
|
+
gap: 8px;
|
|
188
|
+
padding: 0 2px 8px 2px;
|
|
189
|
+
}
|
|
190
|
+
.query {
|
|
191
|
+
flex: 1;
|
|
192
|
+
font-family: var(--_mono);
|
|
193
|
+
font-size: 13px;
|
|
194
|
+
color: var(--_muted);
|
|
195
|
+
word-break: break-word;
|
|
196
|
+
}
|
|
197
|
+
button {
|
|
198
|
+
font: inherit;
|
|
199
|
+
font-size: 13px;
|
|
200
|
+
color: var(--_text);
|
|
201
|
+
background: var(--_surface);
|
|
202
|
+
border: 1px solid var(--_border);
|
|
203
|
+
border-radius: 4px;
|
|
204
|
+
padding: 2px 10px;
|
|
205
|
+
cursor: pointer;
|
|
206
|
+
}
|
|
207
|
+
button:hover:not(:disabled) {
|
|
208
|
+
background: var(--_hover);
|
|
209
|
+
}
|
|
210
|
+
button:disabled {
|
|
211
|
+
opacity: 0.5;
|
|
212
|
+
cursor: default;
|
|
213
|
+
}
|
|
214
|
+
.list {
|
|
215
|
+
list-style: none;
|
|
216
|
+
margin: 0;
|
|
217
|
+
padding: 0;
|
|
218
|
+
}
|
|
219
|
+
.solution {
|
|
220
|
+
border: 1px solid var(--_border);
|
|
221
|
+
border-left: 4px solid var(--_accent);
|
|
222
|
+
border-radius: 6px;
|
|
223
|
+
padding: 8px 10px;
|
|
224
|
+
margin-bottom: 8px;
|
|
225
|
+
background: var(--_surface);
|
|
226
|
+
}
|
|
227
|
+
.selectable {
|
|
228
|
+
cursor: pointer;
|
|
229
|
+
}
|
|
230
|
+
.selectable:hover {
|
|
231
|
+
background: var(--_hover);
|
|
232
|
+
}
|
|
233
|
+
.selectable:focus {
|
|
234
|
+
outline: none;
|
|
235
|
+
}
|
|
236
|
+
.selectable:focus-visible,
|
|
237
|
+
.shown {
|
|
238
|
+
box-shadow: 0 0 0 2px color-mix(in srgb, var(--_accent) 45%, transparent);
|
|
239
|
+
}
|
|
240
|
+
.solution.no {
|
|
241
|
+
border-left-color: var(--_no);
|
|
242
|
+
}
|
|
243
|
+
.solution.halt {
|
|
244
|
+
border-left-color: var(--_error);
|
|
245
|
+
}
|
|
246
|
+
.header {
|
|
247
|
+
display: flex;
|
|
248
|
+
align-items: center;
|
|
249
|
+
gap: 8px;
|
|
250
|
+
}
|
|
251
|
+
.badge {
|
|
252
|
+
font-size: 11px;
|
|
253
|
+
font-weight: bold;
|
|
254
|
+
text-transform: uppercase;
|
|
255
|
+
letter-spacing: 0.04em;
|
|
256
|
+
color: #ffffff;
|
|
257
|
+
background: var(--_accent);
|
|
258
|
+
border-radius: 4px;
|
|
259
|
+
padding: 1px 6px;
|
|
260
|
+
}
|
|
261
|
+
.no .badge {
|
|
262
|
+
background: var(--_no);
|
|
263
|
+
}
|
|
264
|
+
.halt .badge {
|
|
265
|
+
background: var(--_error);
|
|
266
|
+
}
|
|
267
|
+
.term,
|
|
268
|
+
.error,
|
|
269
|
+
.bindings {
|
|
270
|
+
margin: 8px 0 0 0;
|
|
271
|
+
font-family: var(--_mono);
|
|
272
|
+
font-size: 13px;
|
|
273
|
+
word-break: break-word;
|
|
274
|
+
}
|
|
275
|
+
.error {
|
|
276
|
+
color: var(--_error);
|
|
277
|
+
}
|
|
278
|
+
.bindings {
|
|
279
|
+
display: grid;
|
|
280
|
+
grid-template-columns: max-content 1fr;
|
|
281
|
+
column-gap: 10px;
|
|
282
|
+
row-gap: 6px;
|
|
283
|
+
align-items: baseline;
|
|
284
|
+
}
|
|
285
|
+
dt {
|
|
286
|
+
font-weight: bold;
|
|
287
|
+
}
|
|
288
|
+
dt::after {
|
|
289
|
+
content: ' =';
|
|
290
|
+
color: var(--_muted);
|
|
291
|
+
font-weight: normal;
|
|
292
|
+
}
|
|
293
|
+
dd {
|
|
294
|
+
margin: 0;
|
|
295
|
+
display: flex;
|
|
296
|
+
flex-wrap: wrap;
|
|
297
|
+
gap: 4px;
|
|
298
|
+
}
|
|
299
|
+
.chip {
|
|
300
|
+
border-radius: 10px;
|
|
301
|
+
padding: 0 8px;
|
|
302
|
+
color: #ffffff;
|
|
303
|
+
}
|
|
304
|
+
.chip.in {
|
|
305
|
+
background: var(--_in);
|
|
306
|
+
}
|
|
307
|
+
.chip.out {
|
|
308
|
+
background: var(--_out);
|
|
309
|
+
}
|
|
310
|
+
.chip.und {
|
|
311
|
+
background: var(--_und);
|
|
312
|
+
}
|
|
313
|
+
.empty,
|
|
314
|
+
.pending {
|
|
315
|
+
color: var(--_muted);
|
|
316
|
+
}
|
|
317
|
+
.pending {
|
|
318
|
+
font-style: italic;
|
|
319
|
+
padding: 4px 2px;
|
|
320
|
+
}
|
|
321
321
|
`,
|
|
322
322
|
]; }
|
|
323
323
|
}
|
|
@@ -333,21 +333,21 @@ function activate(event, action) {
|
|
|
333
333
|
// `Variable = value` rows. A value of a label variable that is a list shows its items as chips; any other value keeps
|
|
334
334
|
// its Prolog form, where a list and its single element would otherwise look the same.
|
|
335
335
|
function bindings(list) {
|
|
336
|
-
return html `
|
|
337
|
-
<dl class="bindings">
|
|
336
|
+
return html `
|
|
337
|
+
<dl class="bindings">
|
|
338
338
|
${list.map(({ name, value }) => {
|
|
339
339
|
const label = name.toLowerCase();
|
|
340
340
|
const items = LABELS.includes(label) ? listItems(value) : null;
|
|
341
|
-
return html `
|
|
342
|
-
<dt>${name}</dt>
|
|
343
|
-
<dd>
|
|
341
|
+
return html `
|
|
342
|
+
<dt>${name}</dt>
|
|
343
|
+
<dd>
|
|
344
344
|
${items === null ? value
|
|
345
345
|
: items.length === 0 ? html `<span class="empty">[ ]</span>`
|
|
346
|
-
: items.map(item => html `<span class="chip ${label}">${single(item)}</span>`)}
|
|
347
|
-
</dd>
|
|
346
|
+
: items.map(item => html `<span class="chip ${label}">${single(item)}</span>`)}
|
|
347
|
+
</dd>
|
|
348
348
|
`;
|
|
349
|
-
})}
|
|
350
|
-
</dl>
|
|
349
|
+
})}
|
|
350
|
+
</dl>
|
|
351
351
|
`;
|
|
352
352
|
}
|
|
353
353
|
// A statement of a set of labelled statements is a list of one term, `[flies(tweety)]`: shown as the term
|
package/package.json
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tuprolog/arg2p-ui",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.1",
|
|
4
4
|
"description": "The user interface of Arg2P as web components (graphs, solutions, ...), on any engine: the solver of the browser, or one of the JVM",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"license": "Apache-2.0",
|
|
7
7
|
"author": "Giuseppe Pisano",
|
|
8
8
|
"repository": {
|
|
9
9
|
"type": "git",
|
|
10
|
-
"url": "https://github.com/tuProlog/arg2p-kt-web",
|
|
10
|
+
"url": "git+https://github.com/tuProlog/arg2p-kt-web.git",
|
|
11
11
|
"directory": "packages/ui"
|
|
12
12
|
},
|
|
13
13
|
"exports": {
|