@everchron/ec-shards 7.5.17 → 7.5.19
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/ec-shards.common.js +85 -56
- package/dist/ec-shards.common.js.map +1 -1
- package/dist/ec-shards.css +1 -1
- package/dist/ec-shards.umd.js +85 -56
- package/dist/ec-shards.umd.js.map +1 -1
- package/dist/ec-shards.umd.min.js +2 -2
- package/dist/ec-shards.umd.min.js.map +1 -1
- package/package.json +1 -1
- package/src/components/card/card.vue +21 -1
- package/src/components/data-grid/data-grid-row.vue +1 -1
- package/src/stories/card/card.stories.js +1 -0
package/package.json
CHANGED
|
@@ -1,7 +1,12 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div class="ecs-card"
|
|
3
3
|
:id="itemId"
|
|
4
|
-
:class="[
|
|
4
|
+
:class="[
|
|
5
|
+
selected ? 'ecs-card-selected' : '',
|
|
6
|
+
expanded ? 'ecs-card-expanded' : '',
|
|
7
|
+
hover ? 'ecs-card-hover' : '',
|
|
8
|
+
disabled ? 'ecs-card-disabled' : ''
|
|
9
|
+
]"
|
|
5
10
|
@click="$emit('click', $event)">
|
|
6
11
|
<div class="ecs-card-inner">
|
|
7
12
|
<slot></slot>
|
|
@@ -39,6 +44,11 @@
|
|
|
39
44
|
progress: {
|
|
40
45
|
type: Number,
|
|
41
46
|
default: null
|
|
47
|
+
},
|
|
48
|
+
/** Turns the whole card into a disabled state. This also blocks all interactions on card content. */
|
|
49
|
+
disabled: {
|
|
50
|
+
type: Boolean,
|
|
51
|
+
default: false
|
|
42
52
|
}
|
|
43
53
|
},
|
|
44
54
|
|
|
@@ -104,5 +114,15 @@
|
|
|
104
114
|
&-selected .ecs-card-background{
|
|
105
115
|
box-shadow: 0 0 0 2px $color-blue-4, 0 1px 4px 0 rgba(47,51,60,0.10);
|
|
106
116
|
}
|
|
117
|
+
|
|
118
|
+
&-disabled{
|
|
119
|
+
cursor: not-allowed;
|
|
120
|
+
|
|
121
|
+
.ecs-card-inner{
|
|
122
|
+
pointer-events: none;
|
|
123
|
+
opacity: .5;
|
|
124
|
+
filter: grayscale(1);
|
|
125
|
+
}
|
|
126
|
+
}
|
|
107
127
|
}
|
|
108
128
|
</style>
|
|
@@ -14,6 +14,7 @@ export const cards = () => ({
|
|
|
14
14
|
<ecs-card class="mb-4" selected hover><div class="p-4">Selected, Hover</div></ecs-card>
|
|
15
15
|
<ecs-card class="mb-4" expanded><div class="p-4">Expanded</div></ecs-card>
|
|
16
16
|
<ecs-card class="mb-4" selected expanded><div class="p-4">Selected, Expanded</div></ecs-card>
|
|
17
|
+
<ecs-card class="mb-4" disabled><div class="p-4" style="color: red">Default</div></ecs-card>
|
|
17
18
|
</div>`,
|
|
18
19
|
});
|
|
19
20
|
|