This repository has been archived by the owner on Aug 26, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 2
/
widgets.html
266 lines (256 loc) · 81.2 KB
/
widgets.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Widgets | Sanjab</title>
<meta name="generator" content="VuePress 1.5.4">
<link rel="icon" href="/images/favicon.ico">
<meta name="description" content="Sanjab is an admin package for laravel framework. create admin panels quick and extendiable.">
<meta property="og:site_name" content="Sanjab">
<meta property="og:title" content="Widgets">
<meta property="og:type" content="website">
<meta property="og:url" content="/widgets.html">
<meta name="twitter:title" content="Widgets">
<meta name="twitter:url" content="/widgets.html">
<meta name="twitter:card" content="summary_large_image">
<link rel="preload" href="/assets/css/0.styles.2e8fc617.css" as="style"><link rel="preload" href="/assets/js/app.bb080b10.js" as="script"><link rel="preload" href="/assets/js/3.0ca36dc4.js" as="script"><link rel="preload" href="/assets/js/48.fafabd31.js" as="script"><link rel="prefetch" href="/assets/js/10.f2fbcc00.js"><link rel="prefetch" href="/assets/js/11.a88150f7.js"><link rel="prefetch" href="/assets/js/12.3f4fc49f.js"><link rel="prefetch" href="/assets/js/13.2f7bbe92.js"><link rel="prefetch" href="/assets/js/14.f69c3be7.js"><link rel="prefetch" href="/assets/js/15.146fd77b.js"><link rel="prefetch" href="/assets/js/16.7040661a.js"><link rel="prefetch" href="/assets/js/17.10c67635.js"><link rel="prefetch" href="/assets/js/18.b258fc52.js"><link rel="prefetch" href="/assets/js/19.0d164613.js"><link rel="prefetch" href="/assets/js/20.2cf36932.js"><link rel="prefetch" href="/assets/js/21.8f19317a.js"><link rel="prefetch" href="/assets/js/22.3dc04c9b.js"><link rel="prefetch" href="/assets/js/23.7d93154e.js"><link rel="prefetch" href="/assets/js/24.d10068db.js"><link rel="prefetch" href="/assets/js/25.ecd8acc3.js"><link rel="prefetch" href="/assets/js/26.5ae91a18.js"><link rel="prefetch" href="/assets/js/27.1ae60bea.js"><link rel="prefetch" href="/assets/js/28.1dd28706.js"><link rel="prefetch" href="/assets/js/29.8c489115.js"><link rel="prefetch" href="/assets/js/30.effa9b52.js"><link rel="prefetch" href="/assets/js/31.5f330bfc.js"><link rel="prefetch" href="/assets/js/32.4ac193d2.js"><link rel="prefetch" href="/assets/js/33.afce904a.js"><link rel="prefetch" href="/assets/js/34.29769f89.js"><link rel="prefetch" href="/assets/js/35.85aef861.js"><link rel="prefetch" href="/assets/js/36.5b05176c.js"><link rel="prefetch" href="/assets/js/37.40a67162.js"><link rel="prefetch" href="/assets/js/38.0585aaff.js"><link rel="prefetch" href="/assets/js/39.085c73ff.js"><link rel="prefetch" href="/assets/js/4.fb05333f.js"><link rel="prefetch" href="/assets/js/40.667cd531.js"><link rel="prefetch" href="/assets/js/41.9bf9596e.js"><link rel="prefetch" href="/assets/js/42.7bf6bc5a.js"><link rel="prefetch" href="/assets/js/43.dbde9849.js"><link rel="prefetch" href="/assets/js/44.a1a7fab3.js"><link rel="prefetch" href="/assets/js/45.af6c374b.js"><link rel="prefetch" href="/assets/js/46.22ab45aa.js"><link rel="prefetch" href="/assets/js/47.095fc7de.js"><link rel="prefetch" href="/assets/js/49.8b56a6bd.js"><link rel="prefetch" href="/assets/js/5.57d9df4b.js"><link rel="prefetch" href="/assets/js/50.523e948d.js"><link rel="prefetch" href="/assets/js/51.2b0f3efa.js"><link rel="prefetch" href="/assets/js/6.3a56987d.js"><link rel="prefetch" href="/assets/js/7.8bfd5ac9.js"><link rel="prefetch" href="/assets/js/8.3d2834af.js"><link rel="prefetch" href="/assets/js/9.e3de8168.js"><link rel="prefetch" href="/assets/js/vendors~docsearch.26dc1fe9.js">
<link rel="stylesheet" href="/assets/css/0.styles.2e8fc617.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><img src="/images/logo.svg" alt="Sanjab" class="logo"> <span class="site-name can-hide">Sanjab</span></a> <div class="links"><form id="search-form" role="search" class="algolia-search-wrapper search-box"><input id="algolia-search-input" class="search-query"></form> <nav class="nav-links can-hide"><div class="nav-item"><a href="https://discord.gg/kwuTZQd" target="_blank" rel="noopener noreferrer" class="nav-link external">
Discussion
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <a href="https://github.com/sanjabteam/sanjab" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="https://discord.gg/kwuTZQd" target="_blank" rel="noopener noreferrer" class="nav-link external">
Discussion
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <a href="https://github.com/sanjabteam/sanjab" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav> <ul class="sidebar-links"><li><a href="/" aria-current="page" class="sidebar-link">Sanjab</a></li><li><a href="/install.html" class="sidebar-link">Installation</a></li><li><a href="/crud.html" class="sidebar-link">CRUD</a></li><li><a href="/setting.html" class="sidebar-link">Setting</a></li><li><section class="sidebar-group collapsable depth-0"><a href="/widgets" class="sidebar-heading clickable active"><span>Widgets</span> <span class="arrow right"></span></a> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><a href="/cards" class="sidebar-heading clickable"><span>Cards</span> <span class="arrow right"></span></a> <!----></section></li><li><a href="/actions.html" class="sidebar-link">Actions</a></li><li><a href="/localization.html" class="sidebar-link">Localization</a></li><li><a href="/authorization.html" class="sidebar-link">Authorization</a></li><li><a href="/compile.html" class="sidebar-link">Custom compile</a></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="widgets"><a href="#widgets" class="header-anchor">#</a> Widgets</h1> <ul><li><a href="#create-a-widget">Create a widget</a></li> <li><a href="#base-properties">Base Properties</a></li> <li><a href="#availble-widgets">Availble widgets</a></li> <li><a href="#extending-widgets">Extending widgets</a> <ul><li><a href="#widget-properties">Widget Properties</a></li> <li><a href="#methods">Methods</a></li> <li><a href="#model-events">Model Events</a></li> <li><a href="#vue-component">Vue component</a></li> <li><a href="#widget-custom-properties">Widget custom properties</a></li></ul></li></ul> <p>Widgets are classes that handling model field operations like showing field, shown in the table, searching, sorting, etc.</p> <h2 id="create-a-widget"><a href="#create-a-widget" class="header-anchor">#</a> Create a widget</h2> <p>Most simple widget is a <code>TextWidget</code>.</p> <div class="language-php extra-class"><pre class="language-php"><code><span class="token variable">$this</span><span class="token operator">-</span><span class="token operator">></span><span class="token property">widgets</span><span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token operator">=</span> TextWidget<span class="token punctuation">:</span><span class="token punctuation">:</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'field name'</span><span class="token punctuation">,</span> <span class="token single-quoted-string string">'Label'</span><span class="token punctuation">)</span>
<span class="token operator">-</span><span class="token operator">></span><span class="token function">property1</span><span class="token punctuation">(</span>Value <span class="token number">1</span><span class="token punctuation">)</span>
<span class="token operator">-</span><span class="token operator">></span><span class="token function">property2</span><span class="token punctuation">(</span>Value <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h2 id="base-properties"><a href="#base-properties" class="header-anchor">#</a> Base Properties</h2> <p>These properties exist in all widgets.</p> <h4 id="onindex"><a href="#onindex" class="header-anchor">#</a> onIndex</h4> <p><code>type: boolean</code></p> <p>is this element available on the index.</p> <h4 id="onview"><a href="#onview" class="header-anchor">#</a> onView</h4> <p><code>type: boolean</code></p> <p>is this element available on view.</p> <h4 id="oncreate"><a href="#oncreate" class="header-anchor">#</a> onCreate</h4> <p><code>type: boolean</code></p> <p>is this element available on create.</p> <h4 id="onedit"><a href="#onedit" class="header-anchor">#</a> onEdit</h4> <p><code>type: boolean</code></p> <p>is this element available on edit.</p> <h4 id="onstore"><a href="#onstore" class="header-anchor">#</a> onStore</h4> <p><code>type: boolean</code></p> <p>should this store on the database.</p> <h4 id="sortable"><a href="#sortable" class="header-anchor">#</a> sortable</h4> <p><code>type: boolean</code></p> <p>is this widget sortable.</p> <h4 id="searchable"><a href="#searchable" class="header-anchor">#</a> searchable</h4> <p><code>type: boolean</code></p> <p>is this widget searchable?</p> <h4 id="customstore"><a href="#customstore" class="header-anchor">#</a> customStore</h4> <p><code>type: callable</code></p> <p>store with a custom method</p> <p>parameters : ($request, $item).</p> <div class="language-php extra-class"><pre class="language-php"><code><span class="token operator">-</span><span class="token operator">></span><span class="token function">customStore</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span>Request <span class="token variable">$request</span><span class="token punctuation">,</span> Model <span class="token variable">$item</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token variable">$item</span><span class="token operator">-</span><span class="token operator">></span><span class="token property">name</span> <span class="token operator">=</span> <span class="token single-quoted-string string">'Test_'</span><span class="token punctuation">.</span><span class="token variable">$request</span><span class="token operator">-</span><span class="token operator">></span><span class="token function">input</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'name'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h4 id="customprestore"><a href="#customprestore" class="header-anchor">#</a> customPreStore</h4> <p><code>type: callable</code></p> <p>pre-store with a custom method</p> <p>parameters : ($request, $item).</p> <h4 id="custompoststore"><a href="#custompoststore" class="header-anchor">#</a> customPostStore</h4> <p><code>type: callable</code></p> <p>post store with a custom method</p> <p>parameters : ($request, $item).</p> <h4 id="custommodifyresponse"><a href="#custommodifyresponse" class="header-anchor">#</a> customModifyResponse</h4> <p><code>type: callable</code></p> <p>custom item response modifier</p> <p>parameters : ($response, $item).</p> <h4 id="custommodifyrequest"><a href="#custommodifyrequest" class="header-anchor">#</a> customModifyRequest</h4> <p><code>type: callable</code></p> <p>custom request modify</p> <p>parameters : ($request, $item).</p> <h4 id="value"><a href="#value" class="header-anchor">#</a> value</h4> <p><code>type: mixed</code></p> <p>the default value for the input.</p> <h4 id="name"><a href="#name" class="header-anchor">#</a> name</h4> <p><code>type: string</code></p> <p>field name.</p> <h4 id="title"><a href="#title" class="header-anchor">#</a> title</h4> <p><code>type: string</code></p> <p>field title.</p> <h4 id="description"><a href="#description" class="header-anchor">#</a> description</h4> <p><code>type: string</code></p> <p>field description.</p> <h4 id="indextag"><a href="#indextag" class="header-anchor">#</a> indexTag</h4> <p><code>type: string</code></p> <p>field default tag in table columns.</p> <h4 id="viewgrouptag"><a href="#viewgrouptag" class="header-anchor">#</a> viewGroupTag</h4> <p><code>type: string</code></p> <p>field default views wrapping group tag on the show page.</p> <h4 id="viewtag"><a href="#viewtag" class="header-anchor">#</a> viewTag</h4> <p><code>type: string</code></p> <p>field default tag on the show page.</p> <h4 id="tag"><a href="#tag" class="header-anchor">#</a> tag</h4> <p><code>type: string</code></p> <p>field tag.</p> <h4 id="grouptag"><a href="#grouptag" class="header-anchor">#</a> groupTag</h4> <p><code>type: string</code></p> <p>field wrapping group tag.</p> <h4 id="class"><a href="#class" class="header-anchor">#</a> class</h4> <p><code>type: string</code></p> <p>class of input field.</p> <h4 id="cols"><a href="#cols" class="header-anchor">#</a> cols</h4> <p><code>type: string</code></p> <p>bootstrap based column width.</p> <div class="language-php extra-class"><pre class="language-php"><code><span class="token variable">$this</span><span class="token operator">-</span><span class="token operator">></span><span class="token property">widgets</span><span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token operator">=</span> TextWidget<span class="token punctuation">:</span><span class="token punctuation">:</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'name'</span><span class="token punctuation">)</span>
<span class="token operator">-</span><span class="token operator">></span><span class="token function">cols</span><span class="token punctuation">(</span><span class="token number">4</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token variable">$this</span><span class="token operator">-</span><span class="token operator">></span><span class="token property">widgets</span><span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token operator">=</span> TextWidget<span class="token punctuation">:</span><span class="token punctuation">:</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'description'</span><span class="token punctuation">)</span>
<span class="token operator">-</span><span class="token operator">></span><span class="token function">cols</span><span class="token punctuation">(</span><span class="token number">8</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h4 id="rules"><a href="#rules" class="header-anchor">#</a> rules</h4> <p><code>type: string|array</code></p> <p>Add custom validation rules to widget.</p> <div class="language-php extra-class"><pre class="language-php"><code><span class="token variable">$this</span><span class="token operator">-</span><span class="token operator">></span><span class="token property">widgets</span><span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token operator">=</span> TextWidget<span class="token punctuation">:</span><span class="token punctuation">:</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'name'</span><span class="token punctuation">)</span>
<span class="token operator">-</span><span class="token operator">></span><span class="token function">rules</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'required|string|min:2|max:100'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h4 id="createrules"><a href="#createrules" class="header-anchor">#</a> createRules</h4> <p><code>type: string|array</code></p> <p>Add custom validation rules to widget just for the create form.</p> <h4 id="editrules"><a href="#editrules" class="header-anchor">#</a> editRules</h4> <p><code>type: string|array</code></p> <p>Add custom validation rules to widget just for the edit form.</p> <h4 id="translation"><a href="#translation" class="header-anchor">#</a> translation</h4> <p><code>type: boolean</code></p> <p>Is this field is multilingual or not.</p> <div class="language-php extra-class"><pre class="language-php"><code><span class="token variable">$this</span><span class="token operator">-</span><span class="token operator">></span><span class="token property">widgets</span><span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token operator">=</span> TextWidget<span class="token punctuation">:</span><span class="token punctuation">:</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'name'</span><span class="token punctuation">)</span>
<span class="token operator">-</span><span class="token operator">></span><span class="token function">translation</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</code></pre></div><h2 id="availble-widgets"><a href="#availble-widgets" class="header-anchor">#</a> Availble widgets</h2> <ul><li><a href="/widgets/checkbox.html">CheckboxWidget</a></li> <li><a href="/widgets/checkbox-group.html">CheckboxWidgetGroup</a></li> <li><a href="/widgets/color.html">ColorWidget</a></li> <li><a href="/widgets/datetime.html">DateTimeWidget</a></li> <li><a href="/widgets/fontawesome.html">FontAwesomeWidget</a></li> <li><a href="/widgets/id.html">IdWidget</a></li> <li><a href="/widgets/item-list.html">ItemListWidget</a></li> <li><a href="/widgets/map.html">MapWidget</a></li> <li><a href="/widgets/money.html">MoneyWidget</a></li> <li><a href="/widgets/number.html">NumberWidget</a></li> <li><a href="/widgets/password.html">PasswordWidget</a></li> <li><a href="/widgets/select.html">SelectWidget</a></li> <li><a href="/widgets/seperator.html">SeperatorWidget</a></li> <li><a href="/widgets/show.html">ShowWidget</a></li> <li><a href="/widgets/tag.html">TagWidget</a></li> <li><a href="/widgets/textarea.html">TextAreaWidget</a></li> <li><a href="/widgets/text-list.html">TextListWidget</a></li> <li><a href="/widgets/text.html">TextWidget</a></li> <li>Wysiwyg editors
<ul><li><a href="/widgets/editorjs.html">EditorJsWidget</a></li> <li><a href="/widgets/quill.html">QuillWidget</a></li></ul></li> <li>File
<ul><li><a href="/widgets/uppy.html">Uppy</a></li> <li><a href="/widgets/elfinder.html">elFinder</a></li></ul></li> <li>Relational
<ul><li><a href="/widgets/belongs-to-picker.html">BelongsTo</a></li> <li><a href="/widgets/belongs-to-many-picker.html">BelongsToMany</a></li> <li><a href="/widgets/has-many.html">HasMany</a></li></ul></li></ul> <h2 id="extending-widgets"><a href="#extending-widgets" class="header-anchor">#</a> Extending widgets</h2> <p>First, you should prepare your project for <a href="/compile.html">Custom Compile</a>.</p> <p>Then you should register your widget Vue components in <code>sanjab.js</code>:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'sanjab'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
Vue<span class="token punctuation">.</span><span class="token function">component</span><span class="token punctuation">(</span><span class="token string">'my-custom-widget'</span><span class="token punctuation">,</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'./widgets/MyCustomWidget.vue'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>default<span class="token punctuation">)</span><span class="token punctuation">;</span>
Vue<span class="token punctuation">.</span><span class="token function">component</span><span class="token punctuation">(</span><span class="token string">'my-another-custom-widget'</span><span class="token punctuation">,</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'./widgets/MyAnotherCustomWidget.vue'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>default<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'#sanjab_app'</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
window<span class="token punctuation">.</span>sanjabApp <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
el<span class="token operator">:</span> <span class="token string">'#sanjab_app'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p>And also any syles in <code>sanjab.scss</code> if needed.</p> <p>Then you should create a class that extends <code>Sanjab\Widgets\Widget</code>:</p> <div class="language-php extra-class"><pre class="language-php"><code><span class="token php language-php"><span class="token delimiter important"><?php</span>
<span class="token keyword">namespace</span> <span class="token package">App<span class="token punctuation">\</span>Widgets</span><span class="token punctuation">;</span>
<span class="token keyword">class</span> <span class="token class-name">MyCustomWidget</span> <span class="token keyword">extends</span> <span class="token class-name">Widget</span>
<span class="token punctuation">{</span>
<span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token punctuation">{</span>
<span class="token variable">$this</span><span class="token operator">-</span><span class="token operator">></span><span class="token function">tag</span><span class="token punctuation">(</span><span class="token double-quoted-string string">"my-custom-widget"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</span></code></pre></div><p>You can set the properties of your widget in init function.</p> <h3 id="widget-properties"><a href="#widget-properties" class="header-anchor">#</a> Widget Properties</h3> <h4 id="indextag-2"><a href="#indextag-2" class="header-anchor">#</a> indexTag</h4> <p><code>type: string</code></p> <p>Widget tag in the list. you should register custom Vue components in javascript if needed.</p> <h4 id="viewtag-2"><a href="#viewtag-2" class="header-anchor">#</a> viewTag</h4> <p><code>type: string</code></p> <p>Widget tag in view page.</p> <h4 id="viewgrouptag-2"><a href="#viewgrouptag-2" class="header-anchor">#</a> viewGroupTag</h4> <p><code>type: string</code></p> <p>Widget group tag in view page. (Recommended to not change)</p> <h4 id="tag-2"><a href="#tag-2" class="header-anchor">#</a> tag</h4> <p><code>type: string</code></p> <p>Widget tag in creates and edit form.</p> <h4 id="grouptag-2"><a href="#grouptag-2" class="header-anchor">#</a> groupTag</h4> <p><code>type: string</code></p> <p>Widget group tag in creates and edit form. (Recommended to not change)</p> <h4 id="class-2"><a href="#class-2" class="header-anchor">#</a> class</h4> <p><code>type: string</code></p> <p>Any extra class.</p> <h3 id="methods"><a href="#methods" class="header-anchor">#</a> Methods</h3> <h4 id="init"><a href="#init" class="header-anchor">#</a> init</h4> <p>Called when widget creating.</p> <h4 id="postinit"><a href="#postinit" class="header-anchor">#</a> postInit</h4> <p>Called when widget creating but all other widgets also initialized.</p> <h4 id="tablecolumns"><a href="#tablecolumns" class="header-anchor">#</a> tableColumns</h4> <p><code>returns: Sanjab\Helpers\TableColumn[]</code></p> <p>Creating table columns manually if a widget needs more than one column in the list.</p> <h5 id="table-column-properties"><a href="#table-column-properties" class="header-anchor">#</a> Table Column Properties</h5> <h5 id="key"><a href="#key" class="header-anchor">#</a> key</h5> <p><code>type: string</code></p> <p>Key of response to show on a column.</p> <h5 id="sortable-2"><a href="#sortable-2" class="header-anchor">#</a> sortable</h5> <p><code>type: boolean</code></p> <p>Is column sortable.</p> <h5 id="tag-3"><a href="#tag-3" class="header-anchor">#</a> tag</h5> <p><code>type: string</code></p> <p>The tag of the column.</p> <hr> <h4 id="searchtypes"><a href="#searchtypes" class="header-anchor">#</a> searchTypes</h4> <p><code>returns: Sanjab\Helpers\SearchType[]</code></p> <p>All possible options of searching for advanced search.</p> <p>Example:</p> <div class="language-php extra-class"><pre class="language-php"><code><span class="token keyword">protected</span> <span class="token keyword">function</span> <span class="token function">searchTypes</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">:</span> <span class="token keyword">array</span>
<span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">[</span>
SearchType<span class="token punctuation">:</span><span class="token punctuation">:</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'empty'</span><span class="token punctuation">,</span> <span class="token single-quoted-string string">'Empty'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
SearchType<span class="token punctuation">:</span><span class="token punctuation">:</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'not_empty'</span><span class="token punctuation">,</span> <span class="token single-quoted-string string">'Not Empty'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
SearchType<span class="token punctuation">:</span><span class="token punctuation">:</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'equal'</span><span class="token punctuation">,</span> <span class="token single-quoted-string string">'Equal'</span><span class="token punctuation">)</span>
<span class="token operator">-</span><span class="token operator">></span><span class="token function">addWidget</span><span class="token punctuation">(</span>NumberWidget<span class="token punctuation">:</span><span class="token punctuation">:</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'search'</span><span class="token punctuation">,</span> <span class="token single-quoted-string string">'Widget for Equal'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
SearchType<span class="token punctuation">:</span><span class="token punctuation">:</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'less'</span><span class="token punctuation">,</span> <span class="token single-quoted-string string">'Less'</span><span class="token punctuation">)</span>
<span class="token operator">-</span><span class="token operator">></span><span class="token function">addWidget</span><span class="token punctuation">(</span>NumberWidget<span class="token punctuation">:</span><span class="token punctuation">:</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'search'</span><span class="token punctuation">,</span> <span class="token single-quoted-string string">'Input for less'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
SearchType<span class="token punctuation">:</span><span class="token punctuation">:</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'between'</span><span class="token punctuation">,</span> <span class="token single-quoted-string string">'Between'</span><span class="token punctuation">)</span>
<span class="token operator">-</span><span class="token operator">></span><span class="token function">addWidget</span><span class="token punctuation">(</span>NumberWidget<span class="token punctuation">:</span><span class="token punctuation">:</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'first'</span><span class="token punctuation">,</span> <span class="token single-quoted-string string">'Between first widget'</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
<span class="token operator">-</span><span class="token operator">></span><span class="token function">addWidget</span><span class="token punctuation">(</span>NumberWidget<span class="token punctuation">:</span><span class="token punctuation">:</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'second'</span><span class="token punctuation">,</span> <span class="token single-quoted-string string">'Between second widget'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p>First parameter for <code>SearchType::create</code> is unique type name using for <a href="#search">search</a> and second one is title of search type.</p> <h4 id="search"><a href="#search" class="header-anchor">#</a> search</h4> <p><code>param: Illuminate\Database\Eloquent\Builder $query</code>: Query builder to modify.</p> <p><code>param: string|null $type</code>: Search type based on <a href="#searchtypes">searchTypes</a>. if was null then it's a global search not advanced search.</p> <p><code>param: mixed $search</code>: search parameters based on widgets or search type.</p> <p>Customize search queries based on <a href="#searchtypes">SearchTypes</a>.</p> <p>Example:</p> <div class="language-php extra-class"><pre class="language-php"><code><span class="token keyword">protected</span> <span class="token keyword">function</span> <span class="token function">search</span><span class="token punctuation">(</span>Builder <span class="token variable">$query</span><span class="token punctuation">,</span> string <span class="token variable">$type</span> <span class="token operator">=</span> <span class="token constant">null</span><span class="token punctuation">,</span> <span class="token variable">$search</span> <span class="token operator">=</span> <span class="token constant">null</span><span class="token punctuation">)</span>
<span class="token punctuation">{</span>
<span class="token keyword">switch</span> <span class="token punctuation">(</span><span class="token variable">$type</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">case</span> <span class="token single-quoted-string string">'empty'</span><span class="token punctuation">:</span>
<span class="token variable">$query</span><span class="token operator">-</span><span class="token operator">></span><span class="token function">whereNull</span><span class="token punctuation">(</span><span class="token variable">$this</span><span class="token operator">-</span><span class="token operator">></span><span class="token function">property</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'name'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token operator">-</span><span class="token operator">></span><span class="token function">orWhere</span><span class="token punctuation">(</span><span class="token variable">$this</span><span class="token operator">-</span><span class="token operator">></span><span class="token function">property</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'name'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token single-quoted-string string">'='</span><span class="token punctuation">,</span> <span class="token single-quoted-string string">''</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">break</span><span class="token punctuation">;</span>
<span class="token keyword">case</span> <span class="token single-quoted-string string">'not_empty'</span><span class="token punctuation">:</span>
<span class="token variable">$query</span><span class="token operator">-</span><span class="token operator">></span><span class="token function">whereNotNull</span><span class="token punctuation">(</span><span class="token variable">$this</span><span class="token operator">-</span><span class="token operator">></span><span class="token function">property</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'name'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token operator">-</span><span class="token operator">></span><span class="token function">where</span><span class="token punctuation">(</span><span class="token variable">$this</span><span class="token operator">-</span><span class="token operator">></span><span class="token function">property</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'name'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token single-quoted-string string">'!='</span><span class="token punctuation">,</span> <span class="token single-quoted-string string">''</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">break</span><span class="token punctuation">;</span>
<span class="token keyword">case</span> <span class="token single-quoted-string string">'equal'</span><span class="token punctuation">:</span>
<span class="token variable">$query</span><span class="token operator">-</span><span class="token operator">></span><span class="token function">where</span><span class="token punctuation">(</span><span class="token variable">$this</span><span class="token operator">-</span><span class="token operator">></span><span class="token function">property</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'name'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token single-quoted-string string">'LIKE'</span><span class="token punctuation">,</span> <span class="token variable">$search</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">break</span><span class="token punctuation">;</span>
<span class="token keyword">case</span> <span class="token single-quoted-string string">'less'</span><span class="token punctuation">:</span>
<span class="token variable">$query</span><span class="token operator">-</span><span class="token operator">></span><span class="token function">where</span><span class="token punctuation">(</span><span class="token variable">$this</span><span class="token operator">-</span><span class="token operator">></span><span class="token function">property</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'name'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token single-quoted-string string">'<'</span><span class="token punctuation">,</span> <span class="token variable">$search</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">break</span><span class="token punctuation">;</span>
<span class="token keyword">case</span> <span class="token single-quoted-string string">'between'</span><span class="token punctuation">:</span>
<span class="token variable">$query</span><span class="token operator">-</span><span class="token operator">></span><span class="token function">whereBetween</span><span class="token punctuation">(</span><span class="token variable">$this</span><span class="token operator">-</span><span class="token operator">></span><span class="token function">property</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'name'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token function">min</span><span class="token punctuation">(</span><span class="token function">intval</span><span class="token punctuation">(</span><span class="token variable">$search</span><span class="token punctuation">[</span><span class="token single-quoted-string string">'first'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token function">intval</span><span class="token punctuation">(</span><span class="token variable">$search</span><span class="token punctuation">[</span><span class="token single-quoted-string string">'second'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token function">max</span><span class="token punctuation">(</span><span class="token function">intval</span><span class="token punctuation">(</span><span class="token variable">$search</span><span class="token punctuation">[</span><span class="token single-quoted-string string">'first'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token function">intval</span><span class="token punctuation">(</span><span class="token variable">$search</span><span class="token punctuation">[</span><span class="token single-quoted-string string">'second'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">break</span><span class="token punctuation">;</span>
<span class="token keyword">default</span><span class="token punctuation">:</span>
<span class="token variable">$query</span><span class="token operator">-</span><span class="token operator">></span><span class="token function">where</span><span class="token punctuation">(</span><span class="token variable">$this</span><span class="token operator">-</span><span class="token operator">></span><span class="token function">property</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'name'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token single-quoted-string string">'LIKE'</span><span class="token punctuation">,</span> <span class="token single-quoted-string string">'%'</span><span class="token punctuation">.</span><span class="token variable">$search</span><span class="token punctuation">.</span><span class="token single-quoted-string string">'%'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">break</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><h4 id="order"><a href="#order" class="header-anchor">#</a> order</h4> <p><code>param: Illuminate\Database\Eloquent\Builder $query</code>: Query builder to modify.</p> <p><code>param: string $key</code>: Key of table column based on <a href="#tablecolumns">TableColumn</a>.</p> <p><code>param: string $direction</code>: Direction of sort. (asc / desc)</p> <p>Customize sort query based on <a href="#tablecolumns">TableColumn</a>.</p> <p>Example:</p> <div class="language-php extra-class"><pre class="language-php"><code><span class="token keyword">protected</span> <span class="token keyword">function</span> <span class="token function">order</span><span class="token punctuation">(</span>Builder <span class="token variable">$query</span><span class="token punctuation">,</span> string <span class="token variable">$key</span><span class="token punctuation">,</span> string <span class="token variable">$direction</span> <span class="token operator">=</span> <span class="token single-quoted-string string">'asc'</span><span class="token punctuation">)</span>
<span class="token punctuation">{</span>
<span class="token variable">$query</span><span class="token operator">-</span><span class="token operator">></span><span class="token function">orderBy</span><span class="token punctuation">(</span><span class="token variable">$this</span><span class="token operator">-</span><span class="token operator">></span><span class="token function">property</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'name'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token variable">$direction</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h4 id="store"><a href="#store" class="header-anchor">#</a> store</h4> <p><code>param: Illuminate\Http\Request $request</code>: Request input. (Note: Never use <code>request()</code> or <code>Request::...</code> to support with translations and 'HasMany / ItemList' widgets)</p> <p><code>param: Illuminate\Database\Eloquent\Model $model</code>: Model item to save data on that.</p> <p>Method to save request data to model item.</p> <p>Example:</p> <div class="language-php extra-class"><pre class="language-php"><code><span class="token comment">// password saving example</span>
<span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function">store</span><span class="token punctuation">(</span>Request <span class="token variable">$request</span><span class="token punctuation">,</span> Model <span class="token variable">$item</span><span class="token punctuation">)</span>
<span class="token punctuation">{</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token variable">$request</span><span class="token operator">-</span><span class="token operator">></span><span class="token function">filled</span><span class="token punctuation">(</span><span class="token variable">$this</span><span class="token operator">-</span><span class="token operator">></span><span class="token function">property</span><span class="token punctuation">(</span><span class="token double-quoted-string string">"name"</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token variable">$item</span><span class="token operator">-</span><span class="token operator">></span><span class="token punctuation">{</span> <span class="token variable">$this</span><span class="token operator">-</span><span class="token operator">></span><span class="token function">property</span><span class="token punctuation">(</span><span class="token double-quoted-string string">"name"</span><span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">bcrypt</span><span class="token punctuation">(</span><span class="token variable">$request</span><span class="token operator">-</span><span class="token operator">></span><span class="token function">input</span><span class="token punctuation">(</span><span class="token variable">$this</span><span class="token operator">-</span><span class="token operator">></span><span class="token function">property</span><span class="token punctuation">(</span><span class="token double-quoted-string string">"name"</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><h4 id="prestore"><a href="#prestore" class="header-anchor">#</a> preStore</h4> <p><code>param: Illuminate\Http\Request $request</code>: Request input. (Note: Never use <code>request()</code> or <code>Request::...</code> to support with translations and 'HasMany / ItemList' widgets)</p> <p><code>param: Illuminate\Database\Eloquent\Model $model</code>: Model item to save data on that.</p> <p>function before any store will be called.</p> <h4 id="poststore"><a href="#poststore" class="header-anchor">#</a> postStore</h4> <p><code>param: Illuminate\Http\Request $request</code>: Request input. (Note: Never use <code>request()</code> or <code>Request::...</code> to support with translations and 'HasMany / ItemList' widgets)</p> <p><code>param: Illuminate\Database\Eloquent\Model $model</code>: Model item to save data on that.</p> <p>store data on the model after the model created on the database. recommended way to store relation based data.</p> <blockquote><p>Note: You should override the store to ignore the default store.</p></blockquote> <h4 id="modifyrequest"><a href="#modifyrequest" class="header-anchor">#</a> modifyRequest</h4> <p><code>param: Illuminate\Http\Request $request</code>: Request input. (Note: Never use <code>request()</code> or <code>Request::...</code> to support with translations and 'HasMany / ItemList' widgets)</p> <p><code>param: Illuminate\Database\Eloquent\Model $model</code>: Model item.</p> <p>To modify request data before storing the model.</p> <p>Example:</p> <div class="language-php extra-class"><pre class="language-php"><code><span class="token comment">// Example to convert to uppercase</span>
<span class="token keyword">protected</span> <span class="token keyword">function</span> <span class="token function">modifyRequest</span><span class="token punctuation">(</span>Request <span class="token variable">$request</span><span class="token punctuation">,</span> Model <span class="token variable">$item</span> <span class="token operator">=</span> <span class="token constant">null</span><span class="token punctuation">)</span>
<span class="token punctuation">{</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token function">is_string</span><span class="token punctuation">(</span><span class="token variable">$request</span><span class="token operator">-</span><span class="token operator">></span><span class="token function">input</span><span class="token punctuation">(</span><span class="token variable">$this</span><span class="token operator">-</span><span class="token operator">></span><span class="token function">property</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'name'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token variable">$request</span><span class="token operator">-</span><span class="token operator">></span><span class="token function">merge</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token variable">$this</span><span class="token operator">-</span><span class="token operator">></span><span class="token function">property</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'name'</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token function">strtoupper</span><span class="token punctuation">(</span><span class="token variable">$request</span><span class="token operator">-</span><span class="token operator">></span><span class="token function">input</span><span class="token punctuation">(</span><span class="token variable">$this</span><span class="token operator">-</span><span class="token operator">></span><span class="token function">property</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'name'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><h4 id="modifyresponse"><a href="#modifyresponse" class="header-anchor">#</a> modifyResponse</h4> <p><code>param: stdClass $response</code>: Response object.</p> <p><code>param: Illuminate\Database\Eloquent\Model $model</code>: Model item.</p> <p>Convert model data to response data to access on the client-side.</p> <p>Example:</p> <div class="language-php extra-class"><pre class="language-php"><code><span class="token keyword">protected</span> <span class="token keyword">function</span> <span class="token function">modifyResponse</span><span class="token punctuation">(</span>stdClass <span class="token variable">$response</span><span class="token punctuation">,</span> Model <span class="token variable">$item</span><span class="token punctuation">)</span>
<span class="token punctuation">{</span>
<span class="token variable">$response</span><span class="token operator">-</span><span class="token operator">></span><span class="token punctuation">{</span> <span class="token variable">$this</span><span class="token operator">-</span><span class="token operator">></span><span class="token function">property</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'name'</span><span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token variable">$item</span><span class="token operator">-</span><span class="token operator">></span><span class="token punctuation">{</span> <span class="token variable">$this</span><span class="token operator">-</span><span class="token operator">></span><span class="token function">property</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'name'</span><span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h4 id="validationattributes"><a href="#validationattributes" class="header-anchor">#</a> validationAttributes</h4> <p><code>param: Illuminate\Http\Request $request</code>: Request input.</p> <p><code>param: string $type</code>: Crud type (create, edit) (always edit for setting controllers).</p> <p><code>param: Illuminate\Database\Eloquent\Model $model</code>: Model item.</p> <p><code>returns: array</code>: an array of validation attributes.</p> <p>Default example:</p> <div class="language-php extra-class"><pre class="language-php"><code><span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function">validationAttributes</span><span class="token punctuation">(</span>Request <span class="token variable">$request</span><span class="token punctuation">,</span> string <span class="token variable">$type</span><span class="token punctuation">,</span> Model <span class="token variable">$item</span> <span class="token operator">=</span> <span class="token constant">null</span><span class="token punctuation">)</span><span class="token punctuation">:</span> <span class="token keyword">array</span>
<span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">[</span>
<span class="token variable">$this</span><span class="token operator">-</span><span class="token operator">></span><span class="token property">name</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token variable">$this</span><span class="token operator">-</span><span class="token operator">></span><span class="token property">title</span><span class="token punctuation">,</span>
<span class="token variable">$this</span><span class="token operator">-</span><span class="token operator">></span><span class="token property">name</span><span class="token punctuation">.</span><span class="token single-quoted-string string">'.*'</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token variable">$this</span><span class="token operator">-</span><span class="token operator">></span><span class="token property">title</span><span class="token punctuation">,</span>
<span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h4 id="validationrules"><a href="#validationrules" class="header-anchor">#</a> validationRules</h4> <p><code>param: Illuminate\Http\Request $request</code>: Request input.</p> <p><code>param: string $type</code>: Crud type (create, edit) (always edit for setting controllers).</p> <p><code>param: Illuminate\Database\Eloquent\Model $model</code>: Model item.</p> <p><code>returns: array</code>: an array of validation rules.</p> <p>Default Example:</p> <div class="language-php extra-class"><pre class="language-php"><code><span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function">validationRules</span><span class="token punctuation">(</span>Request <span class="token variable">$request</span><span class="token punctuation">,</span> string <span class="token variable">$type</span><span class="token punctuation">,</span> Model <span class="token variable">$item</span> <span class="token operator">=</span> <span class="token constant">null</span><span class="token punctuation">)</span><span class="token punctuation">:</span> <span class="token keyword">array</span>
<span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">[</span>
<span class="token variable">$this</span><span class="token operator">-</span><span class="token operator">></span><span class="token property">name</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token variable">$this</span><span class="token operator">-</span><span class="token operator">></span><span class="token function">property</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'rules.'</span><span class="token punctuation">.</span><span class="token variable">$type</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token comment">// This is all rules that set by user in controller</span>
<span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h4 id="validationmessages"><a href="#validationmessages" class="header-anchor">#</a> validationMessages</h4> <p><code>param: Illuminate\Http\Request $request</code>: Request input.</p> <p><code>param: string $type</code>: Crud type (create, edit) (always edit for setting controllers).</p> <p><code>param: Illuminate\Database\Eloquent\Model $model</code>: Model item.</p> <p><code>returns: array</code>: an array of validation custom messages.</p> <hr> <h3 id="model-events"><a href="#model-events" class="header-anchor">#</a> Model Events</h3> <ul><li>onRetrieved : Model <code>retrieved</code> event</li> <li>onCreating : Model <code>creating</code> event</li> <li>onCreated : Model <code>created</code> event</li> <li>onUpdating : Model <code>updating</code> event</li> <li>onUpdated : Model <code>updated</code> event</li> <li>onSaving : Model <code>saving</code> event</li> <li>onSaved : Model <code>saved</code> event</li> <li>onDeleting : Model <code>deleting</code> event when not soft deleting</li> <li>onDeleted : Model <code>deleted</code> event when not soft deleted</li> <li>onSoftDeleting : Model <code>deleting</code> event when soft deleting</li> <li>onSoftDeleted : Model <code>creating</code> event when soft deleted</li> <li>onRestoring : Model <code>restoring</code> event when restoring soft delete item</li> <li>onRestored : Model <code>restored</code> event when soft deleted item restored</li></ul> <hr> <h3 id="vue-component"><a href="#vue-component" class="header-anchor">#</a> Vue component</h3> <p>You can access all attributes in the Vue component by defining them as <code>prop</code>.</p> <p>Example to access name:</p> <div class="language-vue extra-class"><pre class="language-vue"><code>{% raw %}<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>My widget name is: {{ name }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
props<span class="token operator">:</span> <span class="token punctuation">{</span>
name<span class="token operator">:</span> <span class="token punctuation">{</span>
type<span class="token operator">:</span> String<span class="token punctuation">,</span>
<span class="token keyword">default</span><span class="token operator">:</span> <span class="token keyword">null</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> {% endraw %}
</code></pre></div><p>To send data to the backend on form submit your component should support <code>v-model</code> to set value.</p> <p>Read more on <a href="https://vuejs.org/v2/guide/components.html#Using-v-model-on-Components" target="_blank" rel="noopener noreferrer">Vue.js documents<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>.</p> <p>Money widget example:</p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>v-money</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>mutableValue<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>form-control<span class="token punctuation">"</span></span> <span class="token attr-name">v-bind</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>money<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">import</span> <span class="token punctuation">{</span>Money<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'v-money'</span><span class="token punctuation">;</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
props<span class="token operator">:</span> <span class="token punctuation">{</span>
value<span class="token operator">:</span> <span class="token punctuation">{</span>
type<span class="token operator">:</span> <span class="token punctuation">[</span>Number<span class="token punctuation">,</span> String<span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token keyword">default</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
decimal<span class="token operator">:</span> <span class="token punctuation">{</span>
type<span class="token operator">:</span> String<span class="token punctuation">,</span>
<span class="token keyword">default</span><span class="token operator">:</span> <span class="token string">'.'</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
thousands<span class="token operator">:</span> <span class="token punctuation">{</span>
type<span class="token operator">:</span> String<span class="token punctuation">,</span>
<span class="token keyword">default</span><span class="token operator">:</span> <span class="token string">','</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
prefix<span class="token operator">:</span> <span class="token punctuation">{</span>
type<span class="token operator">:</span> String<span class="token punctuation">,</span>
<span class="token keyword">default</span><span class="token operator">:</span> <span class="token string">''</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
postfix<span class="token operator">:</span> <span class="token punctuation">{</span>
type<span class="token operator">:</span> String<span class="token punctuation">,</span>
<span class="token keyword">default</span><span class="token operator">:</span> <span class="token string">' $'</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
precision<span class="token operator">:</span> <span class="token punctuation">{</span>
type<span class="token operator">:</span> Number<span class="token punctuation">,</span>
<span class="token keyword">default</span><span class="token operator">:</span> <span class="token number">2</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token function">mounted</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>value <span class="token keyword">instanceof</span> <span class="token class-name">Number</span> <span class="token operator">||</span> <span class="token keyword">this</span><span class="token punctuation">.</span>value <span class="token keyword">instanceof</span> <span class="token class-name">String</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>mutableValue <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>value<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token function">data</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">{</span>
mutableValue<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
money<span class="token operator">:</span> <span class="token punctuation">{</span>
decimal<span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>decimal<span class="token punctuation">,</span>
thousands<span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>thousands<span class="token punctuation">,</span>
prefix<span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>prefix<span class="token punctuation">,</span>
suffix<span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>postfix<span class="token punctuation">,</span>
precision<span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>precision<span class="token punctuation">,</span>
masked<span class="token operator">:</span> <span class="token boolean">false</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
watch<span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token function">mutableValue</span><span class="token punctuation">(</span><span class="token parameter">newValue<span class="token punctuation">,</span> oldValue</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$emit</span><span class="token punctuation">(</span><span class="token string">'input'</span><span class="token punctuation">,</span> newValue<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token function">value</span><span class="token punctuation">(</span><span class="token parameter">newValue<span class="token punctuation">,</span> oldValue</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">typeof</span> newValue <span class="token operator">===</span> <span class="token string">'number'</span> <span class="token operator">||</span> <span class="token keyword">typeof</span> newValue <span class="token operator">===</span> <span class="token string">'string'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>mutableValue <span class="token operator">=</span> newValue<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
components<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token string">'v-money'</span><span class="token operator">:</span> Money<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
</code></pre></div><hr> <h3 id="widget-custom-properties"><a href="#widget-custom-properties" class="header-anchor">#</a> Widget custom properties</h3> <p>If you want to use some custom properties on the Vue side then you can easily set them on the server-side like this.</p> <div class="language-php extra-class"><pre class="language-php"><code><span class="token variable">$this</span><span class="token operator">-</span><span class="token operator">></span><span class="token function">myCustomProperty</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'my custom property value'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// Or</span>
<span class="token variable">$this</span><span class="token operator">-</span><span class="token operator">></span><span class="token function">setProperty</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'myCustomProperty'</span><span class="token punctuation">,</span> <span class="token single-quoted-string string">'my value'</span><span class="token punctuation">)</span>
</code></pre></div><p>To read property value:</p> <div class="language-php extra-class"><pre class="language-php"><code><span class="token variable">$this</span><span class="token operator">-</span><span class="token operator">></span><span class="token function">property</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'myCustomProperty'</span><span class="token punctuation">,</span> <span class="token single-quoted-string string">'Default Value'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p>For providing autocompletion for custom properties you need to add php doc for your widget classes.</p> <p>Example:</p> <div class="language-php extra-class"><pre class="language-php"><code><span class="token comment">/**
* My Custom widget.
*
* @method $this myCustomProperty(string $val) My custom property description.
*/</span>
<span class="token keyword">class</span> <span class="token class-name">MyCustomWidget</span> <span class="token keyword">extends</span> <span class="token class-name">Widget</span>
</code></pre></div><p>And in controller:</p> <div class="language-php extra-class"><pre class="language-php"><code>MyCustomWidget<span class="token punctuation">:</span><span class="token punctuation">:</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">)</span>
<span class="token operator">-</span><span class="token operator">></span><span class="token function">myCustomProperty</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'my value'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p>Also, you can define properties as function to modify value before store or have a default value.</p> <p>Always UPPERCASE attribute example:</p> <div class="language-php extra-class"><pre class="language-php"><code><span class="token comment">/**
* My custom property description.
*
* @param string $value
* @return $this
*/</span>
<span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function">myCustomProperty</span><span class="token punctuation">(</span>string <span class="token variable">$value</span> <span class="token operator">=</span> <span class="token single-quoted-string string">'DEFAULT'</span><span class="token punctuation">)</span>
<span class="token punctuation">{</span>
<span class="token variable">$this</span><span class="token operator">-</span><span class="token operator">></span><span class="token function">setProperty</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'myCustomProperty'</span><span class="token punctuation">,</span> <span class="token function">strtoupper</span><span class="token punctuation">(</span><span class="token variable">$value</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
<span class="token keyword">return</span> <span class="token variable">$this</span><span class="token punctuation">;</span> <span class="token comment">// Important to return $this.</span>
<span class="token punctuation">}</span>
</code></pre></div><p>To access custom properties on the widget Vue component you should define prop for the custom property.</p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>{{ myCustomProperty }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
props<span class="token operator">:</span> <span class="token punctuation">{</span>
myCustomProperty<span class="token operator">:</span> <span class="token punctuation">{</span>
type<span class="token operator">:</span> String<span class="token punctuation">,</span>
<span class="token keyword">default</span><span class="token operator">:</span> <span class="token string">'Default'</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
</code></pre></div></div> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/sanjabteam/docs/edit/master/docs/widgets.md" target="_blank" rel="noopener noreferrer">Help us improve this page!</a> <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></div> <!----></footer> <!----> </main></div><div class="global-ui"><!----></div></div>
<script src="/assets/js/app.bb080b10.js" defer></script><script src="/assets/js/3.0ca36dc4.js" defer></script><script src="/assets/js/48.fafabd31.js" defer></script>
</body>
</html>