@bexis2/bexis2-core-ui 0.4.2 → 0.4.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/README.md +4 -0
  2. package/dist/components/Table/TableContent.svelte +63 -66
  3. package/package.json +1 -1
  4. package/src/lib/components/Table/TableContent.svelte +63 -66
package/README.md CHANGED
@@ -1,4 +1,8 @@
1
1
  # bexis-core-ui
2
+ ## 0.4.3
3
+ - table
4
+ - Enable searching on server-side
5
+
2
6
  ## 0.4.2
3
7
  ## 0.4.1
4
8
  - table
package/dist/components/Table/TableContent.svelte CHANGED
@@ -297,77 +297,74 @@ $:
297
297
  <div class="table-container">
298
298
  <!-- Enable the search filter if table is not empty -->
299
299
  {#if $data.length > 0}
300
- {#if !serverSide}
301
- <form
302
- class="flex gap-2"
303
- on:submit|preventDefault={() => {
304
- sendModel.q = searchValue;
300
+ <form
301
+ class="flex gap-2"
302
+ on:submit|preventDefault={() => {
303
+ sendModel.q = searchValue;
304
+ $filterValue = searchValue;
305
+ }}
306
+ >
307
+ <div class="relative w-full flex items-center">
308
+ <input
309
+ class="input p-2 border border-primary-500"
310
+ type="text"
311
+ bind:value={searchValue}
312
+ placeholder="Search rows..."
313
+ id="{tableId}-search"
314
+ /><button
315
+ type="reset"
316
+ class="absolute right-3 items-center"
317
+ on:click|preventDefault={() => {
318
+ searchValue = '';
319
+ sendModel.q = '';
320
+ $filterValue = '';
321
+ }}><Fa icon={faXmark} /></button
322
+ >
323
+ </div>
324
+ <button
325
+ type="submit"
326
+ class="btn variant-filled-primary"
327
+ on:click|preventDefault={() => {
305
328
  $filterValue = searchValue;
306
- }}
329
+ sendModel.q = searchValue;
330
+ }}>Search</button
307
331
  >
308
- <div class="relative w-full flex items-center">
309
- <input
310
- class="input p-2 border border-primary-500"
311
- type="text"
312
- bind:value={searchValue}
313
- placeholder="Search rows..."
314
- id="{tableId}-search"
315
- /><button
316
- type="reset"
317
- class="absolute right-3 items-center"
318
- on:click|preventDefault={() => {
319
- searchValue = '';
320
- sendModel.q = '';
321
- $filterValue = '';
322
- }}><Fa icon={faXmark} /></button
323
- >
324
- </div>
332
+ </form>
333
+ {/if}
334
+ <div class="flex justify-between items-center py-2 w-full">
335
+ <div>
336
+ <!-- Enable the fitToScreen toggle if toggle === true -->
337
+ {#if toggle}
338
+ <SlideToggle
339
+ name="slider-label"
340
+ active="bg-primary-500"
341
+ size="sm"
342
+ checked={fitToScreen}
343
+ id="{tableId}-toggle"
344
+ on:change={() => (fitToScreen = !fitToScreen)}>Fit to screen</SlideToggle
345
+ >
346
+ {/if}
347
+ </div>
348
+ <div class="flex gap-2">
349
+ <!-- Enable the resetResize button if resizable !== 'none' -->
350
+ {#if resizable !== 'none'}
325
351
  <button
326
- type="submit"
327
- class="btn variant-filled-primary"
328
- on:click|preventDefault={() => {
329
- $filterValue = searchValue;
330
- sendModel.q = searchValue;
331
- }}>Search</button
352
+ type="button"
353
+ class="btn btn-sm variant-filled-primary rounded-full order-last"
354
+ on:click|preventDefault={() =>
355
+ resetResize($headerRows, $pageRows, tableId, columns, resizable)}>Reset sizing</button
332
356
  >
333
- </form>
334
- {/if}
335
- <div class="flex justify-between items-center py-2 w-full">
336
- <div>
337
- <!-- Enable the fitToScreen toggle if toggle === true -->
338
- {#if toggle}
339
- <SlideToggle
340
- name="slider-label"
341
- active="bg-primary-500"
342
- size="sm"
343
- checked={fitToScreen}
344
- id="{tableId}-toggle"
345
- on:change={() => (fitToScreen = !fitToScreen)}>Fit to screen</SlideToggle
346
- >
347
- {/if}
348
- </div>
349
- <div class="flex gap-2">
350
- <!-- Enable the resetResize button if resizable !== 'none' -->
351
- {#if resizable !== 'none'}
352
- <button
353
- type="button"
354
- class="btn btn-sm variant-filled-primary rounded-full order-last"
355
- on:click|preventDefault={() =>
356
- resetResize($headerRows, $pageRows, tableId, columns, resizable)}
357
- >Reset sizing</button
358
- >
359
- {/if}
360
- {#if exportable}
361
- <button
362
- type="button"
363
- class="btn btn-sm variant-filled-primary rounded-full order-last"
364
- on:click|preventDefault={() => exportAsCsv(tableId, $exportedData)}
365
- >Export as CSV</button
366
- >
367
- {/if}
368
- </div>
357
+ {/if}
358
+ {#if exportable}
359
+ <button
360
+ type="button"
361
+ class="btn btn-sm variant-filled-primary rounded-full order-last"
362
+ on:click|preventDefault={() => exportAsCsv(tableId, $exportedData)}
363
+ >Export as CSV</button
364
+ >
365
+ {/if}
369
366
  </div>
370
- {/if}
367
+ </div>
371
368
 
372
369
  <div class="overflow-auto" style="height: {height}px">
373
370
  <table
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bexis2/bexis2-core-ui",
3
- "version": "0.4.2",
3
+ "version": "0.4.3",
4
4
  "private": false,
5
5
  "scripts": {
6
6
  "dev": "vite dev",
package/src/lib/components/Table/TableContent.svelte CHANGED
@@ -351,77 +351,74 @@
351
351
  <div class="table-container">
352
352
  <!-- Enable the search filter if table is not empty -->
353
353
  {#if $data.length > 0}
354
- {#if !serverSide}
355
- <form
356
- class="flex gap-2"
357
- on:submit|preventDefault={() => {
358
- sendModel.q = searchValue;
354
+ <form
355
+ class="flex gap-2"
356
+ on:submit|preventDefault={() => {
357
+ sendModel.q = searchValue;
358
+ $filterValue = searchValue;
359
+ }}
360
+ >
361
+ <div class="relative w-full flex items-center">
362
+ <input
363
+ class="input p-2 border border-primary-500"
364
+ type="text"
365
+ bind:value={searchValue}
366
+ placeholder="Search rows..."
367
+ id="{tableId}-search"
368
+ /><button
369
+ type="reset"
370
+ class="absolute right-3 items-center"
371
+ on:click|preventDefault={() => {
372
+ searchValue = '';
373
+ sendModel.q = '';
374
+ $filterValue = '';
375
+ }}><Fa icon={faXmark} /></button
376
+ >
377
+ </div>
378
+ <button
379
+ type="submit"
380
+ class="btn variant-filled-primary"
381
+ on:click|preventDefault={() => {
359
382
  $filterValue = searchValue;
360
- }}
383
+ sendModel.q = searchValue;
384
+ }}>Search</button
361
385
  >
362
- <div class="relative w-full flex items-center">
363
- <input
364
- class="input p-2 border border-primary-500"
365
- type="text"
366
- bind:value={searchValue}
367
- placeholder="Search rows..."
368
- id="{tableId}-search"
369
- /><button
370
- type="reset"
371
- class="absolute right-3 items-center"
372
- on:click|preventDefault={() => {
373
- searchValue = '';
374
- sendModel.q = '';
375
- $filterValue = '';
376
- }}><Fa icon={faXmark} /></button
377
- >
378
- </div>
386
+ </form>
387
+ {/if}
388
+ <div class="flex justify-between items-center py-2 w-full">
389
+ <div>
390
+ <!-- Enable the fitToScreen toggle if toggle === true -->
391
+ {#if toggle}
392
+ <SlideToggle
393
+ name="slider-label"
394
+ active="bg-primary-500"
395
+ size="sm"
396
+ checked={fitToScreen}
397
+ id="{tableId}-toggle"
398
+ on:change={() => (fitToScreen = !fitToScreen)}>Fit to screen</SlideToggle
399
+ >
400
+ {/if}
401
+ </div>
402
+ <div class="flex gap-2">
403
+ <!-- Enable the resetResize button if resizable !== 'none' -->
404
+ {#if resizable !== 'none'}
379
405
  <button
380
- type="submit"
381
- class="btn variant-filled-primary"
382
- on:click|preventDefault={() => {
383
- $filterValue = searchValue;
384
- sendModel.q = searchValue;
385
- }}>Search</button
406
+ type="button"
407
+ class="btn btn-sm variant-filled-primary rounded-full order-last"
408
+ on:click|preventDefault={() =>
409
+ resetResize($headerRows, $pageRows, tableId, columns, resizable)}>Reset sizing</button
386
410
  >
387
- </form>
388
- {/if}
389
- <div class="flex justify-between items-center py-2 w-full">
390
- <div>
391
- <!-- Enable the fitToScreen toggle if toggle === true -->
392
- {#if toggle}
393
- <SlideToggle
394
- name="slider-label"
395
- active="bg-primary-500"
396
- size="sm"
397
- checked={fitToScreen}
398
- id="{tableId}-toggle"
399
- on:change={() => (fitToScreen = !fitToScreen)}>Fit to screen</SlideToggle
400
- >
401
- {/if}
402
- </div>
403
- <div class="flex gap-2">
404
- <!-- Enable the resetResize button if resizable !== 'none' -->
405
- {#if resizable !== 'none'}
406
- <button
407
- type="button"
408
- class="btn btn-sm variant-filled-primary rounded-full order-last"
409
- on:click|preventDefault={() =>
410
- resetResize($headerRows, $pageRows, tableId, columns, resizable)}
411
- >Reset sizing</button
412
- >
413
- {/if}
414
- {#if exportable}
415
- <button
416
- type="button"
417
- class="btn btn-sm variant-filled-primary rounded-full order-last"
418
- on:click|preventDefault={() => exportAsCsv(tableId, $exportedData)}
419
- >Export as CSV</button
420
- >
421
- {/if}
422
- </div>
411
+ {/if}
412
+ {#if exportable}
413
+ <button
414
+ type="button"
415
+ class="btn btn-sm variant-filled-primary rounded-full order-last"
416
+ on:click|preventDefault={() => exportAsCsv(tableId, $exportedData)}
417
+ >Export as CSV</button
418
+ >
419
+ {/if}
423
420
  </div>
424
- {/if}
421
+ </div>
425
422
 
426
423
  <div class="overflow-auto" style="height: {height}px">
427
424
  <table