@tekkare/romulus 0.1.208 → 0.1.210
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
|
@@ -326,5 +326,5 @@ function label(id: string) {
|
|
|
326
326
|
</template>
|
|
327
327
|
|
|
328
328
|
<style scoped>
|
|
329
|
-
.rm-dash{position:relative;width:100%}.rm-dash__item{display:flex;flex-direction:column;left:0;min-width:0;position:absolute;top:0;transition:transform var(--duration-base) var(--ease-out),width var(--duration-base) var(--ease-out),height var(--duration-base) var(--ease-out)}.rm-dash__item>:deep(:first-child){flex:1;min-height:0}.rm-dash--stacked{display:flex;flex-direction:column;gap:var(--space-
|
|
329
|
+
.rm-dash{position:relative;width:100%}.rm-dash__item{display:flex;flex-direction:column;left:0;min-width:0;position:absolute;top:0;transition:transform var(--duration-base) var(--ease-out),width var(--duration-base) var(--ease-out),height var(--duration-base) var(--ease-out)}.rm-dash__item>:deep(:first-child){flex:1;min-height:0}.rm-dash--stacked{display:flex;flex-direction:column;gap:var(--space-16)}.rm-dash--stacked .rm-dash__item{position:relative;transform:none}.rm-dash__item--held{border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);cursor:grabbing;transition:none;z-index:3}.rm-dash--moving{-webkit-user-select:none;-moz-user-select:none;user-select:none}.rm-dash--editing :deep([data-rm-dash-drag]){cursor:grab;touch-action:none}.rm-dash__placeholder{background:color-mix(in srgb,var(--color-primary) 8%,transparent);border:2px dashed var(--color-primary);border-radius:var(--radius-lg);left:0;position:absolute;top:0;transition:transform var(--duration-fast) var(--ease-out),width var(--duration-fast) var(--ease-out),height var(--duration-fast) var(--ease-out);z-index:0}.rm-dash__grip{align-items:center;background:var(--bg-surface-2);border-radius:999px;color:var(--text-muted);cursor:grab;display:inline-flex;height:16px;justify-content:center;left:50%;padding:0;position:absolute;top:4px;touch-action:none;transform:translateX(-50%);width:36px;z-index:2}.rm-dash__grip:hover{color:var(--text-primary)}.rm-dash__grip:focus-visible{box-shadow:var(--shadow-focus);color:var(--text-primary);outline:none}.rm-dash__resize{background:linear-gradient(135deg,transparent 55%,var(--text-muted) 55%,var(--text-muted) 62%,transparent 62%),linear-gradient(135deg,transparent 75%,var(--text-muted) 75%,var(--text-muted) 82%,transparent 82%);bottom:2px;cursor:nwse-resize;height:14px;position:absolute;right:2px;touch-action:none;width:14px;z-index:2}.rm-dash__live{clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}@media (prefers-reduced-motion:reduce){.rm-dash__item,.rm-dash__placeholder{transition:none}}
|
|
330
330
|
</style>
|
|
@@ -14,7 +14,8 @@
|
|
|
14
14
|
Slots : #CardTitle (libelle de la puce si `customTitle`), #Rail (sur la
|
|
15
15
|
barre, a cote de la puce : le reglage qu'on change tout le temps et qui ne
|
|
16
16
|
merite pas d'ouvrir le panneau ; il passe sur sa propre rangee quand la page
|
|
17
|
-
fournit aussi #Search), #Search, #Filters.
|
|
17
|
+
fournit aussi #Search), #Search, #Filters. Sans #Filters, ni puce ni
|
|
18
|
+
panneau : une page dont le seul reglage tient dans #Rail n'a rien a ouvrir.
|
|
18
19
|
Le contenu projete vient encore, dans les apps, des champs Auriga
|
|
19
20
|
(arg-advanced-search-bar) : les regles `:deep` en bas les remettent a la
|
|
20
21
|
hauteur et au rayon de la rangee. Elles tomberont avec ces champs.
|
|
@@ -173,7 +174,7 @@ onBeforeUnmount(() => {
|
|
|
173
174
|
en offrait le double. -->
|
|
174
175
|
<div class="rm-fbar__band">
|
|
175
176
|
<div class="rm-fbar__row">
|
|
176
|
-
<button type="button" class="rm-fbar__toggle" :class="{ 'is-active': open }" @click="toggle('filters')">
|
|
177
|
+
<button v-if="$slots.Filters" type="button" class="rm-fbar__toggle" :class="{ 'is-active': open }" @click="toggle('filters')">
|
|
177
178
|
<RmIcon name="Funnel" :size="16" />
|
|
178
179
|
<span v-if="customTitle"><slot name="CardTitle" /></span>
|
|
179
180
|
<span v-else>{{ t.title }}</span>
|
|
@@ -253,7 +254,7 @@ onBeforeUnmount(() => {
|
|
|
253
254
|
</div>
|
|
254
255
|
</div>
|
|
255
256
|
|
|
256
|
-
<div v-show="open" class="rm-fbar__panel">
|
|
257
|
+
<div v-if="$slots.Filters" v-show="open" class="rm-fbar__panel">
|
|
257
258
|
<!-- Le panneau se presente comme une section : son titre, et les
|
|
258
259
|
commandes juste a cote, pres des filtres qu'elles vident. -->
|
|
259
260
|
<div class="rm-fbar__panel-head">
|
|
@@ -70,7 +70,15 @@ const items = computed<RmSegmentedOption[]>(() =>
|
|
|
70
70
|
const activeIndex = computed(() => items.value.findIndex(item => item.value === model.value))
|
|
71
71
|
|
|
72
72
|
const root = ref<HTMLElement | null>(null)
|
|
73
|
-
|
|
73
|
+
/**
|
|
74
|
+
* Les segments se relisent dans le DOM, dans son ordre. Un tableau de refs
|
|
75
|
+
* pose sur un v-for ne garantit pas l'ordre des options : quand elles
|
|
76
|
+
* changent (un autre jeu de choix pour le meme rail), le nouvel element etait
|
|
77
|
+
* ajoute en fin de tableau et le pave se posait sous le mauvais segment.
|
|
78
|
+
*/
|
|
79
|
+
function segments(): HTMLElement[] {
|
|
80
|
+
return root.value ? Array.from(root.value.querySelectorAll<HTMLElement>(':scope > .rm-seg__option')) : []
|
|
81
|
+
}
|
|
74
82
|
|
|
75
83
|
/**
|
|
76
84
|
* Le pave n'existe pas tant qu'il n'a pas ete mesure : sans ca il apparait un
|
|
@@ -80,7 +88,7 @@ const segments = ref<HTMLElement[]>([])
|
|
|
80
88
|
const thumb = ref<Record<string, string> | null>(null)
|
|
81
89
|
|
|
82
90
|
function measure() {
|
|
83
|
-
const element = segments
|
|
91
|
+
const element = segments()[activeIndex.value]
|
|
84
92
|
if (!element || !root.value) {
|
|
85
93
|
thumb.value = null
|
|
86
94
|
return
|
|
@@ -129,7 +137,7 @@ function observeAll() {
|
|
|
129
137
|
if (!observer) return
|
|
130
138
|
observer.disconnect()
|
|
131
139
|
if (root.value) observer.observe(root.value)
|
|
132
|
-
segments.
|
|
140
|
+
segments().forEach(element => observer!.observe(element))
|
|
133
141
|
}
|
|
134
142
|
|
|
135
143
|
onMounted(() => {
|
|
@@ -150,7 +158,9 @@ onBeforeUnmount(() => {
|
|
|
150
158
|
observer = null
|
|
151
159
|
})
|
|
152
160
|
|
|
153
|
-
|
|
161
|
+
// Les valeurs, pas seulement leur nombre : un autre jeu de trois options
|
|
162
|
+
// garde la meme longueur et doit tout de meme deplacer le pave.
|
|
163
|
+
watch(() => [model.value, items.value.map(item => `${item.value}:${item.label}`).join('|'), props.block], () => {
|
|
154
164
|
remeasure()
|
|
155
165
|
nextTick(observeAll)
|
|
156
166
|
})
|
|
@@ -173,7 +183,6 @@ watch(() => [model.value, items.value.length, props.block], () => {
|
|
|
173
183
|
<button
|
|
174
184
|
v-for="(item, index) in items"
|
|
175
185
|
:key="item.value"
|
|
176
|
-
ref="segments"
|
|
177
186
|
class="rm-seg__option"
|
|
178
187
|
:class="{
|
|
179
188
|
'rm-seg__option--active': index === activeIndex,
|