ENH - expand Notes rich text editing

This commit is contained in:
smx.pusha
2026-08-13 17:25:37 +02:00
parent 223cb4a600
commit b4b341d202
9 changed files with 929 additions and 134 deletions
+9 -3
View File
@@ -22,7 +22,9 @@
}
.sky-sheet-rise-enter-active .sky-sheet__panel,
.sky-sheet-rise-leave-active .sky-sheet__panel {
.sky-sheet-rise-leave-active .sky-sheet__panel,
.sky-sheet-rise-enter-active .sky-action-sheet__panel,
.sky-sheet-rise-leave-active .sky-action-sheet__panel {
transition:
opacity 220ms ease,
transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
@@ -35,7 +37,9 @@
}
.sky-sheet-rise-enter-from .sky-sheet__panel,
.sky-sheet-rise-leave-to .sky-sheet__panel {
.sky-sheet-rise-leave-to .sky-sheet__panel,
.sky-sheet-rise-enter-from .sky-action-sheet__panel,
.sky-sheet-rise-leave-to .sky-action-sheet__panel {
opacity: 0;
transform: translateY(100%);
}
@@ -293,7 +297,9 @@
.sky-sheet-rise-enter-active .sky-overlay-backdrop,
.sky-sheet-rise-leave-active .sky-overlay-backdrop,
.sky-sheet-rise-enter-active .sky-sheet__panel,
.sky-sheet-rise-leave-active .sky-sheet__panel {
.sky-sheet-rise-leave-active .sky-sheet__panel,
.sky-sheet-rise-enter-active .sky-action-sheet__panel,
.sky-sheet-rise-leave-active .sky-action-sheet__panel {
transition-duration: 0.01ms !important;
}
}
+24 -22
View File
@@ -55,27 +55,29 @@ useOverlayFocusTrap({
</script>
<template>
<div v-if="opened" ref="root" v-bind="$attrs" class="sky-action-sheet">
<div
class="sky-overlay-backdrop"
aria-hidden="true"
@click="emit('backdropclick')"
></div>
<div
ref="panel"
class="sky-action-sheet__panel"
:role="inferredRole"
:aria-modal="
inferredRole === 'dialog' || inferredRole === 'alertdialog'
? ariaModal
: undefined
"
:aria-label="inferredRole ? ariaLabel || label || undefined : undefined"
:aria-labelledby="inferredRole ? ariaLabelledby : undefined"
:aria-describedby="inferredRole ? ariaDescribedby : undefined"
:tabindex="tabindex"
>
<slot />
<Transition name="sky-sheet-rise">
<div v-if="opened" ref="root" v-bind="$attrs" class="sky-action-sheet">
<div
class="sky-overlay-backdrop"
aria-hidden="true"
@click="emit('backdropclick')"
></div>
<div
ref="panel"
class="sky-action-sheet__panel"
:role="inferredRole"
:aria-modal="
inferredRole === 'dialog' || inferredRole === 'alertdialog'
? ariaModal
: undefined
"
:aria-label="inferredRole ? ariaLabel || label || undefined : undefined"
:aria-labelledby="inferredRole ? ariaLabelledby : undefined"
:aria-describedby="inferredRole ? ariaDescribedby : undefined"
:tabindex="tabindex"
>
<slot />
</div>
</div>
</div>
</Transition>
</template>