@umbra.ui/core 0.1.0

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

@@ -0,0 +1,48 @@
+@import "../theme.css";
+
+/* Light theme */
+:root {
+  /* Container */
+  --filepicker-container-bg: #ffffff;
+  --filepicker-container-border: #d1d5db;
+  --filepicker-container-hover-bg: #f9fafb;
+  --filepicker-container-hover-border: #9ca3af;
+  --filepicker-container-active-bg: #e5e7eb;
+  --filepicker-container-active-border: #0090ff;
+  --filepicker-container-active-text: #000000;
+
+  /* Overlay */
+  --filepicker-overlay-bg: rgba(255, 255, 255, 0.9);
+  --filepicker-overlay-text: #000000;
+
+  /* Spinner */
+  --filepicker-spinner-border: #d1d5db;
+  --filepicker-spinner-border-top: #6366f1;
+
+  /* Disabled */
+  --filepicker-disabled-opacity: 0.5;
+}
+
+/* Dark theme */
+.dark,
+.dark-theme {
+  /* Container */
+  --filepicker-container-bg: #111111;
+  --filepicker-container-border: #2a2a2a;
+  --filepicker-container-hover-bg: #191919;
+  --filepicker-container-hover-border: #3a3a3a;
+  --filepicker-container-active-bg: #7b7b7b;
+  --filepicker-container-active-border: rgba(5, 255, 255, 0.1);
+  --filepicker-container-active-text: #000000;
+
+  /* Overlay */
+  --filepicker-overlay-bg: rgba(255, 255, 255, 0.1);
+  --filepicker-overlay-text: #000000;
+
+  /* Spinner */
+  --filepicker-spinner-border: #374151;
+  --filepicker-spinner-border-top: #6366f1;
+
+  /* Disabled */
+  --filepicker-disabled-opacity: 0.5;
+}

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

@@ -0,0 +1,10 @@
+export interface FileError {
+  file: string;
+  error: string;
+}
+
+export interface DropState {
+  isDragging: boolean;
+  isProcessing: boolean;
+  dragCount: number;
+}

package/src/components/pickers/IconPicker/IconPicker.vue

@@ -0,0 +1,327 @@
+<script setup lang="ts">
+import { ref, watch, onBeforeUnmount, nextTick, computed } from "vue";
+import {
+  offset,
+  flip,
+  shift,
+  size,
+  computePosition,
+  autoUpdate,
+} from "@floating-ui/vue";
+import { icons, type IconKey, ChevronDownIcon } from "@umbra-ui/icons";
+import "./theme.css";
+
+// - Props
+export interface Props {
+  icon: string;
+  pickerOffsetX: number;
+  preventPopup: boolean;
+  iconList?: IconKey[];
+  iconSize?: number;
+}
+const props = withDefaults(defineProps<Props>(), {
+  icon: "",
+  pickerOffsetX: 0,
+  preventPopup: false,
+  iconList: undefined,
+  iconSize: 18,
+});
+
+const emits = defineEmits(["update:icon"]);
+
+// Filter out animated icons and create the default icon list
+const defaultIconList = computed(() => {
+  return Object.keys(icons).filter((key) => !key.includes("anim")) as IconKey[];
+});
+
+// Use provided iconList or default to all non-animated icons
+const availableIcons = computed(() => {
+  return props.iconList || defaultIconList.value;
+});
+
+watch(
+  () => props.icon,
+  (newValue) => {
+    selectedIcon.value = newValue;
+  }
+);
+
+const selectedSize = ref(14);
+const selectedColor = ref("var(--iconpicker-icon-color)");
+
+const showPopover = ref<boolean>(false);
+const selectedIcon = ref<string>(props.icon);
+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;
+
+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 selectIcon = (iconKey: IconKey) => {
+  selectedIcon.value = iconKey;
+  emits("update:icon", selectedIcon.value);
+};
+
+const handleOverlayClick = () => {
+  togglePopover();
+};
+
+onBeforeUnmount(() => {
+  if (cleanupAutoUpdate) {
+    cleanupAutoUpdate();
+  }
+});
+</script>
+
+<template>
+  <div :class="$style.container" ref="container">
+    <div
+      :class="[$style.button, { [$style.active]: showPopover }]"
+      @click="togglePopover"
+      ref="button"
+    >
+      <component
+        v-if="selectedIcon && icons[selectedIcon as IconKey]"
+        :is="icons[selectedIcon as IconKey]"
+        :size="iconSize"
+        :color="selectedColor"
+      />
+      <component
+        v-else
+        :is="icons.folder"
+        :size="iconSize"
+        :color="selectedColor"
+      />
+      <ChevronDownIcon
+        :size="selectedSize - 4"
+        :class="$style.chevron"
+        :color="selectedColor"
+        :style="{
+          transform: `rotate(${showPopover ? 0 : -90}deg)`,
+        }"
+      />
+    </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 :class="$style.selection_bar">
+          <p class="subheadline">
+            {{ selectedIcon || "Select Icon" }}
+          </p>
+        </div>
+        <div :class="$style.icon_list">
+          <div
+            v-for="iconKey in availableIcons"
+            :key="iconKey"
+            :class="$style.icon_cell"
+            :style="{
+              border:
+                selectedIcon === iconKey
+                  ? '1.5px solid var(--iconpicker-icon-cell-selected-border)'
+                  : '1px solid var(--iconpicker-icon-cell-border)',
+              backgroundColor:
+                selectedIcon === iconKey
+                  ? 'var(--iconpicker-icon-cell-selected-bg)'
+                  : 'var(--iconpicker-icon-cell-bg)',
+            }"
+            @click="selectIcon(iconKey)"
+          >
+            <component
+              :is="icons[iconKey]"
+              :class="$style.icon"
+              :size="selectedSize"
+              :color="selectedColor"
+            />
+          </div>
+        </div>
+      </div>
+    </Teleport>
+  </div>
+</template>
+
+<style module>
+.container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  max-width: fit-content;
+}
+
+.button {
+  padding-top: 0.588rem;
+  padding-bottom: 0.588rem;
+  border-radius: 0.353rem;
+  transition: border 0.3s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0;
+  cursor: pointer;
+  transition: background-color 0.3s ease, box-shadow 0.3s ease,
+    padding 0.3s ease, gap 0.3s ease;
+  background-color: var(--picker-button-bg);
+  border: var(--picker-button-border);
+}
+
+.button:hover,
+.button.active {
+  background-color: var(--picker-button-hover-bg);
+  box-shadow: 0px 1px 0px 0px var(--picker-button-hover-shadow),
+    inset 0px 1px 0px 0px var(--picker-button-hover-inset-shadow);
+  padding: 0.588rem;
+  gap: 0.588rem;
+  border: var(--picker-button-hover-border);
+}
+
+.chevron {
+  transition: transform 0.3s ease, opacity 0.3s ease;
+  opacity: 0;
+}
+
+.button:hover .chevron,
+.button.active .chevron {
+  opacity: 1;
+}
+
+.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(--picker-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);
+  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;
+  color: var(--picker-selection-bar-text);
+}
+
+.selection_bar p {
+  opacity: 1;
+}
+
+.icon_list {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 0.588rem;
+  padding: 0.588rem;
+}
+
+.icon_cell {
+  width: 2rem;
+  height: 2rem;
+  border-radius: 0.353rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--iconpicker-icon-cell-bg);
+  cursor: pointer;
+  transition: border 0.3s ease;
+}
+
+.icon_cell:hover {
+  background-color: var(--iconpicker-icon-cell-hover-bg);
+}
+
+.icon {
+  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>