@idds/js 1.0.93 → 1.0.95

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 (3) hide show
  1. package/dist/index.iife.js +48 -9
  2. package/dist/index.js +48 -9
  3. package/package.json +1 -1
package/dist/index.iife.js CHANGED
@@ -3423,10 +3423,10 @@ var InaUI = (() => {
3423
3423
  ${col.header}
3424
3424
  <div class="${PREFIX}-table__sort-icon">
3425
3425
  <div class="${PREFIX}-table__sort-button" data-order="asc">
3426
- <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9L12 15L18 9"></path></svg>
3426
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 5l0 14" /><path d="M16 9l-4 -4" /><path d="M8 9l4 -4" /></svg>
3427
3427
  </div>
3428
3428
  <div class="${PREFIX}-table__sort-button ${PREFIX}-table__sort-button-right" data-order="desc">
3429
- <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 15L12 9L6 15"></path></svg>
3429
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 5l0 14" /><path d="M16 15l-4 4" /><path d="M8 15l4 4" /></svg>
3430
3430
  </div>
3431
3431
  </div>
3432
3432
  </div>
@@ -3567,9 +3567,21 @@ var InaUI = (() => {
3567
3567
  this.state.totalPages = Math.ceil(this.state.total / this.state.pageSize);
3568
3568
  if (this.state.totalPages < 1) this.state.totalPages = 1;
3569
3569
  this.elements.pagination.innerHTML = `
3570
- <div class="${PREFIX}-pagination">
3570
+ <nav class="${PREFIX}-pagination ${PREFIX}-pagination ${PREFIX}-pagination ${PREFIX}-pagination--full-width ${PREFIX}-pagination--size-md ${PREFIX}-pagination--variant-default" aria-label="Pagination navigation">
3571
3571
  <div class="${PREFIX}-pagination__nav-container">
3572
- <div class="${PREFIX}-pagination__page-info">Halaman ${this.state.currentPage} dari ${this.state.totalPages}</div>
3572
+ <div class="${PREFIX}-pagination__page-info">
3573
+ Halaman
3574
+ <input
3575
+ type="number"
3576
+ min="1"
3577
+ max="${this.state.totalPages}"
3578
+ value="${this.state.currentPage}"
3579
+ class="${PREFIX}-pagination__page-input"
3580
+ style="width: calc(${Math.max(1, String(this.state.currentPage).length)}ch + 12px)"
3581
+ aria-label="Current page"
3582
+ />
3583
+ dari ${this.state.totalPages}
3584
+ </div>
3573
3585
  <div class="${PREFIX}-pagination__nav-buttons"></div>
3574
3586
  </div>
3575
3587
  <div class="${PREFIX}-pagination__page-size-container">
@@ -3580,7 +3592,7 @@ var InaUI = (() => {
3580
3592
  ).join("")}
3581
3593
  </select>
3582
3594
  </div>
3583
- </div>
3595
+ </nav>
3584
3596
  `;
3585
3597
  const navButtons = this.elements.pagination.querySelector(
3586
3598
  `.${PREFIX}-pagination__nav-buttons`
@@ -3588,6 +3600,33 @@ var InaUI = (() => {
3588
3600
  const pageSizeSelect = this.elements.pagination.querySelector(
3589
3601
  `.${PREFIX}-pagination__page-size-select`
3590
3602
  );
3603
+ const pageInput = this.elements.pagination.querySelector(
3604
+ `.${PREFIX}-pagination__page-input`
3605
+ );
3606
+ if (pageInput) {
3607
+ const handlePageInputCommit = () => {
3608
+ let val = parseInt(pageInput.value, 10);
3609
+ if (isNaN(val) || val < 1) val = 1;
3610
+ if (val > this.state.totalPages) val = this.state.totalPages;
3611
+ if (val !== this.state.currentPage) {
3612
+ this.state.currentPage = val;
3613
+ this.loadData();
3614
+ } else {
3615
+ pageInput.value = this.state.currentPage;
3616
+ pageInput.style.width = `calc(${Math.max(1, String(this.state.currentPage).length)}ch + 12px)`;
3617
+ }
3618
+ };
3619
+ pageInput.addEventListener("input", (e) => {
3620
+ const val = e.target.value;
3621
+ e.target.style.width = `calc(${Math.max(1, val.length)}ch + 12px)`;
3622
+ });
3623
+ pageInput.addEventListener("blur", handlePageInputCommit);
3624
+ pageInput.addEventListener("keydown", (e) => {
3625
+ if (e.key === "Enter") {
3626
+ handlePageInputCommit();
3627
+ }
3628
+ });
3629
+ }
3591
3630
  pageSizeSelect.addEventListener("change", (e) => {
3592
3631
  this.state.pageSize = parseInt(e.target.value, 10);
3593
3632
  this.state.currentPage = 1;
@@ -3605,10 +3644,10 @@ var InaUI = (() => {
3605
3644
  navButtons.appendChild(btn);
3606
3645
  };
3607
3646
  const SVG = {
3608
- first: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="ina-pagination__nav-icon"><path d="M11 7l-5 5l5 5"></path><path d="M17 7l-5 5l5 5"></path></svg>',
3609
- prev: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="ina-pagination__nav-icon"><path d="M15 6l-6 6l6 6"></path></svg>',
3610
- next: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="ina-pagination__nav-icon"><path d="M9 6l6 6l-6 6"></path></svg>',
3611
- last: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="ina-pagination__nav-icon"><path d="M7 7l5 5l-5 5"></path><path d="M13 7l5 5l-5 5"></path></svg>'
3647
+ first: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="ina-pagination__nav-icon"><path d="M11 18L5 12L11 6M19 18L13 12L19 6"></path></svg>',
3648
+ prev: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="ina-pagination__nav-icon"><path d="M15 18L9 12L15 6"></path></svg>',
3649
+ next: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="ina-pagination__nav-icon"><path d="M9 18L15 12L9 6"></path></svg>',
3650
+ last: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="ina-pagination__nav-icon"><path d="M13 18L19 12L13 6M5 18L11 12L5 6"></path></svg>'
3612
3651
  };
3613
3652
  createBtn(true, this.state.currentPage > 1, SVG.first, () => {
3614
3653
  this.state.currentPage = 1;
package/dist/index.js CHANGED
@@ -3505,10 +3505,10 @@ var Table = class {
3505
3505
  ${col.header}
3506
3506
  <div class="${PREFIX}-table__sort-icon">
3507
3507
  <div class="${PREFIX}-table__sort-button" data-order="asc">
3508
- <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9L12 15L18 9"></path></svg>
3508
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 5l0 14" /><path d="M16 9l-4 -4" /><path d="M8 9l4 -4" /></svg>
3509
3509
  </div>
3510
3510
  <div class="${PREFIX}-table__sort-button ${PREFIX}-table__sort-button-right" data-order="desc">
3511
- <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 15L12 9L6 15"></path></svg>
3511
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 5l0 14" /><path d="M16 15l-4 4" /><path d="M8 15l4 4" /></svg>
3512
3512
  </div>
3513
3513
  </div>
3514
3514
  </div>
@@ -3649,9 +3649,21 @@ var Table = class {
3649
3649
  this.state.totalPages = Math.ceil(this.state.total / this.state.pageSize);
3650
3650
  if (this.state.totalPages < 1) this.state.totalPages = 1;
3651
3651
  this.elements.pagination.innerHTML = `
3652
- <div class="${PREFIX}-pagination">
3652
+ <nav class="${PREFIX}-pagination ${PREFIX}-pagination ${PREFIX}-pagination ${PREFIX}-pagination--full-width ${PREFIX}-pagination--size-md ${PREFIX}-pagination--variant-default" aria-label="Pagination navigation">
3653
3653
  <div class="${PREFIX}-pagination__nav-container">
3654
- <div class="${PREFIX}-pagination__page-info">Halaman ${this.state.currentPage} dari ${this.state.totalPages}</div>
3654
+ <div class="${PREFIX}-pagination__page-info">
3655
+ Halaman
3656
+ <input
3657
+ type="number"
3658
+ min="1"
3659
+ max="${this.state.totalPages}"
3660
+ value="${this.state.currentPage}"
3661
+ class="${PREFIX}-pagination__page-input"
3662
+ style="width: calc(${Math.max(1, String(this.state.currentPage).length)}ch + 12px)"
3663
+ aria-label="Current page"
3664
+ />
3665
+ dari ${this.state.totalPages}
3666
+ </div>
3655
3667
  <div class="${PREFIX}-pagination__nav-buttons"></div>
3656
3668
  </div>
3657
3669
  <div class="${PREFIX}-pagination__page-size-container">
@@ -3662,7 +3674,7 @@ var Table = class {
3662
3674
  ).join("")}
3663
3675
  </select>
3664
3676
  </div>
3665
- </div>
3677
+ </nav>
3666
3678
  `;
3667
3679
  const navButtons = this.elements.pagination.querySelector(
3668
3680
  `.${PREFIX}-pagination__nav-buttons`
@@ -3670,6 +3682,33 @@ var Table = class {
3670
3682
  const pageSizeSelect = this.elements.pagination.querySelector(
3671
3683
  `.${PREFIX}-pagination__page-size-select`
3672
3684
  );
3685
+ const pageInput = this.elements.pagination.querySelector(
3686
+ `.${PREFIX}-pagination__page-input`
3687
+ );
3688
+ if (pageInput) {
3689
+ const handlePageInputCommit = () => {
3690
+ let val = parseInt(pageInput.value, 10);
3691
+ if (isNaN(val) || val < 1) val = 1;
3692
+ if (val > this.state.totalPages) val = this.state.totalPages;
3693
+ if (val !== this.state.currentPage) {
3694
+ this.state.currentPage = val;
3695
+ this.loadData();
3696
+ } else {
3697
+ pageInput.value = this.state.currentPage;
3698
+ pageInput.style.width = `calc(${Math.max(1, String(this.state.currentPage).length)}ch + 12px)`;
3699
+ }
3700
+ };
3701
+ pageInput.addEventListener("input", (e) => {
3702
+ const val = e.target.value;
3703
+ e.target.style.width = `calc(${Math.max(1, val.length)}ch + 12px)`;
3704
+ });
3705
+ pageInput.addEventListener("blur", handlePageInputCommit);
3706
+ pageInput.addEventListener("keydown", (e) => {
3707
+ if (e.key === "Enter") {
3708
+ handlePageInputCommit();
3709
+ }
3710
+ });
3711
+ }
3673
3712
  pageSizeSelect.addEventListener("change", (e) => {
3674
3713
  this.state.pageSize = parseInt(e.target.value, 10);
3675
3714
  this.state.currentPage = 1;
@@ -3687,10 +3726,10 @@ var Table = class {
3687
3726
  navButtons.appendChild(btn);
3688
3727
  };
3689
3728
  const SVG = {
3690
- first: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="ina-pagination__nav-icon"><path d="M11 7l-5 5l5 5"></path><path d="M17 7l-5 5l5 5"></path></svg>',
3691
- prev: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="ina-pagination__nav-icon"><path d="M15 6l-6 6l6 6"></path></svg>',
3692
- next: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="ina-pagination__nav-icon"><path d="M9 6l6 6l-6 6"></path></svg>',
3693
- last: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="ina-pagination__nav-icon"><path d="M7 7l5 5l-5 5"></path><path d="M13 7l5 5l-5 5"></path></svg>'
3729
+ first: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="ina-pagination__nav-icon"><path d="M11 18L5 12L11 6M19 18L13 12L19 6"></path></svg>',
3730
+ prev: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="ina-pagination__nav-icon"><path d="M15 18L9 12L15 6"></path></svg>',
3731
+ next: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="ina-pagination__nav-icon"><path d="M9 18L15 12L9 6"></path></svg>',
3732
+ last: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="ina-pagination__nav-icon"><path d="M13 18L19 12L13 6M5 18L11 12L5 6"></path></svg>'
3694
3733
  };
3695
3734
  createBtn(true, this.state.currentPage > 1, SVG.first, () => {
3696
3735
  this.state.currentPage = 1;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@idds/js",
3
- "version": "1.0.93",
3
+ "version": "1.0.95",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },