@tekkare/romulus 0.1.119 → 0.1.120
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/dist/module.json
CHANGED
|
@@ -533,13 +533,16 @@ function submit() {
|
|
|
533
533
|
<fieldset class="rm-alert-form__group">
|
|
534
534
|
<legend class="rm-alert-form__label">{{ T.channels }}</legend>
|
|
535
535
|
<RmCheckbox :model-value="true" :label="T.inApp" disabled />
|
|
536
|
-
<RmCheckbox v-model="emailOn" :label="T.email" />
|
|
537
536
|
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
|
|
537
|
+
<!-- La case et sa frequence sur une meme rangee : le choix du canal et
|
|
538
|
+
celui de son rythme se lisent ensemble, et la frequence n'a aucun
|
|
539
|
+
sens sans la case. -->
|
|
540
|
+
<div class="rm-alert-form__channel">
|
|
541
|
+
<RmCheckbox v-model="emailOn" :label="T.email" />
|
|
541
542
|
<RmDropdownSelect
|
|
543
|
+
v-if="emailOn"
|
|
542
544
|
label=""
|
|
545
|
+
class="rm-alert-form__cadence"
|
|
543
546
|
:options="cadenceOptions.map((option) => option.label)"
|
|
544
547
|
:model-value="cadenceLabel"
|
|
545
548
|
@update:model-value="
|
|
@@ -548,6 +551,7 @@ function submit() {
|
|
|
548
551
|
"
|
|
549
552
|
/>
|
|
550
553
|
</div>
|
|
554
|
+
<p v-if="emailOn" class="rm-alert-form__hint">{{ T.cadenceHint }}</p>
|
|
551
555
|
</fieldset>
|
|
552
556
|
|
|
553
557
|
<p
|
|
@@ -573,5 +577,5 @@ function submit() {
|
|
|
573
577
|
</template>
|
|
574
578
|
|
|
575
579
|
<style scoped>
|
|
576
|
-
.rm-alert-form{display:flex;flex-direction:column;gap:18px}.rm-alert-form__label{color:var(--rm-text,#111827);font-size:13px;font-weight:600;margin:0 0 2px;padding:0}.rm-alert-form__group{border:0;display:flex;flex-direction:column;gap:8px;margin:0;padding:0}.rm-alert-form__view-name{align-items:center;color:var(--rm-text,#111827);display:flex;flex-wrap:wrap;font-size:14px;gap:6px;margin:0}.rm-alert-form__count{color:var(--rm-text-soft,#9ca3af);font-size:11.5px}.rm-alert-form__hint{color:var(--rm-text-soft,#9ca3af);font-size:12px;line-height:1.45;margin:0 0 4px}.rm-alert-form__error{color:var(--rm-danger,#b91c1c);font-size:12px;margin:0}.rm-alert-form__nested{display:flex;flex-direction:column;gap:6px;padding-left:26px}.rm-alert-form__baseline{align-items:flex-start;background:var(--rm-surface-muted,#f9fafb);border-radius:8px;color:var(--rm-text-soft,#4b5563);display:flex;font-size:12.5px;gap:8px;line-height:1.45;margin:0;padding:10px 12px}.rm-alert-form__actions{display:flex;gap:8px;justify-content:flex-end}
|
|
580
|
+
.rm-alert-form{display:flex;flex-direction:column;gap:18px}.rm-alert-form__label{color:var(--rm-text,#111827);font-size:13px;font-weight:600;margin:0 0 2px;padding:0}.rm-alert-form__group{border:0;display:flex;flex-direction:column;gap:8px;margin:0;padding:0}.rm-alert-form__view-name{align-items:center;color:var(--rm-text,#111827);display:flex;flex-wrap:wrap;font-size:14px;gap:6px;margin:0}.rm-alert-form__count{color:var(--rm-text-soft,#9ca3af);font-size:11.5px}.rm-alert-form__hint{color:var(--rm-text-soft,#9ca3af);font-size:12px;line-height:1.45;margin:0 0 4px}.rm-alert-form__error{color:var(--rm-danger,#b91c1c);font-size:12px;margin:0}.rm-alert-form__channel{align-items:center;display:flex;flex-wrap:wrap;gap:12px}.rm-alert-form__cadence{flex:1 1 240px;min-width:240px}.rm-alert-form__nested{display:flex;flex-direction:column;gap:6px;padding-left:26px}.rm-alert-form__baseline{align-items:flex-start;background:var(--rm-surface-muted,#f9fafb);border-radius:8px;color:var(--rm-text-soft,#4b5563);display:flex;font-size:12.5px;gap:8px;line-height:1.45;margin:0;padding:10px 12px}.rm-alert-form__actions{display:flex;gap:8px;justify-content:flex-end}
|
|
577
581
|
</style>
|
|
@@ -117,10 +117,43 @@ function onDocumentClick(event: MouseEvent) {
|
|
|
117
117
|
if (!rootRef.value?.contains(event.target as Node)) close()
|
|
118
118
|
}
|
|
119
119
|
|
|
120
|
+
/**
|
|
121
|
+
* Le panneau s'ouvre vers le haut quand il n'y a pas la place en dessous.
|
|
122
|
+
*
|
|
123
|
+
* Dans une modale, un selecteur pose en bas de formulaire deroulait sa liste
|
|
124
|
+
* hors du cadre visible et forcait un defilement pour lire ses propres
|
|
125
|
+
* options. La place se mesure sur le cadre defilant le plus proche, pas sur
|
|
126
|
+
* la fenetre : c'est lui qui coupe.
|
|
127
|
+
*/
|
|
128
|
+
const dropUp = ref(false)
|
|
129
|
+
|
|
130
|
+
function scrollParent(node: HTMLElement | null): HTMLElement | null {
|
|
131
|
+
let current = node?.parentElement ?? null
|
|
132
|
+
while (current) {
|
|
133
|
+
const overflow = getComputedStyle(current).overflowY
|
|
134
|
+
if (overflow === 'auto' || overflow === 'scroll') return current
|
|
135
|
+
current = current.parentElement
|
|
136
|
+
}
|
|
137
|
+
return null
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
function placePanel() {
|
|
141
|
+
const field = rootRef.value
|
|
142
|
+
if (!field) return
|
|
143
|
+
const rect = field.getBoundingClientRect()
|
|
144
|
+
const frame = scrollParent(field)?.getBoundingClientRect()
|
|
145
|
+
const bottom = frame ? frame.bottom : window.innerHeight
|
|
146
|
+
const top = frame ? frame.top : 0
|
|
147
|
+
// 320 : la hauteur qu'une liste de quelques options occupe en pratique.
|
|
148
|
+
const needed = 320
|
|
149
|
+
dropUp.value = rect.bottom + needed > bottom && rect.top - top > needed
|
|
150
|
+
}
|
|
151
|
+
|
|
120
152
|
async function toggle() {
|
|
121
153
|
if (props.disabled) return
|
|
122
154
|
if (isOpen.value) return close()
|
|
123
155
|
|
|
156
|
+
placePanel()
|
|
124
157
|
isOpen.value = true
|
|
125
158
|
rmPanelOpened(close)
|
|
126
159
|
searchTerm.value = ''
|
|
@@ -191,7 +224,12 @@ onUnmounted(() => {
|
|
|
191
224
|
<component :is="sortIcon ? PhCaretUpDown : PhCaretDown" :size="16" />
|
|
192
225
|
</button>
|
|
193
226
|
|
|
194
|
-
<div
|
|
227
|
+
<div
|
|
228
|
+
v-show="isOpen"
|
|
229
|
+
class="rm-dsel__panel"
|
|
230
|
+
:class="{ 'rm-dsel__panel--up': dropUp }"
|
|
231
|
+
@click.stop
|
|
232
|
+
>
|
|
195
233
|
<div v-if="search" class="rm-dsel__search">
|
|
196
234
|
<PhMagnifyingGlass :size="16" />
|
|
197
235
|
<input
|
|
@@ -236,5 +274,5 @@ onUnmounted(() => {
|
|
|
236
274
|
</template>
|
|
237
275
|
|
|
238
276
|
<style scoped>
|
|
239
|
-
.rm-dsel{align-items:stretch;display:flex;flex-direction:column;gap:var(--space-4);position:relative;width:196px}.rm-dsel__label{color:var(--text-secondary);font-size:var(--font-12,12px);line-height:14px}.rm-dsel__field{align-items:center;background:var(--bg-surface);border:1.5px solid var(--border-default);border-radius:var(--radius-md,8px);box-sizing:border-box;color:var(--text-primary);cursor:pointer;display:flex;font-family:inherit;font-size:var(--font-14,14px);font-weight:700;gap:var(--space-4);line-height:16px;padding:var(--space-12);text-align:left;width:100%}.rm-dsel__field:hover:not(.is-disabled){border-color:rgba(var(--brand-rgb),.3)}.rm-dsel__field.is-open{border-color:var(--color-primary)}.rm-dsel__field.is-disabled{background:var(--bg-surface-2);color:var(--text-muted);cursor:not-allowed}.rm-dsel__field:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.rm-dsel__value-slot{display:block;flex:1;min-width:0}.rm-dsel__value{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rm-dsel__value.is-empty{color:var(--text-muted);font-style:italic;font-weight:400}.rm-dsel__field :deep(svg){color:var(--text-secondary);flex-shrink:0}.rm-dsel__panel{border:1.5px solid var(--border-default);border-radius:var(--radius-lg,12px);box-shadow:var(--r-shadow-lg,0 8px 24px rgba(0,0,0,.12));box-sizing:border-box;flex-direction:column;left:0;margin-top:8px;max-height:500px;max-width:
|
|
277
|
+
.rm-dsel{align-items:stretch;display:flex;flex-direction:column;gap:var(--space-4);position:relative;width:196px}.rm-dsel__label{color:var(--text-secondary);font-size:var(--font-12,12px);line-height:14px}.rm-dsel__field{align-items:center;background:var(--bg-surface);border:1.5px solid var(--border-default);border-radius:var(--radius-md,8px);box-sizing:border-box;color:var(--text-primary);cursor:pointer;display:flex;font-family:inherit;font-size:var(--font-14,14px);font-weight:700;gap:var(--space-4);line-height:16px;padding:var(--space-12);text-align:left;width:100%}.rm-dsel__field:hover:not(.is-disabled){border-color:rgba(var(--brand-rgb),.3)}.rm-dsel__field.is-open{border-color:var(--color-primary)}.rm-dsel__field.is-disabled{background:var(--bg-surface-2);color:var(--text-muted);cursor:not-allowed}.rm-dsel__field:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.rm-dsel__value-slot{display:block;flex:1;min-width:0}.rm-dsel__value{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rm-dsel__value.is-empty{color:var(--text-muted);font-style:italic;font-weight:400}.rm-dsel__field :deep(svg){color:var(--text-secondary);flex-shrink:0}.rm-dsel__panel--up{bottom:100%;margin-bottom:8px;margin-top:0;top:auto}.rm-dsel__panel{border:1.5px solid var(--border-default);border-radius:var(--radius-lg,12px);box-shadow:var(--r-shadow-lg,0 8px 24px rgba(0,0,0,.12));box-sizing:border-box;flex-direction:column;left:0;margin-top:8px;max-height:500px;max-width:420px;min-width:max(230px,100%);padding:var(--space-16);position:absolute;top:100%;width:-moz-max-content;width:max-content;z-index:12}.rm-dsel__panel,.rm-dsel__search{background:var(--bg-surface);display:flex}.rm-dsel__search{align-items:center;border:1px solid var(--border-default);border-radius:var(--radius-md,8px);gap:var(--space-8);padding:var(--space-8) var(--space-12)}.rm-dsel__search :deep(svg){color:var(--text-muted);flex-shrink:0}.rm-dsel__search-input{background:none;border:none;color:var(--text-primary);font-family:inherit;font-size:var(--font-14,14px);width:100%}.rm-dsel__search-input::-moz-placeholder{color:var(--text-muted);font-size:var(--font-12,12px)}.rm-dsel__search-input::placeholder{color:var(--text-muted);font-size:var(--font-12,12px)}.rm-dsel__search-input:focus-visible{outline:none}.rm-dsel__loading{display:flex;flex-direction:column;gap:var(--space-10);padding-top:var(--space-8)}.rm-dsel__sr{height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;clip:rect(0,0,0,0);border:0;white-space:nowrap}.rm-dsel__state{color:var(--text-secondary);font-size:var(--font-14,14px);font-style:italic;padding-top:var(--space-16);text-align:center}.rm-dsel__list{display:flex;flex-direction:column;list-style:none;margin:0;min-height:10px;overflow-y:auto;padding:0}.rm-dsel__list:not(:only-child){margin-top:16px}.rm-dsel__option{align-items:center;border-radius:var(--radius-sm,4px);cursor:pointer;display:flex;font-size:var(--font-14,14px);gap:var(--space-8);line-height:160%;margin:4px 0;min-height:24px;padding:var(--space-2) var(--space-4)}.rm-dsel__option :deep(svg){color:var(--text-muted);flex-shrink:0}.rm-dsel__option.is-active{background:rgba(var(--brand-rgb),.05)}.rm-dsel__option.is-selected{font-weight:700}.rm-dsel__option.is-active :deep(svg),.rm-dsel__option.is-selected :deep(svg){color:var(--color-primary)}
|
|
240
278
|
</style>
|