@umbra.ui/core 0.1.0

package/src/components/inputs/search/SearchBar.vue

@@ -0,0 +1,394 @@
+<!-- SearchBar.vue -->
+<script setup lang="ts">
+import { MagnifierIcon } from "@umbra-ui/icons";
+import { onMounted, ref, nextTick, onUnmounted, computed } from "vue";
+import { gsap } from "gsap";
+import {
+  offset,
+  flip,
+  shift,
+  size,
+  computePosition,
+  autoUpdate,
+} from "@floating-ui/vue";
+import SearchResults from "./SearchResults.vue";
+import { type SearchResult } from "./types";
+import "./theme.css";
+
+// Props
+interface Props {
+  type: string;
+  query: string;
+  items: SearchResult[];
+  placeholder?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  type: "items",
+  query: "",
+  items: () => [],
+  placeholder: "Search",
+});
+
+// Emits
+const emits = defineEmits<{
+  "update:query": [query: string];
+  onSelect: [result: SearchResult];
+  onFocus: [];
+}>();
+
+// Computed properties
+const matches = computed(() => {
+  if (!props.query.trim()) {
+    return props.items;
+  }
+
+  const query = props.query.toLowerCase();
+  return props.items.filter((item) => {
+    const searchText =
+      `${item.title} ${item.caption} ${item.description} ${item.footnote}`.toLowerCase();
+    return searchText.includes(query);
+  });
+});
+
+const onSelect = (result: SearchResult) => {
+  endSearch();
+  emits("onSelect", result);
+};
+
+onMounted(() => {
+  // Initialize matches with all items
+  if (props.items.length > 0) {
+    // This will be handled by the computed property now
+  }
+});
+
+const onFocus = () => {
+  isFocused.value = true;
+  // Show picker on focus if there are items
+  if (props.items.length > 0) {
+    showPicker();
+  }
+  emits("onFocus");
+};
+
+const onInput = (e: Event) => {
+  const target = e.target as HTMLInputElement;
+  emits("update:query", target.value);
+
+  if (!isPopoverShowing.value) {
+    showPicker();
+  }
+};
+
+const onBlur = () => {
+  isFocused.value = false;
+  // Add a small delay to prevent the picker from being hidden immediately
+  setTimeout(() => {
+    if (!isPopoverShowing.value) {
+      endSearch();
+    }
+  }, 100);
+};
+
+const isFocused = ref<boolean>(false);
+const isPopoverShowing = ref<boolean>(false);
+const searchBar = ref<HTMLElement>();
+const searchInput = ref<HTMLInputElement>();
+const overlay = ref<HTMLElement>();
+const picker = ref<HTMLElement>();
+
+// Position tracking
+let cleanupAutoUpdate: (() => void) | null = null;
+
+onUnmounted(() => {
+  if (cleanupAutoUpdate) {
+    cleanupAutoUpdate();
+  }
+});
+
+const beginSearch = () => {
+  showPicker();
+};
+
+const endSearch = () => {
+  emits("update:query", "");
+  hidePicker();
+  if (searchInput.value) {
+    searchInput.value.blur();
+  }
+};
+
+// - Picker Management
+const showPicker = async () => {
+  if (!searchBar.value) {
+    return;
+  }
+
+  isPopoverShowing.value = true;
+
+  await nextTick();
+
+  // Now the picker and overlay should be rendered, so we can access their refs
+  if (!picker.value || !overlay.value) {
+    return;
+  }
+
+  // Set up auto-update for positioning
+  if (cleanupAutoUpdate) {
+    cleanupAutoUpdate();
+  }
+
+  cleanupAutoUpdate = autoUpdate(searchBar.value, picker.value, () => {
+    computePosition(searchBar.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`,
+        });
+      }
+    });
+  });
+
+  // Animate the picker
+  if (picker.value) {
+    picker.value.style.display = "block";
+    gsap.fromTo(
+      picker.value,
+      {
+        opacity: 0,
+        scale: 0.95,
+        y: -8,
+      },
+      {
+        duration: 0.2,
+        opacity: 1,
+        scale: 1,
+        y: 0,
+        ease: "ease-out",
+      }
+    );
+  }
+
+  // Animate the overlay
+  if (overlay.value) {
+    overlay.value.style.display = "block";
+    gsap.to(overlay.value, {
+      duration: 0.2,
+      opacity: 0.7,
+      ease: "ease-out",
+    });
+  }
+};
+
+const hidePicker = () => {
+  if (!searchBar.value || !picker.value || !overlay.value) return;
+
+  isPopoverShowing.value = false;
+
+  // Clean up auto-update
+  if (cleanupAutoUpdate) {
+    cleanupAutoUpdate();
+    cleanupAutoUpdate = null;
+  }
+
+  // Animate the overlay
+  if (overlay.value) {
+    gsap
+      .to(overlay.value, {
+        duration: 0.2,
+        opacity: 0,
+        ease: "ease-out",
+      })
+      .then(() => {
+        if (overlay.value) {
+          overlay.value.style.display = "none";
+        }
+      });
+  }
+
+  // Animate the picker
+  if (picker.value) {
+    gsap
+      .to(picker.value, {
+        duration: 0.2,
+        opacity: 0,
+        scale: 0.95,
+        y: -8,
+        ease: "ease-out",
+      })
+      .then(() => {
+        if (picker.value) {
+          picker.value.style.display = "none";
+        }
+      });
+  }
+};
+
+const handleOverlayClick = () => {
+  endSearch();
+};
+</script>
+//
+================================================================================================
+// TEMPLATE //
+================================================================================================
+<template>
+  <div
+    :class="[$style.container, { [$style.elevated]: isPopoverShowing }]"
+    ref="searchBar"
+  >
+    <div :class="$style.search">
+      <MagnifierIcon size="16" />
+      <input
+        type="text"
+        :placeholder="props.placeholder"
+        :class="[$style.field, 'callout']"
+        @focus="onFocus"
+        @blur="onBlur"
+        @keydown.escape="endSearch"
+        ref="searchInput"
+        :value="props.query"
+        @input="onInput"
+      />
+    </div>
+
+    <!-- Teleport the overlay and picker to body -->
+    <Teleport to="body">
+      <div
+        v-if="isPopoverShowing"
+        :class="$style.overlay"
+        ref="overlay"
+        @click="handleOverlayClick"
+      ></div>
+      <div v-if="isPopoverShowing" :class="$style.picker" ref="picker">
+        <SearchResults
+          :type="props.type"
+          :query="props.query"
+          :matches="matches"
+          @onSelect="onSelect"
+        />
+      </div>
+    </Teleport>
+  </div>
+</template>
+//
+================================================================================================
+// STYLE //
+================================================================================================
+<style module>
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: 0.706rem;
+  position: relative;
+}
+
+.elevated {
+  z-index: 1001;
+}
+
+.search {
+  background-color: var(--search-bar-bg);
+  min-height: 2rem;
+  border-radius: 0.471rem;
+  padding-left: 0.706rem;
+  padding-right: 0.706rem;
+  padding-top: 0.471rem;
+  padding-bottom: 0.471rem;
+  display: flex;
+  align-items: center;
+  justify-content: start;
+  gap: 0.471rem;
+  border: var(--search-bar-border);
+  transition: border 0.2s ease-out, background-color 0.2s ease-out;
+  box-shadow: 0px 1px 0px 0px var(--search-bar-shadow),
+    inset 0px 1px 0px 0px var(--search-bar-inset-shadow);
+}
+.search:has(.field:focus) {
+  border: 1px solid var(--search-bar-focus-border);
+  /* background-color: var(--text-2); */
+}
+.field {
+  background-color: transparent;
+  color: var(--search-bar-text);
+  border: none;
+  width: 100%;
+}
+.field::placeholder {
+  color: var(--search-bar-placeholder);
+}
+.search input:focus {
+  outline: none;
+}
+/*
+.search:has(.field:focus) .field {
+  color: black;
+}
+.search:has(.field:focus) svg {
+  color: black;
+}
+*/
+
+.picker {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: none;
+  opacity: 0;
+  scale: 0.95;
+  z-index: 1000;
+}
+
+.overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: var(--search-overlay-bg);
+  opacity: 0;
+  z-index: 999;
+  animation: overlayFadeIn 0.7s ease-out;
+}
+
+@keyframes overlayFadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 0.7;
+  }
+}
+</style>

package/src/components/inputs/search/SearchResults.vue

@@ -0,0 +1,310 @@
+<!-- SearchResults.vue -->
+<script setup lang="ts">
+import { SearchResult } from "./types";
+import { CircleAnim32GlyphIcon, ChevronDownIcon } from "@umbra-ui/icons";
+import { computed, ref, watch } from "vue";
+import "./theme.css";
+
+// Props
+interface Props {
+  type: string;
+  query: string;
+  matches: SearchResult[];
+}
+
+const props = defineProps<Props>();
+
+const emits = defineEmits<{
+  onSelect: [result: SearchResult];
+}>();
+
+const filtered = computed(() => {
+  return props.matches.slice(0, page.value);
+});
+
+const loading = computed(() => {
+  return props.matches.length === 0 ? true : false;
+});
+
+const pageValue: number = 10;
+const page = ref<number>(pageValue);
+
+const canLoadMore = computed(() => {
+  return props.matches.length > filtered.value.length ? true : false;
+});
+
+watch(
+  () => props.query,
+  (newValue) => {
+    page.value = pageValue;
+  }
+);
+
+const onLoadMore = () => {
+  page.value += pageValue;
+};
+
+const highlight = (description: string) => {
+  // make sure there is actually something to highlight first
+  if (description?.trim() === "" || description === undefined) {
+    return "";
+  }
+
+  // Escape special characters in the query for use in the regular expression
+  const escapedQuery = props.query.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+
+  // Create a regular expression with the escaped query and set it to be global and case-insensitive
+  const regex = new RegExp(`(${escapedQuery})`, "gi");
+
+  const filtered = filter(description);
+
+  // Replace occurrences of the query with highlighted spans
+  const highlightedDescription = filtered.replace(
+    regex,
+    '<span style="background-color: var(--search-highlight-bg);">$1</span>'
+  );
+
+  return highlightedDescription;
+};
+
+const onSelect = (result: SearchResult) => {
+  emits("onSelect", result);
+};
+
+const filter = (description: string) => {
+  const minLength = 300;
+  const distance = 280;
+  const query = props.query;
+  const firstIndex = description.indexOf(query);
+  const lastIndex = description.lastIndexOf(query);
+
+  if (description.length < minLength) {
+    return description;
+  } else {
+    const startIndex = Math.max(0, firstIndex - distance);
+    const endIndex = Math.min(
+      description.length,
+      lastIndex + query.length + distance
+    );
+    return description.substring(startIndex, endIndex);
+  }
+};
+</script>
+//
+================================================================================================
+// TEMPLATE //
+================================================================================================
+<template>
+  <div :class="$style.container">
+    <div :class="$style.subheader">
+      <div :class="$style.query">
+        <p class="body">Searching all {{ props.type }} for</p>
+        <p class="body">"{{ props.query }}"</p>
+      </div>
+      <div :class="$style.right">
+        <p v-if="loading" class="subheadline">building search index</p>
+        <CircleAnim32GlyphIcon v-if="loading" size="16" />
+        <p v-if="!loading" class="body">
+          {{ props.matches.length }} results found
+        </p>
+      </div>
+    </div>
+    <div :class="$style.result_list">
+      <div
+        v-for="item in filtered"
+        :key="item.id"
+        :class="$style.result"
+        @click="onSelect(item)"
+      >
+        <div v-if="item.icon" :class="$style.icon">
+          <span
+            v-if="
+              item.icon.startsWith('http') ||
+              item.icon.startsWith('data:') ||
+              item.icon.endsWith('.svg') ||
+              item.icon.endsWith('.png') ||
+              item.icon.endsWith('.jpg') ||
+              item.icon.endsWith('.jpeg') ||
+              item.icon.endsWith('.gif')
+            "
+          >
+            <img :src="item.icon" alt="" />
+          </span>
+          <span v-else :class="$style.emoji">{{ item.icon }}</span>
+        </div>
+        <div :class="$style.labels">
+          <p
+            v-if="item.title"
+            :class="['headline', $style.title]"
+            v-html="highlight(item.title)"
+          ></p>
+          <p
+            v-if="item.description"
+            :class="['subheadline', $style.description]"
+            v-html="highlight(item.description)"
+          ></p>
+          <p
+            v-if="item.caption"
+            :class="['subheadline', $style.caption]"
+            v-html="highlight(item.caption)"
+          ></p>
+          <p
+            v-if="item.footnote"
+            :class="['caption', $style.footnote]"
+            v-html="highlight(item.footnote)"
+          ></p>
+        </div>
+      </div>
+    </div>
+    <div v-if="props.matches.length === 0" :class="$style.nothing">
+      <p>Nothing Found</p>
+    </div>
+    <div v-if="canLoadMore" :class="$style.more" @click="onLoadMore">
+      <p class="headline">Load More Results</p>
+      <ChevronDownIcon size="12" />
+    </div>
+  </div>
+</template>
+//
+================================================================================================
+// STYLE //
+================================================================================================
+<style module>
+.container {
+  background-color: var(--search-results-bg);
+  border-radius: 0.353rem;
+  width: 41.176rem;
+  max-height: 41.176rem;
+  overflow-y: auto;
+  z-index: 1000;
+  box-shadow: 0px 1px 0px 0px var(--search-results-shadow),
+    inset 0px 1px 0px 0px var(--search-results-inset-shadow);
+  border: var(--search-results-border);
+}
+.subheader {
+  background-color: var(--search-subheader-bg);
+  border-bottom: 1px solid var(--search-subheader-border);
+  padding-top: 0.412rem;
+  padding-bottom: 0.412rem;
+  padding-left: 0.882rem;
+  padding-right: 0.882rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  color: var(--search-subheader-text);
+}
+.right {
+  display: flex;
+  align-items: center;
+  gap: 0.471rem;
+}
+.right p {
+  opacity: 0.5;
+}
+.query {
+  display: flex;
+  align-items: center;
+  justify-content: start;
+  gap: 0.471rem;
+}
+.query > :first-child {
+  opacity: 0.5;
+}
+.query > :last-child {
+  font-weight: bold;
+}
+.result_list {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+.result_list > :last-child {
+  border-bottom: 0;
+}
+.result {
+  display: flex;
+  align-items: center;
+  gap: 0.882rem;
+  padding: 0.882rem;
+  border-bottom: 1px solid var(--search-result-border);
+  background-color: var(--search-result-bg);
+}
+.result:hover {
+  background-color: var(--search-result-hover-bg);
+}
+.labels {
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+  gap: 0.412rem;
+  color: var(--search-result-text);
+}
+.icon {
+  width: 4.1176rem;
+  height: 4.1176rem;
+  background-color: var(--search-icon-bg);
+  border-radius: 0.4706rem;
+  border: 1px solid var(--search-icon-border);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.icon img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 0.4706rem;
+}
+
+.emoji {
+  font-size: 2rem;
+  line-height: 1;
+}
+.title {
+  opacity: 1;
+}
+.description {
+  opacity: 0.5;
+}
+.caption {
+  opacity: 0.5;
+}
+.footnote {
+  padding-left: 0.588rem;
+  padding-right: 0.588rem;
+  padding-top: 0.235rem;
+  padding-bottom: 0.235rem;
+  background-color: var(--search-footnote-bg);
+  border-radius: 999px;
+  font-weight: 600;
+}
+.nothing {
+  min-height: 10.235rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0.5;
+  color: var(--search-nothing-text);
+}
+.more {
+  background-color: var(--search-load-more-bg);
+  color: var(--search-load-more-text);
+  padding: 0.882rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.471rem;
+  cursor: default;
+}
+.more img {
+  height: 1.176rem;
+}
+.more:hover {
+  background-color: var(--search-load-more-hover-bg);
+}
+</style>