@icij/murmur-next 4.0.1 → 4.0.4

package/lib/components/AccordionStep.vue

@@ -1,11 +1,11 @@
 <template>
   <b-card
-      :class="{
+    :class="{
       'accordion-wrapper__content__step--active': isActive,
       'accordion-wrapper__content__step--previous': isPrevious
     }"
-      class="accordion-wrapper__content__step"
-      no-body
+    class="accordion-wrapper__content__step"
+    no-body
   >
     <h4 class="card-body accordion-wrapper__content__step__heading m-0">
       <!-- @slot Title of the step -->
@@ -13,85 +13,97 @@
         {{ title }}
       </slot>
     </h4>
-    <b-collapse :visible="isActive">
+    <slide-up-down :active="isActive">
       <div class="accordion-wrapper__content__step__main card-body row g-0">
         <!-- @slot Content of the step with props {isFirst:boolean, isLast:boolean, step:Step, nextStep:Function}-->
-        <slot name="content" v-bind="{ isFirst, isLast, step, previousStep, nextStep }">
+        <slot
+          name="content"
+          v-bind="{ isFirst, isLast, step, previousStep, nextStep }"
+        >
           {{ content }}
         </slot>
       </div>
       <div class="card-footer">
         <!-- @slot Previous step button with props {isFirst:boolean, isLast:boolean, step:Step, nextStep:Function} -->
-        <slot name="previousStepButton" v-bind="{ isFirst, isLast, step, previousStep }">
+        <slot
+          name="previousStepButton"
+          v-bind="{ isFirst, isLast, step, previousStep }"
+        >
           <b-button
-              v-if="!isFirst"
-              class="accordion-wrapper__content__step__back-button"
-              type="button"
-              variant="link"
-              @click="previousStep"
+            v-if="!isFirst"
+            class="accordion-wrapper__content__step__back-button"
+            type="button"
+            variant="link"
+            @click="previousStep"
           >
             Back
           </b-button>
         </slot>
         <!-- @slot Next step button with props {isFirst:boolean, isLast:boolean, step:Step, nextStep:Function} }-->
-        <slot name="nextStepButton" v-bind="{ isFirst, isLast, step, nextStep }">
+        <slot
+          name="nextStepButton"
+          v-bind="{ isFirst, isLast, step, nextStep }"
+        >
           <b-button
-              v-if="!isLast"
-              class="accordion-wrapper__content__step__continue-button"
-              type="button"
-              variant="primary"
-              @click="nextStep"
+            v-if="!isLast"
+            class="accordion-wrapper__content__step__continue-button"
+            type="button"
+            variant="primary"
+            @click="nextStep"
           >
             Continue
           </b-button>
         </slot>
       </div>
-    </b-collapse>
+    </slide-up-down>
   </b-card>
 </template>
 
 <script lang="ts">
-import {computed, defineComponent, inject, PropType} from 'vue';
-import {AccordionKey} from '@/keys'
-import {Accordion, Step} from '@/types'
+import { computed, defineComponent, inject, PropType } from 'vue'
+
+import SlideUpDown from '@/components/SlideUpDown.vue'
+import { AccordionKey } from '@/keys'
+import { Accordion, Step } from '@/types'
 
 export default defineComponent({
+  components: {
+    SlideUpDown
+  },
   props: {
     /**
      * Step name
      */
-    step: {type: [String, Object as () => Step, Symbol], required: true},
+    step: { type: [String, Object as () => Step, Symbol], required: true },
     /**
      * Title of the step card
      */
-    title: {type: String, default: "Step"},
+    title: { type: String, default: 'Step' },
 
     /**
      * Content of the step card
      */
-    content: {type: String, default: "Step"},
+    content: { type: String, default: 'Step' },
     /**
      * Force card expansion/collapse
      */
-    active: {type: Boolean as PropType<boolean|undefined>, default: false},
+    active: { type: Boolean as PropType<boolean | undefined>, default: false }
   },
   emits: ['next-step', 'previous-step'],
-  setup(props: { step: Step, active: boolean|undefined }, {emit}: any) {
-
+  setup(props: { step: Step; active: boolean | undefined }, { emit }: any) {
     const accordion = inject<Accordion>(AccordionKey)
     const isActive = computed(() => {
-      const fromAccordion = !!accordion?.isActiveStep(props.step);
-      const fromSelf = props.active !== undefined ? props.active : false;
-      return fromSelf || fromAccordion;
-    });
-
-    const isPrevious = computed(() => !!accordion?.isPreviousStep(props.step));
-    const isFirst = computed(() => !!accordion?.isFirstStep(props.step));
-    const isLast = computed(() => !!accordion?.isLastStep(props.step));
+      const fromAccordion = !!accordion?.isActiveStep(props.step)
+      const fromSelf = props.active !== undefined ? props.active : false
+      return fromSelf || fromAccordion
+    })
 
+    const isPrevious = computed(() => !!accordion?.isPreviousStep(props.step))
+    const isFirst = computed(() => !!accordion?.isFirstStep(props.step))
+    const isLast = computed(() => !!accordion?.isLastStep(props.step))
 
     const nextStep = () => {
-      accordion?.emitAccordionNextStepEvent();
+      accordion?.emitAccordionNextStepEvent()
       /**
        * Fired when the nextStep function is called
        * either by clicking on the next button or in the next step slot
@@ -99,11 +111,11 @@ export default defineComponent({
        * @event next-step
        * @param Mixed New step value.
        */
-      emit('next-step');
-    };
+      emit('next-step')
+    }
 
     const previousStep = () => {
-      accordion?.emitAccordionPreviousStepEvent();
+      accordion?.emitAccordionPreviousStepEvent()
       /**
        * Fired when the previousStep function is called
        * either by clicking on the previous button or in the previous step slot
@@ -111,8 +123,8 @@ export default defineComponent({
        * @event previous-step
        * @param Mixed New step value.
        */
-      emit('previous-step');
-    };
+      emit('previous-step')
+    }
     return {
       isFirst,
       isLast,
@@ -124,5 +136,4 @@ export default defineComponent({
     }
   }
 })
-
 </script>

package/lib/components/AccordionWrapper.vue

@@ -8,40 +8,41 @@
 </template>
 
 <script lang="ts">
-import {computed, PropType, provide, defineComponent} from 'vue';
-import { AccordionKey } from '@/keys';
-import {Accordion, Step} from '@/types';
+import { computed, PropType, provide, defineComponent } from 'vue'
+import { AccordionKey } from '@/keys'
+import { Accordion, Step } from '@/types'
 
-const STEP_CHANGE_EVENT: string = 'step-change';
+const STEP_CHANGE_EVENT: string = 'step-change'
 export default defineComponent({
-  props:{
+  props: {
     step: {
       type: [String, Symbol, Object as () => Step],
-      required: true,
+      required: true
     },
     steps: {
       type: Array as PropType<Step[]>,
-      required: true,
-    },
+      required: true
+    }
   },
-  emits:['step-change'],
-  setup(props,{emit}){
-
+  emits: ['step-change'],
+  setup(props, { emit }) {
     const emitAccordionNextStepEvent = () => {
-      emit('step-change', props.steps[activeStepIndex.value + 1] || props.step);
-    };
+      emit('step-change', props.steps[activeStepIndex.value + 1] || props.step)
+    }
 
     const emitAccordionPreviousStepEvent = () => {
-      emit('step-change', props.steps[activeStepIndex.value - 1] || props.step);
-    };
-
-    const activeStepIndex = computed(() => props.steps?.indexOf(props.step));
+      emit('step-change', props.steps[activeStepIndex.value - 1] || props.step)
+    }
 
-    const isFirstStep = (step: Step): boolean => props.steps?.indexOf(step) === 0;
-    const isLastStep = (step: Step): boolean => props.steps?.indexOf(step) === props.steps?.length - 1;
-    const isActiveStep = (step: Step): boolean => props.step === step;
-    const isPreviousStep = (step: Step): boolean => props.steps?.indexOf(step) < activeStepIndex.value;
+    const activeStepIndex = computed(() => props.steps?.indexOf(props.step))
 
+    const isFirstStep = (step: Step): boolean =>
+      props.steps?.indexOf(step) === 0
+    const isLastStep = (step: Step): boolean =>
+      props.steps?.indexOf(step) === props.steps?.length - 1
+    const isActiveStep = (step: Step): boolean => props.step === step
+    const isPreviousStep = (step: Step): boolean =>
+      props.steps?.indexOf(step) < activeStepIndex.value
 
     provide<Accordion>(AccordionKey, {
       emitAccordionNextStepEvent,
@@ -51,7 +52,7 @@ export default defineComponent({
       isFirstStep,
       isLastStep,
       step: props.step,
-      steps: props.steps,
+      steps: props.steps
     })
     return {
       emitAccordionNextStepEvent,
@@ -65,7 +66,6 @@ export default defineComponent({
 })
 </script>
 
-
 <style lang="scss" scoped>
 @use 'sass:math';
 @import '../styles/variables.scss';
@@ -83,7 +83,8 @@ export default defineComponent({
       opacity: $btn-disabled-opacity;
       transition: $transition-base;
 
-      &--active,&--previous {
+      &--active,
+      &--previous {
         opacity: 1;
       }
 

package/lib/components/ActiveTextTruncate.vue

@@ -1,9 +1,12 @@
 <script lang="ts">
-import {computed, defineComponent, ref, watch} from 'vue'
-import useResizeObserver from "@/composables/resizeObserver";
+import { computed, defineComponent, ref, watch } from 'vue'
+import useResizeObserver from '@/composables/resizeObserver'
 import { RequestAnimationFrameWrapper } from '@/utils/animation'
 
-type ActiveTextTruncateData = { textLivePosition: number; resizeObserverKey: string | null }
+type ActiveTextTruncateData = {
+  textLivePosition: number
+  resizeObserverKey: string | null
+}
 
 export default defineComponent({
   name: 'ActiveTextTruncate',
@@ -47,15 +50,15 @@ export default defineComponent({
       validator: (value: string) => ['ltr', 'rtl'].indexOf(value) > -1
     }
   },
-  emits:['cancel','end','start'],
-  setup(props,{emit}){
-    const el  = ref(null)
+  emits: ['cancel', 'end', 'start'],
+  setup(props, { emit }) {
+    const el = ref(null)
     const textLivePosition = ref(0)
-     // This will hold a key generated every time the component is resized.
-    const {resizeRef,resizeState} = useResizeObserver(el)
-      watch(resizeState,()=>{
-        onResized()
-      })
+    // This will hold a key generated every time the component is resized.
+    const { resizeRef, resizeState } = useResizeObserver(el)
+    watch(resizeState, () => {
+      onResized()
+    })
 
     const wrapperElement = computed((): HTMLElement | null => {
       const selector = '.active-text-truncate__wrapper'
@@ -75,7 +78,9 @@ export default defineComponent({
       return `${props.delay}ms`
     })
     const textOffsetTransitionDuration = computed((): string => {
-      const offset = Math.abs(wrapperElementWidth.value - textElementWidth.value)
+      const offset = Math.abs(
+        wrapperElementWidth.value - textElementWidth.value
+      )
       const duration = offset / props.ppms
       return `${duration}ms`
     })
@@ -86,7 +91,7 @@ export default defineComponent({
       const offset = wrapperElementWidth.value - textElementWidth.value
       return `${offset}px`
     })
-    const textOffsetValues = computed((): string [] => {
+    const textOffsetValues = computed((): string[] => {
       if (props.direction === 'ltr') {
         return [textInitialOffset.value, textFinalOffset.value]
       }
@@ -103,20 +108,27 @@ export default defineComponent({
     })
     const fadingLeftWidth = computed((): string => {
       const offset = textLivePosition.value
-      const width = Math.min(Math.max(props.fadingMinWidth, Math.abs(offset)), props.fadingMaxWidth)
+      const width = Math.min(
+        Math.max(props.fadingMinWidth, Math.abs(offset)),
+        props.fadingMaxWidth
+      )
       return `${width}px`
     })
     const fadingRightWidth = computed((): string => {
       const offset = parseInt(textFinalOffset.value) - textLivePosition.value
-      const width = Math.min(Math.max(props.fadingMinWidth, Math.abs(offset)), props.fadingMaxWidth)
+      const width = Math.min(
+        Math.max(props.fadingMinWidth, Math.abs(offset)),
+        props.fadingMaxWidth
+      )
       return `${width}px`
     })
-    const textLivePositionRequestAnimationFrame = computed((): RequestAnimationFrameWrapper => {
-      return new RequestAnimationFrameWrapper()
-    })
+    const textLivePositionRequestAnimationFrame = computed(
+      (): RequestAnimationFrameWrapper => {
+        return new RequestAnimationFrameWrapper()
+      }
+    )
 
     function onResized() {
-
       textLivePosition.value = parseInt(textOffsetValues.value[0])
       // Track transitions to update the text position in live using Request Animation Frame
       listenOnTextElement('transitionstart', startTrackingTextLivePosition)
@@ -129,7 +141,9 @@ export default defineComponent({
     }
     function trackTextLivePosition(): void {
       if (!textElement.value) return
-      const left = window.getComputedStyle(textElement.value, null).getPropertyValue('left')
+      const left = window
+        .getComputedStyle(textElement.value, null)
+        .getPropertyValue('left')
       textLivePosition.value = parseInt(left)
     }
     function startTrackingTextLivePosition(): void {
@@ -203,8 +217,16 @@ export default defineComponent({
 .active-text-truncate {
   --fading-left-width: 0;
   --fading-right-width: 0;
-  --fading-left-gradient: linear-gradient(to left, black calc(100% - var(--fading-left-width)), transparent 100%);
-  --fading-right-gradient: linear-gradient(to right, black calc(100% - var(--fading-right-width)), transparent 100%);
+  --fading-left-gradient: linear-gradient(
+    to left,
+    black calc(100% - var(--fading-left-width)),
+    transparent 100%
+  );
+  --fading-right-gradient: linear-gradient(
+    to right,
+    black calc(100% - var(--fading-right-width)),
+    transparent 100%
+  );
   --text-offset-transition-duration: 0ms;
   --text-offset-transition-delay: 0ms;
   --text-final-offset: 0;

package/lib/components/AdvancedLinkForm.vue

@@ -1,10 +1,16 @@
 <script lang="ts">
-import {computed, defineComponent, ref, Ref, toRef} from 'vue'
-import { BTabs, BTab, BInputGroup, BInputGroupAppend, BFormInput } from 'bootstrap-vue-next'
+import { computed, defineComponent, ref, Ref, toRef } from 'vue'
+import {
+  BTabs,
+  BTab,
+  BInputGroup,
+  BInputGroupAppend,
+  BFormInput
+} from 'bootstrap-vue-next'
 
 import HapticCopy from './HapticCopy.vue'
 
-import {useI18n} from "vue-i18n";
+import { useI18n } from 'vue-i18n'
 
 type AdvancedLinkedFormClassName = `${'advanced-link-form--'}${string}`
 interface AdvancedLinkedFormClasses {
@@ -100,57 +106,65 @@ export default defineComponent({
       type: Boolean
     }
   },
-  emits:["update:modelValue"],
-  setup(props,{emit}) {
+  emits: ['update:modelValue'],
+  setup(props, { emit }) {
     const { t } = useI18n()
-    const rawInput = ref<HTMLTextAreaElement| null>(null)
-    const richInput = ref<HTMLElement|null>(null)
-    const markdownInput = ref<HTMLTextAreaElement| null>(null)
-    const htmlInput = ref<HTMLTextAreaElement| null>(null)
-    const titleOrLink = computed(() => props.title || props.link);
+    const rawInput = ref<HTMLTextAreaElement | null>(null)
+    const richInput = ref<HTMLElement | null>(null)
+    const markdownInput = ref<HTMLTextAreaElement | null>(null)
+    const htmlInput = ref<HTMLTextAreaElement | null>(null)
+    const titleOrLink = computed(() => props.title || props.link)
 
-    const linkAsMarkdown = computed(() => `[${titleOrLink.value}](${props.link})`);
+    const linkAsMarkdown = computed(
+      () => `[${titleOrLink.value}](${props.link})`
+    )
 
-    const linkAsHtml = computed(() => `<a href="${props.link}" target="_blank">${titleOrLink.value}</a>`);
+    const linkAsHtml = computed(
+      () => `<a href="${props.link}" target="_blank">${titleOrLink.value}</a>`
+    )
     const formClasses = computed(() => {
-      const propsToCheck = ['card', 'pills', 'small', 'vertical'];
+      const propsToCheck = ['card', 'pills', 'small', 'vertical']
       return propsToCheck.reduce((classes, prop) => {
         //@ts-ignore
-        classes[`advanced-link-form--${prop}`] = props[prop];
-        return classes;
-      }, {});
-    });
+        classes[`advanced-link-form--${prop}`] = props[prop]
+        return classes
+      }, {})
+    })
 
-    const size = computed(() => props.small ? 'sm' : 'md');
+    const size = computed(() => (props.small ? 'sm' : 'md'))
 
-    const showForm  = computed(() => {
-      return (name:string) => props.forms.indexOf(name) > -1
+    const showForm = computed(() => {
+      return (name: string) => props.forms.indexOf(name) > -1
     })
 
-    const selectInput = (target: Ref<HTMLElement|null>) => {
+    const selectInput = (target: Ref<HTMLElement | null>) => {
       // if(!target.value){
       //   throw new Error("no target")
       // }
       if (target.value instanceof HTMLTextAreaElement) {
-        target.value.select();
+        target.value.select()
       }
-    };
+    }
 
-    const selectRaw = () => selectInput(rawInput);
+    const selectRaw = () => selectInput(rawInput)
 
     function selectRich() {
-      if (!richInput.value) return;
+      if (!richInput.value) return
 
-      const selection = window.getSelection ? window.getSelection() : null;
+      const selection = window.getSelection ? window.getSelection() : null
       if (selection) {
-        const range = document.createRange();
-        range.selectNodeContents(richInput.value);
-        selection.removeAllRanges();
-        selection.addRange(range);
-      } else if ((document.body as HTMLElementSupportingCreateRange).createTextRange) {
-        const range = (document.body as HTMLElementSupportingCreateRange).createTextRange();
-        range.moveToElementText(richInput.value);
-        range.select();
+        const range = document.createRange()
+        range.selectNodeContents(richInput.value)
+        selection.removeAllRanges()
+        selection.addRange(range)
+      } else if (
+        (document.body as HTMLElementSupportingCreateRange).createTextRange
+      ) {
+        const range = (
+          document.body as HTMLElementSupportingCreateRange
+        ).createTextRange()
+        range.moveToElementText(richInput.value)
+        range.select()
       }
     }
     function selectMarkdown() {
@@ -173,9 +187,8 @@ export default defineComponent({
       selectRich,
       selectMarkdown,
       selectHtml
-    };
+    }
   }
-
 })
 </script>
 
@@ -196,9 +209,19 @@ export default defineComponent({
     <b-tab v-if="showForm('raw')" :title="t('advanced-link-form.raw.tab')">
       <div class="advanced-link-form__raw" :class="{ small }">
         <b-input-group :size="size">
-          <b-form-input ref="rawInput" readonly :model-value="link" class="advanced-link-form__raw__input" @click="selectRaw" />
+          <b-form-input
+            ref="rawInput"
+            readonly
+            :model-value="link"
+            class="advanced-link-form__raw__input"
+            @click="selectRaw"
+          />
           <b-input-group-append>
-            <haptic-copy class="btn-secondary" :text="link" @attempt="selectRaw" />
+            <haptic-copy
+              class="btn-secondary"
+              :text="link"
+              @attempt="selectRaw"
+            />
           </b-input-group-append>
         </b-input-group>
       </div>
@@ -206,11 +229,21 @@ export default defineComponent({
     <b-tab v-if="showForm('rich')" :title="t('advanced-link-form.rich.tab')">
       <div class="advanced-link-form__rich" :class="{ small }">
         <b-input-group :size="size">
-          <a ref="richInput" :href="link" class="form-control advanced-link-form__rich__input" @click.prevent="selectRich">{{
-            titleOrLink
-          }}</a>
+          <a
+            ref="richInput"
+            :href="link"
+            class="form-control advanced-link-form__rich__input"
+            @click.prevent="selectRich"
+            >{{ titleOrLink }}</a
+          >
           <b-input-group-append>
-            <haptic-copy class="btn-secondary" html :text="linkAsHtml" :plain="link" @attempt="selectRich" />
+            <haptic-copy
+              class="btn-secondary"
+              html
+              :text="linkAsHtml"
+              :plain="link"
+              @attempt="selectRich"
+            />
           </b-input-group-append>
         </b-input-group>
         <p class="text-muted mt-2 mb-0">
@@ -218,7 +251,10 @@ export default defineComponent({
         </p>
       </div>
     </b-tab>
-    <b-tab v-if="showForm('markdown')" :title="t('advanced-link-form.markdown.tab')">
+    <b-tab
+      v-if="showForm('markdown')"
+      :title="t('advanced-link-form.markdown.tab')"
+    >
       <div class="advanced-link-form__markdown" :class="{ small }">
         <b-input-group :size="size">
           <b-form-input
@@ -229,7 +265,11 @@ export default defineComponent({
             @click="selectMarkdown"
           />
           <b-input-group-append>
-            <haptic-copy class="btn-secondary" :text="linkAsMarkdown" @attempt="selectMarkdown" />
+            <haptic-copy
+              class="btn-secondary"
+              :text="linkAsMarkdown"
+              @attempt="selectMarkdown"
+            />
           </b-input-group-append>
         </b-input-group>
         <p class="text-muted mt-2 mb-0">
@@ -240,9 +280,19 @@ export default defineComponent({
     <b-tab v-if="showForm('html')" :title="t('advanced-link-form.html.tab')">
       <div class="advanced-link-form__html" :class="{ small }">
         <b-input-group :size="size">
-          <b-form-input ref="htmlInput" readonly :modelValue="linkAsHtml" class="advanced-link-form__html__input" @click="selectHtml" />
+          <b-form-input
+            ref="htmlInput"
+            readonly
+            :modelValue="linkAsHtml"
+            class="advanced-link-form__html__input"
+            @click="selectHtml"
+          />
           <b-input-group-append>
-            <haptic-copy class="btn-secondary" :text="linkAsHtml" @attempt="selectHtml" />
+            <haptic-copy
+              class="btn-secondary"
+              :text="linkAsHtml"
+              @attempt="selectHtml"
+            />
           </b-input-group-append>
         </b-input-group>
       </div>