@rosettadash/vue 0.1.1 → 0.1.3

package/src/visual/chart/bar/bar-chart.js

@@ -1,21 +1,85 @@
 import { defineComponent, h } from 'vue';
+const FALLBACK_BARS = [
+    { label: 'A', value: 40 },
+    { label: 'B', value: 65 },
+    { label: 'C', value: 55 },
+    { label: 'D', value: 80 },
+    { label: 'E', value: 48 },
+];
+function defaultFormat(value) {
+    if (value >= 1000000) {
+        return `${(value / 1000000).toFixed(1)}M`;
+    }
+    if (value >= 1000) {
+        return `${(value / 1000).toFixed(0)}K`;
+    }
+    return String(Math.round(value));
+}
+function buildTicks(max, count = 4) {
+    if (max <= 0) {
+        return [0];
+    }
+    const step = max / (count - 1);
+    return Array.from({ length: count }, (_, index) => step * index);
+}
 /** @rosettadash/vue/visual/chart/bar — visual.chart.bar */
 export const BarChart = defineComponent({
     name: 'RdBarChart',
     props: {
         className: { type: String, default: undefined },
         title: { type: String, default: undefined },
+        bars: { type: Array, default: undefined },
+        yAxisLabel: { type: String, default: undefined },
+        valueFormat: { type: Function, default: undefined },
     },
     slots: Object,
     setup(props, { slots, attrs }) {
-        const barHeights = [40, 65, 55, 80, 48];
         return () => {
-            var _a, _b;
-            const rootClass = ['rd-chart-bar', props.className, typeof attrs.class === 'string' ? attrs.class : ''].filter(Boolean).join(' ');
-            return h('section', { class: rootClass, 'data-testid': 'rd-chart-bar' }, [
-                h('header', { class: 'rd-chart-bar__header' }, h('span', null, (_a = props.title) !== null && _a !== void 0 ? _a : 'Bar chart')),
-                h('div', { class: 'rd-chart-bar__bars', 'aria-hidden': 'true' }, barHeights.map((height, i) => h('div', { key: i, class: 'rd-chart-bar__bar-wrap' }, h('div', { class: 'rd-chart-bar__bar', style: { height: `${height}%` } })))),
-                (_b = slots.default) === null || _b === void 0 ? void 0 : _b.call(slots),
+            var _a, _b, _c, _d, _e;
+            const rootClass = ['rd-chart-bar', props.className, typeof attrs.class === 'string' ? attrs.class : '']
+                .filter(Boolean)
+                .join(' ');
+            const bars = ((_a = props.bars) === null || _a === void 0 ? void 0 : _a.length) ? props.bars : FALLBACK_BARS;
+            const format = (_b = props.valueFormat) !== null && _b !== void 0 ? _b : defaultFormat;
+            const maxValue = Math.max(...bars.map((bar) => bar.value), 1);
+            const ticks = buildTicks(maxValue);
+            return h('section', {
+                class: rootClass,
+                'data-testid': 'rd-chart-bar',
+                role: 'img',
+                'aria-label': (_c = props.title) !== null && _c !== void 0 ? _c : 'Bar chart',
+            }, [
+                h('header', { class: 'rd-chart-bar__header' }, h('span', null, (_d = props.title) !== null && _d !== void 0 ? _d : 'Bar chart')),
+                h('div', { class: 'rd-chart-bar__body' }, [
+                    h('div', { class: 'rd-chart-bar__y-axis', 'aria-hidden': 'true' }, [
+                        h('div', { class: 'rd-chart-bar__y-ticks' }, [...ticks]
+                            .reverse()
+                            .map((tick) => h('span', { key: tick, class: 'rd-chart-bar__y-tick' }, format(tick)))),
+                        props.yAxisLabel ? h('span', { class: 'rd-chart-bar__y-label' }, props.yAxisLabel) : null,
+                    ]),
+                    h('div', { class: 'rd-chart-bar__plot' }, [
+                        h('div', { class: 'rd-chart-bar__grid-lines', 'aria-hidden': 'true' }, ticks.map((tick) => h('span', {
+                            key: tick,
+                            class: 'rd-chart-bar__grid-line',
+                            style: { bottom: `${(tick / maxValue) * 100}%` },
+                        }))),
+                        h('div', { class: 'rd-chart-bar__bars' }, bars.map((bar) => {
+                            const heightPct = (bar.value / maxValue) * 100;
+                            return h('div', { key: bar.label, class: 'rd-chart-bar__bar-group' }, [
+                                h('div', { class: 'rd-chart-bar__bar-wrap' }, [
+                                    h('div', {
+                                        class: 'rd-chart-bar__bar',
+                                        style: { height: `${heightPct}%` },
+                                        title: `${bar.label}: ${format(bar.value)}`,
+                                    }),
+                                ]),
+                                h('span', { class: 'rd-chart-bar__x-label' }, bar.label),
+                                h('span', { class: 'rd-chart-bar__value' }, format(bar.value)),
+                            ]);
+                        })),
+                    ]),
+                ]),
+                (_e = slots.default) === null || _e === void 0 ? void 0 : _e.call(slots),
             ]);
         };
     },

package/src/visual/chart/bar/bar-chart.js.map

@@ -1 +1 @@
-{"version":3,"file":"bar-chart.js","sourceRoot":"","sources":["../../../../../../../packages/vue/src/visual/chart/bar/bar-chart.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,CAAC,EAA6C,MAAM,KAAK,CAAC;AAOpF,2DAA2D;AAC3D,MAAM,CAAC,MAAM,QAAQ,GAAG,eAAe,CAAC;IACtC,IAAI,EAAE,YAAY;IAClB,KAAK,EAAE;QACL,SAAS,EAAE,EAAE,IAAI,EAAE,MAAsC,EAAE,OAAO,EAAE,SAAS,EAAE;QAC/E,KAAK,EAAE,EAAE,IAAI,EAAE,MAAsC,EAAE,OAAO,EAAE,SAAS,EAAE;KAC5E;IACD,KAAK,EAAE,MAAgD;IACvD,KAAK,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE;QAC3B,MAAM,UAAU,GAAG,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC;QACxC,OAAO,GAAG,EAAE;;YACV,MAAM,SAAS,GAAG,CAAC,cAAc,EAAE,KAAK,CAAC,SAAS,EAAE,OAAO,KAAK,CAAC,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;YAClI,OAAO,CAAC,CAAC,SAAS,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,aAAa,EAAE,cAAc,EAAE,EAAE;gBACzE,CAAC,CAAC,QAAQ,EAAE,EAAE,KAAK,EAAE,sBAAsB,EAAE,EAAE,CAAC,CAAC,MAAM,EAAE,IAAI,EAAE,MAAA,KAAK,CAAC,KAAK,mCAAI,WAAW,CAAC,CAAC;gBAC3F,CAAC,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,oBAAoB,EAAE,aAAa,EAAE,MAAM,EAAE,EAAE,UAAU,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAC5F,CAAC,CAAC,KAAK,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,wBAAwB,EAAE,EAAE,CAAC,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,mBAAmB,EAAE,KAAK,EAAE,EAAE,MAAM,EAAE,GAAG,MAAM,GAAG,EAAE,EAAE,CAAC,CAAC,CACjI,CAAC;gBACF,MAAA,KAAK,CAAC,OAAO,qDAAI;aAClB,CAAC,CAAC;QACH,CAAC,CAAC;IACJ,CAAC;CACF,CAAC,CAAC"}
+{"version":3,"file":"bar-chart.js","sourceRoot":"","sources":["../../../../../../../packages/vue/src/visual/chart/bar/bar-chart.ts"],"names":[],"mappings":"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"}

package/src/visual/chart/line/line-chart.d.ts

@@ -1,6 +1,14 @@
 import { type PropType, type SlotsType, type VNode } from 'vue';
+export interface LineChartPoint {
+    x: string | number;
+    y: number;
+}
 export interface LineChartProps {
     title?: string;
+    points?: LineChartPoint[];
+    xAxisLabel?: string;
+    yAxisLabel?: string;
+    valueFormat?: (value: number) => string;
     className?: string;
 }
 /** @rosettadash/vue/visual/chart/line — visual.chart.line */
@@ -13,6 +21,22 @@ export declare const LineChart: import("vue").DefineComponent<import("vue").Extr
         type: PropType<string | undefined>;
         default: undefined;
     };
+    points: {
+        type: PropType<LineChartPoint[] | undefined>;
+        default: undefined;
+    };
+    xAxisLabel: {
+        type: PropType<string | undefined>;
+        default: undefined;
+    };
+    yAxisLabel: {
+        type: PropType<string | undefined>;
+        default: undefined;
+    };
+    valueFormat: {
+        type: PropType<((value: number) => string) | undefined>;
+        default: undefined;
+    };
 }>, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
     [key: string]: any;
 }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
@@ -24,9 +48,29 @@ export declare const LineChart: import("vue").DefineComponent<import("vue").Extr
         type: PropType<string | undefined>;
         default: undefined;
     };
+    points: {
+        type: PropType<LineChartPoint[] | undefined>;
+        default: undefined;
+    };
+    xAxisLabel: {
+        type: PropType<string | undefined>;
+        default: undefined;
+    };
+    yAxisLabel: {
+        type: PropType<string | undefined>;
+        default: undefined;
+    };
+    valueFormat: {
+        type: PropType<((value: number) => string) | undefined>;
+        default: undefined;
+    };
 }>> & Readonly<{}>, {
     className: string | undefined;
     title: string | undefined;
+    yAxisLabel: string | undefined;
+    valueFormat: ((value: number) => string) | undefined;
+    points: LineChartPoint[] | undefined;
+    xAxisLabel: string | undefined;
 }, SlotsType<{
     default?: () => VNode[];
 }>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/src/visual/chart/line/line-chart.js

@@ -1,22 +1,119 @@
 import { defineComponent, h } from 'vue';
+const FALLBACK_POINTS = [
+    { x: '2019', y: 42 },
+    { x: '2020', y: 18 },
+    { x: '2021', y: 12 },
+    { x: '2022', y: 19 },
+    { x: '2023', y: 31 },
+    { x: '2024', y: 36 },
+];
+const CHART_WIDTH = 320;
+const CHART_HEIGHT = 200;
+const PAD_LEFT = 58;
+const PAD_RIGHT = 12;
+const PAD_TOP = 16;
+const PAD_BOTTOM = 36;
+const Y_TICK_X = PAD_LEFT - 6;
+function defaultFormat(value) {
+    if (value >= 1000000) {
+        return `${(value / 1000000).toFixed(1)}M`;
+    }
+    if (value >= 1000) {
+        return `${(value / 1000).toFixed(0)}K`;
+    }
+    return String(Math.round(value));
+}
+function buildTicks(min, max, count = 4) {
+    if (min === max) {
+        return [min];
+    }
+    const step = (max - min) / (count - 1);
+    return Array.from({ length: count }, (_, index) => min + step * index);
+}
+function chartCoords(points, minY, rangeY) {
+    const plotW = CHART_WIDTH - PAD_LEFT - PAD_RIGHT;
+    const plotH = CHART_HEIGHT - PAD_TOP - PAD_BOTTOM;
+    const lastIndex = Math.max(points.length - 1, 1);
+    return points.map((point, index) => {
+        const x = PAD_LEFT + (index / lastIndex) * plotW;
+        const y = PAD_TOP + plotH - ((point.y - minY) / rangeY) * plotH;
+        return { x, y, label: String(point.x) };
+    });
+}
 /** @rosettadash/vue/visual/chart/line — visual.chart.line */
 export const LineChart = defineComponent({
     name: 'RdLineChart',
     props: {
         className: { type: String, default: undefined },
         title: { type: String, default: undefined },
+        points: { type: Array, default: undefined },
+        xAxisLabel: { type: String, default: undefined },
+        yAxisLabel: { type: String, default: undefined },
+        valueFormat: { type: Function, default: undefined },
     },
     slots: Object,
     setup(props, { slots, attrs }) {
         return () => {
-            var _a, _b;
-            const rootClass = ['rd-chart-line', props.className, typeof attrs.class === 'string' ? attrs.class : ''].filter(Boolean).join(' ');
-            return h('section', { class: rootClass, 'data-testid': 'rd-chart-line' }, [
-                h('header', { class: 'rd-chart-line__header' }, h('span', null, (_a = props.title) !== null && _a !== void 0 ? _a : 'Line chart')),
-                h('svg', { viewBox: '0 0 240 96', class: 'rd-chart-line__svg', 'aria-hidden': 'true' }, [
-                    h('polyline', { class: 'rd-chart-line__line', points: '0,80 40,60 80,65 120,40 160,45 200,20 240,30' }),
+            var _a, _b, _c, _d, _e;
+            const rootClass = ['rd-chart-line', props.className, typeof attrs.class === 'string' ? attrs.class : '']
+                .filter(Boolean)
+                .join(' ');
+            const points = ((_a = props.points) === null || _a === void 0 ? void 0 : _a.length) ? props.points : FALLBACK_POINTS;
+            const format = (_b = props.valueFormat) !== null && _b !== void 0 ? _b : defaultFormat;
+            const values = points.map((point) => point.y);
+            const dataMin = Math.min(...values);
+            const dataMax = Math.max(...values);
+            const minY = dataMin >= 0 ? 0 : dataMin;
+            const maxY = dataMax;
+            const rangeY = maxY - minY || 1;
+            const ticks = buildTicks(minY, maxY);
+            const coords = chartCoords(points, minY, rangeY);
+            const polyline = coords.map(({ x, y }) => `${x},${y}`).join(' ');
+            const plotH = CHART_HEIGHT - PAD_TOP - PAD_BOTTOM;
+            return h('section', {
+                class: rootClass,
+                'data-testid': 'rd-chart-line',
+                role: 'img',
+                'aria-label': (_c = props.title) !== null && _c !== void 0 ? _c : 'Line chart',
+            }, [
+                h('header', { class: 'rd-chart-line__header' }, h('span', null, (_d = props.title) !== null && _d !== void 0 ? _d : 'Line chart')),
+                h('div', { class: 'rd-chart-line__body' }, [
+                    h('svg', { viewBox: `0 0 ${CHART_WIDTH} ${CHART_HEIGHT}`, class: 'rd-chart-line__svg', 'aria-hidden': 'true' }, [
+                        ...ticks.map((tick) => {
+                            const y = PAD_TOP + plotH - ((tick - minY) / rangeY) * plotH;
+                            return h('g', { key: tick, class: 'rd-chart-line__tick' }, [
+                                h('line', {
+                                    x1: PAD_LEFT,
+                                    y1: y,
+                                    x2: CHART_WIDTH - PAD_RIGHT,
+                                    y2: y,
+                                    class: 'rd-chart-line__grid',
+                                }),
+                                h('text', { x: Y_TICK_X, y: y + 4, class: 'rd-chart-line__tick-label' }, format(tick)),
+                            ]);
+                        }),
+                        h('polyline', { class: 'rd-chart-line__line', points: polyline }),
+                        ...coords.map(({ x, y, label }) => h('g', { key: label, class: 'rd-chart-line__point' }, [
+                            h('circle', { cx: x, cy: y, r: 3.5, class: 'rd-chart-line__dot' }),
+                            h('text', { x, y: CHART_HEIGHT - 10, class: 'rd-chart-line__x-label' }, label),
+                        ])),
+                        props.yAxisLabel
+                            ? h('text', {
+                                x: 12,
+                                y: PAD_TOP + plotH / 2,
+                                class: 'rd-chart-line__axis-label rd-chart-line__axis-label--y',
+                            }, props.yAxisLabel)
+                            : null,
+                        props.xAxisLabel
+                            ? h('text', {
+                                x: PAD_LEFT + (CHART_WIDTH - PAD_LEFT - PAD_RIGHT) / 2,
+                                y: CHART_HEIGHT - 2,
+                                class: 'rd-chart-line__axis-label rd-chart-line__axis-label--x',
+                            }, props.xAxisLabel)
+                            : null,
+                    ]),
                 ]),
-                (_b = slots.default) === null || _b === void 0 ? void 0 : _b.call(slots),
+                (_e = slots.default) === null || _e === void 0 ? void 0 : _e.call(slots),
             ]);
         };
     },

package/src/visual/chart/line/line-chart.js.map

@@ -1 +1 @@
-{"version":3,"file":"line-chart.js","sourceRoot":"","sources":["../../../../../../../packages/vue/src/visual/chart/line/line-chart.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,CAAC,EAA6C,MAAM,KAAK,CAAC;AAOpF,6DAA6D;AAC7D,MAAM,CAAC,MAAM,SAAS,GAAG,eAAe,CAAC;IACvC,IAAI,EAAE,aAAa;IACnB,KAAK,EAAE;QACL,SAAS,EAAE,EAAE,IAAI,EAAE,MAAsC,EAAE,OAAO,EAAE,SAAS,EAAE;QAC/E,KAAK,EAAE,EAAE,IAAI,EAAE,MAAsC,EAAE,OAAO,EAAE,SAAS,EAAE;KAC5E;IACD,KAAK,EAAE,MAAgD;IACvD,KAAK,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE;QAC3B,OAAO,GAAG,EAAE;;YACV,MAAM,SAAS,GAAG,CAAC,eAAe,EAAE,KAAK,CAAC,SAAS,EAAE,OAAO,KAAK,CAAC,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;YACnI,OAAO,CAAC,CAAC,SAAS,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,aAAa,EAAE,eAAe,EAAE,EAAE;gBAC1E,CAAC,CAAC,QAAQ,EAAE,EAAE,KAAK,EAAE,uBAAuB,EAAE,EAAE,CAAC,CAAC,MAAM,EAAE,IAAI,EAAE,MAAA,KAAK,CAAC,KAAK,mCAAI,YAAY,CAAC,CAAC;gBAC7F,CAAC,CAAC,KAAK,EAAE,EAAE,OAAO,EAAE,YAAY,EAAE,KAAK,EAAE,oBAAoB,EAAE,aAAa,EAAE,MAAM,EAAE,EAAE;oBACtF,CAAC,CAAC,UAAU,EAAE,EAAE,KAAK,EAAE,qBAAqB,EAAE,MAAM,EAAE,8CAA8C,EAAE,CAAC;iBACxG,CAAC;gBACF,MAAA,KAAK,CAAC,OAAO,qDAAI;aAClB,CAAC,CAAC;QACH,CAAC,CAAC;IACJ,CAAC;CACF,CAAC,CAAC"}
+{"version":3,"file":"line-chart.js","sourceRoot":"","sources":["../../../../../../../packages/vue/src/visual/chart/line/line-chart.ts"],"names":[],"mappings":"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"}

package/src/visual/display/3d-geo-globe/three-geo-globe.d.ts

@@ -1,43 +1,32 @@
-import { type PropType, type SlotsType, type VNode } from 'vue';
+import { type GlobeMarker } from '@rosettadash/web-components/visual/display/3d-geo-globe';
+export type { GlobeMarker };
 export interface ThreeGeoGlobeProps {
     title?: string;
-    mode?: string;
+    textureUrl?: string;
+    markers?: GlobeMarker[];
+    selectedId?: string;
+    minHeight?: string | number;
     className?: string;
+    onMarkerSelect?: (detail: {
+        id: string;
+    }) => void;
 }
-/** @rosettadash/vue/visual/display/3d-geo-globe — visual.display.3d-geo-globe */
+/** Vue wrapper around `<rd-three-geo-globe>`. */
 export declare const ThreeGeoGlobe: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     className: {
-        type: PropType<string | undefined>;
+        type: import("vue").PropType<string | undefined>;
         default: undefined;
     };
-    title: {
-        type: PropType<string | undefined>;
-        default: undefined;
-    };
-    mode: {
-        type: PropType<string | undefined>;
-        default: undefined;
-    };
-}>, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
     [key: string]: any;
-}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, string[], string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     className: {
-        type: PropType<string | undefined>;
-        default: undefined;
-    };
-    title: {
-        type: PropType<string | undefined>;
-        default: undefined;
-    };
-    mode: {
-        type: PropType<string | undefined>;
+        type: import("vue").PropType<string | undefined>;
         default: undefined;
     };
-}>> & Readonly<{}>, {
+}>> & Readonly<{
+    [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
+}>, {
     className: string | undefined;
-    mode: string | undefined;
-    title: string | undefined;
-}, SlotsType<{
-    default?: () => VNode[];
-}>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export type ThreeGeoGlobeComponent = typeof ThreeGeoGlobe;

package/src/visual/display/3d-geo-globe/three-geo-globe.js

@@ -1,25 +1,24 @@
-import { defineComponent, h } from 'vue';
-/** @rosettadash/vue/visual/display/3d-geo-globe — visual.display.3d-geo-globe */
-export const ThreeGeoGlobe = defineComponent({
+import { RD_THREE_GEO_GLOBE_TAG, registerRdThreeGeoGlobe, } from '@rosettadash/web-components/visual/display/3d-geo-globe';
+import { defineCustomElementHost } from '../../../lib/custom-element-host';
+/** Vue wrapper around `<rd-three-geo-globe>`. */
+export const ThreeGeoGlobe = defineCustomElementHost({
     name: 'RdThreeGeoGlobe',
-    props: {
-        className: { type: String, default: undefined },
-        title: { type: String, default: undefined },
-        mode: { type: String, default: undefined },
+    tagName: RD_THREE_GEO_GLOBE_TAG,
+    register: registerRdThreeGeoGlobe,
+    attrs: {
+        textureUrl: 'texture-url',
+        selectedId: 'selected-id',
+        minHeight: 'min-height',
     },
-    slots: Object,
-    setup(props, { slots, attrs }) {
-        return () => {
-            var _a, _b;
-            const rootClass = ['rd-display-3d-geo-globe', props.className, typeof attrs.class === 'string' ? attrs.class : ''].filter(Boolean).join(' ');
-            return h('section', {
-                class: rootClass,
-                'data-testid': 'rd-display-3d-geo-globe',
-                'data-three-mode': props.mode,
-                'data-three-title': props.title,
-                'aria-label': (_a = props.title) !== null && _a !== void 0 ? _a : '3D host',
-            }, (_b = slots.default) === null || _b === void 0 ? void 0 : _b.call(slots));
-        };
+    properties: ['markers'],
+    events: {
+        'marker-select': 'onMarkerSelect',
     },
+}, {
+    title: { type: String, default: undefined },
+    textureUrl: { type: String, default: undefined },
+    markers: { type: Array, default: undefined },
+    selectedId: { type: String, default: undefined },
+    minHeight: { type: [String, Number], default: undefined },
 });
 //# sourceMappingURL=three-geo-globe.js.map

package/src/visual/display/3d-geo-globe/three-geo-globe.js.map

@@ -1 +1 @@
-{"version":3,"file":"three-geo-globe.js","sourceRoot":"","sources":["../../../../../../../packages/vue/src/visual/display/3d-geo-globe/three-geo-globe.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,CAAC,EAA6C,MAAM,KAAK,CAAC;AAQpF,iFAAiF;AACjF,MAAM,CAAC,MAAM,aAAa,GAAG,eAAe,CAAC;IAC3C,IAAI,EAAE,iBAAiB;IACvB,KAAK,EAAE;QACL,SAAS,EAAE,EAAE,IAAI,EAAE,MAAsC,EAAE,OAAO,EAAE,SAAS,EAAE;QAC/E,KAAK,EAAE,EAAE,IAAI,EAAE,MAAsC,EAAE,OAAO,EAAE,SAAS,EAAE;QAC3E,IAAI,EAAE,EAAE,IAAI,EAAE,MAAsC,EAAE,OAAO,EAAE,SAAS,EAAE;KAC3E;IACD,KAAK,EAAE,MAAgD;IACvD,KAAK,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE;QAC3B,OAAO,GAAG,EAAE;;YACV,MAAM,SAAS,GAAG,CAAC,yBAAyB,EAAE,KAAK,CAAC,SAAS,EAAE,OAAO,KAAK,CAAC,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;YAC7I,OAAO,CAAC,CAAC,SAAS,EAAE;gBACpB,KAAK,EAAE,SAAS;gBAChB,aAAa,EAAE,yBAAyB;gBACxC,iBAAiB,EAAE,KAAK,CAAC,IAAI;gBAC7B,kBAAkB,EAAE,KAAK,CAAC,KAAK;gBAC/B,YAAY,EAAE,MAAA,KAAK,CAAC,KAAK,mCAAI,SAAS;aACvC,EAAE,MAAA,KAAK,CAAC,OAAO,qDAAI,CAAC,CAAC;QACtB,CAAC,CAAC;IACJ,CAAC;CACF,CAAC,CAAC"}
+{"version":3,"file":"three-geo-globe.js","sourceRoot":"","sources":["../../../../../../../packages/vue/src/visual/display/3d-geo-globe/three-geo-globe.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,sBAAsB,EACtB,uBAAuB,GAExB,MAAM,yDAAyD,CAAC;AACjE,OAAO,EAAE,uBAAuB,EAAE,MAAM,kCAAkC,CAAC;AAc3E,iDAAiD;AACjD,MAAM,CAAC,MAAM,aAAa,GAAG,uBAAuB,CAClD;IACE,IAAI,EAAE,iBAAiB;IACvB,OAAO,EAAE,sBAAsB;IAC/B,QAAQ,EAAE,uBAAuB;IACjC,KAAK,EAAE;QACL,UAAU,EAAE,aAAa;QACzB,UAAU,EAAE,aAAa;QACzB,SAAS,EAAE,YAAY;KACxB;IACD,UAAU,EAAE,CAAC,SAAS,CAAC;IACvB,MAAM,EAAE;QACN,eAAe,EAAE,gBAAgB;KAClC;CACF,EACD;IACE,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE;IAC3C,UAAU,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE;IAChD,OAAO,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE;IAC5C,UAAU,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE;IAChD,SAAS,EAAE,EAAE,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE;CAC1D,CACF,CAAC"}

package/src/visual/display/geo-map/index.d.ts

@@ -0,0 +1,36 @@
+import { type GeoMapMarker, type GeoMapProvider } from '@rosettadash/web-components/visual/display/geo-map';
+export type { GeoMapMarker, GeoMapProvider };
+export interface GeoMapProps {
+    provider?: GeoMapProvider;
+    tileUrl?: string;
+    apiKey?: string;
+    center?: string;
+    zoom?: number;
+    markers?: GeoMapMarker[];
+    selectedId?: string;
+    className?: string;
+    onMarkerSelect?: (detail: {
+        id: string;
+        lat: number;
+        lng: number;
+    }) => void;
+}
+/** Vue wrapper around `<rd-geo-map>`. */
+export declare const GeoMap: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    className: {
+        type: import("vue").PropType<string | undefined>;
+        default: undefined;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, string[], string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    className: {
+        type: import("vue").PropType<string | undefined>;
+        default: undefined;
+    };
+}>> & Readonly<{
+    [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
+}>, {
+    className: string | undefined;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export type GeoMapComponent = typeof GeoMap;

package/src/visual/display/geo-map/index.js

@@ -0,0 +1,25 @@
+import { DB_GEO_MAP_TAG, registerRdGeoMap, } from '@rosettadash/web-components/visual/display/geo-map';
+import { defineCustomElementHost } from '../../../lib/custom-element-host';
+/** Vue wrapper around `<rd-geo-map>`. */
+export const GeoMap = defineCustomElementHost({
+    name: 'RdGeoMap',
+    tagName: DB_GEO_MAP_TAG,
+    register: registerRdGeoMap,
+    attrs: {
+        tileUrl: 'tile-url',
+        apiKey: 'api-key',
+        selectedId: 'selected-id',
+    },
+    properties: ['markers'],
+    events: {
+        'marker-select': 'onMarkerSelect',
+    },
+}, {
+    provider: { type: String, default: undefined },
+    tileUrl: { type: String, default: undefined },
+    apiKey: { type: String, default: undefined },
+    center: { type: String, default: undefined },
+    zoom: { type: Number, default: undefined },
+    selectedId: { type: String, default: undefined },
+});
+//# sourceMappingURL=index.js.map

package/src/visual/display/geo-map/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../packages/vue/src/visual/display/geo-map/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,cAAc,EACd,gBAAgB,GAGjB,MAAM,oDAAoD,CAAC;AAC5D,OAAO,EAAE,uBAAuB,EAAE,MAAM,kCAAkC,CAAC;AAgB3E,yCAAyC;AACzC,MAAM,CAAC,MAAM,MAAM,GAAG,uBAAuB,CAC3C;IACE,IAAI,EAAE,UAAU;IAChB,OAAO,EAAE,cAAc;IACvB,QAAQ,EAAE,gBAAgB;IAC1B,KAAK,EAAE;QACL,OAAO,EAAE,UAAU;QACnB,MAAM,EAAE,SAAS;QACjB,UAAU,EAAE,aAAa;KAC1B;IACD,UAAU,EAAE,CAAC,SAAS,CAAC;IACvB,MAAM,EAAE;QACN,eAAe,EAAE,gBAAgB;KAClC;CACF,EACD;IACE,QAAQ,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE;IAC9C,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE;IAC7C,MAAM,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE;IAC5C,MAAM,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE;IAC5C,IAAI,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE;IAC1C,UAAU,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE;CACjD,CACF,CAAC"}

package/src/visual/input/date-range/date-range-filter.d.ts

@@ -4,6 +4,7 @@ export interface DateRangeFilterProps {
     startDate?: string;
     endDate?: string;
     presetLabel?: string;
+    granularity?: 'date' | 'month';
     onChange?: (range: {
         startDate: string;
         endDate: string;
@@ -32,9 +33,20 @@ export declare const DateRangeFilter: import("vue").DefineComponent<import("vue"
         type: PropType<string | undefined>;
         default: undefined;
     };
+    granularity: {
+        type: PropType<"date" | "month" | undefined>;
+        default: undefined;
+    };
+    onChange: {
+        type: PropType<((range: {
+            startDate: string;
+            endDate: string;
+        }) => void) | undefined>;
+        default: undefined;
+    };
 }>, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
     [key: string]: any;
-}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "change"[], "change", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     className: {
         type: PropType<string | undefined>;
         default: undefined;
@@ -55,12 +67,30 @@ export declare const DateRangeFilter: import("vue").DefineComponent<import("vue"
         type: PropType<string | undefined>;
         default: undefined;
     };
-}>> & Readonly<{}>, {
+    granularity: {
+        type: PropType<"date" | "month" | undefined>;
+        default: undefined;
+    };
+    onChange: {
+        type: PropType<((range: {
+            startDate: string;
+            endDate: string;
+        }) => void) | undefined>;
+        default: undefined;
+    };
+}>> & Readonly<{
+    onChange?: ((...args: any[]) => any) | undefined;
+}>, {
     className: string | undefined;
     label: string | undefined;
+    onChange: ((range: {
+        startDate: string;
+        endDate: string;
+    }) => void) | undefined;
     startDate: string | undefined;
     endDate: string | undefined;
     presetLabel: string | undefined;
+    granularity: "date" | "month" | undefined;
 }, SlotsType<{
     default?: () => VNode[];
 }>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/src/visual/input/date-range/date-range-filter.js

@@ -8,21 +8,53 @@ export const DateRangeFilter = defineComponent({
         startDate: { type: String, default: undefined },
         endDate: { type: String, default: undefined },
         presetLabel: { type: String, default: undefined },
+        granularity: { type: String, default: undefined },
+        onChange: { type: Function, default: undefined },
     },
+    emits: ['change'],
     slots: Object,
-    setup(props, { slots, attrs }) {
+    setup(props, { slots, attrs, emit }) {
         return () => {
-            var _a, _b, _c;
-            const rootClass = ['rd-input-date-range', props.className, typeof attrs.class === 'string' ? attrs.class : ''].filter(Boolean).join(' ');
+            var _a, _b, _c, _d, _e;
+            const rootClass = ['rd-input-date-range', props.className, typeof attrs.class === 'string' ? attrs.class : '']
+                .filter(Boolean)
+                .join(' ');
+            const inputType = props.granularity === 'month' ? 'month' : 'date';
+            const emitRange = (startDate, endDate) => {
+                var _a;
+                const range = { startDate, endDate };
+                emit('change', range);
+                (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, range);
+            };
             return h('section', { class: rootClass, 'data-testid': 'rd-input-date-range' }, [
                 props.label ? h('span', { class: 'rd-field__label' }, props.label) : null,
                 h('div', { class: 'rd-date-range__controls' }, [
-                    h('input', { type: 'date', class: 'rd-input', value: (_a = props.startDate) !== null && _a !== void 0 ? _a : '' }),
+                    h('input', {
+                        type: inputType,
+                        class: 'rd-input',
+                        value: (_a = props.startDate) !== null && _a !== void 0 ? _a : '',
+                        'aria-label': `${(_b = props.label) !== null && _b !== void 0 ? _b : 'Date range'} start`,
+                        onChange: (event) => {
+                            var _a;
+                            const startDate = event.target.value;
+                            emitRange(startDate, (_a = props.endDate) !== null && _a !== void 0 ? _a : '');
+                        },
+                    }),
                     h('span', { class: 'rd-date-range__sep' }, 'to'),
-                    h('input', { type: 'date', class: 'rd-input', value: (_b = props.endDate) !== null && _b !== void 0 ? _b : '' }),
+                    h('input', {
+                        type: inputType,
+                        class: 'rd-input',
+                        value: (_c = props.endDate) !== null && _c !== void 0 ? _c : '',
+                        'aria-label': `${(_d = props.label) !== null && _d !== void 0 ? _d : 'Date range'} end`,
+                        onChange: (event) => {
+                            var _a;
+                            const endDate = event.target.value;
+                            emitRange((_a = props.startDate) !== null && _a !== void 0 ? _a : '', endDate);
+                        },
+                    }),
                 ]),
                 props.presetLabel ? h('span', { class: 'rd-date-range__preset' }, props.presetLabel) : null,
-                (_c = slots.default) === null || _c === void 0 ? void 0 : _c.call(slots),
+                (_e = slots.default) === null || _e === void 0 ? void 0 : _e.call(slots),
             ]);
         };
     },