@phila/phila-ui-search 1.0.3 → 1.0.5-beta.2

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.
Files changed (13) hide show
  1. package/README.md +40 -18
  2. package/dist/Search.vue.d.ts +8 -0
  3. package/dist/Search.vue.d.ts.map +1 -0
  4. package/dist/index.css +1 -1
  5. package/dist/index.d.ts +6 -2
  6. package/dist/index.d.ts.map +1 -0
  7. package/dist/index.js +1 -557
  8. package/dist/index.mjs +246 -3628
  9. package/package.json +9 -5
  10. package/dist/search/src/Search.vue.d.ts +0 -4
  11. package/dist/search/src/Search.vue.d.ts.map +0 -1
  12. package/dist/search/src/index.d.ts +0 -5
  13. package/dist/search/src/index.d.ts.map +0 -1
package/README.md CHANGED
@@ -1,48 +1,70 @@
1
- # Search Component
1
+ # Phila Search Component
2
2
 
3
- A simple, customizable Vue 3. Search component built with TypeScript and Vite.
4
- a search bar
3
+ 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.
5
4
 
6
5
  ## Features
7
6
 
7
+ - 🔍 Built-in search icon button using Button component
8
+ - 📝 TextField integration with custom styling
8
9
  - 🎯 TypeScript support with full type definitions
10
+ - 💅 Design system integration: Uses Core package styles
9
11
 
10
12
  ## Installation
11
13
 
12
14
  ```bash
13
- npm install @phila/phila-ui-search
15
+ npm install @phila/phila-ui-search @phila/phila-ui-core @phila/phila-ui-text-field @phila/phila-ui-button
14
16
  # or
15
- yarn add @phila/phila-ui-search
16
- # or
17
- pnpm add @phila/phila-ui-search
17
+ pnpm add @phila/phila-ui-search @phila/phila-ui-core @phila/phila-ui-text-field @phila/phila-ui-button
18
+ ```
19
+
20
+ Import core styles in your main entry file (e.g., `main.js|ts`):
21
+
22
+ ```typescript
23
+ import "@phila/phila-ui-core/styles/template-light.css";
18
24
  ```
19
25
 
20
26
  ## Usage
21
27
 
28
+ ### Basic Usage
29
+
22
30
  ```vue
23
31
  <script setup lang="ts">
24
32
  import { Search } from "@phila/phila-ui-search";
25
33
  </script>
26
- <template>...Add basic component template here...</template>
34
+
35
+ <template>
36
+ <Search />
37
+ </template>
27
38
  ```
28
39
 
29
- ## Props
40
+ ### With Custom Class
30
41
 
31
- | Prop | Type | Default | Description |
32
- | ---- | ---- | ------- | ----------- |
42
+ ```vue
43
+ <script setup lang="ts">
44
+ import { Search } from "@phila/phila-ui-search";
45
+ </script>
46
+
47
+ <template>
48
+ <Search class-name="custom-search" />
49
+ </template>
50
+ ```
51
+
52
+ ## Props
33
53
 
34
- | ...Add props here...
54
+ | Prop | Type | Default | Description |
55
+ | ----------- | -------- | ------- | ---------------------- |
56
+ | `className` | `string` | `""` | Additional CSS classes |
35
57
 
36
- ## Events
58
+ Note: The Search component uses a TextField with a fixed placeholder "Search by title or keyword" and includes a large, icon-only search Button with a blue background.
37
59
 
38
- | Event | Payload | Description |
39
- | ----- | ------- | ----------- |
60
+ ## Component Structure
40
61
 
41
- | ...Add events here...
62
+ The Search component is composed of:
42
63
 
43
- ## Examples
64
+ - **TextField**: For text input with built-in clear functionality
65
+ - **Button**: Icon-only button with FontAwesome search icon
44
66
 
45
- ...Add examples here...
67
+ Both sub-components use the `@phila/phila-ui-*` packages for consistency with the design system.
46
68
 
47
69
  ## Development
48
70
 
package/dist/Search.vue.d.ts ADDED
@@ -0,0 +1,8 @@
1
+ import { SearchProps } from './index';
2
+ declare const _default: import('vue').DefineComponent<SearchProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
3
+ click: () => any;
4
+ }, string, import('vue').PublicProps, Readonly<SearchProps> & Readonly<{
5
+ onClick?: (() => any) | undefined;
6
+ }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
7
+ export default _default;
8
+ //# sourceMappingURL=Search.vue.d.ts.map
package/dist/Search.vue.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Search.vue.d.ts","sourceRoot":"","sources":["../src/Search.vue"],"names":[],"mappings":"AA0EA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;;;;;;AAkH3C,wBAQG"}
package/dist/index.css CHANGED
@@ -1 +1 @@
1
- .x-button{color:var(--Schemes-On-Surface)!important}.phila-input--required .phila-label:after{content:"*";padding-left:.125rem}.phila-input{display:flex;flex-direction:column}.phila-input:focus-within .phila-label{color:var(--Schemes-Primary)}.phila-input .phila-label{color:var(--Schemes-On-Surface)}.phila-input .phila-label--disabled{color:var(--Schemes-Surface-Container-High)}.phila-input .phila-text-field{box-sizing:border-box;border:var(--scale-xxsmall) solid var(--Schemes-Surface-Container-Low);border-bottom:var(--scale-xxsmall) solid var(--Schemes-Outline);background:var(--Schemes-Surface-Container-Low);display:flex;width:25rem;padding:0 var(--scale-small) 0 var(--scale-small);flex-direction:column;align-items:center;gap:.625rem;flex:1 0 0}.phila-input .phila-text-field:focus-within{background-color:var(--Schemes-Surface-Container-Lowest);border-style:solid;border-width:2px;border-color:var(--Schemes-Primary)}.phila-input .phila-text-field--filled{border-color:var(--Schemes-On-Surface);border-width:1px;border-style:solid;background-color:var(--Schemes-Surface-Container-Lowest)}.phila-input .phila-text-field--filled .state-layer{padding:calc(var(--scale-xsmall, .25rem) + 1px) calc(var(--scale-small, .5rem) + 1px)}.phila-input .state-layer{display:flex;padding:var(--scale-xsmall, .25rem) var(--scale-small, .5rem);align-items:center;gap:.5rem;flex:1 0 0;align-self:stretch}.phila-input .state-layer:focus-within{padding:var(--scale-xsmall, .25rem) var(--scale-small, .5rem)}.phila-input .content{display:flex;height:3rem;padding:var(--scale-xsmall, .25rem) 0;flex-direction:column;justify-content:center;align-items:flex-start;flex:1 0 0}.phila-input .input-text-container{display:flex;align-items:center;gap:.125rem;align-self:stretch;width:100%}.phila-input .phila-text-field-input{width:100%;background-color:inherit;border:none;color:var(--Schemes-On-Surface, #000)}.phila-input .phila-text-field-input:focus{outline:none}.phila-input .phila-text-field-input:focus-visible{outline:none}.phila-input .phila-text-field-input::placeholder{color:var(--Schemes-Surface-Container-Highest);font-family:var(--Static-Body-Large-Font);font-size:var(--Static-Body-Large-Size);font-style:normal;font-weight:400;line-height:var(--Static-Body-Large-Line-Height);letter-spacing:var(--Static-Body-Large-Tracking)}.phila-input .phila-supporting-text--disabled{color:var(--Schemes-Surface-Container-High)}.phila-input .phila-supporting-text{color:var(--Schemes-On-Surface)}.phila-input .phila-error-text{color:var(--Schemes-Error-Container-2)}.phila-input--error:focus-within .phila-label{color:var(--Schemes-Error-Container-2)}.phila-input--error .phila-label{color:var(--Schemes-Error-Container-2)}.phila-input--error .phila-text-field{border-color:var(--Schemes-Error-Container-2);border-width:2px;border-style:solid;background-color:var(--Schemes-Surface-Container-Lowest)}.phila-input--error .phila-text-field:focus-within{border-color:var(--Schemes-Error-Container-2);border-width:2px;border-style:solid;background-color:var(--Schemes-Surface-Container-Lowest)}.phila-input--error .state-layer{padding:calc(var(--scale-xsmall, .25rem) - 1px) calc(var(--scale-small, .5rem) - 1px)!important}.phila-input--disabled{cursor:not-allowed}.phila-input--disabled .phila-label{cursor:not-allowed;color:var(--Schemes-Surface-Container-High)}.phila-input--disabled .phila-text-field{cursor:not-allowed;color:var(--Schemes-Surface-Container-High);border-color:var(--Schemes-Surface-Container-High);border-width:1px;border-style:solid;background-color:var(--Schemes-Surface-Container-Lowest)}.phila-input--disabled .phila-supporting-text{color:var(--Schemes-Surface-Container-High)}.search{display:flex;width:48.8125rem;align-items:center}.phila-text-field--search{border-color:var(--Schemes-Primary)!important;border-width:2px!important;border-style:solid!important;background-color:var(--Schemes-Surface-Container-Lowest)!important}.phila-text-field--search .state-layer{padding:var(--scale-xsmall, .25rem) var(--scale-small, .5rem)!important;padding-top:0!important;padding-bottom:0!important}.phila-text-field--search .state-layer:focus-within{padding-top:0!important;padding-bottom:0!important}.phila-button--search{background:var(--Schemes-Primary)!important}
1
+ .x-button{color:var(--Schemes-On-Surface)!important}.phila-input--required .phila-label:after{content:"*";padding-left:.125rem}.phila-input{display:flex;flex-direction:column}.phila-input:focus-within .phila-label{color:var(--Schemes-Primary)}.phila-input .phila-label{color:var(--Schemes-On-Surface)}.phila-input .phila-label--disabled{color:var(--Schemes-Surface-Container-High)}.phila-input .phila-text-field{box-sizing:border-box;border:var(--scale-xxsmall) solid var(--Schemes-Surface-Container-Low);border-bottom:var(--scale-xxsmall) solid var(--Schemes-Outline);background:var(--Schemes-Surface-Container-Low);display:flex;width:25rem;padding:0 var(--scale-small) 0 var(--scale-small);flex-direction:column;align-items:center;gap:.625rem;flex:1 0 0}.phila-input .phila-text-field:focus-within{background-color:var(--Schemes-Surface-Container-Lowest);border-style:solid;border-width:2px;border-color:var(--Schemes-Primary)}.phila-input .phila-text-field--filled{border-color:var(--Schemes-On-Surface);border-width:1px;border-style:solid;background-color:var(--Schemes-Surface-Container-Lowest)}.phila-input .phila-text-field--filled .state-layer{padding:calc(var(--scale-xsmall, .25rem) + 1px) calc(var(--scale-small, .5rem) + 1px)}.phila-input .state-layer{display:flex;padding:var(--scale-xsmall, .25rem) var(--scale-small, .5rem);align-items:center;gap:.5rem;flex:1 0 0;align-self:stretch}.phila-input .state-layer:focus-within{padding:var(--scale-xsmall, .25rem) var(--scale-small, .5rem)}.phila-input .content{display:flex;height:3rem;padding:var(--scale-xsmall, .25rem) 0;flex-direction:column;justify-content:center;align-items:flex-start;flex:1 0 0}.phila-input .input-text-container{display:flex;align-items:center;gap:.125rem;align-self:stretch;width:100%}.phila-input .phila-text-field-input{width:100%;background-color:inherit;border:none;color:var(--Schemes-On-Surface, #000)}.phila-input .phila-text-field-input:focus{outline:none}.phila-input .phila-text-field-input:focus-visible{outline:none}.phila-input .phila-text-field-input::placeholder{color:var(--Schemes-Surface-Container-Highest);font-family:var(--Static-Body-Large-Font);font-size:var(--Static-Body-Large-Size);font-style:normal;font-weight:400;line-height:var(--Static-Body-Large-Line-Height);letter-spacing:var(--Static-Body-Large-Tracking)}.phila-input .phila-supporting-text--disabled{color:var(--Schemes-Surface-Container-High)}.phila-input .phila-supporting-text{color:var(--Schemes-On-Surface)}.phila-input .phila-error-text{color:var(--Schemes-Error-Container);display:flex;align-items:center}.phila-input--error:focus-within .phila-label{color:var(--Schemes-Error-Container)}.phila-input--error .phila-label{color:var(--Schemes-Error-Container)}.phila-input--error .phila-text-field{border-color:var(--Schemes-Error-Container);border-width:2px;border-style:solid;background-color:var(--Schemes-Surface-Container-Lowest)}.phila-input--error .phila-text-field:focus-within{border-color:var(--Schemes-Error-Container);border-width:2px;border-style:solid;background-color:var(--Schemes-Surface-Container-Lowest)}.phila-input--error .state-layer{padding:calc(var(--scale-xsmall, .25rem) - 1px) calc(var(--scale-small, .5rem) - 1px)!important}.phila-input--disabled{cursor:not-allowed}.phila-input--disabled .phila-label{cursor:not-allowed;color:var(--Schemes-Surface-Container-High)}.phila-input--disabled .phila-text-field{cursor:not-allowed;color:var(--Schemes-Surface-Container-High);border-color:var(--Schemes-Surface-Container-High);border-width:1px;border-style:solid;background-color:var(--Schemes-Surface-Container-Lowest)}.phila-input--disabled .phila-supporting-text{color:var(--Schemes-Surface-Container-High)}.search{display:flex;width:48.8125rem;align-items:center}.phila-text-field--search{border-color:var(--Schemes-Primary)!important;border-width:2px!important;border-style:solid!important;background-color:var(--Schemes-Surface-Container-Lowest)!important}.phila-text-field--search .state-layer{padding:var(--scale-xsmall, .25rem) var(--scale-small, .5rem)!important;padding-top:0!important;padding-bottom:0!important}.phila-text-field--search .state-layer:focus-within{padding-top:0!important;padding-bottom:0!important}.phila-button--search{background:var(--Schemes-Primary)!important}
package/dist/index.d.ts CHANGED
@@ -1,2 +1,6 @@
1
- export * from './search/src/index'
2
- export {}
1
+ import { BaseProps } from '@phila/phila-ui-core';
2
+ import { TextFieldProps } from '@phila/phila-ui-text-field';
3
+ export { default as Search } from './Search.vue';
4
+ export interface SearchProps extends /* @vue-ignore */ BaseProps, TextFieldProps {
5
+ }
6
+ //# sourceMappingURL=index.d.ts.map
package/dist/index.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,cAAc,CAAC;AAEjD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAIjE,MAAM,WAAW,WAAY,SAAQ,iBAAiB,CAAC,SAAS,EAAE,cAAc;CAE/E"}