@blokkli/editor 2.0.0-alpha.35 → 2.0.0-alpha.36

package/dist/modules/charts/runtime/chartTypes/radar.js

@@ -0,0 +1,52 @@
+import { defineChartType } from "./define.js";
+import {
+  dataLabelsOptions,
+  buildDataLabelsOptions,
+  legendOptions,
+  buildLegendOptions,
+  mergeShared
+} from "./shared.js";
+export default defineChartType(($t) => {
+  const shared = mergeShared(dataLabelsOptions($t), legendOptions($t));
+  return {
+    id: "radar",
+    hasMultipleSeries: true,
+    hasSeriesColors: true,
+    hasCategoryColors: false,
+    buildChartOptions(ctx) {
+      return {
+        xaxis: { categories: ctx.categories },
+        markers: { size: ctx.typeOptions.markers ? 5 : 0 },
+        fill: { opacity: Number(ctx.typeOptions.fillOpacity) || 0.2 },
+        ...buildDataLabelsOptions(ctx.typeOptions),
+        ...buildLegendOptions(ctx.typeOptions)
+      };
+    },
+    buildSeries(ctx) {
+      return ctx.series.map((s) => ({ name: s.name, data: s.data }));
+    },
+    editor: {
+      label: $t("chartsTypeRadar", "Radar"),
+      icon: "bk_mdi_radar",
+      options: {
+        markers: {
+          type: "checkbox",
+          label: $t("chartsRadarMarkers", "Show markers"),
+          default: false,
+          group: "display"
+        },
+        fillOpacity: {
+          type: "radios",
+          label: $t("chartsRadarFillOpacity", "Fill opacity"),
+          default: "0.2",
+          options: {
+            "0.2": $t("chartsOpacityTransparent", "Transparent"),
+            "0.4": $t("chartsOpacityLight", "Light"),
+            "0.8": $t("chartsOpacitySolid", "Solid")
+          }
+        },
+        ...shared.options
+      }
+    }
+  };
+});

package/dist/modules/charts/runtime/chartTypes/radialBar.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("./types.js").ChartTypeFactory;
+export default _default;

package/dist/modules/charts/runtime/chartTypes/radialBar.js

@@ -0,0 +1,44 @@
+import { defineChartType } from "./define.js";
+export default defineChartType(($t) => ({
+  id: "radialBar",
+  hasMultipleSeries: false,
+  hasSeriesColors: false,
+  hasCategoryColors: true,
+  buildChartOptions(ctx) {
+    const showLabels = !!ctx.typeOptions.showLabels;
+    const showTotal = !!ctx.typeOptions.showTotal;
+    return {
+      labels: ctx.categories,
+      plotOptions: {
+        radialBar: {
+          dataLabels: {
+            name: { show: showLabels },
+            value: { show: showLabels },
+            total: { show: showTotal }
+          }
+        }
+      }
+    };
+  },
+  buildSeries(ctx) {
+    return ctx.series[0]?.data || [];
+  },
+  editor: {
+    label: $t("chartsTypeRadialBar", "Radial Bar"),
+    icon: "bk_mdi_track_changes",
+    options: {
+      showLabels: {
+        type: "checkbox",
+        label: $t("chartsRadialBarShowLabels", "Show labels"),
+        default: true,
+        group: "labels"
+      },
+      showTotal: {
+        type: "checkbox",
+        label: $t("chartsRadialBarShowTotal", "Show total"),
+        default: false,
+        group: "display"
+      }
+    }
+  }
+}));

package/dist/modules/charts/runtime/chartTypes/shared.d.ts

@@ -0,0 +1,52 @@
+import type { BlokkliIcon } from '#blokkli-build/icons';
+import type { BlockOptionDefinitionBase } from '../../../../global/types/blockOptions.js';
+import type { TranslateFunction } from './types.js';
+type SharedOptions = {
+    options: Record<string, BlockOptionDefinitionBase<BlokkliIcon>>;
+};
+/**
+ * Shared x-axis label options for chart types that display an x-axis.
+ */
+export declare function xAxisOptions($t: TranslateFunction): SharedOptions;
+/**
+ * Build x-axis label config from type options.
+ * Returns properties to merge into the xaxis config object.
+ */
+export declare function buildXAxisLabelOptions(typeOptions: Record<string, unknown>): Record<string, any>;
+/**
+ * Data labels option — show values directly on chart elements.
+ */
+export declare function dataLabelsOptions($t: TranslateFunction): SharedOptions;
+/**
+ * Build data labels config from type options.
+ */
+export declare function buildDataLabelsOptions(typeOptions: Record<string, unknown>): Record<string, any>;
+/**
+ * Legend position option for multi-series chart types.
+ */
+export declare function legendOptions($t: TranslateFunction): SharedOptions;
+/**
+ * Build legend config from type options.
+ */
+export declare function buildLegendOptions(typeOptions: Record<string, unknown>): Record<string, any>;
+/**
+ * Grid lines option for chart types with axes.
+ */
+export declare function gridOptions($t: TranslateFunction): SharedOptions;
+/**
+ * Build grid config from type options.
+ */
+export declare function buildGridOptions(typeOptions: Record<string, unknown>): Record<string, any>;
+/**
+ * Stroke width option for line-based chart types.
+ */
+export declare function strokeWidthOptions($t: TranslateFunction): SharedOptions;
+/**
+ * Build stroke width config from type options.
+ */
+export declare function buildStrokeWidthOptions(typeOptions: Record<string, unknown>): Record<string, any>;
+/**
+ * Merge multiple shared option sets into one.
+ */
+export declare function mergeShared(...sets: SharedOptions[]): SharedOptions;
+export {};

package/dist/modules/charts/runtime/chartTypes/shared.js

@@ -0,0 +1,103 @@
+export function xAxisOptions($t) {
+  return {
+    options: {
+      xaxisRotation: {
+        type: "radios",
+        label: $t("chartsXAxisRotation", "Label rotation"),
+        default: "auto",
+        options: {
+          auto: $t("chartsRotationAuto", "Auto"),
+          "-45": "-45\xB0",
+          "-90": "-90\xB0"
+        }
+      }
+    }
+  };
+}
+export function buildXAxisLabelOptions(typeOptions) {
+  const rotation = typeOptions.xaxisRotation;
+  if (rotation && rotation !== "auto") {
+    return {
+      labels: {
+        rotate: Number(rotation),
+        rotateAlways: true
+      }
+    };
+  }
+  return {};
+}
+export function dataLabelsOptions($t) {
+  return {
+    options: {
+      dataLabels: {
+        type: "checkbox",
+        label: $t("chartsDataLabels", "Data labels"),
+        default: false,
+        group: "labels"
+      }
+    }
+  };
+}
+export function buildDataLabelsOptions(typeOptions) {
+  return { dataLabels: { enabled: !!typeOptions.dataLabels } };
+}
+export function legendOptions($t) {
+  return {
+    options: {
+      legendPosition: {
+        type: "radios",
+        label: $t("chartsLegendPosition", "Legend position"),
+        default: "bottom",
+        options: {
+          bottom: $t("chartsPositionBottom", "Bottom"),
+          top: $t("chartsPositionTop", "Top"),
+          right: $t("chartsPositionRight", "Right")
+        }
+      }
+    }
+  };
+}
+export function buildLegendOptions(typeOptions) {
+  return { legend: { position: typeOptions.legendPosition || "bottom" } };
+}
+export function gridOptions($t) {
+  return {
+    options: {
+      gridLines: {
+        type: "checkbox",
+        label: $t("chartsGridLines", "Grid lines"),
+        default: true,
+        group: "display"
+      }
+    }
+  };
+}
+export function buildGridOptions(typeOptions) {
+  return { grid: { show: !!typeOptions.gridLines } };
+}
+export function strokeWidthOptions($t) {
+  return {
+    options: {
+      strokeWidth: {
+        type: "radios",
+        label: $t("chartsStrokeWidth", "Line thickness"),
+        default: "2",
+        options: {
+          "2": $t("chartsStrokeThin", "Thin"),
+          "4": $t("chartsStrokeMedium", "Medium"),
+          "6": $t("chartsStrokeThick", "Thick")
+        }
+      }
+    }
+  };
+}
+export function buildStrokeWidthOptions(typeOptions) {
+  return { stroke: { width: Number(typeOptions.strokeWidth) || 2 } };
+}
+export function mergeShared(...sets) {
+  const options = {};
+  for (const set of sets) {
+    Object.assign(options, set.options);
+  }
+  return { options };
+}

package/dist/modules/charts/runtime/chartTypes/types.d.ts

@@ -0,0 +1,29 @@
+import type { BlokkliIcon } from '#blokkli-build/icons';
+import type { BlockOptionDefinitionBase } from '../../../../global/types/blockOptions.js';
+export type TranslateFunction = (key: string, fallback: string) => string;
+export type ChartBuildContext = {
+    title: string;
+    categories: string[];
+    series: Array<{
+        name: string;
+        color: string;
+        data: number[];
+    }>;
+    seriesColors: string[];
+    categoryColors: string[];
+    typeOptions: Record<string, unknown>;
+};
+export type ChartTypeDefinition = {
+    id: string;
+    hasMultipleSeries: boolean;
+    hasSeriesColors: boolean;
+    hasCategoryColors: boolean;
+    buildChartOptions: (ctx: ChartBuildContext) => Record<string, any>;
+    buildSeries: (ctx: ChartBuildContext) => any;
+    editor: {
+        label: string;
+        icon: BlokkliIcon;
+        options: Record<string, BlockOptionDefinitionBase<BlokkliIcon>>;
+    };
+};
+export type ChartTypeFactory = ($t: TranslateFunction) => ChartTypeDefinition;

package/dist/modules/charts/runtime/components/ChartRenderer/index.d.vue.ts

@@ -0,0 +1,4 @@
+import type { BlokkliChartData } from '../../types.js';
+declare const __VLS_export: import("vue").DefineComponent<BlokkliChartData, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BlokkliChartData> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/modules/charts/runtime/components/ChartRenderer/index.vue

@@ -0,0 +1,120 @@
+<template>
+  <div ref="rootEl">
+    <component
+      :is="ApexChart"
+      v-if="ApexChart"
+      :type="type"
+      :options="chartOptions"
+      :series="chartSeries"
+      height="350"
+    />
+    <ol v-if="footnotes?.length" class="bk-chart-footnotes">
+      <li v-for="(note, i) in footnotes" :key="i">
+        <span class="bk-chart-footnote-marker">{{
+          superscriptFor(i + 1)
+        }}</span>
+        {{ note }}
+      </li>
+    </ol>
+  </div>
+</template>
+
+<script setup>
+import { computed, defineAsyncComponent, useTemplateRef } from "#imports";
+import { resolveChartColor, applyFootnotes, SUPERSCRIPTS } from "../../types";
+import { getChartTypeRuntime, getDefaultTypeOptions } from "../../chartTypes";
+import { COLORS } from "#blokkli-build/charts-config";
+const ApexChart = defineAsyncComponent(() => import("vue3-apexcharts"));
+const props = defineProps({
+  title: { type: String, required: true },
+  type: { type: String, required: true },
+  categories: { type: Array, required: true },
+  series: { type: Array, required: true },
+  categoryColors: { type: Array, required: true },
+  footnotes: { type: Array, required: true },
+  typeOptions: { type: Object, required: false }
+});
+const rootEl = useTemplateRef("rootEl");
+const chartDef = computed(() => getChartTypeRuntime(props.type));
+function superscriptFor(n) {
+  return String(n).split("").map((d) => SUPERSCRIPTS[d] || d).join("");
+}
+function deepMerge(target, source) {
+  const result = { ...target };
+  for (const key of Object.keys(source)) {
+    if (result[key] && typeof result[key] === "object" && !Array.isArray(result[key]) && typeof source[key] === "object" && !Array.isArray(source[key])) {
+      result[key] = deepMerge(result[key], source[key]);
+    } else {
+      result[key] = source[key];
+    }
+  }
+  return result;
+}
+const resolvedColors = computed(() => {
+  const def = chartDef.value;
+  if (!def) return [];
+  if (def.hasCategoryColors) {
+    return props.categoryColors.map(
+      (id) => resolveChartColor(id, COLORS, rootEl.value)
+    );
+  }
+  if (def.hasSeriesColors) {
+    return props.series.map(
+      (s) => resolveChartColor(s.color, COLORS, rootEl.value)
+    );
+  }
+  return [];
+});
+const chartOptions = computed(() => {
+  const def = chartDef.value;
+  if (!def) return {};
+  const base = {
+    chart: {
+      toolbar: { show: false }
+    }
+  };
+  if (resolvedColors.value.length) {
+    base.colors = resolvedColors.value;
+  }
+  if (props.title) {
+    base.title = { text: applyFootnotes(props.title), align: "left" };
+  }
+  const ctx = {
+    title: props.title,
+    categories: props.categories.map(applyFootnotes),
+    series: props.series.map((s) => ({
+      name: applyFootnotes(s.name),
+      color: s.color,
+      data: s.data
+    })),
+    seriesColors: resolvedColors.value,
+    categoryColors: resolvedColors.value,
+    typeOptions: {
+      ...getDefaultTypeOptions(props.type),
+      ...props.typeOptions
+    }
+  };
+  const typeOpts = def.buildChartOptions(ctx);
+  return deepMerge(base, typeOpts);
+});
+const chartSeries = computed(() => {
+  const def = chartDef.value;
+  if (!def) return [];
+  const ctx = {
+    title: props.title,
+    categories: props.categories.map(applyFootnotes),
+    series: props.series.map((s) => ({
+      name: applyFootnotes(s.name),
+      color: s.color,
+      data: s.data
+    })),
+    seriesColors: resolvedColors.value,
+    categoryColors: resolvedColors.value,
+    typeOptions: {
+      ...getDefaultTypeOptions(props.type),
+      ...props.typeOptions
+    }
+  };
+  return def.buildSeries(ctx);
+});
+</script>

package/dist/modules/charts/runtime/components/ChartRenderer/index.vue.d.ts

@@ -0,0 +1,4 @@
+import type { BlokkliChartData } from '../../types.js';
+declare const __VLS_export: import("vue").DefineComponent<BlokkliChartData, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BlokkliChartData> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/modules/charts/runtime/components/Fragment/BlokkliChart.d.vue.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/modules/charts/runtime/components/Fragment/BlokkliChart.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="blokkli-fragment-chart">
+    <ChartRenderer v-if="data && data.series?.length > 0" v-bind="data" />
+    <div v-else>Missing chart data.</div>
+  </div>
+</template>
+
+<script setup>
+import { defineBlokkliFragment, computed } from "#imports";
+import ChartRenderer from "./../ChartRenderer/index.vue";
+const { options } = defineBlokkliFragment({
+  name: "blokkli_chart",
+  label: "Chart",
+  description: "Create interactive charts.",
+  editor: {
+    previewWidth: 1200
+  },
+  options: {
+    data: {
+      type: "json",
+      label: "The chart data.",
+      default: "{}"
+    }
+  }
+});
+const data = computed(() => {
+  return options.value.data;
+});
+</script>

package/dist/modules/charts/runtime/components/Fragment/BlokkliChart.vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/modules/charts/runtime/features/charts/Editor/ChartTypeOptions/index.d.vue.ts

@@ -0,0 +1,15 @@
+import type { BlockOptionDefinition } from '#blokkli/types/blockOptions';
+type __VLS_Props = {
+    title: string;
+    options: Record<string, BlockOptionDefinition>;
+    typeOptions: Record<string, unknown>;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:title": (value: unknown) => any;
+    "update:typeOptions": (value: Record<string, unknown>) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:title"?: ((value: unknown) => any) | undefined;
+    "onUpdate:typeOptions"?: ((value: Record<string, unknown>) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/modules/charts/runtime/features/charts/Editor/ChartTypeOptions/index.vue

@@ -0,0 +1,97 @@
+<template>
+  <div class="bk-chart-type-options">
+    <OptionsFormItem
+      :option="titleOption"
+      property="title"
+      :mutated-value="title"
+      @update="$emit('update:title', $event)"
+    />
+
+    <OptionsFormItem
+      v-for="item in ungroupedOptions"
+      :key="item.key"
+      :option="item.option"
+      :property="item.key"
+      :mutated-value="typeOptions[item.key] ?? item.option.default"
+      @update="updateOption(item.key, $event)"
+    />
+
+    <OptionsFormGroup
+      v-for="group in groups"
+      :key="'group_' + group.label"
+      :label="group.label"
+      :is-active="group.label === activeGroup"
+      @toggle="onToggleGroup(group.label)"
+    >
+      <OptionsFormItem
+        v-for="item in group.options"
+        :key="item.key"
+        :option="item.option"
+        :property="item.key"
+        :mutated-value="typeOptions[item.key] ?? item.option.default"
+        is-grouped
+        @update="updateOption(item.key, $event)"
+      />
+    </OptionsFormGroup>
+  </div>
+</template>
+
+<script setup>
+import { computed, ref, useBlokkli } from "#imports";
+import OptionsFormItem from "#blokkli/editor/features/options/Form/Item.vue";
+import OptionsFormGroup from "#blokkli/editor/features/options/Form/Group.vue";
+const { $t } = useBlokkli();
+const props = defineProps({
+  title: { type: String, required: true },
+  options: { type: Object, required: true },
+  typeOptions: { type: Object, required: true }
+});
+const emit = defineEmits(["update:title", "update:typeOptions"]);
+const titleOption = {
+  type: "text",
+  label: $t("chartsTitle", "Title"),
+  default: ""
+};
+const activeGroup = ref("");
+function onToggleGroup(label) {
+  if (activeGroup.value === label) {
+    activeGroup.value = "";
+  } else {
+    activeGroup.value = label;
+  }
+}
+const allOptions = computed(
+  () => Object.entries(props.options).map(([key, option]) => ({ key, option }))
+);
+const ungroupedOptions = computed(
+  () => allOptions.value.filter((v) => !v.option.group)
+);
+function getGroupLabel(group) {
+  if (group === "display") {
+    return $t("chartsOptionGroupDisplay", "Display");
+  } else if (group === "labels") {
+    return $t("chartsOptionGroupLabels", "Labels");
+  }
+  return group;
+}
+const groups = computed(() => {
+  return Object.values(
+    allOptions.value.reduce((acc, entry) => {
+      if (entry.option.group) {
+        if (!acc[entry.option.group]) {
+          acc[entry.option.group] = {
+            label: getGroupLabel(entry.option.group),
+            options: [entry]
+          };
+        } else {
+          acc[entry.option.group].options.push(entry);
+        }
+      }
+      return acc;
+    }, {})
+  );
+});
+function updateOption(key, value) {
+  emit("update:typeOptions", { ...props.typeOptions, [key]: value });
+}
+</script>

package/dist/modules/charts/runtime/features/charts/Editor/ChartTypeOptions/index.vue.d.ts

@@ -0,0 +1,15 @@
+import type { BlockOptionDefinition } from '#blokkli/types/blockOptions';
+type __VLS_Props = {
+    title: string;
+    options: Record<string, BlockOptionDefinition>;
+    typeOptions: Record<string, unknown>;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:title": (value: unknown) => any;
+    "update:typeOptions": (value: Record<string, unknown>) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:title"?: ((value: unknown) => any) | undefined;
+    "onUpdate:typeOptions"?: ((value: Record<string, unknown>) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/modules/charts/runtime/features/charts/Editor/ChartTypePicker/index.d.vue.ts

@@ -0,0 +1,11 @@
+import type { ChartType } from '../../../../types.js';
+type __VLS_Props = {
+    modelValue: ChartType;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: ChartType) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: ChartType) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/modules/charts/runtime/features/charts/Editor/ChartTypePicker/index.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="bk-chart-type-picker">
+    <button
+      v-for="option in chartTypes"
+      :key="option.value"
+      type="button"
+      :class="{ 'is-active': modelValue === option.value }"
+      @click="emit('update:modelValue', option.value)"
+    >
+      <div>
+        <Icon :name="option.icon" />
+        <span>{{ option.label }}</span>
+      </div>
+    </button>
+  </div>
+</template>
+
+<script setup>
+import { computed, useBlokkli } from "#imports";
+import { getChartTypes } from "../../../../chartTypes";
+import { Icon } from "#blokkli/editor/components";
+defineProps({
+  modelValue: { type: String, required: true }
+});
+const emit = defineEmits(["update:modelValue"]);
+const { $t } = useBlokkli();
+const chartTypes = computed(
+  () => getChartTypes($t).map((def) => ({
+    value: def.id,
+    label: def.editor.label,
+    icon: def.editor.icon
+  }))
+);
+</script>

package/dist/modules/charts/runtime/features/charts/Editor/ChartTypePicker/index.vue.d.ts

@@ -0,0 +1,11 @@
+import type { ChartType } from '../../../../types.js';
+type __VLS_Props = {
+    modelValue: ChartType;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: ChartType) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: ChartType) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/modules/charts/runtime/features/charts/Editor/ColorDropdown/index.d.vue.ts

@@ -0,0 +1,12 @@
+import type { ChartColor } from '../../../../types.js';
+type __VLS_Props = {
+    colorId: string;
+    colors: Record<string, ChartColor>;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (colorId: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSelect?: ((colorId: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;