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

package/dist/runtime/editor/features/translations/CsvDialog/Import/index.vue

@@ -3,36 +3,40 @@
     icon="bk_mdi_translate"
     :label="$t('translationsDropToImport', 'Drop CSV or PO file to import')"
     :accept="acceptTranslationFile"
-    class="_bk_flex _bk_flex-col _bk_h-full"
     @drop="addFiles"
   >
-    <div v-if="files.length" class="_bk_flex _bk_flex-wrap _bk_items-center _bk_gap-8 _bk_pb-20">
-      <div
-        v-for="(file, index) in files"
-        :key="index"
-        class="_bk_flex _bk_items-center _bk_gap-5 _bk_bg-mono-100 _bk_rounded-full _bk_pl-10 _bk_pr-5 _bk_py-3 _bk_text-sm _bk_text-mono-800"
-      >
-        <span>{{ file.name }}</span>
+    <PanelSection :title="$t('translationsCsvImportFileTitle', 'File')" padded>
+      <div v-if="files.length" class="_bk_flex _bk_flex-wrap _bk_items-center _bk_gap-8">
+        <div
+          v-for="(file, index) in files"
+          :key="index"
+          class="_bk_flex _bk_items-center _bk_gap-5 _bk_bg-mono-100 _bk_rounded-full _bk_pl-10 _bk_pr-5 _bk_py-3 _bk_text-sm _bk_text-mono-800"
+        >
+          <span>{{ file.name }}</span>
+          <button
+            class="_bk_rounded-full _bk_p-2 _bk_text-mono-400 _bk_hover:text-mono-900 _bk_hover:bg-mono-200"
+            @click="removeFile(file)"
+          >
+            <Icon name="bk_mdi_close" class="_bk_size-15" />
+          </button>
+        </div>
         <button
-          class="_bk_rounded-full _bk_p-2 _bk_text-mono-400 _bk_hover:text-mono-900 _bk_hover:bg-mono-200"
-          @click="removeFile(file)"
+          class="bk-button bk-scheme-mono bk-is-small"
+          @click.prevent="triggerFileDialog"
         >
-          <Icon name="bk_mdi_close" class="_bk_size-15" />
+          {{ $t("addFiles", "Add files", { more: true }) }}
         </button>
       </div>
-      <button class="bk-button bk-is-small" @click.prevent="triggerFileDialog">
-        {{ $t("translationsAddFiles", "Add files...") }}
-      </button>
-    </div>
-    <div v-else class="_bk_mx-auto _bk_py-20">
       <button
+        v-else
         type="button"
-        class="bk-button"
+        class="bk-button bk-scheme-mono"
         @click.prevent="triggerFileDialog"
       >
         {{ $t("translationsSelectImportFile", "Select CSV or PO file") }}
       </button>
-    </div>
+    </PanelSection>
+
     <template v-if="files.length">
       <div
         v-if="changes && !changes.length"
@@ -40,18 +44,25 @@
       >
         {{ $t("translationsCsvNoChanges", "No changes found") }}
       </div>
-      <template v-else-if="changes && changes.length">
+      <PanelSection
+        v-else-if="changes && changes.length"
+        :title="
+  $t(
+    'translationsCsvChangesTitle',
+    '@count/@total fields will be updated'
+  ).replace('@count', selectedCount.toString()).replace('@total', changes.length.toString())
+"
+      >
         <SelectionTable
           show-selection
           :selected-count="selectedCount"
           :total-count="changes.length"
-          :label="$t('translationsCsvChangesLabel', 'fields will be updated')"
           @toggle-all="toggleAll"
         >
           <template #header>
             <th>{{ sourceLangName }}</th>
             <th v-if="!isMultiLang">
-              {{ $t("translationsCsvDiff", "Changes") }}
+              {{ $t("changes", "Changes") }}
             </th>
             <th v-for="lang in languages" v-else :key="lang">
               {{ langName(lang) }}
@@ -105,19 +116,8 @@
             </tr>
           </template>
         </SelectionTable>
-        <div class="_bk_flex _bk_items-center _bk_gap-10 _bk_mt-auto _bk_pt-20">
-          <button
-            class="bk-button bk-is-primary"
-            :disabled="!selectedCount"
-            @click="applyImport"
-          >
-            {{
-              $t("translationsCsvApply", "Import @count translations").replace(
-  "@count",
-  selectedCount.toString()
-)
-            }}
-          </button>
+
+        <div class="_bk_mt-15">
           <FormToggle
             v-model="markUpToDate"
             class="_bk_!h-auto"
@@ -126,7 +126,21 @@
 "
           />
         </div>
-      </template>
+
+        <template #actions>
+          <PanelAction
+            icon="bk_mdi_check"
+            :disabled="!selectedCount"
+            :title="
+  $t('translationsCsvApply', 'Import @count translations').replace(
+    '@count',
+    selectedCount.toString()
+  )
+"
+            @click="applyImport"
+          />
+        </template>
+      </PanelSection>
     </template>
     <input
       ref="fileInputEl"
@@ -149,6 +163,8 @@ import {
 } from "#blokkli/editor/components";
 import { parseCsv } from "../csv";
 import { parsePo } from "../po";
+import PanelSection from "#blokkli/editor/components/Panel/Section/index.vue";
+import PanelAction from "#blokkli/editor/components/Panel/Action/index.vue";
 import SelectionTable from "../../SelectionTable/index.vue";
 const props = defineProps({
   initialFiles: { type: [Array, null], required: false }

package/dist/runtime/editor/features/translations/CsvDialog/index.vue

@@ -4,16 +4,15 @@
     :title="$t('translationsCsvDialogTitle', 'Import/Export Translations')"
     icon="bk_mdi_translate"
     :width="1800"
+    mono
     hide-buttons
     @cancel="$emit('close')"
   >
     <template #tabs>
-      <Tabs v-model="mode" :tabs />
+      <Tabs v-model="mode" :tabs mono />
     </template>
-    <div class="bk _bk_h-[calc(100vh-200px)] _bk_overflow-hidden">
-      <Export v-if="mode === 'export'" />
-      <Import v-else :initial-files="initialFiles" @close="$emit('close')" />
-    </div>
+    <Export v-if="mode === 'export'" />
+    <Import v-else :initial-files="initialFiles" @close="$emit('close')" />
   </DialogModal>
 </template>
 

package/dist/runtime/editor/features/translations/LanguageSwitcher/Dropdown/index.d.vue.ts

@@ -0,0 +1,13 @@
+import type { TranslationStateItem } from '../types.js';
+import type { Language } from '#blokkli/editor/types/state';
+type __VLS_Props = {
+    items: TranslationStateItem[];
+    activeLanguage: Language;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    select: (item: TranslationStateItem) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSelect?: ((item: TranslationStateItem) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/editor/features/translations/LanguageSwitcher/Dropdown/index.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="_bk_relative">
+    <button
+      class="bk-toolbar-button"
+      :class="{ 'bk-is-active': isOpen }"
+      @click.stop.prevent="isOpen = !isOpen"
+    >
+      <span>{{ activeLanguage.name }}</span>
+      <Icon
+        name="bk_mdi_arrow_drop_down"
+        :class="{
+  '_bk_rotate-180': isOpen
+}"
+      />
+    </button>
+
+    <div v-if="isOpen" class="_bk_absolute _bk_top-full _bk_left-0 _bk_bg-mono-900 _bk_shadow">
+      <button
+        v-for="item in items"
+        :key="item.id"
+        class="_bk_group/tooltip _bk_px-10 _bk_py-8 _bk_w-full _bk_text-left _bk_min-w-[120px]"
+        :class="{
+  '_bk_bg-white! _bk_text-mono-900 _bk_font-bold': item.id === activeLanguage.id,
+  '_bk_text-mono-100 _bk_font-medium _bk_hover:bg-mono-700': item.translation?.exists,
+  '_bk_text-mono-500 _bk_hover:bg-mono-700': !item.translation?.exists
+}"
+        @click.stop.prevent="$emit('select', item)"
+      >
+        <span>{{ item.label }}</span>
+        <Tooltip v-show="!isOpen" :label="item.label" class="_bk_w-full" />
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { Tooltip, Icon } from "#blokkli/editor/components";
+import { ref } from "#imports";
+import { onBlokkliEvent } from "#blokkli/editor/composables";
+defineProps({
+  items: { type: Array, required: true },
+  activeLanguage: { type: Object, required: true }
+});
+defineEmits(["select"]);
+const isOpen = ref(true);
+onBlokkliEvent("window:clickAway", () => {
+  isOpen.value = false;
+});
+</script>

package/dist/runtime/editor/features/translations/LanguageSwitcher/Dropdown/index.vue.d.ts

@@ -0,0 +1,13 @@
+import type { TranslationStateItem } from '../types.js';
+import type { Language } from '#blokkli/editor/types/state';
+type __VLS_Props = {
+    items: TranslationStateItem[];
+    activeLanguage: Language;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    select: (item: TranslationStateItem) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSelect?: ((item: TranslationStateItem) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/editor/features/translations/LanguageSwitcher/InlineButtons/index.d.vue.ts

@@ -0,0 +1,12 @@
+import type { TranslationStateItem } from '../types.js';
+type __VLS_Props = {
+    items: TranslationStateItem[];
+    activeLangcode: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    select: (item: TranslationStateItem) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSelect?: ((item: TranslationStateItem) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/editor/features/translations/LanguageSwitcher/InlineButtons/index.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="_bk_h-full _bk_flex _bk_px-10">
+    <button
+      v-for="item in items"
+      :key="item.id"
+      class="_bk_group/tooltip _bk_h-full _bk_flex _bk_items-center _bk_justify-center _bk_group _bk_px-3 _bk_first:pl-0 _bk_last:pr-0"
+      @click.stop.prevent="$emit('select', item)"
+    >
+      <span
+        class="_bk_text-sm _bk_rounded _bk_px-3 _bk_flex _bk_items-center _bk_justify-center _bk_min-w-25 _bk_min-h-25 _bk_border _bk_border-transparent"
+        :class="{
+  '_bk_border-mono-600!': item.id === sourceLanguage && item.id !== activeLangcode,
+  '_bk_bg-white! _bk_text-mono-900 _bk_font-bold _bk_border-white!': item.id === activeLangcode,
+  '_bk_text-mono-100 _bk_font-medium _bk_group-hover:bg-mono-700': item.translation?.exists,
+  '_bk_text-mono-500 _bk_group-hover:bg-mono-700': !item.translation?.exists
+}"
+        >{{ item.code }}</span
+      >
+      <Tooltip
+        :label="item.label"
+        :description="getTooltipDescription(item)"
+        class="_bk_min-w-full"
+      />
+    </button>
+  </div>
+</template>
+
+<script setup>
+import { Tooltip } from "#blokkli/editor/components";
+import { computed, useBlokkli } from "#imports";
+defineProps({
+  items: { type: Array, required: true },
+  activeLangcode: { type: String, required: true }
+});
+defineEmits(["select"]);
+const { $t, state } = useBlokkli();
+const sourceLanguage = computed(
+  () => state.translation.value.sourceLanguage ?? null
+);
+function getTooltipDescription(item) {
+  if (item.id === sourceLanguage.value) {
+    return $t("sourceLanguage", "Source language");
+  } else if (item.translation?.exists) {
+    return $t("translation", "Translation");
+  }
+  return $t("addTranslation", "Add translation");
+}
+</script>

package/dist/runtime/editor/features/translations/LanguageSwitcher/InlineButtons/index.vue.d.ts

@@ -0,0 +1,12 @@
+import type { TranslationStateItem } from '../types.js';
+type __VLS_Props = {
+    items: TranslationStateItem[];
+    activeLangcode: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    select: (item: TranslationStateItem) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSelect?: ((item: TranslationStateItem) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/editor/features/translations/LanguageSwitcher/index.d.vue.ts

@@ -0,0 +1,7 @@
+import type { Language } from '#blokkli/editor/types/state';
+type __VLS_Props = {
+    activeLanguage: Language;
+};
+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/runtime/editor/features/translations/LanguageSwitcher/index.vue

@@ -0,0 +1,64 @@
+<template>
+  <PluginTourItem
+    v-if="items.length > 1"
+    id="translations"
+    :title="$t('translations', 'Translations')"
+    :text="
+  $t(
+    'translationsTourText',
+    'Quickly switch between available translations. A greyed out language indicates the content is not yet translated. Clicking on it opens the form to create a new translation for this language.'
+  )
+"
+  >
+    <Dropdown v-if="isDropdown" :items :active-language @select="onClick" />
+    <InlineButtons
+      v-else
+      :items
+      :active-langcode="activeLanguage.id"
+      @select="onClick"
+    />
+  </PluginTourItem>
+</template>
+
+<script setup>
+import { computed, useBlokkli } from "#imports";
+import { PluginTourItem } from "#blokkli/editor/plugins";
+import { falsy } from "#blokkli/helpers";
+import InlineButtons from "./InlineButtons/index.vue";
+import Dropdown from "./Dropdown/index.vue";
+defineProps({
+  activeLanguage: { type: Object, required: true }
+});
+const { eventBus, state, context, $t, ui, adapter } = useBlokkli();
+const items = computed(() => {
+  return (state.translation.value.availableLanguages || []).map((language) => {
+    if (language && language.id) {
+      return {
+        id: language.id,
+        code: language.id.toUpperCase(),
+        label: language.name,
+        checked: context.value.language === language.id,
+        translation: (state.translation.value.translations || []).find(
+          (v) => v.id === language.id
+        )
+      };
+    }
+    return null;
+  }).filter(falsy);
+});
+const isDropdown = computed(() => {
+  if (ui.isMobile.value) {
+    return true;
+  }
+  const allCodes = items.value.map((v) => v.code).join("");
+  return allCodes.length > 15;
+});
+function onClick(item) {
+  if (item.translation?.exists) {
+    return adapter.changeLanguage(item.translation);
+  }
+  if (item.translation) {
+    eventBus.emit("translateEntity", item.translation);
+  }
+}
+</script>

package/dist/runtime/editor/features/translations/LanguageSwitcher/index.vue.d.ts

@@ -0,0 +1,7 @@
+import type { Language } from '#blokkli/editor/types/state';
+type __VLS_Props = {
+    activeLanguage: Language;
+};
+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/runtime/editor/features/translations/LanguageSwitcher/types.d.ts

@@ -0,0 +1,8 @@
+import type { EntityTranslation } from '#blokkli/editor/types/state';
+export type TranslationStateItem = {
+    id: string;
+    code: string;
+    label: string;
+    checked: boolean;
+    translation?: EntityTranslation;
+};

package/dist/runtime/editor/features/translations/SelectionTable/index.d.vue.ts

@@ -1,31 +1,18 @@
 type __VLS_Props = {
     selectedCount?: number;
     totalCount: number;
-    label?: string;
     showSelection?: boolean;
-    showFilters?: boolean;
 };
-type __VLS_ModelProps = {
-    'onlyOutdated'?: boolean;
-    'onlyUntranslated'?: boolean;
-};
-type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare var __VLS_1: {}, __VLS_13: {}, __VLS_15: {};
+declare var __VLS_1: {}, __VLS_3: {};
 type __VLS_Slots = {} & {
-    toolbar?: (props: typeof __VLS_1) => any;
-} & {
-    header?: (props: typeof __VLS_13) => any;
+    header?: (props: typeof __VLS_1) => any;
 } & {
-    body?: (props: typeof __VLS_15) => any;
+    body?: (props: typeof __VLS_3) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "toggle-all": () => any;
-    "update:onlyOutdated": (value: boolean | undefined) => any;
-    "update:onlyUntranslated": (value: boolean | undefined) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     "onToggle-all"?: (() => any) | undefined;
-    "onUpdate:onlyOutdated"?: ((value: boolean | undefined) => any) | undefined;
-    "onUpdate:onlyUntranslated"?: ((value: boolean | undefined) => 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;

package/dist/runtime/editor/features/translations/SelectionTable/index.vue

@@ -1,27 +1,5 @@
 <template>
-  <div class="_bk_flex _bk_items-end _bk_justify-between _bk_flex-wrap _bk_gap-10 _bk_pb-15">
-    <span v-if="showSelection" class="_bk_text-mono-900 _bk_text-lg _bk_font-bold">
-      {{ selectedCount }}/{{ totalCount }}
-      {{ label }}
-    </span>
-    <slot name="toolbar" />
-    <div v-if="showFilters">
-      <div class="bk-form-label">Filter</div>
-      <div class="_bk_flex _bk_items-center _bk_gap-20">
-        <FormToggle
-          v-model="onlyOutdated"
-          :label="
-  $t('translationsCsvOnlyOutdated', 'Only outdated translations')
-"
-        />
-        <FormToggle
-          v-model="onlyUntranslated"
-          :label="$t('translationsCsvOnlyMissing', 'Only missing translations')"
-        />
-      </div>
-    </div>
-  </div>
-  <div class="_bk_border _bk_border-mono-300 _bk_rounded _bk_overflow-auto _bk_flex-1">
+  <div>
     <table class="bk-csv-table _bk_w-full _bk_text-sm _bk_select-text">
       <thead>
         <tr>
@@ -46,57 +24,43 @@
 </template>
 
 <script setup>
-import { useBlokkli } from "#imports";
-import { FormToggle } from "#blokkli/editor/components";
 defineProps({
   selectedCount: { type: Number, required: false },
   totalCount: { type: Number, required: true },
-  label: { type: String, required: false },
-  showSelection: { type: Boolean, required: false },
-  showFilters: { type: Boolean, required: false }
+  showSelection: { type: Boolean, required: false }
 });
-const onlyOutdated = defineModel("onlyOutdated", { type: Boolean });
-const onlyUntranslated = defineModel("onlyUntranslated", { type: Boolean });
 defineEmits(["toggle-all"]);
-const { $t } = useBlokkli();
 </script>
 
-<style>
+<style>/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
 .bk .bk-csv-table {
   border-collapse: collapse;
 }
-
-  .bk .bk-csv-table th {
+:is(.bk .bk-csv-table) th {
   position: sticky;
   top: 0px;
   z-index: 50;
-  --bk-tw-bg-opacity: 1;
-  background-color: rgb(var(--bk-theme-mono-100) / var(--bk-tw-bg-opacity, 1));
+  background-color: rgb(var(--bk-theme-mono-200) / 1);
   padding: 8px;
   text-align: left;
-  font-weight: 600;
-  --bk-tw-text-opacity: 1;
-  color: rgb(var(--bk-theme-mono-700) / var(--bk-tw-text-opacity, 1));
+  --bk-tw-font-weight: var(--font-weight-semibold, 600);
+  font-weight: var(--font-weight-semibold, 600);
+  color: rgb(var(--bk-theme-mono-700) / 1);
 }
-
-  .bk .bk-csv-table td {
+:is(.bk .bk-csv-table) td {
+  border-top-style: var(--bk-tw-border-style);
   border-top-width: 1px;
-  --bk-tw-border-opacity: 1;
-  border-top-color: rgb(var(--bk-theme-mono-200) / var(--bk-tw-border-opacity, 1));
+  border-top-color: rgb(var(--bk-theme-mono-200) / 1);
   padding: 8px;
-    max-width: 400px;
-    overflow: hidden;
-    text-overflow: ellipsis;
+  max-width: 400px;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
-
-  .bk .bk-csv-table tr:hover td {
-  --bk-tw-bg-opacity: 1;
-  background-color: rgb(var(--bk-theme-mono-50) / var(--bk-tw-bg-opacity, 1));
+:is(.bk .bk-csv-table) tr:hover td {
+  background-color: rgb(var(--bk-theme-mono-50) / 1);
 }
-
-  .bk .bk-csv-table .bk-is-empty {
+:is(.bk .bk-csv-table) .bk-is-empty {
+  color: rgb(var(--bk-theme-mono-400) / 1);
   font-style: italic;
-  --bk-tw-text-opacity: 1;
-  color: rgb(var(--bk-theme-mono-400) / var(--bk-tw-text-opacity, 1));
 }
 </style>

package/dist/runtime/editor/features/translations/SelectionTable/index.vue.d.ts

@@ -1,31 +1,18 @@
 type __VLS_Props = {
     selectedCount?: number;
     totalCount: number;
-    label?: string;
     showSelection?: boolean;
-    showFilters?: boolean;
 };
-type __VLS_ModelProps = {
-    'onlyOutdated'?: boolean;
-    'onlyUntranslated'?: boolean;
-};
-type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare var __VLS_1: {}, __VLS_13: {}, __VLS_15: {};
+declare var __VLS_1: {}, __VLS_3: {};
 type __VLS_Slots = {} & {
-    toolbar?: (props: typeof __VLS_1) => any;
-} & {
-    header?: (props: typeof __VLS_13) => any;
+    header?: (props: typeof __VLS_1) => any;
 } & {
-    body?: (props: typeof __VLS_15) => any;
+    body?: (props: typeof __VLS_3) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "toggle-all": () => any;
-    "update:onlyOutdated": (value: boolean | undefined) => any;
-    "update:onlyUntranslated": (value: boolean | undefined) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     "onToggle-all"?: (() => any) | undefined;
-    "onUpdate:onlyOutdated"?: ((value: boolean | undefined) => any) | undefined;
-    "onUpdate:onlyUntranslated"?: ((value: boolean | undefined) => 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;