@umbra.ui/core 0.2.0 → 0.4.0

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

@@ -1,394 +0,0 @@
-<!-- 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

@@ -1,310 +0,0 @@
-<!-- SearchResults.vue -->
-<script setup lang="ts">
-import type { 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>