lit-rdf 0.2.0 → 0.2.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # lit-rdf
 
+## 0.2.1
+
+### Patch Changes
+
+- 02c819c: Added `order-dir` and function-based `orderBy` to `<target-node>`
+
 ## 0.2.0
 
 ### Minor Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lit-rdf",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "type": "module",
   "scripts": {
     "prepare": "husky",
@@ -58,6 +58,7 @@
     "@typescript-eslint/parser": "^7",
     "@vitest/browser-playwright": "^4.0.18",
     "@vitest/coverage-v8": "^4.0.18",
+    "@vocabulary/rdfs": "^1.0.6",
     "eslint-import-resolver-typescript": "^2",
     "eslint-plugin-storybook": "^10.2.12",
     "husky": "^9.1.7",

package/src/components/target-node.d.ts

@@ -1,9 +1,10 @@
 import { LitElement } from 'lit';
-import type { NamedNode } from '@rdfjs/types';
+import type { SortPredicate } from '../context.js';
 declare const default_base: typeof LitElement & import("../constructor.js").LitElementConstructor<import("../constructor.js").WithFocusNode & import("../mixins/targetNode.js").WithTargets>;
 export default class extends default_base {
     static styles: import("lit").CSSResult;
-    orderBy: NamedNode | undefined;
+    orderBy: SortPredicate | undefined;
+    orderDir: 'asc' | 'desc';
     render(): import("lit-html").TemplateResult<1>;
 }
 export {};

package/src/components/target-node.js

@@ -8,9 +8,13 @@ import { css, html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { provide } from '@lit/context';
 import { provideTargetNode } from '../mixins/targetNode.js';
-import { toNamedNode } from '../converter.js';
-import { sortCriteria } from '../context.js';
+import { toSortPredicate } from '../converter.js';
+import { sortDirection, sortPredicate } from '../context.js';
 let default_1 = class extends provideTargetNode(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.orderDir = 'asc';
+    }
     static { this.styles = css `
         :host {
             display: contents !important;
@@ -21,9 +25,13 @@ let default_1 = class extends provideTargetNode(LitElement) {
     }
 };
 __decorate([
-    property({ type: Object, attribute: 'order-by', converter: toNamedNode }),
-    provide({ context: sortCriteria })
+    property({ type: Object, attribute: 'order-by', converter: toSortPredicate }),
+    provide({ context: sortPredicate })
 ], default_1.prototype, "orderBy", void 0);
+__decorate([
+    property({ type: String, attribute: 'order-dir', reflect: true }),
+    provide({ context: sortDirection })
+], default_1.prototype, "orderDir", void 0);
 default_1 = __decorate([
     customElement('target-node')
 ], default_1);

package/src/context.d.ts

@@ -1,11 +1,13 @@
-import type { AnyPointer, MultiPointer } from 'clownface';
+import type { AnyPointer, GraphPointer, MultiPointer } from 'clownface';
 import type env from '@zazuko/env/web.js';
-import type { NamedNode } from '@rdfjs/types';
 export type Environment = typeof env;
+export interface SortPredicate {
+    (node: GraphPointer): string | undefined;
+}
 export declare const environment: {
-    __context__: import("@zazuko/env-core").DerivedEnvironment<import("@rdfjs/environment/Environment.js").Environment<import("@rdfjs/data-model/Factory.js").default | import("@rdfjs/formats/Factory.js").FormatsFactory | import("@rdfjs/term-map/Factory.js").TermMapFactory | import("@tpluscode/rdf-ns-builders").default | import("clownface/Factory.js").default | import("@rdfjs/term-set/Factory.js").TermSetFactory | import("@rdfjs/namespace/Factory.js").NamespaceFactory | import("@rdfjs/traverser/Factory.js").TraverserFactory>, import("@rdfjs/environment/Environment.js").Environment<{
-        dataset: import("@zazuko/env/lib/DatasetFactory.js").FactoryMethod<import("@zazuko/env/lib/Dataset.js").Dataset>;
-        init(this: import("@rdfjs/environment/Environment.js").Environment<import("@rdfjs/data-model/Factory.js").default | import("@rdfjs/formats/Factory.js").FormatsFactory | import("@rdfjs/term-map/Factory.js").TermMapFactory | import("@zazuko/env/lib/DatasetFactory.js").DatasetFactory<import("@zazuko/env/lib/Dataset.js").Dataset>>): void;
+    __context__: import("@zazuko/env-core").DerivedEnvironment<import("@rdfjs/environment/Environment").Environment<import("@rdfjs/data-model/Factory").default | import("@rdfjs/formats/Factory").FormatsFactory | import("@rdfjs/term-map/Factory").TermMapFactory | import("@tpluscode/rdf-ns-builders").default | import("clownface/Factory").default | import("@rdfjs/term-set/Factory").TermSetFactory | import("@rdfjs/namespace/Factory").NamespaceFactory | import("@rdfjs/traverser/Factory").TraverserFactory>, import("@rdfjs/environment/Environment").Environment<{
+        dataset: import("@zazuko/env/lib/DatasetFactory").FactoryMethod<import("@zazuko/env/lib/Dataset").Dataset>;
+        init(this: import("@rdfjs/environment/Environment").Environment<import("@rdfjs/data-model/Factory").default | import("@rdfjs/formats/Factory").FormatsFactory | import("@rdfjs/term-map/Factory").TermMapFactory | import("@zazuko/env/lib/DatasetFactory").DatasetFactory<import("@zazuko/env/lib/Dataset").Dataset>>): void;
     }>>;
 };
 export declare const dataset: {
@@ -14,6 +16,9 @@ export declare const dataset: {
 export declare const focusNode: {
     __context__: MultiPointer | undefined;
 };
-export declare const sortCriteria: {
-    __context__: NamedNode<string> | undefined;
+export declare const sortPredicate: {
+    __context__: SortPredicate | undefined;
+};
+export declare const sortDirection: {
+    __context__: "asc" | "desc" | undefined;
 };

package/src/context.js

@@ -2,4 +2,5 @@ import { createContext } from '@lit/context';
 export const environment = createContext(Symbol('environment'));
 export const dataset = createContext(Symbol('dataset'));
 export const focusNode = createContext(Symbol('focus-node'));
-export const sortCriteria = createContext(Symbol('focus-node-sort'));
+export const sortPredicate = createContext(Symbol('focus-node-sort'));
+export const sortDirection = createContext(Symbol('focus-node-sort-dir'));

package/src/controllers/FocusNode.d.ts

@@ -2,7 +2,8 @@ import type { ReactiveControllerHost } from 'lit';
 import type { GraphPointer, MultiPointer } from 'clownface';
 export declare class FocusNode {
     private focusNodeConsumer;
-    private sortCriteriaConsumer;
+    private sortPredicateConsumer;
+    private sortDirectionConsumer;
     constructor(host: ReactiveControllerHost & HTMLElement);
     get pointer(): MultiPointer | undefined;
     get array(): GraphPointer[] | undefined;

package/src/controllers/FocusNode.js

@@ -1,5 +1,5 @@
 import { ContextConsumer } from '@lit/context';
-import { focusNode, sortCriteria } from '../context.js';
+import { focusNode, sortPredicate, sortDirection } from '../context.js';
 export class FocusNode {
     constructor(host) {
         this.focusNodeConsumer = new ContextConsumer(host, {
@@ -9,8 +9,15 @@ export class FocusNode {
                 host.requestUpdate();
             },
         });
-        this.sortCriteriaConsumer = new ContextConsumer(host, {
-            context: sortCriteria,
+        this.sortPredicateConsumer = new ContextConsumer(host, {
+            context: sortPredicate,
+            subscribe: true,
+            callback() {
+                host.requestUpdate();
+            },
+        });
+        this.sortDirectionConsumer = new ContextConsumer(host, {
+            context: sortDirection,
             subscribe: true,
             callback() {
                 host.requestUpdate();
@@ -22,12 +29,16 @@ export class FocusNode {
     }
     get array() {
         const array = this.pointer?.toArray();
-        const sortPredicate = this.sortCriteriaConsumer.value;
-        if (!array || !sortPredicate) {
+        const sortPredicateFunc = this.sortPredicateConsumer.value;
+        const sortDirectionValue = this.sortDirectionConsumer.value;
+        if (!array || !sortPredicateFunc) {
             return array;
         }
         return array.sort((left, right) => {
-            return left.out(sortPredicate).value?.localeCompare(right.out(sortPredicate).value || '') || 0;
+            if (sortDirectionValue === 'desc') {
+                return sortPredicateFunc(right)?.localeCompare(sortPredicateFunc(left) || '') || 0;
+            }
+            return sortPredicateFunc(left)?.localeCompare(sortPredicateFunc(right) || '') || 0;
         });
     }
 }

package/src/converter.d.ts

@@ -1,3 +1,8 @@
 import type { ComplexAttributeConverter } from 'lit';
-export declare const toNamedNode: ComplexAttributeConverter;
+import type { NamedNode } from '@rdfjs/types';
+export declare const toNamedNode: {
+    fromAttribute(value: string | null): NamedNode;
+    toAttribute({ value }: NamedNode): string;
+};
 export declare const toPropertyPath: ComplexAttributeConverter;
+export declare const toSortPredicate: ComplexAttributeConverter;

package/src/converter.js

@@ -24,3 +24,11 @@ export const toPropertyPath = {
         return parse(value);
     },
 };
+export const toSortPredicate = {
+    fromAttribute(value) {
+        const namedNode = toNamedNode.fromAttribute(value);
+        return (node) => {
+            return node.out(namedNode).value;
+        };
+    },
+};