@usssa/component-library 1.0.0-alpha.109 → 1.0.0-alpha.110

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 (3) hide show
  1. package/README.md +1 -1
  2. package/package.json +1 -1
  3. package/src/components/core/UInputPhoneStd.vue +44 -47
package/README.md CHANGED
@@ -1,4 +1,4 @@
1
- # Component Library
1
+ # Component Library v1.0.0-alpha.110
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.109",
3
+ "version": "1.0.0-alpha.110",
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/UInputPhoneStd.vue CHANGED
@@ -1,18 +1,34 @@
1
1
  <script setup>
2
2
  import UInputTextStd from './UInputTextStd.vue'
3
3
 
4
+ const emit = defineEmits(['update-country'])
5
+ const modelValue = defineModel()
4
6
  const props = defineProps({
5
- ariaLabel:{
7
+ ariaLabel: {
6
8
  type: String,
7
- required: true
9
+ required: true,
8
10
  },
9
- hintText: {
11
+ borderless: {
12
+ type: Boolean,
13
+ default: false,
14
+ },
15
+ disable: {
16
+ type: Boolean,
17
+ default: false,
18
+ },
19
+ error: {
20
+ type: Boolean,
21
+ },
22
+ errorMessage: {
10
23
  type: String,
11
24
  },
12
25
  hintIcon: {
13
26
  type: String,
14
27
  default: 'fa-kit-duotone fa-circle-info',
15
28
  },
29
+ hintText: {
30
+ type: String,
31
+ },
16
32
  isRequired: {
17
33
  type: Boolean,
18
34
  default: false,
@@ -20,20 +36,30 @@ const props = defineProps({
20
36
  label: {
21
37
  type: String,
22
38
  },
23
- rightIcon: {
39
+ mask: {
24
40
  type: String,
41
+ default: '##########',
42
+ },
43
+ options: {
44
+ type: Array,
25
45
  },
26
46
  outlined: {
27
47
  type: Boolean,
28
48
  default: true,
29
49
  },
30
- borderless: {
50
+ placeholder: {
51
+ type: String,
52
+ default: 'Input Text',
53
+ },
54
+ readonly: {
31
55
  type: Boolean,
32
56
  default: false,
33
57
  },
34
- placeholder: {
58
+ rightIcon: {
35
59
  type: String,
36
- default: 'Input Text',
60
+ },
61
+ selectedCountry: {
62
+ type: Object,
37
63
  },
38
64
  size: {
39
65
  type: String,
@@ -47,54 +73,26 @@ const props = defineProps({
47
73
  type: Array,
48
74
  default: () => [(val) => val.length === 10],
49
75
  },
50
- readonly: {
51
- type: Boolean,
52
- default: false,
53
- },
54
- disable: {
55
- type: Boolean,
56
- default: false,
57
- },
58
- error: {
59
- type: Boolean,
60
- },
61
- errorMessage: {
62
- type: String,
63
- },
64
- options: {
65
- type: Array,
66
- },
67
- selectedCountry: {
68
- type: Object,
69
- },
70
- mask: {
71
- type: String,
72
- default: '##########',
73
- },
74
76
  })
75
77
 
76
- const emit = defineEmits(['update-country'])
77
- const modelValue = defineModel()
78
-
79
78
  const selectCountry = (country) => {
80
79
  emit('update-country', country)
81
80
  }
82
-
83
81
  const toLowerCase = (str) => str.toLowerCase()
84
82
  </script>
85
83
 
86
84
  <template>
87
85
  <UInputTextStd
88
86
  v-model="modelValue"
89
- :borderless="borderless"
90
87
  class="phone-input"
88
+ :borderless="borderless"
91
89
  :disable="disable"
92
90
  :error="error"
93
91
  :error-message="errorMessage"
94
- :hintText="hintText"
95
92
  :hintIcon="hintIcon"
96
- :label="label"
93
+ :hintText="hintText"
97
94
  :isRequired="isRequired"
95
+ :label="label"
98
96
  leftIcon="true"
99
97
  :mask="mask"
100
98
  :outlined="outlined"
@@ -107,23 +105,22 @@ const toLowerCase = (str) => str.toLowerCase()
107
105
  >
108
106
  <template v-slot:prepend>
109
107
  <q-btn-dropdown
110
- :aria-label="ariaLabel"
111
- :disable="readonly"
112
- :class="`btn-field-${size}`"
113
- class="u-phone-dropdown text-body-sm"
108
+ :class="['u-phone-dropdown', 'text-body-sm', 'btn-field-' + size]"
114
109
  content-class="u-dropdown-list"
110
+ :aria-label="ariaLabel"
111
+ :disable="disable"
115
112
  flat
116
113
  menu-anchor="top right"
117
- menu-self="bottom middle"
118
114
  :menu-offset="[30, 5]"
115
+ menu-self="bottom middle"
119
116
  rounded
120
117
  >
121
118
  <template #label>
122
119
  <q-icon
123
- :aria-label="selectedCountry.name"
124
120
  :class="`fi fi-${toLowerCase(
125
121
  selectedCountry.flag
126
122
  )} flag-icon q-mr-xs`"
123
+ :aria-label="selectedCountry.name"
127
124
  left
128
125
  />
129
126
  <label class="selected-code">{{ selectedCountry.code }}</label>
@@ -131,18 +128,18 @@ const toLowerCase = (str) => str.toLowerCase()
131
128
 
132
129
  <q-list class="u-list">
133
130
  <q-item
131
+ v-close-popup
134
132
  v-for="country in options"
133
+ v-ripple
135
134
  class="q-my-xxs"
136
135
  clickable
137
136
  :key="country.code"
138
- v-close-popup
139
- v-ripple
140
137
  @click="selectCountry(country)"
141
138
  >
142
139
  <q-item-section class="flag-section">
143
140
  <q-icon
144
- :aria-label="country.name"
145
141
  :class="`fi fi-${toLowerCase(country.flag)} flag-icon q-mr-xs`"
142
+ :aria-label="country.name"
146
143
  left
147
144
  size="1.25rem"
148
145
  />