Merge pull request #6385 from nextcloud-libraries/feat/import-paths

feat: Allow to import without `dist`

CHANGELOG.md

@@ -5,6 +5,18 @@
 
 # Changelog
 
+## [v8.23.0](https://github.com/nextcloud-libraries/nextcloud-vue/tree/v8.23.0) (UNRELEASED)
+[Full Changelog](https://github.com/nextcloud-libraries/nextcloud-vue/compare/v8.22.0...v8.23.0)
+
+### 🚀 Enhancements
+* The individual import path of components, composables, directives, and functions was changed.
+  The type of import is (e.g. `components`) is now lowercase and the `dist` will be omitted.
+  For example to import the `NcButton` component the path has changed:
+  - from `import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'`.
+  - to `import NcButton from '@nextcloud/vue/components/NcButton'`
+
+  The old import paths are still valid, but deprecated and will be removed in version 9.
+
 ## [v8.22.0](https://github.com/nextcloud-libraries/nextcloud-vue/tree/v8.22.0) (2024-12-20)
 [Full Changelog](https://github.com/nextcloud-libraries/nextcloud-vue/compare/v8.21.0...v8.22.0)
 

docs/composables.md

@@ -8,7 +8,7 @@
 To use any composable, import and use it according to documentation or Vue guidelines, for example:
 
 ```js static
-import { useIsMobile } from '@nextcloud/vue/dist/composables/useIsMobile.js'
+import { useIsMobile } from '@nextcloud/vue/composables/useIsMobile'
 
 export default {
 	setup() {
@@ -21,7 +21,7 @@ export default {
 or in `<script setup>`:
 
 ```js static
-import { useIsMobile } from '@nextcloud/vue/dist/composables/useIsMobile.js'
+import { useIsMobile } from '@nextcloud/vue/composables/useIsMobile'
 
 const isMobile = useIsMobile()
 ```

docs/composables/useHotKey.md

@@ -8,7 +8,7 @@ It respects Nextcloud's value of ```OCP.Accessibility.disableKeyboardShortcuts``
 
 ### Usage
 ```js static
-import { useHotKey } from '@nextcloud/vue/dist/Composables/useHotKey/index.js'
+import { useHotKey } from '@nextcloud/vue/composables/useHotKey'
 
 const stopCallback = useHotKey(key, callback, options)
 ```

docs/composables/useIsDarkTheme.md

@@ -7,7 +7,7 @@
 import {
     useIsDarkTheme,
     useIsDarkThemeElement,
-} from '@nextcloud/vue/dist/Composables/useIsDarkTheme.js'
+} from '@nextcloud/vue/composables/useIsDarkTheme'
 ```
 
 Same as `isDarkTheme` functions, but with reactivity.

docs/directives.md

@@ -8,7 +8,7 @@
 To use any directive, import and register it locally, for example:
 
 ```js static
-import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js'
+import Tooltip from '@nextcloud/vue/directives/Tooltip'
 
 export default {
     directives: {
@@ -19,13 +19,13 @@ export default {
 or in `<script setup>`:
 
 ```js static
-import vTooltip from '@nextcloud/vue/dist/Directives/Tooltip.js'
+import vTooltip from '@nextcloud/vue/directives/Tooltip'
 ```
 
 You can also register any directive globally. But it is not recommended.
 
 ```js static
-import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js'
+import Tooltip from '@nextcloud/vue/directives/Tooltip'
 
 Vue.directive('Tooltip', Tooltip)
 ```

docs/directives/focus.md

@@ -4,7 +4,7 @@
 -->
 
 ```js static
-import Focus from '@nextcloud/vue/dist/Directives/Focus.js'
+import Focus from '@nextcloud/vue/directives/Focus'
 ```
 
 Focus an element when it is mounted to DOM.

docs/directives/linkify.md

@@ -4,7 +4,7 @@
 -->
 
 ```js static
-import Linkify from '@nextcloud/vue/dist/Directives/Linkify.js'
+import Linkify from '@nextcloud/vue/directives/Linkify'
 ```
 
 Automatically make links in rendered text clickable.

docs/directives/tooltip.md

@@ -4,7 +4,7 @@
 -->
 
 ```js static
-import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js'
+import Tooltip from '@nextcloud/vue/directives/Tooltip'
 ```
 
 Tooltip directive based on [v-tooltip](https://github.com/Akryum/v-tooltip).

docs/functions/a11y.md

@@ -3,7 +3,7 @@
  - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 ```js static
-import { isA11yActivation } from '@nextcloud/vue/dist/Functions/a11y.js'
+import { isA11yActivation } from '@nextcloud/vue/functions/a11y'
 ```
 
 ## Definitions

docs/functions/emoji.md

@@ -9,7 +9,7 @@ import {
     emojiAddRecent,
     getCurrentSkinTone,
     setCurrentSkinTone,
-} from '@nextcloud/vue/dist/Functions/emoji.js'
+} from '@nextcloud/vue/functions/emoji'
 ```
 
 ## Definitions

docs/functions/isDarkTheme.md

@@ -7,7 +7,7 @@
 import {
     isDarkTheme,
     checkIfDarkTheme,
-} from '@nextcloud/vue/dist/Functions/isDarkTheme.js'
+} from '@nextcloud/vue/functions/isDarkTheme'
 ```
 
 Check whether the dark theme is enabled in Nextcloud. 

docs/functions/spawnDialog.md

@@ -5,7 +5,7 @@
 ```ts static
 import {
 	spawnDialog,
-} from '@nextcloud/vue/dist/Functions/dialog.js'
+} from '@nextcloud/vue/functions/dialog'
 ```
 
 ## Definitions

docs/functions/usernameToColor.md

@@ -3,7 +3,7 @@
  - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 ```js static
-import usernameToColor from '@nextcloud/vue/dist/Functions/usernameToColor.js'
+import usernameToColor from '@nextcloud/vue/functions/usernameToColor'
 ```
 
 ## Definition

docs/index.md

@@ -33,7 +33,7 @@ You can also import individual module without bundling the full library.
 
 
 ```js static
-import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar'
+import NcAvatar from '@nextcloud/vue/components/NcAvatar'
 ```
 
 ## Recommendations

package.json

@@ -55,6 +55,22 @@
     "./dist/Composables/*.js": {
       "import": "./dist/Composables/*.mjs",
       "require": "./dist/Composables/*.cjs"
+    },
+    "./components/*": {
+      "import": "./dist/Components/*.mjs",
+      "require": "./dist/Components/*.cjs"
+    },
+    "./composables/*": {
+      "import": "./dist/Composables/*.mjs",
+      "require": "./dist/Composables/*.cjs"
+    },
+    "./directives/*": {
+      "import": "./dist/Directives/*.mjs",
+      "require": "./dist/Directives/*.cjs"
+    },
+    "./functions/*": {
+      "import": "./dist/Functions/*.mjs",
+      "require": "./dist/Functions/*.cjs"
     }
   },
   "files": [