feat(dialog): experimental sharing dialog for the unified sharing API

[skjnldsv]

Needs

• fix(NcSelect): floating label design using NcTextField nextcloud-vue#8570
• feat(NcDateTimePickerNative): floating label design nextcloud-vue#8768

[codecov]

Codecov Report

❌ Patch coverage is 75.89286% with 27 lines in your changes missing coverage. Please review.
✅ Project coverage is 83.42%. Comparing base (7162b64) to head (6a7e5c4).
⚠️ Report is 80 commits behind head on main.

Files with missing lines	Patch %	Lines
lib/dialog/utils/api.ts	19.04%	11 Missing and 6 partials ⚠️
lib/dialog/components/PropertyField.vue	87.30%	8 Missing ⚠️
lib/dialog/types/api.ts	0.00%	2 Missing ⚠️

Additional details and impacted files

@@             Coverage Diff             @@
##             main     #239       +/-   ##
===========================================
- Coverage   95.65%   83.42%   -12.23%     
===========================================
  Files           4       11        +7     
  Lines          69      181      +112     
  Branches       25       68       +43     
===========================================
+ Hits           66      151       +85     
- Misses          3       24       +21     
- Partials        0        6        +6     

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[susnux]

Suggested change

	const props = defineProps<{
	/** Accessible label of the field group and its toggle */
	label: string
	/** Whether the field is enabled */
	modelValue: boolean
	/** Align the toggle to the first line of a multi-line field (e.g. textarea) */
	longText?: boolean
	}>()
	const emit = defineEmits<{
	(e: 'update:modelValue', value: boolean): void
	}>()
	/** Whether the field is enabled */
	const modelValue = defineModel<boolean>()
	const props = defineProps<{
	/** Accessible label of the field group and its toggle */
	label: string
	/** Align the toggle to the first line of a multi-line field (e.g. textarea) */
	longText?: boolean
	}>()

consistent with other component

[susnux]

Should already be the case for Vue3? It should be inherited by the filename

[skjnldsv]

For me it never works 😅😅
But with the two different Vue extensions, it might be the root cause tbh

[susnux]

Suggested change

	<NcIconSvgWrapper :svg="IconArrowLeft" name="Back" :size="20" />
	<NcIconSvgWrapper :svg="IconArrowLeft" directional />

1. no name because button has already an accessible name
2. make it directional as on RTL it should be mirrored
3. 20px is default

[skjnldsv]

Never knew about directional, very cool 😎
Thanks!!

[susnux]

fine but if you like you can shorten it

Suggested change

	@settingsWarning="(v) => (settingsHasWarning = v)"
	@settingsWarning="settingsHasWarning = $event"

[susnux]

same here no name if the button already has a label (and its not translated)

Suggested change

	<NcIconSvgWrapper :svg="IconCogOutline" name="Settings" :size="20" />
	<NcIconSvgWrapper :svg="IconCogOutline" />

[susnux]

In many browsers document.execCommand('copy') does not work anymore as deprecated.

Suggested change

	const textarea = document.createElement('textarea')
	textarea.value = text
	textarea.style.position = 'fixed'
	textarea.style.opacity = '0'
	document.body.appendChild(textarea)
	textarea.select()
	try {
	document.execCommand('copy')
	} finally {
	document.body.removeChild(textarea)
	}
	window.prompt(t('Please copy the share link manually'), text)

[susnux]

Suggested change

	export async function openSharingDialog(node: INode): Promise<unknown> {
	export async function openSharingDialog(node: INode[]): Promise<unknown> {

Should use an array to later properly have support for multi-node shares without api break

[susnux]

Suggested change

	await openSharingDialog(node)
	await openSharingDialog([node])