@tekkare/romulus 0.1.208 → 0.1.209
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>
|
|
@@ -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,
|