@brftech/filex-core 0.1.56 → 0.1.61

package/src/locales/tr.ts

@@ -1,122 +1,122 @@
-/** Turkish UI strings. */
-export const tr: Record<string, string> = {
-  'toolbar.new_folder': 'Yeni Klasör',
-  'toolbar.upload': 'Yükle',
-  'toolbar.search': 'Ara',
-  'toolbar.search.placeholder': 'Dosya adı…',
-  'toolbar.view.list': 'Liste',
-  'toolbar.view.grid': 'Izgara',
-  'toolbar.refresh': 'Yenile',
-  'toolbar.go_up': 'Üst Klasör',
-
-  'ctx.open': 'Aç',
-  'ctx.preview': 'Önizle',
-  'ctx.download': 'İndir',
-  'ctx.convert': 'Dönüştür',
-  'ctx.rename': 'Yeniden Adlandır',
-  'ctx.delete': 'Sil',
-  'ctx.delete_perm': 'Kalıcı Olarak Sil',
-  'ctx.restore': 'Geri Getir',
-  'ctx.share': 'Paylaş',
-  'ctx.move': 'Taşı',
-  'ctx.copy': 'Kopyala',
-  'ctx.cut': 'Kes',
-  'ctx.paste': 'Yapıştır',
-  'ctx.info': 'Bilgi',
-  'ctx.duplicate': 'Kopyasını Oluştur',
-  'ctx.new_file': 'Yeni Dosya',
-
-  'modal.delete.title': 'Silinsin mi?',
-  'modal.delete.message': '{count} öğe çöpe atılacak.',
-  'modal.delete.confirm': 'Çöpe At',
-  'modal.delete.cancel': 'Vazgeç',
-
-  'modal.rename.title': 'Yeniden Adlandır',
-  'modal.rename.save': 'Kaydet',
-  'modal.rename.cancel': 'Vazgeç',
-
-  'modal.newfolder.title': 'Yeni Klasör',
-  'modal.newfolder.placeholder': 'Klasör adı',
-  'modal.newfolder.create': 'Oluştur',
-  'modal.newfolder.cancel': 'Vazgeç',
-
-  'modal.share.title': 'Paylaşım Linki',
-  'modal.share.pin': 'PIN koruması',
-  'modal.share.expires': 'Son kullanma',
-  'modal.share.max_downloads': 'İndirme limiti',
-  'modal.share.create': 'Paylaş',
-  'modal.share.cancel': 'Vazgeç',
-  'modal.share.copy': 'Kopyala',
-  'modal.share.url_copied': 'Link kopyalandı',
-  'modal.share.pin_copied': 'PIN kopyalandı',
-  'modal.share.cli_copied': 'CLI komutu kopyalandı',
-
-  'upload.progress': 'Yükleniyor',
-  'upload.done': 'Tamamlandı',
-  'upload.error': 'Hata',
-  'upload.aborted': 'İptal edildi',
-  'upload.cancel': 'İptal',
-
-  'empty.folder': 'Bu klasör boş',
-  'empty.search': 'Sonuç bulunamadı',
-  'loading': 'Yükleniyor…',
-
-  'col.name': 'Ad',
-  'col.size': 'Boyut',
-  'col.modified': 'Tarih',
-  'col.type': 'Tür',
-
-  'unit.bytes': 'B',
-  'unit.kb': 'KB',
-  'unit.mb': 'MB',
-  'unit.gb': 'GB',
-  'unit.tb': 'TB',
-
-  'breadcrumb.root': 'Kök',
-  'breadcrumb.copy_path': 'Yolu Kopyala',
-  'breadcrumb.go_to_path': 'Yola Git',
-  'breadcrumb.path_placeholder': 'fileman/foo/bar',
-
-  'ops.copy': 'Kopyalanıyor',
-  'ops.move': 'Taşınıyor',
-  'ops.delete': 'Siliniyor',
-  'ops.queued': 'sırada',
-  'ops.done': 'tamamlandı',
-  'ops.error': 'hata',
-
-  'node.trash': 'Çöp Kutusu',
-
-  // ——— Zengin önizleyici chrome ———
-  'viewer.open_in_new_tab': 'Yeni Sekmede Aç',
-  'viewer.loading': 'Yükleniyor…',
-  'viewer.failed_to_load': 'Dosya yüklenemedi',
-  'viewer.peer_not_installed': 'Bu dosya tipi için opsiyonel kütüphane kurulu değil. Peer dependency yükle veya İndir düğmesini kullan.',
-  'viewer.format_unsupported_3d': 'Bu 3B format tarayıcı önizlemesinde desteklenmiyor (model-viewer yalnızca .glb / .gltf / .usdz okur). Lütfen indirip yerel bir araçta açın.',
-  'viewer.zoom_in': 'Yakınlaştır',
-  'viewer.zoom_out': 'Uzaklaştır',
-  'viewer.fit_width': 'Sayfa genişliğine sığdır',
-  'viewer.next_page': 'Sonraki sayfa',
-  'viewer.prev_page': 'Önceki sayfa',
-  'viewer.page_n_of_m': 'Sayfa {n} / {m}',
-  'viewer.tags': 'Etiketler',
-  'viewer.layers': 'Katmanlar',
-  'viewer.toc': 'İçindekiler',
-  'viewer.font_smaller': 'Yazıyı küçült',
-  'viewer.font_larger': 'Yazıyı büyüt',
-  'viewer.search': 'Ara',
-  'viewer.download': 'İndir',
-  'viewer.save_annotations': 'Açıklamaları kaydet',
-  'viewer.annotations_on': 'Açıklamalar: açık',
-  'viewer.annotations_off': 'Açıklamalar: kapalı',
-  'viewer.read_only': 'Salt okunur',
-  'viewer.csv_first_row_header': 'İlk satır başlık olsun',
-  'viewer.csv_filter': 'Satır filtrele…',
-  'viewer.epub_prev': 'Önceki',
-  'viewer.epub_next': 'Sonraki',
-  'viewer.drawio.disabled': 'diagrams.net editörü bu filex kurulumunda yapılandırılmamış — yönetici FILEX_DRAWIO_URL\'yi ayarlamalı.',
-  'viewer.archive.entries': '{n} dosya',
-  'viewer.archive.empty': 'Arşiv boş.',
-  'viewer.archive.error': 'Arşiv okunamadı.',
-  'viewer.name': 'Ad',
-  'viewer.size': 'Boyut',
-};
+/** Turkish UI strings. */
+export const tr: Record<string, string> = {
+  'toolbar.new_folder': 'Yeni Klasör',
+  'toolbar.upload': 'Yükle',
+  'toolbar.search': 'Ara',
+  'toolbar.search.placeholder': 'Dosya adı…',
+  'toolbar.view.list': 'Liste',
+  'toolbar.view.grid': 'Izgara',
+  'toolbar.refresh': 'Yenile',
+  'toolbar.go_up': 'Üst Klasör',
+
+  'ctx.open': 'Aç',
+  'ctx.preview': 'Önizle',
+  'ctx.download': 'İndir',
+  'ctx.convert': 'Dönüştür',
+  'ctx.rename': 'Yeniden Adlandır',
+  'ctx.delete': 'Sil',
+  'ctx.delete_perm': 'Kalıcı Olarak Sil',
+  'ctx.restore': 'Geri Getir',
+  'ctx.share': 'Paylaş',
+  'ctx.move': 'Taşı',
+  'ctx.copy': 'Kopyala',
+  'ctx.cut': 'Kes',
+  'ctx.paste': 'Yapıştır',
+  'ctx.info': 'Bilgi',
+  'ctx.duplicate': 'Kopyasını Oluştur',
+  'ctx.new_file': 'Yeni Dosya',
+
+  'modal.delete.title': 'Silinsin mi?',
+  'modal.delete.message': '{count} öğe çöpe atılacak.',
+  'modal.delete.confirm': 'Çöpe At',
+  'modal.delete.cancel': 'Vazgeç',
+
+  'modal.rename.title': 'Yeniden Adlandır',
+  'modal.rename.save': 'Kaydet',
+  'modal.rename.cancel': 'Vazgeç',
+
+  'modal.newfolder.title': 'Yeni Klasör',
+  'modal.newfolder.placeholder': 'Klasör adı',
+  'modal.newfolder.create': 'Oluştur',
+  'modal.newfolder.cancel': 'Vazgeç',
+
+  'modal.share.title': 'Paylaşım Linki',
+  'modal.share.pin': 'PIN koruması',
+  'modal.share.expires': 'Son kullanma',
+  'modal.share.max_downloads': 'İndirme limiti',
+  'modal.share.create': 'Paylaş',
+  'modal.share.cancel': 'Vazgeç',
+  'modal.share.copy': 'Kopyala',
+  'modal.share.url_copied': 'Link kopyalandı',
+  'modal.share.pin_copied': 'PIN kopyalandı',
+  'modal.share.cli_copied': 'CLI komutu kopyalandı',
+
+  'upload.progress': 'Yükleniyor',
+  'upload.done': 'Tamamlandı',
+  'upload.error': 'Hata',
+  'upload.aborted': 'İptal edildi',
+  'upload.cancel': 'İptal',
+
+  'empty.folder': 'Bu klasör boş',
+  'empty.search': 'Sonuç bulunamadı',
+  'loading': 'Yükleniyor…',
+
+  'col.name': 'Ad',
+  'col.size': 'Boyut',
+  'col.modified': 'Tarih',
+  'col.type': 'Tür',
+
+  'unit.bytes': 'B',
+  'unit.kb': 'KB',
+  'unit.mb': 'MB',
+  'unit.gb': 'GB',
+  'unit.tb': 'TB',
+
+  'breadcrumb.root': 'Kök',
+  'breadcrumb.copy_path': 'Yolu Kopyala',
+  'breadcrumb.go_to_path': 'Yola Git',
+  'breadcrumb.path_placeholder': 'fileman/foo/bar',
+
+  'ops.copy': 'Kopyalanıyor',
+  'ops.move': 'Taşınıyor',
+  'ops.delete': 'Siliniyor',
+  'ops.queued': 'sırada',
+  'ops.done': 'tamamlandı',
+  'ops.error': 'hata',
+
+  'node.trash': 'Çöp Kutusu',
+
+  // ——— Zengin önizleyici chrome ———
+  'viewer.open_in_new_tab': 'Yeni Sekmede Aç',
+  'viewer.loading': 'Yükleniyor…',
+  'viewer.failed_to_load': 'Dosya yüklenemedi',
+  'viewer.peer_not_installed': 'Bu dosya tipi için opsiyonel kütüphane kurulu değil. Peer dependency yükle veya İndir düğmesini kullan.',
+  'viewer.format_unsupported_3d': 'Bu 3B format tarayıcı önizlemesinde desteklenmiyor (model-viewer yalnızca .glb / .gltf / .usdz okur). Lütfen indirip yerel bir araçta açın.',
+  'viewer.zoom_in': 'Yakınlaştır',
+  'viewer.zoom_out': 'Uzaklaştır',
+  'viewer.fit_width': 'Sayfa genişliğine sığdır',
+  'viewer.next_page': 'Sonraki sayfa',
+  'viewer.prev_page': 'Önceki sayfa',
+  'viewer.page_n_of_m': 'Sayfa {n} / {m}',
+  'viewer.tags': 'Etiketler',
+  'viewer.layers': 'Katmanlar',
+  'viewer.toc': 'İçindekiler',
+  'viewer.font_smaller': 'Yazıyı küçült',
+  'viewer.font_larger': 'Yazıyı büyüt',
+  'viewer.search': 'Ara',
+  'viewer.download': 'İndir',
+  'viewer.save_annotations': 'Açıklamaları kaydet',
+  'viewer.annotations_on': 'Açıklamalar: açık',
+  'viewer.annotations_off': 'Açıklamalar: kapalı',
+  'viewer.read_only': 'Salt okunur',
+  'viewer.csv_first_row_header': 'İlk satır başlık olsun',
+  'viewer.csv_filter': 'Satır filtrele…',
+  'viewer.epub_prev': 'Önceki',
+  'viewer.epub_next': 'Sonraki',
+  'viewer.drawio.disabled': 'diagrams.net editörü bu filex kurulumunda yapılandırılmamış — yönetici FILEX_DRAWIO_URL\'yi ayarlamalı.',
+  'viewer.archive.entries': '{n} dosya',
+  'viewer.archive.empty': 'Arşiv boş.',
+  'viewer.archive.error': 'Arşiv okunamadı.',
+  'viewer.name': 'Ad',
+  'viewer.size': 'Boyut',
+};

package/src/modals/DeleteConfirmModal.vue

@@ -1,32 +1,32 @@
-<script setup lang="ts">
-import type { LocaleCode } from '../types/ExplorerConfig';
-import { useLocale } from '../composables/useLocale';
-import Modal from './Modal.vue';
-
-const props = defineProps<{
-  open: boolean;
-  locale: LocaleCode;
-  count: number;
-}>();
-
-const emit = defineEmits<{
-  (e: 'close'): void;
-  (e: 'confirm'): void;
-}>();
-
-const { t } = useLocale(() => props.locale);
-</script>
-
-<template>
-  <Modal :open="open" :title="t('modal.delete.title')" size="sm" @close="emit('close')">
-    <p>{{ t('modal.delete.message', { count }) }}</p>
-    <template #actions>
-      <button type="button" class="fe-btn" @click="emit('close')">
-        {{ t('modal.delete.cancel') }}
-      </button>
-      <button type="button" class="fe-btn fe-btn--danger" @click="emit('confirm')">
-        {{ t('modal.delete.confirm') }}
-      </button>
-    </template>
-  </Modal>
-</template>
+<script setup lang="ts">
+import type { LocaleCode } from '../types/ExplorerConfig';
+import { useLocale } from '../composables/useLocale';
+import Modal from './Modal.vue';
+
+const props = defineProps<{
+  open: boolean;
+  locale: LocaleCode;
+  count: number;
+}>();
+
+const emit = defineEmits<{
+  (e: 'close'): void;
+  (e: 'confirm'): void;
+}>();
+
+const { t } = useLocale(() => props.locale);
+</script>
+
+<template>
+  <Modal :open="open" :title="t('modal.delete.title')" size="sm" @close="emit('close')">
+    <p>{{ t('modal.delete.message', { count }) }}</p>
+    <template #actions>
+      <button type="button" class="fe-btn" @click="emit('close')">
+        {{ t('modal.delete.cancel') }}
+      </button>
+      <button type="button" class="fe-btn fe-btn--danger" @click="emit('confirm')">
+        {{ t('modal.delete.confirm') }}
+      </button>
+    </template>
+  </Modal>
+</template>

package/src/modals/Modal.vue

@@ -1,104 +1,104 @@
-<script setup lang="ts">
-/**
- * Modal — tiny headless wrapper. Backdrop + centered card + ESC + autofocus.
- */
-import { watch, onBeforeUnmount, ref } from 'vue';
-
-const props = defineProps<{
-  open: boolean;
-  title?: string;
-  size?: 'sm' | 'md' | 'lg' | 'xl';
-  closeOnBackdrop?: boolean;
-  /** When true, drop the dialog chrome (backdrop tint, header, footer,
-   *  centered card with border-radius) and render the slot full-bleed.
-   *  Used by the standalone /files/edit route where the browser tab IS
-   *  the container — a modal frame on top of it just steals real estate
-   *  from the editor. ESC + emit('close') still wire through so the
-   *  parent route can window.close() the tab. */
-  chromeless?: boolean;
-  /** Explicit theme. When set the modal stamps the appropriate
-   *  `.fe--theme-{light,dark}` class on its `.fe` backdrop so the CSS
-   *  variable cascade matches the host shell regardless of OS
-   *  preference (Modal is a portal-shaped descendant of `<body>`
-   *  rather than a child of the parent component, so plain DOM
-   *  inheritance isn't always enough). */
-  theme?: 'light' | 'dark' | 'auto';
-}>();
-
-const emit = defineEmits<{
-  (e: 'close'): void;
-}>();
-
-const cardEl = ref<HTMLElement | null>(null);
-
-watch(
-  () => props.open,
-  (v) => {
-    if (v) {
-      document.addEventListener('keydown', onKey);
-      setTimeout(() => {
-        const focusable = cardEl.value?.querySelector<HTMLElement>(
-          'input,select,textarea,button,[tabindex]:not([tabindex="-1"])',
-        );
-        focusable?.focus();
-      }, 30);
-    } else {
-      document.removeEventListener('keydown', onKey);
-    }
-  },
-);
-
-onBeforeUnmount(() => document.removeEventListener('keydown', onKey));
-
-function onKey(e: KeyboardEvent) {
-  if (e.key === 'Escape') emit('close');
-}
-
-function onBackdrop() {
-  if (props.closeOnBackdrop !== false) emit('close');
-}
-</script>
-
-<template>
-  <transition name="fe-modal">
-    <div
-      v-if="open"
-      class="fe fe-modal__backdrop"
-      :class="[
-        { 'fe-modal__backdrop--chromeless': chromeless },
-        theme === 'light' ? 'fe--theme-light' : '',
-        theme === 'dark' ? 'fe--theme-dark' : '',
-      ]"
-      role="presentation"
-      @click="onBackdrop"
-    >
-      <div
-        ref="cardEl"
-        class="fe-modal__card"
-        :class="[
-          `fe-modal__card--${size || 'md'}`,
-          chromeless && 'fe-modal__card--chromeless',
-        ]"
-        role="dialog"
-        aria-modal="true"
-        @click.stop
-      >
-        <header v-if="title && !chromeless" class="fe-modal__head">
-          <h2 class="fe-modal__title">{{ title }}</h2>
-          <button
-            type="button"
-            class="fe-modal__close"
-            aria-label="Close"
-            @click="emit('close')"
-          >×</button>
-        </header>
-        <div class="fe-modal__body">
-          <slot />
-        </div>
-        <footer v-if="$slots.actions && !chromeless" class="fe-modal__actions">
-          <slot name="actions" />
-        </footer>
-      </div>
-    </div>
-  </transition>
-</template>
+<script setup lang="ts">
+/**
+ * Modal — tiny headless wrapper. Backdrop + centered card + ESC + autofocus.
+ */
+import { watch, onBeforeUnmount, ref } from 'vue';
+
+const props = defineProps<{
+  open: boolean;
+  title?: string;
+  size?: 'sm' | 'md' | 'lg' | 'xl';
+  closeOnBackdrop?: boolean;
+  /** When true, drop the dialog chrome (backdrop tint, header, footer,
+   *  centered card with border-radius) and render the slot full-bleed.
+   *  Used by the standalone /files/edit route where the browser tab IS
+   *  the container — a modal frame on top of it just steals real estate
+   *  from the editor. ESC + emit('close') still wire through so the
+   *  parent route can window.close() the tab. */
+  chromeless?: boolean;
+  /** Explicit theme. When set the modal stamps the appropriate
+   *  `.fe--theme-{light,dark}` class on its `.fe` backdrop so the CSS
+   *  variable cascade matches the host shell regardless of OS
+   *  preference (Modal is a portal-shaped descendant of `<body>`
+   *  rather than a child of the parent component, so plain DOM
+   *  inheritance isn't always enough). */
+  theme?: 'light' | 'dark' | 'auto';
+}>();
+
+const emit = defineEmits<{
+  (e: 'close'): void;
+}>();
+
+const cardEl = ref<HTMLElement | null>(null);
+
+watch(
+  () => props.open,
+  (v) => {
+    if (v) {
+      document.addEventListener('keydown', onKey);
+      setTimeout(() => {
+        const focusable = cardEl.value?.querySelector<HTMLElement>(
+          'input,select,textarea,button,[tabindex]:not([tabindex="-1"])',
+        );
+        focusable?.focus();
+      }, 30);
+    } else {
+      document.removeEventListener('keydown', onKey);
+    }
+  },
+);
+
+onBeforeUnmount(() => document.removeEventListener('keydown', onKey));
+
+function onKey(e: KeyboardEvent) {
+  if (e.key === 'Escape') emit('close');
+}
+
+function onBackdrop() {
+  if (props.closeOnBackdrop !== false) emit('close');
+}
+</script>
+
+<template>
+  <transition name="fe-modal">
+    <div
+      v-if="open"
+      class="fe fe-modal__backdrop"
+      :class="[
+        { 'fe-modal__backdrop--chromeless': chromeless },
+        theme === 'light' ? 'fe--theme-light' : '',
+        theme === 'dark' ? 'fe--theme-dark' : '',
+      ]"
+      role="presentation"
+      @click="onBackdrop"
+    >
+      <div
+        ref="cardEl"
+        class="fe-modal__card"
+        :class="[
+          `fe-modal__card--${size || 'md'}`,
+          chromeless && 'fe-modal__card--chromeless',
+        ]"
+        role="dialog"
+        aria-modal="true"
+        @click.stop
+      >
+        <header v-if="title && !chromeless" class="fe-modal__head">
+          <h2 class="fe-modal__title">{{ title }}</h2>
+          <button
+            type="button"
+            class="fe-modal__close"
+            aria-label="Close"
+            @click="emit('close')"
+          >×</button>
+        </header>
+        <div class="fe-modal__body">
+          <slot />
+        </div>
+        <footer v-if="$slots.actions && !chromeless" class="fe-modal__actions">
+          <slot name="actions" />
+        </footer>
+      </div>
+    </div>
+  </transition>
+</template>

package/src/modals/NewFolderModal.vue

@@ -1,64 +1,64 @@
-<script setup lang="ts">
-import { ref, watch } from 'vue';
-import type { LocaleCode } from '../types/ExplorerConfig';
-import { useLocale } from '../composables/useLocale';
-import Modal from './Modal.vue';
-
-const props = defineProps<{
-  open: boolean;
-  locale: LocaleCode;
-}>();
-
-const emit = defineEmits<{
-  (e: 'close'): void;
-  (e: 'submit', name: string): void;
-}>();
-
-const { t } = useLocale(() => props.locale);
-const name = ref('');
-const err = ref<string | null>(null);
-
-watch(() => props.open, (v) => {
-  if (v) {
-    name.value = '';
-    err.value = null;
-  }
-});
-
-function submit() {
-  const clean = name.value.trim();
-  if (!clean) {
-    err.value = t('modal.newfolder.placeholder');
-    return;
-  }
-  if (/[\\/]/.test(clean) || clean === '.' || clean === '..') {
-    err.value = 'Geçersiz karakter';
-    return;
-  }
-  emit('submit', clean);
-}
-</script>
-
-<template>
-  <Modal :open="open" :title="t('modal.newfolder.title')" size="sm" @close="emit('close')">
-    <form @submit.prevent="submit">
-      <input
-        v-model="name"
-        type="text"
-        class="fe-input"
-        :placeholder="t('modal.newfolder.placeholder')"
-        autocomplete="off"
-        @keydown.enter.prevent="submit"
-      />
-      <p v-if="err" class="fe-form__error">{{ err }}</p>
-    </form>
-    <template #actions>
-      <button type="button" class="fe-btn" @click="emit('close')">
-        {{ t('modal.newfolder.cancel') }}
-      </button>
-      <button type="button" class="fe-btn fe-btn--primary" @click="submit">
-        {{ t('modal.newfolder.create') }}
-      </button>
-    </template>
-  </Modal>
-</template>
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import type { LocaleCode } from '../types/ExplorerConfig';
+import { useLocale } from '../composables/useLocale';
+import Modal from './Modal.vue';
+
+const props = defineProps<{
+  open: boolean;
+  locale: LocaleCode;
+}>();
+
+const emit = defineEmits<{
+  (e: 'close'): void;
+  (e: 'submit', name: string): void;
+}>();
+
+const { t } = useLocale(() => props.locale);
+const name = ref('');
+const err = ref<string | null>(null);
+
+watch(() => props.open, (v) => {
+  if (v) {
+    name.value = '';
+    err.value = null;
+  }
+});
+
+function submit() {
+  const clean = name.value.trim();
+  if (!clean) {
+    err.value = t('modal.newfolder.placeholder');
+    return;
+  }
+  if (/[\\/]/.test(clean) || clean === '.' || clean === '..') {
+    err.value = 'Geçersiz karakter';
+    return;
+  }
+  emit('submit', clean);
+}
+</script>
+
+<template>
+  <Modal :open="open" :title="t('modal.newfolder.title')" size="sm" @close="emit('close')">
+    <form @submit.prevent="submit">
+      <input
+        v-model="name"
+        type="text"
+        class="fe-input"
+        :placeholder="t('modal.newfolder.placeholder')"
+        autocomplete="off"
+        @keydown.enter.prevent="submit"
+      />
+      <p v-if="err" class="fe-form__error">{{ err }}</p>
+    </form>
+    <template #actions>
+      <button type="button" class="fe-btn" @click="emit('close')">
+        {{ t('modal.newfolder.cancel') }}
+      </button>
+      <button type="button" class="fe-btn fe-btn--primary" @click="submit">
+        {{ t('modal.newfolder.create') }}
+      </button>
+    </template>
+  </Modal>
+</template>