Merge pull request #261 from hypermedia-app/autocomplete-blank-no-label

Autocomplete improvements

.changeset/brave-windows-tell.md

@@ -0,0 +1,7 @@
+---
+"@hydrofoil/shaperone-wc": patch
+"@hydrofoil/shaperone-wc-material": patch
+"@hydrofoil/shaperone-wc-vaadin": patch
+---
+
+Enum Select would not show values for literal nodes

.changeset/cold-fans-report.md

@@ -0,0 +1,5 @@
+---
+"@hydrofoil/shaperone-core": patch
+---
+
+Prioritise EnumSelect over IRIEditor when there is `sh:in`

.changeset/flat-carrots-unite.md

@@ -0,0 +1,5 @@
+---
+"@hydrofoil/shaperone-wc-shoelace": patch
+---
+
+Do not show blank node id as default dropwdown label

.changeset/heavy-pans-mix.md

@@ -0,0 +1,5 @@
+---
+"@hydrofoil/shaperone-wc-shoelace": patch
+---
+
+Spin the icon when loading initial autosomplete selection

.changeset/red-hairs-know.md

@@ -0,0 +1,5 @@
+---
+"@hydrofoil/shaperone-playground": patch
+---
+
+Ensure shoelace icons in playground

demos/lit-html/package.json

@@ -30,6 +30,7 @@
     "@rdfjs/fetch-lite": "^3.1.0",
     "@tpluscode/rdf-ns-builders": "^2.0.0",
     "@tpluscode/rdf-string": "^0.2.26",
+    "@shoelace-style/shoelace": "^2.0.0-beta.78",
     "@vaadin/vaadin-app-layout": "^2.1.0",
     "@vaadin/vaadin-button": "^2.4.0",
     "@vaadin/vaadin-checkbox": "^2.5.0",

demos/lit-html/src/configure.ts

@@ -17,9 +17,11 @@ import { validate } from '@hydrofoil/shaperone-rdf-validate-shacl'
 import $rdf from 'rdf-ext'
 import * as xone from '@hydrofoil/shaperone-playground-examples/XoneRenderer'
 import { errorSummary } from '@hydrofoil/shaperone-playground-examples/ErrorSummary/index.js'
+import { setBasePath } from '@shoelace-style/shoelace/dist/utilities/base-path.js'
 import { ComponentsState } from './state/models/components'
 import { RendererState } from './state/models/renderer'
 
+setBasePath('https://unpkg.com/@shoelace-style/shoelace/dist')
 shoelaceSettings.hoist = false
 
 export const componentSets: Record<ComponentsState['components'], Record<string, Component>> = {

packages/core-tests/DashEditors.test.ts

@@ -324,7 +324,7 @@ describe('core/DashEditors', () => {
       expect(result).to.eq(20)
     })
 
-    it('has score 6 when sh:in exists but value is not in the set', () => {
+    it('has score 11 when sh:in exists but value is not in the set', () => {
       // given
       const graph = cf({ dataset: $rdf.dataset() })
       const property = propertyShape(
@@ -336,7 +336,7 @@ describe('core/DashEditors', () => {
       const result = DashEditors.enumSelect.match(property, value)
 
       // then
-      expect(result).to.eq(6)
+      expect(result).to.eq(11)
     })
   })
 

packages/core/DashEditors.ts

@@ -163,7 +163,7 @@ export const detailsEditor: SingleEditor = {
  *
  * @returns `0` if shape does not have `sh:in`
  * @returns `20` if value is empty string or value is one of `sh:in`
- * @returns `6` otherwise
+ * @returns `11` otherwise
  */
 export const enumSelect: SingleEditor = {
   term: dash.EnumSelectEditor,
@@ -176,7 +176,7 @@ export const enumSelect: SingleEditor = {
       return 20
     }
 
-    return shape.in.some(enumValue => value?.term.equals(enumValue)) ? 20 : 6
+    return shape.in.some(enumValue => value?.term.equals(enumValue)) ? 20 : 11
   },
 }
 

packages/wc-material/components/select.ts

@@ -26,7 +26,7 @@ function select(
 ) {
   return html`<mwc-select ${readOnly(property)} @selected="${(e: CustomEvent) => actions.update(pointers[e.detail.index].term)}" ${validity(value)}>
     ${repeat(pointers, pointer => html`<mwc-list-item ?selected="${pointer.term.equals(value.object?.term)}" value="${pointer.value}">
-        ${localizedLabel(pointer)}
+        ${localizedLabel(pointer, { fallback: pointer.value })}
     </mwc-list-item>`)}
 </mwc-select>`
 }

packages/wc-shoelace/components/autocomplete.ts

@@ -57,7 +57,7 @@ export const autocomplete: Lazy<AutoCompleteEditor> & Options = {
         }
       }
 
-      let nodeValue = value.object?.value
+      let nodeValue = ''
       if (isGraphPointer.isNamedNode(value.object)) {
         const nodeUrl = new URL(value.object.value)
         nodeValue = nodeUrl.hash || nodeUrl.pathname
@@ -89,9 +89,13 @@ export const autocomplete: Lazy<AutoCompleteEditor> & Options = {
           updateComponentState({
             selected: resource,
           })
+        }).finally(() => {
+          updateComponentState({
+            loading: false,
+          })
         })
 
-      updateComponentState({ selectionLoading })
+      updateComponentState({ selectionLoading, loading: true })
     }
   },
   init(...args) {

packages/wc-vaadin/components/enumSelect.ts

@@ -21,7 +21,9 @@ function renderer(choices: GraphPointer[], value: Term | undefined) {
 
     render(
       html`
-        ${repeat(choices, pointer => html`<vaadin-item ?selected="${pointer.term.equals(value)}">${localizedLabel(pointer)}</vaadin-item>`)}
+        ${repeat(choices, pointer => html`<vaadin-item ?selected="${pointer.term.equals(value)}">
+          ${localizedLabel(pointer, { fallback: pointer.value })}
+        </vaadin-item>`)}
       `,
       listBox!,
     )

packages/wc/components/index.ts

@@ -36,7 +36,7 @@ export const enumSelect: Render<EnumSelectEditor> = function ({ property, value,
   return html`<select ${readOnly(property)} @input="${updateHandler}" required ${validity(value)}>
         <option value=""></option>
         ${repeat(choices, pointer => html`<option ?selected="${pointer.value === value.object?.value}" value="${pointer.value}">
-            ${localizedLabel(pointer)}
+            ${localizedLabel(pointer, { fallback: pointer.value })}
         </option>`)}
     </select>`
 }