@usssa/component-library 1.0.0-alpha.46 → 1.0.0-alpha.48

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usssa/component-library",
-  "version": "1.0.0-alpha.46",
+  "version": "1.0.0-alpha.48",
   "description": "A Quasar component library project",
   "productName": "Quasar component library App",
   "author": "Troy Moreland <troy.moreland@usssa.com>",

package/src/components/core/UInputPhoneStd.vue

@@ -70,7 +70,6 @@ const props = defineProps({
 })
 
 const modelValue = defineModel()
-
 const emit = defineEmits(['update-country'])
 
 const selectCountry = (country) => {
@@ -82,64 +81,65 @@ const toLowerCase = (str) => str.toLowerCase()
 
 <template>
   <UInputTextStd
+    v-model="modelValue"
+    :borderless="borderless"
     class="phone-input"
+    :disable="disable"
+    :error="error"
+    :error-message="errorMessage"
+    :hintText="hintText"
+    :hintIcon="hintIcon"
     :label="label"
     :isRequired="isRequired"
-    v-model="modelValue"
-    :mask="mask"
-    :validationRules="validationRules"
     leftIcon="true"
-    :rightIcon="rightIcon"
-    :hintText="hintText"
-    :hintIcon="hintIcon"
-    :toolTipText="toolTipText"
+    :mask="mask"
+    :outlined="outlined"
     :placeholder="placeholder"
-    :size="size"
-    :disable="disable"
     :readonly="readonly"
-    :error="error"
-    :error-message="errorMessage"
-    :borderless="borderless"
-    :outlined="outlined"
+    :rightIcon="rightIcon"
+    :size="size"
+    :toolTipText="toolTipText"
+    :validationRules="validationRules"
   >
     <template v-slot:prepend>
       <q-btn-dropdown
+        v-bind="$attrs"
         :disable="readonly"
-        rounded
-        flat
-        class="u-phone-dropdown text-body-sm"
         :class="`btn-field-${size}`"
+        class="u-phone-dropdown text-body-sm"
         content-class="u-dropdown-list"
+        flat
         menu-anchor="top right"
         menu-self="bottom middle"
         :menu-offset="[30, 5]"
+        rounded
       >
         <template #label>
           <q-icon
-            left
             :aria-label="selectedCountry.name"
             :class="`fi fi-${toLowerCase(
               selectedCountry.flag
             )} flag-icon q-mr-xs`"
+            left
           />
-          <label class="selected-code"> {{ selectedCountry.code }}</label>
+          <label class="selected-code">{{ selectedCountry.code }}</label>
         </template>
 
         <q-list class="u-list">
           <q-item
             v-for="country in options"
-            :key="country.code"
+            class="q-my-xxs"
             clickable
+            :key="country.code"
             v-close-popup
             v-ripple
             @click="selectCountry(country)"
-            class="q-my-xxs"
           >
             <q-item-section class="flag-section">
               <q-icon
                 :aria-label="country.name"
-                left
                 :class="`fi fi-${toLowerCase(country.flag)} flag-icon q-mr-xs`"
+                left
                 size="1.25rem"
               />
             </q-item-section>

package/src/components/core/UMenuItem.vue

@@ -66,11 +66,10 @@ const backgroundColor = computed(() => {
 </script>
 
 <template>
-  <div class="u-menu-link">
     <q-item
       clickable
       role="button"
-      :class="`${backgroundColor} item-${type}`"
+      :class="`${backgroundColor} item-${type} u-menu-link q-mb-xxs`"
       @click="handleClick"
       :aria-label="label"
     >
@@ -100,12 +99,11 @@ const backgroundColor = computed(() => {
 
       <slot name="trailing_slot"></slot>
     </q-item>
-  </div>
 </template>
 
 <style lang="sass">
 .u-menu-link
-  .q-item
+  &.q-item
     border-radius: $xxs
     padding: 0rem $xs
     align-items: center

package/src/components/core/USelectStd.vue

@@ -1,6 +1,8 @@
 <script setup>
 import { computed } from 'vue'
 import UTooltip from './UTooltip.vue'
+import UMenuItem from './UMenuItem.vue'
+import UAvatar from './UAvatar.vue'
 
 const props = defineProps({
   label: {
@@ -45,6 +47,10 @@ const props = defineProps({
     type: Boolean,
     required: false,
   },
+  disableAvatar: {
+    type: Boolean,
+    default: true,
+  },
   size: {
     type: String,
     default: 'md',
@@ -89,26 +95,29 @@ const model = computed({
       </div>
 
       <q-icon
-        class="q-ml-xs fa-kit-duotone fa-circle-info cursor-pointer"
         v-if="toolTipText"
+        aria-hidden="true"
+        class="q-ml-xs fa-kit-duotone fa-circle-info cursor-pointer"
         size="1rem"
         color="neutral-9"
-        aria-hidden="true"
       >
         <UTooltip
-          :description="toolTipText"
           anchor="top middle"
+          :description="toolTipText"
           self="bottom middle"
         />
       </q-icon>
     </label>
 
     <q-select
-      class="u-select"
-      :class="`field-${size}`"
-      id="select"
+      v-model="model"
+      v-bind="$attrs"
+      bottom-slots
+      :class="`u-select field-${size}`"
       :color="color"
       emit-value
+      hide-bottom-space
+      id="select"
       map-options
       :menu-offset="[0, 5]"
       :option-value="optionValue"
@@ -117,13 +126,9 @@ const model = computed({
       outlined
       options-selected-class="primary bg-blue-1"
       :popup-content-class="`u-options-menu ${popupClass}`"
-      v-model="model"
-      hide-bottom-space
-      bottom-slots
-      v-bind="$attrs"
+      :placeholder="placeholder"
       :use-input="useInput"
       @filter="filterFn"
-      :placeholder="placeholder"
     >
       <template v-slot:no-option>
         <q-item>
@@ -140,7 +145,6 @@ const model = computed({
       <template v-if="hintText" v-slot:hint>
         <div class="row no-wrap items-center text-neutral-9">
           <q-icon :class="hintIcon" size="1rem" v-if="hintIcon" />
-
           <div class="q-mx-xxs text-body-xs">
             {{ hintText }}
           </div>
@@ -148,28 +152,42 @@ const model = computed({
       </template>
 
       <template v-slot:option="scope">
-        <q-item class="items-center u-custom-option" v-bind="scope.itemProps">
-          <div class="q-pr-xs" v-if="scope.opt.icon">
-            <q-icon :class="scope.opt.icon" color="neutral-13" size="1rem" />
-          </div>
-
-          <q-item-section>
-            <q-item-label class="text-body-sm">
-              {{ scope.opt.label }}
-            </q-item-label>
-            <q-item-label caption v-if="scope.opt.description">
-              {{ scope.opt.description }}
-            </q-item-label>
-          </q-item-section>
-
-          <q-item-section v-if="scope.selected" side>
-            <q-icon
-              class="fa-kit-duotone fa-circle-check"
-              color="primary"
-              size="1rem"
-            />
-          </q-item-section>
-        </q-item>
+        <UMenuItem
+          v-bind="scope.itemProps"
+          class="q-ma-xxs"
+          iconClass="icon-secondary-opacity"
+          :label="scope.opt.label"
+          :leftIcon="scope.opt.leftIcon"
+          :rightIcon="scope.opt.rightIcon"
+          :selected="scope.selected"
+        >
+          <template #leading_slot>
+            <slot name="leading_slot"/>
+            <div v-if="!disableAvatar">
+              <UAvatar
+                v-if="scope.opt.avatarUrl"
+                :image="scope.opt.avatarUrl"
+                :name="scope.opt.label"
+                size="md"
+              />
+              <UAvatar
+                v-else
+                :name="scope.opt.label"
+                size="md"
+              />
+            </div>
+          </template>
+          <template #trailing_slot>
+            <slot name="trailing_slot">
+              <q-icon
+                v-if="scope.selected"
+                class="fa-kit-duotone fa-circle-check"
+                color="primary"
+                size="1rem"
+              />
+            </slot>
+          </template> 
+        </UMenuItem>
       </template>
     </q-select>
   </section>
@@ -224,10 +242,9 @@ const model = computed({
   width: 18rem
   overflow-y: auto
   scrollbar-width: none
-
-.u-custom-option
-  margin: $xxs
-  border-radius: $xxs
-  padding: $xs
-  min-height: $lg
+    
+.u-options-menu
+  .q-item:last-child
+    margin-bottom: $xxs
+    
 </style>

package/src/pages/InputPhone.vue

@@ -79,26 +79,27 @@ defineOptions({
     >
       <template v-slot:component>
         <UInputPhoneStd
-          :label="label"
+          v-model="inputValue"
+          aria-label="Country code selection"
+          :borderless="borderless"
+          :disable="disabled"
+          :error="isError"
+          :error-message="errorMessage"
           :isRequired="isRequired"
+          :label="label"
+          lazy-rules
           :mask="mask"
-          v-model="inputValue"
-          :validationRules="validationRules"
-          :rightIcon="rightIcon"
           :hintText="hintText"
           :hintIcon="hintIcon"
-          :toolTipText="toolTipText"
+          :options="countryOptions"
+          :outlined="outline"
           :placeholder="placeholder"
-          :size="size"
-          :disable="disabled"
+          :rightIcon="rightIcon"
           :readonly="readonly"
-          :error="isError"
-          lazy-rules
-          :error-message="errorMessage"
-          :borderless="borderless"
-          :outlined="outline"
-          :options="countryOptions"
+          :size="size"
           :selected-country="selectedCountry"
+          :toolTipText="toolTipText"
+          :validationRules="validationRules"
           @update-country="selectCountry"
         />
       </template>
@@ -120,11 +121,11 @@ defineOptions({
             <div>
               <q-radio dense v-model="type" val="outline" label="Outline" />
               <q-radio
-                dense
                 v-model="type"
-                val="borderless"
-                label="Borderless"
                 class="q-pa-sm"
+                dense
+                label="Borderless"
+                val="borderless"
               />
             </div>
           </div>

package/src/pages/SelectStd.vue

@@ -1,73 +1,75 @@
 <script setup>
 import { ref } from 'vue'
 import ComponentBase from './ComponentBase.vue'
-import { USelectStd } from 'src/components'
+import { USelectStd, UBtnStd } from 'src/components'
 
 const options_data = [
   {
     label: 'Guatemala',
     value: 'Guatemala',
-    icon: 'fa-kit-duotone fa-home',
+    description: 'Guatemala',
+    leftIcon: 'fa-kit-duotone fa-home',
+    avatarUrl: 'https://cdn.quasar.dev/img/avatar2.jpg',
+    rightIcon: 'fa-kit-duotone fa-home',
   },
   {
     label: 'Philippines',
     value: 'Philippines',
-    icon: 'fa-kit-duotone fa-home',
+    leftIcon: 'fa-kit-duotone fa-home',
   },
   {
     label: 'Colombia',
     value: 'Colombia',
-    icon: 'fa-kit-duotone fa-home',
+    avatarUrl: 'https://cdn.quasar.dev/img/avatar2.jpg',
   },
   {
     label: 'Turkmenistan',
     value: 'Turkmenistan',
-    icon: 'fa-kit-duotone fa-home',
   },
   {
     label: 'France',
     value: 'France',
-    icon: 'fa-kit-duotone fa-home',
+    leftIcon: 'fa-kit-duotone fa-home',
   },
   {
     label: 'Philippines',
     value: 'Philippines',
-    icon: 'fa-kit-duotone fa-home',
+    leftIcon: 'fa-kit-duotone fa-home',
   },
   {
     label: 'Greece',
     value: 'Greece',
-    icon: 'fa-kit-duotone fa-home',
+    leftIcon: 'fa-kit-duotone fa-home',
   },
   {
     label: 'Indonesia',
     value: 'Indonesia',
-    icon: 'fa-kit-duotone fa-home',
+    leftIcon: 'fa-kit-duotone fa-home',
   },
   {
     label: 'Russia',
     value: 'Russia',
-    icon: 'fa-kit-duotone fa-home',
+    leftIcon: 'fa-kit-duotone fa-home',
   },
   {
     label: 'Albania',
     value: 'Albania',
-    icon: 'fa-kit-duotone fa-home',
+    leftIcon: 'fa-kit-duotone fa-home',
   },
   {
     label: 'Sweden',
     value: 'Sweden',
-    icon: 'fa-kit-duotone fa-home',
+    leftIcon: 'fa-kit-duotone fa-home',
   },
   {
     label: 'Japan',
     value: 'Japan',
-    icon: 'fa-kit-duotone fa-home',
+    leftIcon: 'fa-kit-duotone fa-home',
   },
   {
     label: 'Czech Republic',
     value: 'Czech Republic',
-    icon: 'fa-kit-duotone fa-home',
+    leftIcon: 'fa-kit-duotone fa-home',
   },
 ]
 const options = ref(options_data)
@@ -87,12 +89,14 @@ const filterFn = (val, update) => {
 
 const size = ref('sm')
 const useInput = ref(false)
+const trailingSlot = ref(false)
 const hintText = ref('This is hint text')
 const toolTipText = ref('This is tooltip text')
 const label = ref('Label')
 const hintIcon = ref('fa-kit-duotone fa-triangle-exclamation')
 const leftIcon = ref('')
 const isRequired = ref(true)
+const disableAvatar = ref(true) // disable avatar of both type image and initials
 const placeholderText = ref('Placeholder')
 const htmlContent = `<USelectStd
     v-model="modelMultiple"
@@ -109,7 +113,16 @@ const htmlContent = `<USelectStd
     :leftIcon="leftIcon"
     :filterFn="filterFn"
     :placeholder="placeholderText"
-  />`
+  >
+    <template #trailing_slot>
+      <UBtnStd
+          color="primary"
+          label="Label"
+          size="sm"
+          outline
+        /> 
+    </template>
+  </USelectStd>`
 </script>
 
 <template>
@@ -133,7 +146,17 @@ const htmlContent = `<USelectStd
           :leftIcon="leftIcon"
           :filterFn="filterFn"
           :placeholder="placeholderText"
-        />
+          :disableAvatar="disableAvatar"
+        >
+          <template #trailing_slot v-if="trailingSlot">
+            <UBtnStd
+                color="primary"
+                label="Label"
+                size="sm"
+                outline
+              /> 
+          </template>
+        </USelectStd>
       </template>
 
       <template v-slot:properties>
@@ -149,6 +172,8 @@ const htmlContent = `<USelectStd
           <div class="row">
             <q-checkbox size="xs" v-model="isRequired" label="Required" />
             <q-checkbox size="xs" v-model="useInput" label="Use Input" />
+            <q-checkbox size="xs" v-model="trailingSlot" label="Trailing Slot" />
+            <q-checkbox size="xs" v-model="disableAvatar" label="Disable Avatar" />
           </div>
         </div>
       </template>