Skip to content

Commit

Permalink
refactor: vaadin date/time pickers
Browse files Browse the repository at this point in the history
  • Loading branch information
tpluscode committed Jan 6, 2025
1 parent 3d5659f commit 7a0ac9d
Show file tree
Hide file tree
Showing 11 changed files with 163 additions and 83 deletions.
14 changes: 14 additions & 0 deletions demos/storybook/shapes/editors/dash/DatePicker/minimal.ttl
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
PREFIX dash: <http://datashapes.org/dash#>
PREFIX ex: <http://example.org/>
PREFIX sh: <http://www.w3.org/ns/shacl#>

<>
a sh:NodeShape ;
sh:property [
sh:path ex:datePicker ;
sh:name "date" ;
dash:editor dash:DatePickerEditor ;
sh:minCount 1 ;
sh:maxCount 1 ;
] ;
.
15 changes: 15 additions & 0 deletions demos/storybook/shapes/editors/dash/DateTimePicker/minimal.ttl
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
PREFIX dash: <http://datashapes.org/dash#>
PREFIX ex: <http://example.org/>
PREFIX sh: <http://www.w3.org/ns/shacl#>

<>
a sh:NodeShape ;
sh:property
[
sh:path ex:datePicker ;
sh:name "date time" ;
dash:editor dash:DateTimePickerEditor ;
sh:minCount 1 ;
sh:maxCount 1 ;
] ;
.
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import type { Meta } from '@storybook/web-components'
import { createStory, defaultMeta } from '../../../common.js'
import { configure } from '../configure.js'
import datePicker from '../../../../shapes/editors/dash/DatePicker/minimal.ttl?raw'

const meta: Meta = {
...defaultMeta,
}

export default meta

export const empty = createStory({
name: 'Empty value',
shapes: datePicker,
prefixes: ['xsd', 'schema'],
})(configure)
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import type { Meta } from '@storybook/web-components'
import { createStory, defaultMeta } from '../../../common.js'
import { configure } from '../configure.js'
import dateTimePicker from '../../../../shapes/editors/dash/DateTimePicker/minimal.ttl?raw'

const meta: Meta = {
...defaultMeta,
}

export default meta

export const empty = createStory({
name: 'Empty value',
shapes: dateTimePicker,
prefixes: ['xsd', 'schema'],
})(configure)
4 changes: 2 additions & 2 deletions packages/wc-material/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@

| Method | Type |
|--------------|--------------------------------------------------|
| `createItem` | `({ pointer, icon, selected, ...rest }: Item & Record<string, unknown>): UncompiledTemplateResult<1>` |
| `createItem` | `({ pointer, icon, selected, ...rest }: Item & Record<string, unknown>): TemplateResult<1>` |

## Events

Expand Down Expand Up @@ -58,7 +58,7 @@

| Method | Type |
|--------------|--------------------------------------------------|
| `createItem` | `({ pointer, icon, selected, ...rest }: Item & Record<string, unknown>): UncompiledTemplateResult<1>` |
| `createItem` | `({ pointer, icon, selected, ...rest }: Item & Record<string, unknown>): TemplateResult<1>` |

## Events

Expand Down
16 changes: 2 additions & 14 deletions packages/wc-vaadin/components.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@
*/

export { default as BooleanSelect } from './components/BooleanSelectEditor.js'
export { default as DateTimePicker } from './components/DateTimePickerEditor.js'
export { default as DatePicker } from './components/DatePickerEditor.js'

/**
export const textField: Lazy<SingleEditorComponent> = {
Expand Down Expand Up @@ -80,20 +82,6 @@ export const autoComplete: Lazy<AutoCompleteEditor> = {
editor: dash.AutoCompleteEditor,
}
export const datePicker: Lazy<SingleEditorComponent> = {
editor: dash.DatePickerEditor,
lazyRender() {
return import('./components/date.js').then(m => m.datePicker)
},
}
export const dateTimePicker: Lazy<SingleEditorComponent> = {
editor: dash.DateTimePickerEditor,
lazyRender() {
return import('./components/date.js').then(m => m.dateTimePicker)
},
}
export const urlEditor: Lazy<SingleEditorComponent> = {
editor: dash.URIEditor,
lazyRender() {
Expand Down
23 changes: 23 additions & 0 deletions packages/wc-vaadin/components/DatePickerEditor.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import { GlobalDependencyLoader, SingleEditorComponent } from '@hydrofoil/shaperone-wc'
import { spread } from '@open-wc/lit-helpers'
import { dash, sh, xsd } from '@tpluscode/rdf-ns-builders'
import { html } from 'lit'
import { localizedLabel } from '@rdfjs-elements/lit-helpers/localizedLabel.js'
import env from '@hydrofoil/shaperone-core/env.js'
import { validity } from './validation.js'

export default class extends GlobalDependencyLoader(SingleEditorComponent) {
static readonly editor = dash.DatePickerEditor

render() {
return html`
<vaadin-date-picker ${spread(validity(this.value))}
.label="${localizedLabel(this.property.shape.pointer, { property: sh.name })}"
.value="${this.value.object?.value || ''}" .readonly="${!!this.property.shape.readOnly}"
@value-changed="${(e: CustomEvent) => this.setValue(env().literal(e.detail.value, xsd.date))}"></vaadin-date-picker>`
}

* dependencies() {
yield import('@vaadin/date-picker')
}
}
22 changes: 22 additions & 0 deletions packages/wc-vaadin/components/DateTimePickerEditor.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import { GlobalDependencyLoader, SingleEditorComponent } from '@hydrofoil/shaperone-wc'
import { spread } from '@open-wc/lit-helpers'
import { dash, sh, xsd } from '@tpluscode/rdf-ns-builders'
import { html } from 'lit'
import { localizedLabel } from '@rdfjs-elements/lit-helpers/localizedLabel.js'
import env from '@hydrofoil/shaperone-core/env.js'
import { validity } from './validation.js'

export default class extends GlobalDependencyLoader(SingleEditorComponent) {
static readonly editor = dash.DateTimePickerEditor

render() {
return html`<vaadin-date-time-picker ${spread(validity(this.value))}
.label="${localizedLabel(this.property.shape.pointer, { property: sh.name })}"
.value="${this.value.object?.value || ''}" .readonly="${!!this.property.shape.readOnly}"
@value-changed="${(e: CustomEvent) => this.setValue(env().literal(e.detail.value, xsd.dateTime))}"></vaadin-date-time-picker>`
}

* dependencies() {
yield import('@vaadin/date-time-picker')
}
}
18 changes: 0 additions & 18 deletions packages/wc-vaadin/components/date.ts

This file was deleted.

48 changes: 25 additions & 23 deletions packages/wc/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -34,32 +34,34 @@ Check the main documentation page for instructions on customizing the form's ren

## Properties

| Property | Attribute | Modifiers | Type | Default | Description |
|---------------------|----------------------|-----------|--------------------------------------------------|-------------------|--------------------------------------------------|
| `components` | `components` | readonly | `ComponentsState` | | Gets the state of the editor components |
| `configuration` | `configuration` | | `ConfigCallback \| undefined` | | |
| `debug` | `debug` | | `boolean` | false | |
| `dispatch` | | | `ModelsDispatch<Models> & Dispatch` | | |
| `editors` | `editors` | readonly | `EditorsState` | | Gets the state of the DASH editors model |
| `env` | | readonly | `Environment<any>` | | Gets the RDF/JS environment |
| `isValid` | | readonly | `boolean` | | Gets a value indicating if there are any `sh:Violation` violation results |
| `noEditorSwitches` | `no-editor-switches` | | `boolean` | false | Disables the ability to change object editors. Only the one with [highest score](http://datashapes.org/forms.html#score) will be rendered |
| `registry` | | | `CustomElementRegistry \| undefined` | | |
| `renderer` | | | `Renderer<UncompiledTemplateResult<ResultType>>` | "DefaultRenderer" | Gets or sets the renderer implementation |
| `resource` | `resource` | | `GraphPointer<BlankNode \| NamedNode<string>, DatasetCore<Quad, Quad>> \| undefined` | | Gets or sets the resource graph as graph pointer |
| `shapes` | `shapes` | | `DatasetCore<Quad, Quad> \| AnyPointer<AnyContext, DatasetCore<Quad, Quad>> \| undefined` | | Gets or sets the shapes graph |
| `state` | `state` | | `FormState` | | Gets the internal state of the form element |
| `validationReport` | | readonly | `GraphPointer<Term, DatasetCore<Quad, Quad>> \| undefined` | | Gets a graph pointer to the latest [SHACL Validation Report](https://www.w3.org/TR/shacl/#validation-report) |
| `validationResults` | | readonly | `ValidationResultState[]` | | Get all validation results found in the {@see validationReport} graph |
| `value` | | readonly | `RdfResource<DatasetCore<Quad, Quad>> \| null` | | Gets the resource as a [rdfine](https://npm.im/@tpluscode/rdfine) object |
| Property | Attribute | Modifiers | Type | Default | Description |
|---------------------|----------------------|-----------|--------------------------------------------------|---------|--------------------------------------------------|
| `components` | `components` | readonly | `ComponentsState` | | Gets the state of the editor components |
| `configuration` | `configuration` | | `ConfigCallback \| undefined` | | |
| `debug` | `debug` | | `boolean` | false | |
| `dispatch` | | | `ModelsDispatch<{ editors: Model<EditorsState, { addMetadata: (state: EditorsState, factory: (env: ShaperoneEnvironment) => DatasetCore<Quad, Quad> \| AnyPointer<...> \| Iterable<...>) => EditorsState; addMatchers: (state: EditorsState, editors: Record<...> \| AnyEditor[]) => EditorsState; decorate: (editors: EditorsSta...` | | |
| `editors` | `editors` | readonly | `EditorsState` | | Gets the state of the DASH editors model |
| `env` | | readonly | `ShaperoneEnvironment` | | Gets the RDF/JS environment |
| `isValid` | | readonly | `boolean` | | Gets a value indicating if there are any `sh:Violation` violation results |
| `noEditorSwitches` | `no-editor-switches` | | `boolean` | false | Disables the ability to change object editors. Only the one with [highest score](http://datashapes.org/forms.html#score) will be rendered |
| `reducer` | | | `Reducer<S, Action<any>>` | | |
| `registry` | | | `CustomElementRegistry \| undefined` | | |
| `renderer` | | | `RendererState` | | |
| `resource` | `resource` | | `FocusNode \| undefined` | | Gets or sets the resource graph as graph pointer |
| `shapes` | `shapes` | | `DatasetCore<Quad, Quad> \| AnyPointer<AnyContext, DatasetCore<Quad, Quad>> \| undefined` | | Gets or sets the shapes graph |
| `state` | `state` | | `FormState` | | Gets the internal state of the form element |
| `validationReport` | | readonly | `GraphPointer \| undefined` | | Gets a graph pointer to the latest [SHACL Validation Report](https://www.w3.org/TR/shacl/#validation-report) |
| `validationResults` | | readonly | `ValidationResultState[]` | | Get all validation results found in the {@see validationReport} graph |
| `value` | | readonly | `RdfResource<DatasetCore<Quad, Quad>> \| null` | | Gets the resource as a [rdfine](https://npm.im/@tpluscode/rdfine) object |

## Methods

| Method | Type | Description |
|-------------|-----------------------------------------------|--------------------------------------------------|
| `configure` | `(fn: ConfigCallback \| undefined): void` | |
| `mapEvents` | `(): { changed: ({ detail }: any) => void; }` | |
| `validate` | `(): void` | Triggers validation of the current resource against the shapes graph |
| Method | Type | Description |
|-------------------|-----------------------------------------------|--------------------------------------------------|
| `configure` | `(fn: ConfigCallback \| undefined): void` | |
| `mapEvents` | `(): { changed: ({ detail }: any) => void; }` | |
| `renderFocusNode` | `(focusNode: FocusNode): TemplateResult` | |
| `validate` | `(): void` | Triggers validation of the current resource against the shapes graph |

## Events

Expand Down
54 changes: 28 additions & 26 deletions packages/wc/custom-elements.json
Original file line number Diff line number Diff line change
Expand Up @@ -23,9 +23,9 @@
"default": "false"
},
{
"name": "state",
"description": "Gets the internal state of the form element",
"type": "FormState"
"name": "resource",
"description": "Gets or sets the resource graph as graph pointer",
"type": "FocusNode | undefined"
},
{
"name": "shapes",
Expand All @@ -36,15 +36,15 @@
"name": "configuration",
"type": "ConfigCallback | undefined"
},
{
"name": "resource",
"description": "Gets or sets the resource graph as graph pointer",
"type": "GraphPointer<BlankNode | NamedNode<string>, DatasetCore<Quad, Quad>> | undefined"
},
{
"name": "debug",
"type": "boolean",
"default": "false"
},
{
"name": "state",
"description": "Gets the internal state of the form element",
"type": "FormState"
}
],
"properties": [
Expand All @@ -54,14 +54,12 @@
},
{
"name": "renderer",
"description": "Gets or sets the renderer implementation",
"type": "Renderer<UncompiledTemplateResult<ResultType>>",
"default": "\"DefaultRenderer\""
"type": "RendererState"
},
{
"name": "env",
"description": "Gets the RDF/JS environment",
"type": "Environment<any>"
"type": "ShaperoneEnvironment"
},
{
"name": "editors",
Expand All @@ -83,10 +81,10 @@
"default": "false"
},
{
"name": "state",
"attribute": "state",
"description": "Gets the internal state of the form element",
"type": "FormState"
"name": "resource",
"attribute": "resource",
"description": "Gets or sets the resource graph as graph pointer",
"type": "FocusNode | undefined"
},
{
"name": "value",
Expand All @@ -106,7 +104,7 @@
{
"name": "validationReport",
"description": "Gets a graph pointer to the latest [SHACL Validation Report](https://www.w3.org/TR/shacl/#validation-report)",
"type": "GraphPointer<Term, DatasetCore<Quad, Quad>> | undefined"
"type": "GraphPointer | undefined"
},
{
"name": "shapes",
Expand All @@ -120,20 +118,24 @@
"type": "ConfigCallback | undefined"
},
{
"name": "resource",
"attribute": "resource",
"description": "Gets or sets the resource graph as graph pointer",
"type": "GraphPointer<BlankNode | NamedNode<string>, DatasetCore<Quad, Quad>> | undefined"
"name": "debug",
"attribute": "debug",
"type": "boolean",
"default": "false"
},
{
"name": "dispatch",
"type": "ModelsDispatch<Models> & Dispatch"
"type": "ModelsDispatch<{ editors: Model<EditorsState, { addMetadata: (state: EditorsState, factory: (env: ShaperoneEnvironment) => DatasetCore<Quad, Quad> | AnyPointer<...> | Iterable<...>) => EditorsState; addMatchers: (state: EditorsState, editors: Record<...> | AnyEditor[]) => EditorsState; decorate: (editors: EditorsSta..."
},
{
"name": "debug",
"attribute": "debug",
"type": "boolean",
"default": "false"
"name": "reducer",
"type": "Reducer<S, Action<any>>"
},
{
"name": "state",
"attribute": "state",
"description": "Gets the internal state of the form element",
"type": "FormState"
}
],
"events": [
Expand Down

0 comments on commit 7a0ac9d

Please sign in to comment.