Skip to content

v9.0.0

Choose a tag to compare

View all tags
@susnux susnux released this 25 Sep 11:08
· 1103 commits to main since this release
v9.0.0
dd64239
This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Verified
Learn about vigilant mode.

v9.0.0 (2025-09-25)

💥 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 package has dropped compatibility with Nextcloud before version 31.
    This mostly affects the visual appearance of components.
  • The NcSettingsInputText component was deprecated in v8 and is now removed.

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.

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:

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
    • NcColorPicker
    • NcDateTimePicker
    • NcDateTimePickerNative
    • NcInputField
    • NcPasswordField
    • NcRichContenteditable
    • NcSelect
    • NcSelectTags
    • NcSettingsInputText
    • NcSettingsSelectGroup
    • NcTextArea
    • NcTextField
    • NcTimezonePicker

Removing the exact prop

The exact prop, previously used by router-link components, was removed.
This affects the following components:

  • NcActionRouter
  • NcAppNavigationItem
  • NcBreadcrumb
  • NcButton
  • NcListItem

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
NcAppContent allowSwipeNavigation disabledSwipe
NcAvatar showUserStatus hideStatus
NcAvatar showUserStatusCompact verboseStatus
NcModal closeButtonContained closeButtonOutside
NcModal enableSwipe disableSwipe
NcModal canClose noClose
NcDialog canClose noClose
NcPopover focusTrap noFocusTrap

Additionally the default value closeOnClickOutside for NcModal was aligned with NcDialog and now defaults to false.

Removal of type and nativeType props

The type property for button components (NcButton, NcActions, NcDialogButton) was deprecated for the usage with color variants like primary.
The fallback behavior was removed, type now only allows the native HTML button type like button, reset or submit.
Instead use the variant property for the color variant.

The nativeType property was removed in favor of type.

<!-- Old: Nextcloud Vue v8 -->
<NcButton type="primary" native-type="submit">Submit</NcButton>
<!-- New: Nextcloud Vue v9 -->
<NcButton type="submit" variant="primary">Submit</NcButton>

Event names

To have a consistent naming for custom event the following events were deprecated
and now are removed in favor of a new consistent event name:

 Component |       Old event |       New event

---------------|-----------------|----------------
NcAppContent | resize:list | resizeList
NcRichText | interact:todo | interactTodo

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 and isMobileState was removed.

The richEditing mixin can be replaced by just using the NcRichText component.

Other breaking changes

  • NcActions and NcAction*
    • The ariaHidden property is removed, please do no longer provide it, otherwise the root element will inherit incorrect aria-hidden.
  • 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
  • NcButton now does no longer has role="button" when used as a link (passing the href prop or a router link (to)).
    Instead, for accessibility and semantical correctness, has the link role.
  • NcColorPicker
    • The deprecated close event was removed in favor of the closed event, this was done for consistent event names.
  • NcCounterBubble
    • The default slot was removed
    • The count prop is now required #5997
  • NcHeaderMenu
    • open, close and cancel events were removed in favor of opened and closed events #6429
  • NcSettingsSection
    • The limitWidth was removed (the content is now always limited width) #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 behavior of NcContent (as they can be mounted directly to body):
    • NcModal
    • NcPopover
  • NcDateTimePicker
    • The range property was removed in favor of type="datetime-range" (datetime ranges), type="date-range" (date only ranges), and type="time-range" (time only ranges).
    • The lang property was replaced with the locale property.
    • The formatter property was removed.
  • NcPopover is no longer a transparent wrapper over the floating-vue package.
    Instead only use the documented properties and events.
    If you find some use cases not covered by the documented interface, please open a feature request.
  • NcRichContenteditable
    • NcAutoCompleteResult: The title prop was deprecated and is now removed in favor of the label prop
    • NcMentionBubble: The title prop was deprecated and is now removed in favor of the label prop
  • NcSelect
    • userSelect property was removed, instead just use the NcSelectUsers component
    • closeOnSelect property was removed in favor of keepOpen.
  • NcTextField:
    • The value 'arrowRight' for the trailingButtonIcon property was deprecated is now removed in favor of arrowEnd.
  • Tooltip directive was deprecated in v8 and is now removed.
    This was done in favor of native tooltips using the title attribute, which is better for accessibility.
    If you really need custom formatted tooltips, you can use NcPopover instead.
  • The useFormatDateTime composable - only exported from default entry point - is removed.
    Instead you can now use useFormatTime for formatting a time to a local date string or useFormatRelativeTime to format it to a humanized string like a day ago.
  • The usernameToColor function is named exported instead of a default export.
    This was done to have consistent export types.

🚀 Enhancements

  • Allow writing components using Typescript and provide type definitions for NcButton #4525 (susnux)
  • feat(NcDateTimePicker): add time range picker and align naming #6728 (susnux)
  • feat(dialogs/spawnDialog): separate spawning options from dialog props and allow Element as a container #6756 (ShGKme)
  • feat(dialogs/spawnDialogs)!: do not toRaw the result #6760 (ShGKme)
  • feat(dialogs/spawnDialog): return promise with the result #6758 (ShGKme)
  • feat(dialogs/spawnDialog)!: replace onClose callback with Promise #6759 (ShGKme)
  • feat(NcChip): allow to define the actions container #6813 (susnux)
  • feat(NcActionButton): introduce description prop #6932 (Antreesy)
  • feat: add useFormatRelativeTime composable #7067 (susnux)
  • feat(NcPasswordField): allow to set visibility state #7135 (susnux)
  • feat(NcThemeProvider): allow to override the current theme for parts of the UI #6764 (susnux)
  • fix(NcDateTimePicker): adjust input padding inline end #7208 (raimund-schluessler)
  • feat(NcColorPicker): add proper open-state handling #7212 (susnux)
  • feat(NcAppNavigationItem): add active as slot property to the "icon"-slot #7273 (susnux)
  • feat(NcButton): add border with a bottom shadow #7282 (susnux)
  • feat: add new border design for NcInputField and NcTextArea #7351 (susnux)
  • feat(NcCheckboxRadioSwitch): Add support for a description field #7378 (CarlSchwan)
  • feat: add NcKbd component #7401 (ShGKme)
  • feat(NcAssistant*): provide components for consistent integrations design #7398 (susnux)
  • feat(NcRadioGroup): add component to group radio buttons #7441 (susnux)
  • feat(NcColorPicker): allow to clear selected value #7363 (susnux)
  • feat(NcPopover): replace closeOnClickOutside with noCloseOnClickOutside #7525 (ShGKme)

🐛 Fixed bugs

  • feat(NcAppSidebar): add info slot #6666 (Antreesy)
  • fix(NcActions): trigger forgotten closed event and correctly handle open #6706 (ShGKme)
  • fix(NcActionInput): listen to correct events #5231 (raimund-schluessler)
  • fix(NcRichText*): listen to correct events form NcSelect #5239 (raimund-schluessler)
  • fix(vue3): Inherit $attrs to Dropdown in NcPopover #4564 (raimund-schluessler)
  • fix(eslint): run eslint on migrated files #4630 (raimund-schluessler)
  • fix(NcListItemIcon): correctly use default slot in examples #4695 (raimund-schluessler)
  • fix(NcAvatar): don't show false for disabled tooltip #4740 (raimund-schluessler)
  • fix(NcCheckboxRadioSwitch): fix v-on with no argument expects an object value #4840 (raimund-schluessler)
  • fix(NcActions): find actions deeper nested #4804 (raimund-schluessler)
  • fix(NcUserBubble): import warn correctly #4906 (raimund-schluessler)
  • fix(docs): use v-model instead of sync #4969 (raimund-schluessler)
  • fix(NcCheckboxRadioSwitch): correctly declare update:modelValue #5006 (raimund-schluessler)
  • fix(test): correctly provide props in test #5012 (raimund-schluessler)
  • fix(NcBreadcrumb): fix setting class on root element #5010 (raimund-schluessler)
  • fix(NcBreadcrumb): correctly emit drag events #5011 (raimund-schluessler)
  • fix(NcCheckboxContent): correctly check default slot #5058 (raimund-schluessler)
  • fix(NcBreadcrumbs): do not forward refs to hidden crumbs #5066 (raimund-schluessler)
  • fix(NcAppSidebar): adjust animation class names #5168 (raimund-schluessler)
  • fix(docs): bring back NcAppSidebar in docs #5167 (raimund-schluessler)
  • fix(NcRichText): crash on router links rendering #5672 (ShGKme)
  • fix(NcListItem): correctly use NcCounterBubble after slot removal #6003 (ShGKme)
  • fix(NcActions): Role menu needs a label assigned so label by trigger #6023 (susnux)
  • fix(NcListItem): change condition to display the counter number #6117 (julien-nc)
  • fix(NcAppSidebar): apply toggle offset transition only on sidebar transition #6154 (ShGKme)
  • fix(NcAvatar): attributes order #6377 (raimund-schluessler)
  • fix!: make 'box-sizing: border-box' a default behaviour for all containers #6390 (Antreesy)
  • fix(NcSelect): required doesn't work #6458 (ShGKme)
  • fix(dialogs/spawnDialog): enhance spawnDialog types #6781 (mattersj)
  • fix(NcDateTimePicker): adjust padding to prevent horizontal scrolling #6722 (susnux)
  • fix(NcDateTimePicker): prevent emitting [Date, null] #6726 (susnux)
  • fix(dialogs/spawnDialog)!: support vue-devtool but lose appContext #6752 (ShGKme)
  • fix(NcIconSvgWrapper): center svg span wrapper #6869 (skjnldsv)
  • fix(NcChip): do not rerender slots to check if they are available #6903 (susnux)
  • fix(dialog/spawnDialog): incorrect return type for optional result #6905 (ShGKme)
  • add fallBackFocus to NcPopover #6679
  • fix(NcEmptyContent): description styling for mobile #6936 (Plesin)
  • style(NcAppSidebar): remove custom styles from close button #6944 (Antreesy)
  • fix: add missing NcSelectUsers export #6947 (susnux)
  • fix(NcAppContent): adapt to new emitted event object with splitpanes ^4.0.0 #6950 (wofferl)
  • fix(NcActionInput): register used NcColorPicker component #6956 (susnux)
  • fix(NcSelectUsers): use correct type for model and add tests for model-value handling #6957 (susnux)
  • fix(NcAppNavigationToggle): restore button design and remove wrong attribute #6984 (susnux)
  • fix(NcInputField): unresolved component and state color #6994 (susnux)
  • fix(NcAppNavigationItem): multi level padding #6861 (GretaD)
  • fix(NcTextField)!: make trailing button icon for confirmation also work on RTL #6993 (susnux)
  • fix(NcAppContent): incorrect page title from a different core.apps format in Nextcloud 30 #7010 (julien-nc)
  • fix(NcButton): correctly apply reverse padding #7029 (raimund-schluessler)
  • fix(NcAvatar): update 'hasStatus' flag if changed #7033 (Antreesy)
  • fix(NcCheckboxRadioSwitch): align icons with the first row of label #7043 (Antreesy)
  • fix(actions): use pointer cursor for action button text #7042 (ChristophWurst)
  • fix(NcAvatar): migrate from deprecated showUserStatus prop #7053 (Antreesy)
  • fix(NcAppNavigationSettings): adjust style and padding of button #7018 (raimund-schluessler)
  • fix(NcRichText): always render code blocks in LTR direction #7056 (Antreesy)
  • fix(NcHeaderMenu): bring caret back #7071 (ShGKme)
  • fix(NcChip): adjust default prop declaration #7074 (Antreesy)
  • fix(NcPopover): component crash when unmounted shown #7077 (Antreesy)
  • fix(NcListItem): let active prop take higher priority #7086 (DorraJaouad)
  • fix(NcActions + NcEmojiPicker): no focus-trap when needed, extra focus-trap when not #7096 (ShGKme)
  • fix(NcDateTimePicker): make clearable work #7103 (raimund-schluessler)
  • fix(NcRichText): adjust markdown styles after migration #7106 (Antreesy)
  • fix(NcActionText): remove br between action name and action long text #7116 (GretaD)
  • fix(NcNoteCard): too large icon padding #7118 (raimund-schluessler)
  • fix(NcAppNavigationItem): TypeError: this.$refs.actions.$refs.menuButton is undefined #7143
  • fix(useHotKey): try to derive latin keys from key codes of non-latin characters #7110 (Antreesy)
  • style(NcRichText): consider reference widgets in markdown styles #7142 (Antreesy)
  • fix(NcDateTimePicker): correctly import library CSS #7051 (raimund-schluessler)
  • fix(NcListItem): correctly handle unmounting #7151 (Antreesy)
  • perf(utils): ensure only 64px or 512px avatars are loaded #6749 (susnux)
  • perf(NcAvatar): ensure avatar does not add mutation observer #7157 (ShGKme)
  • refactor(NcButton): remove redundant style #7154 (skjnldsv)
  • fix(NcInputField): remove browser injected clear button #7167 (susnux)
  • fix(NcModal): use --border-radius-container #7176 (susnux)
  • fix(useIsDarkTheme): provide default value to silence runtime warnings #7185 (susnux)
  • fix(NcAppSidebar): remove slot styling for buttons in the description #7182 (susnux)
  • fix(NcAvatar): contacts menu is broken #7194 (ShGKme)
  • fix(NcActionInput): lazy load large children #7195 (ShGKme)
  • fix(NcButton): use correct type for to prop from VueRouter #7201 (susnux)
  • fix(NcButton): render with "to" and prevent wrong context crash #7100 (ShGKme)
  • fix(NcContent): flip skip action image in rtl mode #7202 (skjnldsv)
  • fix: remove asterisk from filename allowing checkout on Windows #7211 (ShGKme)
  • fix: correctly apply types so that type definitions are generated during build #7207 (susnux)
  • fix(NcColorPicker): use proper directional arrow icon for submit #7217 (susnux)
  • fix(NcBreadCrumb): correctly pass container for NcActions #7237 (susnux)
  • ci: use correct base branch when doing styling update on stable* #7256 (susnux)
  • fix(NcAvatar): orbital best-fit adaptive status icon #6004 (ShGKme)
  • fix(NcLoadingIcon): prevent height change from rotate transformation #7275 (Antreesy)
  • fix: 'Set operation on key "value" failed: target is readonly' #7239 (ShGKme)
  • fix(NcInputField, NcTextArea): remove placeholder on Nextcloud 32+ #7283 (susnux)
  • fix: auto-resolve focus trap stack, if was changed outside of controller #7277 (Antreesy)
  • fix: adjust color variable to work with Nextcloud 32+ #7311 (susnux)
  • fix(utils): legacy version detection #7313 (skjnldsv)
  • fix(NcEmojiPicker): scope styles #7334 (ShGKme)
  • fix(NcPopover): scope styles to avoid leak #7330 (ShGKme)
  • fix(NcReferencePickerModal): scope styles #7333 (ShGKme)
  • fix(NcActionButtonGroup): scope styles #7332 (ShGKme)
  • fix(NcAppNavigationItem): icon-collapse has wrong color #7329 (GretaD)
  • fix(NcAppNavigation): warn if neither ariaLabel nor ariaLabelledby is set #7350 (susnux)
  • fix: revert breaking changes and keep Nextcloud 31 support #7353 (susnux)
  • fix(NcAppNavigationSearch): add space before ellipsis #7372 (ShGKme)
  • fix(NcHeaderMenu): pause trap stack on opening #7370 (Antreesy)
  • fix(NcAppNavigationSettings): bring filled icon back for Nextcloud 31 #7397 (susnux)
  • fix(NcHeaderMenu): apply ariaLabel prop and add proper default values #7367 (susnux)
  • fix(NcAssistantIcon): adjust gradient for dark theme #7426 (susnux)
  • fix(NcCheckboxContent): limit wrapper width #7445 (Antreesy)
  • fix(NcRichText): correctly render empty children list #7447 (Antreesy)
  • fix: revert renaming template refs resulting in a breaking change #7448 (ShGKme)
  • fix(NcDateTimePicker): use proper day names #7473 (susnux)
  • fix(NcCheckboxRadioSwitch): ensure label less radio has proper size #7471 (susnux)
  • fix(NcDateTime): adjust for bidi support #7484 (susnux)
  • fix(NcAppNavigationItem): ensure to pass boolean where needed #7489 (susnux)
  • fix(NcReferenceWidget): harden checks for reference = null #7478 (Antreesy)
  • fix(NcAvatar): make min status size visually accessible #7476 (DorraJaouad)
  • fix(NcRadioGroup): fieldsets always need a label for accessibility #7483
  • fix(useHotKey): use correct callback type #7505 (susnux)
  • perf(NcTimezonePicker): use Intl to reduce self-size from 206kb to 2kb #7522 (ShGKme)
  • fix(NcPopover): revert disabling close on click outside by default #7524 (ShGKme)
  • fix(NcRadioGroupButton): adjust hight if needed #7544 (susnux)
  • fix(NcAvatar): log the error object #7562 (ChristophWurst)
  • fix(NcReferenceWidget): migrate to TS #7479 (Antreesy)

Changed

Assets 2
Loading