@blokkli/editor 2.0.0-alpha.58 → 2.0.0-alpha.59

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

@@ -0,0 +1,88 @@
+<template>
+  <div class="_bk_p-15">
+    <FormItem>
+      <FormSelect
+        id="charts-csv-filter-column"
+        v-model="columnStr"
+        :label="$t('chartsCsvFilterColumn', 'Column')"
+        :options="columnOptions"
+      />
+      <div v-if="column !== null" class="_bk_mt-20">
+        <FormCheckboxes
+          id="charts-csv-filter-values"
+          v-model="values"
+          :label="$t('chartsCsvFilterValues', 'Allowed values')"
+          :options="valueOptions"
+        />
+      </div>
+    </FormItem>
+    <FormItem class="_bk_flex _bk_gap-5">
+      <button
+        type="button"
+        class="bk-button bk-scheme-accent bk-is-small"
+        :disabled="!canSave"
+        @click="onSave"
+      >
+        {{ $t("chartsCsvFilterSave", "Save filter") }}
+      </button>
+      <button
+        type="button"
+        class="bk-button bk-is-light bk-is-small"
+        @click="$emit('cancel')"
+      >
+        {{ $t("cancel", "Cancel") }}
+      </button>
+    </FormItem>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, useBlokkli } from "#imports";
+import {
+  FormSelect,
+  FormCheckboxes,
+  FormItem
+} from "#blokkli/editor/components";
+import { columnLabelWithSample, distinctColumnValues } from "../csvHelpers";
+const props = defineProps({
+  grid: { type: Array, required: true },
+  headerCells: { type: Array, required: true },
+  availableColumns: { type: Array, required: true },
+  initial: { type: [Object, null], required: true }
+});
+const emit = defineEmits(["save", "cancel"]);
+const { $t } = useBlokkli();
+const column = ref(props.initial?.column ?? null);
+const values = ref(props.initial ? [...props.initial.values] : []);
+const columnStr = computed({
+  get() {
+    return column.value === null ? "" : String(column.value);
+  },
+  set(v) {
+    const next = v === "" ? null : Number(v);
+    if (next !== column.value) {
+      column.value = next;
+      values.value = [];
+    }
+  }
+});
+const columnOptions = computed(() => [
+  { value: "", label: $t("pickColumn", "Pick a column\u2026") },
+  ...props.availableColumns.map((i) => ({
+    value: String(i),
+    label: columnLabelWithSample(props.grid, i)
+  }))
+]);
+const valueOptions = computed(() => {
+  if (column.value === null) return [];
+  return distinctColumnValues(props.grid, column.value).map((v) => ({
+    value: v,
+    label: v
+  }));
+});
+const canSave = computed(() => column.value !== null && values.value.length > 0);
+function onSave() {
+  if (!canSave.value || column.value === null) return;
+  emit("save", { column: column.value, values: [...values.value] });
+}
+</script>

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

@@ -0,0 +1,16 @@
+import type { CsvGrid, CsvImportFilter } from '../csvHelpers.js';
+type __VLS_Props = {
+    grid: CsvGrid;
+    headerCells: string[];
+    availableColumns: number[];
+    initial: CsvImportFilter | null;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    cancel: () => any;
+    save: (args_0: CsvImportFilter) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onCancel?: (() => any) | undefined;
+    onSave?: ((args_0: CsvImportFilter) => 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/FiltersSection/index.d.vue.ts

@@ -0,0 +1,13 @@
+import type { CsvGrid, CsvImportFilter } from '../csvHelpers.js';
+type __VLS_Props = {
+    modelValue: CsvImportFilter[];
+    grid: CsvGrid;
+    headerCells: string[];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (args_0: CsvImportFilter[]) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((args_0: CsvImportFilter[]) => 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/FiltersSection/index.vue

@@ -0,0 +1,111 @@
+<template>
+  <PanelSection :title="$t('chartsCsvFilters', 'Filters')">
+    <PanelItem
+      v-for="(f, fi) in modelValue"
+      :key="fi"
+      :title="headerCells[f.column] || `Column ${f.column + 1}`"
+      :description="summariseFilterValues(f.values)"
+      icon="bk_mdi_tune"
+      :active="editing === fi"
+      @click="toggleEdit(fi)"
+    >
+      <template #actions>
+        <ButtonAction
+          :label="$t('chartsCsvFilterRemove', 'Remove filter')"
+          icon="bk_mdi_delete"
+          theme="danger"
+          @click.stop="remove(fi)"
+        />
+      </template>
+      <TransitionCollapse>
+        <FilterEditor
+          v-if="editing === fi"
+          :key="fi"
+          :grid="grid"
+          :header-cells="headerCells"
+          :available-columns="availableColumns(fi)"
+          :initial="f"
+          @save="(entry) => save(fi, entry)"
+          @cancel="editing = null"
+        />
+      </TransitionCollapse>
+    </PanelItem>
+
+    <TransitionCollapse>
+      <div v-if="adding" class="_bk_border-t _bk_border-mono-300">
+        <FilterEditor
+          :grid="grid"
+          :header-cells="headerCells"
+          :available-columns="availableColumns(null)"
+          :initial="null"
+          @save="onAdded"
+          @cancel="adding = false"
+        />
+      </div>
+    </TransitionCollapse>
+
+    <PanelAddButton
+      v-if="!adding && availableColumns(null).length > 0"
+      :label="$t('chartsCsvAddFilter', 'Add filter')"
+      @click="startAdding"
+    />
+  </PanelSection>
+</template>
+
+<script setup>
+import { ref, useBlokkli } from "#imports";
+import ButtonAction from "#blokkli/editor/components/ButtonAction/index.vue";
+import PanelSection from "#blokkli/editor/components/Panel/Section/index.vue";
+import PanelItem from "#blokkli/editor/components/Panel/Item/index.vue";
+import PanelAddButton from "#blokkli/editor/components/Panel/AddButton/index.vue";
+import TransitionCollapse from "#blokkli/editor/components/Transition/Collapse/index.vue";
+import FilterEditor from "../FilterEditor/index.vue";
+const SUMMARY_LIMIT = 3;
+const props = defineProps({
+  modelValue: { type: Array, required: true },
+  grid: { type: Array, required: true },
+  headerCells: { type: Array, required: true }
+});
+const emit = defineEmits(["update:modelValue"]);
+const { $t } = useBlokkli();
+const editing = ref(null);
+const adding = ref(false);
+function availableColumns(currentIndex) {
+  const used = new Set(props.modelValue.map((f) => f.column));
+  if (currentIndex !== null) {
+    const current = props.modelValue[currentIndex];
+    if (current) used.delete(current.column);
+  }
+  return props.headerCells.map((_, i) => i).filter((i) => !used.has(i));
+}
+function summariseFilterValues(values) {
+  if (values.length <= SUMMARY_LIMIT) return values.join(", ");
+  const head = values.slice(0, SUMMARY_LIMIT).join(", ");
+  return `${head} (+${values.length - SUMMARY_LIMIT})`;
+}
+function toggleEdit(idx) {
+  editing.value = editing.value === idx ? null : idx;
+  if (editing.value !== null) adding.value = false;
+}
+function startAdding() {
+  adding.value = true;
+  editing.value = null;
+}
+function onAdded(entry) {
+  emit("update:modelValue", [...props.modelValue, entry]);
+  adding.value = false;
+}
+function save(idx, entry) {
+  const next = [...props.modelValue];
+  next[idx] = entry;
+  emit("update:modelValue", next);
+  editing.value = null;
+}
+function remove(idx) {
+  emit(
+    "update:modelValue",
+    props.modelValue.filter((_, i) => i !== idx)
+  );
+  if (editing.value === idx) editing.value = null;
+}
+</script>

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

@@ -0,0 +1,13 @@
+import type { CsvGrid, CsvImportFilter } from '../csvHelpers.js';
+type __VLS_Props = {
+    modelValue: CsvImportFilter[];
+    grid: CsvGrid;
+    headerCells: string[];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (args_0: CsvImportFilter[]) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((args_0: CsvImportFilter[]) => 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/GroupBySection/index.d.vue.ts

@@ -0,0 +1,14 @@
+import { type CsvGrid } from '../csvHelpers.js';
+type __VLS_Props = {
+    modelValue: number[];
+    grid: CsvGrid;
+    headerCells: string[];
+    availableColumns: number[];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (args_0: number[]) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((args_0: number[]) => 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/GroupBySection/index.vue

@@ -0,0 +1,100 @@
+<template>
+  <PanelSection
+    :title="$t('chartsCsvGroupBy', 'Group series by')"
+    :help="
+  $t(
+    'chartsCsvGroupByDescription',
+    'Each distinct combination across these columns becomes one data series.'
+  )
+"
+  >
+    <PanelItem
+      v-for="col in modelValue"
+      :key="col"
+      :title="headerCells[col] || `Column ${col + 1}`"
+      icon="bk_mdi_stack_group"
+    >
+      <template #actions>
+        <ButtonAction
+          :label="$t('chartsCsvGroupByRemove', 'Remove grouping column')"
+          icon="bk_mdi_delete"
+          theme="danger"
+          @click.stop="remove(col)"
+        />
+      </template>
+    </PanelItem>
+
+    <PanelAddButton
+      v-if="availableColumns.length > 0 && !adding"
+      :label="$t('chartsCsvGroupByAdd', 'Add a grouping column')"
+      @click="adding = true"
+    />
+
+    <div v-if="adding" class="_bk_p-15 _bk_border-t _bk_border-mono-300">
+      <FormSelect
+        id="charts-csv-groupby-add"
+        v-model="draft"
+        :label="$t('pickColumn', 'Pick a column\u2026')"
+        :options="addOptions"
+      />
+      <div class="_bk_flex _bk_gap-5 _bk_mt-10">
+        <button
+          type="button"
+          class="bk-button _bk_is-primary"
+          :disabled="!draft"
+          @click="confirmAdd"
+        >
+          {{ $t("chartsCsvGroupByAddConfirm", "Add") }}
+        </button>
+        <button type="button" class="bk-button" @click="cancelAdd">
+          {{ $t("cancel", "Cancel") }}
+        </button>
+      </div>
+    </div>
+  </PanelSection>
+</template>
+
+<script setup>
+import { ref, computed, useBlokkli } from "#imports";
+import { FormSelect } from "#blokkli/editor/components";
+import ButtonAction from "#blokkli/editor/components/ButtonAction/index.vue";
+import PanelSection from "#blokkli/editor/components/Panel/Section/index.vue";
+import PanelItem from "#blokkli/editor/components/Panel/Item/index.vue";
+import PanelAddButton from "#blokkli/editor/components/Panel/AddButton/index.vue";
+import { columnLabelWithSample } from "../csvHelpers";
+const props = defineProps({
+  modelValue: { type: Array, required: true },
+  grid: { type: Array, required: true },
+  headerCells: { type: Array, required: true },
+  availableColumns: { type: Array, required: true }
+});
+const emit = defineEmits(["update:modelValue"]);
+const { $t } = useBlokkli();
+const adding = ref(false);
+const draft = ref("");
+const addOptions = computed(() => [
+  { value: "", label: $t("pickColumn", "Pick a column\u2026") },
+  ...props.availableColumns.map((i) => ({
+    value: String(i),
+    label: columnLabelWithSample(props.grid, i)
+  }))
+]);
+function confirmAdd() {
+  const n = Number(draft.value);
+  if (!Number.isFinite(n)) return;
+  if (!props.modelValue.includes(n)) {
+    emit("update:modelValue", [...props.modelValue, n]);
+  }
+  cancelAdd();
+}
+function cancelAdd() {
+  adding.value = false;
+  draft.value = "";
+}
+function remove(col) {
+  emit(
+    "update:modelValue",
+    props.modelValue.filter((c) => c !== col)
+  );
+}
+</script>

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

@@ -0,0 +1,14 @@
+import { type CsvGrid } from '../csvHelpers.js';
+type __VLS_Props = {
+    modelValue: number[];
+    grid: CsvGrid;
+    headerCells: string[];
+    availableColumns: number[];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (args_0: number[]) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((args_0: number[]) => 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/OutputPreviewTable/index.d.vue.ts

@@ -0,0 +1,17 @@
+import type { CsvImportPayload } from '../csvHelpers.js';
+type __VLS_Props = {
+    payload: CsvImportPayload;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    move: (args_0: {
+        from: number;
+        to: number;
+    }) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onMove?: ((args_0: {
+        from: number;
+        to: number;
+    }) => 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/OutputPreviewTable/index.vue

@@ -0,0 +1,152 @@
+<template>
+  <div class="bk-csv-preview-table-wrap">
+    <table class="bk-csv-preview-table _bk_w-full _bk_text-sm _bk_border-collapse">
+      <thead>
+        <tr>
+          <th class="bk-csv-preview-category-cell">
+            {{ $t("categories", "Categories") }}
+          </th>
+          <th
+            v-for="(s, si) in visibleSeries"
+            :key="s.name"
+            draggable="true"
+            class="_bk_cursor-move _bk_select-none"
+            :class="{
+  'bk-csv-preview-drag-over': dragOverIndex === si,
+  '_bk_opacity-50': dragFromIndex === si
+}"
+            @dragstart="onDragStart(si, $event)"
+            @dragover.prevent="onDragOver(si)"
+            @dragleave="onDragLeave(si)"
+            @drop.prevent="onDrop(si)"
+            @dragend="onDragEnd"
+          >
+            <div class="_bk_flex _bk_items-center _bk_gap-5">
+              <Icon
+                name="bk_mdi_drag_pan"
+                class="_bk_size-15 _bk_text-mono-400 _bk_shrink-0"
+              />
+              <span>{{ s.name }}</span>
+            </div>
+          </th>
+          <th v-if="hiddenSeries > 0">…</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="(cat, ri) in visibleCategories" :key="ri">
+          <td class="bk-csv-preview-category-cell">{{ cat }}</td>
+          <td v-for="s in visibleSeries" :key="s.name">
+            {{ s.data[ri] ?? 0 }}
+          </td>
+          <td v-if="hiddenSeries > 0">…</td>
+        </tr>
+      </tbody>
+    </table>
+    <div v-if="hiddenRows > 0" class="bk-csv-preview-more">
+      {{
+        $t("chartsCsvMoreRows", "+ @count more rows").replace(
+  "@count",
+  String(hiddenRows)
+)
+      }}
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, useBlokkli } from "#imports";
+import { Icon } from "#blokkli/editor/components";
+const ROW_LIMIT = 20;
+const COL_LIMIT = 12;
+const props = defineProps({
+  payload: { type: Object, required: true }
+});
+const emit = defineEmits(["move"]);
+const { $t } = useBlokkli();
+const visibleSeries = computed(() => props.payload.series.slice(0, COL_LIMIT));
+const visibleCategories = computed(
+  () => props.payload.categories.slice(0, ROW_LIMIT)
+);
+const hiddenSeries = computed(
+  () => Math.max(0, props.payload.series.length - COL_LIMIT)
+);
+const hiddenRows = computed(
+  () => Math.max(0, props.payload.categories.length - ROW_LIMIT)
+);
+const dragFromIndex = ref(null);
+const dragOverIndex = ref(null);
+function onDragStart(idx, e) {
+  dragFromIndex.value = idx;
+  if (e.dataTransfer) {
+    e.dataTransfer.effectAllowed = "move";
+    e.dataTransfer.setData("text/plain", String(idx));
+  }
+}
+function onDragOver(idx) {
+  if (dragFromIndex.value === null) return;
+  dragOverIndex.value = idx;
+}
+function onDragLeave(idx) {
+  if (dragOverIndex.value === idx) dragOverIndex.value = null;
+}
+function onDrop(toIdx) {
+  const from = dragFromIndex.value;
+  dragOverIndex.value = null;
+  dragFromIndex.value = null;
+  if (from === null || from === toIdx) return;
+  emit("move", { from, to: toIdx });
+}
+function onDragEnd() {
+  dragOverIndex.value = null;
+  dragFromIndex.value = null;
+}
+</script>
+
+<style>/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
+.bk-csv-preview-table th,.bk-csv-preview-table td {
+  border-right-style: var(--bk-tw-border-style);
+  border-right-width: 1px;
+  border-bottom-style: var(--bk-tw-border-style);
+  border-bottom-width: 1px;
+  border-color: rgb(var(--bk-theme-mono-200) / 1);
+  padding: 10px;
+  text-align: left;
+  vertical-align: top;
+}
+:is(.bk-csv-preview-table th,.bk-csv-preview-table td):last-child {
+  border-right-style: var(--bk-tw-border-style);
+  border-right-width: 0;
+}
+.bk-csv-preview-table thead th {
+  border-bottom-color: rgb(var(--bk-theme-mono-300) / 1);
+  background-color: rgb(var(--bk-theme-mono-50) / 1);
+  --bk-tw-font-weight: var(--font-weight-semibold, 600);
+  font-weight: var(--font-weight-semibold, 600);
+  color: rgb(var(--bk-theme-mono-800) / 1);
+}
+.bk-csv-preview-table thead th.bk-csv-preview-drag-over {
+  background-color: rgb(var(--bk-theme-accent-100) / 1);
+  color: rgb(var(--bk-theme-accent-900) / 1);
+}
+.bk-csv-preview-table tbody tr:last-child td {
+  border-bottom-style: var(--bk-tw-border-style);
+  border-bottom-width: 0;
+}
+.bk-csv-preview-table .bk-csv-preview-category-cell {
+  background-color: rgb(var(--bk-theme-mono-50) / 1);
+  --bk-tw-font-weight: var(--font-weight-semibold, 600);
+  font-weight: var(--font-weight-semibold, 600);
+  color: rgb(var(--bk-theme-mono-800) / 1);
+}
+.bk-csv-preview-more {
+  border-top-style: var(--bk-tw-border-style);
+  border-top-width: 1px;
+  border-color: rgb(var(--bk-theme-mono-200) / 1);
+  background-color: rgb(var(--bk-theme-mono-50) / 1);
+  padding: 10px;
+  text-align: center;
+  font-size: var(--text-sm, 14px);
+  line-height: var(--bk-tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
+  color: rgb(var(--bk-theme-mono-600) / 1);
+}
+</style>

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

@@ -0,0 +1,17 @@
+import type { CsvImportPayload } from '../csvHelpers.js';
+type __VLS_Props = {
+    payload: CsvImportPayload;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    move: (args_0: {
+        from: number;
+        to: number;
+    }) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onMove?: ((args_0: {
+        from: number;
+        to: number;
+    }) => 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/PreviewDialog.d.vue.ts

@@ -0,0 +1,14 @@
+import { type CsvGrid, type CsvImportPayload } from './csvHelpers.js';
+type __VLS_Props = {
+    grid: CsvGrid;
+    fileName: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    submit: (payload: CsvImportPayload) => any;
+    cancel: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSubmit?: ((payload: CsvImportPayload) => any) | undefined;
+    onCancel?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;