@icij/murmur-next 4.0.12 → 4.0.14

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/AdvancedLinkForm.vue

@@ -4,7 +4,6 @@ import {
   BTabs,
   BTab,
   BInputGroup,
-  BInputGroupAppend,
   BFormInput
 } from 'bootstrap-vue-next'
 
@@ -35,7 +34,6 @@ export default defineComponent({
     BTabs,
     BTab,
     BInputGroup,
-    BInputGroupAppend,
     BFormInput,
     HapticCopy
   },
@@ -216,13 +214,11 @@ export default defineComponent({
             class="advanced-link-form__raw__input"
             @click="selectRaw"
           />
-          <b-input-group-append>
-            <haptic-copy
-              class="btn-secondary"
-              :text="link"
-              @attempt="selectRaw"
-            />
-          </b-input-group-append>
+          <haptic-copy
+            class="btn-secondary"
+            :text="link"
+            @attempt="selectRaw"
+          />
         </b-input-group>
       </div>
     </b-tab>
@@ -236,15 +232,13 @@ export default defineComponent({
             @click.prevent="selectRich"
             >{{ titleOrLink }}</a
           >
-          <b-input-group-append>
-            <haptic-copy
-              class="btn-secondary"
-              html
-              :text="linkAsHtml"
-              :plain="link"
-              @attempt="selectRich"
-            />
-          </b-input-group-append>
+          <haptic-copy
+            class="btn-secondary"
+            html
+            :text="linkAsHtml"
+            :plain="link"
+            @attempt="selectRich"
+          />
         </b-input-group>
         <p class="text-muted mt-2 mb-0">
           {{ t('advanced-link-form.rich.description') }}
@@ -264,13 +258,11 @@ export default defineComponent({
             class="advanced-link-form__markdown__input"
             @click="selectMarkdown"
           />
-          <b-input-group-append>
-            <haptic-copy
-              class="btn-secondary"
-              :text="linkAsMarkdown"
-              @attempt="selectMarkdown"
-            />
-          </b-input-group-append>
+          <haptic-copy
+            class="btn-secondary"
+            :text="linkAsMarkdown"
+            @attempt="selectMarkdown"
+          />
         </b-input-group>
         <p class="text-muted mt-2 mb-0">
           {{ t('advanced-link-form.markdown.description') }}
@@ -287,13 +279,11 @@ export default defineComponent({
             class="advanced-link-form__html__input"
             @click="selectHtml"
           />
-          <b-input-group-append>
-            <haptic-copy
-              class="btn-secondary"
-              :text="linkAsHtml"
-              @attempt="selectHtml"
-            />
-          </b-input-group-append>
+          <haptic-copy
+            class="btn-secondary"
+            :text="linkAsHtml"
+            @attempt="selectHtml"
+          />
         </b-input-group>
       </div>
     </b-tab>

package/lib/components/HapticCopy.vue

@@ -5,6 +5,7 @@ import { faClipboardCheck } from '@fortawesome/free-solid-svg-icons/faClipboardC
 import { BTooltip, PopoverPlacement } from 'bootstrap-vue-next'
 
 import noop from 'lodash/noop'
+import uniqueId from 'lodash/uniqueId'
 import {
   ComponentPublicInstance,
   computed,
@@ -39,7 +40,7 @@ export default defineComponent({
      * Text to copy to the clipboard
      */
     text: {
-      type: String,
+      type: [String, Number],
       default: null
     },
     /**
@@ -99,10 +100,13 @@ export default defineComponent({
     const tooltipContent = ref<string>('')
     const tooltipTimeout = ref<NodeJS.Timeout | undefined>(undefined)
     const showClipboardTooltip = ref(false)
+    const buttonId = computed(() => uniqueId('haptic-copy-'))
+    
     onBeforeMount(() => {
       library.add(faClipboard)
       library.add(faClipboardCheck)
     })
+
     const tooltipContainer = computed((): string | null => {
       // By default we append the tooltip in the root container using its
       // id (if any) because BootstrapVue doesn't like HTMLElement for some
@@ -181,13 +185,16 @@ export default defineComponent({
     onUnmounted(() => {
       closeTooltip()
     })
+
     expose({
       hide: closeTooltip
     })
+
     return {
       t,
       tooltip,
       el,
+      buttonId,
       showClipboardTooltip,
       tooltipContainer,
       tooltipContent,
@@ -203,7 +210,7 @@ export default defineComponent({
 
 <template>
   <button
-    id="hapticCopy"
+    :id="buttonId"
     ref="el"
     class="btn haptic-copy"
     @mouseleave="closeTooltip"
@@ -236,9 +243,9 @@ export default defineComponent({
       ref="tooltip"
       :model-value="showClipboardTooltip"
       :placement="tooltipPlacement"
+      :target="buttonId"
       manual
       noninteractive
-      target="hapticCopy"
     >
       {{ tooltipContent }}
     </b-tooltip>

package/lib/components/SecretInput.vue

@@ -92,11 +92,9 @@ export default defineComponent({
 
 <template>
   <b-input-group :size="size" class="secret-input">
-    <b-input-group-prepend v-if="!noToggler">
-      <b-button variant="link" class="secret-input__toggler" @click="toggle">
-        <fa fixed-width :icon="togglerIcon" />
-      </b-button>
-    </b-input-group-prepend>
+    <b-button v-if="!noToggler" variant="link" class="secret-input__toggler" @click="toggle">
+      <fa fixed-width :icon="togglerIcon" />
+    </b-button>
     <b-form-input
       ref="secretInput"
       class="text-monospace secret-input__input"
@@ -105,16 +103,15 @@ export default defineComponent({
       :modelValue="value"
       @click="selectInput"
     />
-    <b-input-group-append v-if="!noHapticCopy">
-      <haptic-copy
-        class="secret-input__copy"
-        hide-label
-        :class="hapticCopyClassList"
-        :text="value"
-        @success="selectInput"
-        @error="selectInput"
-      />
-    </b-input-group-append>
+    <haptic-copy
+      v-if="!noHapticCopy"
+      class="secret-input__copy"
+      hide-label
+      :class="hapticCopyClassList"
+      :text="value"
+      @success="selectInput"
+      @error="selectInput"
+    />
   </b-input-group>
 </template>
 

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/components/SharingOptions.vue

@@ -1,6 +1,7 @@
 <script lang="ts">
 import get from 'lodash/get'
 import reduce from 'lodash/reduce'
+import uniqueId from 'lodash/uniqueId'
 import { faCode } from '@fortawesome/free-solid-svg-icons/faCode'
 import {
   computed,
@@ -117,9 +118,9 @@ export default defineComponent({
     onBeforeMount(() => {
       library.add(faCode)
     })
-
-    const embedForm = ref(null)
-    const { show } = useModal('embedForm')
+    
+    const embedFormId = uniqueId('embed-form-')
+    const { show } = useModal(embedFormId)
     const style = computed((): CSSProperties => {
       return {
         'flex-direction': props.direction
@@ -183,7 +184,7 @@ export default defineComponent({
     return {
       style,
       show,
-      embedForm,
+      embedFormId,
       valuesFor
     }
   }
@@ -212,22 +213,11 @@ export default defineComponent({
       network="email"
       v-bind="valuesFor('email')"
     />
-    <div
-      v-show="!noEmbed"
-      class="sharing-options__link sharing-options__link--embed"
-    >
-      <a @click="show">
-        <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"
-    >
+    <a class="sharing-options__link sharing-options__link--embed" @click="show" v-show="!noEmbed">
+      <fa icon="code" />
+      <span class="sr-only">Embed</span>
+    </a>
+    <b-modal :id="embedFormId" class="text-dark" hide-footer title="Embed on your website">
       <embed-form
         :min-height="iframeMinHeight"
         :min-width="iframeMinWidth"

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.12",
+  "version": "4.0.14",
   "private": false,
   "description": "Murmur is ICIJ's Design System for Bootstrap 5 and Vue.js",
   "author": "promera@icij.org",
@@ -48,12 +48,12 @@
     "@fortawesome/free-solid-svg-icons": "^6.5.2",
     "@fortawesome/vue-fontawesome": "^3.0.8",
     "@storybook/preset-scss": "^1.0.3",
-    "@storybook/test": "^8.1.4",
+    "@storybook/test": "^8.1.10",
     "@types/topojson": "^3.2.6",
     "@types/vue-i18n": "^7.0.0",
     "@vue/compat": "^3.4.27",
     "bootstrap": "^5.3.3",
-    "bootstrap-vue-next": "^0.16.6",
+    "bootstrap-vue-next": "^0.22.1",
     "canvas": "^2.11.2",
     "clipboard": "^2.0.11",
     "d3": "^7.9.0",
@@ -70,19 +70,18 @@
     "vue-virtual-scroller": "^2.0.0-beta.8"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^1",
     "@eslint/js": "^9.3.0",
     "@icij/eslint-config": "^2.0.0",
     "@intlify/unplugin-vue-i18n": "^4.0.0",
     "@rushstack/eslint-patch": "^1.8.0",
-    "@storybook/addon-essentials": "^8.1.4",
-    "@storybook/addon-interactions": "^8.1.4",
-    "@storybook/addon-links": "^8.1.4",
-    "@storybook/addon-mdx-gfm": "^8.1.4",
-    "@storybook/addon-themes": "^8.1.4",
-    "@storybook/blocks": "^8.1.4",
-    "@storybook/vue3": "^8.1.4",
-    "@storybook/vue3-vite": "^8.1.4",
+    "@storybook/addon-essentials": "^8.1.10",
+    "@storybook/addon-interactions": "^8.1.10",
+    "@storybook/addon-links": "^8.1.10",
+    "@storybook/addon-mdx-gfm": "^8.1.10",
+    "@storybook/addon-themes": "^8.1.10",
+    "@storybook/blocks": "^8.1.10",
+    "@storybook/vue3": "^8.1.10",
+    "@storybook/vue3-vite": "^8.1.10",
     "@types/d3": "^7.4.3",
     "@types/d3-geo": "^3.1.0",
     "@types/eslint__js": "^8.42.3",
@@ -100,14 +99,14 @@
     "msw-storybook-addon": "^2.0.2",
     "prettier": "^3.2.5",
     "sass": "^1.77.2",
-    "storybook": "^8.1.4",
+    "storybook": "^8.1.10",
     "typescript": "^5.4.5",
     "typescript-eslint": "^7.11.0",
     "unplugin-vue-components": "^0.27.0",
     "vite": "^5.2.12",
     "vite-plugin-dts": "^3.9.1",
     "vitest": "^1.6.0",
-    "vue-docgen-cli": "^4.79.0",
+    "vue-component-meta": "^2.0.21",
     "vue-headroom": "github:caro3801/vue-headroom"
   },
   "peerDependencies": {