@usssa/component-library 1.0.0-alpha.150 → 1.0.0-alpha.152

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 (6) hide show
  1. package/README.md +1 -1
  2. package/package.json +1 -1
  3. package/src/components/core/UDate.vue +9 -19
  4. package/src/components/core/UMultiSelectStd.vue +0 -1
  5. package/src/css/quasar.variables.sass +89 -70
  6. package/src/css/vars/colors.variables.sass +0 -14
package/README.md CHANGED
@@ -1,4 +1,4 @@
1
- # Component Library v1.0.0-alpha.149
1
+ # Component Library v1.0.0-alpha.150
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.150",
3
+ "version": "1.0.0-alpha.152",
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/UDate.vue CHANGED
@@ -20,17 +20,9 @@ const props = defineProps({
20
20
  datePickerClass: { type: String, default: null },
21
21
  datePickerOptions: { type: [Array, Function] },
22
22
  disable: { type: Boolean, default: false },
23
- errorMessage: {
24
- type: String,
25
- default: null,
26
- },
27
23
  hintIcon: { type: String, default: null },
28
24
  hintText: { type: String, default: null },
29
25
  inputClass: { type: String, default: null },
30
- isError: {
31
- type: Boolean,
32
- default: false,
33
- },
34
26
  isRequired: { type: Boolean, default: false },
35
27
  label: {
36
28
  type: String,
@@ -96,19 +88,19 @@ const handleClose = () => {
96
88
  closeDialog()
97
89
  }
98
90
 
99
- const onUpdateValue = (value) => {
91
+ const onUpdateSheet = (value) => {
100
92
  if (value.search('-') > -1) {
101
- date.value = { from: value.split('-')[0], to: value.split('-')[1] }
93
+ dialogDate.value = { from: value.split('-')[0], to: value.split('-')[1] }
102
94
  } else {
103
- date.value = value
95
+ dialogDate.value = value
104
96
  }
105
97
  }
106
98
 
107
- const onUpdateSheet = (value) => {
99
+ const onUpdateValue = (value) => {
108
100
  if (value.search('-') > -1) {
109
- dialogDate.value = { from: value.split('-')[0], to: value.split('-')[1] }
101
+ date.value = { from: value.split('-')[0], to: value.split('-')[1] }
110
102
  } else {
111
- dialogDate.value = value
103
+ date.value = value
112
104
  }
113
105
  }
114
106
 
@@ -172,8 +164,6 @@ watch(
172
164
  :borderless="borderless"
173
165
  :dataTestId="dataTestId"
174
166
  :disable="disable"
175
- :error="isError"
176
- :error-message="errorMessage"
177
167
  :hint-icon="hintIcon"
178
168
  :hint-text="hintText"
179
169
  :is-required="isRequired"
@@ -222,6 +212,7 @@ watch(
222
212
  minimal
223
213
  :navigation-max-year-month="navigationMaxYearMonth"
224
214
  :navigation-min-year-month="navigationMinYearMonth"
215
+ :options="datePickerOptions"
225
216
  :range="range"
226
217
  />
227
218
  </q-popup-proxy>
@@ -263,7 +254,6 @@ watch(
263
254
  </UBtnStd>
264
255
  </template>
265
256
  </UInputTextStd>
266
- <!-- <div style="background-color: red; height: 200px"></div> -->
267
257
  <div>
268
258
  <q-date
269
259
  v-model="dialogDate"
@@ -288,7 +278,7 @@ watch(
288
278
  outline
289
279
  size="md"
290
280
  @on-click="handleClose"
291
- ></UBtnStd>
281
+ />
292
282
  </template>
293
283
  <template #action_primary_two>
294
284
  <UBtnStd
@@ -296,7 +286,7 @@ watch(
296
286
  label="Apply"
297
287
  size="md"
298
288
  @on-click="handleApply"
299
- ></UBtnStd>
289
+ />
300
290
  </template>
301
291
  </USheet>
302
292
  </template>
package/src/components/core/UMultiSelectStd.vue CHANGED
@@ -38,7 +38,6 @@ const props = defineProps({
38
38
  },
39
39
  label: {
40
40
  type: String,
41
- default: 'Label',
42
41
  },
43
42
  leftIcon: {
44
43
  type: String,
package/src/css/quasar.variables.sass CHANGED
@@ -13,27 +13,58 @@
13
13
  // Tip: Use the "Theme Builder" on Quasar's documentation website.
14
14
 
15
15
  @import 'vars/colors.variables'
16
- $primary : $blue-8
17
- $secondary : $blue-9
18
- $accent : $red-5
19
16
 
20
- $dark : #101114
21
- $dark-page : #121212
22
-
23
- $positive : $green-6
24
- $negative : $red-5
25
- $info : $purple-6
26
- $warning : $orange-7
17
+ // USSSA BRAND COLOR VALUES
18
+ $primary: $blue-8
19
+ $secondary: $blue-9
20
+ $accent: $red-5
21
+ $negative: $red-5
22
+ $warning: $orange-7
23
+ $positive: $green-6
24
+ $info: $purple-6
25
+ $dark: $neutral-13
26
+ $white: $neutral-1
27
+ $description: $neutral-9
28
+ $transparent: rgb(0, 0, 0, .10)
29
+ $dark-page: #121212
30
+
31
+ // BG Hover variables
32
+ $accent-bg-hover: rgb(203, 42, 61, .15)
33
+ $primary-bg-hover: rgb(35, 75, 169, .15)
34
+
35
+ // BODY
36
+ $body-xl: (size: 1.25rem, line-height: 1.75rem, letter-spacing: .03215rem, weight: 400) !default
37
+ $body-lg: (size: 1.125rem, line-height: 1.313rem, letter-spacing: .03215rem, weight: 400) !default
38
+ $body-md: (size: 1.00rem, line-height: 1.188rem, letter-spacing: .01786rem, weight: 400) !default
39
+ $body-sm: (size: 0.875rem, line-height: 1.188rem, letter-spacing: .01786rem, weight: 400) !default
40
+ $body-xs: (size: 0.75rem, line-height: 1.063rem, letter-spacing: .01786rem, weight: 400) !default
41
+ $body-xxs: (size: 0.688rem, line-height: 1.063rem, letter-spacing: .01786rem, weight: 400) !default
42
+
43
+ // BORDER RADIUS
44
+ $border-radius-xs: .25rem
45
+ $border-radius-sm: .5rem
46
+
47
+ // CAPTION
48
+ $caption-lg: (size: 1rem, line-height: 1.063rem, letter-spacing: .03333rem, weight: 500) !default
49
+ $caption-md: (size: 0.875rem, line-height: 1.063rem, letter-spacing: .03333rem, weight: 500) !default
50
+ $caption-sm: (size: 0.75rem, line-height: 1.063rem, letter-spacing: .03333rem, weight: 500) !default
51
+ $caption-xs: (size: 0.688rem, line-height: 1.063rem, letter-spacing: .03333rem, weight: 500) !default
52
+
53
+ // OVERLINE
54
+ $overline-lg: (size: 1.00rem, line-height: 1.50rem, letter-spacing: .53px, weight: 500) !default
55
+ $overline-md: (size: 0.875rem, line-height: 1.5rem, letter-spacing: .03333px, weight: 500) !default
56
+ $overline-sm: (size: 0.75rem, line-height: 1.5rem, letter-spacing: .03333px, weight: 500) !default
57
+ $overline-xs: (size: 0.688rem, line-height: 1.5rem, letter-spacing: .03333px, weight: 500) !default
27
58
 
28
59
  // USSSA TYPOGRAPHY RESET
29
- $h1: (size: 4.063rem, line-height: 5.079rem, letter-spacing: .35px, weight: 700) !default
30
- $h2: (size: 2.5rem, line-height: 3.125rem, letter-spacing: .35px, weight: 700) !default
31
- $h3: (size: 1.5rem, line-height: 1.875rem, letter-spacing: .35px, weight: 700) !default
32
- $h4: (size: 1.25rem, line-height: 1.563rem, letter-spacing: .35px, weight: 700) !default
60
+ $h1: (size: 4.063rem, line-height: 5.079rem, letter-spacing: .35px, weight: 700) !default
61
+ $h2: (size: 2.5rem, line-height: 3.125rem, letter-spacing: .35px, weight: 700) !default
62
+ $h3: (size: 1.5rem, line-height: 1.875rem, letter-spacing: .35px, weight: 700) !default
63
+ $h4: (size: 1.25rem, line-height: 1.563rem, letter-spacing: .35px, weight: 700) !default
33
64
 
34
65
  // QUASAR DEFAULTS
35
- $h5: (size: 1.5rem, line-height: 2rem, letter-spacing: normal, weight: 700) !default
36
- $h6: (size: 1.25rem, line-height: 2rem, letter-spacing: .0125em, weight: 700) !default
66
+ $h5: (size: 1.5rem, line-height: 2rem, letter-spacing: normal, weight: 700) !default
67
+ $h6: (size: 1.25rem, line-height: 2rem, letter-spacing: .0125em, weight: 700) !default
37
68
 
38
69
  // USSSA CUSTOM
39
70
  $h1-md: (size: 3.00rem , line-height: 3.75rem, letter-spacing: .35px, weight: bold) !default
@@ -48,64 +79,45 @@ $h3-sm: (size: 1.250rem , line-height: 1.563rem, letter-spacing: .35px, weight:
48
79
  $h4-md: (size: 1.125rem , line-height: 1.406rem, letter-spacing: .35px, weight: bold) !default
49
80
  $h4-sm: (size: 1.00rem , line-height: 1.25rem, letter-spacing: .35px, weight: bold) !default
50
81
 
82
+ // HEADING
83
+ $heading-xxxl: (size: 3rem, line-height: 5.25rem, letter-spacing: -0.0156rem, weight: 700) !default
84
+ $heading-xxl: (size: 2.5rem, line-height: 3.281rem, letter-spacing: 0rem, weight: 700) !default
85
+ $heading-xl: (size: 2.0rem, line-height: 2.734rem, letter-spacing: 0rem, weight: 700) !default
86
+ $heading-lg: (size: 1.75rem, line-height: 1.75rem, letter-spacing: .00714rem, weight: 700) !default
87
+ $heading-md: (size: 1.5rem, line-height: 1.5rem, letter-spacing: .00714rem, weight: 700) !default
88
+ $heading-sm: (size: 1.25rem, line-height: 1.5rem, letter-spacing: 0rem, weight: 700) !default
89
+ $heading-xs: (size: 1.125rem, line-height: 1.313rem, letter-spacing: .0125rem, weight: 700) !default
90
+ $heading-xxs: (size: 1.0rem, line-height: 1.313rem, letter-spacing: .0125rem, weight: 700) !default
51
91
 
52
- // DESKTOP
53
- $caption-lg: (size: 1rem, line-height: 1.25rem, letter-spacing: .03333rem, weight: 500) !default
54
- $caption-md: (size: 0.875rem, line-height: 1.25rem, letter-spacing: .03333rem, weight: 500) !default
55
- $caption-sm: (size: 0.75rem, line-height: 1.25rem, letter-spacing: .03333rem, weight: 500) !default
56
- $caption-xs: (size: 0.688rem, line-height: 1.25rem, letter-spacing: .03333rem, weight: 500) !default
57
-
58
- $body-xl: (size: 1.25rem, line-height: 2.5rem, letter-spacing: .03215rem, weight: 400) !default
59
- $body-lg: (size: 1.125rem, line-height: 1.75rem, letter-spacing: .03215rem, weight: 400) !default
60
- $body-md: (size: 1.00rem, line-height: 1.188rem, letter-spacing: .01786rem, weight: 400) !default
61
- $body-sm: (size: 0.875rem, line-height: 1.5rem, letter-spacing: .01786rem, weight: 400) !default
62
- $body-xs: (size: 0.75rem, line-height: 1.25rem, letter-spacing: .01786rem, weight: 400) !default
63
- $body-xxs: (size: 0.688rem, line-height: 1.25rem, letter-spacing: .01786rem, weight: 400) !default
64
-
65
- $overline-lg: (size: 1.00rem, line-height: 1.50rem, letter-spacing: .53px, weight: 500) !default
66
- $overline-md: (size: 0.875rem, line-height: 2rem, letter-spacing: .53px, weight: 500) !default
67
- $overline-sm: (size: 0.75rem, line-height: 2rem, letter-spacing: .53px, weight: 500) !default
68
- $overline-xs: (size: 0.688rem, line-height: 2rem, letter-spacing: .53px, weight: 500) !default
69
-
70
- $heading-xxxl: (size: 3rem, line-height: 3.75rem, letter-spacing: -0.0156rem, weight: 700) !default
71
- $heading-xxl: (size: 2.5rem, line-height: 3.125rem, letter-spacing: 0rem, weight: 700) !default
72
- $heading-xl: (size: 2.0rem, line-height: 2.5rem, letter-spacing: 0rem, weight: 700) !default
73
- $heading-lg: (size: 1.75rem, line-height: 2.188rem, letter-spacing: .00714rem, weight: 700) !default
74
- $heading-md: (size: 1.5rem, line-height: 1.5rem, letter-spacing: .00714rem, weight: 700) !default
75
- $heading-sm: (size: 1.25rem, line-height: 1.5rem, letter-spacing: 0rem, weight: 700) !default
76
- $heading-xs: (size: 1.125rem, line-height: 1.406rem, letter-spacing: .0125rem, weight: 700) !default
77
- $heading-xxs: (size: 1.0rem, line-height: 1.5rem, letter-spacing: .0125rem, weight: 700) !default
78
-
79
- // VARIABLE ASSIGNMENT
80
92
  $headings: ('h1': $h1, 'h1-md': $h1-md, 'h1-sm': $h1-sm, 'h2': $h2, 'h2-md': $h2-md, 'h2-sm': $h2-sm, 'h3': $h3, 'h3-md': $h3-md, 'h3-sm': $h3-sm, 'h4': $h4, 'h4-md': $h4-md, 'h4-sm': $h4-sm, 'h5': $h5, 'h6': $h6, 'body-xl': $body-xl, 'body-lg': $body-lg, 'body-md': $body-md, 'body-sm': $body-sm, 'body-xs': $body-xs, 'body-xxs': $body-xxs, 'overline-lg': $overline-lg, 'overline-md': $overline-md, 'overline-sm': $overline-sm,'overline-xs': $overline-xs, 'caption-lg': $caption-lg, 'caption-md': $caption-md, 'caption-sm': $caption-sm, 'caption-xs': $caption-xs, 'heading-xxxl': $heading-xxxl, 'heading-xxl':$heading-xxl,'heading-xl':$heading-xl,'heading-lg':$heading-lg,'heading-md':$heading-md,'heading-sm':$heading-sm,'heading-xs':$heading-xs,'heading-xxs': $heading-xxs) !default
81
93
 
82
94
  // SPACING BASE
83
- $space-base : 1rem !default
84
- $space-x-base : $space-base !default
85
- $space-y-base : $space-base !default
95
+ $space-base: 1rem !default
96
+ $space-x-base: $space-base !default
97
+ $space-y-base: $space-base !default
86
98
 
87
99
  // SPACING SINGLE VARIABLES
88
- $xxs : $space-base * .25 !default
89
- $xs : $space-base * .5 !default
90
- $sm : $space-base * .75 !default
91
- $ms : $space-base * 1.5 !default
92
- $ba : $space-base * 1 !default
93
- $md : $space-base * 2 !default
94
- $lg : $space-base * 2.5 !default
95
- $xl : $space-base * 3 !default
96
- $xxl : $space-base * 3.375 !default
100
+ $xxs: $space-base * .25 !default
101
+ $xs: $space-base * .5 !default
102
+ $sm: $space-base * .75 !default
103
+ $ms: $space-base * 1.5 !default
104
+ $ba: $space-base * 1 !default
105
+ $md: $space-base * 2 !default
106
+ $lg: $space-base * 2.5 !default
107
+ $xl: $space-base * 3 !default
108
+ $xxl: $space-base * 3.375 !default
97
109
 
98
110
  // SPACING VARIABLES FOR QUASAR SPACING UTILITY CLASSES
99
- $space-none : (x: 0, y: 0) !default
100
- $space-xxs : (x: ($space-x-base * .25), y: ($space-y-base * .25)) !default
101
- $space-xs : (x: ($space-x-base * .5), y: ($space-y-base * .5)) !default
102
- $space-sm : (x: ($space-x-base * .75), y: ($space-y-base * .75)) !default
103
- $space-ms : (x: ($space-x-base * 1.5), y: ($space-y-base * 1.5)) !default
104
- $space-ba : (x: ($space-x-base * 1), y: ($space-y-base * 1)) !default
105
- $space-md : (x: $space-x-base * 2, y: $space-y-base * 2) !default
106
- $space-lg : (x: ($space-x-base * 2.5), y: ($space-y-base * 2.5)) !default
107
- $space-xl : (x: ($space-x-base * 3), y: ($space-y-base * 3)) !default
108
- $space-xxl : (x: ($space-x-base * 3.375), y: ($space-y-base * 3.375)) !default
111
+ $space-none: (x: 0, y: 0) !default
112
+ $space-xxs: (x: ($space-x-base * .25), y: ($space-y-base * .25)) !default
113
+ $space-xs: (x: ($space-x-base * .5), y: ($space-y-base * .5)) !default
114
+ $space-sm: (x: ($space-x-base * .75), y: ($space-y-base * .75)) !default
115
+ $space-ms: (x: ($space-x-base * 1.5), y: ($space-y-base * 1.5)) !default
116
+ $space-ba: (x: ($space-x-base * 1), y: ($space-y-base * 1)) !default
117
+ $space-md: (x: $space-x-base * 2, y: $space-y-base * 2) !default
118
+ $space-lg: (x: ($space-x-base * 2.5), y: ($space-y-base * 2.5)) !default
119
+ $space-xl: (x: ($space-x-base * 3), y: ($space-y-base * 3)) !default
120
+ $space-xxl: (x: ($space-x-base * 3.375), y: ($space-y-base * 3.375)) !default
109
121
 
110
122
  $spaces: ('none': $space-none, 'xxs': $space-xxs, 'xs': $space-xs, 'sm': $space-sm, 'ms': $space-ms, 'ba': $space-ba, 'md': $space-md, 'lg': $space-lg, 'xl': $space-xl, 'xxl': $space-xxl) !default
111
123
 
@@ -115,7 +127,14 @@ $shadow-inner: 0px 0px 1px 1px rgb(16, 17, 20, .12) inset
115
127
  $shadow-skeumorphic-primary: 0px 1px 0.4px 0px rgba(136, 136, 138, 0.40) inset, 0px -1px 0.4px 0px rgba(16, 17, 20, 0.40) inset, 0px 4px 10px 0px rgba(16,17,20,0.00), 0px 0px 0px 1px rgb(35,75,169)
116
128
  $stroke-skeuomorphic: 1px solid rgba(255, 255, 255, 0.12)
117
129
  $shadow-2: 0px 0px 8px 0px rgba(16, 17, 20, 0.12)
118
- $accent-bg-hover: rgba(203, 42, 61, 0.15)
119
- $surface-bg-link-hover :rgba(16, 17, 20, .5)
120
- $border-radius-sm: .75rem
121
- $border-radius-xs: .5rem
130
+
131
+ // Surface variables
132
+ $surface-bg-1: $neutral-1
133
+ $surface-bg-link-hover: rgba(16, 17, 20, .5)
134
+
135
+ // Transparent variables
136
+ $accent-transparent: rgba(203, 42, 61, .20)
137
+ $primary-transparent: rgb(35, 75, 169, .20)
138
+
139
+ // Others
140
+ $bg-blue-1: #E1E9F9
package/src/css/vars/colors.variables.sass CHANGED
@@ -111,17 +111,3 @@ $yellow-6: #EBC321 !default
111
111
  $yellow-7: #D2AB0C !default
112
112
  $yellow-8: #B49104 !default
113
113
  $yellow-9: #8C7000 !default
114
-
115
- // USSSA RED TRANSPARENT
116
- $accent-transparent: rgba(203, 42, 61, .20)
117
- $accent-bg-hover: rgba(203, 42, 61, 0.15)
118
-
119
- // USSSA BLUE TRANSPARENT
120
- $primary-transparent: rgba(35, 75, 169, .20)
121
- $primary-bg-hover: rgba(35, 75, 169, .15)
122
-
123
- //USSSA Description content color
124
- $description : $neutral-9
125
-
126
- $surface-bg-1: #FFFFFF
127
- $bg-blue-1: #E1E9F9