@icij/murmur-next 4.0.0 → 4.0.3

package/lib/components/SharingOptions.vue

@@ -1,16 +1,23 @@
 <script lang="ts">
 import get from 'lodash/get'
 import reduce from 'lodash/reduce'
-import {faCode} from '@fortawesome/free-solid-svg-icons/faCode'
-import {computed, CSSProperties, defineComponent, onBeforeMount, PropType, ref} from 'vue'
+import { faCode } from '@fortawesome/free-solid-svg-icons/faCode'
+import {
+  computed,
+  CSSProperties,
+  defineComponent,
+  onBeforeMount,
+  PropType,
+  ref
+} from 'vue'
 
-import {default as Fa, library} from './Fa'
+import { default as Fa, library } from './Fa'
 
 import EmbedForm from '@/components/EmbedForm.vue'
 import SharingOptionsLink from '@/components/SharingOptionsLink.vue'
 import config from '@/config'
 import IframeResizer from '@/utils/iframe-resizer'
-import {BModal, useModal} from "bootstrap-vue-next";
+import { BModal, useModal } from 'bootstrap-vue-next'
 
 type MetaValuesMap = {
   url: string
@@ -40,7 +47,9 @@ export default defineComponent({
      */
     url: {
       type: String,
-      default: () => config.get('sharing-options.url', null) || IframeResizer.deletePymParams()
+      default: () =>
+        config.get('sharing-options.url', null) ||
+        IframeResizer.deletePymParams()
     },
     /**
      * URL to use specifically with the embed form
@@ -56,7 +65,10 @@ export default defineComponent({
     direction: {
       default: 'row',
       validator(value: string) {
-        return ['row', 'row-reverse', 'column', 'column-reverse'].indexOf(value) !== -1
+        return (
+          ['row', 'row-reverse', 'column', 'column-reverse'].indexOf(value) !==
+          -1
+        )
       }
     },
     /**
@@ -102,13 +114,12 @@ export default defineComponent({
     }
   },
   setup(props) {
-
     onBeforeMount(() => {
       library.add(faCode)
     })
 
     const embedForm = ref(null)
-    const {show} = useModal("embedForm")
+    const { show } = useModal('embedForm')
     const style = computed((): CSSProperties => {
       return {
         'flex-direction': props.direction
@@ -117,26 +128,44 @@ export default defineComponent({
 
     const metaValues = computed((): MetaValuesMap => {
       return {
-        url: props.url ?? "",
+        url: props.url ?? '',
         title: defaultValueFor('sharing-options.title'),
-        description: defaultValueFor('sharing-options.description', 'meta[name="description]'),
-        facebook_title: defaultValueFor('sharing-options.facebook_title', 'meta[property="og:title"]'),
-        facebook_description: defaultValueFor('sharing-options.description', 'meta[property="og:description"]'),
-        facebook_media: defaultValueFor('sharing-options.media', 'meta[property="og:image"]'),
-        twitter_media: defaultValueFor('sharing-options.media', 'meta[name="twitter:image"]'),
-        twitter_user: defaultValueFor('sharing-options.twitter-user', 'meta[name="twitter:site"]')
+        description: defaultValueFor(
+          'sharing-options.description',
+          'meta[name="description]'
+        ),
+        facebook_title: defaultValueFor(
+          'sharing-options.facebook_title',
+          'meta[property="og:title"]'
+        ),
+        facebook_description: defaultValueFor(
+          'sharing-options.description',
+          'meta[property="og:description"]'
+        ),
+        facebook_media: defaultValueFor(
+          'sharing-options.media',
+          'meta[property="og:image"]'
+        ),
+        twitter_media: defaultValueFor(
+          'sharing-options.media',
+          'meta[name="twitter:image"]'
+        ),
+        twitter_user: defaultValueFor(
+          'sharing-options.twitter-user',
+          'meta[name="twitter:site"]'
+        )
       }
     })
 
     function valuesFor(network: string): { [key: string]: string } {
       const values = Object.assign(metaValues.value, props.values)
       return reduce(
-          props.valuesKeys,
-          (res: { [name: string]: string }, key) => {
-            res[key] = get(values, `${network}_${key}`, values[key])
-            return res
-          },
-          {}
+        props.valuesKeys,
+        (res: { [name: string]: string }, key) => {
+          res[key] = get(values, `${network}_${key}`, values[key])
+          return res
+        },
+        {}
       )
     }
 
@@ -144,7 +173,11 @@ export default defineComponent({
       if (props.noMeta || !metaSelector) {
         return config.get(key)
       }
-      return get(document.head.querySelector(metaSelector), 'content', config.get(key))
+      return get(
+        document.head.querySelector(metaSelector),
+        'content',
+        config.get(key)
+      )
     }
 
     return {
@@ -153,30 +186,54 @@ export default defineComponent({
       embedForm,
       valuesFor
     }
-
-  },
+  }
 })
 </script>
 
 <template>
   <div :style="style" class="sharing-options">
-    <sharing-options-link class="sharing-options__link" network="facebook" v-bind="valuesFor('facebook')"/>
-    <sharing-options-link class="sharing-options__link" network="twitter" v-bind="valuesFor('twitter')"/>
-    <sharing-options-link class="sharing-options__link" network="linkedin" v-bind="valuesFor('linkedin')"/>
-    <sharing-options-link class="sharing-options__link" network="email" v-bind="valuesFor('email')"/>
-    <div v-show="!noEmbed" class="sharing-options__link sharing-options__link--embed">
+    <sharing-options-link
+      class="sharing-options__link"
+      network="facebook"
+      v-bind="valuesFor('facebook')"
+    />
+    <sharing-options-link
+      class="sharing-options__link"
+      network="twitter"
+      v-bind="valuesFor('twitter')"
+    />
+    <sharing-options-link
+      class="sharing-options__link"
+      network="linkedin"
+      v-bind="valuesFor('linkedin')"
+    />
+    <sharing-options-link
+      class="sharing-options__link"
+      network="email"
+      v-bind="valuesFor('email')"
+    />
+    <div
+      v-show="!noEmbed"
+      class="sharing-options__link sharing-options__link--embed"
+    >
       <a @click="show">
-        <fa icon="code"/>
+        <fa icon="code" />
         <span class="sr-only">Embed</span>
       </a>
     </div>
-    <b-modal id="embedForm" ref="embedForm" class="text-dark" hide-footer title="Embed on your website">
+    <b-modal
+      id="embedForm"
+      ref="embedForm"
+      class="text-dark"
+      hide-footer
+      title="Embed on your website"
+    >
       <embed-form
-          :min-height="iframeMinHeight"
-          :min-width="iframeMinWidth"
-          :url="embedUrl || url"
-          no-preview
-          no-title
+        :min-height="iframeMinHeight"
+        :min-width="iframeMinWidth"
+        :url="embedUrl || url"
+        no-preview
+        no-title
       />
     </b-modal>
   </div>

package/lib/components/SharingOptionsLink.vue

@@ -7,7 +7,7 @@ import { faEnvelope } from '@fortawesome/free-solid-svg-icons/faEnvelope'
 import { faTwitter } from '@fortawesome/free-brands-svg-icons/faTwitter'
 import { faFacebook } from '@fortawesome/free-brands-svg-icons/faFacebook'
 import { faLinkedin } from '@fortawesome/free-brands-svg-icons/faLinkedin'
-import { h, defineComponent, PropType, VNode} from 'vue'
+import { h, defineComponent, PropType, VNode } from 'vue'
 import { IconDefinition } from '@fortawesome/fontawesome-svg-core'
 
 import Fa from './Fa'
@@ -221,12 +221,16 @@ export default defineComponent({
     renderIcon(): void | VNode | null {
       if (!this.noIcon) {
         //@ts-ignore
-        return h( Fa, {icon: this.icon})
+        return h(Fa, { icon: this.icon })
       }
     },
     openPopup(): void {
       // Create the popup
-      $popup.instance = $popup.parent?.open(this.href, 'sharer', this.popupParams)
+      $popup.instance = $popup.parent?.open(
+        this.href,
+        'sharer',
+        this.popupParams
+      )
       $popup.instance?.focus()
       // Watch for popup closing
       $popup.interval = setInterval(this.cleanExistingPopupInterval, 500)
@@ -252,8 +256,10 @@ export default defineComponent({
   render(): void | VNode | null {
     const click = this.hasPopup() ? preventDefault(this.click) : noop
     const href = this.href
-    const children = this.$slots.default? this.$slots.default() : ([this.renderIcon(), h('span', { class: 'visually-hidden' }, this.name)])
-    return h(this.tag, { attrs: { href },  onClick: click  }, children)
+    const children = this.$slots.default
+      ? this.$slots.default()
+      : [this.renderIcon(), h('span', { class: 'visually-hidden' }, this.name)]
+    return h(this.tag, { attrs: { href }, onClick: click }, children)
   }
 })
 </script>

package/lib/components/SignUpForm.vue

@@ -1,19 +1,34 @@
 <template>
-  <form class="sign-up-form" :class="{ 'sign-up-form--horizontal': horizontal }" @submit.prevent="subscribe">
+  <form
+    class="sign-up-form"
+    :class="{ 'sign-up-form--horizontal': horizontal }"
+    @submit.prevent="subscribe"
+  >
     <fieldset :disabled="frozen">
-      <label v-if="!noLabel" class="text-uppercase text-muted fw-bold" for="input-email">
+      <label
+        v-if="!noLabel"
+        class="text-uppercase text-muted fw-bold"
+        for="input-email"
+      >
         {{ t('sign-up-form.label') }}
       </label>
-      <div class="sign-up-form__fieldset__group " :class="{'input-group': horizontal}">
+      <div
+        class="sign-up-form__fieldset__group"
+        :class="{ 'input-group': horizontal }"
+      >
         <input
-            id="input-email"
-            v-model="email"
-            name="EMAIL"
-            type="email"
-            class="form-control"
-            :placeholder="t('sign-up-form.placeholder').toString()"
+          id="input-email"
+          v-model="email"
+          name="EMAIL"
+          type="email"
+          class="form-control"
+          :placeholder="t('sign-up-form.placeholder').toString()"
         />
-        <button class="sign-up-form__fieldset__group__addon btn text-uppercase fw-bold input-group-text"  :class="{ [variantColorClass] :true }"  type="submit">
+        <button
+          class="sign-up-form__fieldset__group__addon btn text-uppercase fw-bold input-group-text"
+          :class="{ [variantColorClass]: true }"
+          type="submit"
+        >
           {{ t('sign-up-form.submit') }}
         </button>
       </div>
@@ -32,12 +47,11 @@ import jsonp from 'jsonp'
 import castArray from 'lodash/castArray'
 import flatten from 'lodash/flatten'
 import last from 'lodash/last'
-import {computed, defineComponent, PropType, ref} from 'vue'
+import { computed, defineComponent, PropType, ref } from 'vue'
 
 import config from '../config'
-import {useI18n} from "vue-i18n";
-import {useSendEmail} from "@/composables/sendEmail";
-
+import { useI18n } from 'vue-i18n'
+import { useSendEmail } from '@/composables/sendEmail'
 
 type SignUpFormData = {
   email: string
@@ -51,7 +65,7 @@ type SignUpFormData = {
  * SignUpForm
  */
 export default defineComponent({
-name: 'SignUpForm',
+  name: 'SignUpForm',
   props: {
     /**
      * Mailchimp URL to send the data to.
@@ -108,24 +122,30 @@ name: 'SignUpForm',
       default: 'primary'
     }
   },
-  setup(props){
-    const {t} = useI18n()
+  setup(props) {
+    const { t } = useI18n()
     const email = ref('')
     const frozen = ref(false)
     const response = ref({})
     const errorMessage = ref(null)
     const successMessage = ref(null)
-    const {send} = useSendEmail(email,props.action,props.emailField, props.tracker, props.referrer,props.defaultGroups)
+    const { send } = useSendEmail(
+      email,
+      props.action,
+      props.emailField,
+      props.tracker,
+      props.referrer,
+      props.defaultGroups
+    )
 
-    const variantColorClass = computed(()=> {
+    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, done).finally(unfreeze)
     }
 
     function done({ result, msg }: any): void {
@@ -134,7 +154,8 @@ name: 'SignUpForm',
         successMessage.value = msg
       } else {
         // Mailchimp formats errors in list
-        errorMessage.value = last((msg || "Something's wrong").split('0 -')) ?? null
+        errorMessage.value =
+          last((msg || "Something's wrong").split('0 -')) ?? null
       }
     }
     function resetMessages() {

package/lib/components/SlideUpDown.vue

@@ -2,7 +2,10 @@
 import { defineComponent } from 'vue'
 import type { CSSProperties } from 'vue'
 
-type StyleTransition = Pick<CSSProperties, 'overflow' | 'transition-property' | 'transition-duration' | 'height'>
+type StyleTransition = Pick<
+  CSSProperties,
+  'overflow' | 'transition-property' | 'transition-duration' | 'height'
+>
 const STATE = {
   PRE: 'pre',
   ACTIVE: 'active',
@@ -98,7 +101,9 @@ export default defineComponent({
     await this.deferredNextTick()
     this.mounted = true
     await this.cleanLayout(null)
-    this.$container?.addEventListener('transitionend', (e) => this.cleanLayout(e))
+    this.$container?.addEventListener('transitionend', (e) =>
+      this.cleanLayout(e)
+    )
   },
   methods: {
     async triggerSlide(): Promise<void> {

package/lib/components/TexturedDeck.vue

@@ -1,6 +1,6 @@
 <script lang="ts">
 import { clamp } from 'lodash'
-import {computed, defineComponent, PropType} from 'vue'
+import { computed, defineComponent, PropType } from 'vue'
 
 import { DeckTexture } from '@/enums'
 import config from '@/config'
@@ -36,45 +36,50 @@ export default defineComponent({
      */
     black: {
       type: Boolean,
-      default:false
+      default: false
     },
     /**
      * Host where to find the textures (without tailing slash)
      */
     backgroundBaseUrl: {
       type: String,
-      default: () => config.get('textured-deck.background-base-url', window.location.origin)
+      default: () =>
+        config.get('textured-deck.background-base-url', window.location.origin)
     }
   },
-  setup(props, {attrs}) {
-    const names = computed((): DeckTexture[] =>{
+  setup(props, { attrs }) {
+    const names = computed((): DeckTexture[] => {
       return Object.values(DeckTexture)
     })
-    const textureIndex = computed((): number =>{
+    const textureIndex = computed((): number => {
       if (typeof props.modelValue !== 'number') {
-        return clamp(names.value.indexOf(props.modelValue), 0, names.value.length - 1)
+        return clamp(
+          names.value.indexOf(props.modelValue),
+          0,
+          names.value.length - 1
+        )
       }
       return props.modelValue
     })
-    const textureName = computed((): string =>{
+    const textureName = computed((): string => {
       return names.value[textureIndex.value]
     })
-    const filename = computed((): string =>{
+    const filename = computed((): string => {
       if (props.black) {
         return `texture-${textureName.value}-black.jpg`
       }
       return `texture-${textureName.value}.jpg`
     })
-    const backgroundUrl = computed((): string =>{
+    const backgroundUrl = computed((): string => {
       return `${props.backgroundBaseUrl}/assets/img/${filename.value}`
     })
-    const backgroundSize = computed((): string =>{
+    const backgroundSize = computed((): string => {
       return props.size
     })
-    const backgroundImage = computed((): string =>{
+    const backgroundImage = computed((): string => {
       return `url("${backgroundUrl.value}")`
     })
-    const inheritedProps = computed((): object =>{
+    const inheritedProps = computed((): object => {
       return { ...attrs, ...props, tag: undefined }
     })
     return {
@@ -87,7 +92,12 @@ export default defineComponent({
 </script>
 
 <template>
-  <component :is="tag" :style="{ backgroundSize, backgroundImage }" v-bind="inheritedProps" class="textured-deck">
+  <component
+    :is="tag"
+    :style="{ backgroundSize, backgroundImage }"
+    v-bind="inheritedProps"
+    class="textured-deck"
+  >
     <slot />
   </component>
 </template>

package/lib/components/TinyPagination.vue

@@ -8,12 +8,18 @@
       @click="applyPreviousPage"
     >
       <!-- @slot Previous button content -->
-      <slot name="previous" v-bind="{ modelValue, numberOfPages, hasPrevious, hasNext }">
+      <slot
+        name="previous"
+        v-bind="{ modelValue, numberOfPages, hasPrevious, hasNext }"
+      >
         <fa :icon="previousPageIcon" />
         <span class="sr-only">{{ t('tiny-pagination.previous') }}</span>
       </slot>
     </b-button>
-    <form class="tiny-pagination__form form-inline" @submit.prevent="applyPageForm">
+    <form
+      class="tiny-pagination__form form-inline"
+      @submit.prevent="applyPageForm"
+    >
       <label v-show="!compact" class="tiny-pagination__form__label me-1 mb-0">
         <!-- @slot Display page label -->
         <slot name="page" v-bind="{ modelValue, numberOfPages }">
@@ -43,7 +49,10 @@
       @click="applyNextPage"
     >
       <!-- @slot Next button content -->
-      <slot name="next" v-bind="{ modelValue, numberOfPages, hasPrevious, hasNext }">
+      <slot
+        name="next"
+        v-bind="{ modelValue, numberOfPages, hasPrevious, hasNext }"
+      >
         <fa :icon="nextPageIcon" />
         <span class="sr-only">{{ t('tiny-pagination.next') }}</span>
       </slot>
@@ -53,8 +62,8 @@
 
 <script lang="ts">
 import { faAngleLeft, faAngleRight } from '@fortawesome/free-solid-svg-icons'
-import { defineComponent, PropType, ref, computed, watch, onBeforeMount } from 'vue'
-import {useI18n} from "vue-i18n";
+import { defineComponent, PropType, ref, computed, onBeforeMount } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 import { library, default as Fa } from './Fa'
 
@@ -146,23 +155,22 @@ export default defineComponent({
       type: Boolean
     }
   },
-  emits:['update:modelValue'],
-  setup(props,{emit}) {
-
-    onBeforeMount(()=> {
+  emits: ['update:modelValue'],
+  setup(props, { emit }) {
+    onBeforeMount(() => {
       library.add(faAngleLeft, faAngleRight)
     })
 
     const { t } = useI18n()
-    const pageValue = computed(()=>{return +props.modelValue})
-    const currentPageInput = ref<number|string>(pageValue.value)
-    const numberOfPages = computed((): number =>{
+
+    const numberOfPages = computed((): number => {
       if (props.pages === null) {
         return Math.ceil(props.totalRows / props.perPage)
       }
       return Number(props.pages)
     })
-    const paginationClassList = computed((): object =>{
+
+    const paginationClassList = computed((): object => {
       return {
         [`tiny-pagination--${props.size}`]: true,
         [`tiny-pagination--no-nav`]: props.noNav,
@@ -170,24 +178,29 @@ export default defineComponent({
         [`tiny-pagination--compact`]: props.compact
       }
     })
-    const hasPrevious = computed((): boolean =>{
-      return pageValue.value > 1
-    })
-    const hasNext = computed((): boolean =>{
-      return pageValue.value < numberOfPages.value
-    })
+
+    const hasPrevious = computed((): boolean => pageValue.value > 1)
+    const hasNext = computed(
+      (): boolean => pageValue.value < numberOfPages.value
+    )
+    const pageValue = computed(() => +props.modelValue)
+
+    const currentPageInput = ref<number | string>(pageValue.value)
+
     function applyPageForm(): void {
       if (!isNaN(currentPageInput.value as number)) {
         emit('update:modelValue', +currentPageInput.value)
       }
     }
 
-    function   applyNextPage(): void {
-      emit('update:modelValue', pageValue.value - 1)
+    function applyNextPage(): void {
+      emit('update:modelValue', pageValue.value + 1)
     }
+
     function applyPreviousPage(): void {
-      emit('update:modelValue', pageValue.value + 1)
+      emit('update:modelValue', pageValue.value - 1)
     }
+
     return {
       t,
       currentPageInput,