@rosettadash/vue 0.1.2 → 0.1.3

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/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),
             ]);
         };
     },

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

@@ -1 +1 @@
-{"version":3,"file":"date-range-filter.js","sourceRoot":"","sources":["../../../../../../../packages/vue/src/visual/input/date-range/date-range-filter.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,CAAC,EAA6C,MAAM,KAAK,CAAC;AAWpF,yEAAyE;AACzE,MAAM,CAAC,MAAM,eAAe,GAAG,eAAe,CAAC;IAC7C,IAAI,EAAE,mBAAmB;IACzB,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,SAAS,EAAE,EAAE,IAAI,EAAE,MAAsC,EAAE,OAAO,EAAE,SAAS,EAAE;QAC/E,OAAO,EAAE,EAAE,IAAI,EAAE,MAAsC,EAAE,OAAO,EAAE,SAAS,EAAE;QAC7E,WAAW,EAAE,EAAE,IAAI,EAAE,MAAsC,EAAE,OAAO,EAAE,SAAS,EAAE;KAClF;IACD,KAAK,EAAE,MAAgD;IACvD,KAAK,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE;QAC3B,OAAO,GAAG,EAAE;;YACV,MAAM,SAAS,GAAG,CAAC,qBAAqB,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;YACzI,OAAO,CAAC,CAAC,SAAS,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,aAAa,EAAE,qBAAqB,EAAE,EAAE;gBAChF,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,iBAAiB,EAAE,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI;gBACzE,CAAC,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,yBAAyB,EAAE,EAAE;oBAC7C,CAAC,CAAC,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,MAAA,KAAK,CAAC,SAAS,mCAAI,EAAE,EAAE,CAAC;oBAC7E,CAAC,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,oBAAoB,EAAE,EAAE,IAAI,CAAC;oBAChD,CAAC,CAAC,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,MAAA,KAAK,CAAC,OAAO,mCAAI,EAAE,EAAE,CAAC;iBAC5E,CAAC;gBACF,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,uBAAuB,EAAE,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,IAAI;gBAC3F,MAAA,KAAK,CAAC,OAAO,qDAAI;aAClB,CAAC,CAAC;QACH,CAAC,CAAC;IACJ,CAAC;CACF,CAAC,CAAC"}
+{"version":3,"file":"date-range-filter.js","sourceRoot":"","sources":["../../../../../../../packages/vue/src/visual/input/date-range/date-range-filter.ts"],"names":[],"mappings":"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"}

package/src/visual/input/number/number-input.d.ts

@@ -6,6 +6,7 @@ export interface NumberInputProps {
     max?: number;
     step?: number;
     value?: number;
+    disabled?: boolean;
     onChange?: (value: number) => void;
     className?: string;
 }
@@ -39,9 +40,17 @@ export declare const NumberInput: import("vue").DefineComponent<import("vue").Ex
         type: PropType<number | undefined>;
         default: undefined;
     };
+    disabled: {
+        type: PropType<boolean | undefined>;
+        default: undefined;
+    };
+    onChange: {
+        type: PropType<((value: number) => 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" | "update:value")[], "change" | "update:value", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     className: {
         type: PropType<string | undefined>;
         default: undefined;
@@ -70,14 +79,27 @@ export declare const NumberInput: import("vue").DefineComponent<import("vue").Ex
         type: PropType<number | undefined>;
         default: undefined;
     };
-}>> & Readonly<{}>, {
+    disabled: {
+        type: PropType<boolean | undefined>;
+        default: undefined;
+    };
+    onChange: {
+        type: PropType<((value: number) => void) | undefined>;
+        default: undefined;
+    };
+}>> & Readonly<{
+    onChange?: ((...args: any[]) => any) | undefined;
+    "onUpdate:value"?: ((...args: any[]) => any) | undefined;
+}>, {
     className: string | undefined;
     label: string | undefined;
+    onChange: ((value: number) => void) | undefined;
     value: number | undefined;
     placeholder: string | undefined;
     min: number | undefined;
     max: number | undefined;
     step: number | undefined;
+    disabled: boolean | undefined;
 }, SlotsType<{
     default?: () => VNode[];
 }>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/src/visual/input/number/number-input.js

@@ -10,16 +10,42 @@ export const NumberInput = defineComponent({
         max: { type: Number, default: undefined },
         step: { type: Number, default: undefined },
         value: { type: Number, default: undefined },
+        disabled: { type: Boolean, default: undefined },
+        onChange: { type: Function, default: undefined },
     },
+    emits: ['change', 'update:value'],
     slots: Object,
-    setup(props, { slots, attrs }) {
+    setup(props, { slots, attrs, emit }) {
+        const onNativeChange = (event) => {
+            var _a;
+            const target = event.target;
+            if (!(target instanceof HTMLInputElement)) {
+                return;
+            }
+            const next = Number(target.value);
+            (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, next);
+            emit('change', next);
+            emit('update:value', next);
+        };
         return () => {
-            var _a, _b;
-            const rootClass = ['rd-input-number', props.className, typeof attrs.class === 'string' ? attrs.class : ''].filter(Boolean).join(' ');
+            var _a, _b, _c;
+            const rootClass = ['rd-input-number', props.className, typeof attrs.class === 'string' ? attrs.class : '']
+                .filter(Boolean)
+                .join(' ');
             return h('section', { class: rootClass, 'data-testid': 'rd-input-number' }, [
                 props.label ? h('span', { class: 'rd-field__label' }, props.label) : null,
-                h('input', { type: 'number', class: 'rd-input', placeholder: (_a = props.placeholder) !== null && _a !== void 0 ? _a : '', min: props.min, max: props.max, step: props.step, value: props.value }),
-                (_b = slots.default) === null || _b === void 0 ? void 0 : _b.call(slots),
+                h('input', {
+                    type: 'number',
+                    class: 'rd-input',
+                    placeholder: (_a = props.placeholder) !== null && _a !== void 0 ? _a : '',
+                    min: props.min,
+                    max: props.max,
+                    step: props.step,
+                    value: props.value,
+                    disabled: (_b = props.disabled) !== null && _b !== void 0 ? _b : false,
+                    onChange: onNativeChange,
+                }),
+                (_c = slots.default) === null || _c === void 0 ? void 0 : _c.call(slots),
             ]);
         };
     },

package/src/visual/input/number/number-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"number-input.js","sourceRoot":"","sources":["../../../../../../../packages/vue/src/visual/input/number/number-input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,CAAC,EAA6C,MAAM,KAAK,CAAC;AAapF,iEAAiE;AACjE,MAAM,CAAC,MAAM,WAAW,GAAG,eAAe,CAAC;IACzC,IAAI,EAAE,eAAe;IACrB,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,WAAW,EAAE,EAAE,IAAI,EAAE,MAAsC,EAAE,OAAO,EAAE,SAAS,EAAE;QACjF,GAAG,EAAE,EAAE,IAAI,EAAE,MAAsC,EAAE,OAAO,EAAE,SAAS,EAAE;QACzE,GAAG,EAAE,EAAE,IAAI,EAAE,MAAsC,EAAE,OAAO,EAAE,SAAS,EAAE;QACzE,IAAI,EAAE,EAAE,IAAI,EAAE,MAAsC,EAAE,OAAO,EAAE,SAAS,EAAE;QAC1E,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,iBAAiB,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;YACrI,OAAO,CAAC,CAAC,SAAS,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,aAAa,EAAE,iBAAiB,EAAE,EAAE;gBAC5E,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,iBAAiB,EAAE,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI;gBACzE,CAAC,CAAC,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,UAAU,EAAE,WAAW,EAAE,MAAA,KAAK,CAAC,WAAW,mCAAI,EAAE,EAAE,GAAG,EAAE,KAAK,CAAC,GAAG,EAAE,GAAG,EAAE,KAAK,CAAC,GAAG,EAAE,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,CAAC;gBAC7J,MAAA,KAAK,CAAC,OAAO,qDAAI;aAClB,CAAC,CAAC;QACH,CAAC,CAAC;IACJ,CAAC;CACF,CAAC,CAAC"}
+{"version":3,"file":"number-input.js","sourceRoot":"","sources":["../../../../../../../packages/vue/src/visual/input/number/number-input.ts"],"names":[],"mappings":"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"}

package/src/visual/input/select/select-input.d.ts

@@ -33,9 +33,13 @@ export declare const SelectInput: import("vue").DefineComponent<import("vue").Ex
         type: PropType<string | undefined>;
         default: undefined;
     };
+    onChange: {
+        type: PropType<((value: 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" | "update:value")[], "change" | "update:value", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     className: {
         type: PropType<string | undefined>;
         default: undefined;
@@ -56,9 +60,17 @@ export declare const SelectInput: import("vue").DefineComponent<import("vue").Ex
         type: PropType<string | undefined>;
         default: undefined;
     };
-}>> & Readonly<{}>, {
+    onChange: {
+        type: PropType<((value: string) => void) | undefined>;
+        default: undefined;
+    };
+}>> & Readonly<{
+    onChange?: ((...args: any[]) => any) | undefined;
+    "onUpdate:value"?: ((...args: any[]) => any) | undefined;
+}>, {
     className: string | undefined;
     label: string | undefined;
+    onChange: ((value: string) => void) | undefined;
     value: string | undefined;
     placeholder: string | undefined;
     options: SelectInputOption[] | undefined;

package/src/visual/input/select/select-input.js

@@ -8,19 +8,37 @@ export const SelectInput = defineComponent({
         placeholder: { type: String, default: undefined },
         options: { type: Array, default: undefined },
         value: { type: String, default: undefined },
+        onChange: { type: Function, default: undefined },
     },
+    emits: ['change', 'update:value'],
     slots: Object,
-    setup(props, { slots, attrs }) {
+    setup(props, { slots, attrs, emit }) {
+        const onNativeChange = (event) => {
+            var _a;
+            const target = event.target;
+            if (!(target instanceof HTMLSelectElement)) {
+                return;
+            }
+            (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, target.value);
+            emit('change', target.value);
+            emit('update:value', target.value);
+        };
         return () => {
-            var _a, _b, _c, _d;
-            const rootClass = ['rd-input-select', props.className, typeof attrs.class === 'string' ? attrs.class : ''].filter(Boolean).join(' ');
+            var _a, _b, _c, _d, _e;
+            const rootClass = ['rd-input-select', props.className, typeof attrs.class === 'string' ? attrs.class : '']
+                .filter(Boolean)
+                .join(' ');
             return h('section', { class: rootClass, 'data-testid': 'rd-input-select' }, [
                 props.label ? h('span', { class: 'rd-field__label' }, props.label) : null,
-                h('select', { class: 'rd-select', value: (_a = props.value) !== null && _a !== void 0 ? _a : '' }, [
-                    h('option', { value: '' }, (_b = props.placeholder) !== null && _b !== void 0 ? _b : 'Select…'),
-                    ...((_c = props.options) !== null && _c !== void 0 ? _c : []).map((o) => h('option', { key: o.value, value: o.value }, o.label)),
+                h('select', {
+                    class: 'rd-select',
+                    value: (_a = props.value) !== null && _a !== void 0 ? _a : '',
+                    onChange: onNativeChange,
+                }, [
+                    h('option', { value: '', selected: !((_b = props.value) !== null && _b !== void 0 ? _b : '') }, (_c = props.placeholder) !== null && _c !== void 0 ? _c : 'Select…'),
+                    ...((_d = props.options) !== null && _d !== void 0 ? _d : []).map((o) => { var _a; return h('option', { key: o.value, value: o.value, selected: o.value === ((_a = props.value) !== null && _a !== void 0 ? _a : '') }, o.label); }),
                 ]),
-                (_d = slots.default) === null || _d === void 0 ? void 0 : _d.call(slots),
+                (_e = slots.default) === null || _e === void 0 ? void 0 : _e.call(slots),
             ]);
         };
     },

package/src/visual/input/select/select-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"select-input.js","sourceRoot":"","sources":["../../../../../../../packages/vue/src/visual/input/select/select-input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,CAAC,EAA6C,MAAM,KAAK,CAAC;AAgBpF,iEAAiE;AACjE,MAAM,CAAC,MAAM,WAAW,GAAG,eAAe,CAAC;IACzC,IAAI,EAAE,eAAe;IACrB,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,WAAW,EAAE,EAAE,IAAI,EAAE,MAAsC,EAAE,OAAO,EAAE,SAAS,EAAE;QACjF,OAAO,EAAE,EAAE,IAAI,EAAE,KAAkD,EAAE,OAAO,EAAE,SAAS,EAAE;QACzF,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,iBAAiB,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;YACrI,OAAO,CAAC,CAAC,SAAS,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,aAAa,EAAE,iBAAiB,EAAE,EAAE;gBAC5E,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,iBAAiB,EAAE,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI;gBACzE,CAAC,CAAC,QAAQ,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,MAAA,KAAK,CAAC,KAAK,mCAAI,EAAE,EAAE,EAAE;oBAC5D,CAAC,CAAC,QAAQ,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE,MAAA,KAAK,CAAC,WAAW,mCAAI,SAAS,CAAC;oBAC1D,GAAG,CAAC,MAAA,KAAK,CAAC,OAAO,mCAAI,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,QAAQ,EAAE,EAAE,GAAG,EAAE,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC;iBAC5F,CAAC;gBACF,MAAA,KAAK,CAAC,OAAO,qDAAI;aAClB,CAAC,CAAC;QACH,CAAC,CAAC;IACJ,CAAC;CACF,CAAC,CAAC"}
+{"version":3,"file":"select-input.js","sourceRoot":"","sources":["../../../../../../../packages/vue/src/visual/input/select/select-input.ts"],"names":[],"mappings":"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"}