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

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

@@ -0,0 +1,147 @@
+declare const __VLS_export: import("vue").DefineComponent<({
+    title: string;
+    categories: string[];
+    series: import("../../types.js").ChartSeries[];
+    categoryColors: string[];
+    footnotes: string[];
+} & {
+    type: "bar";
+    typeOptions?: Partial<import("../../chartTypes/bar.js").TypeOptions> | undefined;
+}) | ({
+    title: string;
+    categories: string[];
+    series: import("../../types.js").ChartSeries[];
+    categoryColors: string[];
+    footnotes: string[];
+} & {
+    type: "line";
+    typeOptions?: Partial<import("../../chartTypes/line.js").TypeOptions> | undefined;
+}) | ({
+    title: string;
+    categories: string[];
+    series: import("../../types.js").ChartSeries[];
+    categoryColors: string[];
+    footnotes: string[];
+} & {
+    type: "area";
+    typeOptions?: Partial<import("../../chartTypes/area.js").TypeOptions> | undefined;
+}) | ({
+    title: string;
+    categories: string[];
+    series: import("../../types.js").ChartSeries[];
+    categoryColors: string[];
+    footnotes: string[];
+} & {
+    type: "pie";
+    typeOptions?: Partial<import("../../chartTypes/pie.js").TypeOptions> | undefined;
+}) | ({
+    title: string;
+    categories: string[];
+    series: import("../../types.js").ChartSeries[];
+    categoryColors: string[];
+    footnotes: string[];
+} & {
+    type: "donut";
+    typeOptions?: Partial<import("../../chartTypes/donut.js").TypeOptions> | undefined;
+}) | ({
+    title: string;
+    categories: string[];
+    series: import("../../types.js").ChartSeries[];
+    categoryColors: string[];
+    footnotes: string[];
+} & {
+    type: "heatmap";
+    typeOptions?: Partial<import("../../chartTypes/heatmap.js").TypeOptions> | undefined;
+}) | ({
+    title: string;
+    categories: string[];
+    series: import("../../types.js").ChartSeries[];
+    categoryColors: string[];
+    footnotes: string[];
+} & {
+    type: "radialBar";
+    typeOptions?: Partial<import("../../chartTypes/radialBar.js").TypeOptions> | undefined;
+}) | ({
+    title: string;
+    categories: string[];
+    series: import("../../types.js").ChartSeries[];
+    categoryColors: string[];
+    footnotes: string[];
+} & {
+    type: "radar";
+    typeOptions?: Partial<import("../../chartTypes/radar.js").TypeOptions> | undefined;
+}), {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<({
+    title: string;
+    categories: string[];
+    series: import("../../types.js").ChartSeries[];
+    categoryColors: string[];
+    footnotes: string[];
+} & {
+    type: "bar";
+    typeOptions?: Partial<import("../../chartTypes/bar.js").TypeOptions> | undefined;
+}) | ({
+    title: string;
+    categories: string[];
+    series: import("../../types.js").ChartSeries[];
+    categoryColors: string[];
+    footnotes: string[];
+} & {
+    type: "line";
+    typeOptions?: Partial<import("../../chartTypes/line.js").TypeOptions> | undefined;
+}) | ({
+    title: string;
+    categories: string[];
+    series: import("../../types.js").ChartSeries[];
+    categoryColors: string[];
+    footnotes: string[];
+} & {
+    type: "area";
+    typeOptions?: Partial<import("../../chartTypes/area.js").TypeOptions> | undefined;
+}) | ({
+    title: string;
+    categories: string[];
+    series: import("../../types.js").ChartSeries[];
+    categoryColors: string[];
+    footnotes: string[];
+} & {
+    type: "pie";
+    typeOptions?: Partial<import("../../chartTypes/pie.js").TypeOptions> | undefined;
+}) | ({
+    title: string;
+    categories: string[];
+    series: import("../../types.js").ChartSeries[];
+    categoryColors: string[];
+    footnotes: string[];
+} & {
+    type: "donut";
+    typeOptions?: Partial<import("../../chartTypes/donut.js").TypeOptions> | undefined;
+}) | ({
+    title: string;
+    categories: string[];
+    series: import("../../types.js").ChartSeries[];
+    categoryColors: string[];
+    footnotes: string[];
+} & {
+    type: "heatmap";
+    typeOptions?: Partial<import("../../chartTypes/heatmap.js").TypeOptions> | undefined;
+}) | ({
+    title: string;
+    categories: string[];
+    series: import("../../types.js").ChartSeries[];
+    categoryColors: string[];
+    footnotes: string[];
+} & {
+    type: "radialBar";
+    typeOptions?: Partial<import("../../chartTypes/radialBar.js").TypeOptions> | undefined;
+}) | ({
+    title: string;
+    categories: string[];
+    series: import("../../types.js").ChartSeries[];
+    categoryColors: string[];
+    footnotes: string[];
+} & {
+    type: "radar";
+    typeOptions?: Partial<import("../../chartTypes/radar.js").TypeOptions> | undefined;
+})> & 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 "../../helpers";
+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 },
+  categories: { type: Array, required: true },
+  series: { type: Array, required: true },
+  categoryColors: { type: Array, required: true },
+  footnotes: { type: Array, required: true },
+  type: { type: null, 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,147 @@
+declare const __VLS_export: import("vue").DefineComponent<({
+    title: string;
+    categories: string[];
+    series: import("../../types.js").ChartSeries[];
+    categoryColors: string[];
+    footnotes: string[];
+} & {
+    type: "bar";
+    typeOptions?: Partial<import("../../chartTypes/bar.js").TypeOptions> | undefined;
+}) | ({
+    title: string;
+    categories: string[];
+    series: import("../../types.js").ChartSeries[];
+    categoryColors: string[];
+    footnotes: string[];
+} & {
+    type: "line";
+    typeOptions?: Partial<import("../../chartTypes/line.js").TypeOptions> | undefined;
+}) | ({
+    title: string;
+    categories: string[];
+    series: import("../../types.js").ChartSeries[];
+    categoryColors: string[];
+    footnotes: string[];
+} & {
+    type: "area";
+    typeOptions?: Partial<import("../../chartTypes/area.js").TypeOptions> | undefined;
+}) | ({
+    title: string;
+    categories: string[];
+    series: import("../../types.js").ChartSeries[];
+    categoryColors: string[];
+    footnotes: string[];
+} & {
+    type: "pie";
+    typeOptions?: Partial<import("../../chartTypes/pie.js").TypeOptions> | undefined;
+}) | ({
+    title: string;
+    categories: string[];
+    series: import("../../types.js").ChartSeries[];
+    categoryColors: string[];
+    footnotes: string[];
+} & {
+    type: "donut";
+    typeOptions?: Partial<import("../../chartTypes/donut.js").TypeOptions> | undefined;
+}) | ({
+    title: string;
+    categories: string[];
+    series: import("../../types.js").ChartSeries[];
+    categoryColors: string[];
+    footnotes: string[];
+} & {
+    type: "heatmap";
+    typeOptions?: Partial<import("../../chartTypes/heatmap.js").TypeOptions> | undefined;
+}) | ({
+    title: string;
+    categories: string[];
+    series: import("../../types.js").ChartSeries[];
+    categoryColors: string[];
+    footnotes: string[];
+} & {
+    type: "radialBar";
+    typeOptions?: Partial<import("../../chartTypes/radialBar.js").TypeOptions> | undefined;
+}) | ({
+    title: string;
+    categories: string[];
+    series: import("../../types.js").ChartSeries[];
+    categoryColors: string[];
+    footnotes: string[];
+} & {
+    type: "radar";
+    typeOptions?: Partial<import("../../chartTypes/radar.js").TypeOptions> | undefined;
+}), {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<({
+    title: string;
+    categories: string[];
+    series: import("../../types.js").ChartSeries[];
+    categoryColors: string[];
+    footnotes: string[];
+} & {
+    type: "bar";
+    typeOptions?: Partial<import("../../chartTypes/bar.js").TypeOptions> | undefined;
+}) | ({
+    title: string;
+    categories: string[];
+    series: import("../../types.js").ChartSeries[];
+    categoryColors: string[];
+    footnotes: string[];
+} & {
+    type: "line";
+    typeOptions?: Partial<import("../../chartTypes/line.js").TypeOptions> | undefined;
+}) | ({
+    title: string;
+    categories: string[];
+    series: import("../../types.js").ChartSeries[];
+    categoryColors: string[];
+    footnotes: string[];
+} & {
+    type: "area";
+    typeOptions?: Partial<import("../../chartTypes/area.js").TypeOptions> | undefined;
+}) | ({
+    title: string;
+    categories: string[];
+    series: import("../../types.js").ChartSeries[];
+    categoryColors: string[];
+    footnotes: string[];
+} & {
+    type: "pie";
+    typeOptions?: Partial<import("../../chartTypes/pie.js").TypeOptions> | undefined;
+}) | ({
+    title: string;
+    categories: string[];
+    series: import("../../types.js").ChartSeries[];
+    categoryColors: string[];
+    footnotes: string[];
+} & {
+    type: "donut";
+    typeOptions?: Partial<import("../../chartTypes/donut.js").TypeOptions> | undefined;
+}) | ({
+    title: string;
+    categories: string[];
+    series: import("../../types.js").ChartSeries[];
+    categoryColors: string[];
+    footnotes: string[];
+} & {
+    type: "heatmap";
+    typeOptions?: Partial<import("../../chartTypes/heatmap.js").TypeOptions> | undefined;
+}) | ({
+    title: string;
+    categories: string[];
+    series: import("../../types.js").ChartSeries[];
+    categoryColors: string[];
+    footnotes: string[];
+} & {
+    type: "radialBar";
+    typeOptions?: Partial<import("../../chartTypes/radialBar.js").TypeOptions> | undefined;
+}) | ({
+    title: string;
+    categories: string[];
+    series: import("../../types.js").ChartSeries[];
+    categoryColors: string[];
+    footnotes: string[];
+} & {
+    type: "radar";
+    typeOptions?: Partial<import("../../chartTypes/radar.js").TypeOptions> | undefined;
+})> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1 @@
+export { default as ChartRenderer } from './ChartRenderer/index.vue.js';

package/dist/modules/charts/runtime/components/index.js

@@ -0,0 +1 @@
+export { default as ChartRenderer } from "./ChartRenderer/index.vue";

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

@@ -0,0 +1,16 @@
+import type { ChartTypeDefinition } from '../../../../chartTypes/types.js';
+type ChartOption = ChartTypeDefinition['editor']['options'][string];
+type __VLS_Props = {
+    title: string;
+    options: Record<string, ChartOption>;
+    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,16 @@
+import type { ChartTypeDefinition } from '../../../../chartTypes/types.js';
+type ChartOption = ChartTypeDefinition['editor']['options'][string];
+type __VLS_Props = {
+    title: string;
+    options: Record<string, ChartOption>;
+    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;

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

@@ -0,0 +1,49 @@
+<template>
+  <Dropdown position="top-left">
+    <template #button>
+      <span
+        class="bk-chart-color-swatch"
+        :style="{ backgroundColor: displayColor }"
+      />
+    </template>
+    <template #default="{ close }">
+      <button
+        v-for="(entry, id) in colors"
+        :key="id"
+        type="button"
+        class="bk-chart-color-option"
+        :class="{ 'is-active': colorId === id }"
+        @click="
+  () => {
+    emit('select', id);
+    close();
+  }
+"
+      >
+        <span
+          class="bk-chart-color-swatch"
+          :style="{ backgroundColor: entry.color }"
+        />
+        <span>{{ entry.label }}</span>
+      </button>
+    </template>
+  </Dropdown>
+</template>
+
+<script setup>
+import { computed } from "#imports";
+import { Dropdown } from "#blokkli/editor/components";
+const props = defineProps({
+  colorId: { type: String, required: true },
+  colors: { type: Object, required: true }
+});
+const emit = defineEmits(["select"]);
+const displayColor = computed(() => {
+  const entry = props.colors[props.colorId];
+  if (entry) {
+    return entry.color;
+  }
+  const first = Object.values(props.colors)[0];
+  return first?.color || "#888888";
+});
+</script>