septima-widget-vue 0.1.0

package/README.md

@@ -0,0 +1,47 @@
+# Septima Widget Vue
+
+Vue 3 component for [Septima Widget](https://www.npmjs.com/package/septima-widget). See documentation at [widget.cdn.septima.dk](https://widget.cdn.septima.dk/latest/vue.html).
+
+Septima Widget is a commercial API for interactive maps. Contact us at kontakt@septima.dk for more information.
+
+## Installation
+
+```
+npm install septima-widget-vue
+```
+
+## Usage
+
+```vue
+<script setup>
+import { ref } from 'vue'
+import SeptimaWidget from 'septima-widget-vue'
+
+const mapRef = ref(null)
+
+function zoomToAddress() {
+  mapRef.value?.widget?.setView({ x: 724413, y: 6175985, zoom: 14 })
+}
+</script>
+
+<template>
+  <div style="height: 500px">
+    <SeptimaWidget
+      ref="mapRef"
+      :config="{
+        map: {
+          view: { zoomLevel: 10, x: 724413, y: 6175985 },
+          layer: [{ namedlayer: '#septima_standard' }]
+        }
+      }"
+    />
+  </div>
+  <button @click="zoomToAddress">Zoom</button>
+</template>
+```
+
+The config can also be specified as a URL to a JSON file:
+
+```vue
+<SeptimaWidget ref="mapRef" config="https://example.com/my-widget-config.json" />
+```

package/index.d.ts

@@ -0,0 +1,48 @@
+import type { DefineComponent } from 'vue'
+
+declare class WidgetAPI {
+  isReady: boolean
+  VERSION: string
+  on(event: string, listener: (...args: unknown[]) => void): object
+  off(eventRef: object): void
+  setConfig(config: object | string): void
+  addData(geojson: object, options?: object): void
+  removeData(layerID: string): void
+  setView(options: object): void
+  getView(crs?: string): object | null
+  addLayer(layerConfig: object): void
+  removeLayer(layerID: string): void
+  showLayer(layerID: string): void
+  hideLayer(layerID: string): void
+  setLayerOpacity(layerID: string, opacity: number): void
+  setLayerZIndex(layerID: string, zIndex: number): void
+  reloadLayer(layerID: string): void
+  getLayers(): object[]
+  updateLayerParams(layerID: string, params: object): void
+  selectFeatureInLayer(
+    layerID: string,
+    filterFunction?: ((properties: object) => boolean) | null,
+    zoomOptions?: object,
+    silent?: boolean
+  ): void
+  deselectFeature(silent?: boolean): void
+  showPopup(geojson: object, html: string): void
+  hidePopup(): void
+  draw(options: object): void
+  unDraw(): void
+  createMapImage(options: object, callback: (result: unknown) => void): void
+  transform(geojson: object, options: { from?: string; to: string }, callback: () => void): void
+}
+
+export interface SeptimaWidgetExpose {
+  widget: WidgetAPI | null
+}
+
+export interface SeptimaWidgetProps {
+  config: object | string
+}
+
+declare const SeptimaWidget: DefineComponent<SeptimaWidgetProps, SeptimaWidgetExpose, object>
+
+export { SeptimaWidget }
+export default SeptimaWidget

package/index.mjs

@@ -0,0 +1,28 @@
+import { createElementBlock as e, defineComponent as t, onMounted as n, openBlock as r, ref as i, toRaw as a, watch as o } from "vue";
+import s from "septima-widget";
+//#endregion
+//#region components/vue/src/SeptimaWidget.vue
+var c = /*#__PURE__*/ ((e, t) => {
+	let n = e.__vccOpts || e;
+	for (let [e, r] of t) n[e] = r;
+	return n;
+})(/* @__PURE__ */ t({
+	__name: "SeptimaWidget",
+	props: { config: {} },
+	setup(t, { expose: c }) {
+		let l = t, u = i(null), d = i(null);
+		return n(() => {
+			u.value && (d.value = new s(u.value, structuredClone(a(l.config))));
+		}), o(() => l.config, (e) => {
+			d.value?.setConfig(structuredClone(a(e)));
+		}, { deep: !0 }), c({ get widget() {
+			return d.value;
+		} }), (t, n) => (r(), e("div", {
+			ref_key: "container",
+			ref: u,
+			class: "septima-widget"
+		}, null, 512));
+	}
+}), [["__scopeId", "data-v-9d3c905d"]]);
+//#endregion
+export { c as SeptimaWidget, c as default };

package/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "septima-widget-vue",
+  "version": "0.1.0",
+  "description": "Vue 3 component for Septima Widget",
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": "./index.mjs",
+      "types": "./index.d.ts"
+    }
+  },
+  "module": "./index.mjs",
+  "types": "./index.d.ts",
+  "dependencies": {
+    "septima-widget": ">=3.0.0"
+  },
+  "peerDependencies": {
+    "vue": "^3.0.0"
+  },
+  "license": "LICENSED"
+}

package/widget3.css

@@ -0,0 +1,2 @@
+.septima-widget[data-v-9d3c905d]{width:100%;height:100%}
+/*$vite$:1*/