@umbra.ui/core 0.1.0

package/src/components/controls/RangeSlider/RangeSlider.vue

@@ -0,0 +1,535 @@
+<script setup lang="ts">
+import { ref, computed, watch } from "vue";
+import "./theme.css";
+
+export interface Props {
+  sliderStyle?: "default" | "capline" | "capsule";
+  min?: number;
+  max?: number;
+  minValue: number;
+  maxValue: number;
+  tickInterval?: number;
+  showTickLabels?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  sliderStyle: "default",
+  min: 0,
+  max: 100,
+  minValue: 25,
+  maxValue: 75,
+  tickInterval: 10,
+  showTickLabels: false,
+});
+
+const emit = defineEmits<{
+  "update:minValue": [value: number];
+  "update:maxValue": [value: number];
+}>();
+
+const minProgress = ref(props.minValue);
+const maxProgress = ref(props.maxValue);
+const activeThumb = ref<"min" | "max" | null>(null);
+const showMinHud = ref(false);
+const showMaxHud = ref(false);
+const trackRef = ref<HTMLDivElement>();
+let hideMinTimeout: ReturnType<typeof setTimeout> | undefined;
+let hideMaxTimeout: ReturnType<typeof setTimeout> | undefined;
+
+// Computed properties for thumb positions
+const minThumbPosition = computed(() => `${minProgress.value}%`);
+const maxThumbPosition = computed(() => `${maxProgress.value}%`);
+
+// Computed property for the range track
+const rangeStyle = computed(() => ({
+  left: `${minProgress.value}%`,
+  width: `${maxProgress.value - minProgress.value}%`,
+}));
+
+// Convert percentage to actual value
+const percentageToValue = (percentage: number) => {
+  const range = props.max - props.min;
+  return props.min + (percentage / 100) * range;
+};
+
+// Convert value to percentage
+const valueToPercentage = (value: number) => {
+  const range = props.max - props.min;
+  return ((value - props.min) / range) * 100;
+};
+
+// Initialize progress from props
+minProgress.value = valueToPercentage(props.minValue);
+maxProgress.value = valueToPercentage(props.maxValue);
+
+// Watch for changes to minValue and maxValue props
+watch(
+  () => [props.minValue, props.maxValue],
+  ([newMinValue, newMaxValue]) => {
+    minProgress.value = valueToPercentage(newMinValue);
+    maxProgress.value = valueToPercentage(newMaxValue);
+  }
+);
+
+const updateProgress = (
+  event: MouseEvent | TouchEvent,
+  thumbType: "min" | "max"
+) => {
+  if (!trackRef.value) return;
+
+  const rect = trackRef.value.getBoundingClientRect();
+  const clientX = "touches" in event ? event.touches[0].clientX : event.clientX;
+  const x = clientX - rect.left;
+  const percentage = (x / rect.width) * 100;
+  const clampedPercentage = Math.max(0, Math.min(100, percentage));
+
+  if (thumbType === "min") {
+    // Ensure min doesn't exceed max
+    minProgress.value = Math.min(clampedPercentage, maxProgress.value);
+    emit("update:minValue", percentageToValue(minProgress.value));
+  } else {
+    // Ensure max doesn't go below min
+    maxProgress.value = Math.max(clampedPercentage, minProgress.value);
+    emit("update:maxValue", percentageToValue(maxProgress.value));
+  }
+};
+
+const getClosestThumb = (event: MouseEvent | TouchEvent): "min" | "max" => {
+  if (!trackRef.value) return "min";
+
+  const rect = trackRef.value.getBoundingClientRect();
+  const clientX = "touches" in event ? event.touches[0].clientX : event.clientX;
+  const x = clientX - rect.left;
+  const percentage = (x / rect.width) * 100;
+
+  // Calculate distances to each thumb
+  const distToMin = Math.abs(percentage - minProgress.value);
+  const distToMax = Math.abs(percentage - maxProgress.value);
+
+  // If thumbs are overlapping, prefer the one that would increase the range
+  if (Math.abs(minProgress.value - maxProgress.value) < 5) {
+    return percentage < minProgress.value ? "min" : "max";
+  }
+
+  return distToMin < distToMax ? "min" : "max";
+};
+
+const handleMouseDown = (
+  event: MouseEvent | TouchEvent,
+  thumbType?: "min" | "max"
+) => {
+  event.preventDefault();
+  event.stopPropagation();
+
+  // Determine which thumb to move
+  const thumb = thumbType || getClosestThumb(event);
+  activeThumb.value = thumb;
+
+  // Show appropriate HUD
+  if (thumb === "min") {
+    showMinHud.value = true;
+    if (hideMinTimeout) clearTimeout(hideMinTimeout);
+  } else {
+    showMaxHud.value = true;
+    if (hideMaxTimeout) clearTimeout(hideMaxTimeout);
+  }
+
+  updateProgress(event, thumb);
+
+  const handleMove = (e: MouseEvent | TouchEvent) => {
+    if (activeThumb.value) {
+      updateProgress(e, activeThumb.value);
+    }
+  };
+
+  const handleUp = () => {
+    const wasActiveThumb = activeThumb.value;
+    activeThumb.value = null;
+
+    // Hide appropriate HUD after delay
+    if (wasActiveThumb === "min") {
+      hideMinTimeout = setTimeout(() => {
+        showMinHud.value = false;
+      }, 500);
+    } else if (wasActiveThumb === "max") {
+      hideMaxTimeout = setTimeout(() => {
+        showMaxHud.value = false;
+      }, 500);
+    }
+
+    document.removeEventListener("mousemove", handleMove);
+    document.removeEventListener("touchmove", handleMove);
+    document.removeEventListener("mouseup", handleUp);
+    document.removeEventListener("touchend", handleUp);
+  };
+
+  document.addEventListener("mousemove", handleMove);
+  document.addEventListener("touchmove", handleMove);
+  document.addEventListener("mouseup", handleUp);
+  document.addEventListener("touchend", handleUp);
+};
+
+// Computed values for display
+const minDisplayValue = computed(() =>
+  Math.round(percentageToValue(minProgress.value))
+);
+const maxDisplayValue = computed(() =>
+  Math.round(percentageToValue(maxProgress.value))
+);
+
+// Generate tick marks
+const ticks = computed(() => {
+  if (!props.tickInterval || props.tickInterval <= 0) return [];
+
+  const ticksArray = [];
+  const range = props.max - props.min;
+
+  // Start from min and add ticks at intervals
+  for (let value = props.min; value <= props.max; value += props.tickInterval) {
+    const percentage = ((value - props.min) / range) * 100;
+    ticksArray.push({
+      value,
+      percentage,
+      position: `${percentage}%`,
+    });
+  }
+
+  // Ensure the max value is included if it's not already
+  const lastTick = ticksArray[ticksArray.length - 1];
+  if (lastTick && lastTick.value < props.max) {
+    ticksArray.push({
+      value: props.max,
+      percentage: 100,
+      position: "100%",
+    });
+  }
+
+  return ticksArray;
+});
+</script>
+
+<template>
+  <div :class="[$style.container, $style[sliderStyle]]">
+    <p :class="[$style.label, 'footnote']">{{ min }}</p>
+    <div :class="$style.sliderWrapper">
+      <div
+        ref="trackRef"
+        :class="$style.track"
+        @mousedown="handleMouseDown"
+        @touchstart="handleMouseDown"
+      >
+        <!-- Tick marks -->
+        <div v-if="tickInterval > 0" :class="$style.ticks">
+          <div
+            v-for="tick in ticks"
+            :key="tick.value"
+            :class="$style.tick"
+            :style="{ left: tick.position }"
+          />
+        </div>
+
+        <!-- Range highlight (render before thumbs so thumbs appear above without z-index) -->
+        <div :class="$style.progress" :style="rangeStyle"></div>
+
+        <!-- Thumbs: render active thumb last so it appears on top without z-index -->
+        <template v-if="activeThumb === 'min'">
+          <!-- Max then Min (Min on top) -->
+          <div
+            :class="[$style.thumb]"
+            :style="{ '--progress': maxProgress + '%' }"
+            @mousedown.stop="(e) => handleMouseDown(e, 'max')"
+            @touchstart.stop="(e) => handleMouseDown(e, 'max')"
+          >
+            <div :class="[$style.hud, { [$style.visible]: showMaxHud }]">
+              <p class="footnote">{{ maxDisplayValue }}</p>
+            </div>
+          </div>
+          <div
+            :class="[$style.thumb, $style.active]"
+            :style="{ '--progress': minProgress + '%' }"
+            @mousedown.stop="(e) => handleMouseDown(e, 'min')"
+            @touchstart.stop="(e) => handleMouseDown(e, 'min')"
+          >
+            <div :class="[$style.hud, { [$style.visible]: showMinHud }]">
+              <p class="footnote">{{ minDisplayValue }}</p>
+            </div>
+          </div>
+        </template>
+        <template v-else-if="activeThumb === 'max'">
+          <!-- Min then Max (Max on top) -->
+          <div
+            :class="[$style.thumb]"
+            :style="{ '--progress': minProgress + '%' }"
+            @mousedown.stop="(e) => handleMouseDown(e, 'min')"
+            @touchstart.stop="(e) => handleMouseDown(e, 'min')"
+          >
+            <div :class="[$style.hud, { [$style.visible]: showMinHud }]">
+              <p class="footnote">{{ minDisplayValue }}</p>
+            </div>
+          </div>
+          <div
+            :class="[$style.thumb, $style.active]"
+            :style="{ '--progress': maxProgress + '%' }"
+            @mousedown.stop="(e) => handleMouseDown(e, 'max')"
+            @touchstart.stop="(e) => handleMouseDown(e, 'max')"
+          >
+            <div :class="[$style.hud, { [$style.visible]: showMaxHud }]">
+              <p class="footnote">{{ maxDisplayValue }}</p>
+            </div>
+          </div>
+        </template>
+        <template v-else>
+          <!-- Default order: Min then Max; neither active -->
+          <div
+            :class="[$style.thumb]"
+            :style="{ '--progress': minProgress + '%' }"
+            @mousedown.stop="(e) => handleMouseDown(e, 'min')"
+            @touchstart.stop="(e) => handleMouseDown(e, 'min')"
+          >
+            <div :class="[$style.hud, { [$style.visible]: showMinHud }]">
+              <p class="footnote">{{ minDisplayValue }}</p>
+            </div>
+          </div>
+          <div
+            :class="[$style.thumb]"
+            :style="{ '--progress': maxProgress + '%' }"
+            @mousedown.stop="(e) => handleMouseDown(e, 'max')"
+            @touchstart.stop="(e) => handleMouseDown(e, 'max')"
+          >
+            <div :class="[$style.hud, { [$style.visible]: showMaxHud }]">
+              <p class="footnote">{{ maxDisplayValue }}</p>
+            </div>
+          </div>
+        </template>
+      </div>
+
+      <!-- Tick labels -->
+      <div v-if="showTickLabels && tickInterval > 0" :class="$style.tickLabels">
+        <span
+          v-for="tick in ticks"
+          :key="`label-${tick.value}`"
+          :class="$style.tickLabel"
+          :style="{ left: tick.position }"
+        >
+          {{ tick.value }}
+        </span>
+      </div>
+    </div>
+    <p :class="[$style.label, 'footnote']">{{ max }}</p>
+  </div>
+</template>
+
+<style module>
+.container {
+  display: flex;
+  align-items: center;
+  gap: 0.47rem;
+}
+
+.label {
+  color: var(--rangeslider-label-color);
+  opacity: 1;
+}
+
+.track {
+  position: relative;
+  top: 0.59rem;
+  min-width: 11.76rem;
+  width: 100%;
+  border-radius: 999px;
+  cursor: default;
+  user-select: none;
+}
+.container.default .track {
+  height: 0.24rem;
+  background-color: var(--rangeslider-track-default-bg);
+}
+.container.capsule .track {
+  background-color: transparent;
+  height: 1.18rem;
+  border: 0.12rem solid var(--rangeslider-track-capsule-border);
+}
+.container.capline .track {
+  height: 0.88rem;
+  background-color: var(--rangeslider-track-capline-bg);
+}
+
+.thumb {
+  position: absolute;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  cursor: grab;
+  transition: transform 0.1s ease;
+}
+
+.thumb.active {
+  cursor: grabbing;
+}
+
+.container.default .thumb {
+  background-color: var(--rangeslider-thumb-default-bg);
+  width: 0.82rem;
+  height: 0.82rem;
+  border-radius: 50%;
+  left: var(--progress);
+}
+.container.default .thumb.active {
+  transform: translate(-50%, -50%) scale(1.2);
+}
+
+.container.capsule .thumb {
+  background-color: var(--rangeslider-thumb-capsule-bg);
+  width: 1rem;
+  height: 1rem;
+  border-radius: 50%;
+  border: 0.12rem solid var(--rangeslider-thumb-capsule-border);
+  left: var(--progress);
+}
+.container.capsule .thumb.active {
+  transform: translate(-50%, -50%) scale(1.15);
+}
+
+.container.capline .thumb {
+  background-color: var(--rangeslider-thumb-capline-bg);
+  width: 0.29rem;
+  height: 1.35rem;
+  border-radius: 999px;
+  left: var(--progress);
+}
+.container.capline .thumb.active {
+  transform: translate(-50%, -50%) scale(1.1, 1.05);
+}
+
+.progress {
+  height: 100%;
+  border-radius: 999px;
+  position: absolute;
+  top: 0;
+}
+.container.default .progress {
+  background-color: var(--rangeslider-progress-default-bg);
+}
+.container.capsule .progress {
+  background-color: var(--rangeslider-progress-capsule-bg);
+  border-top: 0.24rem solid var(--rangeslider-progress-capsule-border-top);
+  border-bottom: 0.24rem solid var(--rangeslider-progress-capsule-border-bottom);
+}
+.container.capline .progress {
+  background-color: var(--rangeslider-progress-capline-bg);
+}
+
+.hud {
+  position: absolute;
+  padding: 0.24rem;
+  border-radius: 0.24rem;
+  left: 50%;
+  transform: translateX(-50%);
+  white-space: nowrap;
+  opacity: 0;
+  transition: opacity 0.2s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+}
+
+.container.default .hud {
+  bottom: calc(100% + 0.29rem);
+  background-color: var(--rangeslider-hud-default-bg);
+}
+.container.capsule .hud {
+  bottom: calc(100% + 0.59rem);
+  background-color: var(--rangeslider-hud-capsule-bg);
+  border-radius: 999px;
+  min-width: 2rem;
+}
+.container.capline .hud {
+  bottom: calc(100% + 0.59rem);
+  background-color: var(--rangeslider-hud-capline-bg);
+}
+
+.hud.visible {
+  opacity: 1;
+}
+
+.hud p {
+  margin: 0;
+}
+.container.default .hud p {
+  color: var(--rangeslider-hud-default-text);
+}
+.container.capsule .hud p {
+  color: var(--rangeslider-hud-capsule-text);
+}
+.container.capline .hud p {
+  color: var(--rangeslider-hud-capline-text);
+}
+
+/* Slider wrapper to contain track and labels */
+.sliderWrapper {
+  position: relative;
+  flex: 1;
+  padding-bottom: 1.18rem; /* Space for tick labels if shown */
+}
+
+/* Tick marks container */
+.ticks {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 100%;
+  pointer-events: none;
+}
+.ticks > :first-child {
+  opacity: 0;
+}
+.ticks > :last-child {
+  opacity: 0;
+}
+
+/* Individual tick mark */
+.tick {
+  position: absolute;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  background-color: var(--rangeslider-tick-color);
+  opacity: 1;
+}
+
+.container.default .tick {
+  width: 0.5px;
+  height: 0.47rem;
+}
+
+.container.capsule .tick {
+  width: 0.5px;
+  height: 0.71rem;
+}
+
+.container.capline .tick {
+  width: 0.5px;
+  height: 1.18rem;
+  border-radius: 999px;
+}
+
+/* Tick labels container */
+.tickLabels {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  margin-top: 0.47rem;
+  height: 1.18rem;
+  font-size: 0.59rem;
+  color: var(--rangeslider-tick-label-color);
+  opacity: var(--rangeslider-tick-label-opacity);
+}
+
+/* Individual tick label */
+.tickLabel {
+  position: absolute;
+  transform: translateX(-50%);
+  white-space: nowrap;
+}
+</style>

package/src/components/controls/RangeSlider/theme.css

@@ -0,0 +1,80 @@
+/* Light theme using Colors */
+:root {
+  /* RangeSlider label colors */
+  --rangeslider-label-color: #1a1d23; /* gray12 - dark text for light mode */
+
+  /* RangeSlider track colors */
+  --rangeslider-track-default-bg: #cecece; /* gray5 - light background for light mode */
+  --rangeslider-track-capsule-border: #0090ff; /* blue9 - same as button primary */
+  --rangeslider-track-capline-bg: #e3e5e8; /* gray5 - light background for light mode */
+
+  /* RangeSlider thumb colors */
+  --rangeslider-thumb-default-bg: #838383;
+  --rangeslider-thumb-capsule-bg: #838383;
+  --rangeslider-thumb-capsule-border: white;
+  --rangeslider-thumb-capline-bg: #838383;
+
+  /* RangeSlider progress colors */
+  --rangeslider-progress-default-bg: #0090ff; /* blue9 - same as button primary */
+  --rangeslider-progress-capsule-bg: #acd8fc; /* light blue background for light mode */
+  --rangeslider-progress-capsule-border-top: white;
+  --rangeslider-progress-capsule-border-bottom: white;
+  --rangeslider-progress-capsule-border-left: white;
+  --rangeslider-progress-capline-bg: #0090ff; /* blue9 - same as button primary */
+
+  /* RangeSlider HUD colors */
+  --rangeslider-hud-default-bg: #8b8d98; /* gray9 - muted background for light mode */
+  --rangeslider-hud-default-text: #ffffff; /* white text for contrast */
+  --rangeslider-hud-capsule-bg: #0090ff; /* blue9 - same as button primary */
+  --rangeslider-hud-capsule-text: #ffffff; /* white text for contrast */
+  --rangeslider-hud-capline-bg: #8b8d98; /* white background for light mode */
+  --rangeslider-hud-capline-text: #ffffff; /* gray12 - dark text for light mode */
+
+  /* RangeSlider tick colors */
+  --rangeslider-tick-color: #bbbbbb; /* gray8 - muted color for light mode */
+
+  /* RangeSlider tick label colors */
+  --rangeslider-tick-label-color: #8b8d98; /* gray9 - muted text for light mode */
+  --rangeslider-tick-label-opacity: 0.8; /* slightly more visible in light mode */
+}
+
+/* Dark theme */
+.dark,
+.dark-theme {
+  /* RangeSlider label colors */
+  --rangeslider-label-color: #eeeeee; /* Original dark mode value */
+
+  /* RangeSlider track colors */
+  --rangeslider-track-default-bg: #484848; /* Original dark mode value */
+  --rangeslider-track-capsule-border: #0090ff; /* blue9 - same as button primary */
+  --rangeslider-track-capline-bg: #484848; /* Original dark mode value */
+
+  /* RangeSlider thumb colors */
+  --rangeslider-thumb-default-bg: #b4b4b4; /* Original dark mode value */
+  --rangeslider-thumb-capsule-bg: #eeeeee; /* Original dark mode value */
+  --rangeslider-thumb-capsule-border: #000000; /* Original dark mode value */
+  --rangeslider-thumb-capline-bg: #b4b4b4; /* Original dark mode value */
+
+  /* RangeSlider progress colors */
+  --rangeslider-progress-default-bg: #0090ff; /* blue9 - same as button primary */
+  --rangeslider-progress-capsule-bg: #0d2847; /* Original dark mode value */
+  --rangeslider-progress-capsule-border-top: #000000; /* Original dark mode value */
+  --rangeslider-progress-capsule-border-bottom: #000000; /* Original dark mode value */
+  --rangeslider-progress-capsule-border-left: #000000;
+  --rangeslider-progress-capline-bg: #0090ff; /* blue9 - same as button primary */
+
+  /* RangeSlider HUD colors */
+  --rangeslider-hud-default-bg: #b4b4b4; /* Original dark mode value */
+  --rangeslider-hud-default-text: #000000; /* Original dark mode value */
+  --rangeslider-hud-capsule-bg: #0090ff; /* blue9 - same as button primary */
+  --rangeslider-hud-capsule-text: #eeeeee; /* Original dark mode value */
+  --rangeslider-hud-capline-bg: #eeeeee; /* Original dark mode value */
+  --rangeslider-hud-capline-text: #000000; /* Original dark mode value */
+
+  /* RangeSlider tick colors */
+  --rangeslider-tick-color: #7b7b7b; /* Original dark mode value */
+
+  /* RangeSlider tick label colors */
+  --rangeslider-tick-label-color: #b4b4b4; /* Original dark mode value */
+  --rangeslider-tick-label-opacity: 0.6; /* Original dark mode value */
+}