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

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/pages/Avatar.vue

@@ -0,0 +1,77 @@
+<script setup>
+import { UAvatar } from 'src/components'
+import ComponentBase from './ComponentBase.vue'
+import { ref } from 'vue'
+
+const type = ref('label')
+const round = ref(true)
+const name = ref('A')
+const indicatorColor = ref('')
+const image = ref('')
+const size = ref('sm')
+const indicatorColorOptions = ['primary', 'accent', 'positive', 'neutral']
+const sizeOptions = ['sm', 'md', 'lg', 'xl']
+const showIndicator = ref(true)
+const htmlContent = `<UAvatar
+  ref="avatar"
+  :name="name"
+  :size="size"
+  :showIndicator="showIndicator"
+  :indicatorColor="indicatorColor"
+  :round="round"
+  :image="image"
+  />`
+
+defineOptions({
+  name: 'UAvatar',
+})
+</script>
+
+<template>
+  <q-page class="flex flex-center">
+    <ComponentBase
+      figmaUrl="https://www.figma.com/design/2FoTrjVL4ZrTdsvB4DcSao/Components?node-id=2246-39909"
+    >
+      <template v-slot:component>
+        <UAvatar
+          ref="avatar"
+          :name="name"
+          :size="size"
+          :showIndicator="showIndicator"
+          :indicatorColor="indicatorColor"
+          :round="round"
+          :image="image"
+        />
+      </template>
+
+      <template v-slot:properties>
+        <div class="column q-gutter-y-lg">
+          <q-input label="Name" v-model="name"></q-input>
+          <q-input label="image" v-model="image"></q-input>
+          <q-select v-model="size" :options="sizeOptions" label="Size" />
+          <div class="column">
+            <span class="text-grey-8 text-caption-sm">Show Indicator</span>
+            <q-checkbox
+              size="xs"
+              v-model="showIndicator"
+              :val="true"
+              label="Show Indicator"
+            />
+          </div>
+          <div>
+            <q-checkbox size="xs" v-model="round" :val="true" label="Round" />
+          </div>
+          <q-select
+            v-model="indicatorColor"
+            :options="indicatorColorOptions"
+            label="Indicator Color"
+          />
+        </div>
+      </template>
+
+      <template v-slot:code>
+        <pre>{{ htmlContent }}</pre>
+      </template>
+    </ComponentBase>
+  </q-page>
+</template>