@neovici/cosmoz-tabs 9.2.1 → 9.2.3
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/package.json +1 -1
- package/src/cosmoz-tab-card.js +44 -35
- package/src/next/use-tabs.js +1 -0
package/package.json
CHANGED
package/src/cosmoz-tab-card.js
CHANGED
|
@@ -1,18 +1,8 @@
|
|
|
1
1
|
// @license Copyright (C) 2015 Neovici AB - Apache 2 License
|
|
2
2
|
import { html, component, useState, useEffect } from '@pionjs/pion';
|
|
3
|
-
import '@neovici/cosmoz-collapse';
|
|
4
3
|
import { when } from 'lit-html/directives/when.js';
|
|
5
4
|
import { css } from './utils';
|
|
6
|
-
|
|
7
|
-
const collapseIcon = html`<svg
|
|
8
|
-
width="16"
|
|
9
|
-
height="16"
|
|
10
|
-
viewBox="0 0 16 16"
|
|
11
|
-
fill="none"
|
|
12
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
13
|
-
>
|
|
14
|
-
<path d="M5 1L10 8L5 15" stroke="#101010" stroke-width="1.5" />
|
|
15
|
-
</svg>`;
|
|
5
|
+
import '@neovici/cosmoz-collapse';
|
|
16
6
|
|
|
17
7
|
/**
|
|
18
8
|
|
|
@@ -33,6 +23,19 @@ Custom property | Description | Default
|
|
|
33
23
|
`--cosmoz-tab-card-content-padding` | Card content padding | `initial`
|
|
34
24
|
*/
|
|
35
25
|
|
|
26
|
+
const expandMoreIcon = () => html`
|
|
27
|
+
<svg
|
|
28
|
+
class="expand-more-icon"
|
|
29
|
+
viewBox="0 0 24 24"
|
|
30
|
+
preserveAspectRatio="xMidYMid meet"
|
|
31
|
+
focusable="false"
|
|
32
|
+
width="24"
|
|
33
|
+
height="24"
|
|
34
|
+
>
|
|
35
|
+
<path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z" />
|
|
36
|
+
</svg>
|
|
37
|
+
`;
|
|
38
|
+
|
|
36
39
|
const CosmozTabCard = (host) => {
|
|
37
40
|
const { heading, collapsable, collapsed: isCollapsed } = host,
|
|
38
41
|
[collapsed, setCollapsed] = useState(Boolean(isCollapsed)),
|
|
@@ -45,30 +48,34 @@ const CosmozTabCard = (host) => {
|
|
|
45
48
|
host.toggleAttribute('collapsed', collapsed);
|
|
46
49
|
}, [collapsed]);
|
|
47
50
|
|
|
48
|
-
return html
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
51
|
+
return html`${when(
|
|
52
|
+
heading,
|
|
53
|
+
() =>
|
|
54
|
+
html`<div class="header" part="header">
|
|
55
|
+
${when(
|
|
56
|
+
collapsable,
|
|
57
|
+
() => html`
|
|
58
|
+
<div
|
|
59
|
+
@click=${toggleCollapsed}
|
|
60
|
+
class="collapse-icon"
|
|
61
|
+
part="collapse-icon"
|
|
62
|
+
>
|
|
63
|
+
<slot name="collapse-icon">${expandMoreIcon()}</slot>
|
|
64
|
+
</div>
|
|
65
|
+
`,
|
|
66
|
+
)}
|
|
67
|
+
<h1 class="heading" @click=${toggleCollapsed} part="heading">
|
|
68
|
+
${heading}<slot name="after-title"></slot>
|
|
69
|
+
</h1>
|
|
70
|
+
<slot name="card-actions"></slot>
|
|
71
|
+
</div>`,
|
|
72
|
+
)}
|
|
66
73
|
|
|
67
74
|
<cosmoz-collapse class="collapse" ?opened=${!collapsed}>
|
|
68
75
|
<div class="content" part="content">
|
|
69
76
|
<slot></slot>
|
|
70
77
|
</div>
|
|
71
|
-
</cosmoz-collapse
|
|
78
|
+
</cosmoz-collapse>`;
|
|
72
79
|
};
|
|
73
80
|
|
|
74
81
|
const style = css`
|
|
@@ -106,17 +113,18 @@ const style = css`
|
|
|
106
113
|
}
|
|
107
114
|
|
|
108
115
|
.header {
|
|
116
|
+
min-height: 40px;
|
|
109
117
|
display: flex;
|
|
110
118
|
align-items: center;
|
|
111
|
-
gap:
|
|
119
|
+
gap: 10px;
|
|
112
120
|
background-color: var(--cosmoz-tab-card-bg-color, white);
|
|
113
121
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
|
114
122
|
}
|
|
115
123
|
|
|
116
124
|
.heading {
|
|
117
125
|
font-family: inherit;
|
|
118
|
-
font-size:
|
|
119
|
-
font-weight:
|
|
126
|
+
font-size: 17px;
|
|
127
|
+
font-weight: 500;
|
|
120
128
|
flex: 1;
|
|
121
129
|
color: var(--cosmoz-tab-card-heading-color, rgb(0, 0, 0));
|
|
122
130
|
}
|
|
@@ -124,11 +132,12 @@ const style = css`
|
|
|
124
132
|
.collapse-icon {
|
|
125
133
|
order: var(--cosmoz-tab-card-collapse-icon-order);
|
|
126
134
|
transition: transform 250ms linear;
|
|
127
|
-
transform: rotate(
|
|
135
|
+
transform: rotate(0deg);
|
|
136
|
+
margin: 0 0 0 -5px;
|
|
128
137
|
}
|
|
129
138
|
|
|
130
139
|
:host([collapsed]) .collapse-icon {
|
|
131
|
-
transform: rotate(
|
|
140
|
+
transform: rotate(-90deg);
|
|
132
141
|
}
|
|
133
142
|
|
|
134
143
|
:host([collapsable]) .collapse-icon,
|
package/src/next/use-tabs.js
CHANGED
|
@@ -58,6 +58,7 @@ export const renderTabs = ({ tabs, active, onActivate, className }) =>
|
|
|
58
58
|
?active=${active.name === tab.name}
|
|
59
59
|
?hidden=${tab.hidden}
|
|
60
60
|
?disabled=${tab.disabled}
|
|
61
|
+
.badge=${tab.badge}
|
|
61
62
|
@click=${onActivate}
|
|
62
63
|
>${tab.content ?? title}</cosmoz-tab-next
|
|
63
64
|
>`;
|