@usssa/component-library 1.0.0-alpha.241 → 1.0.0-alpha.243
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/README.md
CHANGED
package/package.json
CHANGED
|
@@ -0,0 +1,241 @@
|
|
|
1
|
+
<script setup>
|
|
2
|
+
import { ref, onMounted, onUnmounted } from 'vue'
|
|
3
|
+
import { UBtnStd, UChip, UModal, UTabsStd } from '..'
|
|
4
|
+
import { useScreenType } from '../../composables/useScreenType'
|
|
5
|
+
|
|
6
|
+
const model = defineModel('showMatchup')
|
|
7
|
+
|
|
8
|
+
const props = defineProps({
|
|
9
|
+
closeActionLabel: {
|
|
10
|
+
type: String,
|
|
11
|
+
default: 'Close',
|
|
12
|
+
},
|
|
13
|
+
closeIconLabel: {
|
|
14
|
+
type: String,
|
|
15
|
+
default: 'Close',
|
|
16
|
+
},
|
|
17
|
+
gameDetails: {
|
|
18
|
+
type: Object,
|
|
19
|
+
required: true,
|
|
20
|
+
},
|
|
21
|
+
heading: {
|
|
22
|
+
type: String,
|
|
23
|
+
default: 'Game Detail',
|
|
24
|
+
},
|
|
25
|
+
matchupFields: {
|
|
26
|
+
type: Array,
|
|
27
|
+
required: true,
|
|
28
|
+
},
|
|
29
|
+
matchupTabLabel: {
|
|
30
|
+
type: String,
|
|
31
|
+
default: 'Previous Matchups',
|
|
32
|
+
},
|
|
33
|
+
reportTabLabel: {
|
|
34
|
+
type: String,
|
|
35
|
+
default: 'Pitching Report',
|
|
36
|
+
},
|
|
37
|
+
statTabLabel: {
|
|
38
|
+
type: String,
|
|
39
|
+
default: 'Team Stats',
|
|
40
|
+
},
|
|
41
|
+
teamOneDetails: {
|
|
42
|
+
type: Object,
|
|
43
|
+
required: true,
|
|
44
|
+
},
|
|
45
|
+
teamTwoDetails: {
|
|
46
|
+
type: Object,
|
|
47
|
+
required: true,
|
|
48
|
+
},
|
|
49
|
+
})
|
|
50
|
+
|
|
51
|
+
const $screen = useScreenType()
|
|
52
|
+
|
|
53
|
+
const currentTab = ref('stats')
|
|
54
|
+
|
|
55
|
+
const dateChip = ref(true)
|
|
56
|
+
|
|
57
|
+
const tabs = ref([
|
|
58
|
+
{
|
|
59
|
+
name: 'stats',
|
|
60
|
+
label: props.statTabLabel,
|
|
61
|
+
},
|
|
62
|
+
{
|
|
63
|
+
name: 'matchup',
|
|
64
|
+
label: props.matchupTabLabel,
|
|
65
|
+
},
|
|
66
|
+
{
|
|
67
|
+
name: 'report',
|
|
68
|
+
label: props.reportTabLabel,
|
|
69
|
+
},
|
|
70
|
+
])
|
|
71
|
+
|
|
72
|
+
const closeModel = () => {
|
|
73
|
+
model.value = false
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
onMounted(() => {
|
|
77
|
+
const handleResize = () => {
|
|
78
|
+
model.value = window.innerWidth >= 900
|
|
79
|
+
}
|
|
80
|
+
handleResize()
|
|
81
|
+
window.addEventListener('resize', handleResize)
|
|
82
|
+
onUnmounted(() => {
|
|
83
|
+
window.removeEventListener('resize', handleResize)
|
|
84
|
+
})
|
|
85
|
+
})
|
|
86
|
+
</script>
|
|
87
|
+
|
|
88
|
+
<template>
|
|
89
|
+
<UModal
|
|
90
|
+
v-model="model"
|
|
91
|
+
closeIcon="fa-kit-duotone fa-circle-xmark"
|
|
92
|
+
:closeIconLabel="closeIconLabel"
|
|
93
|
+
customSize="70%"
|
|
94
|
+
dataTestId="view matchup"
|
|
95
|
+
:heading="heading"
|
|
96
|
+
position="standard"
|
|
97
|
+
:show-action-buttons="true"
|
|
98
|
+
:show-secondary-buttons="true"
|
|
99
|
+
:size="$screen.isDesktop ? 'custom' : 'half'"
|
|
100
|
+
>
|
|
101
|
+
<template #content>
|
|
102
|
+
<div class="matchup-field-container q-mb-ms flex column">
|
|
103
|
+
<div
|
|
104
|
+
class="matchup-fields flex items-start content-start self-stretch flex-wrap"
|
|
105
|
+
>
|
|
106
|
+
<div
|
|
107
|
+
v-for="field in matchupFields"
|
|
108
|
+
class="game-item flex column flex-start no-wrap"
|
|
109
|
+
:key="field.label"
|
|
110
|
+
>
|
|
111
|
+
<span class="text-description text-caption-sm">{{ field.label }}</span>
|
|
112
|
+
<span class="text-dark text-body-sm">{{ field.value }}</span>
|
|
113
|
+
</div>
|
|
114
|
+
</div>
|
|
115
|
+
</div>
|
|
116
|
+
<div
|
|
117
|
+
class="team-card-container flex items-center self-stretch no-wrap q-mb-ms"
|
|
118
|
+
>
|
|
119
|
+
<div class="team-card flex items-center self-stretch column no-wrap">
|
|
120
|
+
<div class="team-logo">
|
|
121
|
+
<img
|
|
122
|
+
:alt="teamOneDetails.name"
|
|
123
|
+
:src="teamOneDetails.logoUrl"
|
|
124
|
+
style="width: 80px; height: 80px"
|
|
125
|
+
/>
|
|
126
|
+
</div>
|
|
127
|
+
<span class="text-caption-md text-dark text-center">
|
|
128
|
+
{{ teamOneDetails.name }}</span
|
|
129
|
+
>
|
|
130
|
+
<span class="text-caption-md text-description text-center">{{
|
|
131
|
+
teamOneDetails.mvp
|
|
132
|
+
}}</span>
|
|
133
|
+
</div>
|
|
134
|
+
<div class="game-stats-card flex items-center column no-wrap">
|
|
135
|
+
<UChip
|
|
136
|
+
v-model="dateChip"
|
|
137
|
+
class="u-table-chip"
|
|
138
|
+
avatarLabel=""
|
|
139
|
+
:chipLabel="gameDetails.date"
|
|
140
|
+
:removable="false"
|
|
141
|
+
type="primary"
|
|
142
|
+
/>
|
|
143
|
+
<div class="score-card flex content-center items-center no-wrap">
|
|
144
|
+
<div class="score text-heading-xxl text-positive">
|
|
145
|
+
{{ teamOneDetails.score }}
|
|
146
|
+
</div>
|
|
147
|
+
<div class="text-heading-xxl text-dark">-</div>
|
|
148
|
+
<div class="score text-heading-xxl text-dark">
|
|
149
|
+
{{ teamTwoDetails.score }}
|
|
150
|
+
</div>
|
|
151
|
+
</div>
|
|
152
|
+
<span class="text-heading-sm text-positive">{{
|
|
153
|
+
gameDetails.gameType
|
|
154
|
+
}}</span>
|
|
155
|
+
</div>
|
|
156
|
+
<div class="team-card flex items-center self-stretch column no-wrap">
|
|
157
|
+
<div class="team-logo">
|
|
158
|
+
<img
|
|
159
|
+
:alt="teamOneDetails.name"
|
|
160
|
+
:src="teamTwoDetails.logoUrl"
|
|
161
|
+
style="width: 80px; height: 80px"
|
|
162
|
+
/>
|
|
163
|
+
</div>
|
|
164
|
+
<span class="text-caption-md text-dark text-center">
|
|
165
|
+
{{ teamTwoDetails.name }}</span
|
|
166
|
+
>
|
|
167
|
+
<span class="text-caption-md text-description text-center">{{
|
|
168
|
+
teamTwoDetails.mvp
|
|
169
|
+
}}</span>
|
|
170
|
+
</div>
|
|
171
|
+
</div>
|
|
172
|
+
<div>
|
|
173
|
+
<UTabsStd
|
|
174
|
+
v-model="currentTab"
|
|
175
|
+
class="q-mb-ba"
|
|
176
|
+
align="left"
|
|
177
|
+
data-test-id="matchup-section-tabs"
|
|
178
|
+
:tabs="tabs"
|
|
179
|
+
/>
|
|
180
|
+
<q-tab-panels
|
|
181
|
+
v-model="currentTab"
|
|
182
|
+
class="bg-transparent"
|
|
183
|
+
animated
|
|
184
|
+
keep-alive
|
|
185
|
+
>
|
|
186
|
+
<q-tab-panel class="q-pa-none" name="stats">
|
|
187
|
+
<slot name="stats"></slot>
|
|
188
|
+
</q-tab-panel>
|
|
189
|
+
<q-tab-panel class="q-pa-none" name="matchup">
|
|
190
|
+
<slot name="matchup"></slot>
|
|
191
|
+
</q-tab-panel>
|
|
192
|
+
<q-tab-panel class="q-pa-none" name="report">
|
|
193
|
+
<slot name="report"></slot>
|
|
194
|
+
</q-tab-panel>
|
|
195
|
+
</q-tab-panels>
|
|
196
|
+
</div>
|
|
197
|
+
</template>
|
|
198
|
+
<template #action_primary_two>
|
|
199
|
+
<UBtnStd
|
|
200
|
+
color="primary"
|
|
201
|
+
:label="closeActionLabel"
|
|
202
|
+
size="md"
|
|
203
|
+
@onClick="closeModel()"
|
|
204
|
+
></UBtnStd>
|
|
205
|
+
</template>
|
|
206
|
+
</UModal>
|
|
207
|
+
</template>
|
|
208
|
+
|
|
209
|
+
<style lang="sass">
|
|
210
|
+
.matchup-fields
|
|
211
|
+
gap: $ba
|
|
212
|
+
.matchup-field-container
|
|
213
|
+
padding: $ba $ba
|
|
214
|
+
background-color: $neutral-2
|
|
215
|
+
border: 1px solid $neutral-4
|
|
216
|
+
border-radius: $xxs
|
|
217
|
+
.game-item
|
|
218
|
+
min-width: 137px
|
|
219
|
+
.team-card-container
|
|
220
|
+
gap: $ms
|
|
221
|
+
.team-card
|
|
222
|
+
flex: 1 0 0
|
|
223
|
+
word-break: break-word
|
|
224
|
+
padding: $ms $ba
|
|
225
|
+
gap: $ba
|
|
226
|
+
background-color: $neutral-2
|
|
227
|
+
border-radius: $xs
|
|
228
|
+
.team-logo img
|
|
229
|
+
border-radius: $sm
|
|
230
|
+
.game-stats-card
|
|
231
|
+
width: 282px
|
|
232
|
+
gap: 20px
|
|
233
|
+
.score-card
|
|
234
|
+
gap: $ba
|
|
235
|
+
.score
|
|
236
|
+
width: 3.85rem
|
|
237
|
+
text-align: center
|
|
238
|
+
background-color: $neutral-3
|
|
239
|
+
padding: $xs $ba
|
|
240
|
+
border-radius: $xs
|
|
241
|
+
</style>
|
|
@@ -89,6 +89,10 @@ const props = defineProps({
|
|
|
89
89
|
}
|
|
90
90
|
},
|
|
91
91
|
},
|
|
92
|
+
minOverflowLength: {
|
|
93
|
+
type: Number,
|
|
94
|
+
default: 12
|
|
95
|
+
},
|
|
92
96
|
rowCardHeight: {
|
|
93
97
|
type: Number,
|
|
94
98
|
default: 25,
|
|
@@ -130,8 +134,6 @@ const props = defineProps({
|
|
|
130
134
|
const $q = useQuasar()
|
|
131
135
|
const $screen = useScreenType()
|
|
132
136
|
|
|
133
|
-
const minOverflowLength = 12
|
|
134
|
-
|
|
135
137
|
const activeMenuId = ref(null)
|
|
136
138
|
const captionMaxWidth = ref('100%')
|
|
137
139
|
const cellOverflowStates = ref({})
|
|
@@ -139,6 +141,7 @@ const headerMaxWidth = ref('100%')
|
|
|
139
141
|
const infiniteNoMoreShow = ref(false)
|
|
140
142
|
const infiniteScrollProp = ref(props.infiniteScrollProperty)
|
|
141
143
|
const isScrollActionActive = ref(false)
|
|
144
|
+
const minOverflowLength = ref(props.minOverflowLength)
|
|
142
145
|
const mobileActionsDialog = ref({})
|
|
143
146
|
const moreActionsDialogs = ref({})
|
|
144
147
|
const tableCardWrapperRef = ref(null)
|
|
@@ -168,7 +171,7 @@ const checkCellOverflow = (selector, key) => {
|
|
|
168
171
|
nextTick(() => {
|
|
169
172
|
requestAnimationFrame(() => {
|
|
170
173
|
const element = document.querySelector(selector)
|
|
171
|
-
|
|
174
|
+
|
|
172
175
|
if (element) {
|
|
173
176
|
cellOverflowStates.value[key] = element.scrollWidth > element.clientWidth
|
|
174
177
|
} else {
|
|
@@ -1474,7 +1477,7 @@ window.addEventListener('resize', handleCellOverflowResize)
|
|
|
1474
1477
|
]"
|
|
1475
1478
|
>
|
|
1476
1479
|
<!-- Label -->
|
|
1477
|
-
<div class="text-caption text-description">
|
|
1480
|
+
<div class="text-caption text-description q-mb-xxs">
|
|
1478
1481
|
{{ col.label }}
|
|
1479
1482
|
</div>
|
|
1480
1483
|
<!-- Content -->
|
|
@@ -1669,9 +1672,7 @@ window.addEventListener('resize', handleCellOverflowResize)
|
|
|
1669
1672
|
size="1.5rem"
|
|
1670
1673
|
/>
|
|
1671
1674
|
<!-- Text -->
|
|
1672
|
-
<span v-else class="text-body-sm">
|
|
1673
|
-
{{ props.row[col.field] }}
|
|
1674
|
-
</span>
|
|
1675
|
+
<span v-else class="text-body-sm">{{ props.row[col.field] }}</span>
|
|
1675
1676
|
</div>
|
|
1676
1677
|
<!-- Caption (if any) -->
|
|
1677
1678
|
<div
|
|
@@ -125,6 +125,10 @@ const props = defineProps({
|
|
|
125
125
|
type: Boolean,
|
|
126
126
|
default: false,
|
|
127
127
|
},
|
|
128
|
+
minOverflowLength: {
|
|
129
|
+
type: Number,
|
|
130
|
+
default: 12
|
|
131
|
+
},
|
|
128
132
|
multiSelection: {
|
|
129
133
|
type: Boolean,
|
|
130
134
|
default: false,
|
|
@@ -480,6 +484,7 @@ watch(
|
|
|
480
484
|
:infinite-scroll="infiniteScroll"
|
|
481
485
|
:infinite-scroll-property="infiniteScrollProperty"
|
|
482
486
|
:loading="loading"
|
|
487
|
+
:minOverflowLength="minOverflowLength"
|
|
483
488
|
:row-card-height="rowCardHeight"
|
|
484
489
|
:select-more-options="selectMoreOptions"
|
|
485
490
|
:separator="separator"
|
|
@@ -1655,10 +1660,8 @@ watch(
|
|
|
1655
1660
|
.u-expansion-body
|
|
1656
1661
|
display: flex
|
|
1657
1662
|
flex-wrap: wrap
|
|
1658
|
-
gap: $xs
|
|
1659
|
-
|
|
1660
|
-
> *:not(:last-child)
|
|
1661
|
-
margin-bottom: $ba
|
|
1663
|
+
column-gap: $xs
|
|
1664
|
+
row-gap: $ba
|
|
1662
1665
|
|
|
1663
1666
|
.table-data-avatar
|
|
1664
1667
|
display: flex
|
package/src/components/index.js
CHANGED
|
@@ -24,6 +24,7 @@ import UInputPhoneStd from './core/UInputPhoneStd.vue'
|
|
|
24
24
|
import UInputTextStd from './core/UInputTextStd.vue'
|
|
25
25
|
import UInputTypeaheadAdvanceSearch from './core/UInputTypeaheadAdvanceSearch.vue'
|
|
26
26
|
import UMenuButtonStd from './core/UMenuButtonStd.vue'
|
|
27
|
+
import UMatchup from './core/UMatchup.vue'
|
|
27
28
|
import UMenuDropdown from './core/UMenuDropdown.vue'
|
|
28
29
|
import UMenuDropdownAdvancedSearch from './core/UMenuDropdownAdvancedSearch.vue'
|
|
29
30
|
import UMenuItem from './core/UMenuItem.vue'
|
|
@@ -76,6 +77,7 @@ export {
|
|
|
76
77
|
UInputPhoneStd,
|
|
77
78
|
UInputTextStd,
|
|
78
79
|
UInputTypeaheadAdvanceSearch,
|
|
80
|
+
UMatchup,
|
|
79
81
|
UMenuButtonStd,
|
|
80
82
|
UMenuDropdown,
|
|
81
83
|
UMenuDropdownAdvancedSearch,
|