@kurrawongai/kai-ui
A Vue.js component library for use in Kurrawong tools.
592
| Install | |
|---|---|
npm install @kurrawongai/kai-ui |
|
| Latest Version: | 0.5.0 |
| Vue: | 3 |
| License: | BSD-3-Clause |
| Last Updated: | Aug 23, 2025 |
| Links: | GitHub · npm |
Maintainer: jamiefeiss
KAI UI
A Vue.js component library for use in Kurrawong tools.
Contents
Install
To add kai-ui to your project, simply run:
npm install @kurrawongai/kai-ui
or
pnpm add @kurrawongai/kai-ui
You may also need to import KAI-UI's stylesheet ("kai-ui/kai-ui.css").
Components
Editor
A base Monaco code editor with support for multiple languages, including RDF languages.
OpenLayers Map
An interactive OpenLayers Map that supports loading WKT & geoJSON features.
Supported Languages
- CSS
- HTML
- Java
- JavaScript
- JSON
- Markdown
- N3
- N-Quads
- N-Triples
- Python
- SHACL
- SPARQL
- TriG
- Turtle
- TypeScript
- XML
- YAML
Props
| prop | description | type | required | default |
|---|---|---|---|---|
| languages | What languages are available to choose from | string[], see above for supported languages |
all are enabled by default | |
| hideToolbar | Hides the tool bar at the top of the editor | boolean |
false |
|
| options | Monaco editor options | See the available options from Monaco | {
automaticLayout: true,
minimap: { enabled: false },
stickyScroll: { enabled: false },
scrollBeyondLastLine: false,
} |
|
| hideLanguage | Hides the language selector | boolean |
false |
|
| hideTheme | Hides the theme selector | boolean |
false |
|
| hideCopyButton | Hides the copy button | boolean |
false |
|
| hideClearButton | Hides the clear button | boolean |
false |
|
| hideUploadButton | Hides the upload button | boolean |
false |
|
| hideDownloadButton | Hides the download selector | boolean |
false |
|
| disableDrag | Disabled drag and drop | boolean |
false |
|
| readonly | Sets the editor to read only. Also hides the upload & clear buttons | boolean |
false |
|
| downloadFilename | Sets the name of the file for download | string |
"output" |
|
| directDownload | Downloads the file directly instead of a popup for renaming the downloaded file name | boolean |
false |
|
| class | Passthrough for applying CSS classes | string |
Models
| model | description | type | required | default |
|---|---|---|---|---|
| - | The value or content of the editor | string |
||
| language | The current language of the editor | string, see above |
"text" |
|
| theme | The color theme of the editor | "light" | "dark" | "system" |
"system" |
OpenLayers Map
An interactive OpenLayers Map that supports loading WKT & geoJSON features.
Props
| prop | description | type | required | default |
|---|---|---|---|---|
| center | Where to center the map | number[], array of 2 coordinates |
[133.7751, -25.2744] (Australia) | |
| zoom | Zoom level | number |
4 | |
| rotation | Map rotation | number |
0 | |
| projection | Projection to use, make sure this matches the data | string |
'EPSG:4326' | |
| focusSourceRef | Passed through to vue3-openlayers | Sources.OlSourceVector |
null | |
| layers | Layers of GeoJSON FeatureCollections to include in the map on load | {
type: "FeatureCollection";
title: string;
features: {
type: "Feature";
name: string;
wkt?: string;
geoJSON?: any;
}[];
mapStyle?: MapStyle;
}[] |
[] | |
| loading | Display a "Loading" modal on the map, useful when loading data | boolean |
false | |
| drawEnabled | Enable "Draw mode", allowing the user to draw on the Map | boolean |
false | |
| mapStyle | Sets the default layer styles for view, hover & select states | {
style?: MapStyleOptions;
hoverStyle?: MapStyleOptions;
selectStyle?: MapStyleOptions;
} |
see consts.ts for default styles |
|
| drawStyle | Sets the layer style for drawing geometries | {
strokeWidth?: number;
strokeColor?: string;
fillColor?: string;
pointRadius?: number;
pointStrokeWidth?: number;
pointStrokeColor?: string;
pointFillColor?: string;
} |
see consts.ts for default styles |
Events
| event | description | parameters |
|---|---|---|
| select | Fired when the user selects (clicks) a feature | feature |
| hover | Fired when the user hovers over a feature | feature |
| drawstart | Fired when the user starts drawing | feature |
| drawend | Fired when a feature is fully drawn by the user | feature |
Graph Diagram
A reactive node-edge graph diagram that renders data from RDF.
Props
| prop | description | type | required | default |
|---|---|---|---|---|
| data | The RDF data to load & display | string |
✓ | |
| options | Options for customisation | See the options table below | ||
| graphOptions | Additional options from Unovis' graph to pass through | See the available options from Unovis | {
nodeSize: 30,
linkWidth: 2,
nodeFill: () => ... // colours nodes using style options below,
linkArrow: true,
forceLayoutSettings: {
linkDistance: 80,
linkStrength: 0.45,
charge: -1000,
forceXStrength: 0.15,
forceYStrength: 0.4,
},
nodeSelectionHighlightMode: GraphNodeSelectionHighlightMode.GreyoutNonConnected,
} |
|
| class | Passthrough for applying CSS classes | string |
Options
| prop | description | type | required | default |
|---|---|---|---|---|
| format | The format of the RDF data to display | "application/ld+json" | "jsonld" | "text/turtle" | "ttl" | "application/trig" | "trig" | "application/n-triples" | "nt" | "application/n-quads" | "nq" | "text/n3" | "n3" | "application/rdf+xml" | "rdf" |
"text/turtle" |
|
| prefixes | A map of prefixes to generate curies - e.g. {"sdo": "https://schema.org/", ...} |
Record<string, string> |
A small object of default prefixes are supplied to extend upon | |
| predicates | An array of predicate IRIs to filter by | string[] |
||
| labels | An array of labelling predicates which will label nodes instead of IRIs | string[] |
||
| query | A SPARQL CONSTRUCT query to filter results | string |
||
| style | {
node?: string;
literal?: string;
bnode?: string;
nodeBorderColor?: string;
} |
Models
| model | description | type | required | default |
|---|---|---|---|---|
| showLabels | Flag whether to display labels for nodes & edges | boolean |
false |
Development
To install:
pnpm install
To run locally:
pnpm dev
License
This code is available for reuse according to the BSD 3-Clause License.
© 2025 KurrawongAI
Related Packages
Version History
| Version | Released | Vue | License |
|---|---|---|---|
| 0.5.0 | ^3.0.0 | BSD-3-Clause | |
| 0.4.0 | ^3.0.0 | BSD-3-Clause | |
| 0.3.0 | ^3.0.0 | BSD-3-Clause | |
| 0.2.5 | ^3.0.0 | BSD-3-Clause | |
| 0.2.4 | ^3.0.0 | BSD-3-Clause | |
| 0.2.2 | ^3.0.0 | BSD-3-Clause | |
| 0.1.0 | ^3.0.0 |