@neovici/cosmoz-omnitable 14.11.0 → 14.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 (3) hide show
  1. package/lib/settings/style.css.js +30 -7
  2. package/lib/use-hash-state.js +53 -40
  3. package/package.json +2 -2
package/lib/settings/style.css.js CHANGED
@@ -9,12 +9,16 @@ export default css`
9
9
  max-height: var(--ot-height, 60vh);
10
10
  outline: none;
11
11
  min-width: 270px;
12
+ background-color: var(--cosmoz-omnitable-settings-bg-color, #fff);
12
13
  }
13
14
 
14
15
  .headline {
15
16
  font-weight: 500;
16
17
  font-size: 13px;
17
- color: var(--cosmoz-omnitable-settings-color, #101010);
18
+ color: var(
19
+ --cosmoz-omnitable-settings-color,
20
+ var(--cz-text-color, #101010)
21
+ );
18
22
  text-transform: uppercase;
19
23
  line-height: 0.95;
20
24
  padding: 10px 14px;
@@ -35,7 +39,10 @@ export default css`
35
39
  scrollbar-gutter: stable;
36
40
  text-transform: uppercase;
37
41
  font-size: 12px;
38
- color: var(--cosmoz-omnitable-settings-color, #101010);
42
+ color: var(
43
+ --cosmoz-omnitable-settings-color,
44
+ var(--cz-text-color, #101010)
45
+ );
39
46
  }
40
47
  .contents::-webkit-scrollbar {
41
48
  width: 2px;
@@ -52,7 +59,10 @@ export default css`
52
59
  box-shadow: inset 0px -1px 0px rgba(0, 0, 0, 0.15);
53
60
  font-weight: 400;
54
61
  font-size: 13px;
55
- color: var(--cosmoz-omnitable-settings-color, #101010);
62
+ color: var(
63
+ --cosmoz-omnitable-settings-color,
64
+ var(--cz-text-color, #101010)
65
+ );
56
66
  line-height: 0.95;
57
67
  padding: 14px;
58
68
  display: flex;
@@ -80,7 +90,10 @@ export default css`
80
90
  .item {
81
91
  display: flex;
82
92
  align-items: center;
83
- background: var(--cosmoz-omnitable-settings-item-bg-color, #fff);
93
+ background: var(
94
+ --cosmoz-omnitable-settings-item-bg-color,
95
+ var(--cz-surface-light, #fff)
96
+ );
84
97
  }
85
98
  .item.drag {
86
99
  opacity: 0.6;
@@ -98,12 +111,19 @@ export default css`
98
111
  background: transparent;
99
112
  cursor: move;
100
113
  margin-right: 12px;
101
- color: #c4c4c4;
114
+ color: var(
115
+ --cosmoz-omnitable-settings-pull-color,
116
+ var(--cz-color-muted, #c4c4c4)
117
+ );
102
118
  }
103
119
  .title {
104
120
  flex: auto;
105
121
  overflow: hidden;
106
122
  text-overflow: ellipsis;
123
+ color: var(
124
+ --cosmoz-omnitable-settings-title-color,
125
+ var(--cz-text-color, inherit)
126
+ );
107
127
  }
108
128
  .title[has-filter] {
109
129
  font-weight: bold;
@@ -133,7 +153,7 @@ export default css`
133
153
  flex: 1;
134
154
  }
135
155
  .button:not(.reset):hover {
136
- background: var(--cosmoz-button-hover-bg-color, #3a3f44);
156
+ background: var(--cz-action-button-hover-bg, #3a3f44);
137
157
  }
138
158
  .button[disabled] {
139
159
  opacity: 0.2;
@@ -193,7 +213,10 @@ export default css`
193
213
  export const dropdown = css`
194
214
  :host {
195
215
  display: contents;
196
- color: var(--cosmoz-omnitable-settings-color, #101010);
216
+ color: var(
217
+ --cosmoz-omnitable-settings-color,
218
+ var(--cz-text-color, #101010)
219
+ );
197
220
  --cosmoz-dropdown-box-shadow: 0 3px 4px 0 rgb(0 0 0 / 14%),
198
221
  0 1px 8px 0 rgb(0 0 0 / 12%), 0 3px 3px -2px rgb(0 0 0 / 40%);
199
222
  }
package/lib/use-hash-state.js CHANGED
@@ -1,58 +1,71 @@
1
1
  import { useCallback, useState } from '@pionjs/pion';
2
2
  import { navigate } from '@neovici/cosmoz-router';
3
3
  import { identity, invoke } from '@neovici/cosmoz-utils/function';
4
+ import {
5
+ hashUrl,
6
+ multiParse,
7
+ singleParse,
8
+ } from '@neovici/cosmoz-utils/location';
4
9
 
5
- const
6
- hashUrl = () => new URL(location.hash.replace(/^#!?/iu, '').replace('%23', '#'), location.origin),
10
+ const makeLinker =
11
+ (parameterize) =>
12
+ (hashParam, value, codec = identity) => {
13
+ const url = hashUrl(),
14
+ searchParams = new URLSearchParams(url.hash.replace('#', ''));
7
15
 
8
- singleParse = (hashParam, codec = identity) => codec(new URLSearchParams(hashUrl().hash.replace('#', '')).get(hashParam)),
9
- multiParse = (hashParam, codec = identity) => {
10
- const params = Array.from(new URLSearchParams(hashUrl().hash.replace('#', '')).entries())
11
- .filter(([param]) => param.startsWith(hashParam))
12
- .map(([param, value]) => codec([param.replace(hashParam, ''), value]))
13
- .filter(([, value]) => value != null);
16
+ // TODO: make parameterize pure
17
+ parameterize(hashParam, value, codec, searchParams);
14
18
 
15
- return Object.fromEntries(params);
16
- },
17
-
18
- makeLinker = parameterize => (hashParam, value, codec = identity) => {
19
- const
20
- url = hashUrl(),
21
- searchParams = new URLSearchParams(url.hash.replace('#', ''));
22
-
23
- // TODO: make parameterize pure
24
- parameterize(hashParam, value, codec, searchParams);
25
-
26
- return '#!' + Object.assign(url, { hash: searchParams }).href.replace(location.origin, '');
27
- },
28
- isEmpty = v => v == null || v === '',
19
+ return (
20
+ '#!' +
21
+ Object.assign(url, { hash: searchParams }).href.replace(
22
+ location.origin,
23
+ '',
24
+ )
25
+ );
26
+ },
27
+ isEmpty = (v) => v == null || v === '',
29
28
  singleLink = makeLinker((hashParam, value, codec, searchParams) =>
30
29
  !isEmpty(codec(value))
31
30
  ? searchParams.set(hashParam, codec(value))
32
- : searchParams.delete(hashParam)),
31
+ : searchParams.delete(hashParam),
32
+ ),
33
33
  multiLink = makeLinker((hashParam, value, codec, searchParams) =>
34
34
  Object.entries(value)
35
35
  .map(codec)
36
- .forEach(([key, value]) => !isEmpty(value)
37
- ? searchParams.set(hashParam + key, value)
38
- : searchParams.delete(hashParam + key)));
39
-
40
- export const useHashState = (initial, param, { suffix = '', read, write, multi } = {}) => {
41
- const
42
- [link, parseHash] = multi ? [multiLink, multiParse] : [singleLink, singleParse],
43
- [state, _setState] = useState(() => param == null
44
- ? initial
45
- : parseHash(param + suffix, read) ?? initial),
36
+ .forEach(([key, value]) =>
37
+ !isEmpty(value)
38
+ ? searchParams.set(hashParam + key, value)
39
+ : searchParams.delete(hashParam + key),
40
+ ),
41
+ );
46
42
 
47
- setState = useCallback(state => _setState(oldState => {
48
- const newState = invoke(state, oldState);
43
+ export const useHashState = (
44
+ initial,
45
+ param,
46
+ { suffix = '', read, write, multi } = {},
47
+ ) => {
48
+ const [link, parseHash] = multi
49
+ ? [multiLink, multiParse]
50
+ : [singleLink, singleParse],
51
+ [state, _setState] = useState(() =>
52
+ param == null ? initial : parseHash(param + suffix, read) ?? initial,
53
+ ),
54
+ setState = useCallback(
55
+ (state) =>
56
+ _setState((oldState) => {
57
+ const newState = invoke(state, oldState);
49
58
 
50
- if (param != null) {
51
- navigate(link(param + suffix, newState, write), null, { notify: false });
52
- }
59
+ if (param != null) {
60
+ navigate(link(param + suffix, newState, write), null, {
61
+ notify: false,
62
+ });
63
+ }
53
64
 
54
- return newState;
55
- }), [param, suffix, link, write]);
65
+ return newState;
66
+ }),
67
+ [param, suffix, link, write],
68
+ );
56
69
 
57
70
  return [state, setState];
58
71
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@neovici/cosmoz-omnitable",
3
- "version": "14.11.0",
3
+ "version": "14.12.0",
4
4
  "description": "[![Build Status](https://travis-ci.org/Neovici/cosmoz-omnitable.svg?branch=master)](https://travis-ci.org/Neovici/cosmoz-omnitable)",
5
5
  "keywords": [
6
6
  "web-components"
@@ -68,7 +68,7 @@
68
68
  "@neovici/cosmoz-i18next": "^3.1.1",
69
69
  "@neovici/cosmoz-input": "^5.0.0",
70
70
  "@neovici/cosmoz-router": "^11.0.0",
71
- "@neovici/cosmoz-utils": "^6.5.0",
71
+ "@neovici/cosmoz-utils": "^6.14.2",
72
72
  "@neovici/nullxlsx": "^3.0.0",
73
73
  "@pionjs/pion": "^2.0.0",
74
74
  "@polymer/iron-icon": "^3.0.0",