← All changes | components/InputField.php +26 -191 trunk → 4.0.0 View file →

		@@ -23,84 +23,34 @@
23	23	/**
24	24	* InputField Component Class.
25	25	*
26	26	* Example usage:
27		- * ```php
28		- * // Plain text input with label
	27	+ * ```
	28	+ * // Text input with clear button
29	29	* InputField::make()
30	30	* ->type( 'text' )
31	31	* ->name( 'full_name' )
32	32	* ->label( 'Full Name' )
33	33	* ->placeholder( 'Enter your full name' )
34		- * ->render();
35		- *
36		- * // Required text input with clear button and help text
37		- * InputField::make()
38		- * ->type( 'text' )
39		- * ->name( 'full_name' )
40		- * ->label( 'Full Name' )
41		- * ->placeholder( 'Enter your full name' )
42	34	* ->required()
43	35	* ->clearable()
44		- * ->help_text( 'This name will appear on your certificate.' )
	36	+ * ->help_text( 'This is a helper text.' )
	37	+ * ->attr( 'x-bind', "register('full_name', { required: 'Name is required', minLength: { value: 2, message: 'Name must be at least 2 characters' } })")
45	38	* ->render();
46	39	*
47		- * // Text input with Alpine.js form validation binding
48		- * InputField::make()
49		- * ->type( 'text' )
50		- * ->name( 'username' )
51		- * ->label( 'Username' )
52		- * ->required()
53		- * ->attr( 'x-bind', "register('username', { required: 'Username is required', minLength: { value: 3, message: 'Min 3 characters' } })" )
54		- * ->render();
55		- *
56	40	* // Text input with left icon
57	41	* InputField::make()
58	42	* ->type( 'text' )
59	43	* ->name( 'email' )
60	44	* ->label( 'Email' )
61		- * ->left_icon( SvgIcon::make()->name( Icon::MAIL )->size( 18 )->get() )
	45	+ * ->left_icon( '<svg>...</svg>' )
62	46	* ->render();
63	47	*
64		- * // Text input with right icon
65		- * InputField::make()
66		- * ->type( 'text' )
67		- * ->name( 'website' )
68		- * ->label( 'Website' )
69		- * ->right_icon( SvgIcon::make()->name( Icon::LINK )->size( 18 )->get() )
70		- * ->render();
71		- *
72		- * // Email input
73		- * InputField::make()
74		- * ->type( 'email' )
75		- * ->name( 'email_address' )
76		- * ->label( 'Email Address' )
77		- * ->placeholder( 'you@example.com' )
78		- * ->render();
79		- *
80		- * // Number input
81		- * InputField::make()
82		- * ->type( 'number' )
83		- * ->name( 'seats' )
84		- * ->label( 'Seats Available' )
85		- * ->value( '30' )
86		- * ->render();
87		- *
88		- * // Password input with strength meter
89		- * InputField::make()
90		- * ->type( 'password' )
91		- * ->name( 'new_password' )
92		- * ->label( 'New Password' )
93		- * ->show_strength( true )
94		- * ->min_strength( 3 )
95		- * ->render();
96		- *
97	48	* // Textarea
98	49	* InputField::make()
99	50	* ->type( 'textarea' )
100	51	* ->name( 'bio' )
101	52	* ->label( 'Bio' )
102		- * ->placeholder( 'Tell us about yourself...' )
103	53	* ->render();
104	54	*
105	55	* // Checkbox
106	56	* InputField::make()
		@@ -105,37 +55,14 @@
105	55	* // Checkbox
106	56	* InputField::make()
107	57	* ->type( 'checkbox' )
108	58	* ->name( 'agree' )
109		- * ->label( 'I agree to the terms and conditions' )
110		- * ->size( Size::MD )
	59	+ * ->label( 'I agree to terms' )
	60	+ * ->size( 'md' )
111	61	* ->render();
112	62	*
113		- * // Checkbox with HTML label (e.g., link inside label)
	63	+ * // Radio
114	64	* InputField::make()
115		- * ->type( 'checkbox' )
116		- * ->name( 'agree' )
117		- * ->label_html( 'I agree to the <a href="/terms">Terms</a>' )
118		- * ->render();
119		- *
120		- * // Intermediate (indeterminate) checkbox
121		- * InputField::make()
122		- * ->type( 'checkbox' )
123		- * ->name( 'select_all' )
124		- * ->label( 'Select All' )
125		- * ->intermediate( true )
126		- * ->render();
127		- *
128		- * // Pre-checked checkbox
129		- * InputField::make()
130		- * ->type( 'checkbox' )
131		- * ->name( 'subscribe' )
132		- * ->label( 'Subscribe to newsletter' )
133		- * ->checked( true )
134		- * ->render();
135		- *
136		- * // Radio button
137		- * InputField::make()
138	65	* ->type( 'radio' )
139	66	* ->name( 'gender' )
140	67	* ->label( 'Male' )
141	68	* ->value( 'male' )
		@@ -140,17 +67,17 @@
140	67	* ->label( 'Male' )
141	68	* ->value( 'male' )
142	69	* ->render();
143	70	*
144		- * // Toggle switch
	71	+ * // Switch
145	72	* InputField::make()
146	73	* ->type( 'switch' )
147	74	* ->name( 'notifications' )
148		- * ->label( 'Enable email notifications' )
149		- * ->size( Size::MD )
	75	+ * ->label( 'Enable notifications?' )
	76	+ * ->size( 'md' )
150	77	* ->render();
151	78	*
152		- * // Input with error state
	79	+ * // InputField with error
153	80	* InputField::make()
154	81	* ->type( 'text' )
155	82	* ->name( 'username' )
156	83	* ->label( 'Username' )
		@@ -156,116 +83,24 @@
156	83	* ->label( 'Username' )
157	84	* ->error( 'This field is required.' )
158	85	* ->render();
159	86	*
160		- * // Disabled input
	87	+ * // Select
161	88	* InputField::make()
162		- * ->type( 'text' )
163		- * ->name( 'readonly_field' )
164		- * ->label( 'Read Only' )
165		- * ->value( 'Cannot change me' )
166		- * ->disabled()
167		- * ->render();
	89	+ * ->type( 'select' )
	90	+ * ->name( 'interests' )
	91	+ * ->label( 'Interests' )
	92	+ * ->placeholder( 'Select your interests')
	93	+ * ->required( 'Please select an interest')
	94	+ * ->clearable()
	95	+ * ->options( $interests )
	96	+ * ->multiple()
	97	+ * ->searchable()
	98	+ * ->size( 'md' )
	99	+ * ->max_selections( 2 )
	100	+ * ->help_text( 'This is a helper next.' )
	101	+ * ->render();
168	102	*
169		- * // Loading state (e.g., while async options load)
170		- * InputField::make()
171		- * ->type( 'select' )
172		- * ->name( 'category' )
173		- * ->label( 'Category' )
174		- * ->loading( true )
175		- * ->loading_message( __( 'Loading categories...', 'tutor' ) )
176		- * ->render();
177		- *
178		- * // Single select with flat options list
179		- * InputField::make()
180		- * ->type( 'select' )
181		- * ->name( 'country' )
182		- * ->label( 'Country' )
183		- * ->placeholder( 'Select a country' )
184		- * ->options( array(
185		- * array( 'label' => 'United States', 'value' => 'us' ),
186		- * array( 'label' => 'United Kingdom', 'value' => 'uk' ),
187		- * array( 'label' => 'Canada', 'value' => 'ca' ),
188		- * ) )
189		- * ->render();
190		- *
191		- * // Select with icons and descriptions per option
192		- * InputField::make()
193		- * ->type( 'select' )
194		- * ->name( 'level' )
195		- * ->label( 'Course Level' )
196		- * ->options( array(
197		- * array( 'label' => 'Beginner', 'value' => 'beginner', 'icon' => Icon::PLAY_LINE, 'description' => 'No prior knowledge needed' ),
198		- * array( 'label' => 'Intermediate', 'value' => 'intermediate', 'icon' => Icon::BOOK, 'description' => 'Some experience required' ),
199		- * array( 'label' => 'Advanced', 'value' => 'advanced', 'icon' => Icon::GRADUATION, 'description' => 'For experienced learners' ),
200		- * ) )
201		- * ->render();
202		- *
203		- * // Multi-select with search, clearable and max selections
204		- * InputField::make()
205		- * ->type( 'select' )
206		- * ->name( 'interests' )
207		- * ->label( 'Interests' )
208		- * ->placeholder( 'Select your interests' )
209		- * ->required( 'Please select an interest' )
210		- * ->clearable()
211		- * ->options( $interests )
212		- * ->multiple()
213		- * ->searchable()
214		- * ->size( Size::MD )
215		- * ->max_selections( 2 )
216		- * ->help_text( 'You can pick up to 2 interests.' )
217		- * ->render();
218		- *
219		- * // Grouped select options
220		- * InputField::make()
221		- * ->type( 'select' )
222		- * ->name( 'topic' )
223		- * ->label( 'Topic' )
224		- * ->groups( array(
225		- * array(
226		- * 'label' => 'Development',
227		- * 'options' => array(
228		- * array( 'label' => 'PHP', 'value' => 'php' ),
229		- * array( 'label' => 'JavaScript', 'value' => 'js' ),
230		- * ),
231		- * ),
232		- * array(
233		- * 'label' => 'Design',
234		- * 'options' => array(
235		- * array( 'label' => 'Figma', 'value' => 'figma' ),
236		- * array( 'label' => 'Illustrator','value' => 'ai' ),
237		- * ),
238		- * ),
239		- * ) )
240		- * ->render();
241		- *
242		- * // Select with onChange callback and collapsable on selection
243		- * InputField::make()
244		- * ->type( 'select' )
245		- * ->name( 'sort_by' )
246		- * ->label( 'Sort By' )
247		- * ->options( $sort_options )
248		- * ->on_change( 'function(value){ handleSortChange(value); }' )
249		- * ->collapsable( true )
250		- * ->render();
251		- *
252		- * // Time picker (12-hour, 15-minute interval)
253		- * InputField::make()
254		- * ->type( 'time' )
255		- * ->name( 'start_time' )
256		- * ->label( 'Start Time' )
257		- * ->selection_time_mode( 12 )
258		- * ->interval( 15 )
259		- * ->render();
260		- *
261		- * // Small-size input
262		- * InputField::make()
263		- * ->type( 'text' )
264		- * ->name( 'search_term' )
265		- * ->placeholder( 'Search...' )
266		- * ->size( Size::SM )
267		- * ->render();
268	103	* ```
269	104	*
270	105	* @since 4.0.0
271	106	*/