├── .gitignore ├── LICENSE ├── README.md ├── build.js ├── css └── index.css ├── examples ├── README.md ├── columns │ ├── LICENSE │ ├── README.md │ ├── index.html │ ├── package.json │ ├── src │ │ ├── app.svelte │ │ ├── main.js │ │ └── styles.css │ └── vite.config.js ├── demo │ ├── LICENSE │ ├── README.md │ ├── index.html │ ├── package.json │ ├── src │ │ ├── app.svelte │ │ ├── main.js │ │ ├── options.js │ │ └── styles.css │ └── vite.config.js ├── events │ ├── LICENSE │ ├── README.md │ ├── index.html │ ├── package.json │ ├── src │ │ ├── app.svelte │ │ ├── main.js │ │ └── styles.css │ └── vite.config.js ├── hello-world │ ├── LICENSE │ ├── README.md │ ├── index.html │ ├── package.json │ ├── src │ │ ├── app.svelte │ │ ├── main.js │ │ └── styles.css │ └── vite.config.js ├── index.html ├── performance │ ├── LICENSE │ ├── README.md │ ├── index.html │ ├── package.json │ ├── src │ │ ├── app.svelte │ │ ├── main.js │ │ └── styles.css │ └── vite.config.js └── viewer │ ├── dynamic.svelte │ ├── examples.js │ ├── main.js │ └── svelte.svg ├── package-lock.json ├── package.json ├── src ├── datagrid.js ├── framework.js ├── index.js └── ui.js ├── test ├── adapter │ └── svelte.js ├── snapshots │ ├── local-js-columns-1-snap.png │ ├── local-js-demo-1-snap.png │ └── local-js-hello-world-1-snap.png └── visual │ └── local.js └── vite.config.js /.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | /dist 3 | /examples/**/dist 4 | /examples/**/node_modules 5 | /examples/**/package-lock.json 6 | /out 7 | /test/diffs 8 | /work 9 | /*.bat 10 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 ActiveWidgets 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ### 2 | 3 | # ActiveWidgets/Svelte • Datagrid 4 | 5 | [![npm version](https://img.shields.io/npm/v/@activewidgets/svelte)](https://www.npmjs.com/package/@activewidgets/svelte "View this project on npm") 6 | [![npm downloads](https://img.shields.io/npm/dm/@activewidgets/svelte)](https://www.npmjs.com/package/@activewidgets/svelte "npm package downloads/month") 7 | [![Github issues](https://img.shields.io/github/issues/activewidgets/svelte)](https://github.com/activewidgets/svelte/issues "See Github issues") 8 | [![Github repo](https://img.shields.io/github/stars/activewidgets/svelte?label=GitHub&style=social)](https://github.com/activewidgets/svelte "Open Github repo") 9 | 10 | ActiveWidgets is a multi-framework UI component library. This package provides [virtualized datagrid component for Svelte](https://activewidgets.com/svelte/data-grid/). 11 | 12 | [Live demo](https://svelte.activewidgets.com) / [Developer guide](https://activewidgets.com/guide/) / [API reference](https://activewidgets.com/api/) 13 | 14 | [![Datagrid demo](https://cdn.activewidgets.com/assets/screens/demo.png)](https://svelte.activewidgets.com) 15 | 16 | - [Installation](#installation) 17 | - [Usage](#usage) 18 | - [Data properties](#data-properties) 19 | - [User events](#user-events) 20 | 21 | ## Installation 22 | 23 | Add [@activewidgets/svelte](/api/packages/svelte/) to your project dependencies - 24 | 25 | ```sh 26 | > npm i --save @activewidgets/svelte 27 | ``` 28 | 29 | ## Usage 30 | 31 | Now you can import ActiveWidgets component classes - 32 | 33 | ```js 34 | import { Datagrid } from "@activewidgets/svelte"; 35 | ``` 36 | 37 | and use them like any standard Svelte component. 38 | 39 | ```html 40 | 50 | 51 | 52 | ``` 53 | [Live example](https://svelte.activewidgets.com/examples/svelte/hello-world/) | [Source on github](https://github.com/activewidgets/svelte/tree/master/examples/hello-world) | [Edit on stackblitz](https://stackblitz.com/github/activewidgets/svelte/tree/master/examples/hello-world?file=src/app.svelte) 54 | 55 | 56 | ## Data properties 57 | 58 | You have to provide [columns](/api/datagrid/columns/) and [rows](/api/datagrid/rows/) properties to the datagrid to show some data. The properties of each `column` object define how the data will be rendered - 59 | 60 | - [field](/api/datagrid/columns/#field) - where the cell data comes from (string|function) 61 | - [header](/api/datagrid/columns/#header) - column header (string|object) 62 | - [width](/api/datagrid/columns/#width) - column width (number, in pixels) 63 | - [align](/api/datagrid/columns/#align) - cell text alignment (left|right|center) 64 | - [format](/api/datagrid/columns/#format) - number/date format (string|function) 65 | - [fixed](/api/datagrid/columns/#fixed) - fixed (true/false) for columns on the left or right side 66 | 67 | The `style` (string|object) or `className` properties allow to change the styling of the column and cell elements. 68 | 69 | ```html 70 | 84 | 85 | 86 | ``` 87 | [Live example](https://svelte.activewidgets.com/examples/svelte/columns/) | [Source on github](https://github.com/activewidgets/svelte/tree/master/examples/columns) | [Edit on stackblitz](https://stackblitz.com/github/activewidgets/svelte/tree/master/examples/columns?file=src/app.svelte) 88 | 89 | 90 | ## User events 91 | 92 | In addition to the standard DOM keyboard and mouse events the datagrid emits composite 93 | [mouse](/api/datagrid/mouse-event/) event which makes it easier to find the elements affected by the user action - 94 | 95 | ```html 96 | 104 | 105 | onMouse(e.detail)} /> 106 | ``` 107 | [Live example](https://svelte.activewidgets.com/examples/svelte/events/) | [Source on github](https://github.com/activewidgets/svelte/tree/master/examples/events) | [Edit on stackblitz](https://stackblitz.com/github/activewidgets/svelte/tree/master/examples/events?file=src/app.svelte) 108 | 109 | ## More info 110 | 111 | - [Live demo](https://svelte.activewidgets.com) 112 | - [Developer guide](https://activewidgets.com/guide/) 113 | - [API reference](https://activewidgets.com/api/) 114 | - [Licensing](https://activewidgets.com/licenses/) 115 | - [Support forum](https://activewidgets.com/messages/) 116 | 117 | 118 | --- 119 | 120 | [![ActiveWidgets](https://activewidgets.com/include/logo/aw-logo-40.png)](https://activewidgets.com) 121 | -------------------------------------------------------------------------------- /build.js: -------------------------------------------------------------------------------- 1 | import {defineConfig, mergeConfig, build} from 'vite'; 2 | import fs from 'fs'; 3 | 4 | let pkg = JSON.parse(fs.readFileSync('package.json', {encoding:'utf8'})); 5 | 6 | let banner = `/** 7 | * ${pkg.name} ${pkg.version} 8 | * Copyright (C) 2023 ActiveWidgets SARL. All Rights Reserved. 9 | * This code is licensed under the MIT license found in the 10 | * LICENSE file in the root directory of this package. 11 | */ 12 | `; 13 | 14 | let base = defineConfig({ 15 | configFile: false, 16 | build: { 17 | outDir: 'dist', 18 | emptyOutDir: false, 19 | sourcemap: true, 20 | reportCompressedSize: false, 21 | lib : { 22 | entry: 'src/index.js', 23 | formats: ['es'] 24 | }, 25 | rollupOptions: { 26 | external: [ 27 | 'svelte/internal', 28 | '@activewidgets/frameworks/svelte', 29 | '@activewidgets/datagrid/index.js', 30 | '@activewidgets/datagrid/style-inject', 31 | '@activewidgets/ui/index.js', 32 | '@activewidgets/ui/style-inject' 33 | ] 34 | } 35 | }, 36 | esbuild: { 37 | banner 38 | } 39 | }); 40 | 41 | 42 | await build(mergeConfig(base, defineConfig({ 43 | build: { 44 | emptyOutDir: true, 45 | lib: { 46 | fileName: 'main' 47 | }, 48 | rollupOptions: { 49 | external: [ 50 | '@activewidgets/datagrid', 51 | '@activewidgets/ui' 52 | ] 53 | } 54 | } 55 | }))); 56 | 57 | 58 | await build(mergeConfig(base, defineConfig({ 59 | publicDir: './css', 60 | build: { 61 | lib: { 62 | fileName: 'index' 63 | } 64 | }, 65 | resolve: { 66 | alias: { 67 | '@activewidgets/datagrid': '@activewidgets/datagrid/index.js', 68 | '@activewidgets/ui': '@activewidgets/ui/index.js' 69 | } 70 | } 71 | }))); 72 | 73 | 74 | await build(mergeConfig(base, defineConfig({ 75 | build: { 76 | lib: { 77 | fileName: 'style-inject' 78 | } 79 | }, 80 | resolve: { 81 | alias: { 82 | '@activewidgets/datagrid': '@activewidgets/datagrid/style-inject', 83 | '@activewidgets/ui': '@activewidgets/ui/style-inject', 84 | } 85 | } 86 | }))); 87 | -------------------------------------------------------------------------------- /css/index.css: -------------------------------------------------------------------------------- 1 | @import "@activewidgets/ui/index.css"; 2 | @import "@activewidgets/datagrid/index.css"; -------------------------------------------------------------------------------- /examples/README.md: -------------------------------------------------------------------------------- 1 | 2 | # ![](viewer/svelte.svg) 3 | 4 | coming soon... -------------------------------------------------------------------------------- /examples/columns/LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 ActiveWidgets 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /examples/columns/README.md: -------------------------------------------------------------------------------- 1 | 2 | [Open fullscreen](https://svelte.activewidgets.com/columns/) | [Source on github](https://github.com/activewidgets/svelte/tree/master/examples/columns) | [Edit on stackblitz](https://stackblitz.com/github/activewidgets/svelte/tree/master/examples/columns?file=src/app.svelte) 3 | 4 | This example shows how to configure datagrid columns: 5 | 6 | ```html 7 | 28 | 29 | 30 | ``` 31 | 32 | Assign an array of column descriptor objects to the [columns](https://activewidgets.com/api/datagrid/columns/) property. 33 | 34 | Read more: 35 | 36 | - [Svelte Datagrid - Get started](https://activewidgets.com/guide/env/svelte/#data-properties) 37 | - [API - columns](https://activewidgets.com/api/datagrid/columns/) 38 | - [API - rows](https://activewidgets.com/api/datagrid/rows/) -------------------------------------------------------------------------------- /examples/columns/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Columns, rows - ActiveWidgets/Svelte 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /examples/columns/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "svelte-columns", 3 | "version": "1.0.0", 4 | "description": "Columns, rows - ActiveWidgets/Svelte", 5 | "license": "MIT", 6 | "main": "src/main.js", 7 | "scripts": { 8 | "start": "vite --open /", 9 | "build": "vite build" 10 | }, 11 | "dependencies": { 12 | "@activewidgets/examples": "*", 13 | "@activewidgets/svelte": "^3", 14 | "svelte": "^3.44" 15 | }, 16 | "devDependencies": { 17 | "rollup-plugin-svelte": "^7", 18 | "vite": "^4" 19 | }, 20 | "repository": { 21 | "type": "git", 22 | "url": "https://github.com/activewidgets/svelte.git", 23 | "directory": "examples/columns" 24 | }, 25 | "private": true 26 | } 27 | -------------------------------------------------------------------------------- /examples/columns/src/app.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 | 30 | 31 | -------------------------------------------------------------------------------- /examples/columns/src/main.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) ActiveWidgets SARL. All Rights Reserved. 3 | * This source code is licensed under the MIT license found in the 4 | * LICENSE file in the root directory of this source tree. 5 | */ 6 | 7 | import App from './app.svelte'; 8 | 9 | var app = new App({ 10 | target: document.body 11 | }); 12 | 13 | export default app; -------------------------------------------------------------------------------- /examples/columns/src/styles.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) ActiveWidgets SARL. All Rights Reserved. 3 | * This source code is licensed under the MIT license found in the 4 | * LICENSE file in the root directory of this source tree. 5 | */ 6 | 7 | body { 8 | margin: 60px; 9 | font: 14px/1.2143 'Segoe UI', 'Avenir', 'Helvetica Neue', 'Tahoma', sans-serif; 10 | } 11 | 12 | @media (max-width: 899px) { 13 | body { margin: 20px; } 14 | } 15 | 16 | .ax-headers-view { 17 | font-weight: bold; 18 | color: #666; 19 | border-bottom: 1px solid #aaa; 20 | } 21 | 22 | .ax-gridlines { 23 | border-bottom: 1px solid #eee; 24 | } 25 | -------------------------------------------------------------------------------- /examples/columns/vite.config.js: -------------------------------------------------------------------------------- 1 | import svelte from 'rollup-plugin-svelte'; 2 | 3 | export default { 4 | plugins: [svelte()] 5 | }; 6 | -------------------------------------------------------------------------------- /examples/demo/LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 ActiveWidgets 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /examples/demo/README.md: -------------------------------------------------------------------------------- 1 | 2 | [Open fullscreen](https://svelte.activewidgets.com/demo/) | [Source on github](https://github.com/activewidgets/svelte/tree/master/examples/demo) | [Edit on stackblitz](https://stackblitz.com/github/activewidgets/svelte/tree/master/examples/demo?file=src/app.svelte) 3 | 4 | This is a simple demo showing some of the features of ActiveWidgets/Svelte datagrid - 5 | 6 | - Virtualized scrolling 7 | - Fixed headers and columns 8 | - Custom cell templates (slots with props) 9 | - Dynamic styles 10 | - Calculated values 11 | - Multi-line/multi-value cells 12 | - Cell images, icons, custom styles 13 | - Rendering outside of cell/row boundaries 14 | - International number/date formats 15 | - Custom column types (presets) 16 | 17 | [Svelte Datagrid - Get started](https://activewidgets.com/guide/env/svelte/) 18 | 19 | ### Virtualized scrolling 20 | 21 | The datagrid implements virtualized scrolling - rendering only the visible rows and adding/removing extra rows on the fly 22 | while the content window shifts up/down. We use CSS transforms for the smooth and natural movement of the content layer. 23 | This way scrolling is GPU-accelerated and runs in a separate composer thread not affected by scripting 24 | and rendering of the new rows. 25 | 26 | The dataset in this example is not very big, however with virtualized scrolling the datagrid performance depends 27 | only on the window size and not the total number of rows, so the datagrid can easily handle millions of rows. 28 | 29 | Virtualized scrolling is on by default. 30 | 31 | ### Fixed headers and columns 32 | 33 | The headers section remains always visible - it does not move up/down with the regular rows. 34 | You can also make left and/or right columns 'fixed', so they remain always visible during horizontal scroll. 35 | 36 | ```js 37 | const columns = [ 38 | { header: 'Company', template: 'company', fixed: true }, 39 | // ... 40 | ]; 41 | ``` 42 | 43 | ### Custom cell templates 44 | 45 | One of the goals for the new component was to make it very easy to customize every part of the datagrid. 46 | In this example we use Svelte named slots to define several custom cell templates. 47 | 48 | ```html 49 | 50 | 51 |
52 |
{data.customerID}
53 |
{data.companyName}
54 |
55 | 56 |
57 |
{data.address}
58 |
{data.postalCode} {data.city}
59 |
60 | 61 |
62 | {text}{text} 63 |
64 | 65 | 66 | ``` 67 | 68 | All you have to do it to add a named slot with props to the datagrid and then use its name in template property in column descriptor. 69 | 70 | ```js 71 | const columns = [ 72 | { header: 'Company', template: 'company', fixed: true }, 73 | { header: 'Contact', template: 'contact', style: 'background:#f4f4f4', key: 'contact' }, 74 | { header: 'Address', template: 'address', key: 'address' }, 75 | // ... 76 | ]; 77 | ``` 78 | 79 | ### Dynamic styles 80 | 81 | You can access and modify a row model object via onRow event before render. Inspect the row data 82 | and dynamically change the row style or the template or the individual cells (via cells object). 83 | 84 | ```js 85 | function onRow(row){ 86 | 87 | const {data, cells} = row; 88 | 89 | // dynamic row style 90 | if (data.country == 'France'){ 91 | row.class = 'bg-green'; 92 | } 93 | 94 | // dynamic cell styles 95 | if (data.city == 'London'){ 96 | cells.address = {class: 'circle'}; 97 | } 98 | 99 | if (data.contactTitle == 'Owner'){ 100 | cells.contact = {class: 'star'}; 101 | } 102 | } 103 | ``` 104 | 105 | ### Calculated values 106 | 107 | You can also create new columns with dynamic/calculated data - just assign the value 108 | (or complete cell context, including template, style etc.) to the cells object matching the key (or field) in the column descriptor. 109 | 110 | ```js 111 | 112 | const columns = [ 113 | // ... 114 | { header: 'Last Order', type: 'money', field: 'amount' }, 115 | { header: 'Order Date', type: 'date', field: 'date' } 116 | ]; 117 | 118 | 119 | function onRow(row){ 120 | 121 | const {data, cells} = row; 122 | 123 | // calculated values 124 | cells.amount = 2000 * Math.random(); 125 | cells.date = Date.now() - 500 * 86400000 * Math.random(); 126 | } 127 | ``` 128 | 129 | ### Rendering outside of cell/row boundaries 130 | 131 | The row and cell templates can have style overflow: visible - that allows doing many things beyond traditional datagrid capabilities, 132 | like popups, overlays, gantt charts, schedulers etc. 133 | 134 | 135 | Read more: 136 | 137 | - [Svelte Datagrid - Get started](https://activewidgets.com/guide/env/svelte/) 138 | - [API Reference](https://activewidgets.com/api/) -------------------------------------------------------------------------------- /examples/demo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Demo - ActiveWidgets/Svelte 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /examples/demo/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "svelte-demo", 3 | "version": "1.0.0", 4 | "description": "Demo - ActiveWidgets/Svelte", 5 | "license": "MIT", 6 | "main": "src/main.js", 7 | "scripts": { 8 | "start": "vite --open /", 9 | "build": "vite build" 10 | }, 11 | "dependencies": { 12 | "@activewidgets/examples": "*", 13 | "@activewidgets/options": "^3", 14 | "@activewidgets/svelte": "^3", 15 | "svelte": "^3.44" 16 | }, 17 | "devDependencies": { 18 | "rollup-plugin-svelte": "^7", 19 | "vite": "^4" 20 | }, 21 | "repository": { 22 | "type": "git", 23 | "url": "https://github.com/activewidgets/svelte.git", 24 | "directory": "examples/demo" 25 | }, 26 | "private": true 27 | } 28 | -------------------------------------------------------------------------------- /examples/demo/src/app.svelte: -------------------------------------------------------------------------------- 1 | 29 | 30 | 31 | 32 | 33 |
34 |
{data.customerID}
35 |
{data.companyName}
36 |
37 | 38 |
39 |
{data.contactName}
40 |
{data.contactTitle}
41 |
42 | 43 |
44 |
{data.address}
45 |
{data.postalCode} {data.city}
46 |
47 | 48 |
49 | {text}{text} 50 |
51 | 52 |
53 |
{data.phone}
54 |
{data.fax}
55 |
56 | 57 | -------------------------------------------------------------------------------- /examples/demo/src/main.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) ActiveWidgets SARL. All Rights Reserved. 3 | * This source code is licensed under the MIT license found in the 4 | * LICENSE file in the root directory of this source tree. 5 | */ 6 | 7 | import App from './app.svelte'; 8 | 9 | var app = new App({ 10 | target: document.body 11 | }); 12 | 13 | export default app; -------------------------------------------------------------------------------- /examples/demo/src/options.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) ActiveWidgets SARL. All Rights Reserved. 3 | * This source code is licensed under the MIT license found in the 4 | * LICENSE file in the root directory of this source tree. 5 | */ 6 | 7 | import { intl, format, column, type, row, cell } from "@activewidgets/options"; 8 | 9 | 10 | export default [ 11 | 12 | // enable intl. number/date formats 13 | intl('en-US'), 14 | 15 | // define named formats 16 | format('money', {style: 'decimal', minimumFractionDigits: 2, maximumFractionDigits: 2}), 17 | format('date', {year: 'numeric', month: 'short', day: 'numeric'}), 18 | 19 | // set column defaults 20 | column({width: 200}), 21 | 22 | // define reusable column types 23 | type('country flag', {template: 'country', width: 170}), 24 | type('phone & fax', {template: 'phone', width: 150}), 25 | type('money', {format: 'money', width: 100, align: 'right'}), 26 | type('date', {format: 'date', width: 150, align: 'right'}), 27 | 28 | // customize row 29 | row(data => { 30 | if (data.country == 'France'){ 31 | return {class:'bg-green'}; 32 | } 33 | }), 34 | 35 | // customize cells 36 | cell((value, data, column) => { 37 | 38 | if (data.city == 'London' && column.key == 'address'){ 39 | return {class: 'circle'}; 40 | } 41 | 42 | if (data.contactTitle == 'Owner' && column.key == 'contact'){ 43 | return {class: 'star'}; 44 | } 45 | }) 46 | ]; -------------------------------------------------------------------------------- /examples/demo/src/styles.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) ActiveWidgets SARL. All Rights Reserved. 3 | * This source code is licensed under the MIT license found in the 4 | * LICENSE file in the root directory of this source tree. 5 | */ 6 | 7 | body { 8 | margin: 60px; 9 | font: 14px/1.2143 'Segoe UI', 'Avenir', 'Helvetica Neue', 'Tahoma', sans-serif; 10 | } 11 | 12 | @media (max-width: 899px) { 13 | body { margin: 20px; } 14 | } 15 | 16 | .ax-datagrid { 17 | height: calc(100vh - 120px)!important; 18 | min-height: 400px; 19 | } 20 | 21 | .ax-headers-view { 22 | font-weight: bold; 23 | color: #666; 24 | border-bottom: 1px solid #aaa; 25 | } 26 | 27 | .ax-gridlines { 28 | border-bottom: 1px solid #eee; 29 | } 30 | 31 | .ax-cell:hover { 32 | background: rgba(0,127,255,0.1); 33 | } 34 | 35 | .ax-cell > div { 36 | width: 100%; 37 | overflow: hidden; 38 | text-overflow: ellipsis; 39 | } 40 | 41 | .ax-cell > img { 42 | width: 32px; 43 | height: 32px; 44 | vertical-align: middle; 45 | margin: 0px 10px; 46 | } 47 | 48 | .small { 49 | font-size: 13px; 50 | line-height: 1.308; 51 | color: #444; 52 | } 53 | 54 | .bold { 55 | font-weight: bold; 56 | color: #666; 57 | } 58 | 59 | .blue { 60 | color: #369; 61 | } 62 | 63 | .italic { 64 | font-style: italic; 65 | } 66 | 67 | .phone:before { 68 | content: '\260E'; 69 | color: #666; 70 | margin-right: 10px; 71 | } 72 | 73 | .fax:before { 74 | content: 'fax'; 75 | color: #666; 76 | margin-right: 10px; 77 | font-size: 11px; 78 | } 79 | 80 | .circle { 81 | position: relative; 82 | overflow: visible!important; 83 | } 84 | 85 | .circle span { 86 | font-weight: bold; 87 | color: #900; 88 | } 89 | 90 | .circle:after { 91 | content: ''; 92 | position: absolute; 93 | top: -15px; 94 | bottom: -15px; 95 | left: -30px; 96 | width: 180px; 97 | border: 2px dotted red; 98 | border-radius: 100px; 99 | background: rgba(255, 0, 0, 0.03); 100 | } 101 | 102 | 103 | .star .small { 104 | overflow: visible; 105 | } 106 | 107 | .star .small:after { 108 | content: '\2605'; 109 | display: inline-block; 110 | margin: -1em 5px; 111 | font-size: 2em; 112 | color: #fb0; 113 | text-shadow: 1px 1px 2px #333; 114 | vertical-align: -3px; 115 | } 116 | 117 | .bg-green { 118 | background: rgba(0, 255, 0, 0.05); 119 | } -------------------------------------------------------------------------------- /examples/demo/vite.config.js: -------------------------------------------------------------------------------- 1 | import svelte from 'rollup-plugin-svelte'; 2 | 3 | export default { 4 | plugins: [svelte()] 5 | }; 6 | -------------------------------------------------------------------------------- /examples/events/LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 ActiveWidgets 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /examples/events/README.md: -------------------------------------------------------------------------------- 1 | 2 | [Open fullscreen](https://svelte.activewidgets.com/events/) | [Source on github](https://github.com/activewidgets/svelte/tree/master/examples/events) | [Edit on stackblitz](https://stackblitz.com/github/activewidgets/svelte/tree/master/examples/events?file=src/app.svelte) 3 | 4 | The datagrid emits composite [mouse](https://activewidgets.com/api/datagrid/mouse-event/) event 5 | which makes it easier to find the elements affected by the user action - 6 | 7 | ```html 8 | 16 | 17 | onMouse(e.detail)} /> 18 | ``` 19 | 20 | Please note that you have to use `event.detail` property to access the event data. 21 | 22 | Read more: 23 | 24 | - [Svelte Datagrid - Get started](https://activewidgets.com/guide/env/svelte/#user-events) 25 | - [API - mouse event](https://activewidgets.com/api/datagrid/mouse-event/) -------------------------------------------------------------------------------- /examples/events/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | User events - ActiveWidgets/Svelte 5 | 6 | 7 | 8 |

➜ Click on a datagrid row to open an alert box

9 | 10 | 11 | -------------------------------------------------------------------------------- /examples/events/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "svelte-events", 3 | "version": "1.0.0", 4 | "description": "User events - ActiveWidgets/Svelte", 5 | "license": "MIT", 6 | "main": "src/main.js", 7 | "scripts": { 8 | "start": "vite --open /", 9 | "build": "vite build" 10 | }, 11 | "dependencies": { 12 | "@activewidgets/examples": "*", 13 | "@activewidgets/svelte": "^3", 14 | "svelte": "^3.44" 15 | }, 16 | "devDependencies": { 17 | "rollup-plugin-svelte": "^7", 18 | "vite": "^4" 19 | }, 20 | "repository": { 21 | "type": "git", 22 | "url": "https://github.com/activewidgets/svelte.git", 23 | "directory": "examples/events" 24 | }, 25 | "private": true 26 | } 27 | -------------------------------------------------------------------------------- /examples/events/src/app.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 | 29 | 30 | -------------------------------------------------------------------------------- /examples/events/src/main.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) ActiveWidgets SARL. All Rights Reserved. 3 | * This source code is licensed under the MIT license found in the 4 | * LICENSE file in the root directory of this source tree. 5 | */ 6 | 7 | import App from './app.svelte'; 8 | 9 | var app = new App({ 10 | target: document.body, 11 | anchor: document.body.firstElementChild 12 | }); 13 | 14 | export default app; -------------------------------------------------------------------------------- /examples/events/src/styles.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) ActiveWidgets SARL. All Rights Reserved. 3 | * This source code is licensed under the MIT license found in the 4 | * LICENSE file in the root directory of this source tree. 5 | */ 6 | 7 | body { 8 | margin: 60px; 9 | font: 14px/1.2143 'Segoe UI', 'Avenir', 'Helvetica Neue', 'Tahoma', sans-serif; 10 | } 11 | 12 | @media (max-width: 899px) { 13 | body { margin: 20px; } 14 | } 15 | 16 | .ax-datagrid { 17 | max-height: 200px; 18 | } 19 | 20 | .ax-headers-view { 21 | font-weight: bold; 22 | color: #666; 23 | border-bottom: 1px solid #aaa; 24 | } 25 | 26 | .ax-gridlines { 27 | border-bottom: 1px solid #eee; 28 | } 29 | -------------------------------------------------------------------------------- /examples/events/vite.config.js: -------------------------------------------------------------------------------- 1 | import svelte from 'rollup-plugin-svelte'; 2 | 3 | export default { 4 | plugins: [svelte()] 5 | }; 6 | -------------------------------------------------------------------------------- /examples/hello-world/LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 ActiveWidgets 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /examples/hello-world/README.md: -------------------------------------------------------------------------------- 1 | 2 | [Open fullscreen](https://svelte.activewidgets.com/hello-world/) | [Source on github](https://github.com/activewidgets/svelte/tree/master/examples/hello-world) | [Edit on stackblitz](https://stackblitz.com/github/activewidgets/svelte/tree/master/examples/hello-world?file=src/app.svelte) 3 | 4 | This is a small example to get started with ActiveWidgets components for Svelte. 5 | 6 | First, import the component classes: 7 | 8 | ```js 9 | import { Datagrid } from '@activewidgets/svelte'; 10 | ``` 11 | 12 | Then initialize or load the data array: 13 | 14 | ```js 15 | let rows = [ 16 | { message: 'Hello, World!' } 17 | ]; 18 | ``` 19 | 20 | Finally, create the component and assign the data: 21 | 22 | ```html 23 | 24 | ``` 25 | 26 | Thats all! 27 | 28 | Read more: 29 | 30 | - [Svelte Datagrid - Get started](https://activewidgets.com/guide/env/svelte/) -------------------------------------------------------------------------------- /examples/hello-world/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Hello World - ActiveWidgets/Svelte 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /examples/hello-world/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "svelte-hello-world", 3 | "version": "1.0.0", 4 | "description": "Hello World - ActiveWidgets/Svelte", 5 | "license": "MIT", 6 | "main": "src/main.js", 7 | "scripts": { 8 | "start": "vite --open /", 9 | "build": "vite build" 10 | }, 11 | "dependencies": { 12 | "@activewidgets/svelte": "^3", 13 | "svelte": "^3.44" 14 | }, 15 | "devDependencies": { 16 | "rollup-plugin-svelte": "^7", 17 | "vite": "^4" 18 | }, 19 | "repository": { 20 | "type": "git", 21 | "url": "https://github.com/activewidgets/svelte.git", 22 | "directory": "examples/hello-world" 23 | }, 24 | "private": true 25 | } 26 | -------------------------------------------------------------------------------- /examples/hello-world/src/app.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 | 17 | 18 | -------------------------------------------------------------------------------- /examples/hello-world/src/main.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) ActiveWidgets SARL. All Rights Reserved. 3 | * This source code is licensed under the MIT license found in the 4 | * LICENSE file in the root directory of this source tree. 5 | */ 6 | 7 | import App from './app.svelte'; 8 | 9 | var app = new App({ 10 | target: document.body 11 | }); 12 | 13 | export default app; -------------------------------------------------------------------------------- /examples/hello-world/src/styles.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) ActiveWidgets SARL. All Rights Reserved. 3 | * This source code is licensed under the MIT license found in the 4 | * LICENSE file in the root directory of this source tree. 5 | */ 6 | 7 | body { 8 | margin: 60px; 9 | font: 14px/1.2143 'Segoe UI', 'Avenir', 'Helvetica Neue', 'Tahoma', sans-serif; 10 | } 11 | 12 | @media (max-width: 899px) { 13 | body { margin: 20px; } 14 | } 15 | 16 | .ax-datagrid { 17 | max-height: 80px; 18 | } 19 | 20 | .ax-headers-view { 21 | font-weight: bold; 22 | color: #666; 23 | border-bottom: 1px solid #aaa; 24 | } 25 | 26 | .ax-gridlines { 27 | border-bottom: 1px solid #eee; 28 | } 29 | -------------------------------------------------------------------------------- /examples/hello-world/vite.config.js: -------------------------------------------------------------------------------- 1 | import svelte from 'rollup-plugin-svelte'; 2 | 3 | export default { 4 | plugins: [svelte()] 5 | }; 6 | -------------------------------------------------------------------------------- /examples/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | ActiveWidgets/Svelte Datagrid - Examples 5 | 6 | 7 | 8 | 9 | 10 |
Loading...
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /examples/performance/LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 ActiveWidgets 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /examples/performance/README.md: -------------------------------------------------------------------------------- 1 | 2 | [Open fullscreen](https://svelte.activewidgets.com/performance/) | [Source on github](https://github.com/activewidgets/svelte/tree/master/examples/performance) | [Edit on stackblitz](https://stackblitz.com/github/activewidgets/svelte/tree/master/examples/performance?file=src/app.svelte) 3 | 4 | This example shows virtualized scrolling + lazy loading performance (load as you scroll). 5 | 6 | ```html 7 | 19 | 20 | 21 | ``` 22 | 23 | Read more: 24 | 25 | - [Svelte Datagrid - Get started](https://activewidgets.com/guide/env/svelte/#data-properties) 26 | - [API - columns](https://activewidgets.com/api/datagrid/columns/) 27 | - [API - rows](https://activewidgets.com/api/datagrid/rows/) -------------------------------------------------------------------------------- /examples/performance/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Performance - ActiveWidgets/Svelte 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /examples/performance/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "svelte-performance", 3 | "version": "1.0.0", 4 | "description": "Performance - ActiveWidgets/Svelte", 5 | "license": "MIT", 6 | "main": "src/main.js", 7 | "scripts": { 8 | "start": "vite --open /", 9 | "build": "vite build" 10 | }, 11 | "dependencies": { 12 | "@activewidgets/examples": "*", 13 | "@activewidgets/options": "^3", 14 | "@activewidgets/svelte": "^3", 15 | "svelte": "^3.44" 16 | }, 17 | "devDependencies": { 18 | "rollup-plugin-svelte": "^7", 19 | "vite": "^4" 20 | }, 21 | "repository": { 22 | "type": "git", 23 | "url": "https://github.com/activewidgets/svelte.git", 24 | "directory": "examples/performance" 25 | }, 26 | "private": true 27 | } 28 | -------------------------------------------------------------------------------- /examples/performance/src/app.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 | 50 | 51 | -------------------------------------------------------------------------------- /examples/performance/src/main.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) ActiveWidgets SARL. All Rights Reserved. 3 | * This source code is licensed under the MIT license found in the 4 | * LICENSE file in the root directory of this source tree. 5 | */ 6 | 7 | import App from './app.svelte'; 8 | 9 | var app = new App({ 10 | target: document.body 11 | }); 12 | 13 | export default app; -------------------------------------------------------------------------------- /examples/performance/src/styles.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) ActiveWidgets SARL. All Rights Reserved. 3 | * This source code is licensed under the MIT license found in the 4 | * LICENSE file in the root directory of this source tree. 5 | */ 6 | 7 | body { 8 | margin: 60px; 9 | font: 14px/1.2143 'Segoe UI', 'Avenir', 'Helvetica Neue', 'Tahoma', sans-serif; 10 | } 11 | 12 | @media (max-width: 899px) { 13 | body { margin: 20px; } 14 | } 15 | 16 | .ax-datagrid { 17 | height: calc(100vh - 120px); 18 | min-height: 400px; 19 | } 20 | 21 | .ax-headers-view { 22 | font-weight: bold; 23 | color: #666; 24 | border-bottom: 1px solid #aaa; 25 | } 26 | 27 | .ax-gridlines { 28 | border-bottom: 1px solid #eee; 29 | } 30 | -------------------------------------------------------------------------------- /examples/performance/vite.config.js: -------------------------------------------------------------------------------- 1 | import svelte from 'rollup-plugin-svelte'; 2 | 3 | export default { 4 | plugins: [svelte()] 5 | }; 6 | -------------------------------------------------------------------------------- /examples/viewer/dynamic.svelte: -------------------------------------------------------------------------------- 1 |  6 | 7 | 11 | 12 | {#if props} 13 | 14 | {/if} -------------------------------------------------------------------------------- /examples/viewer/examples.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) ActiveWidgets SARL. All Rights Reserved. 3 | * This source code is licensed under the MIT license found in the 4 | * LICENSE file in the root directory of this source tree. 5 | */ 6 | 7 | import performance from '../performance/README.md'; 8 | import hello_world from '../hello-world/README.md'; 9 | import columns from '../columns/README.md'; 10 | import events from '../events/README.md'; 11 | 12 | 13 | export const Local = { 14 | 'Performance': {path: 'performance', readme: performance}, 15 | 'Hello, World!': {path: 'hello-world', readme: hello_world}, 16 | 'Columns, rows': {path: 'columns', readme: columns}, 17 | 'User events': {path: 'events', readme: events} 18 | }; 19 | -------------------------------------------------------------------------------- /examples/viewer/main.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) ActiveWidgets SARL. All Rights Reserved. 3 | * This source code is licensed under the MIT license found in the 4 | * LICENSE file in the root directory of this source tree. 5 | */ 6 | 7 | import {Viewer} from '@activewidgets/examples'; 8 | import * as pages from './examples.js'; 9 | import readme from '../demo/README.md'; 10 | import logo from './svelte.svg'; 11 | import pkg from '../../package.json'; 12 | import Dynamic from './dynamic.svelte'; 13 | 14 | 15 | let framework = 'Svelte', 16 | container = document.getElementById('app'); 17 | 18 | container.innerHTML = ''; 19 | 20 | let dynamic = new Dynamic({ 21 | target: container 22 | }); 23 | 24 | 25 | function mount(component, props){ 26 | dynamic.$set({props}); 27 | } 28 | 29 | 30 | function clean(){ 31 | dynamic.$set({props: undefined}); 32 | } 33 | 34 | 35 | const viewer = new Viewer({ 36 | target: document.body, 37 | props: {framework, pkg, logo, readme, pages, mount, clean} 38 | }); 39 | -------------------------------------------------------------------------------- /examples/viewer/svelte.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@activewidgets/svelte", 3 | "version": "3.5.0", 4 | "description": "Datagrid component for Svelte", 5 | "author": "ActiveWidgets SARL", 6 | "license": "MIT", 7 | "type": "module", 8 | "main": "./dist/main.js", 9 | "sideEffects": false, 10 | "exports": { 11 | ".": "./dist/main.js", 12 | "./index.js": "./dist/index.js", 13 | "./index.css": "./dist/index.css", 14 | "./style-inject": "./dist/style-inject.js" 15 | }, 16 | "files": [ 17 | "dist", 18 | "LICENSE", 19 | "README.md" 20 | ], 21 | "scripts": { 22 | "build": "node build.js", 23 | "examples": "npm run build && vite build", 24 | "prepack": "npm run build", 25 | "preview": "npm run examples && vite preview --open /", 26 | "start": "vite --open /", 27 | "test": "npm run examples && vitest run" 28 | }, 29 | "dependencies": { 30 | "@activewidgets/datagrid": "3.5.0", 31 | "@activewidgets/frameworks": "3.5.0", 32 | "@activewidgets/ui": "*" 33 | }, 34 | "peerDependencies": { 35 | "svelte": "^3.44" 36 | }, 37 | "devDependencies": { 38 | "@activewidgets/examples": "0.0.16", 39 | "@activewidgets/options": "3.5.0", 40 | "@activewidgets/puppeteer": "0.1.3", 41 | "@testing-library/svelte": "^3", 42 | "rollup-plugin-md": "^1", 43 | "rollup-plugin-svelte": "^7", 44 | "svelte": "^3.44", 45 | "vite": "^4", 46 | "vitest": "latest" 47 | }, 48 | "overrides": { 49 | "jest": "npm:vitest" 50 | }, 51 | "repository": { 52 | "type": "git", 53 | "url": "https://github.com/activewidgets/svelte.git" 54 | }, 55 | "keywords": [ 56 | "svelte", 57 | "datagrid", 58 | "datatable", 59 | "virtualized", 60 | "scrolling", 61 | "grid", 62 | "table", 63 | "virtual", 64 | "data-grid", 65 | "data-table", 66 | "svelte-data-grid", 67 | "svelte-data-table", 68 | "activewidgets" 69 | ], 70 | "bugs": { 71 | "url": "https://github.com/activewidgets/svelte/issues" 72 | }, 73 | "homepage": "https://activewidgets.com/svelte/data-grid/" 74 | } 75 | -------------------------------------------------------------------------------- /src/datagrid.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) ActiveWidgets SARL. All Rights Reserved. 3 | * This source code is licensed under the MIT license found in the 4 | * LICENSE file in the root directory of this source tree. 5 | */ 6 | 7 | import {SvelteComponent} from './framework.js'; 8 | import {Datagrid as _Datagrid, Row as _Row, Cells as _Cells} from '@activewidgets/datagrid'; 9 | 10 | export const Datagrid = SvelteComponent(_Datagrid); 11 | export const Row = SvelteComponent(_Row); 12 | export const Cells = SvelteComponent(_Cells); 13 | -------------------------------------------------------------------------------- /src/framework.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) ActiveWidgets SARL. All Rights Reserved. 3 | * This source code is licensed under the MIT license found in the 4 | * LICENSE file in the root directory of this source tree. 5 | */ 6 | 7 | import converter from '@activewidgets/frameworks/svelte'; 8 | import * as Svelte from 'svelte/internal'; 9 | 10 | export const {component: SvelteComponent} = converter(Svelte); 11 | 12 | export const Content = SvelteComponent(({slots}) => { 13 | return ({src, params}) => src ? src(params) : slots.default && slots.default(); 14 | }); -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) ActiveWidgets SARL. All Rights Reserved. 3 | * This source code is licensed under the MIT license found in the 4 | * LICENSE file in the root directory of this source tree. 5 | */ 6 | 7 | export * from './framework.js'; 8 | export * from './datagrid.js'; 9 | export * from './ui.js'; 10 | -------------------------------------------------------------------------------- /src/ui.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) ActiveWidgets SARL. All Rights Reserved. 3 | * This source code is licensed under the MIT license found in the 4 | * LICENSE file in the root directory of this source tree. 5 | */ 6 | 7 | import {SvelteComponent} from './framework.js'; 8 | import {Button as _Button} from '@activewidgets/ui'; 9 | 10 | export const Button = SvelteComponent(_Button); 11 | -------------------------------------------------------------------------------- /test/adapter/svelte.js: -------------------------------------------------------------------------------- 1 | 2 | import {render, fireEvent, wait, waitForElement} from '@testing-library/svelte'; 3 | import { Datagrid } from '@activewidgets/components'; 4 | 5 | 6 | export function mount(component, props){ 7 | return render(Datagrid, props); 8 | } 9 | 10 | export {fireEvent, wait, waitForElement}; -------------------------------------------------------------------------------- /test/snapshots/local-js-columns-1-snap.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/activewidgets/svelte/babfd00863526775a14228e8a925f82ecbc117d5/test/snapshots/local-js-columns-1-snap.png -------------------------------------------------------------------------------- /test/snapshots/local-js-demo-1-snap.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/activewidgets/svelte/babfd00863526775a14228e8a925f82ecbc117d5/test/snapshots/local-js-demo-1-snap.png -------------------------------------------------------------------------------- /test/snapshots/local-js-hello-world-1-snap.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/activewidgets/svelte/babfd00863526775a14228e8a925f82ecbc117d5/test/snapshots/local-js-hello-world-1-snap.png -------------------------------------------------------------------------------- /test/visual/local.js: -------------------------------------------------------------------------------- 1 | 2 | function local(name){ 3 | return 'http://localhost:2345/' + name + '/'; 4 | } 5 | 6 | ['demo', 'hello-world', 'columns'].forEach(item => { 7 | test(item, async () => { 8 | await page.goto(local(item)); 9 | const image = await page.screenshot(); 10 | expect(image).toMatchImageSnapshot(); 11 | }); 12 | }); 13 | -------------------------------------------------------------------------------- /vite.config.js: -------------------------------------------------------------------------------- 1 | import {resolve} from 'path'; 2 | import markdown from 'rollup-plugin-md'; 3 | import svelte from 'rollup-plugin-svelte'; 4 | import examples from '@activewidgets/examples/plugin'; 5 | import puppeteer from '@activewidgets/puppeteer/plugin'; 6 | 7 | 8 | export default { 9 | root: 'examples', 10 | build: { 11 | outDir: '../out', 12 | emptyOutDir: true 13 | }, 14 | plugins: [ 15 | puppeteer('../test/visual/*.js'), 16 | examples(), 17 | markdown(), 18 | svelte() 19 | ], 20 | resolve: { 21 | alias: { 22 | '@activewidgets/svelte': resolve('./') 23 | } 24 | } 25 | } --------------------------------------------------------------------------------