@umbra.ui/core 0.1.0

package/src/components/pickers/CollectionPicker/theme.css

@@ -0,0 +1,14 @@
+@import "../theme.css";
+
+/* Light theme */
+:root {
+  /* Picker Shadow */
+  --collectionpicker-picker-shadow: none;
+}
+
+/* Dark theme */
+.dark,
+.dark-theme {
+  /* Picker Shadow */
+  --collectionpicker-picker-shadow: var(--picker-picker-shadow);
+}

package/src/components/pickers/CollectionPicker/types.ts

@@ -0,0 +1,11 @@
+export interface CollectionItem {
+  id: string;
+  title: string;
+}
+
+export interface CollectionData {
+  items: CollectionItem[];
+  selected: CollectionItem | null;
+  onItemCreation: (title: string) => Promise<CollectionItem>;
+  onItemSelection: (item: CollectionItem) => void;
+}

package/src/components/pickers/ColorPicker/ColorPicker.vue

@@ -0,0 +1,376 @@
+<script setup lang="ts">
+import { ref, watch, onBeforeUnmount, nextTick, computed } from "vue";
+import { Color, colors, colorPickerColors } from "./colors";
+import {
+  offset,
+  flip,
+  shift,
+  size,
+  computePosition,
+  autoUpdate,
+} from "@floating-ui/vue";
+import "./theme.css";
+
+// - Props
+export interface Props {
+  color: Color;
+  pickerOffsetX: number;
+  preventPopup: boolean;
+  // Dot styling props
+  dotSize?: number | string;
+  dotRadius?: number | string;
+  dotBorderWidth?: number;
+  dotBorderColor?: string;
+  dotBorderColorActive?: string;
+  // Additional options
+  showColorInfo?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  color: () => colorPickerColors.gray700,
+  pickerOffsetX: 0,
+  preventPopup: false,
+  dotSize: "1.25rem",
+  dotRadius: "999px",
+  dotBorderWidth: 1,
+  dotBorderColor: "var(--colorpicker-dot-border-color)",
+  dotBorderColorActive: "var(--colorpicker-dot-border-color-active)",
+  showColorInfo: true,
+});
+
+const emits = defineEmits(["update:color"]);
+
+watch(
+  () => props.color,
+  (newValue) => {
+    selectedColor.value = newValue;
+  }
+);
+
+const showPopover = ref<boolean>(false);
+const selectedColor = ref<Color>(props.color);
+const button = ref<HTMLElement | null>(null);
+const overlay = ref<HTMLElement | null>(null);
+const picker = ref<HTMLElement | null>(null);
+const container = ref<HTMLElement | null>(null);
+
+// Position tracking
+let cleanupAutoUpdate: (() => void) | null = null;
+
+// Computed styles for the dot
+const dotStyles = computed(() => {
+  const size =
+    typeof props.dotSize === "number" ? `${props.dotSize}px` : props.dotSize;
+
+  const borderRadius =
+    typeof props.dotRadius === "number"
+      ? `${props.dotRadius}px`
+      : props.dotRadius;
+
+  const borderColor = showPopover.value
+    ? props.dotBorderColorActive
+    : props.dotBorderColor;
+  const borderWidth = showPopover.value
+    ? Math.max(props.dotBorderWidth, 2)
+    : props.dotBorderWidth;
+
+  return {
+    width: size,
+    height: size,
+    borderRadius,
+    backgroundColor: selectedColor.value.hex,
+    border: `${borderWidth}px solid ${borderColor}`,
+    transition: "border 0.3s ease, box-shadow 0.3s ease",
+  };
+});
+
+const togglePopover = () => {
+  if (props.preventPopup) {
+    return;
+  }
+  showPopover.value = !showPopover.value;
+
+  if (showPopover.value) {
+    nextTick(() => {
+      updatePopoverPosition();
+    });
+  } else {
+    // Clean up auto-update
+    if (cleanupAutoUpdate) {
+      cleanupAutoUpdate();
+      cleanupAutoUpdate = null;
+    }
+  }
+};
+
+const updatePopoverPosition = async () => {
+  if (!button.value || !picker.value) return;
+
+  // Wait for the DOM to be updated
+  await nextTick();
+
+  // Clean up any existing auto-update
+  if (cleanupAutoUpdate) {
+    cleanupAutoUpdate();
+  }
+
+  // Set up auto-update to track position changes
+  cleanupAutoUpdate = autoUpdate(button.value, picker.value, () => {
+    if (!button.value || !picker.value) return;
+
+    computePosition(button.value, picker.value, {
+      placement: "bottom-start",
+      middleware: [
+        offset(4),
+        flip(),
+        shift(),
+        size({
+          padding: 20,
+          apply({ availableWidth, availableHeight, elements }) {
+            Object.assign(elements.floating.style, {
+              maxWidth: `${availableWidth}px`,
+              maxHeight: `${availableHeight}px`,
+            });
+          },
+        }),
+      ],
+    }).then(({ x, y }) => {
+      if (picker.value) {
+        Object.assign(picker.value.style, {
+          left: `${x + props.pickerOffsetX}px`,
+          top: `${y}px`,
+        });
+      }
+    });
+  });
+};
+
+const selectColor = (newValue: Color, event: MouseEvent) => {
+  selectedColor.value = newValue;
+  const circle = event.target as HTMLElement;
+  const dot = circle.firstChild as HTMLElement;
+  dot.style.opacity = "1";
+  dot.style.scale = "1";
+  circle.style.border =
+    "1.5px solid var(--colorpicker-color-cell-selected-border)";
+  emits("update:color", selectedColor.value);
+};
+
+const handleOverlayClick = () => {
+  togglePopover();
+};
+
+onBeforeUnmount(() => {
+  if (cleanupAutoUpdate) {
+    cleanupAutoUpdate();
+  }
+});
+</script>
+
+<template>
+  <div :class="$style.container" ref="container">
+    <div
+      :class="[
+        $style.button,
+        showPopover ? $style.button_selected : $style.button_normal,
+      ]"
+      ref="button"
+      @click="togglePopover"
+    >
+      <div :style="dotStyles" :class="$style.dot"></div>
+    </div>
+
+    <!-- Teleport the overlay and picker to body -->
+    <Teleport to="body">
+      <div
+        v-if="showPopover"
+        :class="$style.overlay"
+        ref="overlay"
+        @click="handleOverlayClick"
+      ></div>
+      <div v-if="showPopover" :class="$style.picker" ref="picker">
+        <div v-if="showColorInfo" :class="$style.selection_bar">
+          <p
+            class="subheadline"
+            v-if="selectedColor.name && selectedColor.weight"
+          >
+            {{ selectedColor.name }}({{ selectedColor.weight }})
+          </p>
+          <div :class="$style.selection_bar_right">
+            <p class="subheadline">{{ selectedColor.hex }}</p>
+            <div
+              :class="$style.selection_bar_circle"
+              :style="{ backgroundColor: selectedColor.hex }"
+            ></div>
+          </div>
+        </div>
+        <div :class="$style.color_list">
+          <div
+            v-for="color in colors"
+            :id="color.hex"
+            :key="color.hex"
+            :class="$style.color_cell"
+            :style="{
+              backgroundColor: color.hex,
+              border:
+                selectedColor.hex === color.hex
+                  ? '1.5px solid var(--colorpicker-color-cell-selected-border)'
+                  : '1px solid var(--colorpicker-color-cell-border)',
+            }"
+            @click="selectColor(color, $event)"
+          >
+            <div
+              :id="`dot-${color.hex}`"
+              :class="$style.color_dot"
+              :style="{
+                opacity: selectedColor.hex === color.hex ? 1 : 0,
+                scale: selectedColor.hex === color.hex ? 1 : 0.25,
+              }"
+            ></div>
+          </div>
+        </div>
+      </div>
+    </Teleport>
+  </div>
+</template>
+
+<style module>
+.container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  max-width: fit-content;
+}
+
+.button {
+  border-radius: 0.353rem;
+  padding-top: 0.588rem;
+  padding-bottom: 0.588rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: padding-left 0.3s, padding-right 0.3s, background-color 0.3s,
+    box-shadow 0.3s;
+  cursor: pointer;
+  background-color: var(--picker-button-bg);
+  border: var(--picker-button-border);
+}
+
+.button:hover {
+  padding-left: 0.588rem;
+  padding-right: 0.588rem;
+  box-shadow: 0px 1px 0px 0px var(--picker-button-hover-shadow),
+    inset 0px 1px 0px 0px var(--picker-button-hover-inset-shadow);
+  background-color: var(--picker-button-hover-bg);
+  border: var(--picker-button-hover-border);
+}
+
+.button_selected {
+  background-color: var(--picker-button-selected-bg);
+  padding-left: 0.588rem;
+  padding-right: 0.588rem;
+  box-shadow: 0px 1px 0px 0px var(--picker-button-selected-shadow),
+    inset 0px 1px 0px 0px var(--picker-button-selected-inset-shadow);
+  border: var(--picker-button-hover-border);
+}
+
+.dot {
+  transition: border 0.3s ease, box-shadow 0.3s ease;
+}
+
+.picker {
+  position: absolute;
+  top: 0;
+  left: 0;
+  background-color: var(--picker-picker-bg);
+  border-radius: 0.353rem;
+  z-index: 1000;
+  overflow: auto;
+  scroll-padding-top: 20px;
+  box-shadow: 0px 1px 0px 0px var(--colorpicker-picker-shadow),
+    inset 0px 1px 0px 0px var(--picker-picker-inset-shadow);
+  border: var(--picker-picker-border);
+}
+
+.selection_bar {
+  background-color: var(--picker-selection-bar-bg);
+  color: var(--picker-selection-bar-text);
+  border-bottom: 1px solid var(--picker-selection-bar-border);
+  padding-top: 0.471rem;
+  padding-bottom: 0.471rem;
+  padding-left: 0.706rem;
+  padding-right: 0.706rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  position: sticky;
+  top: 0;
+  z-index: 3;
+}
+
+.selection_bar p {
+  opacity: 1;
+}
+
+.selection_bar_right {
+  display: flex;
+  align-items: center;
+  gap: 0.529rem;
+}
+
+.selection_bar_circle {
+  width: 1.059rem;
+  height: 1.059rem;
+  border-radius: 999px;
+  border: 1px solid var(--picker-border-light);
+}
+
+.color_list {
+  display: grid;
+  grid-template-columns: repeat(8, 1fr);
+  gap: 0.706rem;
+  padding: 0.706rem;
+}
+
+.color_row {
+  display: flex;
+  gap: 0.882rem;
+}
+
+.color_cell {
+  width: 1.412rem;
+  height: 1.412rem;
+  border: 1px solid var(--colorpicker-color-cell-border);
+  border-radius: 999px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform 0.3s ease, scale 0.3s ease;
+}
+
+.color_cell:hover {
+  transform: translateY(-1px);
+  scale: 1.1;
+}
+
+.color_dot {
+  width: 70%;
+  height: 70%;
+  background-color: var(--colorpicker-color-dot-bg);
+  border-radius: 999px;
+  transform: scale(1);
+  opacity: 1;
+  pointer-events: none;
+}
+
+.overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: var(--picker-overlay-bg);
+  opacity: 0;
+  z-index: 999;
+}
+</style>