Skip to content

Commit 65dccd7

Browse files
devstacklimiteddevstacklimited
authored
Added description and notes
1 parent 2d4c01b commit 65dccd7

File tree

1 file changed

+230
-1
lines changed

1 file changed

+230
-1
lines changed

‎README.md‎

Lines changed: 230 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,230 @@
1-
# DropdownTextField
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>
86+
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>
94+
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>
106+
107+
<section class="card">
108+
<h2>Basic Usage</h2>
109+
<p>Import the package and embed <code>SearchableMenu</code> in your SwiftUI view:</p>
110+
111+
<pre><code>import SwiftUI
112+
import DropdownTextField
113+
114+
struct ContentView: View {
115+
@State private var searchText = ""
116+
@State private var isDropdownVisible = false
117+
private let options = ["Apple", "Mango", "Banana", "Cherry", "Orange"]
118+
119+
var body: some View {
120+
VStack(spacing: 20) {
121+
Text("Select a Fruit")
122+
.font(.headline)
123+
124+
SearchableMenu(
125+
searchText: $searchText,
126+
isDropdownVisible: $isDropdownVisible,
127+
options: options,
128+
placeholder: "Search or select fruit"
129+
) {
130+
print("Option tapped: \(searchText)")
131+
}
132+
.padding(.horizontal, 16)
133+
}
134+
.padding()
135+
}
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>
193+
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>
204+
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>
215+
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>
224+
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>

0 commit comments

Comments
 (0)