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

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>

package/dist/modules/charts/runtime/features/charts/Editor/ColorDropdown/index.vue.d.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/CsvImport/index.d.vue.ts

@@ -0,0 +1,19 @@
+import type { ChartSeries, ChartColor } from '../../../../types.js';
+type __VLS_Props = {
+    colors: Record<string, ChartColor>;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    import: (payload: {
+        categories: string[];
+        series: ChartSeries[];
+        categoryColors: string[];
+    }) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onImport?: ((payload: {
+        categories: string[];
+        series: ChartSeries[];
+        categoryColors: 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/CsvImport/index.vue

@@ -0,0 +1,90 @@
+<template>
+  <button
+    type="button"
+    class="bk-button bk-is-small"
+    @click="fileInputEl?.click()"
+  >
+    {{ $t("chartsImportCsv", "Import CSV") }}
+  </button>
+  <input
+    ref="fileInputEl"
+    type="file"
+    accept=".csv,text/csv"
+    class="bk-chart-data-table-file-input"
+    @change="onFileChange"
+  />
+</template>
+
+<script setup>
+import { useTemplateRef, useBlokkli } from "#imports";
+import { getColorIdAtIndex } from "../../../../types";
+import { parseNumericInput } from "../../../../helpers";
+const props = defineProps({
+  colors: { type: Object, required: true }
+});
+const emit = defineEmits(["import"]);
+const { $t } = useBlokkli();
+const fileInputEl = useTemplateRef("fileInputEl");
+function parseCsvLine(line) {
+  const cells = [];
+  let current = "";
+  let inQuotes = false;
+  for (let i = 0; i < line.length; i++) {
+    const char = line[i];
+    if (inQuotes) {
+      if (char === '"' && line[i + 1] === '"') {
+        current += '"';
+        i++;
+      } else if (char === '"') {
+        inQuotes = false;
+      } else {
+        current += char;
+      }
+    } else if (char === '"') {
+      inQuotes = true;
+    } else if (char === "," || char === ";" || char === "	") {
+      cells.push(current.trim());
+      current = "";
+    } else {
+      current += char;
+    }
+  }
+  cells.push(current.trim());
+  return cells;
+}
+function onFileChange(event) {
+  const input = event.target;
+  const file = input.files?.[0];
+  if (!file) return;
+  const reader = new FileReader();
+  reader.onload = (e) => {
+    const text = e.target?.result;
+    if (typeof text !== "string") return;
+    const lines = text.split(/\r?\n/).map((l) => l.trim()).filter((l) => l.length > 0);
+    if (lines.length < 2) return;
+    const header = parseCsvLine(lines[0]);
+    const seriesNames = header.slice(1);
+    if (seriesNames.length === 0) return;
+    const categories = [];
+    const seriesData = seriesNames.map(() => []);
+    for (let i = 1; i < lines.length; i++) {
+      const cells = parseCsvLine(lines[i]);
+      categories.push(cells[0] || `Category ${i}`);
+      for (let si = 0; si < seriesNames.length; si++) {
+        seriesData[si].push(parseNumericInput(cells[si + 1] || ""));
+      }
+    }
+    const series = seriesNames.map((name, i) => ({
+      name: name || `Series ${i + 1}`,
+      color: getColorIdAtIndex(i, props.colors),
+      data: seriesData[i]
+    }));
+    const categoryColors = categories.map(
+      (_, i) => getColorIdAtIndex(i, props.colors)
+    );
+    emit("import", { categories, series, categoryColors });
+  };
+  reader.readAsText(file);
+  input.value = "";
+}
+</script>

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

@@ -0,0 +1,19 @@
+import type { ChartSeries, ChartColor } from '../../../../types.js';
+type __VLS_Props = {
+    colors: Record<string, ChartColor>;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    import: (payload: {
+        categories: string[];
+        series: ChartSeries[];
+        categoryColors: string[];
+    }) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onImport?: ((payload: {
+        categories: string[];
+        series: ChartSeries[];
+        categoryColors: 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/DataTable/index.d.vue.ts

@@ -0,0 +1,23 @@
+import type { ChartSeries, ChartColor } from '../../../../types.js';
+type __VLS_Props = {
+    categories: string[];
+    series: ChartSeries[];
+    categoryColors: string[];
+    hasMultipleSeries: boolean;
+    hasSeriesColors: boolean;
+    hasCategoryColors: boolean;
+    colors: Record<string, ChartColor>;
+    removeRow: (index: number) => void;
+    removeSeries: (index: number) => void;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:categories": (value: string[]) => any;
+    "update:series": (value: ChartSeries[]) => any;
+    "update:categoryColors": (value: string[]) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:categories"?: ((value: string[]) => any) | undefined;
+    "onUpdate:series"?: ((value: ChartSeries[]) => any) | undefined;
+    "onUpdate:categoryColors"?: ((value: 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/DataTable/index.vue

@@ -0,0 +1,224 @@
+<template>
+  <table
+    class="bk-chart-data-table"
+    @keydown="onTableKeydown"
+    @input="onTableInput"
+    @click="onTableClick"
+  >
+    <thead v-if="hasMultipleSeries">
+      <tr>
+        <th />
+        <th v-for="(s, si) in visibleSeries" :key="si">
+          <div class="bk-chart-data-table-series-header">
+            <ColorDropdown
+              v-if="hasSeriesColors"
+              :color-id="s.color"
+              :colors="colors"
+              @select="updateSeriesColor(si, $event)"
+            />
+            <input
+              type="text"
+              :value="s.name"
+              class="bk-chart-data-table-series-name"
+              @change="
+  updateSeriesName(si, $event.target.value)
+"
+            />
+            <button
+              v-if="series.length > 1"
+              type="button"
+              class="bk-chart-data-table-remove"
+              @click="props.removeSeries(si)"
+            >
+              <Icon name="bk_mdi_delete" />
+            </button>
+          </div>
+        </th>
+        <th v-if="canDeleteRows" />
+      </tr>
+    </thead>
+    <tbody>
+      <tr v-for="(cat, ci) in categories" :key="ci">
+        <td>
+          <div class="bk-chart-data-table-category-cell">
+            <ColorDropdown
+              v-if="hasCategoryColors"
+              :color-id="categoryColors[ci] || ''"
+              :colors="colors"
+              @select="updateCategoryColor(ci, $event)"
+            />
+            <input
+              type="text"
+              :value="cat"
+              @change="
+  updateCategory(ci, $event.target.value)
+"
+            />
+          </div>
+        </td>
+        <td v-for="(s, si) in visibleSeries" :key="si">
+          <input
+            type="text"
+            inputmode="decimal"
+            :value="s.data[ci]"
+            @blur="
+  updateValue(si, ci, $event.target.value)
+"
+          />
+        </td>
+        <td v-if="canDeleteRows">
+          <button
+            type="button"
+            class="bk-chart-data-table-remove"
+            @click="props.removeRow(ci)"
+          >
+            <Icon name="bk_mdi_delete" />
+          </button>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</template>
+
+<script setup>
+import { computed, ref } from "#imports";
+import { parseNumericInput } from "../../../../helpers";
+import { Icon } from "#blokkli/editor/components";
+import ColorDropdown from "../ColorDropdown/index.vue";
+const props = defineProps({
+  categories: { type: Array, required: true },
+  series: { type: Array, required: true },
+  categoryColors: { type: Array, required: true },
+  hasMultipleSeries: { type: Boolean, required: true },
+  hasSeriesColors: { type: Boolean, required: true },
+  hasCategoryColors: { type: Boolean, required: true },
+  colors: { type: Object, required: true },
+  removeRow: { type: Function, required: true },
+  removeSeries: { type: Function, required: true }
+});
+const emit = defineEmits(["update:categories", "update:series", "update:categoryColors"]);
+const visibleSeries = computed(
+  () => props.hasMultipleSeries ? props.series : props.series.slice(0, 1)
+);
+const canDeleteRows = computed(() => props.categories.length > 1);
+function updateCategory(index, value) {
+  if (props.categories[index] === value) return;
+  const updated = [...props.categories];
+  updated[index] = value;
+  emit("update:categories", updated);
+}
+function updateValue(seriesIndex, categoryIndex, raw) {
+  const value = parseNumericInput(raw);
+  if (props.series[seriesIndex]?.data[categoryIndex] === value) return;
+  const updated = props.series.map((s, si) => {
+    if (si !== seriesIndex) return s;
+    const data = [...s.data];
+    data[categoryIndex] = value;
+    return { ...s, data };
+  });
+  emit("update:series", updated);
+}
+function updateSeriesName(index, name) {
+  emit(
+    "update:series",
+    props.series.map((s, i) => i === index ? { ...s, name } : s)
+  );
+}
+function updateSeriesColor(index, colorId) {
+  emit(
+    "update:series",
+    props.series.map((s, i) => i === index ? { ...s, color: colorId } : s)
+  );
+}
+function updateCategoryColor(index, colorId) {
+  const updated = [...props.categoryColors];
+  updated[index] = colorId;
+  emit("update:categoryColors", updated);
+}
+const editing = ref(false);
+function onTableInput(e) {
+  if (e.target instanceof HTMLInputElement) {
+    editing.value = true;
+  }
+}
+function onTableClick(e) {
+  if (e.target instanceof HTMLInputElement) {
+    editing.value = true;
+  }
+}
+function onTableKeydown(e) {
+  const { key } = e;
+  if (key !== "ArrowUp" && key !== "ArrowDown" && key !== "ArrowLeft" && key !== "ArrowRight" && key !== "Enter" && key !== "F2" && key !== "Escape") {
+    return;
+  }
+  const active = document.activeElement;
+  if (!(active instanceof HTMLElement)) return;
+  if (key === "F2" && active instanceof HTMLInputElement) {
+    editing.value = true;
+    const len = active.value.length;
+    active.setSelectionRange(len, len);
+    e.preventDefault();
+    return;
+  }
+  if (key === "Escape" && active instanceof HTMLInputElement) {
+    editing.value = false;
+    active.select();
+    e.preventDefault();
+    return;
+  }
+  if (key === "Enter" && !(active instanceof HTMLInputElement)) return;
+  if (key === "Enter" && !editing.value && !e.shiftKey) {
+    editing.value = true;
+    const input = active;
+    const len = input.value.length;
+    input.setSelectionRange(len, len);
+    e.preventDefault();
+    return;
+  }
+  const table = active.closest("table");
+  if (!table) return;
+  if (editing.value && active instanceof HTMLInputElement) {
+    const atStart = active.selectionStart === 0 && active.selectionEnd === 0;
+    const atEnd = active.selectionEnd === active.value.length && active.selectionStart === active.selectionEnd;
+    if (key === "ArrowLeft" && !atStart) return;
+    if (key === "ArrowRight" && !atEnd) return;
+    if (key === "ArrowUp" || key === "ArrowDown") return;
+  }
+  const cellSelector = "input, button";
+  const rows = Array.from(
+    table.querySelectorAll("thead > tr, tbody > tr")
+  );
+  let currentRow = -1;
+  let currentCol = -1;
+  for (let r = 0; r < rows.length; r++) {
+    const cells = Array.from(
+      rows[r].querySelectorAll(cellSelector)
+    );
+    const col = cells.indexOf(active);
+    if (col !== -1) {
+      currentRow = r;
+      currentCol = col;
+      break;
+    }
+  }
+  if (currentRow === -1) return;
+  let targetRow = currentRow;
+  let targetCol = currentCol;
+  if (key === "ArrowUp" || key === "Enter" && e.shiftKey) targetRow--;
+  else if (key === "ArrowDown" || key === "Enter" && !e.shiftKey) targetRow++;
+  else if (key === "ArrowLeft") targetCol--;
+  else if (key === "ArrowRight") targetCol++;
+  if (targetRow < 0 || targetRow >= rows.length) return;
+  const targetCells = Array.from(
+    rows[targetRow].querySelectorAll(cellSelector)
+  );
+  if (targetCol < 0 || targetCol >= targetCells.length) return;
+  e.preventDefault();
+  editing.value = false;
+  const target = targetCells[targetCol];
+  target.focus();
+  if (target instanceof HTMLInputElement) {
+    target.select();
+  }
+}
+</script>

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

@@ -0,0 +1,23 @@
+import type { ChartSeries, ChartColor } from '../../../../types.js';
+type __VLS_Props = {
+    categories: string[];
+    series: ChartSeries[];
+    categoryColors: string[];
+    hasMultipleSeries: boolean;
+    hasSeriesColors: boolean;
+    hasCategoryColors: boolean;
+    colors: Record<string, ChartColor>;
+    removeRow: (index: number) => void;
+    removeSeries: (index: number) => void;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:categories": (value: string[]) => any;
+    "update:series": (value: ChartSeries[]) => any;
+    "update:categoryColors": (value: string[]) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:categories"?: ((value: string[]) => any) | undefined;
+    "onUpdate:series"?: ((value: ChartSeries[]) => any) | undefined;
+    "onUpdate:categoryColors"?: ((value: 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/FootnoteEditor/index.d.vue.ts

@@ -0,0 +1,10 @@
+type __VLS_Props = {
+    footnotes: string[];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:footnotes": (value: string[]) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:footnotes"?: ((value: 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/FootnoteEditor/index.vue

@@ -0,0 +1,61 @@
+<template>
+  <div class="bk-chart-data-table-footnotes">
+    <label class="bk-form-label">{{
+      $t("chartsFootnotes", "Footnotes")
+    }}</label>
+    <div
+      v-for="(note, i) in footnotes"
+      :key="i"
+      class="bk-chart-data-table-footnote-row"
+    >
+      <span class="bk-chart-data-table-footnote-marker">{{
+        superscriptFor(i + 1)
+      }}</span>
+      <input
+        type="text"
+        :value="note"
+        class="bk-form-input"
+        @change="updateFootnote(i, $event.target.value)"
+      />
+      <button
+        type="button"
+        class="bk-chart-data-table-remove"
+        @click="removeFootnote(i)"
+      >
+        <Icon name="bk_mdi_delete" />
+      </button>
+    </div>
+    <button type="button" class="bk-button bk-is-small" @click="addFootnote">
+      <Icon name="bk_mdi_add" />
+      {{ $t("chartsAddFootnote", "Add footnote") }}
+    </button>
+  </div>
+</template>
+
+<script setup>
+import { useBlokkli } from "#imports";
+import { SUPERSCRIPTS } from "../../../../types";
+import { Icon } from "#blokkli/editor/components";
+const { $t } = useBlokkli();
+const props = defineProps({
+  footnotes: { type: Array, required: true }
+});
+const emit = defineEmits(["update:footnotes"]);
+function superscriptFor(n) {
+  return String(n).split("").map((d) => SUPERSCRIPTS[d] || d).join("");
+}
+function updateFootnote(index, value) {
+  const updated = [...props.footnotes];
+  updated[index] = value;
+  emit("update:footnotes", updated);
+}
+function addFootnote() {
+  emit("update:footnotes", [...props.footnotes, ""]);
+}
+function removeFootnote(index) {
+  emit(
+    "update:footnotes",
+    props.footnotes.filter((_, i) => i !== index)
+  );
+}
+</script>

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

@@ -0,0 +1,10 @@
+type __VLS_Props = {
+    footnotes: string[];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:footnotes": (value: string[]) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:footnotes"?: ((value: 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/Preview/index.d.vue.ts

@@ -0,0 +1,8 @@
+import type { BlokkliChartData } from '../../../../types.js';
+type __VLS_Props = {
+    data: BlokkliChartData | null;
+    stale: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, 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/Preview/index.vue

@@ -0,0 +1,23 @@
+<template>
+  <div :class="{ 'bk-is-stale': stale }">
+    <ChartRenderer v-if="data" v-bind="data" />
+    <div v-else class="bk-chart-preview-placeholder">
+      {{
+        $t(
+  "chartsPreviewPlaceholder",
+  'Click "Refresh Preview" to see the chart.'
+)
+      }}
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { useBlokkli } from "#imports";
+import ChartRenderer from "../../../../components/ChartRenderer/index.vue";
+const { $t } = useBlokkli();
+defineProps({
+  data: { type: [Object, null], required: true },
+  stale: { type: Boolean, required: true }
+});
+</script>

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

@@ -0,0 +1,8 @@
+import type { BlokkliChartData } from '../../../../types.js';
+type __VLS_Props = {
+    data: BlokkliChartData | null;
+    stale: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, 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/index.d.vue.ts

@@ -0,0 +1,10 @@
+import type { BlokkliChartData } from '../../../types.js';
+type __VLS_Props = {
+    uuid: 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;