@icij/murmur-next 4.0.0 → 4.0.3

package/docs/pages/components/accordion/doc.md

@@ -1,96 +0,0 @@
----
-title: Accordion
-description: Display a step by step accordion
----
-
-Accordion and accordion steps. 
-
-
-Accordion "provides" functions and current step to accordion steps. Therefore, each accordion steps has the accordion methods and attributes "injected". 
-
-The AccordionWrapper provides the step numbering and animation. It will also provide the current steps to all children.
-The AccordionStep component can be used independently of the AccordionWrapper component and the AccordionWrapper component can use other children components than the AccordionStep component we provide.
-
-## AccordionWrapper 
-
-:::sample-card
-<div class="p-4">
-  <accordion-wrapper :steps="steps" v-model="step" class="p-2">
-    <accordion-step
-      :step="$options.stepsEnum.MAILVELOPE"
-      class="accordion-step__mailvelope"
-      title="Install Mailvelope"
-      content="Install Mailvelope and create your key"
-    />
-    <accordion-step
-      :step="$options.stepsEnum.EXPORT_PUBLIC_KEY"
-      title="Export your public key"
-    >
-      <template #content>
-        <p>
-          Export your public PGP key as a .asc file and download on your
-          computer
-        </p>
-      </template>
-    </accordion-step>
-    <accordion-step
-      :active="active"
-      :step="$options.stepsEnum.UPLOAD_PUBLIC_KEY"
-    >
-      <template #title>
-        Upload your publickey
-      </template>
-      <template #nextStepButton>
-        <b-button variant="info">The end!</b-button>
-      </template>
-    </accordion-step>
-</accordion-wrapper>
-</div>
-:::
-
-<api-table path="components/AccordionWrapper.vue"></api-table>
-<br/>
-
-## AccordionStep
-
-A single AccordionStep component with the possibility to collapse/expand the content
-
-
-:::sample-card
-<div class="p-4">
-  <accordion-step :active="active"
-        :step="$options.stepsEnum.MAILVELOPE"
-        content="Install Mailvelope and create your key"
-      ><template #title>
-      <b-button @click="active = !active">{{active?'Expanded':'Collapsed'}}</b-button> Install Mailvelope 
-      </template>
-      </accordion-step>
-
-</div>
-:::
-
-<api-table path="components/AccordionStep.vue"></api-table>
-
-<style>
-  .bg-striped {
-    background: repeating-linear-gradient(45deg, #dfdddd, #dfdddd 10px, #cfcccc 10px, #cfcccc 20px)    
-  }
-</style>
-
-<script>
-
-  export default {
-    data () {
-      return {
-        step: this.$options.stepsEnum.MAILVELOPE,
-        steps: Object.values(this.$options.stepsEnum),
-        active: false
-      }
-    },
-    stepsEnum:Object.freeze({
-      MAILVELOPE: Symbol("MAILVELOPE"),
-      EXPORT_PUBLIC_KEY: Symbol("EXPORT_PUBLIC_KEY"),
-      UPLOAD_PUBLIC_KEY: Symbol("UPLOAD_PGP"),
-    })
-  }
-</script>

package/docs/pages/components/active-text-truncate/doc.md

@@ -1,44 +0,0 @@
----
-title: Active Text Truncate
-description: Truncate text with an active display of the extended value
----
-
-The end of the text will be truncated with an elegant gradient mask.
-
-:::sample-card
-<div class="p-4">
-  <active-text-truncate class="p-2 bg-striped">
-    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-  </active-text-truncate>
-</div>
-:::
-
-This can be combined, for instance, with the haptic copy button for a subtle effect:
-
-:::sample-card
-<div class="p-4">
-    <haptic-copy class="btn btn-link w-100 border" text="https://www.icij.org/investigations/luanda-leaks/banking-documents-reveal-consulting-giants-cash-windfall-under-angolan-billionaire-isabel-dos-santos/">
-      <active-text-truncate>
-        https://www.icij.org/investigations/luanda-leaks/banking-documents-reveal-consulting-giants-cash-windfall-under-angolan-billionaire-isabel-dos-santos/
-      </active-text-truncate>
-    </haptic-copy>
-</div>
-:::
-
-Finally, this component can be used to truncate string from the start:
-
-:::sample-card
-<div class="p-4">
-  <active-text-truncate class="p-2 bg-white text-monospace" direction="rtl">
-    /secret-location/encrypted-disk/icij-investigations/leaks/luxleaks/v1/2001 and before/H4201030M.pdf
-  </active-text-truncate>
-</div>
-:::
-
-::: api-table components/ActiveTextTruncate.vue :::
-
-<style>
-  .bg-striped {
-    background: repeating-linear-gradient(45deg, #dfdddd, #dfdddd 10px, #cfcccc 10px, #cfcccc 20px)    
-  }
-</style>

package/docs/pages/components/advanced-link-form/doc.md

@@ -1,105 +0,0 @@
----
-title: Advanced Link Form
-description: A form with tabs to offer several copy formats to users.
----
-
-Inside a card:
-
-:::sample-card
-<div class="text-center p-4">
-  <b-card no-body>
-    <advanced-link-form
-      card
-      title="Medtronic spends millions each year on lobbying in the US"
-      link="https://projects.icij.org/the-implant-files/graphics/#/medtronic-lobbying" />
-  </b-card>
-</div>
-:::
-
-Inside a modal (the modal's body is set to have no body):
-
-:::sample-card
-<div>
-  <div class="p-4 text-center">
-    <button class="btn btn-info fw-bold" @click="$refs.formModal.show()">
-      Click to see the form
-    </button>
-  </div>
-  <b-modal hide-footer hide-header body-class="p-0" ref="formModal" size="md" no-headings>
-    <advanced-link-form
-      card
-      title="Medtronic spends millions each year on lobbying in the US"
-      link="https://projects.icij.org/the-implant-files/graphics/#/medtronic-lobbying" />
-  </b-modal>
-</div>
-:::
-
-This component can be use inside a popover. Here is a example with only `raw`
-and `markdown` forms, using no fading animation, and using a `small` layout:
-
-:::sample-card
-<template>
-  <div>
-    <div class="p-4 text-center">
-      <button class="btn btn-info fw-bold" id="popover-button-sample">
-        Click to see the form
-      </button>
-    </div>
-    <b-popover ref="formPopover" target="popover-button-sample" placement="right" triggers="focus">
-      <advanced-link-form
-        card
-        small
-        no-fade
-        :forms="['raw', 'markdown']"
-        title="Medtronic spends millions each year on lobbying in the US"
-        link="https://projects.icij.org/the-implant-files/graphics/#/medtronic-lobbying" />
-    </b-popover>
-  </div>
-</template>
-:::
-
-With tabs as pills:
-
-:::sample-card
-<div class="text-center p-4">
-  <b-card no-body>
-    <advanced-link-form
-      card
-      pills
-      title="Medtronic spends millions each year on lobbying in the US"
-      link="https://projects.icij.org/the-implant-files/graphics/#/medtronic-lobbying" />
-  </b-card>
-</div>
-:::
-
-With tabs as pills and a different active class:
-
-:::sample-card
-<div class="text-center p-4">
-  <b-card no-body>
-    <advanced-link-form
-      card
-      pills
-      active-nav-item-class="bg-primary fw-bold"
-      title="Medtronic spends millions each year on lobbying in the US"
-      link="https://projects.icij.org/the-implant-files/graphics/#/medtronic-lobbying" />
-  </b-card>
-</div>
-:::
-
-With vertical tabs:
-
-:::sample-card
-<div class="text-center p-4">
-  <b-card no-body>
-    <advanced-link-form
-      card
-      vertical
-      pills
-      title="Medtronic spends millions each year on lobbying in the US"
-      link="https://projects.icij.org/the-implant-files/graphics/#/medtronic-lobbying" />
-  </b-card>
-</div>
-:::
-
-::: api-table components/AdvancedLinkForm.vue :::

package/docs/pages/components/brand/doc.md

@@ -1,30 +0,0 @@
----
-title: Brand
-description: A component to create variations of ICIJ logo.
----
-
-:::sample-card
-<div class="text-center position-relative">
-  <div class="position-absolute p-3">
-    <b-form-checkbox v-model="animated" name="check-button" size="sm" switch>
-      Animated
-    </b-form-checkbox>
-  </div>
-  <brand class="p-1 m-3" square :animated="animated" />
-  <brand class="p-1 m-3" square background="#000" color="#FFFF" :animated="animated" />
-  <brand class="p-1 m-3" square background="#FFF" color="#000" :animated="animated" />
-</div>
-:::
-
-::: api-table components/Brand.vue :::
-
-
-<script>
-  export default {
-    data () {
-      return {
-        animated: false
-      }
-    }
-  }
-</script>

package/docs/pages/components/brand-expansion/doc.md

@@ -1,70 +0,0 @@
----
-title: Brand Expansion
-description: A component to create variations of ICIJ logo with text
----
-
-### Short
-
-A variation of the logo with only the acronym "ICIJ":
-
-:::sample-card
-<div class="text-center position-relative">
-  <div class="position-absolute p-3">
-    <b-form-checkbox v-model="animated" name="check-button" size="sm" switch>
-      Animated
-    </b-form-checkbox>
-  </div>
-  <brand-expansion class="p-4 d-block" :animated="animated" />
-  <brand-expansion class="p-4 d-block" background="#000" dark />
-  <brand-expansion class="p-4 d-block" background="#000" color="#FFFF" />
-  <brand-expansion class="p-4 d-block" background="#FFF" color="#000" />
-</div>
-:::
-
-### Medium
-
-A variation of the logo with the definition of the acronym "ICIJ":
-
-:::sample-card
-<div class="text-center position-relative">
-  <div class="position-absolute p-3">
-    <b-form-checkbox v-model="animated" name="check-button" size="sm" switch>
-      Animated
-    </b-form-checkbox>
-  </div>
-  <brand-expansion class="p-4 d-block" mode="medium" :animated="animated" />
-  <brand-expansion class="p-4 d-block" mode="medium" background="#000" dark />
-  <brand-expansion class="p-4 d-block" mode="medium" background="#000" color="#FFFF" />
-  <brand-expansion class="p-4 d-block" mode="medium" background="#FFF" color="#000" />
-</div>
-:::
-
-### Long
-
-A variation of the logo with ICIJ's punchline:
-
-:::sample-card
-<div class="text-center position-relative">
-  <div class="position-absolute p-3">
-    <b-form-checkbox v-model="animated" name="check-button" size="sm" switch>
-      Animated
-    </b-form-checkbox>
-  </div>
-  <brand-expansion class="p-4 d-block" mode="long" :animated="animated" />
-  <brand-expansion class="p-4 d-block" mode="long" background="#000" dark />
-  <brand-expansion class="p-4 d-block" mode="long" background="#000" color="#FFFF" />
-  <brand-expansion class="p-4 d-block" mode="long" background="#FFF" color="#000" />
-</div>
-:::
-
-::: api-table components/BrandExpansion.vue :::
-
-<script>
-  export default {
-    data () {
-      return {
-        animated: false
-      }
-    }
-  }
-</script>

package/docs/pages/components/confirm-button/doc.md

@@ -1,91 +0,0 @@
----
-title: Confirm Button
----
-
-A component to create button with a confirmation tooltip
-
-:::sample-card
-<div class="p-2 text-center">
-  <confirm-button class="btn btn-info" :confirmed="confirmed" no-close-button>
-    Click to confirm
-  </confirm-button>
-</div>
-:::
-
-You can also add a description:
-
-:::sample-card
-<div class="p-2 text-center">
-  <confirm-button class="btn btn-info" description="Do, or do not. There is no try.">
-    Click to confirm
-  </confirm-button>
-</div>
-:::
-
-Or use different texts for the buttons:
-
-:::sample-card
-<div class="p-2 text-center">
-  <confirm-button class="btn btn-info" label="Will you bilge Matey?" yes="Aye" no="Abandon ship!">
-    Click to confirm
-  </confirm-button>
-</div>
-:::
-
-Finally, you can change the default placement of the tooltip:
-
-:::sample-card
-<div class="p-2 text-center">
-  <confirm-button class="btn btn-outline-dark m-2" placement="top">
-    On <code>top</code>
-  </confirm-button>
-  <confirm-button class="btn btn-outline-dark m-2" placement="bottom">
-    On <code>bottom</code>
-  </confirm-button>
-  <confirm-button class="btn btn-outline-dark m-2" placement="left">
-    On <code>left</code>
-  </confirm-button>
-  <confirm-button class="btn btn-outline-dark m-2" placement="right">
-    On <code>right</code>
-  </confirm-button>
-  <confirm-button class="btn btn-outline-dark m-2" placement="auto">
-    On <code>auto</code>
-  </confirm-button>
-  <confirm-button class="btn btn-outline-dark m-2" placement="topleft">
-    On <code>topleft</code>
-  </confirm-button>
-  <confirm-button class="btn btn-outline-dark m-2" placement="topright">
-    On <code>topright</code>
-  </confirm-button>
-  <confirm-button class="btn btn-outline-dark m-2" placement="bottomleft">
-    On <code>bottomleft</code>
-  </confirm-button>
-  <confirm-button class="btn btn-outline-dark m-2" placement="bottomright">
-    On <code>bottomright</code>
-  </confirm-button>
-  <confirm-button class="btn btn-outline-dark m-2" placement="lefttop">
-    On <code>lefttop</code>
-  </confirm-button>
-  <confirm-button class="btn btn-outline-dark m-2" placement="leftbottom">
-    On <code>leftbottom</code>
-  </confirm-button>
-  <confirm-button class="btn btn-outline-dark m-2" placement="righttop">
-    On <code>righttop</code>
-  </confirm-button>
-  <confirm-button class="btn btn-outline-dark m-2" placement="rightbottom">
-    On <code>rightbottom</code>
-  </confirm-button>
-</div>
-:::
-
-::: api-table components/ConfirmButton.vue :::
-
-<script>
-export default {
-  methods: {
-    confirmed() {
-      alert('Confirmed !')
-    }
-  }
-}
-</script>

package/docs/pages/components/content-placeholder/doc.md

@@ -1,16 +0,0 @@
----
-title: Content Placeholder
----
-
-A component to fill empty spaces with animated placeholders until content is loaded.
-
-:::sample-card
-<div class="card card-xs py-2 px-3 mx-auto m-4">
-  <content-placeholder class="my-1" />
-  <content-placeholder class="my-1" />
-  <content-placeholder class="my-1" />
-  <content-placeholder class="my-1"/>
-</div>
-:::
-
-::: api-table components/ContentPlaceholder.vue :::

package/docs/pages/components/custom-pagination/doc.md

@@ -1,61 +0,0 @@
----
-title: Custom Pagination
-description: A custom pagination component with the option to jump ahead to a specific page using a form input.
----
-
-Default styling:
-
-:::sample-card
-<div class="p-2 text-center">
-  <custom-pagination v-model="currentPage" :per-page="10" :total-rows="200" />
-</div>
-:::
-
-Default styling for the pagination element, while using a `small` layout:
-
-:::sample-card
-<div class="p-2 text-center">
-  <custom-pagination v-model="currentPage" :per-page="10" :total-rows="200" small />
-</div>
-:::
-
-With pills:
-
-:::sample-card
-<div class="p-2 text-center">
-  <custom-pagination v-model="currentPage" :pages="3" pills :total-rows="200" />
-</div>
-:::
-
-With pills, using a `sm` layout:
-
-:::sample-card
-<div class="p-2 text-center">
-  <custom-pagination v-model="currentPage" :per-page="10" pills :total-rows="200" size="sm" />
-</div>
-:::
-
-Or a `compact` layout:
-
-:::sample-card
-<div class="p-2 text-center">
-  <custom-pagination v-model="currentPage" :per-page="50" :pages="3" compact />
-</div>
-:::
-
-::: api-table components/CustomPagination.vue :::
-
-<script>
-  export default {
-    data () {
-      return {
-        currentPage: 1
-      }
-    },
-    watch: {
-      currentPage (page) {
-        this.$router.push({ query: { page } })
-      }
-    }
-  }
-</script>

package/docs/pages/components/digits-input/doc.md

@@ -1,28 +0,0 @@
----
-title: Digits Input
-description: An multiple-digits input to
----
-
-## 6 digits
-
-By default, this components displays 6 digits and has no value.
-
-:::sample-card
-<div class="p-5">
-  <digits-input />
-</div>
-:::
-
-## 4 digits with initial value
-
-You can use any number of digits you like, and specify a `value` or a `v-model`. 
-The value of the component is always converted to string to allow user to specify 
-number starting with "0".
-
-:::sample-card
-<div class="p-5">
-  <digits-input :length="4" value="2017" />
-</div>
-:::
-
-::: api-table components/DigitsInput.vue :::

package/docs/pages/components/donate-form/doc.md

@@ -1,20 +0,0 @@
----
-title: Donate Form
-description: A form to encourage donations.
-tags: depracted
----
-
-We usualy put this form inside a modal.
-
-::: sample-card
-<div class="p-4 text-center">
-  <button class="btn btn-info fw-bold" @click="$refs.formModal.show()">
-    Click to see the form
-  </button>
-</div>
-<b-modal hide-footer lazy title="Support ICIJ" ref="formModal" size="lg" no-headings>
-  <donate-form no-title></donate-form>
-</b-modal>
-:::
-
-::: api-table components/DonateForm.vue :::

package/docs/pages/components/embed-form/doc.md

@@ -1,22 +0,0 @@
----
-title: Embed Form
----
-
-::: sample-card
-<embed-form url="https://projects.icij.org/the-implant-files/graphics/#/device-related-incidents-in-europe" :height="330" no-preview class="card card-sm mx-auto my-4 pt-2"></embed-form>
-:::
-
-We usualy put this form inside a modal (here, with Boostrap Vue).
-
-::: sample-card
-<div class="p-4 text-center">
-  <button class="btn btn-info fw-bold" @click="$refs.formModal.show()">
-    Click to see the form with preview
-  </button>
-</div>
-<b-modal hide-footer lazy title="Embed form with a preview" ref="formModal" size="lg">
-  <embed-form no-title url="https://projects.icij.org/the-implant-files/graphics/#/device-related-incidents-in-europe?no-embeddable-footer=1" :height="550"></embed-form>
-</b-modal>
-:::
-
-::: api-table components/EmbedForm.vue :::

package/docs/pages/components/embeddable-footer/doc.md

@@ -1,60 +0,0 @@
-::: sample-card
-<template>
-  <div class="p-4">
-    <embeddable-footer class="position-relative card"></embeddable-footer>
-  </div>
-</template>
-:::
-
-Main slot is displayed as "lead" text:
-
-::: sample-card
-<div class="p-4">
-  <embeddable-footer class="position-relative card">
-    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-  </embeddable-footer>
-</div>
-:::
-
-A title slot can also be provider:
-
-::: sample-card
-<div class="p-4">
-  <embeddable-footer class="position-relative card">
-    <template #title>
-      <span class="small">Demo<br />Project</span>
-    </template>
-  </embeddable-footer>
-</div>
-:::
-
-This can be used for more complex structures:
-
-::: sample-card
-<template>
-  <div class="p-4">
-    <embeddable-footer class="position-relative card">
-      <div class="d-flex align-items-center">
-        <div class="flew-grow-1 mr-2">
-          This is an helpful text.
-        </div>
-        <b-button variant="info" pill size="sm" class="ml-auto mr-2">
-          Help
-        </b-button>
-      </div>
-    </embeddable-footer>
-  </div>
-</template>
-:::
-
-::: api-table components/EmbeddableFooter.vue :::
-
-<script>
-  export default {
-    data () {
-      return {
-         url: 'https://www.reddit.com/submit?url=https%3A%2F%2Ficij.org'
-      }
-    }
-  }
-</script>

package/docs/pages/components/follow-us-popover/doc.md

@@ -1,5 +0,0 @@
-::: sample-card
-<follow-us-popover class="card card-xs my-4 mx-auto border border-primary"></follow-us-popover>
-:::
-
-::: api-table components/FollowUsPopover.vue :::

package/docs/pages/components/generic-footer/doc.md

@@ -1,21 +0,0 @@
----
-title: Generic Footer
----
-
-::: sample-card
-<div class="full-width">
-  <generic-footer class="card m-4"></generic-footer>
-</div>
-:::
-
-::: api-table components/GenericFooter.vue :::
-
-<style lang="scss" scoped>
-  .full-width {
-    overflow: auto;
-
-    .generic-footer {
-      width: 100vw;
-    }
-  }
-</style>