Phila Search Component

Component Status

| Component | Status | | ----------------- | ----------------------------------------------------------- | | Search | | | SearchSuggestions | |

A search bar component built with Vue 3 and TypeScript, implementing the Philadelphia Design System. Combines the TextField and Button components to create a complete search interface.

Features

• 🔍 Built-in search icon button using Button component
• 📝 TextField integration with custom styling
• 🎯 TypeScript support with full type definitions
• 💅 Design system integration: Uses Core package styles
• 🔽 Optional keyboard-navigable suggestions dropdown

Suggestions Dropdown

<Search> renders a keyboard-navigable suggestions dropdown when you pass the suggestions prop:

<Search v-model="query" :suggestions="mySuggestions" @select="handlePick" @search="handleSearch" />

The dropdown supports ArrowDown/ArrowUp navigation, Enter to select, Escape to dismiss. The source of mySuggestions is up to you.

For Philadelphia address autocomplete, pair with useAisAddressSuggestions from @phila/phila-ui-map-core:

import { useAisAddressSuggestions } from "@phila/phila-ui-map-core";
const query = ref("");
const { searchSuggestions, dismissSuggestions } = useAisAddressSuggestions(query);

Then bind searchSuggestions to <Search :suggestions> and call dismissSuggestions() from your @select handler before triggering your search.

If you don't need <Search>'s built-in rendering, SearchSuggestions is also exported for custom layouts.

Installation

npm install @phila/phila-ui-search @phila/phila-ui-core @phila/phila-ui-text-field @phila/phila-ui-button
# or
pnpm add @phila/phila-ui-search @phila/phila-ui-core @phila/phila-ui-text-field @phila/phila-ui-button

Import core styles in your main entry file (e.g., main.js|ts):

import "@phila/phila-ui-core/styles/template-light.css";

Usage

Basic Usage

<script setup lang="ts">
import { Search } from "@phila/phila-ui-search";
</script>

<template>
  <Search />
</template>

With Custom Class

<script setup lang="ts">
import { Search } from "@phila/phila-ui-search";
</script>

<template>
  <Search class-name="custom-search" />
</template>

Props

| Prop | Type | Default | Description | | ------------- | ---------- | ------------------------------ | -------------------------------------------------------------------------- | | modelValue | string | undefined | The v-model value for the search input. | | placeholder | string | "Search by title or keyword" | Placeholder text for the search input. | | suggestions | string[] | [] | Suggestions to display in the dropdown beneath the input. | | elevated | boolean | false | Applies an elevation shadow to the search input (for floating over a map). | | className | string | undefined | Additional CSS classes |

Events

| Event | Payload | Description | | ------------------- | -------- | ---------------------------------------------------------------- | | update:modelValue | string | Emitted on input, and when a suggestion is selected (v-model). | | search | — | Enter pressed in the input, or the search button clicked. | | select | string | A suggestion was picked from the dropdown. | | dismiss | — | The suggestions dropdown was dismissed (e.g. Escape). |

Exposed

Access via a template ref on Search:

| Method | Type | Description | | ------- | ------------ | ---------------------------------- | | focus | () => void | Focuses the underlying text input. |

Component Structure

The Search component is composed of:

• TextField: For text input with built-in clear functionality, using the trailing-action slot for the search button
• Button: Icon-only button using IconMagnifyingGlass from @phila/phila-ui-core/icons

Both sub-components use the @phila/phila-ui-* packages for consistency with the design system.

Development

Install Dependencies

pnpm install

Run Demo

pnpm dev

Build Library

pnpm build

Run lint

pnpm lint

Type Check

pnpm type-check

Publishing to NPM

Follow the release instructions using changesets.

License

MIT