@operato/list-state 10.15.0

package/package.json

@@ -0,0 +1,73 @@
+{
+  "name": "@operato/list-state",
+  "version": "10.15.0",
+  "description": "Says what a list is doing: loading, could not load, empty, empty because narrowed, cut short, more to load.",
+  "author": "heartyoh",
+  "type": "module",
+  "main": "dist/src/index.js",
+  "module": "dist/src/index.js",
+  "license": "MIT",
+  "operato": true,
+  "publishConfig": {
+    "access": "public",
+    "@operato:registry": "https://registry.npmjs.org"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/hatiolab/operato.git",
+    "directory": "webcomponents/list-state"
+  },
+  "exports": {
+    ".": "./dist/src/index.js",
+    "./package.json": "./package.json",
+    "./ox-list-state.js": "./dist/src/ox-list-state.js",
+    "./ox-empty-note.js": "./dist/src/ox-empty-note.js"
+  },
+  "typesVersions": {
+    "*": {
+      "ox-list-state.js": [
+        "dist/src/ox-list-state.d.ts"
+      ],
+      "ox-empty-note.js": [
+        "dist/src/ox-empty-note.d.ts"
+      ]
+    }
+  },
+  "scripts": {
+    "analyze": "cem analyze --litelement",
+    "build": "tsc && npm run analyze -- --exclude dist",
+    "prepublishOnly": "tsc && npm run analyze -- --exclude dist",
+    "lint": "eslint --ext .ts,.html . --ignore-path .gitignore && prettier \"**/*.ts\" --check --ignore-path .gitignore",
+    "format": "eslint --ext .ts,.html . --fix --ignore-path .gitignore && prettier \"**/*.ts\" --write --ignore-path .gitignore",
+    "test": "tsc && wtr --coverage",
+    "test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch\""
+  },
+  "dependencies": {
+    "@material/web": "^2.0.0",
+    "@operato/i18n": "^10.11.0",
+    "@operato/utils": "^10.15.0",
+    "lit": "^3.1.2"
+  },
+  "devDependencies": {
+    "@custom-elements-manifest/analyzer": "^0.10.0",
+    "@hatiolab/prettier-config": "^1.0.0",
+    "@open-wc/eslint-config": "^12.0.3",
+    "@open-wc/testing": "^4.0.0",
+    "@typescript-eslint/eslint-plugin": "^8.0.0",
+    "@typescript-eslint/parser": "^8.0.0",
+    "@web/dev-server": "^0.4.0",
+    "@web/test-runner": "^0.19.0",
+    "concurrently": "^9.0.0",
+    "eslint": "^9.0.0",
+    "eslint-config-prettier": "^9.1.0",
+    "husky": "^9.0.11",
+    "i18next": "^24.2.1",
+    "lint-staged": "^15.2.2",
+    "prettier": "^3.2.5",
+    "tslib": "^2.3.1",
+    "typescript": "^5.0.4"
+  },
+  "customElements": "custom-elements.json",
+  "prettier": "@hatiolab/prettier-config",
+  "gitHead": "62ac2a23866e7ea579786c4433ef356888dfded8"
+}

package/test/ox-list-state.test.ts

@@ -0,0 +1,84 @@
+/* Elements are compared by presence, not by value: a failing element comparison makes chai render the DOM and hang the runner. */
+import { expect, fixture, html, oneEvent } from '@open-wc/testing'
+
+import '../src/ox-list-state.js'
+import type { OxListState } from '../src/ox-list-state.js'
+
+/**
+ * Every phase says something different, and the two that people confuse - empty and failed - never
+ * look alike. Checked by what is rendered, not by the phase value.
+ */
+
+async function state(props: Partial<OxListState>) {
+  const el = await fixture<OxListState>(html`<ox-list-state></ox-list-state>`)
+  Object.assign(el, props)
+  await el.updateComplete
+  return el
+}
+
+const root = (el: OxListState) => el.renderRoot as ShadowRoot
+const note = (el: OxListState) => root(el).querySelector('ox-empty-note') as HTMLElement | null
+
+describe('ox-list-state', () => {
+  it('shows a spinner while nothing is held', async () => {
+    const el = await state({ loading: true, scale: { shown: 0, loaded: 0 } })
+    expect(root(el).querySelector('[role="status"]')).to.exist
+    expect(note(el) === null, 'absent').to.equal(true)
+  })
+
+  it('says a failed load is a failure, not an empty list, and offers retry', async () => {
+    const el = await state({ error: new Error('down'), scale: { shown: 0, loaded: 0 } })
+
+    expect(note(el)?.getAttribute('role')).to.equal('alert')
+    expect(note(el)?.getAttribute('title')).to.equal('could not load the list')
+
+    const retry = note(el)!.querySelector('md-text-button') as HTMLElement
+    setTimeout(() => retry.click())
+    await oneEvent(el, 'retry')
+  })
+
+  it('keeps rows that were loaded before, and says they are not a fresh result', async () => {
+    const el = await state({ error: new Error('down'), scale: { shown: 5, loaded: 5 } })
+
+    expect(note(el) === null, 'absent').to.equal(true)
+    const band = root(el).querySelector('.band[failed]')
+    expect(band?.getAttribute('role')).to.equal('alert')
+    expect(band?.textContent).to.contain('could not refresh')
+  })
+
+  it('tells empty-because-narrowed apart from empty, with a way to clear', async () => {
+    const narrowed = await state({ scale: { shown: 0, loaded: 9, filtered: true } })
+    expect(note(narrowed)?.getAttribute('title')).to.equal('nothing matches')
+
+    const clear = note(narrowed)!.querySelector('md-text-button') as HTMLElement
+    setTimeout(() => clear.click())
+    await oneEvent(narrowed, 'reset-filters')
+
+    const empty = await state({ scale: { shown: 0, loaded: 0 }, emptyNote: { title: 'no work orders yet' } })
+    expect(note(empty)?.getAttribute('title')).to.equal('no work orders yet')
+    expect(note(empty)?.querySelector('md-text-button') === null, 'absent').to.equal(true)
+  })
+
+  it('shows the reason for an empty list only when one is given', async () => {
+    const withReason = await state({ scale: { shown: 0, loaded: 0 }, reason: 'the source is not connected' })
+    expect(note(withReason)?.querySelector('.why')?.textContent).to.equal('the source is not connected')
+
+    const without = await state({ scale: { shown: 0, loaded: 0 } })
+    expect(note(without)?.querySelector('.why') === null, 'absent').to.equal(true)
+  })
+
+  it('says a capped list was cut, and offers more when there is more', async () => {
+    const el = await state({ scale: { shown: 100, loaded: 100, capped: true } })
+
+    expect(root(el).querySelector('.band:not([failed])')?.textContent).to.contain('showing a partial result')
+
+    const more = root(el).querySelector('.more md-text-button') as HTMLElement
+    setTimeout(() => more.click())
+    await oneEvent(el, 'load-more')
+  })
+
+  it('says nothing extra when everything is here', async () => {
+    const el = await state({ scale: { shown: 7, loaded: 7, total: 7 } })
+    expect(root(el).querySelector('.band, .more, ox-empty-note, [role="status"]') === null, 'absent').to.equal(true)
+  })
+})

package/translations/en.json

@@ -0,0 +1,16 @@
+{
+  "text.list-capped-detail": "narrow by search or filter to see the rest.",
+  "text.list-capped-title": "showing a partial result.",
+  "text.list-clear-filters": "clear filters",
+  "text.list-count": "{shown}",
+  "text.list-count-capped": "first {loaded} shown",
+  "text.list-count-of-loaded": "{shown} of {loaded}",
+  "text.list-count-of-total": "{shown} of {total}",
+  "text.list-empty": "nothing here yet.",
+  "text.list-load-failed": "could not load the list",
+  "text.list-load-more": "load more",
+  "text.list-loading": "loading…",
+  "text.list-nothing-found": "nothing matches",
+  "text.list-refresh-failed": "could not refresh the list",
+  "text.list-retry": "retry"
+}

package/translations/ja.json

@@ -0,0 +1,16 @@
+{
+  "text.list-capped-detail": "検索やフィルターで絞り込んでください。",
+  "text.list-capped-title": "一部のみ表示しています。",
+  "text.list-clear-filters": "条件を消去",
+  "text.list-count": "{shown}件",
+  "text.list-count-capped": "先頭{loaded}件のみ表示",
+  "text.list-count-of-loaded": "{loaded}件中 {shown}件",
+  "text.list-count-of-total": "全{total}件中 {shown}件",
+  "text.list-empty": "まだ何もありません。",
+  "text.list-load-failed": "一覧を読み込めませんでした",
+  "text.list-load-more": "さらに表示",
+  "text.list-loading": "読み込み中…",
+  "text.list-nothing-found": "該当なし",
+  "text.list-refresh-failed": "一覧を更新できませんでした",
+  "text.list-retry": "再試行"
+}

package/translations/ko.json

@@ -0,0 +1,16 @@
+{
+  "text.list-capped-detail": "검색이나 필터로 좁혀 보세요.",
+  "text.list-capped-title": "일부만 표시하고 있습니다.",
+  "text.list-clear-filters": "조건 지우기",
+  "text.list-count": "{shown}건",
+  "text.list-count-capped": "처음 {loaded}건만 표시",
+  "text.list-count-of-loaded": "{loaded}건 중 {shown}건",
+  "text.list-count-of-total": "전체 {total}건 중 {shown}건",
+  "text.list-empty": "아직 아무것도 없습니다.",
+  "text.list-load-failed": "목록을 불러오지 못했습니다",
+  "text.list-load-more": "더 보기",
+  "text.list-loading": "불러오는 중…",
+  "text.list-nothing-found": "조건에 맞는 것이 없습니다",
+  "text.list-refresh-failed": "목록을 새로 불러오지 못했습니다",
+  "text.list-retry": "다시 시도"
+}

package/translations/ms.json

@@ -0,0 +1,16 @@
+{
+  "text.list-capped-detail": "sempitkan dengan carian atau penapis.",
+  "text.list-capped-title": "memaparkan sebahagian hasil.",
+  "text.list-clear-filters": "kosongkan penapis",
+  "text.list-count": "{shown}",
+  "text.list-count-capped": "{loaded} yang pertama sahaja dipaparkan",
+  "text.list-count-of-loaded": "{shown} daripada {loaded}",
+  "text.list-count-of-total": "{shown} daripada {total}",
+  "text.list-empty": "belum ada apa-apa di sini.",
+  "text.list-load-failed": "senarai tidak dapat dimuatkan",
+  "text.list-load-more": "muat lagi",
+  "text.list-loading": "memuatkan…",
+  "text.list-nothing-found": "tiada yang sepadan",
+  "text.list-refresh-failed": "senarai tidak dapat dimuat semula",
+  "text.list-retry": "cuba lagi"
+}

package/translations/zh.json

@@ -0,0 +1,16 @@
+{
+  "text.list-capped-detail": "请用搜索或筛选缩小范围。",
+  "text.list-capped-title": "仅显示部分结果。",
+  "text.list-clear-filters": "清除条件",
+  "text.list-count": "{shown} 条",
+  "text.list-count-capped": "仅显示前 {loaded} 条",
+  "text.list-count-of-loaded": "{loaded} 条中的 {shown} 条",
+  "text.list-count-of-total": "共 {total} 条中的 {shown} 条",
+  "text.list-empty": "这里还没有内容。",
+  "text.list-load-failed": "无法加载列表",
+  "text.list-load-more": "加载更多",
+  "text.list-loading": "加载中…",
+  "text.list-nothing-found": "没有匹配项",
+  "text.list-refresh-failed": "无法刷新列表",
+  "text.list-retry": "重试"
+}