remove fragments and use only components

next-ui/README.md

@@ -51,12 +51,11 @@ The Vite plugin [dir2json](https://github.com/buddywang/vite-plugin-dir2json) is
 
 Vue template files are segregated in different categories depending on usage:
 
-- `./src/components`: Pure UI components, driven by model/props. Those are reusable components.
-- `./src/fragments`: Fragments interact with other layers of the application, like API or Pinia stores. They are split into separate files for easier organization, but are not necessarily reused.
-- `./src/pages`: Pages make use of components/fragments as well as API / Pinia stores. Each Component in that folder is converted to a navigable route using [unplugin-vue-router](https://github.com/posva/unplugin-vue-router). Pages contain a special `<route>` to define the layout to use as well as other router meta attributes.
+- `./src/components`: UI components.
+- `./src/pages`: Pages make use of components as well as API / Pinia stores. Each Component in that folder is converted to a navigable route using [unplugin-vue-router](https://github.com/posva/unplugin-vue-router). Pages contain a special `<route>` to define the layout to use as well as other router meta attributes.
 - `./src/layouts`: Wrapper component around Pages.
 
-Components and Fragments are automatically imported using [unplugin-vue-components](https://github.com/unplugin/unplugin-vue-components).
+Components are automatically imported using [unplugin-vue-components](https://github.com/unplugin/unplugin-vue-components).
 
 ## Icons
 

next-ui/src/App.vue

@@ -2,9 +2,9 @@
   <v-app>
     <RouterView />
 
-    <FragmentSnackQueue />
-    <FragmentDialogConfirmEdit />
-    <FragmentDialogConfirm />
+    <SnackQueue />
+    <DialogConfirmEditInstance />
+    <DialogConfirmInstance />
   </v-app>
 
   <PiniaColadaDevtools />

next-ui/src/components.d.ts

@@ -11,54 +11,54 @@ declare module 'vue' {
     AnnouncementCard: typeof import('./components/announcement/Card.vue')['default']
     ApikeyDeletionWarning: typeof import('./components/apikey/DeletionWarning.vue')['default']
     ApikeyForceSyncWarning: typeof import('./components/apikey/ForceSyncWarning.vue')['default']
+    ApikeyGenerateDialog: typeof import('./components/apikey/GenerateDialog.vue')['default']
+    ApikeyTable: typeof import('./components/apikey/Table.vue')['default']
     AppFooter: typeof import('./components/AppFooter.vue')['default']
+    BuildCommit: typeof import('./components/BuildCommit.vue')['default']
+    BuildVersion: typeof import('./components/BuildVersion.vue')['default']
     DialogBookPicker: typeof import('./components/dialog/BookPicker.vue')['default']
     DialogConfirm: typeof import('./components/dialog/Confirm.vue')['default']
     DialogConfirmEdit: typeof import('./components/dialog/ConfirmEdit.vue')['default']
+    DialogConfirmEditInstance: typeof import('./components/dialog/ConfirmEditInstance.vue')['default']
+    DialogConfirmInstance: typeof import('./components/dialog/ConfirmInstance.vue')['default']
     DialogFileNamePicker: typeof import('./components/dialog/FileNamePicker.vue')['default']
+    DialogSeriesPicker: typeof import('./components/dialog/SeriesPicker.vue')['default']
     EmptyStateNetworkError: typeof import('./components/EmptyStateNetworkError.vue')['default']
     FormattedMessage: typeof import('./components/FormattedMessage.ts')['default']
-    FragmentApikeyGenerateDialog: typeof import('./fragments/fragment/apikey/GenerateDialog.vue')['default']
-    FragmentApikeyTable: typeof import('./fragments/fragment/apikey/Table.vue')['default']
-    FragmentBuildCommit: typeof import('./fragments/fragment/BuildCommit.vue')['default']
-    FragmentBuildVersion: typeof import('./fragments/fragment/BuildVersion.vue')['default']
-    FragmentDialogConfirm: typeof import('./fragments/fragment/dialog/Confirm.vue')['default']
-    FragmentDialogConfirmEdit: typeof import('./fragments/fragment/dialog/ConfirmEdit.vue')['default']
-    FragmentDialogSeriesPicker: typeof import('./fragments/fragment/dialog/SeriesPicker.vue')['default']
-    FragmentHistoryExpandBookConverted: typeof import('./fragments/fragment/history/expand/BookConverted.vue')['default']
-    FragmentHistoryExpandBookFileDeleted: typeof import('./fragments/fragment/history/expand/BookFileDeleted.vue')['default']
-    FragmentHistoryExpandBookImported: typeof import('./fragments/fragment/history/expand/BookImported.vue')['default']
-    FragmentHistoryExpandDuplicatePageDeleted: typeof import('./fragments/fragment/history/expand/DuplicatePageDeleted.vue')['default']
-    FragmentHistoryExpandSeriesDirectoryDeleted: typeof import('./fragments/fragment/history/expand/SeriesDirectoryDeleted.vue')['default']
-    FragmentHistoryExpandTable: typeof import('./fragments/fragment/history/expand/Table.vue')['default']
-    FragmentHistoryTable: typeof import('./fragments/fragment/history/Table.vue')['default']
-    FragmentImportBooksTransientBooksTable: typeof import('./fragments/fragment/import/books/TransientBooksTable.vue')['default']
-    FragmentImportReadlistTable: typeof import('./fragments/fragment/import/readlist/Table.vue')['default']
-    FragmentLocaleSelector: typeof import('./fragments/fragment/LocaleSelector.vue')['default']
-    FragmentRemoteFileList: typeof import('./fragments/fragment/RemoteFileList.vue')['default']
-    FragmentSnackQueue: typeof import('./fragments/fragment/SnackQueue.vue')['default']
-    FragmentThemeSelector: typeof import('./fragments/fragment/ThemeSelector.vue')['default']
-    FragmentUserAuthenticationActivityTable: typeof import('./fragments/fragment/user/AuthenticationActivityTable.vue')['default']
-    FragmentUserFormCreateEdit: typeof import('./fragments/fragment/user/form/CreateEdit.vue')['default']
-    FragmentUserTable: typeof import('./fragments/fragment/user/Table.vue')['default']
     HelloWorld: typeof import('./components/HelloWorld.vue')['default']
+    HistoryExpandBookConverted: typeof import('./components/history/expand/BookConverted.vue')['default']
+    HistoryExpandBookFileDeleted: typeof import('./components/history/expand/BookFileDeleted.vue')['default']
+    HistoryExpandBookImported: typeof import('./components/history/expand/BookImported.vue')['default']
+    HistoryExpandDuplicatePageDeleted: typeof import('./components/history/expand/DuplicatePageDeleted.vue')['default']
+    HistoryExpandSeriesDirectoryDeleted: typeof import('./components/history/expand/SeriesDirectoryDeleted.vue')['default']
+    HistoryExpandTable: typeof import('./components/history/expand/Table.vue')['default']
+    HistoryTable: typeof import('./components/history/Table.vue')['default']
     ImportBooksDirectorySelection: typeof import('./components/import/books/DirectorySelection.vue')['default']
-    LayoutAppBar: typeof import('./fragments/layout/app/Bar.vue')['default']
-    LayoutAppDrawer: typeof import('./fragments/layout/app/drawer/Drawer.vue')['default']
-    LayoutAppDrawerFooter: typeof import('./fragments/layout/app/drawer/Footer.vue')['default']
-    LayoutAppDrawerMenu: typeof import('./fragments/layout/app/drawer/menu/Menu.vue')['default']
-    LayoutAppDrawerMenuAccount: typeof import('./fragments/layout/app/drawer/menu/Account.vue')['default']
-    LayoutAppDrawerMenuHistory: typeof import('./fragments/layout/app/drawer/menu/History.vue')['default']
-    LayoutAppDrawerMenuImport: typeof import('./fragments/layout/app/drawer/menu/Import.vue')['default']
-    LayoutAppDrawerMenuLogout: typeof import('./fragments/layout/app/drawer/menu/Logout.vue')['default']
-    LayoutAppDrawerMenuMedia: typeof import('./fragments/layout/app/drawer/menu/Media.vue')['default']
-    LayoutAppDrawerMenuServer: typeof import('./fragments/layout/app/drawer/menu/Server.vue')['default']
+    ImportBooksTransientBooksTable: typeof import('./components/import/books/TransientBooksTable.vue')['default']
+    ImportReadlistTable: typeof import('./components/import/readlist/Table.vue')['default']
+    LayoutAppBar: typeof import('./components/layout/app/Bar.vue')['default']
+    LayoutAppDrawer: typeof import('./components/layout/app/drawer/Drawer.vue')['default']
+    LayoutAppDrawerFooter: typeof import('./components/layout/app/drawer/Footer.vue')['default']
+    LayoutAppDrawerMenu: typeof import('./components/layout/app/drawer/menu/Menu.vue')['default']
+    LayoutAppDrawerMenuAccount: typeof import('./components/layout/app/drawer/menu/Account.vue')['default']
+    LayoutAppDrawerMenuHistory: typeof import('./components/layout/app/drawer/menu/History.vue')['default']
+    LayoutAppDrawerMenuImport: typeof import('./components/layout/app/drawer/menu/Import.vue')['default']
+    LayoutAppDrawerMenuLogout: typeof import('./components/layout/app/drawer/menu/Logout.vue')['default']
+    LayoutAppDrawerMenuMedia: typeof import('./components/layout/app/drawer/menu/Media.vue')['default']
+    LayoutAppDrawerMenuServer: typeof import('./components/layout/app/drawer/menu/Server.vue')['default']
+    LocaleSelector: typeof import('./components/LocaleSelector.vue')['default']
     ReleaseCard: typeof import('./components/release/Card.vue')['default']
+    RemoteFileList: typeof import('./components/RemoteFileList.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     ServerSettings: typeof import('./components/server/Settings.vue')['default']
+    SnackQueue: typeof import('./components/SnackQueue.vue')['default']
+    ThemeSelector: typeof import('./components/ThemeSelector.vue')['default']
+    UserAuthenticationActivityTable: typeof import('./components/user/AuthenticationActivityTable.vue')['default']
     UserDeletionWarning: typeof import('./components/user/DeletionWarning.vue')['default']
     UserDetails: typeof import('./components/user/Details.vue')['default']
     UserFormChangePassword: typeof import('./components/user/form/ChangePassword.vue')['default']
+    UserFormCreateEdit: typeof import('./components/user/form/CreateEdit.vue')['default']
+    UserTable: typeof import('./components/user/Table.vue')['default']
   }
 }

next-ui/src/components/BuildCommit.mdx

@@ -4,7 +4,7 @@ import * as Stories from './BuildCommit.stories';
 
 <Meta of={Stories} />
 
-# FragmentBuildCommit
+# BuildCommit
 
 A button showing the current Github commit sha, retrieved from the Komga server. Clicking on the button will redirect to the particular commit at Github.
 

next-ui/src/components/BuildVersion.mdx

@@ -4,7 +4,7 @@ import * as Stories from './BuildVersion.stories';
 
 <Meta of={Stories} />
 
-# FragmentBuildVersion
+# BuildVersion
 
 A button showing the current version of the Komga server. Will show a dot badge if a new update is available.
 

next-ui/src/components/LocaleSelector.mdx

@@ -4,7 +4,7 @@ import * as Stories from './LocaleSelector.stories';
 
 <Meta of={Stories} />
 
-# FragmentLocaleSelector
+# LocaleSelector
 
 A button that will display a menu when clicked, with a choice of available locales.
 

next-ui/src/components/RemoteFileList.mdx

@@ -4,7 +4,7 @@ import * as Stories from './RemoteFileList.stories';
 
 <Meta of={Stories} />
 
-# FragmentRemoteFileList
+# RemoteFileList
 
 A remote directory browser, to browse directories on a remote server.
 

next-ui/src/components/SnackQueue.mdx

@@ -1,3 +1,3 @@
-# FragmentSnackQueue
+# SnackQueue
 
 A Vuetify [Snackbar Queue](https://vuetifyjs.com/en/components/snackbar-queue/#usage) that is hooked up to the Pinia `messagesStore.messages`.

next-ui/src/components/ThemeSelector.mdx

@@ -4,7 +4,7 @@ import * as Stories from './ThemeSelector.stories';
 
 <Meta of={Stories} />
 
-# FragmentThemeSelector
+# ThemeSelector
 
 A cycling button to change the theme.
 

next-ui/src/components/apikey/Table.mdx

@@ -4,7 +4,7 @@ import * as Stories from './Table.stories';
 
 <Meta of={Stories} />
 
-# FragmentApikeyTable
+# ApikeyTable
 
 [Server DataTable](https://vuetifyjs.com/en/components/data-tables/server-side-tables/) showing API keys.
 

next-ui/src/components/dialog/SeriesPicker.mdx

@@ -4,6 +4,6 @@ import * as Stories from './SeriesPicker.stories';
 
 <Meta of={Stories} />
 
-# FragmentDialogSeriesPicker
+# DialogSeriesPicker
 
 Search and pick series.

next-ui/src/components/history/Table.mdx

@@ -4,7 +4,7 @@ import * as Stories from './Table.stories';
 
 <Meta of={Stories} />
 
-# FragmentHistoryTable
+# HistoryTable
 
 [Server DataTable](https://vuetifyjs.com/en/components/data-tables/server-side-tables/) showing historical events:
 - rows can be expanded to display event details

next-ui/src/components/history/Table.vue

@@ -92,11 +92,11 @@ import { useIntl } from 'vue-intl'
 import { PageRequest, type SortItem } from '@/types/PageRequest'
 import { useQuery } from '@pinia/colada'
 import { historyQuery } from '@/colada/history'
-import FragmentHistoryExpandBookFileDeleted from '@/fragments/fragment/history/expand/BookFileDeleted.vue'
-import FragmentHistoryExpandBookImported from '@/fragments/fragment/history/expand/BookImported.vue'
-import FragmentHistoryExpandBookConverted from '@/fragments/fragment/history/expand/BookConverted.vue'
-import FragmentHistoryExpandDuplicatePageDeleted from '@/fragments/fragment/history/expand/DuplicatePageDeleted.vue'
-import FragmentHistoryExpandSeriesDirectoryDeleted from '@/fragments/fragment/history/expand/SeriesDirectoryDeleted.vue'
+import HistoryExpandBookFileDeleted from '@/components/history/expand/BookFileDeleted.vue'
+import HistoryExpandBookImported from '@/components/history/expand/BookImported.vue'
+import HistoryExpandBookConverted from '@/components/history/expand/BookConverted.vue'
+import HistoryExpandDuplicatePageDeleted from '@/components/history/expand/DuplicatePageDeleted.vue'
+import HistoryExpandSeriesDirectoryDeleted from '@/components/history/expand/SeriesDirectoryDeleted.vue'
 import { historicalEventMessages } from '@/utils/i18n/enum/historical-event'
 import type { MessageDescriptor } from '@formatjs/intl/src/types'
 import { seriesDetailQuery } from '@/colada/series'
@@ -186,15 +186,15 @@ function getEventMessage(eventType: string): MessageDescriptor {
 function getExpandedComponent(eventType: string): Component | null {
   switch (eventType) {
     case 'BookFileDeleted':
-      return markRaw(FragmentHistoryExpandBookFileDeleted)
+      return markRaw(HistoryExpandBookFileDeleted)
     case 'SeriesFolderDeleted':
-      return markRaw(FragmentHistoryExpandSeriesDirectoryDeleted)
+      return markRaw(HistoryExpandSeriesDirectoryDeleted)
     case 'DuplicatePageDeleted':
-      return markRaw(FragmentHistoryExpandDuplicatePageDeleted)
+      return markRaw(HistoryExpandDuplicatePageDeleted)
     case 'BookConverted':
-      return markRaw(FragmentHistoryExpandBookConverted)
+      return markRaw(HistoryExpandBookConverted)
     case 'BookImported':
-      return markRaw(FragmentHistoryExpandBookImported)
+      return markRaw(HistoryExpandBookImported)
     default:
       return null
   }

next-ui/src/components/history/expand/BookConverted.vue

@@ -1,5 +1,5 @@
 <template>
-  <FragmentHistoryExpandTable :rows="rows" />
+  <HistoryExpandTable :rows="rows" />
 </template>
 
 <script setup lang="ts">

next-ui/src/components/history/expand/BookFileDeleted.vue

@@ -1,5 +1,5 @@
 <template>
-  <FragmentHistoryExpandTable :rows="rows" />
+  <HistoryExpandTable :rows="rows" />
 </template>
 
 <script setup lang="ts">

next-ui/src/components/history/expand/BookImported.vue

@@ -1,5 +1,5 @@
 <template>
-  <FragmentHistoryExpandTable :rows="rows" />
+  <HistoryExpandTable :rows="rows" />
 </template>
 
 <script setup lang="ts">

next-ui/src/components/history/expand/SeriesDirectoryDeleted.vue

@@ -1,5 +1,5 @@
 <template>
-  <FragmentHistoryExpandTable :rows="rows" />
+  <HistoryExpandTable :rows="rows" />
 </template>
 
 <script setup lang="ts">

next-ui/src/components/import/books/DirectorySelection.stories.ts

@@ -1,14 +1,14 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
 
 import DirectorySelection from './DirectorySelection.vue'
-import DialogConfirmEdit from '@/fragments/fragment/dialog/ConfirmEdit.vue'
+import DialogConfirmEditInstance from '@/components/dialog/ConfirmEditInstance.vue'
 import { useAppStore } from '@/stores/app'
 import { fn } from 'storybook/test'
 
 const meta = {
   component: DirectorySelection,
   render: (args: object) => ({
-    components: { DirectorySelection, DialogConfirmEdit },
+    components: { DirectorySelection, DialogConfirmEdit: DialogConfirmEditInstance },
     setup() {
       return { args }
     },

next-ui/src/components/import/books/DirectorySelection.vue

@@ -54,7 +54,7 @@
 <script setup lang="ts">
 import { storeToRefs } from 'pinia'
 import { useDialogsStore } from '@/stores/dialogs'
-import FragmentRemoteFileList from '@/fragments/fragment/RemoteFileList.vue'
+import RemoteFileList from '@/components/RemoteFileList.vue'
 import { useDisplay } from 'vuetify'
 import { useAppStore } from '@/stores/app'
 import { useIntl } from 'vue-intl'
@@ -86,7 +86,7 @@ function browse() {
     fullscreen: display.xs.value,
   }
   dialogConfirmEdit.value.slot = {
-    component: markRaw(FragmentRemoteFileList),
+    component: markRaw(RemoteFileList),
     props: {},
   }
   dialogConfirmEdit.value.record = appStore.importBooksPath || '' // workaround for https://github.com/vuetifyjs/vuetify/issues/4144

next-ui/src/components/import/books/TransientBooksTable.mdx

@@ -4,7 +4,7 @@ import * as Stories from './TransientBooksTable.stories';
 
 <Meta of={Stories} />
 
-# FragmentImportBooksTransientBooksTable
+# ImportBooksTransientBooksTable
 
 Data table displaying books to import.
 - When books come into view, they will be analyzed.

next-ui/src/components/import/books/TransientBooksTable.stories.ts

@@ -4,7 +4,7 @@ import { http, delay } from 'msw'
 import TransientBooksTable from './TransientBooksTable.vue'
 import { response400BadRequest } from '@/mocks/api/handlers'
 import { scanned } from '@/mocks/api/handlers/transient-books'
-import SnackQueue from '@/fragments/fragment/SnackQueue.vue'
+import SnackQueue from '@/components/SnackQueue.vue'
 
 const meta = {
   component: TransientBooksTable,

next-ui/src/components/import/books/TransientBooksTable.vue

@@ -229,7 +229,7 @@
     </v-row>
   </v-container>
 
-  <FragmentDialogSeriesPicker
+  <DialogSeriesPicker
     :activator="dialogSeriesPickerActivator"
     :fullscreen="display.xs.value"
     @selected-series="(series) => seriesPicked(series)"

next-ui/src/components/import/readlist/Table.stories.ts

@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/vue3-vite'
 import { http, delay } from 'msw'
 import Table from './Table.vue'
 import { response400BadRequest } from '@/mocks/api/handlers'
-import SnackQueue from '@/fragments/fragment/SnackQueue.vue'
+import SnackQueue from '@/components/SnackQueue.vue'
 import { matchCbl } from '@/mocks/api/handlers/readlists'
 import { expect, waitFor } from 'storybook/test'
 

next-ui/src/components/import/readlist/Table.vue

@@ -203,7 +203,7 @@
     </v-row>
   </v-container>
 
-  <FragmentDialogSeriesPicker
+  <DialogSeriesPicker
     :activator="dialogSeriesPickerActivator"
     :fullscreen="display.xs.value"
     @selected-series="(series) => seriesPicked(series)"

next-ui/src/components/layout/app/Bar.vue

@@ -22,8 +22,8 @@
       </RouterLink>
       Komga
     </v-app-bar-title>
-    <FragmentLocaleSelector />
-    <FragmentThemeSelector />
+    <LocaleSelector />
+    <ThemeSelector />
   </v-app-bar>
 </template>
 

next-ui/src/components/layout/app/drawer/Footer.vue

@@ -25,8 +25,8 @@
     class="d-flex align-center text-caption text-medium-emphasis pa-2"
   >
     <div class="d-flex ms-auto">
-      <FragmentBuildCommit class="me-2" />
-      <FragmentBuildVersion />
+      <BuildCommit class="me-2" />
+      <BuildVersion />
     </div>
   </div>
 

next-ui/src/components/user/AuthenticationActivityTable.mdx

@@ -4,7 +4,7 @@ import * as Stories from './AuthenticationActivityTable.stories';
 
 <Meta of={Stories} />
 
-# FragmentUserTable
+# UserTable
 
 A Vuetify [Data Table](https://vuetifyjs.com/en/components/data-tables/basics/) to display a list of authentication activity entries.
 

next-ui/src/components/user/Table.mdx

@@ -4,7 +4,7 @@ import * as Stories from './Table.stories';
 
 <Meta of={Stories} />
 
-# FragmentUserTable
+# UserTable
 
 A Vuetify [Data Table](https://vuetifyjs.com/en/components/data-tables/basics/) to display a list of users.
 

next-ui/src/components/user/form/CreateEdit.mdx

@@ -4,7 +4,7 @@ import * as Stories from './CreateEdit.stories';
 
 <Meta of={Stories} />
 
-# FragmentUserFormCreateEdit
+# UserFormCreateEdit
 
 A form to either create or edit a user.
 

next-ui/src/fragments/README.md

@@ -1,35 +0,0 @@
-# Fragments
-
-Vue template files in this directory are automatically imported.
-
-## 🚀 Usage
-
-Importing is handled by [unplugin-vue-components](https://github.com/unplugin/unplugin-vue-components). This plugin automatically imports `.vue` files created in the `src/components` directory, and registers them as global components. This means that you can use any component in your application without having to manually import it.
-
-The following example assumes a component located at `src/components/MyComponent.vue`:
-
-```vue
-<template>
-    <div>
-        <MyComponent />
-    </div>
-</template>
-
-<script lang="ts" setup>
-//
-</script>
-```
-
-When your template is rendered, the component's import will automatically be inlined, which renders to this:
-
-```vue
-<template>
-    <div>
-        <MyComponent />
-    </div>
-</template>
-
-<script lang="ts" setup>
-import MyComponent from '@/components/MyComponent.vue'
-</script>
-```

next-ui/src/pages/account/activity.vue

@@ -3,7 +3,7 @@
     fluid
     class="pa-0 pa-sm-4 h-100 h-sm-auto"
   >
-    <FragmentUserAuthenticationActivityTable for-me />
+    <UserAuthenticationActivityTable for-me />
   </v-container>
 </template>
 

next-ui/src/pages/account/api-keys.stories.ts

@@ -1,12 +1,12 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
 
 import ApiKeys from './api-keys.vue'
-import DialogConfirm from '@/fragments/fragment/dialog/Confirm.vue'
+import DialogConfirmInstance from '@/components/dialog/ConfirmInstance.vue'
 
 const meta = {
   component: ApiKeys,
   render: (args: object) => ({
-    components: { ApiKeys, DialogConfirm },
+    components: { ApiKeys, DialogConfirm: DialogConfirmInstance },
     setup() {
       return { args }
     },

next-ui/src/pages/account/api-keys.vue

@@ -6,7 +6,7 @@
     <EmptyStateNetworkError v-if="error" />
 
     <template v-else>
-      <FragmentApikeyTable
+      <ApikeyTable
         :api-keys="apiKeys"
         :loading="isLoading"
         @enter-add-api-key="(target) => (dialogGenerateActivator = target)"
@@ -17,7 +17,7 @@
       />
     </template>
 
-    <FragmentApikeyGenerateDialog
+    <ApikeyGenerateDialog
       :activator="dialogGenerateActivator"
       :fullscreen="display.xs.value"
     />

next-ui/src/pages/account/details.stories.ts

@@ -1,12 +1,12 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
 
 import AccountDetails from './details.vue'
-import DialogConfirmEdit from '@/fragments/fragment/dialog/ConfirmEdit.vue'
+import DialogConfirmEditInstance from '@/components/dialog/ConfirmEditInstance.vue'
 
 const meta = {
   component: AccountDetails,
   render: (args: object) => ({
-    components: { AccountDetails, DialogConfirmEdit },
+    components: { AccountDetails, DialogConfirmEdit: DialogConfirmEditInstance },
     setup() {
       return { args }
     },

next-ui/src/pages/claim.vue

@@ -121,8 +121,8 @@
       <v-row justify="center">
         <v-col cols="auto">
           <div class="d-flex ga-4">
-            <FragmentLocaleSelector />
-            <FragmentThemeSelector />
+            <LocaleSelector />
+            <ThemeSelector />
           </div>
         </v-col>
       </v-row>

next-ui/src/pages/history.vue

@@ -3,7 +3,7 @@
     fluid
     class="pa-0 pa-sm-4 h-100 h-sm-auto"
   >
-    <FragmentHistoryTable />
+    <HistoryTable />
   </v-container>
 </template>
 

next-ui/src/pages/import/books.stories.ts

@@ -1,13 +1,13 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
 
 import ImportBooks from './books.vue'
-import DialogConfirmEdit from '@/fragments/fragment/dialog/ConfirmEdit.vue'
+import DialogConfirmEditInstance from '@/components/dialog/ConfirmEditInstance.vue'
 import { delay, http } from 'msw'
 
 const meta = {
   component: ImportBooks,
   render: (args: object) => ({
-    components: { ImportBooks, DialogConfirmEdit },
+    components: { ImportBooks, DialogConfirmEdit: DialogConfirmEditInstance },
     setup() {
       return { args }
     },

next-ui/src/pages/import/books.vue

@@ -3,7 +3,7 @@
     :loading="isLoading"
     @scan="(directory) => doScan(directory)"
   />
-  <FragmentImportBooksTransientBooksTable
+  <ImportBooksTransientBooksTable
     v-if="transientBooks"
     :loading="isLoading"
     :books="transientBooks"

next-ui/src/pages/login.vue

@@ -115,8 +115,8 @@
       <v-row justify="center">
         <v-col cols="auto">
           <div class="d-flex ga-4">
-            <FragmentLocaleSelector />
-            <FragmentThemeSelector />
+            <LocaleSelector />
+            <ThemeSelector />
           </div>
         </v-col>
       </v-row>

next-ui/src/pages/server/activity.vue

@@ -3,7 +3,7 @@
     fluid
     class="pa-0 pa-sm-4 h-100 h-sm-auto"
   >
-    <FragmentUserAuthenticationActivityTable />
+    <UserAuthenticationActivityTable />
   </v-container>
 </template>
 

next-ui/src/pages/server/settings.stories.ts

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
 
 import settings from './settings.vue'
-import SnackQueue from '@/fragments/fragment/SnackQueue.vue'
+import SnackQueue from '@/components/SnackQueue.vue'
 import { http, delay } from 'msw'
 
 import { response401Unauthorized } from '@/mocks/api/handlers'

next-ui/src/pages/server/users.stories.ts

@@ -2,14 +2,18 @@ import type { Meta, StoryObj } from '@storybook/vue3-vite'
 
 import users from './users.vue'
 import { http, delay } from 'msw'
-import DialogConfirm from '@/fragments/fragment/dialog/Confirm.vue'
-import DialogConfirmEdit from '@/fragments/fragment/dialog/ConfirmEdit.vue'
+import DialogConfirmInstance from '@/components/dialog/ConfirmInstance.vue'
+import DialogConfirmEditInstance from '@/components/dialog/ConfirmEditInstance.vue'
 import { response401Unauthorized } from '@/mocks/api/handlers'
 
 const meta = {
   component: users,
   render: (args: object) => ({
-    components: { users, DialogConfirm, DialogConfirmEdit },
+    components: {
+      users,
+      DialogConfirm: DialogConfirmInstance,
+      DialogConfirmEdit: DialogConfirmEditInstance,
+    },
     setup() {
       return { args }
     },

next-ui/src/pages/server/users.vue

@@ -6,7 +6,7 @@
     <EmptyStateNetworkError v-if="error" />
 
     <template v-else>
-      <FragmentUserTable
+      <UserTable
         :users="users"
         :loading="isLoading"
         @add-user="showDialog(ACTION.ADD)"
@@ -34,7 +34,7 @@ import { useMessagesStore } from '@/stores/messages'
 import { useIntl } from 'vue-intl'
 import { useDisplay } from 'vuetify'
 import UserDeletionWarning from '@/components/user/DeletionWarning.vue'
-import UserFormCreateEdit from '@/fragments/fragment/user/form/CreateEdit.vue'
+import UserFormCreateEdit from '@/components/user/form/CreateEdit.vue'
 import UserFormChangePassword from '@/components/user/form/ChangePassword.vue'
 import {
   useCreateUser,

next-ui/vite.config.mts

@@ -38,7 +38,7 @@ export default defineConfig({
     }),
     Components({
       dts: 'src/components.d.ts',
-      dirs: ['src/components', 'src/fragments'],
+      dirs: ['src/components'],
       extensions: ['vue', 'ts'],
       include: [/\.vue$/, /\.[tj]s$/],
       globsExclude: ['src/**/*.stories.*'],