@cnamts/synapse 0.0.7-alpha → 0.0.9-alpha

package/src/components/RangeField/tests/RangeField.spec.ts

@@ -0,0 +1,224 @@
+import { vuetify } from '@tests/unit/setup'
+import { DOMWrapper, mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import RangeField from '../RangeField.vue'
+
+describe('RangeField', () => {
+	it('renders correctly', () => {
+		const wrapper = mount(RangeField, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				modelValue: [50, 80],
+				min: 0,
+				max: 100,
+			},
+		})
+
+		expect(wrapper.html()).toMatchSnapshot()
+		const inputMin = wrapper.find('input')
+		const inputMax = wrapper.findAll('input').at(1) as DOMWrapper<HTMLInputElement>
+
+		expect(inputMin.exists()).toBe(true)
+		expect(inputMax.exists()).toBe(true)
+
+		expect(inputMin.element.value).toBe('50')
+		expect(inputMax.element.value).toBe('80')
+	})
+
+	it('render correctly when the modelValue is not defined', async () => {
+		const wrapper = mount(RangeField, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				min: 0,
+				max: 100,
+			},
+		})
+
+		expect(wrapper.html()).toMatchSnapshot()
+		const inputMin = wrapper.find('input')
+		const inputMax = wrapper.findAll('input').at(1) as DOMWrapper<HTMLInputElement>
+
+		expect(inputMin.element.value).toBe('0')
+		expect(inputMax.element.value).toBe('100')
+	})
+
+	it('updates modelValue when input changes', async () => {
+		const wrapper = mount(RangeField, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				modelValue: [50, 80],
+				min: 0,
+				max: 100,
+			},
+		})
+
+		const inputMin = wrapper.find('input')
+		const inputMax = wrapper.findAll('input').at(1) as DOMWrapper<HTMLInputElement>
+
+		await inputMin.setValue('40')
+		await inputMax.setValue('90')
+
+		expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual([[40, 90]])
+	})
+
+	it('updates modelValue when the slider is updated', async () => {
+		const wrapper = mount(RangeField, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				modelValue: [50, 80],
+				min: 0,
+				max: 100,
+				step: 5,
+			},
+		})
+
+		const minThumb = wrapper.find('.thumb-min')
+		await minThumb.trigger('keydown', { key: 'ArrowRight' })
+		await wrapper.vm.$nextTick()
+
+		expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([[55, 80]])
+	})
+
+	it('renders correctly with value NaN', async () => {
+		const wrapper = mount(RangeField, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				modelValue: [NaN, NaN],
+				min: 0,
+				max: 100,
+			},
+		})
+
+		expect(wrapper.html()).toMatchSnapshot()
+		const inputMin = wrapper.find('input')
+		const inputMax = wrapper.findAll('input').at(1) as DOMWrapper<HTMLInputElement>
+
+		expect(inputMin.element.value).toBe('0')
+		expect(inputMax.element.value).toBe('0')
+	})
+
+	it('updates input value when modelValue changes', async () => {
+		const wrapper = mount(RangeField, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				modelValue: [50, 80],
+				min: 0,
+				max: 100,
+			},
+		})
+
+		await wrapper.setProps({ modelValue: [40, 90] })
+
+		const inputMin = wrapper.find('input')
+		const inputMax = wrapper.findAll('input').at(1) as DOMWrapper<HTMLInputElement>
+
+		expect(inputMin.element.value).toBe('40')
+		expect(inputMax.element.value).toBe('90')
+	})
+
+	it('set the value into the range if it is out of bounds', async () => {
+		const wrapper = mount(RangeField, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				modelValue: [50, 80],
+				min: 0,
+				max: 100,
+			},
+		})
+
+		await wrapper.setProps({ modelValue: [-10, 200] })
+
+		const inputMin = wrapper.find('input')
+		const inputMax = wrapper.findAll('input').at(1) as DOMWrapper<HTMLInputElement>
+
+		expect(inputMin.element.value).toBe('0')
+		expect(inputMax.element.value).toBe('100')
+		expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([[0, 100]])
+	})
+
+	it('set the value into the range if it is out of bounds', async () => {
+		const wrapper = mount(RangeField, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				modelValue: [50, 80],
+				min: 0,
+				max: 100,
+			},
+		})
+
+		await wrapper.setProps({ modelValue: [200, -10] })
+
+		const inputMin = wrapper.find('input')
+		const inputMax = wrapper.findAll('input').at(1) as DOMWrapper<HTMLInputElement>
+
+		expect(inputMin.element.value).toBe('100')
+		expect(inputMax.element.value).toBe('0')
+		expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([[100, 0]])
+	})
+
+	it('set the text fields to the last valid value on blur', async () => {
+		const wrapper = mount(RangeField, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				modelValue: [50, 80],
+				min: 0,
+				max: 100,
+			},
+			attachTo: document.body,
+		})
+
+		const inputMin = wrapper.find('input')
+		const inputMax = wrapper.findAll('input').at(1) as DOMWrapper<HTMLInputElement>
+
+		await inputMin.trigger('focus')
+		await inputMin.setValue('-')
+		await inputMin.trigger('blur')
+		expect(inputMin.element.value).toBe('50')
+
+		await inputMax.trigger('focus')
+		await inputMax.setValue('20')
+		await inputMax.trigger('blur')
+		expect(inputMax.element.value).toBe('80')
+
+		wrapper.unmount()
+	})
+
+	it('do not emit an event when the field is set empty', async () => {
+		const wrapper = mount(RangeField, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				modelValue: [50, 80],
+				min: 0,
+				max: 100,
+			},
+		})
+
+		const inputMin = wrapper.find('input')
+		const inputMax = wrapper.findAll('input').at(1) as DOMWrapper<HTMLInputElement>
+
+		await inputMin.setValue('')
+		await inputMax.setValue('')
+
+		expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+	})
+})

package/src/components/RangeField/tests/__snapshots__/RangeField.spec.ts.snap

@@ -0,0 +1,379 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`RangeField > render correctly when the modelValue is not defined 1`] = `
+"<div class="vd-range-field">
+  <div class="mt-10 mb-2 mx-3">
+    <div data-v-cfbfc2ef="" class="wrapper mt-8 mb-2">
+      <div data-v-cfbfc2ef="" class="track"><button data-v-cfbfc2ef="" class="thumb-min" style="left: 0%;" role="slider" aria-valuenow="0" tabindex="0" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" aria-label="Minimum" title="Minimum">
+          <div data-v-24e1b71f="" data-v-cfbfc2ef="" class="tooltip-wrapper">
+            <div data-v-24e1b71f="" class="tooltip" style="transform: translateX(calc(-50% + 0px)); transition: transform 0.1s;">0</div>
+          </div><span data-v-cfbfc2ef="" class="inner-thumb"></span>
+        </button><button data-v-cfbfc2ef="" role="slider" class="thumb-max" style="left: 100%;" aria-valuenow="100" tabindex="0" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" aria-label="Maximum" title="Maximum">
+          <div data-v-24e1b71f="" data-v-cfbfc2ef="" class="tooltip-wrapper">
+            <div data-v-24e1b71f="" class="tooltip" style="transform: translateX(calc(-50% + 0px)); transition: transform 0.1s;">100</div>
+          </div><span data-v-cfbfc2ef="" class="inner-thumb"></span>
+        </button>
+        <div data-v-cfbfc2ef="" class="fake-thumb thumb-min" aria-hidden="true" style="left: 0%;">
+          <div data-v-24e1b71f="" data-v-cfbfc2ef="" class="tooltip-wrapper">
+            <div data-v-24e1b71f="" class="tooltip" style="transform: translateX(calc(-50% + 0px));">0</div>
+          </div>
+        </div>
+        <div data-v-cfbfc2ef="" class="fake-thumb thumb-max" aria-hidden="true" style="left: 100%;">
+          <div data-v-24e1b71f="" data-v-cfbfc2ef="" class="tooltip-wrapper">
+            <div data-v-24e1b71f="" class="tooltip" style="transform: translateX(calc(-50% + 0px));">100</div>
+          </div>
+        </div>
+        <div data-v-cfbfc2ef="" class="filled-track" style="left: 0%; width: 100%;"></div>
+      </div>
+    </div>
+  </div>
+  <div class="d-flex flex-wrap max-width-none">
+    <div class="v-input v-input--horizontal v-input--center-affix v-input--density-default v-theme--light v-locale--is-ltr v-input--dirty v-text-field ma-3">
+      <!---->
+      <div class="v-input__control">
+        <div class="v-field v-field--active v-field--center-affix v-field--dirty v-field--variant-outlined v-theme--light v-locale--is-ltr">
+          <div class="v-field__overlay"></div>
+          <div class="v-field__loader">
+            <div class="v-progress-linear v-theme--light v-locale--is-ltr" style="top: 0px; height: 0px; --v-progress-linear-height: 2px;" role="progressbar" aria-hidden="true" aria-valuemin="0" aria-valuemax="100">
+              <!---->
+              <div class="v-progress-linear__background bg-primary" style="opacity: NaN;"></div>
+              <div class="v-progress-linear__buffer bg-primary" style="opacity: NaN; width: 0%;"></div>
+              <transition-stub name="fade-transition" appear="false" persisted="false" css="true">
+                <div class="v-progress-linear__indeterminate">
+                  <div class="v-progress-linear__indeterminate long bg-primary"></div>
+                  <div class="v-progress-linear__indeterminate short bg-primary"></div>
+                </div>
+              </transition-stub>
+              <!---->
+            </div>
+          </div>
+          <!---->
+          <div class="v-field__field" data-no-activator="">
+            <!----><label class="v-label v-field-label" for="input-0">
+              <!---->Valeur min
+            </label>
+            <!----><input size="1" type="text" id="input-0" aria-describedby="input-0-messages" aria-label="Valeur min" inputmode="numeric" title="Valeur min" class="v-field__input" value="0">
+            <!---->
+          </div>
+          <!---->
+          <!---->
+          <div class="v-field__outline">
+            <div class="v-field__outline__start"></div>
+            <div class="v-field__outline__notch"><label class="v-label v-field-label v-field-label--floating" aria-hidden="true" for="input-0">
+                <!---->Valeur min
+              </label></div>
+            <div class="v-field__outline__end"></div>
+            <!---->
+          </div>
+        </div>
+      </div>
+      <!---->
+      <div id="input-0-messages" class="v-input__details" role="alert" aria-live="polite">
+        <transition-group-stub name="slide-y-transition" tag="div" appear="false" persisted="false" css="true" class="v-messages">
+          <!---->
+        </transition-group-stub>
+        <!---->
+      </div>
+    </div>
+    <div class="v-input v-input--horizontal v-input--center-affix v-input--density-default v-theme--light v-locale--is-ltr v-input--dirty v-text-field ma-3">
+      <!---->
+      <div class="v-input__control">
+        <div class="v-field v-field--active v-field--center-affix v-field--dirty v-field--variant-outlined v-theme--light v-locale--is-ltr">
+          <div class="v-field__overlay"></div>
+          <div class="v-field__loader">
+            <div class="v-progress-linear v-theme--light v-locale--is-ltr" style="top: 0px; height: 0px; --v-progress-linear-height: 2px;" role="progressbar" aria-hidden="true" aria-valuemin="0" aria-valuemax="100">
+              <!---->
+              <div class="v-progress-linear__background bg-primary" style="opacity: NaN;"></div>
+              <div class="v-progress-linear__buffer bg-primary" style="opacity: NaN; width: 0%;"></div>
+              <transition-stub name="fade-transition" appear="false" persisted="false" css="true">
+                <div class="v-progress-linear__indeterminate">
+                  <div class="v-progress-linear__indeterminate long bg-primary"></div>
+                  <div class="v-progress-linear__indeterminate short bg-primary"></div>
+                </div>
+              </transition-stub>
+              <!---->
+            </div>
+          </div>
+          <!---->
+          <div class="v-field__field" data-no-activator="">
+            <!----><label class="v-label v-field-label" for="input-2">
+              <!---->Valeur max
+            </label>
+            <!----><input size="1" type="text" id="input-2" aria-describedby="input-2-messages" aria-label="Valeur max" inputmode="numeric" title="Valeur max" class="v-field__input" value="100">
+            <!---->
+          </div>
+          <!---->
+          <!---->
+          <div class="v-field__outline">
+            <div class="v-field__outline__start"></div>
+            <div class="v-field__outline__notch"><label class="v-label v-field-label v-field-label--floating" aria-hidden="true" for="input-2">
+                <!---->Valeur max
+              </label></div>
+            <div class="v-field__outline__end"></div>
+            <!---->
+          </div>
+        </div>
+      </div>
+      <!---->
+      <div id="input-2-messages" class="v-input__details" role="alert" aria-live="polite">
+        <transition-group-stub name="slide-y-transition" tag="div" appear="false" persisted="false" css="true" class="v-messages">
+          <!---->
+        </transition-group-stub>
+        <!---->
+      </div>
+    </div>
+  </div>
+</div>"
+`;
+
+exports[`RangeField > renders correctly 1`] = `
+"<div class="vd-range-field">
+  <div class="mt-10 mb-2 mx-3">
+    <div data-v-cfbfc2ef="" class="wrapper mt-8 mb-2">
+      <div data-v-cfbfc2ef="" class="track"><button data-v-cfbfc2ef="" class="thumb-min" style="left: 50%;" role="slider" aria-valuenow="50" tabindex="0" aria-valuemin="0" aria-valuemax="80" aria-orientation="horizontal" aria-label="Minimum" title="Minimum">
+          <div data-v-24e1b71f="" data-v-cfbfc2ef="" class="tooltip-wrapper">
+            <div data-v-24e1b71f="" class="tooltip" style="transform: translateX(calc(-50% + 0px)); transition: transform 0.1s;">50</div>
+          </div><span data-v-cfbfc2ef="" class="inner-thumb"></span>
+        </button><button data-v-cfbfc2ef="" role="slider" class="thumb-max" style="left: 80%;" aria-valuenow="80" tabindex="0" aria-valuemin="50" aria-valuemax="100" aria-orientation="horizontal" aria-label="Maximum" title="Maximum">
+          <div data-v-24e1b71f="" data-v-cfbfc2ef="" class="tooltip-wrapper">
+            <div data-v-24e1b71f="" class="tooltip" style="transform: translateX(calc(-50% + 0px)); transition: transform 0.1s;">80</div>
+          </div><span data-v-cfbfc2ef="" class="inner-thumb"></span>
+        </button>
+        <div data-v-cfbfc2ef="" class="fake-thumb thumb-min" aria-hidden="true" style="left: 50%;">
+          <div data-v-24e1b71f="" data-v-cfbfc2ef="" class="tooltip-wrapper">
+            <div data-v-24e1b71f="" class="tooltip" style="transform: translateX(calc(-50% + 0px));">50</div>
+          </div>
+        </div>
+        <div data-v-cfbfc2ef="" class="fake-thumb thumb-max" aria-hidden="true" style="left: 80%;">
+          <div data-v-24e1b71f="" data-v-cfbfc2ef="" class="tooltip-wrapper">
+            <div data-v-24e1b71f="" class="tooltip" style="transform: translateX(calc(-50% + 0px));">80</div>
+          </div>
+        </div>
+        <div data-v-cfbfc2ef="" class="filled-track" style="left: 50%; width: 30%;"></div>
+      </div>
+    </div>
+  </div>
+  <div class="d-flex flex-wrap max-width-none">
+    <div class="v-input v-input--horizontal v-input--center-affix v-input--density-default v-theme--light v-locale--is-ltr v-input--dirty v-text-field ma-3">
+      <!---->
+      <div class="v-input__control">
+        <div class="v-field v-field--active v-field--center-affix v-field--dirty v-field--variant-outlined v-theme--light v-locale--is-ltr">
+          <div class="v-field__overlay"></div>
+          <div class="v-field__loader">
+            <div class="v-progress-linear v-theme--light v-locale--is-ltr" style="top: 0px; height: 0px; --v-progress-linear-height: 2px;" role="progressbar" aria-hidden="true" aria-valuemin="0" aria-valuemax="100">
+              <!---->
+              <div class="v-progress-linear__background bg-primary" style="opacity: NaN;"></div>
+              <div class="v-progress-linear__buffer bg-primary" style="opacity: NaN; width: 0%;"></div>
+              <transition-stub name="fade-transition" appear="false" persisted="false" css="true">
+                <div class="v-progress-linear__indeterminate">
+                  <div class="v-progress-linear__indeterminate long bg-primary"></div>
+                  <div class="v-progress-linear__indeterminate short bg-primary"></div>
+                </div>
+              </transition-stub>
+              <!---->
+            </div>
+          </div>
+          <!---->
+          <div class="v-field__field" data-no-activator="">
+            <!----><label class="v-label v-field-label" for="input-0">
+              <!---->Valeur min
+            </label>
+            <!----><input size="1" type="text" id="input-0" aria-describedby="input-0-messages" aria-label="Valeur min" inputmode="numeric" title="Valeur min" class="v-field__input" value="50">
+            <!---->
+          </div>
+          <!---->
+          <!---->
+          <div class="v-field__outline">
+            <div class="v-field__outline__start"></div>
+            <div class="v-field__outline__notch"><label class="v-label v-field-label v-field-label--floating" aria-hidden="true" for="input-0">
+                <!---->Valeur min
+              </label></div>
+            <div class="v-field__outline__end"></div>
+            <!---->
+          </div>
+        </div>
+      </div>
+      <!---->
+      <div id="input-0-messages" class="v-input__details" role="alert" aria-live="polite">
+        <transition-group-stub name="slide-y-transition" tag="div" appear="false" persisted="false" css="true" class="v-messages">
+          <!---->
+        </transition-group-stub>
+        <!---->
+      </div>
+    </div>
+    <div class="v-input v-input--horizontal v-input--center-affix v-input--density-default v-theme--light v-locale--is-ltr v-input--dirty v-text-field ma-3">
+      <!---->
+      <div class="v-input__control">
+        <div class="v-field v-field--active v-field--center-affix v-field--dirty v-field--variant-outlined v-theme--light v-locale--is-ltr">
+          <div class="v-field__overlay"></div>
+          <div class="v-field__loader">
+            <div class="v-progress-linear v-theme--light v-locale--is-ltr" style="top: 0px; height: 0px; --v-progress-linear-height: 2px;" role="progressbar" aria-hidden="true" aria-valuemin="0" aria-valuemax="100">
+              <!---->
+              <div class="v-progress-linear__background bg-primary" style="opacity: NaN;"></div>
+              <div class="v-progress-linear__buffer bg-primary" style="opacity: NaN; width: 0%;"></div>
+              <transition-stub name="fade-transition" appear="false" persisted="false" css="true">
+                <div class="v-progress-linear__indeterminate">
+                  <div class="v-progress-linear__indeterminate long bg-primary"></div>
+                  <div class="v-progress-linear__indeterminate short bg-primary"></div>
+                </div>
+              </transition-stub>
+              <!---->
+            </div>
+          </div>
+          <!---->
+          <div class="v-field__field" data-no-activator="">
+            <!----><label class="v-label v-field-label" for="input-2">
+              <!---->Valeur max
+            </label>
+            <!----><input size="1" type="text" id="input-2" aria-describedby="input-2-messages" aria-label="Valeur max" inputmode="numeric" title="Valeur max" class="v-field__input" value="80">
+            <!---->
+          </div>
+          <!---->
+          <!---->
+          <div class="v-field__outline">
+            <div class="v-field__outline__start"></div>
+            <div class="v-field__outline__notch"><label class="v-label v-field-label v-field-label--floating" aria-hidden="true" for="input-2">
+                <!---->Valeur max
+              </label></div>
+            <div class="v-field__outline__end"></div>
+            <!---->
+          </div>
+        </div>
+      </div>
+      <!---->
+      <div id="input-2-messages" class="v-input__details" role="alert" aria-live="polite">
+        <transition-group-stub name="slide-y-transition" tag="div" appear="false" persisted="false" css="true" class="v-messages">
+          <!---->
+        </transition-group-stub>
+        <!---->
+      </div>
+    </div>
+  </div>
+</div>"
+`;
+
+exports[`RangeField > renders correctly with value NaN 1`] = `
+"<div class="vd-range-field">
+  <div class="mt-10 mb-2 mx-3">
+    <div data-v-cfbfc2ef="" class="wrapper mt-8 mb-2">
+      <div data-v-cfbfc2ef="" class="track"><button data-v-cfbfc2ef="" class="thumb-min" style="left: 0%;" role="slider" aria-valuenow="0" tabindex="0" aria-valuemin="0" aria-valuemax="0" aria-orientation="horizontal" aria-label="Minimum" title="Minimum">
+          <div data-v-24e1b71f="" data-v-cfbfc2ef="" class="tooltip-wrapper">
+            <div data-v-24e1b71f="" class="tooltip" style="transform: translateX(calc(-50% + 0px)); transition: transform 0.1s;">0</div>
+          </div><span data-v-cfbfc2ef="" class="inner-thumb"></span>
+        </button><button data-v-cfbfc2ef="" role="slider" class="thumb-max" style="left: 0%;" aria-valuenow="0" tabindex="0" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" aria-label="Maximum" title="Maximum">
+          <div data-v-24e1b71f="" data-v-cfbfc2ef="" class="tooltip-wrapper">
+            <div data-v-24e1b71f="" class="tooltip" style="transform: translateX(calc(-50% + 0px)); transition: transform 0.1s;">0</div>
+          </div><span data-v-cfbfc2ef="" class="inner-thumb"></span>
+        </button>
+        <div data-v-cfbfc2ef="" class="fake-thumb thumb-min" aria-hidden="true" style="left: 0%;">
+          <div data-v-24e1b71f="" data-v-cfbfc2ef="" class="tooltip-wrapper">
+            <div data-v-24e1b71f="" class="tooltip" style="transform: translateX(calc(-50% + 0px));">0</div>
+          </div>
+        </div>
+        <div data-v-cfbfc2ef="" class="fake-thumb thumb-max" aria-hidden="true" style="left: 0%;">
+          <div data-v-24e1b71f="" data-v-cfbfc2ef="" class="tooltip-wrapper">
+            <div data-v-24e1b71f="" class="tooltip" style="transform: translateX(calc(-50% + 0px));">0</div>
+          </div>
+        </div>
+        <div data-v-cfbfc2ef="" class="filled-track" style="left: 0%; width: 0%;"></div>
+      </div>
+    </div>
+  </div>
+  <div class="d-flex flex-wrap max-width-none">
+    <div class="v-input v-input--horizontal v-input--center-affix v-input--density-default v-theme--light v-locale--is-ltr v-input--dirty v-text-field ma-3">
+      <!---->
+      <div class="v-input__control">
+        <div class="v-field v-field--active v-field--center-affix v-field--dirty v-field--variant-outlined v-theme--light v-locale--is-ltr">
+          <div class="v-field__overlay"></div>
+          <div class="v-field__loader">
+            <div class="v-progress-linear v-theme--light v-locale--is-ltr" style="top: 0px; height: 0px; --v-progress-linear-height: 2px;" role="progressbar" aria-hidden="true" aria-valuemin="0" aria-valuemax="100">
+              <!---->
+              <div class="v-progress-linear__background bg-primary" style="opacity: NaN;"></div>
+              <div class="v-progress-linear__buffer bg-primary" style="opacity: NaN; width: 0%;"></div>
+              <transition-stub name="fade-transition" appear="false" persisted="false" css="true">
+                <div class="v-progress-linear__indeterminate">
+                  <div class="v-progress-linear__indeterminate long bg-primary"></div>
+                  <div class="v-progress-linear__indeterminate short bg-primary"></div>
+                </div>
+              </transition-stub>
+              <!---->
+            </div>
+          </div>
+          <!---->
+          <div class="v-field__field" data-no-activator="">
+            <!----><label class="v-label v-field-label" for="input-0">
+              <!---->Valeur min
+            </label>
+            <!----><input size="1" type="text" id="input-0" aria-describedby="input-0-messages" aria-label="Valeur min" inputmode="numeric" title="Valeur min" class="v-field__input" value="0">
+            <!---->
+          </div>
+          <!---->
+          <!---->
+          <div class="v-field__outline">
+            <div class="v-field__outline__start"></div>
+            <div class="v-field__outline__notch"><label class="v-label v-field-label v-field-label--floating" aria-hidden="true" for="input-0">
+                <!---->Valeur min
+              </label></div>
+            <div class="v-field__outline__end"></div>
+            <!---->
+          </div>
+        </div>
+      </div>
+      <!---->
+      <div id="input-0-messages" class="v-input__details" role="alert" aria-live="polite">
+        <transition-group-stub name="slide-y-transition" tag="div" appear="false" persisted="false" css="true" class="v-messages">
+          <!---->
+        </transition-group-stub>
+        <!---->
+      </div>
+    </div>
+    <div class="v-input v-input--horizontal v-input--center-affix v-input--density-default v-theme--light v-locale--is-ltr v-input--dirty v-text-field ma-3">
+      <!---->
+      <div class="v-input__control">
+        <div class="v-field v-field--active v-field--center-affix v-field--dirty v-field--variant-outlined v-theme--light v-locale--is-ltr">
+          <div class="v-field__overlay"></div>
+          <div class="v-field__loader">
+            <div class="v-progress-linear v-theme--light v-locale--is-ltr" style="top: 0px; height: 0px; --v-progress-linear-height: 2px;" role="progressbar" aria-hidden="true" aria-valuemin="0" aria-valuemax="100">
+              <!---->
+              <div class="v-progress-linear__background bg-primary" style="opacity: NaN;"></div>
+              <div class="v-progress-linear__buffer bg-primary" style="opacity: NaN; width: 0%;"></div>
+              <transition-stub name="fade-transition" appear="false" persisted="false" css="true">
+                <div class="v-progress-linear__indeterminate">
+                  <div class="v-progress-linear__indeterminate long bg-primary"></div>
+                  <div class="v-progress-linear__indeterminate short bg-primary"></div>
+                </div>
+              </transition-stub>
+              <!---->
+            </div>
+          </div>
+          <!---->
+          <div class="v-field__field" data-no-activator="">
+            <!----><label class="v-label v-field-label" for="input-2">
+              <!---->Valeur max
+            </label>
+            <!----><input size="1" type="text" id="input-2" aria-describedby="input-2-messages" aria-label="Valeur max" inputmode="numeric" title="Valeur max" class="v-field__input" value="0">
+            <!---->
+          </div>
+          <!---->
+          <!---->
+          <div class="v-field__outline">
+            <div class="v-field__outline__start"></div>
+            <div class="v-field__outline__notch"><label class="v-label v-field-label v-field-label--floating" aria-hidden="true" for="input-2">
+                <!---->Valeur max
+              </label></div>
+            <div class="v-field__outline__end"></div>
+            <!---->
+          </div>
+        </div>
+      </div>
+      <!---->
+      <div id="input-2-messages" class="v-input__details" role="alert" aria-live="polite">
+        <transition-group-stub name="slide-y-transition" tag="div" appear="false" persisted="false" css="true" class="v-messages">
+          <!---->
+        </transition-group-stub>
+        <!---->
+      </div>
+    </div>
+  </div>
+</div>"
+`;