@neovici/cosmoz-tabs 5.0.13 → 5.2.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.
package/cosmoz-tabs.js CHANGED
@@ -1,11 +1,7 @@
1
1
  // @license Copyright (C) 2015 Neovici AB - Apache 2 License
2
- import {
3
- html, component
4
- } from 'haunted';
2
+ import { html, component } from 'haunted';
5
3
  import { useTabs } from './lib/use-tabs';
6
- import {
7
- style, renderTab
8
- } from './lib/render';
4
+ import { style, renderTab } from './lib/render';
9
5
  import './cosmoz-tab.js';
10
6
  import '@polymer/iron-icon';
11
7
  import '@polymer/iron-icons';
@@ -21,21 +17,18 @@ using tabs.
21
17
 
22
18
  The following custom properties and mixins are available for styling:
23
19
 
24
- Custom property | Description | Default
25
- ----------------|-------------|----------
20
+ Custom property | Description | Default
21
+ ------------------------------------|-----------------------------|----------
26
22
  `--cosmoz-tabs-selection-bar-color` | Color for the selection bar | `#00b4db`
27
23
 
28
24
  */
29
25
  const Tabs = host => {
30
- const {
31
- tabs,
32
- onSlot,
33
- ...opts
34
- } = useTabs(host);
26
+ const { tabs, onSlot, ...opts } = useTabs(host);
35
27
 
36
28
  return html`
37
29
  <style>${ style }</style>
38
30
  <div class="tabs" part="tabs" role="tablist">
31
+ <slot name="tabs"></slot>
39
32
  ${ tabs.map(renderTab(opts)) }
40
33
  </div>
41
34
 
package/lib/render.js CHANGED
@@ -1,9 +1,6 @@
1
1
  import { html } from 'haunted';
2
2
  import { ifDefined } from 'lit-html/directives/if-defined';
3
-
4
- import {
5
- getIcon, getIconStyle
6
- } from './utils';
3
+ import { getIcon, getIconStyle } from './utils';
7
4
 
8
5
  const style = `
9
6
  :host {
@@ -15,29 +12,36 @@ const style = `
15
12
  }
16
13
 
17
14
  .tabs {
18
- background-color: #fff;
19
- margin-bottom: 3px;
20
- box-shadow: var(--cosmoz-shadow-2dp, var(--shadow-elevation-2dp_-_box-shadow, 0 2px 4px 0 #e5e5e5));
15
+ background-color: var(--cosmoz-tabs-bg-color, #fff);
16
+ color: var(--cosmoz-tabs-text-color, #606c7e);
17
+ font-family: var(--cosmoz-tabs-font-family, inherit);
18
+ font-size: var(--cosmoz-tabs-font-size, 13px);
19
+ line-height: var(--cosmoz-tabs-line-height, 19px);
20
+ box-shadow: var(--cosmoz-tabs-shadow, inset 0 -1px 0 0 #e5e6eb);
21
21
  flex: none;
22
22
  display: flex;
23
23
  align-items: center;
24
- overflow: hidden;
25
- touch-action: pan-y;
24
+ overflow-x: auto;
25
+ -webkit-overflow-scrolling: auto;
26
+ scrollbar-width: none;
27
+ padding-bottom: 1px;
28
+ }
29
+ .tabs::-webkit-scrollbar {
30
+ display: none;
26
31
  }
27
32
 
28
33
  .tab {
29
34
  position: relative;
30
35
  display: flex;
36
+ box-sizing: border-box;
31
37
  align-items: center;
32
38
  justify-content: center;
33
39
  flex: 1;
34
- padding: 0.767em 12px;
40
+ padding: 11px 24px;
35
41
  color: inherit;
36
42
  text-decoration: none;
37
43
  text-align: center;
38
- font-size: 1.0714286em;
39
- line-height: 1.27;
40
- font-weight: 300;
44
+ letter-spacing: 0.3px;
41
45
  text-overflow: ellipsis;
42
46
  white-space: nowrap;
43
47
  cursor: pointer;
@@ -46,12 +50,14 @@ const style = `
46
50
  }
47
51
 
48
52
  .tab[aria-selected] {
49
- box-shadow: inset 0 -1.4px 0px 0px var(--cosmoz-tabs-selection-bar-color, #00b4db);
50
- font-weight: 400;
53
+ color: var(--cosmoz-tabs-accent-color, #508aef);
54
+ box-shadow: inset 0 -3px 0px 0px var(--cosmoz-tabs-accent-color, #508aef);
55
+ font-weight: 700;
56
+ letter-spacing: 0;
51
57
  }
52
58
 
53
59
  .tab[disabled] {
54
- opacity: 0.65;
60
+ opacity: 0.4;
55
61
  pointer-events: none;
56
62
  }
57
63
 
@@ -99,10 +105,11 @@ const style = `
99
105
  selectedTab,
100
106
  onSelect,
101
107
  href
102
- }) => tab => {
108
+ }) => (tab, i, tabs) => {
103
109
  const isSelected = selectedTab === tab,
104
110
  icon = getIcon(tab, isSelected);
105
111
  return html`<a class="tab" tabindex="-1" role="tab"
112
+ part=${ ['tab', i === 0 && 'first-tab', i === tabs.length - 1 && 'last-tab', isSelected && 'selected-tab'].filter(Boolean).join(' ') }
106
113
  ?hidden=${ tab.hidden } ?disabled=${ tab.disabled }
107
114
  ?aria-selected=${ isSelected }
108
115
  @click=${ onSelect }
package/lib/use-tabs.js CHANGED
@@ -1,13 +1,8 @@
1
- import {
2
- useState, useEffect, useMemo, useCallback
3
- } from 'haunted';
1
+ import { useState, useEffect, useMemo, useCallback } from 'haunted';
4
2
  import { notifyProperty } from '@neovici/cosmoz-utils/lib/hooks/use-notify-property';
5
- import {
6
- useHashParam, link
7
- } from './use-hash-param';
8
- import {
9
- choose, collect, getName, isValid
10
- } from './utils';
3
+ import { useHashParam, link } from './use-hash-param';
4
+ import { choose, collect, getName, isValid } from './utils';
5
+ import computeScroll from 'compute-scroll-into-view';
11
6
 
12
7
  const useTabSelectedEffect = (host, selectedTab) => {
13
8
  useEffect(() => {
@@ -37,6 +32,17 @@ const useTabSelectedEffect = (host, selectedTab) => {
37
32
  }, [selectedTab]);
38
33
  },
39
34
 
35
+ useAutoScroll = (host, selectedTab) => {
36
+ useEffect(() => {
37
+ const el = host.shadowRoot.querySelector('a[aria-selected]');
38
+ if (!el) {
39
+ return;
40
+ }
41
+ computeScroll(el, { block: 'nearest', inline: 'center', boundary: el.parentElement })
42
+ .forEach(({ el, top, left }) => el.scroll({ top, left, behavior: 'smooth' }));
43
+ }, [selectedTab]);
44
+ },
45
+
40
46
  useTabs = host => {
41
47
  const {
42
48
  selected, hashParam
@@ -62,6 +68,8 @@ const useTabSelectedEffect = (host, selectedTab) => {
62
68
  return () => host.removeEventListener('cosmoz-tab-alter', onTabAlter);
63
69
  }, [selectedTab]);
64
70
 
71
+ useAutoScroll(host, selectedTab);
72
+
65
73
  const href = useCallback(tab => isValid(tab) ? link(hashParam, getName(tab)) : undefined, [hashParam]);
66
74
 
67
75
  return {
package/lib/utils.js CHANGED
@@ -54,7 +54,6 @@ const isValid = tab => !tab.hidden && !tab.disabled,
54
54
  return [];
55
55
  });
56
56
 
57
-
58
57
  export {
59
58
  choose,
60
59
  collect,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@neovici/cosmoz-tabs",
3
- "version": "5.0.13",
3
+ "version": "5.2.0",
4
4
  "description": "A multi views container element that allow navigation between the views using tabs or an accordion.",
5
5
  "keywords": [
6
6
  "web-components"
@@ -25,15 +25,14 @@
25
25
  ],
26
26
  "scripts": {
27
27
  "lint": "eslint --cache --ext .js .",
28
+ "lint-tsc": "tsc",
28
29
  "start": "npm run storybook",
29
- "test": "karma start --coverage",
30
- "test:watch": "karma start --auto-watch=true --single-run=false",
31
- "test:update-snapshots": "karma start --update-snapshots",
32
- "test:prune-snapshots": "karma start --prune-snapshots",
33
- "test:compatibility": "karma start --compatibility all --auto-watch=true --single-run=false",
30
+ "test": "wtr --coverage",
31
+ "test:watch": "wtr --watch",
34
32
  "storybook": "start-storybook --node-resolve --watch --open",
35
33
  "storybook:build": "build-storybook",
36
- "storybook:deploy": "storybook-to-ghpages"
34
+ "storybook:deploy": "storybook-to-ghpages",
35
+ "prepare": "husky install"
37
36
  },
38
37
  "release": {
39
38
  "plugins": [
@@ -54,37 +53,30 @@
54
53
  "@commitlint/config-conventional"
55
54
  ]
56
55
  },
57
- "husky": {
58
- "hooks": {
59
- "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
60
- }
61
- },
62
56
  "dependencies": {
63
- "@neovici/cosmoz-utils": "^3.13.0",
57
+ "@neovici/cosmoz-utils": "^3.21.0",
64
58
  "@polymer/iron-icon": "^3.0.0",
65
59
  "@polymer/iron-icons": "^3.0.0",
66
- "haunted": "^4.7.0",
67
- "lit-html": "^1.3.0"
60
+ "compute-scroll-into-view": "^1.0.17",
61
+ "haunted": "^4.8.0",
62
+ "lit-html": "^1.4.0"
68
63
  },
69
64
  "devDependencies": {
70
- "@commitlint/cli": "^11.0.0",
71
- "@commitlint/config-conventional": "^11.0.0",
65
+ "@commitlint/cli": "^13.0.0",
66
+ "@commitlint/config-conventional": "^13.0.0",
72
67
  "@neovici/eslint-config": "^1.3.0",
73
- "@open-wc/demoing-storybook": "^2.4.5",
74
- "@open-wc/testing": "^2.5.27",
75
- "@open-wc/testing-karma": "^3.3.12",
68
+ "@open-wc/demoing-storybook": "^2.4.0",
69
+ "@open-wc/testing": "^2.5.0",
76
70
  "@polymer/iron-list": "^3.1.0",
77
- "@semantic-release/changelog": "^5.0.1",
78
- "@semantic-release/git": "^9.0.0",
79
- "@storybook/storybook-deployer": "^2.8.7",
80
- "deepmerge": "^4.2.2",
81
- "eslint": "^7.12.0",
82
- "husky": "^4.2.5",
83
- "karma": "^5.2.3",
84
- "karma-firefox-launcher": "^1.3.0",
85
- "karma-sauce-launcher": "^4.1.6",
86
- "semantic-release": "^17.2.3",
87
- "sinon": "^9.2.0",
88
- "typescript": "^4.0.3"
71
+ "@semantic-release/changelog": "^6.0.0",
72
+ "@semantic-release/git": "^10.0.0",
73
+ "@storybook/storybook-deployer": "^2.8.0",
74
+ "@web/test-runner": "^0.13.18",
75
+ "@web/test-runner-selenium": "^0.5.2",
76
+ "eslint": "^7.32.0",
77
+ "husky": "^7.0.0",
78
+ "semantic-release": "^18.0.0",
79
+ "sinon": "^11.1.0",
80
+ "typescript": "^4.4.0"
89
81
  }
90
82
  }
package/CHANGELOG.md DELETED
@@ -1,208 +0,0 @@
1
- ## [5.0.13](https://github.com/neovici/cosmoz-tabs/compare/v5.0.12...v5.0.13) (2021-04-17)
2
-
3
-
4
- ### Bug Fixes
5
-
6
- * do not hide slotted slots ([c7579ca](https://github.com/neovici/cosmoz-tabs/commit/c7579cacb025a8b70c93250d2e3033e966b1204c))
7
-
8
- ## [5.0.12](https://github.com/neovici/cosmoz-tabs/compare/v5.0.11...v5.0.12) (2021-01-22)
9
-
10
-
11
- ### Bug Fixes
12
-
13
- * **use-tabs:** iron-location interop ([826be13](https://github.com/neovici/cosmoz-tabs/commit/826be13af1250da1838f4935ccbbeaecd528e9c1))
14
-
15
- ## [5.0.11](https://github.com/neovici/cosmoz-tabs/compare/v5.0.10...v5.0.11) (2020-10-23)
16
-
17
-
18
- ### Bug Fixes
19
-
20
- * notify selected-changed ([1808f23](https://github.com/neovici/cosmoz-tabs/commit/1808f23cfc181adcc3cdc6eab10098599932f1a7))
21
-
22
- ## [5.0.10](https://github.com/neovici/cosmoz-tabs/compare/v5.0.9...v5.0.10) (2020-10-16)
23
-
24
-
25
- ### Bug Fixes
26
-
27
- * **cosmoz-tab:** notify cosmoz-tabs when tab icon changes ([1448462](https://github.com/neovici/cosmoz-tabs/commit/1448462b47606a4dfd9e11f9893d1f3a7fa71b3a))
28
-
29
- ## [5.0.9](https://github.com/neovici/cosmoz-tabs/compare/v5.0.8...v5.0.9) (2020-10-13)
30
-
31
-
32
- ### Bug Fixes
33
-
34
- * collect cosmoz-tab element from nested slots ([616fde5](https://github.com/neovici/cosmoz-tabs/commit/616fde5969e5bed32b7154f8d56bd2b10d9e7334))
35
-
36
- ## [5.0.8](https://github.com/neovici/cosmoz-tabs/compare/v5.0.7...v5.0.8) (2020-10-08)
37
-
38
-
39
- ### Bug Fixes
40
-
41
- * update children from slot in raf ([c5433bc](https://github.com/neovici/cosmoz-tabs/commit/c5433bcb8e7ed788a0b046efdf7878715df2b262))
42
-
43
- ## [5.0.7](https://github.com/neovici/cosmoz-tabs/compare/v5.0.6...v5.0.7) (2020-10-08)
44
-
45
-
46
- ### Bug Fixes
47
-
48
- * correctly notify `selected` ([086ae7d](https://github.com/neovici/cosmoz-tabs/commit/086ae7dc4b275c8da42e24ee700144774244f317)), closes [#126](https://github.com/neovici/cosmoz-tabs/issues/126)
49
-
50
- ## [5.0.6](https://github.com/neovici/cosmoz-tabs/compare/v5.0.5...v5.0.6) (2020-10-07)
51
-
52
-
53
- ### Bug Fixes
54
-
55
- * read params in a animation frame ([240a490](https://github.com/neovici/cosmoz-tabs/commit/240a49023ae24f11342be95a65e82d3fa4947433))
56
-
57
- ## [5.0.5](https://github.com/neovici/cosmoz-tabs/compare/v5.0.4...v5.0.5) (2020-10-06)
58
-
59
-
60
- ### Bug Fixes
61
-
62
- * adds support for icon-color attribute ([872bea2](https://github.com/neovici/cosmoz-tabs/commit/872bea2d0065a98b34756b766f980ce45fffcdbd))
63
-
64
- ## [5.0.4](https://github.com/neovici/cosmoz-tabs/compare/v5.0.3...v5.0.4) (2020-10-01)
65
-
66
-
67
- ### Bug Fixes
68
-
69
- * add no-resize option in cosmoz-tabs ([ecfe1df](https://github.com/neovici/cosmoz-tabs/commit/ecfe1df874d74f66782b2077d87ab6cf573abc2e))
70
-
71
- ## [5.0.3](https://github.com/neovici/cosmoz-tabs/compare/v5.0.2...v5.0.3) (2020-09-30)
72
-
73
-
74
- ### Bug Fixes
75
-
76
- * initial "selected-changed" event is not fired ([5e7086a](https://github.com/neovici/cosmoz-tabs/commit/5e7086a22996f7eb3f072db3ec3eb5f55a4e965a))
77
-
78
- ## [5.0.2](https://github.com/neovici/cosmoz-tabs/compare/v5.0.1...v5.0.2) (2020-09-25)
79
-
80
-
81
- ### Bug Fixes
82
-
83
- * **cosmoz-tabs:** delays initial setTabs to microtask ([2d8acd5](https://github.com/neovici/cosmoz-tabs/commit/2d8acd5447943c6861adf20a42001eb0d55e206e))
84
-
85
- ## [5.0.1](https://github.com/neovici/cosmoz-tabs/compare/v5.0.0...v5.0.1) (2020-09-24)
86
-
87
-
88
- ### Bug Fixes
89
-
90
- * restore isSelected cosmoz-tab notification ([3905cd7](https://github.com/neovici/cosmoz-tabs/commit/3905cd7f2c0df7f6492b29b2afebadf10d7fae7c))
91
- * restore selected-item cosmoz-tabs notifications ([d08a992](https://github.com/neovici/cosmoz-tabs/commit/d08a992697f9bbd173f2945995e5ccabcdadfd21))
92
-
93
- # [5.0.0](https://github.com/neovici/cosmoz-tabs/compare/v4.0.0...v5.0.0) (2020-09-24)
94
-
95
-
96
- ### Bug Fixes
97
-
98
- * **review:** improve api ([2cf2fbe](https://github.com/neovici/cosmoz-tabs/commit/2cf2fbe186bc820065d97db0d711b7e1df2992e1))
99
- * compute href only for valid tabs ([0e797c1](https://github.com/neovici/cosmoz-tabs/commit/0e797c1e9ba373715becb561129aebc6926d1d2a))
100
- * improves compatibility ([7ed6e0b](https://github.com/neovici/cosmoz-tabs/commit/7ed6e0b2efbed83fdbe2b1c8e45eb468115ca906))
101
- * tab css sizing ([74dfaae](https://github.com/neovici/cosmoz-tabs/commit/74dfaaec67c250775895ce37e6d91828835696d6))
102
- * **cosmoz-tab:** correct getIcon ([f9c6448](https://github.com/neovici/cosmoz-tabs/commit/f9c64488d40beb5768ea3500a9c4b7b03ea31541))
103
- * **cosmoz-tabs:** adds back tab-select and tab-first-select events ([5c38537](https://github.com/neovici/cosmoz-tabs/commit/5c385377d8917fdbe77c714745cc798d7ad659d9))
104
- * **cosmoz-tabs:** restore hash-param handling ([e15fc93](https://github.com/neovici/cosmoz-tabs/commit/e15fc930dc9a808c3d130fc1730889b1572e396c))
105
-
106
-
107
- ### Features
108
-
109
- * **cosmoz-tabs:** reimplement hash-param ([1cf7353](https://github.com/neovici/cosmoz-tabs/commit/1cf7353ddef3db3430a78113702cc1ff284826c5))
110
- * add a basic storybook ([fc4a4f9](https://github.com/neovici/cosmoz-tabs/commit/fc4a4f988fb6b33c79e1e9f7c44d2c68ce90f03c))
111
- * **cosmoz-tabs:** refactor ([1b29c6a](https://github.com/neovici/cosmoz-tabs/commit/1b29c6a5c04a0c3a6d92ab4d256ba30dd2f08a21))
112
-
113
-
114
- ### BREAKING CHANGES
115
-
116
- * **cosmoz-tabs:** converted to haunted with api changes
117
-
118
- # [4.0.0](https://github.com/neovici/cosmoz-tabs/compare/v3.2.5...v4.0.0) (2020-09-18)
119
-
120
-
121
- ### Features
122
-
123
- * improve release and update deps ([09d8446](https://github.com/neovici/cosmoz-tabs/commit/09d844621e84eb41c4b1ee6e33867392ca4df676))
124
-
125
-
126
- ### BREAKING CHANGES
127
-
128
- * converted cosmoz-tab to haunted
129
-
130
- ## [3.2.5](https://github.com/neovici/cosmoz-tabs/compare/v3.2.4...v3.2.5) (2020-08-19)
131
-
132
-
133
- ### Bug Fixes
134
-
135
- * flex none for paper-tabs ([fc574ee](https://github.com/neovici/cosmoz-tabs/commit/fc574ee4029bdae74ffa9b00ffda7b2b187d07d4))
136
-
137
- ## [3.2.4](https://github.com/neovici/cosmoz-tabs/compare/v3.2.3...v3.2.4) (2020-08-18)
138
-
139
-
140
- ### Bug Fixes
141
-
142
- * size tabs correctly when paper-tabs has different size ([93c914f](https://github.com/neovici/cosmoz-tabs/commit/93c914fb943962d0c342ee580e15ac05637cee80))
143
-
144
- ## [3.2.3](https://github.com/neovici/cosmoz-tabs/compare/v3.2.2...v3.2.3) (2020-08-14)
145
-
146
-
147
- ### Bug Fixes
148
-
149
- * restore hide badge on negative value [#24231](https://github.com/neovici/cosmoz-tabs/issues/24231) ([b56dde3](https://github.com/neovici/cosmoz-tabs/commit/b56dde3cab95d009fc3aeb51bc2fdfe719f862c1))
150
-
151
- ## [3.2.2](https://github.com/neovici/cosmoz-tabs/compare/v3.2.1...v3.2.2) (2020-08-10)
152
-
153
-
154
- ### Bug Fixes
155
-
156
- * remove iron-flex-layout from cosmoz-tab-card ([181753e](https://github.com/neovici/cosmoz-tabs/commit/181753e5490b09709ab722763e70b91b4c006205))
157
- * replace iron-flex-layout with css ([22f94e5](https://github.com/neovici/cosmoz-tabs/commit/22f94e54b6f1c96e2a7acd3cfaa93602c61c411e))
158
-
159
- ## [3.2.1](https://github.com/neovici/cosmoz-tabs/compare/v3.2.0...v3.2.1) (2020-08-06)
160
-
161
-
162
- ### Bug Fixes
163
-
164
- * add named css parts for cosmoz-tab-card ([eed8507](https://github.com/neovici/cosmoz-tabs/commit/eed85072728cc3b15105e101385db77c9ac45177))
165
- * replace paper-material with css ([68236f2](https://github.com/neovici/cosmoz-tabs/commit/68236f296cf06721fe331e38a5f33046e93c962e))
166
-
167
- # [3.2.0](https://github.com/neovici/cosmoz-tabs/compare/v3.1.2...v3.2.0) (2020-07-23)
168
-
169
-
170
- ### Features
171
-
172
- * **hash-param:** always update selected tab with hashParam ([f6893ca](https://github.com/neovici/cosmoz-tabs/commit/f6893ca7d46c9dbc5d38b63f91746a24fbe8159a))
173
-
174
- ## [3.1.2](https://github.com/neovici/cosmoz-tabs/compare/v3.1.1...v3.1.2) (2020-06-19)
175
-
176
-
177
- ### Bug Fixes
178
-
179
- * adding after-title slot ([cc1ee9d](https://github.com/neovici/cosmoz-tabs/commit/cc1ee9d9fe5f631161c4a970c639815f1364ed5d))
180
-
181
- ## [3.1.1](https://github.com/neovici/cosmoz-tabs/compare/v3.1.0...v3.1.1) (2020-03-19)
182
-
183
-
184
- ### Bug Fixes
185
-
186
- * upgrade repo ([b893be1](https://github.com/neovici/cosmoz-tabs/commit/b893be1ee009345ee1aaaec6e164adb075aaff86))
187
-
188
- # [3.1.0](https://github.com/neovici/cosmoz-tabs/compare/v3.0.6...v3.1.0) (2020-03-16)
189
-
190
-
191
- ### Features
192
-
193
- * upgrade to cosmoz-page-router@^6.0.0 ([fe3988a](https://github.com/neovici/cosmoz-tabs/commit/fe3988a))
194
-
195
- ## [3.0.6](https://github.com/neovici/cosmoz-tabs/compare/v3.0.5...v3.0.6) (2019-12-13)
196
-
197
-
198
- ### Bug Fixes
199
-
200
- * **release:** upgrade package.lock ([3b13f18](https://github.com/neovici/cosmoz-tabs/commit/3b13f18))
201
-
202
- ## [3.0.5](https://github.com/neovici/cosmoz-tabs/compare/v3.0.4...v3.0.5) (2019-10-10)
203
-
204
-
205
- ### Bug Fixes
206
-
207
- * **ci:** adopt semantic release ([7273102](https://github.com/neovici/cosmoz-tabs/commit/7273102))
208
- * **ci:** drop `npm version` hooks ([eb527bb](https://github.com/neovici/cosmoz-tabs/commit/eb527bb))