@umbra.ui/core 0.1.0

package/src/components/inputs/Tags/TagBar.vue

@@ -0,0 +1,793 @@
+<script setup lang="ts">
+import {
+  computed,
+  ref,
+  onMounted,
+  nextTick,
+  onUnmounted,
+  Teleport,
+  watch,
+} from "vue";
+import { useTheme } from "../../../theme";
+import { TagItem, generateTagStyle } from "./types";
+import { IconButton } from "@umbra-ui/core";
+import { gsap } from "gsap";
+import TagPicker from "./TagPicker.vue";
+import {
+  offset,
+  flip,
+  shift,
+  size,
+  computePosition,
+  autoUpdate,
+} from "@floating-ui/vue";
+import "./theme.css";
+
+// - Props (Pure Data)
+export interface Props {
+  allTags: TagItem[];
+  selectedTags: TagItem[];
+  query: string;
+  matchIndex: number;
+  placeholder?: string;
+  overflow?: "full" | "fixed" | "list";
+  allowEditing?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  allTags: () => [],
+  selectedTags: () => [],
+  query: "",
+  matchIndex: -1,
+  placeholder: "ADD TAGS",
+  overflow: "fixed",
+  allowEditing: true,
+});
+
+// - Emits (Pure Actions)
+const emits = defineEmits<{
+  "update:query": [query: string];
+  "update:matchIndex": [index: number];
+  "tag-create": [title: string];
+  "tag-select": [tag: TagItem];
+  "tag-remove": [tag: TagItem];
+  "tag-reorder": [tags: TagItem[]];
+}>();
+
+const availableTags = computed(() => {
+  return props.allTags.filter(
+    (tag) =>
+      !props.selectedTags.some(
+        (selectedTag) =>
+          selectedTag.title.toLowerCase() === tag.title.toLowerCase()
+      )
+  );
+});
+
+const matches = computed(() => {
+  const lowercaseQuery = props.query.toLowerCase().trim();
+  return availableTags.value
+    .filter((tag) => tag.title.toLowerCase().includes(lowercaseQuery))
+    .sort((a, b) =>
+      a.title.localeCompare(b.title, "en", { sensitivity: "base" })
+    );
+});
+
+const queryAlreadyAdded = computed(() => {
+  return props.selectedTags.some(
+    (tag) => tag.title.toLowerCase().trim() === props.query.toLowerCase().trim()
+  );
+});
+
+const canCreateTag = computed(() => {
+  return (
+    props.query.trim() !== "" &&
+    !queryAlreadyAdded.value &&
+    !matches.value.some(
+      (tag) => tag.title.toLowerCase() === props.query.toLowerCase().trim()
+    )
+  );
+});
+
+// Calculate total navigable items (matches + create option if applicable)
+const totalNavigableItems = computed(() => {
+  return matches.value.length + (canCreateTag.value ? 1 : 0);
+});
+
+// Check if we should show the picker (when query is empty, show all available tags)
+const shouldShowPicker = computed(() => {
+  return (
+    showPopover.value &&
+    (props.query.trim() !== "" || availableTags.value.length > 0)
+  );
+});
+
+// Helper function to get tag style
+const getTagStyle = (tag: TagItem) => {
+  if (tag.style) {
+    return generateTagStyle(tag.style);
+  }
+  // Default style if none provided
+  return generateTagStyle();
+};
+
+const addTag = async (title: string) => {
+  if (queryAlreadyAdded.value) {
+    console.log("already added tag");
+    return;
+  }
+
+  // Try to find existing tag first
+  const existingTag = matches.value.find(
+    (tag) => tag.title.toLowerCase() === props.query.toLowerCase().trim()
+  );
+
+  if (existingTag) {
+    emits("tag-select", existingTag);
+  } else {
+    // Request creation of new tag
+    emits("tag-create", title);
+  }
+};
+
+const removeTag = (tag: TagItem) => {
+  emits("tag-remove", tag);
+  emits("update:query", "");
+  emits("update:matchIndex", -1);
+};
+
+const onTagClick = (tag: TagItem) => {
+  removeTag(tag);
+};
+
+// - Element References
+const field = ref<HTMLInputElement | null>(null);
+const button = ref<HTMLElement | null>(null);
+const label = ref<HTMLElement | null>(null);
+const overlay = ref<HTMLElement | null>(null);
+const container = ref<HTMLElement | null>(null);
+const picker = ref<HTMLElement | null>(null);
+const controlContainer = ref<HTMLElement | null>(null);
+
+// - State Management
+const showPopover = ref<boolean>(false);
+const fieldWidth = ref<number>(20);
+const componentWidth = ref<number>(0);
+const componentHeight = ref<number>(0);
+const controlWidth = ref<number>(0);
+
+// - Position tracking
+let cleanupAutoUpdate: (() => void) | null = null;
+
+// - ResizeObserver for tracking control width
+const resizeObserverControl = ref<ResizeObserver | null>(null);
+const resizeObserverContainer = ref<ResizeObserver | null>(null);
+
+// - Debounce timer for ResizeObserver
+let resizeDebounceTimer: number | null = null;
+let resizeContainerDebounceTimer: number | null = null;
+
+// - Lifecycle
+onMounted(() => {
+  windowResize();
+  controlContainerResize(); // Initial measurement before ResizeObserver kicks in
+
+  // Set up ResizeObserver for the controls container
+  if (controlContainer.value) {
+    resizeObserverControl.value = new ResizeObserver((entries) => {
+      // Clear any existing timer
+      if (resizeDebounceTimer) {
+        clearTimeout(resizeDebounceTimer);
+      }
+
+      // Debounce the resize callback
+      resizeDebounceTimer = window.setTimeout(() => {
+        for (const entry of entries) {
+          controlWidth.value = entry.contentRect.width;
+        }
+      }, 50); // 50ms debounce - adjust as needed
+    });
+
+    resizeObserverControl.value.observe(controlContainer.value);
+  }
+
+  // Set up resizeObserver for the container
+  if (container.value) {
+    resizeObserverContainer.value = new ResizeObserver((entries) => {
+      // Clear any existing timer
+      if (resizeContainerDebounceTimer) {
+        clearTimeout(resizeContainerDebounceTimer);
+      }
+
+      // Debounce the resize callback
+      resizeContainerDebounceTimer = window.setTimeout(() => {
+        for (const entry of entries) {
+          componentHeight.value = entry.contentRect.height;
+        }
+      }, 50); // 50ms debounce - adjust as needed
+    });
+
+    resizeObserverContainer.value.observe(container.value);
+  }
+});
+
+onUnmounted(() => {
+  if (cleanupAutoUpdate) {
+    cleanupAutoUpdate();
+  }
+
+  // Clean up ResizeObserver
+  if (resizeObserverControl.value) {
+    resizeObserverControl.value.disconnect();
+  }
+
+  if (resizeObserverContainer.value) {
+    resizeObserverContainer.value.disconnect();
+  }
+
+  // Clear debounce timer
+  if (resizeDebounceTimer) {
+    clearTimeout(resizeDebounceTimer);
+  }
+});
+
+const onInput = (e: Event) => {
+  const target = e.target as HTMLInputElement;
+  emits("update:query", target.value);
+
+  if (!field.value) return;
+
+  fieldWidth.value = field.value.scrollWidth;
+  emits("update:matchIndex", -1);
+
+  // Show popover if not already visible and there are tags to show
+  if (!showPopover.value && availableTags.value.length > 0) {
+    togglePopover();
+  }
+};
+
+const onKeydown = (e: KeyboardEvent) => {
+  if (e.key === "Backspace" || e.key === "Delete") {
+    fieldWidth.value -= 5.5;
+    if (fieldWidth.value <= 35) {
+      fieldWidth.value = 35;
+    }
+  }
+
+  // Only handle navigation keys if the popover is showing
+  if (!showPopover.value) return;
+
+  if (e.key === "ArrowUp") {
+    e.preventDefault();
+    navigateUp();
+  } else if (e.key === "ArrowDown") {
+    e.preventDefault();
+    navigateDown();
+  } else if (e.key === "Tab") {
+    // Tab should cycle through options
+    e.preventDefault();
+    if (e.shiftKey) {
+      navigateUp();
+    } else {
+      navigateDown();
+    }
+  }
+};
+
+const navigateUp = () => {
+  if (totalNavigableItems.value === 0) return;
+
+  let newIndex = props.matchIndex - 1;
+
+  // Wrap around to bottom
+  if (newIndex < -1) {
+    newIndex = totalNavigableItems.value - 1;
+  }
+
+  emits("update:matchIndex", newIndex);
+};
+
+const navigateDown = () => {
+  if (totalNavigableItems.value === 0) return;
+
+  let newIndex = props.matchIndex + 1;
+
+  // Wrap around to top
+  if (newIndex >= totalNavigableItems.value) {
+    newIndex = -1;
+  }
+
+  emits("update:matchIndex", newIndex);
+};
+
+const onInputReturn = () => {
+  // Check if user is selecting the "create" option
+  if (canCreateTag.value && props.matchIndex === matches.value.length) {
+    addTag(props.query);
+    emits("update:query", "");
+    emits("update:matchIndex", -1);
+    return;
+  }
+
+  // Check if user was paging through tags
+  if (
+    props.matchIndex !== -1 &&
+    props.matchIndex < matches.value.length &&
+    matches.value[props.matchIndex]
+  ) {
+    const tag = matches.value[props.matchIndex];
+    emits("tag-select", tag);
+    emits("update:query", "");
+    emits("update:matchIndex", -1);
+    return;
+  }
+
+  // Stop adding tags if user pressed return twice
+  if (props.query.trim() === "") {
+    endEditing();
+    return;
+  }
+
+  // Add tag and clear for next tag
+  addTag(props.query);
+  emits("update:query", "");
+  fieldWidth.value = 35;
+};
+
+const beginEditing = () => {
+  if (!field.value) return;
+
+  field.value.focus();
+  emits("update:query", "");
+  emits("update:matchIndex", -1);
+  gsap.to(label.value, { duration: 0.3, opacity: 0 });
+  gsap.to(button.value, { duration: 0.3, opacity: 0 });
+  gsap
+    .to(field.value, {
+      duration: 0.3,
+      width: 35,
+      opacity: 1,
+    })
+    .then(() => {
+      fieldWidth.value = 35;
+      // Show popover after animation if there are available tags
+      if (availableTags.value.length > 0 && !showPopover.value) {
+        togglePopover();
+      }
+    });
+};
+
+const endEditing = () => {
+  if (!field.value) return;
+
+  field.value.blur();
+  emits("update:query", "");
+  emits("update:matchIndex", -1);
+  gsap.to(label.value, { duration: 0.3, opacity: 1 });
+  gsap.to(button.value, { duration: 0.3, opacity: 1 });
+  gsap
+    .to(field.value, {
+      duration: 0.3,
+      width: 20,
+      opacity: 0,
+    })
+    .then(() => {
+      fieldWidth.value = 20;
+    });
+  if (showPopover.value) {
+    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(8),
+        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 = () => {
+  endEditing();
+};
+
+// Handle query updates from v-model
+const updateQuery = (value: string) => {
+  emits("update:query", value);
+};
+
+// End editing if the user tries to resize the window
+const windowResize = function () {
+  if (showPopover.value) {
+    endEditing();
+  }
+  if (container.value) {
+    componentWidth.value = container.value.offsetWidth;
+    componentHeight.value = container.value.offsetHeight;
+  }
+};
+
+const controlContainerResize = () => {
+  if (controlContainer.value) {
+    controlWidth.value = controlContainer.value.offsetWidth;
+  }
+};
+
+window.addEventListener("resize", windowResize);
+
+// Watch for external changes to showPopover to handle edge cases
+watch(showPopover, (newVal) => {
+  if (!newVal) {
+    emits("update:matchIndex", -1);
+  }
+});
+
+const getBorderRadius = computed(() => {
+  if (props.overflow === "full") {
+    return "0.471rem";
+  }
+  if (componentHeight.value > 50) {
+    return "0.471rem";
+  }
+  return "0.471rem";
+});
+
+const themeConfig = computed(() => {
+  if (useTheme()) {
+    return useTheme();
+  }
+  return { customThemeColorMode: "light" };
+});
+</script>
+
+<template>
+  <div
+    :class="[
+      $style.container,
+      {
+        [$style.container_full]: overflow === 'full',
+        [$style.container_fixed]: overflow === 'fixed',
+        [$style.container_list]: overflow === 'list',
+        [$style.container_raised]: showPopover,
+      },
+    ]"
+    ref="container"
+  >
+    <div v-if="allowEditing" :class="$style.controls" ref="controlContainer">
+      <div :class="$style.add_button" ref="button">
+        <IconButton
+          iconName="plus"
+          buttonType="square"
+          buttonStyle="secondary"
+          :buttonSize="10"
+          @click="beginEditing"
+        />
+        <p
+          v-if="selectedTags.length === 0"
+          :class="[$style.add_label, 'caption']"
+          @click="beginEditing"
+          ref="label"
+        >
+          {{ placeholder }}
+        </p>
+      </div>
+      <input
+        :class="[$style.field, 'callout']"
+        type="text"
+        ref="field"
+        :style="{ width: `${fieldWidth}px` }"
+        :value="query"
+        @input="onInput"
+        @keydown="onKeydown"
+        @keydown.enter="onInputReturn"
+        @keydown.escape="endEditing"
+      />
+    </div>
+    <div
+      :class="[
+        $style.tag_list,
+        {
+          [$style.tag_list_full]: overflow === 'full',
+          [$style.tag_list_fixed]: overflow === 'fixed',
+          [$style.tag_list_list]: overflow === 'list',
+        },
+      ]"
+      v-if="selectedTags.length > 0"
+    >
+      <div
+        v-for="tag in selectedTags"
+        :key="tag.title"
+        :id="tag.title"
+        :class="$style.tag"
+        :style="{
+          ...getTagStyle(tag).container,
+          pointerEvents: allowEditing ? 'auto' : 'none',
+        }"
+        @click="onTagClick(tag)"
+      >
+        <p class="callout" :style="{ color: getTagStyle(tag).container.color }">
+          {{ tag.title }}
+        </p>
+      </div>
+    </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">
+      <TagPicker
+        :all-tags="allTags"
+        :selected-tags="selectedTags"
+        :query="query"
+        :match-index="matchIndex"
+        :can-create-tag="canCreateTag"
+        @tag-select="(tag) => emits('tag-select', tag)"
+        @tag-create="(title) => emits('tag-create', title)"
+        @update:query="(value) => emits('update:query', value)"
+        @update:match-index="(index) => emits('update:matchIndex', index)"
+        @quit="endEditing"
+      />
+    </div>
+  </Teleport>
+</template>
+
+<style module>
+/* Container - use CSS Grid for better control */
+.container {
+  display: grid;
+  align-items: center;
+  position: relative;
+  overflow: hidden;
+  background-color: var(--tagbar-bg);
+  border-radius: 0.471rem;
+  border: var(--tagbar-border);
+}
+
+.container_raised {
+  z-index: 1001;
+}
+
+/* Full overflow mode - use grid with minmax */
+.container_full {
+  width: 100%;
+  /* Grid template: controls take their content size, tag list takes remaining space */
+  grid-template-columns: auto minmax(0, 1fr);
+  grid-template-rows: 1fr;
+}
+
+/* Fixed overflow mode - container uses assigned width */
+.container_fixed {
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+}
+
+/* List overflow mode - container uses assigned width */
+.container_list {
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+}
+
+/* Controls */
+.controls {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: 1fr;
+  grid-template-areas: "content";
+  align-items: center;
+  padding-top: 0.471rem;
+  padding-bottom: 0.471rem;
+  padding-left: 0.471rem;
+  /* No flex-shrink needed in grid context */
+}
+
+/* Fixed overflow mode - controls take full width */
+.container_fixed .controls {
+  width: 100%;
+  flex-basis: 100%;
+  order: 2;
+}
+
+/* List overflow mode - controls take full width */
+.container_list .controls {
+  width: 100%;
+  flex-basis: 100%;
+  order: 2;
+}
+
+.add_button {
+  grid-area: content;
+  display: flex;
+  align-items: center;
+  gap: 0.588rem;
+  justify-content: start;
+}
+
+.add_label {
+  user-select: none;
+  color: var(--tagbar-text);
+}
+
+.field {
+  background-color: var(--tagbar-field-bg);
+  color: var(--tagbar-field-text);
+  border: none;
+  border-radius: 999px;
+  min-height: 1.412rem;
+  padding-left: 0.471rem;
+  padding-right: 0.588rem;
+  grid-area: content;
+  opacity: 0;
+  user-select: none;
+  pointer-events: none;
+}
+
+.tag_list {
+  display: flex;
+  align-items: center;
+  justify-content: start;
+  gap: 0.588rem;
+  padding: 0.294rem 0;
+}
+
+/* Full overflow mode - horizontal scroll with grid */
+.tag_list_full {
+  /* minmax(0, 1fr) in the grid parent ensures this won't grow beyond available space */
+  overflow-x: auto;
+  overflow-y: hidden;
+  padding-right: 0.588rem;
+  padding-left: 0.588rem;
+
+  /* Ensure the flex container inside doesn't wrap */
+  flex-wrap: nowrap;
+
+  /* Hide scrollbar if desired */
+  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none; /* IE and Edge */
+}
+
+.tag_list_full::-webkit-scrollbar {
+  display: none; /* Chrome, Safari, Opera */
+}
+
+/* Fixed overflow mode - wrap tags */
+.tag_list_fixed {
+  flex-wrap: wrap;
+  overflow: visible;
+  padding-left: 0.471rem;
+  padding-top: 0.471rem;
+  padding-right: 0.471rem;
+  width: 100%;
+  flex-basis: 100%;
+  order: 1;
+}
+
+/* List overflow mode - each tag on its own row */
+.tag_list_list {
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.588rem;
+  padding: 0.471rem;
+  width: 100%;
+  flex-basis: 100%;
+  order: 1;
+  border-bottom: 1px solid var(--tagbar-list-border);
+}
+
+.tag {
+  cursor: default;
+  user-select: none;
+  transition: scale 0.15s ease;
+  transform-origin: center;
+  flex-shrink: 0; /* Prevent tags from shrinking */
+}
+
+.tag_list_list .tag {
+  width: 100%;
+  border-bottom: 1px solid var(--tagbar-list-border);
+}
+
+.tag:hover {
+  scale: 1.05;
+}
+
+.tag_list_list .tag:hover {
+  scale: 1.01;
+}
+
+.tag p {
+  white-space: nowrap;
+}
+
+.overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: var(--search-overlay-bg);
+  opacity: 0;
+  z-index: 999;
+}
+
+.picker {
+  position: absolute;
+  top: 0;
+  left: 0;
+  background-color: var(--tagpicker-container-bg);
+  border-radius: 0.353rem;
+  min-width: 18.824rem;
+  overflow: hidden;
+  z-index: 1000;
+  box-shadow: 0px 1px 0px 0px var(--tagpicker-container-shadow),
+    inset 0px 1px 0px 0px var(--tagpicker-container-inset-shadow);
+}
+</style>