@icij/murmur-next 4.0.10 → 4.0.13

package/dist/lib/types.d.ts

@@ -1,10 +1,7 @@
-/// <reference types="@/shims-vue" />
-/// <reference types="node_modules/vue-i18n/dist/vue-i18n" />
-import type { StyleValue } from '../node_modules/vue';
+import { StyleValue, ComputedRef, Ref } from '../node_modules/vue';
 import { AccordionKey, ParentKey } from './keys';
-import { ComputedRef } from '../node_modules/vue';
-import type { GeoProjection } from 'd3-geo';
-import { Ref } from '../node_modules/vue';
+import { GeoProjection } from 'd3-geo';
+
 export type Step = symbol | string;
 export type Accordion = {
     emitAccordionNextStepEvent: () => void;

package/dist/lib/utils/assets.d.ts

@@ -1,2 +1,2 @@
-export declare const injectAsset: ((file: string, id?: string) => Promise<unknown>) & import("lodash").MemoizedFunction;
+export declare const injectAsset: ((file: string, id?: string) => Promise<unknown>) & import('lodash').MemoizedFunction;
 export declare const injectAssets: (...args: string[]) => Promise<void>;

package/dist/lib/utils/iframe-resizer.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="@/shims-pym" />
 import { Child as PymChild } from 'pym.js';
+
 export default class IframeResizer {
     initializer: Promise<PymChild>;
     constructor();

package/dist/lib/utils/placeholder.d.ts

@@ -1,4 +1,5 @@
 import { BoxStyle, ContentPlaceholderStyledRows, ContentPlaceholderRows } from './placeholderTypes';
+
 export declare function isFlexBasis(value: string | number): boolean;
 export declare function isWidth(value: string | number): boolean;
 export declare function getBoxStyle(left: number, width: number, isLast: boolean, subClass?: string): BoxStyle[];

package/dist/lib/utils/placeholderTypes.d.ts

@@ -1,6 +1,5 @@
-/// <reference types="@/shims-vue" />
-/// <reference types="vue-i18n" />
-import type { StyleValue } from '../../node_modules/vue';
+import { StyleValue } from '../../node_modules/vue';
+
 export interface BoxStyle {
     style: StyleValue;
     subClass?: string;

package/lib/components/HapticCopy.vue

@@ -39,7 +39,7 @@ export default defineComponent({
      * Text to copy to the clipboard
      */
     text: {
-      type: String,
+      type: [String, Number],
       default: null
     },
     /**

package/lib/components/SelectableDropdown.vue

@@ -7,6 +7,7 @@ import identity from 'lodash/identity'
 import isEqual from 'lodash/isEqual'
 import uniqueId from 'lodash/uniqueId'
 import { faCheckSquare, faSquare } from '@fortawesome/free-regular-svg-icons'
+//@ts-expect-error no typings available
 import { RecycleScroller } from 'vue-virtual-scroller'
 
 import Fa from './Fa'
@@ -132,9 +133,6 @@ export default defineComponent({
         '--scroller-height': props.scrollerHeight
       }
     })
-    const keyField = computed(() => {
-      return typeof items_.value[0] === 'string' ? null : 'recycle_scroller_id'
-    })
     const items_ = computed((): Item[] => {
       if (typeof props.items[0] === 'string') {
         return props.items
@@ -144,6 +142,9 @@ export default defineComponent({
         recycle_scroller_id: `id-${uniqueId()}`
       }))
     })
+    const keyField = computed(() => {
+      return typeof items_.value[0] === 'string' ? null : 'recycle_scroller_id'
+    })
     const firstActiveItemIndex = computed(() => {
       return activeItems.value.length
         ? items_.value.indexOf(activeItems.value[0])
@@ -167,9 +168,19 @@ export default defineComponent({
         toggleKeys()
       }
     )
+    watch(
+      () => props.modelValue,
+      (itemOrItems) => {
+        const items = castArray(itemOrItems)
+        if (!isEqual(activeItems.value, items)) {
+          activateItemOrItems(itemOrItems)
+        }
+      },
+      { deep: true, immediate: true}
+    )
     watch(
       () => activeItems.value,
-      () => {
+      (itemOrItems) => {
         /**
          * Fired when the selected value change. It will pass a canonical value
          * or an array of values if the property `multiple` is set to true.
@@ -179,18 +190,9 @@ export default defineComponent({
          */
         emit(
           'update:modelValue',
-          props.multiple ? activeItems.value : activeItems.value[0]
-        )
-      },
-      { deep: true }
-    )
-    watch(
-      () => props.modelValue,
-      (itemOrItems) => {
-        const items = castArray(itemOrItems)
-        if (!isEqual(activeItems.value, items)) {
-          activateItemOrItems(items)
-        }
+          props.multiple ? itemOrItems : itemOrItems[0]
+          )
+
       },
       { deep: true }
     )
@@ -251,7 +253,7 @@ export default defineComponent({
       if (itemActivated(item)) {
         activeItems.value = filter(activeItems.value, (i) => !props.eq(item, i))
       } else {
-        activeItems.value.push(item)
+        activeItems.value = [...activeItems.value, item]
       }
     }
     function selectRangeToItem(item: Item) {
@@ -329,6 +331,9 @@ export default defineComponent({
     function itemId(item: Item) {
       return `dropdown-item-${item.recycle_scroller_id ?? item.toLowerCase()}`
     }
+    function serialize(item: Item) {
+      return props.serializer?.(item)
+    }
 
     return {
       cssProps,
@@ -340,6 +345,7 @@ export default defineComponent({
       clickToAddItem,
       clickToSelectRangeToItem,
       indexIcon,
+      serialize,
       scroller,
       activeItems,
       itemId
@@ -384,7 +390,7 @@ export default defineComponent({
           >
             <!-- @slot Item's label content -->
             <slot name="item-label" :item="item">
-              {{ serializer(item) }}
+                {{ serialize(item) }}
             </slot>
           </div>
         </slot>

package/lib/datavisualisations/BarChart.vue

@@ -4,7 +4,10 @@ import identity from 'lodash/identity'
 import sortBy from 'lodash/sortBy'
 import { defineComponent, computed, ref, watch } from 'vue'
 import { chartProps, getChartProps, useChart } from '@/composables/chart'
+import { ComponentPublicInstance } from 'vue'
 
+type Datum = {value:number|number[],highlight?:boolean,label?:string}
+type Bar = {width:number,height:number, x:number,y:number} & Datum;
 export default defineComponent({
   name: 'BarChart',
   props: {
@@ -81,13 +84,12 @@ export default defineComponent({
     },
     ...chartProps()
   },
-  emits: ['loaded', 'resized'],
   setup(props, { emit }) {
-    const el = ref(null)
+    const el = ref<ComponentPublicInstance<HTMLElement> |null>(null)
     const width = ref(0)
     const isLoaded = ref(false)
     const { loadedData, elementsMaxBBox, dataHasHighlights, d3Formatter } =
-      useChart(el, getChartProps(props), { emit }, isLoaded, onResize, null)
+      useChart(el, getChartProps(props), { emit }, isLoaded, onResize)
     // onMounted(() => {
     //   window.addEventListener('resize', onResize)
     //   onResize()
@@ -96,7 +98,7 @@ export default defineComponent({
     //   window.removeEventListener('resize', onResize)
     // })
 
-    const sortedData = computed(() => {
+    const sortedData = computed(():[] => {
       if (!loadedData.value) {
         return []
       }
@@ -137,13 +139,15 @@ export default defineComponent({
     const scale = computed(() => {
       const x = d3
         .scaleLinear()
-        .domain([0, d3.max(sortedData.value, (d) => d.value)])
+        //@ts-expect-error D3 api
+        .domain([0, d3.max(sortedData.value, (d:Datum) => d.value)])
         .range([0, padded.value.width - valueWidth.value])
       return { x }
     })
-    const bars = computed(() => {
-      return sortedData.value.map((d, i) => {
+    const bars = computed(():Bar[] => {
+      return sortedData.value.map((d:Datum, i) => {
         return {
+          //@ts-expect-error D3 api
           width: Math.abs(scale.value.x(d.value)),
           height: Math.abs(props.barHeight),
           value: d.value,
@@ -154,7 +158,7 @@ export default defineComponent({
       })
     })
     const labels = computed(() => {
-      return sortedData.value.map((d, i) => {
+      return sortedData.value.map((d:Datum, i) => {
         return {
           label: d.label,
           x: labelWidth.value,
@@ -166,15 +170,16 @@ export default defineComponent({
       return (props.barHeight + props.barGap) * sortedData.value.length
     })
 
-    function formatXDatum(d) {
+    function formatXDatum(d:number|number[]) {
       return d3Formatter(d, props.xAxisTickFormat)
     }
     function onResize() {
       if (el.value) {
-        width.value = el.value.offsetWidth
+        width.value = el.value?.offsetWidth
       }
     }
     function initialize() {
+      // @ts-expect-error D3 api
       d3.axisBottom().scale(scale.value.x)
     }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@icij/murmur-next",
-  "version": "4.0.10",
+  "version": "4.0.13",
   "private": false,
   "description": "Murmur is ICIJ's Design System for Bootstrap 5 and Vue.js",
   "author": "promera@icij.org",