@explorer-1/vue 0.2.44 → 0.2.46

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@explorer-1/vue",
-  "version": "0.2.44",
+  "version": "0.2.46",
   "private": false,
   "publishConfig": {
     "access": "public"

package/src/components/BaseButton/BaseButton.vue

@@ -65,16 +65,6 @@ export default defineComponent({
         return 'button'
       }
     },
-    // necessary for valid html
-    // must account for <a>, <nuxt-link>, and <button> use-cases
-    theHref(): string | undefined {
-      if (this.tag === 'nuxt-link') {
-        return this.to as string
-      } else if (this.tag === 'a') {
-        return this.href
-      }
-      return undefined
-    },
     computedTo() {
       let toValue = this.to
       // filter out unnecessary `/home/` prefix from wagtail default site urlPaths
@@ -83,6 +73,17 @@ export default defineComponent({
       }
       return toValue
     },
+    // necessary for valid html
+    // must account for <a>, <nuxt-link>, and <button> use-cases
+    theHref(): string | undefined {
+      let href = undefined
+      if (this.computedTo && typeof this.computedTo === 'string') {
+        href = this.computedTo
+      } else if (this.tag === 'a') {
+        href = this.href
+      }
+      return href
+    },
     variantClass(): string {
       let classes = variants[this.variant]
       if (!this.$slots.default && this.$slots.icon) {

package/src/components/BlockLinkCard/BlockLinkCard.vue

@@ -96,9 +96,15 @@
       >
         {{ theItem.title }}
       </component>
+      <p
+        v-if="(theItem as EventCardObject).targetAudience"
+        :class="{ 'mt-2': !large, 'mt-4': large }"
+      >
+        <strong>Target Audience:</strong> {{ (theItem as EventCardObject).targetAudience }}
+      </p>
       <p
         v-if="theItem.date && !themeStore.isEdu"
-        class="text-gray-mid-dark mt-2"
+        class="text-gray-mid-dark"
         :class="{ 'mt-2': !large, 'mt-4': large }"
       >
         {{ theItem.date }}

package/src/components/SearchFilterGroup/SearchFilterGroup.vue

@@ -1,11 +1,6 @@
 <template>
   <div
-    v-if="
-      typeof groupKey !== 'undefined' &&
-      typeof buckets !== 'undefined' &&
-      bucketsLength >= 1 &&
-      !hideFilterGroups.includes(groupKey)
-    "
+    v-if="showFilterGroup"
     :id="`filterGroup_${groupKey}`"
     class="border-gray-light-mid col-span-3 pb-4 mb-4 border-b"
   >
@@ -13,7 +8,10 @@
     <legend class="md:mb-3 text-body-md mb-2 font-bold leading-normal tracking-wide">
       {{ groupTitle }}
     </legend>
-    <div class="buckets">
+    <div
+      v-if="buckets?.length"
+      class="buckets"
+    >
       <div
         v-for="(bucket, index) in buckets"
         :key="bucket.key"
@@ -43,6 +41,7 @@
         </div>
       </div>
     </div>
+    <div v-else><span class="text-sm text-gray-mid-dark">No matching filters</span></div>
     <!--
       TODO: this logic could probably cleaner. It flows in the opposite way of the loop
       for making checkboxes above.
@@ -116,6 +115,18 @@ export default {
     },
     bucketsLength() {
       return this.buckets.length
+    },
+    showFilterGroup() {
+      if (this.themeStore.isEdu) {
+        return this.groupTitle && !this.hideFilterGroups.includes(this.groupKey)
+      } else {
+        return (
+          typeof this.groupKey !== 'undefined' &&
+          typeof this.buckets !== 'undefined' &&
+          this.bucketsLength >= 1 &&
+          !this.hideFilterGroups.includes(this.groupKey)
+        )
+      }
     }
   },
   watch: {

package/src/components/SearchResultCard/SearchResultCard.vue

@@ -24,7 +24,8 @@
           ongoing,
           primarySubject,
           gradeLevels,
-          time
+          time,
+          targetAudience
         }
       }"
       show-calendar-chip
@@ -343,6 +344,10 @@ export default defineComponent({
       type: Boolean,
       default: false
     },
+    targetAudience: {
+      type: String,
+      default: undefined
+    },
     primarySubject: {
       type: Object as PropType<PrimarySubjectObject>,
       default: undefined

package/src/components/SearchResultGridItem/SearchResultGridItem.vue

@@ -21,7 +21,8 @@
           ongoing,
           primarySubject,
           gradeLevels,
-          time
+          time,
+          targetAudience
         }
       }"
       :heading-level="headingLevel"
@@ -174,6 +175,10 @@ export default defineComponent({
       type: Boolean,
       default: false
     },
+    targetAudience: {
+      type: String,
+      default: undefined
+    },
     location: {
       type: String,
       default: undefined

package/src/components/SearchResultsList/SearchResultsList.vue

@@ -30,6 +30,7 @@
           :end-time="page.endTime"
           :event-type="page.eventType"
           :ongoing="page.ongoing"
+          :target-audience="page.targetAudience"
           :location="page.location"
           :primary-subject="page.primarySubject as unknown as PrimarySubjectObject"
           :grade-levels="page.gradeLevels as unknown as GradeLevelsObject[]"
@@ -55,6 +56,7 @@
           :end-time="page.endTime"
           :event-type="page.eventType"
           :ongoing="page.ongoing"
+          :target-audience="page.targetAudience"
           :location="page.location"
           :primary-subject="page.primarySubject as unknown as PrimarySubjectObject"
           :grade-levels="page.gradeLevels as unknown as GradeLevelsObject[]"
@@ -216,6 +218,10 @@ export default defineComponent({
                 handle === 'edu_events_edueventpage'
                   ? page._source.edu_events_edueventpage__ongoing
                   : undefined
+              page.targetAudience =
+                handle === 'edu_events_edueventpage'
+                  ? page._source.edu_events_edueventpage__target_audience
+                  : undefined
               // edu resources
               page.gradeLevels = gradeLevels
               page.time = time

package/src/interfaces.ts

@@ -93,8 +93,9 @@ export interface ElasticSearchPage {
   eventType?: string
   ongoing?: boolean
   primarySubject?: string
-  gradeLevels: string
-  time: string
+  gradeLevels?: string
+  time?: string
+  targetAudience?: string
 }
 
 export interface FormOption {
@@ -136,6 +137,7 @@ export interface EventCardObject extends Card {
   locationName?: string
   location?: string
   locationLink?: string
+  targetAudience?: string
 }
 
 export interface PrimarySubjectObject {

package/src/templates/edu/PageEduLesson/PageEduLesson.stories.js

@@ -152,7 +152,7 @@ export const BaseStory = {
         }
       ],
 
-      overview: BlockStreamfieldMinimalData.body,
+      overview: [],
       overviewHeading: 'Custom Overview heading',
       overviewImage: BlockImageData.image,
 

package/src/templates/edu/PageEduLesson/PageEduLesson.vue

@@ -130,13 +130,16 @@ const sectionOrder = [
 const staticSectionHeadings = computed((): { [key: string]: BlockHeadingObject } | undefined => {
   if (data) {
     const result = sectionOrder.reduce<Record<string, BlockHeadingObject>>((acc, section) => {
-      const headingText =
-        section === 'techAddons'
-          ? 'Tech Add-ons'
-          : section.charAt(0).toUpperCase() + section.slice(1)
-      acc[section] = stringAsHeadingBlockData(
-        (data[`${section}Heading`] as HeadingLevel) || headingText
-      )
+      // only include the heading if the section has content
+      if (data[section]?.length) {
+        const headingText =
+          section === 'techAddons'
+            ? 'Tech Add-ons'
+            : section.charAt(0).toUpperCase() + section.slice(1)
+        acc[section] = stringAsHeadingBlockData(
+          (data[`${section}Heading`] as HeadingLevel) || headingText
+        )
+      }
       return acc
     }, {})
     return result
@@ -243,7 +246,7 @@ const consolidatedSections = computed((): EduLessonSectionObject[] => {
     sections.push({ type: 'streamfield', blocks: keyedCustomSections.value['bottom'] })
   }
   const filteredSections = sections.filter(
-    (item) => item.text !== undefined || item.blocks !== undefined || item.procedures !== undefined
+    (item) => item.text || item.blocks?.length || item.procedures?.length
   )
 
   return filteredSections
@@ -335,20 +338,18 @@ const consolidatedSections = computed((): EduLessonSectionObject[] => {
       v-for="(value, _key) in consolidatedSections"
       :key="_key"
     >
-      <template v-if="value.blocks?.length || value.procedures?.length || value.text?.length">
-        <BlockStreamfield
-          v-if="value.type === 'streamfield'"
-          :data="value.blocks"
-        />
-        <PageEduLessonSection
-          v-else
-          :heading="value.heading"
-          :blocks="value.blocks"
-          :procedures="value.procedures"
-          :text="value.text"
-          :image="value.image"
-        />
-      </template>
+      <BlockStreamfield
+        v-if="value.type === 'streamfield'"
+        :data="value.blocks"
+      />
+      <PageEduLessonSection
+        v-else
+        :heading="value.heading"
+        :blocks="value.blocks"
+        :procedures="value.procedures"
+        :text="value.text"
+        :image="value.image"
+      />
     </template>
 
     <!-- streamfield blocks -->

package/src/utils/generateHash.ts

@@ -0,0 +1,9 @@
+export function generateHash(str: string): number {
+  let hash = 0
+  for (let i = 0, len = str.length; i < len; i++) {
+    let chr = str.charCodeAt(i)
+    hash = (hash << 5) - hash + chr
+    hash |= 0 // Convert to 32bit integer
+  }
+  return hash
+}