@umbra.ui/core 0.1.0

package/src/components/controls/Slider/Slider.vue

@@ -0,0 +1,260 @@
+<script setup lang="ts">
+import { ref, computed, watch } from "vue";
+import "./theme.css";
+
+export interface Props {
+  sliderStyle?: "default" | "capline" | "capsule";
+  min?: number;
+  max?: number;
+  value: number;
+}
+
+const emit = defineEmits(["update:value"]);
+
+const props = withDefaults(defineProps<Props>(), {
+  sliderStyle: "default",
+  min: 0,
+  max: 100,
+  value: 50,
+});
+
+const progress = ref(props.value);
+const isDragging = ref(false);
+const showHud = ref(false);
+const trackRef = ref<HTMLDivElement>();
+let hideTimeout: ReturnType<typeof setTimeout> | undefined;
+
+// Watch for changes to the value prop
+watch(
+  () => props.value,
+  (newValue) => {
+    progress.value = newValue;
+  }
+);
+
+const thumbPosition = computed(() => `${progress.value}%`);
+
+const updateProgress = (event: MouseEvent | TouchEvent) => {
+  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;
+  console.log(x);
+  const percentage = (x / rect.width) * 100;
+
+  progress.value = Math.max(0, Math.min(100, percentage));
+  emit("update:value", progress.value);
+};
+
+const handleMouseDown = (event: MouseEvent | TouchEvent) => {
+  event.preventDefault();
+  isDragging.value = true;
+  showHud.value = true;
+
+  // Clear any existing timeout
+  if (hideTimeout) {
+    clearTimeout(hideTimeout);
+  }
+
+  updateProgress(event);
+
+  const handleMove = (e: MouseEvent | TouchEvent) => {
+    if (isDragging.value) {
+      updateProgress(e);
+    }
+  };
+
+  const handleUp = () => {
+    isDragging.value = false;
+
+    // Hide HUD after 500ms
+    hideTimeout = setTimeout(() => {
+      showHud.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);
+};
+</script>
+
+<template>
+  <div :class="[$style.container, $style[sliderStyle]]">
+    <p :class="[$style.label, 'footnote']">{{ min }}</p>
+    <div
+      ref="trackRef"
+      :class="$style.track"
+      @mousedown="handleMouseDown"
+      @touchstart="handleMouseDown"
+    >
+      <div
+        :class="$style.progress"
+        :style="{
+          width: thumbPosition,
+          '--border-opacity': progress < 5 ? progress / 5 : 1,
+        }"
+      ></div>
+      <div :class="$style.thumb" :style="{ '--progress': progress + '%' }">
+        <div :class="[$style.hud, { [$style.visible]: showHud }]">
+          <p class="footnote">{{ Math.round(progress) }}</p>
+        </div>
+      </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(--slider-label-color);
+  opacity: 1;
+}
+
+.track {
+  position: relative;
+  min-width: 11.76rem;
+  width: 100%;
+  border-radius: 999px;
+  cursor: default;
+  user-select: none;
+}
+.container.default .track {
+  height: 0.24rem;
+  background-color: var(--slider-track-default-bg);
+}
+.container.capsule .track {
+  background-color: transparent;
+  height: 1.18rem;
+  border: 0.12rem solid var(--slider-track-capsule-border);
+  padding: 0 0.5rem; /* Add horizontal padding to create boundaries */
+  box-sizing: border-box;
+}
+.container.capline .track {
+  height: 0.88rem;
+  background-color: var(--slider-track-capline-bg);
+}
+
+.thumb {
+  position: absolute;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+.container.default .thumb {
+  background-color: var(--slider-thumb-default-bg);
+  width: 1rem;
+  height: 1rem;
+  border-radius: 50%;
+  left: var(--progress);
+  border: var(--slider-thumb-default-border);
+}
+.container.capsule .thumb {
+  background-color: var(--slider-thumb-capsule-bg);
+  width: 1rem;
+  height: 1rem;
+  border-radius: 50%;
+  left: var(--progress);
+  border: var(--slider-thumb-capsule-border);
+}
+.container.capline .thumb {
+  background-color: var(--slider-thumb-capline-bg);
+  width: 0.35rem;
+  height: 1.35rem;
+  border-radius: 999px;
+  left: var(--progress);
+  border: var(--slider-thumb-capline-border);
+}
+
+.progress {
+  height: 100%;
+  border-radius: 999px;
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+.container.default .progress {
+  background-color: var(--slider-progress-default-bg);
+}
+.container.capsule .progress {
+  background-color: var(--slider-progress-capsule-bg);
+  position: relative;
+}
+.container.capsule .progress::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: -6.5px;
+  right: 0;
+  bottom: 0;
+  background-color: var(--slider-progress-capsule-bg);
+  border-top: 0.24rem solid var(--slider-progress-capsule-border-top);
+  border-bottom: 0.24rem solid var(--slider-progress-capsule-border-bottom);
+  border-left: 0.24rem solid var(--slider-progress-capsule-border-left);
+  opacity: var(--border-opacity, 1);
+  border-radius: 999px;
+}
+.container.capline .progress {
+  background-color: var(--slider-progress-capline-bg);
+  border-top-right-radius: 0px;
+  border-bottom-right-radius: 0px;
+}
+
+.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;
+}
+
+.container.default .hud {
+  bottom: calc(100% + 0.29rem);
+  background-color: var(--slider-hud-default-bg);
+}
+.container.capsule .hud {
+  bottom: calc(100% + 0.59rem);
+  background-color: var(--slider-hud-capsule-bg);
+  border-radius: 999px;
+  min-width: 2rem;
+}
+.container.capline .hud {
+  bottom: calc(100% + 0.59rem);
+  background-color: var(--slider-hud-capline-bg);
+}
+
+.hud.visible {
+  opacity: 1;
+}
+
+.hud p {
+  margin: 0;
+}
+.container.default .hud p {
+  color: var(--slider-hud-default-text);
+}
+.container.capsule .hud p {
+  color: var(--slider-hud-capsule-text);
+}
+.container.capline .hud p {
+  color: var(--slider-hud-capline-text);
+}
+</style>

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

@@ -0,0 +1,74 @@
+/* Light theme using Colors */
+:root {
+  /* Slider label colors */
+  --slider-label-color: #1a1d23; /* gray12 - dark text for light mode */
+
+  /* Slider track colors */
+  --slider-track-default-bg: #cecece; /* gray5 - light background for light mode */
+  --slider-track-capsule-border: #0090ff; /* blue9 - same as button primary */
+  --slider-track-capline-bg: #e3e5e8; /* gray5 - light background for light mode */
+
+  /* Slider thumb colors */
+  --slider-thumb-default-bg: white;
+  --slider-thumb-capsule-bg: #0090ff;
+  --slider-thumb-capline-bg: white;
+
+  /* Slider thumb border colors */
+  --slider-thumb-default-border: 1px solid #cecece;
+  --slider-thumb-capsule-border: 0.12rem solid white;
+  --slider-thumb-capline-border: 1px solid #cecece;
+
+  /* Slider progress colors */
+  --slider-progress-default-bg: #0090ff; /* blue9 - same as button primary */
+  --slider-progress-capsule-bg: #acd8fc; /* light blue background for light mode */
+  --slider-progress-capsule-border-top: white;
+  --slider-progress-capsule-border-bottom: white;
+  --slider-progress-capsule-border-left: white;
+  --slider-progress-capline-bg: #0090ff; /* blue9 - same as button primary */
+
+  /* Slider HUD colors */
+  --slider-hud-default-bg: #8b8d98; /* gray9 - muted background for light mode */
+  --slider-hud-default-text: #ffffff; /* white text for contrast */
+  --slider-hud-capsule-bg: #0090ff; /* blue9 - same as button primary */
+  --slider-hud-capsule-text: #ffffff; /* white text for contrast */
+  --slider-hud-capline-bg: #8b8d98; /* white background for light mode */
+  --slider-hud-capline-text: #ffffff; /* gray12 - dark text for light mode */
+}
+
+/* Dark theme */
+.dark,
+.dark-theme {
+  /* Slider label colors */
+  --slider-label-color: #eeeeee; /* Original dark mode value */
+
+  /* Slider track colors */
+  --slider-track-default-bg: #484848; /* Original dark mode value */
+  --slider-track-capsule-border: #0090ff; /* blue9 - same as button primary */
+  --slider-track-capline-bg: #484848; /* Original dark mode value */
+
+  /* Slider thumb colors */
+  --slider-thumb-default-bg: #b4b4b4; /* Original dark mode value */
+  --slider-thumb-capsule-bg: #eeeeee; /* Original dark mode value */
+  --slider-thumb-capline-bg: #b4b4b4; /* Original dark mode value */
+
+  /* Slider thumb border colors */
+  --slider-thumb-default-border: 1px solid #d9d9d9;
+  --slider-thumb-capsule-border: 1px solid #000000;
+  --slider-thumb-capline-border: 1px solid #d9d9d9;
+
+  /* Slider progress colors */
+  --slider-progress-default-bg: #0090ff; /* blue9 - same as button primary */
+  --slider-progress-capsule-bg: #0d2847; /* Original dark mode value */
+  --slider-progress-capsule-border-top: #000000; /* Original dark mode value */
+  --slider-progress-capsule-border-bottom: #000000; /* Original dark mode value */
+  --slider-progress-capsule-border-left: #000000; /* Original dark mode value */
+  --slider-progress-capline-bg: #0090ff; /* blue9 - same as button primary */
+
+  /* Slider HUD colors */
+  --slider-hud-default-bg: #b4b4b4; /* Original dark mode value */
+  --slider-hud-default-text: #000000; /* Original dark mode value */
+  --slider-hud-capsule-bg: #0090ff; /* blue9 - same as button primary */
+  --slider-hud-capsule-text: #eeeeee; /* Original dark mode value */
+  --slider-hud-capline-bg: #eeeeee; /* Original dark mode value */
+  --slider-hud-capline-text: #000000; /* Original dark mode value */
+}