@teipublisher/pb-components 3.2.0 → 3.2.1

package/i18n/common/de.json

@@ -126,6 +126,23 @@
     "content": "Inhalte durchsuchen",
     "scope": "Suchbereich"
   },
+  "tableGrid": {
+    "search": "Suche",
+    "searchPlaceholder": "Schlüsselwort eingeben...",
+    "sortAsc": "Spalte aufsteigend sortieren",
+    "sortDesc": "Spalte absteigend sortieren",
+    "previous": "Vorherige",
+    "next": "Nächste",
+    "navigate": "Seite {{page}} von {{pages}}",
+    "page": "Seite {{page}}",
+    "showing": "Anzeigen",
+    "to": "zu",
+    "of": "von",
+    "results": "Ergebnisse",
+    "loading": "Laden...",
+    "noRecordsFound": "Keine passenden Einträge gefunden",
+    "error": "Ein Fehler ist aufgetreten, während die Daten abgerufen wurden"
+  },
   "dts": {
     "endpoint": "Server wählen",
     "note": "Experimentell: Zugriff auf externe Editionen über DTS API",

package/i18n/common/en.json

@@ -126,6 +126,23 @@
     "content": "Search content",
     "scope": "Query scope"
   },
+  "tableGrid": {
+    "search": "Search",
+    "searchPlaceholder": "Type a keyword...",
+    "sortAsc": "Sort column ascending",
+    "sortDesc": "Sort column descending",
+    "previous": "Previous",
+    "next": "Next",
+    "navigate": "Page {{page}} of {{pages}}",
+    "page": "Page {{page}}",
+    "showing": "Showing",
+    "to": "to",
+    "of": "of",
+    "results": "results",
+    "loading": "Loading...",
+    "noRecordsFound": "No matching records found",
+    "error": "An error occurred while fetching data"
+  },
   "dts": {
     "endpoint": "Select Endpoint",
     "note": "Experimental: access other editions which expose the DTS API",

package/i18n/common/pl.json

@@ -126,6 +126,23 @@
     "content": "Przeszukaj zawartość",
     "scope": "Obszar kwerendy"
   },
+  "tableGrid": {
+    "search": "Szukaj",
+    "searchPlaceholder": "Wpisz słowo kluczowe...",
+    "sortAsc": "Sortuj kolumnę rosnąco",
+    "sortDesc": "Sortuj kolumnę malejąco",
+    "previous": "Poprzednia",
+    "next": "Następna",
+    "navigate": "Strona {{page}} z {{pages}}",
+    "page": "Strona {{page}}",
+    "showing": "Wyświetlanie",
+    "to": "do",
+    "of": "z",
+    "results": "wyników",
+    "loading": "Ładowanie...",
+    "noRecordsFound": "Brak pasujących rekordów",
+    "error": "Wystąpił błąd podczas pobierania danych"
+  },
   "dts": {
     "endpoint": "Wybierz Endpoint",
     "note": "Wersja eksperymentalna: uzyskaj dostęp do edycji, które udostępniają API DTS",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teipublisher/pb-components",
-  "version": "3.2.0",
+  "version": "3.2.1",
   "description": "Collection of webcomponents underlying TEI Publisher",
   "repository": "https://github.com/eeditiones/tei-publisher-components.git",
   "main": "index.html",

package/src/pb-table-grid.js

@@ -3,13 +3,9 @@ import { Grid, PluginPosition } from 'gridjs';
 import { pbMixin, waitOnce } from './pb-mixin.js';
 import { resolveURL } from './utils.js';
 import { importStyles, loadStylesheets, themableMixin } from './theming.js';
-import '@polymer/paper-input/paper-input';
-import '@polymer/iron-icons';
-import '@polymer/iron-form';
-import '@polymer/paper-icon-button';
 import './pb-table-column.js';
 import { registry } from './urls.js';
-import { translate } from './pb-i18n.js';
+import { get as i18n, translate } from './pb-i18n.js';
 
 /**
  * A table grid based on [gridjs](https://gridjs.io/), which loads its data from a server endpoint
@@ -114,10 +110,24 @@ export class PbTableGrid extends themableMixin(pbMixin(LitElement)) {
     this._pbColumns = [];
     this._columns = [];
     this._selectedRow = null;
+    this._gridI18nInitialized = false;
     this._onTableClick = this._onTableClick.bind(this);
     this._onDocumentClick = this._onDocumentClick.bind(this);
   }
 
+  _applyPaginationPosition() {
+    if (!this.grid || !this.grid.plugin) {
+      return;
+    }
+    const paginationPlugin = this.grid.plugin.get('pagination');
+    if (!paginationPlugin) {
+      return;
+    }
+    paginationPlugin.position = this.paginationTop
+      ? PluginPosition.Header
+      : PluginPosition.Footer;
+  }
+
   async connectedCallback() {
     super.connectedCallback();
     document.addEventListener('click', this._onDocumentClick);
@@ -134,10 +144,15 @@ export class PbTableGrid extends themableMixin(pbMixin(LitElement)) {
     this.subscribeTo(
       'pb-i18n-update',
       ev => {
-        const needsRefresh = this.language && this.language !== ev.detail.language;
+        const needsRefresh = this.language !== ev.detail.language;
         this.language = ev.detail.language;
-        if (needsRefresh) {
-          this._submit();
+        const needsInitialI18nRefresh = !this._gridI18nInitialized;
+        if ((needsRefresh || needsInitialI18nRefresh) && this.grid) {
+          this._gridI18nInitialized = true;
+          if (needsRefresh) {
+            this._applyPaginationPosition();
+            this._submit();
+          }
         }
       },
       [],
@@ -186,6 +201,7 @@ export class PbTableGrid extends themableMixin(pbMixin(LitElement)) {
         height: this.height,
         fixedHeader: true,
         columns: this._columns,
+        language: this._gridLanguageConfig(),
         resizable: this.resizable,
         server: {
           url,
@@ -210,9 +226,9 @@ export class PbTableGrid extends themableMixin(pbMixin(LitElement)) {
           limit: this.perPage,
           server: {
             url: (prev, page, limit) => {
-              const form = this.shadowRoot.getElementById('form');
+              const form = this.shadowRoot.getElementById('search-form');
               if (form) {
-                Object.assign(this._params, form.serializeForm());
+                Object.assign(this._params, this._serializeForm(form));
               }
               this._params = this._paramsFromSubforms(this._params);
               this._params.limit = limit;
@@ -238,11 +254,13 @@ export class PbTableGrid extends themableMixin(pbMixin(LitElement)) {
       };
 
       this.grid = new Grid(config);
-      if (this.paginationTop) {
-        this.grid.plugin.get('pagination').position = PluginPosition.Header;
-      }
+      this._applyPaginationPosition();
       this.grid.on('load', () => {
         this._clearRowSelection();
+        if (this.paginationTop) {
+          // `forceRender()` can reset GridJS plugin state; re-apply after each load.
+          this.grid.plugin.get('pagination').position = PluginPosition.Header;
+        }
         this.emitTo('pb-results-received', {
           params: this._params,
         });
@@ -329,6 +347,38 @@ export class PbTableGrid extends themableMixin(pbMixin(LitElement)) {
     this.grid.forceRender();
   }
 
+  _gridLanguageConfig() {
+    return {
+      search: {
+        placeholder: () => i18n('tableGrid.searchPlaceholder'),
+      },
+      sort: {
+        sortAsc: () => i18n('tableGrid.sortAsc'),
+        sortDesc: () => i18n('tableGrid.sortDesc'),
+      },
+      pagination: {
+        previous: () => i18n('tableGrid.previous'),
+        next: () => i18n('tableGrid.next'),
+        navigate: (page, pages) =>
+          i18n('tableGrid.navigate', {
+            page,
+            pages,
+          }),
+        page: page =>
+          i18n('tableGrid.page', {
+            page,
+          }),
+        showing: () => i18n('tableGrid.showing'),
+        to: () => i18n('tableGrid.to'),
+        of: () => i18n('tableGrid.of'),
+        results: () => i18n('tableGrid.results'),
+      },
+      loading: () => i18n('tableGrid.loading'),
+      noRecordsFound: () => i18n('tableGrid.noRecordsFound'),
+      error: () => i18n('tableGrid.error'),
+    };
+  }
+
   _paramsFromSubforms(params) {
     if (this.subforms) {
       document.querySelectorAll(this.subforms).forEach(form => {
@@ -340,27 +390,33 @@ export class PbTableGrid extends themableMixin(pbMixin(LitElement)) {
     return params;
   }
 
+  _serializeForm(form) {
+    const data = {};
+    const formData = new FormData(form);
+    formData.forEach((value, key) => {
+      data[key] = value;
+    });
+    return data;
+  }
+
   render() {
     return html`
       ${this.search
         ? html`
-            <iron-form id="form">
-              <form action="">
-                <paper-input
-                  id="search"
-                  name="search"
-                  label="${translate('search.search')}"
-                  value="${this._params.search || ''}"
-                  @keyup="${e => (e.keyCode === 13 ? this._submit() : null)}"
-                >
-                  <paper-icon-button
-                    icon="search"
-                    @click="${this._submit}"
-                    slot="suffix"
-                  ></paper-icon-button>
-                </paper-input>
-              </form>
-            </iron-form>
+            <form id="search-form" action="">
+              <input
+                id="search"
+                name="search"
+                type="search"
+                .value="${this._params.search || ''}"
+                aria-label="${translate('tableGrid.search')}"
+                placeholder="${translate('tableGrid.searchPlaceholder')}"
+                @keyup="${e => (e.key === 'Enter' ? this._submit() : null)}"
+              />
+              <button type="button" @click="${this._submit}">
+                ${translate('tableGrid.search')}
+              </button>
+            </form>
           `
         : null}
       <div id="table"></div>

package/.github/workflows/release.js.yml

@@ -1,42 +0,0 @@
-name: Release npm package
-
-on:
-  push:
-    branches:
-      - master
-      - next-3
-
-permissions:
-  contents: read # for checkout
-
-jobs:
-  release:
-    name: Release
-    runs-on: ubuntu-latest
-    permissions:
-      contents: write # to be able to publish a GitHub release
-      issues: write # to be able to comment on released issues
-      pull-requests: write # to be able to comment on released pull requests
-      id-token: write # to enable use of OIDC for trusted publishing and npm provenance
-    steps:
-      - uses: actions/checkout@v5
-      - uses: actions/setup-node@v5
-        with:
-          node-version: "22"
-      - name: npm install and build
-        run:
-          npm ci
-          npm run build:production
-      - name: Build docker image
-        run: docker build -t exist-db -f Dockerfile .
-      - name: Start docker image
-        run: docker run --publish 8080:8080 --detach exist-db
-      - name: Wait for eXist
-        uses: iFaxity/wait-on-action@v1
-        with:
-          resource: http-get://localhost:8080/exist/apps/tei-publisher/api/version
-      - run: npm test
-      - run: npx semantic-release
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          NPM_TOKEN: ${{ secrets.NODE_AUTH_TOKEN }}