@asd20/ui-next 1.0.10 → 2.0.0

package/src/components/templates/Asd20SchoolHomeVideoTemplate/index.vue

@@ -96,8 +96,18 @@
             <client-only>
               <Asd20AiSearch
                 class="ai-search"
+                :pages="searchPages"
+                :files="searchFiles"
+                :groups="searchGroups"
+                :include-district-results="includeDistrictResults"
+                :search-language-code="searchLanguageCode"
+                :query-pages-handler="queryPagesHandler"
+                :query-files-handler="queryFilesHandler"
+                :query-groups-handler="queryGroupsHandler"
+                :query-ai-site-handler="queryAiSiteHandler"
                 :organization="organization"
                 :organization-options="organizationOptions"
+                :ai-search-feedback-form-url="aiSearchFeedbackFormUrl"
               />
             </client-only>
 
@@ -221,6 +231,16 @@ export default {
   mixins: [pageTemplateMixin],
   props: {
     languageCode: { type: String, default: 'en' },
+    searchPages: { type: Array, default: () => [] },
+    searchFiles: { type: Array, default: () => [] },
+    searchGroups: { type: Array, default: () => [] },
+    includeDistrictResults: { type: Boolean, default: true },
+    searchLanguageCode: { type: String, default: null },
+    queryPagesHandler: { type: Function, default: null },
+    queryFilesHandler: { type: Function, default: null },
+    queryGroupsHandler: { type: Function, default: null },
+    queryAiSiteHandler: { type: Function, default: null },
+    aiSearchFeedbackFormUrl: { type: String, default: '' },
   },
   computed: {
     blockEvent() {

package/src/components/templates/Asd20SearchAppTemplate/index.vue

@@ -4,8 +4,8 @@
       <slot name="toolbar-start"></slot>
       <asd20-search-field
         v-if="searchable"
-        :value="keywords"
-        @input="$emit('update:keywords', $event)"
+        :model-value="keywords"
+        @update:modelValue="$emit('update:keywords', $event)"
       />
       <asd20-button
         v-if="$slots.filters && (mq === 'sm' || mq === 'md')"
@@ -24,9 +24,9 @@
       <slot name="toolbar-end"></slot>
     </div>
 
-    <mq-layout
+    <div
+      v-if="isDesktopMq"
       class="asd20-search-app-template__desktop-layout"
-      mq="lg+"
     >
       <aside v-if="$slots.filters || $slots.aside">
         <h2 v-if="$slots.filters">
@@ -59,10 +59,10 @@
       <main v-if="$slots.results">
         <slot name="results" />
       </main>
-    </mq-layout>
+    </div>
 
-    <mq-layout
-      :mq="['sm', 'md']"
+    <div
+      v-if="isMobileMq"
       class="asd20-search-app-template__mobile-layout"
     >
       <asd20-modal
@@ -96,19 +96,19 @@
       </asd20-modal>
 
       <slot name="results" />
-    </mq-layout>
+    </div>
   </div>
 </template>
 
 <script>
 import responsiveBreakpointMixin from '../../../mixins/responsiveBreakpointMixin'
+import { matchesMqQuery } from '../../../utils/responsive-mq'
 import Asd20Viewport from '../../atoms/Asd20Viewport'
 import Asd20Modal from '../../molecules/Asd20Modal'
 import Asd20SearchField from '../../molecules/Asd20SearchField'
 import Asd20Badge from '../../atoms/Asd20Badge'
 import Asd20Icon from '../../atoms/Asd20Icon'
 import Asd20Button from '../../atoms/Asd20Button'
-import MqLayout from '../../utils/MqLayout'
 
 export default {
   name: 'Asd20SearchAppTemplate',
@@ -119,7 +119,6 @@ export default {
     Asd20Badge,
     Asd20Icon,
     Asd20Button,
-    MqLayout,
   },
   mixins: [responsiveBreakpointMixin],
 
@@ -135,6 +134,14 @@ export default {
   data: () => ({
     filtersOpen: false,
   }),
+  computed: {
+    isDesktopMq() {
+      return matchesMqQuery(this.mq, 'lg+')
+    },
+    isMobileMq() {
+      return matchesMqQuery(this.mq, ['sm', 'md'])
+    },
+  },
 
   methods: {
     clearFilters() {

package/src/components/utils/FocusTrap.vue

@@ -10,7 +10,6 @@
 
 <script>
 import { createFocusTrap } from 'focus-trap'
-import createLegacyDestroyHooks from '../../utils/createLegacyDestroyHooks'
 
 export default {
   name: 'FocusTrap',
@@ -53,9 +52,9 @@ export default {
       this.syncTrapState()
     })
   },
-  ...createLegacyDestroyHooks(function() {
+  beforeUnmount() {
     this.disposeTrap()
-  }),
+  },
   methods: {
     syncTrapState() {
       if (!this.trap) return

package/src/components/utils/Intersect.vue

@@ -8,7 +8,6 @@
 </template>
 
 <script>
-import createLegacyDestroyHooks from '../../utils/createLegacyDestroyHooks'
 
 export default {
   name: 'Intersect',
@@ -29,9 +28,9 @@ export default {
   updated() {
     this.refreshObserver()
   },
-  ...createLegacyDestroyHooks(function() {
+  beforeUnmount() {
     this.resetObserver()
-  }),
+  },
   methods: {
     getTarget() {
       const root = this.$refs.root

package/src/components/utils/MqLayout.vue

@@ -9,7 +9,6 @@
 
 <script>
 import { DEFAULT_MQ, getResponsiveMq, matchesMqQuery } from '../../utils/responsive-mq'
-import createLegacyDestroyHooks from '../../utils/createLegacyDestroyHooks'
 
 export default {
   name: 'MqLayout',
@@ -43,10 +42,10 @@ export default {
     if (typeof window === 'undefined') return
     window.addEventListener('resize', this.updateMq)
   },
-  ...createLegacyDestroyHooks(function() {
+  beforeUnmount() {
     if (typeof window === 'undefined') return
     window.removeEventListener('resize', this.updateMq)
-  }),
+  },
 
   methods: {
     updateMq() {

package/src/components/utils/Multiselect.vue

@@ -128,7 +128,6 @@
 </template>
 
 <script>
-import createLegacyDestroyHooks from '../../utils/createLegacyDestroyHooks'
 
 function normalizeOption(option, optionLabel, trackBy) {
   if (option && typeof option === 'object') return option
@@ -263,9 +262,9 @@ export default {
       document.addEventListener('mousedown', this.handleDocumentMouseDown)
     }
   },
-  ...createLegacyDestroyHooks(function() {
+  beforeUnmount() {
     this.removeDocumentListener()
-  }),
+  },
   methods: {
     getOptionKey(option) {
       const normalized = normalizeOption(option, this.label, this.trackBy)

package/src/components/utils/Recaptcha.vue

@@ -12,7 +12,6 @@
 </template>
 
 <script>
-import createLegacyDestroyHooks from '../../utils/createLegacyDestroyHooks'
 
 const RECAPTCHA_SCRIPT_ID = 'asd20-recaptcha-script'
 const RECAPTCHA_SCRIPT_SRC =
@@ -92,9 +91,9 @@ export default {
   mounted() {
     if (this.loadRecaptchaScript) this.ensureWidget()
   },
-  ...createLegacyDestroyHooks(function() {
+  beforeUnmount() {
     this.reset()
-  }),
+  },
   methods: {
     async getRecaptcha() {
       if (!isBrowser()) return null

package/src/directives/lazy-image.js

@@ -48,14 +48,16 @@ function mountLazyImage(el, binding = {}) {
   }
 
   el.setAttribute('src', TRANSPARENT_PIXEL)
-  el.__lazyImageObserver = new window.IntersectionObserver(
+  const observer = new window.IntersectionObserver(
     entries => {
+      if (el.__lazyImageObserver !== observer) return
       if (!entries.some(entry => entry.isIntersecting)) return
       loadLazyImage(el)
     },
     { rootMargin: '200px 0px' }
   )
-  el.__lazyImageObserver.observe(el)
+  el.__lazyImageObserver = observer
+  observer.observe(el)
 }
 
 export default {

package/src/helpers/mapPageQueryResultToPageTemplateProps.js

@@ -331,7 +331,7 @@ export default function mapPageQueryResultToPageTemplateProps(queryResult) {
 // In the comm-center project look at
 // /packages/configurations/helpers/*
 
-// TODO: Eventually move this function into a seperate package
+// TODO: Eventually move this function into a separate package
 // Make this package a part of the comm-center project or ui project
 // e.g. /packages/template-utilities
-// Possible you could combine the configurations packages, or create a seperate package
+// Possible you could combine the configurations packages, or create a separate package

package/src/mixins/globalPropMixinFactory.js

@@ -1,37 +1,80 @@
 // pass a variable, the prop options as it would be defined in vue, and optionally the store module, which will become a module named for convenience in the store.
 
+function hyphenate(value) {
+  return value.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase()
+}
+
+function resolvePropDefault(propOptions = {}) {
+  const defaultValue = propOptions.default
+  if (typeof defaultValue === 'function' && propOptions.type !== Function) {
+    return defaultValue()
+  }
+  return defaultValue
+}
+
+function hasIncomingProp(vm, propName) {
+  const rawProps = vm && vm.$ && vm.$.vnode && vm.$.vnode.props
+  if (!rawProps) return false
+
+  return (
+    Object.prototype.hasOwnProperty.call(rawProps, propName) ||
+    Object.prototype.hasOwnProperty.call(rawProps, hyphenate(propName))
+  )
+}
+
 export default function(variableName, propOptions, storeModuleName) {
   const pascalCaseName = variableName[0].toUpperCase() + variableName.slice(1)
   const resolvedName = `resolved${pascalCaseName}`
+  const localStateName = `local${pascalCaseName}`
   let mixin = { props: {}, computed: {}, methods: {} }
   mixin.props[variableName] = propOptions
+  mixin.data = function() {
+    return {
+      [localStateName]: resolvePropDefault(propOptions),
+    }
+  }
   // Returns a computed alias that resolves from the store when available,
   // otherwise falling back to the local prop value.
   mixin.computed[resolvedName] = {
     get() {
+      if (hasIncomingProp(this, variableName)) {
+        return this[variableName]
+      }
+
       try {
-        return storeModuleName
+        const storeValue = storeModuleName
           ? this.$store['state'][storeModuleName][variableName]
           : this.$store.state[variableName]
+        return storeValue !== undefined ? storeValue : this[localStateName]
       } catch {
-        return this[variableName]
+        return this[localStateName]
       }
     },
     // emit an update event and value and call method to set value in store.
     set(value) {
       this.$emit(`update:${variableName}`, value)
+
+      if (hasIncomingProp(this, variableName)) {
+        return
+      }
+
       try {
-        this[`set${pascalCaseName}`](value)
+        if (this[`set${pascalCaseName}`](value)) return
       } catch {
         // throw away
       }
+
+      this[localStateName] = value
     },
   }
   mixin.methods[`set${pascalCaseName}`] = function(value) {
+    if (!this.$store || typeof this.$store.dispatch !== 'function') return false
+
     this.$store.dispatch(
       `${storeModuleName ? storeModuleName + '/' : ''}set${pascalCaseName}`,
       value
     )
+    return true
   }
   return mixin
 }

package/src/mixins/hasLoaderMixin.js

@@ -1,7 +1,21 @@
+function hasIncomingProp(vm, propName) {
+  const rawProps = vm && vm.$ && vm.$.vnode && vm.$.vnode.props
+  if (!rawProps) return false
+
+  return (
+    Object.prototype.hasOwnProperty.call(rawProps, propName) ||
+    Object.prototype.hasOwnProperty.call(rawProps, 'is-loading')
+  )
+}
+
 export default function(variableName, storeModuleName) {
   let mixin = { props: {}, computed: {} }
   mixin.props.isLoading = { type: Boolean, default: false }
   mixin.computed[`_${variableName}`] = function() {
+    if (hasIncomingProp(this, 'isLoading')) {
+      return this.isLoading
+    }
+
     if (
       storeModuleName &&
       this.$store &&

package/src/mixins/inputComponentMixin.js

@@ -15,8 +15,7 @@ function omitKeys(source, keys) {
 export default {
   inheritAttrs: false,
   props: {
-    value: { default: '' },
-    modelValue: { default: undefined },
+    modelValue: { default: '' },
     label: { type: String, default: '' },
     hideLabel: { type: Boolean, default: false },
     helpText: { type: String, default: '' },
@@ -89,7 +88,7 @@ export default {
       return this.validationErrors.length === 0
     },
     resolvedValue() {
-      return this.modelValue !== undefined ? this.modelValue : this.value
+      return this.modelValue
     },
 
     computedId() {
@@ -133,9 +132,6 @@ export default {
     inputAttrs() {
       return omitKeys(this.$attrs, INPUT_MODEL_LISTENER_KEYS)
     },
-    legacyListeners() {
-      return omitKeys(this.$options._parentListeners || {}, ['input'])
-    },
   },
   watch: {
     resolvedValue(value) {
@@ -192,7 +188,6 @@ export default {
     input(event) {
       this.isDirty = true
       this.validate(event.target.value)
-      this.$emit('input', event.target.value)
       this.$emit('update:modelValue', event.target.value)
     },
   },

package/src/mixins/responsiveBreakpointMixin.js

@@ -1,5 +1,4 @@
 import { DEFAULT_MQ, getResponsiveMq } from '../utils/responsive-mq'
-import createLegacyDestroyHooks from '../utils/createLegacyDestroyHooks'
 
 export default {
   data: () => ({
@@ -20,10 +19,10 @@ export default {
     if (typeof window === 'undefined') return
     window.addEventListener('resize', this.updateResponsiveMq)
   },
-  ...createLegacyDestroyHooks(function() {
+  beforeUnmount() {
     if (typeof window === 'undefined') return
     window.removeEventListener('resize', this.updateResponsiveMq)
-  }),
+  },
 
   methods: {
     updateResponsiveMq() {

package/src/utils/createLegacyDestroyHooks.js

@@ -1,10 +0,0 @@
-export default function createLegacyDestroyHooks(cleanup) {
-  return {
-    beforeDestroy() {
-      cleanup.call(this)
-    },
-    beforeUnmount() {
-      cleanup.call(this)
-    },
-  }
-}