@tekkare/romulus 0.1.77 → 0.1.78
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
|
@@ -133,9 +133,24 @@ const isOpen = ref(false)
|
|
|
133
133
|
const addSearch = ref('')
|
|
134
134
|
const removeSearch = ref('')
|
|
135
135
|
const activePreset = ref<string>()
|
|
136
|
+
const alignRight = ref(false)
|
|
136
137
|
const rootRef = ref<HTMLElement>()
|
|
137
138
|
const addRef = ref<HTMLInputElement>()
|
|
138
139
|
|
|
140
|
+
/** Largeur du panneau, tenue en phase avec la regle `.rm-csel__panel`. */
|
|
141
|
+
const PANEL_WIDTH = 820
|
|
142
|
+
|
|
143
|
+
/**
|
|
144
|
+
* Le panneau sort a gauche du champ par defaut. Pose sur un filtre de bout de
|
|
145
|
+
* rangee, il depasserait de l'ecran : il se cale alors sur le bord droit du
|
|
146
|
+
* champ.
|
|
147
|
+
*/
|
|
148
|
+
function placePanel() {
|
|
149
|
+
const rect = rootRef.value?.getBoundingClientRect()
|
|
150
|
+
if (!rect) return
|
|
151
|
+
alignRight.value = rect.left + PANEL_WIDTH > window.innerWidth - 8
|
|
152
|
+
}
|
|
153
|
+
|
|
139
154
|
/** La colonne de gauche ne propose que ce qui n'est pas deja retenu. */
|
|
140
155
|
const addOptions = computed(() => {
|
|
141
156
|
const needle = addSearch.value.trim().toLowerCase()
|
|
@@ -180,6 +195,7 @@ async function toggle() {
|
|
|
180
195
|
if (isOpen.value) return close()
|
|
181
196
|
|
|
182
197
|
isOpen.value = true
|
|
198
|
+
placePanel()
|
|
183
199
|
rmPanelOpened(close)
|
|
184
200
|
document.addEventListener('click', onDocumentClick)
|
|
185
201
|
await nextTick()
|
|
@@ -262,7 +278,12 @@ onUnmounted(() => {
|
|
|
262
278
|
<RmIcon name="CaretDown" :size="16" />
|
|
263
279
|
</button>
|
|
264
280
|
|
|
265
|
-
<div
|
|
281
|
+
<div
|
|
282
|
+
v-show="isOpen"
|
|
283
|
+
class="rm-csel__panel"
|
|
284
|
+
:class="{ 'rm-csel__panel--right': alignRight }"
|
|
285
|
+
@click.stop
|
|
286
|
+
>
|
|
266
287
|
<div class="rm-csel__column">
|
|
267
288
|
<div v-if="presets && presets.length > 0" class="rm-csel__presets">
|
|
268
289
|
<h2 class="rm-csel__section">{{ t.quick }}</h2>
|
|
@@ -373,5 +394,5 @@ onUnmounted(() => {
|
|
|
373
394
|
</template>
|
|
374
395
|
|
|
375
396
|
<style scoped>
|
|
376
|
-
.rm-csel{align-items:flex-start;display:flex;flex-direction:column;gap:4px;position:relative}.rm-csel__label{align-items:center;color:var(--text-secondary);display:flex;font-size:var(--font-12,12px);gap:4px;line-height:14px}.rm-csel__info{background:none;border:none;color:var(--text-muted);cursor:pointer;display:flex;padding:0}.rm-csel__field{align-items:center;background:var(--bg-surface);border:1.5px solid var(--border-default);border-radius:var(--radius-md,8px);color:var(--text-primary);cursor:pointer;display:flex;font-family:inherit;font-size:var(--font-14,14px);font-weight:700;gap:4px;line-height:16px;padding:12px;text-align:left;width:196px}.rm-csel__field:hover:not(.is-disabled){border-color:rgba(var(--brand-rgb),.3)}.rm-csel__field.is-open{border-color:var(--color-primary)}.rm-csel__field.is-disabled{background:var(--bg-surface-2);color:var(--text-muted);cursor:not-allowed}.rm-csel__field:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.rm-csel__value-slot{display:block;flex:1;min-width:0}.rm-csel__value{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rm-csel__value.is-empty{color:var(--text-muted);font-style:italic;font-weight:400}.rm-csel__field :deep(svg){color:var(--text-secondary);flex-shrink:0}.rm-csel__count{align-items:center;background:rgba(var(--brand-rgb),.1);border-radius:50%;color:var(--color-primary);display:flex;flex-shrink:0;font-size:var(--font-12,12px);font-weight:600;height:20px;justify-content:center;width:20px}.rm-csel__panel{background:var(--bg-surface);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;display:flex;left:0;margin-top:8px;max-width:calc(100vw - 32px);position:absolute;top:100%;width:
|
|
397
|
+
.rm-csel{align-items:flex-start;display:flex;flex-direction:column;gap:4px;position:relative}.rm-csel__label{align-items:center;color:var(--text-secondary);display:flex;font-size:var(--font-12,12px);gap:4px;line-height:14px}.rm-csel__info{background:none;border:none;color:var(--text-muted);cursor:pointer;display:flex;padding:0}.rm-csel__field{align-items:center;background:var(--bg-surface);border:1.5px solid var(--border-default);border-radius:var(--radius-md,8px);color:var(--text-primary);cursor:pointer;display:flex;font-family:inherit;font-size:var(--font-14,14px);font-weight:700;gap:4px;line-height:16px;padding:12px;text-align:left;width:196px}.rm-csel__field:hover:not(.is-disabled){border-color:rgba(var(--brand-rgb),.3)}.rm-csel__field.is-open{border-color:var(--color-primary)}.rm-csel__field.is-disabled{background:var(--bg-surface-2);color:var(--text-muted);cursor:not-allowed}.rm-csel__field:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.rm-csel__value-slot{display:block;flex:1;min-width:0}.rm-csel__value{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rm-csel__value.is-empty{color:var(--text-muted);font-style:italic;font-weight:400}.rm-csel__field :deep(svg){color:var(--text-secondary);flex-shrink:0}.rm-csel__count{align-items:center;background:rgba(var(--brand-rgb),.1);border-radius:50%;color:var(--color-primary);display:flex;flex-shrink:0;font-size:var(--font-12,12px);font-weight:600;height:20px;justify-content:center;width:20px}.rm-csel__panel{background:var(--bg-surface);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;display:flex;left:0;margin-top:8px;max-width:calc(100vw - 32px);position:absolute;right:auto;top:100%;width:820px;z-index:12}.rm-csel__panel--right{left:auto;right:0}.rm-csel__column{display:flex;flex:1;flex-direction:column;gap:8px;min-width:0;padding:16px}.rm-csel__column--right{border-left:1px solid var(--border-soft);flex:0 0 300px}.rm-csel__presets{border-bottom:1px solid var(--border-soft);display:flex;flex-direction:column;gap:8px;padding-bottom:8px}.rm-csel__pills{display:flex;flex-wrap:wrap;gap:4px}.rm-csel__pill{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:9999px;color:var(--text-secondary);cursor:pointer;font-family:inherit;font-size:var(--font-12,12px);padding:4px 10px}.rm-csel__pill.is-active,.rm-csel__pill:hover{border-color:var(--color-primary);color:var(--color-primary)}.rm-csel__pill.is-active{background:rgba(var(--brand-rgb),.1);font-weight:700}.rm-csel__head{align-items:center;display:flex;gap:8px;justify-content:space-between}.rm-csel__section{color:var(--text-secondary);font-size:var(--font-12,12px);font-weight:700;margin:0}.rm-csel__action{background:none;border:none;color:var(--color-primary);cursor:pointer;font-family:inherit;font-size:var(--font-12,12px);font-weight:600;padding:0}.rm-csel__action:disabled{color:var(--text-muted);cursor:not-allowed}.rm-csel__action:hover:not(:disabled){text-decoration:underline}.rm-csel__action--clear:not(:disabled){color:var(--color-danger)}.rm-csel__search{align-items:center;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-md,8px);display:flex;gap:8px;padding:6px 10px}.rm-csel__search :deep(svg){color:var(--text-muted);flex-shrink:0}.rm-csel__search-input{background:none;border:none;color:var(--text-primary);font-family:inherit;font-size:var(--font-13,13px);width:100%}.rm-csel__search-input::-moz-placeholder{color:var(--text-muted);font-size:var(--font-12,12px)}.rm-csel__search-input::placeholder{color:var(--text-muted);font-size:var(--font-12,12px)}.rm-csel__search-input:focus-visible{outline:none}.rm-csel__state{color:var(--text-secondary);font-size:var(--font-13,13px);font-style:italic;padding-top:8px}.rm-csel__loading{display:flex;flex-direction:column;gap:10px;padding-top:8px}.rm-csel__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-csel__list{display:flex;flex-direction:column;gap:4px;height:260px;overflow-x:hidden;overflow-y:auto;scrollbar-width:thin}.rm-csel__option{align-items:flex-start;background:none;border:none;border-radius:var(--radius-sm,4px);color:var(--text-primary);cursor:pointer;display:flex;font-family:inherit;font-size:var(--font-13,13px);gap:8px;line-height:150%;min-width:0;padding:2px 4px;text-align:left}.rm-csel__option span{min-width:0;overflow-wrap:anywhere}.rm-csel__option :deep(svg){background:var(--bg-surface);border-radius:50%;flex-shrink:0;margin-top:3px}.rm-csel__option:hover{background:rgba(var(--brand-rgb),.05)}.rm-csel__option:focus-visible{outline:2px solid var(--color-primary);outline-offset:-2px}.rm-csel__option--add :deep(svg){color:var(--color-primary)}.rm-csel__option--remove :deep(svg){color:var(--color-danger)}@media (max-width:767px){.rm-csel__panel{flex-direction:column;width:calc(100vw - 32px)}.rm-csel__column--right{border-left:none;border-top:1px solid var(--border-soft)}.rm-csel__list{height:180px}}
|
|
377
398
|
</style>
|