@umbra.ui/core 0.1.0

package/src/components/pickers/CollectionPicker/CollectionPicker.vue

@@ -0,0 +1,398 @@
+<script setup lang="ts">
+import { ref, onMounted, nextTick, onUnmounted } from "vue";
+import { icons } from "@umbra-ui/icons";
+import { IconButton } from "@umbra-ui/core";
+import {
+  offset,
+  flip,
+  shift,
+  size,
+  computePosition,
+  autoUpdate,
+} from "@floating-ui/vue";
+import "./theme.css";
+
+// Generic item interface
+export interface CollectionItem {
+  id: string;
+  title: string;
+  [key: string]: any; // Allow additional properties
+}
+
+// - Props (Pure Data)
+export interface Props {
+  items: CollectionItem[];
+  selectedItem: CollectionItem | null;
+  loading?: boolean;
+  // Customizable labels
+  buttonLabel?: string;
+  headerLabel?: string;
+  newItemLabel?: string;
+  // Customizable icons
+  itemIcon?: string;
+  newItemIcon?: string;
+  // Behavior options
+  allowCreate?: boolean;
+  placeholder?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  items: () => [],
+  selectedItem: null,
+  loading: false,
+  buttonLabel: "Select Item",
+  headerLabel: "Choose an Item",
+  newItemLabel: "New Item",
+  itemIcon: "note",
+  newItemIcon: "circle-plus",
+  allowCreate: true,
+  placeholder: "Enter name...",
+});
+
+// - Emits (Pure Actions)
+const emits = defineEmits<{
+  "item-selected": [item: CollectionItem];
+  "item-create": [title: string];
+  "update:selectedItem": [item: CollectionItem | null];
+}>();
+
+// - State Management
+const isEditing = ref<boolean>(false);
+const showPopover = ref<boolean>(false);
+const newItemTitle = ref<string>("");
+
+// - Element References
+const button = ref<HTMLElement | null>(null);
+const picker = ref<HTMLElement | null>(null);
+const container = ref<HTMLElement | null>(null);
+const overlay = ref<HTMLElement | null>(null);
+const newItemInput = ref<HTMLInputElement | null>(null);
+
+// - Position tracking
+let cleanupAutoUpdate: (() => void) | null = null;
+
+// - Lifecycle
+onUnmounted(() => {
+  if (cleanupAutoUpdate) {
+    cleanupAutoUpdate();
+  }
+});
+
+// - Event Handlers
+const onSubmit = async (title: string) => {
+  if (!title.trim()) return;
+
+  isEditing.value = false;
+  emits("item-create", title);
+  newItemTitle.value = "";
+  togglePopover();
+};
+
+const onCancel = () => {
+  isEditing.value = false;
+  newItemTitle.value = "";
+};
+
+const onNewItemClick = () => {
+  isEditing.value = true;
+  nextTick(() => {
+    newItemInput.value?.focus();
+  });
+};
+
+const onItemSelection = (item: CollectionItem) => {
+  emits("update:selectedItem", item);
+  emits("item-selected", item);
+  togglePopover();
+};
+
+// - Popover Management
+const togglePopover = () => {
+  showPopover.value = !showPopover.value;
+  if (showPopover.value) {
+    nextTick(() => {
+      updatePopoverPosition();
+    });
+  } else {
+    if (cleanupAutoUpdate) {
+      cleanupAutoUpdate();
+      cleanupAutoUpdate = null;
+    }
+  }
+};
+
+const updatePopoverPosition = async () => {
+  if (!button.value || !picker.value) return;
+
+  await nextTick();
+
+  if (cleanupAutoUpdate) {
+    cleanupAutoUpdate();
+  }
+
+  cleanupAutoUpdate = autoUpdate(button.value, picker.value, () => {
+    computePosition(button.value!, picker.value!, {
+      placement: "bottom-start",
+      middleware: [
+        offset(4),
+        flip(),
+        shift(),
+        size({
+          padding: 20,
+          apply({
+            availableWidth,
+            availableHeight,
+            elements,
+          }: {
+            availableWidth: number;
+            availableHeight: number;
+            elements: {
+              floating: {
+                style: {
+                  maxWidth: string;
+                  maxHeight: string;
+                };
+              };
+            };
+          }) {
+            Object.assign(elements.floating.style, {
+              maxWidth: `${availableWidth}px`,
+              maxHeight: `${availableHeight}px`,
+            });
+          },
+        }),
+      ],
+    }).then(({ x, y }) => {
+      if (picker.value) {
+        Object.assign(picker.value.style, {
+          left: `${x}px`,
+          top: `${y}px`,
+        });
+      }
+    });
+  });
+};
+
+const handleOverlayClick = () => {
+  togglePopover();
+};
+
+// Helper to get the correct icon component
+const getIconComponent = (iconName: string) => {
+  return (
+    icons[iconName as keyof typeof icons] || icons.note || icons["circle-plus"]
+  );
+};
+</script>
+
+<template>
+  <div :class="$style.container" ref="container">
+    <div
+      :class="[
+        $style.button,
+        showPopover ? $style.button_selected : $style.button_normal,
+      ]"
+      @click="togglePopover"
+      ref="button"
+    >
+      <p v-if="selectedItem" class="callout" :class="$style.button_label">
+        {{ selectedItem.title }}
+      </p>
+      <p v-else class="callout" :class="$style.button_label">
+        {{ buttonLabel }}
+      </p>
+    </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.header">
+          <p class="callout">{{ headerLabel }}</p>
+        </div>
+        <div :class="$style.collection_list">
+          <div
+            v-for="item in items"
+            :key="item.id"
+            :class="$style.cell"
+            @click="onItemSelection(item)"
+          >
+            <component :is="getIconComponent(itemIcon)" :size="16" />
+            <p class="body">{{ item.title }}</p>
+          </div>
+        </div>
+        <div v-if="allowCreate" :class="$style.new_collection">
+          <div :class="$style.new_collection_unedited" @click="onNewItemClick">
+            <component :is="getIconComponent(newItemIcon)" :size="16" />
+            <p class="callout">{{ newItemLabel }}</p>
+          </div>
+          <div v-if="isEditing" :class="$style.new_collection_edited">
+            <input
+              class="callout"
+              type="text"
+              v-model="newItemTitle"
+              :placeholder="placeholder"
+              @keyup.enter="onSubmit(newItemTitle)"
+              @keyup.esc="onCancel"
+              ref="newItemInput"
+            />
+            <IconButton
+              iconName="circle-check"
+              :buttonSize="18"
+              buttonType="plain"
+              buttonStyle="#eeeeee"
+              @click="onSubmit(newItemTitle)"
+              :style="{
+                opacity: newItemTitle.length > 0 ? 1 : 0.33,
+                pointerEvents: newItemTitle.length > 0 ? 'auto' : 'none',
+              }"
+            />
+          </div>
+        </div>
+      </div>
+    </Teleport>
+  </div>
+</template>
+
+<style module>
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+  gap: 0.235rem;
+}
+.button {
+  border-radius: 0.353rem;
+  padding-top: 0.588rem;
+  padding-bottom: 0.588rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.235rem;
+  user-select: none;
+  transition: padding-left 0.3s, padding-right 0.3s, background-color 0.3s,
+    box-shadow 0.3s;
+  cursor: default;
+  background-color: var(--picker-button-bg);
+  border: var(--picker-button-border);
+}
+.button:hover {
+  background-color: var(--picker-button-hover-bg);
+  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);
+  border: var(--picker-button-hover-border);
+}
+.button_selected {
+  background-color: var(--picker-button-selected-bg);
+  border: var(--picker-button-hover-border);
+  padding-left: 0.588rem;
+  padding-right: 0.588rem;
+}
+.button_label {
+  font-weight: 700 !important;
+  font-variation-settings: "wght" 700 !important;
+}
+.picker {
+  position: absolute;
+  top: 0;
+  left: 0;
+  background-color: var(--picker-picker-bg);
+  border-radius: 0.353rem;
+  min-width: 18.824rem;
+  overflow: hidden;
+  z-index: 1000;
+  box-shadow: 0px 1px 0px 0px var(--collectionpicker-picker-shadow),
+    inset 0px 1px 0px 0px var(--picker-picker-inset-shadow);
+  border: var(--picker-picker-border);
+}
+.header {
+  background-color: var(--picker-selection-bar-bg);
+  border-bottom: 1px solid var(--picker-border-light);
+  padding-left: 0.706rem;
+  padding-right: 0.706rem;
+  min-height: 2rem;
+  display: flex;
+  align-items: center;
+  justify-content: start;
+}
+.header p {
+  opacity: 1;
+  color: var(--picker-text-secondary);
+}
+.collection_list {
+  display: flex;
+  flex-direction: column;
+}
+.collection_list > :last-child {
+  border-bottom: none;
+}
+.cell {
+  border-bottom: 1px solid var(--picker-border-light);
+}
+.cell,
+.new_collection_unedited {
+  display: flex;
+  align-items: center;
+  justify-content: start;
+  gap: 0.706rem;
+  cursor: default;
+  padding-left: 0.706rem;
+  padding-right: 0.706rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  color: var(--picker-text-primary);
+}
+.cell:hover,
+.new_collection_unedited:hover {
+  background-color: var(--picker-bg-hover);
+}
+
+.new_collection {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: 1fr;
+  grid-template-areas: "content";
+  background-color: var(--picker-selection-bar-bg);
+  border-top: 1px solid var(--picker-border-light);
+  color: var(--picker-text-primary);
+}
+.new_collection_unedited {
+  grid-area: content;
+}
+.new_collection_edited {
+  grid-area: content;
+  background-color: var(--picker-selection-bar-bg);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.706rem;
+  padding-left: 0.706rem;
+  padding-right: 0.706rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+.new_collection_edited input {
+  background-color: transparent;
+  border: none;
+  outline: none;
+  color: var(--picker-text-primary);
+  width: 100%;
+}
+.overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: var(--picker-overlay-bg);
+  opacity: 0;
+  z-index: 999;
+}
+</style>