@usssa/component-library 1.0.0-alpha.240 → 1.0.0-alpha.241

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usssa/component-library",
-  "version": "1.0.0-alpha.240",
+  "version": "1.0.0-alpha.241",
   "description": "A Quasar component library project",
   "productName": "Quasar component library App",
   "author": "Engineering Team <engineering@usssa.com>",
@@ -38,12 +38,13 @@
     "@quasar/extras": "^1.16.4",
     "@usssa/core-client": "^0.0.19",
     "algoliasearch": "4",
+    "d3": "^7.9.0",
     "flag-icons": "^7.2.3",
     "heic2any": "^0.0.4",
     "quasar": "^2.16.0",
     "vue": "^3.4.18",
     "vue-router": "^4.0.12",
-    "d3": "^7.9.0"
+    "vue3-google-map": "^0.25.0"
   },
   "devDependencies": {
     "@quasar/app-vite": "^1.9.0",

package/src/components/core/UVenueCard.vue

@@ -0,0 +1,167 @@
+<script setup>
+import { AdvancedMarker, GoogleMap } from 'vue3-google-map'
+import { computed, onMounted, ref } from 'vue'
+import UBtnStd from './UBtnStd.vue'
+import UChip from './UChip.vue'
+import { useScreenType } from '../../composables/useScreenType'
+
+const props = defineProps({
+  address: {
+    default: '',
+    type: String,
+  },
+  dataTestId: {
+    type: String,
+    default: 'u-venue-card',
+  },
+  divisionLabel: {
+    default: '',
+    type: String,
+  },
+  divisions: {
+    default: () => [],
+    type: Array,
+  },
+  lat: {
+    default: 0,
+    type: Number,
+  },
+  lng: {
+    default: 0,
+    type: Number,
+  },
+  venueMapBtnLabel: {
+    default: 'Open in Map',
+    type: String,
+  },
+  venueName: {
+    default: '',
+    type: String,
+  },
+  zoom: {
+    default: 14,
+    type: Number,
+  },
+})
+
+const googleApiKey = process.env.GOOGLE_MAP_API_KEY
+
+const $screen = useScreenType()
+
+const chip = ref(true)
+
+const mapUrl = computed(() => {
+  const encodedName = encodeURIComponent(props.venueName)
+  const latLng = `${props.lat},${props.lng}`
+
+  if ($screen.value.isMobile) {
+    return `https://www.google.com/maps/dir/?api=1&destination=${latLng}`
+  } else {
+    return `https://www.google.com/maps/search/?api=1&query=${encodedName}%20(${latLng})`
+  }
+})
+
+const handleMapBtn = () => {
+  const isMobile = $screen.value.isMobile
+
+  if (isMobile) {
+    window.location.href = mapUrl.value
+  } else {
+    window.open(mapUrl.value, '_blank', 'noopener,noreferrer')
+  }
+}
+</script>
+
+<template>
+  <q-card v-bind="$attrs" class="u-venue-card full-width">
+    <q-card-section class="u-venue-card-header col">
+      <span class="text-heading-xxs q-mb-0">{{ venueName }}</span>
+      <span class="text-body-xs text-description">{{ address }}</span>
+    </q-card-section>
+
+    <q-card-section class="u-venue-card-body">
+      <GoogleMap
+        :api-key="googleApiKey"
+        :center="{ lat, lng }"
+        :clickable-icons="false"
+        :disable-default-u-i="true"
+        :fullscreen-control="false"
+        :gesture-handling="'none'"
+        :keyboard-shortcuts="false"
+        mapId="roadmap"
+        :map-type-control="false"
+        :street-view-control="false"
+        style="width: 100%; height: 7.25rem"
+        :zoom="zoom"
+        :zoom-control="false"
+      >
+        <AdvancedMarker :options="{ position: { lat, lng } }" />
+      </GoogleMap>
+
+      <UBtnStd
+        class="u-venue-card-map-btn"
+        :aria-label="venueMapBtnLabel"
+        color="primary"
+        :label="venueMapBtnLabel"
+        size="sm"
+        @click="handleMapBtn"
+      />
+    </q-card-section>
+
+    <q-card-section class="u-venue-card-footer">
+      <span class="text-body-sm">{{ divisionLabel }}</span>
+      <div class="width-full chip-container">
+        <UChip
+          v-for="(item, index) in divisions"
+          v-model="chip"
+          :chip-label="item.label"
+          dense
+          :key="index"
+          :removable="false"
+        />
+      </div>
+    </q-card-section>
+  </q-card>
+</template>
+
+<style lang="sass">
+.u-venue-card
+  display: flex
+  flex-direction: column
+  border-radius: $xs
+  box-shadow: none
+  padding: $ba
+  border: 1px solid $neutral-4
+  gap: $ba
+
+  .u-venue-card-header
+    display: flex
+    flex-direction: column
+    padding: 0
+
+  .u-venue-card-body
+    padding: 0
+    height: 7.25rem
+    background: $neutral-4
+    border-radius: $xs !important
+    position: relative
+    overflow: hidden
+
+    .u-venue-card-map-btn
+      position: absolute
+      bottom: $ba
+      right: $ba
+
+  .u-venue-card-footer
+    gap: $xs
+    padding: 0
+
+  .chip-container
+    display: flex
+    gap: $xs
+    margin-top: $xs
+    flex-wrap: wrap
+
+    .q-chip
+      margin: 0 !important
+</style>

package/src/components/index.js

@@ -44,6 +44,7 @@ import UToolbar from './core/UToolbar/UToolbar.vue'
 import UTooltip from './core/UTooltip.vue'
 import UTypeahead from './core/UTypeahead.vue'
 import UUploader from './core/UUploader.vue'
+import UVenueCard from './core/UVenueCard.vue'
 
 import { useNotify } from '../composables/useNotify.js'
 import { useOverlayLoader } from '../composables/useOverlayLoader.js'
@@ -99,4 +100,5 @@ export {
   UTooltip,
   UTypeahead,
   UUploader,
+  UVenueCard
 }