@stonecrop/atable 0.11.9 → 0.12.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (23) hide show
  1. package/README.md +58 -52
  2. package/dist/assets/index.css +1 -1
  3. package/dist/atable.d.ts +83 -188
  4. package/dist/atable.js +1087 -1047
  5. package/dist/atable.js.map +1 -1
  6. package/dist/src/index.d.ts +1 -0
  7. package/dist/src/index.d.ts.map +1 -1
  8. package/dist/src/index.js +1 -0
  9. package/dist/src/schemaToColumns.d.ts +16 -0
  10. package/dist/src/schemaToColumns.d.ts.map +1 -0
  11. package/dist/src/schemaToColumns.js +20 -0
  12. package/dist/src/stores/table.d.ts +42 -42
  13. package/dist/src/stores/table.d.ts.map +1 -1
  14. package/dist/src/stores/table.js +10 -1
  15. package/dist/src/types/index.d.ts +27 -146
  16. package/dist/src/types/index.d.ts.map +1 -1
  17. package/package.json +4 -3
  18. package/src/components/ATable.vue +15 -5
  19. package/src/components/ATableColumnFilter.vue +30 -8
  20. package/src/index.ts +1 -0
  21. package/src/schemaToColumns.ts +24 -0
  22. package/src/stores/table.ts +10 -1
  23. package/src/types/index.ts +28 -165
package/README.md CHANGED
@@ -65,51 +65,69 @@ const config = {
65
65
 
66
66
  ## Column API
67
67
 
68
- The primary API for ATable is the column object.
68
+ ATable supports two ways to define columns.
69
69
 
70
- - `label`: String; optional (the display label for the column header)
71
- - `name`: String; required (a reference to the column that must follow rules for valid JS variable naming)
72
- - `fieldtype`: String; optional (a valid field type, full list [below](#column-data-types))
73
- - `align`: String; optional (one of `left`, `right` or `center`; defaults to `center`)
74
- - `edit`: Boolean; optional (indicates if the field is editable; defaults to `false`)
75
- - `width`: String; optional (used to indicate the width of the cell; defaults to `40ch`)
76
- - `mask`: Function; optional (a custom mask for the field, several are provided with types by default)
77
- - `options`: Function; optional (used with `Select`, `Currency`, and `Quantity` fields)
70
+ ### Schema-driven columns (recommended)
71
+
72
+ Pass a `ColumnSchema[]` array via the `:schema` prop. ATable calls `schemaToColumns()` internally —
73
+ `fieldname` becomes `name`, `hidden: true` fields are excluded, and form-only properties are stripped.
74
+ This is the preferred approach when working from doctype definitions.
75
+
76
+ ```vue
77
+ <template>
78
+ <ATable v-model:rows="rows" :schema="fields" :config="config" />
79
+ </template>
80
+
81
+ <script setup lang="ts">
82
+ import type { ColumnSchema } from '@stonecrop/schema'
83
+
84
+ const fields: ColumnSchema[] = [
85
+ { fieldname: 'name', fieldtype: 'Data', label: 'Name', width: '150px' },
86
+ { fieldname: 'species', fieldtype: 'Select', label: 'Species', align: 'left', edit: true },
87
+ { fieldname: 'set_date', fieldtype: 'Date', label: 'Date', width: '30ch', edit: true },
88
+ { fieldname: 'internal_notes', fieldtype: 'Data', label: 'Notes', hidden: true },
89
+ ]
90
+ </script>
91
+ ```
92
+
93
+ `internal_notes` has `hidden: true` and will not appear as a column.
94
+
95
+ ### Runtime columns
96
+
97
+ Pass `TableColumn[]` via `v-model:columns` when you need reactively updateable columns at runtime
98
+ (e.g. dynamically adding/removing columns, programmatic resizing). `TableColumn` extends `ColumnSchema`
99
+ — the key difference is that `name` is used instead of `fieldname`, and `format`/`modalComponent`
100
+ accept live functions in addition to serialized strings.
101
+
102
+ - `name`: String; required (column key — corresponds to `fieldname` in ColumnSchema)
103
+ - `label`: String; optional (display label for the column header)
104
+ - `fieldtype`: String; optional (semantic field type — see [Column Data Types](#column-data-types))
105
+ - `align`: String; optional (one of `left`, `right`, `center`, `start`, `end`; defaults to `center`)
106
+ - `edit`: Boolean; optional (whether the cell is editable; defaults to `false`)
107
+ - `width`: String; optional (CSS column width; defaults to `40ch`)
108
+ - `mask`: Function; optional (a custom input mask for the cell)
78
109
 
79
110
  ```js
80
- {
81
- label: 'Batch Name',
82
- name: 'name',
83
- fieldtype: 'Data',
84
- align: 'right',
85
- edit: false,
86
- },
87
- {
88
- label: 'Species',
89
- name: 'species',
90
- fieldtype: 'Select',
91
- align: 'left',
92
- edit: true,
93
- width: '30ch',
94
- required: true,
95
- options: () => ['Rainbow Trout', 'Steelhead', 'Golden Trout', 'Pacific Salmon']
96
- },
97
- {
98
- label: 'Date',
99
- name: 'set_date',
100
- fieldtype: 'Date',
101
- align: 'center',
102
- edit: true,
103
- width: '30ch',
104
- mask: value => `${value}+/-`,
105
- }
111
+ const tableColumns = ref([
112
+ { name: 'batch_name', label: 'Batch Name', fieldtype: 'Data', align: 'right' },
113
+ { name: 'set_date', label: 'Date', fieldtype: 'Date', align: 'center', edit: true, width: '30ch',
114
+ mask: value => `${value}+/-` },
115
+ ])
106
116
  ```
107
117
 
108
118
  ## v-model:rows and v-model:columns
109
119
 
110
- ATable now requires both rows and columns to be passed as model values using `v-model:rows` and `v-model:columns`. This allows you to dynamically modify both the table data and structure at runtime.
120
+ `v-model:rows` is always required. `v-model:columns` is optional — use it when you need reactive column
121
+ management at runtime. When neither `:schema` nor `v-model:columns` is provided, ATable renders with
122
+ no columns.
123
+
124
+ ### Schema-driven (no v-model:columns needed)
125
+
126
+ ```vue
127
+ <ATable v-model:rows="tableData" :schema="fields" />
128
+ ```
111
129
 
112
- ### Basic Usage
130
+ ### Reactive columns
113
131
 
114
132
  ```vue
115
133
  <template>
@@ -137,21 +155,9 @@ const onColumnsChange = (columns) => {
137
155
  ### Features
138
156
 
139
157
  - **Reactive rows and columns**: Both data and structure can be modified at runtime
140
- - **Column resizing**: When users resize columns, the model is automatically updated
141
- - **Event emission**: The `columns:update` event is emitted whenever columns change
142
- - **Required models**: Both `v-model:rows` and `v-model:columns` are required
143
-
144
- ### Migration
145
-
146
- **Breaking Change**: The `:columns` prop has been removed. Update your existing code:
147
-
148
- ```vue
149
- <!-- OLD: This no longer works -->
150
- <ATable v-model="data" :columns="columns" />
151
-
152
- <!-- NEW: Required syntax -->
153
- <ATable v-model:rows="data" v-model:columns="columns" />
154
- ```## Column Data Types
158
+ - **Schema-driven columns**: Pass `:schema` to let ATable derive columns automatically
159
+ - **Column resizing**: When users resize columns, the `v-model:columns` model is automatically updated
160
+ - **Event emission**: The `columns:update` event is emitted whenever columns change## Column Data Types
155
161
 
156
162
  `v0.1`
157
163
 
package/dist/assets/index.css CHANGED
@@ -1 +1 @@
1
- @import"https://fonts.googleapis.com/css2?family=Arimo:ital,wght@0,400..700;1,400..700&display=swap";.atable-cell{border-radius:0;box-sizing:border-box;outline:none;box-shadow:none;color:var(--sc-cell-text-color);padding-left:.5ch!important;padding-right:.5ch;padding-top:var(--sc-atable-row-padding);padding-bottom:var(--sc-atable-row-padding);border-spacing:0px;border-collapse:collapse;overflow:hidden;text-overflow:ellipsis;order:1;white-space:nowrap;max-width:40ch;border-top:1px solid var(--sc-row-border-color);margin:0 0 0 1px}.atable-cell a{color:var(--sc-cell-text-color);text-decoration:none}.atable-cell:focus,.atable-cell:focus-within{background-color:var(--sc-focus-cell-background);outline-width:var(--sc-atable-cell-border-width);outline-style:solid;outline-offset:calc(var(--sc-atable-cell-border-width) * -1);outline-color:var(--sc-focus-cell-outline);box-shadow:none;overflow:hidden;text-wrap:nowrap;box-sizing:border-box}.cell-modified{font-weight:700;font-style:italic}.cell-modified-highlight{background-color:var(--sc-cell-changed-color)}.row-index{color:var(--sc-header-text-color);font-weight:700;text-align:center;-webkit-user-select:none;user-select:none;width:2ch;display:flex;align-items:center;justify-content:center}.expandable-row{border-top:1px solid var(--sc-row-border-color);height:var(--sc-atable-row-height)}.expandable-row>td:first-child{border-left:4px solid var(--sc-row-border-color)}.expanded-row{border-left:2px solid var(--sc-row-border-color)}.expandable-row:last-child{border-bottom:1px solid var(--sc-row-border-color)}.expanded-row-content{border-top:1px solid var(--sc-row-border-color);padding:1.5rem}.expandable-row.changed-row-gradient[data-v-a42297c7]:has(td.cell-modified){--cell-color-start: color-mix(in srgb, var(--sc-cell-changed-color), #fff 20%);--cell-color-end: color-mix(in srgb, var(--sc-cell-changed-color), #fff 60%);background:linear-gradient(90deg,var(--cell-color-start),var(--cell-color-end))}.aganttcell[data-v-c2df3f52]{background-color:#f9f9f9;width:100%;padding:0;height:100%}.gantt-container[data-v-c2df3f52]{position:relative;height:100%;background-color:#f0f0f0;border-radius:4px;overflow:visible}.gantt-bar[data-v-c2df3f52]{position:absolute;border-radius:4px;display:flex;align-items:center;justify-content:space-between;cursor:grab;box-sizing:border-box;border:1px solid rgba(0,0,0,.5);transition:left .1s ease-out,width .1s ease-out;height:80%;top:50%;z-index:0;transform:translateY(-50%)}.gantt-bar[data-v-c2df3f52]:active{cursor:grabbing}.gantt-bar.is-dragging[data-v-c2df3f52]{z-index:10}.gantt-label[data-v-c2df3f52]{flex:1;text-align:center;font-size:12px;color:#aaa;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 8px;-webkit-user-select:none;user-select:none}.resize-handle[data-v-c2df3f52]{position:relative;width:12px;height:100%;cursor:ew-resize;display:flex;align-items:center;justify-content:center;z-index:0;background:#00000040}.left-resize-handle[data-v-c2df3f52]{border-right:1px solid rgba(0,0,0,.5)}.right-resize-handle[data-v-c2df3f52]{border-left:1px solid rgba(0,0,0,.5)}.handle-grip[data-v-c2df3f52]{width:4px;height:12px;border-radius:2px;background:#000c}.resize-handle[data-v-c2df3f52]:hover{background-color:#ffffff80}.vertical-indicator[data-v-c2df3f52]{position:absolute;width:2px;opacity:0;pointer-events:none;transition:opacity .2s ease;top:-100vh;height:100vh;z-index:5;background-color:var(--v737862e7)}.left-indicator[data-v-c2df3f52]{left:50%;transform:translate(-50%)}.right-indicator[data-v-c2df3f52]{right:50%;transform:translate(50%)}.resize-handle.is-dragging .vertical-indicator[data-v-c2df3f52]{opacity:.7}.gantt-container[data-v-c2df3f52]:after{content:"";position:absolute;inset:0;background-size:calc(100% / var(--v05f25613)) 100%;background-image:linear-gradient(to right,rgba(0,0,0,.1) 1px,transparent 1px);pointer-events:none;z-index:1}.connection-handle[data-v-c2df3f52]{position:absolute;top:50%;transform:translateY(-50%);width:16px;height:16px;opacity:0;transition:opacity .2s ease;cursor:crosshair;z-index:2;display:flex;align-items:center;justify-content:center}.connection-handle.visible[data-v-c2df3f52]{opacity:1}.left-connection-handle[data-v-c2df3f52]{left:-16px}.right-connection-handle[data-v-c2df3f52]{right:-16px}.connection-dot[data-v-c2df3f52]{width:8px;height:8px;border-radius:50%;background-color:#2196f3;border:2px solid white;box-shadow:0 1px 3px #0000004d}.connection-handle:hover .connection-dot[data-v-c2df3f52]{background-color:#1976d2;transform:scale(1.2)}.connection-handle.is-dragging[data-v-c2df3f52]{opacity:1!important}.connection-handle.is-dragging .connection-dot[data-v-c2df3f52]{background-color:#1976d2;transform:scale(1.3);box-shadow:0 2px 8px #2196f366}.atable-row-actions{width:2rem;min-width:2rem;padding:0 .25rem;vertical-align:middle;white-space:nowrap;border-top:1px solid var(--sc-row-border-color);background:#fff;-webkit-user-select:none;user-select:none;position:relative}.atable-row-actions.dropdown-active{z-index:101}.row-actions-icons{display:flex;gap:.25rem;align-items:center;justify-content:center}.row-action-btn{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;padding:.125rem;border:none;background:transparent;cursor:pointer;border-radius:.25rem;transition:background-color .15s ease}.row-action-btn:hover{background-color:var(--sc-gray-10, #e5e5e5)}.row-action-btn:focus{outline:2px solid var(--sc-focus-cell-outline, #3b82f6);outline-offset:1px}.row-action-btn .action-icon{display:flex;align-items:center;justify-content:center;width:1rem;height:1rem}.row-action-btn .action-icon :deep(svg){width:100%;height:100%}.row-actions-dropdown{position:relative;display:inline-block}.row-actions-dropdown:has(button:focus){outline:2px solid var(--sc-focus-cell-outline);outline-offset:-2px}.row-actions-toggle{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;padding:0;border:none;background:transparent;cursor:pointer;border-radius:.25rem;font-size:1rem;font-weight:700;transition:background-color .15s ease}.row-actions-toggle:hover{background-color:var(--sc-gray-10, #e5e5e5)}.dropdown-icon{line-height:1}.row-actions-menu{position:fixed;z-index:100;min-width:10rem;padding:.25rem 0;background:#fff;border:1px solid var(--sc-row-border-color);border-left:4px solid var(--sc-row-border-color);border-radius:0}.row-actions-menu.menu-flipped{box-shadow:0 -4px 6px -1px #0000001a,0 -2px 4px -2px #0000001a}.row-action-menu-item{display:flex;align-items:center;gap:.5rem;width:100%;padding:.5rem .75rem;border:none;background:transparent;cursor:pointer;text-align:left;font-size:.875rem;transition:background-color .15s ease}.row-action-menu-item:hover{background-color:var(--sc-gray-10, #f5f5f5)}.row-action-menu-item:focus{outline:none;background-color:var(--sc-gray-10, #f5f5f5)}.row-action-menu-item .action-icon{display:flex;align-items:center;justify-content:center;width:1rem;height:1rem;flex-shrink:0}.row-action-menu-item .action-icon :deep(svg){width:100%;height:100%}.row-action-menu-item .action-label{flex:1}.atable-row{background-color:#fff}.atable-row:last-child>td{border-bottom:1px solid var(--sc-row-border-color)}.atable-row>td:first-child{border-left:4px solid var(--sc-row-border-color)}.atable-row>td:last-child{border-right:1px solid var(--sc-row-border-color)}.list-index{color:var(--sc-header-text-color);font-weight:700;padding-left:var(--sc-atable-row-padding);padding-right:.5em;text-align:left;-webkit-user-select:none;user-select:none;border-top:1px solid var(--sc-row-border-color);text-overflow:ellipsis;overflow:hidden;box-sizing:border-box;padding-top:var(--sc-atable-row-padding);padding-bottom:var(--sc-atable-row-padding)}.tree-index{color:var(--sc-header-text-color);font-weight:700;text-align:center;-webkit-user-select:none;user-select:none;width:2ch;box-sizing:border-box;padding-top:var(--sc-atable-row-padding);padding-bottom:var(--sc-atable-row-padding)}.atable-row:has(td.cell-modified)>td.sticky-column,.atable-row:has(td.cell-modified)>th.sticky-column,.atable-row:has(td.cell-modified)>td.sticky-index,.atable-row:has(td.cell-modified)>th.sticky-index{background:var(--sc-cell-changed-color)}.atable-row.changed-row-gradient[data-v-e7ca13d1]:has(td.cell-modified){--cell-color-start: color-mix(in srgb, var(--sc-cell-changed-color), #fff 20%);--cell-color-end: color-mix(in srgb, var(--sc-cell-changed-color), #fff 60%);background:linear-gradient(90deg,var(--cell-color-start),var(--cell-color-end))}.gantt-connection-overlay[data-v-d5929c98]{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:15}.connection-path[data-v-d5929c98]{transition:stroke-width .2s ease;pointer-events:auto;cursor:pointer;stroke-dasharray:5px;stroke:var(--sc-cell-text-color)}#arrowhead-marker polygon[data-v-d5929c98]{fill:var(--sc-cell-text-color)}.animated-path[data-v-d5929c98]{animation:animated-dash-d5929c98 infinite 1.5s linear}.connection-path[data-v-d5929c98]:hover{stroke-width:3px}.connection-hitbox[data-v-d5929c98]{pointer-events:auto;cursor:pointer}@keyframes animated-dash-d5929c98{0%{stroke-dashoffset:0px}to{stroke-dashoffset:-10px}}.column-filter[data-v-a809a3bf]{display:flex;align-items:center;gap:.25rem;width:100%}.filter-input[data-v-a809a3bf],.filter-select[data-v-a809a3bf]{background-color:var(--sc-form-background)!important;padding:.15rem .2rem;border:1px solid var(--sc-form-border);border-radius:3px;font-size:.875rem;color:var(--sc-text-color);width:100%;box-sizing:border-box}.filter-input[data-v-a809a3bf]:focus,.filter-select[data-v-a809a3bf]:focus{outline:none;border-color:var(--sc-input-active-border-color)}.checkbox-filter[data-v-a809a3bf]{display:flex;align-items:center;gap:.25rem;font-size:.875rem;color:var(--sc-text-color);cursor:pointer}.filter-checkbox[data-v-a809a3bf]{margin:0}.date-range-filter[data-v-a809a3bf]{display:flex;gap:.25rem;align-items:center;width:100%}.date-range-filter .filter-input[data-v-a809a3bf]{flex:1;min-width:0}.date-separator[data-v-a809a3bf]{color:var(--sc-gray-50);font-weight:500;padding:0 .25rem;flex-shrink:0}.clear-btn[data-v-a809a3bf]{background:var(--sc-gray-10, #f0f0f0);border:1px solid var(--sc-form-border);border-radius:3px;color:var(--sc-gray-70);cursor:pointer;font-size:1rem;padding:.15rem .4rem;line-height:1;flex-shrink:0}.atable-header-row th{padding-left:.5ch!important;font-weight:700;min-width:3ch;padding-top:var(--sc-atable-row-padding);padding-bottom:var(--sc-atable-row-padding);box-sizing:border-box;color:var(--sc-header-text-color);position:relative}#header-index{padding-left:var(--sc-atable-row-padding);box-sizing:border-box;border-top:none}.tree-index{padding-right:0}th{order:1}.list-expansion-index{width:2ch;margin-left:5px}.cursor-pointer{cursor:pointer}.atable-filters-row th{padding:.25rem .5ch;vertical-align:top}.row-actions-header{width:2rem;min-width:2rem;padding:0 .25rem}:root{--sc-primary-color: #0098c9;--sc-primary-text-color: #ffffff;--sc-brand-color: #202a44;--sc-gray-5: #f2f2f2;--sc-gray-10: #e6e6e6;--sc-gray-20: #cccccc;--sc-gray-50: #808080;--sc-gray-60: #666666;--sc-gray-80: #333333;--sc-brand-danger: #e63c28;--sc-brand-success: #155724;--sc-brand-warning: #b99d3e;--sc-active-cell-background: #ffffff;--sc-active-cell-outline: #e6a92d;--sc-cell-border-color: #ffffff;--sc-cell-text-color: #3a3c41;--sc-focus-cell-background: #ffffff;--sc-focus-cell-outline: #000000;--sc-header-border-color: #ffffff;--sc-header-text-color: var(--sc-gray-20);--sc-row-border-color: var(--sc-gray-20);--sc-row-color-zebra-dark: #dddddd;--sc-row-color-zebra-light: #eeeeee;--sc-row-number-background-color: #ffffff;--sc-input-active-border-color: #000000;--sc-input-active-label-color: #000000;--sc-input-border-color: var(--sc-gray-20);--sc-input-label-color: var(--sc-gray-60);--sc-required-border: #e63c28;--sc-cell-changed-color: #d8edff;--sc-form-border: var(--sc-gray-5);--sc-form-background: #ffffff;--sc-input-field-background: #ffffff;--sc-input-field-disabled-background: var(--sc-gray-5);--sc-font-size: 10px;--sc-font-family: Arimo, Arial, sans-serif;--sc-table-font-size: 16px;--sc-atable-font-family: "Arimo", sans-serif;--sc-atable-row-padding: .125rem;--sc-atable-row-height: 1.5em;--sc-atable-cell-border-width: 2px;--sc-table-loading-color: 204, 204, 204;--sc-btn-border: #cccccc;--sc-btn-color: white;--sc-btn-hover: #f2f2f2;--sc-btn-label-color: black}.amodal{position:absolute;background-color:var(--sc-row-color-zebra-dark);z-index:200}.atable-container{position:relative}.sticky-index{position:sticky;left:0;z-index:100;order:0}.sticky-column,th.sticky-column,td.sticky-column,th.sticky-index,td.sticky-index{position:sticky;z-index:100;order:0;background:#fff}.sticky-column-edge,.atable th.sticky-column-edge{border-right:1px solid var(--sc-row-border-color)}[data-v-7b50ad21]:root{--sc-primary-color: #0098c9;--sc-primary-text-color: #ffffff;--sc-brand-color: #202a44;--sc-gray-5: #f2f2f2;--sc-gray-10: #e6e6e6;--sc-gray-20: #cccccc;--sc-gray-50: #808080;--sc-gray-60: #666666;--sc-gray-80: #333333;--sc-brand-danger: #e63c28;--sc-brand-success: #155724;--sc-brand-warning: #b99d3e;--sc-active-cell-background: #ffffff;--sc-active-cell-outline: #e6a92d;--sc-cell-border-color: #ffffff;--sc-cell-text-color: #3a3c41;--sc-focus-cell-background: #ffffff;--sc-focus-cell-outline: #000000;--sc-header-border-color: #ffffff;--sc-header-text-color: var(--sc-gray-20);--sc-row-border-color: var(--sc-gray-20);--sc-row-color-zebra-dark: #dddddd;--sc-row-color-zebra-light: #eeeeee;--sc-row-number-background-color: #ffffff;--sc-input-active-border-color: #000000;--sc-input-active-label-color: #000000;--sc-input-border-color: var(--sc-gray-20);--sc-input-label-color: var(--sc-gray-60);--sc-required-border: #e63c28;--sc-cell-changed-color: #d8edff;--sc-form-border: var(--sc-gray-5);--sc-form-background: #ffffff;--sc-input-field-background: #ffffff;--sc-input-field-disabled-background: var(--sc-gray-5);--sc-font-size: 10px;--sc-font-family: Arimo, Arial, sans-serif;--sc-table-font-size: 16px;--sc-atable-font-family: "Arimo", sans-serif;--sc-atable-row-padding: .125rem;--sc-atable-row-height: 1.5em;--sc-atable-cell-border-width: 2px;--sc-table-loading-color: 204, 204, 204;--sc-btn-border: #cccccc;--sc-btn-color: white;--sc-btn-hover: #f2f2f2;--sc-btn-label-color: black}.atable[data-v-7b50ad21]{position:relative;font-family:var(--sc-atable-font-family);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:var(--sc-table-font-size);border-collapse:collapse;box-sizing:border-box;table-layout:auto;width:auto;overflow:clip;height:1px}.atable th[data-v-7b50ad21]{border-width:0px;border-style:solid;border-radius:0;padding-left:.5ch;padding-right:.5ch;padding-top:var(--sc-atable-row-padding);padding-bottom:var(--sc-atable-row-padding);color:var(--sc-gray-60);height:var(--sc-atable-row-height);font-weight:300;letter-spacing:.05rem;order:1;box-sizing:border-box}.atable th[data-v-7b50ad21]:focus{outline:none}.atable[data-v-7b50ad21]:tbody{overflow:hidden;position:relative}.atable[data-v-7b50ad21]:tbody:before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background-color:transparent;z-index:100}.aloading[data-v-a930a25b]{width:100%;border-top:1px solid var(--sc-row-border-color);border-bottom:1px solid var(--sc-row-border-color);display:flex;background-color:#fff;border-left:4px solid var(--sc-row-border-color);padding-left:.5ch!important;padding-right:.5ch;padding-top:var(--sc-atable-row-padding);padding-bottom:var(--sc-atable-row-padding);align-items:center;box-sizing:border-box;background:var(--sc-focus-cell-background);overflow:hidden;position:relative}.aloading-bar[data-v-a930a25b]{width:100%;height:100%;position:absolute;left:-100%;top:0;background:linear-gradient(90deg,rgba(var(--sc-table-loading-color),0),rgba(var(--sc-table-loading-color),1),rgba(var(--sc-table-loading-color),0));animation:gradient-a930a25b infinite 2s;z-index:0}.aloading-header[data-v-a930a25b]{color:var(--sc-cell-text-color);font-family:var(--sc-atable-font-family);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:var(--sc-table-font-size);padding:0;margin:0;font-weight:400;z-index:1}.aloading-header[data-v-a930a25b]:after{content:"...";animation:ellipse-a930a25b 2s;animation-iteration-count:infinite}@keyframes gradient-a930a25b{0%{left:-100%}to{left:100%}}@keyframes ellipse-a930a25b{0%{content:""}20%{content:""}40%{content:"."}60%{content:".."}80%{content:"..."}}.aloading[data-v-e1165876]{width:100%;border-top:1px solid var(--sc-row-border-color);border-bottom:1px solid var(--sc-row-border-color);display:flex;background-color:#fff;border-left:4px solid var(--sc-row-border-color);padding-left:.5ch!important;padding-right:.5ch;padding-top:var(--sc-atable-row-padding);padding-bottom:var(--sc-atable-row-padding);align-items:center;box-sizing:border-box;background:var(--sc-focus-cell-background);overflow:hidden;position:relative}.aloading-bar[data-v-e1165876]{width:50%;height:3px;position:absolute;left:-100%;bottom:0;background:var(--sc-row-border-color);animation:bar-left-e1165876 infinite 2s;z-index:0}.aloading-header[data-v-e1165876]{color:var(--sc-cell-text-color);font-family:var(--sc-atable-font-family);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:var(--sc-table-font-size);padding:0;margin:0;font-weight:400;z-index:1}.aloading-header[data-v-e1165876]:after{content:"...";animation:ellipse-e1165876 2s;animation-iteration-count:infinite}@keyframes bar-left-e1165876{0%{left:-50%}to{left:100%}}@keyframes ellipse-e1165876{0%{content:""}20%{content:""}40%{content:"."}60%{content:".."}80%{content:"..."}}
1
+ @import"https://fonts.googleapis.com/css2?family=Arimo:ital,wght@0,400..700;1,400..700&display=swap";.atable-cell{border-radius:0;box-sizing:border-box;outline:none;box-shadow:none;color:var(--sc-cell-text-color);padding-left:.5ch!important;padding-right:.5ch;padding-top:var(--sc-atable-row-padding);padding-bottom:var(--sc-atable-row-padding);border-spacing:0px;border-collapse:collapse;overflow:hidden;text-overflow:ellipsis;order:1;white-space:nowrap;max-width:40ch;border-top:1px solid var(--sc-row-border-color);margin:0 0 0 1px}.atable-cell a{color:var(--sc-cell-text-color);text-decoration:none}.atable-cell:focus,.atable-cell:focus-within{background-color:var(--sc-focus-cell-background);outline-width:var(--sc-atable-cell-border-width);outline-style:solid;outline-offset:calc(var(--sc-atable-cell-border-width) * -1);outline-color:var(--sc-focus-cell-outline);box-shadow:none;overflow:hidden;text-wrap:nowrap;box-sizing:border-box}.cell-modified{font-weight:700;font-style:italic}.cell-modified-highlight{background-color:var(--sc-cell-changed-color)}.row-index{color:var(--sc-header-text-color);font-weight:700;text-align:center;-webkit-user-select:none;user-select:none;width:2ch;display:flex;align-items:center;justify-content:center}.expandable-row{border-top:1px solid var(--sc-row-border-color);height:var(--sc-atable-row-height)}.expandable-row>td:first-child{border-left:4px solid var(--sc-row-border-color)}.expanded-row{border-left:2px solid var(--sc-row-border-color)}.expandable-row:last-child{border-bottom:1px solid var(--sc-row-border-color)}.expanded-row-content{border-top:1px solid var(--sc-row-border-color);padding:1.5rem}.expandable-row.changed-row-gradient[data-v-a42297c7]:has(td.cell-modified){--cell-color-start: color-mix(in srgb, var(--sc-cell-changed-color), #fff 20%);--cell-color-end: color-mix(in srgb, var(--sc-cell-changed-color), #fff 60%);background:linear-gradient(90deg,var(--cell-color-start),var(--cell-color-end))}.aganttcell[data-v-c2df3f52]{background-color:#f9f9f9;width:100%;padding:0;height:100%}.gantt-container[data-v-c2df3f52]{position:relative;height:100%;background-color:#f0f0f0;border-radius:4px;overflow:visible}.gantt-bar[data-v-c2df3f52]{position:absolute;border-radius:4px;display:flex;align-items:center;justify-content:space-between;cursor:grab;box-sizing:border-box;border:1px solid rgba(0,0,0,.5);transition:left .1s ease-out,width .1s ease-out;height:80%;top:50%;z-index:0;transform:translateY(-50%)}.gantt-bar[data-v-c2df3f52]:active{cursor:grabbing}.gantt-bar.is-dragging[data-v-c2df3f52]{z-index:10}.gantt-label[data-v-c2df3f52]{flex:1;text-align:center;font-size:12px;color:#aaa;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 8px;-webkit-user-select:none;user-select:none}.resize-handle[data-v-c2df3f52]{position:relative;width:12px;height:100%;cursor:ew-resize;display:flex;align-items:center;justify-content:center;z-index:0;background:#00000040}.left-resize-handle[data-v-c2df3f52]{border-right:1px solid rgba(0,0,0,.5)}.right-resize-handle[data-v-c2df3f52]{border-left:1px solid rgba(0,0,0,.5)}.handle-grip[data-v-c2df3f52]{width:4px;height:12px;border-radius:2px;background:#000c}.resize-handle[data-v-c2df3f52]:hover{background-color:#ffffff80}.vertical-indicator[data-v-c2df3f52]{position:absolute;width:2px;opacity:0;pointer-events:none;transition:opacity .2s ease;top:-100vh;height:100vh;z-index:5;background-color:var(--v737862e7)}.left-indicator[data-v-c2df3f52]{left:50%;transform:translate(-50%)}.right-indicator[data-v-c2df3f52]{right:50%;transform:translate(50%)}.resize-handle.is-dragging .vertical-indicator[data-v-c2df3f52]{opacity:.7}.gantt-container[data-v-c2df3f52]:after{content:"";position:absolute;inset:0;background-size:calc(100% / var(--v05f25613)) 100%;background-image:linear-gradient(to right,rgba(0,0,0,.1) 1px,transparent 1px);pointer-events:none;z-index:1}.connection-handle[data-v-c2df3f52]{position:absolute;top:50%;transform:translateY(-50%);width:16px;height:16px;opacity:0;transition:opacity .2s ease;cursor:crosshair;z-index:2;display:flex;align-items:center;justify-content:center}.connection-handle.visible[data-v-c2df3f52]{opacity:1}.left-connection-handle[data-v-c2df3f52]{left:-16px}.right-connection-handle[data-v-c2df3f52]{right:-16px}.connection-dot[data-v-c2df3f52]{width:8px;height:8px;border-radius:50%;background-color:#2196f3;border:2px solid white;box-shadow:0 1px 3px #0000004d}.connection-handle:hover .connection-dot[data-v-c2df3f52]{background-color:#1976d2;transform:scale(1.2)}.connection-handle.is-dragging[data-v-c2df3f52]{opacity:1!important}.connection-handle.is-dragging .connection-dot[data-v-c2df3f52]{background-color:#1976d2;transform:scale(1.3);box-shadow:0 2px 8px #2196f366}.atable-row-actions{width:2rem;min-width:2rem;padding:0 .25rem;vertical-align:middle;white-space:nowrap;border-top:1px solid var(--sc-row-border-color);background:#fff;-webkit-user-select:none;user-select:none;position:relative}.atable-row-actions.dropdown-active{z-index:101}.row-actions-icons{display:flex;gap:.25rem;align-items:center;justify-content:center}.row-action-btn{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;padding:.125rem;border:none;background:transparent;cursor:pointer;border-radius:.25rem;transition:background-color .15s ease}.row-action-btn:hover{background-color:var(--sc-gray-10, #e5e5e5)}.row-action-btn:focus{outline:2px solid var(--sc-focus-cell-outline, #3b82f6);outline-offset:1px}.row-action-btn .action-icon{display:flex;align-items:center;justify-content:center;width:1rem;height:1rem}.row-action-btn .action-icon :deep(svg){width:100%;height:100%}.row-actions-dropdown{position:relative;display:inline-block}.row-actions-dropdown:has(button:focus){outline:2px solid var(--sc-focus-cell-outline);outline-offset:-2px}.row-actions-toggle{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;padding:0;border:none;background:transparent;cursor:pointer;border-radius:.25rem;font-size:1rem;font-weight:700;transition:background-color .15s ease}.row-actions-toggle:hover{background-color:var(--sc-gray-10, #e5e5e5)}.dropdown-icon{line-height:1}.row-actions-menu{position:fixed;z-index:100;min-width:10rem;padding:.25rem 0;background:#fff;border:1px solid var(--sc-row-border-color);border-left:4px solid var(--sc-row-border-color);border-radius:0}.row-actions-menu.menu-flipped{box-shadow:0 -4px 6px -1px #0000001a,0 -2px 4px -2px #0000001a}.row-action-menu-item{display:flex;align-items:center;gap:.5rem;width:100%;padding:.5rem .75rem;border:none;background:transparent;cursor:pointer;text-align:left;font-size:.875rem;transition:background-color .15s ease}.row-action-menu-item:hover{background-color:var(--sc-gray-10, #f5f5f5)}.row-action-menu-item:focus{outline:none;background-color:var(--sc-gray-10, #f5f5f5)}.row-action-menu-item .action-icon{display:flex;align-items:center;justify-content:center;width:1rem;height:1rem;flex-shrink:0}.row-action-menu-item .action-icon :deep(svg){width:100%;height:100%}.row-action-menu-item .action-label{flex:1}.atable-row{background-color:#fff}.atable-row:last-child>td{border-bottom:1px solid var(--sc-row-border-color)}.atable-row>td:first-child{border-left:4px solid var(--sc-row-border-color)}.atable-row>td:last-child{border-right:1px solid var(--sc-row-border-color)}.list-index{color:var(--sc-header-text-color);font-weight:700;padding-left:var(--sc-atable-row-padding);padding-right:.5em;text-align:left;-webkit-user-select:none;user-select:none;border-top:1px solid var(--sc-row-border-color);text-overflow:ellipsis;overflow:hidden;box-sizing:border-box;padding-top:var(--sc-atable-row-padding);padding-bottom:var(--sc-atable-row-padding)}.tree-index{color:var(--sc-header-text-color);font-weight:700;text-align:center;-webkit-user-select:none;user-select:none;width:2ch;box-sizing:border-box;padding-top:var(--sc-atable-row-padding);padding-bottom:var(--sc-atable-row-padding)}.atable-row:has(td.cell-modified)>td.sticky-column,.atable-row:has(td.cell-modified)>th.sticky-column,.atable-row:has(td.cell-modified)>td.sticky-index,.atable-row:has(td.cell-modified)>th.sticky-index{background:var(--sc-cell-changed-color)}.atable-row.changed-row-gradient[data-v-e7ca13d1]:has(td.cell-modified){--cell-color-start: color-mix(in srgb, var(--sc-cell-changed-color), #fff 20%);--cell-color-end: color-mix(in srgb, var(--sc-cell-changed-color), #fff 60%);background:linear-gradient(90deg,var(--cell-color-start),var(--cell-color-end))}.gantt-connection-overlay[data-v-d5929c98]{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:15}.connection-path[data-v-d5929c98]{transition:stroke-width .2s ease;pointer-events:auto;cursor:pointer;stroke-dasharray:5px;stroke:var(--sc-cell-text-color)}#arrowhead-marker polygon[data-v-d5929c98]{fill:var(--sc-cell-text-color)}.animated-path[data-v-d5929c98]{animation:animated-dash-d5929c98 infinite 1.5s linear}.connection-path[data-v-d5929c98]:hover{stroke-width:3px}.connection-hitbox[data-v-d5929c98]{pointer-events:auto;cursor:pointer}@keyframes animated-dash-d5929c98{0%{stroke-dashoffset:0px}to{stroke-dashoffset:-10px}}.column-filter[data-v-f56c7674]{display:flex;align-items:center;gap:.25rem;width:100%}.filter-input[data-v-f56c7674],.filter-select[data-v-f56c7674]{background-color:var(--sc-form-background)!important;padding:.15rem .2rem;border:1px solid var(--sc-form-border);border-radius:3px;font-size:.875rem;color:var(--sc-text-color);width:100%;box-sizing:border-box}.filter-input[data-v-f56c7674]:focus,.filter-select[data-v-f56c7674]:focus{outline:none;border-color:var(--sc-input-active-border-color)}.checkbox-filter[data-v-f56c7674]{display:flex;align-items:center;gap:.25rem;font-size:.875rem;color:var(--sc-text-color);cursor:pointer}.filter-checkbox[data-v-f56c7674]{margin:0}.date-range-filter[data-v-f56c7674]{display:flex;gap:.25rem;align-items:center;width:100%}.date-range-filter .filter-input[data-v-f56c7674]{flex:1;min-width:0}.date-separator[data-v-f56c7674]{color:var(--sc-gray-50);font-weight:500;padding:0 .25rem;flex-shrink:0}.clear-btn[data-v-f56c7674]{background:var(--sc-gray-10, #f0f0f0);border:1px solid var(--sc-form-border);border-radius:3px;color:var(--sc-gray-70);cursor:pointer;font-size:1rem;padding:.15rem .4rem;line-height:1;flex-shrink:0}.atable-header-row th{padding-left:.5ch!important;font-weight:700;min-width:3ch;padding-top:var(--sc-atable-row-padding);padding-bottom:var(--sc-atable-row-padding);box-sizing:border-box;color:var(--sc-header-text-color);position:relative}#header-index{padding-left:var(--sc-atable-row-padding);box-sizing:border-box;border-top:none}.tree-index{padding-right:0}th{order:1}.list-expansion-index{width:2ch;margin-left:5px}.cursor-pointer{cursor:pointer}.atable-filters-row th{padding:.25rem .5ch;vertical-align:top}.row-actions-header{width:2rem;min-width:2rem;padding:0 .25rem}:root{--sc-primary-color: #0098c9;--sc-primary-text-color: #ffffff;--sc-brand-color: #202a44;--sc-gray-5: #f2f2f2;--sc-gray-10: #e6e6e6;--sc-gray-20: #cccccc;--sc-gray-50: #808080;--sc-gray-60: #666666;--sc-gray-80: #333333;--sc-brand-danger: #e63c28;--sc-brand-success: #155724;--sc-brand-warning: #b99d3e;--sc-active-cell-background: #ffffff;--sc-active-cell-outline: #e6a92d;--sc-cell-border-color: #ffffff;--sc-cell-text-color: #3a3c41;--sc-focus-cell-background: #ffffff;--sc-focus-cell-outline: #000000;--sc-header-border-color: #ffffff;--sc-header-text-color: var(--sc-gray-20);--sc-row-border-color: var(--sc-gray-20);--sc-row-color-zebra-dark: #dddddd;--sc-row-color-zebra-light: #eeeeee;--sc-row-number-background-color: #ffffff;--sc-input-active-border-color: #000000;--sc-input-active-label-color: #000000;--sc-input-border-color: var(--sc-gray-20);--sc-input-label-color: var(--sc-gray-60);--sc-required-border: #e63c28;--sc-cell-changed-color: #d8edff;--sc-form-border: var(--sc-gray-5);--sc-form-background: #ffffff;--sc-input-field-background: #ffffff;--sc-input-field-disabled-background: var(--sc-gray-5);--sc-font-size: 10px;--sc-font-family: Arimo, Arial, sans-serif;--sc-table-font-size: 16px;--sc-atable-font-family: "Arimo", sans-serif;--sc-atable-row-padding: .125rem;--sc-atable-row-height: 1.5em;--sc-atable-cell-border-width: 2px;--sc-table-loading-color: 204, 204, 204;--sc-btn-border: #cccccc;--sc-btn-color: white;--sc-btn-hover: #f2f2f2;--sc-btn-label-color: black}.amodal{position:absolute;background-color:var(--sc-row-color-zebra-dark);z-index:200}.atable-container{position:relative}.sticky-index{position:sticky;left:0;z-index:100;order:0}.sticky-column,th.sticky-column,td.sticky-column,th.sticky-index,td.sticky-index{position:sticky;z-index:100;order:0;background:#fff}.sticky-column-edge,.atable th.sticky-column-edge{border-right:1px solid var(--sc-row-border-color)}[data-v-423f43d7]:root{--sc-primary-color: #0098c9;--sc-primary-text-color: #ffffff;--sc-brand-color: #202a44;--sc-gray-5: #f2f2f2;--sc-gray-10: #e6e6e6;--sc-gray-20: #cccccc;--sc-gray-50: #808080;--sc-gray-60: #666666;--sc-gray-80: #333333;--sc-brand-danger: #e63c28;--sc-brand-success: #155724;--sc-brand-warning: #b99d3e;--sc-active-cell-background: #ffffff;--sc-active-cell-outline: #e6a92d;--sc-cell-border-color: #ffffff;--sc-cell-text-color: #3a3c41;--sc-focus-cell-background: #ffffff;--sc-focus-cell-outline: #000000;--sc-header-border-color: #ffffff;--sc-header-text-color: var(--sc-gray-20);--sc-row-border-color: var(--sc-gray-20);--sc-row-color-zebra-dark: #dddddd;--sc-row-color-zebra-light: #eeeeee;--sc-row-number-background-color: #ffffff;--sc-input-active-border-color: #000000;--sc-input-active-label-color: #000000;--sc-input-border-color: var(--sc-gray-20);--sc-input-label-color: var(--sc-gray-60);--sc-required-border: #e63c28;--sc-cell-changed-color: #d8edff;--sc-form-border: var(--sc-gray-5);--sc-form-background: #ffffff;--sc-input-field-background: #ffffff;--sc-input-field-disabled-background: var(--sc-gray-5);--sc-font-size: 10px;--sc-font-family: Arimo, Arial, sans-serif;--sc-table-font-size: 16px;--sc-atable-font-family: "Arimo", sans-serif;--sc-atable-row-padding: .125rem;--sc-atable-row-height: 1.5em;--sc-atable-cell-border-width: 2px;--sc-table-loading-color: 204, 204, 204;--sc-btn-border: #cccccc;--sc-btn-color: white;--sc-btn-hover: #f2f2f2;--sc-btn-label-color: black}.atable[data-v-423f43d7]{position:relative;font-family:var(--sc-atable-font-family);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:var(--sc-table-font-size);border-collapse:collapse;box-sizing:border-box;table-layout:auto;width:auto;overflow:clip;height:1px}.atable th[data-v-423f43d7]{border-width:0px;border-style:solid;border-radius:0;padding-left:.5ch;padding-right:.5ch;padding-top:var(--sc-atable-row-padding);padding-bottom:var(--sc-atable-row-padding);color:var(--sc-gray-60);height:var(--sc-atable-row-height);font-weight:300;letter-spacing:.05rem;order:1;box-sizing:border-box}.atable th[data-v-423f43d7]:focus{outline:none}.atable[data-v-423f43d7]:tbody{overflow:hidden;position:relative}.atable[data-v-423f43d7]:tbody:before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background-color:transparent;z-index:100}.aloading[data-v-a930a25b]{width:100%;border-top:1px solid var(--sc-row-border-color);border-bottom:1px solid var(--sc-row-border-color);display:flex;background-color:#fff;border-left:4px solid var(--sc-row-border-color);padding-left:.5ch!important;padding-right:.5ch;padding-top:var(--sc-atable-row-padding);padding-bottom:var(--sc-atable-row-padding);align-items:center;box-sizing:border-box;background:var(--sc-focus-cell-background);overflow:hidden;position:relative}.aloading-bar[data-v-a930a25b]{width:100%;height:100%;position:absolute;left:-100%;top:0;background:linear-gradient(90deg,rgba(var(--sc-table-loading-color),0),rgba(var(--sc-table-loading-color),1),rgba(var(--sc-table-loading-color),0));animation:gradient-a930a25b infinite 2s;z-index:0}.aloading-header[data-v-a930a25b]{color:var(--sc-cell-text-color);font-family:var(--sc-atable-font-family);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:var(--sc-table-font-size);padding:0;margin:0;font-weight:400;z-index:1}.aloading-header[data-v-a930a25b]:after{content:"...";animation:ellipse-a930a25b 2s;animation-iteration-count:infinite}@keyframes gradient-a930a25b{0%{left:-100%}to{left:100%}}@keyframes ellipse-a930a25b{0%{content:""}20%{content:""}40%{content:"."}60%{content:".."}80%{content:"..."}}.aloading[data-v-e1165876]{width:100%;border-top:1px solid var(--sc-row-border-color);border-bottom:1px solid var(--sc-row-border-color);display:flex;background-color:#fff;border-left:4px solid var(--sc-row-border-color);padding-left:.5ch!important;padding-right:.5ch;padding-top:var(--sc-atable-row-padding);padding-bottom:var(--sc-atable-row-padding);align-items:center;box-sizing:border-box;background:var(--sc-focus-cell-background);overflow:hidden;position:relative}.aloading-bar[data-v-e1165876]{width:50%;height:3px;position:absolute;left:-100%;bottom:0;background:var(--sc-row-border-color);animation:bar-left-e1165876 infinite 2s;z-index:0}.aloading-header[data-v-e1165876]{color:var(--sc-cell-text-color);font-family:var(--sc-atable-font-family);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:var(--sc-table-font-size);padding:0;margin:0;font-weight:400;z-index:1}.aloading-header[data-v-e1165876]:after{content:"...";animation:ellipse-e1165876 2s;animation-iteration-count:infinite}@keyframes bar-left-e1165876{0%{left:-50%}to{left:100%}}@keyframes ellipse-e1165876{0%{content:""}20%{content:""}40%{content:"."}60%{content:".."}80%{content:"..."}}
package/dist/atable.d.ts CHANGED
@@ -10,6 +10,7 @@ import ATableHeader from './components/ATableHeader.vue';
10
10
  import ATableLoading from './components/ATableLoading.vue';
11
11
  import ATableLoadingBar from './components/ATableLoadingBar.vue';
12
12
  import ATableModal from './components/ATableModal.vue';
13
+ import type { ColumnSchema } from '@stonecrop/schema';
13
14
  import { ComputedRef } from 'vue';
14
15
  import { CSSProperties } from 'vue';
15
16
  import DeleteIcon from './stonecrop-ui-icon-delete.svg?raw';
@@ -199,10 +200,14 @@ export declare const createTableStore: (initData: {
199
200
  }) => Store<`table-${string}`, Pick<{
200
201
  columns: Ref< {
201
202
  name: string;
202
- align?: CanvasTextAlign | undefined;
203
- edit?: boolean | undefined;
204
- label?: string | undefined;
203
+ format?: string | ((value: any, context: CellContext) => string) | undefined;
204
+ modalComponent?: string | ((context: CellContext) => string) | undefined;
205
+ mask?: ((value: any) => any) | undefined;
206
+ readonly originalIndex?: number | undefined;
205
207
  fieldtype?: string | undefined;
208
+ label?: string | undefined;
209
+ align?: "left" | "right" | "center" | "start" | "end" | undefined;
210
+ edit?: boolean | undefined;
206
211
  width?: string | undefined;
207
212
  pinned?: boolean | undefined;
208
213
  resizable?: boolean | undefined;
@@ -213,20 +218,20 @@ filterOptions?: any[] | undefined;
213
218
  filterComponent?: string | undefined;
214
219
  cellComponent?: string | undefined;
215
220
  cellComponentProps?: Record<string, any> | undefined;
216
- modalComponent?: string | ((context: CellContext) => string) | undefined;
217
221
  modalComponentExtraProps?: Record<string, any> | undefined;
218
- format?: string | ((value: any, context: CellContext) => string) | undefined;
219
- mask?: ((value: any) => any) | undefined;
220
222
  isGantt?: boolean | undefined;
221
223
  ganttComponent?: string | undefined;
222
224
  colspan?: number | undefined;
223
- originalIndex?: number | undefined;
224
225
  }[], TableColumn[] | {
225
226
  name: string;
226
- align?: CanvasTextAlign | undefined;
227
- edit?: boolean | undefined;
228
- label?: string | undefined;
227
+ format?: string | ((value: any, context: CellContext) => string) | undefined;
228
+ modalComponent?: string | ((context: CellContext) => string) | undefined;
229
+ mask?: ((value: any) => any) | undefined;
230
+ readonly originalIndex?: number | undefined;
229
231
  fieldtype?: string | undefined;
232
+ label?: string | undefined;
233
+ align?: "left" | "right" | "center" | "start" | "end" | undefined;
234
+ edit?: boolean | undefined;
230
235
  width?: string | undefined;
231
236
  pinned?: boolean | undefined;
232
237
  resizable?: boolean | undefined;
@@ -237,14 +242,10 @@ filterOptions?: any[] | undefined;
237
242
  filterComponent?: string | undefined;
238
243
  cellComponent?: string | undefined;
239
244
  cellComponentProps?: Record<string, any> | undefined;
240
- modalComponent?: string | ((context: CellContext) => string) | undefined;
241
245
  modalComponentExtraProps?: Record<string, any> | undefined;
242
- format?: string | ((value: any, context: CellContext) => string) | undefined;
243
- mask?: ((value: any) => any) | undefined;
244
246
  isGantt?: boolean | undefined;
245
247
  ganttComponent?: string | undefined;
246
248
  colspan?: number | undefined;
247
- originalIndex?: number | undefined;
248
249
  }[]>;
249
250
  config: Ref< {
250
251
  view?: "uncounted" | "list" | "list-expansion" | undefined;
@@ -843,10 +844,14 @@ updateRows: (newRows: TableRow[]) => void;
843
844
  }, "columns" | "config" | "connectionHandles" | "connectionPaths" | "filterState" | "ganttBars" | "modal" | "rows" | "sortState" | "updates">, Pick<{
844
845
  columns: Ref< {
845
846
  name: string;
846
- align?: CanvasTextAlign | undefined;
847
- edit?: boolean | undefined;
848
- label?: string | undefined;
847
+ format?: string | ((value: any, context: CellContext) => string) | undefined;
848
+ modalComponent?: string | ((context: CellContext) => string) | undefined;
849
+ mask?: ((value: any) => any) | undefined;
850
+ readonly originalIndex?: number | undefined;
849
851
  fieldtype?: string | undefined;
852
+ label?: string | undefined;
853
+ align?: "left" | "right" | "center" | "start" | "end" | undefined;
854
+ edit?: boolean | undefined;
850
855
  width?: string | undefined;
851
856
  pinned?: boolean | undefined;
852
857
  resizable?: boolean | undefined;
@@ -857,20 +862,20 @@ filterOptions?: any[] | undefined;
857
862
  filterComponent?: string | undefined;
858
863
  cellComponent?: string | undefined;
859
864
  cellComponentProps?: Record<string, any> | undefined;
860
- modalComponent?: string | ((context: CellContext) => string) | undefined;
861
865
  modalComponentExtraProps?: Record<string, any> | undefined;
862
- format?: string | ((value: any, context: CellContext) => string) | undefined;
863
- mask?: ((value: any) => any) | undefined;
864
866
  isGantt?: boolean | undefined;
865
867
  ganttComponent?: string | undefined;
866
868
  colspan?: number | undefined;
867
- originalIndex?: number | undefined;
868
869
  }[], TableColumn[] | {
869
870
  name: string;
870
- align?: CanvasTextAlign | undefined;
871
- edit?: boolean | undefined;
872
- label?: string | undefined;
871
+ format?: string | ((value: any, context: CellContext) => string) | undefined;
872
+ modalComponent?: string | ((context: CellContext) => string) | undefined;
873
+ mask?: ((value: any) => any) | undefined;
874
+ readonly originalIndex?: number | undefined;
873
875
  fieldtype?: string | undefined;
876
+ label?: string | undefined;
877
+ align?: "left" | "right" | "center" | "start" | "end" | undefined;
878
+ edit?: boolean | undefined;
874
879
  width?: string | undefined;
875
880
  pinned?: boolean | undefined;
876
881
  resizable?: boolean | undefined;
@@ -881,14 +886,10 @@ filterOptions?: any[] | undefined;
881
886
  filterComponent?: string | undefined;
882
887
  cellComponent?: string | undefined;
883
888
  cellComponentProps?: Record<string, any> | undefined;
884
- modalComponent?: string | ((context: CellContext) => string) | undefined;
885
889
  modalComponentExtraProps?: Record<string, any> | undefined;
886
- format?: string | ((value: any, context: CellContext) => string) | undefined;
887
- mask?: ((value: any) => any) | undefined;
888
890
  isGantt?: boolean | undefined;
889
891
  ganttComponent?: string | undefined;
890
892
  colspan?: number | undefined;
891
- originalIndex?: number | undefined;
892
893
  }[]>;
893
894
  config: Ref< {
894
895
  view?: "uncounted" | "list" | "list-expansion" | undefined;
@@ -1487,10 +1488,14 @@ updateRows: (newRows: TableRow[]) => void;
1487
1488
  }, "display" | "table" | "filteredRows" | "hasPinnedColumns" | "isGanttView" | "isTreeView" | "isDependencyGraphEnabled" | "numberedRowWidth" | "zeroColumn">, Pick<{
1488
1489
  columns: Ref< {
1489
1490
  name: string;
1490
- align?: CanvasTextAlign | undefined;
1491
- edit?: boolean | undefined;
1492
- label?: string | undefined;
1491
+ format?: string | ((value: any, context: CellContext) => string) | undefined;
1492
+ modalComponent?: string | ((context: CellContext) => string) | undefined;
1493
+ mask?: ((value: any) => any) | undefined;
1494
+ readonly originalIndex?: number | undefined;
1493
1495
  fieldtype?: string | undefined;
1496
+ label?: string | undefined;
1497
+ align?: "left" | "right" | "center" | "start" | "end" | undefined;
1498
+ edit?: boolean | undefined;
1494
1499
  width?: string | undefined;
1495
1500
  pinned?: boolean | undefined;
1496
1501
  resizable?: boolean | undefined;
@@ -1501,20 +1506,20 @@ filterOptions?: any[] | undefined;
1501
1506
  filterComponent?: string | undefined;
1502
1507
  cellComponent?: string | undefined;
1503
1508
  cellComponentProps?: Record<string, any> | undefined;
1504
- modalComponent?: string | ((context: CellContext) => string) | undefined;
1505
1509
  modalComponentExtraProps?: Record<string, any> | undefined;
1506
- format?: string | ((value: any, context: CellContext) => string) | undefined;
1507
- mask?: ((value: any) => any) | undefined;
1508
1510
  isGantt?: boolean | undefined;
1509
1511
  ganttComponent?: string | undefined;
1510
1512
  colspan?: number | undefined;
1511
- originalIndex?: number | undefined;
1512
1513
  }[], TableColumn[] | {
1513
1514
  name: string;
1514
- align?: CanvasTextAlign | undefined;
1515
- edit?: boolean | undefined;
1516
- label?: string | undefined;
1515
+ format?: string | ((value: any, context: CellContext) => string) | undefined;
1516
+ modalComponent?: string | ((context: CellContext) => string) | undefined;
1517
+ mask?: ((value: any) => any) | undefined;
1518
+ readonly originalIndex?: number | undefined;
1517
1519
  fieldtype?: string | undefined;
1520
+ label?: string | undefined;
1521
+ align?: "left" | "right" | "center" | "start" | "end" | undefined;
1522
+ edit?: boolean | undefined;
1518
1523
  width?: string | undefined;
1519
1524
  pinned?: boolean | undefined;
1520
1525
  resizable?: boolean | undefined;
@@ -1525,14 +1530,10 @@ filterOptions?: any[] | undefined;
1525
1530
  filterComponent?: string | undefined;
1526
1531
  cellComponent?: string | undefined;
1527
1532
  cellComponentProps?: Record<string, any> | undefined;
1528
- modalComponent?: string | ((context: CellContext) => string) | undefined;
1529
1533
  modalComponentExtraProps?: Record<string, any> | undefined;
1530
- format?: string | ((value: any, context: CellContext) => string) | undefined;
1531
- mask?: ((value: any) => any) | undefined;
1532
1534
  isGantt?: boolean | undefined;
1533
1535
  ganttComponent?: string | undefined;
1534
1536
  colspan?: number | undefined;
1535
- originalIndex?: number | undefined;
1536
1537
  }[]>;
1537
1538
  config: Ref< {
1538
1539
  view?: "uncounted" | "list" | "list-expansion" | undefined;
@@ -2415,165 +2416,59 @@ export declare interface RowMoveEvent {
2415
2416
  }
2416
2417
 
2417
2418
  /**
2418
- * Table column definition.
2419
+ * Convert an array of doctype field descriptors into ATable column definitions.
2420
+ *
2421
+ * Fields are excluded when:
2422
+ * - `hidden: true` — field should not be visible in any view
2423
+ * - no `fieldtype` — non-scalar entry (nested table or fieldset), has no column equivalent
2424
+ *
2425
+ * `fieldname` is renamed to `name`; `hidden` is stripped. All other `ColumnSchema` properties
2426
+ * spread through automatically.
2427
+ *
2419
2428
  * @public
2420
2429
  */
2421
- export declare interface TableColumn {
2422
- /**
2423
- * The key of the column. This is used to identify the column in the table.
2424
- */
2430
+ export declare function schemaToColumns(schema: ColumnSchema[]): TableColumn[];
2431
+
2432
+ /**
2433
+ * Runtime column definition for ATable.
2434
+ *
2435
+ * Extends `ColumnSchema` from `@stonecrop/schema` — all authoring properties (`label`, `fieldtype`, `width`,
2436
+ * `pinned`, filter config, cell/modal component names, etc.) are inherited. The overrides
2437
+ * below widen three properties for runtime use (live functions, broader alignment values)
2438
+ * and add two runtime-only additions (`mask`, `originalIndex`).
2439
+ *
2440
+ * Schema-based callers should author columns as `ColumnSchema[]` (using `fieldname`) and
2441
+ * pass them via ATable's `:schema` prop — `TableColumn` is the internal runtime type and
2442
+ * callers working from a doctype schema never need to construct it directly.
2443
+ * @public
2444
+ */
2445
+ export declare interface TableColumn extends Omit<ColumnSchema, 'fieldname' | 'hidden' | 'format' | 'modalComponent'> {
2446
+ /** Runtime column key. Corresponds to `fieldname` in `ColumnSchema`; populated by `schemaToColumns`. */
2425
2447
  name: string;
2426
2448
  /**
2427
- * The alignment of the column. Possible values:
2428
- * - `left` - left aligned
2429
- * - `center` - center aligned
2430
- * - `right` - right aligned
2431
- * - `start` - aligned to the start of the column
2432
- * - `end` - aligned to the end of the column
2433
- *
2434
- * @defaultValue 'center'
2435
- */
2436
- align?: CanvasTextAlign;
2437
- /**
2438
- * Control whether cells for the column is editable.
2439
- *
2440
- * @defaultValue false
2441
- */
2442
- edit?: boolean;
2443
- /**
2444
- * The label of the column. This is displayed in the table header.
2445
- *
2446
- * @defaultValue If no label is provided, a character will be assigned alphabetically,
2447
- * starting from 'A' for the first column, 'B' for the second column, and so on.
2448
- */
2449
- label?: string;
2450
- /**
2451
- * The semantic field type of the column. Uses the same StonecropFieldType enum as forms.
2452
- * Common values: 'Data', 'Text', 'Int', 'Float', 'Date', 'Select', 'Link', 'Check', etc.
2453
- *
2454
- * @public
2455
- */
2456
- fieldtype?: string;
2457
- /**
2458
- * The width of the column. This can be a number (in pixels) or a string (in CSS units).
2459
- *
2460
- * @defaultValue '40ch'
2461
- */
2462
- width?: string;
2463
- /**
2464
- * Control whether the column should be pinned to the table.
2465
- *
2466
- * @defaultValue false
2467
- */
2468
- pinned?: boolean;
2469
- /**
2470
- * Control whether the column can be resized by the user.
2471
- *
2472
- * @defaultValue false
2473
- */
2474
- resizable?: boolean;
2475
- /**
2476
- * Control whether the column should be sortable.
2477
- *
2478
- * @defaultValue true
2479
- */
2480
- sortable?: boolean;
2481
- /**
2482
- * Control whether the column should be filterable and define filter configuration.
2483
- *
2484
- * @defaultValue true
2485
- */
2486
- filterable?: boolean;
2487
- /**
2488
- * The type of filter for the column.
2489
- *
2490
- * @defaultValue 'text'
2491
- */
2492
- filterType?: 'text' | 'select' | 'number' | 'date' | 'dateRange' | 'checkbox' | 'component';
2493
- /**
2494
- * Options for select-type filters.
2495
- */
2496
- filterOptions?: any[];
2497
- /**
2498
- * Custom component for filtering.
2499
- */
2500
- filterComponent?: string;
2501
- /**
2502
- * The component to use to render the cell for the column. If not provided, the table will
2503
- * render the default `<td>` element.
2504
- */
2505
- cellComponent?: string;
2506
- /**
2507
- * Additional properties to pass to the table's cell component.
2508
- *
2509
- * Only applicable if the `cellComponent` property is set for the column.
2449
+ * Widens `ColumnSchema.format` (string-only) to also accept a live function at runtime.
2450
+ * Serialized string functions are deserialized by the table store's `getFormattedValue`.
2510
2451
  */
2511
- cellComponentProps?: Record<string, any>;
2452
+ format?: string | ((value: any, context: CellContext) => string);
2512
2453
  /**
2513
- * The component to use for the modal. If a function is provided, it will be called with the cell context.
2514
- * The following properties are available on the cell context:
2515
- * - `row` - the row object
2516
- * - `column` - the column object
2517
- * - `table` - the table object
2518
- *
2519
- * The function should return the name of the component to use for the modal.
2520
- *
2521
- * Additionally, the following properties will be automatically passed to the modal component:
2522
- * - `colIndex` - the column index of the current cell
2523
- * - `rowIndex` - the row index of the current cell
2524
- * - `store` - the table data store
2454
+ * Widens `ColumnSchema.modalComponent` (string-only) to also accept a factory function.
2455
+ * When a function is provided it receives the cell context and returns the component name.
2456
+ * The cell context exposes:
2457
+ * - `row` — the row object for the current cell
2458
+ * - `column` — the column object for the current cell
2459
+ * - `table` — the table object
2525
2460
  */
2526
2461
  modalComponent?: string | ((context: CellContext) => string);
2527
2462
  /**
2528
- * Additional properties to pass to the modal component.
2529
- *
2530
- * Only applicable if the `modalComponent` property is set for the column.
2531
- */
2532
- modalComponentExtraProps?: Record<string, any>;
2533
- /**
2534
- * The format function to use to format the value of the cell. This can either be a normal or stringified
2535
- * function that takes the value and the cell context and returns a string.
2536
- */
2537
- format?: string | ((value: any, context: CellContext) => string);
2538
- /**
2539
- * The masking function to use to apply an input mask to the cell. This will accept an input value and
2540
- * return the masked value.
2463
+ * Input mask applied to the cell value before display. Accepts a live function only —
2464
+ * masks cannot be serialized to JSON so they are absent from `ColumnSchema`.
2541
2465
  */
2542
2466
  mask?: (value: any) => any;
2543
2467
  /**
2544
- * Whether the column is a Gantt column.
2545
- *
2546
- * Only applicable for Gantt tables.
2547
- *
2548
- * @defaultValue false
2549
- */
2550
- isGantt?: boolean;
2551
- /**
2552
- * The component to use to render the Gantt bar for the column.
2553
- *
2554
- * Only applicable for Gantt tables.
2555
- *
2556
- * @defaultValue 'AGanttCell'
2557
- */
2558
- ganttComponent?: string;
2559
- /**
2560
- * The colspan of the Gantt bar for the column. This determines how many columns
2561
- * the Gantt bar should span across.
2562
- *
2563
- * Only applicable for Gantt tables.
2564
- *
2565
- * @defaultValue The number of columns in the table, excluding any pinned columns.
2566
- */
2567
- colspan?: number;
2568
- /**
2569
- * The original column index for the Gantt bar, excluding any pinned columns.
2570
- * This is evaluated automatically while rendering the table.
2571
- *
2572
- * Only applicable for Gantt tables.
2573
- *
2574
- * @defaultValue 0
2468
+ * Runtime Gantt column index (excluding pinned columns). Set automatically during
2469
+ * Gantt table rendering.
2575
2470
  */
2576
- originalIndex?: number;
2471
+ readonly originalIndex?: number;
2577
2472
  }
2578
2473
 
2579
2474
  /**