Skip to content

Commit abcba7c

Browse files
fadymondyfadymondy
committed
first commit 🔥
1 parent 21ca84a commit abcba7c

5 files changed

Lines changed: 180 additions & 2 deletions

File tree

‎composer.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "laravilt/forms",
33
"description": "Complete form builder system with 30+ field types, validation, and Blade/Inertia.js integration. Build complex forms with text inputs, selects, date pickers, file uploads, rich editors, repeaters, and more with real-time reactivity.",
4-
"version": "1.0.4",
4+
"version": "1.0.5",
55
"type": "library",
66
"license": "MIT",
77
"keywords": [

‎resources/js/app.ts‎

Lines changed: 68 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,80 @@
11
// Laravilt Forms Package Entry Point
22
import Form from './components/Form.vue'
3+
import FieldWrapper from './components/FieldWrapper.vue'
4+
import TextInput from './components/fields/TextInput.vue'
5+
import Textarea from './components/fields/Textarea.vue'
36
import Select from './components/fields/Select.vue'
7+
import Checkbox from './components/fields/Checkbox.vue'
8+
import CheckboxList from './components/fields/CheckboxList.vue'
9+
import Radio from './components/fields/Radio.vue'
10+
import Toggle from './components/fields/Toggle.vue'
11+
import ToggleButtons from './components/fields/ToggleButtons.vue'
12+
import Hidden from './components/fields/Hidden.vue'
13+
import DatePicker from './components/fields/DatePicker.vue'
14+
import TimePicker from './components/fields/TimePicker.vue'
15+
import DateTimePicker from './components/fields/DateTimePicker.vue'
16+
import DateRangePicker from './components/fields/DateRangePicker.vue'
17+
import FileUpload from './components/fields/FileUpload.vue'
18+
import RichEditor from './components/fields/RichEditor.vue'
19+
import MarkdownEditor from './components/fields/MarkdownEditor.vue'
20+
import CodeEditor from './components/fields/CodeEditor.vue'
21+
import ColorPicker from './components/fields/ColorPicker.vue'
22+
import TagsInput from './components/fields/TagsInput.vue'
23+
import KeyValue from './components/fields/KeyValue.vue'
24+
import Repeater from './components/fields/Repeater.vue'
25+
import Builder from './components/fields/Builder.vue'
26+
import Slider from './components/fields/Slider.vue'
27+
import IconPicker from './components/fields/IconPicker.vue'
28+
import NumberField from './components/fields/NumberField.vue'
29+
import PinInput from './components/fields/PinInput.vue'
30+
import RateInput from './components/fields/RateInput.vue'
31+
import Tabs from './components/schema/Tabs.vue'
32+
import Section from './components/schema/Section.vue'
33+
import Grid from './components/schema/Grid.vue'
434

5-
export { Form, Select }
35+
export { Form, Select, TextInput }
636

737
export default {
838
install(app, options = {}) {
939
// Register global components with laravilt- prefix for LaraviltComponentRenderer
40+
app.component('laravilt-form', Form)
41+
app.component('laravilt-field-wrapper', FieldWrapper)
42+
43+
// Field components
44+
app.component('laravilt-text-input', TextInput)
45+
app.component('laravilt-textarea', Textarea)
1046
app.component('laravilt-select', Select)
47+
app.component('laravilt-checkbox', Checkbox)
48+
app.component('laravilt-checkbox-list', CheckboxList)
49+
app.component('laravilt-radio', Radio)
50+
app.component('laravilt-toggle', Toggle)
51+
app.component('laravilt-toggle-buttons', ToggleButtons)
52+
app.component('laravilt-hidden', Hidden)
53+
app.component('laravilt-date-picker', DatePicker)
54+
app.component('laravilt-time-picker', TimePicker)
55+
app.component('laravilt-datetime-picker', DateTimePicker)
56+
app.component('laravilt-date-range-picker', DateRangePicker)
57+
app.component('laravilt-file-upload', FileUpload)
58+
app.component('laravilt-rich-editor', RichEditor)
59+
app.component('laravilt-markdown-editor', MarkdownEditor)
60+
app.component('laravilt-code-editor', CodeEditor)
61+
app.component('laravilt-color-picker', ColorPicker)
62+
app.component('laravilt-tags-input', TagsInput)
63+
app.component('laravilt-key-value', KeyValue)
64+
app.component('laravilt-repeater', Repeater)
65+
app.component('laravilt-builder', Builder)
66+
app.component('laravilt-slider', Slider)
67+
app.component('laravilt-icon-picker', IconPicker)
68+
app.component('laravilt-number-field', NumberField)
69+
app.component('laravilt-pin-input', PinInput)
70+
app.component('laravilt-rate-input', RateInput)
71+
72+
// Schema components
73+
app.component('laravilt-tabs', Tabs)
74+
app.component('laravilt-section', Section)
75+
app.component('laravilt-grid', Grid)
76+
77+
// Legacy name support
1178
app.component('Form', Form)
1279
}
1380
}

‎src/Components/ColorPicker.php‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,13 @@ class ColorPicker extends Field
5353
*/
5454
protected int|Closure|null $minItems = null;
5555

56+
/**
57+
* Popup position for the color picker.
58+
* Supported values: 'top', 'bottom', 'left', 'right', 'top-start', 'top-end',
59+
* 'bottom-start', 'bottom-end', 'left-start', 'left-end', 'right-start', 'right-end'.
60+
*/
61+
protected string|Closure $popupPosition = 'bottom-start';
62+
5663
/**
5764
* Enable alpha channel control.
5865
*/
@@ -170,6 +177,26 @@ public function getMinItems(): ?int
170177
return $this->evaluate($this->minItems);
171178
}
172179

180+
/**
181+
* Set the popup position for the color picker.
182+
*
183+
* @param string|Closure $position Position value (top, bottom, left, right, top-start, etc.)
184+
*/
185+
public function popupPosition(string|Closure $position): static
186+
{
187+
$this->popupPosition = $position;
188+
189+
return $this;
190+
}
191+
192+
/**
193+
* Get the popup position.
194+
*/
195+
public function getPopupPosition(): string
196+
{
197+
return $this->evaluate($this->popupPosition);
198+
}
199+
173200
/**
174201
* Serialize component for Laravilt (Blade + Vue.js).
175202
*/
@@ -183,6 +210,7 @@ public function toLaraviltProps(): array
183210
'multiple' => $this->isMultiple(),
184211
'maxItems' => $this->getMaxItems(),
185212
'minItems' => $this->getMinItems(),
213+
'popupPosition' => $this->getPopupPosition(),
186214
'translations' => [
187215
'placeholder' => __('forms::forms.color_picker.placeholder'),
188216
'swatches' => __('forms::forms.color_picker.swatches'),

‎src/Components/Field.php‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,16 @@ abstract class Field extends Component
5858
*/
5959
protected ?Closure $afterStateUpdated = null;
6060

61+
/**
62+
* Callback to transform state before saving (dehydration).
63+
*/
64+
protected ?Closure $dehydrateStateUsing = null;
65+
66+
/**
67+
* Callback to transform state when loading (hydration).
68+
*/
69+
protected ?Closure $hydrateStateUsing = null;
70+
6171
/**
6272
* Hint actions (displayed next to the label).
6373
*/
@@ -193,6 +203,68 @@ public function getAfterStateUpdated(): ?Closure
193203
return $this->afterStateUpdated;
194204
}
195205

206+
/**
207+
* Set the callback to transform state before saving (dehydration).
208+
* This is useful for hashing passwords, encoding data, etc.
209+
*/
210+
public function dehydrateStateUsing(?Closure $callback): static
211+
{
212+
$this->dehydrateStateUsing = $callback;
213+
214+
return $this;
215+
}
216+
217+
/**
218+
* Get the dehydrate state callback.
219+
*/
220+
public function getDehydrateStateUsing(): ?Closure
221+
{
222+
return $this->dehydrateStateUsing;
223+
}
224+
225+
/**
226+
* Dehydrate (transform) the given state value for saving.
227+
*/
228+
public function dehydrateState(mixed $state): mixed
229+
{
230+
if ($this->dehydrateStateUsing) {
231+
return ($this->dehydrateStateUsing)($state);
232+
}
233+
234+
return $state;
235+
}
236+
237+
/**
238+
* Set the callback to transform state when loading (hydration).
239+
* This is useful for decoding data, formatting values, etc.
240+
*/
241+
public function hydrateStateUsing(?Closure $callback): static
242+
{
243+
$this->hydrateStateUsing = $callback;
244+
245+
return $this;
246+
}
247+
248+
/**
249+
* Get the hydrate state callback.
250+
*/
251+
public function getHydrateStateUsing(): ?Closure
252+
{
253+
return $this->hydrateStateUsing;
254+
}
255+
256+
/**
257+
* Hydrate (transform) the given state value when loading.
258+
*/
259+
public function hydrateState(mixed $state): mixed
260+
{
261+
if ($this->hydrateStateUsing) {
262+
return ($this->hydrateStateUsing)($state);
263+
}
264+
265+
return $state;
266+
}
267+
196268
/**
197269
* Get the field type (based on class name).
198270
*/

‎src/Components/Toggle.php‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,17 @@ class Toggle extends Field
3535

3636
protected bool $inline = true;
3737

38+
/**
39+
* Set up the component with default values.
40+
*/
41+
protected function setUp(): void
42+
{
43+
parent::setUp();
44+
45+
// Toggle defaults to false (off state)
46+
$this->default(false);
47+
}
48+
3849
/**
3950
* Set whether the toggle should be displayed inline (beside its label).
4051
*/

0 commit comments

Comments
 (0)