@nextcloud/vue 9.3.1 → 9.3.3

package/CHANGELOG.md

@@ -7,6 +7,27 @@
 
 All notable changes to this project will be documented in this file.
 
+## [v9.3.3](https://github.com/nextcloud-libraries/nextcloud-vue/tree/v9.3.3) (2026-01-09)
+[Full Changelog](https://github.com/nextcloud-libraries/nextcloud-vue/compare/v9.3.2...v9.3.3)
+
+### 🐛 Fixed bugs
+* fix(NcActions): migrate to custom icons in Checkbox and Radio actions [\#8020](https://github.com/nextcloud-libraries/nextcloud-vue/pull/8020) \([ShGKme](https://github.com/ShGKme)\)
+
+### Other Changes
+* deps: pin focus-trap library to v7.6.6 [\#8061](https://github.com/nextcloud-libraries/nextcloud-vue/pull/8061) \([Antreesy](https://github.com/Antreesy)\)
+
+## [v9.3.2](https://github.com/nextcloud-libraries/nextcloud-vue/tree/v9.3.2) (2026-01-08)
+[Full Changelog](https://github.com/nextcloud-libraries/nextcloud-vue/compare/v9.3.1...v9.3.2)
+
+### 🐛 Fixed bugs
+* build: fix translations in Vue modules [\#8037](https://github.com/nextcloud-libraries/nextcloud-vue/pull/8037) \([susnux](https://github.com/susnux)\)
+* fix(NcModal): adjust max height of the modal [\#8042](https://github.com/nextcloud-libraries/nextcloud-vue/pull/8042) \([kra-mo](https://github.com/kra-mo)\)
+* fix: animate toggle switch icon [\#8045](https://github.com/nextcloud-libraries/nextcloud-vue/pull/8045) \([ShGKme](https://github.com/ShGKme)\)
+
+### Other Changes
+* chore(README): recommend using `npm pack` and styleguidist instead of `npm link` [\#8018](https://github.com/nextcloud-libraries/nextcloud-vue/pull/8018) \([ShGKme](https://github.com/ShGKme)\)
+* chore(README): remove Firefox note [\#8019](https://github.com/nextcloud-libraries/nextcloud-vue/pull/8019) \([ShGKme](https://github.com/ShGKme)\)
+
 ## [v9.3.1](https://github.com/nextcloud-libraries/nextcloud-vue/tree/v9.3.1) (2025-12-10)
 [Full Changelog](https://github.com/nextcloud-libraries/nextcloud-vue/compare/v9.3.0...v9.3.1)
 

package/README.md

@@ -53,7 +53,7 @@ import { NcButton, useHotKey } from '@nextcloud/vue'
 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
+   - If possible, add tests and documentation 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`
@@ -69,17 +69,50 @@ More information on how to contribute: [https://nextcloud.com/contribute/](https
 
 ### 🧑‍💻 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:
+First, install dependencies with `npm`:
 
-1. Install the dependencies with `npm ci`
-2. Build the components every time you do changes: `npm run build`
-    - To make development build: `npm run dev`
-    - To watch for changes and rebuild automatically: `npm run watch`
-    - To watch for changes and rebuild development build: `npm run dev:watch`
-3. Connect it to your local Nextcloud development setup:
-    - In this repository do `npm link`
-    - 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`)
+```sh
+npm ci
+```
+
+#### 🐸 Development with Styleguidist
+
+The simplest way to develop and debug `@nextcloud/vue` is to use our live documentation via [`vue-styleguidist`](https://vue-styleguidist.github.io). 
+
+Run the development server with component documentation and playground:
+```sh
+npm run styleguide
+```
+
+You can also test if the design still works with a legacy Nextcloud version by setting `NEXTCLOUD_LEGACY` ENV variable.
+
+```sh
+NEXTCLOUD_LEGACY=y npm run styleguide
+```
+
+#### ☁️ Development with Nextcloud apps
+
+To test or debug `@nextcloud/vue` in Nextcloud app you need to [pack](https://docs.npmjs.com/cli/v11/commands/npm-pack) the library and **install** it in the app.
+
+1. In `nextcloud-vue`:
+   1. Build the library with:
+      - `npm run dev` for development build
+      - `npm run build` for production build
+   2. Pack with `npm pack`
+2. In the Nextcloud app:
+   1. Install the packed file by path to the file, for example:
+      ```sh
+      npm install --no-save ../../../nextcloud-vue-9.3.1.tgz
+      ```
+   2. Rebuild the app or run it in `watch` mode
+   3. To remove the linked package, reinstall dependencies with `npm ci`
+3. Repeat every time you do a change in `@nextcloud/vue`
+4. Do not commit the created `.tgz` file
+
+> [!WARNING]
+> Do not use `npm link`
+>
+> While it is a simple and popular way to connect a local npm package to another package, it doesn't have proper dependency resolution which leads to issues. Adding a package via `npm pack` does exactly the same as installing a published package.
 
 ### 🌐 Translations
 
@@ -104,39 +137,6 @@ Our awesome translation community will then be notified and a bot will sync tran
 npm run l10n:extract
 ```
 
-### 🐸 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.
-
-You can also test if the design still works with a legacy Nextcloud version.
-To do so just run `NEXTCLOUD_LEGACY=y npm run styleguide`.
-
-#### Using vue-devtools in Firefox
-
-If you want to use [vue-devtools](https://github.com/vuejs/vue-devtools) in Firefox, you need to:
-
-* Either enable the [HMR Enabler](https://github.com/nextcloud/hmr_enabler) app …
-* … or patch your nextcloud instance as follows:
-
-```diff
-diff --git a/lib/public/AppFramework/Http/ContentSecurityPolicy.php b/lib/public/AppFramework/Http/ContentSecurityPolicy.php
-index 0e3a6a705d..416b8b0fb9 100644
---- a/lib/public/AppFramework/Http/ContentSecurityPolicy.php
-+++ b/lib/public/AppFramework/Http/ContentSecurityPolicy.php
-@@ -41,9 +41,9 @@ namespace OCP\AppFramework\Http;
-  */
- class ContentSecurityPolicy extends EmptyContentSecurityPolicy {
-        /** @var bool Whether inline JS snippets are allowed */
--       protected $inlineScriptAllowed = false;
-+       protected $inlineScriptAllowed = true;
-        /** @var bool Whether eval in JS scripts is allowed */
--       protected $evalScriptAllowed = false;
-+       protected $evalScriptAllowed = true;
-        /** @var bool Whether strict-dynamic should be set */
-        protected $strictDynamicAllowed = false;
-        /** @var array Domains from which scripts can get loaded */
-```
-
 ## 📤 Releasing a new version
 
 - Pull the latest changes from `main` or `stableX`

package/dist/assets/NcActionCheckbox-DLJQfCUI.css

@@ -0,0 +1,127 @@
+/**
+ * SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+/**
+ * SPDX-FileCopyrightText: 2021 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+/*
+* Ensure proper alignment of the vue material icons
+*/
+.material-design-icon[data-v-2947bc3b] {
+  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[data-v-2947bc3b]:hover, li.action.active[data-v-2947bc3b] {
+  border-radius: 6px;
+  padding: 0;
+}
+li.action[data-v-2947bc3b]:hover {
+  background-color: var(--color-background-hover);
+}
+.action--disabled[data-v-2947bc3b] {
+  pointer-events: none;
+  opacity: 0.5;
+}
+.action--disabled[data-v-2947bc3b]:hover, .action--disabled[data-v-2947bc3b]:focus {
+  cursor: default;
+  opacity: 0.5;
+}
+.action--disabled[data-v-2947bc3b] * {
+  opacity: 1 !important;
+}
+.action-checkbox[data-v-2947bc3b] {
+  display: flex;
+  align-items: flex-start;
+  width: 100%;
+  height: auto;
+  margin: 0;
+  padding: 0;
+  padding-inline-end: calc((var(--default-clickable-area) - 16px) / 2);
+  box-sizing: border-box;
+  cursor: pointer;
+  white-space: nowrap;
+  color: var(--color-main-text);
+  border: 0;
+  border-radius: 0;
+  background-color: transparent;
+  box-shadow: none;
+  font-weight: normal;
+  font-size: var(--default-font-size);
+  line-height: var(--default-clickable-area);
+}
+.action-checkbox > span[data-v-2947bc3b] {
+  cursor: pointer;
+  white-space: nowrap;
+}
+.action-checkbox__icon[data-v-2947bc3b] {
+  width: var(--default-clickable-area);
+  height: var(--default-clickable-area);
+  opacity: 1;
+  background-position: calc((var(--default-clickable-area) - 16px) / 2) center;
+  background-size: 16px;
+  background-repeat: no-repeat;
+}
+.action-checkbox[data-v-2947bc3b] .material-design-icon {
+  width: var(--default-clickable-area);
+  height: var(--default-clickable-area);
+  opacity: 1;
+}
+.action-checkbox[data-v-2947bc3b] .material-design-icon .material-design-icon__svg {
+  vertical-align: middle;
+}
+.action-checkbox__longtext-wrapper[data-v-2947bc3b], .action-checkbox__longtext[data-v-2947bc3b] {
+  max-width: 220px;
+  line-height: 1.6em;
+  padding: calc((var(--default-clickable-area) - 1.6em) / 2) 0;
+  cursor: pointer;
+  text-align: start;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.action-checkbox__longtext[data-v-2947bc3b] {
+  cursor: pointer;
+  white-space: pre-wrap !important;
+}
+.action-checkbox__name[data-v-2947bc3b] {
+  font-weight: bold;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  max-width: 100%;
+  display: block;
+}
+.action-checkbox__description[data-v-2947bc3b] {
+  display: block;
+  white-space: pre-wrap;
+  font-size: var(--font-size-small);
+  line-height: var(--default-line-height);
+  color: var(--color-text-maxcontrast);
+  cursor: pointer;
+}
+.action-checkbox__menu-icon[data-v-2947bc3b] {
+  margin-inline: auto calc((var(--default-clickable-area) - 16px) / 2 * -1);
+}
+.action[data-v-2947bc3b]:has(:focus-visible) {
+  outline: 2px solid currentColor;
+}
+.action-checkbox__icon[data-v-2947bc3b] {
+  color: var(--color-primary-element);
+}
+.action-checkbox__input[data-v-2947bc3b] {
+  width: 20px;
+  height: 20px;
+  margin: auto;
+  position: absolute;
+  z-index: -1;
+  opacity: 0 !important;
+}

package/dist/assets/NcActionRadio-Bd4RFH-l.css

@@ -0,0 +1,127 @@
+/**
+ * SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+/**
+ * SPDX-FileCopyrightText: 2021 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+/*
+* Ensure proper alignment of the vue material icons
+*/
+.material-design-icon[data-v-6c208ddd] {
+  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[data-v-6c208ddd]:hover, li.action.active[data-v-6c208ddd] {
+  border-radius: 6px;
+  padding: 0;
+}
+li.action[data-v-6c208ddd]:hover {
+  background-color: var(--color-background-hover);
+}
+.action--disabled[data-v-6c208ddd] {
+  pointer-events: none;
+  opacity: 0.5;
+}
+.action--disabled[data-v-6c208ddd]:hover, .action--disabled[data-v-6c208ddd]:focus {
+  cursor: default;
+  opacity: 0.5;
+}
+.action--disabled[data-v-6c208ddd] * {
+  opacity: 1 !important;
+}
+.action-radio[data-v-6c208ddd] {
+  display: flex;
+  align-items: flex-start;
+  width: 100%;
+  height: auto;
+  margin: 0;
+  padding: 0;
+  padding-inline-end: calc((var(--default-clickable-area) - 16px) / 2);
+  box-sizing: border-box;
+  cursor: pointer;
+  white-space: nowrap;
+  color: var(--color-main-text);
+  border: 0;
+  border-radius: 0;
+  background-color: transparent;
+  box-shadow: none;
+  font-weight: normal;
+  font-size: var(--default-font-size);
+  line-height: var(--default-clickable-area);
+}
+.action-radio > span[data-v-6c208ddd] {
+  cursor: pointer;
+  white-space: nowrap;
+}
+.action-radio__icon[data-v-6c208ddd] {
+  width: var(--default-clickable-area);
+  height: var(--default-clickable-area);
+  opacity: 1;
+  background-position: calc((var(--default-clickable-area) - 16px) / 2) center;
+  background-size: 16px;
+  background-repeat: no-repeat;
+}
+.action-radio[data-v-6c208ddd] .material-design-icon {
+  width: var(--default-clickable-area);
+  height: var(--default-clickable-area);
+  opacity: 1;
+}
+.action-radio[data-v-6c208ddd] .material-design-icon .material-design-icon__svg {
+  vertical-align: middle;
+}
+.action-radio__longtext-wrapper[data-v-6c208ddd], .action-radio__longtext[data-v-6c208ddd] {
+  max-width: 220px;
+  line-height: 1.6em;
+  padding: calc((var(--default-clickable-area) - 1.6em) / 2) 0;
+  cursor: pointer;
+  text-align: start;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.action-radio__longtext[data-v-6c208ddd] {
+  cursor: pointer;
+  white-space: pre-wrap !important;
+}
+.action-radio__name[data-v-6c208ddd] {
+  font-weight: bold;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  max-width: 100%;
+  display: block;
+}
+.action-radio__description[data-v-6c208ddd] {
+  display: block;
+  white-space: pre-wrap;
+  font-size: var(--font-size-small);
+  line-height: var(--default-line-height);
+  color: var(--color-text-maxcontrast);
+  cursor: pointer;
+}
+.action-radio__menu-icon[data-v-6c208ddd] {
+  margin-inline: auto calc((var(--default-clickable-area) - 16px) / 2 * -1);
+}
+.action[data-v-6c208ddd]:has(:focus-visible) {
+  outline: 2px solid currentColor;
+}
+.action-radio__icon[data-v-6c208ddd] {
+  color: var(--color-primary-element);
+}
+.action-radio__input[data-v-6c208ddd] {
+  width: 20px;
+  height: 20px;
+  margin: auto;
+  position: absolute;
+  z-index: -1;
+  opacity: 0 !important;
+}

package/dist/assets/{NcCheckboxRadioSwitch-C_70VMQr.css → NcCheckboxRadioSwitch-DpYt0YbL.css}

@@ -9,14 +9,14 @@
 /*
 * Ensure proper alignment of the vue material icons
 */
-.material-design-icon[data-v-a1ac280f] {
+.material-design-icon[data-v-a060196e] {
   display: flex;
   align-self: center;
   justify-self: center;
   align-items: center;
   justify-content: center;
 }
-.checkbox-content[data-v-a1ac280f] {
+.checkbox-content[data-v-a060196e] {
   display: flex;
   align-items: center;
   flex-direction: row;
@@ -28,41 +28,42 @@
   width: 100%;
   max-width: fit-content;
 }
-.checkbox-content__wrapper[data-v-a1ac280f] {
+.checkbox-content__wrapper[data-v-a060196e] {
   flex: 1 0 0;
   max-width: 100%;
 }
-.checkbox-content__text[data-v-a1ac280f]:empty {
+.checkbox-content__text[data-v-a060196e]:empty {
   display: none;
 }
-.checkbox-content-checkbox:not(.checkbox-content--button-variant) .checkbox-content__icon[data-v-a1ac280f], .checkbox-content-radio:not(.checkbox-content--button-variant) .checkbox-content__icon[data-v-a1ac280f], .checkbox-content-switch:not(.checkbox-content--button-variant) .checkbox-content__icon[data-v-a1ac280f] {
+.checkbox-content-checkbox:not(.checkbox-content--button-variant) .checkbox-content__icon[data-v-a060196e], .checkbox-content-radio:not(.checkbox-content--button-variant) .checkbox-content__icon[data-v-a060196e], .checkbox-content-switch:not(.checkbox-content--button-variant) .checkbox-content__icon[data-v-a060196e] {
   margin-block: calc((var(--default-clickable-area) - 2 * var(--default-grid-baseline) - var(--icon-height)) / 2) auto;
+  line-height: 0;
 }
-.checkbox-content-checkbox:not(.checkbox-content--button-variant) .checkbox-content__icon--has-description[data-v-a1ac280f], .checkbox-content-radio:not(.checkbox-content--button-variant) .checkbox-content__icon--has-description[data-v-a1ac280f], .checkbox-content-switch:not(.checkbox-content--button-variant) .checkbox-content__icon--has-description[data-v-a1ac280f] {
+.checkbox-content-checkbox:not(.checkbox-content--button-variant) .checkbox-content__icon--has-description[data-v-a060196e], .checkbox-content-radio:not(.checkbox-content--button-variant) .checkbox-content__icon--has-description[data-v-a060196e], .checkbox-content-switch:not(.checkbox-content--button-variant) .checkbox-content__icon--has-description[data-v-a060196e] {
   display: flex;
   align-items: center;
   margin-block-end: 0;
   align-self: start;
 }
-.checkbox-content__icon[data-v-a1ac280f] > * {
+.checkbox-content__icon[data-v-a060196e] > * {
   width: var(--icon-size);
   height: var(--icon-height);
   color: var(--color-primary-element);
 }
-.checkbox-content__description[data-v-a1ac280f] {
+.checkbox-content__description[data-v-a060196e] {
   display: block;
   color: var(--color-text-maxcontrast);
 }
-.checkbox-content--button-variant .checkbox-content__icon[data-v-a1ac280f]:not(.checkbox-content__icon--checked) > * {
+.checkbox-content--button-variant .checkbox-content__icon[data-v-a060196e]:not(.checkbox-content__icon--checked) > * {
   color: var(--color-primary-element);
 }
-.checkbox-content--button-variant .checkbox-content__icon--checked[data-v-a1ac280f] > * {
+.checkbox-content--button-variant .checkbox-content__icon--checked[data-v-a060196e] > * {
   color: var(--color-primary-element-text);
 }
-.checkbox-content--has-text[data-v-a1ac280f] {
+.checkbox-content--has-text[data-v-a060196e] {
   padding-inline-end: calc((var(--default-clickable-area) - 16px) / 2);
 }
-.checkbox-content[data-v-a1ac280f], .checkbox-content[data-v-a1ac280f] * {
+.checkbox-content[data-v-a060196e], .checkbox-content[data-v-a060196e] * {
   cursor: pointer;
   flex-shrink: 0;
 }/**

package/dist/assets/{NcFormBoxSwitch-BmyNQCbA.css → NcFormBoxSwitch-DScgbxtv.css}

@@ -9,14 +9,14 @@
 /*
 * Ensure proper alignment of the vue material icons
 */
-._material-design-icon_hjv1a_12 {
+._material-design-icon_njiy8_12 {
   display: flex;
   align-self: center;
   justify-self: center;
   align-items: center;
   justify-content: center;
 }
-input._formBoxSwitch__input_hjv1a_20 {
+input._formBoxSwitch__input_njiy8_20 {
   margin: 0;
   width: var(--default-clickable-area);
   /* Keep it visually hidden but on the position of visual switch icon */
@@ -28,10 +28,4 @@ input._formBoxSwitch__input_hjv1a_20 {
   /* Override server styles */
   height: auto;
   cursor: inherit;
-}
-._formBoxSwitch__icon_hjv1a_34 {
-  color: var(--color-text-maxcontrast);
-}
-input:checked + ._formBoxSwitch__icon_hjv1a_34 {
-  color: var(--color-primary-element);
 }

package/dist/assets/NcIconToggleSwitch-C29S_5Rp.css

@@ -0,0 +1,30 @@
+/**
+ * SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+/**
+ * SPDX-FileCopyrightText: 2021 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+/*
+* Ensure proper alignment of the vue material icons
+*/
+._material-design-icon_ixmnx_12 {
+  display: flex;
+  align-self: center;
+  justify-self: center;
+  align-items: center;
+  justify-content: center;
+}
+._iconToggleSwitch_ixmnx_20 {
+  color: var(--6bd152af);
+  transition: color var(--animation-quick) ease;
+}
+._iconToggleSwitch_ixmnx_20 svg {
+  /* Unlike other icons, this icon is not a square */
+  height: auto !important;
+}
+._iconToggleSwitch_ixmnx_20 circle {
+  cx: var(--16fd8ca9);
+  transition: cx var(--animation-quick) ease;
+}