@ulb-darmstadt/shacl-form 2.0.0-rc4 → 2.0.0-rc5
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 +2 -2
- package/dist/bundle.js +2 -2
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -13,7 +13,7 @@ HTML5 web component for editing/viewing [RDF](https://www.w3.org/RDF/) data that
|
|
|
13
13
|
```html
|
|
14
14
|
<html>
|
|
15
15
|
<head>
|
|
16
|
-
<!-- load bundled web component (or when
|
|
16
|
+
<!-- load bundled web component (or when developing your own app, just do "npm i @ulb-darmstadt/shacl-form") -->
|
|
17
17
|
<script src="https://cdn.jsdelivr.net/npm/@ulb-darmstadt/shacl-form/dist/bundle.js" type="module"></script>
|
|
18
18
|
</head>
|
|
19
19
|
<body>
|
|
@@ -95,7 +95,7 @@ Validates the form data against the SHACL shapes graph and displays validation r
|
|
|
95
95
|
```typescript
|
|
96
96
|
registerPlugin(plugin: Plugin)
|
|
97
97
|
```
|
|
98
|
-
Register a [plugin](./src/plugin.ts) to customize editing/viewing certain property values. Plugins handle specific RDF predicates or `xsd:datatype`s or both.
|
|
98
|
+
Register a [plugin](./src/plugin.ts) to customize editing/viewing certain property values. Plugins handle specific RDF predicates or `xsd:datatype`s or both. Example: [Leaflet](./src/plugins/leaflet.ts)
|
|
99
99
|
|
|
100
100
|
```typescript
|
|
101
101
|
setTheme(theme: Theme)
|
package/dist/bundle.js
CHANGED
|
@@ -158,7 +158,7 @@ a, a:visited { color: inherit; }
|
|
|
158
158
|
:host(.caret) a:before { content: ''; width: var(--rokit-caret-size-inner); height: var(--rokit-caret-size-inner); border-style: none solid solid none; border-width: calc(0.3 * var(--rokit-caret-size-inner)); transform: translate(0.15em, -0.15em) rotate(45deg); transition: transform var(--rokit-transition-duration-inner) ease-out; margin-right: calc(0.5 * var(--rokit-caret-size-inner)); }
|
|
159
159
|
:host(.caret.down) a:before { transform: translate(0.15em, 0.15em) rotate(225deg); }
|
|
160
160
|
:host(.caret.right) a:before { transform: translate(0em, 0em) rotate(-45deg); }
|
|
161
|
-
`];Mf([je({type:Boolean,reflect:!0})],$i.prototype,"icon",2);$i=Mf([An("rokit-button")],$i);var Xm=Object.defineProperty,Qm=Object.getOwnPropertyDescriptor,Df=i=>{throw TypeError(i)},Rn=(i,e,n,r)=>{for(var o=r>1?void 0:r?Qm(e,n):e,a=i.length-1,l;a>=0;a--)(l=i[a])&&(o=(r?l(e,n,o):l(o))||o);return r&&o&&Xm(e,n,o),o},Jm=(i,e,n)=>e.has(i)||Df("Cannot "+n),Kc=(i,e,n)=>(Jm(i,e,"read from private field"),n?n.call(i):e.get(i)),Km=(i,e,n)=>e.has(i)?Df("Cannot add the same private member more than once"):e instanceof WeakSet?e.add(i):e.set(i,n),Is;let Ct=class extends an{constructor(){super(...arguments),this.open=!1,this.disabled=!1,this.transitioning=!1,this.closedBeforeTransition=!1,Km(this,Is,new MutationObserver(()=>this.updateContentHeight())),this.onMouseDown=(()=>{this.closedBeforeTransition=!this.open&&!this.transitioning}).bind(this),this.onClick=(()=>{this.toggle(this.closedBeforeTransition,!0)}).bind(this)}firstUpdated(){this.transitionDuration=Gm(getComputedStyle(this).getPropertyValue("--rokit-transition-duration-inner")),new IntersectionObserver(i=>{i.length&&i[0].isIntersecting&&this.updateContentHeight()}).observe(this)}updated(i){i.has("transitioning")&&this.classList.toggle("transitioning",this.transitioning),i.has("disabled")&&(this.disabled?(this.header.removeEventListener("mousedown",this.onMouseDown),this.header.removeEventListener("click",this.onClick)):(this.header.addEventListener("mousedown",this.onMouseDown),this.header.addEventListener("click",this.onClick))),i.has("open")&&!this.disabled&&
|
|
161
|
+
`];Mf([je({type:Boolean,reflect:!0})],$i.prototype,"icon",2);$i=Mf([An("rokit-button")],$i);var Xm=Object.defineProperty,Qm=Object.getOwnPropertyDescriptor,Df=i=>{throw TypeError(i)},Rn=(i,e,n,r)=>{for(var o=r>1?void 0:r?Qm(e,n):e,a=i.length-1,l;a>=0;a--)(l=i[a])&&(o=(r?l(e,n,o):l(o))||o);return r&&o&&Xm(e,n,o),o},Jm=(i,e,n)=>e.has(i)||Df("Cannot "+n),Kc=(i,e,n)=>(Jm(i,e,"read from private field"),n?n.call(i):e.get(i)),Km=(i,e,n)=>e.has(i)?Df("Cannot add the same private member more than once"):e instanceof WeakSet?e.add(i):e.set(i,n),Is;let Ct=class extends an{constructor(){super(...arguments),this.open=!1,this.disabled=!1,this.transitioning=!1,this.closedBeforeTransition=!1,Km(this,Is,new MutationObserver(()=>this.updateContentHeight())),this.onMouseDown=(()=>{this.closedBeforeTransition=!this.open&&!this.transitioning}).bind(this),this.onClick=(()=>{this.toggle(this.closedBeforeTransition,!0)}).bind(this)}firstUpdated(){this.transitionDuration=Gm(getComputedStyle(this).getPropertyValue("--rokit-transition-duration-inner")),new IntersectionObserver(i=>{i.length&&i[0].isIntersecting&&this.updateContentHeight()}).observe(this)}updated(i){i.has("transitioning")&&this.classList.toggle("transitioning",this.transitioning),i.has("disabled")&&(this.disabled?(this.header.removeEventListener("mousedown",this.onMouseDown),this.header.removeEventListener("click",this.onClick)):(this.header.addEventListener("mousedown",this.onMouseDown),this.header.addEventListener("click",this.onClick))),i.has("open")&&i.get("open")!==void 0&&!this.transitioning&&!this.disabled&&this.toggle(this.open)}updateContentHeight(){setTimeout(()=>{this.content.style.maxHeight=(this.maxHeight!==void 0?Math.min(this.maxHeight,this.content.scrollHeight):this.content.scrollHeight)+"px",this.classList.toggle("has-content",this.content.style.maxHeight!=="0px")})}onSlotChange(){const i=this.shadowRoot.querySelector("#content > slot").assignedNodes();Kc(this,Is).disconnect();for(const e of i)Kc(this,Is).observe(e,{subtree:!0,childList:!0,characterData:!0,attributes:!0});this.updateContentHeight()}toggle(i=!this.open,e=!1){this.disabled||(this.transitioning=!0,this.open=i,this.toggleButton.classList.toggle("down",i),setTimeout(()=>{this.transitioning=!1,this.open&&e&&this.content.scrollIntoView({block:"nearest"})},this.transitionDuration))}render(){return $t`
|
|
162
162
|
<header part="header">
|
|
163
163
|
<slot name="prefix" part="prefix"></slot>
|
|
164
164
|
<span class="label"><slot name="label" part="label">${this.label}</slot></span>
|
|
@@ -181,7 +181,7 @@ a, a:visited { color: inherit; }
|
|
|
181
181
|
.label { flex-grow: 1; overflow: hidden; }
|
|
182
182
|
#content { display: flex; transition: max-height var(--rokit-transition-duration-inner) ease-in-out; position: relative; scrollbar-width: thin; }
|
|
183
183
|
#toggle { margin-left: 3px; }
|
|
184
|
-
`];Rn([je({type:Boolean,reflect:!0})],Ct.prototype,"open",2);Rn([je()],Ct.prototype,"label",2);Rn([je({reflect:!0})],Ct.prototype,"maxHeight",2);Rn([je({type:Boolean})],Ct.prototype,"disabled",2);Rn([Bt("#content")],Ct.prototype,"content",2);Rn([Bt("#toggle")],Ct.prototype,"toggleButton",2);Rn([Bt("header")],Ct.prototype,"header",2);Rn([Vl()],Ct.prototype,"transitioning",2);Ct=Rn([An("rokit-collapsible")],Ct);var Ym=Object.defineProperty,e_=Object.getOwnPropertyDescriptor,Of=i=>{throw TypeError(i)},qt=(i,e,n,r)=>{for(var o=r>1?void 0:r?e_(e,n):e,a=i.length-1,l;a>=0;a--)(l=i[a])&&(o=(r?l(e,n,o):l(o))||o);return r&&o&&Ym(e,n,o),o},Ff=(i,e,n)=>e.has(i)||Of("Cannot "+n),t_=(i,e,n)=>(Ff(i,e,"read from private field"),e.get(i)),n_=(i,e,n)=>e.has(i)?Of("Cannot add the same private member more than once"):e instanceof WeakSet?e.add(i):e.set(i,n),Yc=(i,e,n,r)=>(Ff(i,e,"write to private field"),e.set(i,n),n),Rr;let dt=class extends ln{constructor(){super(),this.type="text",this.readonly=!1,this.sticky=!1,this.minWidth=80,this.autoGrowLabelWidth=!1,n_(this,Rr,""),this.addEventListener("keydown",i=>{i.code==="Escape"&&this.blur()}),this.addEventListener("focus",()=>{this.classList.add("has-focus")}),this.addEventListener("blur",()=>{this.inputElement.scrollLeft=0,this.classList.remove("has-focus")})}firstUpdated(){Yc(this,Rr,this.value),this.inputElement.addEventListener("change",()=>{this.value=this.inputElement.value}),this.autoGrowLabelWidth&&new IntersectionObserver(i=>{i.length&&i[0].isIntersecting&&this.updateMinWidth()}).observe(this)}updateMinWidth(){const i=this.shadowRoot.querySelector(".wrapper");if(i){const e=this.shadowRoot?.querySelector("label")?.scrollWidth||0,n=this.minWidth>e?this.minWidth:e;i.style.minWidth=n>0?n+"px":""}}updated(i){i.has("label")&&(this.classList.toggle("has-label",this.label!==void 0),this.autoGrowLabelWidth&&this.updateMinWidth()),i.has("min")&&(this.inputElement.min=this.min||""),i.has("max")&&(this.inputElement.max=this.max||""),i.has("step")&&(this.inputElement.step=this.step||""),i.has("placeholder")&&(this.inputElement.placeholder=this.placeholder||""),i.has("pattern")&&(this.inputElement.pattern=this.pattern||""),i.has("minLength")&&(this.inputElement.minLength=this.minLength===void 0?-1:this.minLength),i.has("maxLength")&&(this.inputElement.maxLength=this.maxLength===void 0?-1:this.maxLength),i.has("value")&&(this.classList.toggle("has-value",this.value!==""),this.setFormValue(this.value),this.updateValidity(this.inputElement.validity,this.inputElement.validationMessage,this.inputElement),this.value!==t_(this,Rr)&&(Yc(this,Rr,this.value),this.dispatchEvent(new CustomEvent("change",{bubbles:!0}))))}clear(){this.inputElement.value="",this.value="",this.blur()}renderInput(){return $t`<input id="input" part="input" size="1" name="${this.name}" type="${this.type}" autocomplete="off" ?disabled="${this.disabled}" ?readonly="${this.readonly}" ?required="${this.required}" .value="${this.type==="file"?"":this.value}">`}render(){return $t`
|
|
184
|
+
`];Rn([je({type:Boolean,reflect:!0})],Ct.prototype,"open",2);Rn([je()],Ct.prototype,"label",2);Rn([je({reflect:!0})],Ct.prototype,"maxHeight",2);Rn([je({type:Boolean})],Ct.prototype,"disabled",2);Rn([Bt("#content")],Ct.prototype,"content",2);Rn([Bt("#toggle")],Ct.prototype,"toggleButton",2);Rn([Bt("header")],Ct.prototype,"header",2);Rn([Vl()],Ct.prototype,"transitioning",2);Ct=Rn([An("rokit-collapsible")],Ct);var Ym=Object.defineProperty,e_=Object.getOwnPropertyDescriptor,Of=i=>{throw TypeError(i)},qt=(i,e,n,r)=>{for(var o=r>1?void 0:r?e_(e,n):e,a=i.length-1,l;a>=0;a--)(l=i[a])&&(o=(r?l(e,n,o):l(o))||o);return r&&o&&Ym(e,n,o),o},Ff=(i,e,n)=>e.has(i)||Of("Cannot "+n),t_=(i,e,n)=>(Ff(i,e,"read from private field"),e.get(i)),n_=(i,e,n)=>e.has(i)?Of("Cannot add the same private member more than once"):e instanceof WeakSet?e.add(i):e.set(i,n),Yc=(i,e,n,r)=>(Ff(i,e,"write to private field"),e.set(i,n),n),Rr;let dt=class extends ln{constructor(){super(),this.type="text",this.readonly=!1,this.sticky=!1,this.minWidth=80,this.autoGrowLabelWidth=!1,n_(this,Rr,""),this.addEventListener("keydown",i=>{i.code==="Escape"&&this.blur()}),this.addEventListener("focus",()=>{this.classList.add("has-focus")}),this.addEventListener("blur",()=>{this.inputElement.scrollLeft=0,this.classList.remove("has-focus")}),this.addEventListener("click",i=>{i.stopPropagation()})}firstUpdated(){Yc(this,Rr,this.value),this.inputElement.addEventListener("change",()=>{this.value=this.inputElement.value}),this.autoGrowLabelWidth&&new IntersectionObserver(i=>{i.length&&i[0].isIntersecting&&this.updateMinWidth()}).observe(this)}updateMinWidth(){const i=this.shadowRoot.querySelector(".wrapper");if(i){const e=this.shadowRoot?.querySelector("label")?.scrollWidth||0,n=this.minWidth>e?this.minWidth:e;i.style.minWidth=n>0?n+"px":""}}updated(i){i.has("label")&&(this.classList.toggle("has-label",this.label!==void 0),this.autoGrowLabelWidth&&this.updateMinWidth()),i.has("min")&&(this.inputElement.min=this.min||""),i.has("max")&&(this.inputElement.max=this.max||""),i.has("step")&&(this.inputElement.step=this.step||""),i.has("placeholder")&&(this.inputElement.placeholder=this.placeholder||""),i.has("pattern")&&(this.inputElement.pattern=this.pattern||""),i.has("minLength")&&(this.inputElement.minLength=this.minLength===void 0?-1:this.minLength),i.has("maxLength")&&(this.inputElement.maxLength=this.maxLength===void 0?-1:this.maxLength),i.has("value")&&(this.classList.toggle("has-value",this.value!==""),this.setFormValue(this.value),this.updateValidity(this.inputElement.validity,this.inputElement.validationMessage,this.inputElement),this.value!==t_(this,Rr)&&(Yc(this,Rr,this.value),this.dispatchEvent(new CustomEvent("change",{bubbles:!0}))))}clear(){this.inputElement.value="",this.value="",this.blur()}renderInput(){return $t`<input id="input" part="input" size="1" name="${this.name}" type="${this.type}" autocomplete="off" ?disabled="${this.disabled}" ?readonly="${this.readonly}" ?required="${this.required}" .value="${this.type==="file"?"":this.value}">`}render(){return $t`
|
|
185
185
|
<slot name="prefix" part="prefix"></slot>
|
|
186
186
|
<div class="wrapper">
|
|
187
187
|
<label for="input" part="label">${this.label}</label>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ulb-darmstadt/shacl-form",
|
|
3
|
-
"version": "2.0.0-
|
|
3
|
+
"version": "2.0.0-rc5",
|
|
4
4
|
"description": "SHACL form generator",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/index.js",
|
|
@@ -64,7 +64,7 @@
|
|
|
64
64
|
"vitest": "^3.2.4"
|
|
65
65
|
},
|
|
66
66
|
"peerDependencies": {
|
|
67
|
-
"@ro-kit/ui-widgets": "^1.0.
|
|
67
|
+
"@ro-kit/ui-widgets": "^1.0.2",
|
|
68
68
|
"jsonld": "^8.3.3",
|
|
69
69
|
"leaflet": "^1.9.4",
|
|
70
70
|
"leaflet-editable": "^1.3.2",
|