i18n-dashboard 0.17.0 → 0.18.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "i18n-dashboard",
-  "version": "0.17.0",
+  "version": "0.18.1",
   "description": "A web dashboard to manage vue-i18n translation keys with database persistence",
   "type": "module",
   "bin": {

package/src/assets/locales/en.json

@@ -598,5 +598,20 @@
   "customization.widget_icon_hint": "Heroicons name, e.g. i-heroicons-chart-bar",
   "customization.widget_sizes": "Available sizes",
   "customization.widget_default_size": "Default size",
-  "customization.nav_label": "Customization"
+  "customization.nav_label": "Customization",
+
+  "history.modal_title": "Translation History",
+  "history.no_history": "No history available",
+  "history.before": "Before",
+  "history.after": "After",
+  "history.source_google": "Google Translate",
+  "history.source_sync": "File Sync",
+  "history.source_manual": "Manual",
+
+  "dashboard.widget_no_url": "No URL configured",
+
+  "projects.locales_path_placeholder": "src/locales",
+  "projects.key_separator_placeholder": ".",
+  "projects.detection_failed": "Detection failed",
+  "projects.create_failed": "Could not create project"
 }

package/src/components/common/FormatImportModal.vue

@@ -0,0 +1,272 @@
+<template>
+  <u-modal
+    v-model:open="open"
+    :title="t('formats.import_title', 'Import formats from project config')"
+    :ui="{ width: '40rem' }"
+  >
+    <template #body>
+      <div class="space-y-4">
+        <!-- Loading -->
+        <div
+          v-if="loading"
+          class="flex items-center justify-center py-10 gap-3 text-gray-400"
+        >
+          <u-icon
+            class="animate-spin text-xl"
+            name="i-heroicons-arrow-path"
+          />
+          <span class="text-sm">{{ t('formats.import_scanning', 'Scanning config files…') }}</span>
+        </div>
+
+        <!-- No formats found -->
+        <div
+          v-else-if="result && !result.sourceFile"
+          class="text-center py-10 text-gray-400"
+        >
+          <u-icon
+            class="text-3xl mb-2"
+            name="i-heroicons-magnifying-glass"
+          />
+          <p class="font-medium text-sm">
+            {{ t('formats.import_none_found', 'No formats detected') }}
+          </p>
+          <p class="text-xs mt-1">
+            {{ t('formats.import_none_found_hint', 'No numberFormats, datetimeFormats or modifiers found in config files.') }}
+          </p>
+        </div>
+
+        <template v-else-if="result">
+          <!-- Source file -->
+          <div class="flex items-center gap-2 text-xs text-gray-500 dark:text-gray-400 bg-gray-50 dark:bg-gray-800 rounded-lg px-3 py-2">
+            <u-icon name="i-heroicons-document-text" />
+            {{ t('formats.import_source', 'Detected in') }}
+            <code class="font-mono font-medium text-gray-700 dark:text-gray-300">{{ result.sourceFile }}</code>
+          </div>
+
+          <!-- Nothing new to import -->
+          <div
+            v-if="totalToImport === 0"
+            class="bg-green-50 dark:bg-green-900/20 rounded-lg px-3 py-2 text-sm text-green-700 dark:text-green-400 flex items-center gap-2"
+          >
+            <u-icon name="i-heroicons-check-circle" />
+            {{ t('formats.import_all_synced', 'All detected formats are already configured in this project.') }}
+          </div>
+
+          <!-- Formats to import -->
+          <template v-if="totalToImport > 0">
+            <p class="text-sm font-medium text-gray-700 dark:text-gray-300">
+              {{ t('formats.import_new', 'New formats to import') }}
+              <u-badge
+                :label="String(totalToImport)"
+                color="primary"
+                size="xs"
+                class="ml-1"
+                variant="soft"
+              />
+            </p>
+
+            <!-- Number formats -->
+            <div v-if="selected.numberFormats.length">
+              <p class="text-xs font-semibold uppercase tracking-wide text-gray-400 mb-2">
+                {{ t('formats.number_title', 'Number formats') }}
+              </p>
+              <div class="space-y-1">
+                <div
+                  v-for="f in selected.numberFormats"
+                  :key="`n-${f.locale}-${f.name}`"
+                  class="flex items-center gap-2.5 px-3 py-2 rounded-lg bg-gray-50 dark:bg-gray-800 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700"
+                  @click="f.checked = !f.checked"
+                >
+                  <u-checkbox
+                    :model-value="f.checked"
+                    @click.stop
+                    @update:model-value="f.checked = Boolean($event)"
+                  />
+                  <span class="text-xs font-mono bg-gray-200 dark:bg-gray-700 px-1.5 py-0.5 rounded text-gray-600 dark:text-gray-300">{{ f.locale }}</span>
+                  <span class="text-sm font-medium text-gray-800 dark:text-gray-200 flex-1">{{ f.name }}</span>
+                  <code class="text-xs text-gray-400 truncate max-w-40">{{ formatOptionsPreview(f.options) }}</code>
+                </div>
+              </div>
+            </div>
+
+            <!-- Datetime formats -->
+            <div v-if="selected.datetimeFormats.length">
+              <p class="text-xs font-semibold uppercase tracking-wide text-gray-400 mb-2">
+                {{ t('formats.datetime_title', 'Date formats') }}
+              </p>
+              <div class="space-y-1">
+                <div
+                  v-for="f in selected.datetimeFormats"
+                  :key="`d-${f.locale}-${f.name}`"
+                  class="flex items-center gap-2.5 px-3 py-2 rounded-lg bg-gray-50 dark:bg-gray-800 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700"
+                  @click="f.checked = !f.checked"
+                >
+                  <u-checkbox
+                    :model-value="f.checked"
+                    @click.stop
+                    @update:model-value="f.checked = Boolean($event)"
+                  />
+                  <span class="text-xs font-mono bg-gray-200 dark:bg-gray-700 px-1.5 py-0.5 rounded text-gray-600 dark:text-gray-300">{{ f.locale }}</span>
+                  <span class="text-sm font-medium text-gray-800 dark:text-gray-200 flex-1">{{ f.name }}</span>
+                  <code class="text-xs text-gray-400 truncate max-w-40">{{ formatOptionsPreview(f.options) }}</code>
+                </div>
+              </div>
+            </div>
+
+            <!-- Modifiers -->
+            <div v-if="selected.modifiers.length">
+              <p class="text-xs font-semibold uppercase tracking-wide text-gray-400 mb-2">
+                {{ t('settings.custom_modifiers', 'Custom modifiers') }}
+              </p>
+              <div class="space-y-1">
+                <div
+                  v-for="m in selected.modifiers"
+                  :key="`m-${m.name}`"
+                  class="flex items-center gap-2.5 px-3 py-2 rounded-lg bg-gray-50 dark:bg-gray-800 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700"
+                  @click="m.checked = !m.checked"
+                >
+                  <u-checkbox
+                    :model-value="m.checked"
+                    @click.stop
+                    @update:model-value="m.checked = Boolean($event)"
+                  />
+                  <span class="text-sm font-medium text-gray-800 dark:text-gray-200 flex-1">{{ m.name }}</span>
+                  <code class="text-xs text-gray-400 truncate max-w-48 font-mono">{{ m.body }}</code>
+                </div>
+              </div>
+            </div>
+          </template>
+
+          <!-- Already existing -->
+          <div
+            v-if="totalAlreadyExisting > 0"
+            class="text-xs text-gray-400 flex items-center gap-1.5 pt-1"
+          >
+            <u-icon name="i-heroicons-check" />
+            {{ totalAlreadyExisting }}
+            {{ t('formats.import_already_exist', 'format(s) already configured — skipped') }}
+          </div>
+        </template>
+
+        <p
+          v-if="error"
+          class="text-sm text-red-500"
+        >
+          {{ error }}
+        </p>
+      </div>
+    </template>
+
+    <template #footer>
+      <div class="flex justify-end gap-2">
+        <u-button
+          color="neutral"
+          variant="ghost"
+          @click="open = false"
+        >
+          {{ t('common.cancel', 'Cancel') }}
+        </u-button>
+        <u-button
+          v-if="totalToImport > 0"
+          :disabled="checkedCount === 0"
+          :loading="importing"
+          icon="i-heroicons-arrow-down-tray"
+          @click="doImport"
+        >
+          {{ t('formats.import_btn', 'Import') }} ({{ checkedCount }})
+        </u-button>
+      </div>
+    </template>
+  </u-modal>
+</template>
+
+<script setup lang="ts">
+const { t } = useT()
+const { detectFromConfig, importFromConfig } = useFormats()
+const toast = useToast()
+
+const props = defineProps<{
+  rootPath?: string
+}>()
+
+const emit = defineEmits<{ done: [] }>()
+
+const open = defineModel<boolean>('open', { default: false })
+
+const loading = ref(false)
+const importing = ref(false)
+const error = ref('')
+const result = ref<any>(null)
+
+const selected = ref<{
+  numberFormats: Array<{ locale: string; name: string; options: Record<string, any>; checked: boolean }>
+  datetimeFormats: Array<{ locale: string; name: string; options: Record<string, any>; checked: boolean }>
+  modifiers: Array<{ name: string; body: string; checked: boolean }>
+}>({ numberFormats: [], datetimeFormats: [], modifiers: [] })
+
+const totalToImport = computed(
+  () => selected.value.numberFormats.length + selected.value.datetimeFormats.length + selected.value.modifiers.length,
+)
+const totalAlreadyExisting = computed(() => {
+  if (!result.value) return 0
+  return (
+    result.value.alreadyExisting.numberFormats.length +
+    result.value.alreadyExisting.datetimeFormats.length +
+    result.value.alreadyExisting.modifiers.length
+  )
+})
+const checkedCount = computed(
+  () =>
+    selected.value.numberFormats.filter((f) => f.checked).length +
+    selected.value.datetimeFormats.filter((f) => f.checked).length +
+    selected.value.modifiers.filter((m) => m.checked).length,
+)
+
+const formatOptionsPreview = (opts: Record<string, any>) => {
+  const entries = Object.entries(opts).slice(0, 3)
+  return entries.map(([k, v]) => `${k}: ${v}`).join(', ')
+}
+
+watch(open, async (val) => {
+  if (!val) return
+  error.value = ''
+  result.value = null
+  selected.value = { numberFormats: [], datetimeFormats: [], modifiers: [] }
+  loading.value = true
+  try {
+    result.value = await detectFromConfig(props.rootPath)
+    if (result.value) {
+      selected.value.numberFormats = result.value.toImport.numberFormats.map((f: any) => ({ ...f, checked: true }))
+      selected.value.datetimeFormats = result.value.toImport.datetimeFormats.map((f: any) => ({ ...f, checked: true }))
+      selected.value.modifiers = result.value.toImport.modifiers.map((m: any) => ({ ...m, checked: true }))
+    }
+  } catch (e: any) {
+    error.value = e?.data?.message ?? e?.message ?? t('common.error', 'Error')
+  } finally {
+    loading.value = false
+  }
+})
+
+const doImport = async () => {
+  importing.value = true
+  try {
+    const res = await importFromConfig(
+      selected.value.numberFormats.filter((f) => f.checked).map(({ locale, name, options }) => ({ locale, name, options })),
+      selected.value.datetimeFormats.filter((f) => f.checked).map(({ locale, name, options }) => ({ locale, name, options })),
+      selected.value.modifiers.filter((m) => m.checked).map(({ name, body }) => ({ name, body })),
+    ) as any
+    const total = res.added.numberFormats + res.added.datetimeFormats + res.added.modifiers
+    toast.add({
+      title: t('formats.import_success', 'Formats imported'),
+      description: `${total} ${t('formats.import_added', 'format(s) added')}`,
+      color: 'success',
+    })
+    open.value = false
+    emit('done')
+  } catch (e: any) {
+    error.value = e?.data?.message ?? e?.message ?? t('common.error', 'Error')
+  } finally {
+    importing.value = false
+  }
+}
+</script>

package/src/components/common/FormatSnippet.vue

@@ -0,0 +1,52 @@
+<template>
+  <u-card v-if="snippet">
+    <template #header>
+      <div class="flex items-center justify-between gap-2">
+        <div class="flex items-center gap-2">
+          <u-icon
+            class="text-green-500"
+            name="i-heroicons-code-bracket"
+          />
+          <h2 class="font-semibold text-gray-900 dark:text-white">
+            {{ t('formats.snippet_title', 'Integration snippet') }}
+          </h2>
+        </div>
+        <u-button
+          :label="copied ? t('common.copied', 'Copied!') : t('common.copy', 'Copy')"
+          :color="copied ? 'success' : 'neutral'"
+          :icon="copied ? 'i-heroicons-check' : 'i-heroicons-clipboard'"
+          size="xs"
+          variant="ghost"
+          @click="copy"
+        />
+      </div>
+    </template>
+
+    <div class="text-xs text-gray-500 dark:text-gray-400 mb-3">
+      {{ t('formats.snippet_hint', 'Paste this into your') }}
+      <code class="font-mono bg-gray-100 dark:bg-gray-800 px-1 rounded">i18n.ts</code>
+      {{ t('formats.snippet_hint2', 'to use all configured formats and modifiers.') }}
+    </div>
+
+    <div class="relative">
+      <pre class="text-xs font-mono bg-gray-950 dark:bg-gray-900 text-gray-100 rounded-lg p-4 overflow-x-auto leading-relaxed"><code>{{ snippet }}</code></pre>
+    </div>
+  </u-card>
+</template>
+
+<script lang="ts" setup>
+  export interface IFormatSnippetProps {
+    snippet: string
+  }
+
+  const props = defineProps<IFormatSnippetProps>()
+
+  const { t } = useT()
+  const copied = ref(false)
+
+  const copy = async () => {
+    await navigator.clipboard.writeText(props.snippet)
+    copied.value = true
+    setTimeout(() => { copied.value = false }, 2000)
+  }
+</script>

package/src/components/{ScanModal.vue → common/ScanModal.vue}

@@ -1,5 +1,5 @@
 <template>
-  <UModal
+  <u-modal
     v-model:open="open"
     :title="t('scan.modal_title', 'Scan project')"
     :ui="{ width: '48rem' }"
@@ -17,7 +17,7 @@
               : 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300'"
             @click="mode = m.value"
           >
-            <UIcon
+            <u-icon
               :name="m.icon"
               class="text-sm"
             />
@@ -33,12 +33,12 @@
           <p class="text-sm text-gray-500 dark:text-gray-400">
             {{ t('scan.local_hint', 'Select the root folder of your Vue.js project. The scanner will detect all $t(), t(), <i18n-t> and v-t usages.') }}
           </p>
-          <UFormField :label="t('scan.local_path_label', 'Project root folder')">
-            <PathPicker
+          <u-form-field :label="t('scan.local_path_label', 'Project root folder')">
+            <project-path-picker
               v-model="localPath"
               class="w-full"
             />
-          </UFormField>
+          </u-form-field>
         </div>
 
         <!-- Git mode -->
@@ -49,9 +49,9 @@
           <p class="text-sm text-gray-500 dark:text-gray-400">
             {{ t('scan.git_hint', 'Clone a Git repository and scan source files for translation keys.') }}
           </p>
-          <GitRepoManager v-model="gitRepo" />
+          <project-git-repo-manager v-model="gitRepo" />
           <label class="flex items-center gap-2 cursor-pointer">
-            <UToggle
+            <u-switch
               v-model="saveRepo"
               size="sm"
             />
@@ -148,37 +148,35 @@
 
     <template #footer>
       <div class="flex justify-end gap-2">
-        <UButton
+        <u-button
           color="neutral"
           variant="ghost"
           @click="open = false"
         >
           {{ t('common.cancel', 'Cancel') }}
-        </UButton>
-        <UButton
+        </u-button>
+        <u-button
           :loading="loading"
           :disabled="mode === 'local' ? !localPath : !gitRepo?.url"
           icon="i-heroicons-magnifying-glass"
           @click="runScan"
         >
           {{ t('scan.run', 'Scan') }}
-        </UButton>
+        </u-button>
       </div>
     </template>
-  </UModal>
+  </u-modal>
 </template>
 
 <script setup lang="ts">
-import type { IGitRepo } from '../interfaces/project.interface'
+import type { IScanModalProps, IScanModalEmits } from '../../interfaces/scan.interface'
 
 const { t } = useT()
+const { updateProject, scanWithOptions } = useProject()
 
-const props = defineProps<{
-  projectId: number
-  project?: { languages?: { code: string; name: string }[]; root_path?: string; git_repo?: IGitRepo | null }
-}>()
+const props = defineProps<IScanModalProps>()
 
-const emit = defineEmits<{ done: [] }>()
+const emit = defineEmits<IScanModalEmits>()
 
 const open = defineModel<boolean>('open', { default: false })
 
@@ -206,32 +204,26 @@ watch(open, (val) => {
   }
 })
 
-async function runScan() {
+const runScan = async () => {
   loading.value = true
   error.value = ''
   result.value = null
   try {
     if (mode.value === 'git' && saveRepo.value && gitRepo.value?.url) {
-      await $fetch(`/api/projects/${props.projectId}`, {
-        method: 'PUT',
-        body: { git_repo: gitRepo.value },
-      })
+      await updateProject(props.projectId, { git_repo: gitRepo.value })
     }
 
-    result.value = await $fetch('/api/scan', {
-      method: 'POST',
-      body: {
-        project_id: props.projectId,
-        mode: mode.value,
-        root_path: mode.value === 'local' ? localPath.value : undefined,
-        git_url: mode.value === 'git' ? gitRepo.value?.url : undefined,
-        git_branch: mode.value === 'git' ? gitRepo.value?.branch : undefined,
-        git_token: mode.value === 'git' ? gitRepo.value?.token : undefined,
-      },
+    result.value = await scanWithOptions({
+      project_id: props.projectId,
+      mode: mode.value,
+      root_path: mode.value === 'local' ? localPath.value : undefined,
+      git_url: mode.value === 'git' ? gitRepo.value?.url : undefined,
+      git_branch: mode.value === 'git' ? gitRepo.value?.branch : undefined,
+      git_token: mode.value === 'git' ? gitRepo.value?.token : undefined,
     })
     emit('done')
   } catch (e: any) {
-    error.value = e?.data?.message ?? t('common.error', 'Error')
+    error.value = e?.message ?? t('common.error', 'Error')
   } finally {
     loading.value = false
   }

package/src/components/{dashboard → common}/WidgetConfigModal.vue

@@ -1,69 +1,5 @@
-<script lang="ts" setup>
-import type { PropType } from 'vue'
-import type { TDataSourceType } from '../../types/dashboard.type'
-import type { IWidgetConfig, IWidgetDataSource } from '../../interfaces/dashboard.interface'
-import { WIDGET_REGISTRY } from '../../consts/dashboard.const'
-
-const props = defineProps({
-  open: {
-    type: Boolean,
-    required: true,
-  },
-  widget: {
-    type: Object as PropType<IWidgetConfig | null>,
-    default: null,
-  },
-  index: {
-    type: Number,
-    default: -1,
-  },
-})
-
-const emit = defineEmits<{
-  (e: 'update:open', value: boolean): void
-  (e: 'save', value: { dataSource: IWidgetDataSource | undefined; title: string | undefined }): void
-}>()
-
-const { t } = useT()
-const { visibleProjects } = useProject()
-
-const draftSource = ref<TDataSourceType>('global')
-const draftProjectId = ref<number | undefined>()
-const draftTitle = ref('')
-
-watch(
-  () => props.widget,
-  (w) => {
-    if (!w) return
-    draftSource.value = w.dataSource?.type ?? 'global'
-    draftProjectId.value = w.dataSource?.projectId
-    draftTitle.value = w.title ?? ''
-  },
-  { immediate: true },
-)
-
-const projectItems = computed(() =>
-  visibleProjects.value
-    .filter((p: any) => !p.is_system)
-    .map((p: any) => ({ label: p.name, value: p.id })),
-)
-
-const hasDataSource = computed(() => {
-  if (!props.widget) return false
-  return WIDGET_REGISTRY[props.widget.type].hasDataSource
-})
-
-function save() {
-  const dataSource: IWidgetDataSource = draftSource.value === 'project'
-    ? { type: 'project', projectId: draftProjectId.value }
-    : { type: 'global' }
-  emit('save', { dataSource, title: draftTitle.value || undefined })
-  emit('update:open', false)
-}
-</script>
-
 <template>
-  <UModal
+  <u-modal
     :open="open"
     :title="t('dashboard.configure_widget', 'Configure widget')"
     @update:open="emit('update:open', $event)"
@@ -79,27 +15,27 @@ function save() {
           </p>
           <div class="flex gap-2">
             <button
-              class="flex-1 px-3 py-2 rounded-lg text-sm font-medium border transition-colors"
-              :class="draftSource === 'global'
+              :class="draftSource === DATA_SOURCE_TYPE.GLOBAL
                 ? 'bg-primary-500 text-white border-primary-500'
                 : 'bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600'"
-              @click="draftSource = 'global'"
+              class="flex-1 px-3 py-2 rounded-lg text-sm font-medium border transition-colors"
+              @click="draftSource = DATA_SOURCE_TYPE.GLOBAL"
             >
-              Global
+              {{ t('dashboard.global_project', 'Global') }}
             </button>
             <button
-              class="flex-1 px-3 py-2 rounded-lg text-sm font-medium border transition-colors"
-              :class="draftSource === 'project'
+              :class="draftSource === DATA_SOURCE_TYPE.PROJECT
                 ? 'bg-primary-500 text-white border-primary-500'
                 : 'bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600'"
-              @click="draftSource = 'project'"
+              class="flex-1 px-3 py-2 rounded-lg text-sm font-medium border transition-colors"
+              @click="draftSource = DATA_SOURCE_TYPE.PROJECT"
             >
               {{ t('dashboard.specific_project', 'Specific project') }}
             </button>
           </div>
 
-          <div v-if="draftSource === 'project'">
-            <USelect
+          <div v-if="draftSource === DATA_SOURCE_TYPE.PROJECT">
+            <u-select
               v-model="draftProjectId"
               :items="projectItems"
               :placeholder="t('dashboard.select_project', 'Select a project')"
@@ -111,7 +47,7 @@ function save() {
           <p class="text-sm font-medium text-gray-700 dark:text-gray-300">
             {{ t('dashboard.custom_title', 'Custom title') }}
           </p>
-          <UInput
+          <u-input
             v-model="draftTitle"
             :placeholder="t('dashboard.default_title', 'Default title')"
           />
@@ -121,17 +57,64 @@ function save() {
 
     <template #footer>
       <div class="flex justify-end gap-2">
-        <UButton
-          variant="ghost"
+        <u-button
           color="neutral"
+          variant="ghost"
           @click="emit('update:open', false)"
         >
           {{ t('common.cancel', 'Cancel') }}
-        </UButton>
-        <UButton @click="save">
+        </u-button>
+        <u-button @click="save">
           {{ t('common.save', 'Save') }}
-        </UButton>
+        </u-button>
       </div>
     </template>
-  </UModal>
+  </u-modal>
 </template>
+
+<script lang="ts" setup>
+  import type { TDataSourceType } from '../../types/dashboard.type'
+  import type { IWidgetDataSource, IWidgetConfigModalProps, IWidgetConfigModalEmits } from '../../interfaces/dashboard.interface'
+  import { WIDGET_REGISTRY } from '../../consts/dashboard.const'
+  import { DATA_SOURCE_TYPE } from '../../enums/dashboard.enum'
+
+  const props = defineProps<IWidgetConfigModalProps>()
+  const emit = defineEmits<IWidgetConfigModalEmits>()
+
+  const { t } = useT()
+  const { visibleProjects } = useProject()
+
+  const draftSource = ref<TDataSourceType>(DATA_SOURCE_TYPE.GLOBAL)
+  const draftProjectId = ref<number | undefined>()
+  const draftTitle = ref('')
+
+  watch(
+      () => props.widget,
+      (w) => {
+        if (!w) return
+        draftSource.value = w.dataSource?.type ?? DATA_SOURCE_TYPE.GLOBAL
+        draftProjectId.value = w.dataSource?.projectId
+        draftTitle.value = w.title ?? ''
+      },
+      { immediate: true },
+  )
+
+  const projectItems = computed(() =>
+      visibleProjects.value
+          .filter((p: any) => !p.is_system)
+          .map((p: any) => ({ label: p.name, value: p.id })),
+  )
+
+  const hasDataSource = computed(() => {
+    if (!props.widget) return false
+    return WIDGET_REGISTRY[props.widget.type].hasDataSource
+  })
+
+  const save = () => {
+    const dataSource: IWidgetDataSource = draftSource.value === DATA_SOURCE_TYPE.PROJECT
+        ? { type: DATA_SOURCE_TYPE.PROJECT, projectId: draftProjectId.value }
+        : { type: DATA_SOURCE_TYPE.GLOBAL }
+    emit('save', { dataSource, title: draftTitle.value || undefined })
+    emit('update:open', false)
+  }
+</script>