Skip to content

Commit 38587ea

Browse files
authored
feat: add table column width (#316)
1 parent ca2cedc commit 38587ea

File tree

6 files changed

+189
-124
lines changed

6 files changed

+189
-124
lines changed

docs/spec.md

Lines changed: 27 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -8,33 +8,33 @@ type Spec = ArraySpec | BooleanSpec | NumberSpec | ObjectSpec | StringSpec;
88

99
### ArraySpec
1010

11-
| Property | Type | Required | Description |
12-
| :--------------------------- | :----------------------------------------------------------- | :------: | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
13-
| defaultValue | `FieldArrayValue` | | Default value |
14-
| type | `"array"` | yes | Entity type |
15-
| required | `boolean` | | Can the value be `undefined` or `null` |
16-
| maxLength | `bigint` | | Maximum number of array elements |
17-
| minLength | `bigint` | | Minimum number of array elements |
18-
| items | `Spec` | | Entity `spec` for an array element |
19-
| enum | `string[]` | | An array of valid values, for example for a select |
20-
| description | `Record<string, string>` | | Beautiful names for values from `enum` |
21-
| validator | `string` | | The key for determining the [validator](./config.md#validators) for the entity, if the value is empty, the base [validator](./config.md#validators) from the entity config will be used |
22-
| viewSpec.disabled | `boolean` | | Is the field available for editing |
23-
| viewSpec.type | `string` | yes | Key to define [Input](./config.md#inputs) for an entity |
24-
| viewSpec.layout | `string` | | Key to define [Layout](./config.md#layouts) for an entity |
25-
| viewSpec.layoutTitle | `string` | | Title for [Layout](./config.md#layouts) |
26-
| viewSpec.layoutDescription | `string` | | Additional description/hint for [Layout](./config.md#layouts) |
27-
| viewSpec.layoutOpen | `boolean` | | Expand [Layout](./config.md#layouts) at the first rendering |
28-
| viewSpec.itemLabel | `string` | | Text for the button that adds an array element |
29-
| viewSpec.itemPrefix | `string` | | Additional text for an element in the array |
30-
| viewSpec.table | `{label: string; property: string; description?: string;}[]` | | An array whose elements are used to establish column names and their order, if `type === "table"`. `description` adds a hint to a field in the table's header |
31-
| viewSpec.link | `any` | | A field containing information for forming a [link](#link) for a value |
32-
| viewSpec.placeholder | `string` | | A short hint displayed in the field before the user enters the value |
33-
| viewSpec.addButtonPosition | `"down"/"right"` | | The location of the button adding a new element to the array. Default value "down". |
34-
| viewSpec.hidden | `boolean` | | Hide field and view |
35-
| viewSpec.selectParams | `object` | | [Parameters](#selectparams) additional options for the selector |
36-
| viewSpec.checkboxGroupParams | `object` | | [Parameters](#checkboxgroupparams) additional options for the checkbox group |
37-
| viewSpec.inputProps | `object` | | [InputProps](./input-props-map.md) Additional properties for internal input components |
11+
| Property | Type | Required | Description |
12+
| :--------------------------- | :--------------------------------------------------------------------------- | :------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
13+
| defaultValue | `FieldArrayValue` | | Default value |
14+
| type | `"array"` | yes | Entity type |
15+
| required | `boolean` | | Can the value be `undefined` or `null` |
16+
| maxLength | `bigint` | | Maximum number of array elements |
17+
| minLength | `bigint` | | Minimum number of array elements |
18+
| items | `Spec` | | Entity `spec` for an array element |
19+
| enum | `string[]` | | An array of valid values, for example for a select |
20+
| description | `Record<string, string>` | | Beautiful names for values from `enum` |
21+
| validator | `string` | | The key for determining the [validator](./config.md#validators) for the entity, if the value is empty, the base [validator](./config.md#validators) from the entity config will be used |
22+
| viewSpec.disabled | `boolean` | | Is the field available for editing |
23+
| viewSpec.type | `string` | yes | Key to define [Input](./config.md#inputs) for an entity |
24+
| viewSpec.layout | `string` | | Key to define [Layout](./config.md#layouts) for an entity |
25+
| viewSpec.layoutTitle | `string` | | Title for [Layout](./config.md#layouts) |
26+
| viewSpec.layoutDescription | `string` | | Additional description/hint for [Layout](./config.md#layouts) |
27+
| viewSpec.layoutOpen | `boolean` | | Expand [Layout](./config.md#layouts) at the first rendering |
28+
| viewSpec.itemLabel | `string` | | Text for the button that adds an array element |
29+
| viewSpec.itemPrefix | `string` | | Additional text for an element in the array |
30+
| viewSpec.table | `{label: string; property: string; description?: string; width?: number;}[]` | | An array whose elements are used to establish column names and their order, if `type === "table"`. `description` adds a hint to a field in the table's header. `width` sets the width of the column in pixels. |
31+
| viewSpec.link | `any` | | A field containing information for forming a [link](#link) for a value |
32+
| viewSpec.placeholder | `string` | | A short hint displayed in the field before the user enters the value |
33+
| viewSpec.addButtonPosition | `"down"/"right"` | | The location of the button adding a new element to the array. Default value "down". |
34+
| viewSpec.hidden | `boolean` | | Hide field and view |
35+
| viewSpec.selectParams | `object` | | [Parameters](#selectparams) additional options for the selector |
36+
| viewSpec.checkboxGroupParams | `object` | | [Parameters](#checkboxgroupparams) additional options for the checkbox group |
37+
| viewSpec.inputProps | `object` | | [InputProps](./input-props-map.md) Additional properties for internal input components |
3838

3939
### BooleanSpec
4040

src/lib/core/types/specs.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ export interface ArraySpec<
3232
label: string;
3333
property: string;
3434
description?: string;
35+
width?: number;
3536
}[];
3637
link?: LinkType;
3738
placeholder?: string;

src/lib/kit/components/Inputs/TableArrayInput/TableArrayInput.scss

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,11 @@
99
}
1010
}
1111

12+
&__column-title {
13+
overflow: hidden;
14+
text-overflow: ellipsis;
15+
}
16+
1217
&__row {
1318
.g-table__cell {
1419
border-bottom: 0px transparent;
@@ -58,6 +63,20 @@
5863
}
5964
}
6065

66+
&__cell-without-limit {
67+
&_arr,
68+
&_obj {
69+
padding-left: var(--df-table-array-cell-obj-padding-left, var(--g-spacing-half));
70+
71+
& > .simple-vertical-accordeon {
72+
margin-bottom: var(
73+
--df-table-array-cell-obj-simple-vertical-accordeon-margin-bottom,
74+
var(--g-spacing-0)
75+
);
76+
}
77+
}
78+
}
79+
6180
&__idx {
6281
padding-top: var(--df-table-array-idx-padding-top, 6px);
6382
}

0 commit comments

Comments
 (0)