@operato/data-grist 9.0.0-beta.7 → 9.0.0-beta.85

package/README.md

@@ -1,95 +1,388 @@
-# \<data-grist>
+# Data-Grist
 
-This webcomponent follows the [open-wc](https://github.com/open-wc/open-wc) recommendation.
+Data-Grist is a powerful web component for displaying and manipulating data. It can present data in Grid, List, or Card formats and provides various features such as data sorting, filtering, editing, and more.
+
+## Key Features
+
+- **Multiple Display Modes**: Flexibly display the same data in grid, list, or card formats
+- **Data Manipulation**: Add, modify, and delete records
+- **Sorting and Filtering**: Single/multi-column sorting, various filtering options
+- **Editing Capabilities**: Inline cell editing, validation
+- **Pagination**: Standard paging and infinite scroll support
+- **Selection**: Single/multiple record selection
+- **State Tracking**: Track changed (dirty) records
+- **Customization**: Support for various renderers, editors, and event handlers
+- **Mobile Responsive**: Responsive design support
 
 ## Installation
 
 ```bash
-npm i data-grist
+npm install @operato/data-grist
 ```
 
-## Usage
+## Basic Usage
 
 ```html
 <script type="module">
-  import 'data-grist/data-grist.js';
+  import '@operato/data-grist/ox-grist.js'
 </script>
 
-<data-grist></data-grist>
+<ox-grist
+  .mode=${'GRID'}
+  .config=${gridConfig}
+  .fetchHandler=${fetchDataFunction}
+></ox-grist>
 ```
 
-## Linting with ESLint, Prettier, and Types
+## Modes
 
-To scan the project for linting errors, run
+Data-Grist supports three display modes:
 
-```bash
-npm run lint
+- **GRID**: Tabular data display (default)
+- **LIST**: Mobile-friendly list format display
+- **CARD**: Card format display
+
+```javascript
+// Set mode
+gristElement.mode = 'GRID' // or 'LIST', 'CARD'
 ```
 
-You can lint with ESLint and Prettier individually as well
+## Configuration (Config)
+
+Data-Grist provides various configuration options.
+
+```javascript
+const config = {
+  columns: [
+    {
+      type: 'string',
+      name: 'name',
+      header: 'Name',
+      record: {
+        editable: true
+      },
+      sortable: true,
+      width: 150
+    }
+    // More columns...
+  ],
+  rows: {
+    appendable: true, // Allow adding new records
+    editable: true, // Allow editing records
+    selectable: {
+      // Record selection settings
+      multiple: true // Allow multiple selections
+    }
+  },
+  pagination: {
+    infinite: false, // Use paging instead of infinite scroll
+    page: 1, // Starting page
+    limit: 20 // Records per page
+  }
+  // Additional settings...
+}
+```
 
-```bash
-npm run lint:eslint
+### Column Types
+
+```javascript
+// String column
+{
+  type: 'string',
+  name: 'firstName',
+  header: 'First Name'
+}
+
+// Number column
+{
+  type: 'number',
+  name: 'age',
+  header: 'Age',
+  record: {
+    align: 'right'
+  }
+}
+
+// Boolean column
+{
+  type: 'boolean',
+  name: 'isActive',
+  header: 'Active'
+}
+
+// Link column
+{
+  type: 'link',
+  name: 'website',
+  header: 'Website',
+  record: {
+    options: {
+      href: (column, record) => record.url,
+      target: '_blank'
+    }
+  }
+}
+
+// Gutter column (row number, checkbox, button, etc.)
+{
+  type: 'gutter',
+  gutterName: 'sequence' // 'row-selector', 'button', 'dirty', etc.
+}
 ```
 
-```bash
-npm run lint:prettier
+## Fetching Data
+
+Data can be retrieved through the `fetchHandler` function.
+
+```javascript
+const fetchHandler = async params => {
+  const { page, limit, sorters, filters } = params
+
+  // Fetch data from server
+  const response = await fetch(`/api/data?page=${page}&limit=${limit}`)
+  const data = await response.json()
+
+  return {
+    total: data.total,
+    records: data.items
+  }
+}
+
+// Configure the grist
+gristElement.fetchHandler = fetchHandler
 ```
 
-To automatically fix many linting errors, run
+## Record Manipulation API
 
-```bash
-npm run format
+### Adding Records
+
+```javascript
+// Add record at the end (default)
+gristElement.addRecord({
+  name: 'John Doe',
+  age: 30
+})
+
+// Add record at the top
+gristElement.addRecordToTop({
+  name: 'Jane Smith',
+  age: 25
+})
 ```
 
-You can format using ESLint and Prettier individually as well
+### Record Selection
 
-```bash
-npm run format:eslint
+```javascript
+// Get all selected records
+const selectedRecords = gristElement.selected
+
+// Set selection
+gristElement.selected = [record1, record2]
+
+// Select records using a selector function
+gristElement.select(record => record.age > 30)
 ```
 
-```bash
-npm run format:prettier
+### Tracking Changed Records
+
+```javascript
+// Get modified records
+const dirtyRecords = gristElement.dirtyRecords
+
+// Check for changes
+gristElement.checkDirties()
+
+// Export changes as patches
+const patches = gristElement.exportPatchList()
 ```
 
-## Testing with Web Test Runner
+## Events
 
-To run the suite of Web Test Runner tests, run
+Data-Grist triggers various events.
 
-```bash
-npm run test
+```javascript
+// Record selection change event
+gristElement.addEventListener('select-record-change', e => {
+  const { records, added, removed } = e.detail
+  console.log('Selected records:', records)
+})
+
+// Field change event
+gristElement.addEventListener('field-change', e => {
+  const { after, before, column, record, row } = e.detail
+  console.log('Changed field:', column.name, 'from', before, 'to', after)
+})
+
+// Record change event
+gristElement.addEventListener('record-change', e => {
+  const { before, after, column, row } = e.detail
+  console.log('Record changed:', row)
+})
 ```
 
-To run the tests in watch mode (for &lt;abbr title=&#34;test driven development&#34;&gt;TDD&lt;/abbr&gt;, for example), run
+## Advanced Features
 
-```bash
-npm run test:watch
+### Column Accumulation Feature (Accumulator)
+
+```javascript
+{
+  type: 'number',
+  name: 'amount',
+  header: 'Amount',
+  accumulator: 'sum' // 'avg', 'count', 'min', 'max' or custom function
+}
 ```
 
-## Demoing with Storybook
+### Tree Structure Data
 
-To run a local instance of Storybook for your component, run
+```javascript
+const config = {
+  // ...
+  tree: {
+    childrenProperty: 'children', // Property name where child nodes are stored
+    expanded: true // Initial tree expansion state
+  }
+}
+```
 
-```bash
-npm run storybook
+### Grouped Headers
+
+```javascript
+const config = {
+  columns: [
+    // ...
+    {
+      type: 'string',
+      name: 'firstName',
+      header: 'First Name',
+      group: 'personalInfo'
+    },
+    {
+      type: 'string',
+      name: 'lastName',
+      header: 'Last Name',
+      group: 'personalInfo'
+    }
+  ],
+  // ...
+  rows: {
+    // ...
+    groups: [
+      {
+        name: 'personalInfo',
+        title: 'Personal Information'
+      }
+    ]
+  }
+}
 ```
 
-To build a production version of Storybook, run
+### User Settings Storage
+
+```javascript
+// Configure user settings provider
+gristElement.personalConfigProvider = {
+  async load() {
+    // Load saved settings
+    return JSON.parse(localStorage.getItem('userGristConfig'))
+  },
+  async save(preference) {
+    // Save user settings
+    localStorage.setItem('userGristConfig', JSON.stringify(preference))
+  }
+}
+```
 
-```bash
-npm run storybook:build
+## Styling
+
+Data-Grist can be styled through CSS variables.
+
+```css
+ox-grist {
+  --grid-header-background-color: #f5f5f5;
+  --grid-record-background-color: white;
+  --grid-record-odd-background-color: #f9f9f9;
+  --grid-header-color: #333;
+  --grid-record-hover-background-color: #e9e9e9;
+}
 ```
 
-## Tooling configs
+## API Reference
+
+### Properties
+
+| Property          | Type     | Description                           |
+| ----------------- | -------- | ------------------------------------- |
+| `mode`            | string   | Display mode ('GRID', 'LIST', 'CARD') |
+| `config`          | object   | Grist configuration object            |
+| `data`            | object   | Data to display                       |
+| `selectedRecords` | array    | Array of selected records             |
+| `explicitFetch`   | boolean  | Enable explicit data fetching         |
+| `fetchHandler`    | function | Data fetching function                |
+| `fetchOptions`    | object   | Data fetching options                 |
+| `filters`         | array    | Array of filters                      |
+| `sorters`         | array    | Array of sorters                      |
+| `pagination`      | object   | Pagination settings                   |
+
+### Methods
+
+| Method                         | Description                     |
+| ------------------------------ | ------------------------------- |
+| `fetch(reset)`                 | Fetch data                      |
+| `addRecord(record)`            | Add a record                    |
+| `addRecordToTop(record)`       | Add a record at the top         |
+| `deleteSelectedRecords(dirty)` | Delete selected records         |
+| `cloneSelectedRecords()`       | Clone selected records          |
+| `checkDirties()`               | Check for modified records      |
+| `undo()`                       | Undo last action                |
+| `redo()`                       | Redo undone action              |
+| `reset()`                      | Reset data                      |
+| `commit()`                     | Commit changes                  |
+| `select(selector, reset)`      | Select records using a function |
+| `exportPatchList(options)`     | Export list of change patches   |
+| `exportRecords(options)`       | Export record data              |
+
+## Examples
+
+### Basic Grid
 
-For most of the tools, the configuration is in the `package.json` to reduce the amount of files in your project.
+```html
+<ox-grist
+  .mode=${'GRID'}
+  .config=${gridConfig}
+  .fetchHandler=${fetchData}
+  @record-change=${handleRecordChange}
+></ox-grist>
+```
 
-If you customize the configuration a lot, you can consider moving them to individual files.
+### Editable Grid
 
-## Local Demo with `web-dev-server`
+```html
+<ox-grist
+  .mode=${'GRID'}
+  .config=${{
+    columns: [/* column definitions */],
+    rows: {
+      appendable: true,
+      editable: true,
+      selectable: { multiple: true }
+    }
+  }}
+  .data=${{ records: initialData }}
+></ox-grist>
+```
 
-```bash
-npm start
+### Add Row to Top Button
+
+```html
+<button @click="${() => gristRef.addRecordToTop()}">Add Row to Top</button>
+<ox-grist id="my-grist"></ox-grist>
+
+<script>
+  const gristRef = document.getElementById('my-grist')
+</script>
 ```
 
-To run a local development server that serves the basic demo located in `demo/index.html`
+## License
+
+MIT

package/dist/src/data-grid/data-grid-body.js

@@ -459,40 +459,43 @@ let DataGridBody = class DataGridBody extends LitElement {
                     }
                     const cells = record.querySelectorAll('td');
                     cells.forEach((item, columnIndex) => {
-                        var _a;
                         const targetColumn = columns[column + columnIndex];
-                        var value = (_a = item.textContent) === null || _a === void 0 ? void 0 : _a.trim();
+                        let value = item.textContent;
+                        // let value = item.textContent?.trim() as any
                         let type = targetColumn.type || item.getAttribute('type') || 'string';
                         type = type.includes('object') ? 'object' : type; // 오브젝트 타입 예외처리
                         let { editable } = targetColumn.record;
                         if (typeof editable === 'function') {
                             editable = editable.call(this, value, targetColumn, targetRecord, row, this);
                         }
-                        switch (type) {
-                            case 'object':
-                            case 'parameters':
-                                try {
-                                    value = JSON.parse(value || 'null');
-                                }
-                                catch (err) { }
-                                break;
-                            case 'boolean':
-                            case 'checkbox':
-                                value = !!value && !!String(value).match(/true/i);
-                                break;
-                            case 'number':
-                            case 'float':
-                            case 'integer':
-                            case 'progress':
-                                value = parseToNumberOrNull(value);
-                                break;
-                            default:
-                                try {
-                                    value = JSON.parse(value);
-                                }
-                                catch (err) {
-                                    value = value;
-                                }
+                        if (value) {
+                            switch (type) {
+                                case 'object':
+                                case 'parameters':
+                                    try {
+                                        value = JSON.parse(value || 'null');
+                                    }
+                                    catch (err) { }
+                                    break;
+                                case 'boolean':
+                                case 'checkbox':
+                                    value = !!value && !!String(value).match(/true/i);
+                                    break;
+                                case 'number':
+                                case 'float':
+                                case 'integer':
+                                case 'progress':
+                                    value = parseToNumberOrNull(value);
+                                    break;
+                                default:
+                                    try {
+                                        value = JSON.parse(value);
+                                    }
+                                    catch (err) { }
+                            }
+                        }
+                        else {
+                            value = undefined; /* default value 로 설정되도록 하기위해서 undefined로 설정. */
                         }
                         if (targetColumn && !targetColumn.gutterName && editable) {
                             this.dispatchEvent(new CustomEvent('field-change', {
@@ -618,6 +621,15 @@ DataGridBody.styles = [
       ox-grid-accum-field[fixed] {
         background-color: var(--md-sys-color-primary-container);
       }
+
+      @media (max-width: 768px) {
+        /* 모바일에서는 그리드에서 고정된 열 해제 */
+        [fixed] {
+          position: static;
+          z-index: 0;
+          box-shadow: none !important;
+        }
+      }
     `
 ];
 __decorate([