@usssa/component-library 1.0.0-alpha.39 → 1.0.0-alpha.40

package/package.json

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

package/src/components/core/UBtnStd.vue

@@ -80,7 +80,7 @@ const isFullWidth = computed(() => {
             left
             :class="leftIcon"
             class="q-mr-xs"
-            size="1.25rem"
+            size="1rem"
           />
 
           <div class="text-center text-caption-md button-label">
@@ -91,7 +91,7 @@ const isFullWidth = computed(() => {
             right
             :class="rightIcon"
             class="q-ml-xs"
-            size="1.25rem"
+            size="1rem"
           />
         </div>
       </slot>

package/src/components/core/UInputPhoneStd.vue

@@ -231,7 +231,6 @@ const toLowerCase = (str) => str.toLowerCase()
 .phone-input
   .q-field__inner
     border-radius: $xs
-    background: $neutral-1
   &.q-field--borderless
     .q-field__control
       padding: 0 $xs 0 0

package/src/components/core/UMenuDropdownAdvancedSearch.vue

@@ -0,0 +1,262 @@
+<script setup>
+import { computed } from 'vue'
+import UInputPhoneStd from './UInputPhoneStd.vue'
+import UInputTextStd from './UInputTextStd.vue'
+import UMultiSelectStd from './UMultiSelectStd.vue'
+import USelectStd from './USelectStd.vue'
+
+const props = defineProps({
+  title: {
+    type: String,
+    default: 'Advanced search',
+  },
+  size: {
+    type: String,
+    default: 'md',
+    validator: (val) => ['sm', 'md'].includes(val),
+  },
+  searchType: {
+    type: String,
+  },
+  fields: {
+    type: Array,
+  },
+  showCustomMenu: {
+    type: Boolean,
+    default: false,
+  },
+  menuClass: {
+    type: String,
+  },
+  labelIcon: {
+    type: String,
+    default: 'fa-kit-duotone fa-filter-search',
+  },
+  model: {
+    type: Object,
+  },
+})
+const emit = defineEmits(['updateModelVal', 'updateCountry'])
+
+const menuSize = computed(() => {
+  if (props.size === 'md') {
+    return '24.1875rem'
+  } else if (props.size === 'sm') {
+    return '23.5625rem'
+  } else {
+    return props.size
+  }
+})
+
+const updateModelVal = (event, index) => {
+  emit('updateModelVal', event, index)
+}
+
+const updateCountry = (val, label) => {
+  emit('updateCountry', val, label)
+}
+
+const titleToCamelCase = (str) => {
+  return str
+    .split(' ')
+    .map((word, index) => {
+      if (index === 0) {
+        return word.toLowerCase()
+      } else {
+        return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()
+      }
+    })
+    .join('')
+}
+
+const getKeyValueByTitle = (label) => {
+  const model = props.model
+  const camelCaseKey = titleToCamelCase(label)
+  if (camelCaseKey in model) {
+    return model[camelCaseKey]
+  } else {
+    return ''
+  }
+}
+</script>
+
+<template>
+  <div>
+    <q-expansion-item
+      v-bind="$attrs"
+      class="overflow-hidden u-expansion"
+      header-class="bg-neutral-2"
+      dense-toggle
+      :style="`width: ${menuSize}`"
+    >
+      <template #header>
+        <div class="row items-center full-width">
+          <q-icon :class="labelIcon" size="1rem" color="neutral-9" />
+          <span class="q-ml-xs text-caption-sm text-neutral-13">
+            {{ title }}
+          </span>
+        </div>
+      </template>
+
+      <!-- Using slot for custom menu  -->
+      <template v-if="showCustomMenu">
+        <slot name="custom-menu" />
+      </template>
+
+      <section class="bg-neutral-2 q-px-ba" v-else>
+        <div class="row items-container">
+          <div
+            v-for="(item, index) in fields && fields.length ? fields : []"
+            :key="index"
+            :class="`${
+              size === 'sm'
+                ? 'full-width'
+                : `col-${item?.col || 12} ${
+                    item?.col !== 12 ? 'half-width' : ''
+                  }`
+            }`"
+          >
+            <UInputTextStd
+              v-if="item.inputType === 'Text'"
+              v-bind="item.props"
+              :aria-label="item.label"
+              :hintText="item.hintText"
+              :label="item.label"
+              :modelValue="getKeyValueByTitle(item.label)"
+              @update:modelValue="
+                updateModelVal($event, titleToCamelCase(item.label))
+              "
+            />
+            <USelectStd
+              v-if="item.inputType === 'Select'"
+              v-bind="item.props"
+              :aria-label="item.label"
+              hintIcon=""
+              :hintText="item.hintText"
+              :label="item.label"
+              :modelValue="getKeyValueByTitle(item.label)"
+              :options="item.options"
+              @update:modelValue="
+                updateModelVal($event, titleToCamelCase(item.label))
+              "
+            />
+            <UMultiSelectStd
+              v-if="item.inputType === 'Multiselect'"
+              v-bind="item.props"
+              :aria-label="item.label"
+              :hintText="item.hintText"
+              :label="item.label"
+              :modelValue="getKeyValueByTitle(item.label)"
+              :options="item.options"
+              @update:modelValue="
+                updateModelVal($event, titleToCamelCase(item.label))
+              "
+            />
+            <UInputPhoneStd
+              v-if="item.inputType === 'Phone'"
+              v-bind="item.props"
+              :aria-label="item.label"
+              hintIcon=""
+              :hintText="item.hintText"
+              :label="item.label"
+              :modelValue="getKeyValueByTitle(item.label)"
+              :options="item.options"
+              placeholder=""
+              :selected-country="model.selectedCountry"
+              :validationRules="[]"
+              @update-country="
+                updateCountry($event, titleToCamelCase(item.label))
+              "
+              @update:modelValue="
+                updateModelVal($event, titleToCamelCase(item.label))
+              "
+            />
+            <UInputTextStd
+              v-if="item.inputType === 'Date'"
+              v-bind="item.props"
+              :aria-label="item.label"
+              :hintText="item.hintText"
+              :label="item.label"
+              :modelValue="getKeyValueByTitle(item.label)"
+              outlined
+              parentClass="col"
+              @update:modelValue="
+                updateModelVal($event, titleToCamelCase(item.label))
+              "
+            >
+              <template v-slot:append>
+                <q-icon
+                  class="fa-kit-duotone fa-calendar-range cursor-pointer"
+                  aria-label="Birthday calendar"
+                  color="neutral-9"
+                  size="1rem"
+                  tabindex="0"
+                >
+                  <q-popup-proxy
+                    cover
+                    transition-show="scale"
+                    transition-hide="scale"
+                  >
+                    <q-date
+                      v-model="item.value"
+                      v-bind="item.dateProps"
+                      mask="MM/DD/YYYY"
+                      @update:modelValue="
+                        updateModelVal($event, titleToCamelCase(item.label))
+                      "
+                    >
+                      <div class="row items-center justify-end">
+                        <q-btn
+                          v-close-popup
+                          color="primary"
+                          flat
+                          label="Close"
+                        />
+                      </div>
+                    </q-date>
+                  </q-popup-proxy>
+                </q-icon>
+              </template>
+            </UInputTextStd>
+          </div>
+        </div>
+
+        <!-- Action Buttons -->
+
+        <div class="action-wrapper">
+          <q-card-actions align="left" class="full-width">
+            <slot name="action_left_button"></slot>
+          </q-card-actions>
+          <q-card-actions align="right" class="full-width">
+            <slot name="action_right_button"></slot>
+          </q-card-actions>
+        </div>
+      </section>
+    </q-expansion-item>
+  </div>
+</template>
+
+<style lang="sass">
+.u-expansion
+  border-radius: $xs
+  justify-content: space-between
+  align-items: center
+  align-self: stretch
+  .q-item
+    padding: $xs $xs $xs $ba
+    .q-item__section--side
+      padding-right: 0px
+      color: $neutral-9
+  .action-wrapper
+    display: flex
+    justify-content: space-between
+    gap: $xs
+  .q-card__actions
+    padding: 0px
+    margin: $ba 0px $ba 0px
+  .items-container
+    gap: $ba $xs
+  .half-width
+    flex: 1 1 calc(50% - 44px)
+    box-sizing: border-box
+</style>

package/src/components/core/USelectStd.vue

@@ -138,7 +138,7 @@ const model = computed({
       </template>
 
       <template v-if="hintText" v-slot:hint>
-        <div class="row no-wrap items-center">
+        <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">

package/src/components/index.js

@@ -27,7 +27,7 @@ import UDrawer from './core/UDrawer.vue'
 import UMenuDropdown from './core/UMenuDropdown.vue'
 import UMenuButtonStd from './core/UMenuButtonStd.vue'
 import UBreadCrumbs from './core/UBreadCrumbs.vue'
-
+import UMenuDropdownAdvancedSearch from './core/UMenuDropdownAdvancedSearch.vue'
 import { useNotify } from '../composables/useNotify.js'
 import { useOverlayLoader } from '../composables/useOverlayLoader.js'
 
@@ -62,4 +62,5 @@ export {
   UTabsStd,
   UToggleStd,
   UTooltip,
+  UMenuDropdownAdvancedSearch,
 }

package/src/layouts/MainLayout.vue

@@ -10,6 +10,10 @@ const components = [
     title: 'Address Lookup',
     path: '/address-lookup',
   },
+  {
+    title: 'Advanced Search',
+    path: '/advanced-search',
+  },
   {
     title: 'Avatar',
     path: '/avatar',
@@ -126,6 +130,10 @@ const components = [
     title: 'Inner Loader',
     path: '/inner-loader',
   },
+  {
+    title: 'Typeahead Dropdown Search',
+    path: '/typeahead-advance-search',
+  },
   {
     title: 'Overlay Loader',
     path: '/overlay-loader',

package/src/pages/AdvancedSearch.vue

@@ -0,0 +1,512 @@
+<script setup>
+import { computed, ref, toRaw, watch } from 'vue'
+import ComponentBase from './ComponentBase.vue'
+import { UMenuDropdownAdvancedSearch, UBtnStd } from 'src/components'
+
+defineOptions({
+  name: 'AdvancedSearch',
+})
+
+const typeOptions = ['People', 'Team', 'Event', 'Venue', 'Default']
+const sizeOptions = ['md', 'sm']
+
+const type = ref('People')
+const size = ref('md')
+const people_fields = ref([
+  {
+    label: 'First Name',
+    inputType: 'Text',
+    hintText: 'Legal first name',
+    col: 6,
+    value: '',
+  },
+  {
+    label: 'Middle Name',
+    inputType: 'Text',
+    hintText: 'Middle initial or name',
+    col: 6,
+    value: '',
+  },
+  {
+    label: 'Last Name',
+    inputType: 'Text',
+    hintText: 'Legal last name',
+    col: 6,
+    value: '',
+  },
+
+  {
+    label: 'Suffix',
+    inputType: 'Select',
+    value: '',
+    hintText: 'Jr., Sr., II, III',
+    col: 6,
+    options: [
+      {
+        label: 'Jr.',
+        value: 'Jr.',
+      },
+      {
+        label: 'Sr.',
+        value: 'Sr.',
+      },
+      {
+        label: 'II',
+        value: 'II',
+      },
+      {
+        label: 'III',
+        value: 'III',
+      },
+    ],
+  },
+  {
+    label: 'Email Address',
+    inputType: 'Text',
+    value: '',
+    hintText: 'Enter valid email address',
+    col: 12,
+  },
+  {
+    label: 'Phone Number',
+    inputType: 'Phone',
+    value: '',
+    hintText: 'Include area code in phone number',
+    col: 12,
+    options: [
+      { name: 'United States', code: '+1', flag: 'us' },
+      { name: 'Canada', code: '+1', flag: 'ca' },
+      { name: 'Mexico', code: '+52', flag: 'mx' },
+    ],
+    selectedCountry: {
+      name: 'United States',
+      code: '+1',
+      flag: 'us',
+    },
+  },
+])
+const people_fields_obj = ref({
+  firstName: '',
+  middleName: '',
+  lastName: '',
+  suffix: '',
+  emailAddress: '',
+  phoneNumber: '',
+  selectedCountry: {
+    name: 'United States',
+    code: '+1',
+    flag: 'us',
+  },
+})
+const event_fields_obj = ref({
+  eventName: '',
+  sport: '',
+  city: '',
+  state: '',
+  startDate: '',
+  endDate: '',
+})
+const default_fields_obj = ref({
+  firstName: '',
+  lastName: '',
+  teamName: '',
+  eventName: '',
+  venueName: '',
+})
+const team_fields_obj = ref({
+  teamName: '',
+  sport: '',
+  class: '',
+  city: '',
+  state: '',
+})
+const venue_fields_obj = ref({
+  venueName: '',
+  venueAddress: '',
+  country: '',
+  state: '',
+  postalCode: '',
+  sport: '',
+})
+const default_fields = ref([
+  {
+    label: 'First Name',
+    inputType: 'Text',
+    hintText: 'Legal first name',
+  },
+  {
+    label: 'Last Name',
+    inputType: 'Text',
+    hintText: 'Legal last name',
+  },
+  {
+    label: 'Team Name',
+    inputType: 'Text',
+    col: 12,
+    hintText: 'Full or short team name',
+  },
+  {
+    label: 'Event Name',
+    inputType: 'Text',
+    col: 12,
+    hintText: 'Full or partial event name',
+  },
+  {
+    label: 'Venue Name',
+    inputType: 'Text',
+    col: 12,
+    hintText: 'Full or partial venue name',
+  },
+])
+const event_fields = ref([
+  {
+    label: 'Event Name',
+    inputType: 'Text',
+    col: 12,
+    hintText: 'Full event name',
+  },
+  {
+    label: 'Sport',
+    inputType: 'Select',
+    col: 12,
+    hintText: "Select the event's sport",
+    options: [
+      {
+        label: 'Basketball',
+        value: 'Basketball',
+      },
+      {
+        label: 'Badminton',
+        value: 'Badminton',
+      },
+      {
+        label: 'Football',
+        value: 'Football',
+      },
+    ],
+  },
+  {
+    label: 'City',
+    inputType: 'Text',
+    hintText: "Select the event's city",
+  },
+  {
+    label: 'State',
+    inputType: 'Select',
+    hintText: "Select the event's state",
+    options: [
+      {
+        label: 'Spain',
+        value: 'Spain',
+      },
+      {
+        label: 'Netherlands',
+        value: 'Netherlands',
+      },
+      {
+        label: 'Canada',
+        value: 'Canada',
+      },
+    ],
+  },
+  {
+    label: 'Start Date',
+    inputType: 'Date',
+    hintText: "Select event's start date",
+  },
+  {
+    label: 'End Date',
+    inputType: 'Date',
+    hintText: "Select event's end date",
+  },
+])
+const team_fields = ref([
+  {
+    label: 'Team Name',
+    inputType: 'Text',
+    col: 12,
+    hintText: 'Full team name',
+  },
+  {
+    label: 'Sport',
+    inputType: 'Select',
+    col: 12,
+    hintText: "Select team's sport",
+    options: [
+      {
+        label: 'Basketball',
+        value: 'Basketball',
+      },
+      {
+        label: 'Badminton',
+        value: 'Badminton',
+      },
+      {
+        label: 'Football',
+        value: 'Football',
+      },
+    ],
+  },
+  {
+    label: 'Class',
+    inputType: 'Select',
+    col: 12,
+    hintText: "Select team's class",
+    options: [
+      {
+        label: 'Baseball Mens',
+        value: 'Baseball Mens',
+      },
+      {
+        label: 'Division 1',
+        value: 'Division 1',
+      },
+      {
+        label: 'Division 2',
+        value: 'Division 2',
+      },
+    ],
+  },
+  {
+    label: 'City',
+    inputType: 'Text',
+    hintText: "Enter team's city",
+  },
+  {
+    label: 'State',
+    inputType: 'Select',
+    hintText: "Select team's state",
+    options: [
+      {
+        label: 'Spain',
+        value: 'Spain',
+      },
+      {
+        label: 'Netherlands',
+        value: 'Netherlands',
+      },
+      {
+        label: 'Canada',
+        value: 'Canada',
+      },
+    ],
+  },
+])
+const venue_fields = ref([
+  {
+    label: 'Venue Name',
+    inputType: 'Text',
+    col: 12,
+    hintText: 'Enter the name of a venue',
+  },
+  {
+    label: 'Venue Address',
+    inputType: 'Text',
+    col: 12,
+    hintText: 'Street address of the venue',
+  },
+  {
+    label: 'Country',
+    inputType: 'Select',
+    col: 6,
+    hintText: 'Country of venue',
+    options: [
+      { label: 'United States', value: 'United States' },
+      { label: 'Canada', value: 'Canada' },
+      { label: 'Mexico', value: 'Mexico' },
+    ],
+  },
+  {
+    label: 'City',
+    inputType: 'Text',
+    col: 6,
+    hintText: 'City of venue',
+  },
+  {
+    label: 'State',
+    inputType: 'Select',
+    options: [
+      {
+        label: 'Spain',
+        value: 'Spain',
+      },
+      {
+        label: 'Netherlands',
+        value: 'Netherlands',
+      },
+      {
+        label: 'Canada',
+        value: 'Canada',
+      },
+    ],
+    hintText: 'State of venue',
+  },
+  {
+    label: 'Postal Code',
+    inputType: 'Text',
+    hintText: 'Postal/Zip Code of venue',
+  },
+  {
+    label: 'Sport(s)',
+    inputType: 'Select',
+    hintText: 'Select venue sports',
+    options: [
+      {
+        label: 'Basketball',
+        value: 'Basketball',
+      },
+      {
+        label: 'Badminton',
+        value: 'Badminton',
+      },
+      {
+        label: 'Football',
+        value: 'Football',
+      },
+    ],
+  },
+])
+const fieldObj = ref(people_fields_obj.value)
+const model = ref(structuredClone(toRaw(fieldObj.value)))
+const originalModel = ref(structuredClone(toRaw(fieldObj.value)))
+
+const search_fields = computed(() => {
+  if (type.value === 'People') {
+    return people_fields.value
+  } else if (type.value === 'Team') {
+    return team_fields.value
+  } else if (type.value === 'Event') {
+    return event_fields.value
+  } else if (type.value === 'Venue') {
+    return venue_fields.value
+  } else if (type.value === 'Default') {
+    return default_fields.value
+  }
+  return []
+})
+
+const selectCountry = (value, label) => {
+  model.value.selectedCountry = value
+}
+
+const clearFields = () => {
+  model.value = structuredClone(toRaw(fieldObj.value))
+  originalModel.value = structuredClone(toRaw(fieldObj.value))
+}
+
+const updateModelVal = (event, label) => {
+  model.value[label] = event
+}
+
+const onApply = () => {
+  console.log('model values ->', model.value)
+}
+
+const assignDefault = () => {
+  model.value = structuredClone(toRaw(fieldObj.value))
+  originalModel.value = structuredClone(toRaw(fieldObj.value))
+}
+
+watch(
+  () => type.value,
+  (newVal) => {
+    if (newVal === 'People') {
+      fieldObj.value = people_fields_obj.value
+      assignDefault()
+    } else if (newVal === 'Team') {
+      fieldObj.value = team_fields_obj.value
+      assignDefault()
+    } else if (newVal === 'Event') {
+      fieldObj.value = event_fields_obj.value
+      assignDefault()
+    } else if (newVal === 'Venue') {
+      fieldObj.value = venue_fields_obj.value
+      assignDefault()
+    } else if (newVal === 'Default') {
+      fieldObj.value = default_fields_obj.value
+      assignDefault()
+    }
+  }
+)
+
+const htmlContent = `<UMenuDropdownAdvancedSearch
+  :model="model"
+  :searchType="type"
+  :size="size"
+  :fields="search_fields"
+  title="Advanced search"
+  labelIcon="fa-kit-duotone fa-filter-search"
+  :showCustomMenu="false"
+  @updateCountry="selectCountry"
+  @updateModelVal="updateModelVal"
+>
+  <template #action_left_button>
+    <UBtnStd
+      label="Clear All Fields"
+      flat
+      color="primary"
+      leftIcon="fa-kit fa-rotate-left"
+      @onClick="clearFields"
+    />
+  </template>
+  <template #action_right_button>
+    <UBtnStd
+      label="Apply"
+      color="primary"
+      :full-width="true"
+      @onClick="onApply"
+    />
+  </template>
+</UMenuDropdownAdvancedSearch>`
+</script>
+
+<template>
+  <q-page class="flex flex-center">
+    <ComponentBase
+      figmaUrl="https://www.figma.com/design/2FoTrjVL4ZrTdsvB4DcSao/Components?node-id=8092-103302&node-type=instance&m=dev"
+    >
+      <template v-slot:component>
+        <div>
+          <UMenuDropdownAdvancedSearch
+            :model="model"
+            :searchType="type"
+            :size="size"
+            :fields="search_fields"
+            title="Advanced Search"
+            labelIcon="fa-kit-duotone fa-filter-search"
+            :showCustomMenu="false"
+            @updateCountry="selectCountry"
+            @updateModelVal="updateModelVal"
+          >
+            <template #action_left_button>
+              <UBtnStd
+                label="Clear All Fields"
+                flat
+                color="primary"
+                leftIcon="fa-kit fa-rotate-left"
+                @onClick="clearFields"
+              />
+            </template>
+            <template #action_right_button>
+              <UBtnStd
+                label="Apply"
+                color="primary"
+                :full-width="true"
+                @onClick="onApply"
+              />
+            </template>
+          </UMenuDropdownAdvancedSearch>
+        </div>
+      </template>
+
+      <template v-slot:properties>
+        <q-select v-model="type" :options="typeOptions" label="Search Type" />
+        <q-select v-model="size" :options="sizeOptions" label="Size" />
+      </template>
+
+      <template v-slot:code>
+        <pre><code>{{ htmlContent }}</code></pre>
+      </template>
+    </ComponentBase>
+  </q-page>
+</template>

package/src/router/routes.js

@@ -11,6 +11,10 @@ const routes = [
         path: 'address-lookup',
         component: () => import('pages/InputAddressLookup.vue'),
       },
+      {
+        path: 'advanced-search',
+        component: () => import('src/pages/AdvancedSearch.vue'),
+      },
       {
         path: 'avatar',
         component: () => import('pages/Avatar.vue'),