@redseed/redseed-ui-vue3 8.42.0 → 8.43.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -101,19 +101,6 @@ const bodyClasses = computed(() => [
|
|
|
101
101
|
>
|
|
102
102
|
<slot name="time"></slot>
|
|
103
103
|
</div>
|
|
104
|
-
|
|
105
|
-
<div
|
|
106
|
-
class="rsui-comment__meta-badge"
|
|
107
|
-
>
|
|
108
|
-
<slot name="badge">
|
|
109
|
-
<Badge v-if="isPrivateOwned"
|
|
110
|
-
xs
|
|
111
|
-
secondary
|
|
112
|
-
>
|
|
113
|
-
Private
|
|
114
|
-
</Badge>
|
|
115
|
-
</slot>
|
|
116
|
-
</div>
|
|
117
104
|
</div>
|
|
118
105
|
</div>
|
|
119
106
|
|
|
@@ -127,6 +114,19 @@ const bodyClasses = computed(() => [
|
|
|
127
114
|
</div>
|
|
128
115
|
|
|
129
116
|
<div :class="bodyClasses">
|
|
117
|
+
<div v-if="$slots.badge || isPrivateOwned"
|
|
118
|
+
class="rsui-comment__body-badge"
|
|
119
|
+
>
|
|
120
|
+
<slot name="badge">
|
|
121
|
+
<Badge v-if="isPrivateOwned"
|
|
122
|
+
xs
|
|
123
|
+
secondary
|
|
124
|
+
>
|
|
125
|
+
Private
|
|
126
|
+
</Badge>
|
|
127
|
+
</slot>
|
|
128
|
+
</div>
|
|
129
|
+
|
|
130
130
|
<slot></slot>
|
|
131
131
|
</div>
|
|
132
132
|
|
|
@@ -36,6 +36,10 @@ const props = defineProps({
|
|
|
36
36
|
type: Boolean,
|
|
37
37
|
default: false,
|
|
38
38
|
},
|
|
39
|
+
nonModal: {
|
|
40
|
+
type: Boolean,
|
|
41
|
+
default: false,
|
|
42
|
+
},
|
|
39
43
|
headerPadded: {
|
|
40
44
|
type: Boolean,
|
|
41
45
|
default: true,
|
|
@@ -76,10 +80,14 @@ const isPanelVisible = ref(props.show)
|
|
|
76
80
|
|
|
77
81
|
watch(() => props.show, (value) => {
|
|
78
82
|
if (value) {
|
|
79
|
-
previousActiveElement = document.activeElement
|
|
83
|
+
previousActiveElement = props.nonModal ? null : document.activeElement
|
|
80
84
|
isMounted.value = true
|
|
81
85
|
isOverlayVisible.value = true
|
|
82
86
|
isPanelVisible.value = true
|
|
87
|
+
|
|
88
|
+
// Non-modal leaves the page interactive: keep its scroll and don't steal focus.
|
|
89
|
+
if (props.nonModal) return
|
|
90
|
+
|
|
83
91
|
document.body.style.overflow = 'hidden'
|
|
84
92
|
|
|
85
93
|
nextTick(() => {
|
|
@@ -130,8 +138,11 @@ function handlePanelAfterLeave() {
|
|
|
130
138
|
</script>
|
|
131
139
|
<template>
|
|
132
140
|
<teleport to="body">
|
|
133
|
-
<div v-if="isMounted"
|
|
134
|
-
|
|
141
|
+
<div v-if="isMounted"
|
|
142
|
+
:class="['rsui-drawer', { 'rsui-drawer--non-modal': nonModal }]"
|
|
143
|
+
v-bind="$attrs"
|
|
144
|
+
>
|
|
145
|
+
<div v-if="isOverlayVisible && !nonModal"
|
|
135
146
|
class="rsui-drawer__background-wrapper"
|
|
136
147
|
aria-hidden="true"
|
|
137
148
|
@click="close"
|
|
@@ -151,7 +162,7 @@ function handlePanelAfterLeave() {
|
|
|
151
162
|
ref="drawerPanelRef"
|
|
152
163
|
:class="drawerPanelClass"
|
|
153
164
|
role="dialog"
|
|
154
|
-
aria-modal="
|
|
165
|
+
:aria-modal="!nonModal"
|
|
155
166
|
:aria-labelledby="$slots.header ? drawerHeaderId : undefined"
|
|
156
167
|
tabindex="-1"
|
|
157
168
|
>
|