npm - @nextcloud/vue - Versions diffs - 9.0.0-alpha.6 → 9.0.0-alpha.7 - Mend

@nextcloud/vue 9.0.0-alpha.6 → 9.0.0-alpha.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (459) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -7,22 +7,49 @@
 All notable changes to this project will be documented in this file.
-## [v9.0.0](https://github.com/nextcloud-libraries/nextcloud-vue/tree/v9.0.0-alpha.6) (unreleased)
-[Full Changelog](https://github.com/nextcloud-libraries/nextcloud-vue/compare/v8.22.0...v9.0.0-alpha.6)
+## [v9.0.0](https://github.com/nextcloud-libraries/nextcloud-vue/tree/v9.0.0-alpha.7) (unreleased)
+[Full Changelog](https://github.com/nextcloud-libraries/nextcloud-vue/compare/v8.23.1...v9.0.0-alpha.7)
 ### 💥 Breaking Changes
 * The package now uses Vue 3 instead of Vue 2.7
 * The package is now a native ESM package and the CommonJS entry points were dropped!
-* The old import paths like `@nextcloud/vue/dist/Components/NcComponent.js` were removed, please use the new ones (`@nextcloud/vue/components/NcComponent`) instead.
-* The plugin registering all the components and directives globally is removed.
-  Use local registration instead. Use [`unplugin-vue-components`](https://github.com/unplugin/unplugin-vue-components) if you need an alternative.
-* The `limitWidth` prop of `NcSettingsSection` was removed (the content is now always limited width) [\#5605](https://github.com/nextcloud-libraries/nextcloud-vue/pull/5605)
-* `NcCounterBubble`: remove default slot and make `count` prop required [\#5997](https://github.com/nextcloud-libraries/nextcloud-vue/pull/5997)x
-* The `closing` and `opening` events of `NcAppSidebar` were removed as they are directly emitted when the sidebar was opened when using `v-if` and also just duplicated the state of the `open` prop [\#5606](https://github.com/nextcloud-libraries/nextcloud-vue/pull/5606)
-* The `checked` prop was renamed to `modelValue`, the `update:checked` event was renamed to `update:modelValue`. This affects the following components:
+#### Plugin registering removed
+The plugin registering all the components and directives globally is removed.
+Instead use local registration of components and directives.
+If you really need an alternative we recommend using [`unplugin-vue-components`](https://github.com/unplugin/unplugin-vue-components).
+#### Import paths changed
+The old import paths like `@nextcloud/vue/dist/Components/NcComponent.js` were removed.
+Instead use the new ones (`@nextcloud/vue/components/NcComponent`).
+Example shell command to do the refactoring:
+```sh
+PATTERN='s,@nextcloud/vue/dist/([^/]+)/([^.]+).js,@nextcloud/vue/\L\1\E/\2,'
+find src \
+  -name "*.vue" \
+  -exec sed -i -re "$PATTERN" \{\} +
+```
+#### Container components now default to `box-sizing: border-box`
+For container components that can be directly mounted to `<body>` the `box-sizing` was adjusted to match the behavior of `NcContent`.
+The `box-sizing: border-box` is now default for following components and its content:
+- `NcDialog`
+- `NcModal`
+- `NcPopover`
+#### Consistent usage of `modelValue` prop
+All input elements were refactored to use the `modelValue` prop instead of the now removed `value` / `checked` prop and emit the `update:modelValue` event instead of the removed `update:checked` / `update:value` / `input` events.
+This which allows consistent using of `v-model`.
+Affected components:
+- Removed `checked` prop and `update:checked` event
   - `NcActionCheckbox`
   - `NcActionRadio`
   - `NcCheckboxRadioSwitch`
+* Removed `value` prop and `update:value` / `input` events:
+* The `modelValue` prop of `NcActionRadio` is expecting to have type `string|number` to be compared to `value` prop.
 * The `value` prop was renamed to `modelValue`, the `update:value` or `input` events were renamed to `update:modelValue`. This affects the following components:
   - `NcActionInput`
   - `NcActionTextEditable`
@@ -39,16 +66,52 @@ All notable changes to this project will be documented in this file.
   - `NcTextArea`
   - `NcTextField`
   - `NcTimezonePicker`
-* The leading icon slot was changed from `#default` to `#icon` in `Nc*Field` components:
-  - `NcInputField`
-  - `NcTextField`
-  - `NcPasswordField`
-* The `exact` prop was removed. This affects the following components:
+#### Removing the `exact` prop
+The `exact` prop, previously used by `router-link` components, was removed.
+This affects the following components:
   - `NcActionRouter`
   - `NcAppNavigationItem`
   - `NcBreadcrumb`
   - `NcListItem`
-* The `isFullscreen` and `isMobile` mixins were removed. Use the according composables instead.
+#### Renaming icon slot of `Nc*Field`
+The leading icon slot was changed from `#default` to `#icon` in `Nc*Field` components:
+  - `NcInputField`
+  - `NcTextField`
+  - `NcPasswordField`
+#### Boolean props default to `false`
+Some boolean props that have been deprecated in favor of alternatives with default value `false`,
+are now removed. Following components have been adjusted:
+|     Component | Removed deprecated prop | New alternative |
+|---------------|-------------------------|-----------------|
+|     `NcModal` |           `enableSwipe` |  `disableSwipe` |
+|`NcAppContent` |  `allowSwipeNavigation` | `disabledSwipe` |
+#### Mixins are removed
+Mixins only work in Options API and are in general not recommended by Vue anymore:
+> In Vue 2, mixins were the primary mechanism for creating reusable chunks of component logic. While mixins continue to be supported in Vue 3, Composable functions using Composition API is now the preferred approach for code reuse between components.
+As this library also uses composition API now all required mixins have been migrated to composables which work in Options API and Composition API.
+Especially the following are now provided as composables:
+- `isFullscreen` is now provided as `useIsFullscreen`
+- `isMobile` is now provided as `useIsMobile`
+#### Other breaking changes
+- `NcAppSidebar`
+  - The `closing` and `opening` events were removed.
+    They are directly emitted when the sidebar was opened when using `v-if`
+    and also just duplicated the state of the `open` prop [\#5606](https://github.com/nextcloud-libraries/nextcloud-vue/pull/5606)
+- `NcCounterBubble`
+  - The default slot was removed
+  - The `count` prop is now required [\#5997](https://github.com/nextcloud-libraries/nextcloud-vue/pull/5997)
+- `NcSettingsSection`
+  - The `limitWidth` was removed (the content is now always limited width) [\#5605](https://github.com/nextcloud-libraries/nextcloud-vue/pull/5605)
+* The `isFullscreen`, and `isMobile` mixins were removed. Use the according composables instead.
+* The `clickOutsideOptions` mixin is removed
 * The `box-sizing: border-box` is now default for following components and its content. This is done to match behaviour of `NcContent` (as they can be mounted directly to `body`):
   - `NcModal`
   - `NcPopover`
@@ -82,12 +145,13 @@ All notable changes to this project will be documented in this file.
 * fix(NcAppSidebar): apply toggle offset transition only on sidebar transition [\#6154](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6154) \([ShGKme](https://github.com/ShGKme)\)
 * fix(NcAvatar): attributes order [\#6377](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6377) \([raimund-schluessler](https://github.com/raimund-schluessler)\)
 * fix!: make 'box-sizing: border-box' a default behaviour for all containers [\#6390](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6390) \([Antreesy](https://github.com/Antreesy)\)
+* fix(NcSelect): `required` doesn't work [\#6458](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6458) \([ShGKme](https://github.com/ShGKme)\)
 ### Changed
 * ci: Migrate component tests to Playwright [\#5818](https://github.com/nextcloud-libraries/nextcloud-vue/pull/5818) \([susnux](https://github.com/susnux)\)
 * Change module import paths - drop dist and .js-extension [\#6389](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6389) \([susnux](https://github.com/susnux)\)
 * The plugin was removed - components need to be registered manually now [\#6349](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6349) \([ShGKme](https://github.com/ShGKme)\)
-* chore(Nc*Field): icon slot change note [\#6398](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6398) \([ShGKme](https://github.com/ShGKme)\)
+* chore(Nc*Field): icon slot change note [\#6398](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6398) \([ShGKme](https://github.com/ShGKme)\)
 * Rename `checked` prop to `modelValue` [\#4994](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4994) \([raimund-schluessler](https://github.com/raimund-schluessler)\)
 * Unify `modelValue` naming [\#4990](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4990) \([raimund-schluessler](https://github.com/raimund-schluessler)\)
 * Remove deprecated mixins [\#4830](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4830) \([raimund-schluessler](https://github.com/raimund-schluessler)\)
@@ -131,8 +195,81 @@ All notable changes to this project will be documented in this file.
 * chore(deps): Update dependencies for `next` branch [\#6007](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6007) \([susnux](https://github.com/susnux)\)
 * chore: Update styles from server for styleguide [\#6025](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6025) \([susnux](https://github.com/susnux)\)
 * docs: add missing `useIsDarkTheme` import [\#6215](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6215) \([ShGKme](https://github.com/ShGKme)\)
-* fix(NcCounterBubble): small typo in docs [\#6378](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6378) \([raimund-schluessler](https://github.com/raimund-schluessler)\)
-* fix(NcActionButton): order in components [\#6375](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6375) \([raimund-schluessler](https://github.com/raimund-schluessler)\)
+* docs(NcCounterBubble): small typo in docs [\#6378](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6378) \([raimund-schluessler](https://github.com/raimund-schluessler)\)
+* docs(NcActionButton): order in components [\#6375](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6375) \([raimund-schluessler](https://github.com/raimund-schluessler)\)
+* refactor(useHotKey): migrate code to Typescript [\#6430](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6430) \([susnux](https://github.com/susnux)\)
+* chore: restructure `package.json` [\#6405](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6405) \([susnux](https://github.com/susnux)\)
+* chore: Refactor changelog to make breaking changes better readable [\#6428](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6428) \([susnux](https://github.com/susnux)\)
+## [v8.23.1](https://github.com/nextcloud-libraries/nextcloud-vue/tree/v8.23.1) (2025-02-13)
+### 🐛 Fixed bugs
+* fix(l10n): fix build error after `@nextcloud/l10n` bump [\#6521](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6521) \([ShGKme](https://github.com/ShGKme)\)
+## [v8.23.0](https://github.com/nextcloud-libraries/nextcloud-vue/tree/v8.23.0) (2025-02-13)
+### 📝 Notes
+* 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:
+  ```ts
+  // Old import
+  import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+  // New way to import
+  import NcButton from '@nextcloud/vue/components/NcButton'
+  ```
+  The old import paths are still valid, but deprecated and will be removed in version 9.
+* `#default` slot for leading icon is now deprecated in components `NcInputField`, `NcTextField`, `NcPasswordField`. Use `#icon` slot instead.
+* `NcActionRadio` is now expecting String|Number in `v-model` directive (to compare with passed `value`) instead of Boolean. Consider it for migration.
+* Some boolean props have been deprecated in favor of alternatives with default value `false`.
+  This allows to use shorthand notation on the template, as a prop with a default value of `false`
+  will be set to `true` if it is set (without any value) in the template,
+  similar to native HTML boolean attributes.
+  Following components have been adjusted:
+  |     Component |        Deprecated prop | New alternative |
+  |---------------|------------------------|-----------------|
+  |     `NcModal` |          `enableSwipe` |  `disableSwipe` |
+  |`NcAppContent` | `allowSwipeNavigation` | `disabledSwipe` |
+### 🚀 Enhancements
+* feat: Allow to import without `dist` [\#6385](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6385) \([susnux](https://github.com/susnux)\)
+* feat: Use boolean props with default value false [\#6452](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6452) \([susnux](https://github.com/susnux)\)
+* feat(Nc*Field): add `#icon` slot for forward compatibility with v9, `#default` slot is deprecated [\#6399](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6399) \([ShGKme](https://github.com/ShGKme)\)
+* fix(NcActionRadio): change `modelValue` to behave like NcCheckboxRadioSwitch [\#6264](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6264) [\#6470](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6470) \([Antreesy](https://github.com/Antreesy)\)
+### 🐛 Fixed bugs
+* fix(NcAction*): Fix RTL support for component [\#6507](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6507) \([Antreesy](https://github.com/Antreesy)\)
+* fix(NcActions): Remove on `mousemove` listener for auto focus elements [\#6475](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6475) \([susnux](https://github.com/susnux)\)
+* fix(NcActionCheckbox): Fix padding in RTL mode [\#6354](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6354) \([falghamdi125](https://github.com/falghamdi125)\)
+* fix(NcAppNavigation + NcUserBubble + NcRichContenteditable): RTL support [\#6455](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6455) \([DorraJaouad](https://github.com/DorraJaouad)\)
+* fix(NcAvatar): title not shown when component used without menu [\#6297](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6297) \([Koc](https://github.com/Koc)\)
+* fix(NcAvatar): user status and interactivity toggle button Bidi support [\#6407](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6407) \([DorraJaouad](https://github.com/DorraJaouad)\)
+* fix(NcColorPicker): close popover on submit event [\#6336](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6336) \([Antreesy](https://github.com/Antreesy)\)
+* fix(NcCounterBubble): show original count in title when shortened [\#6395](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6395) \([ShGKme](https://github.com/ShGKme)\)
+* fix(NcDateTimePicker): selected and hover time is not readable [\#6492](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6492) \([ShGKme](https://github.com/ShGKme)\)
+* fix(NcDateTimePickerNative): do not set invalid value on clear event [\#6387](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6387) \([Antreesy](https://github.com/Antreesy)\)
+* fix(NcDateTimePickerNative): style alignment with other input components [\#6454](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6454) \([Antreesy](https://github.com/Antreesy)\)
+* fix(NcEmojiPicker): add arrow navigation [\#6466](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6466) \([ShGKme](https://github.com/ShGKme)\)
+* fix(NcEmojiPicker): adjust styles to correctly fit emojis [\#6465](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6465) \([ShGKme](https://github.com/ShGKme)\)
+* fix(NcListItem): Fix padding in RTL mode [\#6359](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6359) \([falghamdi125](https://github.com/falghamdi125)\)
+* fix(NcModal): Enforce opaque backdrop if needed [\#6434](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6434) \([susnux](https://github.com/susnux)\)
+* fix(NcPopover): emit `after-show` after `focus-trap` init to correctly return focus [\#6342](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6342) \([ShGKme](https://github.com/ShGKme)\)
+* fix(NcPopover): blurry content on scaled page in Chromium [\#6512](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6512) \([ShGKme](https://github.com/ShGKme)\)
+* fix(NcRich*): style fixes and RTL support [\#6474](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6474) \([Antreesy](https://github.com/Antreesy)\)
+* fix(NcRichContenteditable): remove value linkify [\#6372](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6372) \([ShGKme](https://github.com/ShGKme)\)
+* fix(NcRichText): adjust conditions for highlight syntax [\#6259](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6259) \([Antreesy](https://github.com/Antreesy)\)
+* fix(NcRichText): extract un-escaping of text/code nodes with XML-like content [\#6499](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6499) [\#6501](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6501) \([Antreesy](https://github.com/Antreesy)\)
+* fix(NcTeamResources): Do not make extraneous requests for resources [\#6379](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6379) \([Pytal](https://github.com/Pytal)\)
+### Changed
+* chore(stylelint): `csstools/use-logical` [\#6419](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6419) \([ShGKme](https://github.com/ShGKme)\)
+* chore(stylelint): fix scripts to be unix-compatible [\#6418](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6418) \([ShGKme](https://github.com/ShGKme)\)
+* chore(docs): Do not override assets while building the styleguide [\#6408](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6408) \([susnux](https://github.com/susnux)\)
+* chore(docs): update documentation [\#6460](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6460) \([ShGKme](https://github.com/ShGKme)\)
+* Updated workflows and dependencies
+* Updated translations
 ## [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)

package/README.md CHANGED Viewed

@@ -3,44 +3,71 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
-# Vue components
+# @nextcloud/vue
-[![npm last version](https://img.shields.io/npm/v/@nextcloud/vue.svg?style=flat-square)](https://www.npmjs.com/package/@nextcloud/vue)
-[![Dependabot status](https://img.shields.io/badge/Dependabot-enabled-brightgreen.svg?longCache=true&style=flat-square&logo=dependabot)](https://dependabot.com)
+[![npm last version](https://img.shields.io/npm/v/@nextcloud/vue.svg?style=flat)](https://www.npmjs.com/package/@nextcloud/vue)
+[![Dependabot status](https://img.shields.io/badge/Dependabot-enabled-brightgreen.svg?longCache=true&style=flat&logo=dependabot)](https://dependabot.com)
-This repo contains the various Vue.js components that Nextcloud uses for its internal design and structure. It provides standardized UI elements for building Nextcloud app frontends with Vue.js.
+> 🖼️ UI Kit for building Nextcloud apps with Vue
-## Documentation
+- ✨ Standardized UI Components
+- 🛠️ Composables and frontend utilities
+- 🔗 [Reference providers](https://docs.nextcloud.com/server/latest/developer_manual/digging_deeper/reference.html) utilities
-A list of available components with examples to try out is available in the [documentation](https://nextcloud-vue-components.netlify.app).
+## 📄 Documentation
-The documentation is built from the latest development branch, for stable releases the documentation can be found matching the latest minor version:
+| Version        | Target                | Documentation                                         |
+|----------------|-----------------------|-------------------------------------------------------|
+| v9.x [next]    | Nextcloud 30+ (Vue 3) | https://next--nextcloud-vue-components.netlify.app    |
+| v8.x [master]  | Nextcloud 28+ (Vue 2) | https://nextcloud-vue-components.netlify.app          |
+| v7.x [stable7] | Nextcloud 25 - 27     | https://stable7--nextcloud-vue-components.netlify.app |
+| v6.x [stable6] | Nextcloud 24 - 25     | https://stable6--nextcloud-vue-components.netlify.app |
-- [master](https://nextcloud-vue-components.netlify.app).
-- [7.x.x](https://stable7--nextcloud-vue-components.netlify.app/)
-- [6.x.x](https://stable6--nextcloud-vue-components.netlify.app/)
-## Getting started
-### App example
-If you want to check a real live example of a nextcloud app that uses this library, you can head over to https://github.com/skjnldsv/vueexample/
-We will try to maintain this repository the best we can, but some example might be obsolete. Always check this [repository documentation](#documentation).
-### Install the library
+## 📦 Install
 ```bash
 npm i @nextcloud/vue@next
 ```
-### Usage
+## 🚀 Usage
+Import corresponding components and other modules on use. Check the documentation for more details.
+```js
+import NcButton from '@nextcloud/vue/components/NcButton'
+import { useHotKey } from '@nextcloud/vue/composables/useHotKey'
+```
-To use a component, just import it:
+Import from a single root is available as well. Use with caution: this might lead to slower build time and larger bundles in some cases.
 ```js
-import { NcAppNavigation, NcActions, NcActionButton } from '@nextcloud/vue'
+import { NcButton, useHotKey } from '@nextcloud/vue'
 ```
-## Development setup
+## 🤝 Contributing
+### 📜 How to contribute
+1. It's always good to check/create an issue first and discuss the problem or feature you want to work on
+2. Fork the repository and create a new branch
+3. Make the changes
+4. Check the change in Vue-Styleguidist and/or Nextcloud apps
+   - Do not forget to `lint` and `test` your changes
+   - If possible, add tests for your changes
+5. Commit and push your changes, create a Pull Request
+   - Make sure to follow the [Conventional Commits](https://www.conventionalcommits.org) in commit messages, and PR titles, for example:\
+     `fix(NcButton): correct layout on Safari`
+   - Make sure to follow the **Pull Request template**
+   - Sign-off you commits for the [Developer Certificate of Origin (DCO)](https://developercertificate.org/)
+6. Get your PR reviewed
+   - If you don't receive a feedback in a week, feel free to mention the maintainers, for example, last developers worked on the module
+7. Get your PR merged
+Please read the [Code of Conduct](https://nextcloud.com/community/code-of-conduct/). This document offers some guidance to ensure Nextcloud participants can cooperate effectively in a positive and inspiring atmosphere and to explain how together we can strengthen and support each other.
+More information on how to contribute: [https://nextcloud.com/contribute/](https://nextcloud.com/contribute/)
+### 🧑‍💻 Development setup
 If you want to work on improving the components it’s best to run the latest code and link it to your local Nextcloud installation:
@@ -54,64 +81,36 @@ If you want to work on improving the components it’s best to run the latest co
     - In the repository of an app do `npm link @nextcloud/vue` (you need to re-link any time you do `npm ci` in the app)
 4. Then build the app with: `npm run build` (or watch for changes with `npm run watch`)
-## Translations
+### 🌐 Translations
-This library uses translated strings.
-When you edit/create a translated string, you need to run `npm run l10n:extract` to update the source files.
-Our awesome translation community will then be notified and a bot will sync those changes automatically.
+Use `t` and `n` functions from `src/l10n.js` to display translated strings. They follow `gettext` and `ngettext` interface from [`@nextcloud/l10n/gettext`](https://nextcloud-libraries.github.io/nextcloud-l10n/modules/_nextcloud_l10n_gettext.html).
-Nonetheless, it requires a bit of caution.
-When you implement a translated string, import the `translate` or `translatePlural` and add it in your methods like so:
 ```vue
+<script setup lang="ts">
+import { t } from '../../l10n.js'
+</script>
 <template>
 	<element>
 		{{ t('Choose') }}
 	</element>
 </template>
-<script>
-import { translate as t } from '@nextcloud/l10n'
-export default {
-	methods: {
-		t,
-	},
-}
-</script>
 ```
-Please note that using a translated string as an attribute will _NOT_ work.
-But it will work if it's within an element (like the example above)
-```vue
-<template>
-	<element :prop="t('This will not work')" />
-</template>
-```
-You will instead have to define the string in the data section and use the relevant variable reference.
-```vue
-<template>
-	<element :prop="chooseProp" />
-</template>
+When you edit/create a translated string, you need to update the l10n files.
+Our awesome translation community will then be notified and a bot will sync translations automatically.
-<script>
-export default {
-	data() {
-		return {
-			chooseProp: t('Choose'),
-		},
-	}
-}
-</script>
+```sh
+npm run l10n:extract
 ```
-## Styleguide
+### 🐸 Styleguidist
 When developing new components or extending components, make sure to also have some bits of related documentation like examples, where applicable.
 To test components and the documentation in that context, you can run `npm run styleguide` to run a local server that serves the style guide
 with all the components.
-### Using vue-devtools in Firefox
+#### Using vue-devtools in Firefox
 If you want to use [vue-devtools](https://github.com/vuejs/vue-devtools) in Firefox, you need to:
@@ -137,7 +136,7 @@ index 0e3a6a705d..416b8b0fb9 100644
         /** @var array Domains from which scripts can get loaded */
 ```
-## Releasing a new version
+## 📤 Releasing a new version
 - Pull the latest changes from `master` or `stableX`
 - Checkout a new branch with the tag name (e.g `v4.0.1`): `git checkout -b v<version>`

package/dist/assets/{NcActionButton-BLoWchS5.css → NcActionButton-CVjVxm7I.css} RENAMED Viewed

@@ -9,34 +9,37 @@
 /*
 * Ensure proper alignment of the vue material icons
 */
-.material-design-icon[data-v-8e10d6ef] {
+.material-design-icon[data-v-a329de3e] {
   display: flex;
   align-self: center;
   justify-self: center;
   align-items: center;
   justify-content: center;
 }
 /**
  * SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
-li.action.active[data-v-8e10d6ef] {
-  background-color: var(--color-background-hover);
+li.action[data-v-a329de3e]:hover, li.action.active[data-v-a329de3e] {
   border-radius: 6px;
   padding: 0;
 }
-.action--disabled[data-v-8e10d6ef] {
+li.action[data-v-a329de3e]:hover {
+  background-color: var(--color-background-hover);
+}
+.action--disabled[data-v-a329de3e] {
   pointer-events: none;
   opacity: 0.5;
 }
-.action--disabled[data-v-8e10d6ef]:hover, .action--disabled[data-v-8e10d6ef]:focus {
+.action--disabled[data-v-a329de3e]:hover, .action--disabled[data-v-a329de3e]:focus {
   cursor: default;
   opacity: 0.5;
 }
-.action--disabled[data-v-8e10d6ef] * {
+.action--disabled[data-v-a329de3e] * {
   opacity: 1 !important;
 }
-.action-button[data-v-8e10d6ef] {
+.action-button[data-v-a329de3e] {
   display: flex;
   align-items: flex-start;
   width: 100%;
@@ -56,11 +59,11 @@ li.action.active[data-v-8e10d6ef] {
   font-size: var(--default-font-size);
   line-height: var(--default-clickable-area);
 }
-.action-button > span[data-v-8e10d6ef] {
+.action-button > span[data-v-a329de3e] {
   cursor: pointer;
   white-space: nowrap;
 }
-.action-button__icon[data-v-8e10d6ef] {
+.action-button__icon[data-v-a329de3e] {
   width: var(--default-clickable-area);
   height: var(--default-clickable-area);
   opacity: 1;
@@ -68,15 +71,15 @@ li.action.active[data-v-8e10d6ef] {
   background-size: 16px;
   background-repeat: no-repeat;
 }
-.action-button[data-v-8e10d6ef] .material-design-icon {
+.action-button[data-v-a329de3e] .material-design-icon {
   width: var(--default-clickable-area);
   height: var(--default-clickable-area);
   opacity: 1;
 }
-.action-button[data-v-8e10d6ef] .material-design-icon .material-design-icon__svg {
+.action-button[data-v-a329de3e] .material-design-icon .material-design-icon__svg {
   vertical-align: middle;
 }
-.action-button__longtext-wrapper[data-v-8e10d6ef], .action-button__longtext[data-v-8e10d6ef] {
+.action-button__longtext-wrapper[data-v-a329de3e], .action-button__longtext[data-v-a329de3e] {
   max-width: 220px;
   line-height: 1.6em;
   padding: calc((var(--default-clickable-area) - 1.6em) / 2) 0;
@@ -85,11 +88,11 @@ li.action.active[data-v-8e10d6ef] {
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.action-button__longtext[data-v-8e10d6ef] {
+.action-button__longtext[data-v-a329de3e] {
   cursor: pointer;
   white-space: pre-wrap !important;
 }
-.action-button__name[data-v-8e10d6ef] {
+.action-button__name[data-v-a329de3e] {
   font-weight: bold;
   text-overflow: ellipsis;
   overflow: hidden;
@@ -97,9 +100,9 @@ li.action.active[data-v-8e10d6ef] {
   max-width: 100%;
   display: inline-block;
 }
-.action-button__menu-icon[data-v-8e10d6ef] {
+.action-button__menu-icon[data-v-a329de3e] {
   margin-inline: auto calc((var(--default-clickable-area) - 16px) / 2 * -1);
 }
-.action-button__pressed-icon[data-v-8e10d6ef] {
+.action-button__pressed-icon[data-v-a329de3e] {
   margin-inline: auto calc((var(--default-clickable-area) - 16px) / 2 * -1);
 }

package/dist/assets/{NcActionCaption-B7FZTc3Y.css → NcActionCaption-BNDtcWJ7.css} RENAMED Viewed

@@ -9,14 +9,14 @@
 /*
 * Ensure proper alignment of the vue material icons
 */
-.material-design-icon[data-v-b9668c9e] {
+.material-design-icon[data-v-7bf21eca] {
   display: flex;
   align-self: center;
   justify-self: center;
   align-items: center;
   justify-content: center;
 }
-.app-navigation-caption[data-v-b9668c9e] {
+.app-navigation-caption[data-v-7bf21eca] {
   color: var(--color-text-maxcontrast);
   line-height: var(--default-clickable-area);
   white-space: nowrap;
@@ -24,8 +24,8 @@
   box-shadow: none !important;
   user-select: none;
   pointer-events: none;
-  margin-left: 12px;
-  padding-right: 14px;
+  margin-inline-start: 12px;
+  padding-inline-end: 14px;
   height: var(--default-clickable-area);
   display: flex;
   align-items: center;

package/dist/assets/{NcActionCheckbox-CoQEhC0c.css → NcActionCheckbox-CnTyr-NN.css} RENAMED Viewed

@@ -9,34 +9,37 @@
 /*
 * Ensure proper alignment of the vue material icons
 */
-.material-design-icon[data-v-259d078c] {
+.material-design-icon[data-v-1b11dff3] {
   display: flex;
   align-self: center;
   justify-self: center;
   align-items: center;
   justify-content: center;
 }
 /**
  * SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
-li.action.active[data-v-259d078c] {
-  background-color: var(--color-background-hover);
+li.action[data-v-1b11dff3]:hover, li.action.active[data-v-1b11dff3] {
   border-radius: 6px;
   padding: 0;
 }
-.action--disabled[data-v-259d078c] {
+li.action[data-v-1b11dff3]:hover {
+  background-color: var(--color-background-hover);
+}
+.action--disabled[data-v-1b11dff3] {
   pointer-events: none;
   opacity: 0.5;
 }
-.action--disabled[data-v-259d078c]:hover, .action--disabled[data-v-259d078c]:focus {
+.action--disabled[data-v-1b11dff3]:hover, .action--disabled[data-v-1b11dff3]:focus {
   cursor: default;
   opacity: 0.5;
 }
-.action--disabled[data-v-259d078c] * {
+.action--disabled[data-v-1b11dff3] * {
   opacity: 1 !important;
 }
-.action-checkbox[data-v-259d078c] {
+.action-checkbox[data-v-1b11dff3] {
   display: flex;
   align-items: flex-start;
   width: 100%;
@@ -54,26 +57,24 @@ li.action.active[data-v-259d078c] {
   line-height: var(--default-clickable-area);
   /* checkbox/radio fixes */
 }
-.action-checkbox__checkbox[data-v-259d078c] {
+.action-checkbox__checkbox[data-v-1b11dff3] {
   position: absolute;
-  top: auto;
-  left: -10000px;
-  overflow: hidden;
-  width: 1px;
-  height: 1px;
+  inset-inline-start: 0 !important;
+  z-index: -1;
+  opacity: 0;
 }
-.action-checkbox__label[data-v-259d078c] {
+.action-checkbox__label[data-v-1b11dff3] {
   display: flex;
   align-items: center;
   width: 100%;
   padding: 0 !important;
   padding-inline-end: calc((var(--default-clickable-area) - 16px) / 2) !important;
 }
-.action-checkbox__label[data-v-259d078c]::before {
+.action-checkbox__label[data-v-1b11dff3]::before {
   margin-block: 0 !important;
   margin-inline: calc((var(--default-clickable-area) - 14px) / 2) !important;
 }
-.action-checkbox--disabled[data-v-259d078c],
-.action-checkbox--disabled .action-checkbox__label[data-v-259d078c] {
+.action-checkbox--disabled[data-v-1b11dff3],
+.action-checkbox--disabled .action-checkbox__label[data-v-1b11dff3] {
   cursor: pointer;
 }