@usssa/component-library 1.0.0-alpha.27 → 1.0.0-alpha.271

package/src/components/core/UFilter.vue

@@ -0,0 +1,99 @@
+<script setup>
+import UExpansionStd from './UExpansionStd.vue'
+
+const filterOptions = defineModel('filterOptions', {
+  default: () => [],
+  type: Array,
+})
+const props = defineProps({
+  collapsedAriaLabel: {
+    type: String,
+    default: '',
+  },
+  expandAriaLabel: {
+    type: String,
+    default: '',
+  },
+  dataTestId: {
+    type: String,
+    default: 'u-expansion-filter',
+  },
+  header: {
+    type: String,
+    default: null,
+  },
+  subHeader: {
+    type: Boolean,
+    default: true,
+  },
+})
+</script>
+
+<template>
+  <div
+    v-if="filterOptions.length"
+    class="u-expansion-filter q-pa-sm"
+    :dataTestId="dataTestId"
+  >
+    <div v-if="header" class="text-heading-sm text-dark q-pb-xs q-mb-xxs">
+      {{ header }}
+    </div>
+    <div
+      v-if="subHeader"
+      class="q-mb-xxs"
+      dataTestId="expansion-filter-sub-header"
+    >
+      <slot name="subHeader" />
+    </div>
+    <template v-for="filter in filterOptions" :key="filter.type">
+      <q-list v-if="filter.label" bordered>
+        <UExpansionStd
+          v-model="filter.isExpanded"
+          class="expansion-filter-item-wrapper"
+          :collapsed-aria-label="filter.collapsedAriaLabel"
+          :disabled="filter.disabled"
+          :expand-aria-label="filter.expandAriaLabel"
+          expansion-icon="fa-kit fa-chevron-right rotate-0"
+          :id="`filter-expansion-item-${filter.type}`"
+          :label="filter.label"
+          :toggle-icon-left="true"
+          toggle-icon-rotation-class="rotate-90"
+        >
+          <template #body>
+            <div class="expansion-filter-body-wrapper">
+              <slot :name="`type${filter.type}`" />
+            </div>
+          </template>
+        </UExpansionStd>
+      </q-list>
+    </template>
+  </div>
+</template>
+
+<style lang="sass">
+.u-expansion-filter
+  .q-list
+    margin-bottom: $xxs
+
+  border: 1px solid $neutral-4
+  border-radius: $sm
+  .q-list
+    border: none
+
+  .q-item.q-item-type
+    padding: $xs $xxs !important
+    display: flex
+    justify-content: start
+    align-items: center
+    min-height: $lg
+
+  .expansion-transition-icon
+    transition: all 0.2s ease-in-out 0.1s
+
+  .expansion-filter-item-wrapper
+    border: none !important
+    min-height: auto !important
+
+    .expansion-filter-body-wrapper
+      padding: $xs
+</style>

package/src/components/core/UGameObject.vue

@@ -0,0 +1,478 @@
+<script setup>
+import { ref } from 'vue'
+import UAvatar from './UAvatar.vue'
+import UBtnStd from './UBtnStd.vue'
+import { useScreenType } from '../../composables/useScreenType'
+import VsImg from '../../assets/VS.svg'
+
+const body = defineModel('body', {
+  type: Object,
+  default: () => ({
+    team1: {
+      avatar: { type: 'initials', value: '', name: '' },
+      teamName: 'Team Name',
+      record: 'In-Class Record (10-6-1)',
+      link: {
+        url: '',
+        color: 'neutral',
+        ariaLabel: '',
+        onClick: () => {},
+      },
+      score: '',
+    },
+    team2: {
+      avatar: { type: 'initials', value: '', name: '' },
+      teamName: 'Team Name',
+      record: 'In-Class Record (10-6-1)',
+      link: {
+        url: '',
+        color: 'neutral',
+        ariaLabel: '',
+        onClick: () => {},
+      },
+      score: '',
+    },
+    viewMatchup: {
+      color: 'primary',
+      size: 'sm',
+      label: 'View Matchup',
+      onClick: () => {},
+    },
+  }),
+})
+
+const direction = defineModel('direction', {
+  default: 'horizontal',
+  type: String,
+})
+
+const gameState = defineModel('gameState', {
+  default: 'notStarted',
+  type: String,
+})
+
+const header = defineModel('header', {
+  type: Object,
+  default: () => ({
+    primary: {
+      iconClass: '',
+      iconColor: '',
+      text: '',
+      customClass: '',
+    },
+    secondary: {
+      iconClass: '',
+      iconColor: '',
+      text: '',
+      badge: '',
+      alignBadge: '',
+      customClass: '',
+    },
+  }),
+})
+
+const props = defineProps({
+  dataTestId: {
+    type: String,
+    default: 'game-object-card',
+  },
+  fieldLocation: {
+    type: String,
+    default: '',
+  },
+})
+
+const $screen = useScreenType()
+
+const vsLogo = ref('/icons/VS.svg')
+// const versesLogo = ref("/icons/verses.svg"); TODO: Will uncomment when Figma design for completed state is completed
+
+const getChipCustomClass = (badge) => {
+  const isNotStarted = gameState.value === 'notStarted' ? true : false
+  if (badge === 'REPLAY') {
+    return 'replay-watch-chip'
+  }
+
+  if (badge === 'WATCH LIVE') {
+    return isNotStarted ? 'completed-replay-watch-chip' : 'replay-watch-chip'
+  }
+
+  return 'replay-watch-chip'
+}
+
+function isEmpty(obj) {
+  const emptyRegex = /^\s*$/
+  return Object.values(obj).every((value) => {
+    return (
+      value == null || (typeof value === 'string' && emptyRegex.test(value))
+    )
+  })
+}
+</script>
+
+<template>
+  <q-card
+    v-bind="$attrs"
+    :class="[
+      'u-game-object-std ',
+      $screen.isMobile || direction === 'vertical'
+        ? 'vertical-view'
+        : 'full-width',
+    ]"
+    :dataTestId="dataTestId"
+  >
+    <!-- Header -->
+    <q-card-section
+      :class="[
+        'row',
+        !$screen.isMobile && direction === 'horizontal' ? 'nowrap' : 'wrap',
+        'u-game-object-std-header justify-between q-mb-xxs',
+      ]"
+    >
+      <!-- two section  -->
+
+      <!-- Header primary section  -->
+      <div class="header-primary-section flex items-center no-wrap">
+        <q-icon
+          v-if="header.primary.iconClass"
+          :class="['q-mr-xs icon-secondary-opacity', header.primary.iconClass]"
+          :iconColor="header.primary.iconColor"
+          size="1rem"
+        />
+        <span class="text-caption-md title-text">{{
+          header.primary.text
+        }}</span>
+      </div>
+
+      <!-- Header secondary section  -->
+      <div
+        v-if="!isEmpty(header.secondary)"
+        class="header-secondary-section flex items-center"
+        :style="{
+          width:
+            !$screen.isMobile && direction === 'horizontal'
+              ? 'auto'
+              : !header.secondary.badge && !header.secondary.iconClass
+              ? 'auto'
+              : '100%',
+          justifyContent:
+            !$screen.isMobile && direction === 'horizontal'
+              ? 'unset'
+              : 'space-between',
+        }"
+      >
+        <!-- Left Badge -->
+        <template
+          v-if="
+            header.secondary.badge &&
+            header.secondary.alignBadge === 'left' &&
+            (!$screen.isMobile || direction != 'vertical')
+          "
+        >
+          <q-chip
+            icon="circle"
+            :class="[
+              'secondary-section-chip',
+              'text-overline-xs',
+              !$screen.isMobile && direction === 'horizontal'
+                ? 'q-mr-xs'
+                : 'hidden',
+              getChipCustomClass(header.secondary.badge),
+            ]"
+          >
+            {{ header.secondary.badge }}</q-chip
+          >
+        </template>
+        <!-- Left Badge -->
+
+        <div class="secondary-sub-section flex items-center">
+          <q-icon
+            v-if="header.secondary.iconClass"
+            :class="[
+              'q-mr-xs icon-secondary-opacity',
+              header.secondary.iconClass,
+            ]"
+            :iconColor="header.secondary.iconColor"
+            size="1rem"
+          />
+          <span class="text-caption-md title-text">{{
+            header.secondary.text
+          }}</span>
+        </div>
+
+        <!-- Right Badge -->
+        <template
+          v-if="
+            header.secondary.badge &&
+            (header.secondary.alignBadge === 'right' ||
+              (header.secondary.alignBadge === 'left' &&
+                ($screen.isMobile || direction === 'vertical')))
+          "
+        >
+          <q-chip
+            :class="[
+              'secondary-section-chip',
+              'text-overline-xs',
+              getChipCustomClass(header.secondary.badge),
+            ]"
+            icon="circle"
+          >
+            {{ header.secondary.badge }}</q-chip
+          >
+        </template>
+        <!-- Right Badge -->
+      </div>
+    </q-card-section>
+    <!-- Header  -->
+
+    <!-- Body -->
+    <q-card-section class="u-game-object-std-body">
+      <div class="team-stats-section row q-mb-ba">
+        <!-- Team 1 -->
+        <div class="flex justify-between items-center no-wrap">
+          <div class="team-stats">
+            <div
+              v-if="typeof body.team1.avatar === 'object'"
+              class="flex item-center justify-center"
+            >
+              <UAvatar
+                v-if="body.team1.avatar?.type === 'initials'"
+                :name="`${body.team1.avatar?.value}`"
+                :size="body.team1.avatar?.size"
+              />
+              <UAvatar
+                v-else-if="body.team1.avatar?.type === 'image'"
+                :image="`${body.team1.avatar?.value}`"
+                :name="body.team1.avatar?.name ?? body.team1.avatar?.value"
+                :size="body.team1.avatar?.size"
+              />
+            </div>
+            <div>
+              <div class="flex items-center no-wrap">
+                <span
+                  class="text-caption-lg q-mr-xs"
+                  :style="{ wordBreak: 'break-word' }"
+                  >{{ body.team1.teamName }}
+                </span>
+                <q-icon
+                  class="fa-kit-duotone fa-share cursor-pointer icon-secondary-opacity"
+                  :aria-label="body.team1.link.ariaLabel"
+                  :color="body.team1.link.color"
+                  role="button"
+                  size="1rem"
+                  tabindex="0"
+                  @click="body.team1.link.onClick"
+                />
+              </div>
+              <span class="text-body-xxs text-description">{{
+                body.team1.record
+              }}</span>
+            </div>
+          </div>
+
+          <div class="flex item-center justify-center full-height q-ml-xs">
+            <span class="text-caption-lg">
+              {{ body.team1.score }}
+            </span>
+          </div>
+        </div>
+        <!-- Team 1 -->
+
+        <div class="logo-section">
+          <q-img class="vs-logo" alt="vs logo" :src="VsImg" />
+        </div>
+
+        <!-- Team 2 -->
+        <div
+          class="flex justify-between items-center no-wrap"
+          :style="{
+            flexDirection:
+              !$screen.isMobile && direction === 'horizontal'
+                ? 'unset'
+                : 'row-reverse',
+          }"
+        >
+          <div class="flex item-center justify-center full-height">
+            <span
+              class="text-caption-lg"
+              :style="{
+                marginLeft:
+                  !$screen.isMobile && direction === 'horizontal'
+                    ? '0'
+                    : '0.5rem',
+              }"
+            >
+              {{ body.team2.score }}
+            </span>
+          </div>
+          <div class="team-stats2">
+            <div
+              v-if="typeof body.team2.avatar === 'object'"
+              class="flex item-center justify-center"
+              :style="{
+                marginLeft:
+                  !$screen.isMobile && direction === 'horizontal'
+                    ? '0.5rem'
+                    : '',
+              }"
+            >
+              <UAvatar
+                v-if="body.team2.avatar?.type === 'initials'"
+                :name="`${body.team2.avatar?.value}`"
+                :size="body.team2.avatar?.size"
+              />
+              <UAvatar
+                v-else-if="body.team2.avatar?.type === 'image'"
+                :image="`${body.team2.avatar?.value}`"
+                :name="body.team2.avatar?.name ?? body.team2.avatar?.value"
+                :size="body.team2.avatar?.size"
+              />
+            </div>
+            <div>
+              <div class="flex items-center no-wrap">
+                <span
+                  class="text-caption-lg q-mr-xs"
+                  :style="{ wordBreak: 'break-word' }"
+                  >{{ body.team2.teamName }}
+                </span>
+                <q-icon
+                  class="fa-kit-duotone fa-share cursor-pointer icon-secondary-opacity"
+                  :aria-label="body.team2.link.ariaLabel"
+                  :color="body.team2.link.color"
+                  role="button"
+                  size="1rem"
+                  tabindex="0"
+                  @click="body.team2.link.onClick"
+                />
+              </div>
+              <span class="text-body-xxs text-description">{{
+                body.team2.record
+              }}</span>
+            </div>
+          </div>
+        </div>
+        <!-- Team 2 -->
+      </div>
+
+      <!-- action -->
+      <div class="row flex items-center justify-between">
+        <div
+          v-if="fieldLocation"
+          :class="{
+            'q-mb-ba': $screen.isMobile || direction !== 'horizontal',
+            'field-location-desktop':
+              !$screen.isMobile && direction === 'horizontal',
+          }"
+          class="flex items-center field-location no-wrap"
+        >
+          <q-icon
+            class="fa-kit-duotone fa-field-location q-mr-xxs icon-secondary-opacity"
+            size="ba"
+          />
+          <span class="text-body-sm">{{ fieldLocation }}</span>
+        </div>
+
+        <UBtnStd
+          :class="[
+            !$screen.isMobile && direction === 'horizontal' ? '' : 'full-width',
+          ]"
+          :color="body.viewMatchup.color"
+          :label="body.viewMatchup.label"
+          :outline="true"
+          :size="body.viewMatchup.size"
+          @on-click="body.viewMatchup.onClick"
+        />
+      </div>
+    </q-card-section>
+    <!-- Body -->
+  </q-card>
+</template>
+<style lang="sass">
+.u-game-object-std
+  border-radius: $xs
+  box-shadow: none
+  background: $neutral-3
+  padding: $xxs
+
+  .u-game-object-std-header
+   padding: $xxs $xs
+   background: inherit
+   min-height: $lg
+   align-items: center
+
+   .title-text
+    word-break: break-word
+    overflow-wrap: break-word
+
+  .u-game-object-std-body
+    padding: $sm
+    background: white
+    border-radius: $xxs !important
+
+  .secondary-section-chip
+    border: none !important
+    margin: 0 0.5rem 0px 0px !important
+    padding: $xxs
+    .q-icon
+      font-size: $xs
+      margin-right: $xxs
+
+  .replay-watch-chip
+    background-color: #FCEDEE
+    .q-icon
+      color: #CE2129 !important
+    .q-chip__content
+      color: #CE2129
+
+  .completed-replay-watch-chip
+    background-color:  $pink-1
+    .q-icon
+      color: $pink-7
+    .q-chip__content
+      color: $pink-7
+
+  .field-location-desktop
+    max-width: 65%
+    overflow: hidden
+
+  .u-game-object-std-body
+    .team-stats-section
+      display: grid
+      grid-template-columns: 1fr auto 1fr
+
+      .team-stats
+       width: 100%
+       display: flex
+       align-items: center
+       gap: $xs
+
+      .team-stats2
+       display: flex
+       align-items: center
+       gap: $xs
+
+    .logo-section
+     display: flex
+     align-items: center
+     justify-content: center
+     margin: 0 $ba
+     .vs-logo
+       width: 2.8rem
+       height: $md
+
+.u-game-object-std.vertical-view
+  max-width: 100%
+
+  .u-game-object-std-header
+    gap: $xs
+
+  .u-game-object-std-body
+    .team-stats-section
+      display: flex !important
+      flex-direction: column !important
+      gap: $ba
+    .logo-section
+      align-items: start
+      justify-content: unset
+      margin: 0
+</style>

package/src/components/core/UInnerLoader.vue

@@ -0,0 +1,69 @@
+<script setup>
+defineProps({
+  dataTestId: {
+    type: String,
+    default: 'inner-loader',
+  },
+  image: {
+    type: String,
+    required: true,
+  },
+  imageHeight: {
+    type: String,
+    default: '24'
+  },
+  imageWidth: {
+    type: String,
+    default: '95'
+  },
+  loading: {
+    type: Boolean,
+    required: true,
+  },
+  loadingMessage: {
+    type: String,
+    required: true,
+  },
+  spinnerColor: {
+    type: String,
+    required: false,
+  },
+  spinnerSize: {
+    type: String,
+    requried: false,
+    default: '2rem',
+  },
+})
+</script>
+<template>
+  <q-inner-loading
+    v-bind="$attrs"
+    color="primary"
+    :dataTestId="dataTestId"
+    :showing="loading"
+  >
+    <div class="column items-center q-gutter-y-sm">
+      <img
+        class="q-my-none"
+        alt="Loader Image"
+        :height="imageHeight"
+        :src="image"
+        :width="imageWidth"
+      />
+      <div class="row items-center">
+        <div v-if="loadingMessage" class="text-center">
+          <span class="message q-mr-sm">{{ loadingMessage }}</span>
+          <q-spinner-facebook :color="spinnerColor" :size="spinnerSize" />
+        </div>
+      </div>
+    </div>
+  </q-inner-loading>
+</template>
+<style scoped lang="sass">
+.u-loader
+  position: relative
+  height: 100%
+.message
+  color: $dark
+  font-weight: 500
+</style>