minerva-design 1.3.0 → 1.4.0

package/dist/uni/ResponsiveGrid.vue.d.ts

@@ -15,13 +15,13 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    gap: string | number;
     columns: number | {
         base?: number;
         sm?: number;
         md?: number;
         lg?: number;
     };
-    gap: string | number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/uni/SankeyChart.vue

@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import type {
+  SankeyChartOptions,
+  ShapeHoverEvent,
+  ShapeToggleEvent,
+} from "./charts-canvas.js";
+import { plain } from "./chart-canvas.js";
+import {
+  autoHeightProp,
+  shapeCommonProps,
+  sankeyChartProps,
+} from "./shape-chart-types.js";
+import {
+  shapeCommonOptions,
+  shapeDefaultHeight,
+  useCanvasShapeChart,
+} from "./shape-chart-canvas.js";
+const props = defineProps({
+  ...shapeCommonProps,
+  ...sankeyChartProps,
+  ...autoHeightProp,
+});
+const emit = defineEmits<{
+  hover: [event: ShapeHoverEvent | null];
+  click: [event: ShapeHoverEvent];
+  toggle: [event: ShapeToggleEvent];
+}>();
+const options = computed((): SankeyChartOptions => ({
+  ...shapeCommonOptions(props),
+  type: "sankey",
+  nodes: plain(props.nodes),
+  links: plain(props.links),
+  nodeWidth: props.nodeWidth,
+  nodePadding: props.nodePadding,
+  align: props.align,
+  iterations: props.iterations,
+  linkColor: props.linkColor,
+  linkOpacity: props.linkOpacity,
+  labels: props.labels,
+  labelValues: props.labelValues,
+}));
+const {
+  id,
+  root,
+  rootStyle,
+  ariaLabel,
+  handle,
+  onTouchStart,
+  onTouchMove,
+  onTouchEnd,
+  onTouchCancel,
+} = useCanvasShapeChart(
+  () => ({
+    width: props.width,
+    height: props.height ?? shapeDefaultHeight(options.value),
+  }),
+  () => options.value,
+  {
+    hover: (event) => emit("hover", event),
+    click: (event) => emit("click", event),
+    toggle: (event) => emit("toggle", event),
+  },
+);
+const scrollLocked = computed(() => props.disableScroll ?? false);
+defineExpose(handle);
+</script>
+<template>
+  <view
+    ref="root"
+    class="mn-chart mn-uni-chart mn-shape-chart"
+    :style="rootStyle"
+    ><canvas
+      :id="id"
+      type="2d"
+      :canvas-id="id"
+      class="mn-chart-canvas"
+      :hidpi="false"
+      :disable-scroll="scrollLocked"
+      role="img"
+      :aria-label="ariaLabel"
+      style="display: block; width: 100%; height: 100%"
+      @touchstart="onTouchStart"
+      @touchmove="onTouchMove"
+      @touchend="onTouchEnd"
+      @touchcancel="onTouchCancel"
+  /></view>
+</template>

package/dist/uni/SankeyChart.vue.d.ts

@@ -0,0 +1,121 @@
+import type { ShapeHoverEvent, ShapeToggleEvent } from "./charts-canvas.js";
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    height: {
+        readonly type: import("vue").PropType<number | string>;
+        readonly default: undefined;
+    };
+    nodes: import("vue").PropType<readonly import("./charts-canvas.js").SankeyNode[]>;
+    links: {
+        readonly type: import("vue").PropType<readonly import("./charts-canvas.js").SankeyLink[]>;
+        readonly required: true;
+    };
+    nodeWidth: NumberConstructor;
+    nodePadding: NumberConstructor;
+    align: import("vue").PropType<"justify" | "left" | "right" | "center">;
+    iterations: NumberConstructor;
+    linkColor: import("vue").PropType<"gradient" | "source" | "target" | "neutral">;
+    linkOpacity: NumberConstructor;
+    labels: {
+        readonly type: BooleanConstructor;
+        readonly default: undefined;
+    };
+    labelValues: {
+        readonly type: BooleanConstructor;
+        readonly default: undefined;
+    };
+    palette: import("vue").PropType<readonly string[]>;
+    legend: {
+        type: import("vue").PropType<boolean | import("./charts-canvas.js").ShapeLegendOptions>;
+        default: undefined;
+    };
+    tooltip: {
+        type: import("vue").PropType<boolean | import("./charts-canvas.js").ShapeTooltipOptions>;
+        default: undefined;
+    };
+    format: import("vue").PropType<(value: number) => string>;
+    percentFormat: import("vue").PropType<(share: number) => string>;
+    hidden: import("vue").PropType<readonly number[]>;
+    animation: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    padding: import("vue").PropType<import("./charts-canvas.js").ChartPadding>;
+    ariaLabel: StringConstructor;
+    width: {
+        type: import("vue").PropType<number | string>;
+        default: string;
+    };
+    disableScroll: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+}>, import("./shape-chart-types.js").ShapeChartHandle, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    click: (event: ShapeHoverEvent) => any;
+    toggle: (event: ShapeToggleEvent) => any;
+    hover: (event: ShapeHoverEvent | null) => any;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    height: {
+        readonly type: import("vue").PropType<number | string>;
+        readonly default: undefined;
+    };
+    nodes: import("vue").PropType<readonly import("./charts-canvas.js").SankeyNode[]>;
+    links: {
+        readonly type: import("vue").PropType<readonly import("./charts-canvas.js").SankeyLink[]>;
+        readonly required: true;
+    };
+    nodeWidth: NumberConstructor;
+    nodePadding: NumberConstructor;
+    align: import("vue").PropType<"justify" | "left" | "right" | "center">;
+    iterations: NumberConstructor;
+    linkColor: import("vue").PropType<"gradient" | "source" | "target" | "neutral">;
+    linkOpacity: NumberConstructor;
+    labels: {
+        readonly type: BooleanConstructor;
+        readonly default: undefined;
+    };
+    labelValues: {
+        readonly type: BooleanConstructor;
+        readonly default: undefined;
+    };
+    palette: import("vue").PropType<readonly string[]>;
+    legend: {
+        type: import("vue").PropType<boolean | import("./charts-canvas.js").ShapeLegendOptions>;
+        default: undefined;
+    };
+    tooltip: {
+        type: import("vue").PropType<boolean | import("./charts-canvas.js").ShapeTooltipOptions>;
+        default: undefined;
+    };
+    format: import("vue").PropType<(value: number) => string>;
+    percentFormat: import("vue").PropType<(share: number) => string>;
+    hidden: import("vue").PropType<readonly number[]>;
+    animation: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    padding: import("vue").PropType<import("./charts-canvas.js").ChartPadding>;
+    ariaLabel: StringConstructor;
+    width: {
+        type: import("vue").PropType<number | string>;
+        default: string;
+    };
+    disableScroll: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+}>> & Readonly<{
+    onClick?: ((event: ShapeHoverEvent) => any) | undefined;
+    onToggle?: ((event: ShapeToggleEvent) => any) | undefined;
+    onHover?: ((event: ShapeHoverEvent | null) => any) | undefined;
+}>, {
+    animation: boolean;
+    legend: boolean | import("./charts-canvas.js").ShapeLegendOptions;
+    width: string | number;
+    height: string | number;
+    labels: boolean;
+    tooltip: boolean | import("./charts-canvas.js").ShapeTooltipOptions;
+    disableScroll: boolean;
+    labelValues: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/uni/ShapeChart.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import type {
+  ShapeChartOptions,
+  ShapeDrillEvent,
+  ShapeHoverEvent,
+  ShapeToggleEvent,
+} from "./charts-canvas.js";
+import { plain } from "./chart-canvas.js";
+import { shapeChartProps } from "./shape-chart-types.js";
+import { shapeDefaultHeight, useCanvasShapeChart } from "./shape-chart-canvas.js";
+const props = defineProps({
+  ...shapeChartProps,
+  /** Height of the chart (default 320; gauges 240, radial bars 300, sankey and sunburst 360, calendars and bullets from the data); numbers are pixels, strings any CSS length (rpx included) */
+  height: {
+    type: [Number, String] as import("vue").PropType<number | string>,
+    default: undefined,
+  },
+});
+const emit = defineEmits<{
+  hover: [event: ShapeHoverEvent | null];
+  click: [event: ShapeHoverEvent];
+  toggle: [event: ShapeToggleEvent];
+  drill: [event: ShapeDrillEvent];
+}>();
+const {
+  id,
+  root,
+  rootStyle,
+  ariaLabel,
+  handle,
+  onTouchStart,
+  onTouchMove,
+  onTouchEnd,
+  onTouchCancel,
+} = useCanvasShapeChart(
+  () => ({
+    width: props.width,
+    height: props.height ?? shapeDefaultHeight(props.options),
+  }),
+  // a plain copy: nested changes of the options are tracked
+  (): ShapeChartOptions => plain(props.options),
+  {
+    hover: (event) => emit("hover", event),
+    click: (event) => emit("click", event),
+    toggle: (event) => emit("toggle", event),
+    drill: (event) => emit("drill", event),
+  },
+);
+const scrollLocked = computed(() => props.disableScroll ?? false);
+defineExpose(handle);
+</script>
+<template>
+  <view
+    ref="root"
+    class="mn-chart mn-uni-chart mn-shape-chart"
+    :style="rootStyle"
+    ><canvas
+      :id="id"
+      type="2d"
+      :canvas-id="id"
+      class="mn-chart-canvas"
+      :hidpi="false"
+      :disable-scroll="scrollLocked"
+      role="img"
+      :aria-label="ariaLabel"
+      style="display: block; width: 100%; height: 100%"
+      @touchstart="onTouchStart"
+      @touchmove="onTouchMove"
+      @touchend="onTouchEnd"
+      @touchcancel="onTouchCancel"
+  /></view>
+</template>

package/dist/uni/ShapeChart.vue.d.ts

@@ -0,0 +1,54 @@
+import type { ShapeChartOptions, ShapeDrillEvent, ShapeHoverEvent, ShapeToggleEvent } from "./charts-canvas.js";
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    /** Height of the chart (default 320; gauges 240, radial bars 300, sankey and sunburst 360, calendars and bullets from the data); numbers are pixels, strings any CSS length (rpx included) */
+    height: {
+        type: import("vue").PropType<number | string>;
+        default: undefined;
+    };
+    options: {
+        readonly type: import("vue").PropType<ShapeChartOptions>;
+        readonly required: true;
+    };
+    width: {
+        type: import("vue").PropType<number | string>;
+        default: string;
+    };
+    disableScroll: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+}>, import("./shape-chart-types.js").ShapeChartHandle, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    click: (event: ShapeHoverEvent) => any;
+    toggle: (event: ShapeToggleEvent) => any;
+    hover: (event: ShapeHoverEvent | null) => any;
+    drill: (event: ShapeDrillEvent) => any;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    /** Height of the chart (default 320; gauges 240, radial bars 300, sankey and sunburst 360, calendars and bullets from the data); numbers are pixels, strings any CSS length (rpx included) */
+    height: {
+        type: import("vue").PropType<number | string>;
+        default: undefined;
+    };
+    options: {
+        readonly type: import("vue").PropType<ShapeChartOptions>;
+        readonly required: true;
+    };
+    width: {
+        type: import("vue").PropType<number | string>;
+        default: string;
+    };
+    disableScroll: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+}>> & Readonly<{
+    onClick?: ((event: ShapeHoverEvent) => any) | undefined;
+    onToggle?: ((event: ShapeToggleEvent) => any) | undefined;
+    onHover?: ((event: ShapeHoverEvent | null) => any) | undefined;
+    onDrill?: ((event: ShapeDrillEvent) => any) | undefined;
+}>, {
+    width: string | number;
+    height: string | number;
+    disableScroll: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/uni/Sparkline.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+// Word-sized chart without axes: a trend in a list row, a KPI card
+import { computed } from "vue";
+import type {
+  ChartHoverEvent,
+  ChartPlotClickEvent,
+  ChartView,
+} from "./charts-canvas.js";
+import { sparklineFrameProps, sparklineProps } from "./chart-types.js";
+import { useCanvasChart } from "./chart-canvas.js";
+import { sparklineChartOptions } from "./named-chart-options.js";
+const props = defineProps({ ...sparklineFrameProps, ...sparklineProps });
+const emit = defineEmits<{
+  hover: [event: ChartHoverEvent | null];
+  pointClick: [event: ChartHoverEvent];
+  plotClick: [event: ChartPlotClickEvent];
+  zoom: [view: ChartView];
+}>();
+const {
+  id,
+  root,
+  rootStyle,
+  handle,
+  onTouchStart,
+  onTouchMove,
+  onTouchEnd,
+  onTouchCancel,
+} = useCanvasChart(
+  () => props,
+  () => sparklineChartOptions(props),
+  {
+    hover: (event) => emit("hover", event),
+    click: (event) => emit("pointClick", event),
+    plotClick: (event) => emit("plotClick", event),
+    zoom: (view) => emit("zoom", view),
+  },
+);
+const scrollLocked = computed(() => props.disableScroll ?? false);
+defineExpose(handle);
+</script>
+<template>
+  <view ref="root" class="mn-chart mn-uni-chart" :style="rootStyle"
+    ><canvas
+      :id="id"
+      type="2d"
+      :canvas-id="id"
+      class="mn-chart-canvas"
+      :hidpi="false"
+      :disable-scroll="scrollLocked"
+      role="img"
+      :aria-label="props.ariaLabel"
+      style="display: block; width: 100%; height: 100%"
+      @touchstart="onTouchStart"
+      @touchmove="onTouchMove"
+      @touchend="onTouchEnd"
+      @touchcancel="onTouchCancel"
+  /></view>
+</template>

package/dist/uni/Sparkline.vue.d.ts

@@ -0,0 +1,77 @@
+import type { ChartHoverEvent, ChartPlotClickEvent, ChartView } from "./charts-canvas.js";
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    data: {
+        readonly type: import("vue").PropType<import("./charts-canvas.js").ChartSeries["data"]>;
+        readonly required: true;
+    };
+    type: import("vue").PropType<"line" | "area" | "bar">;
+    color: StringConstructor;
+    curve: import("vue").PropType<"linear" | "smooth" | "step">;
+    name: StringConstructor;
+    reference: NumberConstructor;
+    format: import("vue").PropType<(value: number) => string>;
+    height: {
+        readonly type: import("vue").PropType<number | string>;
+        readonly default: 48;
+    };
+    width: {
+        type: import("vue").PropType<number | string>;
+        default: string;
+    };
+    tooltip: {
+        type: import("vue").PropType<boolean | import("./charts-canvas.js").ChartTooltipOptions>;
+        default: undefined;
+    };
+    palette: import("vue").PropType<readonly string[]>;
+    ariaLabel: StringConstructor;
+    disableScroll: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+}>, import("./chart-types.js").ChartHandle, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    zoom: (view: ChartView) => any;
+    hover: (event: ChartHoverEvent | null) => any;
+    plotClick: (event: ChartPlotClickEvent) => any;
+    pointClick: (event: ChartHoverEvent) => any;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    data: {
+        readonly type: import("vue").PropType<import("./charts-canvas.js").ChartSeries["data"]>;
+        readonly required: true;
+    };
+    type: import("vue").PropType<"line" | "area" | "bar">;
+    color: StringConstructor;
+    curve: import("vue").PropType<"linear" | "smooth" | "step">;
+    name: StringConstructor;
+    reference: NumberConstructor;
+    format: import("vue").PropType<(value: number) => string>;
+    height: {
+        readonly type: import("vue").PropType<number | string>;
+        readonly default: 48;
+    };
+    width: {
+        type: import("vue").PropType<number | string>;
+        default: string;
+    };
+    tooltip: {
+        type: import("vue").PropType<boolean | import("./charts-canvas.js").ChartTooltipOptions>;
+        default: undefined;
+    };
+    palette: import("vue").PropType<readonly string[]>;
+    ariaLabel: StringConstructor;
+    disableScroll: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+}>> & Readonly<{
+    onZoom?: ((view: ChartView) => any) | undefined;
+    onHover?: ((event: ChartHoverEvent | null) => any) | undefined;
+    onPlotClick?: ((event: ChartPlotClickEvent) => any) | undefined;
+    onPointClick?: ((event: ChartHoverEvent) => any) | undefined;
+}>, {
+    width: string | number;
+    height: string | number;
+    tooltip: boolean | import("./charts-canvas.js").ChartTooltipOptions;
+    disableScroll: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/uni/SunburstChart.vue

@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import type {
+  SunburstChartOptions,
+  ShapeDrillEvent,
+  ShapeHoverEvent,
+  ShapeToggleEvent,
+} from "./charts-canvas.js";
+import { plain } from "./chart-canvas.js";
+import {
+  autoHeightProp,
+  shapeCommonProps,
+  sunburstChartProps,
+} from "./shape-chart-types.js";
+import {
+  shapeCommonOptions,
+  shapeDefaultHeight,
+  useCanvasShapeChart,
+} from "./shape-chart-canvas.js";
+const props = defineProps({
+  ...shapeCommonProps,
+  ...sunburstChartProps,
+  ...autoHeightProp,
+});
+const emit = defineEmits<{
+  hover: [event: ShapeHoverEvent | null];
+  click: [event: ShapeHoverEvent];
+  toggle: [event: ShapeToggleEvent];
+  drill: [event: ShapeDrillEvent];
+}>();
+const options = computed((): SunburstChartOptions => ({
+  ...shapeCommonOptions(props),
+  type: "sunburst",
+  data: plain(props.data),
+  innerRadius: props.innerRadius,
+  levels: props.levels,
+  startAngle: props.startAngle,
+  padAngle: props.padAngle,
+  cornerRadius: props.cornerRadius,
+  labels: props.labels,
+  drill: props.drill,
+  drillPath: plain(props.drillPath),
+}));
+const {
+  id,
+  root,
+  rootStyle,
+  ariaLabel,
+  handle,
+  onTouchStart,
+  onTouchMove,
+  onTouchEnd,
+  onTouchCancel,
+} = useCanvasShapeChart(
+  () => ({
+    width: props.width,
+    height: props.height ?? shapeDefaultHeight(options.value),
+  }),
+  () => options.value,
+  {
+    hover: (event) => emit("hover", event),
+    click: (event) => emit("click", event),
+    toggle: (event) => emit("toggle", event),
+    drill: (event) => emit("drill", event),
+  },
+);
+const scrollLocked = computed(() => props.disableScroll ?? false);
+defineExpose(handle);
+</script>
+<template>
+  <view
+    ref="root"
+    class="mn-chart mn-uni-chart mn-shape-chart"
+    :style="rootStyle"
+    ><canvas
+      :id="id"
+      type="2d"
+      :canvas-id="id"
+      class="mn-chart-canvas"
+      :hidpi="false"
+      :disable-scroll="scrollLocked"
+      role="img"
+      :aria-label="ariaLabel"
+      style="display: block; width: 100%; height: 100%"
+      @touchstart="onTouchStart"
+      @touchmove="onTouchMove"
+      @touchend="onTouchEnd"
+      @touchcancel="onTouchCancel"
+  /></view>
+</template>