@usssa/component-library 1.0.0-alpha.132 → 1.0.0-alpha.134

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.
Files changed (5) hide show
  1. package/README.md +1 -1
  2. package/package.json +1 -1
  3. package/src/components/core/URadioBtn.vue +40 -23
  4. package/src/css/quasar.variables.sass +7 -7
  5. package/src/css/vars/colors.variables.sass +28 -28
package/README.md CHANGED
@@ -1,4 +1,4 @@
1
- # Component Library v1.0.0-alpha.132
1
+ # Component Library v1.0.0-alpha.133
2
2
 
3
3
  **This library provides custom UI components for USSSA applications.**
4
4
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@usssa/component-library",
3
- "version": "1.0.0-alpha.132",
3
+ "version": "1.0.0-alpha.134",
4
4
  "description": "A Quasar component library project",
5
5
  "productName": "Quasar component library App",
6
6
  "author": "Troy Moreland <troy.moreland@usssa.com>",
package/src/components/core/URadioBtn.vue CHANGED
@@ -1,11 +1,10 @@
1
1
  <script setup>
2
2
  import { computed } from 'vue'
3
+ import { useScreenType } from '../../composables/useScreenType'
3
4
  import URadioStd from './URadioStd.vue'
4
5
 
5
6
  const emit = defineEmits(['onClick', 'onButtonClick'])
6
-
7
7
  const model = defineModel()
8
-
9
8
  const props = defineProps({
10
9
  altText: {
11
10
  type: String,
@@ -46,6 +45,8 @@ const props = defineProps({
46
45
  },
47
46
  })
48
47
 
48
+ const $screen = useScreenType()
49
+
49
50
  const activeClass = computed(() => {
50
51
  if (model.value === props.value) {
51
52
  return 'active'
@@ -53,6 +54,8 @@ const activeClass = computed(() => {
53
54
  return ''
54
55
  })
55
56
 
57
+ const isMobile = computed(() => $screen.value.isMobile)
58
+
56
59
  const handleChange = () => {
57
60
  model.value = props.value
58
61
  }
@@ -60,33 +63,44 @@ const handleChange = () => {
60
63
 
61
64
  <template>
62
65
  <q-btn
63
- :class="`u-radio-btn ${activeClass}`"
66
+ :class="`u-radio-btn ${activeClass}${isMobile ? ' full-width' : ''}`"
64
67
  :dataTestId="dataTestId"
65
68
  flat
66
69
  @click="handleChange"
67
70
  >
68
- <div class="radio-btn-content flex items-center">
69
- <URadioStd v-model="model" :aria-label="label" :id="id" :value="value" />
70
- <div class="button-text">
71
- <div class="text-caption-lg">{{ label }}</div>
72
- <div class="description-text text-body-sm">{{ description }}</div>
71
+ <div class="radio-btn-content flex items-center justify-between full-width">
72
+ <div
73
+ class="flex items-center justify-center radio-btn-text-wrapper no-wrap"
74
+ >
75
+ <URadioStd
76
+ v-model="model"
77
+ :aria-label="label"
78
+ :id="id"
79
+ :value="value"
80
+ />
81
+ <div class="button-text">
82
+ <div class="text-caption-lg">{{ label }}</div>
83
+ <div class="description-text text-body-sm">{{ description }}</div>
84
+ </div>
73
85
  </div>
74
86
 
75
- <img
76
- v-if="image"
77
- class="radio-btn-img"
78
- :alt="altText"
79
- :aria-label="imgAriaLabel"
80
- size="1.5rem"
81
- :src="image"
82
- />
83
- <q-icon
84
- v-if="iconClass"
85
- :class="iconClass"
86
- :aria-label="imgAriaLabel"
87
- :color="iconColor"
88
- size="1.5rem"
89
- />
87
+ <div class="flex items-center">
88
+ <img
89
+ v-if="image"
90
+ class="radio-btn-img"
91
+ :alt="altText"
92
+ :aria-label="imgAriaLabel"
93
+ size="1.5rem"
94
+ :src="image"
95
+ />
96
+ <q-icon
97
+ v-if="iconClass"
98
+ :class="iconClass"
99
+ :aria-label="imgAriaLabel"
100
+ :color="iconColor"
101
+ size="1.5rem"
102
+ />
103
+ </div>
90
104
  </div>
91
105
  </q-btn>
92
106
  </template>
@@ -123,4 +137,7 @@ const handleChange = () => {
123
137
 
124
138
  .q-radio .q-radio__inner
125
139
  color: $primary !important
140
+
141
+ .radio-btn-text-wrapper
142
+ gap: $xs
126
143
  </style>
package/src/css/quasar.variables.sass CHANGED
@@ -13,17 +13,17 @@
13
13
  // Tip: Use the "Theme Builder" on Quasar's documentation website.
14
14
 
15
15
  @import 'vars/colors.variables'
16
- $primary : #234BA9
17
- $secondary : #143066
18
- $accent : #CB2A3D
16
+ $primary : $blue-8
17
+ $secondary : $blue-9
18
+ $accent : $red-5
19
19
 
20
20
  $dark : #101114
21
21
  $dark-page : #121212
22
22
 
23
- $positive : #248560
24
- $negative : #CB2A3D
25
- $info : #5C4AB8
26
- $warning : #D33809
23
+ $positive : $green-6
24
+ $negative : $red-5
25
+ $info : $purple-6
26
+ $warning : $orange-7
27
27
 
28
28
  // USSSA TYPOGRAPHY RESET
29
29
  $h1: (size: 4.063rem, line-height: 5.079rem, letter-spacing: .35px, weight: 700) !default
package/src/css/vars/colors.variables.sass CHANGED
@@ -1,13 +1,13 @@
1
1
  // USSSA BLUE
2
- $blue-1: #E1E9F9 !default
3
- $blue-2: #CADBF9 !default
4
- $blue-3: #678BE0 !default
5
- $blue-4: #4571D9 !default
6
- $blue-5: #2A5ACB !default
7
- $blue-6: #234BA9 !default
8
- $blue-7: #183477 !default
9
- $blue-8: #143066 !default
10
- $blue-9: #0D2044 !default
2
+ $blue-1: #EEF8FF !default
3
+ $blue-2: #D8EDFF !default
4
+ $blue-3: #B9E0FF !default
5
+ $blue-4: #52B3FF !default
6
+ $blue-5: #1371FD !default
7
+ $blue-6: #0C5DF3 !default
8
+ $blue-7: #1048BD !default
9
+ $blue-8: #12316C !default
10
+ $blue-9: #0D1F45 !default
11
11
 
12
12
  // USSSA GOLD
13
13
  $gold-1: #FBF6EE !default
@@ -21,15 +21,15 @@ $gold-8: #64482F !default
21
21
  $gold-9: #312017 !default
22
22
 
23
23
  // USSSA GREEN
24
- $green-1: #EFFAF4 !default
25
- $green-2: #D9F2E3 !default
26
- $green-3: #85D0AD !default
27
- $green-4: #53B48A !default
28
- $green-5: #248560 !default
29
- $green-6: #1A6248 !default
30
- $green-7: #174E3A !default
31
- $green-8: #144031 !default
32
- $green-9: #0A241C !default
24
+ $green-1: #E4F6EB !default
25
+ $green-2: #BCEACE !default
26
+ $green-3: #6CCD91 !default
27
+ $green-4: #0DBD76 !default
28
+ $green-5: #009B5F !default
29
+ $green-6: #007A4B !default
30
+ $green-7: #00613C !default
31
+ $green-8: #004839 !default
32
+ $green-9: #002920 !default
33
33
 
34
34
  // USSSA NEUTRAL
35
35
  $neutral-1: #FFFFFF !default
@@ -47,15 +47,15 @@ $neutral-12: #202328 !default
47
47
  $neutral-13: #101114 !default
48
48
 
49
49
  // USSSA ORANGE
50
- $orange-1: #FEEEEB !default
51
- $orange-2: #FEE0D7 !default
52
- $orange-3: #FDBEAA !default
53
- $orange-4: #FA6C3D !default
54
- $orange-5: #FE4C10 !default
55
- $orange-6: #F8430D !default
56
- $orange-7: #D33809 !default
57
- $orange-8: #8C3712 !default
58
- $orange-9: #542007 !default
50
+ $orange-1: #FEEEE2 !default
51
+ $orange-2: #FEC49A !default
52
+ $orange-3: #FBA66A !default
53
+ $orange-4: #FD8B3A !default
54
+ $orange-5: #FE7310 !default
55
+ $orange-6: #E36002 !default
56
+ $orange-7: #B74A01 !default
57
+ $orange-8: #652B01 !default
58
+ $orange-9: #3D1A01 !default
59
59
 
60
60
  // USSSA PINK
61
61
  $pink-1: #FAE0F4 !default
@@ -80,7 +80,7 @@ $purple-8: #403877 !default
80
80
  $purple-9: #262145 !default
81
81
 
82
82
  // USSSA RED
83
- $red-1: #FEF2F2 !default
83
+ $red-1: #FFECE9 !default
84
84
  $red-2: #FCCCCE !default
85
85
  $red-3: #F9A8AB !default
86
86
  $red-4: #E94A50 !default