@neovici/cosmoz-form 3.2.0 → 3.2.1
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.
package/dist/render/items.d.ts
CHANGED
|
@@ -5,14 +5,16 @@ type Item = Partial<{
|
|
|
5
5
|
[key]: unknown;
|
|
6
6
|
}>;
|
|
7
7
|
export declare const renderRemove: (remove: () => void) => TemplateResult<1>;
|
|
8
|
+
export declare const renderRemovePlaceholder: () => TemplateResult<1>;
|
|
8
9
|
interface RenderOpts<T extends Item, C extends object = object> {
|
|
9
10
|
fields: Fields<T, C>;
|
|
10
11
|
context?: C;
|
|
11
12
|
touched?: boolean;
|
|
12
13
|
remove?: (index: number) => void;
|
|
14
|
+
removePlaceholder?: boolean;
|
|
13
15
|
update: (index: number, update: Partial<T>) => void;
|
|
14
16
|
}
|
|
15
|
-
export declare const renderItem: <T extends Item, C extends object = object>(values: T, index: number, { update, remove, fields, context, touched, ...thru }: RenderOpts<T, C>) => TemplateResult;
|
|
17
|
+
export declare const renderItem: <T extends Item, C extends object = object>(values: T, index: number, { update, remove, removePlaceholder, fields, context, touched, ...thru }: RenderOpts<T, C>) => TemplateResult;
|
|
16
18
|
declare const defaultKeyFunction: <V>(item: V) => V;
|
|
17
19
|
export interface RenderItems<T extends object, C extends object = object> {
|
|
18
20
|
items: T[];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"items.d.ts","sourceRoot":"","sources":["../../src/render/items.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,cAAc,EAAQ,MAAM,UAAU,CAAC;AAEhD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAIlC,QAAA,MAAM,GAAG,eAAgB,CAAC;AAC1B,KAAK,IAAI,GAAG,OAAO,CAAC;IAAE,CAAC,GAAG,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC,CAAC;AAOxC,eAAO,MAAM,YAAY,GAAI,QAAQ,MAAM,IAAI,sBAGpC,CAAC;
|
|
1
|
+
{"version":3,"file":"items.d.ts","sourceRoot":"","sources":["../../src/render/items.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,cAAc,EAAQ,MAAM,UAAU,CAAC;AAEhD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAIlC,QAAA,MAAM,GAAG,eAAgB,CAAC;AAC1B,KAAK,IAAI,GAAG,OAAO,CAAC;IAAE,CAAC,GAAG,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC,CAAC;AAOxC,eAAO,MAAM,YAAY,GAAI,QAAQ,MAAM,IAAI,sBAGpC,CAAC;AAIZ,eAAO,MAAM,uBAAuB,yBAC8B,CAAC;AAEnE,UAAU,UAAU,CAAC,CAAC,SAAS,IAAI,EAAE,CAAC,SAAS,MAAM,GAAG,MAAM;IAC7D,MAAM,EAAE,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IACrB,OAAO,CAAC,EAAE,CAAC,CAAC;IACZ,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAGjC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;CACpD;AACD,eAAO,MAAM,UAAU,GAAI,CAAC,SAAS,IAAI,EAAE,CAAC,SAAS,MAAM,GAAG,MAAM,EACnE,QAAQ,CAAC,EACT,OAAO,MAAM,EACb,0EAQG,UAAU,CAAC,CAAC,EAAE,CAAC,CAAC,KACjB,cAwBK,CAAC;AAET,QAAA,MAAM,kBAAkB,GAAI,CAAC,EAAE,MAAM,CAAC,KAAG,CACH,CAAC;AAEvC,MAAM,WAAW,WAAW,CAAC,CAAC,SAAS,MAAM,EAAE,CAAC,SAAS,MAAM,GAAG,MAAM;IACvE,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,MAAM,EAAE,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IACrB,OAAO,CAAC,EAAE,CAAC,CAAC;IACZ,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,CAAC,CAAC,EAAE,cAAc,KAAK,IAAI,CAAC;IACpC,UAAU,CAAC,EAAE,OAAO,UAAU,CAAC;IAC/B,QAAQ,CAAC,EAAE,CAAC,CAAC;IACb,WAAW,CAAC,EAAE,OAAO,kBAAkB,CAAC;IACxC,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;IACnD,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,WAAW,GAAI,CAAC,SAAS,MAAM,EAAE,CAAC,SAAS,MAAM,GAAG,MAAM,EAAE,uGAWtE,WAAW,CAAC,CAAC,EAAE,CAAC,CAAC,sBAqCZ,CAAC;AAET,eAAO,MAAM,iBAAiB,GAAI,CAAC,SAAS,MAAM,EAAE,CAAC,SAAS,MAAM,GAAG,MAAM,EAAE,aAE5E;IACF,MAAM,EAAE,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;CACrB,WAGA,CAAC"}
|
package/dist/render/items.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { virtualize } from '@lit-labs/virtualizer/virtualize.js';
|
|
2
|
-
import {
|
|
2
|
+
import { xCloseIcon } from '@neovici/cosmoz-icons/untitled';
|
|
3
3
|
import { tagged as css } from '@neovici/cosmoz-utils';
|
|
4
4
|
import { invoke, noop } from '@neovici/cosmoz-utils/function';
|
|
5
5
|
import { html } from 'lit-html';
|
|
@@ -12,9 +12,12 @@ const mkDefaults = (defaults) => {
|
|
|
12
12
|
return Object.assign(newly, { [key]: newly });
|
|
13
13
|
};
|
|
14
14
|
export const renderRemove = (remove) => html `<button class="remove" ?disabled=${!remove} @click=${remove}>
|
|
15
|
-
${
|
|
15
|
+
${xCloseIcon({ width: '20', height: '20' })}
|
|
16
16
|
</button>`;
|
|
17
|
-
|
|
17
|
+
// An empty cell the size of the remove button, used to keep the columns
|
|
18
|
+
// aligned in rows that have no remove button (the header and the add row).
|
|
19
|
+
export const renderRemovePlaceholder = () => html `<span class="remove-placeholder" aria-hidden="true"></span>`;
|
|
20
|
+
export const renderItem = (values, index, { update, remove, removePlaceholder, fields, context, touched = false, ...thru }) => html `<div class="item" data-index=${index}>
|
|
18
21
|
${[
|
|
19
22
|
renderFields({
|
|
20
23
|
...thru,
|
|
@@ -32,6 +35,7 @@ export const renderItem = (values, index, { update, remove, fields, context, tou
|
|
|
32
35
|
onValues: noop,
|
|
33
36
|
}),
|
|
34
37
|
when(remove, (remove) => renderRemove(values && remove && (() => remove(index)))),
|
|
38
|
+
when(removePlaceholder, renderRemovePlaceholder),
|
|
35
39
|
]}
|
|
36
40
|
</div>`;
|
|
37
41
|
const defaultKeyFunction = (item) => item?.[key] ?? item;
|
|
@@ -48,12 +52,14 @@ export const renderItems = ({ items, fields, renderItem: render = renderItem, pa
|
|
|
48
52
|
case index === 0:
|
|
49
53
|
return html `<div class="headers">
|
|
50
54
|
${renderHeaders({ fields })}
|
|
55
|
+
${when(thru.remove != null, renderRemovePlaceholder)}
|
|
51
56
|
</div>`;
|
|
52
57
|
case defaults != null && index === items.length + 1:
|
|
53
58
|
return render(item, index - 1, {
|
|
54
59
|
...thru,
|
|
55
60
|
fields,
|
|
56
61
|
remove: undefined,
|
|
62
|
+
removePlaceholder: thru.remove != null,
|
|
57
63
|
update: (index, changes) => update(index, { ...item, ...changes }),
|
|
58
64
|
});
|
|
59
65
|
default:
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/render/styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,
|
|
1
|
+
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/render/styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,QAqElB,CAAC"}
|
package/dist/render/styles.js
CHANGED
|
@@ -42,6 +42,9 @@ export const styles = css `
|
|
|
42
42
|
margin: 8px 4px;
|
|
43
43
|
}
|
|
44
44
|
.remove {
|
|
45
|
+
display: inline-flex;
|
|
46
|
+
align-items: center;
|
|
47
|
+
justify-content: center;
|
|
45
48
|
background: none;
|
|
46
49
|
border: none;
|
|
47
50
|
outline: none;
|
|
@@ -57,4 +60,12 @@ export const styles = css `
|
|
|
57
60
|
opacity: 0;
|
|
58
61
|
pointer-events: none;
|
|
59
62
|
}
|
|
63
|
+
/* Empty stand-in matching the remove button's footprint, so rows without a
|
|
64
|
+
remove button (the header row and the add row) keep their columns aligned
|
|
65
|
+
with the removable rows. */
|
|
66
|
+
.remove-placeholder {
|
|
67
|
+
flex: none;
|
|
68
|
+
width: 24px;
|
|
69
|
+
margin: 0 8px;
|
|
70
|
+
}
|
|
60
71
|
`;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@neovici/cosmoz-form",
|
|
3
|
-
"version": "3.2.
|
|
3
|
+
"version": "3.2.1",
|
|
4
4
|
"description": "A pionjs component",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"web-components",
|
|
@@ -70,7 +70,7 @@
|
|
|
70
70
|
"@lit-labs/virtualizer": "^2.1.1",
|
|
71
71
|
"@neovici/cosmoz-autocomplete": "^10.10.4 || ^11.0.0 || ^12.0.0 || ^13.0.0",
|
|
72
72
|
"@neovici/cosmoz-dialog": "^4.0.0 || ^5.0.0",
|
|
73
|
-
"@neovici/cosmoz-icons": "^1.
|
|
73
|
+
"@neovici/cosmoz-icons": "^1.4.0",
|
|
74
74
|
"@neovici/cosmoz-input": "^5.5.0",
|
|
75
75
|
"@neovici/cosmoz-spinner": "^1.0.2",
|
|
76
76
|
"@neovici/cosmoz-utils": "^6.22.0",
|