@icij/murmur-next 4.0.13 → 4.0.14

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,
@@ -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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@icij/murmur-next",
-  "version": "4.0.13",
+  "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": {