@dcrackel/hematournamentui 1.0.63 → 1.0.64
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
CHANGED
|
@@ -1,19 +1,18 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<button :class="classes" data-testid="base-button" type="button" @click="
|
|
3
|
-
<BaseIcon v-if="iconName" :color="textColor" :icon-name="iconName" :size="size" :style="iconStyle"
|
|
4
|
-
data-testid="base-icon"/>
|
|
2
|
+
<button :class="classes" data-testid="base-button" type="button" @click="handleClick">
|
|
3
|
+
<BaseIcon v-if="iconName" :color="textColor" :icon-name="iconName" :size="size" :style="iconStyle" data-testid="base-icon"/>
|
|
5
4
|
<BaseText :color="textColor" :size="size" :text="label" data-testid="base-text" weight="normal"/>
|
|
6
5
|
</button>
|
|
7
6
|
</template>
|
|
8
7
|
|
|
9
8
|
<script>
|
|
10
|
-
import {computed} from 'vue';
|
|
9
|
+
import { computed } from 'vue';
|
|
11
10
|
import BaseText from '../../../Atoms/Text/BaseText.vue';
|
|
12
11
|
import BaseIcon from '../../../Atoms/Icon/BaseIcon.vue';
|
|
13
12
|
|
|
14
13
|
export default {
|
|
15
|
-
name: '
|
|
16
|
-
components: {BaseText, BaseIcon},
|
|
14
|
+
name: 'BaseButton',
|
|
15
|
+
components: { BaseText, BaseIcon },
|
|
17
16
|
props: {
|
|
18
17
|
label: {
|
|
19
18
|
type: String,
|
|
@@ -44,8 +43,7 @@ export default {
|
|
|
44
43
|
}
|
|
45
44
|
},
|
|
46
45
|
emits: ['click'],
|
|
47
|
-
|
|
48
|
-
setup(props, {emit}) {
|
|
46
|
+
setup(props, { emit }) {
|
|
49
47
|
const typeClasses = {
|
|
50
48
|
primary: 'mx-1 p-2 items-center gap-2.5 text-center rounded-md shadow border border-dropdownSelect justify-center hover:bg-tertiary ' +
|
|
51
49
|
(props.selected ? 'bg-dropdownSelect' : 'bg-neutral'),
|
|
@@ -72,11 +70,10 @@ export default {
|
|
|
72
70
|
square: 'p-8 my-3 items-center gap-2.5 rounded-md text-center shadow border border-dropdownSelect justify-center hover:bg-tertiary ' +
|
|
73
71
|
(props.selected ? 'bg-dropdownSelect' : 'bg-neutral'),
|
|
74
72
|
|
|
75
|
-
tabBar: 'p-2 items-center justify-center text-center hover:border-b hover:border-b-bright text-primaryHighlight '
|
|
76
|
-
|
|
73
|
+
tabBar: 'p-2 items-center justify-center text-center hover:border-b hover:border-b-bright text-primaryHighlight ' +
|
|
74
|
+
(props.selected ? 'border-b border-b-bright' : 'border-b border-b-neutral'),
|
|
77
75
|
};
|
|
78
76
|
|
|
79
|
-
|
|
80
77
|
const sizeClasses = {
|
|
81
78
|
xs: 'text-xs',
|
|
82
79
|
sm: 'text-sm',
|
|
@@ -112,8 +109,8 @@ export default {
|
|
|
112
109
|
let sizeClass = sizeClasses[props.size];
|
|
113
110
|
return `${baseClasses} ${typeClass} ${sizeClass}`;
|
|
114
111
|
}),
|
|
115
|
-
|
|
116
|
-
emit('click');
|
|
112
|
+
handleClick(event) {
|
|
113
|
+
emit('click', event);
|
|
117
114
|
}
|
|
118
115
|
};
|
|
119
116
|
}
|
|
@@ -2,28 +2,27 @@
|
|
|
2
2
|
<div class="flex items-center p-4 border border-dropdownSelect rounded-lg shadow-md w-full mb-6 hover:border-bright" @click="onManage">
|
|
3
3
|
<div class="w-full flex flex-row justify-between">
|
|
4
4
|
<section class="flex flex-row justify-start">
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
5
|
+
<div class="flex flex-col pl-4">
|
|
6
|
+
<BaseText :text="event.EventName" size="xl" color="primary" weight="bold" class="text-left" />
|
|
7
|
+
<BaseText :text="`${event.Date} ${event.StartTime}`" size="md" color="quinary" class="text-left" />
|
|
8
|
+
<p class="mt-4">
|
|
9
|
+
<BaseText :text="event.Status" size="md" color="primary" class="text-left" />
|
|
10
|
+
<BaseText :text="event.RuleSummary" size="sm" color="quinary" class="text-left" />
|
|
11
|
+
</p>
|
|
12
|
+
</div>
|
|
13
13
|
</section>
|
|
14
|
-
|
|
15
|
-
|
|
14
|
+
<div class="flex flex-col pl-4">
|
|
15
|
+
<div class="flex flex-row pb-2">
|
|
16
16
|
<BaseButton label="Edit" size="sm" type="primary" @click="onEdit" class="w-28" />
|
|
17
17
|
<BaseButton label="Manage" size="sm" type="primary" @click="onManage" class="w-2/3" />
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
18
|
+
</div>
|
|
19
|
+
<div class="flex flex-row">
|
|
20
|
+
<EventStatusBox :status-count="event.Present" status-label="PRESENT" box-color="bg-eventBoxBlue" />
|
|
21
|
+
<EventStatusBox :status-count="event.Absent" status-label="ABSENT" box-color="bg-eventBoxGreen" />
|
|
22
|
+
<EventStatusBox :status-count="event.Removed" status-label="REMOVED" box-color="bg-eventBoxRed" />
|
|
23
|
+
</div>
|
|
24
24
|
</div>
|
|
25
25
|
</div>
|
|
26
|
-
|
|
27
26
|
</div>
|
|
28
27
|
</template>
|
|
29
28
|
|
|
@@ -34,7 +33,7 @@ import EventStatusBox from "../../../Molecules/Boxes/EventStatusBox/EventStatusB
|
|
|
34
33
|
|
|
35
34
|
export default {
|
|
36
35
|
name: 'EventCard',
|
|
37
|
-
components: {EventStatusBox, BaseButton, BaseText},
|
|
36
|
+
components: { EventStatusBox, BaseButton, BaseText },
|
|
38
37
|
props: {
|
|
39
38
|
event: {
|
|
40
39
|
type: Object,
|
|
@@ -42,10 +41,12 @@ export default {
|
|
|
42
41
|
}
|
|
43
42
|
},
|
|
44
43
|
methods: {
|
|
45
|
-
onEdit() {
|
|
44
|
+
onEdit(event) {
|
|
45
|
+
event.stopPropagation();
|
|
46
46
|
this.$emit('edit', this.event);
|
|
47
47
|
},
|
|
48
|
-
onManage() {
|
|
48
|
+
onManage(event) {
|
|
49
|
+
event.stopPropagation();
|
|
49
50
|
this.$emit('manage', this.event);
|
|
50
51
|
}
|
|
51
52
|
}
|