{"_rev":"5-fa7c11e5cbdf72fdf72050ea1234750c","time":{"created":"2026-09-09T23:26:22.996Z","modified":"2026-09-09T23:26:23.476Z","1.0.0":"2026-05-07T07:39:15.157Z","1.0.1":"2026-05-08T00:22:32.250Z","1.0.2":"2026-09-09T23:26:23.267Z"},"_id":"@benpley/wappler-data-status","name":"@benpley/wappler-data-status","dist-tags":{"latest":"1.0.2"},"versions":{"1.0.2":{"name":"@benpley/wappler-data-status","version":"1.0.2","description":"A reusable data loading spinner + empty state card component for Wappler App Connect pages. Works with any Wappler backend (Node.js, PHP, ASP.NET, etc.).","main":"app_connect/components.hjson","author":{"name":"Ben Pleysier","url":"https://wappler.io/community"},"license":"MIT","bugs":{"url":"https://wappler.io/community"},"keywords":["wappler-extension","wappler","appconnect","bootstrap5","data","loading","empty-state","spinner","status","php","nodejs","asp.net"],"engines":{"wappler":">=4.0.0"},"publishConfig":{"access":"public"},"_id":"@benpley/wappler-data-status@1.0.2","_nodeVersion":"22.23.2","_npmVersion":"11.12.1","dist":{"integrity":"sha512-E0UZ6SLZRqiX9MYpF2iD2H0i9tjY8rLisMtk6IXgEHW4tZs8bDJgDdBNXg0Fgk5rz0kKQIc8lwpDbx2aHS/KcA==","shasum":"00173b23e442db62ee30762306d461ac27773ed1","tarball":"https://registry.npmjs.org/@benpley/wappler-data-status/-/wappler-data-status-1.0.2.tgz","fileCount":5,"unpackedSize":15379,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIASnscMd583H/1ZbCeZlv5umZCLtpIA/45LnJtBU3j94AiAOZ1ZSTDJp1RdIDdUg3v35rx0pK7oRrvlz7ioSepehdg=="}]},"_npmUser":{"name":"benpley","email":"ben@pleysier.com.au"},"directories":{},"maintainers":[{"name":"benpley","email":"ben@pleysier.com.au"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/wappler-data-status_1.0.2_1788996383128_0.8969929945599862"},"_hasShrinkwrap":false}},"maintainers":[{"name":"benpley","email":"ben@pleysier.com.au"}],"description":"A reusable data loading spinner + empty state card component for Wappler App Connect pages. Works with any Wappler backend (Node.js, PHP, ASP.NET, etc.).","keywords":["wappler-extension","wappler","appconnect","bootstrap5","data","loading","empty-state","spinner","status","php","nodejs","asp.net"],"author":{"name":"Ben Pleysier","url":"https://wappler.io/community"},"bugs":{"url":"https://wappler.io/community"},"license":"MIT","readme":"# wappler-data-status\n\n**Version 1.0.2**\n\nA reusable **data loading spinner + empty state card** component for [Wappler](https://wappler.io) App Connect pages.\n\nAdd the **Data Status** component to any page via Wappler's visual UI, configure the data source and loading state through the Properties panel, and the widget will show a Bootstrap spinner while your Server Connect action is loading, then switch to a friendly empty-state card when there are no records to display.\n\n---\n\n## Features\n\n- 🔄 **Loading spinner** — shown while `loading-state` is truthy\n- 📭 **Empty state card** — shown when the data array is empty (and not loading)\n- ✏️ **Fully customisable** — title, message, and Font Awesome icon are all configurable\n- 🎛️ **Wappler-native** — registers as a proper App Connect component with a visual property panel\n- ⚡ **Zero dependencies** — built on standard Web Components + Wappler's `dmx.Component` API\n\n---\n\n## Requirements\n\nThis is a **client-side only** component — it runs entirely in the browser and is compatible with **any Wappler backend** (Node.js, PHP, ASP.NET, etc.).\n\n| Dependency | Version |\n|---|---|\n| Wappler | ≥ 4.0.0 |\n| Bootstrap | 5.x |\n| Font Awesome | 5.x / 6.x (for icons) |\n\n> **Note:** Node.js is only needed if you install via npm. It is **not** a runtime requirement.\n\n---\n\n## Installation\n\nInstall this extension directly from within Wappler using the **Project Options > Extensions** panel:\n\n1. Open your project in Wappler.\n2. Go to **Project Options** (the gear icon in the top toolbar).\n3. Select the **Extensions** tab.\n4. In the search box, type `wappler-data-status` or `@benpley/wappler-data-status`.\n5. Locate **Data Status** in the results and click **Add**.\n6. Wappler will install the extension and automatically copy the required files to your project.\n\n> **Note:** The extension is installed per-project. Make sure your project is open before installing.\n\n---\n\n## Usage\n\n### Basic HTML\n\n```html\n<data-status\n  id=\"myStatus\"\n  data-source=\"sc_items.data.items\"\n  loading-state=\"sc_items.state.executing\"\n  dmx-bind:empty=\"sc_items.data.items.isEmpty()\"\n  dmx-bind:loading=\"sc_items.state.executing\"\n  empty-title=\"No Items Found\"\n  empty-message=\"Get started by adding your first item. Click the &quot;Add&quot; button to create a new record.\"\n  empty-icon=\"fas fa-folder-open\">\n</data-status>\n```\n\n### In Wappler (visual editor)\n\n1. Drag **Data Status** from the **Layout** component group onto your page.\n2. In the **Properties** panel set:\n   - **Data Source** — the App Connect array expression (e.g. `sc_clients.data.clients`)\n   - **Loading State** — the boolean executing expression (e.g. `sc_clients.state.executing`)\n   - **Title / Message / Icon** — your empty-state copy and a Font Awesome icon class\n\nThe component automatically writes the required `dmx-bind:empty` and `dmx-bind:loading` attributes for you.\n\n---\n\n## Attributes\n\n### Data Status Properties\n\n| Attribute | Type | Default | Description |\n|---|---|---|---|\n| `id` | `text` | — | Unique component id (**required**) |\n| `data-source` | `text` | `scData.data.items` | App Connect array expression to watch for empty state |\n| `loading-state` | `text` | `scData.state.executing` | App Connect boolean expression for the loading state |\n\n### Empty State\n\n| Attribute | Type | Default | Description |\n|---|---|---|---|\n| `empty-title` | `text` | `No Items Found` | Heading shown when the list is empty |\n| `empty-message` | `textarea` | `Get started by adding your first item.` | Paragraph shown when the list is empty |\n| `empty-icon` | `text` | `fas fa-folder-open` | Font Awesome icon class(es) shown in the empty state |\n\n---\n\n## How It Works\n\n1. `data-source` and `loading-state` are plain attribute strings that reference App Connect scopes.\n2. On connect, the component auto-writes `dmx-bind:empty` and `dmx-bind:loading` on itself so Wappler's reactive engine drives visibility.\n3. The inner card renders three states:\n   - **Loading** — spinner visible, empty state hidden, card visible\n   - **Empty** — spinner hidden, empty state visible, card visible\n   - **Has data** — entire card hidden (both spinner and empty state hidden)\n\n---\n\n## File Structure\n\n```\nwappler-data-status/\n├── app_connect/\n│   └── components.hjson      # Wappler component definition\n├── includes/\n│   └── data-status.js        # Web Component + dmx.Component wrapper\n├── README.md\n├── LICENSE.md\n└── package.json\n```\n\n---\n\n## Changelog\n\n### 1.0.2 — 2026-09-10\n- No changes, just a version bump.\n\n### 1.0.1 — 2026-05-08\n- **Fix:** Spinner now correctly hides when data is empty and not loading\n- **Fix:** Empty state no longer appears alongside the spinner during initial load\n- Spinner visibility now toggled via Bootstrap's `d-none` class instead of inline `style.display`, preventing Bootstrap's `d-flex !important` from overriding the hide logic\n- `dmx-bind:empty` auto-expression updated to include `&& !loadingState` guard so the empty state is suppressed while executing\n\n### 1.0.0 — 2026-05-07\n- Initial release\n- Bootstrap 5 spinner + empty-state card\n- Configurable title, message, and Font Awesome icon\n- Full Wappler App Connect integration with visual property panel\n\n---\n\n## License\n\n[MIT](./LICENSE.md) © 2026 Ben Pleysier\n\n## Support\n\nPost questions and bug reports on the [Wappler Community](https://wappler.io/community).\n","readmeFilename":"README.md"}