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

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

@@ -1,25 +1,24 @@
 <template>
   <table
-    class="bk-chart-data-table"
+    class="bk-chart-data-table _bk_border-collapse _bk_w-full"
     @keydown="onTableKeydown"
     @input="onTableInput"
     @click="onTableClick"
   >
-    <thead v-if="hasMultipleSeries">
+    <thead>
       <tr>
         <th />
-        <th v-for="(s, si) in visibleSeries" :key="si">
+        <th v-for="(s, si) in series" :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"
+              class="bk-chart-data-table-series-name bk-chart-data-table-input"
               @change="
   updateSeriesName(si, $event.target.value)
 "
@@ -27,14 +26,26 @@
             <button
               v-if="series.length > 1"
               type="button"
-              class="bk-chart-data-table-remove"
+              class="bk-chart-data-table-remove bk-chart-data-table-input"
               @click="props.removeSeries(si)"
             >
               <Icon name="bk_mdi_delete" />
             </button>
           </div>
         </th>
-        <th v-if="canDeleteRows" />
+        <th v-if="canDeleteRows" class="_bk_size-40 _bk_group/tooltip _bk_relative">
+          <button
+            type="button"
+            class="bk-chart-data-table-input _bk_size-full _bk_flex _bk_items-center _bk_justify-center _bk_hover:text-accent-600 _bk_hover:bg-mono-100"
+            @click="$emit('addColumn')"
+          >
+            <Icon name="bk_mdi_add_column_right" class="_bk_size-18" />
+          </button>
+          <Tooltip
+            :label="$t('chartsAddColumn', 'Add column')"
+            placement="bottom-before"
+          />
+        </th>
       </tr>
     </thead>
     <tbody>
@@ -44,11 +55,14 @@
             <ColorDropdown
               v-if="hasCategoryColors"
               :color-id="categoryColors[ci] || ''"
-              :colors="colors"
               @select="updateCategoryColor(ci, $event)"
             />
             <input
               type="text"
+              class="bk-chart-data-table-input _bk_font-semibold"
+              :class="{
+  '_bk_pl-0': hasCategoryColors
+}"
               :value="cat"
               @change="
   updateCategory(ci, $event.target.value)
@@ -56,10 +70,11 @@
             />
           </div>
         </td>
-        <td v-for="(s, si) in visibleSeries" :key="si">
+        <td v-for="(s, si) in series" :key="si">
           <input
             type="text"
             inputmode="decimal"
+            class="bk-chart-data-table-input"
             :value="s.data[ci]"
             @blur="
   updateValue(si, ci, $event.target.value)
@@ -69,7 +84,7 @@
         <td v-if="canDeleteRows">
           <button
             type="button"
-            class="bk-chart-data-table-remove"
+            class="bk-chart-data-table-remove bk-chart-data-table-input"
             @click="props.removeRow(ci)"
           >
             <Icon name="bk_mdi_delete" />
@@ -81,25 +96,21 @@
 </template>
 
 <script setup>
-import { computed, ref } from "#imports";
+import { computed, ref, useBlokkli } from "#imports";
 import { parseNumericInput } from "../../../../helpers";
-import { Icon } from "#blokkli/editor/components";
+import { Icon, Tooltip } 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 emit = defineEmits(["update:categories", "update:series", "update:categoryColors", "addColumn"]);
+const { $t } = useBlokkli();
 const canDeleteRows = computed(() => props.categories.length > 1);
 function updateCategory(index, value) {
   if (props.categories[index] === value) return;

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

@@ -1,12 +1,10 @@
-import type { ChartSeries, ChartColor } from '../../../../types.js';
+import type { ChartSeries } 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;
 };
@@ -14,10 +12,12 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     "update:categories": (value: string[]) => any;
     "update:series": (value: ChartSeries[]) => any;
     "update:categoryColors": (value: string[]) => any;
+    addColumn: () => 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;
+    onAddColumn?: (() => 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/DateFormatEditor/index.d.vue.ts

@@ -0,0 +1,13 @@
+import type { ChartDateFormat } from '../../../../types.js';
+type __VLS_Props = {
+    format: ChartDateFormat;
+    categories: string[];
+    locale?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:format": (value: ChartDateFormat) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:format"?: ((value: ChartDateFormat) => 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/DateFormatEditor/index.vue

@@ -0,0 +1,71 @@
+<template>
+  <FormItem>
+    <FormSelect
+      id="chart-date-style"
+      :label="$t('chartsDateFormat', 'Date format')"
+      :options="styleOptions"
+      :model-value="format.style ?? 'auto'"
+      @update:model-value="
+  update(
+    'style',
+    $event === 'auto' ? void 0 : $event
+  )
+"
+    />
+  </FormItem>
+</template>
+
+<script setup>
+import { computed, useBlokkli } from "#imports";
+import {
+  detectDateFormat,
+  formatDateCategory
+} from "../../../../helpers/dateFormat";
+import { FormSelect, FormItem } from "#blokkli/editor/components";
+const { $t } = useBlokkli();
+const props = defineProps({
+  format: { type: Object, required: true },
+  categories: { type: Array, required: true },
+  locale: { type: String, required: false }
+});
+const emit = defineEmits(["update:format"]);
+function update(key, value) {
+  const next = { ...props.format };
+  if (value === void 0) {
+    next[key] = void 0;
+  } else {
+    next[key] = value;
+  }
+  emit("update:format", next);
+}
+const detected = computed(() => detectDateFormat(props.categories));
+const sample = computed(
+  () => props.categories.find((c) => c.trim().length > 0) ?? ""
+);
+function toOption(style, label) {
+  if (!detected.value || !sample.value)
+    return { value: style, label: label || style };
+  const ex = formatDateCategory(
+    sample.value,
+    detected.value,
+    { style },
+    props.locale
+  );
+  if (!label) {
+    return { value: style, label: ex };
+  }
+  return { value: style, label: ex ? `${label} [${ex}]` : label };
+}
+const styleOptions = computed(() => [
+  toOption("none", $t("chartsDateFormatStyleNone", "No formatting")),
+  toOption("auto", $t("auto", "Auto")),
+  toOption("monthYearShort"),
+  toOption("monthYearLong"),
+  toOption("monthOnly"),
+  toOption("monthYearNumeric"),
+  toOption("iso"),
+  toOption("dateShort"),
+  toOption("dateLong"),
+  toOption("yearOnly")
+]);
+</script>

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

@@ -0,0 +1,13 @@
+import type { ChartDateFormat } from '../../../../types.js';
+type __VLS_Props = {
+    format: ChartDateFormat;
+    categories: string[];
+    locale?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:format": (value: ChartDateFormat) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:format"?: ((value: ChartDateFormat) => 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/DynamicPreviewStatus/index.d.vue.ts

@@ -0,0 +1,16 @@
+import type { AsyncDataRequestStatus } from '#app';
+type __VLS_Props = {
+    status: AsyncDataRequestStatus;
+    error: Error | null;
+    /**
+     * True when the currently-referenced source is no longer in the live
+     * list returned by the adapter. The cached `label` is shown so the user
+     * knows which source went missing.
+     */
+    missing: boolean;
+    missingLabel: string;
+    empty: 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/DynamicPreviewStatus/index.vue

@@ -0,0 +1,57 @@
+<template>
+  <div v-if="visible" class="_bk_p-panel-gap">
+    <InfoBox
+      v-if="status === 'pending'"
+      small
+      icon="spinner"
+      color="teal"
+      :text="$t('chartsDynamicPreviewLoading', 'Loading data from the source\u2026')"
+    />
+    <InfoBox
+      v-else-if="status === 'error'"
+      small
+      color="red"
+      :text="errorText"
+    />
+    <InfoBox v-else-if="missing" small color="yellow" :text="missingText" />
+    <InfoBox
+      v-else-if="status === 'success' && empty"
+      small
+      color="yellow"
+      :text="
+  $t(
+    'chartsDynamicPreviewEmpty',
+    'The data source returned no rows or series.'
+  )
+"
+    />
+  </div>
+</template>
+
+<script setup>
+import { computed, useBlokkli } from "#imports";
+import { InfoBox } from "#blokkli/editor/components";
+const props = defineProps({
+  status: { type: String, required: true },
+  error: { type: [Error, null], required: true },
+  missing: { type: Boolean, required: true },
+  missingLabel: { type: String, required: true },
+  empty: { type: Boolean, required: true }
+});
+const { $t } = useBlokkli();
+const visible = computed(() => {
+  if (props.status === "pending" || props.status === "error") return true;
+  if (props.missing) return true;
+  if (props.status === "success" && props.empty) return true;
+  return false;
+});
+const errorText = computed(() => {
+  return $t("chartsDynamicPreviewError", "Failed to load data:") + " " + (props.error?.message ?? "");
+});
+const missingText = computed(
+  () => $t(
+    "chartsDynamicPreviewMissing",
+    "Source no longer available (was: @label)."
+  ).replace("@label", props.missingLabel || "\u2014")
+);
+</script>

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

@@ -0,0 +1,16 @@
+import type { AsyncDataRequestStatus } from '#app';
+type __VLS_Props = {
+    status: AsyncDataRequestStatus;
+    error: Error | null;
+    /**
+     * True when the currently-referenced source is no longer in the live
+     * list returned by the adapter. The cached `label` is shown so the user
+     * knows which source went missing.
+     */
+    missing: boolean;
+    missingLabel: string;
+    empty: 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/FootnoteEditor/index.d.vue.ts

@@ -1,10 +1,9 @@
 type __VLS_Props = {
     footnotes: string[];
+    addFootnote: () => void;
+    removeFootnote: (index: number) => void;
+    updateFootnote: (index: number, value: string) => void;
 };
-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 __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/FootnoteEditor/index.vue

@@ -1,61 +1,73 @@
 <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"
+  <PanelSection
+    :title="$t('footnotes', 'Footnotes')"
+    :help="
+  $t(
+    'chartsFootnotesHelp',
+    'Footnotes are numbered automatically. Reference them in category or series labels using {1}, {2}, etc.'
+  )
+"
+  >
+    <table
+      v-if="footnotes.length"
+      class="bk-chart-data-table _bk_border-collapse _bk_w-full"
     >
-      <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>
+      <tbody>
+        <tr v-for="(note, i) in footnotes" :key="i">
+          <td class="_bk_size-40">
+            <button
+              type="button"
+              class="_bk_size-full _bk_flex _bk_items-center _bk_justify-center _bk_text-sm _bk_font-medium _bk_bg-mono-100 _bk_hover:bg-mono-200"
+              @click.prevent="copyFootnoteToClipboard(i)"
+            >
+              <span>{</span>
+              <span>{{ i + 1 }}</span>
+              <span>}</span>
+            </button>
+          </td>
+          <td>
+            <input
+              type="text"
+              :value="note"
+              class="bk-chart-data-table-input"
+              @change="
+  updateFootnote(i, $event.target.value)
+"
+            />
+          </td>
+          <td class="_bk_w-0">
+            <button
+              type="button"
+              class="bk-chart-data-table-remove bk-chart-data-table-input"
+              @click="removeFootnote(i)"
+            >
+              <Icon name="bk_mdi_delete" />
+            </button>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+
+    <PanelAddButton
+      :label="$t('chartsAddFootnote', 'Add footnote')"
+      @click="addFootnote"
+    />
+  </PanelSection>
 </template>
 
 <script setup>
 import { useBlokkli } from "#imports";
-import { SUPERSCRIPTS } from "../../../../helpers";
 import { Icon } from "#blokkli/editor/components";
-const { $t } = useBlokkli();
-const props = defineProps({
-  footnotes: { type: Array, required: true }
+import PanelSection from "#blokkli/editor/components/Panel/Section/index.vue";
+import PanelAddButton from "#blokkli/editor/components/Panel/AddButton/index.vue";
+const { $t, ui } = useBlokkli();
+defineProps({
+  footnotes: { type: Array, required: true },
+  addFootnote: { type: Function, required: true },
+  removeFootnote: { type: Function, required: true },
+  updateFootnote: { type: Function, 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)
-  );
+function copyFootnoteToClipboard(index) {
+  ui.copyTextToClipboard(`{${index + 1}}`);
 }
 </script>

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

@@ -1,10 +1,9 @@
 type __VLS_Props = {
     footnotes: string[];
+    addFootnote: () => void;
+    removeFootnote: (index: number) => void;
+    updateFootnote: (index: number, value: string) => void;
 };
-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 __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/NumberFormatEditor/index.d.vue.ts

@@ -0,0 +1,21 @@
+import type { ChartNumberFormat } from '../../../../types.js';
+type __VLS_Props = {
+    format: ChartNumberFormat;
+};
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:format": (value: ChartNumberFormat) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:format"?: ((value: ChartNumberFormat) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,120 @@
+<template>
+  <PanelSection :title="$t('chartsNumberFormat', 'Number format')">
+    <div class="_bk_p-panel-gap _bk_grid _bk_gap-15">
+      <slot />
+      <FormSelect
+        id="chart-number-locale"
+        :label="$t('chartsNumberFormatLocale', 'Locale')"
+        :options="localeOptions"
+        :model-value="format.locale ?? ''"
+        @update:model-value="update('locale', $event ? $event : void 0)"
+      />
+
+      <FormSelect
+        id="chart-number-decimals"
+        :label="$t('chartsNumberFormatDecimals', 'Decimals')"
+        :options="decimalsOptions"
+        :model-value="
+  format.decimals === void 0 ? '' : String(format.decimals)
+"
+        @update:model-value="
+  update('decimals', $event === '' ? void 0 : Number($event))
+"
+      />
+
+      <FormRadio
+        id="chart-number-notation"
+        :label="$t('chartsNumberFormatNotation', 'Notation')"
+        inline
+        :options="notationOptions"
+        :model-value="format.notation ?? 'standard'"
+        @update:model-value="
+  update('notation', $event === 'compact' ? 'compact' : void 0)
+"
+      />
+
+      <div class="_bk_grid _bk_grid-cols-2 _bk_gap-15">
+        <FormText
+          id="chart-number-prefix"
+          :label="$t('prefix', 'Prefix')"
+          :placeholder="prefixPlaceholder"
+          :model-value="format.prefix ?? ''"
+          lazy
+          @update:model-value="update('prefix', $event ? $event : void 0)"
+        />
+        <FormText
+          id="chart-number-suffix"
+          :label="$t('suffix', 'Suffix')"
+          :placeholder="suffixPlaceholder"
+          :model-value="format.suffix ?? ''"
+          lazy
+          @update:model-value="update('suffix', $event ? $event : void 0)"
+        />
+      </div>
+
+      <div
+        class="_bk_bg-mono-100 _bk_border _bk_border-mono-300 _bk_p-10 _bk_text-sm _bk_font-mono _bk_text-mono-700 _bk_flex _bk_items-center _bk_justify-between _bk_gap-10"
+      >
+        <span class="bk-form-label _bk_mb-0!">
+          {{ $t("preview", "Preview") }}
+        </span>
+        <span>{{ preview }}</span>
+      </div>
+    </div>
+  </PanelSection>
+</template>
+
+<script setup>
+import { computed, useBlokkli } from "#imports";
+import { createNumberFormatter } from "../../../../helpers/numberFormat";
+import { FormSelect, FormText, FormRadio } from "#blokkli/editor/components";
+import PanelSection from "#blokkli/editor/components/Panel/Section/index.vue";
+const { $t } = useBlokkli();
+const props = defineProps({
+  format: { type: Object, required: true }
+});
+const emit = defineEmits(["update:format"]);
+function update(key, value) {
+  const next = { ...props.format };
+  if (value === void 0 || value === "") {
+    next[key] = void 0;
+  } else {
+    next[key] = value;
+  }
+  emit("update:format", next);
+}
+const localeOptions = computed(() => [
+  { value: "", label: $t("chartsNumberFormatLocaleAuto", "Auto (browser)") },
+  { value: "de-CH", label: "Deutsch (Schweiz) \u2014 1\u2019234.50" },
+  { value: "fr-CH", label: "Fran\xE7ais (Suisse) \u2014 1 234,50" },
+  { value: "it-CH", label: "Italiano (Svizzera) \u2014 1\u2019234,50" },
+  { value: "de-DE", label: "Deutsch (Deutschland) \u2014 1.234,50" },
+  { value: "en-US", label: "English (US) \u2014 1,234.50" },
+  { value: "en-GB", label: "English (UK) \u2014 1,234.50" },
+  { value: "fr-FR", label: "Fran\xE7ais (France) \u2014 1 234,50" }
+]);
+const decimalsOptions = computed(() => [
+  { value: "", label: $t("auto", "Auto") },
+  { value: "0", label: "0" },
+  { value: "1", label: "1" },
+  { value: "2", label: "2" },
+  { value: "3", label: "3" },
+  { value: "4", label: "4" }
+]);
+const notationOptions = computed(() => [
+  {
+    value: "standard",
+    label: $t("chartsNumberFormatNotationStandard", "Standard")
+  },
+  {
+    value: "compact",
+    label: $t("chartsNumberFormatNotationCompact", "Compact (1.2M)")
+  }
+]);
+const prefixPlaceholder = "CHF ";
+const suffixPlaceholder = " kg";
+const preview = computed(() => {
+  const fmt = createNumberFormatter(props.format);
+  return fmt(12345.6789);
+});
+</script>