@usssa/component-library 1.0.0-alpha.21 → 1.0.0-alpha.211

package/src/components/core/UGameObject.vue

@@ -0,0 +1,441 @@
+<script setup>
+import { ref } from "vue";
+import UAvatar from "./UAvatar.vue";
+import UBtnStd from "./UBtnStd.vue";
+import { useScreenType } from "../../composables/useScreenType";
+
+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
+    :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),
+            ]"
+            style="margin: 0 0.5rem 0px 0px !important"
+          >
+            {{ 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"
+            style="margin: 0 0 0 0.5rem !important"
+          >
+            {{ 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"
+                  size="1rem"
+                  tabindex="1"
+                  @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="`${vsLogo}`" />
+        </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"
+                  size="1rem"
+                  tabindex="1"
+                  @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="[
+            'flex items-center',
+            'field-location',
+            'no-wrap',
+            !$screen.isMobile && direction === 'horizontal' ? '' : 'q-mb-ba',
+          ]"
+        >
+          <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
+    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
+
+  .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: 20.125rem
+
+  .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>