@icij/murmur-next 4.0.17 → 4.1.0

package/lib/components/ConfirmButton.vue

@@ -12,6 +12,7 @@
       :model-value="showTooltip"
       :placement="placement"
       :target="uniqComponentId"
+      teleport-to="body"
       manual
     >
       <div class="confirm-button__tooltip">
@@ -148,9 +149,19 @@ export default defineComponent({
       emit('toggled', showTooltip.value)
     }
 
+    function hideConfirmationTooltip(): void {
+      showTooltip.value = false
+      /**
+       * Emitted when the confirmation is toggled.
+       * @event toggled
+       * @param Boolean True if the button is shown.
+       */
+      emit('toggled', false)
+    }
+
     function cancel(): void {
-      // showTooltip.value = false
-      props.cancelled()
+      hideConfirmationTooltip()
+      props.cancelled?.()
       /**
        * Emitted when the confirmation is cancelled.
        * @event cancelled
@@ -159,8 +170,8 @@ export default defineComponent({
     }
 
     function confirm(): void {
-      // showTooltip.value = false
-      props.confirmed()
+      hideConfirmationTooltip()
+      props.confirmed?.()
       /**
        * Emitted when the confirmation is confirmed.
        * @event confirmed

package/lib/components/SignUpForm.vue

@@ -141,11 +141,12 @@ export default defineComponent({
     const variantColorClass = computed(() => {
       return `btn-${props.variant}`
     })
+
     async function subscribe() {
       resetMessages()
       freeze()
       // Send the data, catch the result no matter what and unfreeze the form
-      await send().then(done, done).finally(unfreeze)
+      await send().then(done, error).finally(unfreeze)
     }
 
     function done({ result, msg }: any): void {
@@ -153,18 +154,24 @@ export default defineComponent({
         email.value = ''
         successMessage.value = msg
       } else {
-        // Mailchimp formats errors in list
-        errorMessage.value =
-          last((msg || "Something's wrong").split('0 -')) ?? null
+        error({ msg })
       }
     }
+
+    // Mailchimp formats errors in list
+    function error({ msg }: any): void {
+      errorMessage.value = last((msg || "Something's wrong").split('0 -')) ?? null
+    }
+
     function resetMessages() {
       errorMessage.value = null
       successMessage.value = null
     }
+
     function freeze() {
       frozen.value = true
     }
+
     function unfreeze() {
       frozen.value = false
     }

package/lib/components/TinyPagination.vue

@@ -62,7 +62,7 @@
 
 <script lang="ts">
 import { faAngleLeft, faAngleRight } from '@fortawesome/free-solid-svg-icons'
-import { defineComponent, PropType, ref, computed, onBeforeMount } from 'vue'
+import { defineComponent, PropType, ref, computed, onBeforeMount, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import { library, default as Fa } from './Fa'
@@ -187,6 +187,10 @@ export default defineComponent({
 
     const currentPageInput = ref<number | string>(pageValue.value)
 
+    watch(() => props.modelValue, (value) => {
+      currentPageInput.value = value
+    })
+
     function applyPageForm(): void {
       if (!isNaN(currentPageInput.value as number)) {
         emit('update:modelValue', +currentPageInput.value)

package/lib/composables/chart.ts

@@ -4,14 +4,15 @@ import isObject from 'lodash/isObject'
 import isString from 'lodash/isString'
 import max from 'lodash/max'
 import some from 'lodash/some'
-import { ComponentPublicInstance, computed, onMounted, ref, watch } from 'vue'
+import { ComponentPublicInstance, computed, toRef, toValue, ref, watch, onMounted, nextTick } from 'vue'
 import { isUrl } from '@/utils/strings'
 import { Ref, SetupContext } from '@vue/runtime-core'
 import useResizeObserver from '@/composables/resizeObserver'
-import { watchEffect } from 'vue'
 
 type ChartContext<T extends string[]> = SetupContext<[...T, ...string[]]>
+
 type ChartEmit = Pick<ChartContext<['resized', 'loaded']>, 'emit'>
+
 type ChartProps = {
   chartHeightRatio: { type: NumberConstructor }
   data: {
@@ -28,13 +29,13 @@ type ChartProps = {
   socialModeRatio: { default: number; type: NumberConstructor }
 }
 
-export function getChartProps(props: any): ChartProps {
+export function getChartProps(props: any): any {
   return {
-    chartHeightRatio: props.chartHeightRatio,
-    data: props.data,
-    dataUrlType: props.dataUrlType,
-    socialMode: props.socialMode,
-    socialModeRatio: props.socialModeRatio
+    chartHeightRatio: toRef(props, 'chartHeightRatio'),
+    data: toRef(props, 'data'),
+    dataUrlType: toRef(props, 'dataUrlType'),
+    socialMode: toRef(props, 'socialMode'),
+    socialModeRatio: toRef(props, 'socialModeRatio')
   }
 }
 
@@ -76,10 +77,13 @@ export const chartProps = (): ChartProps => ({
     default: 5 / 4
   }
 })
+
 export const chartEmits = ['resized', 'loaded']
+
 type Chart = {
   dataHasHighlights: any
   loadedData: any
+  mounted: Ref<boolean>,
   xAxisYearFormat: (year: number | string) => number | string
   elementsMaxBBox: ({
     selector,
@@ -93,42 +97,51 @@ type Chart = {
   d3Formatter: any
   baseHeightRatio: any
 }
+
 export function useChart(
   resizableRef: Ref<ComponentPublicInstance<HTMLElement> | null>,
-  props: ChartProps,
+  props: any,
   { emit }: ChartEmit,
   isLoaded: Ref<boolean>,
   onResized?: ()=>void,
   afterLoaded?: () => Promise<any>
 ): Chart {
+
   const { resizeRef, resizeState } = useResizeObserver(resizableRef)
   const loadedData = ref<unknown|unknown[]>([])
+  const mounted = ref<boolean>(false)
+  const dataRef = toRef(props.data)
+  const dataUrlTypeRef = toRef(props.dataUrlType)
+  
+  onMounted(() => {
+    nextTick(() => {
+      mounted.value = true
+    })
+  })
 
-  onMounted(async () => {
+  watch([dataRef, dataUrlTypeRef], async () => { 
     await document.fonts?.ready
+    
+    const data = toValue(dataRef)
+    const dataUrlType = toValue(dataUrlTypeRef)
 
-    watchEffect(async () => {
-      if (!isLoaded.value) {
-        if (isString(props.data)) {
-          // @ts-expect-error introspection in typescript is tricky
-          loadedData.value = await d3[props.dataUrlType](props.data)
-        } else {
-          loadedData.value = props.data as unknown as []
-        }
-
-        if (afterLoaded) {
-          await afterLoaded()
-        }
-        isLoaded.value = true
-        emit('loaded')
-      }
-
-      if (isLoaded.value && onResized) {
-        onResized()
-        emit('resized')
-      }
-    })
-  })
+    if (isString(data)) {
+      // @ts-expect-error introspection in typescript is tricky
+      loadedData.value = await d3[dataUrlType](data)
+    } else {
+      loadedData.value = data as unknown as []
+    }
+
+    await afterLoaded?.()
+    isLoaded.value = true
+    emit('loaded')
+    
+    if (onResized) {
+      onResized()
+      emit('resized')
+    }
+  }, { immediate: true })
+  
   function elementsMaxBBox({
     selector = 'text',
     defaultWidth = null,
@@ -160,9 +173,11 @@ export function useChart(
     // previously using narrowWidth but it is automatically updated through resizeObserver state reactivity
     return resizeState.narrowWidth ? '’' + String(year).slice(2, 4) : year
   }
+
   function highlighted(datum: { highlight: boolean }) {
     return datum.highlight
   }
+
   function d3Formatter(value: any, formatter: any) {
     if (isFunction(formatter)) {
       return formatter(value)
@@ -171,15 +186,18 @@ export function useChart(
     }
     return value
   }
+
   const baseHeightRatio = computed(() => {
-    return (
-      props.chartHeightRatio ||
-      (props.socialMode ? props.socialModeRatio : 9 / 16)
-    )
+    const chartHeightRatio = toValue(props.chartHeightRatio)
+    const socialMode = toValue(props.socialMode)
+    const socialModeRatio = toValue(props.socialModeRatio)
+    return chartHeightRatio || (socialMode ? socialModeRatio : 9 / 16)
   })
+
   const dataHasHighlights = computed(() => {
-    if (Array.isArray(props.data)) {
-      return some(props.data, highlighted)
+    const data = toValue(dataRef)
+    if (Array.isArray(data)) {
+      return some(data, highlighted)
     }
     return false
   })
@@ -193,6 +211,7 @@ export function useChart(
 
   return {
     loadedData,
+    mounted,
     elementsMaxBBox,
     xAxisYearFormat,
     d3Formatter,

package/lib/composables/queryObserver.ts

@@ -0,0 +1,66 @@
+import get from 'lodash/get'
+import first from 'lodash/first'
+
+import { Ref, reactive } from 'vue'
+
+type ElementMap = {
+  [selector: string]: HTMLElement[]
+}
+
+type ObserverMap = {
+  [selector: string]: MutationObserver
+}
+
+export function useQueryObserver(rootRef: Ref<HTMLElement | null>) {
+  const elements = reactive<ElementMap>({})
+  const observers = reactive<ObserverMap>({})
+
+  const hasElements = (selector: string): boolean => {
+    return get(elements, [selector, 'length'], 0) > 0
+  }
+  
+  const hasObserver = (selector: string): boolean => {
+    return selector in observers
+  }
+  
+  const updateElements = (selector: string): HTMLElement[] | null => {
+    // We search for the give selector until element are found
+    if (rootRef.value && !hasElements(selector)) {
+      elements[selector] = Array.from(rootRef.value.querySelectorAll(selector))
+    }
+    return elements[selector] ?? null
+  }
+  
+  const observerCallback = (selector: string) => {
+    return () => {
+      updateElements(selector)
+      if (hasElements(selector)) {
+        observers[selector].disconnect()
+      }
+    }
+  }
+  
+  const observe = (selector: string) =>  {
+    updateElements(selector)
+    // Wait for the root ref to exist and only create the observer once by selector
+    if (rootRef.value && !hasObserver(selector)) {
+      observers[selector] = new MutationObserver(observerCallback(selector))
+      observers[selector].observe(rootRef.value, { childList: true, subtree: true, })
+    }
+    return observers[selector]
+  }
+
+  const querySelector = (selector: string) => {
+    return first(querySelectorAll(selector))
+  }
+
+  const querySelectorAll = (selector: string) => {
+    observe(selector)
+    return get(elements, selector, [])
+  }
+
+  return {
+    querySelector,
+    querySelectorAll,
+  }
+}

package/lib/composables/sendEmail.ts

@@ -13,7 +13,6 @@ export function useSendEmail(
   referrer?: string | null,
   defaultGroups?: string[] | string
 ) {
-  const emailValue = toValue(email)
 
   const groups = computed(() => {
     return flatten(castArray(defaultGroups).map((g) => g.split(',')))
@@ -22,6 +21,7 @@ export function useSendEmail(
   const urlFromAction = computed(() => {
     return action?.replace('/post?', '/post-json?').concat('&c=?')
   })
+
   const parentReferrer = computed(() => {
     if (referrer) {
       return referrer
@@ -36,6 +36,7 @@ export function useSendEmail(
       throw new Error('Missing url Info')
     }
 
+    const emailValue = toValue(email)
     const url = new URL(urlFromAction.value)
     url.searchParams.set('SIGNUP', tracker)
     url.searchParams.set('MMERGE24', parentReferrer.value)
@@ -44,6 +45,7 @@ export function useSendEmail(
 
     return url.href
   })
+
   function send() {
     return new Promise((resolve, reject) => {
       jsonp(

package/lib/datavisualisations/ColumnChart.vue

@@ -19,11 +19,9 @@ type ColumnBar = {
   x: number
   y: number
 }
-//import chart from '../mixins/chart'
 
 export default defineComponent({
   name: 'ColumnChart',
-  //mixins: [chart],
   props: {
     /**
      * Color of each column (uses the CSS variable --column-color by default)
@@ -344,6 +342,9 @@ export default defineComponent({
       if (!el.value) {
         return
       }
+
+      d3.select('.column-chart__axis > *').remove()
+
       d3.select(el.value)
         .select('.column-chart__axis--x')
         .call(xAxis.value as any)
@@ -380,6 +381,7 @@ export default defineComponent({
       height,
       margin,
       padded,
+      isLoaded,
       shownTooltip,
       bars,
       select,
@@ -399,7 +401,8 @@ export default defineComponent({
       'column-chart--has-highlights': dataHasHighlights,
       'column-chart--hover': hover,
       'column-chart--stripped': stripped,
-      'column-chart--social-mode': socialMode
+      'column-chart--social-mode': socialMode,
+      'column-chart--loaded': isLoaded
     }"
     :style="{
       '--column-color': columnColor,
@@ -493,7 +496,7 @@ export default defineComponent({
 
   &__columns__item {
     fill: var(--column-color, var(--dark, $dark));
-
+    
     &--highlight {
       fill: var(--column-highlight-color, var(--primary, $primary));
     }
@@ -529,6 +532,8 @@ export default defineComponent({
     left: 0;
 
     &__item {
+      $tooltip-bg: $body-emphasis-color;
+
       display: inline-flex;
       text-align: center;
       flex-direction: row;
@@ -545,6 +550,7 @@ export default defineComponent({
         color: $tooltip-color;
         margin: 0;
         padding: $tooltip-padding-y $tooltip-padding-x;
+        
         &.fade-enter-active,
         &.fade-leave-active {
           transition: $transition-fade;