@todovue/tv-search 1.1.3 → 1.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +155 -0
- package/README.md +41 -49
- package/dist/tv-search.cjs.js +2 -2
- package/dist/tv-search.es.js +104 -80
- package/package.json +16 -11
- package/src/assets/icons/search.svg +8 -0
- package/src/assets/scss/_global.scss +14 -0
- package/src/assets/scss/_mixins.scss +3 -0
- package/src/assets/scss/_variables.scss +9 -0
- package/src/assets/scss/style.scss +155 -0
- package/src/components/TvSearch.vue +99 -0
- package/src/composable/useSearch.js +125 -0
- package/src/demo/Demo.vue +24 -0
- package/src/demo/utils/demos/customKeys.vue +35 -0
- package/src/demo/utils/demos/customNoResults.vue +28 -0
- package/src/demo/utils/demos/customStyles.vue +57 -0
- package/src/demo/utils/demos/default.vue +49 -0
- package/src/demo/utils/demos/slots.vue +59 -0
- package/src/demo/utils/mocks.js +182 -0
- package/src/entry.ts +21 -0
- package/src/main.js +8 -0
- package/src/style.scss +2 -0
package/CHANGELOG.md
ADDED
|
@@ -0,0 +1,155 @@
|
|
|
1
|
+
# Changelog
|
|
2
|
+
|
|
3
|
+
All notable changes to `@todovue/tv-search` will be documented in this file.
|
|
4
|
+
|
|
5
|
+
This project adheres to [Semantic Versioning](https://semver.org/).
|
|
6
|
+
|
|
7
|
+
## [1.2.1] - 2026-01-27
|
|
8
|
+
|
|
9
|
+
### Changed
|
|
10
|
+
- Simplified the file list in `package.json` to include only essential assets.
|
|
11
|
+
- Simplified the build configuration by removing demo-specific logic.
|
|
12
|
+
- Enhanced GitHub Actions workflows to automate npm package publishing and GitHub release creation.
|
|
13
|
+
- Moved the `@todovue/tv-demo` component import from main.js to `Demo.vue` to localize its usage.
|
|
14
|
+
- Updated build commands to include `README.md` and `CHANGELOG.md` files in the public directory during the build process.
|
|
15
|
+
|
|
16
|
+
### Added
|
|
17
|
+
- Included the `src` directory in the `package.json` files list to ensure component source files are bundled in the package distribution.
|
|
18
|
+
|
|
19
|
+
### Removed
|
|
20
|
+
- Eliminated the global import of the `@todovue/tv-demo` component from `main.js`.
|
|
21
|
+
|
|
22
|
+
### Dependencies
|
|
23
|
+
- Updated `@todovue/tv-demo` to `^1.4.11`.
|
|
24
|
+
- Updated `vue` to `^3.5.27`.
|
|
25
|
+
- Updated `sass` to `^1.97.3`.
|
|
26
|
+
|
|
27
|
+
## [1.2.0] - 2026-01-20
|
|
28
|
+
|
|
29
|
+
### Added
|
|
30
|
+
- Added `searchKeys` prop to allow searching by multiple object properties (default is `['title']`).
|
|
31
|
+
- Added `noResultsText` prop for customizable empty state text (default: "No results found for").
|
|
32
|
+
- Added scoped `item` slot for customizing search result rendering.
|
|
33
|
+
- Added `no-results` slot for customizing the empty state.
|
|
34
|
+
|
|
35
|
+
### Dependencies
|
|
36
|
+
- Updated the `@todovue/tv-demo` dependency to `^1.4.4`.
|
|
37
|
+
- Updated the `@todovue/tv-button` dependency to `^1.2.4`.
|
|
38
|
+
- Updated the `sass` dependency to `^1.97.2`.
|
|
39
|
+
- Updated the `vite` dependency to `^7.3.1`.
|
|
40
|
+
|
|
41
|
+
## [1.1.3] - 2025-12-27
|
|
42
|
+
|
|
43
|
+
### Fixed
|
|
44
|
+
- Fixed publish in npm with new token.
|
|
45
|
+
|
|
46
|
+
## [1.1.2] - 2025-12-27
|
|
47
|
+
|
|
48
|
+
### Added
|
|
49
|
+
- Added automatic publishing to the TODOvue cPanel in `release.yml` for each release, simplifying package distribution and updates.
|
|
50
|
+
- Added `package-lock.json` to the repository to ensure dependency consistency and facilitate version management across development and production environments.
|
|
51
|
+
|
|
52
|
+
### Changed
|
|
53
|
+
- Changed the `base` option in `vite.config.js` for website deployment in cpanel.
|
|
54
|
+
|
|
55
|
+
### Fixed
|
|
56
|
+
- Fixed repository URL in `package.json` to point to the correct GitHub repository.
|
|
57
|
+
- Fixed the token configuration used to generate the package in the GitHub Actions workflow `release.yml`.
|
|
58
|
+
|
|
59
|
+
### Dependencies
|
|
60
|
+
- Updated dependency versions in `package.json` to maintain compatibility and benefit from improvements and bug fixes in the used libraries.
|
|
61
|
+
|
|
62
|
+
## [1.1.1] - 2025-11-24
|
|
63
|
+
|
|
64
|
+
### Changed
|
|
65
|
+
- Updated background and text colors for dark and light themes to improve readability and visual comfort.
|
|
66
|
+
- Deleted unused styles files.
|
|
67
|
+
|
|
68
|
+
### Dependencies
|
|
69
|
+
- Updated the `@todovue/tv-demo` dependency to `^1.2.2` to ensure compatibility with the latest changes.
|
|
70
|
+
|
|
71
|
+
## [1.1.0] - 2025-11-21
|
|
72
|
+
|
|
73
|
+
### Added
|
|
74
|
+
- Added `nux.js` configuration file for Nuxt 4 integration.
|
|
75
|
+
- Added `tsconfig.json` for proper type checking during build.
|
|
76
|
+
- Create `global.d.ts` to declare module for TypeScript users.
|
|
77
|
+
- Added Nuxt module for automatic style injection and auto-registration of the `TvSearch` component.
|
|
78
|
+
- The `@todovue/tv-search` component is now externalized from the final build, reducing bundle size.
|
|
79
|
+
- Added `CHANGELOG.md` in script to generate demo and documentation site.
|
|
80
|
+
|
|
81
|
+
### Dependencies
|
|
82
|
+
- Updated the `@todovue/tv-demo` dependency to `^1.2.1` to ensure compatibility with the latest changes.
|
|
83
|
+
- Updated the `@todovue/tv-button` dependency to `^1.2.2` to ensure compatibility with the latest changes.
|
|
84
|
+
|
|
85
|
+
## [1.0.5] - 2025-11-18
|
|
86
|
+
|
|
87
|
+
### Changed
|
|
88
|
+
- Modified search behavior: pressing Enter or the search button now always emits the input string. The result object is only emitted when explicitly selected from the list.
|
|
89
|
+
|
|
90
|
+
## [1.0.4] - 2025-11-15
|
|
91
|
+
|
|
92
|
+
### Changed
|
|
93
|
+
- Styles are now served as a separate CSS file (`dist/tv-search.css`) generated by Vite during the build process.
|
|
94
|
+
- Users must now explicitly import the stylesheet in their application:
|
|
95
|
+
- For Vue/Vite SPA: `import '@todovue/tv-search/style.css'` in `main.ts`
|
|
96
|
+
- For Nuxt 3/4: Add `'@todovue/tv-search/style.css'` to the `css` array in `nuxt.config.ts`
|
|
97
|
+
|
|
98
|
+
### Added
|
|
99
|
+
- Added `sideEffects` field to `package.json` to support proper tree-shaking with CSS files.
|
|
100
|
+
- Added `./style.css` export path in `package.json` for explicit CSS imports.
|
|
101
|
+
- Improved SSR/SSG compatibility, especially for Nuxt 3/4 applications.
|
|
102
|
+
|
|
103
|
+
### Dependencies
|
|
104
|
+
- Removed dependency on `vite-plugin-css-injected-by-js` from `devDependencies`
|
|
105
|
+
|
|
106
|
+
## [1.0.3] - 2025-11-13
|
|
107
|
+
|
|
108
|
+
### Fixed
|
|
109
|
+
- The emit event is fixed to send the selected object and not the input.
|
|
110
|
+
|
|
111
|
+
### Changed
|
|
112
|
+
- Corrected demo application routes.
|
|
113
|
+
|
|
114
|
+
## [1.0.2] - 2025-10-17
|
|
115
|
+
|
|
116
|
+
### Changed
|
|
117
|
+
- The library build now uses `src/entry.ts` (exports both the component and the plugin) instead of directly exporting the `.vue` file.
|
|
118
|
+
- CSS injection via JS has been removed for the library build (it is only kept for the demo), generating a `tv-search.css` file optimized for SSR/Nuxt.
|
|
119
|
+
- Changed node-version to workflows release.yml to 20.
|
|
120
|
+
|
|
121
|
+
### Added
|
|
122
|
+
- Plugin installation support: `app.use(TvSearch)` or `app.use(TvSearchPlugin)`.
|
|
123
|
+
- Explicit export of the style file: `import '@todovue/tv-search/style.css'`.
|
|
124
|
+
- Documentation for usage in SSR and Nuxt 3 applications.
|
|
125
|
+
|
|
126
|
+
## [1.0.1] - 2025-05-07
|
|
127
|
+
|
|
128
|
+
### Fixed
|
|
129
|
+
- Rename `global.scss` to `_global.scss`
|
|
130
|
+
- Update imports in component
|
|
131
|
+
|
|
132
|
+
## [1.0.0] - 2025-05-06
|
|
133
|
+
|
|
134
|
+
### Features
|
|
135
|
+
- Initial release of `TvSearch` component.
|
|
136
|
+
- Added support for `Ctrl + K` / `⌘ + K` keyboard shortcuts to open the search modal.
|
|
137
|
+
- Supports customizable search result list via `results` prop.
|
|
138
|
+
- Allows overriding styles with `customStyles` prop.
|
|
139
|
+
- Emits `search` event on form submission.
|
|
140
|
+
- Full keyboard accessibility and responsive design.
|
|
141
|
+
- Easy integration into any Vue 3 application.
|
|
142
|
+
- Published to [npm](https://www.npmjs.com/package/@todovue/tv-search) under the `@todovue` namespace.
|
|
143
|
+
|
|
144
|
+
[1.2.1]: https://github.com/TODOvue/tv-button/pull/13/files
|
|
145
|
+
[1.2.0]: https://github.com/TODOvue/tv-button/pull/12/files
|
|
146
|
+
[1.1.3]: https://github.com/TODOvue/tv-button/pull/11/files
|
|
147
|
+
[1.1.2]: https://github.com/TODOvue/tv-button/pull/10/files
|
|
148
|
+
[1.1.1]: https://github.com/TODOvue/tv-button/pull/9/files
|
|
149
|
+
[1.1.0]: https://github.com/TODOvue/tv-button/pull/8/files
|
|
150
|
+
[1.0.5]: https://github.com/TODOvue/tv-button/pull/7/files
|
|
151
|
+
[1.0.4]: https://github.com/TODOvue/tv-button/pull/6/files
|
|
152
|
+
[1.0.3]: https://github.com/TODOvue/tv-button/pull/5/files
|
|
153
|
+
[1.0.2]: https://github.com/TODOvue/tv-button/pull/4/files
|
|
154
|
+
[1.0.1]: https://github.com/TODOvue/tv-button/pull/2/files
|
|
155
|
+
[1.0.0]: https://github.com/TODOvue/tv-button/pull/2/files
|
package/README.md
CHANGED
|
@@ -16,12 +16,11 @@ A fast, accessible, and fully customizable search interface component for Vue 3
|
|
|
16
16
|
|
|
17
17
|
> Demo: https://ui.todovue.blog/search
|
|
18
18
|
|
|
19
|
-
---
|
|
20
19
|
## Table of Contents
|
|
21
20
|
- [Features](#features)
|
|
22
21
|
- [Installation](#installation)
|
|
23
22
|
- [Quick Start (SPA)](#quick-start-spa)
|
|
24
|
-
- [Nuxt
|
|
23
|
+
- [Nuxt 4 / SSR Usage](#nuxt-4--ssr-usage)
|
|
25
24
|
- [Component Registration Options](#component-registration-options)
|
|
26
25
|
- [Props](#props)
|
|
27
26
|
- [Events](#events)
|
|
@@ -30,13 +29,11 @@ A fast, accessible, and fully customizable search interface component for Vue 3
|
|
|
30
29
|
- [Results Data Structure](#results-data-structure)
|
|
31
30
|
- [Accessibility](#accessibility)
|
|
32
31
|
- [SSR Notes](#ssr-notes)
|
|
33
|
-
- [Roadmap](#roadmap)
|
|
34
32
|
- [Development](#development)
|
|
35
33
|
- [Contributing](#contributing)
|
|
36
34
|
- [Changelog](#changelog)
|
|
37
35
|
- [License](#license)
|
|
38
36
|
|
|
39
|
-
---
|
|
40
37
|
## Features
|
|
41
38
|
- **Keyboard-first UX**: Open with `Ctrl+K` / `Cmd+K`, close with `Esc`
|
|
42
39
|
- **Real-time filtering**: Search as you type with instant results
|
|
@@ -45,11 +42,10 @@ A fast, accessible, and fully customizable search interface component for Vue 3
|
|
|
45
42
|
- **Accessible**: Built with semantic HTML and keyboard navigation
|
|
46
43
|
- **Lightweight**: Minimal dependencies, Vue 3 marked as peer dependency
|
|
47
44
|
- **SSR compatible**: Works in Nuxt 3 and other SSR frameworks
|
|
48
|
-
- **
|
|
45
|
+
- **Autofocus**: Input field receives focus automatically when opened
|
|
49
46
|
- **Click-away close**: Modal closes when clicking outside the content area
|
|
50
47
|
- **Flexible results**: Pass any array of searchable items with custom properties
|
|
51
48
|
|
|
52
|
-
---
|
|
53
49
|
## Installation
|
|
54
50
|
Using npm:
|
|
55
51
|
```bash
|
|
@@ -64,7 +60,6 @@ Using pnpm:
|
|
|
64
60
|
pnpm add @todovue/tv-search
|
|
65
61
|
```
|
|
66
62
|
|
|
67
|
-
---
|
|
68
63
|
## Quick Start (SPA)
|
|
69
64
|
Global registration (main.js / main.ts):
|
|
70
65
|
```js
|
|
@@ -124,8 +119,7 @@ function handleSearch(query) {
|
|
|
124
119
|
</template>
|
|
125
120
|
```
|
|
126
121
|
|
|
127
|
-
|
|
128
|
-
## Nuxt 3 / SSR Usage
|
|
122
|
+
## Nuxt 4 / SSR Usage
|
|
129
123
|
Create a plugin file: `plugins/tv-search.client.ts` (client-only is recommended since it uses keyboard events):
|
|
130
124
|
```ts
|
|
131
125
|
// nuxt.config.ts
|
|
@@ -165,7 +159,6 @@ import { TvSearch } from '@todovue/tv-search'
|
|
|
165
159
|
</script>
|
|
166
160
|
```
|
|
167
161
|
|
|
168
|
-
---
|
|
169
162
|
## Component Registration Options
|
|
170
163
|
| Approach | When to use |
|
|
171
164
|
|------------------------------------------------------|----------------------------------------------------|
|
|
@@ -174,14 +167,15 @@ import { TvSearch } from '@todovue/tv-search'
|
|
|
174
167
|
| Local named import `import TvSearch from '...'` | Single page usage / code splitting |
|
|
175
168
|
| Nuxt plugin `.client.ts` | SSR apps with client-side interactions |
|
|
176
169
|
|
|
177
|
-
---
|
|
178
170
|
## Props
|
|
179
|
-
| Prop
|
|
180
|
-
|
|
181
|
-
| placeholder
|
|
182
|
-
| titleButton
|
|
183
|
-
| results
|
|
184
|
-
| customStyles
|
|
171
|
+
| Prop | Type | Default | Description | Required |
|
|
172
|
+
|---------------|--------|--------------------------|---------------------------------------------------------------------------------------|----------|
|
|
173
|
+
| placeholder | String | `""` | Placeholder text for the search input field | `true` |
|
|
174
|
+
| titleButton | String | `""` | Text displayed on the search button | `true` |
|
|
175
|
+
| results | Array | `[]` | Array of searchable items (see [Results Data Structure](#results-data-structure)) | `true` |
|
|
176
|
+
| customStyles | Object | `{}` | Custom color scheme for theming (see [Customization](#customization-styles--theming)) | `false` |
|
|
177
|
+
| searchKeys | Array | `['title']` | Array of keys in result objects to search against | `false` |
|
|
178
|
+
| noResultsText | String | `"No results found for"` | Text to display when no results match the query | `false` |
|
|
185
179
|
|
|
186
180
|
### customStyles Object
|
|
187
181
|
Customize the appearance by passing a `customStyles` object with any of these properties:
|
|
@@ -193,11 +187,10 @@ Customize the appearance by passing a `customStyles` object with any of these pr
|
|
|
193
187
|
| bgButton | String | `"#EF233C"` | Background color of the search button |
|
|
194
188
|
| colorButton | String | `"#F4FAFF"` | Text color of the search button |
|
|
195
189
|
|
|
196
|
-
---
|
|
197
190
|
## Events
|
|
198
|
-
| Event | Payload Type
|
|
199
|
-
|
|
200
|
-
| search | String
|
|
191
|
+
| Event | Payload Type | Description |
|
|
192
|
+
|--------|-----------------|-------------------------------------------------------------------------------------------------|
|
|
193
|
+
| search | String / Object | Emitted when search is triggered (Enter key or button click). Returns the trimmed search query. |
|
|
201
194
|
|
|
202
195
|
Example:
|
|
203
196
|
```vue
|
|
@@ -216,7 +209,33 @@ function handleSearch(query) {
|
|
|
216
209
|
</script>
|
|
217
210
|
```
|
|
218
211
|
|
|
219
|
-
|
|
212
|
+
## Slots
|
|
213
|
+
| Slot Name | Props | Description |
|
|
214
|
+
|------------|--------------|---------------------------------------------------|
|
|
215
|
+
| item | `{ result }` | Custom rendering for each result item in the list |
|
|
216
|
+
| no-results | - | Custom content when no results are found |
|
|
217
|
+
|
|
218
|
+
### Custom Slot Example
|
|
219
|
+
```vue
|
|
220
|
+
<tv-search
|
|
221
|
+
:results="items"
|
|
222
|
+
:searchKeys="['title', 'description']"
|
|
223
|
+
>
|
|
224
|
+
<template #item="{ result }">
|
|
225
|
+
<div class="my-custom-item">
|
|
226
|
+
<h3>{{ result.title }}</h3>
|
|
227
|
+
<p>{{ result.description }}</p>
|
|
228
|
+
</div>
|
|
229
|
+
</template>
|
|
230
|
+
|
|
231
|
+
<template #no-results>
|
|
232
|
+
<div class="empty-state">
|
|
233
|
+
<p>No matches found.</p>
|
|
234
|
+
</div>
|
|
235
|
+
</template>
|
|
236
|
+
</tv-search>
|
|
237
|
+
```
|
|
238
|
+
|
|
220
239
|
## Keyboard Shortcuts
|
|
221
240
|
| Shortcut | Action |
|
|
222
241
|
|------------------------|-----------------------------------|
|
|
@@ -225,7 +244,6 @@ function handleSearch(query) {
|
|
|
225
244
|
| `Enter` | Execute search with current input |
|
|
226
245
|
| Click outside modal | Close the search modal |
|
|
227
246
|
|
|
228
|
-
---
|
|
229
247
|
## Customization (Styles / Theming)
|
|
230
248
|
You can override the default color scheme by passing a `customStyles` object:
|
|
231
249
|
|
|
@@ -288,7 +306,6 @@ const brandTheme = {
|
|
|
288
306
|
}
|
|
289
307
|
```
|
|
290
308
|
|
|
291
|
-
---
|
|
292
309
|
## Results Data Structure
|
|
293
310
|
The `results` prop expects an array of objects with the following structure:
|
|
294
311
|
|
|
@@ -324,7 +341,6 @@ const results = [
|
|
|
324
341
|
|
|
325
342
|
**Note**: The component currently filters results based on the `title` property matching the user input (case-insensitive). You can handle the `@search` event to implement custom search logic or navigation.
|
|
326
343
|
|
|
327
|
-
---
|
|
328
344
|
## Accessibility
|
|
329
345
|
- **Keyboard navigation**: Full support for `Ctrl+K`/`Cmd+K` to open, `Esc` to close, and `Enter` to search
|
|
330
346
|
- **Focus management**: Input automatically receives focus when modal opens and is selected for immediate typing
|
|
@@ -337,7 +353,6 @@ const results = [
|
|
|
337
353
|
- Ensure sufficient color contrast when using `customStyles`
|
|
338
354
|
- Consider adding `aria-label` attributes for screen reader support in future versions
|
|
339
355
|
|
|
340
|
-
---
|
|
341
356
|
## SSR Notes
|
|
342
357
|
- **Safe for SSR**: No direct DOM access (`window` / `document`) during module initialization
|
|
343
358
|
- **Event listeners**: Keyboard event listeners are registered in `onMounted` and cleaned up in `onBeforeUnmount`
|
|
@@ -347,25 +362,6 @@ const results = [
|
|
|
347
362
|
- For Vue/Vite SPA: `import '@todovue/tv-search/style.css'` in `main.ts`
|
|
348
363
|
- For Nuxt 3/4: Add `'@todovue/tv-search/style.css'` to the `css` array in `nuxt.config.ts`
|
|
349
364
|
|
|
350
|
-
---
|
|
351
|
-
## Roadmap
|
|
352
|
-
| Feature | Status |
|
|
353
|
-
|------------------------------------------|-------------|
|
|
354
|
-
| Support for result `url` navigation | Planned |
|
|
355
|
-
| Display `description` in results | Planned |
|
|
356
|
-
| Customizable search icon | Planned |
|
|
357
|
-
| Multiple keyboard shortcut options | Considering |
|
|
358
|
-
| Result categorization / grouping | Considering |
|
|
359
|
-
| Highlight matching text in results | Considering |
|
|
360
|
-
| Recent searches history | Considering |
|
|
361
|
-
| Loading state indicator | Considering |
|
|
362
|
-
| Pagination for large result sets | Considering |
|
|
363
|
-
| Fuzzy search / advanced filtering | Considering |
|
|
364
|
-
| Theming via CSS variables | Considering |
|
|
365
|
-
| TypeScript type definitions improvement | Planned |
|
|
366
|
-
| ARIA attributes enhancement | Planned |
|
|
367
|
-
|
|
368
|
-
---
|
|
369
365
|
## Development
|
|
370
366
|
Clone the repository and install dependencies:
|
|
371
367
|
```bash
|
|
@@ -391,7 +387,6 @@ yarn build:demo
|
|
|
391
387
|
|
|
392
388
|
The demo is served from Vite using `index.html` + `src/demo` examples.
|
|
393
389
|
|
|
394
|
-
---
|
|
395
390
|
## Contributing
|
|
396
391
|
Contributions are welcome! Please read our [Contributing Guidelines](https://github.com/TODOvue/tv-search/blob/main/CONTRIBUTING.md) and [Code of Conduct](https://github.com/TODOvue/tv-search/blob/main/CODE_OF_CONDUCT.md) before submitting PRs.
|
|
397
392
|
|
|
@@ -402,14 +397,11 @@ Contributions are welcome! Please read our [Contributing Guidelines](https://git
|
|
|
402
397
|
4. Push to the branch (`git push origin feature/amazing-feature`)
|
|
403
398
|
5. Open a Pull Request
|
|
404
399
|
|
|
405
|
-
---
|
|
406
400
|
## Changelog
|
|
407
401
|
See [CHANGELOG.md](https://github.com/TODOvue/tv-search/blob/main/CHANGELOG.md) for release history and version changes.
|
|
408
402
|
|
|
409
|
-
---
|
|
410
403
|
## License
|
|
411
404
|
[MIT](https://github.com/TODOvue/tv-search/blob/main/LICENSE) © TODOvue
|
|
412
405
|
|
|
413
|
-
---
|
|
414
406
|
### Attributions
|
|
415
407
|
Crafted for the TODOvue component ecosystem
|
package/dist/tv-search.cjs.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),C=require("@todovue/tv-button"),w=`<svg class="tv-icon-svg" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 129 129" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 129 129">
|
|
2
2
|
<g>
|
|
3
3
|
<path d="M51.6,96.7c11,0,21-3.9,28.8-10.5l35,35c0.8,0.8,1.8,1.2,2.9,1.2s2.1-0.4,2.9-1.2c1.6-1.6,1.6-4.2,0-5.8l-35-35
|
|
4
4
|
c6.5-7.8,10.5-17.9,10.5-28.8c0-24.9-20.2-45.1-45.1-45.1C26.8,6.5,6.5,26.8,6.5,51.6C6.5,76.5,26.8,96.7,51.6,96.7z
|
|
@@ -6,4 +6,4 @@
|
|
|
6
6
|
fill="currentColor"/>
|
|
7
7
|
</g>
|
|
8
8
|
</svg>
|
|
9
|
-
`,
|
|
9
|
+
`,_=(r,v)=>{const s=e.ref(""),u=e.ref(!1),c=e.ref(),y=Object.assign({"../assets/icons/search.svg":w}),h=e.computed(()=>y["../assets/icons/search.svg"]||""),i=()=>{l(!0),d()},m=(t=null)=>{if(t&&(t instanceof Event||t?.target&&t?.preventDefault)&&(t=null),!(!s.value.trim()&&!t)){if(t){v("search",t),l(!1),s.value="";return}v("search",s.value.trim()),l(!1),s.value=""}},a=()=>{l(!1)},l=t=>{u.value=t},d=()=>{e.nextTick(()=>{c.value?.select()})},p=t=>{(t.ctrlKey||t.metaKey)&&t.key==="k"&&(t.preventDefault(),i()),t.key==="Escape"&&u.value&&a()};e.onMounted(()=>{document.addEventListener("keydown",p)}),e.onBeforeUnmount(()=>{document.removeEventListener("keydown",p)});const g=e.computed(()=>{if(s.value.length<1)return[];const t=r.searchKeys||["title"],k=s.value.toLowerCase();return r.results?.filter(S=>t.some(B=>{const b=S[B];return b&&String(b).toLowerCase().includes(k)}))||[]}),o=t=>{if(!t||t[0]!=="#")return t;const k=parseInt(t.slice(1,3),16),S=parseInt(t.slice(3,5),16),B=parseInt(t.slice(5,7),16);return`${k}, ${S}, ${B}`},n=e.computed(()=>{const{customStyles:t}=r;return t?{bgBody:{backgroundColor:`rgba(${o(t.bgBody)}, 0.9)`},bgInput:{backgroundColor:t.bgInput,boxShadow:`0 0 15px 0 ${t.bgInput}`},customButton:{backgroundColor:t.bgButton||"#ef233c",color:t.colorButton||"#f4faff"}}:{}});return{inputValue:s,inputSearch:c,openedModal:u,closeModal:a,openModal:i,search:m,filterResults:g,custom:n,iconContent:h}},E={class:"tv-search"},M=["innerHTML"],T={class:"tv-search-modal-content-input"},V=["placeholder"],N={key:0,class:"tv-search-results"},$=["onClick"],x={class:"tv-search-results-title"},I={key:1,class:"tv-search-no-results"},D={__name:"TvSearch",props:{placeholder:{type:String,default:""},titleButton:{type:String,default:""},results:{type:Array,default:()=>[]},customStyles:{type:Object,default:()=>({})},searchKeys:{type:Array,default:()=>["title"]},noResultsText:{type:String,default:"No results found for"}},emits:["search"],setup(r,{emit:v}){const s=r,u=v,{inputValue:c,inputSearch:y,openedModal:h,closeModal:i,openModal:m,search:a,filterResults:l,custom:d,iconContent:p}=_(s,u);return(g,o)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[e.createElementVNode("div",E,[e.createElementVNode("i",{class:"tv-cursor-pointer tv-search-icon",innerHTML:e.unref(p),onClick:o[0]||(o[0]=(...n)=>e.unref(m)&&e.unref(m)(...n))},null,8,M)]),e.unref(h)?(e.openBlock(),e.createElementBlock("div",{key:0,class:"tv-search-modal",onClick:o[4]||(o[4]=e.withModifiers((...n)=>e.unref(i)&&e.unref(i)(...n),["self"])),style:e.normalizeStyle(e.unref(d).bgBody)},[e.createElementVNode("div",{class:"tv-search-modal-content",style:e.normalizeStyle(e.unref(d).bgInput)},[e.createElementVNode("div",T,[e.withDirectives(e.createElementVNode("input",{type:"text","onUpdate:modelValue":o[1]||(o[1]=n=>e.isRef(c)?c.value=n:null),onKeyup:o[2]||(o[2]=e.withKeys(n=>e.unref(a)(),["enter"])),placeholder:r.placeholder,class:e.normalizeClass(["tv-search-input",{"tv-radius-none-bl":e.unref(l).length>=1}]),ref_key:"inputSearch",ref:y},null,42,V),[[e.vModelText,e.unref(c)]]),e.createVNode(e.unref(C.TvButton),{runded:"",icon:"search","icon-position":"left",onClick:o[3]||(o[3]=n=>e.unref(a)()),class:e.normalizeClass({"tv-radius-none-br":e.unref(l).length>=1}),customStyle:e.unref(d).customButton},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(r.titleButton),1)]),_:1},8,["class","customStyle"])]),e.unref(l).length>=1?(e.openBlock(),e.createElementBlock("div",N,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(l),n=>(e.openBlock(),e.createElementBlock("div",{key:n.id,onClick:t=>e.unref(a)(n),class:"tv-cursor-pointer"},[e.renderSlot(g.$slots,"item",{result:n},()=>[e.createElementVNode("p",x,e.toDisplayString(n.title),1)])],8,$))),128))])):e.unref(c)?(e.openBlock(),e.createElementBlock("div",I,[e.renderSlot(g.$slots,"no-results",{},()=>[e.createElementVNode("p",null,e.toDisplayString(r.noResultsText)+' "'+e.toDisplayString(e.unref(c))+'"',1)])])):e.createCommentVNode("",!0)],4)],4)):e.createCommentVNode("",!0)],64))}},f=D;f.install=r=>{r.component("TvSearch",f)};const K={install:f.install};exports.TvSearch=f;exports.TvSearchPlugin=K;exports.default=f;
|