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

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

@@ -0,0 +1,249 @@
+<template>
+  <div class="bk-chart-editor" @wheel.capture.stop>
+    <div class="bk-chart-editor-top">
+      <div class="bk-chart-editor-top-actions">
+        <div class="bk-chart-editor-actions">
+          <button type="button" :disabled="!canUndo" @click="undo">
+            <Icon name="bk_mdi_undo" />
+          </button>
+          <button type="button" :disabled="!canRedo" @click="redo">
+            <Icon name="bk_mdi_redo" />
+          </button>
+        </div>
+
+        <ChartTypePicker v-model="data.type" />
+      </div>
+
+      <ChartTypeOptions
+        v-if="chartDef"
+        v-model:title="data.title"
+        :options="chartDef.editor.options"
+        :type-options="data.typeOptions || {}"
+        @update:type-options="data.typeOptions = $event"
+      />
+    </div>
+
+    <div class="bk-chart-editor-main">
+      <div class="bk-chart-editor-section">
+        <div class="bk-chart-editor-preview-header">
+          <label class="bk-form-label">{{
+            $t("chartsPreview", "Preview")
+          }}</label>
+          <div class="bk-chart-editor-preview-actions">
+            <button
+              v-if="!autoUpdate"
+              type="button"
+              class="bk-button bk-is-small"
+              @click="refreshPreview"
+            >
+              {{ $t("chartsRefreshPreview", "Refresh Preview") }}
+            </button>
+            <FormToggle
+              v-model="autoUpdate"
+              :label="$t('chartsAutoUpdate', 'Auto-update')"
+            />
+          </div>
+        </div>
+        <Preview
+          :uuid
+          :option-key="optionKey"
+          :data="previewData"
+          :stale="isStale"
+        />
+      </div>
+
+      <div class="bk-chart-editor-section">
+        <label class="bk-form-label">{{ $t("chartsData", "Data") }}</label>
+        <DataTable
+          :categories="data.categories"
+          :series="data.series"
+          :category-colors="data.categoryColors"
+          :has-multiple-series="caps.hasMultipleSeries"
+          :has-series-colors="caps.hasSeriesColors"
+          :has-category-colors="caps.hasCategoryColors"
+          :colors="COLORS"
+          :remove-row="removeRow"
+          :remove-series="removeSeries"
+          @update:categories="data.categories = $event"
+          @update:series="data.series = $event"
+          @update:category-colors="data.categoryColors = $event"
+        />
+        <div class="bk-chart-data-table-actions">
+          <button type="button" class="bk-button bk-is-small" @click="addRow">
+            <Icon name="bk_mdi_add_row_below" />
+            {{ $t("chartsAddRow", "Add row") }}
+          </button>
+          <button
+            v-if="caps.hasMultipleSeries"
+            type="button"
+            class="bk-button bk-is-small"
+            @click="addSeries"
+          >
+            <Icon name="bk_mdi_add_column_right" />
+            {{ $t("chartsAddColumn", "Add column") }}
+          </button>
+          <CsvImport :colors="COLORS" @import="importData" />
+        </div>
+      </div>
+
+      <div class="bk-chart-editor-section">
+        <FootnoteEditor
+          :footnotes="data.footnotes"
+          @update:footnotes="data.footnotes = $event"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch, useBlokkli, onBeforeUnmount } from "#imports";
+import { getDefaultChartData, getFirstColorId } from "../../../helpers";
+import { getChartType, getDefaultTypeOptions } from "../../../chartTypes";
+import { COLORS } from "#blokkli-build/charts-config";
+import { useChartEditorState } from "./useChartEditorState";
+import { Icon, FormToggle } from "#blokkli/editor/components";
+import ChartTypePicker from "./ChartTypePicker/index.vue";
+import DataTable from "./DataTable/index.vue";
+import CsvImport from "./CsvImport/index.vue";
+import FootnoteEditor from "./FootnoteEditor/index.vue";
+import Preview from "./Preview/index.vue";
+import ChartTypeOptions from "./ChartTypeOptions/index.vue";
+import { onBlokkliEvent } from "#blokkli/editor/composables";
+const props = defineProps({
+  uuid: { type: String, required: true },
+  optionKey: { type: String, required: true }
+});
+const { $t, state } = useBlokkli();
+function getCurrentData() {
+  const rawData = state.mutatedOptions[props.uuid]?.data || state.getFieldListItem(props.uuid)?.options?.data;
+  if (rawData) {
+    try {
+      const parsed = JSON.parse(rawData);
+      if (parsed && Array.isArray(parsed.series) && parsed.series.length > 0) {
+        const fallbackId = getFirstColorId(COLORS);
+        for (const series of parsed.series) {
+          if (!COLORS[series.color]) {
+            series.color = fallbackId;
+          }
+        }
+        if (Array.isArray(parsed.categoryColors)) {
+          for (let i = 0; i < parsed.categoryColors.length; i++) {
+            if (!COLORS[parsed.categoryColors[i]]) {
+              parsed.categoryColors[i] = fallbackId;
+            }
+          }
+        } else {
+          parsed.categoryColors = parsed.categories.map(
+            (_, i) => {
+              const ids = Object.keys(COLORS);
+              return ids[i % ids.length] || fallbackId;
+            }
+          );
+        }
+        if (!Array.isArray(parsed.footnotes)) {
+          parsed.footnotes = [];
+        }
+        if (!parsed.typeOptions || typeof parsed.typeOptions !== "object") {
+          parsed.typeOptions = getDefaultTypeOptions(parsed.type);
+        }
+        return parsed;
+      }
+    } catch {
+    }
+  }
+  return getDefaultChartData(COLORS);
+}
+const {
+  data,
+  canUndo,
+  canRedo,
+  undo,
+  redo,
+  addRow,
+  addSeries,
+  removeRow,
+  removeSeries,
+  importData
+} = useChartEditorState(getCurrentData(), COLORS);
+const autoUpdate = ref(true);
+const previewData = ref(
+  JSON.parse(JSON.stringify(data.value))
+);
+const isStale = ref(false);
+let debounceTimer = null;
+function refreshPreview() {
+  previewData.value = JSON.parse(JSON.stringify(data.value));
+  isStale.value = false;
+}
+watch(
+  data,
+  () => {
+    if (autoUpdate.value) {
+      if (debounceTimer) clearTimeout(debounceTimer);
+      isStale.value = true;
+      debounceTimer = setTimeout(refreshPreview, 500);
+    } else {
+      isStale.value = true;
+    }
+  },
+  { deep: true }
+);
+watch(autoUpdate, (enabled) => {
+  if (enabled) {
+    refreshPreview();
+  }
+});
+onBeforeUnmount(() => {
+  if (debounceTimer) clearTimeout(debounceTimer);
+});
+const chartDef = computed(() => getChartType(data.value.type, $t));
+const caps = computed(() => {
+  const def = chartDef.value;
+  return {
+    hasMultipleSeries: def?.hasMultipleSeries ?? true,
+    hasSeriesColors: def?.hasSeriesColors ?? true,
+    hasCategoryColors: def?.hasCategoryColors ?? false
+  };
+});
+const typeOptionsCache = {
+  ...data.value.typeOptions
+};
+watch(
+  () => data.value.type,
+  (type) => {
+    const defaults = getDefaultTypeOptions(type);
+    const merged = {};
+    for (const key of Object.keys(defaults)) {
+      merged[key] = key in typeOptionsCache ? typeOptionsCache[key] : defaults[key];
+    }
+    data.value.typeOptions = merged;
+  }
+);
+watch(
+  () => data.value.typeOptions,
+  (opts) => {
+    if (opts) {
+      Object.assign(typeOptionsCache, opts);
+    }
+  },
+  { deep: true }
+);
+function getData() {
+  return data.value;
+}
+onBlokkliEvent("keyPressed", (e) => {
+  if (e.code === "z" && e.meta) {
+    e.originalEvent.preventDefault();
+    if (canUndo.value) {
+      undo();
+    }
+  } else if (e.code === "Z" && e.meta && e.shift) {
+    e.originalEvent.preventDefault();
+    if (canRedo.value) {
+      redo();
+    }
+  }
+});
+defineExpose({ getData });
+</script>

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

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

package/dist/modules/charts/runtime/features/charts/Editor/useChartEditorState.d.ts

@@ -0,0 +1,17 @@
+import type { BlokkliChartData, ChartColor, ChartSeries } from '../../../types.js';
+export declare function useChartEditorState(initial: BlokkliChartData, colors: Record<string, ChartColor>): {
+    data: any;
+    canUndo: any;
+    canRedo: any;
+    undo: () => void;
+    redo: () => void;
+    addRow: () => void;
+    addSeries: () => void;
+    removeRow: (index: number) => void;
+    removeSeries: (index: number) => void;
+    importData: (payload: {
+        categories: string[];
+        series: ChartSeries[];
+        categoryColors: string[];
+    }) => void;
+};

package/dist/modules/charts/runtime/features/charts/Editor/useChartEditorState.js

@@ -0,0 +1,90 @@
+import { ref, watch, nextTick, computed } from "#imports";
+import { getColorIdAtIndex } from "../../../helpers/index.js";
+const MAX_HISTORY = 50;
+function clone(v) {
+  return JSON.parse(JSON.stringify(v));
+}
+export function useChartEditorState(initial, colors) {
+  const data = ref(clone(initial));
+  const stack = ref([clone(initial)]);
+  const index = ref(0);
+  let isApplying = false;
+  const canUndo = computed(() => index.value > 0);
+  const canRedo = computed(() => index.value < stack.value.length - 1);
+  watch(
+    data,
+    (newVal) => {
+      if (isApplying) return;
+      stack.value.splice(index.value + 1);
+      stack.value.push(clone(newVal));
+      if (stack.value.length > MAX_HISTORY) {
+        stack.value.shift();
+      }
+      index.value = stack.value.length - 1;
+    },
+    { deep: true }
+  );
+  function undo() {
+    if (!canUndo.value) return;
+    isApplying = true;
+    index.value--;
+    data.value = clone(stack.value[index.value]);
+    nextTick(() => {
+      isApplying = false;
+    });
+  }
+  function redo() {
+    if (!canRedo.value) return;
+    isApplying = true;
+    index.value++;
+    data.value = clone(stack.value[index.value]);
+    nextTick(() => {
+      isApplying = false;
+    });
+  }
+  function addRow() {
+    data.value.categories.push(`Category ${data.value.categories.length + 1}`);
+    for (const s of data.value.series) {
+      s.data.push(0);
+    }
+    data.value.categoryColors.push(
+      getColorIdAtIndex(data.value.categoryColors.length, colors)
+    );
+  }
+  function addSeries() {
+    data.value.series.push({
+      name: `Series ${data.value.series.length + 1}`,
+      color: getColorIdAtIndex(data.value.series.length, colors),
+      data: Array.from({ length: data.value.categories.length }).fill(
+        0
+      )
+    });
+  }
+  function removeRow(index2) {
+    data.value.categories.splice(index2, 1);
+    for (const s of data.value.series) {
+      s.data.splice(index2, 1);
+    }
+    data.value.categoryColors.splice(index2, 1);
+  }
+  function removeSeries(index2) {
+    data.value.series.splice(index2, 1);
+  }
+  function importData(payload) {
+    data.value.categories = payload.categories;
+    data.value.series = payload.series;
+    data.value.categoryColors = payload.categoryColors;
+  }
+  return {
+    data,
+    canUndo,
+    canRedo,
+    undo,
+    redo,
+    addRow,
+    addSeries,
+    removeRow,
+    removeSeries,
+    importData
+  };
+}

package/dist/modules/charts/runtime/features/charts/index.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/features/charts/index.vue

@@ -0,0 +1,72 @@
+<template>
+  <NestedEditorOverlay
+    v-if="uuid"
+    :uuid
+    :title="$t('chartsEditorTitle', 'Edit chart')"
+    icon="bk_mdi_area_chart"
+    theme="accent"
+    :element
+    @submit="onSubmit"
+    @close="onSubmit"
+  >
+    <ChartsEditor ref="editorRef" :uuid :option-key="optionKey" />
+  </NestedEditorOverlay>
+</template>
+
+<script setup>
+import { onBlokkliEvent } from "#blokkli/editor/composables";
+import {
+  defineBlokkliFeature,
+  ref,
+  useTemplateRef,
+  useBlokkli,
+  computed
+} from "#imports";
+import { NestedEditorOverlay } from "#blokkli/editor/components";
+import ChartsEditor from "./Editor/index.vue";
+defineBlokkliFeature({
+  id: "charts",
+  icon: "bk_mdi_area_chart",
+  label: "Charts",
+  description: "Add and edit interactive charts.",
+  requiredAdapterMethods: ["updateOptions"]
+});
+const { $t, state, adapter, dom, blocks } = useBlokkli();
+const uuid = ref(null);
+const optionKey = ref("data");
+const element = computed(() => {
+  if (!uuid.value) {
+    return null;
+  }
+  const block = blocks.getBlock(uuid.value);
+  if (!block) {
+    return null;
+  }
+  return dom.getDragElement(block);
+});
+const isLoading = ref(false);
+const editorRef = useTemplateRef("editorRef");
+async function onSubmit() {
+  if (!uuid.value || !editorRef.value) return;
+  const chartData = editorRef.value.getData();
+  isLoading.value = true;
+  await state.mutateWithLoadingState(
+    () => adapter.updateOptions([
+      {
+        uuid: uuid.value,
+        key: optionKey.value,
+        value: JSON.stringify(chartData)
+      }
+    ]),
+    $t("chartsEditorSaveError", "The chart could not be saved.")
+  );
+  isLoading.value = false;
+  uuid.value = null;
+}
+onBlokkliEvent("option:edit-complex", (data) => {
+  if (data.dataType === "chart") {
+    uuid.value = data.uuid;
+    optionKey.value = data.key;
+  }
+});
+</script>

package/dist/modules/charts/runtime/features/charts/index.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/helpers/index.d.ts

@@ -0,0 +1,26 @@
+import type { BlokkliChartData, ChartColor } from '../types.js';
+export declare const SUPERSCRIPTS: Record<string, string>;
+/**
+ * Replace `{1}`, `{2}`, etc. with Unicode superscript characters.
+ */
+export declare function applyFootnotes(text: string): string;
+/**
+ * Resolve a color ID to a concrete CSS color value that ApexCharts can use.
+ *
+ * Plain values like '#ff0000' or 'rgb(255, 0, 0)' are returned as-is.
+ * Values containing 'var(' (e.g. 'rgb(var(--theme-primary))') are resolved
+ * by setting the value on a DOM element and reading the computed color.
+ *
+ * Falls back to the first defined color if the ID is not found.
+ */
+export declare function resolveChartColor(colorId: string, colors: Record<string, ChartColor>, el?: HTMLElement | null): string;
+/**
+ * Get the fallback color ID (first defined color).
+ */
+export declare function getFirstColorId(colors: Record<string, ChartColor>): string;
+/**
+ * Get a color ID for the given index, cycling through available colors.
+ */
+export declare function getColorIdAtIndex(index: number, colors: Record<string, ChartColor>): string;
+export declare function getDefaultChartData(colors: Record<string, ChartColor>): BlokkliChartData;
+export declare function parseNumericInput(raw: string): number;

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

@@ -0,0 +1,80 @@
+export const SUPERSCRIPTS = {
+  "1": "\xB9",
+  "2": "\xB2",
+  "3": "\xB3",
+  "4": "\u2074",
+  "5": "\u2075",
+  "6": "\u2076",
+  "7": "\u2077",
+  "8": "\u2078",
+  "9": "\u2079",
+  "0": "\u2070"
+};
+export function applyFootnotes(text) {
+  return text.replace(
+    /\{(\d)\}/g,
+    (_, d) => SUPERSCRIPTS[d] || `{${d}}`
+  );
+}
+export function resolveChartColor(colorId, colors, el) {
+  const ids = Object.keys(colors);
+  const entry = colors[colorId] || colors[ids[0] || ""];
+  if (!entry) {
+    return "#888888";
+  }
+  const value = entry.color;
+  if (!value.includes("var(")) {
+    return value;
+  }
+  const target = el || document.documentElement;
+  const prev = target.style.color;
+  target.style.color = value;
+  const resolved = getComputedStyle(target).color;
+  target.style.color = prev;
+  return resolved || value;
+}
+export function getFirstColorId(colors) {
+  return Object.keys(colors)[0] || "";
+}
+export function getColorIdAtIndex(index, colors) {
+  const ids = Object.keys(colors);
+  return ids[index % ids.length] || ids[0] || "";
+}
+export function getDefaultChartData(colors) {
+  return {
+    title: "",
+    type: "bar",
+    categories: ["Category 1", "Category 2", "Category 3"],
+    series: [
+      {
+        name: "Series 1",
+        color: getColorIdAtIndex(0, colors),
+        data: [30, 40, 35]
+      }
+    ],
+    categoryColors: [
+      getColorIdAtIndex(0, colors),
+      getColorIdAtIndex(1, colors),
+      getColorIdAtIndex(2, colors)
+    ],
+    footnotes: [],
+    typeOptions: {}
+  };
+}
+export function parseNumericInput(raw) {
+  let str = raw.trim();
+  if (!str) return 0;
+  str = str.replace(/'/g, "");
+  if (str.includes(",")) {
+    const isThousandsSep = /,\d{3}(?:,\d{3})*$/.test(str);
+    if (isThousandsSep) {
+      str = str.replace(/,/g, "");
+    } else {
+      str = str.replace(/\./g, "");
+      const lastComma = str.lastIndexOf(",");
+      str = str.slice(0, lastComma) + "." + str.slice(lastComma + 1);
+    }
+  }
+  const value = Number.parseFloat(str);
+  return Number.isFinite(value) ? value : 0;
+}

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

@@ -0,0 +1,33 @@
+import type { ChartTypeOptionsMap } from './chartTypes/index.js';
+export type ChartType = 'bar' | 'line' | 'pie' | 'area' | 'donut' | 'heatmap' | 'radialBar' | 'radar';
+export type ChartTypeOptions = ChartTypeOptionsMap[ChartType];
+export type ChartSeries = {
+    name: string;
+    /**
+     * The color identifier as defined in the module options.
+     */
+    color: string;
+    data: number[];
+};
+type ChartDataBase = {
+    title: string;
+    categories: string[];
+    series: ChartSeries[];
+    /**
+     * Color identifiers per category, used for pie/donut charts where each
+     * slice has its own color.
+     */
+    categoryColors: string[];
+    footnotes: string[];
+};
+export type BlokkliChartData = {
+    [K in ChartType]: ChartDataBase & {
+        type: K;
+        typeOptions?: Partial<ChartTypeOptionsMap[K]>;
+    };
+}[ChartType];
+export type ChartColor = {
+    color: string;
+    label: string;
+};
+export {};

package/dist/modules/drupal/graphql/features/fragments.graphql

@@ -7,6 +7,7 @@ mutation pbAddFragmentParagraph(
   $hostUuid: String!
   $hostFieldName: String!
   $afterUuid: String
+  $options: String
 ) {
   state: paragraphsEditMutationState(
     entityType: $entityType
@@ -18,6 +19,7 @@ mutation pbAddFragmentParagraph(
       hostType: $hostType
       hostUuid: $hostUuid
       hostFieldName: $hostFieldName
+      options: $options
     ) {
       ...paragraphsBlokkliMutationResult
     }

package/dist/modules/drupal/index.d.mts

@@ -1,4 +1,4 @@
-import { B as BlokkliModule } from '../../shared/editor.Iax3GCvt.mjs';
+import { B as BlokkliModule } from '../../shared/editor.BdBm1Z7C.mjs';
 import 'nuxt/schema';
 import 'consola';
 import '../../../dist/global/types/definitions.js';

package/dist/modules/drupal/runtime/adapter/index.d.ts

@@ -1,2 +1,4 @@
-declare const _default: any;
+import { type BlokkliAdapterFactory } from '#blokkli/editor/adapter';
+import type { ParagraphsBlokkliEditStateFragment } from '#graphql-operations';
+declare const _default: BlokkliAdapterFactory<ParagraphsBlokkliEditStateFragment>;
 export default _default;

package/dist/modules/drupal/runtime/adapter/index.js

@@ -704,14 +704,18 @@ export default defineBlokkliEditAdapter(
       }).then(mapMutation);
     }
     if (hasMutation("pbAddFragmentParagraph")) {
-      adapter.fragmentsAddBlock = (e) => useGraphqlMutation("pbAddFragmentParagraph", {
-        ...ctx.value,
-        hostType: e.host.type,
-        hostFieldName: e.host.fieldName,
-        hostUuid: e.host.uuid,
-        afterUuid: e.preceedingUuid,
-        name: e.name
-      }).then(mapMutation);
+      adapter.fragmentsAddBlock = (e) => {
+        const options = e.options ? JSON.stringify(e.options) : void 0;
+        return useGraphqlMutation("pbAddFragmentParagraph", {
+          ...ctx.value,
+          hostType: e.host.type,
+          hostFieldName: e.host.fieldName,
+          hostUuid: e.host.uuid,
+          afterUuid: e.preceedingUuid,
+          name: e.name,
+          options
+        }).then(mapMutation);
+      };
     }
     if (hasMutation("pbReplaceMedia")) {
       adapter.mediaLibraryReplaceMedia = (e) => useGraphqlMutation("pbReplaceMedia", {
@@ -848,19 +852,19 @@ export default defineBlokkliEditAdapter(
               }
             }
             return false;
-          })?.possibleParagraphBundles?.[0];
+          })?.possibleParagraphBundles;
         } else if (e.type === "plaintext") {
           return config.clipboard.find((v) => {
             return v?.__typename === "ParagraphsBlokkliSupportedClipboardRichText";
-          })?.possibleParagraphBundles?.[0];
+          })?.possibleParagraphBundles;
         } else if (e.type === "image") {
           return config.clipboard.find((v) => {
             return v?.__typename === "ParagraphsBlokkliSupportedClipboardImage";
-          })?.possibleParagraphBundles?.[0];
+          })?.possibleParagraphBundles;
         } else if (e.type === "file") {
           return config.clipboard.find((v) => {
             return v?.__typename === "ParagraphsBlokkliSupportedClipboardFile";
-          })?.possibleParagraphBundles?.[0];
+          })?.possibleParagraphBundles;
         }
       };
     }