Skip to content

Commit fee42ea

Browse files
devstacklimiteddevstacklimited
authored
Read me updated
1 parent 65dccd7 commit fee42ea

File tree

1 file changed

+63
-202
lines changed

1 file changed

+63
-202
lines changed

‎README.md‎

Lines changed: 63 additions & 202 deletions
Original file line numberDiff line numberDiff line change
@@ -1,123 +1,40 @@
1-
<!doctype html>
2-
<html lang="en">
3-
<head>
4-
<meta charset="utf-8" />
5-
<meta name="viewport" content="width=device-width,initial-scale=1" />
6-
<title>DropdownTextField — README</title>
7-
<style>
8-
:root{
9-
--bg:#ffffff;
10-
--text:#0b1220;
11-
--muted:#6b7280;
12-
--accent:#1f6feb;
13-
--card:#f8fafc;
14-
--border:#e6e9ee;
15-
--mono:#0b1220;
16-
font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
17-
}
18-
body{
19-
margin:0;
20-
background:var(--bg);
21-
color:var(--text);
22-
line-height:1.6;
23-
padding:32px;
24-
}
25-
.container{
26-
max-width:960px;
27-
margin:0 auto;
28-
}
29-
header h1{
30-
margin:0 0 8px 0;
31-
font-size:28px;
32-
letter-spacing:-0.3px;
33-
}
34-
header p.lead{
35-
margin:0 0 20px 0;
36-
color:var(--muted);
37-
}
38-
.card{
39-
background:var(--card);
40-
border:1px solid var(--border);
41-
padding:18px;
42-
border-radius:8px;
43-
margin-bottom:20px;
44-
}
45-
h2{
46-
margin:18px 0 8px 0;
47-
font-size:20px;
48-
}
49-
pre{
50-
background:#0b1220;
51-
color:#e6eef8;
52-
padding:14px;
53-
border-radius:6px;
54-
overflow:auto;
55-
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", "Courier New", monospace;
56-
font-size:13px;
57-
}
58-
code{font-family: inherit;}
59-
table{width:100%; border-collapse:collapse; margin-top:8px;}
60-
th, td{padding:8px 10px; border:1px solid var(--border); text-align:left;}
61-
th{background:#f1f5f9;}
62-
footer{color:var(--muted); font-size:13px; margin-top:30px; text-align:center;}
63-
.small{font-size:13px; color:var(--muted);}
64-
.btn{
65-
display:inline-block;
66-
padding:8px 12px;
67-
background:var(--accent);
68-
color:#fff;
69-
border-radius:6px;
70-
text-decoration:none;
71-
font-weight:600;
72-
margin-top:6px;
73-
}
74-
@media (max-width:640px){
75-
body{padding:16px;}
76-
}
77-
</style>
78-
</head>
79-
<body>
80-
<div class="container">
81-
<header>
82-
<h1>DropdownTextField</h1>
83-
<p class="lead">A lightweight, fully customizable searchable dropdown component for SwiftUI.</p>
84-
<p class="small">© 2025 Usama Javed. All rights reserved.</p>
85-
</header>
1+
# DropdownTextField
2+
© 2025 Usama Javed. All rights reserved.
863

87-
<section class="card">
88-
<h2>Overview</h2>
89-
<p>
90-
<strong>DropdownTextField</strong> provides <code>SearchableMenu</code>, a SwiftUI view that implements a searchable dropdown list.
91-
It supports bound state, dynamic filtering, an optional "Add New" action, and flexible appearance options.
92-
</p>
93-
</section>
4+
## Overview
5+
DropdownTextField is a lightweight SwiftUI component that provides a searchable dropdown text field with customizable design and behavior.
6+
It allows users to type, filter, and select from a list of options — similar to a searchable picker or auto-complete field.
947

95-
<section class="card">
96-
<h2>Installation</h2>
97-
<p><strong>Swift Package Manager (SPM)</strong></p>
98-
<ol>
99-
<li>In Xcode, open your project.</li>
100-
<li>Choose <em>File → Add Packages…</em></li>
101-
<li>Enter the repository URL (example):</li>
102-
</ol>
103-
<pre><code>https://github.com/usamajavedswl/DropdownTextField.git</code></pre>
104-
<p>Select the desired version and add the package to your target.</p>
105-
</section>
8+
### The library is designed to be:
9+
* Simple to integrate
10+
* Easy to customize (colors, fonts, sizes, etc.)
11+
* Flexible enough to fit any SwiftUI project
10612

107-
<section class="card">
108-
<h2>Basic Usage</h2>
109-
<p>Import the package and embed <code>SearchableMenu</code> in your SwiftUI view:</p>
13+
### Installation (Swift Package Manager)
14+
1. In Xcode, open your project.
15+
2. Go to File → Add Packages...
16+
3. Enter the repository URL:
11017

111-
<pre><code>import SwiftUI
112-
import DropdownTextField
18+
https://github.com/usamajavedswl/DropdownTextField.git
19+
20+
4. Choose the latest version and add it to your target.
21+
Then simply import it:
11322

23+
```import DropdownTextField```
24+
25+
### Usage Example
26+
Here’s how to use SearchableMenu inside your SwiftUI view:
27+
```
28+
import SwiftUI
29+
import DropdownTextField
30+
11431
struct ContentView: View {
11532
@State private var searchText = ""
11633
@State private var isDropdownVisible = false
11734
private let options = ["Apple", "Mango", "Banana", "Cherry", "Orange"]
11835
11936
var body: some View {
120-
VStack(spacing: 20) {
37+
VStack(spacing: 20){
12138
Text("Select a Fruit")
12239
.font(.headline)
12340
@@ -126,105 +43,49 @@ struct ContentView: View {
12643
isDropdownVisible: $isDropdownVisible,
12744
options: options,
12845
placeholder: "Search or select fruit"
129-
) {
130-
print("Option tapped: \(searchText)")
46+
){
47+
print("Dropdown tapped")
13148
}
13249
.padding(.horizontal, 16)
13350
}
13451
.padding()
13552
}
136-
}</code></pre>
137-
</section>
138-
139-
<section class="card">
140-
<h2>Customization</h2>
141-
<p>The initializer accepts several parameters for appearance and behavior. Most parameters have sensible defaults.</p>
142-
143-
<table>
144-
<thead>
145-
<tr><th>Parameter</th><th>Type</th><th>Description</th></tr>
146-
</thead>
147-
<tbody>
148-
<tr><td><code>searchText</code></td><td><code>Binding&lt;String&gt;</code></td><td>Bound text for the search input.</td></tr>
149-
<tr><td><code>isDropdownVisible</code></td><td><code>Binding&lt;Bool&gt;</code></td><td>Controls dropdown list visibility.</td></tr>
150-
<tr><td><code>options</code></td><td><code>[String]</code></td><td>Source list of selectable values.</td></tr>
151-
<tr><td><code>placeholder</code></td><td><code>String</code></td><td>Placeholder text when input is empty.</td></tr>
152-
<tr><td><code>addNew</code></td><td><code>Bool</code></td><td>Allow creating a new item when not found.</td></tr>
153-
<tr><td><code>onTap</code></td><td><code>() -&gt; Void</code></td><td>Called when the dropdown field becomes active.</td></tr>
154-
<tr><td><code>textColor</code></td><td><code>Color</code></td><td>Text color for input and items.</td></tr>
155-
<tr><td><code>placeholderColor</code></td><td><code>Color</code></td><td>Color used for placeholder text.</td></tr>
156-
<tr><td><code>accentColor</code></td><td><code>Color</code></td><td>Accent color for highlights and icon.</td></tr>
157-
<tr><td><code>successColor</code></td><td><code>Color</code></td><td>Color used to indicate selection success.</td></tr>
158-
<tr><td><code>destructiveColor</code></td><td><code>Color</code></td><td>Optional color for destructive actions.</td></tr>
159-
<tr><td><code>borderColor</code></td><td><code>Color?</code></td><td>Custom border color; computed by component if <code>nil</code>.</td></tr>
160-
<tr><td><code>font</code></td><td><code>Font</code></td><td>Font used for input and option rows.</td></tr>
161-
<tr><td><code>height</code></td><td><code>CGFloat</code></td><td>Height of the main input field.</td></tr>
162-
<tr><td><code>cornerRadius</code></td><td><code>CGFloat</code></td><td>Corner radius for the field background.</td></tr>
163-
<tr><td><code>dropdownIcon</code></td><td><code>Image</code></td><td>Custom icon for the dropdown indicator.</td></tr>
164-
<tr><td><code>noMatchText</code></td><td><code>String</code></td><td>Text shown when no results are found.</td></tr>
165-
<tr><td><code>addNewTextFormat</code></td><td><code>String</code></td><td>Format string used for the Add New button (use <code>%@</code> for the typed text).</td></tr>
166-
</tbody>
167-
</table>
168-
169-
<p>Example with custom styling:</p>
170-
171-
<pre><code>SearchableMenu(
172-
searchText: $searchText,
173-
isDropdownVisible: $isDropdownVisible,
174-
options: ["Swift", "Kotlin", "Dart", "Java"],
175-
placeholder: "Select language",
176-
addNew: true,
177-
onTap: {
178-
print("Dropdown opened")
179-
},
180-
textColor: .black,
181-
placeholderColor: .gray,
182-
accentColor: .blue,
183-
successColor: .green,
184-
borderColor: .blue,
185-
font: .system(size: 14, weight: .medium),
186-
height: 44,
187-
cornerRadius: 10,
188-
dropdownIcon: Image(systemName: "chevron.down"),
189-
noMatchText: "No results found",
190-
addNewTextFormat: "Add \"%@\""
191-
)</code></pre>
192-
</section>
53+
}
54+
```
19355

194-
<section class="card">
195-
<h2>Filtering Logic</h2>
196-
<p>The built-in filtering prioritizes results in this order:</p>
197-
<ol>
198-
<li>Exact match</li>
199-
<li>Prefix match</li>
200-
<li>Contains match</li>
201-
</ol>
202-
<p>This ordering surfaces the most relevant items first.</p>
203-
</section>
56+
### Full Initializer
57+
For customization, you can use all available parameters:
20458

205-
<section class="card">
206-
<h2>Notes on Fonts and Resources</h2>
207-
<p>
208-
If you bundle custom fonts inside the Swift package, ensure fonts are placed under the package resource folder:
209-
</p>
210-
<pre><code>Sources/DropdownTextField/Resources/Fonts/YourFont.ttf</code></pre>
211-
<p>
212-
Register fonts programmatically using <code>CTFontManagerRegisterFontsForURL</code> from your package so <code>Font.custom(...)</code> works in consumer apps.
213-
</p>
214-
</section>
59+
```
60+
SearchableMenu(
61+
searchText: $searchText,
62+
isDropdownVisible: $isDropdownVisible,
63+
options: ["Swift", "Kotlin", "Dart", "Java"],
64+
placeholder: "Select language",
65+
addNew: true,
66+
textColor: .black,
67+
placeholderColor: .gray,
68+
accentColor: .blue,
69+
successColor: .green,
70+
destructiveColor: .red,
71+
borderColor: .gray,
72+
font: .system(size: 14, weight: .medium),
73+
height: 48,
74+
cornerRadius: 10,
75+
dropdownIcon: Image(systemName: "chevron.down"),
76+
noMatchText: "No results found",
77+
addNewTextFormat: "Add \"%@\""
78+
){
79+
print("Dropdown opened")
80+
}
81+
```
21582

216-
<section class="card">
217-
<h2>License & Copyright</h2>
218-
<p>© 2025 Usama Javed. All rights reserved.</p>
219-
<p class="small">
220-
This repository and its contents are maintained by Usama Javed. If you wish to use this package in other projects,
221-
please credit the original source. For open-source licensing, consider adding an appropriate LICENSE file such as MIT.
222-
</p>
223-
</section>
83+
### Notes
84+
*onTap* is called when the dropdown field becomes active.
85+
*addNew* enables the option to add new items that don’t exist in the list.
86+
The view automatically filters options based on the typed text.
22487

225-
<footer>
226-
<p class="small">For issues, suggestions, or contributions, please open an issue or a pull request in the repository.</p>
227-
</footer>
228-
</div>
229-
</body>
230-
</html>
88+
## License
89+
© 2025 Usama Javed. All rights reserved.
90+
This Swift package is owned and maintained by Usama Javed.
91+
All rights reserved. Redistribution without permission is prohibited.

0 commit comments

Comments
 (0)