@dcrackel/meyersquaredui 1.0.222 → 1.0.225
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/meyersquaredui.es.js +822 -803
- package/dist/meyersquaredui.umd.js +5 -5
- package/package.json +1 -1
- package/src/stories/Organisms/Cards/FencerListCard/FencerListCard.vue +4 -4
- package/src/stories/Organisms/Cards/Skeletons/FencerListCardSkeleton.vue +45 -0
- package/src/stories/Organisms/Grids/GridLayout/GridLayout.vue +61 -50
package/package.json
CHANGED
|
@@ -40,20 +40,20 @@
|
|
|
40
40
|
</section>
|
|
41
41
|
|
|
42
42
|
<!-- Loading State -->
|
|
43
|
-
<div v-if="isLoading" class="p-4
|
|
44
|
-
<
|
|
43
|
+
<div v-if="isLoading" class="p-4 bg-white flex items-center border-b border-gray-300">
|
|
44
|
+
<FencerListCardSkeleton />
|
|
45
45
|
</div>
|
|
46
46
|
</template>
|
|
47
47
|
|
|
48
48
|
<script>
|
|
49
49
|
import BaseText from "../../../Atoms/BaseText/BaseText.vue";
|
|
50
50
|
import defaultPortrait from '../../../../assets/images/portrait1.png'
|
|
51
|
-
import
|
|
51
|
+
import FencerListCardSkeleton from "../Skeletons/FencerListCardSkeleton.vue";
|
|
52
52
|
|
|
53
53
|
export default {
|
|
54
54
|
name: 'FencerListCard',
|
|
55
55
|
components: {
|
|
56
|
-
|
|
56
|
+
FencerListCardSkeleton,
|
|
57
57
|
BaseText,
|
|
58
58
|
},
|
|
59
59
|
props: {
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<section class="flex items-center p-4 border-b last:border-b-0 animate-pulse w-full">
|
|
3
|
+
<!-- Portrait Skeleton -->
|
|
4
|
+
<div class="w-[50px] h-[50px] md:w-[70px] md:h-[70px] rounded-full bg-gray-300 mr-4 flex-shrink-0"></div>
|
|
5
|
+
|
|
6
|
+
<!-- Content Skeleton (Name and Club) -->
|
|
7
|
+
<div class="flex flex-col flex-grow">
|
|
8
|
+
<!-- Desktop version -->
|
|
9
|
+
<div class="hidden md:flex flex-col">
|
|
10
|
+
<div class="w-44 h-7 bg-gray-300 rounded mb-2"></div>
|
|
11
|
+
<div class="w-64 h-4 bg-gray-300 rounded"></div>
|
|
12
|
+
</div>
|
|
13
|
+
<!-- Mobile version -->
|
|
14
|
+
<div class="flex md:hidden flex-col">
|
|
15
|
+
<div class="w-1/2 h-4 bg-gray-300 rounded mb-1"></div>
|
|
16
|
+
<div class="w-1/2 h-3 bg-gray-300 rounded"></div>
|
|
17
|
+
</div>
|
|
18
|
+
</div>
|
|
19
|
+
|
|
20
|
+
<!-- Ratings Skeleton -->
|
|
21
|
+
<div class="flex items-center ml-4">
|
|
22
|
+
<!-- Desktop version -->
|
|
23
|
+
<div class="hidden md:flex flex-col items-end">
|
|
24
|
+
<div class="flex mb-1 justify-between">
|
|
25
|
+
<div class="w-20 h-6 bg-gray-300 rounded mr-1"></div>
|
|
26
|
+
</div>
|
|
27
|
+
<div class="flex mb-1 justify-between">
|
|
28
|
+
<div class="w-20 h-6 bg-gray-300 rounded mr-1"></div>
|
|
29
|
+
</div>
|
|
30
|
+
</div>
|
|
31
|
+
<!-- Mobile version -->
|
|
32
|
+
<div class="flex md:hidden flex-col items-end">
|
|
33
|
+
<div class="flex mb-1">
|
|
34
|
+
<div class="w-10 h-3 bg-gray-300 rounded mr-1"></div>
|
|
35
|
+
</div>
|
|
36
|
+
</div>
|
|
37
|
+
</div>
|
|
38
|
+
</section>
|
|
39
|
+
</template>
|
|
40
|
+
|
|
41
|
+
<script>
|
|
42
|
+
export default {
|
|
43
|
+
name: 'FencerListCardSkeleton'
|
|
44
|
+
};
|
|
45
|
+
</script>
|
|
@@ -2,46 +2,60 @@
|
|
|
2
2
|
<section :class="topBoxClass">
|
|
3
3
|
<section class="w-full md:max-w-4xl mx-auto">
|
|
4
4
|
<div :class="topClasses" class="flex flex-col">
|
|
5
|
+
<div v-if="title" :class="headerClasses" class="flex flex-col">
|
|
6
|
+
<BaseText color="primary" size="xl" tag="h3" weight="bold">{{ title }}</BaseText>
|
|
7
|
+
<div class="flex w-full justify-between">
|
|
8
|
+
<BaseText v-if="description" color="primary" size="md" tag="p" weight="normal" class="mt-2">{{ description }}</BaseText>
|
|
9
|
+
<Tooltip v-if="tooltipContent" :text="tooltipContent" width="w-[500px]" position="left" class="mt-2">
|
|
10
|
+
<Icon icon="fa-circle-info" color="primary" size="md" class="hidden md:block ml-2" />
|
|
11
|
+
</Tooltip>
|
|
12
|
+
</div>
|
|
13
|
+
</div>
|
|
5
14
|
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
15
|
+
<div :class="gridClasses">
|
|
16
|
+
<!-- When loading, render placeholder cards -->
|
|
17
|
+
<template v-if="isLoading">
|
|
18
|
+
<component
|
|
19
|
+
v-for="n in placeholderCount"
|
|
20
|
+
:is="cardComponent"
|
|
21
|
+
:key="n"
|
|
22
|
+
:data="{}"
|
|
23
|
+
:isLoading="true"
|
|
24
|
+
:small="small"
|
|
25
|
+
/>
|
|
26
|
+
</template>
|
|
27
|
+
<template v-if="!isLoading">
|
|
28
|
+
<component
|
|
29
|
+
v-if="items.length > 0"
|
|
30
|
+
v-for="(item, index) in items"
|
|
31
|
+
:is="cardComponent"
|
|
32
|
+
:key="index"
|
|
33
|
+
:data="item"
|
|
34
|
+
:index="index"
|
|
35
|
+
:isLoading="isLoading"
|
|
36
|
+
:small="small"
|
|
37
|
+
@grid-card-click="handleTournamentCardClick"
|
|
38
|
+
/>
|
|
39
|
+
<div v-if="items.length === 0" class="w-full flex-col flex p-10">
|
|
40
|
+
<Icon :icon="noResultsIcon" color="primary" size="5xl" class="w-full flex justify-center"/>
|
|
41
|
+
<BaseText color="primary" size="lg" weight="normal" class="w-full flex justify-center mt-4">
|
|
42
|
+
{{ noResultsMsg }}
|
|
43
|
+
</BaseText>
|
|
44
|
+
</div>
|
|
45
|
+
</template>
|
|
13
46
|
</div>
|
|
14
47
|
</div>
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
:
|
|
23
|
-
|
|
24
|
-
:isLoading="isLoading"
|
|
25
|
-
:small="small"
|
|
26
|
-
@grid-card-click="handleTournamentCardClick"
|
|
48
|
+
<div v-if="!whiteStyle && moreButtonLabel" class="w-full flex justify-center pb-28 pt-10 md:pt-14">
|
|
49
|
+
<BaseButton
|
|
50
|
+
backgroundColor="secondary"
|
|
51
|
+
border="primary"
|
|
52
|
+
size="xs"
|
|
53
|
+
color="primary"
|
|
54
|
+
hoverColor="secondary"
|
|
55
|
+
:label="moreButtonLabel"
|
|
56
|
+
@buttonClick="onClick"
|
|
27
57
|
/>
|
|
28
|
-
<div v-if="items.length === 0 && !isLoading" class="w-full flex-col flex p-10">
|
|
29
|
-
<Icon :icon="noResultsIcon" color="primary" size="5xl" class="w-full flex justify-center"/>
|
|
30
|
-
<BaseText color="primary" size="lg" weight="normal" class="w-full flex justify-center mt-4">{{noResultsMsg}}</BaseText>
|
|
31
|
-
</div>
|
|
32
58
|
</div>
|
|
33
|
-
</div>
|
|
34
|
-
<div v-if="!whiteStyle && moreButtonLabel" class="w-full flex justify-center pb-28 pt-10 md:pt-14">
|
|
35
|
-
<BaseButton
|
|
36
|
-
backgroundColor="secondary"
|
|
37
|
-
border="primary"
|
|
38
|
-
size="xs"
|
|
39
|
-
color="primary"
|
|
40
|
-
hoverColor="secondary"
|
|
41
|
-
:label="moreButtonLabel"
|
|
42
|
-
@buttonClick="onClick"
|
|
43
|
-
/>
|
|
44
|
-
</div>
|
|
45
59
|
</section>
|
|
46
60
|
</section>
|
|
47
61
|
</template>
|
|
@@ -49,7 +63,7 @@
|
|
|
49
63
|
<script>
|
|
50
64
|
import BaseButton from "../../../Atoms/BaseButton/BaseButton.vue";
|
|
51
65
|
import BaseText from "../../../Atoms/BaseText/BaseText.vue";
|
|
52
|
-
import {markRaw} from "vue";
|
|
66
|
+
import { markRaw } from "vue";
|
|
53
67
|
import Icon from "../../../Atoms/Icon/Icon.vue";
|
|
54
68
|
import Tooltip from "../../../Molecules/ToolTip/ToolTip.vue";
|
|
55
69
|
|
|
@@ -62,12 +76,8 @@ export default {
|
|
|
62
76
|
BaseText,
|
|
63
77
|
},
|
|
64
78
|
props: {
|
|
65
|
-
title: {
|
|
66
|
-
|
|
67
|
-
},
|
|
68
|
-
description: {
|
|
69
|
-
type: String
|
|
70
|
-
},
|
|
79
|
+
title: { type: String },
|
|
80
|
+
description: { type: String },
|
|
71
81
|
moreButtonLabel: {
|
|
72
82
|
type: String,
|
|
73
83
|
default: 'See More',
|
|
@@ -98,6 +108,10 @@ export default {
|
|
|
98
108
|
type: Boolean,
|
|
99
109
|
default: false,
|
|
100
110
|
},
|
|
111
|
+
skeletonNum: {
|
|
112
|
+
type: Number,
|
|
113
|
+
default: 4,
|
|
114
|
+
},
|
|
101
115
|
topBoxClass: {
|
|
102
116
|
type: String,
|
|
103
117
|
default: 'w-full flex justify-center mx-auto',
|
|
@@ -124,8 +138,7 @@ export default {
|
|
|
124
138
|
if (this.mobileHorizontal) {
|
|
125
139
|
return "w-screen overflow-x-auto";
|
|
126
140
|
}
|
|
127
|
-
|
|
128
|
-
let retClasses ="";// "max-w-[1200px] w-full flex justify-center mx-auto"
|
|
141
|
+
let retClasses = "";
|
|
129
142
|
this.title ? retClasses = `${retClasses} mt-8` : retClasses = `${retClasses}`;
|
|
130
143
|
return retClasses;
|
|
131
144
|
},
|
|
@@ -136,16 +149,12 @@ export default {
|
|
|
136
149
|
},
|
|
137
150
|
gridClasses() {
|
|
138
151
|
let baseClasses = "md:grid md:gap-x-6 md:gap-y-4";
|
|
139
|
-
|
|
140
|
-
// Enable horizontal scrolling for mobile layout
|
|
141
152
|
if (this.mobileHorizontal) {
|
|
142
153
|
baseClasses = `flex space-x-4 overflow-x-auto md:grid md:gap-x-6 md:gap-y-4`;
|
|
143
154
|
}
|
|
144
|
-
|
|
145
155
|
if (this.whiteStyle) {
|
|
146
156
|
baseClasses = `bg-white p-2 mx-2 md:mx-0 rounded-lg`;
|
|
147
157
|
}
|
|
148
|
-
|
|
149
158
|
let columnClasses;
|
|
150
159
|
switch (this.maxColumns) {
|
|
151
160
|
case 1:
|
|
@@ -166,9 +175,11 @@ export default {
|
|
|
166
175
|
default:
|
|
167
176
|
columnClasses = "grid-cols-1 md:grid-cols-2 lg:grid-cols-3";
|
|
168
177
|
}
|
|
169
|
-
|
|
170
178
|
return `${baseClasses} ${columnClasses}`;
|
|
171
179
|
},
|
|
180
|
+
placeholderCount() {
|
|
181
|
+
return this.skeletonNum;
|
|
182
|
+
},
|
|
172
183
|
},
|
|
173
184
|
methods: {
|
|
174
185
|
onClick() {
|
|
@@ -179,4 +190,4 @@ export default {
|
|
|
179
190
|
},
|
|
180
191
|
},
|
|
181
192
|
};
|
|
182
|
-
</script>
|
|
193
|
+
</script>
|