inviton-powerduck 0.0.210 → 0.0.211
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.
|
@@ -1,15 +1,16 @@
|
|
|
1
|
+
import type { VNode } from 'vue';
|
|
1
2
|
import { Prop, toNative } from 'vue-facing-decorator';
|
|
2
3
|
import TsxComponent, { Component } from '../../app/vuetsx';
|
|
3
4
|
|
|
4
5
|
interface CardHeaderArgs {
|
|
5
|
-
title?: string;
|
|
6
|
+
title?: string | VNode;
|
|
6
7
|
subtitle?: string;
|
|
7
8
|
smallTitle?: string;
|
|
8
9
|
}
|
|
9
10
|
|
|
10
11
|
@Component
|
|
11
12
|
class CardHeaderComponent extends TsxComponent<CardHeaderArgs> implements CardHeaderArgs {
|
|
12
|
-
@Prop() title!: string;
|
|
13
|
+
@Prop() title!: string | VNode;
|
|
13
14
|
@Prop() subtitle!: string;
|
|
14
15
|
@Prop() smallTitle?: string;
|
|
15
16
|
|
package/components/card/card.tsx
CHANGED
|
@@ -2,6 +2,7 @@ import { Prop, toNative } from 'vue-facing-decorator';
|
|
|
2
2
|
|
|
3
3
|
import PowerduckState from '../../app/powerduck-state';
|
|
4
4
|
import TsxComponent, { Component } from '../../app/vuetsx';
|
|
5
|
+
import './css/card.scss';
|
|
5
6
|
|
|
6
7
|
export enum CardRole {
|
|
7
8
|
Normal = 0,
|
|
@@ -12,6 +13,9 @@ interface CardArgs {
|
|
|
12
13
|
role?: CardRole;
|
|
13
14
|
renderMode?: 'default' | 'inlined';
|
|
14
15
|
hasShadow?: boolean;
|
|
16
|
+
shadow?: 'none' | 'sm' | 'md' | 'lg';
|
|
17
|
+
padding?: 'none' | 'sm' | 'md' | 'lg' | 'xl';
|
|
18
|
+
rounded?: boolean;
|
|
15
19
|
cssClass?: string;
|
|
16
20
|
clicked?: () => void;
|
|
17
21
|
}
|
|
@@ -20,13 +24,28 @@ interface CardArgs {
|
|
|
20
24
|
class CardComponent extends TsxComponent<CardArgs> implements CardArgs {
|
|
21
25
|
@Prop() role!: CardRole;
|
|
22
26
|
@Prop() hasShadow!: boolean;
|
|
27
|
+
@Prop() shadow?: 'none' | 'sm' | 'md' | 'lg';
|
|
28
|
+
@Prop() padding?: 'none' | 'sm' | 'md' | 'lg' | 'xl';
|
|
29
|
+
@Prop({ default: false }) rounded?: boolean;
|
|
23
30
|
@Prop() renderMode?: 'default' | 'inlined';
|
|
24
31
|
@Prop() cssClass?: string;
|
|
25
32
|
@Prop() clicked?: () => void;
|
|
26
33
|
|
|
27
34
|
render() {
|
|
35
|
+
const classes = [
|
|
36
|
+
'card',
|
|
37
|
+
this.role == CardRole.RootCard && 'single-card root-element',
|
|
38
|
+
this.getStickyCssClass(),
|
|
39
|
+
this.getBoxShadowCardCss(),
|
|
40
|
+
this.getRenderModeCardCss(),
|
|
41
|
+
this.getShadowClass(),
|
|
42
|
+
this.getPaddingClass(),
|
|
43
|
+
this.rounded && 'card--rounded',
|
|
44
|
+
this.cssClass,
|
|
45
|
+
].filter(Boolean).join(' ');
|
|
46
|
+
|
|
28
47
|
return (
|
|
29
|
-
<div onClick={this?.clicked} role={this.getRole()} class={
|
|
48
|
+
<div onClick={this?.clicked} role={this.getRole()} class={classes}>
|
|
30
49
|
{this.$slots.default?.()}
|
|
31
50
|
</div>
|
|
32
51
|
);
|
|
@@ -63,6 +82,22 @@ class CardComponent extends TsxComponent<CardArgs> implements CardArgs {
|
|
|
63
82
|
return '';
|
|
64
83
|
}
|
|
65
84
|
|
|
85
|
+
getShadowClass(): string {
|
|
86
|
+
if (this.shadow) {
|
|
87
|
+
return `card--shadow-${this.shadow}`;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
return '';
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
getPaddingClass(): string {
|
|
94
|
+
if (this.padding) {
|
|
95
|
+
return `card--padding-${this.padding}`;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
return '';
|
|
99
|
+
}
|
|
100
|
+
|
|
66
101
|
getRole() {
|
|
67
102
|
if (this.clicked != null) {
|
|
68
103
|
return 'button';
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
// Card shadow variants
|
|
2
|
+
.card--shadow-none {
|
|
3
|
+
box-shadow: none;
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
.card--shadow-sm {
|
|
7
|
+
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.card--shadow-md {
|
|
11
|
+
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.card--shadow-lg {
|
|
15
|
+
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
// Card padding variants
|
|
19
|
+
.card--padding-none {
|
|
20
|
+
padding: 0;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.card--padding-sm {
|
|
24
|
+
padding: 0.5rem;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.card--padding-md {
|
|
28
|
+
padding: 1rem;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.card--padding-lg {
|
|
32
|
+
padding: 1.5rem;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.card--padding-xl {
|
|
36
|
+
padding: 2rem;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
// Card rounded corners
|
|
40
|
+
.card--rounded {
|
|
41
|
+
border-radius: 0.5rem;
|
|
42
|
+
}
|