Add divider to numeric slider (#10268)

https://github.com/enso-org/enso/assets/1047859/5a9ba761-dfec-4ec7-99ce-3088556e63e4

Closes #10234.

# Important Notes
- Tested in combination with #10267, though they can be merged separately.

app/gui2/e2e/widgets.spec.ts

@@ -55,7 +55,7 @@ test('Widget in plain AST', async ({ page }) => {
   const numberNode = locate.graphNodeByBinding(page, 'five')
   const numberWidget = numberNode.locator('.WidgetNumber')
   await expect(numberWidget).toBeVisible()
-  await expect(numberWidget.locator('input')).toHaveValue('5')
+  await expect(numberWidget).toHaveValue('5')
 
   const listNode = locate.graphNodeByBinding(page, 'list')
   const listWidget = listNode.locator('.WidgetVector')

app/gui2/src/assets/base.css

@@ -15,6 +15,7 @@
   --color-dim: rgb(0 0 0 / 0.25);
   --color-frame-bg: rgb(255 255 255 / 0.3);
   --color-frame-selected-bg: rgb(255 255 255 / 0.7);
+  --color-widget-slight: rgb(255 255 255 / 0.06);
   --color-widget: rgb(255 255 255 / 0.12);
   --color-widget-focus: rgb(255 255 255 / 0.25);
   --color-widget-selected: rgb(255 255 255 / 0.58);

app/gui2/src/components/widgets/NumericInputWidget.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { usePointer } from '@/composables/events'
-import { computed, ref, watch, type ComponentInstance, type StyleValue } from 'vue'
+import { computed, ref, watch, type CSSProperties, type ComponentInstance } from 'vue'
 import AutoSizedInput from './AutoSizedInput.vue'
 
 const props = defineProps<{
@@ -60,7 +60,7 @@ const sliderWidth = computed(() => {
 const inputComponent = ref<ComponentInstance<typeof AutoSizedInput>>()
 const MIN_CONTENT_WIDTH = 56
 
-const inputStyle = computed<StyleValue>(() => {
+const inputStyle = computed<CSSProperties>(() => {
   const value = `${editedValue.value}`
   const dotIdx = value.indexOf('.')
   let indent = 0
@@ -109,20 +109,19 @@ defineExpose({
 </script>
 
 <template>
-  <label class="NumericInputWidget">
+  <AutoSizedInput
-    <div v-if="props.limits != null" class="slider" :style="{ width: sliderWidth }"></div>
+    ref="inputComponent"
-    <AutoSizedInput
+    v-model="editedValue"
-      ref="inputComponent"
+    autoSelect
-      v-model="editedValue"
+    class="NumericInputWidget"
-      autoSelect
+    :class="{ slider: sliderWidth != null }"
-      :style="inputStyle"
+    :style="{ ...inputStyle, '--slider-width': sliderWidth }"
-      v-on="dragPointer.events"
+    v-on="dragPointer.events"
-      @click.stop
+    @click.stop
-      @blur="blurred"
+    @blur="blurred"
-      @focus="focused"
+    @focus="focused"
-      @input="emit('input', editedValue)"
+    @input="emit('input', editedValue)"
-    />
+  />
-  </label>
 </template>
 
 <style scoped>
@@ -130,22 +129,24 @@ defineExpose({
   position: relative;
   overflow: clip;
   border-radius: var(--radius-full);
-}
-.AutoSizedInput {
   user-select: none;
+  padding: 0 4px;
   background: var(--color-widget);
-  border-radius: var(--radius-full);
-  overflow: clip;
-  padding: 0px 4px;
   &:focus {
     background: var(--color-widget-focus);
   }
 }
 
-.slider {
+.NumericInputWidget.slider {
-  position: absolute;
+  &:focus {
-  height: 100%;
+    /* Color will be blended with background defined below. */
-  left: 0;
+    background-color: var(--color-widget);
-  background: var(--color-widget);
+  }
+  background: linear-gradient(
+    to right,
+    var(--color-widget-focus) 0 calc(var(--slider-width) - 1px),
+    var(--color-widget-slight) calc(var(--slider-width) - 1px) var(--slider-width),
+    var(--color-widget) var(--slider-width) 100%
+  );
 }
 </style>