fix(NcDateTimePicker): do not scope imported CSS

[raimund-schluessler]

☑️ Resolves

This adjusts the CSS import of the NcDateTimePicker vendor styles to not be scoped. I don't know if this is the proper way to handle this issue, so plead advise if not.

• Fixes part of https://github.com/nextcloud-libraries/nextcloud-vue/issues/7050#issuecomment-2978166946.

🖼️ Screenshots

🏚️ Before	🏡 After

🏁 Checklist

• [x] ⛑️ Tests are included or are not applicable
• [x] 📘 Component documentation has been extended, updated or is not applicable
• [x] 2️⃣ Backport to stable8 for maintained Vue 2 version or not applicable

[raimund-schluessler]

@susnux @ShGKme Could you have a look at this, please? This problem really prevents using NcDateTimePicker at all.

[raimund-schluessler]

@susnux Is this (roughly) what you had in mind? It works in the Tasks app, but there are still issues:

• [x] appendToBody still broken
• [x] Nextcloud styles not correctly applied yet when appendToBody=true
• [x] styleguide does not build, since the CSS import fails vs. npm run build fails
• [x] @vuepic/vue-datepicker/dist/main.css defines CSS variables under :root. Importing that nested in a class is not valid, it seems. Is there a better solution than manually duplicating the variables (which seems terrible, because minor changes in the lib might break the CSS).

[ShGKme]

• styleguide does not build, since the CSS import fails vs. npm run build fails

Fixable by adding path.resolve(__dirname, 'node_modules') to sassOptions.includePaths[] in the webpack config.

[ShGKme]

• Is there a better solution than manually duplicating the variables (which seems terrible, because minor changes in the lib might break the CSS).

I'd consider changing CSS variables here a breaking change for the library as it is a public API for theming.

And anyway, it is less dangerous than overriding many other styles in this component.

[raimund-schluessler]

Ok, I think this now passes as a PoC. I will try to fix the remaining issues over the weekend if I have time.

[ShGKme]

• Nextcloud styles not correctly applied yet when appendToBody=true

Could you elaborate, what you mean?

[raimund-schluessler]

• Nextcloud styles not correctly applied yet when appendToBody=true

Could you elaborate, what you mean?

The style adjustments we do are not applied yet, if the picker is appended to body, because the css classes are not correct yet. You can see this at the buttons at the top or the highlight color. Just needs some css class adjustments.

[raimund-schluessler]

The styles are adjusted now and work for appendToBody as well. But the time-picker elements are differently styled now than before and I couldn't yet figure out what is missing.

[raimund-schluessler]

The styles are adjusted now and work for appendToBody as well. But the time-picker elements are differently styled now than before and I couldn't yet figure out what is missing.

It seems the button server styles are not applied anymore, because they are overwritten by vuepic styles with higher priority now.

[julien-nc]

The component can now be used. Picking a date works fine. But the clear button cannot be clicked.

[raimund-schluessler]

The styles are now in line with server and I hope to have fixed everything. Please review again.

[raimund-schluessler]

The component can now be used. Picking a date works fine. But the clear button cannot be clicked.

Fix is in https://github.com/nextcloud-libraries/nextcloud-vue/pull/7103.

[raimund-schluessler]

Can we merge this for the next RC, please? It's really an annoying issue for apps.

[susnux]

1. rebased
2. squashed some commits
3. migrate span to div